ui: misc fixes (#3398)

- do not show canvas intermediates in gallery - do not show progress image in uploads gallery category - use custom dark mode `localStorage` key (prevents collision with commercial) - use variable font (reduce bundle size by factor of 10) - change how custom headers are used - use style injection for building package - fix tab icon sizes
2024-08-30 20:32:17 +00:00 · 2023-05-12 21:00:47 +12:00 · 2023-05-12 21:00:47 +12:00 · f44593331d
commit f44593331d
parent 5013a4b9f3 3d9ecbf3c7
32 changed files with 103 additions and 130 deletions
--- a/invokeai/frontend/web/config/vite.package.config.ts
+++ b/invokeai/frontend/web/config/vite.package.config.ts
@ -5,6 +5,7 @@ import { PluginOption, UserConfig } from 'vite';
 import dts from 'vite-plugin-dts';
 import eslint from 'vite-plugin-eslint';
 import tsconfigPaths from 'vite-tsconfig-paths';
+import cssInjectedByJsPlugin from 'vite-plugin-css-injected-by-js';

 export const packageConfig: UserConfig = {
  base: './',
@ -16,9 +17,10 @@ export const packageConfig: UserConfig = {
    dts({
      insertTypesEntry: true,
    }),
+    cssInjectedByJsPlugin(),
  ],
  build: {
-    chunkSizeWarningLimit: 1500,
+    cssCodeSplit: true,
    lib: {
      entry: path.resolve(__dirname, '../src/index.ts'),
      name: 'InvokeAIUI',
@ -30,6 +32,7 @@ export const packageConfig: UserConfig = {
        globals: {
          react: 'React',
          'react-dom': 'ReactDOM',
+          '@emotion/react': 'EmotionReact',
        },
      },
    },
--- a/invokeai/frontend/web/package.json
+++ b/invokeai/frontend/web/package.json
@ -145,6 +145,7 @@
    "terser": "^5.17.1",
    "ts-toolbelt": "^9.6.0",
    "vite": "^4.3.3",
+    "vite-plugin-css-injected-by-js": "^3.1.1",
    "vite-plugin-dts": "^2.3.0",
    "vite-plugin-eslint": "^1.8.1",
    "vite-tsconfig-paths": "^4.2.0",
--- a/invokeai/frontend/web/src/app/components/App.tsx
+++ b/invokeai/frontend/web/src/app/components/App.tsx
@ -7,18 +7,12 @@ import useToastWatcher from 'features/system/hooks/useToastWatcher';

 import FloatingGalleryButton from 'features/ui/components/FloatingGalleryButton';
 import FloatingParametersPanelButtons from 'features/ui/components/FloatingParametersPanelButtons';
-import { Box, Flex, Grid, Portal, useColorMode } from '@chakra-ui/react';
+import { Box, Flex, Grid, Portal } from '@chakra-ui/react';
 import { APP_HEIGHT, APP_WIDTH } from 'theme/util/constants';
 import GalleryDrawer from 'features/gallery/components/ImageGalleryPanel';
 import Lightbox from 'features/lightbox/components/Lightbox';
-import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
-import {
-  memo,
-  PropsWithChildren,
-  useCallback,
-  useEffect,
-  useState,
-} from 'react';
+import { useAppDispatch } from 'app/store/storeHooks';
+import { memo, ReactNode, useCallback, useEffect, useState } from 'react';
 import { motion, AnimatePresence } from 'framer-motion';
 import Loading from 'common/components/Loading/Loading';
 import { useIsApplicationReady } from 'features/system/hooks/useIsApplicationReady';
@ -27,29 +21,26 @@ import { useGlobalHotkeys } from 'common/hooks/useGlobalHotkeys';
 import { configChanged } from 'features/system/store/configSlice';
 import { useFeatureStatus } from 'features/system/hooks/useFeatureStatus';
 import { useLogger } from 'app/logging/useLogger';
-import ProgressImagePreview from 'features/parameters/components/_ProgressImagePreview';
 import ParametersDrawer from 'features/ui/components/ParametersDrawer';

 const DEFAULT_CONFIG = {};

-interface Props extends PropsWithChildren {
+interface Props {
  config?: PartialAppConfig;
+  headerComponent?: ReactNode;
 }

-const App = ({ config = DEFAULT_CONFIG, children }: Props) => {
+const App = ({ config = DEFAULT_CONFIG, headerComponent }: Props) => {
  useToastWatcher();
  useGlobalHotkeys();
  const log = useLogger();

-  const currentTheme = useAppSelector((state) => state.ui.currentTheme);
-
  const isLightboxEnabled = useFeatureStatus('lightbox').isFeatureEnabled;

  const isApplicationReady = useIsApplicationReady();

  const [loadingOverridden, setLoadingOverridden] = useState(false);

-  const { setColorMode } = useColorMode();
  const dispatch = useAppDispatch();

  useEffect(() => {
@ -57,10 +48,6 @@ const App = ({ config = DEFAULT_CONFIG, children }: Props) => {
    dispatch(configChanged(config));
  }, [dispatch, config, log]);

-  useEffect(() => {
-    setColorMode(['light'].includes(currentTheme) ? 'light' : 'dark');
-  }, [setColorMode, currentTheme]);
-
  const handleOverrideClicked = useCallback(() => {
    setLoadingOverridden(true);
  }, []);
@ -77,7 +64,7 @@ const App = ({ config = DEFAULT_CONFIG, children }: Props) => {
          w={APP_WIDTH}
          h={APP_HEIGHT}
        >
-          {children || <SiteHeader />}
+          {headerComponent || <SiteHeader />}
          <Flex
            gap={4}
            w={{ base: '100vw', xl: 'full' }}
--- a/invokeai/frontend/web/src/app/components/InvokeAIUI.tsx
+++ b/invokeai/frontend/web/src/app/components/InvokeAIUI.tsx
@ -1,16 +1,13 @@
-import React, { lazy, memo, PropsWithChildren, useEffect } from 'react';
+import React, {
+  lazy,
+  memo,
+  PropsWithChildren,
+  ReactNode,
+  useEffect,
+} from 'react';
 import { Provider } from 'react-redux';
 import { store } from 'app/store/store';
 import { OpenAPI } from 'services/api';
-import '@fontsource/inter/100.css';
-import '@fontsource/inter/200.css';
-import '@fontsource/inter/300.css';
-import '@fontsource/inter/400.css';
-import '@fontsource/inter/500.css';
-import '@fontsource/inter/600.css';
-import '@fontsource/inter/700.css';
-import '@fontsource/inter/800.css';
-import '@fontsource/inter/900.css';

 import Loading from '../../common/components/Loading/Loading';
 import { addMiddleware, resetMiddlewares } from 'redux-dynamic-middlewares';
@ -26,9 +23,10 @@ interface Props extends PropsWithChildren {
  apiUrl?: string;
  token?: string;
  config?: PartialAppConfig;
+  headerComponent?: ReactNode;
 }

-const InvokeAIUI = ({ apiUrl, token, config, children }: Props) => {
+const InvokeAIUI = ({ apiUrl, token, config, headerComponent }: Props) => {
  useEffect(() => {
    // configure API client token
    if (token) {
@ -57,7 +55,7 @@ const InvokeAIUI = ({ apiUrl, token, config, children }: Props) => {
      <Provider store={store}>
        <React.Suspense fallback={<Loading />}>
          <ThemeLocaleProvider>
-            <App config={config}>{children}</App>
+            <App config={config} headerComponent={headerComponent} />
          </ThemeLocaleProvider>
        </React.Suspense>
      </Provider>
--- a/invokeai/frontend/web/src/app/components/ThemeLocaleProvider.tsx
+++ b/invokeai/frontend/web/src/app/components/ThemeLocaleProvider.tsx
@ -1,4 +1,8 @@
-import { ChakraProvider, extendTheme } from '@chakra-ui/react';
+import {
+  ChakraProvider,
+  createLocalStorageManager,
+  extendTheme,
+} from '@chakra-ui/react';
 import { ReactNode, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import { theme as invokeAITheme } from 'theme/theme';
@ -9,15 +13,8 @@ import { greenTeaThemeColors } from 'theme/colors/greenTea';
 import { invokeAIThemeColors } from 'theme/colors/invokeAI';
 import { lightThemeColors } from 'theme/colors/lightTheme';
 import { oceanBlueColors } from 'theme/colors/oceanBlue';
-import '@fontsource/inter/100.css';
-import '@fontsource/inter/200.css';
-import '@fontsource/inter/300.css';
-import '@fontsource/inter/400.css';
-import '@fontsource/inter/500.css';
-import '@fontsource/inter/600.css';
-import '@fontsource/inter/700.css';
-import '@fontsource/inter/800.css';
-import '@fontsource/inter/900.css';
+
+import '@fontsource/inter/variable.css';
 import 'overlayscrollbars/overlayscrollbars.css';
 import 'theme/css/overlayscrollbars.css';

@ -32,6 +29,8 @@ const THEMES = {
  ocean: oceanBlueColors,
 };

+const manager = createLocalStorageManager('@@invokeai-color-mode');
+
 function ThemeLocaleProvider({ children }: ThemeLocaleProviderProps) {
  const { i18n } = useTranslation();

@ -51,7 +50,11 @@ function ThemeLocaleProvider({ children }: ThemeLocaleProviderProps) {
    document.body.dir = direction;
  }, [direction]);

-  return <ChakraProvider theme={theme}>{children}</ChakraProvider>;
+  return (
+    <ChakraProvider theme={theme} colorModeManager={manager}>
+      {children}
+    </ChakraProvider>
+  );
 }

 export default ThemeLocaleProvider;
--- a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/imageUploaded.ts
+++ b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/imageUploaded.ts
@ -6,9 +6,12 @@ import { imageUploaded } from 'services/thunks/image';

 export const addImageUploadedListener = () => {
  startAppListening({
-    actionCreator: imageUploaded.fulfilled,
+    predicate: (action): action is ReturnType<typeof imageUploaded.fulfilled> =>
+      imageUploaded.fulfilled.match(action) &&
+      action.payload.response.image_type !== 'intermediates',
    effect: (action, { dispatch, getState }) => {
      const { response } = action.payload;
+
      const state = getState();
      const image = deserializeImageResponse(response);

--- a/invokeai/frontend/web/src/features/gallery/components/ImageGalleryContent.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/ImageGalleryContent.tsx
@ -54,11 +54,7 @@ import { uploadsAdapter } from '../store/uploadsSlice';
 import { createSelector } from '@reduxjs/toolkit';
 import { RootState } from 'app/store/store';
 import { Virtuoso, VirtuosoGrid } from 'react-virtuoso';
-import ProgressImagePreview from 'features/parameters/components/_ProgressImagePreview';
-import ProgressImage from 'features/parameters/components/ProgressImage';
-import { systemSelector } from 'features/system/store/systemSelectors';
 import { Image as ImageType } from 'app/types/invokeai';
-import { ProgressImage as ProgressImageType } from 'services/events/types';
 import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
 import GalleryProgressImage from './GalleryProgressImage';

@ -71,13 +67,13 @@ const selector = createSelector(
    const { results, uploads, system, gallery } = state;
    const { currentCategory } = gallery;

-    const tempImages: (ImageType | typeof PROGRESS_IMAGE_PLACEHOLDER)[] = [];
-
-    if (system.progressImage) {
-      tempImages.push(PROGRESS_IMAGE_PLACEHOLDER);
-    }
-
    if (currentCategory === 'results') {
+      const tempImages: (ImageType | typeof PROGRESS_IMAGE_PLACEHOLDER)[] = [];
+
+      if (system.progressImage) {
+        tempImages.push(PROGRESS_IMAGE_PLACEHOLDER);
+      }
+
      return {
        images: tempImages.concat(
          resultsAdapter.getSelectors().selectAll(results)
@ -88,9 +84,7 @@ const selector = createSelector(
    }

    return {
-      images: tempImages.concat(
-        uploadsAdapter.getSelectors().selectAll(uploads)
-      ),
+      images: uploadsAdapter.getSelectors().selectAll(uploads),
      isLoading: uploads.isLoading,
      areMoreImagesAvailable: uploads.page < uploads.pages - 1,
    };
--- a/invokeai/frontend/web/src/features/system/components/ProgressBar.tsx
+++ b/invokeai/frontend/web/src/features/system/components/ProgressBar.tsx
@ -36,7 +36,6 @@ const ProgressBar = () => {
      aria-label={t('accessibility.invokeProgressBar')}
      isIndeterminate={isProcessing && !currentStatusHasSteps}
      height={PROGRESS_BAR_THICKNESS}
-      zIndex={99}
    />
  );
 };
--- a/invokeai/frontend/web/src/features/ui/components/FloatingGalleryButton.tsx
+++ b/invokeai/frontend/web/src/features/ui/components/FloatingGalleryButton.tsx
@ -44,7 +44,6 @@ const FloatingGalleryButton = () => {
        pos: 'absolute',
        top: '50%',
        transform: 'translate(0, -50%)',
-        zIndex: 31,
        p: 0,
        insetInlineEnd: 0,
        px: 3,
--- a/invokeai/frontend/web/src/features/ui/components/FloatingParametersPanelButtons.tsx
+++ b/invokeai/frontend/web/src/features/ui/components/FloatingParametersPanelButtons.tsx
@ -73,7 +73,6 @@ const FloatingParametersPanelButtons = () => {
    <Flex
      pos="absolute"
      transform="translate(0, -50%)"
-      zIndex={20}
      minW={8}
      top="50%"
      insetInlineStart="4.5rem"
--- a/invokeai/frontend/web/src/features/ui/components/InvokeTabs.tsx
+++ b/invokeai/frontend/web/src/features/ui/components/InvokeTabs.tsx
@ -45,12 +45,12 @@ export interface InvokeTabInfo {
 const tabs: InvokeTabInfo[] = [
  {
    id: 'txt2img',
-    icon: <Icon as={GoTextSize} sx={{ boxSize: 5 }} />,
+    icon: <Icon as={GoTextSize} sx={{ boxSize: 6 }} />,
    content: <TextToImageTab />,
  },
  {
    id: 'img2img',
-    icon: <Icon as={FaImage} sx={{ boxSize: 5 }} />,
+    icon: <Icon as={FaImage} sx={{ boxSize: 6 }} />,
    content: <ImageTab />,
  },
  {
--- a/invokeai/frontend/web/src/features/ui/components/common/ResizableDrawer/ResizableDrawer.tsx
+++ b/invokeai/frontend/web/src/features/ui/components/common/ResizableDrawer/ResizableDrawer.tsx
@ -142,7 +142,7 @@ const ResizableDrawer = ({
      direction={slideDirection}
      in={isOpen}
      motionProps={{ initial: false }}
-      style={{ zIndex: 99, width: 'full' }}
+      style={{ width: 'full' }}
    >
      <Box
        ref={outsideClickRef}
--- a/invokeai/frontend/web/src/services/api/index.ts
+++ b/invokeai/frontend/web/src/services/api/index.ts
@ -19,7 +19,6 @@ export type { ConditioningField } from './models/ConditioningField';
 export type { CreateModelRequest } from './models/CreateModelRequest';
 export type { CropImageInvocation } from './models/CropImageInvocation';
 export type { CvInpaintInvocation } from './models/CvInpaintInvocation';
-export type { DataURLToImageInvocation } from './models/DataURLToImageInvocation';
 export type { DiffusersModelInfo } from './models/DiffusersModelInfo';
 export type { DivideInvocation } from './models/DivideInvocation';
 export type { Edge } from './models/Edge';
@ -92,7 +91,6 @@ export { $ConditioningField } from './schemas/$ConditioningField';
 export { $CreateModelRequest } from './schemas/$CreateModelRequest';
 export { $CropImageInvocation } from './schemas/$CropImageInvocation';
 export { $CvInpaintInvocation } from './schemas/$CvInpaintInvocation';
-export { $DataURLToImageInvocation } from './schemas/$DataURLToImageInvocation';
 export { $DiffusersModelInfo } from './schemas/$DiffusersModelInfo';
 export { $DivideInvocation } from './schemas/$DivideInvocation';
 export { $Edge } from './schemas/$Edge';
--- a/invokeai/frontend/web/src/services/api/models/DataURLToImageInvocation.ts
+++ b/invokeai/frontend/web/src/services/api/models/DataURLToImageInvocation.ts
@ -1,19 +0,0 @@
-/* istanbul ignore file */
-/* tslint:disable */
-/* eslint-disable */
-
-/**
- * Outputs an image from a data URL.
- */
-export type DataURLToImageInvocation = {
-  /**
-   * The id of this node. Must be unique among all nodes.
-   */
-  id: string;
-  type?: 'dataURL_image';
-  /**
-   * The b64 data URL
-   */
-  dataURL: string;
-};
-
--- a/invokeai/frontend/web/src/services/api/models/Graph.ts
+++ b/invokeai/frontend/web/src/services/api/models/Graph.ts
@ -8,7 +8,6 @@ import type { CollectInvocation } from './CollectInvocation';
 import type { CompelInvocation } from './CompelInvocation';
 import type { CropImageInvocation } from './CropImageInvocation';
 import type { CvInpaintInvocation } from './CvInpaintInvocation';
-import type { DataURLToImageInvocation } from './DataURLToImageInvocation';
 import type { DivideInvocation } from './DivideInvocation';
 import type { Edge } from './Edge';
 import type { GraphInvocation } from './GraphInvocation';
@ -48,7 +47,7 @@ export type Graph = {
  /**
   * The nodes in this graph
   */
-  nodes?: Record<string, (LoadImageInvocation | ShowImageInvocation | DataURLToImageInvocation | CropImageInvocation | PasteImageInvocation | MaskFromAlphaInvocation | BlurInvocation | LerpInvocation | InverseLerpInvocation | CompelInvocation | NoiseInvocation | TextToLatentsInvocation | LatentsToImageInvocation | ResizeLatentsInvocation | ScaleLatentsInvocation | ImageToLatentsInvocation | AddInvocation | SubtractInvocation | MultiplyInvocation | DivideInvocation | ParamIntInvocation | CvInpaintInvocation | RangeInvocation | RandomRangeInvocation | UpscaleInvocation | RestoreFaceInvocation | TextToImageInvocation | InfillColorInvocation | InfillTileInvocation | InfillPatchMatchInvocation | GraphInvocation | IterateInvocation | CollectInvocation | LatentsToLatentsInvocation | ImageToImageInvocation | InpaintInvocation)>;
+  nodes?: Record<string, (LoadImageInvocation | ShowImageInvocation | CropImageInvocation | PasteImageInvocation | MaskFromAlphaInvocation | BlurInvocation | LerpInvocation | InverseLerpInvocation | CompelInvocation | NoiseInvocation | TextToLatentsInvocation | LatentsToImageInvocation | ResizeLatentsInvocation | ScaleLatentsInvocation | ImageToLatentsInvocation | AddInvocation | SubtractInvocation | MultiplyInvocation | DivideInvocation | ParamIntInvocation | CvInpaintInvocation | RangeInvocation | RandomRangeInvocation | UpscaleInvocation | RestoreFaceInvocation | TextToImageInvocation | InfillColorInvocation | InfillTileInvocation | InfillPatchMatchInvocation | GraphInvocation | IterateInvocation | CollectInvocation | LatentsToLatentsInvocation | ImageToImageInvocation | InpaintInvocation)>;
  /**
   * The connections between nodes and their fields in this graph
   */
--- a/invokeai/frontend/web/src/services/api/models/ImageToImageInvocation.ts
+++ b/invokeai/frontend/web/src/services/api/models/ImageToImageInvocation.ts
@ -40,7 +40,7 @@ export type ImageToImageInvocation = {
  /**
   * The scheduler to use
   */
-  scheduler?: 'ddim' | 'dpmpp_2' | 'k_dpm_2' | 'k_dpm_2_a' | 'k_dpmpp_2' | 'k_euler' | 'k_euler_a' | 'k_heun' | 'k_lms' | 'plms';
+  scheduler?: 'ddim' | 'ddpm' | 'deis' | 'lms' | 'pndm' | 'heun' | 'euler' | 'euler_k' | 'euler_a' | 'kdpm_2' | 'kdpm_2_a' | 'dpmpp_2s' | 'dpmpp_2m' | 'dpmpp_2m_k' | 'unipc';
  /**
   * The model to use (currently ignored)
   */
--- a/invokeai/frontend/web/src/services/api/models/InfillColorInvocation.ts
+++ b/invokeai/frontend/web/src/services/api/models/InfillColorInvocation.ts
@ -6,7 +6,7 @@ import type { ColorField } from './ColorField';
 import type { ImageField } from './ImageField';

 /**
- * Infills transparent areas of an image with a color
+ * Infills transparent areas of an image with a solid color
 */
 export type InfillColorInvocation = {
  /**
--- a/invokeai/frontend/web/src/services/api/models/InfillPatchMatchInvocation.ts
+++ b/invokeai/frontend/web/src/services/api/models/InfillPatchMatchInvocation.ts
@ -5,7 +5,7 @@
 import type { ImageField } from './ImageField';

 /**
- * Infills transparent areas of an image with tiles of the image
+ * Infills transparent areas of an image using the PatchMatch algorithm
 */
 export type InfillPatchMatchInvocation = {
  /**
--- a/invokeai/frontend/web/src/services/api/models/InpaintInvocation.ts
+++ b/invokeai/frontend/web/src/services/api/models/InpaintInvocation.ts
@ -41,7 +41,7 @@ export type InpaintInvocation = {
  /**
   * The scheduler to use
   */
-  scheduler?: 'ddim' | 'dpmpp_2' | 'k_dpm_2' | 'k_dpm_2_a' | 'k_dpmpp_2' | 'k_euler' | 'k_euler_a' | 'k_heun' | 'k_lms' | 'plms';
+  scheduler?: 'ddim' | 'ddpm' | 'deis' | 'lms' | 'pndm' | 'heun' | 'euler' | 'euler_k' | 'euler_a' | 'kdpm_2' | 'kdpm_2_a' | 'dpmpp_2s' | 'dpmpp_2m' | 'dpmpp_2m_k' | 'unipc';
  /**
   * The model to use (currently ignored)
   */
--- a/invokeai/frontend/web/src/services/api/models/LatentsToLatentsInvocation.ts
+++ b/invokeai/frontend/web/src/services/api/models/LatentsToLatentsInvocation.ts
@ -37,11 +37,19 @@ export type LatentsToLatentsInvocation = {
  /**
   * The scheduler to use
   */
-  scheduler?: 'ddim' | 'dpmpp_2' | 'k_dpm_2' | 'k_dpm_2_a' | 'k_dpmpp_2' | 'k_euler' | 'k_euler_a' | 'k_heun' | 'k_lms' | 'plms';
+  scheduler?: 'ddim' | 'ddpm' | 'deis' | 'lms' | 'pndm' | 'heun' | 'euler' | 'euler_k' | 'euler_a' | 'kdpm_2' | 'kdpm_2_a' | 'dpmpp_2s' | 'dpmpp_2m' | 'dpmpp_2m_k' | 'unipc';
  /**
   * The model to use (currently ignored)
   */
  model?: string;
+  /**
+   * Whether or not to generate an image that can tile without seams
+   */
+  seamless?: boolean;
+  /**
+   * The axes to tile the image on, 'x' and/or 'y'
+   */
+  seamless_axes?: string;
  /**
   * The latents to use as a base image
   */
--- a/invokeai/frontend/web/src/services/api/models/TextToImageInvocation.ts
+++ b/invokeai/frontend/web/src/services/api/models/TextToImageInvocation.ts
@ -38,7 +38,7 @@ export type TextToImageInvocation = {
  /**
   * The scheduler to use
   */
-  scheduler?: 'ddim' | 'dpmpp_2' | 'k_dpm_2' | 'k_dpm_2_a' | 'k_dpmpp_2' | 'k_euler' | 'k_euler_a' | 'k_heun' | 'k_lms' | 'plms';
+  scheduler?: 'ddim' | 'ddpm' | 'deis' | 'lms' | 'pndm' | 'heun' | 'euler' | 'euler_k' | 'euler_a' | 'kdpm_2' | 'kdpm_2_a' | 'dpmpp_2s' | 'dpmpp_2m' | 'dpmpp_2m_k' | 'unipc';
  /**
   * The model to use (currently ignored)
   */
--- a/invokeai/frontend/web/src/services/api/models/TextToLatentsInvocation.ts
+++ b/invokeai/frontend/web/src/services/api/models/TextToLatentsInvocation.ts
@ -37,10 +37,18 @@ export type TextToLatentsInvocation = {
  /**
   * The scheduler to use
   */
-  scheduler?: 'ddim' | 'dpmpp_2' | 'k_dpm_2' | 'k_dpm_2_a' | 'k_dpmpp_2' | 'k_euler' | 'k_euler_a' | 'k_heun' | 'k_lms' | 'plms';
+  scheduler?: 'ddim' | 'ddpm' | 'deis' | 'lms' | 'pndm' | 'heun' | 'euler' | 'euler_k' | 'euler_a' | 'kdpm_2' | 'kdpm_2_a' | 'dpmpp_2s' | 'dpmpp_2m' | 'dpmpp_2m_k' | 'unipc';
  /**
   * The model to use (currently ignored)
   */
  model?: string;
+  /**
+   * Whether or not to generate an image that can tile without seams
+   */
+  seamless?: boolean;
+  /**
+   * The axes to tile the image on, 'x' and/or 'y'
+   */
+  seamless_axes?: string;
 };

--- a/invokeai/frontend/web/src/services/api/schemas/$DataURLToImageInvocation.ts
+++ b/invokeai/frontend/web/src/services/api/schemas/$DataURLToImageInvocation.ts
@ -1,21 +0,0 @@
-/* istanbul ignore file */
-/* tslint:disable */
-/* eslint-disable */
-export const $DataURLToImageInvocation = {
-  description: `Outputs an image from a data URL.`,
-  properties: {
-    id: {
-      type: 'string',
-      description: `The id of this node. Must be unique among all nodes.`,
-      isRequired: true,
-    },
-    type: {
-      type: 'Enum',
-    },
-    dataURL: {
-      type: 'string',
-      description: `The b64 data URL`,
-      isRequired: true,
-    },
-  },
-} as const;
--- a/invokeai/frontend/web/src/services/api/schemas/$Graph.ts
+++ b/invokeai/frontend/web/src/services/api/schemas/$Graph.ts
@ -15,8 +15,6 @@ export const $Graph = {
          type: 'LoadImageInvocation',
        }, {
          type: 'ShowImageInvocation',
-        }, {
-          type: 'DataURLToImageInvocation',
        }, {
          type: 'CropImageInvocation',
        }, {
--- a/invokeai/frontend/web/src/services/api/schemas/$InfillColorInvocation.ts
+++ b/invokeai/frontend/web/src/services/api/schemas/$InfillColorInvocation.ts
@ -2,7 +2,7 @@
 /* tslint:disable */
 /* eslint-disable */
 export const $InfillColorInvocation = {
-  description: `Infills transparent areas of an image with a color`,
+  description: `Infills transparent areas of an image with a solid color`,
  properties: {
    id: {
      type: 'string',
--- a/invokeai/frontend/web/src/services/api/schemas/$InfillPatchMatchInvocation.ts
+++ b/invokeai/frontend/web/src/services/api/schemas/$InfillPatchMatchInvocation.ts
@ -2,7 +2,7 @@
 /* tslint:disable */
 /* eslint-disable */
 export const $InfillPatchMatchInvocation = {
-  description: `Infills transparent areas of an image with tiles of the image`,
+  description: `Infills transparent areas of an image using the PatchMatch algorithm`,
  properties: {
    id: {
      type: 'string',
--- a/invokeai/frontend/web/src/services/api/schemas/$LatentsToLatentsInvocation.ts
+++ b/invokeai/frontend/web/src/services/api/schemas/$LatentsToLatentsInvocation.ts
@ -48,6 +48,14 @@ export const $LatentsToLatentsInvocation = {
      type: 'string',
      description: `The model to use (currently ignored)`,
    },
+    seamless: {
+      type: 'boolean',
+      description: `Whether or not to generate an image that can tile without seams`,
+    },
+    seamless_axes: {
+      type: 'string',
+      description: `The axes to tile the image on, 'x' and/or 'y'`,
+    },
    latents: {
      type: 'all-of',
      description: `The latents to use as a base image`,
--- a/invokeai/frontend/web/src/services/api/schemas/$TextToLatentsInvocation.ts
+++ b/invokeai/frontend/web/src/services/api/schemas/$TextToLatentsInvocation.ts
@ -48,5 +48,13 @@ export const $TextToLatentsInvocation = {
      type: 'string',
      description: `The model to use (currently ignored)`,
    },
+    seamless: {
+      type: 'boolean',
+      description: `Whether or not to generate an image that can tile without seams`,
+    },
+    seamless_axes: {
+      type: 'string',
+      description: `The axes to tile the image on, 'x' and/or 'y'`,
+    },
  },
 } as const;
--- a/invokeai/frontend/web/src/services/api/services/SessionsService.ts
+++ b/invokeai/frontend/web/src/services/api/services/SessionsService.ts
@ -7,7 +7,6 @@ import type { CollectInvocation } from '../models/CollectInvocation';
 import type { CompelInvocation } from '../models/CompelInvocation';
 import type { CropImageInvocation } from '../models/CropImageInvocation';
 import type { CvInpaintInvocation } from '../models/CvInpaintInvocation';
-import type { DataURLToImageInvocation } from '../models/DataURLToImageInvocation';
 import type { DivideInvocation } from '../models/DivideInvocation';
 import type { Edge } from '../models/Edge';
 import type { Graph } from '../models/Graph';
@ -150,7 +149,7 @@ export class SessionsService {
     * The id of the session
     */
    sessionId: string,
-    requestBody: (LoadImageInvocation | ShowImageInvocation | DataURLToImageInvocation | CropImageInvocation | PasteImageInvocation | MaskFromAlphaInvocation | BlurInvocation | LerpInvocation | InverseLerpInvocation | CompelInvocation | NoiseInvocation | TextToLatentsInvocation | LatentsToImageInvocation | ResizeLatentsInvocation | ScaleLatentsInvocation | ImageToLatentsInvocation | AddInvocation | SubtractInvocation | MultiplyInvocation | DivideInvocation | ParamIntInvocation | CvInpaintInvocation | RangeInvocation | RandomRangeInvocation | UpscaleInvocation | RestoreFaceInvocation | TextToImageInvocation | InfillColorInvocation | InfillTileInvocation | InfillPatchMatchInvocation | GraphInvocation | IterateInvocation | CollectInvocation | LatentsToLatentsInvocation | ImageToImageInvocation | InpaintInvocation),
+    requestBody: (LoadImageInvocation | ShowImageInvocation | CropImageInvocation | PasteImageInvocation | MaskFromAlphaInvocation | BlurInvocation | LerpInvocation | InverseLerpInvocation | CompelInvocation | NoiseInvocation | TextToLatentsInvocation | LatentsToImageInvocation | ResizeLatentsInvocation | ScaleLatentsInvocation | ImageToLatentsInvocation | AddInvocation | SubtractInvocation | MultiplyInvocation | DivideInvocation | ParamIntInvocation | CvInpaintInvocation | RangeInvocation | RandomRangeInvocation | UpscaleInvocation | RestoreFaceInvocation | TextToImageInvocation | InfillColorInvocation | InfillTileInvocation | InfillPatchMatchInvocation | GraphInvocation | IterateInvocation | CollectInvocation | LatentsToLatentsInvocation | ImageToImageInvocation | InpaintInvocation),
  }): CancelablePromise<string> {
    return __request(OpenAPI, {
      method: 'POST',
@ -187,7 +186,7 @@ export class SessionsService {
     * The path to the node in the graph
     */
    nodePath: string,
-    requestBody: (LoadImageInvocation | ShowImageInvocation | DataURLToImageInvocation | CropImageInvocation | PasteImageInvocation | MaskFromAlphaInvocation | BlurInvocation | LerpInvocation | InverseLerpInvocation | CompelInvocation | NoiseInvocation | TextToLatentsInvocation | LatentsToImageInvocation | ResizeLatentsInvocation | ScaleLatentsInvocation | ImageToLatentsInvocation | AddInvocation | SubtractInvocation | MultiplyInvocation | DivideInvocation | ParamIntInvocation | CvInpaintInvocation | RangeInvocation | RandomRangeInvocation | UpscaleInvocation | RestoreFaceInvocation | TextToImageInvocation | InfillColorInvocation | InfillTileInvocation | InfillPatchMatchInvocation | GraphInvocation | IterateInvocation | CollectInvocation | LatentsToLatentsInvocation | ImageToImageInvocation | InpaintInvocation),
+    requestBody: (LoadImageInvocation | ShowImageInvocation | CropImageInvocation | PasteImageInvocation | MaskFromAlphaInvocation | BlurInvocation | LerpInvocation | InverseLerpInvocation | CompelInvocation | NoiseInvocation | TextToLatentsInvocation | LatentsToImageInvocation | ResizeLatentsInvocation | ScaleLatentsInvocation | ImageToLatentsInvocation | AddInvocation | SubtractInvocation | MultiplyInvocation | DivideInvocation | ParamIntInvocation | CvInpaintInvocation | RangeInvocation | RandomRangeInvocation | UpscaleInvocation | RestoreFaceInvocation | TextToImageInvocation | InfillColorInvocation | InfillTileInvocation | InfillPatchMatchInvocation | GraphInvocation | IterateInvocation | CollectInvocation | LatentsToLatentsInvocation | ImageToImageInvocation | InpaintInvocation),
  }): CancelablePromise<GraphExecutionState> {
    return __request(OpenAPI, {
      method: 'PUT',
--- a/invokeai/frontend/web/src/theme/theme.ts
+++ b/invokeai/frontend/web/src/theme/theme.ts
@ -23,6 +23,8 @@ import { textareaTheme } from './components/textarea';
 export const theme: ThemeOverride = {
  config: {
    cssVarPrefix: 'invokeai',
+    initialColorMode: 'dark',
+    useSystemColorMode: false,
  },
  styles: {
    global: (_props: StyleFunctionProps) => ({
@ -39,7 +41,7 @@ export const theme: ThemeOverride = {
  },
  direction: 'ltr',
  fonts: {
-    body: `'Inter', sans-serif`,
+    body: `'InterVariable', sans-serif`,
  },
  breakpoints: {
    base: '0em', // 0px and onwards
--- a/invokeai/frontend/web/tsconfig.json
+++ b/invokeai/frontend/web/tsconfig.json
@ -20,13 +20,7 @@
      "*": ["./src/*"]
    }
  },
-  "include": [
-    "src/**/*.ts",
-    "src/**/*.tsx",
-    "*.d.ts",
-    "src/app/store/middleware/listenerMiddleware",
-    "src/features/nodes/util/edgeBuilders"
-  ],
+  "include": ["src/**/*.ts", "src/**/*.tsx", "*.d.ts"],
  "exclude": ["src/services/fixtures/*", "node_modules", "dist"],
  "references": [{ "path": "./tsconfig.node.json" }]
 }
--- a/invokeai/frontend/web/yarn.lock
+++ b/invokeai/frontend/web/yarn.lock
@ -6673,6 +6673,11 @@ validator@^13.7.0:
  resolved "https://registry.yarnpkg.com/validator/-/validator-13.9.0.tgz#33e7b85b604f3bbce9bb1a05d5c3e22e1c2ff855"
  integrity sha512-B+dGG8U3fdtM0/aNK4/X8CXq/EcxU2WPrPEkJGslb47qyHsxmbggTWK0yEA4qnYVNF+nxNlN88o14hIcPmSIEA==

+vite-plugin-css-injected-by-js@^3.1.1:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/vite-plugin-css-injected-by-js/-/vite-plugin-css-injected-by-js-3.1.1.tgz#8324412636cf6fdada1a86f595aa2e78458e5ddb"
+  integrity sha512-mwrFvEEy0TuH8Ul0cb2HgjmNboQ/JnEFy+kHCWqAJph3ikMOiIuyYVdx0JO4nEIWJyzSnc4TTdmoTulsikvJEg==
+
 vite-plugin-dts@^2.3.0:
  version "2.3.0"
  resolved "https://registry.yarnpkg.com/vite-plugin-dts/-/vite-plugin-dts-2.3.0.tgz#6ab2edf56f48261bfede03958704bfaee2fca3e4"