Mirrored_Repos/InvokeAI
1
0
Fork 0
mirror of https://github.com/invoke-ai/InvokeAI synced 2024-08-30 20:32:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'main' into enhance/invokeai-logs

Browse Source
This commit is contained in:
Lincoln Stein 2023-04-28 10:10:33 -04:00 committed by GitHub
commit 3ec06a1fc3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
256 changed files with 2405 additions and 2227 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
invokeai/frontend/web/config/vite.app.config.ts Normal file
View File

@ -0,0 +1,40 @@
import react from '@vitejs/plugin-react-swc';
import { visualizer } from 'rollup-plugin-visualizer';
import { PluginOption, UserConfig } from 'vite';
import eslint from 'vite-plugin-eslint';
import tsconfigPaths from 'vite-tsconfig-paths';
export const appConfig: UserConfig = {
base: './',
plugins: [
react(),
eslint(),
tsconfigPaths(),
visualizer() as unknown as PluginOption,
],
build: {
chunkSizeWarningLimit: 1500,
},
server: {
// Proxy HTTP requests to the flask server
proxy: {
// Proxy socket.io to the nodes socketio server
'/ws/socket.io': {
target: 'ws://127.0.0.1:9090',
ws: true,
},
// Proxy openapi schema definiton
'/openapi.json': {
target: 'http://127.0.0.1:9090/openapi.json',
rewrite: (path) => path.replace(/^\/openapi.json/, ''),
changeOrigin: true,
},
// proxy nodes api
'/api/v1': {
target: 'http://127.0.0.1:9090/api/v1',
rewrite: (path) => path.replace(/^\/api\/v1/, ''),
changeOrigin: true,
},
},
},
};

47
invokeai/frontend/web/config/vite.package.config.ts Normal file
View File

@ -0,0 +1,47 @@
import react from '@vitejs/plugin-react-swc';
import path from 'path';
import { visualizer } from 'rollup-plugin-visualizer';
import { PluginOption, UserConfig } from 'vite';
import dts from 'vite-plugin-dts';
import eslint from 'vite-plugin-eslint';
import tsconfigPaths from 'vite-tsconfig-paths';
export const packageConfig: UserConfig = {
base: './',
plugins: [
react(),
eslint(),
tsconfigPaths(),
visualizer() as unknown as PluginOption,
dts({
insertTypesEntry: true,
}),
],
build: {
chunkSizeWarningLimit: 1500,
lib: {
entry: path.resolve(__dirname, '../src/index.ts'),
name: 'InvokeAIUI',
fileName: (format) => `invoke-ai-ui.${format}.js`,
},
rollupOptions: {
external: ['react', 'react-dom', '@emotion/react'],
output: {
globals: {
react: 'React',
'react-dom': 'ReactDOM',
},
},
},
},
resolve: {
alias: {
app: path.resolve(__dirname, '../src/app'),
assets: path.resolve(__dirname, '../src/assets'),
common: path.resolve(__dirname, '../src/common'),
features: path.resolve(__dirname, '../src/features'),
services: path.resolve(__dirname, '../src/services'),
theme: path.resolve(__dirname, '../src/theme'),
},
},
};

96
invokeai/frontend/web/index.d.ts vendored
View File

@ -1,96 +0,0 @@
import React, { PropsWithChildren } from 'react';
import { IAIPopoverProps } from '../web/src/common/components/IAIPopover';
import { IAIIconButtonProps } from '../web/src/common/components/IAIIconButton';
import { InvokeTabName } from 'features/ui/store/tabMap';
import { PartialAppConfig } from 'app/invokeai';
export {};
declare module 'redux-socket.io-middleware';
declare global {
/* eslint-disable @typescript-eslint/no-explicit-any */
interface Array<T> {
/**
* Returns the value of the last element in the array where predicate is true, and undefined
* otherwise.
* @param predicate findLast calls predicate once for each element of the array, in descending
* order, until it finds one where predicate returns true. If such an element is found, findLast
* immediately returns that element value. Otherwise, findLast returns undefined.
* @param thisArg If provided, it will be used as the this value for each invocation of
* predicate. If it is not provided, undefined is used instead.
*/
findLast<S extends T>(
predicate: (value: T, index: number, array: T[]) => value is S,
thisArg?: any
): S | undefined;
findLast(
predicate: (value: T, index: number, array: T[]) => unknown,
thisArg?: any
): T | undefined;
/**
* Returns the index of the last element in the array where predicate is true, and -1
* otherwise.
* @param predicate findLastIndex calls predicate once for each element of the array, in descending
* order, until it finds one where predicate returns true. If such an element is found,
* findLastIndex immediately returns that element index. Otherwise, findLastIndex returns -1.
* @param thisArg If provided, it will be used as the this value for each invocation of
* predicate. If it is not provided, undefined is used instead.
*/
findLastIndex(
predicate: (value: T, index: number, array: T[]) => unknown,
thisArg?: any
): number;
}
/* eslint-enable @typescript-eslint/no-explicit-any */
}
declare module '@invoke-ai/invoke-ai-ui' {
declare class ThemeChanger extends React.Component<ThemeChangerProps> {
public constructor(props: ThemeChangerProps);
}
declare class InvokeAiLogoComponent extends React.Component<InvokeAILogoComponentProps> {
public constructor(props: InvokeAILogoComponentProps);
}
declare class IAIPopover extends React.Component<IAIPopoverProps> {
public constructor(props: IAIPopoverProps);
}
declare class IAIIconButton extends React.Component<IAIIconButtonProps> {
public constructor(props: IAIIconButtonProps);
}
declare class SettingsModal extends React.Component<SettingsModalProps> {
public constructor(props: SettingsModalProps);
}
declare class StatusIndicator extends React.Component<StatusIndicatorProps> {
public constructor(props: StatusIndicatorProps);
}
declare class ModelSelect extends React.Component<ModelSelectProps> {
public constructor(props: ModelSelectProps);
}
}
interface InvokeProps extends PropsWithChildren {
apiUrl?: string;
token?: string;
config?: PartialAppConfig;
}
declare function Invoke(props: InvokeProps): JSX.Element;
export {
ThemeChanger,
InvokeAiLogoComponent,
IAIPopover,
IAIIconButton,
SettingsModal,
StatusIndicator,
ModelSelect,
};
export = Invoke;

90
invokeai/frontend/web/package.json
View File

@ -1,7 +1,23 @@
{ {
"name": "invoke-ai-ui", "name": "@invoke-ai/invoke-ai-ui",
"private": true, "private": true,
"version": "0.0.1", "version": "0.0.1",
"publishConfig": {
"access": "restricted",
"registry": "https://npm.pkg.github.com"
},
"main": "./dist/invoke-ai-ui.umd.js",
"module": "./dist/invoke-ai-ui.es.js",
"exports": {
".": {
"import": "./dist/invoke-ai-ui.es.js",
"require": "./dist/invoke-ai-ui.umd.js"
}
},
"types": "./dist/index.d.ts",
"files": [
"dist"
],
"scripts": { "scripts": {
"prepare": "cd ../../../ && husky install invokeai/frontend/web/.husky", "prepare": "cd ../../../ && husky install invokeai/frontend/web/.husky",
"dev": "concurrently \"vite dev\" \"yarn run theme:watch\"", "dev": "concurrently \"vite dev\" \"yarn run theme:watch\"",
@ -40,40 +56,39 @@
}, },
"dependencies": { "dependencies": {
"@chakra-ui/anatomy": "^2.1.1", "@chakra-ui/anatomy": "^2.1.1",
"@chakra-ui/cli": "^2.3.0", "@chakra-ui/icons": "^2.0.19",
"@chakra-ui/icons": "^2.0.17", "@chakra-ui/react": "^2.6.0",
"@chakra-ui/react": "^2.5.1", "@chakra-ui/styled-system": "^2.9.0",
"@chakra-ui/styled-system": "^2.6.1",
"@chakra-ui/theme-tools": "^2.0.16", "@chakra-ui/theme-tools": "^2.0.16",
"@dagrejs/graphlib": "^2.1.12", "@dagrejs/graphlib": "^2.1.12",
"@emotion/react": "^11.10.6", "@emotion/react": "^11.10.6",
"@emotion/styled": "^11.10.6", "@emotion/styled": "^11.10.6",
"@fontsource/inter": "^4.5.15", "@fontsource/inter": "^4.5.15",
"@reduxjs/toolkit": "^1.9.3", "@reduxjs/toolkit": "^1.9.5",
"chakra-ui-contextmenu": "^1.0.5", "chakra-ui-contextmenu": "^1.0.5",
"dateformat": "^5.0.3", "dateformat": "^5.0.3",
"formik": "^2.2.9", "formik": "^2.2.9",
"framer-motion": "^9.0.4", "framer-motion": "^10.12.4",
"fuse.js": "^6.6.2", "fuse.js": "^6.6.2",
"i18next": "^22.4.10", "i18next": "^22.4.15",
"i18next-browser-languagedetector": "^7.0.1", "i18next-browser-languagedetector": "^7.0.1",
"i18next-http-backend": "^2.1.1", "i18next-http-backend": "^2.2.0",
"konva": "^8.4.2", "konva": "^9.0.1",
"lodash": "^4.17.21", "lodash-es": "^4.17.21",
"patch-package": "^6.5.1", "patch-package": "^7.0.0",
"re-resizable": "^6.9.9", "re-resizable": "^6.9.9",
"react": "^18.2.0", "react": "^18.2.0",
"react-colorful": "^5.6.1", "react-colorful": "^5.6.1",
"react-dom": "^18.2.0", "react-dom": "^18.2.0",
"react-dropzone": "^14.2.3", "react-dropzone": "^14.2.3",
"react-hotkeys-hook": "4.3.5", "react-hotkeys-hook": "4.4.0",
"react-i18next": "^12.1.5", "react-i18next": "^12.2.2",
"react-icons": "^4.7.1", "react-icons": "^4.7.1",
"react-konva": "^18.2.4", "react-konva": "^18.2.7",
"react-konva-utils": "^0.3.2", "react-konva-utils": "^1.0.4",
"react-redux": "^8.0.5", "react-redux": "^8.0.5",
"react-transition-group": "^4.4.5", "react-transition-group": "^4.4.5",
"react-zoom-pan-pinch": "^2.6.1", "react-zoom-pan-pinch": "^3.0.7",
"reactflow": "^11.7.0", "reactflow": "^11.7.0",
"redux-deep-persist": "^1.0.7", "redux-deep-persist": "^1.0.7",
"redux-dynamic-middlewares": "^2.2.0", "redux-dynamic-middlewares": "^2.2.0",
@ -82,39 +97,46 @@
"use-image": "^1.1.0", "use-image": "^1.1.0",
"uuid": "^9.0.0" "uuid": "^9.0.0"
}, },
"peerDependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0",
"ts-toolbelt": "^9.6.0",
"@chakra-ui/cli": "^2.4.0"
},
"devDependencies": { "devDependencies": {
"@types/dateformat": "^5.0.0", "@types/dateformat": "^5.0.0",
"@types/lodash": "^4.14.194", "@types/lodash-es": "^4.14.194",
"@types/react": "^18.0.28", "@types/node": "^18.16.2",
"@types/react-dom": "^18.0.11", "@types/react": "^18.2.0",
"@types/react-dom": "^18.2.1",
"@types/react-transition-group": "^4.4.5", "@types/react-transition-group": "^4.4.5",
"@types/uuid": "^9.0.0", "@types/uuid": "^9.0.0",
"@typescript-eslint/eslint-plugin": "^5.52.0", "@typescript-eslint/eslint-plugin": "^5.59.1",
"@typescript-eslint/parser": "^5.52.0", "@typescript-eslint/parser": "^5.59.1",
"@vitejs/plugin-react-swc": "^3.2.0", "@vitejs/plugin-react-swc": "^3.3.0",
"axios": "^1.3.4", "axios": "^1.4.0",
"babel-plugin-transform-imports": "^2.0.0", "babel-plugin-transform-imports": "^2.0.0",
"concurrently": "^7.6.0", "concurrently": "^8.0.1",
"eslint": "^8.34.0", "eslint": "^8.39.0",
"eslint-config-prettier": "^8.6.0", "eslint-config-prettier": "^8.8.0",
"eslint-plugin-prettier": "^4.2.1", "eslint-plugin-prettier": "^4.2.1",
"eslint-plugin-react": "^7.32.2", "eslint-plugin-react": "^7.32.2",
"eslint-plugin-react-hooks": "^4.6.0", "eslint-plugin-react-hooks": "^4.6.0",
"form-data": "^4.0.0", "form-data": "^4.0.0",
"husky": "^8.0.3", "husky": "^8.0.3",
"lint-staged": "^13.1.2", "lint-staged": "^13.2.2",
"madge": "^6.0.0", "madge": "^6.0.0",
"openapi-types": "^12.1.0", "openapi-types": "^12.1.0",
"openapi-typescript-codegen": "^0.23.0", "openapi-typescript-codegen": "^0.24.0",
"postinstall-postinstall": "^2.1.0", "postinstall-postinstall": "^2.1.0",
"prettier": "^2.8.4", "prettier": "^2.8.8",
"rollup-plugin-visualizer": "^5.9.0", "rollup-plugin-visualizer": "^5.9.0",
"terser": "^5.16.4", "terser": "^5.17.1",
"ts-toolbelt": "^9.6.0", "ts-toolbelt": "^9.6.0",
"typescript": "4.9.5", "vite": "^4.3.3",
"vite": "^4.1.2", "vite-plugin-dts": "^2.3.0",
"vite-plugin-eslint": "^1.8.1", "vite-plugin-eslint": "^1.8.1",
"vite-tsconfig-paths": "^4.0.5", "vite-tsconfig-paths": "^4.2.0",
"yarn": "^1.22.19" "yarn": "^1.22.19"
} }
} }

0
invokeai/frontend/web/patches/@chakra-ui+cli+2.3.0.patch → invokeai/frontend/web/patches/@chakra-ui+cli+2.4.0.patch
View File

19
invokeai/frontend/web/src/app/App.tsx → invokeai/frontend/web/src/app/components/App.tsx
View File

@ -3,7 +3,6 @@ import Console from 'features/system/components/Console';
import ProgressBar from 'features/system/components/ProgressBar'; import ProgressBar from 'features/system/components/ProgressBar';
import SiteHeader from 'features/system/components/SiteHeader'; import SiteHeader from 'features/system/components/SiteHeader';
import InvokeTabs from 'features/ui/components/InvokeTabs'; import InvokeTabs from 'features/ui/components/InvokeTabs';
import { keepGUIAlive } from './utils';
import useToastWatcher from 'features/system/hooks/useToastWatcher'; import useToastWatcher from 'features/system/hooks/useToastWatcher';
@ -13,23 +12,29 @@ import { Box, Flex, Grid, Portal, useColorMode } from '@chakra-ui/react';
import { APP_HEIGHT, APP_WIDTH } from 'theme/util/constants'; import { APP_HEIGHT, APP_WIDTH } from 'theme/util/constants';
import ImageGalleryPanel from 'features/gallery/components/ImageGalleryPanel'; import ImageGalleryPanel from 'features/gallery/components/ImageGalleryPanel';
import Lightbox from 'features/lightbox/components/Lightbox'; import Lightbox from 'features/lightbox/components/Lightbox';
import { useAppDispatch, useAppSelector } from './storeHooks'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import { PropsWithChildren, useCallback, useEffect, useState } from 'react'; import {
memo,
PropsWithChildren,
useCallback,
useEffect,
useState,
} from 'react';
import { motion, AnimatePresence } from 'framer-motion'; import { motion, AnimatePresence } from 'framer-motion';
import Loading from 'common/components/Loading/Loading'; import Loading from 'common/components/Loading/Loading';
import { useIsApplicationReady } from 'features/system/hooks/useIsApplicationReady'; import { useIsApplicationReady } from 'features/system/hooks/useIsApplicationReady';
import { PartialAppConfig } from './invokeai'; import { PartialAppConfig } from 'app/types/invokeai';
import { useGlobalHotkeys } from 'common/hooks/useGlobalHotkeys'; import { useGlobalHotkeys } from 'common/hooks/useGlobalHotkeys';
import { configChanged } from 'features/system/store/configSlice'; import { configChanged } from 'features/system/store/configSlice';
import { useFeatureStatus } from 'features/system/hooks/useFeatureStatus'; import { useFeatureStatus } from 'features/system/hooks/useFeatureStatus';
keepGUIAlive(); const DEFAULT_CONFIG = {};
interface Props extends PropsWithChildren { interface Props extends PropsWithChildren {
config?: PartialAppConfig; config?: PartialAppConfig;
} }
const App = ({ config = {}, children }: Props) => { const App = ({ config = DEFAULT_CONFIG, children }: Props) => {
useToastWatcher(); useToastWatcher();
useGlobalHotkeys(); useGlobalHotkeys();
@ -121,4 +126,4 @@ const App = ({ config = {}, children }: Props) => {
); );
}; };
export default App; export default memo(App);

22
invokeai/frontend/web/src/component.tsx → invokeai/frontend/web/src/app/components/InvokeAIUI.tsx
View File

@ -1,8 +1,8 @@
import React, { lazy, PropsWithChildren, useEffect } from 'react'; import React, { lazy, memo, PropsWithChildren, useEffect } from 'react';
import { Provider } from 'react-redux'; import { Provider } from 'react-redux';
import { PersistGate } from 'redux-persist/integration/react'; import { PersistGate } from 'redux-persist/integration/react';
import { buildMiddleware, store } from './app/store'; import { buildMiddleware, store } from 'app/store/store';
import { persistor } from './persistor'; import { persistor } from '../store/persistor';
import { OpenAPI } from 'services/api'; import { OpenAPI } from 'services/api';
import '@fontsource/inter/100.css'; import '@fontsource/inter/100.css';
import '@fontsource/inter/200.css'; import '@fontsource/inter/200.css';
@ -14,14 +14,14 @@ import '@fontsource/inter/700.css';
import '@fontsource/inter/800.css'; import '@fontsource/inter/800.css';
import '@fontsource/inter/900.css'; import '@fontsource/inter/900.css';
import Loading from './common/components/Loading/Loading'; import Loading from '../../common/components/Loading/Loading';
import { addMiddleware, resetMiddlewares } from 'redux-dynamic-middlewares'; import { addMiddleware, resetMiddlewares } from 'redux-dynamic-middlewares';
import { PartialAppConfig } from 'app/invokeai'; import { PartialAppConfig } from 'app/types/invokeai';
import './i18n'; import '../../i18n';
const App = lazy(() => import('./app/App')); const App = lazy(() => import('./App'));
const ThemeLocaleProvider = lazy(() => import('./app/ThemeLocaleProvider')); const ThemeLocaleProvider = lazy(() => import('./ThemeLocaleProvider'));
interface Props extends PropsWithChildren { interface Props extends PropsWithChildren {
apiUrl?: string; apiUrl?: string;
@ -29,7 +29,7 @@ interface Props extends PropsWithChildren {
config?: PartialAppConfig; config?: PartialAppConfig;
} }
export default function Component({ apiUrl, token, config, children }: Props) { const InvokeAIUI = ({ apiUrl, token, config, children }: Props) => {
useEffect(() => { useEffect(() => {
// configure API client token // configure API client token
if (token) { if (token) {
@ -66,4 +66,6 @@ export default function Component({ apiUrl, token, config, children }: Props) {
</Provider> </Provider>
</React.StrictMode> </React.StrictMode>
); );
} };
export default memo(InvokeAIUI);

4
invokeai/frontend/web/src/app/ThemeLocaleProvider.tsx → invokeai/frontend/web/src/app/components/ThemeLocaleProvider.tsx
View File

@ -2,8 +2,8 @@ import { ChakraProvider, extendTheme } from '@chakra-ui/react';
import { ReactNode, useEffect } from 'react'; import { ReactNode, useEffect } from 'react';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { theme as invokeAITheme } from 'theme/theme'; import { theme as invokeAITheme } from 'theme/theme';
import { RootState } from './store'; import { RootState } from 'app/store/store';
import { useAppSelector } from './storeHooks'; import { useAppSelector } from 'app/store/storeHooks';
import { greenTeaThemeColors } from 'theme/colors/greenTea'; import { greenTeaThemeColors } from 'theme/colors/greenTea';
import { invokeAIThemeColors } from 'theme/colors/invokeAI'; import { invokeAIThemeColors } from 'theme/colors/invokeAI';

17
invokeai/frontend/web/src/app/constants.ts
View File

@ -2,22 +2,7 @@
import { InProgressImageType } from 'features/system/store/systemSlice'; import { InProgressImageType } from 'features/system/store/systemSlice';
// Valid samplers export const DIFFUSERS_SCHEDULERS: Array<string> = [
export const SAMPLERS: Array<string> = [
'ddim',
'plms',
'k_lms',
'k_dpm_2',
'k_dpm_2_a',
'k_dpmpp_2',
'k_dpmpp_2_a',
'k_euler',
'k_euler_a',
'k_heun',
];
// Valid Diffusers Samplers
export const DIFFUSERS_SAMPLERS: Array<string> = [
'ddim', 'ddim',
'plms', 'plms',
'k_lms', 'k_lms',

2
invokeai/frontend/web/src/app/selectors/readinessSelector.ts
View File

@ -4,7 +4,7 @@ import { initialCanvasImageSelector } from 'features/canvas/store/canvasSelector
import { generationSelector } from 'features/parameters/store/generationSelectors'; import { generationSelector } from 'features/parameters/store/generationSelectors';
import { systemSelector } from 'features/system/store/systemSelectors'; import { systemSelector } from 'features/system/store/systemSelectors';
import { activeTabNameSelector } from 'features/ui/store/uiSelectors'; import { activeTabNameSelector } from 'features/ui/store/uiSelectors';
import { isEqual } from 'lodash'; import { isEqual } from 'lodash-es';
export const readinessSelector = createSelector( export const readinessSelector = createSelector(
[ [

2
invokeai/frontend/web/src/app/socketio/actions.ts
View File

@ -1,5 +1,5 @@
import { createAction } from '@reduxjs/toolkit'; import { createAction } from '@reduxjs/toolkit';
import * as InvokeAI from 'app/invokeai'; import * as InvokeAI from 'app/types/invokeai';
import { GalleryCategory } from 'features/gallery/store/gallerySlice'; import { GalleryCategory } from 'features/gallery/store/gallerySlice';
import { InvokeTabName } from 'features/ui/store/tabMap'; import { InvokeTabName } from 'features/ui/store/tabMap';

4
invokeai/frontend/web/src/app/socketio/emitters.ts
View File

@ -1,6 +1,6 @@
import { AnyAction, Dispatch, MiddlewareAPI } from '@reduxjs/toolkit'; import { AnyAction, Dispatch, MiddlewareAPI } from '@reduxjs/toolkit';
import * as InvokeAI from 'app/invokeai'; import * as InvokeAI from 'app/types/invokeai';
import type { RootState } from 'app/store'; import type { RootState } from 'app/store/store';
import { import {
frontendToBackendParameters, frontendToBackendParameters,
FrontendToBackendParametersConfig, FrontendToBackendParametersConfig,

4
invokeai/frontend/web/src/app/socketio/listeners.ts
View File

@ -3,7 +3,7 @@ import dateFormat from 'dateformat';
import i18n from 'i18n'; import i18n from 'i18n';
import { v4 as uuidv4 } from 'uuid'; import { v4 as uuidv4 } from 'uuid';
import * as InvokeAI from 'app/invokeai'; import * as InvokeAI from 'app/types/invokeai';
import { import {
addLogEntry, addLogEntry,
@ -30,7 +30,7 @@ import {
setIntermediateImage, setIntermediateImage,
} from 'features/gallery/store/gallerySlice'; } from 'features/gallery/store/gallerySlice';
import type { RootState } from 'app/store'; import type { RootState } from 'app/store/store';
import { addImageToStagingArea } from 'features/canvas/store/canvasSlice'; import { addImageToStagingArea } from 'features/canvas/store/canvasSlice';
import { import {
clearInitialImage, clearInitialImage,

2
invokeai/frontend/web/src/app/socketio/middleware.ts
View File

@ -4,7 +4,7 @@ import { io } from 'socket.io-client';
import makeSocketIOEmitters from './emitters'; import makeSocketIOEmitters from './emitters';
import makeSocketIOListeners from './listeners'; import makeSocketIOListeners from './listeners';
import * as InvokeAI from 'app/invokeai'; import * as InvokeAI from 'app/types/invokeai';
/** /**
* Creates a socketio middleware to handle communication with server. * Creates a socketio middleware to handle communication with server.

2
invokeai/frontend/web/src/persistor.ts → invokeai/frontend/web/src/app/store/persistor.ts
View File

@ -1,4 +1,4 @@
import { store } from 'app/store'; import { store } from 'app/store/store';
import { persistStore } from 'redux-persist'; import { persistStore } from 'redux-persist';
export const persistor = persistStore(store); export const persistor = persistStore(store);

3
invokeai/frontend/web/src/app/store.ts → invokeai/frontend/web/src/app/store/store.ts
View File

@ -19,7 +19,7 @@ import hotkeysReducer from 'features/ui/store/hotkeysSlice';
import modelsReducer from 'features/system/store/modelSlice'; import modelsReducer from 'features/system/store/modelSlice';
import nodesReducer from 'features/nodes/store/nodesSlice'; import nodesReducer from 'features/nodes/store/nodesSlice';
import { socketioMiddleware } from './socketio/middleware'; import { socketioMiddleware } from '../socketio/middleware';
import { socketMiddleware } from 'services/events/middleware'; import { socketMiddleware } from 'services/events/middleware';
import { canvasDenylist } from 'features/canvas/store/canvasPersistDenylist'; import { canvasDenylist } from 'features/canvas/store/canvasPersistDenylist';
import { galleryDenylist } from 'features/gallery/store/galleryPersistDenylist'; import { galleryDenylist } from 'features/gallery/store/galleryPersistDenylist';
@ -114,6 +114,7 @@ export const store = configureStore({
'canvas/setBoundingBoxDimensions', 'canvas/setBoundingBoxDimensions',
'canvas/setIsDrawing', 'canvas/setIsDrawing',
'canvas/addPointToCurrentLine', 'canvas/addPointToCurrentLine',
'socket/generatorProgress',
], ],
}, },
}); });

2
invokeai/frontend/web/src/app/storeHooks.ts → invokeai/frontend/web/src/app/store/storeHooks.ts
View File

@ -1,5 +1,5 @@
import { TypedUseSelectorHook, useDispatch, useSelector } from 'react-redux'; import { TypedUseSelectorHook, useDispatch, useSelector } from 'react-redux';
import { AppDispatch, RootState } from './store'; import { AppDispatch, RootState } from 'app/store/store';
// Use throughout your app instead of plain `useDispatch` and `useSelector` // Use throughout your app instead of plain `useDispatch` and `useSelector`
export const useAppDispatch: () => AppDispatch = useDispatch; export const useAppDispatch: () => AppDispatch = useDispatch;

2
invokeai/frontend/web/src/app/storeUtils.ts → invokeai/frontend/web/src/app/store/storeUtils.ts
View File

@ -1,5 +1,5 @@
import { createAsyncThunk } from '@reduxjs/toolkit'; import { createAsyncThunk } from '@reduxjs/toolkit';
import { AppDispatch, RootState } from './store'; import { AppDispatch, RootState } from 'app/store/store';
// https://redux-toolkit.js.org/usage/usage-with-typescript#defining-a-pre-typed-createasyncthunk // https://redux-toolkit.js.org/usage/usage-with-typescript#defining-a-pre-typed-createasyncthunk
export const createAppAsyncThunk = createAsyncThunk.withTypes<{ export const createAppAsyncThunk = createAsyncThunk.withTypes<{

111
invokeai/frontend/web/src/app/invokeai.d.ts → invokeai/frontend/web/src/app/types/invokeai.ts
View File

@ -12,10 +12,11 @@
* 'gfpgan'. * 'gfpgan'.
*/ */
import { GalleryCategory } from 'features/gallery/store/gallerySlice';
import { FacetoolType } from 'features/parameters/store/postprocessingSlice'; import { FacetoolType } from 'features/parameters/store/postprocessingSlice';
import { InvokeTabName } from 'features/ui/store/tabMap'; import { InvokeTabName } from 'features/ui/store/tabMap';
import { IRect } from 'konva/lib/types'; import { IRect } from 'konva/lib/types';
import { ImageMetadata, ImageType } from 'services/api'; import { ImageResponseMetadata, ImageType } from 'services/api';
import { AnyInvocation } from 'services/events/types'; import { AnyInvocation } from 'services/events/types';
import { O } from 'ts-toolbelt'; import { O } from 'ts-toolbelt';
@ -28,24 +29,24 @@ import { O } from 'ts-toolbelt';
* TODO: Better documentation of types. * TODO: Better documentation of types.
*/ */
export declare type PromptItem = { export type PromptItem = {
prompt: string; prompt: string;
weight: number; weight: number;
}; };
// TECHDEBT: We need to retain compatibility with plain prompt strings and the structure Prompt type // TECHDEBT: We need to retain compatibility with plain prompt strings and the structure Prompt type
export declare type Prompt = Array<PromptItem> | string; export type Prompt = Array<PromptItem> | string;
export declare type SeedWeightPair = { export type SeedWeightPair = {
seed: number; seed: number;
weight: number; weight: number;
}; };
export declare type SeedWeights = Array<SeedWeightPair>; export type SeedWeights = Array<SeedWeightPair>;
// All generated images contain these metadata. // All generated images contain these metadata.
export declare type CommonGeneratedImageMetadata = { export type CommonGeneratedImageMetadata = {
postprocessing: null | Array<ESRGANMetadata | GFPGANMetadata>; postprocessing: null | Array<ESRGANMetadata | FacetoolMetadata>;
sampler: sampler:
| 'ddim' | 'ddim'
| 'k_dpm_2_a' | 'k_dpm_2_a'
@ -70,11 +71,11 @@ export declare type CommonGeneratedImageMetadata = {
}; };
// txt2img and img2img images have some unique attributes. // txt2img and img2img images have some unique attributes.
export declare type Txt2ImgMetadata = GeneratedImageMetadata & { export type Txt2ImgMetadata = CommonGeneratedImageMetadata & {
type: 'txt2img'; type: 'txt2img';
}; };
export declare type Img2ImgMetadata = GeneratedImageMetadata & { export type Img2ImgMetadata = CommonGeneratedImageMetadata & {
type: 'img2img'; type: 'img2img';
orig_hash: string; orig_hash: string;
strength: number; strength: number;
@ -84,40 +85,38 @@ export declare type Img2ImgMetadata = GeneratedImageMetadata & {
}; };
// Superset of generated image metadata types. // Superset of generated image metadata types.
export declare type GeneratedImageMetadata = Txt2ImgMetadata | Img2ImgMetadata; export type GeneratedImageMetadata = Txt2ImgMetadata | Img2ImgMetadata;
// All post processed images contain these metadata. // All post processed images contain these metadata.
export declare type CommonPostProcessedImageMetadata = { export type CommonPostProcessedImageMetadata = {
orig_path: string; orig_path: string;
orig_hash: string; orig_hash: string;
}; };
// esrgan and gfpgan images have some unique attributes. // esrgan and gfpgan images have some unique attributes.
export declare type ESRGANMetadata = CommonPostProcessedImageMetadata & { export type ESRGANMetadata = CommonPostProcessedImageMetadata & {
type: 'esrgan'; type: 'esrgan';
scale: 2 | 4; scale: 2 | 4;
strength: number; strength: number;
denoise_str: number; denoise_str: number;
}; };
export declare type FacetoolMetadata = CommonPostProcessedImageMetadata & { export type FacetoolMetadata = CommonPostProcessedImageMetadata & {
type: 'gfpgan' | 'codeformer'; type: 'gfpgan' | 'codeformer';
strength: number; strength: number;
fidelity?: number; fidelity?: number;
}; };
// Superset of all postprocessed image metadata types.. // Superset of all postprocessed image metadata types..
export declare type PostProcessedImageMetadata = export type PostProcessedImageMetadata = ESRGANMetadata | FacetoolMetadata;
| ESRGANMetadata
| FacetoolMetadata;
// Metadata includes the system config and image metadata. // Metadata includes the system config and image metadata.
export declare type Metadata = SystemGenerationMetadata & { export type Metadata = SystemGenerationMetadata & {
image: GeneratedImageMetadata | PostProcessedImageMetadata; image: GeneratedImageMetadata | PostProcessedImageMetadata;
}; };
// An Image has a UUID, url, modified timestamp, width, height and maybe metadata // An Image has a UUID, url, modified timestamp, width, height and maybe metadata
export declare type _Image = { export type _Image = {
uuid: string; uuid: string;
url: string; url: string;
thumbnail: string; thumbnail: string;
@ -134,16 +133,16 @@ export declare type _Image = {
/** /**
* ResultImage * ResultImage
*/ */
export declare type Image = { export type Image = {
name: string; name: string;
type: ImageType; type: ImageType;
url: string; url: string;
thumbnail: string; thumbnail: string;
metadata: ImageMetadata; metadata: ImageResponseMetadata;
}; };
// GalleryImages is an array of Image. // GalleryImages is an array of Image.
export declare type GalleryImages = { export type GalleryImages = {
images: Array<_Image>; images: Array<_Image>;
}; };
@ -152,7 +151,7 @@ export declare type GalleryImages = {
*/ */
// This represents the processing status of the backend. // This represents the processing status of the backend.
export declare type SystemStatus = { export type SystemStatus = {
isProcessing: boolean; isProcessing: boolean;
currentStep: number; currentStep: number;
totalSteps: number; totalSteps: number;
@ -163,7 +162,7 @@ export declare type SystemStatus = {
hasError: boolean; hasError: boolean;
}; };
export declare type SystemGenerationMetadata = { export type SystemGenerationMetadata = {
model: string; model: string;
model_weights?: string; model_weights?: string;
model_id?: string; model_id?: string;
@ -172,14 +171,14 @@ export declare type SystemGenerationMetadata = {
app_version: string; app_version: string;
}; };
export declare type SystemConfig = SystemGenerationMetadata & { export type SystemConfig = SystemGenerationMetadata & {
model_list: ModelList; model_list: ModelList;
infill_methods: string[]; infill_methods: string[];
}; };
export declare type ModelStatus = 'active' | 'cached' | 'not loaded'; export type ModelStatus = 'active' | 'cached' | 'not loaded';
export declare type Model = { export type Model = {
status: ModelStatus; status: ModelStatus;
description: string; description: string;
weights: string; weights: string;
@ -191,7 +190,7 @@ export declare type Model = {
format?: string; format?: string;
}; };
export declare type DiffusersModel = { export type DiffusersModel = {
status: ModelStatus; status: ModelStatus;
description: string; description: string;
repo_id?: string; repo_id?: string;
@ -204,14 +203,14 @@ export declare type DiffusersModel = {
default?: boolean; default?: boolean;
}; };
export declare type ModelList = Record<string, Model & DiffusersModel>; export type ModelList = Record<string, Model & DiffusersModel>;
export declare type FoundModel = { export type FoundModel = {
name: string; name: string;
location: string; location: string;
}; };
export declare type InvokeModelConfigProps = { export type InvokeModelConfigProps = {
name: string | undefined; name: string | undefined;
description: string | undefined; description: string | undefined;
config: string | undefined; config: string | undefined;
@ -223,7 +222,7 @@ export declare type InvokeModelConfigProps = {
format: string | undefined; format: string | undefined;
}; };
export declare type InvokeDiffusersModelConfigProps = { export type InvokeDiffusersModelConfigProps = {
name: string | undefined; name: string | undefined;
description: string | undefined; description: string | undefined;
repo_id: string | undefined; repo_id: string | undefined;
@ -236,13 +235,13 @@ export declare type InvokeDiffusersModelConfigProps = {
}; };
}; };
export declare type InvokeModelConversionProps = { export type InvokeModelConversionProps = {
model_name: string; model_name: string;
save_location: string; save_location: string;
custom_location: string | null; custom_location: string | null;
}; };
export declare type InvokeModelMergingProps = { export type InvokeModelMergingProps = {
models_to_merge: string[]; models_to_merge: string[];
alpha: number; alpha: number;
interp: 'weighted_sum' | 'sigmoid' | 'inv_sigmoid' | 'add_difference'; interp: 'weighted_sum' | 'sigmoid' | 'inv_sigmoid' | 'add_difference';
@ -255,48 +254,48 @@ export declare type InvokeModelMergingProps = {
* These types type data received from the server via socketio. * These types type data received from the server via socketio.
*/ */
export declare type ModelChangeResponse = { export type ModelChangeResponse = {
model_name: string; model_name: string;
model_list: ModelList; model_list: ModelList;
}; };
export declare type ModelConvertedResponse = { export type ModelConvertedResponse = {
converted_model_name: string; converted_model_name: string;
model_list: ModelList; model_list: ModelList;
}; };
export declare type ModelsMergedResponse = { export type ModelsMergedResponse = {
merged_models: string[]; merged_models: string[];
merged_model_name: string; merged_model_name: string;
model_list: ModelList; model_list: ModelList;
}; };
export declare type ModelAddedResponse = { export type ModelAddedResponse = {
new_model_name: string; new_model_name: string;
model_list: ModelList; model_list: ModelList;
update: boolean; update: boolean;
}; };
export declare type ModelDeletedResponse = { export type ModelDeletedResponse = {
deleted_model_name: string; deleted_model_name: string;
model_list: ModelList; model_list: ModelList;
}; };
export declare type FoundModelResponse = { export type FoundModelResponse = {
search_folder: string; search_folder: string;
found_models: FoundModel[]; found_models: FoundModel[];
}; };
export declare type SystemStatusResponse = SystemStatus; export type SystemStatusResponse = SystemStatus;
export declare type SystemConfigResponse = SystemConfig; export type SystemConfigResponse = SystemConfig;
export declare type ImageResultResponse = Omit<_Image, 'uuid'> & { export type ImageResultResponse = Omit<_Image, 'uuid'> & {
boundingBox?: IRect; boundingBox?: IRect;
generationMode: InvokeTabName; generationMode: InvokeTabName;
}; };
export declare type ImageUploadResponse = { export type ImageUploadResponse = {
// image: Omit<Image, 'uuid' | 'metadata' | 'category'>; // image: Omit<Image, 'uuid' | 'metadata' | 'category'>;
url: string; url: string;
mtime: number; mtime: number;
@ -306,33 +305,33 @@ export declare type ImageUploadResponse = {
// bbox: [number, number, number, number]; // bbox: [number, number, number, number];
}; };
export declare type ErrorResponse = { export type ErrorResponse = {
message: string; message: string;
additionalData?: string; additionalData?: string;
}; };
export declare type GalleryImagesResponse = { export type GalleryImagesResponse = {
images: Array<Omit<_Image, 'uuid'>>; images: Array<Omit<_Image, 'uuid'>>;
areMoreImagesAvailable: boolean; areMoreImagesAvailable: boolean;
category: GalleryCategory; category: GalleryCategory;
}; };
export declare type ImageDeletedResponse = { export type ImageDeletedResponse = {
uuid: string; uuid: string;
url: string; url: string;
category: GalleryCategory; category: GalleryCategory;
}; };
export declare type ImageUrlResponse = { export type ImageUrlResponse = {
url: string; url: string;
}; };
export declare type UploadImagePayload = { // export type UploadImagePayload = {
file: File; // file: File;
destination?: ImageUploadDestination; // destination?: ImageUploadDestination;
}; // };
export declare type UploadOutpaintingMergeImagePayload = { export type UploadOutpaintingMergeImagePayload = {
dataURL: string; dataURL: string;
name: string; name: string;
}; };
@ -340,7 +339,7 @@ export declare type UploadOutpaintingMergeImagePayload = {
/** /**
* A disable-able application feature * A disable-able application feature
*/ */
export declare type AppFeature = export type AppFeature =
| 'faceRestore' | 'faceRestore'
| 'upscaling' | 'upscaling'
| 'lightbox' | 'lightbox'
@ -353,7 +352,7 @@ export declare type AppFeature =
/** /**
* A disable-able Stable Diffusion feature * A disable-able Stable Diffusion feature
*/ */
export declare type StableDiffusionFeature = export type StableDiffusionFeature =
| 'noiseConfig' | 'noiseConfig'
| 'variations' | 'variations'
| 'symmetry' | 'symmetry'
@ -364,7 +363,7 @@ export declare type StableDiffusionFeature =
* Configuration options for the InvokeAI UI. * Configuration options for the InvokeAI UI.
* Distinct from system settings which may be changed inside the app. * Distinct from system settings which may be changed inside the app.
*/ */
export declare type AppConfig = { export type AppConfig = {
/** /**
* Whether or not URLs should be transformed to use a different host * Whether or not URLs should be transformed to use a different host
*/ */
@ -428,4 +427,4 @@ export declare type AppConfig = {
}; };
}; };
export declare type PartialAppConfig = O.Partial<AppConfig, 'deep'>; export type PartialAppConfig = O.Partial<AppConfig, 'deep'>;

25
invokeai/frontend/web/src/app/utils.ts
View File

@ -1,25 +0,0 @@
export function keepGUIAlive() {
async function getRequest(url = '') {
const response = await fetch(url, {
method: 'GET',
cache: 'no-cache',
});
return response;
}
const keepAliveServer = () => {
const url = document.location;
const route = '/flaskwebgui-keep-server-alive';
getRequest(url + route).then((data) => {
return data;
});
};
if (!import.meta.env.NODE_ENV || import.meta.env.NODE_ENV === 'production') {
document.addEventListener('DOMContentLoaded', () => {
const intervalRequest = 3 * 1000;
keepAliveServer();
setInterval(keepAliveServer, intervalRequest);
});
}
}

2
invokeai/frontend/web/src/common/components/GuidePopover.tsx
View File

@ -8,7 +8,7 @@ import {
} from '@chakra-ui/react'; } from '@chakra-ui/react';
import { createSelector } from '@reduxjs/toolkit'; import { createSelector } from '@reduxjs/toolkit';
import { Feature, useFeatureHelpInfo } from 'app/features'; import { Feature, useFeatureHelpInfo } from 'app/features';
import { useAppSelector } from 'app/storeHooks'; import { useAppSelector } from 'app/store/storeHooks';
import { systemSelector } from 'features/system/store/systemSelectors'; import { systemSelector } from 'features/system/store/systemSelectors';
import { SystemState } from 'features/system/store/systemSlice'; import { SystemState } from 'features/system/store/systemSlice';
import { memo, ReactElement } from 'react'; import { memo, ReactElement } from 'react';

2
invokeai/frontend/web/src/common/components/IAINumberInput.tsx
View File

@ -14,7 +14,7 @@ import {
Tooltip, Tooltip,
TooltipProps, TooltipProps,
} from '@chakra-ui/react'; } from '@chakra-ui/react';
import { clamp } from 'lodash'; import { clamp } from 'lodash-es';
import { FocusEvent, memo, useEffect, useState } from 'react'; import { FocusEvent, memo, useEffect, useState } from 'react';

2
invokeai/frontend/web/src/common/components/IAISlider.tsx
View File

@ -23,7 +23,7 @@ import {
Tooltip, Tooltip,
TooltipProps, TooltipProps,
} from '@chakra-ui/react'; } from '@chakra-ui/react';
import { clamp } from 'lodash'; import { clamp } from 'lodash-es';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { import {

6
invokeai/frontend/web/src/common/components/ImageToImageOverlay.tsx
View File

@ -1,12 +1,12 @@
import { Badge, Box, ButtonGroup, Flex } from '@chakra-ui/react'; import { Badge, Box, ButtonGroup, Flex } from '@chakra-ui/react';
import { RootState } from 'app/store'; import { RootState } from 'app/store/store';
import { useAppDispatch, useAppSelector } from 'app/storeHooks'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import { clearInitialImage } from 'features/parameters/store/generationSlice'; import { clearInitialImage } from 'features/parameters/store/generationSlice';
import { useCallback } from 'react'; import { useCallback } from 'react';
import IAIIconButton from 'common/components/IAIIconButton'; import IAIIconButton from 'common/components/IAIIconButton';
import { FaUndo, FaUpload } from 'react-icons/fa'; import { FaUndo, FaUpload } from 'react-icons/fa';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { Image } from 'app/invokeai'; import { Image } from 'app/types/invokeai';
type ImageToImageOverlayProps = { type ImageToImageOverlayProps = {
setIsLoaded: (isLoaded: boolean) => void; setIsLoaded: (isLoaded: boolean) => void;

4
invokeai/frontend/web/src/common/components/ImageToImageSettingsHeader.tsx
View File

@ -20,8 +20,8 @@ import IAIIconButton from 'common/components/IAIIconButton';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { FaUndo, FaUpload } from 'react-icons/fa'; import { FaUndo, FaUpload } from 'react-icons/fa';
import { useAppDispatch, useAppSelector } from 'app/storeHooks'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import { RootState } from 'app/store'; import { RootState } from 'app/store/store';
import { useCallback } from 'react'; import { useCallback } from 'react';
import { clearInitialImage } from 'features/parameters/store/generationSlice'; import { clearInitialImage } from 'features/parameters/store/generationSlice';

2
invokeai/frontend/web/src/common/components/ImageUploader.tsx
View File

@ -1,6 +1,6 @@
import { Box, useToast } from '@chakra-ui/react'; import { Box, useToast } from '@chakra-ui/react';
import { ImageUploaderTriggerContext } from 'app/contexts/ImageUploaderTriggerContext'; import { ImageUploaderTriggerContext } from 'app/contexts/ImageUploaderTriggerContext';
import { useAppDispatch, useAppSelector } from 'app/storeHooks'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import useImageUploader from 'common/hooks/useImageUploader'; import useImageUploader from 'common/hooks/useImageUploader';
import { activeTabNameSelector } from 'features/ui/store/uiSelectors'; import { activeTabNameSelector } from 'features/ui/store/uiSelectors';
import { ResourceKey } from 'i18next'; import { ResourceKey } from 'i18next';

3
invokeai/frontend/web/src/common/components/Loading/Loading.tsx
View File

@ -1,5 +1,6 @@
import { Flex, Image, Spinner } from '@chakra-ui/react'; import { Flex, Image, Spinner } from '@chakra-ui/react';
import InvokeAILogoImage from 'assets/images/logo.png'; import InvokeAILogoImage from 'assets/images/logo.png';
import { memo } from 'react';
// This component loads before the theme so we cannot use theme tokens here // This component loads before the theme so we cannot use theme tokens here
@ -29,4 +30,4 @@ const Loading = () => {
); );
}; };
export default Loading; export default memo(Loading);

6
invokeai/frontend/web/src/common/hooks/useGlobalHotkeys.ts
View File

@ -1,8 +1,8 @@
import { createSelector } from '@reduxjs/toolkit'; import { createSelector } from '@reduxjs/toolkit';
import { RootState } from 'app/store'; import { RootState } from 'app/store/store';
import { useAppDispatch, useAppSelector } from 'app/storeHooks'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import { shiftKeyPressed } from 'features/ui/store/hotkeysSlice'; import { shiftKeyPressed } from 'features/ui/store/hotkeysSlice';
import { isEqual } from 'lodash'; import { isEqual } from 'lodash-es';
import { isHotkeyPressed, useHotkeys } from 'react-hotkeys-hook'; import { isHotkeyPressed, useHotkeys } from 'react-hotkeys-hook';
const globalHotkeysSelector = createSelector( const globalHotkeysSelector = createSelector(

2
invokeai/frontend/web/src/common/util/getPromptAndNegative.ts
View File

@ -1,4 +1,4 @@
import * as InvokeAI from 'app/invokeai'; import * as InvokeAI from 'app/types/invokeai';
import promptToString from './promptToString'; import promptToString from './promptToString';
export function getPromptAndNegative(inputPrompt: InvokeAI.Prompt) { export function getPromptAndNegative(inputPrompt: InvokeAI.Prompt) {

16
invokeai/frontend/web/src/common/util/getUrl.ts
View File

@ -1,5 +1,6 @@
import { RootState } from 'app/store'; import { RootState } from 'app/store/store';
import { useAppSelector } from 'app/storeHooks'; import { useAppSelector } from 'app/store/storeHooks';
import { useCallback } from 'react';
import { OpenAPI } from 'services/api'; import { OpenAPI } from 'services/api';
export const getUrlAlt = (url: string, shouldTransformUrls: boolean) => { export const getUrlAlt = (url: string, shouldTransformUrls: boolean) => {
@ -15,14 +16,19 @@ export const useGetUrl = () => {
(state: RootState) => state.config.shouldTransformUrls (state: RootState) => state.config.shouldTransformUrls
); );
return { const getUrl = useCallback(
shouldTransformUrls, (url?: string) => {
getUrl: (url?: string) => {
if (OpenAPI.BASE && shouldTransformUrls) { if (OpenAPI.BASE && shouldTransformUrls) {
return [OpenAPI.BASE, url].join('/'); return [OpenAPI.BASE, url].join('/');
} }
return url; return url;
}, },
[shouldTransformUrls]
);
return {
shouldTransformUrls,
getUrl,
}; };
}; };

2
invokeai/frontend/web/src/common/util/parseMetadata.ts
View File

@ -1,4 +1,4 @@
import { forEach, size } from 'lodash'; import { forEach, size } from 'lodash-es';
import { ImageField, LatentsField } from 'services/api'; import { ImageField, LatentsField } from 'services/api';
const OBJECT_TYPESTRING = '[object Object]'; const OBJECT_TYPESTRING = '[object Object]';

2
invokeai/frontend/web/src/common/util/promptToString.ts
View File

@ -1,4 +1,4 @@
import * as InvokeAI from 'app/invokeai'; import * as InvokeAI from 'app/types/invokeai';
const promptToString = (prompt: InvokeAI.Prompt): string => { const promptToString = (prompt: InvokeAI.Prompt): string => {
if (typeof prompt === 'string') { if (typeof prompt === 'string') {

2
invokeai/frontend/web/src/common/util/seedWeightPairs.ts
View File

@ -1,4 +1,4 @@
import * as InvokeAI from 'app/invokeai'; import * as InvokeAI from 'app/types/invokeai';
export const stringToSeedWeights = ( export const stringToSeedWeights = (
string: string string: string

20
invokeai/frontend/web/src/exports.tsx
View File

@ -1,20 +0,0 @@
import Component from './component';
import InvokeAiLogoComponent from './features/system/components/InvokeAILogoComponent';
import ThemeChanger from './features/system/components/ThemeChanger';
import IAIPopover from './common/components/IAIPopover';
import IAIIconButton from './common/components/IAIIconButton';
import SettingsModal from './features/system/components/SettingsModal/SettingsModal';
import StatusIndicator from './features/system/components/StatusIndicator';
import ModelSelect from 'features/system/components/ModelSelect';
export default Component;
export {
InvokeAiLogoComponent,
ThemeChanger,
IAIPopover,
IAIIconButton,
SettingsModal,
StatusIndicator,
ModelSelect,
};

2
invokeai/frontend/web/src/features/canvas/components/ClearCanvasHistoryButtonModal.tsx
View File

@ -1,4 +1,4 @@
import { useAppDispatch, useAppSelector } from 'app/storeHooks'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import IAIAlertDialog from 'common/components/IAIAlertDialog'; import IAIAlertDialog from 'common/components/IAIAlertDialog';
import IAIButton from 'common/components/IAIButton'; import IAIButton from 'common/components/IAIButton';
import { clearCanvasHistory } from 'features/canvas/store/canvasSlice'; import { clearCanvasHistory } from 'features/canvas/store/canvasSlice';

4
invokeai/frontend/web/src/features/canvas/components/IAICanvas.tsx
View File

@ -1,6 +1,6 @@
import { Box, chakra, Flex } from '@chakra-ui/react'; import { Box, chakra, Flex } from '@chakra-ui/react';
import { createSelector } from '@reduxjs/toolkit'; import { createSelector } from '@reduxjs/toolkit';
import { useAppSelector } from 'app/storeHooks'; import { useAppSelector } from 'app/store/storeHooks';
import { import {
canvasSelector, canvasSelector,
isStagingSelector, isStagingSelector,
@ -8,7 +8,7 @@ import {
import Konva from 'konva'; import Konva from 'konva';
import { KonvaEventObject } from 'konva/lib/Node'; import { KonvaEventObject } from 'konva/lib/Node';
import { Vector2d } from 'konva/lib/types'; import { Vector2d } from 'konva/lib/types';
import { isEqual } from 'lodash'; import { isEqual } from 'lodash-es';
import { useCallback, useRef } from 'react'; import { useCallback, useRef } from 'react';
import { Layer, Stage } from 'react-konva'; import { Layer, Stage } from 'react-konva';

4
invokeai/frontend/web/src/features/canvas/components/IAICanvasBoundingBoxOverlay.tsx
View File

@ -1,6 +1,6 @@
import { createSelector } from '@reduxjs/toolkit'; import { createSelector } from '@reduxjs/toolkit';
import { useAppSelector } from 'app/storeHooks'; import { useAppSelector } from 'app/store/storeHooks';
import { isEqual } from 'lodash'; import { isEqual } from 'lodash-es';
import { Group, Rect } from 'react-konva'; import { Group, Rect } from 'react-konva';
import { canvasSelector } from '../store/canvasSelectors'; import { canvasSelector } from '../store/canvasSelectors';

6
invokeai/frontend/web/src/features/canvas/components/IAICanvasGrid.tsx
View File

@ -2,10 +2,10 @@
import { useToken } from '@chakra-ui/react'; import { useToken } from '@chakra-ui/react';
import { createSelector } from '@reduxjs/toolkit'; import { createSelector } from '@reduxjs/toolkit';
import { RootState } from 'app/store'; import { RootState } from 'app/store/store';
import { useAppSelector } from 'app/storeHooks'; import { useAppSelector } from 'app/store/storeHooks';
import { canvasSelector } from 'features/canvas/store/canvasSelectors'; import { canvasSelector } from 'features/canvas/store/canvasSelectors';
import { isEqual, range } from 'lodash'; import { isEqual, range } from 'lodash-es';
import { ReactNode, useCallback, useLayoutEffect, useState } from 'react'; import { ReactNode, useCallback, useLayoutEffect, useState } from 'react';
import { Group, Line as KonvaLine } from 'react-konva'; import { Group, Line as KonvaLine } from 'react-konva';

6
invokeai/frontend/web/src/features/canvas/components/IAICanvasIntermediateImage.tsx
View File

@ -1,10 +1,10 @@
import { createSelector } from '@reduxjs/toolkit'; import { createSelector } from '@reduxjs/toolkit';
import { RootState } from 'app/store'; import { RootState } from 'app/store/store';
import { useAppSelector } from 'app/storeHooks'; import { useAppSelector } from 'app/store/storeHooks';
import { useGetUrl } from 'common/util/getUrl'; import { useGetUrl } from 'common/util/getUrl';
import { GalleryState } from 'features/gallery/store/gallerySlice'; import { GalleryState } from 'features/gallery/store/gallerySlice';
import { ImageConfig } from 'konva/lib/shapes/Image'; import { ImageConfig } from 'konva/lib/shapes/Image';
import { isEqual } from 'lodash'; import { isEqual } from 'lodash-es';
import { useEffect, useState } from 'react'; import { useEffect, useState } from 'react';
import { Image as KonvaImage } from 'react-konva'; import { Image as KonvaImage } from 'react-konva';

4
invokeai/frontend/web/src/features/canvas/components/IAICanvasMaskCompositer.tsx
View File

@ -1,12 +1,12 @@
import { createSelector } from '@reduxjs/toolkit'; import { createSelector } from '@reduxjs/toolkit';
import { useAppSelector } from 'app/storeHooks'; import { useAppSelector } from 'app/store/storeHooks';
import { canvasSelector } from 'features/canvas/store/canvasSelectors'; import { canvasSelector } from 'features/canvas/store/canvasSelectors';
import { RectConfig } from 'konva/lib/shapes/Rect'; import { RectConfig } from 'konva/lib/shapes/Rect';
import { Rect } from 'react-konva'; import { Rect } from 'react-konva';
import { rgbaColorToString } from 'features/canvas/util/colorToString'; import { rgbaColorToString } from 'features/canvas/util/colorToString';
import Konva from 'konva'; import Konva from 'konva';
import { isNumber } from 'lodash'; import { isNumber } from 'lodash-es';
import { useCallback, useEffect, useRef, useState } from 'react'; import { useCallback, useEffect, useRef, useState } from 'react';
export const canvasMaskCompositerSelector = createSelector( export const canvasMaskCompositerSelector = createSelector(

4
invokeai/frontend/web/src/features/canvas/components/IAICanvasMaskLines.tsx
View File

@ -1,8 +1,8 @@
import { createSelector } from '@reduxjs/toolkit'; import { createSelector } from '@reduxjs/toolkit';
import { useAppSelector } from 'app/storeHooks'; import { useAppSelector } from 'app/store/storeHooks';
import { canvasSelector } from 'features/canvas/store/canvasSelectors'; import { canvasSelector } from 'features/canvas/store/canvasSelectors';
import { GroupConfig } from 'konva/lib/Group'; import { GroupConfig } from 'konva/lib/Group';
import { isEqual } from 'lodash'; import { isEqual } from 'lodash-es';
import { Group, Line } from 'react-konva'; import { Group, Line } from 'react-konva';
import { isCanvasMaskLine } from '../store/canvasTypes'; import { isCanvasMaskLine } from '../store/canvasTypes';

4
invokeai/frontend/web/src/features/canvas/components/IAICanvasObjectRenderer.tsx
View File

@ -1,9 +1,9 @@
import { createSelector } from '@reduxjs/toolkit'; import { createSelector } from '@reduxjs/toolkit';
import { useAppSelector } from 'app/storeHooks'; import { useAppSelector } from 'app/store/storeHooks';
import { useGetUrl } from 'common/util/getUrl'; import { useGetUrl } from 'common/util/getUrl';
import { canvasSelector } from 'features/canvas/store/canvasSelectors'; import { canvasSelector } from 'features/canvas/store/canvasSelectors';
import { rgbaColorToString } from 'features/canvas/util/colorToString'; import { rgbaColorToString } from 'features/canvas/util/colorToString';
import { isEqual } from 'lodash'; import { isEqual } from 'lodash-es';
import { Group, Line, Rect } from 'react-konva'; import { Group, Line, Rect } from 'react-konva';
import { import {

2
invokeai/frontend/web/src/features/canvas/components/IAICanvasResizer.tsx
View File

@ -1,6 +1,6 @@
import { Flex, Spinner } from '@chakra-ui/react'; import { Flex, Spinner } from '@chakra-ui/react';
import { createSelector } from '@reduxjs/toolkit'; import { createSelector } from '@reduxjs/toolkit';
import { useAppDispatch, useAppSelector } from 'app/storeHooks'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import { import {
canvasSelector, canvasSelector,
initialCanvasImageSelector, initialCanvasImageSelector,

4
invokeai/frontend/web/src/features/canvas/components/IAICanvasStagingArea.tsx
View File

@ -1,9 +1,9 @@
import { createSelector } from '@reduxjs/toolkit'; import { createSelector } from '@reduxjs/toolkit';
import { useAppSelector } from 'app/storeHooks'; import { useAppSelector } from 'app/store/storeHooks';
import { useGetUrl } from 'common/util/getUrl'; import { useGetUrl } from 'common/util/getUrl';
import { canvasSelector } from 'features/canvas/store/canvasSelectors'; import { canvasSelector } from 'features/canvas/store/canvasSelectors';
import { GroupConfig } from 'konva/lib/Group'; import { GroupConfig } from 'konva/lib/Group';
import { isEqual } from 'lodash'; import { isEqual } from 'lodash-es';
import { Group, Rect } from 'react-konva'; import { Group, Rect } from 'react-konva';
import IAICanvasImage from './IAICanvasImage'; import IAICanvasImage from './IAICanvasImage';

4
invokeai/frontend/web/src/features/canvas/components/IAICanvasStagingAreaToolbar.tsx
View File

@ -1,7 +1,7 @@
import { ButtonGroup, Flex } from '@chakra-ui/react'; import { ButtonGroup, Flex } from '@chakra-ui/react';
import { createSelector } from '@reduxjs/toolkit'; import { createSelector } from '@reduxjs/toolkit';
import { saveStagingAreaImageToGallery } from 'app/socketio/actions'; import { saveStagingAreaImageToGallery } from 'app/socketio/actions';
import { useAppDispatch, useAppSelector } from 'app/storeHooks'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import IAIIconButton from 'common/components/IAIIconButton'; import IAIIconButton from 'common/components/IAIIconButton';
import { canvasSelector } from 'features/canvas/store/canvasSelectors'; import { canvasSelector } from 'features/canvas/store/canvasSelectors';
import { import {
@ -12,7 +12,7 @@ import {
setShouldShowStagingImage, setShouldShowStagingImage,
setShouldShowStagingOutline, setShouldShowStagingOutline,
} from 'features/canvas/store/canvasSlice'; } from 'features/canvas/store/canvasSlice';
import { isEqual } from 'lodash'; import { isEqual } from 'lodash-es';
import { useCallback } from 'react'; import { useCallback } from 'react';
import { useHotkeys } from 'react-hotkeys-hook'; import { useHotkeys } from 'react-hotkeys-hook';

4
invokeai/frontend/web/src/features/canvas/components/IAICanvasStatusText.tsx
View File

@ -1,8 +1,8 @@
import { Box, Flex } from '@chakra-ui/react'; import { Box, Flex } from '@chakra-ui/react';
import { createSelector } from '@reduxjs/toolkit'; import { createSelector } from '@reduxjs/toolkit';
import { useAppSelector } from 'app/storeHooks'; import { useAppSelector } from 'app/store/storeHooks';
import { canvasSelector } from 'features/canvas/store/canvasSelectors'; import { canvasSelector } from 'features/canvas/store/canvasSelectors';
import { isEqual } from 'lodash'; import { isEqual } from 'lodash-es';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import roundToHundreth from '../util/roundToHundreth'; import roundToHundreth from '../util/roundToHundreth';

4
invokeai/frontend/web/src/features/canvas/components/IAICanvasStatusText/IAICanvasStatusTextCursorPos.tsx
View File

@ -1,9 +1,9 @@
import { Box } from '@chakra-ui/react'; import { Box } from '@chakra-ui/react';
import { createSelector } from '@reduxjs/toolkit'; import { createSelector } from '@reduxjs/toolkit';
import { useAppSelector } from 'app/storeHooks'; import { useAppSelector } from 'app/store/storeHooks';
import { canvasSelector } from 'features/canvas/store/canvasSelectors'; import { canvasSelector } from 'features/canvas/store/canvasSelectors';
import roundToHundreth from 'features/canvas/util/roundToHundreth'; import roundToHundreth from 'features/canvas/util/roundToHundreth';
import { isEqual } from 'lodash'; import { isEqual } from 'lodash-es';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';

4
invokeai/frontend/web/src/features/canvas/components/IAICanvasToolPreview.tsx
View File

@ -1,9 +1,9 @@
import { createSelector } from '@reduxjs/toolkit'; import { createSelector } from '@reduxjs/toolkit';
import { useAppSelector } from 'app/storeHooks'; import { useAppSelector } from 'app/store/storeHooks';
import { canvasSelector } from 'features/canvas/store/canvasSelectors'; import { canvasSelector } from 'features/canvas/store/canvasSelectors';
import { rgbaColorToString } from 'features/canvas/util/colorToString'; import { rgbaColorToString } from 'features/canvas/util/colorToString';
import { GroupConfig } from 'konva/lib/Group'; import { GroupConfig } from 'konva/lib/Group';
import { isEqual } from 'lodash'; import { isEqual } from 'lodash-es';
import { Circle, Group } from 'react-konva'; import { Circle, Group } from 'react-konva';
import { import {

4
invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasBoundingBox.tsx
View File

@ -1,5 +1,5 @@
import { createSelector } from '@reduxjs/toolkit'; import { createSelector } from '@reduxjs/toolkit';
import { useAppDispatch, useAppSelector } from 'app/storeHooks'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import { import {
roundDownToMultiple, roundDownToMultiple,
roundToMultiple, roundToMultiple,
@ -16,7 +16,7 @@ import Konva from 'konva';
import { GroupConfig } from 'konva/lib/Group'; import { GroupConfig } from 'konva/lib/Group';
import { KonvaEventObject } from 'konva/lib/Node'; import { KonvaEventObject } from 'konva/lib/Node';
import { Vector2d } from 'konva/lib/types'; import { Vector2d } from 'konva/lib/types';
import { isEqual } from 'lodash'; import { isEqual } from 'lodash-es';
import { useCallback, useEffect, useRef, useState } from 'react'; import { useCallback, useEffect, useRef, useState } from 'react';
import { Group, Rect, Transformer } from 'react-konva'; import { Group, Rect, Transformer } from 'react-konva';

4
invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasMaskOptions.tsx
View File

@ -1,6 +1,6 @@
import { ButtonGroup, Flex } from '@chakra-ui/react'; import { ButtonGroup, Flex } from '@chakra-ui/react';
import { createSelector } from '@reduxjs/toolkit'; import { createSelector } from '@reduxjs/toolkit';
import { useAppDispatch, useAppSelector } from 'app/storeHooks'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import IAIButton from 'common/components/IAIButton'; import IAIButton from 'common/components/IAIButton';
import IAICheckbox from 'common/components/IAICheckbox'; import IAICheckbox from 'common/components/IAICheckbox';
import IAIColorPicker from 'common/components/IAIColorPicker'; import IAIColorPicker from 'common/components/IAIColorPicker';
@ -18,7 +18,7 @@ import {
setShouldPreserveMaskedArea, setShouldPreserveMaskedArea,
} from 'features/canvas/store/canvasSlice'; } from 'features/canvas/store/canvasSlice';
import { rgbaColorToString } from 'features/canvas/util/colorToString'; import { rgbaColorToString } from 'features/canvas/util/colorToString';
import { isEqual } from 'lodash'; import { isEqual } from 'lodash-es';
import { useHotkeys } from 'react-hotkeys-hook'; import { useHotkeys } from 'react-hotkeys-hook';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';

4
invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasRedoButton.tsx
View File

@ -1,5 +1,5 @@
import { createSelector } from '@reduxjs/toolkit'; import { createSelector } from '@reduxjs/toolkit';
import { useAppDispatch, useAppSelector } from 'app/storeHooks'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import IAIIconButton from 'common/components/IAIIconButton'; import IAIIconButton from 'common/components/IAIIconButton';
import { canvasSelector } from 'features/canvas/store/canvasSelectors'; import { canvasSelector } from 'features/canvas/store/canvasSelectors';
import { activeTabNameSelector } from 'features/ui/store/uiSelectors'; import { activeTabNameSelector } from 'features/ui/store/uiSelectors';
@ -9,7 +9,7 @@ import { FaRedo } from 'react-icons/fa';
import { redo } from 'features/canvas/store/canvasSlice'; import { redo } from 'features/canvas/store/canvasSlice';
import { systemSelector } from 'features/system/store/systemSelectors'; import { systemSelector } from 'features/system/store/systemSelectors';
import { isEqual } from 'lodash'; import { isEqual } from 'lodash-es';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
const canvasRedoSelector = createSelector( const canvasRedoSelector = createSelector(

4
invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasSettingsButtonPopover.tsx
View File

@ -1,6 +1,6 @@
import { Flex } from '@chakra-ui/react'; import { Flex } from '@chakra-ui/react';
import { createSelector } from '@reduxjs/toolkit'; import { createSelector } from '@reduxjs/toolkit';
import { useAppDispatch, useAppSelector } from 'app/storeHooks'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import IAICheckbox from 'common/components/IAICheckbox'; import IAICheckbox from 'common/components/IAICheckbox';
import IAIIconButton from 'common/components/IAIIconButton'; import IAIIconButton from 'common/components/IAIIconButton';
import IAIPopover from 'common/components/IAIPopover'; import IAIPopover from 'common/components/IAIPopover';
@ -16,7 +16,7 @@ import {
setShouldSnapToGrid, setShouldSnapToGrid,
} from 'features/canvas/store/canvasSlice'; } from 'features/canvas/store/canvasSlice';
import EmptyTempFolderButtonModal from 'features/system/components/ClearTempFolderButtonModal'; import EmptyTempFolderButtonModal from 'features/system/components/ClearTempFolderButtonModal';
import { isEqual } from 'lodash'; import { isEqual } from 'lodash-es';
import { ChangeEvent } from 'react'; import { ChangeEvent } from 'react';
import { useHotkeys } from 'react-hotkeys-hook'; import { useHotkeys } from 'react-hotkeys-hook';

4
invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasToolChooserOptions.tsx
View File

@ -1,6 +1,6 @@
import { ButtonGroup, Flex } from '@chakra-ui/react'; import { ButtonGroup, Flex } from '@chakra-ui/react';
import { createSelector } from '@reduxjs/toolkit'; import { createSelector } from '@reduxjs/toolkit';
import { useAppDispatch, useAppSelector } from 'app/storeHooks'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import IAIColorPicker from 'common/components/IAIColorPicker'; import IAIColorPicker from 'common/components/IAIColorPicker';
import IAIIconButton from 'common/components/IAIIconButton'; import IAIIconButton from 'common/components/IAIIconButton';
import IAIPopover from 'common/components/IAIPopover'; import IAIPopover from 'common/components/IAIPopover';
@ -17,7 +17,7 @@ import {
setTool, setTool,
} from 'features/canvas/store/canvasSlice'; } from 'features/canvas/store/canvasSlice';
import { systemSelector } from 'features/system/store/systemSelectors'; import { systemSelector } from 'features/system/store/systemSelectors';
import { clamp, isEqual } from 'lodash'; import { clamp, isEqual } from 'lodash-es';
import { useHotkeys } from 'react-hotkeys-hook'; import { useHotkeys } from 'react-hotkeys-hook';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';

4
invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasToolbar.tsx
View File

@ -1,6 +1,6 @@
import { ButtonGroup, Flex } from '@chakra-ui/react'; import { ButtonGroup, Flex } from '@chakra-ui/react';
import { createSelector } from '@reduxjs/toolkit'; import { createSelector } from '@reduxjs/toolkit';
import { useAppDispatch, useAppSelector } from 'app/storeHooks'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import IAIIconButton from 'common/components/IAIIconButton'; import IAIIconButton from 'common/components/IAIIconButton';
import IAISelect from 'common/components/IAISelect'; import IAISelect from 'common/components/IAISelect';
import useImageUploader from 'common/hooks/useImageUploader'; import useImageUploader from 'common/hooks/useImageUploader';
@ -24,7 +24,7 @@ import {
import { mergeAndUploadCanvas } from 'features/canvas/store/thunks/mergeAndUploadCanvas'; import { mergeAndUploadCanvas } from 'features/canvas/store/thunks/mergeAndUploadCanvas';
import { getCanvasBaseLayer } from 'features/canvas/util/konvaInstanceProvider'; import { getCanvasBaseLayer } from 'features/canvas/util/konvaInstanceProvider';
import { systemSelector } from 'features/system/store/systemSelectors'; import { systemSelector } from 'features/system/store/systemSelectors';
import { isEqual } from 'lodash'; import { isEqual } from 'lodash-es';
import { ChangeEvent } from 'react'; import { ChangeEvent } from 'react';
import { useHotkeys } from 'react-hotkeys-hook'; import { useHotkeys } from 'react-hotkeys-hook';

4
invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasUndoButton.tsx
View File

@ -1,5 +1,5 @@
import { createSelector } from '@reduxjs/toolkit'; import { createSelector } from '@reduxjs/toolkit';
import { useAppDispatch, useAppSelector } from 'app/storeHooks'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import IAIIconButton from 'common/components/IAIIconButton'; import IAIIconButton from 'common/components/IAIIconButton';
import { canvasSelector } from 'features/canvas/store/canvasSelectors'; import { canvasSelector } from 'features/canvas/store/canvasSelectors';
import { useHotkeys } from 'react-hotkeys-hook'; import { useHotkeys } from 'react-hotkeys-hook';
@ -9,7 +9,7 @@ import { undo } from 'features/canvas/store/canvasSlice';
import { systemSelector } from 'features/system/store/systemSelectors'; import { systemSelector } from 'features/system/store/systemSelectors';
import { activeTabNameSelector } from 'features/ui/store/uiSelectors'; import { activeTabNameSelector } from 'features/ui/store/uiSelectors';
import { isEqual } from 'lodash'; import { isEqual } from 'lodash-es';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
const canvasUndoSelector = createSelector( const canvasUndoSelector = createSelector(

4
invokeai/frontend/web/src/features/canvas/hooks/useCanvasDragMove.ts
View File

@ -1,5 +1,5 @@
import { createSelector } from '@reduxjs/toolkit'; import { createSelector } from '@reduxjs/toolkit';
import { useAppDispatch, useAppSelector } from 'app/storeHooks'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import { import {
canvasSelector, canvasSelector,
isStagingSelector, isStagingSelector,
@ -9,7 +9,7 @@ import {
setStageCoordinates, setStageCoordinates,
} from 'features/canvas/store/canvasSlice'; } from 'features/canvas/store/canvasSlice';
import { KonvaEventObject } from 'konva/lib/Node'; import { KonvaEventObject } from 'konva/lib/Node';
import { isEqual } from 'lodash'; import { isEqual } from 'lodash-es';
import { useCallback } from 'react'; import { useCallback } from 'react';

4
invokeai/frontend/web/src/features/canvas/hooks/useCanvasHotkeys.ts
View File

@ -1,5 +1,5 @@
import { createSelector } from '@reduxjs/toolkit'; import { createSelector } from '@reduxjs/toolkit';
import { useAppDispatch, useAppSelector } from 'app/storeHooks'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import { import {
canvasSelector, canvasSelector,
isStagingSelector, isStagingSelector,
@ -13,7 +13,7 @@ import {
setTool, setTool,
} from 'features/canvas/store/canvasSlice'; } from 'features/canvas/store/canvasSlice';
import { activeTabNameSelector } from 'features/ui/store/uiSelectors'; import { activeTabNameSelector } from 'features/ui/store/uiSelectors';
import { isEqual } from 'lodash'; import { isEqual } from 'lodash-es';
import { useRef } from 'react'; import { useRef } from 'react';
import { useHotkeys } from 'react-hotkeys-hook'; import { useHotkeys } from 'react-hotkeys-hook';

4
invokeai/frontend/web/src/features/canvas/hooks/useCanvasMouseDown.ts
View File

@ -1,5 +1,5 @@
import { createSelector } from '@reduxjs/toolkit'; import { createSelector } from '@reduxjs/toolkit';
import { useAppDispatch, useAppSelector } from 'app/storeHooks'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import { import {
canvasSelector, canvasSelector,
isStagingSelector, isStagingSelector,
@ -12,7 +12,7 @@ import {
import { activeTabNameSelector } from 'features/ui/store/uiSelectors'; import { activeTabNameSelector } from 'features/ui/store/uiSelectors';
import Konva from 'konva'; import Konva from 'konva';
import { KonvaEventObject } from 'konva/lib/Node'; import { KonvaEventObject } from 'konva/lib/Node';
import { isEqual } from 'lodash'; import { isEqual } from 'lodash-es';
import { MutableRefObject, useCallback } from 'react'; import { MutableRefObject, useCallback } from 'react';
import getScaledCursorPosition from '../util/getScaledCursorPosition'; import getScaledCursorPosition from '../util/getScaledCursorPosition';

4
invokeai/frontend/web/src/features/canvas/hooks/useCanvasMouseMove.ts
View File

@ -1,5 +1,5 @@
import { createSelector } from '@reduxjs/toolkit'; import { createSelector } from '@reduxjs/toolkit';
import { useAppDispatch, useAppSelector } from 'app/storeHooks'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import { import {
canvasSelector, canvasSelector,
isStagingSelector, isStagingSelector,
@ -11,7 +11,7 @@ import {
import { activeTabNameSelector } from 'features/ui/store/uiSelectors'; import { activeTabNameSelector } from 'features/ui/store/uiSelectors';
import Konva from 'konva'; import Konva from 'konva';
import { Vector2d } from 'konva/lib/types'; import { Vector2d } from 'konva/lib/types';
import { isEqual } from 'lodash'; import { isEqual } from 'lodash-es';
import { MutableRefObject, useCallback } from 'react'; import { MutableRefObject, useCallback } from 'react';
import getScaledCursorPosition from '../util/getScaledCursorPosition'; import getScaledCursorPosition from '../util/getScaledCursorPosition';

2
invokeai/frontend/web/src/features/canvas/hooks/useCanvasMouseOut.ts
View File

@ -1,4 +1,4 @@
import { useAppDispatch } from 'app/storeHooks'; import { useAppDispatch } from 'app/store/storeHooks';
import { mouseLeftCanvas } from 'features/canvas/store/canvasSlice'; import { mouseLeftCanvas } from 'features/canvas/store/canvasSlice';
import { useCallback } from 'react'; import { useCallback } from 'react';

4
invokeai/frontend/web/src/features/canvas/hooks/useCanvasMouseUp.ts
View File

@ -1,5 +1,5 @@
import { createSelector } from '@reduxjs/toolkit'; import { createSelector } from '@reduxjs/toolkit';
import { useAppDispatch, useAppSelector } from 'app/storeHooks'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import { import {
canvasSelector, canvasSelector,
isStagingSelector, isStagingSelector,
@ -12,7 +12,7 @@ import {
} from 'features/canvas/store/canvasSlice'; } from 'features/canvas/store/canvasSlice';
import { activeTabNameSelector } from 'features/ui/store/uiSelectors'; import { activeTabNameSelector } from 'features/ui/store/uiSelectors';
import Konva from 'konva'; import Konva from 'konva';
import { isEqual } from 'lodash'; import { isEqual } from 'lodash-es';
import { MutableRefObject, useCallback } from 'react'; import { MutableRefObject, useCallback } from 'react';
import getScaledCursorPosition from '../util/getScaledCursorPosition'; import getScaledCursorPosition from '../util/getScaledCursorPosition';

4
invokeai/frontend/web/src/features/canvas/hooks/useCanvasZoom.ts
View File

@ -1,5 +1,5 @@
import { createSelector } from '@reduxjs/toolkit'; import { createSelector } from '@reduxjs/toolkit';
import { useAppDispatch, useAppSelector } from 'app/storeHooks'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import { canvasSelector } from 'features/canvas/store/canvasSelectors'; import { canvasSelector } from 'features/canvas/store/canvasSelectors';
import { import {
setStageCoordinates, setStageCoordinates,
@ -7,7 +7,7 @@ import {
} from 'features/canvas/store/canvasSlice'; } from 'features/canvas/store/canvasSlice';
import Konva from 'konva'; import Konva from 'konva';
import { KonvaEventObject } from 'konva/lib/Node'; import { KonvaEventObject } from 'konva/lib/Node';
import { clamp, isEqual } from 'lodash'; import { clamp, isEqual } from 'lodash-es';
import { MutableRefObject, useCallback } from 'react'; import { MutableRefObject, useCallback } from 'react';
import { import {

2
invokeai/frontend/web/src/features/canvas/hooks/useColorUnderCursor.ts
View File

@ -1,4 +1,4 @@
import { useAppDispatch } from 'app/storeHooks'; import { useAppDispatch } from 'app/store/storeHooks';
import Konva from 'konva'; import Konva from 'konva';
import { import {
commitColorPickerColor, commitColorPickerColor,

2
invokeai/frontend/web/src/features/canvas/store/canvasSelectors.ts
View File

@ -1,5 +1,5 @@
import { createSelector } from '@reduxjs/toolkit'; import { createSelector } from '@reduxjs/toolkit';
import { RootState } from 'app/store'; import { RootState } from 'app/store/store';
import { systemSelector } from 'features/system/store/systemSelectors'; import { systemSelector } from 'features/system/store/systemSelectors';
import { activeTabNameSelector } from 'features/ui/store/uiSelectors'; import { activeTabNameSelector } from 'features/ui/store/uiSelectors';
import { CanvasImage, CanvasState, isCanvasBaseImage } from './canvasTypes'; import { CanvasImage, CanvasState, isCanvasBaseImage } from './canvasTypes';

4
invokeai/frontend/web/src/features/canvas/store/canvasSlice.ts
View File

@ -1,12 +1,12 @@
import type { PayloadAction } from '@reduxjs/toolkit'; import type { PayloadAction } from '@reduxjs/toolkit';
import { createSlice } from '@reduxjs/toolkit'; import { createSlice } from '@reduxjs/toolkit';
import * as InvokeAI from 'app/invokeai'; import * as InvokeAI from 'app/types/invokeai';
import { import {
roundDownToMultiple, roundDownToMultiple,
roundToMultiple, roundToMultiple,
} from 'common/util/roundDownToMultiple'; } from 'common/util/roundDownToMultiple';
import { IRect, Vector2d } from 'konva/lib/types'; import { IRect, Vector2d } from 'konva/lib/types';
import { clamp, cloneDeep } from 'lodash'; import { clamp, cloneDeep } from 'lodash-es';
// //
import { RgbaColor } from 'react-colorful'; import { RgbaColor } from 'react-colorful';
import calculateCoordinates from '../util/calculateCoordinates'; import calculateCoordinates from '../util/calculateCoordinates';

2
invokeai/frontend/web/src/features/canvas/store/canvasTypes.ts
View File

@ -1,4 +1,4 @@
import * as InvokeAI from 'app/invokeai'; import * as InvokeAI from 'app/types/invokeai';
import { IRect, Vector2d } from 'konva/lib/types'; import { IRect, Vector2d } from 'konva/lib/types';
import { RgbaColor } from 'react-colorful'; import { RgbaColor } from 'react-colorful';

4
invokeai/frontend/web/src/features/canvas/store/thunks/mergeAndUploadCanvas.ts
View File

@ -1,6 +1,6 @@
import { AnyAction, ThunkAction } from '@reduxjs/toolkit'; import { AnyAction, ThunkAction } from '@reduxjs/toolkit';
import * as InvokeAI from 'app/invokeai'; import * as InvokeAI from 'app/types/invokeai';
import { RootState } from 'app/store'; import { RootState } from 'app/store/store';
import { addImage } from 'features/gallery/store/gallerySlice'; import { addImage } from 'features/gallery/store/gallerySlice';
import { import {
addToast, addToast,

4
invokeai/frontend/web/src/features/canvas/store/thunks/requestCanvasScale.ts
View File

@ -1,6 +1,6 @@
import { AppDispatch, AppGetState } from 'app/store'; import { AppDispatch, AppGetState } from 'app/store/store';
import { activeTabNameSelector } from 'features/ui/store/uiSelectors'; import { activeTabNameSelector } from 'features/ui/store/uiSelectors';
import { debounce } from 'lodash'; import { debounce } from 'lodash-es';
import { setDoesCanvasNeedScaling } from '../canvasSlice'; import { setDoesCanvasNeedScaling } from '../canvasSlice';
const debouncedCanvasScale = debounce((dispatch: AppDispatch) => { const debouncedCanvasScale = debounce((dispatch: AppDispatch) => {

62
invokeai/frontend/web/src/features/gallery/components/CurrentImageButtons.tsx
View File

@ -1,5 +1,5 @@
import { createSelector } from '@reduxjs/toolkit'; import { createSelector } from '@reduxjs/toolkit';
import { isEqual } from 'lodash'; import { isEqual } from 'lodash-es';
import { import {
ButtonGroup, ButtonGroup,
@ -11,7 +11,7 @@ import {
useToast, useToast,
} from '@chakra-ui/react'; } from '@chakra-ui/react';
import { runESRGAN, runFacetool } from 'app/socketio/actions'; import { runESRGAN, runFacetool } from 'app/socketio/actions';
import { useAppDispatch, useAppSelector } from 'app/storeHooks'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import IAIButton from 'common/components/IAIButton'; import IAIButton from 'common/components/IAIButton';
import IAIIconButton from 'common/components/IAIIconButton'; import IAIIconButton from 'common/components/IAIIconButton';
import IAIPopover from 'common/components/IAIPopover'; import IAIPopover from 'common/components/IAIPopover';
@ -163,16 +163,16 @@ const CurrentImageButtons = (props: CurrentImageButtonsProps) => {
const { t } = useTranslation(); const { t } = useTranslation();
const setBothPrompts = useSetBothPrompts(); const setBothPrompts = useSetBothPrompts();
const handleClickUseAsInitialImage = () => { const handleClickUseAsInitialImage = useCallback(() => {
if (!image) return; if (!image) return;
if (isLightboxOpen) dispatch(setIsLightboxOpen(false)); if (isLightboxOpen) dispatch(setIsLightboxOpen(false));
dispatch(initialImageSelected(image.name)); dispatch(initialImageSelected(image.name));
// dispatch(setInitialImage(currentImage)); // dispatch(setInitialImage(currentImage));
// dispatch(setActiveTab('img2img')); // dispatch(setActiveTab('img2img'));
}; }, [dispatch, image, isLightboxOpen]);
const handleCopyImage = async () => { const handleCopyImage = useCallback(async () => {
if (!image?.url) { if (!image?.url) {
return; return;
} }
@ -194,9 +194,9 @@ const CurrentImageButtons = (props: CurrentImageButtonsProps) => {
duration: 2500, duration: 2500,
isClosable: true, isClosable: true,
}); });
}; }, [getUrl, t, image?.url, toast]);
const handleCopyImageLink = () => { const handleCopyImageLink = useCallback(() => {
const url = image const url = image
? shouldTransformUrls ? shouldTransformUrls
? getUrl(image.url) ? getUrl(image.url)
@ -215,7 +215,7 @@ const CurrentImageButtons = (props: CurrentImageButtonsProps) => {
isClosable: true, isClosable: true,
}); });
}); });
}; }, [toast, shouldTransformUrls, getUrl, t, image]);
useHotkeys( useHotkeys(
'shift+i', 'shift+i',
@ -241,11 +241,11 @@ const CurrentImageButtons = (props: CurrentImageButtonsProps) => {
[image] [image]
); );
const handlePreviewVisibility = () => { const handlePreviewVisibility = useCallback(() => {
dispatch(setShouldHidePreview(!shouldHidePreview)); dispatch(setShouldHidePreview(!shouldHidePreview));
}; }, [dispatch, shouldHidePreview]);
const handleClickUseAllParameters = () => { const handleClickUseAllParameters = useCallback(() => {
if (!image) return; if (!image) return;
// selectedImage.metadata && // selectedImage.metadata &&
// dispatch(setAllParameters(selectedImage.metadata)); // dispatch(setAllParameters(selectedImage.metadata));
@ -254,7 +254,7 @@ const CurrentImageButtons = (props: CurrentImageButtonsProps) => {
// } else if (selectedImage.metadata?.image.type === 'txt2img') { // } else if (selectedImage.metadata?.image.type === 'txt2img') {
// dispatch(setActiveTab('txt2img')); // dispatch(setActiveTab('txt2img'));
// } // }
}; }, [image]);
useHotkeys( useHotkeys(
'a', 'a',
@ -338,9 +338,9 @@ const CurrentImageButtons = (props: CurrentImageButtonsProps) => {
[image] [image]
); );
const handleClickUpscale = () => { const handleClickUpscale = useCallback(() => {
// selectedImage && dispatch(runESRGAN(selectedImage)); // selectedImage && dispatch(runESRGAN(selectedImage));
}; }, []);
useHotkeys( useHotkeys(
'Shift+U', 'Shift+U',
@ -369,9 +369,9 @@ const CurrentImageButtons = (props: CurrentImageButtonsProps) => {
] ]
); );
const handleClickFixFaces = () => { const handleClickFixFaces = useCallback(() => {
// selectedImage && dispatch(runFacetool(selectedImage)); // selectedImage && dispatch(runFacetool(selectedImage));
}; }, []);
useHotkeys( useHotkeys(
'Shift+R', 'Shift+R',
@ -401,10 +401,12 @@ const CurrentImageButtons = (props: CurrentImageButtonsProps) => {
] ]
); );
const handleClickShowImageDetails = () => const handleClickShowImageDetails = useCallback(
dispatch(setShouldShowImageDetails(!shouldShowImageDetails)); () => dispatch(setShouldShowImageDetails(!shouldShowImageDetails)),
[dispatch, shouldShowImageDetails]
);
const handleSendToCanvas = () => { const handleSendToCanvas = useCallback(() => {
if (!image) return; if (!image) return;
if (isLightboxOpen) dispatch(setIsLightboxOpen(false)); if (isLightboxOpen) dispatch(setIsLightboxOpen(false));
@ -421,7 +423,7 @@ const CurrentImageButtons = (props: CurrentImageButtonsProps) => {
duration: 2500, duration: 2500,
isClosable: true, isClosable: true,
}); });
}; }, [image, isLightboxOpen, dispatch, activeTabName, toast, t]);
useHotkeys( useHotkeys(
'i', 'i',
@ -440,19 +442,19 @@ const CurrentImageButtons = (props: CurrentImageButtonsProps) => {
[image, shouldShowImageDetails] [image, shouldShowImageDetails]
); );
const handleInitiateDelete = () => { const handleDelete = useCallback(() => {
if (canDeleteImage && image) {
dispatch(imageDeleted({ imageType: image.type, imageName: image.name }));
}
}, [image, canDeleteImage, dispatch]);
const handleInitiateDelete = useCallback(() => {
if (shouldConfirmOnDelete) { if (shouldConfirmOnDelete) {
onDeleteDialogOpen(); onDeleteDialogOpen();
} else { } else {
handleDelete(); handleDelete();
} }
}; }, [shouldConfirmOnDelete, onDeleteDialogOpen, handleDelete]);
const handleDelete = () => {
if (canDeleteImage && image) {
dispatch(imageDeleted({ imageType: image.type, imageName: image.name }));
}
};
useHotkeys('delete', handleInitiateDelete, [ useHotkeys('delete', handleInitiateDelete, [
image, image,
@ -461,9 +463,9 @@ const CurrentImageButtons = (props: CurrentImageButtonsProps) => {
isProcessing, isProcessing,
]); ]);
const handleLightBox = () => { const handleLightBox = useCallback(() => {
dispatch(setIsLightboxOpen(!isLightboxOpen)); dispatch(setIsLightboxOpen(!isLightboxOpen));
}; }, [dispatch, isLightboxOpen]);
return ( return (
<> <>

4
invokeai/frontend/web/src/features/gallery/components/CurrentImageDisplay.tsx
View File

@ -1,8 +1,8 @@
import { Flex, Icon } from '@chakra-ui/react'; import { Flex, Icon } from '@chakra-ui/react';
import { createSelector } from '@reduxjs/toolkit'; import { createSelector } from '@reduxjs/toolkit';
import { useAppSelector } from 'app/storeHooks'; import { useAppSelector } from 'app/store/storeHooks';
import { systemSelector } from 'features/system/store/systemSelectors'; import { systemSelector } from 'features/system/store/systemSelectors';
import { isEqual } from 'lodash'; import { isEqual } from 'lodash-es';
import { MdPhoto } from 'react-icons/md'; import { MdPhoto } from 'react-icons/md';
import { selectedImageSelector } from '../store/gallerySelectors'; import { selectedImageSelector } from '../store/gallerySelectors';

11
invokeai/frontend/web/src/features/gallery/components/CurrentImagePreview.tsx
View File

@ -1,16 +1,17 @@
import { Box, Flex, Image } from '@chakra-ui/react'; import { Box, Flex, Image } from '@chakra-ui/react';
import { createSelector } from '@reduxjs/toolkit'; import { createSelector } from '@reduxjs/toolkit';
import { useAppSelector } from 'app/storeHooks'; import { useAppSelector } from 'app/store/storeHooks';
import { useGetUrl } from 'common/util/getUrl'; import { useGetUrl } from 'common/util/getUrl';
import { systemSelector } from 'features/system/store/systemSelectors'; import { systemSelector } from 'features/system/store/systemSelectors';
import { uiSelector } from 'features/ui/store/uiSelectors'; import { uiSelector } from 'features/ui/store/uiSelectors';
import { isEqual } from 'lodash'; import { isEqual } from 'lodash-es';
import { selectedImageSelector } from '../store/gallerySelectors'; import { selectedImageSelector } from '../store/gallerySelectors';
import CurrentImageFallback from './CurrentImageFallback'; import CurrentImageFallback from './CurrentImageFallback';
import ImageMetadataViewer from './ImageMetaDataViewer/ImageMetadataViewer'; import ImageMetadataViewer from './ImageMetaDataViewer/ImageMetadataViewer';
import NextPrevImageButtons from './NextPrevImageButtons'; import NextPrevImageButtons from './NextPrevImageButtons';
import CurrentImageHidden from './CurrentImageHidden'; import CurrentImageHidden from './CurrentImageHidden';
import { memo } from 'react';
export const imagesSelector = createSelector( export const imagesSelector = createSelector(
[uiSelector, selectedImageSelector, systemSelector], [uiSelector, selectedImageSelector, systemSelector],
@ -50,7 +51,7 @@ export const imagesSelector = createSelector(
} }
); );
export default function CurrentImagePreview() { const CurrentImagePreview = () => {
const { shouldShowImageDetails, imageToDisplay, shouldHidePreview } = const { shouldShowImageDetails, imageToDisplay, shouldHidePreview } =
useAppSelector(imagesSelector); useAppSelector(imagesSelector);
const { getUrl } = useGetUrl(); const { getUrl } = useGetUrl();
@ -115,4 +116,6 @@ export default function CurrentImagePreview() {
)} )}
</Flex> </Flex>
); );
} };
export default memo(CurrentImagePreview);

4
invokeai/frontend/web/src/features/gallery/components/DeleteImageModal.tsx
View File

@ -9,13 +9,13 @@ import {
Text, Text,
} from '@chakra-ui/react'; } from '@chakra-ui/react';
import { createSelector } from '@reduxjs/toolkit'; import { createSelector } from '@reduxjs/toolkit';
import { useAppDispatch, useAppSelector } from 'app/storeHooks'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import IAIButton from 'common/components/IAIButton'; import IAIButton from 'common/components/IAIButton';
import IAISwitch from 'common/components/IAISwitch'; import IAISwitch from 'common/components/IAISwitch';
import { configSelector } from 'features/system/store/configSelectors'; import { configSelector } from 'features/system/store/configSelectors';
import { systemSelector } from 'features/system/store/systemSelectors'; import { systemSelector } from 'features/system/store/systemSelectors';
import { setShouldConfirmOnDelete } from 'features/system/store/systemSlice'; import { setShouldConfirmOnDelete } from 'features/system/store/systemSlice';
import { isEqual } from 'lodash'; import { isEqual } from 'lodash-es';
import { ChangeEvent, memo, useCallback, useRef } from 'react'; import { ChangeEvent, memo, useCallback, useRef } from 'react';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';

81
invokeai/frontend/web/src/features/gallery/components/HoverableImage.tsx
View File

@ -10,7 +10,7 @@ import {
useTheme, useTheme,
useToast, useToast,
} from '@chakra-ui/react'; } from '@chakra-ui/react';
import { useAppDispatch, useAppSelector } from 'app/storeHooks'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import { import {
imageSelected, imageSelected,
setCurrentImage, setCurrentImage,
@ -32,7 +32,7 @@ import {
} from 'react-icons/fa'; } from 'react-icons/fa';
import DeleteImageModal from './DeleteImageModal'; import DeleteImageModal from './DeleteImageModal';
import { ContextMenu } from 'chakra-ui-contextmenu'; import { ContextMenu } from 'chakra-ui-contextmenu';
import * as InvokeAI from 'app/invokeai'; import * as InvokeAI from 'app/types/invokeai';
import { import {
resizeAndScaleCanvas, resizeAndScaleCanvas,
setInitialCanvasImage, setInitialCanvasImage,
@ -53,7 +53,7 @@ import { systemSelector } from 'features/system/store/systemSelectors';
import { configSelector } from 'features/system/store/configSelectors'; import { configSelector } from 'features/system/store/configSelectors';
import { lightboxSelector } from 'features/lightbox/store/lightboxSelectors'; import { lightboxSelector } from 'features/lightbox/store/lightboxSelectors';
import { activeTabNameSelector } from 'features/ui/store/uiSelectors'; import { activeTabNameSelector } from 'features/ui/store/uiSelectors';
import { isEqual } from 'lodash'; import { isEqual } from 'lodash-es';
export const selector = createSelector( export const selector = createSelector(
[ [
@ -151,8 +151,8 @@ const HoverableImage = memo((props: HoverableImageProps) => {
}; };
const handleUsePrompt = () => { const handleUsePrompt = () => {
if (image.metadata?.sd_metadata?.prompt) { if (typeof image.metadata?.invokeai?.node?.prompt === 'string') {
setBothPrompts(image.metadata?.sd_metadata?.prompt); setBothPrompts(image.metadata?.invokeai?.node?.prompt);
} }
toast({ toast({
title: t('toast.promptSet'), title: t('toast.promptSet'),
@ -163,8 +163,8 @@ const HoverableImage = memo((props: HoverableImageProps) => {
}; };
const handleUseSeed = () => { const handleUseSeed = () => {
image.metadata.sd_metadata && typeof image.metadata.invokeai?.node?.seed === 'number' &&
dispatch(setSeed(image.metadata.sd_metadata.image.seed)); dispatch(setSeed(image.metadata.invokeai?.node?.seed));
toast({ toast({
title: t('toast.seedSet'), title: t('toast.seedSet'),
status: 'success', status: 'success',
@ -195,38 +195,39 @@ const HoverableImage = memo((props: HoverableImageProps) => {
}; };
const handleUseAllParameters = () => { const handleUseAllParameters = () => {
metadata.sd_metadata && dispatch(setAllParameters(metadata.sd_metadata)); // metadata.invokeai?.node &&
toast({ // dispatch(setAllParameters(metadata.invokeai?.node));
title: t('toast.parametersSet'), // toast({
status: 'success', // title: t('toast.parametersSet'),
duration: 2500, // status: 'success',
isClosable: true, // duration: 2500,
}); // isClosable: true,
// });
}; };
const handleUseInitialImage = async () => { const handleUseInitialImage = async () => {
if (metadata.sd_metadata?.image?.init_image_path) { // if (metadata.invokeai?.node?.image?.init_image_path) {
const response = await fetch( // const response = await fetch(
metadata.sd_metadata?.image?.init_image_path // metadata.invokeai?.node?.image?.init_image_path
); // );
if (response.ok) { // if (response.ok) {
dispatch(setAllImageToImageParameters(metadata?.sd_metadata)); // dispatch(setAllImageToImageParameters(metadata?.invokeai?.node));
toast({ // toast({
title: t('toast.initialImageSet'), // title: t('toast.initialImageSet'),
status: 'success', // status: 'success',
duration: 2500, // duration: 2500,
isClosable: true, // isClosable: true,
}); // });
return; // return;
} // }
} // }
toast({ // toast({
title: t('toast.initialImageNotSet'), // title: t('toast.initialImageNotSet'),
description: t('toast.initialImageNotSetDesc'), // description: t('toast.initialImageNotSetDesc'),
status: 'error', // status: 'error',
duration: 2500, // duration: 2500,
isClosable: true, // isClosable: true,
}); // });
}; };
const handleSelectImage = () => { const handleSelectImage = () => {
@ -268,7 +269,7 @@ const HoverableImage = memo((props: HoverableImageProps) => {
<MenuItem <MenuItem
icon={<IoArrowUndoCircleOutline />} icon={<IoArrowUndoCircleOutline />}
onClickCapture={handleUsePrompt} onClickCapture={handleUsePrompt}
isDisabled={image?.metadata?.sd_metadata?.prompt === undefined} isDisabled={image?.metadata?.invokeai?.node?.prompt === undefined}
> >
{t('parameters.usePrompt')} {t('parameters.usePrompt')}
</MenuItem> </MenuItem>
@ -276,14 +277,14 @@ const HoverableImage = memo((props: HoverableImageProps) => {
<MenuItem <MenuItem
icon={<IoArrowUndoCircleOutline />} icon={<IoArrowUndoCircleOutline />}
onClickCapture={handleUseSeed} onClickCapture={handleUseSeed}
isDisabled={image?.metadata?.sd_metadata?.seed === undefined} isDisabled={image?.metadata?.invokeai?.node?.seed === undefined}
> >
{t('parameters.useSeed')} {t('parameters.useSeed')}
</MenuItem> </MenuItem>
<MenuItem <MenuItem
icon={<IoArrowUndoCircleOutline />} icon={<IoArrowUndoCircleOutline />}
onClickCapture={handleUseInitialImage} onClickCapture={handleUseInitialImage}
isDisabled={image?.metadata?.sd_metadata?.type !== 'img2img'} isDisabled={image?.metadata?.invokeai?.node?.type !== 'img2img'}
> >
{t('parameters.useInitImg')} {t('parameters.useInitImg')}
</MenuItem> </MenuItem>
@ -292,7 +293,7 @@ const HoverableImage = memo((props: HoverableImageProps) => {
onClickCapture={handleUseAllParameters} onClickCapture={handleUseAllParameters}
isDisabled={ isDisabled={
!['txt2img', 'img2img'].includes( !['txt2img', 'img2img'].includes(
image?.metadata?.sd_metadata?.type String(image?.metadata?.invokeai?.node?.type)
) )
} }
> >

4
invokeai/frontend/web/src/features/gallery/components/ImageGallery.tsx
View File

@ -10,7 +10,7 @@
// useTheme, // useTheme,
// } from '@chakra-ui/react'; // } from '@chakra-ui/react';
// import { requestImages } from 'app/socketio/actions'; // import { requestImages } from 'app/socketio/actions';
// import { useAppDispatch, useAppSelector } from 'app/storeHooks'; // import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
// import IAIButton from 'common/components/IAIButton'; // import IAIButton from 'common/components/IAIButton';
// import IAICheckbox from 'common/components/IAICheckbox'; // import IAICheckbox from 'common/components/IAICheckbox';
// import IAIIconButton from 'common/components/IAIIconButton'; // import IAIIconButton from 'common/components/IAIIconButton';
@ -35,7 +35,7 @@
// } from 'features/ui/store/uiSlice'; // } from 'features/ui/store/uiSlice';
// import { InvokeTabName } from 'features/ui/store/tabMap'; // import { InvokeTabName } from 'features/ui/store/tabMap';
// import { clamp } from 'lodash'; // import { clamp } from 'lodash-es';
// import { Direction } from 're-resizable/lib/resizer'; // import { Direction } from 're-resizable/lib/resizer';
// import React, { // import React, {
// ChangeEvent, // ChangeEvent,

4
invokeai/frontend/web/src/features/gallery/components/ImageGalleryContent.tsx
View File

@ -1,6 +1,6 @@
import { ButtonGroup, Flex, Grid, Icon, Image, Text } from '@chakra-ui/react'; import { ButtonGroup, Flex, Grid, Icon, Image, Text } from '@chakra-ui/react';
import { requestImages } from 'app/socketio/actions'; import { requestImages } from 'app/socketio/actions';
import { useAppDispatch, useAppSelector } from 'app/storeHooks'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import IAIButton from 'common/components/IAIButton'; import IAIButton from 'common/components/IAIButton';
import IAICheckbox from 'common/components/IAICheckbox'; import IAICheckbox from 'common/components/IAICheckbox';
import IAIIconButton from 'common/components/IAIIconButton'; import IAIIconButton from 'common/components/IAIIconButton';
@ -36,7 +36,7 @@ import {
} from 'services/thunks/gallery'; } from 'services/thunks/gallery';
import { selectUploadsAll, uploadsAdapter } from '../store/uploadsSlice'; import { selectUploadsAll, uploadsAdapter } from '../store/uploadsSlice';
import { createSelector } from '@reduxjs/toolkit'; import { createSelector } from '@reduxjs/toolkit';
import { RootState } from 'app/store'; import { RootState } from 'app/store/store';
const GALLERY_SHOW_BUTTONS_MIN_WIDTH = 290; const GALLERY_SHOW_BUTTONS_MIN_WIDTH = 290;

11
invokeai/frontend/web/src/features/gallery/components/ImageGalleryPanel.tsx
View File

@ -1,4 +1,4 @@
import { useAppDispatch, useAppSelector } from 'app/storeHooks'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import { gallerySelector } from 'features/gallery/store/gallerySelectors'; import { gallerySelector } from 'features/gallery/store/gallerySelectors';
import { import {
selectNextImage, selectNextImage,
@ -7,7 +7,7 @@ import {
} from 'features/gallery/store/gallerySlice'; } from 'features/gallery/store/gallerySlice';
import { InvokeTabName } from 'features/ui/store/tabMap'; import { InvokeTabName } from 'features/ui/store/tabMap';
import { clamp, isEqual } from 'lodash'; import { clamp, isEqual } from 'lodash-es';
import { useHotkeys } from 'react-hotkeys-hook'; import { useHotkeys } from 'react-hotkeys-hook';
import './ImageGallery.css'; import './ImageGallery.css';
@ -28,6 +28,7 @@ import { requestCanvasRescale } from 'features/canvas/store/thunks/requestCanvas
import { lightboxSelector } from 'features/lightbox/store/lightboxSelectors'; import { lightboxSelector } from 'features/lightbox/store/lightboxSelectors';
import useResolution from 'common/hooks/useResolution'; import useResolution from 'common/hooks/useResolution';
import { Flex } from '@chakra-ui/react'; import { Flex } from '@chakra-ui/react';
import { memo } from 'react';
const GALLERY_TAB_WIDTHS: Record< const GALLERY_TAB_WIDTHS: Record<
InvokeTabName, InvokeTabName,
@ -72,7 +73,7 @@ const galleryPanelSelector = createSelector(
} }
); );
export default function ImageGalleryPanel() { export const ImageGalleryPanel = () => {
const dispatch = useAppDispatch(); const dispatch = useAppDispatch();
const { const {
shouldPinGallery, shouldPinGallery,
@ -232,4 +233,6 @@ export default function ImageGalleryPanel() {
}; };
return renderImageGallery(); return renderImageGallery();
} };
export default memo(ImageGalleryPanel);

4
invokeai/frontend/web/src/features/gallery/components/ImageMetaDataViewer/ImageMetadataViewer.tsx
View File

@ -9,8 +9,8 @@ import {
Text, Text,
Tooltip, Tooltip,
} from '@chakra-ui/react'; } from '@chakra-ui/react';
import * as InvokeAI from 'app/invokeai'; import * as InvokeAI from 'app/types/invokeai';
import { useAppDispatch } from 'app/storeHooks'; import { useAppDispatch } from 'app/store/storeHooks';
import { useGetUrl } from 'common/util/getUrl'; import { useGetUrl } from 'common/util/getUrl';
import promptToString from 'common/util/promptToString'; import promptToString from 'common/util/promptToString';
import { seedWeightsToString } from 'common/util/seedWeightPairs'; import { seedWeightsToString } from 'common/util/seedWeightPairs';

4
invokeai/frontend/web/src/features/gallery/components/ImageMetaDataViewer/OLD_ImageMetadataViewer.tsx
View File

@ -9,8 +9,8 @@ import {
Text, Text,
Tooltip, Tooltip,
} from '@chakra-ui/react'; } from '@chakra-ui/react';
import * as InvokeAI from 'app/invokeai'; import * as InvokeAI from 'app/types/invokeai';
import { useAppDispatch } from 'app/storeHooks'; import { useAppDispatch } from 'app/store/storeHooks';
import { useGetUrl } from 'common/util/getUrl'; import { useGetUrl } from 'common/util/getUrl';
import promptToString from 'common/util/promptToString'; import promptToString from 'common/util/promptToString';
import { seedWeightsToString } from 'common/util/seedWeightPairs'; import { seedWeightsToString } from 'common/util/seedWeightPairs';

4
invokeai/frontend/web/src/features/gallery/components/NextPrevImageButtons.tsx
View File

@ -1,7 +1,7 @@
import { ChakraProps, Flex, Grid, IconButton } from '@chakra-ui/react'; import { ChakraProps, Flex, Grid, IconButton } from '@chakra-ui/react';
import { createSelector } from '@reduxjs/toolkit'; import { createSelector } from '@reduxjs/toolkit';
import { useAppDispatch, useAppSelector } from 'app/storeHooks'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import { isEqual } from 'lodash'; import { isEqual } from 'lodash-es';
import { useState } from 'react'; import { useState } from 'react';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { FaAngleLeft, FaAngleRight } from 'react-icons/fa'; import { FaAngleLeft, FaAngleRight } from 'react-icons/fa';

2
invokeai/frontend/web/src/features/gallery/hooks/useGetImageByName.ts
View File

@ -1,5 +1,5 @@
import { createSelector } from '@reduxjs/toolkit'; import { createSelector } from '@reduxjs/toolkit';
import { useAppSelector } from 'app/storeHooks'; import { useAppSelector } from 'app/store/storeHooks';
import { ImageType } from 'services/api'; import { ImageType } from 'services/api';
import { selectResultsEntities } from '../store/resultsSlice'; import { selectResultsEntities } from '../store/resultsSlice';
import { selectUploadsEntities } from '../store/uploadsSlice'; import { selectUploadsEntities } from '../store/uploadsSlice';

2
invokeai/frontend/web/src/features/gallery/hooks/useGetImageByUuid.ts
View File

@ -1,5 +1,5 @@
import { createSelector } from '@reduxjs/toolkit'; import { createSelector } from '@reduxjs/toolkit';
import { useAppSelector } from 'app/storeHooks'; import { useAppSelector } from 'app/store/storeHooks';
import { gallerySelector } from '../store/gallerySelectors'; import { gallerySelector } from '../store/gallerySelectors';
const selector = createSelector(gallerySelector, (gallery) => ({ const selector = createSelector(gallerySelector, (gallery) => ({

4
invokeai/frontend/web/src/features/gallery/store/gallerySelectors.ts
View File

@ -1,5 +1,5 @@
import { createSelector } from '@reduxjs/toolkit'; import { createSelector } from '@reduxjs/toolkit';
import { RootState } from 'app/store'; import { RootState } from 'app/store/store';
import { lightboxSelector } from 'features/lightbox/store/lightboxSelectors'; import { lightboxSelector } from 'features/lightbox/store/lightboxSelectors';
import { configSelector } from 'features/system/store/configSelectors'; import { configSelector } from 'features/system/store/configSelectors';
import { systemSelector } from 'features/system/store/systemSelectors'; import { systemSelector } from 'features/system/store/systemSelectors';
@ -7,7 +7,7 @@ import {
activeTabNameSelector, activeTabNameSelector,
uiSelector, uiSelector,
} from 'features/ui/store/uiSelectors'; } from 'features/ui/store/uiSelectors';
import { isEqual } from 'lodash'; import { isEqual } from 'lodash-es';
import { import {
selectResultsAll, selectResultsAll,
selectResultsById, selectResultsById,

4
invokeai/frontend/web/src/features/gallery/store/gallerySlice.ts
View File

@ -1,10 +1,10 @@
import type { PayloadAction } from '@reduxjs/toolkit'; import type { PayloadAction } from '@reduxjs/toolkit';
import { createSlice } from '@reduxjs/toolkit'; import { createSlice } from '@reduxjs/toolkit';
import * as InvokeAI from 'app/invokeai'; import * as InvokeAI from 'app/types/invokeai';
import { invocationComplete } from 'services/events/actions'; import { invocationComplete } from 'services/events/actions';
import { InvokeTabName } from 'features/ui/store/tabMap'; import { InvokeTabName } from 'features/ui/store/tabMap';
import { IRect } from 'konva/lib/types'; import { IRect } from 'konva/lib/types';
import { clamp } from 'lodash'; import { clamp } from 'lodash-es';
import { isImageOutput } from 'services/types/guards'; import { isImageOutput } from 'services/types/guards';
import { deserializeImageResponse } from 'services/util/deserializeImageResponse'; import { deserializeImageResponse } from 'services/util/deserializeImageResponse';
import { imageUploaded } from 'services/thunks/image'; import { imageUploaded } from 'services/thunks/image';

4
invokeai/frontend/web/src/features/gallery/store/resultsSlice.ts
View File

@ -1,8 +1,8 @@
import { createEntityAdapter, createSlice } from '@reduxjs/toolkit'; import { createEntityAdapter, createSlice } from '@reduxjs/toolkit';
import { Image } from 'app/invokeai'; import { Image } from 'app/types/invokeai';
import { invocationComplete } from 'services/events/actions'; import { invocationComplete } from 'services/events/actions';
import { RootState } from 'app/store'; import { RootState } from 'app/store/store';
import { import {
receivedResultImagesPage, receivedResultImagesPage,
IMAGES_PER_PAGE, IMAGES_PER_PAGE,

4
invokeai/frontend/web/src/features/gallery/store/uploadsSlice.ts
View File

@ -1,7 +1,7 @@
import { createEntityAdapter, createSlice } from '@reduxjs/toolkit'; import { createEntityAdapter, createSlice } from '@reduxjs/toolkit';
import { Image } from 'app/invokeai'; import { Image } from 'app/types/invokeai';
import { RootState } from 'app/store'; import { RootState } from 'app/store/store';
import { import {
receivedUploadImagesPage, receivedUploadImagesPage,
IMAGES_PER_PAGE, IMAGES_PER_PAGE,

6
invokeai/frontend/web/src/features/lightbox/components/Lightbox.tsx
View File

@ -1,7 +1,7 @@
import { Box, Flex } from '@chakra-ui/react'; import { Box, Flex } from '@chakra-ui/react';
import { createSelector } from '@reduxjs/toolkit'; import { createSelector } from '@reduxjs/toolkit';
import { RootState } from 'app/store'; import { RootState } from 'app/store/store';
import { useAppDispatch, useAppSelector } from 'app/storeHooks'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import IAIIconButton from 'common/components/IAIIconButton'; import IAIIconButton from 'common/components/IAIIconButton';
import CurrentImageButtons from 'features/gallery/components/CurrentImageButtons'; import CurrentImageButtons from 'features/gallery/components/CurrentImageButtons';
import ImageMetadataViewer from 'features/gallery/components/ImageMetaDataViewer/ImageMetadataViewer'; import ImageMetadataViewer from 'features/gallery/components/ImageMetaDataViewer/ImageMetadataViewer';
@ -10,7 +10,7 @@ import { gallerySelector } from 'features/gallery/store/gallerySelectors';
import { setIsLightboxOpen } from 'features/lightbox/store/lightboxSlice'; import { setIsLightboxOpen } from 'features/lightbox/store/lightboxSlice';
import { uiSelector } from 'features/ui/store/uiSelectors'; import { uiSelector } from 'features/ui/store/uiSelectors';
import { AnimatePresence, motion } from 'framer-motion'; import { AnimatePresence, motion } from 'framer-motion';
import { isEqual } from 'lodash'; import { isEqual } from 'lodash-es';
import { useHotkeys } from 'react-hotkeys-hook'; import { useHotkeys } from 'react-hotkeys-hook';
import { BiExit } from 'react-icons/bi'; import { BiExit } from 'react-icons/bi';
import { TransformWrapper } from 'react-zoom-pan-pinch'; import { TransformWrapper } from 'react-zoom-pan-pinch';

2
invokeai/frontend/web/src/features/lightbox/components/ReactPanZoomImage.tsx
View File

@ -1,6 +1,6 @@
import * as React from 'react'; import * as React from 'react';
import { TransformComponent, useTransformContext } from 'react-zoom-pan-pinch'; import { TransformComponent, useTransformContext } from 'react-zoom-pan-pinch';
import * as InvokeAI from 'app/invokeai'; import * as InvokeAI from 'app/types/invokeai';
import { useGetUrl } from 'common/util/getUrl'; import { useGetUrl } from 'common/util/getUrl';
type ReactPanZoomProps = { type ReactPanZoomProps = {

4
invokeai/frontend/web/src/features/lightbox/store/lightboxSelectors.ts
View File

@ -1,6 +1,6 @@
import { createSelector } from '@reduxjs/toolkit'; import { createSelector } from '@reduxjs/toolkit';
import { RootState } from 'app/store'; import { RootState } from 'app/store/store';
import { isEqual } from 'lodash'; import { isEqual } from 'lodash-es';
export const lightboxSelector = createSelector( export const lightboxSelector = createSelector(
(state: RootState) => state.lightbox, (state: RootState) => state.lightbox,

8
invokeai/frontend/web/src/features/nodes/components/AddNodeMenu.tsx
View File

@ -11,15 +11,15 @@ import {
IconButton, IconButton,
} from '@chakra-ui/react'; } from '@chakra-ui/react';
import { FaEllipsisV, FaPlus } from 'react-icons/fa'; import { FaEllipsisV, FaPlus } from 'react-icons/fa';
import { useAppDispatch, useAppSelector } from 'app/storeHooks'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import { nodeAdded } from '../store/nodesSlice'; import { nodeAdded } from '../store/nodesSlice';
import { cloneDeep, map } from 'lodash'; import { cloneDeep, map } from 'lodash-es';
import { RootState } from 'app/store'; import { RootState } from 'app/store/store';
import { useBuildInvocation } from '../hooks/useBuildInvocation'; import { useBuildInvocation } from '../hooks/useBuildInvocation';
import { addToast } from 'features/system/store/systemSlice'; import { addToast } from 'features/system/store/systemSlice';
import { makeToast } from 'features/system/hooks/useToastWatcher'; import { makeToast } from 'features/system/hooks/useToastWatcher';
import { IAIIconButton } from 'exports';
import { AnyInvocationType } from 'services/events/types'; import { AnyInvocationType } from 'services/events/types';
import IAIIconButton from 'common/components/IAIIconButton';
const AddNodeMenu = () => { const AddNodeMenu = () => {
const dispatch = useAppDispatch(); const dispatch = useAppDispatch();

2
invokeai/frontend/web/src/features/nodes/components/FieldTypeLegend.tsx
View File

@ -1,6 +1,6 @@
import 'reactflow/dist/style.css'; import 'reactflow/dist/style.css';
import { Tooltip, Badge, Flex } from '@chakra-ui/react'; import { Tooltip, Badge, Flex } from '@chakra-ui/react';
import { map } from 'lodash'; import { map } from 'lodash-es';
import { FIELDS } from '../types/constants'; import { FIELDS } from '../types/constants';
import { memo } from 'react'; import { memo } from 'react';

4
invokeai/frontend/web/src/features/nodes/components/Flow.tsx
View File

@ -7,8 +7,8 @@ import {
OnConnectStart, OnConnectStart,
OnConnectEnd, OnConnectEnd,
} from 'reactflow'; } from 'reactflow';
import { useAppDispatch, useAppSelector } from 'app/storeHooks'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import { RootState } from 'app/store'; import { RootState } from 'app/store/store';
import { import {
connectionEnded, connectionEnded,
connectionMade, connectionMade,

6
invokeai/frontend/web/src/features/nodes/components/IAINode/IAINodeInputs.tsx
View File

@ -4,9 +4,9 @@ import {
InvocationTemplate, InvocationTemplate,
} from 'features/nodes/types/types'; } from 'features/nodes/types/types';
import { memo, ReactNode, useCallback } from 'react'; import { memo, ReactNode, useCallback } from 'react';
import { map } from 'lodash'; import { map } from 'lodash-es';
import { useAppSelector } from 'app/storeHooks'; import { useAppSelector } from 'app/store/storeHooks';
import { RootState } from 'app/store'; import { RootState } from 'app/store/store';
import { import {
Box, Box,
Flex, Flex,

6
invokeai/frontend/web/src/features/nodes/components/IAINode/IAINodeOutputs.tsx
View File

@ -4,9 +4,9 @@ import {
OutputFieldValue, OutputFieldValue,
} from 'features/nodes/types/types'; } from 'features/nodes/types/types';
import { memo, ReactNode, useCallback } from 'react'; import { memo, ReactNode, useCallback } from 'react';
import { map } from 'lodash'; import { map } from 'lodash-es';
import { useAppSelector } from 'app/storeHooks'; import { useAppSelector } from 'app/store/storeHooks';
import { RootState } from 'app/store'; import { RootState } from 'app/store/store';
import { Box, Flex, FormControl, FormLabel, HStack } from '@chakra-ui/react'; import { Box, Flex, FormControl, FormLabel, HStack } from '@chakra-ui/react';
import FieldHandle from '../FieldHandle'; import FieldHandle from '../FieldHandle';
import { useIsValidConnection } from 'features/nodes/hooks/useIsValidConnection'; import { useIsValidConnection } from 'features/nodes/hooks/useIsValidConnection';

4
invokeai/frontend/web/src/features/nodes/components/InvocationComponent.tsx
View File

@ -8,10 +8,10 @@ import IAINodeOutputs from './IAINode/IAINodeOutputs';
import IAINodeInputs from './IAINode/IAINodeInputs'; import IAINodeInputs from './IAINode/IAINodeInputs';
import IAINodeHeader from './IAINode/IAINodeHeader'; import IAINodeHeader from './IAINode/IAINodeHeader';
import IAINodeResizer from './IAINode/IAINodeResizer'; import IAINodeResizer from './IAINode/IAINodeResizer';
import { RootState } from 'app/store'; import { RootState } from 'app/store/store';
import { AnyInvocationType } from 'services/events/types'; import { AnyInvocationType } from 'services/events/types';
import { createSelector } from '@reduxjs/toolkit'; import { createSelector } from '@reduxjs/toolkit';
import { useAppSelector } from 'app/storeHooks'; import { useAppSelector } from 'app/store/storeHooks';
import { NODE_MIN_WIDTH } from 'app/constants'; import { NODE_MIN_WIDTH } from 'app/constants';
type InvocationComponentWrapperProps = PropsWithChildren & { type InvocationComponentWrapperProps = PropsWithChildren & {

4
invokeai/frontend/web/src/features/nodes/components/NodeGraphOverlay.tsx
View File

@ -1,6 +1,6 @@
import { Box } from '@chakra-ui/react'; import { Box } from '@chakra-ui/react';
import { RootState } from 'app/store'; import { RootState } from 'app/store/store';
import { useAppSelector } from 'app/storeHooks'; import { useAppSelector } from 'app/store/storeHooks';
import { memo } from 'react'; import { memo } from 'react';
import { buildNodesGraph } from '../util/nodesGraphBuilder/buildNodesGraph'; import { buildNodesGraph } from '../util/nodesGraphBuilder/buildNodesGraph';

4
invokeai/frontend/web/src/features/nodes/components/ViewportControls.tsx
View File

@ -1,6 +1,6 @@
import { ButtonGroup } from '@chakra-ui/react'; import { ButtonGroup } from '@chakra-ui/react';
import { useAppDispatch, useAppSelector } from 'app/storeHooks'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import { IAIIconButton } from 'exports'; import IAIIconButton from 'common/components/IAIIconButton';
import { memo, useCallback } from 'react'; import { memo, useCallback } from 'react';
import { FaCode, FaExpand, FaMinus, FaPlus } from 'react-icons/fa'; import { FaCode, FaExpand, FaMinus, FaPlus } from 'react-icons/fa';
import { useReactFlow } from 'reactflow'; import { useReactFlow } from 'reactflow';

2
invokeai/frontend/web/src/features/nodes/components/fields/BooleanInputFieldComponent.tsx
View File

@ -1,5 +1,5 @@
import { Switch } from '@chakra-ui/react'; import { Switch } from '@chakra-ui/react';
import { useAppDispatch } from 'app/storeHooks'; import { useAppDispatch } from 'app/store/storeHooks';
import { fieldValueChanged } from 'features/nodes/store/nodesSlice'; import { fieldValueChanged } from 'features/nodes/store/nodesSlice';
import { import {
BooleanInputFieldTemplate, BooleanInputFieldTemplate,

2
invokeai/frontend/web/src/features/nodes/components/fields/EnumInputFieldComponent.tsx
View File

@ -1,5 +1,5 @@
import { Select } from '@chakra-ui/react'; import { Select } from '@chakra-ui/react';
import { useAppDispatch } from 'app/storeHooks'; import { useAppDispatch } from 'app/store/storeHooks';
import { fieldValueChanged } from 'features/nodes/store/nodesSlice'; import { fieldValueChanged } from 'features/nodes/store/nodesSlice';
import { import {
EnumInputFieldTemplate, EnumInputFieldTemplate,

2
invokeai/frontend/web/src/features/nodes/components/fields/ImageInputFieldComponent.tsx
View File

@ -1,5 +1,5 @@
import { Box, Image, Icon, Flex } from '@chakra-ui/react'; import { Box, Image, Icon, Flex } from '@chakra-ui/react';
import { useAppDispatch } from 'app/storeHooks'; import { useAppDispatch } from 'app/store/storeHooks';
import SelectImagePlaceholder from 'common/components/SelectImagePlaceholder'; import SelectImagePlaceholder from 'common/components/SelectImagePlaceholder';
import { useGetUrl } from 'common/util/getUrl'; import { useGetUrl } from 'common/util/getUrl';
import useGetImageByNameAndType from 'features/gallery/hooks/useGetImageByName'; import useGetImageByNameAndType from 'features/gallery/hooks/useGetImageByName';

6
invokeai/frontend/web/src/features/nodes/components/fields/ModelInputFieldComponent.tsx
View File

@ -1,7 +1,7 @@
import { Select } from '@chakra-ui/react'; import { Select } from '@chakra-ui/react';
import { createSelector } from '@reduxjs/toolkit'; import { createSelector } from '@reduxjs/toolkit';
import { RootState } from 'app/store'; import { RootState } from 'app/store/store';
import { useAppDispatch, useAppSelector } from 'app/storeHooks'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import { fieldValueChanged } from 'features/nodes/store/nodesSlice'; import { fieldValueChanged } from 'features/nodes/store/nodesSlice';
import { import {
ModelInputFieldTemplate, ModelInputFieldTemplate,
@ -11,7 +11,7 @@ import {
selectModelsById, selectModelsById,
selectModelsIds, selectModelsIds,
} from 'features/system/store/modelSlice'; } from 'features/system/store/modelSlice';
import { isEqual, map } from 'lodash'; import { isEqual, map } from 'lodash-es';
import { ChangeEvent, memo } from 'react'; import { ChangeEvent, memo } from 'react';
import { FieldComponentProps } from './types'; import { FieldComponentProps } from './types';

Some files were not shown because too many files have changed in this diff Show More