feat(ui): UX improvements & updated design

invokeai/app/api/routers/utilities.py

@@ -23,10 +23,11 @@ class DynamicPromptsResponse(BaseModel):
 )
 async def parse_dynamicprompts(
     prompt: str = Body(description="The prompt to parse with dynamicprompts"),
-    max_prompts: int = Body(default=1000, description="The max number of prompts to generate"),
+    max_prompts: int = Body(ge=1, le=10000, default=1000, description="The max number of prompts to generate"),
     combinatorial: bool = Body(default=True, description="Whether to use the combinatorial generator"),
 ) -> DynamicPromptsResponse:
     """Creates a batch process"""
+    max_prompts = min(max_prompts, 10000)
     generator: Union[RandomPromptGenerator, CombinatorialPromptGenerator]
     try:
         error: Optional[str] = None

invokeai/frontend/web/.eslintrc.js

@@ -28,12 +28,16 @@ module.exports = {
     'i18next',
     'path',
     'unused-imports',
+    'simple-import-sort',
+    'eslint-plugin-import',
+    // These rules are too strict for normal usage, but are useful for optimizing rerenders
+    // '@arthurgeron/react-usememo',
   ],
   root: true,
   rules: {
     'path/no-relative-imports': ['error', { maxDepth: 0 }],
     curly: 'error',
-    'i18next/no-literal-string': 2,
+    'i18next/no-literal-string': 'warn',
     'react/jsx-no-bind': ['error', { allowBind: true }],
     'react/jsx-curly-brace-presence': [
       'error',
@@ -43,6 +47,7 @@ module.exports = {
     'no-var': 'error',
     'brace-style': 'error',
     'prefer-template': 'error',
+    'import/no-duplicates': 'error',
     radix: 'error',
     'space-before-blocks': 'error',
     'import/prefer-default-export': 'off',
@@ -57,6 +62,18 @@ module.exports = {
         argsIgnorePattern: '^_',
       },
     ],
+    // These rules are too strict for normal usage, but are useful for optimizing rerenders
+    // '@arthurgeron/react-usememo/require-usememo': [
+    //   'warn',
+    //   {
+    //     strict: false,
+    //     checkHookReturnObject: false,
+    //     fix: { addImports: true },
+    //     checkHookCalls: false,
+
+    //   },
+    // ],
+    // '@arthurgeron/react-usememo/require-memo': 'warn',
     '@typescript-eslint/ban-ts-comment': 'warn',
     '@typescript-eslint/no-explicit-any': 'warn',
     '@typescript-eslint/no-empty-interface': [
@@ -65,7 +82,26 @@ module.exports = {
         allowSingleExtends: true,
       },
     ],
+    '@typescript-eslint/consistent-type-imports': [
+      'error',
+      {
+        prefer: 'type-imports',
+        fixStyle: 'separate-type-imports',
+        disallowTypeAnnotations: true,
+      },
+    ],
+    '@typescript-eslint/no-import-type-side-effects': 'error',
+    'simple-import-sort/imports': 'error',
+    'simple-import-sort/exports': 'error',
   },
+  overrides: [
+    {
+      files: ['*.stories.tsx'],
+      rules: {
+        'i18next/no-literal-string': 'off',
+      },
+    },
+  ],
   settings: {
     react: {
       version: 'detect',

invokeai/frontend/web/.prettierignore

@@ -12,4 +12,5 @@ index.html
 src/services/api/schema.d.ts
 static/
 src/theme/css/overlayscrollbars.css
+src/theme_/css/overlayscrollbars.css
 pnpm-lock.yaml

invokeai/frontend/web/.storybook/ReduxInit.tsx

@@ -0,0 +1,25 @@
+import { PropsWithChildren, memo, useEffect } from 'react';
+import { modelChanged } from '../src/features/parameters/store/generationSlice';
+import { useAppDispatch } from '../src/app/store/storeHooks';
+import { useGlobalModifiersInit } from '../src/common/hooks/useGlobalModifiers';
+/**
+ * Initializes some state for storybook. Must be in a different component
+ * so that it is run inside the redux context.
+ */
+export const ReduxInit = memo((props: PropsWithChildren) => {
+  const dispatch = useAppDispatch();
+  useGlobalModifiersInit();
+  useEffect(() => {
+    dispatch(
+      modelChanged({
+        model_name: 'test_model',
+        base_model: 'sd-1',
+        model_type: 'main',
+      })
+    );
+  }, []);
+
+  return props.children;
+});
+
+ReduxInit.displayName = 'ReduxInit';

invokeai/frontend/web/.storybook/main.ts

@@ -6,6 +6,7 @@ const config: StorybookConfig = {
     '@storybook/addon-links',
     '@storybook/addon-essentials',
     '@storybook/addon-interactions',
+    '@storybook/addon-storysource',
   ],
   framework: {
     name: '@storybook/react-vite',

invokeai/frontend/web/.storybook/preview.tsx

@@ -1,16 +1,17 @@
 import { Preview } from '@storybook/react';
 import { themes } from '@storybook/theming';
 import i18n from 'i18next';
-import React from 'react';
 import { initReactI18next } from 'react-i18next';
 import { Provider } from 'react-redux';
-import GlobalHotkeys from '../src/app/components/GlobalHotkeys';
 import ThemeLocaleProvider from '../src/app/components/ThemeLocaleProvider';
+import { $baseUrl } from '../src/app/store/nanostores/baseUrl';
 import { createStore } from '../src/app/store/store';
+import { Container } from '@chakra-ui/react';
 // TODO: Disabled for IDE performance issues with our translation JSON
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore
 import translationEN from '../public/locales/en.json';
+import { ReduxInit } from './ReduxInit';
 
 i18n.use(initReactI18next).init({
   lng: 'en',
@@ -25,17 +26,21 @@ i18n.use(initReactI18next).init({
 });
 
 const store = createStore(undefined, false);
+$baseUrl.set('http://localhost:9090');
 
 const preview: Preview = {
   decorators: [
-    (Story) => (
-      <Provider store={store}>
-        <ThemeLocaleProvider>
-          <GlobalHotkeys />
-          <Story />
-        </ThemeLocaleProvider>
-      </Provider>
-    ),
+    (Story) => {
+      return (
+        <Provider store={store}>
+          <ThemeLocaleProvider>
+            <ReduxInit>
+              <Story />
+            </ReduxInit>
+          </ThemeLocaleProvider>
+        </Provider>
+      );
+    },
   ],
   parameters: {
     docs: {

invokeai/frontend/web/.unimportedrc.json

@@ -0,0 +1,15 @@
+{
+  "entry": ["src/main.tsx"],
+  "extensions": [".ts", ".tsx"],
+  "ignorePatterns": [
+    "**/node_modules/**",
+    "dist/**",
+    "public/**",
+    "**/*.stories.tsx",
+    "config/**"
+  ],
+  "ignoreUnresolved": [],
+  "ignoreUnimported": ["src/i18.d.ts", "vite.config.ts", "src/vite-env.d.ts"],
+  "respectGitignore": true,
+  "ignoreUnused": []
+}

invokeai/frontend/web/config/common.ts

@@ -1,6 +1,6 @@
 import react from '@vitejs/plugin-react-swc';
 import { visualizer } from 'rollup-plugin-visualizer';
-import { PluginOption, UserConfig } from 'vite';
+import type { PluginOption, UserConfig } from 'vite';
 import eslint from 'vite-plugin-eslint';
 import tsconfigPaths from 'vite-tsconfig-paths';
 

invokeai/frontend/web/config/vite.app.config.ts

@@ -1,4 +1,5 @@
-import { UserConfig } from 'vite';
+import type { UserConfig } from 'vite';
+
 import { commonPlugins } from './common';
 
 export const appConfig: UserConfig = {

invokeai/frontend/web/config/vite.package.config.ts

@@ -1,7 +1,8 @@
 import path from 'path';
-import { UserConfig } from 'vite';
-import dts from 'vite-plugin-dts';
+import type { UserConfig } from 'vite';
 import cssInjectedByJsPlugin from 'vite-plugin-css-injected-by-js';
+import dts from 'vite-plugin-dts';
+
 import { commonPlugins } from './common';
 
 export const packageConfig: UserConfig = {

invokeai/frontend/web/package.json

@@ -31,13 +31,17 @@
     "lint": "concurrently -g -n eslint,prettier,tsc,madge -c cyan,green,magenta,yellow \"pnpm run lint:eslint\" \"pnpm run lint:prettier\" \"pnpm run lint:tsc\" \"pnpm run lint:madge\"",
     "fix": "eslint --fix . && prettier --log-level warn --write .",
     "preinstall": "npx only-allow pnpm",
-    "postinstall": "patch-package && pnpm run theme",
+    "postinstall": "pnpm run theme",
     "theme": "chakra-cli tokens src/theme/theme.ts",
     "theme:watch": "chakra-cli tokens src/theme/theme.ts --watch",
     "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build"
+    "build-storybook": "storybook build",
+    "unimported": "npx unimported"
   },
   "madge": {
+    "excludeRegExp": [
+      "^index.ts$"
+    ],
     "detectiveOptions": {
       "ts": {
         "skipTypeImports": true
@@ -53,56 +57,56 @@
     "@chakra-ui/layout": "^2.3.1",
     "@chakra-ui/portal": "^2.1.0",
     "@chakra-ui/react": "^2.8.2",
+    "@chakra-ui/react-use-size": "^2.1.0",
     "@chakra-ui/styled-system": "^2.9.2",
     "@chakra-ui/theme-tools": "^2.1.2",
     "@dagrejs/graphlib": "^2.1.13",
     "@dnd-kit/core": "^6.1.0",
     "@dnd-kit/utilities": "^3.2.2",
-    "@emotion/react": "^11.11.1",
+    "@emotion/react": "^11.11.3",
     "@emotion/styled": "^11.11.0",
     "@fontsource-variable/inter": "^5.0.16",
-    "@mantine/core": "^6.0.19",
-    "@mantine/form": "^6.0.19",
-    "@mantine/hooks": "^6.0.19",
+    "@mantine/form": "6.0.21",
     "@nanostores/react": "^0.7.1",
     "@reduxjs/toolkit": "^2.0.1",
     "@roarr/browser-log-writer": "^1.3.0",
-    "@storybook/manager-api": "^7.6.4",
-    "@storybook/theming": "^7.6.4",
+    "chakra-react-select": "^4.7.6",
     "compare-versions": "^6.1.0",
     "dateformat": "^5.0.3",
-    "framer-motion": "^10.16.15",
-    "i18next": "^23.7.8",
+    "framer-motion": "^10.16.16",
+    "i18next": "^23.7.12",
     "i18next-http-backend": "^2.4.2",
     "idb-keyval": "^6.2.1",
-    "konva": "^9.2.3",
+    "konva": "^9.3.0",
     "lodash-es": "^4.17.21",
     "nanostores": "^0.9.5",
     "new-github-issue-url": "^1.0.0",
-    "overlayscrollbars": "^2.4.5",
+    "overlayscrollbars": "^2.4.6",
     "overlayscrollbars-react": "^0.5.3",
-    "patch-package": "^8.0.0",
     "query-string": "^8.1.0",
     "react": "^18.2.0",
     "react-colorful": "^5.6.1",
     "react-dom": "^18.2.0",
     "react-dropzone": "^14.2.3",
-    "react-error-boundary": "^4.0.11",
+    "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",
     "react-konva": "^18.2.10",
-    "react-redux": "^9.0.2",
-    "react-resizable-panels": "^0.0.55",
+    "react-redux": "^9.0.4",
+    "react-resizable-panels": "^1.0.5",
+    "react-select": "5.7.7",
+    "react-textarea-autosize": "^8.5.3",
     "react-use": "^17.4.2",
     "react-virtuoso": "^4.6.2",
     "reactflow": "^11.10.1",
     "redux-dynamic-middlewares": "^2.2.0",
-    "redux-remember": "^5.0.0",
+    "redux-remember": "^5.0.1",
     "roarr": "^7.21.0",
     "serialize-error": "^11.0.3",
     "socket.io-client": "^4.7.2",
-    "type-fest": "^4.8.3",
+    "type-fest": "^4.9.0",
     "use-debounce": "^10.0.0",
     "use-image": "^1.1.1",
     "uuid": "^9.0.1",
@@ -117,44 +121,51 @@
     "ts-toolbelt": "^9.6.0"
   },
   "devDependencies": {
+    "@arthurgeron/eslint-plugin-react-usememo": "^2.2.1",
     "@chakra-ui/cli": "^2.4.1",
-    "@storybook/addon-essentials": "^7.6.4",
-    "@storybook/addon-interactions": "^7.6.4",
-    "@storybook/addon-links": "^7.6.4",
-    "@storybook/blocks": "^7.6.4",
-    "@storybook/react": "^7.6.4",
-    "@storybook/react-vite": "^7.6.4",
-    "@storybook/test": "^7.6.4",
+    "@storybook/addon-docs": "^7.6.6",
+    "@storybook/addon-essentials": "^7.6.6",
+    "@storybook/addon-interactions": "^7.6.6",
+    "@storybook/addon-links": "^7.6.6",
+    "@storybook/addon-storysource": "^7.6.6",
+    "@storybook/blocks": "^7.6.6",
+    "@storybook/manager-api": "^7.6.6",
+    "@storybook/react": "^7.6.6",
+    "@storybook/react-vite": "^7.6.6",
+    "@storybook/test": "^7.6.6",
+    "@storybook/theming": "^7.6.6",
     "@types/dateformat": "^5.0.2",
     "@types/lodash-es": "^4.17.12",
-    "@types/node": "^20.9.0",
-    "@types/react": "^18.2.37",
-    "@types/react-dom": "^18.2.17",
+    "@types/node": "^20.10.5",
+    "@types/react": "^18.2.46",
+    "@types/react-dom": "^18.2.18",
     "@types/uuid": "^9.0.7",
-    "@typescript-eslint/eslint-plugin": "^6.13.2",
-    "@typescript-eslint/parser": "^6.13.2",
+    "@typescript-eslint/eslint-plugin": "^6.16.0",
+    "@typescript-eslint/parser": "^6.16.0",
     "@vitejs/plugin-react-swc": "^3.5.0",
     "concurrently": "^8.2.2",
-    "eslint": "^8.55.0",
+    "eslint": "^8.56.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-i18next": "^6.0.3",
-    "eslint-plugin-path": "^1.2.2",
+    "eslint-plugin-import": "^2.29.1",
+    "eslint-plugin-path": "^1.2.3",
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-simple-import-sort": "^10.0.0",
     "eslint-plugin-storybook": "^0.6.15",
     "eslint-plugin-unused-imports": "^3.0.0",
     "madge": "^6.1.0",
     "openapi-types": "^12.1.3",
-    "openapi-typescript": "^6.7.2",
-    "prettier": "^3.1.0",
-    "rollup-plugin-visualizer": "^5.10.0",
-    "storybook": "^7.6.4",
+    "openapi-typescript": "^6.7.3",
+    "prettier": "^3.1.1",
+    "rollup-plugin-visualizer": "^5.12.0",
+    "storybook": "^7.6.6",
     "ts-toolbelt": "^9.6.0",
     "typescript": "^5.3.3",
     "vite": "^4.5.1",
-    "vite-plugin-css-injected-by-js": "^3.3.0",
-    "vite-plugin-dts": "^3.6.4",
+    "vite-plugin-css-injected-by-js": "^3.3.1",
+    "vite-plugin-dts": "^3.7.0",
     "vite-plugin-eslint": "^1.8.1",
-    "vite-tsconfig-paths": "^4.2.2"
+    "vite-tsconfig-paths": "^4.2.3"
   }
 }