Merge branch 'main' into export-more-for-header

docs/features/TEXTUAL_INVERSION.md

@@ -17,7 +17,7 @@ notebooks.
 
 You will need a GPU to perform training in a reasonable length of
 time, and at least 12 GB of VRAM. We recommend using the [`xformers`
-library](../installation/070_INSTALL_XFORMERS) to accelerate the
+library](../installation/070_INSTALL_XFORMERS.md) to accelerate the
 training process further. During training, about ~8 GB is temporarily
 needed in order to store intermediate models, checkpoints and logs.
 

docs/installation/060_INSTALL_PATCHMATCH.md

@@ -24,7 +24,7 @@ You need to have opencv installed so that pypatchmatch can be built:
 brew install opencv
 ```
 
-The next time you start `invoke`, after sucesfully installing opencv, pypatchmatch will be built.
+The next time you start `invoke`, after successfully installing opencv, pypatchmatch will be built.
 
 ## Linux
 
@@ -56,7 +56,7 @@ Prior to installing PyPatchMatch, you need to take the following steps:
 
 5. Confirm that pypatchmatch is installed. At the command-line prompt enter
    `python`, and then at the `>>>` line type
-   `from patchmatch import patch_match`: It should look like the follwing:
+   `from patchmatch import patch_match`: It should look like the following:
 
     ```py
     Python 3.9.5 (default, Nov 23 2021, 15:27:38)
@@ -108,4 +108,4 @@ Prior to installing PyPatchMatch, you need to take the following steps:
 
 [**Next, Follow Steps 4-6 from the Debian Section above**](#linux)
 
-If you see no errors, then you're ready to go!
+If you see no errors you're ready to go!

invokeai/app/invocations/generate.py

@@ -4,6 +4,8 @@ from datetime import datetime, timezone
 from typing import Any, Literal, Optional, Union
 
 import numpy as np
+
+from torch import Tensor
 from PIL import Image
 from pydantic import Field
 from skimage.exposure.histogram_matching import match_histograms
@@ -12,7 +14,9 @@ from ..services.image_storage import ImageType
 from ..services.invocation_services import InvocationServices
 from .baseinvocation import BaseInvocation, InvocationContext
 from .image import ImageField, ImageOutput
-from ...backend.generator import Txt2Img, Img2Img, Inpaint, InvokeAIGenerator
+from ...backend.generator import Txt2Img, Img2Img, Inpaint, InvokeAIGenerator, Generator
+from ...backend.stable_diffusion import PipelineIntermediateState
+from ...backend.util.util import image_to_dataURL
 
 SAMPLER_NAME_VALUES = Literal[
     tuple(InvokeAIGenerator.schedulers())
@@ -41,18 +45,32 @@ class TextToImageInvocation(BaseInvocation):
 
     # TODO: pass this an emitter method or something? or a session for dispatching?
     def dispatch_progress(
-        self, context: InvocationContext, sample: Any = None, step: int = 0
+        self, context: InvocationContext, sample: Tensor, step: int
     ) -> None:  
+        # TODO: only output a preview image when requested
+        image = Generator.sample_to_lowres_estimated_image(sample)
+
+        (width, height) = image.size
+        width *= 8
+        height *= 8
+
+        dataURL = image_to_dataURL(image, image_format="JPEG")
+
         context.services.events.emit_generator_progress(
             context.graph_execution_state_id,
             self.id,
+            {
+                "width": width,
+                "height": height,
+                "dataURL": dataURL
+            },
             step,
-            float(step) / float(self.steps),
+            self.steps,
         )
 
     def invoke(self, context: InvocationContext) -> ImageOutput:
-        def step_callback(sample, step=0):
+        def step_callback(state: PipelineIntermediateState):
-            self.dispatch_progress(context, sample, step)
+            self.dispatch_progress(context, state.latents, state.step)
 
         # Handle invalid model parameter
         # TODO: figure out if this can be done via a validator that uses the model_cache

invokeai/app/services/events.py

@@ -1,7 +1,10 @@
 # Copyright (c) 2022 Kyle Schouviller (https://github.com/kyle0654)
 
-from typing import Any, Dict
+from typing import Any, Dict, TypedDict
 
+ProgressImage = TypedDict(
+    "ProgressImage", {"dataURL": str, "width": int, "height": int}
+)
 
 class EventServiceBase:
     session_event: str = "session_event"
@@ -23,8 +26,9 @@ class EventServiceBase:
         self,
         graph_execution_state_id: str,
         invocation_id: str,
+        progress_image: ProgressImage | None,
         step: int,
-        percent: float,
+        total_steps: int,
     ) -> None:
         """Emitted when there is generation progress"""
         self.__emit_session_event(
@@ -32,8 +36,9 @@ class EventServiceBase:
             payload=dict(
                 graph_execution_state_id=graph_execution_state_id,
                 invocation_id=invocation_id,
+                progress_image=progress_image,
                 step=step,
-                percent=percent,
+                total_steps=total_steps,
             ),
         )
 

invokeai/app/services/graph.py

@@ -773,6 +773,24 @@ class GraphExecutionState(BaseModel):
         default_factory=dict,
     )
 
+    # Declare all fields as required; necessary for OpenAPI schema generation build.
+    # Technically only fields without a `default_factory` need to be listed here.
+    # See: https://github.com/pydantic/pydantic/discussions/4577
+    class Config:
+        schema_extra = {
+            'required': [
+                'id',
+                'graph',
+                'execution_graph',
+                'executed',
+                'executed_history',
+                'results',
+                'errors',
+                'prepared_source_mapping',
+                'source_prepared_mapping',
+            ]
+        }
+
     def next(self) -> BaseInvocation | None:
         """Gets the next node ready to execute."""
 

invokeai/backend/generator/base.py

@@ -497,7 +497,8 @@ class Generator:
         matched_result.paste(init_image, (0, 0), mask=multiplied_blurred_init_mask)
         return matched_result
 
-    def sample_to_lowres_estimated_image(self, samples):
+    @staticmethod
+    def sample_to_lowres_estimated_image(samples):
         # origingally adapted from code by @erucipe and @keturn here:
         # https://discuss.huggingface.co/t/decoding-latents-to-rgb-without-upscaling/23204/7
 

invokeai/backend/util/util.py

@@ -3,6 +3,9 @@ import math
 import multiprocessing as mp
 import os
 import re
+import io
+import base64
+
 from collections import abc
 from inspect import isfunction
 from pathlib import Path
@@ -364,3 +367,16 @@ def url_attachment_name(url: str) -> dict:
 def download_with_progress_bar(url: str, dest: Path) -> bool:
     result = download_with_resume(url, dest, access_token=None)
     return result is not None
+
+
+def image_to_dataURL(image: Image.Image, image_format: str = "PNG") -> str:
+    """
+    Converts an image into a base64 image dataURL.
+    """
+    buffered = io.BytesIO()
+    image.save(buffered, format=image_format)
+    mime_type = Image.MIME.get(image_format.upper(), "image/" + image_format.lower())
+    image_base64 = f"data:{mime_type};base64," + base64.b64encode(
+        buffered.getvalue()
+    ).decode("UTF-8")
+    return image_base64

invokeai/frontend/web/dist/assets/ThemeLocaleProvider-680f01c6.js

@@ -1,4 +1,4 @@
-import{j as y,cN as Ie,r as _,cO as bt,q as Lr,cP as o,cQ as b,cR as v,cS as S,cT as Vr,cU as ut,cV as vt,cM as ft,cW as mt,n as gt,cX as ht,E as pt}from"./index-d64f4654.js";import{d as yt,i as St,T as xt,j as $t,h as kt}from"./storeHooks-0eed8e9f.js";var Or=`
+import{j as y,cN as Ie,r as _,cO as bt,q as Lr,cP as o,cQ as b,cR as v,cS as S,cT as Vr,cU as ut,cV as vt,cM as ft,cW as mt,n as gt,cX as ht,E as pt}from"./index-f7f41e1f.js";import{d as yt,i as St,T as xt,j as $t,h as kt}from"./storeHooks-eaf47ae3.js";var Or=`
   :root {
     --chakra-vh: 100vh;
   }

invokeai/frontend/web/dist/index.html

@@ -12,7 +12,7 @@
         margin: 0;
       }
     </style>
-    <script type="module" crossorigin src="./assets/index-d64f4654.js"></script>
+    <script type="module" crossorigin src="./assets/index-f7f41e1f.js"></script>
     <link rel="stylesheet" href="./assets/index-5483945c.css">
   </head>
 

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

@@ -64,6 +64,8 @@
         "trainingDesc2": "InvokeAI already supports training custom embeddings using Textual Inversion using the main script.",
         "upload": "Upload",
         "close": "Close",
+        "cancel": "Cancel",
+        "accept": "Accept",
         "load": "Load",
         "back": "Back",
         "statusConnected": "Connected",
@@ -333,6 +335,7 @@
         "addNewModel": "Add New Model",
         "addCheckpointModel": "Add Checkpoint / Safetensor Model",
         "addDiffuserModel": "Add Diffusers",
+        "scanForModels": "Scan For Models",
         "addManually": "Add Manually",
         "manual": "Manual",
         "name": "Name",

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

@@ -64,6 +64,8 @@
         "trainingDesc2": "InvokeAI already supports training custom embeddings using Textual Inversion using the main script.",
         "upload": "Upload",
         "close": "Close",
+        "cancel": "Cancel",
+        "accept": "Accept",
         "load": "Load",
         "back": "Back",
         "statusConnected": "Connected",
@@ -333,6 +335,7 @@
         "addNewModel": "Add New Model",
         "addCheckpointModel": "Add Checkpoint / Safetensor Model",
         "addDiffuserModel": "Add Diffusers",
+        "scanForModels": "Scan For Models",
         "addManually": "Add Manually",
         "manual": "Manual",
         "name": "Name",

invokeai/frontend/web/src/app/constants.ts

@@ -31,18 +31,14 @@ export const DIFFUSERS_SAMPLERS: Array<string> = [
 ];
 
 // Valid image widths
-export const WIDTHS: Array<number> = [
+export const WIDTHS: Array<number> = Array.from(Array(65)).map(
-  64, 128, 192, 256, 320, 384, 448, 512, 576, 640, 704, 768, 832, 896, 960,
+  (_x, i) => i * 64
-  1024, 1088, 1152, 1216, 1280, 1344, 1408, 1472, 1536, 1600, 1664, 1728, 1792,
+);
-  1856, 1920, 1984, 2048,
-];
 
 // Valid image heights
-export const HEIGHTS: Array<number> = [
+export const HEIGHTS: Array<number> = Array.from(Array(65)).map(
-  64, 128, 192, 256, 320, 384, 448, 512, 576, 640, 704, 768, 832, 896, 960,
+  (_x, i) => i * 64
-  1024, 1088, 1152, 1216, 1280, 1344, 1408, 1472, 1536, 1600, 1664, 1728, 1792,
+);
-  1856, 1920, 1984, 2048,
-];
 
 // Valid upscaling levels
 export const UPSCALING_LEVELS: Array<{ key: string; value: number }> = [

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

@@ -9,6 +9,7 @@ import {
   useDisclosure,
 } from '@chakra-ui/react';
 import { cloneElement, memo, ReactElement, ReactNode, useRef } from 'react';
+import { useTranslation } from 'react-i18next';
 import IAIButton from './IAIButton';
 
 type Props = {
@@ -22,10 +23,12 @@ type Props = {
 };
 
 const IAIAlertDialog = forwardRef((props: Props, ref) => {
+  const { t } = useTranslation();
+
   const {
-    acceptButtonText = 'Accept',
+    acceptButtonText = t('common.accept'),
     acceptCallback,
-    cancelButtonText = 'Cancel',
+    cancelButtonText = t('common.cancel'),
     cancelCallback,
     children,
     title,
@@ -56,6 +59,7 @@ const IAIAlertDialog = forwardRef((props: Props, ref) => {
         isOpen={isOpen}
         leastDestructiveRef={cancelRef}
         onClose={onClose}
+        isCentered
       >
         <AlertDialogOverlay>
           <AlertDialogContent>

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

@@ -0,0 +1,8 @@
+import { chakra } from '@chakra-ui/react';
+
+/**
+ * Chakra-enabled <form />
+ */
+const IAIForm = chakra.form;
+
+export default IAIForm;

invokeai/frontend/web/src/common/components/IAIForms/IAIFormItemWrapper.tsx

@@ -0,0 +1,23 @@
+import { Flex } from '@chakra-ui/react';
+import { ReactElement } from 'react';
+
+export function IAIFormItemWrapper({
+  children,
+}: {
+  children: ReactElement | ReactElement[];
+}) {
+  return (
+    <Flex
+      sx={{
+        flexDirection: 'column',
+        padding: 4,
+        rowGap: 4,
+        borderRadius: 'base',
+        width: 'full',
+        bg: 'base.900',
+      }}
+    >
+      {children}
+    </Flex>
+  );
+}

invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasMaskOptions.tsx

@@ -104,7 +104,6 @@ const IAICanvasMaskOptions = () => {
 
   return (
     <IAIPopover
-      trigger="hover"
       triggerComponent={
         <ButtonGroup>
           <IAIIconButton

invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasSettingsButtonPopover.tsx

@@ -88,7 +88,7 @@ const IAICanvasSettingsButtonPopover = () => {
 
   return (
     <IAIPopover
-      trigger="hover"
+      isLazy={false}
       triggerComponent={
         <IAIIconButton
           tooltip={t('unifiedCanvas.canvasSettings')}

invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasToolChooserOptions.tsx

@@ -219,7 +219,6 @@ const IAICanvasToolChooserOptions = () => {
         onClick={handleSelectColorPickerTool}
       />
       <IAIPopover
-        trigger="hover"
         triggerComponent={
           <IAIIconButton
             aria-label={t('unifiedCanvas.brushOptions')}

invokeai/frontend/web/src/features/gallery/components/CurrentImageButtons.tsx

@@ -405,7 +405,6 @@ const CurrentImageButtons = (props: CurrentImageButtonsProps) => {
     >
       <ButtonGroup isAttached={true}>
         <IAIPopover
-          trigger="hover"
           triggerComponent={
             <IAIIconButton
               aria-label={`${t('parameters.sendTo')}...`}
@@ -505,7 +504,6 @@ const CurrentImageButtons = (props: CurrentImageButtonsProps) => {
 
       <ButtonGroup isAttached={true}>
         <IAIPopover
-          trigger="hover"
           triggerComponent={
             <IAIIconButton
               icon={<FaGrinStars />}
@@ -535,7 +533,6 @@ const CurrentImageButtons = (props: CurrentImageButtonsProps) => {
         </IAIPopover>
 
         <IAIPopover
-          trigger="hover"
           triggerComponent={
             <IAIIconButton
               icon={<FaExpandArrowsAlt />}

invokeai/frontend/web/src/features/gallery/components/CurrentImageFallback.tsx

@@ -0,0 +1,24 @@
+import { Flex, Spinner, SpinnerProps } from '@chakra-ui/react';
+
+type CurrentImageFallbackProps = SpinnerProps;
+
+const CurrentImageFallback = (props: CurrentImageFallbackProps) => {
+  const { size = 'xl', ...rest } = props;
+
+  return (
+    <Flex
+      sx={{
+        w: 'full',
+        h: 'full',
+        alignItems: 'center',
+        justifyContent: 'center',
+        position: 'absolute',
+        color: 'base.400',
+      }}
+    >
+      <Spinner size={size} {...rest} />
+    </Flex>
+  );
+};
+
+export default CurrentImageFallback;

invokeai/frontend/web/src/features/gallery/components/CurrentImagePreview.tsx

@@ -7,6 +7,7 @@ import { isEqual } from 'lodash';
 import { APP_METADATA_HEIGHT } from 'theme/util/constants';
 
 import { gallerySelector } from '../store/gallerySelectors';
+import CurrentImageFallback from './CurrentImageFallback';
 import ImageMetadataViewer from './ImageMetaDataViewer/ImageMetadataViewer';
 import NextPrevImageButtons from './NextPrevImageButtons';
 
@@ -48,6 +49,7 @@ export default function CurrentImagePreview() {
           src={imageToDisplay.url}
           width={imageToDisplay.width}
           height={imageToDisplay.height}
+          fallback={!isIntermediate ? <CurrentImageFallback /> : undefined}
           sx={{
             objectFit: 'contain',
             maxWidth: '100%',

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

@@ -55,7 +55,6 @@ export default function LanguagePicker() {
 
   return (
     <IAIPopover
-      trigger="hover"
       triggerComponent={
         <IAIIconButton
           aria-label={t('common.languagePickerLabel')}

invokeai/frontend/web/src/features/system/components/ModelManager/AddCheckpointModel.tsx

@@ -1,4 +1,5 @@
 import {
+  Flex,
   FormControl,
   FormErrorMessage,
   FormHelperText,
@@ -25,10 +26,10 @@ import { useTranslation } from 'react-i18next';
 
 import type { InvokeModelConfigProps } from 'app/invokeai';
 import type { RootState } from 'app/store';
-import IAIIconButton from 'common/components/IAIIconButton';
 import { setAddNewModelUIOption } from 'features/ui/store/uiSlice';
 import type { FieldInputProps, FormikProps } from 'formik';
-import { BiArrowBack } from 'react-icons/bi';
+import IAIForm from 'common/components/IAIForm';
+import { IAIFormItemWrapper } from 'common/components/IAIForms/IAIFormItemWrapper';
 
 const MIN_MODEL_SIZE = 64;
 const MAX_MODEL_SIZE = 2048;
@@ -72,243 +73,250 @@ export default function AddCheckpointModel() {
 
   return (
     <VStack gap={2} alignItems="flex-start">
-      <IAIIconButton
+      <Flex columnGap={4}>
-        aria-label={t('common.back')}
+        <IAICheckbox
-        tooltip={t('common.back')}
+          isChecked={!addManually}
-        onClick={() => dispatch(setAddNewModelUIOption(null))}
+          label={t('modelManager.scanForModels')}
-        width="max-content"
+          onChange={() => setAddmanually(!addManually)}
-        position="absolute"
+        />
-        zIndex={1}
+        <IAICheckbox
-        size="sm"
+          label={t('modelManager.addManually')}
-        insetInlineEnd={12}
+          isChecked={addManually}
-        top={3}
+          onChange={() => setAddmanually(!addManually)}
-        icon={<BiArrowBack />}
+        />
-      />
+      </Flex>
 
-      <SearchModels />
+      {addManually ? (
-      <IAICheckbox
-        label={t('modelManager.addManually')}
-        isChecked={addManually}
-        onChange={() => setAddmanually(!addManually)}
-      />
-
-      {addManually && (
         <Formik
           initialValues={addModelFormValues}
           onSubmit={addModelFormSubmitHandler}
         >
           {({ handleSubmit, errors, touched }) => (
-            <form onSubmit={handleSubmit}>
+            <IAIForm onSubmit={handleSubmit} sx={{ w: 'full' }}>
               <VStack rowGap={2}>
                 <Text fontSize={20} fontWeight="bold" alignSelf="start">
                   {t('modelManager.manual')}
                 </Text>
                 {/* Name */}
-                <FormControl
+                <IAIFormItemWrapper>
-                  isInvalid={!!errors.name && touched.name}
+                  <FormControl
-                  isRequired
+                    isInvalid={!!errors.name && touched.name}
-                >
+                    isRequired
-                  <FormLabel htmlFor="name" fontSize="sm">
+                  >
-                    {t('modelManager.name')}
+                    <FormLabel htmlFor="name" fontSize="sm">
-                  </FormLabel>
+                      {t('modelManager.name')}
-                  <VStack alignItems="start">
+                    </FormLabel>
-                    <Field
+                    <VStack alignItems="start">
-                      as={IAIInput}
+                      <Field
-                      id="name"
+                        as={IAIInput}
-                      name="name"
+                        id="name"
-                      type="text"
+                        name="name"
-                      validate={baseValidation}
+                        type="text"
-                      width="2xl"
+                        validate={baseValidation}
-                    />
+                        width="full"
-                    {!!errors.name && touched.name ? (
+                      />
-                      <FormErrorMessage>{errors.name}</FormErrorMessage>
+                      {!!errors.name && touched.name ? (
-                    ) : (
+                        <FormErrorMessage>{errors.name}</FormErrorMessage>
-                      <FormHelperText margin={0}>
+                      ) : (
-                        {t('modelManager.nameValidationMsg')}
+                        <FormHelperText margin={0}>
-                      </FormHelperText>
+                          {t('modelManager.nameValidationMsg')}
-                    )}
+                        </FormHelperText>
-                  </VStack>
+                      )}
-                </FormControl>
+                    </VStack>
+                  </FormControl>
+                </IAIFormItemWrapper>
 
                 {/* Description */}
-                <FormControl
+                <IAIFormItemWrapper>
-                  isInvalid={!!errors.description && touched.description}
+                  <FormControl
-                  isRequired
+                    isInvalid={!!errors.description && touched.description}
-                >
+                    isRequired
-                  <FormLabel htmlFor="description" fontSize="sm">
+                  >
-                    {t('modelManager.description')}
+                    <FormLabel htmlFor="description" fontSize="sm">
-                  </FormLabel>
+                      {t('modelManager.description')}
-                  <VStack alignItems="start">
+                    </FormLabel>
-                    <Field
+                    <VStack alignItems="start">
-                      as={IAIInput}
+                      <Field
-                      id="description"
+                        as={IAIInput}
-                      name="description"
+                        id="description"
-                      type="text"
+                        name="description"
-                      width="2xl"
+                        type="text"
-                    />
+                        width="full"
-                    {!!errors.description && touched.description ? (
+                      />
-                      <FormErrorMessage>{errors.description}</FormErrorMessage>
+                      {!!errors.description && touched.description ? (
-                    ) : (
+                        <FormErrorMessage>
-                      <FormHelperText margin={0}>
+                          {errors.description}
-                        {t('modelManager.descriptionValidationMsg')}
+                        </FormErrorMessage>
-                      </FormHelperText>
+                      ) : (
-                    )}
+                        <FormHelperText margin={0}>
-                  </VStack>
+                          {t('modelManager.descriptionValidationMsg')}
-                </FormControl>
+                        </FormHelperText>
+                      )}
+                    </VStack>
+                  </FormControl>
+                </IAIFormItemWrapper>
 
                 {/* Config */}
-                <FormControl
+                <IAIFormItemWrapper>
-                  isInvalid={!!errors.config && touched.config}
+                  <FormControl
-                  isRequired
+                    isInvalid={!!errors.config && touched.config}
-                >
+                    isRequired
-                  <FormLabel htmlFor="config" fontSize="sm">
+                  >
-                    {t('modelManager.config')}
+                    <FormLabel htmlFor="config" fontSize="sm">
-                  </FormLabel>
+                      {t('modelManager.config')}
-                  <VStack alignItems="start">
+                    </FormLabel>
-                    <Field
+                    <VStack alignItems="start">
-                      as={IAIInput}
+                      <Field
-                      id="config"
+                        as={IAIInput}
-                      name="config"
+                        id="config"
-                      type="text"
+                        name="config"
-                      width="2xl"
+                        type="text"
-                    />
+                        width="full"
-                    {!!errors.config && touched.config ? (
+                      />
-                      <FormErrorMessage>{errors.config}</FormErrorMessage>
+                      {!!errors.config && touched.config ? (
-                    ) : (
+                        <FormErrorMessage>{errors.config}</FormErrorMessage>
-                      <FormHelperText margin={0}>
+                      ) : (
-                        {t('modelManager.configValidationMsg')}
+                        <FormHelperText margin={0}>
-                      </FormHelperText>
+                          {t('modelManager.configValidationMsg')}
-                    )}
+                        </FormHelperText>
-                  </VStack>
+                      )}
-                </FormControl>
+                    </VStack>
+                  </FormControl>
+                </IAIFormItemWrapper>
 
                 {/* Weights */}
-                <FormControl
+                <IAIFormItemWrapper>
-                  isInvalid={!!errors.weights && touched.weights}
+                  <FormControl
-                  isRequired
+                    isInvalid={!!errors.weights && touched.weights}
-                >
+                    isRequired
-                  <FormLabel htmlFor="config" fontSize="sm">
+                  >
-                    {t('modelManager.modelLocation')}
+                    <FormLabel htmlFor="config" fontSize="sm">
-                  </FormLabel>
+                      {t('modelManager.modelLocation')}
-                  <VStack alignItems="start">
+                    </FormLabel>
-                    <Field
+                    <VStack alignItems="start">
-                      as={IAIInput}
+                      <Field
-                      id="weights"
+                        as={IAIInput}
-                      name="weights"
+                        id="weights"
-                      type="text"
+                        name="weights"
-                      width="2xl"
+                        type="text"
-                    />
+                        width="full"
-                    {!!errors.weights && touched.weights ? (
+                      />
-                      <FormErrorMessage>{errors.weights}</FormErrorMessage>
+                      {!!errors.weights && touched.weights ? (
-                    ) : (
+                        <FormErrorMessage>{errors.weights}</FormErrorMessage>
-                      <FormHelperText margin={0}>
+                      ) : (
-                        {t('modelManager.modelLocationValidationMsg')}
+                        <FormHelperText margin={0}>
-                      </FormHelperText>
+                          {t('modelManager.modelLocationValidationMsg')}
-                    )}
+                        </FormHelperText>
-                  </VStack>
+                      )}
-                </FormControl>
+                    </VStack>
+                  </FormControl>
+                </IAIFormItemWrapper>
 
                 {/* VAE */}
-                <FormControl isInvalid={!!errors.vae && touched.vae}>
+                <IAIFormItemWrapper>
-                  <FormLabel htmlFor="vae" fontSize="sm">
+                  <FormControl isInvalid={!!errors.vae && touched.vae}>
-                    {t('modelManager.vaeLocation')}
+                    <FormLabel htmlFor="vae" fontSize="sm">
-                  </FormLabel>
+                      {t('modelManager.vaeLocation')}
-                  <VStack alignItems="start">
+                    </FormLabel>
-                    <Field
+                    <VStack alignItems="start">
-                      as={IAIInput}
+                      <Field
-                      id="vae"
+                        as={IAIInput}
-                      name="vae"
+                        id="vae"
-                      type="text"
+                        name="vae"
-                      width="2xl"
+                        type="text"
-                    />
+                        width="full"
-                    {!!errors.vae && touched.vae ? (
+                      />
-                      <FormErrorMessage>{errors.vae}</FormErrorMessage>
+                      {!!errors.vae && touched.vae ? (
-                    ) : (
+                        <FormErrorMessage>{errors.vae}</FormErrorMessage>
-                      <FormHelperText margin={0}>
+                      ) : (
-                        {t('modelManager.vaeLocationValidationMsg')}
+                        <FormHelperText margin={0}>
-                      </FormHelperText>
+                          {t('modelManager.vaeLocationValidationMsg')}
-                    )}
+                        </FormHelperText>
-                  </VStack>
+                      )}
-                </FormControl>
+                    </VStack>
+                  </FormControl>
+                </IAIFormItemWrapper>
 
                 <HStack width="100%">
                   {/* Width */}
-                  <FormControl isInvalid={!!errors.width && touched.width}>
+                  <IAIFormItemWrapper>
-                    <FormLabel htmlFor="width" fontSize="sm">
+                    <FormControl isInvalid={!!errors.width && touched.width}>
-                      {t('modelManager.width')}
+                      <FormLabel htmlFor="width" fontSize="sm">
-                    </FormLabel>
+                        {t('modelManager.width')}
-                    <VStack alignItems="start">
+                      </FormLabel>
-                      <Field id="width" name="width">
+                      <VStack alignItems="start">
-                        {({
+                        <Field id="width" name="width">
-                          field,
+                          {({
-                          form,
+                            field,
-                        }: {
+                            form,
-                          field: FieldInputProps<number>;
+                          }: {
-                          form: FormikProps<InvokeModelConfigProps>;
+                            field: FieldInputProps<number>;
-                        }) => (
+                            form: FormikProps<InvokeModelConfigProps>;
-                          <IAINumberInput
+                          }) => (
-                            id="width"
+                            <IAINumberInput
-                            name="width"
+                              id="width"
-                            min={MIN_MODEL_SIZE}
+                              name="width"
-                            max={MAX_MODEL_SIZE}
+                              min={MIN_MODEL_SIZE}
-                            step={64}
+                              max={MAX_MODEL_SIZE}
-                            width="90%"
+                              step={64}
-                            value={form.values.width}
+                              value={form.values.width}
-                            onChange={(value) =>
+                              onChange={(value) =>
-                              form.setFieldValue(field.name, Number(value))
+                                form.setFieldValue(field.name, Number(value))
-                            }
+                              }
-                          />
+                            />
-                        )}
+                          )}
-                      </Field>
+                        </Field>
 
-                      {!!errors.width && touched.width ? (
+                        {!!errors.width && touched.width ? (
-                        <FormErrorMessage>{errors.width}</FormErrorMessage>
+                          <FormErrorMessage>{errors.width}</FormErrorMessage>
-                      ) : (
+                        ) : (
-                        <FormHelperText margin={0}>
+                          <FormHelperText margin={0}>
-                          {t('modelManager.widthValidationMsg')}
+                            {t('modelManager.widthValidationMsg')}
-                        </FormHelperText>
+                          </FormHelperText>
-                      )}
+                        )}
-                    </VStack>
+                      </VStack>
-                  </FormControl>
+                    </FormControl>
+                  </IAIFormItemWrapper>
 
                   {/* Height */}
-                  <FormControl isInvalid={!!errors.height && touched.height}>
+                  <IAIFormItemWrapper>
-                    <FormLabel htmlFor="height" fontSize="sm">
+                    <FormControl isInvalid={!!errors.height && touched.height}>
-                      {t('modelManager.height')}
+                      <FormLabel htmlFor="height" fontSize="sm">
-                    </FormLabel>
+                        {t('modelManager.height')}
-                    <VStack alignItems="start">
+                      </FormLabel>
-                      <Field id="height" name="height">
+                      <VStack alignItems="start">
-                        {({
+                        <Field id="height" name="height">
-                          field,
+                          {({
-                          form,
+                            field,
-                        }: {
+                            form,
-                          field: FieldInputProps<number>;
+                          }: {
-                          form: FormikProps<InvokeModelConfigProps>;
+                            field: FieldInputProps<number>;
-                        }) => (
+                            form: FormikProps<InvokeModelConfigProps>;
-                          <IAINumberInput
+                          }) => (
-                            id="height"
+                            <IAINumberInput
-                            name="height"
+                              id="height"
-                            min={MIN_MODEL_SIZE}
+                              name="height"
-                            max={MAX_MODEL_SIZE}
+                              min={MIN_MODEL_SIZE}
-                            width="90%"
+                              max={MAX_MODEL_SIZE}
-                            step={64}
+                              step={64}
-                            value={form.values.height}
+                              value={form.values.height}
-                            onChange={(value) =>
+                              onChange={(value) =>
-                              form.setFieldValue(field.name, Number(value))
+                                form.setFieldValue(field.name, Number(value))
-                            }
+                              }
-                          />
+                            />
-                        )}
+                          )}
-                      </Field>
+                        </Field>
 
-                      {!!errors.height && touched.height ? (
+                        {!!errors.height && touched.height ? (
-                        <FormErrorMessage>{errors.height}</FormErrorMessage>
+                          <FormErrorMessage>{errors.height}</FormErrorMessage>
-                      ) : (
+                        ) : (
-                        <FormHelperText margin={0}>
+                          <FormHelperText margin={0}>
-                          {t('modelManager.heightValidationMsg')}
+                            {t('modelManager.heightValidationMsg')}
-                        </FormHelperText>
+                          </FormHelperText>
-                      )}
+                        )}
-                    </VStack>
+                      </VStack>
-                  </FormControl>
+                    </FormControl>
+                  </IAIFormItemWrapper>
                 </HStack>
 
                 <IAIButton
@@ -319,9 +327,11 @@ export default function AddCheckpointModel() {
                   {t('modelManager.addModel')}
                 </IAIButton>
               </VStack>
-            </form>
+            </IAIForm>
           )}
         </Formik>
+      ) : (
+        <SearchModels />
       )}
     </VStack>
   );

invokeai/frontend/web/src/features/system/components/ModelManager/AddDiffusersModel.tsx

@@ -11,36 +11,14 @@ import { InvokeDiffusersModelConfigProps } from 'app/invokeai';
 import { addNewModel } from 'app/socketio/actions';
 import { useAppDispatch, useAppSelector } from 'app/storeHooks';
 import IAIButton from 'common/components/IAIButton';
-import IAIIconButton from 'common/components/IAIIconButton';
 import IAIInput from 'common/components/IAIInput';
 import { setAddNewModelUIOption } from 'features/ui/store/uiSlice';
 import { Field, Formik } from 'formik';
 import { useTranslation } from 'react-i18next';
-import { BiArrowBack } from 'react-icons/bi';
 
 import type { RootState } from 'app/store';
-import type { ReactElement } from 'react';
+import IAIForm from 'common/components/IAIForm';
-
+import { IAIFormItemWrapper } from 'common/components/IAIForms/IAIFormItemWrapper';
-function FormItemWrapper({
-  children,
-}: {
-  children: ReactElement | ReactElement[];
-}) {
-  return (
-    <Flex
-      sx={{
-        flexDirection: 'column',
-        padding: 4,
-        rowGap: 4,
-        borderRadius: 'base',
-        width: 'full',
-        bg: 'base.900',
-      }}
-    >
-      {children}
-    </Flex>
-  );
-}
 
 export default function AddDiffusersModel() {
   const dispatch = useAppDispatch();
@@ -89,26 +67,14 @@ export default function AddDiffusersModel() {
 
   return (
     <Flex>
-      <IAIIconButton
-        aria-label={t('common.back')}
-        tooltip={t('common.back')}
-        onClick={() => dispatch(setAddNewModelUIOption(null))}
-        width="max-content"
-        position="absolute"
-        zIndex={1}
-        size="sm"
-        insetInlineEnd={12}
-        top={3}
-        icon={<BiArrowBack />}
-      />
       <Formik
         initialValues={addModelFormValues}
         onSubmit={addModelFormSubmitHandler}
       >
         {({ handleSubmit, errors, touched }) => (
-          <form onSubmit={handleSubmit}>
+          <IAIForm onSubmit={handleSubmit}>
             <VStack rowGap={2}>
-              <FormItemWrapper>
+              <IAIFormItemWrapper>
                 {/* Name */}
                 <FormControl
                   isInvalid={!!errors.name && touched.name}
@@ -136,9 +102,9 @@ export default function AddDiffusersModel() {
                     )}
                   </VStack>
                 </FormControl>
-              </FormItemWrapper>
+              </IAIFormItemWrapper>
 
-              <FormItemWrapper>
+              <IAIFormItemWrapper>
                 {/* Description */}
                 <FormControl
                   isInvalid={!!errors.description && touched.description}
@@ -165,9 +131,9 @@ export default function AddDiffusersModel() {
                     )}
                   </VStack>
                 </FormControl>
-              </FormItemWrapper>
+              </IAIFormItemWrapper>
 
-              <FormItemWrapper>
+              <IAIFormItemWrapper>
                 <Text fontWeight="bold" fontSize="sm">
                   {t('modelManager.formMessageDiffusersModelLocation')}
                 </Text>
@@ -226,9 +192,9 @@ export default function AddDiffusersModel() {
                     )}
                   </VStack>
                 </FormControl>
-              </FormItemWrapper>
+              </IAIFormItemWrapper>
 
-              <FormItemWrapper>
+              <IAIFormItemWrapper>
                 {/* VAE Path */}
                 <Text fontWeight="bold">
                   {t('modelManager.formMessageDiffusersVAELocation')}
@@ -290,13 +256,13 @@ export default function AddDiffusersModel() {
                     )}
                   </VStack>
                 </FormControl>
-              </FormItemWrapper>
+              </IAIFormItemWrapper>
 
               <IAIButton type="submit" isLoading={isProcessing}>
                 {t('modelManager.addModel')}
               </IAIButton>
             </VStack>
-          </form>
+          </IAIForm>
         )}
       </Formik>
     </Flex>

invokeai/frontend/web/src/features/system/components/ModelManager/AddModel.tsx

@@ -14,7 +14,7 @@ import {
 
 import IAIButton from 'common/components/IAIButton';
 
-import { FaPlus } from 'react-icons/fa';
+import { FaArrowLeft, FaPlus } from 'react-icons/fa';
 
 import { useAppDispatch, useAppSelector } from 'app/storeHooks';
 import { useTranslation } from 'react-i18next';
@@ -23,6 +23,7 @@ import type { RootState } from 'app/store';
 import { setAddNewModelUIOption } from 'features/ui/store/uiSlice';
 import AddCheckpointModel from './AddCheckpointModel';
 import AddDiffusersModel from './AddDiffusersModel';
+import IAIIconButton from 'common/components/IAIIconButton';
 
 function AddModelBox({
   text,
@@ -83,8 +84,22 @@ export default function AddModel() {
         closeOnOverlayClick={false}
       >
         <ModalOverlay />
-        <ModalContent margin="auto" paddingInlineEnd={4}>
+        <ModalContent margin="auto">
-          <ModalHeader>{t('modelManager.addNewModel')}</ModalHeader>
+          <ModalHeader>{t('modelManager.addNewModel')} </ModalHeader>
+          {addNewModelUIOption !== null && (
+            <IAIIconButton
+              aria-label={t('common.back')}
+              tooltip={t('common.back')}
+              onClick={() => dispatch(setAddNewModelUIOption(null))}
+              position="absolute"
+              variant="ghost"
+              zIndex={1}
+              size="sm"
+              insetInlineEnd={12}
+              top={2}
+              icon={<FaArrowLeft />}
+            />
+          )}
           <ModalCloseButton />
           <ModalBody>
             {addNewModelUIOption == null && (

invokeai/frontend/web/src/features/system/components/ModelManager/CheckpointModelEdit.tsx

@@ -28,6 +28,7 @@ import { isEqual, pickBy } from 'lodash';
 import ModelConvert from './ModelConvert';
 import IAIFormHelperText from 'common/components/IAIForms/IAIFormHelperText';
 import IAIFormErrorMessage from 'common/components/IAIForms/IAIFormErrorMessage';
+import IAIForm from 'common/components/IAIForm';
 
 const selector = createSelector(
   [systemSelector],
@@ -120,7 +121,7 @@ export default function CheckpointModelEdit() {
           onSubmit={editModelFormSubmitHandler}
         >
           {({ handleSubmit, errors, touched }) => (
-            <form onSubmit={handleSubmit}>
+            <IAIForm onSubmit={handleSubmit}>
               <VStack rowGap={2} alignItems="start">
                 {/* Description */}
                 <FormControl
@@ -317,7 +318,7 @@ export default function CheckpointModelEdit() {
                   {t('modelManager.updateModel')}
                 </IAIButton>
               </VStack>
-            </form>
+            </IAIForm>
           )}
         </Formik>
       </Flex>

invokeai/frontend/web/src/features/system/components/ModelManager/DiffusersModelEdit.tsx

@@ -18,6 +18,7 @@ import type { RootState } from 'app/store';
 import { isEqual, pickBy } from 'lodash';
 import IAIFormHelperText from 'common/components/IAIForms/IAIFormHelperText';
 import IAIFormErrorMessage from 'common/components/IAIForms/IAIFormErrorMessage';
+import IAIForm from 'common/components/IAIForm';
 
 const selector = createSelector(
   [systemSelector],
@@ -116,7 +117,7 @@ export default function DiffusersModelEdit() {
           onSubmit={editModelFormSubmitHandler}
         >
           {({ handleSubmit, errors, touched }) => (
-            <form onSubmit={handleSubmit}>
+            <IAIForm onSubmit={handleSubmit}>
               <VStack rowGap={2} alignItems="start">
                 {/* Description */}
                 <FormControl
@@ -259,7 +260,7 @@ export default function DiffusersModelEdit() {
                   {t('modelManager.updateModel')}
                 </IAIButton>
               </VStack>
-            </form>
+            </IAIForm>
           )}
         </Formik>
       </Flex>

invokeai/frontend/web/src/features/system/components/ModelManager/SearchModels.tsx

@@ -12,14 +12,13 @@ import {
   RadioGroup,
   Spacer,
   Text,
-  VStack,
 } from '@chakra-ui/react';
 import { createSelector } from '@reduxjs/toolkit';
 import { useAppDispatch, useAppSelector } from 'app/storeHooks';
 import { systemSelector } from 'features/system/store/systemSelectors';
 import { useTranslation } from 'react-i18next';
 
-import { FaPlus, FaSearch } from 'react-icons/fa';
+import { FaSearch, FaTrash } from 'react-icons/fa';
 
 import { addNewModel, searchForModels } from 'app/socketio/actions';
 import {
@@ -34,7 +33,7 @@ import IAIInput from 'common/components/IAIInput';
 import { Field, Formik } from 'formik';
 import { forEach, remove } from 'lodash';
 import type { ChangeEvent, ReactNode } from 'react';
-import { BiReset } from 'react-icons/bi';
+import IAIForm from 'common/components/IAIForm';
 
 const existingModelsSelector = createSelector([systemSelector], (system) => {
   const { model_list } = system;
@@ -71,34 +70,32 @@ function SearchModelEntry({
   };
 
   return (
-    <VStack>
+    <Flex
-      <Flex
+      flexDirection="column"
-        flexDirection="column"
+      gap={2}
-        gap={2}
+      backgroundColor={
-        backgroundColor={
+        modelsToAdd.includes(model.name) ? 'accent.650' : 'base.800'
-          modelsToAdd.includes(model.name) ? 'accent.650' : 'base.800'
+      }
-        }
+      paddingX={4}
-        paddingX={4}
+      paddingY={2}
-        paddingY={2}
+      borderRadius={4}
-        borderRadius={4}
+    >
-      >
+      <Flex gap={4} alignItems="center" justifyContent="space-between">
-        <Flex gap={4}>
+        <IAICheckbox
-          <IAICheckbox
+          value={model.name}
-            value={model.name}
+          label={<Text fontWeight={500}>{model.name}</Text>}
-            label={<Text fontWeight={500}>{model.name}</Text>}
+          isChecked={modelsToAdd.includes(model.name)}
-            isChecked={modelsToAdd.includes(model.name)}
+          isDisabled={existingModels.includes(model.location)}
-            isDisabled={existingModels.includes(model.location)}
+          onChange={foundModelsChangeHandler}
-            onChange={foundModelsChangeHandler}
+        ></IAICheckbox>
-          ></IAICheckbox>
+        {existingModels.includes(model.location) && (
-          {existingModels.includes(model.location) && (
+          <Badge colorScheme="accent">{t('modelManager.modelExists')}</Badge>
-            <Badge colorScheme="accent">{t('modelManager.modelExists')}</Badge>
+        )}
-          )}
-        </Flex>
-        <Text fontStyle="italic" variant="subtext">
-          {model.location}
-        </Text>
       </Flex>
-    </VStack>
+      <Text fontStyle="italic" variant="subtext">
+        {model.location}
+      </Text>
+    </Flex>
   );
 }
 
@@ -215,10 +212,10 @@ export default function SearchModels() {
     }
 
     return (
-      <>
+      <Flex flexDirection="column" rowGap={4}>
         {newFoundModels}
         {shouldShowExistingModelsInSearch && existingFoundModels}
-      </>
+      </Flex>
     );
   };
 
@@ -245,26 +242,26 @@ export default function SearchModels() {
             <Text
               sx={{
                 fontWeight: 500,
-                fontSize: 'sm',
               }}
               variant="subtext"
             >
               {t('modelManager.checkpointFolder')}
             </Text>
-            <Text sx={{ fontWeight: 500, fontSize: 'sm' }}>{searchFolder}</Text>
+            <Text sx={{ fontWeight: 500 }}>{searchFolder}</Text>
           </Flex>
           <Spacer />
           <IAIIconButton
             aria-label={t('modelManager.scanAgain')}
             tooltip={t('modelManager.scanAgain')}
-            icon={<BiReset />}
+            icon={<FaSearch />}
             fontSize={18}
             disabled={isProcessing}
             onClick={() => dispatch(searchForModels(searchFolder))}
           />
           <IAIIconButton
             aria-label={t('modelManager.clearCheckpointFolder')}
-            icon={<FaPlus style={{ transform: 'rotate(45deg)' }} />}
+            tooltip={t('modelManager.clearCheckpointFolder')}
+            icon={<FaTrash />}
             onClick={resetSearchModelHandler}
           />
         </Flex>
@@ -276,9 +273,9 @@ export default function SearchModels() {
           }}
         >
           {({ handleSubmit }) => (
-            <form onSubmit={handleSubmit}>
+            <IAIForm onSubmit={handleSubmit} width="100%">
-              <HStack columnGap={2} alignItems="flex-end" width="100%">
+              <HStack columnGap={2} alignItems="flex-end">
-                <FormControl isRequired width="lg">
+                <FormControl flexGrow={1}>
                   <Field
                     as={IAIInput}
                     id="checkpointFolder"
@@ -294,12 +291,12 @@ export default function SearchModels() {
                   tooltip={t('modelManager.findModels')}
                   type="submit"
                   disabled={isProcessing}
-                  paddingX={10}
+                  px={8}
                 >
                   {t('modelManager.findModels')}
                 </IAIButton>
               </HStack>
-            </form>
+            </IAIForm>
           )}
         </Formik>
       )}
@@ -410,7 +407,6 @@ export default function SearchModels() {
             maxHeight={72}
             overflowY="scroll"
             borderRadius="sm"
-            paddingInlineEnd={4}
             gap={2}
           >
             {foundModels.length > 0 ? (

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

@@ -50,7 +50,6 @@ export default function ThemeChanger() {
 
   return (
     <IAIPopover
-      trigger="hover"
       triggerComponent={
         <IAIIconButton
           aria-label={t('common.themeLabel')}

invokeai/frontend/web/src/features/ui/components/InvokeTabs.tsx

@@ -166,20 +166,8 @@ export default function InvokeTabs() {
     []
   );
 
-  /**
-   * isLazy means the tabs are mounted and unmounted when changing them. There is a tradeoff here,
-   * as mounting is expensive, but so is retaining all tabs in the DOM at all times.
-   *
-   * Removing isLazy messes with the outside click watcher, which is used by ResizableDrawer.
-   * Because you have multiple handlers listening for an outside click, any click anywhere triggers
-   * the watcher for the hidden drawers, closing the open drawer.
-   *
-   * TODO: Add logic to the `useOutsideClick` in ResizableDrawer to enable it only for the active
-   * tab's drawer.
-   */
   return (
     <Tabs
-      isLazy
       defaultIndex={activeTab}
       index={activeTab}
       onChange={(index: number) => {

invokeai/frontend/web/src/features/ui/components/common/ResizableDrawer/ResizableDrawer.tsx

@@ -93,12 +93,9 @@ const ResizableDrawer = ({
   useOutsideClick({
     ref: outsideClickRef,
     handler: () => {
-      if (isPinned) {
-        return;
-      }
-
       onClose();
     },
+    enabled: isOpen && !isPinned,
   });
 
   const handleEnables = useMemo(

invokeai/frontend/web/src/features/ui/components/tabs/UnifiedCanvas/UnifiedCanvasBeta/UnifiedCanvasToolSettings/UnifiedCanvasColorPicker.tsx

@@ -77,7 +77,6 @@ export default function UnifiedCanvasColorPicker() {
 
   return (
     <IAIPopover
-      trigger="hover"
       triggerComponent={
         <Box
           sx={{

invokeai/frontend/web/src/features/ui/components/tabs/UnifiedCanvas/UnifiedCanvasBeta/UnifiedCanvasToolSettings/UnifiedCanvasSettings.tsx

@@ -56,7 +56,7 @@ const UnifiedCanvasSettings = () => {
 
   return (
     <IAIPopover
-      trigger="hover"
+      isLazy={false}
       triggerComponent={
         <IAIIconButton
           tooltip={t('unifiedCanvas.canvasSettings')}

pyproject.toml

@@ -38,7 +38,7 @@ dependencies = [
   "albumentations",
   "click",
   "clip_anytorch",          # replacing "clip @ https://github.com/openai/CLIP/archive/eaa22acb90a5876642d0507623e859909230a52d.zip",
-  "compel==0.1.10",
+  "compel==1.0.1",
   "datasets",
   "diffusers[torch]~=0.14",
   "dnspython==2.2.1",