Merge branch 'main' into main

invokeai/app/services/config.py

@@ -277,7 +277,7 @@ class InvokeAISettings(BaseSettings):
     @classmethod
     def _excluded_from_yaml(self)->List[str]:
         # combination of deprecated parameters and internal ones that shouldn't be exposed as invokeai.yaml options
-        return ['type','initconf', 'gpu_mem_reserved', 'max_loaded_models', 'version', 'from_file', 'model', 'restore']
+        return ['type','initconf', 'gpu_mem_reserved', 'max_loaded_models', 'version', 'from_file', 'model', 'restore', 'root']
 
     class Config:
         env_file_encoding = 'utf-8'
@@ -446,7 +446,7 @@ setting environment variables INVOKEAI_<setting>.
         Path to the runtime root directory
         '''
         if self.root:
-            return Path(self.root).expanduser()
+            return Path(self.root).expanduser().absolute()
         else:
             return self.find_root()
 

invokeai/backend/model_management/model_probe.py

@@ -39,6 +39,7 @@ class ModelProbe(object):
 
     CLASS2TYPE = {
         'StableDiffusionPipeline' : ModelType.Main,
+        'StableDiffusionInpaintPipeline' : ModelType.Main,
         'StableDiffusionXLPipeline' : ModelType.Main,
         'StableDiffusionXLImg2ImgPipeline' : ModelType.Main,
         'AutoencoderKL' : ModelType.Vae,
@@ -401,7 +402,7 @@ class PipelineFolderProbe(FolderProbeBase):
                 
             in_channels = conf['in_channels']
             if in_channels == 9:
-                return ModelVariantType.Inpainting
+                return ModelVariantType.Inpaint
             elif in_channels == 5:
                 return ModelVariantType.Depth
             elif in_channels == 4:

invokeai/frontend/web/public/locales/en.json

@@ -547,7 +547,8 @@
         "saveSteps": "Save images every n steps",
         "confirmOnDelete": "Confirm On Delete",
         "displayHelpIcons": "Display Help Icons",
-        "useCanvasBeta": "Use Canvas Beta Layout",
+        "alternateCanvasLayout": "Alternate Canvas Layout",
+        "enableNodesEditor": "Enable Nodes Editor",
         "enableImageDebugging": "Enable Image Debugging",
         "useSlidersForAll": "Use Sliders For All Options",
         "showProgressInViewer": "Show Progress Images in Viewer",
@@ -564,7 +565,9 @@
         "ui": "User Interface",
         "favoriteSchedulers": "Favorite Schedulers",
         "favoriteSchedulersPlaceholder": "No schedulers favorited",
-        "showAdvancedOptions": "Show Advanced Options"
+        "showAdvancedOptions": "Show Advanced Options",
+        "experimental": "Experimental",
+        "beta": "Beta"
     },
     "toast": {
         "serverError": "Server Error",

invokeai/frontend/web/src/common/components/IAISwitch.tsx

@@ -9,7 +9,7 @@ import {
 } from '@chakra-ui/react';
 import { memo } from 'react';
 
-interface Props extends SwitchProps {
+export interface IAISwitchProps extends SwitchProps {
   label?: string;
   width?: string | number;
   formControlProps?: FormControlProps;
@@ -20,7 +20,7 @@ interface Props extends SwitchProps {
 /**
  * Customized Chakra FormControl + Switch multi-part component.
  */
-const IAISwitch = (props: Props) => {
+const IAISwitch = (props: IAISwitchProps) => {
   const {
     label,
     isDisabled = false,

invokeai/frontend/web/src/features/system/components/SettingsModal/SettingSwitch.tsx

@@ -0,0 +1,57 @@
+import { Badge, BadgeProps, Flex, Text, TextProps } from '@chakra-ui/react';
+import IAISwitch, { IAISwitchProps } from 'common/components/IAISwitch';
+import { useTranslation } from 'react-i18next';
+
+type SettingSwitchProps = IAISwitchProps & {
+  label: string;
+  useBadge?: boolean;
+  badgeLabel?: string;
+  textProps?: TextProps;
+  badgeProps?: BadgeProps;
+};
+
+export default function SettingSwitch(props: SettingSwitchProps) {
+  const { t } = useTranslation();
+
+  const {
+    label,
+    textProps,
+    useBadge = false,
+    badgeLabel = t('settings.experimental'),
+    badgeProps,
+    ...rest
+  } = props;
+
+  return (
+    <Flex justifyContent="space-between" py={1}>
+      <Flex gap={2} alignItems="center">
+        <Text
+          sx={{
+            fontSize: 14,
+            _dark: {
+              color: 'base.300',
+            },
+          }}
+          {...textProps}
+        >
+          {label}
+        </Text>
+        {useBadge && (
+          <Badge
+            size="xs"
+            sx={{
+              px: 2,
+              color: 'base.700',
+              bg: 'accent.200',
+              _dark: { bg: 'accent.500', color: 'base.200' },
+            }}
+            {...badgeProps}
+          >
+            {badgeLabel}
+          </Badge>
+        )}
+      </Flex>
+      <IAISwitch {...rest} />
+    </Flex>
+  );
+}

invokeai/frontend/web/src/features/system/components/SettingsModal/SettingsModal.tsx

@@ -11,13 +11,12 @@ import {
   Text,
   useDisclosure,
 } from '@chakra-ui/react';
-import { createSelector, current } from '@reduxjs/toolkit';
+import { createSelector } from '@reduxjs/toolkit';
 import { VALID_LOG_LEVELS } from 'app/logging/useLogger';
 import { LOCALSTORAGE_KEYS, LOCALSTORAGE_PREFIX } from 'app/store/constants';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import IAIButton from 'common/components/IAIButton';
 import IAIMantineSelect from 'common/components/IAIMantineSelect';
-import IAISwitch from 'common/components/IAISwitch';
 import { systemSelector } from 'features/system/store/systemSelectors';
 import {
   SystemState,
@@ -48,8 +47,9 @@ import {
 } from 'react';
 import { useTranslation } from 'react-i18next';
 import { LogLevelName } from 'roarr';
-import SettingsSchedulers from './SettingsSchedulers';
+import SettingSwitch from './SettingSwitch';
 import SettingsClearIntermediates from './SettingsClearIntermediates';
+import SettingsSchedulers from './SettingsSchedulers';
 
 const selector = createSelector(
   [systemSelector, uiSelector],
@@ -206,7 +206,7 @@ const SettingsModal = ({ children, config }: SettingsModalProps) => {
             <Flex sx={{ gap: 4, flexDirection: 'column' }}>
               <StyledFlex>
                 <Heading size="sm">{t('settings.general')}</Heading>
-                <IAISwitch
+                <SettingSwitch
                   label={t('settings.confirmOnDelete')}
                   isChecked={shouldConfirmOnDelete}
                   onChange={(e: ChangeEvent<HTMLInputElement>) =>
@@ -214,7 +214,7 @@ const SettingsModal = ({ children, config }: SettingsModalProps) => {
                   }
                 />
                 {shouldShowAdvancedOptionsSettings && (
-                  <IAISwitch
+                  <SettingSwitch
                     label={t('settings.showAdvancedOptions')}
                     isChecked={shouldShowAdvancedOptions}
                     onChange={(e: ChangeEvent<HTMLInputElement>) =>
@@ -231,37 +231,29 @@ const SettingsModal = ({ children, config }: SettingsModalProps) => {
 
               <StyledFlex>
                 <Heading size="sm">{t('settings.ui')}</Heading>
-                <IAISwitch
+                <SettingSwitch
                   label={t('settings.displayHelpIcons')}
                   isChecked={shouldDisplayGuides}
                   onChange={(e: ChangeEvent<HTMLInputElement>) =>
                     dispatch(setShouldDisplayGuides(e.target.checked))
                   }
                 />
-                {shouldShowBetaLayout && (
-                  <IAISwitch
-                    label={t('settings.useCanvasBeta')}
-                    isChecked={shouldUseCanvasBetaLayout}
-                    onChange={(e: ChangeEvent<HTMLInputElement>) =>
-                      dispatch(setShouldUseCanvasBetaLayout(e.target.checked))
-                    }
-                  />
-                )}
-                <IAISwitch
+
+                <SettingSwitch
                   label={t('settings.useSlidersForAll')}
                   isChecked={shouldUseSliders}
                   onChange={(e: ChangeEvent<HTMLInputElement>) =>
                     dispatch(setShouldUseSliders(e.target.checked))
                   }
                 />
-                <IAISwitch
+                <SettingSwitch
                   label={t('settings.showProgressInViewer')}
                   isChecked={shouldShowProgressInViewer}
                   onChange={(e: ChangeEvent<HTMLInputElement>) =>
                     dispatch(setShouldShowProgressInViewer(e.target.checked))
                   }
                 />
-                <IAISwitch
+                <SettingSwitch
                   label={t('settings.antialiasProgressImages')}
                   isChecked={shouldAntialiasProgressImage}
                   onChange={(e: ChangeEvent<HTMLInputElement>) =>
@@ -270,9 +262,21 @@ const SettingsModal = ({ children, config }: SettingsModalProps) => {
                     )
                   }
                 />
+                {shouldShowBetaLayout && (
+                  <SettingSwitch
+                    label={t('settings.alternateCanvasLayout')}
+                    useBadge
+                    badgeLabel={t('settings.beta')}
+                    isChecked={shouldUseCanvasBetaLayout}
+                    onChange={(e: ChangeEvent<HTMLInputElement>) =>
+                      dispatch(setShouldUseCanvasBetaLayout(e.target.checked))
+                    }
+                  />
+                )}
                 {shouldShowNodesToggle && (
-                  <IAISwitch
-                    label="Enable Nodes Editor (Experimental)"
+                  <SettingSwitch
+                    label={t('settings.enableNodesEditor')}
+                    useBadge
                     isChecked={isNodesEnabled}
                     onChange={handleToggleNodes}
                   />
@@ -282,7 +286,7 @@ const SettingsModal = ({ children, config }: SettingsModalProps) => {
               {shouldShowDeveloperSettings && (
                 <StyledFlex>
                   <Heading size="sm">{t('settings.developer')}</Heading>
-                  <IAISwitch
+                  <SettingSwitch
                     label={t('settings.shouldLogToConsole')}
                     isChecked={shouldLogToConsole}
                     onChange={handleLogToConsoleChanged}
@@ -294,7 +298,7 @@ const SettingsModal = ({ children, config }: SettingsModalProps) => {
                     value={consoleLogLevel}
                     data={VALID_LOG_LEVELS.concat()}
                   />
-                  <IAISwitch
+                  <SettingSwitch
                     label={t('settings.enableImageDebugging')}
                     isChecked={enableImageDebugging}
                     onChange={(e: ChangeEvent<HTMLInputElement>) =>

invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/subpanels/ModelManagerPanel/ModelList.tsx

@@ -75,42 +75,49 @@ const ModelList = (props: ModelListProps) => {
           labelPos="side"
         />
 
-        {['images', 'diffusers'].includes(modelFormatFilter) &&
-          filteredDiffusersModels.length > 0 && (
-            <StyledModelContainer>
-              <Flex sx={{ gap: 2, flexDir: 'column' }}>
-                <Text variant="subtext" fontSize="sm">
-                  Diffusers
-                </Text>
-                {filteredDiffusersModels.map((model) => (
-                  <ModelListItem
-                    key={model.id}
-                    model={model}
-                    isSelected={selectedModelId === model.id}
-                    setSelectedModelId={setSelectedModelId}
-                  />
-                ))}
-              </Flex>
-            </StyledModelContainer>
-          )}
-        {['images', 'checkpoint'].includes(modelFormatFilter) &&
-          filteredCheckpointModels.length > 0 && (
-            <StyledModelContainer>
-              <Flex sx={{ gap: 2, flexDir: 'column' }}>
-                <Text variant="subtext" fontSize="sm">
-                  Checkpoint
-                </Text>
-                {filteredCheckpointModels.map((model) => (
-                  <ModelListItem
-                    key={model.id}
-                    model={model}
-                    isSelected={selectedModelId === model.id}
-                    setSelectedModelId={setSelectedModelId}
-                  />
-                ))}
-              </Flex>
-            </StyledModelContainer>
-          )}
+        <Flex
+          flexDirection="column"
+          gap={4}
+          maxHeight={window.innerHeight - 280}
+          overflow="scroll"
+        >
+          {['images', 'diffusers'].includes(modelFormatFilter) &&
+            filteredDiffusersModels.length > 0 && (
+              <StyledModelContainer>
+                <Flex sx={{ gap: 2, flexDir: 'column' }}>
+                  <Text variant="subtext" fontSize="sm">
+                    Diffusers
+                  </Text>
+                  {filteredDiffusersModels.map((model) => (
+                    <ModelListItem
+                      key={model.id}
+                      model={model}
+                      isSelected={selectedModelId === model.id}
+                      setSelectedModelId={setSelectedModelId}
+                    />
+                  ))}
+                </Flex>
+              </StyledModelContainer>
+            )}
+          {['images', 'checkpoint'].includes(modelFormatFilter) &&
+            filteredCheckpointModels.length > 0 && (
+              <StyledModelContainer>
+                <Flex sx={{ gap: 2, flexDir: 'column' }}>
+                  <Text variant="subtext" fontSize="sm">
+                    Checkpoints
+                  </Text>
+                  {filteredCheckpointModels.map((model) => (
+                    <ModelListItem
+                      key={model.id}
+                      model={model}
+                      isSelected={selectedModelId === model.id}
+                      setSelectedModelId={setSelectedModelId}
+                    />
+                  ))}
+                </Flex>
+              </StyledModelContainer>
+            )}
+        </Flex>
       </Flex>
     </Flex>
   );
@@ -146,8 +153,6 @@ const StyledModelContainer = (props: PropsWithChildren) => {
   return (
     <Flex
       flexDirection="column"
-      maxHeight={window.innerHeight - 280}
-      overflow="scroll"
       gap={4}
       borderRadius={4}
       p={4}