Mirrored_Repos/InvokeAI
1
0
Fork 0
mirror of https://github.com/invoke-ai/InvokeAI synced 2024-08-30 20:32:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

chore(ui): format

Browse Source 
Lots of changed bc the line length is now 120. May as well do it now.
This commit is contained in:
psychedelicious
2024-01-27 20:55:55 +11:00
parent b922ee566a
commit 189c430e46
568 changed files with 3602 additions and 11172 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
invokeai/frontend/web/src/features/system/components/AboutModal/AboutModal.tsx
View File

@ -16,20 +16,13 @@ import {
useDisclosure,
} from '@invoke-ai/ui-library';
import ScrollableContent from 'common/components/OverlayScrollbars/ScrollableContent';
import {
discordLink,
githubLink,
websiteLink,
} from 'features/system/store/constants';
import { discordLink, githubLink, websiteLink } from 'features/system/store/constants';
import { map } from 'lodash-es';
import InvokeLogoYellow from 'public/assets/images/invoke-tag-lrg.svg';
import type { ReactElement } from 'react';
import { cloneElement, memo } from 'react';
import { useTranslation } from 'react-i18next';
import {
useGetAppDepsQuery,
useGetAppVersionQuery,
} from 'services/api/endpoints/appInfo';
import { useGetAppDepsQuery, useGetAppVersionQuery } from 'services/api/endpoints/appInfo';
type AboutModalProps = {
/* The button to open the Settings Modal */
@ -58,60 +51,29 @@ const AboutModal = ({ children }: AboutModalProps) => {
<ModalCloseButton />
<ModalBody display="flex" flexDir="column" gap={4}>
<Grid templateColumns="repeat(2, 1fr)" h="full">
<GridItem
backgroundColor="base.750"
borderRadius="base"
p="4"
h="full"
>
<GridItem backgroundColor="base.750" borderRadius="base" p="4" h="full">
<ScrollableContent>
<Heading
position="sticky"
top="0"
backgroundColor="base.750"
size="md"
p="1"
>
<Heading position="sticky" top="0" backgroundColor="base.750" size="md" p="1">
{t('common.localSystem')}
</Heading>
{deps.map(({ name, version }, i) => (
<Grid
key={i}
py="2"
px="1"
w="full"
templateColumns="repeat(2, 1fr)"
>
<Grid key={i} py="2" px="1" w="full" templateColumns="repeat(2, 1fr)">
<Text>{name}</Text>
<Text>
{version ? version : t('common.notInstalled')}
</Text>
<Text>{version ? version : t('common.notInstalled')}</Text>
</Grid>
))}
</ScrollableContent>
</GridItem>
<GridItem>
<Flex
flexDir="column"
gap={3}
justifyContent="center"
alignItems="center"
h="full"
>
<Flex flexDir="column" gap={3} justifyContent="center" alignItems="center" h="full">
<Image src={InvokeLogoYellow} alt="invoke-logo" w="120px" />
{appVersion && <Text>{`v${appVersion?.version}`}</Text>}
<Grid templateColumns="repeat(2, 1fr)" gap="3">
<GridItem>
<ExternalLink
href={githubLink}
label={t('common.githubLabel')}
/>
<ExternalLink href={githubLink} label={t('common.githubLabel')} />
</GridItem>
<GridItem>
<ExternalLink
href={discordLink}
label={t('common.discordLabel')}
/>
<ExternalLink href={discordLink} label={t('common.discordLabel')} />
</GridItem>
</Grid>
<Heading fontSize="large">{t('common.aboutHeading')}</Heading>

5
invokeai/frontend/web/src/features/system/components/HotkeysModal/HotkeyListItem.tsx
View File

@ -21,10 +21,7 @@ const HotkeyListItem = (props: HotkeysModalProps) => {
<Fragment key={`${hotkey}-${index}`}>
{hotkey.map((key, index) => (
<>
<Kbd
textTransform="lowercase"
key={`${hotkey}-${key}-${index}`}
>
<Kbd textTransform="lowercase" key={`${hotkey}-${key}-${index}`}>
{key}
</Kbd>
{index !== hotkey.length - 1 && (

37
invokeai/frontend/web/src/features/system/components/HotkeysModal/HotkeysModal.tsx
View File

@ -20,14 +20,7 @@ import type { HotkeyGroup } from 'features/system/components/HotkeysModal/useHot
import { useHotkeyData } from 'features/system/components/HotkeysModal/useHotkeyData';
import { StickyScrollable } from 'features/system/components/StickyScrollable';
import type { ChangeEventHandler, ReactElement } from 'react';
import {
cloneElement,
Fragment,
memo,
useCallback,
useMemo,
useState,
} from 'react';
import { cloneElement, Fragment, memo, useCallback, useMemo, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { PiXBold } from 'react-icons/pi';
@ -43,10 +36,7 @@ const HotkeysModal = ({ children }: HotkeysModalProps) => {
const { t } = useTranslation();
const [hotkeyFilter, setHotkeyFilter] = useState('');
const clearHotkeyFilter = useCallback(() => setHotkeyFilter(''), []);
const onChange = useCallback<ChangeEventHandler<HTMLInputElement>>(
(e) => setHotkeyFilter(e.target.value),
[]
);
const onChange = useCallback<ChangeEventHandler<HTMLInputElement>>((e) => setHotkeyFilter(e.target.value), []);
const hotkeyGroups = useHotkeyData();
const filteredHotkeyGroups = useMemo(() => {
if (!hotkeyFilter.trim().length) {
@ -63,11 +53,7 @@ const HotkeysModal = ({ children }: HotkeysModalProps) => {
if (
item.title.toLowerCase().includes(trimmedHotkeyFilter) ||
item.desc.toLowerCase().includes(trimmedHotkeyFilter) ||
item.hotkeys.some((hotkey) =>
hotkey.some((key) =>
key.toLowerCase().includes(trimmedHotkeyFilter)
)
)
item.hotkeys.some((hotkey) => hotkey.some((key) => key.toLowerCase().includes(trimmedHotkeyFilter)))
) {
filteredGroup.hotkeyListItems.push(item);
}
@ -91,11 +77,7 @@ const HotkeysModal = ({ children }: HotkeysModalProps) => {
<ModalCloseButton />
<ModalBody display="flex" flexDir="column" gap={4}>
<InputGroup>
<Input
placeholder={t('hotkeys.searchHotkeys')}
value={hotkeyFilter}
onChange={onChange}
/>
<Input placeholder={t('hotkeys.searchHotkeys')} value={hotkeyFilter} onChange={onChange} />
{hotkeyFilter.length && (
<InputRightElement h="full" pe={2}>
<IconButton
@ -116,21 +98,14 @@ const HotkeysModal = ({ children }: HotkeysModalProps) => {
<StickyScrollable key={group.title} title={group.title}>
{group.hotkeyListItems.map((hotkey, i) => (
<Fragment key={i}>
<HotkeyListItem
title={hotkey.title}
description={hotkey.desc}
hotkeys={hotkey.hotkeys}
/>
<HotkeyListItem title={hotkey.title} description={hotkey.desc} hotkeys={hotkey.hotkeys} />
{i < group.hotkeyListItems.length - 1 && <Divider />}
</Fragment>
))}
</StickyScrollable>
))}
{!filteredHotkeyGroups.length && (
<IAINoContentFallback
label={t('hotkeys.noHotkeysFound')}
icon={null}
/>
<IAINoContentFallback label={t('hotkeys.noHotkeysFound')} icon={null} />
)}
</Flex>
</ScrollableContent>

16
invokeai/frontend/web/src/features/system/components/HotkeysModal/useHotkeyData.ts
View File

@ -312,20 +312,8 @@ export const useHotkeyData = (): HotkeyGroup[] => {
);
const hotkeyGroups = useMemo<HotkeyGroup[]>(
() => [
appHotkeys,
generalHotkeys,
galleryHotkeys,
unifiedCanvasHotkeys,
nodesHotkeys,
],
[
appHotkeys,
generalHotkeys,
galleryHotkeys,
unifiedCanvasHotkeys,
nodesHotkeys,
]
() => [appHotkeys, generalHotkeys, galleryHotkeys, unifiedCanvasHotkeys, nodesHotkeys],
[appHotkeys, generalHotkeys, galleryHotkeys, unifiedCanvasHotkeys, nodesHotkeys]
);
return hotkeyGroups;

4
invokeai/frontend/web/src/features/system/components/ProgressBar.tsx
View File

@ -22,9 +22,7 @@ const ProgressBar = () => {
<Progress
value={value}
aria-label={t('accessibility.invokeProgressBar')}
isIndeterminate={
isConnected && Boolean(queueStatus?.queue.in_progress) && !hasSteps
}
isIndeterminate={isConnected && Boolean(queueStatus?.queue.in_progress) && !hasSteps}
h={2}
w="full"
colorScheme="invokeBlue"

8
invokeai/frontend/web/src/features/system/components/SettingsModal/SettingsLanguageSelect.tsx
View File

@ -35,13 +35,9 @@ export const SettingsLanguageSelect = memo(() => {
],
[t]
);
const isLocalizationEnabled =
useFeatureStatus('localization').isFeatureEnabled;
const isLocalizationEnabled = useFeatureStatus('localization').isFeatureEnabled;
const value = useMemo(
() => options.find((o) => o.value === language),
[language, options]
);
const value = useMemo(() => options.find((o) => o.value === language), [language, options]);
const onChange = useCallback<ComboboxOnChange>(
(v) => {

10
invokeai/frontend/web/src/features/system/components/SettingsModal/SettingsLogLevelSelect.tsx
View File

@ -11,15 +11,9 @@ export const SettingsLogLevelSelect = memo(() => {
const dispatch = useAppDispatch();
const consoleLogLevel = useAppSelector((s) => s.system.consoleLogLevel);
const shouldLogToConsole = useAppSelector((s) => s.system.shouldLogToConsole);
const options = useMemo(
() => zLogLevel.options.map((o) => ({ label: o, value: o })),
[]
);
const options = useMemo(() => zLogLevel.options.map((o) => ({ label: o, value: o })), []);
const value = useMemo(
() => options.find((o) => o.value === consoleLogLevel),
[consoleLogLevel, options]
);
const value = useMemo(() => options.find((o) => o.value === consoleLogLevel), [consoleLogLevel, options]);
const onChange = useCallback<ComboboxOnChange>(
(v) => {

28
invokeai/frontend/web/src/features/system/components/SettingsModal/SettingsMenu.tsx
View File

@ -14,12 +14,7 @@ import { useFeatureStatus } from 'features/system/hooks/useFeatureStatus';
import { discordLink, githubLink } from 'features/system/store/constants';
import { memo } from 'react';
import { useTranslation } from 'react-i18next';
import {
PiBugBeetleBold,
PiInfoBold,
PiKeyboardBold,
PiToggleRightFill,
} from 'react-icons/pi';
import { PiBugBeetleBold, PiInfoBold, PiKeyboardBold, PiToggleRightFill } from 'react-icons/pi';
import { RiDiscordFill, RiGithubFill, RiSettings4Line } from 'react-icons/ri';
import SettingsModal from './SettingsModal';
@ -45,32 +40,17 @@ const SettingsMenu = () => {
<MenuList>
<MenuGroup title={t('common.communityLabel')}>
{isGithubLinkEnabled && (
<MenuItem
as="a"
href={githubLink}
target="_blank"
icon={<RiGithubFill />}
>
<MenuItem as="a" href={githubLink} target="_blank" icon={<RiGithubFill />}>
{t('common.githubLabel')}
</MenuItem>
)}
{isBugLinkEnabled && (
<MenuItem
as="a"
href={`${githubLink}/issues`}
target="_blank"
icon={<PiBugBeetleBold />}
>
<MenuItem as="a" href={`${githubLink}/issues`} target="_blank" icon={<PiBugBeetleBold />}>
{t('common.reportBugLabel')}
</MenuItem>
)}
{isDiscordLinkEnabled && (
<MenuItem
as="a"
href={discordLink}
target="_blank"
icon={<RiDiscordFill />}
>
<MenuItem as="a" href={discordLink} target="_blank" icon={<RiDiscordFill />}>
{t('common.discordLabel')}
</MenuItem>
)}

163
invokeai/frontend/web/src/features/system/components/SettingsModal/SettingsModal.tsx
View File

@ -58,13 +58,10 @@ const SettingsModal = ({ children, config }: SettingsModalProps) => {
const { t } = useTranslation();
const [countdown, setCountdown] = useState(3);
const shouldShowDeveloperSettings =
config?.shouldShowDeveloperSettings ?? true;
const shouldShowDeveloperSettings = config?.shouldShowDeveloperSettings ?? true;
const shouldShowResetWebUiText = config?.shouldShowResetWebUiText ?? true;
const shouldShowClearIntermediates =
config?.shouldShowClearIntermediates ?? true;
const shouldShowLocalizationToggle =
config?.shouldShowLocalizationToggle ?? true;
const shouldShowClearIntermediates = config?.shouldShowClearIntermediates ?? true;
const shouldShowLocalizationToggle = config?.shouldShowLocalizationToggle ?? true;
useEffect(() => {
if (!shouldShowDeveloperSettings) {
@ -72,15 +69,12 @@ const SettingsModal = ({ children, config }: SettingsModalProps) => {
}
}, [shouldShowDeveloperSettings, dispatch]);
const { isNSFWCheckerAvailable, isWatermarkerAvailable } =
useGetAppConfigQuery(undefined, {
selectFromResult: ({ data }) => ({
isNSFWCheckerAvailable:
data?.nsfw_methods.includes('nsfw_checker') ?? false,
isWatermarkerAvailable:
data?.watermarking_methods.includes('invisible_watermark') ?? false,
}),
});
const { isNSFWCheckerAvailable, isWatermarkerAvailable } = useGetAppConfigQuery(undefined, {
selectFromResult: ({ data }) => ({
isNSFWCheckerAvailable: data?.nsfw_methods.includes('nsfw_checker') ?? false,
isWatermarkerAvailable: data?.watermarking_methods.includes('invisible_watermark') ?? false,
}),
});
const {
clearIntermediates,
@ -89,43 +83,19 @@ const SettingsModal = ({ children, config }: SettingsModalProps) => {
isLoading: isLoadingClearIntermediates,
} = useClearIntermediates(shouldShowClearIntermediates);
const {
isOpen: isSettingsModalOpen,
onOpen: onSettingsModalOpen,
onClose: onSettingsModalClose,
} = useDisclosure();
const { isOpen: isSettingsModalOpen, onOpen: onSettingsModalOpen, onClose: onSettingsModalClose } = useDisclosure();
const {
isOpen: isRefreshModalOpen,
onOpen: onRefreshModalOpen,
onClose: onRefreshModalClose,
} = useDisclosure();
const { isOpen: isRefreshModalOpen, onOpen: onRefreshModalOpen, onClose: onRefreshModalClose } = useDisclosure();
const shouldUseCpuNoise = useAppSelector(
(s) => s.generation.shouldUseCpuNoise
);
const shouldConfirmOnDelete = useAppSelector(
(s) => s.system.shouldConfirmOnDelete
);
const enableImageDebugging = useAppSelector(
(s) => s.system.enableImageDebugging
);
const shouldShowProgressInViewer = useAppSelector(
(s) => s.ui.shouldShowProgressInViewer
);
const shouldUseCpuNoise = useAppSelector((s) => s.generation.shouldUseCpuNoise);
const shouldConfirmOnDelete = useAppSelector((s) => s.system.shouldConfirmOnDelete);
const enableImageDebugging = useAppSelector((s) => s.system.enableImageDebugging);
const shouldShowProgressInViewer = useAppSelector((s) => s.ui.shouldShowProgressInViewer);
const shouldLogToConsole = useAppSelector((s) => s.system.shouldLogToConsole);
const shouldAntialiasProgressImage = useAppSelector(
(s) => s.system.shouldAntialiasProgressImage
);
const shouldUseNSFWChecker = useAppSelector(
(s) => s.system.shouldUseNSFWChecker
);
const shouldUseWatermarker = useAppSelector(
(s) => s.system.shouldUseWatermarker
);
const shouldEnableInformationalPopovers = useAppSelector(
(s) => s.system.shouldEnableInformationalPopovers
);
const shouldAntialiasProgressImage = useAppSelector((s) => s.system.shouldAntialiasProgressImage);
const shouldUseNSFWChecker = useAppSelector((s) => s.system.shouldUseNSFWChecker);
const shouldUseWatermarker = useAppSelector((s) => s.system.shouldUseWatermarker);
const shouldEnableInformationalPopovers = useAppSelector((s) => s.system.shouldEnableInformationalPopovers);
const clearStorage = useClearStorage();
@ -204,12 +174,7 @@ const SettingsModal = ({ children, config }: SettingsModalProps) => {
onClick: onSettingsModalOpen,
})}
<Modal
isOpen={isSettingsModalOpen}
onClose={onSettingsModalClose}
size="2xl"
isCentered
>
<Modal isOpen={isSettingsModalOpen} onClose={onSettingsModalClose} size="2xl" isCentered>
<ModalOverlay />
<ModalContent maxH="80vh" h="68rem">
<ModalHeader bg="none">{t('common.settingsLabel')}</ModalHeader>
@ -221,68 +186,45 @@ const SettingsModal = ({ children, config }: SettingsModalProps) => {
<StickyScrollable title={t('settings.general')}>
<FormControl>
<FormLabel>{t('settings.confirmOnDelete')}</FormLabel>
<Switch
isChecked={shouldConfirmOnDelete}
onChange={handleChangeShouldConfirmOnDelete}
/>
<Switch isChecked={shouldConfirmOnDelete} onChange={handleChangeShouldConfirmOnDelete} />
</FormControl>
</StickyScrollable>
<StickyScrollable title={t('settings.generation')}>
<FormControl isDisabled={!isNSFWCheckerAvailable}>
<FormLabel>{t('settings.enableNSFWChecker')}</FormLabel>
<Switch
isChecked={shouldUseNSFWChecker}
onChange={handleChangeShouldUseNSFWChecker}
/>
<Switch isChecked={shouldUseNSFWChecker} onChange={handleChangeShouldUseNSFWChecker} />
</FormControl>
<FormControl isDisabled={!isWatermarkerAvailable}>
<FormLabel>
{t('settings.enableInvisibleWatermark')}
</FormLabel>
<Switch
isChecked={shouldUseWatermarker}
onChange={handleChangeShouldUseWatermarker}
/>
<FormLabel>{t('settings.enableInvisibleWatermark')}</FormLabel>
<Switch isChecked={shouldUseWatermarker} onChange={handleChangeShouldUseWatermarker} />
</FormControl>
</StickyScrollable>
<StickyScrollable title={t('settings.ui')}>
<FormControl>
<FormLabel>
{t('settings.showProgressInViewer')}
</FormLabel>
<FormLabel>{t('settings.showProgressInViewer')}</FormLabel>
<Switch
isChecked={shouldShowProgressInViewer}
onChange={handleChangeShouldShowProgressInViewer}
/>
</FormControl>
<FormControl>
<FormLabel>
{t('settings.antialiasProgressImages')}
</FormLabel>
<FormLabel>{t('settings.antialiasProgressImages')}</FormLabel>
<Switch
isChecked={shouldAntialiasProgressImage}
onChange={handleChangeShouldAntialiasProgressImage}
/>
</FormControl>
<FormControl>
<InformationalPopover
feature="noiseUseCPU"
inPortal={false}
>
<InformationalPopover feature="noiseUseCPU" inPortal={false}>
<FormLabel>{t('parameters.useCpuNoise')}</FormLabel>
</InformationalPopover>
<Switch
isChecked={shouldUseCpuNoise}
onChange={handleChangeShouldUseCpuNoise}
/>
<Switch isChecked={shouldUseCpuNoise} onChange={handleChangeShouldUseCpuNoise} />
</FormControl>
{shouldShowLocalizationToggle && <SettingsLanguageSelect />}
<FormControl>
<FormLabel>
{t('settings.enableInformationalPopovers')}
</FormLabel>
<FormLabel>{t('settings.enableInformationalPopovers')}</FormLabel>
<Switch
isChecked={shouldEnableInformationalPopovers}
onChange={handleChangeShouldEnableInformationalPopovers}
@ -293,23 +235,13 @@ const SettingsModal = ({ children, config }: SettingsModalProps) => {
{shouldShowDeveloperSettings && (
<StickyScrollable title={t('settings.developer')}>
<FormControl>
<FormLabel>
{t('settings.shouldLogToConsole')}
</FormLabel>
<Switch
isChecked={shouldLogToConsole}
onChange={handleLogToConsoleChanged}
/>
<FormLabel>{t('settings.shouldLogToConsole')}</FormLabel>
<Switch isChecked={shouldLogToConsole} onChange={handleLogToConsoleChanged} />
</FormControl>
<SettingsLogLevelSelect />
<FormControl>
<FormLabel>
{t('settings.enableImageDebugging')}
</FormLabel>
<Switch
isChecked={enableImageDebugging}
onChange={handleChangeEnableImageDebugging}
/>
<FormLabel>{t('settings.enableImageDebugging')}</FormLabel>
<Switch isChecked={enableImageDebugging} onChange={handleChangeEnableImageDebugging} />
</FormControl>
</StickyScrollable>
)}
@ -317,11 +249,7 @@ const SettingsModal = ({ children, config }: SettingsModalProps) => {
{shouldShowClearIntermediates && (
<StickyScrollable title={t('settings.clearIntermediates')}>
<Button
tooltip={
hasPendingItems
? t('settings.clearIntermediatesDisabled')
: undefined
}
tooltip={hasPendingItems ? t('settings.clearIntermediatesDisabled') : undefined}
colorScheme="warning"
onClick={clearIntermediates}
isLoading={isLoadingClearIntermediates}
@ -331,15 +259,9 @@ const SettingsModal = ({ children, config }: SettingsModalProps) => {
count: intermediatesCount ?? 0,
})}
</Button>
<Text fontWeight="bold">
{t('settings.clearIntermediatesDesc1')}
</Text>
<Text variant="subtext">
{t('settings.clearIntermediatesDesc2')}
</Text>
<Text variant="subtext">
{t('settings.clearIntermediatesDesc3')}
</Text>
<Text fontWeight="bold">{t('settings.clearIntermediatesDesc1')}</Text>
<Text variant="subtext">{t('settings.clearIntermediatesDesc2')}</Text>
<Text variant="subtext">{t('settings.clearIntermediatesDesc3')}</Text>
</StickyScrollable>
)}
@ -349,12 +271,8 @@ const SettingsModal = ({ children, config }: SettingsModalProps) => {
</Button>
{shouldShowResetWebUiText && (
<>
<Text variant="subtext">
{t('settings.resetWebUIDesc1')}
</Text>
<Text variant="subtext">
{t('settings.resetWebUIDesc2')}
</Text>
<Text variant="subtext">{t('settings.resetWebUIDesc1')}</Text>
<Text variant="subtext">{t('settings.resetWebUIDesc2')}</Text>
</>
)}
</StickyScrollable>
@ -381,8 +299,7 @@ const SettingsModal = ({ children, config }: SettingsModalProps) => {
<Flex justifyContent="center">
<Text fontSize="lg">
<Text>
{t('settings.resetComplete')} {t('settings.reloadingIn')}{' '}
{countdown}...
{t('settings.resetComplete')} {t('settings.reloadingIn')} {countdown}...
</Text>
</Text>
</Flex>

8
invokeai/frontend/web/src/features/system/components/SettingsModal/StyledFlex.tsx
View File

@ -4,13 +4,7 @@ import { memo } from 'react';
const StyledFlex = (props: PropsWithChildren) => {
return (
<Flex
flexDirection="column"
gap={2}
p={4}
borderRadius="base"
bg="base.900"
>
<Flex flexDirection="column" gap={2} p={4} borderRadius="base" bg="base.900">
{props.children}
</Flex>
);

26
invokeai/frontend/web/src/features/system/components/SettingsModal/useClearIntermediates.ts
View File

@ -4,10 +4,7 @@ import { controlAdaptersReset } from 'features/controlAdapters/store/controlAdap
import { addToast } from 'features/system/store/systemSlice';
import { useCallback, useMemo } from 'react';
import { useTranslation } from 'react-i18next';
import {
useClearIntermediatesMutation,
useGetIntermediatesCountQuery,
} from 'services/api/endpoints/images';
import { useClearIntermediatesMutation, useGetIntermediatesCountQuery } from 'services/api/endpoints/images';
import { useGetQueueStatusQuery } from 'services/api/endpoints/queue';
export type UseClearIntermediatesReturn = {
@ -17,29 +14,20 @@ export type UseClearIntermediatesReturn = {
hasPendingItems: boolean;
};
export const useClearIntermediates = (
shouldShowClearIntermediates: boolean
): UseClearIntermediatesReturn => {
export const useClearIntermediates = (shouldShowClearIntermediates: boolean): UseClearIntermediatesReturn => {
const { t } = useTranslation();
const dispatch = useAppDispatch();
const { data: intermediatesCount } = useGetIntermediatesCountQuery(
undefined,
{
refetchOnMountOrArgChange: true,
skip: !shouldShowClearIntermediates,
}
);
const { data: intermediatesCount } = useGetIntermediatesCountQuery(undefined, {
refetchOnMountOrArgChange: true,
skip: !shouldShowClearIntermediates,
});
const [_clearIntermediates, { isLoading }] = useClearIntermediatesMutation();
const { data: queueStatus } = useGetQueueStatusQuery();
const hasPendingItems = useMemo(
() =>
Boolean(
queueStatus &&
(queueStatus.queue.in_progress > 0 || queueStatus.queue.pending > 0)
),
() => Boolean(queueStatus && (queueStatus.queue.in_progress > 0 || queueStatus.queue.pending > 0)),
[queueStatus]
);

7
invokeai/frontend/web/src/features/system/components/StatusIndicator.tsx
View File

@ -10,12 +10,7 @@ const StatusIndicator = () => {
if (!isConnected) {
return (
<Tooltip
label={t('common.statusDisconnected')}
placement="end"
shouldWrapChildren
gutter={10}
>
<Tooltip label={t('common.statusDisconnected')} placement="end" shouldWrapChildren gutter={10}>
<Icon as={PiWarningBold} color="error.300" />
</Tooltip>
);

32
invokeai/frontend/web/src/features/system/components/StickyScrollable.tsx
View File

@ -6,29 +6,25 @@ export type StickyScrollableHeadingProps = {
title: string;
};
export const StickyScrollableHeading = memo(
(props: StickyScrollableHeadingProps) => {
return (
<Flex ps={2} pb={4} position="sticky" zIndex={1} top={0} bg="base.800">
<Heading size="sm">{props.title}</Heading>
</Flex>
);
}
);
export const StickyScrollableHeading = memo((props: StickyScrollableHeadingProps) => {
return (
<Flex ps={2} pb={4} position="sticky" zIndex={1} top={0} bg="base.800">
<Heading size="sm">{props.title}</Heading>
</Flex>
);
});
StickyScrollableHeading.displayName = 'StickyScrollableHeading';
export type StickyScrollableContentProps = PropsWithChildren;
export const StickyScrollableContent = memo(
(props: StickyScrollableContentProps) => {
return (
<Flex p={4} borderRadius="base" bg="base.750" flexDir="column" gap={4}>
{props.children}
</Flex>
);
}
);
export const StickyScrollableContent = memo((props: StickyScrollableContentProps) => {
return (
<Flex p={4} borderRadius="base" bg="base.750" flexDir="column" gap={4}>
{props.children}
</Flex>
);
});
StickyScrollableContent.displayName = 'StickyScrollableContent';

4
invokeai/frontend/web/src/features/system/hooks/useFeatureStatus.ts
View File

@ -3,9 +3,7 @@ import type { AppFeature, SDFeature } from 'app/types/invokeai';
import type { InvokeTabName } from 'features/ui/store/tabMap';
import { useMemo } from 'react';
export const useFeatureStatus = (
feature: AppFeature | SDFeature | InvokeTabName
) => {
export const useFeatureStatus = (feature: AppFeature | SDFeature | InvokeTabName) => {
const disabledTabs = useAppSelector((s) => s.config.disabledTabs);
const disabledFeatures = useAppSelector((s) => s.config.disabledFeatures);

14
invokeai/frontend/web/src/features/system/store/configSlice.ts
View File

@ -1,11 +1,7 @@
import type { PayloadAction } from '@reduxjs/toolkit';
import { createSlice } from '@reduxjs/toolkit';
import type { RootState } from 'app/store/store';
import type {
AppConfig,
NumericalParameterConfig,
PartialAppConfig,
} from 'app/types/invokeai';
import type { AppConfig, NumericalParameterConfig, PartialAppConfig } from 'app/types/invokeai';
import { merge } from 'lodash-es';
const baseDimensionConfig: NumericalParameterConfig = {
@ -23,13 +19,7 @@ export const initialConfigState: AppConfig = {
shouldFetchMetadataFromApi: false,
disabledTabs: [],
disabledFeatures: ['lightbox', 'faceRestore', 'batches', 'bulkDownload'],
disabledSDFeatures: [
'variation',
'symmetry',
'hires',
'perlinNoise',
'noiseThreshold',
],
disabledSDFeatures: ['variation', 'symmetry', 'hires', 'perlinNoise', 'noiseThreshold'],
nodesAllowlist: undefined,
nodesDenylist: undefined,
canRestoreDeletedImagesFromBin: true,

6
invokeai/frontend/web/src/features/system/store/systemPersistDenylist.ts
View File

@ -1,7 +1,3 @@
import type { SystemState } from './types';
export const systemPersistDenylist: (keyof SystemState)[] = [
'isConnected',
'denoiseProgress',
'status',
];
export const systemPersistDenylist: (keyof SystemState)[] = ['isConnected', 'denoiseProgress', 'status'];

5
invokeai/frontend/web/src/features/system/store/systemSelectors.ts
View File

@ -1,7 +1,4 @@
import { createSelector } from '@reduxjs/toolkit';
import { selectSystemSlice } from 'features/system/store/systemSlice';
export const languageSelector = createSelector(
selectSystemSlice,
(system) => system.language
);
export const languageSelector = createSelector(selectSystemSlice, (system) => system.language);

22
invokeai/frontend/web/src/features/system/store/systemSlice.ts
View File

@ -63,10 +63,7 @@ export const systemSlice = createSlice({
shouldLogToConsoleChanged: (state, action: PayloadAction<boolean>) => {
state.shouldLogToConsole = action.payload;
},
shouldAntialiasProgressImageChanged: (
state,
action: PayloadAction<boolean>
) => {
shouldAntialiasProgressImageChanged: (state, action: PayloadAction<boolean>) => {
state.shouldAntialiasProgressImage = action.payload;
},
languageChanged: (state, action: PayloadAction<Language>) => {
@ -78,10 +75,7 @@ export const systemSlice = createSlice({
shouldUseWatermarkerChanged(state, action: PayloadAction<boolean>) {
state.shouldUseWatermarker = action.payload;
},
setShouldEnableInformationalPopovers(
state,
action: PayloadAction<boolean>
) {
setShouldEnableInformationalPopovers(state, action: PayloadAction<boolean>) {
state.shouldEnableInformationalPopovers = action.payload;
},
},
@ -163,11 +157,7 @@ export const systemSlice = createSlice({
});
builder.addCase(socketQueueItemStatusChanged, (state, action) => {
if (
['completed', 'canceled', 'failed'].includes(
action.payload.data.queue_item.status
)
) {
if (['completed', 'canceled', 'failed'].includes(action.payload.data.queue_item.status)) {
state.status = 'CONNECTED';
state.denoiseProgress = null;
}
@ -206,11 +196,7 @@ export const {
export default systemSlice.reducer;
const isAnyServerError = isAnyOf(
socketInvocationError,
socketSessionRetrievalError,
socketInvocationRetrievalError
);
const isAnyServerError = isAnyOf(socketInvocationError, socketSessionRetrievalError, socketInvocationRetrievalError);
export const selectSystemSlice = (state: RootState) => state.system;

10
invokeai/frontend/web/src/features/system/store/types.ts
View File

@ -3,12 +3,7 @@ import type { LogLevel } from 'app/logging/logger';
import type { ProgressImage } from 'services/events/types';
import { z } from 'zod';
export type SystemStatus =
| 'CONNECTED'
| 'DISCONNECTED'
| 'PROCESSING'
| 'ERROR'
| 'LOADING_MODEL';
export type SystemStatus = 'CONNECTED' | 'DISCONNECTED' | 'PROCESSING' | 'ERROR' | 'LOADING_MODEL';
export type DenoiseProgress = {
session_id: string;
@ -39,8 +34,7 @@ export const zLanguage = z.enum([
'uk',
]);
export type Language = z.infer<typeof zLanguage>;
export const isLanguage = (v: unknown): v is Language =>
zLanguage.safeParse(v).success;
export const isLanguage = (v: unknown): v is Language => zLanguage.safeParse(v).success;
export interface SystemState {
_version: 1;

6
invokeai/frontend/web/src/features/system/util/calculateStepPercentage.ts
View File

@ -1,8 +1,4 @@
export const calculateStepPercentage = (
step: number,
total_steps: number,
order: number
) => {
export const calculateStepPercentage = (step: number, total_steps: number, order: number) => {
if (total_steps === 0) {
return 0;
}

5
invokeai/frontend/web/src/features/system/util/copyBlobToClipboard.ts
View File

@ -1,10 +1,7 @@
/**
* Copies a blob to the clipboard by calling navigator.clipboard.write().
*/
export const copyBlobToClipboard = (
blob: Promise<Blob> | Blob,
type = 'image/png'
) => {
export const copyBlobToClipboard = (blob: Promise<Blob> | Blob, type = 'image/png') => {
navigator.clipboard.write([
new ClipboardItem({
[type]: blob,