feat(ui): partial rebuild of model manager internal logic

invoke-ai · Dec 29, 2023 · 0c6f0e6 · 0c6f0e6
1 parent bb491ea
commit 0c6f0e6
Show file tree

Hide file tree

Showing 16 changed files with 455 additions and 315 deletions.
diff --git a/invokeai/frontend/web/package.json b/invokeai/frontend/web/package.json
@@ -66,7 +66,7 @@
     "@emotion/react": "^11.11.3",
     "@emotion/styled": "^11.11.0",
     "@fontsource-variable/inter": "^5.0.16",
-    "@mantine/form": "^6.0.21",
+    "@mantine/form": "6.0.21",
     "@nanostores/react": "^0.7.1",
     "@reduxjs/toolkit": "^2.0.1",
     "@roarr/browser-log-writer": "^1.3.0",
@@ -89,6 +89,7 @@
     "react-dom": "^18.2.0",
     "react-dropzone": "^14.2.3",
     "react-error-boundary": "^4.0.12",
+    "react-hook-form": "^7.49.2",
     "react-hotkeys-hook": "4.4.1",
     "react-i18next": "^13.5.0",
     "react-icons": "^4.12.0",

diff --git a/invokeai/frontend/web/pnpm-lock.yaml b/invokeai/frontend/web/pnpm-lock.yaml
diff --git a/invokeai/frontend/web/src/common/components/InvControl/InvControl.tsx b/invokeai/frontend/web/src/common/components/InvControl/InvControl.tsx
@@ -1,6 +1,7 @@
 import {
   Flex,
   FormControl as ChakraFormControl,
+  FormErrorMessage as ChakraFormErrorMessage,
   FormHelperText as ChakraFormHelperText,
   forwardRef,
 } from '@chakra-ui/react';
@@ -22,36 +23,38 @@ export const InvControl = memo(
         isDisabled,
         labelProps,
         label,
+        error,
         ...formControlProps
       } = props;
 
       const ctx = useContext(InvControlGroupContext);
 
-      if (helperText) {
-        return (
-          <ChakraFormControl
-            ref={ref}
-            variant="withHelperText"
-            orientation={orientation ?? ctx.orientation}
-            isDisabled={isDisabled ?? ctx.isDisabled}
-            {...formControlProps}
-          >
-            <Flex>
-              {label && (
-                <InvLabel
-                  feature={feature}
-                  renderInfoPopoverInPortal={renderInfoPopoverInPortal}
-                  {...labelProps}
-                >
-                  {label}
-                </InvLabel>
-              )}
-              {children}
-            </Flex>
+      return (
+        <ChakraFormControl
+          ref={ref}
+          variant="withHelperText"
+          orientation={orientation ?? ctx.orientation}
+          isDisabled={isDisabled ?? ctx.isDisabled}
+          {...formControlProps}
+        >
+          <Flex>
+            {label && (
+              <InvLabel
+                feature={feature}
+                renderInfoPopoverInPortal={renderInfoPopoverInPortal}
+                {...labelProps}
+              >
+                {label}
+              </InvLabel>
+            )}
+            {children}
+          </Flex>
+          {helperText && (
             <ChakraFormHelperText>{helperText}</ChakraFormHelperText>
-          </ChakraFormControl>
-        );
-      }
+          )}
+          {error && <ChakraFormErrorMessage>{error}</ChakraFormErrorMessage>}
+        </ChakraFormControl>
+      );
 
       return (
         <ChakraFormControl

diff --git a/invokeai/frontend/web/src/common/components/InvControl/theme.ts b/invokeai/frontend/web/src/common/components/InvControl/theme.ts
@@ -1,14 +1,19 @@
-import { formAnatomy as parts } from '@chakra-ui/anatomy';
+import {
+  formAnatomy as formParts,
+  formErrorAnatomy as formErrorParts,
+} from '@chakra-ui/anatomy';
 import {
   createMultiStyleConfigHelpers,
   defineStyle,
   defineStyleConfig,
 } from '@chakra-ui/styled-system';
 
-const { definePartsStyle, defineMultiStyleConfig } =
-  createMultiStyleConfigHelpers(parts.keys);
+const {
+  definePartsStyle: defineFormPartsStyle,
+  defineMultiStyleConfig: defineFormMultiStyleConfig,
+} = createMultiStyleConfigHelpers(formParts.keys);
 
-const formBaseStyle = definePartsStyle((props) => {
+const formBaseStyle = defineFormPartsStyle((props) => {
   return {
     container: {
       display: 'flex',
@@ -19,7 +24,7 @@ const formBaseStyle = definePartsStyle((props) => {
   };
 });
 
-const withHelperText = definePartsStyle(() => ({
+const withHelperText = defineFormPartsStyle(() => ({
   container: {
     flexDirection: 'column',
     gap: 0,
@@ -41,7 +46,7 @@ const withHelperText = definePartsStyle(() => ({
   },
 }));
 
-export const formTheme = defineMultiStyleConfig({
+export const formTheme = defineFormMultiStyleConfig({
   baseStyle: formBaseStyle,
   variants: {
     withHelperText,
@@ -73,3 +78,14 @@ const formLabelBaseStyle = defineStyle(() => {
 export const formLabelTheme = defineStyleConfig({
   baseStyle: formLabelBaseStyle,
 });
+
+const { defineMultiStyleConfig: defineFormErrorMultiStyleConfig } =
+  createMultiStyleConfigHelpers(formErrorParts.keys);
+
+export const formErrorTheme = defineFormErrorMultiStyleConfig({
+  baseStyle: {
+    text: {
+      color: 'error.300',
+    },
+  },
+});
diff --git a/invokeai/frontend/web/src/common/components/InvControl/types.ts b/invokeai/frontend/web/src/common/components/InvControl/types.ts
@@ -7,6 +7,7 @@ import type { Feature } from 'common/components/IAIInformationalPopover/constant
 export type InvControlProps = ChakraFormControlProps & {
   label?: string;
   helperText?: string;
+  error?: string;
   feature?: Feature;
   renderInfoPopoverInPortal?: boolean;
   labelProps?: Omit<