feat(ui): migrated theming to chakra

build(ui): fix husky path

build(ui): fix hmr issue, remove emotion cache

build(ui): clean up package.json

build(ui): update gh action and npm scripts

feat(ui): wip port lightbox to chakra theme

feat(ui): wip use chakra theme tokens

feat(ui): Add status text to main loading spinner

feat(ui): wip chakra theme tweaking

feat(ui): simply iaisimplemenu button

feat(ui): wip chakra theming

feat(ui): Theme Management

feat(ui): Add Ocean Blue Theme

feat(ui): wip lightbox

fix(ui): fix lightbox mouse

feat(ui): set default theme variants

feat(ui): model manager chakra theme

chore(ui): lint

feat(ui): remove last scss

feat(ui): fix switch theme

feat(ui): Theme Cleanup

feat(ui): Stylize Search Models Found List

feat(ui): hide scrollbars

feat(ui): fix floating button position

feat(ui): Scrollbar Styling

fix broken scripts

This PR fixes the following scripts:

1) Scripts that can be executed within the repo's scripts directory.
   Note that these are for development testing and are not intended
   to be exposed to the user.

   configure_invokeai.py - configuration
   dream.py              - the legacy CLI
   images2prompt.py      - legacy "dream prompt" retriever
   invoke-new.py         - new nodes-based CLI
   invoke.py             - the legacy CLI under another name
   make_models_markdown_table.py - a utility used during the release/doc process
   pypi_helper.py        - another utility used during the release process
   sd-metadata.py        - retrieve JSON-formatted metadata from a PNG file

2) Scripts that are installed by pip install. They get placed into the venv's
   PATH and are intended to be the official entry points:

   invokeai-node-cli      - new nodes-based CLI
   invokeai-node-web      - new nodes-based web server
   invokeai               - legacy CLI
   invokeai-configure     - install time configuration script
   invokeai-merge         - model merging script
   invokeai-ti            - textual inversion script
   invokeai-model-install - model installer
   invokeai-update        - update script
   invokeai-metadata"     - retrieve JSON-formatted metadata from PNG files

protect invocations against black autoformatting

deps: upgrade to diffusers 0.14, safetensors 0.3, transformers 4.26, accelerate 0.16

invokeai/frontend/web/src/common/components/WorkInProgress/NodesWIP.tsx

@@ -1,11 +1,27 @@
+import { Flex, Heading, Text, VStack } from '@chakra-ui/react';
 import { useTranslation } from 'react-i18next';
+import WorkInProgress from './WorkInProgress';
 
 export default function NodesWIP() {
   const { t } = useTranslation();
   return (
-    <div className="work-in-progress nodes-work-in-progress">
-      <h1>{t('common.nodes')}</h1>
-      <p>{t('common.nodesDesc')}</p>
-    </div>
+    <WorkInProgress>
+      <Flex
+        sx={{
+          flexDirection: 'column',
+          alignItems: 'center',
+          justifyContent: 'center',
+          w: '100%',
+          h: '100%',
+          gap: 4,
+          textAlign: 'center',
+        }}
+      >
+        <Heading>{t('common.nodes')}</Heading>
+        <VStack maxW="50rem" gap={4}>
+          <Text>{t('common.nodesDesc')}</Text>
+        </VStack>
+      </Flex>
+    </WorkInProgress>
   );
 }

invokeai/frontend/web/src/common/components/WorkInProgress/PostProcessingWIP.tsx

@@ -1,13 +1,29 @@
+import { Flex, Heading, Text, VStack } from '@chakra-ui/react';
 import { useTranslation } from 'react-i18next';
+import WorkInProgress from './WorkInProgress';
 
 export const PostProcessingWIP = () => {
   const { t } = useTranslation();
   return (
-    <div className="work-in-progress post-processing-work-in-progress">
-      <h1>{t('common.postProcessing')}</h1>
-      <p>{t('common.postProcessDesc1')}</p>
-      <p>{t('common.postProcessDesc2')}</p>
-      <p>{t('common.postProcessDesc3')}</p>
-    </div>
+    <WorkInProgress>
+      <Flex
+        sx={{
+          flexDirection: 'column',
+          alignItems: 'center',
+          justifyContent: 'center',
+          w: '100%',
+          h: '100%',
+          gap: 4,
+          textAlign: 'center',
+        }}
+      >
+        <Heading>{t('common.postProcessing')}</Heading>
+        <VStack maxW="50rem" gap={4}>
+          <Text>{t('common.postProcessDesc1')}</Text>
+          <Text>{t('common.postProcessDesc2')}</Text>
+          <Text>{t('common.postProcessDesc3')}</Text>
+        </VStack>
+      </Flex>
+    </WorkInProgress>
   );
 };

invokeai/frontend/web/src/common/components/WorkInProgress/Training.tsx

@@ -1,16 +1,28 @@
+import { Flex, Heading, Text, VStack } from '@chakra-ui/react';
 import { useTranslation } from 'react-i18next';
+import WorkInProgress from './WorkInProgress';
 
 export default function TrainingWIP() {
   const { t } = useTranslation();
   return (
-    <div className="work-in-progress nodes-work-in-progress">
-      <h1>{t('common.training')}</h1>
-      <p>
-        {t('common.trainingDesc1')}
-        <br />
-        <br />
-        {t('common.trainingDesc2')}
-      </p>
-    </div>
+    <WorkInProgress>
+      <Flex
+        sx={{
+          flexDirection: 'column',
+          alignItems: 'center',
+          justifyContent: 'center',
+          w: '100%',
+          h: '100%',
+          gap: 4,
+          textAlign: 'center',
+        }}
+      >
+        <Heading>{t('common.training')}</Heading>
+        <VStack maxW="50rem" gap={4}>
+          <Text>{t('common.trainingDesc1')}</Text>
+          <Text>{t('common.trainingDesc2')}</Text>
+        </VStack>
+      </Flex>
+    </WorkInProgress>
   );
 }

invokeai/frontend/web/src/common/components/WorkInProgress/WorkInProgress.scss

@@ -1,24 +0,0 @@
-@use '../../../styles/Mixins/' as *;
-
-.work-in-progress {
-  display: grid;
-  width: 100%;
-  height: $app-content-height;
-  grid-auto-rows: max-content;
-  background-color: var(--background-color-secondary);
-  border-radius: 0.4rem;
-  place-content: center;
-  place-items: center;
-  row-gap: 1rem;
-
-  h1 {
-    font-size: 2rem;
-    font-weight: bold;
-  }
-
-  p {
-    text-align: center;
-    max-width: 50rem;
-    color: var(--subtext-color-bright);
-  }
-}

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

@@ -0,0 +1,24 @@
+import { Flex } from '@chakra-ui/react';
+import { ReactNode } from 'react';
+
+type WorkInProgressProps = {
+  children: ReactNode;
+};
+
+const WorkInProgress = (props: WorkInProgressProps) => {
+  const { children } = props;
+
+  return (
+    <Flex
+      sx={{
+        width: '100%',
+        height: '100%',
+        bg: 'base.850',
+      }}
+    >
+      {children}
+    </Flex>
+  );
+};
+
+export default WorkInProgress;