Merge branch 'main' into JPPhoto-symmetry-enhancements

.github/ISSUE_TEMPLATE/BUG_REPORT.yml

@@ -65,6 +65,16 @@ body:
       placeholder: 8GB
     validations:
       required: false
+      
+  - type: input
+    id: version-number
+    attributes:
+      label: What version did you experience this issue on?
+      description: |
+        Please share the version of Invoke AI that you experienced the issue on. If this is not the latest version, please update first to confirm the issue still exists. If you are testing main, please include the commit hash instead.
+      placeholder: X.X.X
+    validations:
+      required: true
 
   - type: textarea
     id: what-happened

invokeai/frontend/web/dist/assets/ThemeLocaleProvider-a1ea5622.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-e1f916bd.js";import{d as yt,i as St,T as xt,j as $t,h as kt}from"./storeHooks-548a355c.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-2ad84bef.js";import{d as yt,i as St,T as xt,j as $t,h as kt}from"./storeHooks-e63a2dc4.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-e1f916bd.js"></script>
+    <script type="module" crossorigin src="./assets/index-2ad84bef.js"></script>
     <link rel="stylesheet" href="./assets/index-5483945c.css">
   </head>
 

invokeai/frontend/web/index.d.ts

@@ -39,3 +39,6 @@ declare global {
   }
   /* eslint-enable @typescript-eslint/no-explicit-any */
 }
+
+declare function Invoke(): React.JSX;
+export = Invoke;

invokeai/frontend/web/package.json

@@ -6,6 +6,7 @@
     "prepare": "cd ../../../ && husky install invokeai/frontend/web/.husky",
     "dev": "concurrently \"vite dev\" \"yarn run theme:watch\"",
     "build": "yarn run lint && vite build",
+    "build:package": "vite build --mode=package",
     "preview": "vite preview",
     "lint:madge": "madge --circular src/main.tsx",
     "lint:eslint": "eslint --max-warnings=0 .",
@@ -36,6 +37,7 @@
   },
   "dependencies": {
     "@chakra-ui/anatomy": "^2.1.1",
+    "@chakra-ui/cli": "^2.3.0",
     "@chakra-ui/icons": "^2.0.17",
     "@chakra-ui/react": "^2.5.1",
     "@chakra-ui/styled-system": "^2.6.1",
@@ -52,6 +54,7 @@
     "i18next-http-backend": "^2.1.1",
     "konva": "^8.4.2",
     "lodash": "^4.17.21",
+    "patch-package": "^6.5.1",
     "re-resizable": "^6.9.9",
     "react": "^18.2.0",
     "react-colorful": "^5.6.1",
@@ -72,7 +75,6 @@
     "uuid": "^9.0.0"
   },
   "devDependencies": {
-    "@chakra-ui/cli": "^2.3.0",
     "@fontsource/inter": "^4.5.15",
     "@types/dateformat": "^5.0.0",
     "@types/react": "^18.0.28",
@@ -92,7 +94,6 @@
     "husky": "^8.0.3",
     "lint-staged": "^13.1.2",
     "madge": "^6.0.0",
-    "patch-package": "^6.5.1",
     "postinstall-postinstall": "^2.1.0",
     "prettier": "^2.8.4",
     "rollup-plugin-visualizer": "^5.9.0",

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

@@ -8,13 +8,14 @@ import {
 import { memo } from 'react';
 
 export type IAIIconButtonProps = IconButtonProps & {
+  role?: string;
   tooltip?: string;
   tooltipProps?: Omit<TooltipProps, 'children'>;
   isChecked?: boolean;
 };
 
 const IAIIconButton = forwardRef((props: IAIIconButtonProps, forwardedRef) => {
-  const { tooltip = '', tooltipProps, isChecked, ...rest } = props;
+  const { role, tooltip = '', tooltipProps, isChecked, ...rest } = props;
 
   return (
     <Tooltip
@@ -27,6 +28,7 @@ const IAIIconButton = forwardRef((props: IAIIconButtonProps, forwardedRef) => {
     >
       <IconButton
         ref={forwardedRef}
+        role={role}
         aria-checked={isChecked !== undefined ? isChecked : undefined}
         {...rest}
       />
@@ -34,4 +36,5 @@ const IAIIconButton = forwardRef((props: IAIIconButtonProps, forwardedRef) => {
   );
 });
 
+IAIIconButton.displayName = 'IAIIconButton';
 export default memo(IAIIconButton);

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

@@ -101,12 +101,14 @@ const ImageGalleryContent = () => {
                 aria-label={t('gallery.showGenerations')}
                 tooltip={t('gallery.showGenerations')}
                 isChecked={currentCategory === 'result'}
+                role="radio"
                 icon={<FaImage />}
                 onClick={() => dispatch(setCurrentCategory('result'))}
               />
               <IAIIconButton
                 aria-label={t('gallery.showUploads')}
                 tooltip={t('gallery.showUploads')}
+                role="radio"
                 isChecked={currentCategory === 'user'}
                 icon={<FaUser />}
                 onClick={() => dispatch(setCurrentCategory('user'))}
@@ -251,4 +253,5 @@ const ImageGalleryContent = () => {
   );
 };
 
+ImageGalleryContent.displayName = 'ImageGalleryContent';
 export default ImageGalleryContent;

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

@@ -61,47 +61,53 @@ const SiteHeader = () => {
 
         <LanguagePicker />
 
-        <IAIIconButton
-          aria-label={t('common.reportBugLabel')}
-          tooltip={t('common.reportBugLabel')}
-          variant="link"
-          data-variant="link"
-          fontSize={20}
-          size="sm"
-          icon={
-            <Link isExternal href="http://github.com/invoke-ai/InvokeAI/issues">
-              <FaBug />
-            </Link>
-          }
-        />
+        <Link
+          isExternal
+          href="http://github.com/invoke-ai/InvokeAI/issues"
+          marginBottom="-0.25rem"
+        >
+          <IAIIconButton
+            aria-label={t('common.reportBugLabel')}
+            tooltip={t('common.reportBugLabel')}
+            variant="link"
+            data-variant="link"
+            fontSize={20}
+            size="sm"
+            icon={<FaBug />}
+          />
+        </Link>
 
-        <IAIIconButton
-          aria-label={t('common.githubLabel')}
-          tooltip={t('common.githubLabel')}
-          variant="link"
-          data-variant="link"
-          fontSize={20}
-          size="sm"
-          icon={
-            <Link isExternal href="http://github.com/invoke-ai/InvokeAI">
-              <FaGithub />
-            </Link>
-          }
-        />
+        <Link
+          isExternal
+          href="http://github.com/invoke-ai/InvokeAI"
+          marginBottom="-0.25rem"
+        >
+          <IAIIconButton
+            aria-label={t('common.githubLabel')}
+            tooltip={t('common.githubLabel')}
+            variant="link"
+            data-variant="link"
+            fontSize={20}
+            size="sm"
+            icon={<FaGithub />}
+          />
+        </Link>
 
-        <IAIIconButton
-          aria-label={t('common.discordLabel')}
-          tooltip={t('common.discordLabel')}
-          variant="link"
-          data-variant="link"
-          fontSize={20}
-          size="sm"
-          icon={
-            <Link isExternal href="https://discord.gg/ZmtBAhwWhy">
-              <FaDiscord />
-            </Link>
-          }
-        />
+        <Link
+          isExternal
+          href="https://discord.gg/ZmtBAhwWhy"
+          marginBottom="-0.25rem"
+        >
+          <IAIIconButton
+            aria-label={t('common.discordLabel')}
+            tooltip={t('common.discordLabel')}
+            variant="link"
+            data-variant="link"
+            fontSize={20}
+            size="sm"
+            icon={<FaDiscord />}
+          />
+        </Link>
 
         <SettingsModal>
           <IAIIconButton
@@ -119,4 +125,5 @@ const SiteHeader = () => {
   );
 };
 
+SiteHeader.displayName = 'SiteHeader';
 export default SiteHeader;

invokeai/frontend/web/vite.config.ts

@@ -1,3 +1,4 @@
+import path from 'path';
 import react from '@vitejs/plugin-react-swc';
 import { visualizer } from 'rollup-plugin-visualizer';
 import { defineConfig, PluginOption } from 'vite';
@@ -46,7 +47,7 @@ export default defineConfig(({ mode }) => {
        * overrides any target specified here.
        */
       // target: 'esnext',
-      chunkSizeWarningLimit: 1500, // we don't really care about chunk size
+      chunkSizeWarningLimit: 1500, // we don't really care about chunk size,
     },
   };
   if (mode == 'development') {
@@ -57,6 +58,26 @@ export default defineConfig(({ mode }) => {
         // sourcemap: true, // this can be enabled if needed, it adds ovwer 15MB to the commit
       },
     };
+  } else if (mode === 'package') {
+    return {
+      ...common,
+      build: {
+        ...common.build,
+        lib: {
+          entry: path.resolve(__dirname, 'src/component.tsx'),
+          name: 'InvokeAI UI',
+          fileName: (format) => `invoke-ai-ui.${format}.js`,
+        },
+        rollupOptions: {
+          external: ['react', 'react-dom'],
+          output: {
+            globals: {
+              react: 'React',
+            },
+          },
+        },
+      },
+    };
   } else {
     return {
       ...common,