chore(ui): clean up unused files/packages
@ -89,18 +89,13 @@
|
|||||||
"react-i18next": "^12.2.2",
|
"react-i18next": "^12.2.2",
|
||||||
"react-icons": "^4.7.1",
|
"react-icons": "^4.7.1",
|
||||||
"react-konva": "^18.2.7",
|
"react-konva": "^18.2.7",
|
||||||
"react-konva-utils": "^1.0.4",
|
|
||||||
"react-redux": "^8.0.5",
|
"react-redux": "^8.0.5",
|
||||||
"react-resizable-panels": "^0.0.42",
|
"react-resizable-panels": "^0.0.42",
|
||||||
"react-rnd": "^10.4.1",
|
|
||||||
"react-transition-group": "^4.4.5",
|
|
||||||
"react-use": "^17.4.0",
|
"react-use": "^17.4.0",
|
||||||
"react-virtuoso": "^4.3.5",
|
"react-virtuoso": "^4.3.5",
|
||||||
"react-zoom-pan-pinch": "^3.0.7",
|
"react-zoom-pan-pinch": "^3.0.7",
|
||||||
"reactflow": "^11.7.0",
|
"reactflow": "^11.7.0",
|
||||||
"redux-deep-persist": "^1.0.7",
|
|
||||||
"redux-dynamic-middlewares": "^2.2.0",
|
"redux-dynamic-middlewares": "^2.2.0",
|
||||||
"redux-persist": "^6.0.0",
|
|
||||||
"redux-remember": "^3.3.1",
|
"redux-remember": "^3.3.1",
|
||||||
"roarr": "^7.15.0",
|
"roarr": "^7.15.0",
|
||||||
"serialize-error": "^11.0.0",
|
"serialize-error": "^11.0.0",
|
||||||
|
@ -1,24 +0,0 @@
|
|||||||
diff --git a/node_modules/redux-deep-persist/lib/types.d.ts b/node_modules/redux-deep-persist/lib/types.d.ts
|
|
||||||
index b67b8c2..7fc0fa1 100644
|
|
||||||
--- a/node_modules/redux-deep-persist/lib/types.d.ts
|
|
||||||
+++ b/node_modules/redux-deep-persist/lib/types.d.ts
|
|
||||||
@@ -35,6 +35,7 @@ export interface PersistConfig<S, RS = any, HSS = any, ESS = any> {
|
|
||||||
whitelist?: Array<string>;
|
|
||||||
transforms?: Array<Transform<HSS, ESS, S, RS>>;
|
|
||||||
throttle?: number;
|
|
||||||
+ debounce?: number;
|
|
||||||
migrate?: PersistMigrate;
|
|
||||||
stateReconciler?: false | StateReconciler<S>;
|
|
||||||
getStoredState?: (config: PersistConfig<S, RS, HSS, ESS>) => Promise<PersistedState>;
|
|
||||||
diff --git a/node_modules/redux-deep-persist/src/types.ts b/node_modules/redux-deep-persist/src/types.ts
|
|
||||||
index 398ac19..cbc5663 100644
|
|
||||||
--- a/node_modules/redux-deep-persist/src/types.ts
|
|
||||||
+++ b/node_modules/redux-deep-persist/src/types.ts
|
|
||||||
@@ -91,6 +91,7 @@ export interface PersistConfig<S, RS = any, HSS = any, ESS = any> {
|
|
||||||
whitelist?: Array<string>;
|
|
||||||
transforms?: Array<Transform<HSS, ESS, S, RS>>;
|
|
||||||
throttle?: number;
|
|
||||||
+ debounce?: number;
|
|
||||||
migrate?: PersistMigrate;
|
|
||||||
stateReconciler?: false | StateReconciler<S>;
|
|
||||||
/**
|
|
@ -1,116 +0,0 @@
|
|||||||
diff --git a/node_modules/redux-persist/es/createPersistoid.js b/node_modules/redux-persist/es/createPersistoid.js
|
|
||||||
index 8b43b9a..184faab 100644
|
|
||||||
--- a/node_modules/redux-persist/es/createPersistoid.js
|
|
||||||
+++ b/node_modules/redux-persist/es/createPersistoid.js
|
|
||||||
@@ -6,6 +6,7 @@ export default function createPersistoid(config) {
|
|
||||||
var whitelist = config.whitelist || null;
|
|
||||||
var transforms = config.transforms || [];
|
|
||||||
var throttle = config.throttle || 0;
|
|
||||||
+ var debounce = config.debounce || 0;
|
|
||||||
var storageKey = "".concat(config.keyPrefix !== undefined ? config.keyPrefix : KEY_PREFIX).concat(config.key);
|
|
||||||
var storage = config.storage;
|
|
||||||
var serialize;
|
|
||||||
@@ -28,30 +29,37 @@ export default function createPersistoid(config) {
|
|
||||||
var timeIterator = null;
|
|
||||||
var writePromise = null;
|
|
||||||
|
|
||||||
- var update = function update(state) {
|
|
||||||
- // add any changed keys to the queue
|
|
||||||
- Object.keys(state).forEach(function (key) {
|
|
||||||
- if (!passWhitelistBlacklist(key)) return; // is keyspace ignored? noop
|
|
||||||
+ // Timer for debounced `update()`
|
|
||||||
+ let timer = 0;
|
|
||||||
|
|
||||||
- if (lastState[key] === state[key]) return; // value unchanged? noop
|
|
||||||
+ function update(state) {
|
|
||||||
+ // Debounce the update
|
|
||||||
+ clearTimeout(timer);
|
|
||||||
+ timer = setTimeout(() => {
|
|
||||||
+ // add any changed keys to the queue
|
|
||||||
+ Object.keys(state).forEach(function (key) {
|
|
||||||
+ if (!passWhitelistBlacklist(key)) return; // is keyspace ignored? noop
|
|
||||||
|
|
||||||
- if (keysToProcess.indexOf(key) !== -1) return; // is key already queued? noop
|
|
||||||
+ if (lastState[key] === state[key]) return; // value unchanged? noop
|
|
||||||
|
|
||||||
- keysToProcess.push(key); // add key to queue
|
|
||||||
- }); //if any key is missing in the new state which was present in the lastState,
|
|
||||||
- //add it for processing too
|
|
||||||
+ if (keysToProcess.indexOf(key) !== -1) return; // is key already queued? noop
|
|
||||||
|
|
||||||
- Object.keys(lastState).forEach(function (key) {
|
|
||||||
- if (state[key] === undefined && passWhitelistBlacklist(key) && keysToProcess.indexOf(key) === -1 && lastState[key] !== undefined) {
|
|
||||||
- keysToProcess.push(key);
|
|
||||||
- }
|
|
||||||
- }); // start the time iterator if not running (read: throttle)
|
|
||||||
+ keysToProcess.push(key); // add key to queue
|
|
||||||
+ }); //if any key is missing in the new state which was present in the lastState,
|
|
||||||
+ //add it for processing too
|
|
||||||
|
|
||||||
- if (timeIterator === null) {
|
|
||||||
- timeIterator = setInterval(processNextKey, throttle);
|
|
||||||
- }
|
|
||||||
+ Object.keys(lastState).forEach(function (key) {
|
|
||||||
+ if (state[key] === undefined && passWhitelistBlacklist(key) && keysToProcess.indexOf(key) === -1 && lastState[key] !== undefined) {
|
|
||||||
+ keysToProcess.push(key);
|
|
||||||
+ }
|
|
||||||
+ }); // start the time iterator if not running (read: throttle)
|
|
||||||
+
|
|
||||||
+ if (timeIterator === null) {
|
|
||||||
+ timeIterator = setInterval(processNextKey, throttle);
|
|
||||||
+ }
|
|
||||||
|
|
||||||
- lastState = state;
|
|
||||||
+ lastState = state;
|
|
||||||
+ }, debounce)
|
|
||||||
};
|
|
||||||
|
|
||||||
function processNextKey() {
|
|
||||||
diff --git a/node_modules/redux-persist/es/types.js.flow b/node_modules/redux-persist/es/types.js.flow
|
|
||||||
index c50d3cd..39d8be2 100644
|
|
||||||
--- a/node_modules/redux-persist/es/types.js.flow
|
|
||||||
+++ b/node_modules/redux-persist/es/types.js.flow
|
|
||||||
@@ -19,6 +19,7 @@ export type PersistConfig = {
|
|
||||||
whitelist?: Array<string>,
|
|
||||||
transforms?: Array<Transform>,
|
|
||||||
throttle?: number,
|
|
||||||
+ debounce?: number,
|
|
||||||
migrate?: (PersistedState, number) => Promise<PersistedState>,
|
|
||||||
stateReconciler?: false | Function,
|
|
||||||
getStoredState?: PersistConfig => Promise<PersistedState>, // used for migrations
|
|
||||||
diff --git a/node_modules/redux-persist/lib/types.js.flow b/node_modules/redux-persist/lib/types.js.flow
|
|
||||||
index c50d3cd..39d8be2 100644
|
|
||||||
--- a/node_modules/redux-persist/lib/types.js.flow
|
|
||||||
+++ b/node_modules/redux-persist/lib/types.js.flow
|
|
||||||
@@ -19,6 +19,7 @@ export type PersistConfig = {
|
|
||||||
whitelist?: Array<string>,
|
|
||||||
transforms?: Array<Transform>,
|
|
||||||
throttle?: number,
|
|
||||||
+ debounce?: number,
|
|
||||||
migrate?: (PersistedState, number) => Promise<PersistedState>,
|
|
||||||
stateReconciler?: false | Function,
|
|
||||||
getStoredState?: PersistConfig => Promise<PersistedState>, // used for migrations
|
|
||||||
diff --git a/node_modules/redux-persist/src/types.js b/node_modules/redux-persist/src/types.js
|
|
||||||
index c50d3cd..39d8be2 100644
|
|
||||||
--- a/node_modules/redux-persist/src/types.js
|
|
||||||
+++ b/node_modules/redux-persist/src/types.js
|
|
||||||
@@ -19,6 +19,7 @@ export type PersistConfig = {
|
|
||||||
whitelist?: Array<string>,
|
|
||||||
transforms?: Array<Transform>,
|
|
||||||
throttle?: number,
|
|
||||||
+ debounce?: number,
|
|
||||||
migrate?: (PersistedState, number) => Promise<PersistedState>,
|
|
||||||
stateReconciler?: false | Function,
|
|
||||||
getStoredState?: PersistConfig => Promise<PersistedState>, // used for migrations
|
|
||||||
diff --git a/node_modules/redux-persist/types/types.d.ts b/node_modules/redux-persist/types/types.d.ts
|
|
||||||
index b3733bc..2a1696c 100644
|
|
||||||
--- a/node_modules/redux-persist/types/types.d.ts
|
|
||||||
+++ b/node_modules/redux-persist/types/types.d.ts
|
|
||||||
@@ -35,6 +35,7 @@ declare module "redux-persist/es/types" {
|
|
||||||
whitelist?: Array<string>;
|
|
||||||
transforms?: Array<Transform<HSS, ESS, S, RS>>;
|
|
||||||
throttle?: number;
|
|
||||||
+ debounce?: number;
|
|
||||||
migrate?: PersistMigrate;
|
|
||||||
stateReconciler?: false | StateReconciler<S>;
|
|
||||||
/**
|
|
@ -1,31 +0,0 @@
|
|||||||
import { canvasGraphBuilt } from 'features/nodes/store/actions';
|
|
||||||
import { startAppListening } from '..';
|
|
||||||
import {
|
|
||||||
canvasSessionIdChanged,
|
|
||||||
stagingAreaInitialized,
|
|
||||||
} from 'features/canvas/store/canvasSlice';
|
|
||||||
import { sessionInvoked } from 'services/thunks/session';
|
|
||||||
|
|
||||||
export const addCanvasGraphBuiltListener = () =>
|
|
||||||
startAppListening({
|
|
||||||
actionCreator: canvasGraphBuilt,
|
|
||||||
effect: async (action, { dispatch, getState, take }) => {
|
|
||||||
const [{ meta }] = await take(sessionInvoked.fulfilled.match);
|
|
||||||
const { sessionId } = meta.arg;
|
|
||||||
const state = getState();
|
|
||||||
|
|
||||||
if (!state.canvas.layerState.stagingArea.boundingBox) {
|
|
||||||
dispatch(
|
|
||||||
stagingAreaInitialized({
|
|
||||||
sessionId,
|
|
||||||
boundingBox: {
|
|
||||||
...state.canvas.boundingBoxCoordinates,
|
|
||||||
...state.canvas.boundingBoxDimensions,
|
|
||||||
},
|
|
||||||
})
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
dispatch(canvasSessionIdChanged(sessionId));
|
|
||||||
},
|
|
||||||
});
|
|
@ -1,6 +1,6 @@
|
|||||||
import { startAppListening } from '..';
|
import { startAppListening } from '..';
|
||||||
import { sessionCreated, sessionInvoked } from 'services/thunks/session';
|
import { sessionCreated, sessionInvoked } from 'services/thunks/session';
|
||||||
import { buildCanvasGraphAndBlobs } from 'features/nodes/util/graphBuilders/buildCanvasGraph';
|
import { buildCanvasGraphComponents } from 'features/nodes/util/graphBuilders/buildCanvasGraph';
|
||||||
import { log } from 'app/logging/useLogger';
|
import { log } from 'app/logging/useLogger';
|
||||||
import { canvasGraphBuilt } from 'features/nodes/store/actions';
|
import { canvasGraphBuilt } from 'features/nodes/store/actions';
|
||||||
import { imageUploaded } from 'services/thunks/image';
|
import { imageUploaded } from 'services/thunks/image';
|
||||||
@ -11,9 +11,17 @@ import {
|
|||||||
stagingAreaInitialized,
|
stagingAreaInitialized,
|
||||||
} from 'features/canvas/store/canvasSlice';
|
} from 'features/canvas/store/canvasSlice';
|
||||||
import { userInvoked } from 'app/store/actions';
|
import { userInvoked } from 'app/store/actions';
|
||||||
|
import { getCanvasData } from 'features/canvas/util/getCanvasData';
|
||||||
|
import { getCanvasGenerationMode } from 'features/canvas/util/getCanvasGenerationMode';
|
||||||
|
import { blobToDataURL } from 'features/canvas/util/blobToDataURL';
|
||||||
|
import openBase64ImageInTab from 'common/util/openBase64ImageInTab';
|
||||||
|
|
||||||
const moduleLog = log.child({ namespace: 'invoke' });
|
const moduleLog = log.child({ namespace: 'invoke' });
|
||||||
|
|
||||||
|
/**
|
||||||
|
* This listener is responsible for building the canvas graph and blobs when the user invokes the canvas.
|
||||||
|
* It is also responsible for uploading the base and mask layers to the server.
|
||||||
|
*/
|
||||||
export const addUserInvokedCanvasListener = () => {
|
export const addUserInvokedCanvasListener = () => {
|
||||||
startAppListening({
|
startAppListening({
|
||||||
predicate: (action): action is ReturnType<typeof userInvoked> =>
|
predicate: (action): action is ReturnType<typeof userInvoked> =>
|
||||||
@ -21,25 +29,49 @@ export const addUserInvokedCanvasListener = () => {
|
|||||||
effect: async (action, { getState, dispatch, take }) => {
|
effect: async (action, { getState, dispatch, take }) => {
|
||||||
const state = getState();
|
const state = getState();
|
||||||
|
|
||||||
const data = await buildCanvasGraphAndBlobs(state);
|
// Build canvas blobs
|
||||||
|
const canvasBlobsAndImageData = await getCanvasData(state);
|
||||||
|
|
||||||
if (!data) {
|
if (!canvasBlobsAndImageData) {
|
||||||
|
moduleLog.error('Unable to create canvas data');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const { baseBlob, baseImageData, maskBlob, maskImageData } =
|
||||||
|
canvasBlobsAndImageData;
|
||||||
|
|
||||||
|
// Determine the generation mode
|
||||||
|
const generationMode = getCanvasGenerationMode(
|
||||||
|
baseImageData,
|
||||||
|
maskImageData
|
||||||
|
);
|
||||||
|
|
||||||
|
if (state.system.enableImageDebugging) {
|
||||||
|
const baseDataURL = await blobToDataURL(baseBlob);
|
||||||
|
const maskDataURL = await blobToDataURL(maskBlob);
|
||||||
|
openBase64ImageInTab([
|
||||||
|
{ base64: maskDataURL, caption: 'mask b64' },
|
||||||
|
{ base64: baseDataURL, caption: 'image b64' },
|
||||||
|
]);
|
||||||
|
}
|
||||||
|
|
||||||
|
moduleLog.debug(`Generation mode: ${generationMode}`);
|
||||||
|
|
||||||
|
// Build the canvas graph
|
||||||
|
const graphComponents = await buildCanvasGraphComponents(
|
||||||
|
state,
|
||||||
|
generationMode
|
||||||
|
);
|
||||||
|
|
||||||
|
if (!graphComponents) {
|
||||||
moduleLog.error('Problem building graph');
|
moduleLog.error('Problem building graph');
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
const {
|
const { rangeNode, iterateNode, baseNode, edges } = graphComponents;
|
||||||
rangeNode,
|
|
||||||
iterateNode,
|
|
||||||
baseNode,
|
|
||||||
edges,
|
|
||||||
baseBlob,
|
|
||||||
maskBlob,
|
|
||||||
generationMode,
|
|
||||||
} = data;
|
|
||||||
|
|
||||||
|
// Upload the base layer, to be used as init image
|
||||||
const baseFilename = `${uuidv4()}.png`;
|
const baseFilename = `${uuidv4()}.png`;
|
||||||
const maskFilename = `${uuidv4()}.png`;
|
|
||||||
|
|
||||||
dispatch(
|
dispatch(
|
||||||
imageUploaded({
|
imageUploaded({
|
||||||
@ -66,6 +98,9 @@ export const addUserInvokedCanvasListener = () => {
|
|||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Upload the mask layer image
|
||||||
|
const maskFilename = `${uuidv4()}.png`;
|
||||||
|
|
||||||
if (baseNode.type === 'inpaint') {
|
if (baseNode.type === 'inpaint') {
|
||||||
dispatch(
|
dispatch(
|
||||||
imageUploaded({
|
imageUploaded({
|
||||||
@ -103,9 +138,12 @@ export const addUserInvokedCanvasListener = () => {
|
|||||||
dispatch(canvasGraphBuilt(graph));
|
dispatch(canvasGraphBuilt(graph));
|
||||||
moduleLog({ data: graph }, 'Canvas graph built');
|
moduleLog({ data: graph }, 'Canvas graph built');
|
||||||
|
|
||||||
|
// Actually create the session
|
||||||
dispatch(sessionCreated({ graph }));
|
dispatch(sessionCreated({ graph }));
|
||||||
|
|
||||||
|
// Wait for the session to be invoked (this is just the HTTP request to start processing)
|
||||||
const [{ meta }] = await take(sessionInvoked.fulfilled.match);
|
const [{ meta }] = await take(sessionInvoked.fulfilled.match);
|
||||||
|
|
||||||
const { sessionId } = meta.arg;
|
const { sessionId } = meta.arg;
|
||||||
|
|
||||||
if (!state.canvas.layerState.stagingArea.boundingBox) {
|
if (!state.canvas.layerState.stagingArea.boundingBox) {
|
||||||
|
@ -1,29 +0,0 @@
|
|||||||
import { Flex, Heading, Text, VStack } from '@chakra-ui/react';
|
|
||||||
import { useTranslation } from 'react-i18next';
|
|
||||||
import WorkInProgress from './WorkInProgress';
|
|
||||||
|
|
||||||
export const PostProcessingWIP = () => {
|
|
||||||
const { t } = useTranslation();
|
|
||||||
return (
|
|
||||||
<WorkInProgress>
|
|
||||||
<Flex
|
|
||||||
sx={{
|
|
||||||
flexDirection: 'column',
|
|
||||||
alignItems: 'center',
|
|
||||||
justifyContent: 'center',
|
|
||||||
w: '100%',
|
|
||||||
h: '100%',
|
|
||||||
gap: 4,
|
|
||||||
textAlign: 'center',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Heading>{t('common.postProcessing')}</Heading>
|
|
||||||
<VStack maxW="50rem" gap={4}>
|
|
||||||
<Text>{t('common.postProcessDesc1')}</Text>
|
|
||||||
<Text>{t('common.postProcessDesc2')}</Text>
|
|
||||||
<Text>{t('common.postProcessDesc3')}</Text>
|
|
||||||
</VStack>
|
|
||||||
</Flex>
|
|
||||||
</WorkInProgress>
|
|
||||||
);
|
|
||||||
};
|
|
@ -1,28 +0,0 @@
|
|||||||
import { Flex, Heading, Text, VStack } from '@chakra-ui/react';
|
|
||||||
import { useTranslation } from 'react-i18next';
|
|
||||||
import WorkInProgress from './WorkInProgress';
|
|
||||||
|
|
||||||
export default function TrainingWIP() {
|
|
||||||
const { t } = useTranslation();
|
|
||||||
return (
|
|
||||||
<WorkInProgress>
|
|
||||||
<Flex
|
|
||||||
sx={{
|
|
||||||
flexDirection: 'column',
|
|
||||||
alignItems: 'center',
|
|
||||||
justifyContent: 'center',
|
|
||||||
w: '100%',
|
|
||||||
h: '100%',
|
|
||||||
gap: 4,
|
|
||||||
textAlign: 'center',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Heading>{t('common.training')}</Heading>
|
|
||||||
<VStack maxW="50rem" gap={4}>
|
|
||||||
<Text>{t('common.trainingDesc1')}</Text>
|
|
||||||
<Text>{t('common.trainingDesc2')}</Text>
|
|
||||||
</VStack>
|
|
||||||
</Flex>
|
|
||||||
</WorkInProgress>
|
|
||||||
);
|
|
||||||
}
|
|
@ -1,26 +0,0 @@
|
|||||||
import { Flex } from '@chakra-ui/react';
|
|
||||||
import { ReactNode } from 'react';
|
|
||||||
|
|
||||||
type WorkInProgressProps = {
|
|
||||||
children: ReactNode;
|
|
||||||
};
|
|
||||||
|
|
||||||
const WorkInProgress = (props: WorkInProgressProps) => {
|
|
||||||
const { children } = props;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Flex
|
|
||||||
sx={{
|
|
||||||
width: '100%',
|
|
||||||
height: '100%',
|
|
||||||
bg: 'base.850',
|
|
||||||
borderRadius: 'base',
|
|
||||||
position: 'relative',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{children}
|
|
||||||
</Flex>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default WorkInProgress;
|
|
@ -1,35 +0,0 @@
|
|||||||
import { RefObject, useEffect } from 'react';
|
|
||||||
|
|
||||||
const watchers: {
|
|
||||||
ref: RefObject<HTMLElement>;
|
|
||||||
enable: boolean;
|
|
||||||
callback: () => void;
|
|
||||||
}[] = [];
|
|
||||||
|
|
||||||
const useClickOutsideWatcher = () => {
|
|
||||||
useEffect(() => {
|
|
||||||
function handleClickOutside(e: MouseEvent) {
|
|
||||||
watchers.forEach(({ ref, enable, callback }) => {
|
|
||||||
if (enable && ref.current && !ref.current.contains(e.target as Node)) {
|
|
||||||
callback();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
document.addEventListener('mousedown', handleClickOutside);
|
|
||||||
return () => {
|
|
||||||
document.removeEventListener('mousedown', handleClickOutside);
|
|
||||||
};
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
return {
|
|
||||||
addWatcher: (watcher: {
|
|
||||||
ref: RefObject<HTMLElement>;
|
|
||||||
callback: () => void;
|
|
||||||
enable: boolean;
|
|
||||||
}) => {
|
|
||||||
watchers.push(watcher);
|
|
||||||
},
|
|
||||||
};
|
|
||||||
};
|
|
||||||
|
|
||||||
export default useClickOutsideWatcher;
|
|
@ -1,17 +0,0 @@
|
|||||||
import React from 'react';
|
|
||||||
import { useTranslation } from 'react-i18next';
|
|
||||||
|
|
||||||
export default function useUpdateTranslations(fn: () => void) {
|
|
||||||
const { i18n } = useTranslation();
|
|
||||||
const currentLang = localStorage.getItem('i18nextLng');
|
|
||||||
|
|
||||||
React.useEffect(() => {
|
|
||||||
fn();
|
|
||||||
}, [fn]);
|
|
||||||
|
|
||||||
React.useEffect(() => {
|
|
||||||
i18n.on('languageChanged', () => {
|
|
||||||
fn();
|
|
||||||
});
|
|
||||||
}, [fn, i18n, currentLang]);
|
|
||||||
}
|
|
@ -1,20 +0,0 @@
|
|||||||
import { createIcon } from '@chakra-ui/react';
|
|
||||||
|
|
||||||
const ImageToImageIcon = createIcon({
|
|
||||||
displayName: 'ImageToImageIcon',
|
|
||||||
viewBox: '0 0 3543 3543',
|
|
||||||
path: (
|
|
||||||
<g transform="matrix(1.10943,0,0,1.10943,-206.981,-213.533)">
|
|
||||||
<path
|
|
||||||
fill="currentColor"
|
|
||||||
fillRule="evenodd"
|
|
||||||
clipRule="evenodd"
|
|
||||||
d="M688.533,2405.95L542.987,2405.95C349.532,2405.95 192.47,2248.89 192.47,2055.44L192.47,542.987C192.47,349.532 349.532,192.47 542.987,192.47L2527.88,192.47C2721.33,192.47 2878.4,349.532 2878.4,542.987L2878.4,1172.79L3023.94,1172.79C3217.4,1172.79 3374.46,1329.85 3374.46,1523.3C3374.46,1523.3 3374.46,3035.75 3374.46,3035.75C3374.46,3229.21 3217.4,3386.27 3023.94,3386.27L1039.05,3386.27C845.595,3386.27 688.533,3229.21 688.533,3035.75L688.533,2405.95ZM3286.96,2634.37L3286.96,1523.3C3286.96,1378.14 3169.11,1260.29 3023.94,1260.29C3023.94,1260.29 1039.05,1260.29 1039.05,1260.29C893.887,1260.29 776.033,1378.14 776.033,1523.3L776.033,2489.79L1440.94,1736.22L2385.83,2775.59L2880.71,2200.41L3286.96,2634.37ZM2622.05,1405.51C2778.5,1405.51 2905.51,1532.53 2905.51,1688.98C2905.51,1845.42 2778.5,1972.44 2622.05,1972.44C2465.6,1972.44 2338.58,1845.42 2338.58,1688.98C2338.58,1532.53 2465.6,1405.51 2622.05,1405.51ZM2790.9,1172.79L1323.86,1172.79L944.882,755.906L279.97,1509.47L279.97,542.987C279.97,397.824 397.824,279.97 542.987,279.97C542.987,279.97 2527.88,279.97 2527.88,279.97C2673.04,279.97 2790.9,397.824 2790.9,542.987L2790.9,1172.79ZM2125.98,425.197C2282.43,425.197 2409.45,552.213 2409.45,708.661C2409.45,865.11 2282.43,992.126 2125.98,992.126C1969.54,992.126 1842.52,865.11 1842.52,708.661C1842.52,552.213 1969.54,425.197 2125.98,425.197Z"
|
|
||||||
/>
|
|
||||||
</g>
|
|
||||||
),
|
|
||||||
defaultProps: {
|
|
||||||
boxSize: '24px',
|
|
||||||
},
|
|
||||||
});
|
|
||||||
export default ImageToImageIcon;
|
|
@ -1,19 +0,0 @@
|
|||||||
import { createIcon } from '@chakra-ui/react';
|
|
||||||
|
|
||||||
const NodesIcon = createIcon({
|
|
||||||
displayName: 'NodesIcon',
|
|
||||||
viewBox: '0 0 3543 3543',
|
|
||||||
path: (
|
|
||||||
<path
|
|
||||||
fill="currentColor"
|
|
||||||
fillRule="evenodd"
|
|
||||||
clipRule="evenodd"
|
|
||||||
d="M3543.31,770.787C3543.31,515.578 3336.11,308.38 3080.9,308.38L462.407,308.38C207.197,308.38 0,515.578 0,770.787L0,2766.03C0,3021.24 207.197,3228.44 462.407,3228.44L3080.9,3228.44C3336.11,3228.44 3543.31,3021.24 3543.31,2766.03C3543.31,2766.03 3543.31,770.787 3543.31,770.787ZM3427.88,770.787L3427.88,2766.03C3427.88,2957.53 3272.4,3113.01 3080.9,3113.01C3080.9,3113.01 462.407,3113.01 462.407,3113.01C270.906,3113.01 115.431,2957.53 115.431,2766.03L115.431,770.787C115.431,579.286 270.906,423.812 462.407,423.812L3080.9,423.812C3272.4,423.812 3427.88,579.286 3427.88,770.787ZM1214.23,1130.69L1321.47,1130.69C1324.01,1130.69 1326.54,1130.53 1329.05,1130.2C1329.05,1130.2 1367.3,1125.33 1397.94,1149.8C1421.63,1168.72 1437.33,1204.3 1437.33,1265.48L1437.33,2078.74L1220.99,2078.74C1146.83,2078.74 1086.61,2138.95 1086.61,2213.12L1086.61,2762.46C1086.61,2836.63 1146.83,2896.84 1220.99,2896.84L1770.34,2896.84C1844.5,2896.84 1904.71,2836.63 1904.71,2762.46L1904.71,2213.12C1904.71,2138.95 1844.5,2078.74 1770.34,2078.74L1554,2078.74L1554,1604.84C1625.84,1658.19 1703.39,1658.1 1703.39,1658.1C1703.54,1658.1 1703.69,1658.11 1703.84,1658.11L2362.2,1658.11L2362.2,1874.44C2362.2,1948.61 2422.42,2008.82 2496.58,2008.82L3045.93,2008.82C3120.09,2008.82 3180.3,1948.61 3180.3,1874.44L3180.3,1325.1C3180.3,1250.93 3120.09,1190.72 3045.93,1190.72L2496.58,1190.72C2422.42,1190.72 2362.2,1250.93 2362.2,1325.1L2362.2,1558.97L2362.2,1541.44L1704.23,1541.44C1702.2,1541.37 1650.96,1539.37 1609.51,1499.26C1577.72,1468.49 1554,1416.47 1554,1331.69L1554,1265.48C1554,1153.86 1513.98,1093.17 1470.76,1058.64C1411.24,1011.1 1338.98,1012.58 1319.15,1014.03L1214.23,1014.03L1214.23,796.992C1214.23,722.828 1154.02,662.617 1079.85,662.617L530.507,662.617C456.343,662.617 396.131,722.828 396.131,796.992L396.131,1346.34C396.131,1420.5 456.343,1480.71 530.507,1480.71L1079.85,1480.71C1154.02,1480.71 1214.23,1420.5 1214.23,1346.34L1214.23,1130.69Z"
|
|
||||||
/>
|
|
||||||
),
|
|
||||||
defaultProps: {
|
|
||||||
boxSize: '24px',
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
export default NodesIcon;
|
|
@ -1,19 +0,0 @@
|
|||||||
import { createIcon } from '@chakra-ui/react';
|
|
||||||
|
|
||||||
const PostprocessingIcon = createIcon({
|
|
||||||
displayName: 'PostprocessingIcon',
|
|
||||||
viewBox: '0 0 3543 3543',
|
|
||||||
path: (
|
|
||||||
<path
|
|
||||||
fill="currentColor"
|
|
||||||
fillRule="evenodd"
|
|
||||||
clipRule="evenodd"
|
|
||||||
d="M709.477,1596.53L992.591,1275.66L2239.09,2646.81L2891.95,1888.03L3427.88,2460.51L3427.88,994.78C3427.88,954.66 3421.05,916.122 3408.5,880.254L3521.9,855.419C3535.8,899.386 3543.31,946.214 3543.31,994.78L3543.31,2990.02C3543.31,3245.23 3336.11,3452.43 3080.9,3452.43C3080.9,3452.43 462.407,3452.43 462.407,3452.43C207.197,3452.43 -0,3245.23 -0,2990.02L-0,994.78C-0,739.571 207.197,532.373 462.407,532.373L505.419,532.373L504.644,532.546L807.104,600.085C820.223,601.729 832.422,607.722 841.77,617.116C850.131,625.517 855.784,636.21 858.055,647.804L462.407,647.804C270.906,647.804 115.431,803.279 115.431,994.78L115.431,2075.73L-0,2101.5L115.431,2127.28L115.431,2269.78L220.47,2150.73L482.345,2209.21C503.267,2211.83 522.722,2221.39 537.63,2236.37C552.538,2251.35 562.049,2270.9 564.657,2291.93L671.84,2776.17L779.022,2291.93C781.631,2270.9 791.141,2251.35 806.05,2236.37C820.958,2221.39 840.413,2211.83 861.334,2209.21L1353.15,2101.5L861.334,1993.8C840.413,1991.18 820.958,1981.62 806.05,1966.64C791.141,1951.66 781.631,1932.11 779.022,1911.08L709.477,1596.53ZM671.84,1573.09L725.556,2006.07C726.863,2016.61 731.63,2026.4 739.101,2033.91C746.573,2041.42 756.323,2046.21 766.808,2047.53L1197.68,2101.5L766.808,2155.48C756.323,2156.8 746.573,2161.59 739.101,2169.09C731.63,2176.6 726.863,2186.4 725.556,2196.94L671.84,2629.92L618.124,2196.94C616.817,2186.4 612.05,2176.6 604.579,2169.09C597.107,2161.59 587.357,2156.8 576.872,2155.48L146.001,2101.5L576.872,2047.53C587.357,2046.21 597.107,2041.42 604.579,2033.91C612.05,2026.4 616.817,2016.61 618.124,2006.07L671.84,1573.09ZM609.035,1710.36L564.657,1911.08C562.049,1932.11 552.538,1951.66 537.63,1966.64C522.722,1981.62 503.267,1991.18 482.345,1993.8L328.665,2028.11L609.035,1710.36ZM2297.12,938.615L2451.12,973.003C2480.59,976.695 2507.99,990.158 2528.99,1011.26C2549.99,1032.37 2563.39,1059.9 2567.07,1089.52L2672.73,1566.9C2634.5,1580.11 2593.44,1587.29 2550.72,1587.29C2344.33,1587.29 2176.77,1419.73 2176.77,1213.34C2176.77,1104.78 2223.13,1006.96 2297.12,938.615ZM2718.05,76.925L2793.72,686.847C2795.56,701.69 2802.27,715.491 2812.8,726.068C2823.32,736.644 2837.06,743.391 2851.83,745.242L3458.78,821.28L2851.83,897.318C2837.06,899.168 2823.32,905.916 2812.8,916.492C2802.27,927.068 2795.56,940.87 2793.72,955.712L2718.05,1565.63L2642.38,955.712C2640.54,940.87 2633.83,927.068 2623.3,916.492C2612.78,905.916 2599.04,899.168 2584.27,897.318L1977.32,821.28L2584.27,745.242C2599.04,743.391 2612.78,736.644 2623.3,726.068C2633.83,715.491 2640.54,701.69 2642.38,686.847L2718.05,76.925ZM2883.68,1043.06C2909.88,1094.13 2924.67,1152.02 2924.67,1213.34C2924.67,1335.4 2866.06,1443.88 2775.49,1512.14L2869.03,1089.52C2871.07,1073.15 2876.07,1057.42 2883.68,1043.06ZM925.928,201.2L959.611,472.704C960.431,479.311 963.42,485.455 968.105,490.163C972.79,494.871 978.904,497.875 985.479,498.698L1255.66,532.546L985.479,566.395C978.904,567.218 972.79,570.222 968.105,574.93C963.42,579.638 960.431,585.781 959.611,592.388L925.928,863.893L892.245,592.388C891.425,585.781 888.436,579.638 883.751,574.93C879.066,570.222 872.952,567.218 866.378,566.395L596.195,532.546L866.378,498.698C872.952,497.875 879.066,494.871 883.751,490.163C888.436,485.455 891.425,479.311 892.245,472.704L925.928,201.2ZM2864.47,532.373L3080.9,532.373C3258.7,532.373 3413.2,632.945 3490.58,780.281L3319.31,742.773C3257.14,683.925 3173.2,647.804 3080.9,647.804L2927.07,647.804C2919.95,642.994 2913.25,637.473 2907.11,631.298C2886.11,610.194 2872.71,582.655 2869.03,553.04L2864.47,532.373ZM1352.36,532.373L2571.64,532.373L2567.07,553.04C2563.39,582.655 2549.99,610.194 2528.99,631.298C2522.85,637.473 2516.16,642.994 2509.03,647.804L993.801,647.804C996.072,636.21 1001.73,625.517 1010.09,617.116C1019.43,607.722 1031.63,601.729 1044.75,600.085L1353.15,532.546L1352.36,532.373Z"
|
|
||||||
/>
|
|
||||||
),
|
|
||||||
defaultProps: {
|
|
||||||
boxSize: '24px',
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
export default PostprocessingIcon;
|
|
@ -1,19 +0,0 @@
|
|||||||
import { createIcon } from '@chakra-ui/react';
|
|
||||||
|
|
||||||
const TrainingIcon = createIcon({
|
|
||||||
displayName: 'TrainingIcon',
|
|
||||||
viewBox: '0 0 3544 3544',
|
|
||||||
path: (
|
|
||||||
<path
|
|
||||||
fill="currentColor"
|
|
||||||
fillRule="evenodd"
|
|
||||||
clipRule="evenodd"
|
|
||||||
d="M0,768.593L0,2774.71C0,2930.6 78.519,3068.3 198.135,3150.37C273.059,3202.68 364.177,3233.38 462.407,3233.38C462.407,3233.38 3080.9,3233.38 3080.9,3233.38C3179.13,3233.38 3270.25,3202.68 3345.17,3150.37C3464.79,3068.3 3543.31,2930.6 3543.31,2774.71L3543.31,768.593C3543.31,517.323 3339.31,313.324 3088.04,313.324L455.269,313.324C203.999,313.324 0,517.323 0,768.593ZM3427.88,775.73L3427.88,2770.97C3427.88,2962.47 3272.4,3117.95 3080.9,3117.95L462.407,3117.95C270.906,3117.95 115.431,2962.47 115.431,2770.97C115.431,2770.97 115.431,775.73 115.431,775.73C115.431,584.229 270.906,428.755 462.407,428.755C462.407,428.755 3080.9,428.755 3080.9,428.755C3272.4,428.755 3427.88,584.229 3427.88,775.73ZM796.24,1322.76L796.24,1250.45C796.24,1199.03 836.16,1157.27 885.331,1157.27C885.331,1157.27 946.847,1157.27 946.847,1157.27C996.017,1157.27 1035.94,1199.03 1035.94,1250.45L1035.94,1644.81L2507.37,1644.81L2507.37,1250.45C2507.37,1199.03 2547.29,1157.27 2596.46,1157.27C2596.46,1157.27 2657.98,1157.27 2657.98,1157.27C2707.15,1157.27 2747.07,1199.03 2747.07,1250.45L2747.07,1322.76C2756.66,1319.22 2767.02,1317.29 2777.83,1317.29C2777.83,1317.29 2839.34,1317.29 2839.34,1317.29C2888.51,1317.29 2928.43,1357.21 2928.43,1406.38L2928.43,1527.32C2933.51,1526.26 2938.77,1525.71 2944.16,1525.71L2995.3,1525.71C3036.18,1525.71 3069.37,1557.59 3069.37,1596.86C3069.37,1596.86 3069.37,1946.44 3069.37,1946.44C3069.37,1985.72 3036.18,2017.6 2995.3,2017.6C2995.3,2017.6 2944.16,2017.6 2944.16,2017.6C2938.77,2017.6 2933.51,2017.04 2928.43,2015.99L2928.43,2136.92C2928.43,2186.09 2888.51,2226.01 2839.34,2226.01L2777.83,2226.01C2767.02,2226.01 2756.66,2224.08 2747.07,2220.55L2747.07,2292.85C2747.07,2344.28 2707.15,2386.03 2657.98,2386.03C2657.98,2386.03 2596.46,2386.03 2596.46,2386.03C2547.29,2386.03 2507.37,2344.28 2507.37,2292.85L2507.37,1898.5L1035.94,1898.5L1035.94,2292.85C1035.94,2344.28 996.017,2386.03 946.847,2386.03C946.847,2386.03 885.331,2386.03 885.331,2386.03C836.16,2386.03 796.24,2344.28 796.24,2292.85L796.24,2220.55C786.651,2224.08 776.29,2226.01 765.482,2226.01L703.967,2226.01C654.796,2226.01 614.876,2186.09 614.876,2136.92L614.876,2015.99C609.801,2017.04 604.539,2017.6 599.144,2017.6C599.144,2017.6 548.003,2017.6 548.003,2017.6C507.125,2017.6 473.937,1985.72 473.937,1946.44C473.937,1946.44 473.937,1596.86 473.937,1596.86C473.937,1557.59 507.125,1525.71 548.003,1525.71L599.144,1525.71C604.539,1525.71 609.801,1526.26 614.876,1527.32L614.876,1406.38C614.876,1357.21 654.796,1317.29 703.967,1317.29C703.967,1317.29 765.482,1317.29 765.482,1317.29C776.29,1317.29 786.651,1319.22 796.24,1322.76ZM977.604,1250.45C977.604,1232.7 963.822,1218.29 946.847,1218.29L885.331,1218.29C868.355,1218.29 854.573,1232.7 854.573,1250.45L854.573,2292.85C854.573,2310.61 868.355,2325.02 885.331,2325.02L946.847,2325.02C963.822,2325.02 977.604,2310.61 977.604,2292.85L977.604,1250.45ZM2565.7,1250.45C2565.7,1232.7 2579.49,1218.29 2596.46,1218.29L2657.98,1218.29C2674.95,1218.29 2688.73,1232.7 2688.73,1250.45L2688.73,2292.85C2688.73,2310.61 2674.95,2325.02 2657.98,2325.02L2596.46,2325.02C2579.49,2325.02 2565.7,2310.61 2565.7,2292.85L2565.7,1250.45ZM673.209,1406.38L673.209,2136.92C673.209,2153.9 686.991,2167.68 703.967,2167.68L765.482,2167.68C782.458,2167.68 796.24,2153.9 796.24,2136.92L796.24,1406.38C796.24,1389.41 782.458,1375.63 765.482,1375.63L703.967,1375.63C686.991,1375.63 673.209,1389.41 673.209,1406.38ZM2870.1,1406.38L2870.1,2136.92C2870.1,2153.9 2856.32,2167.68 2839.34,2167.68L2777.83,2167.68C2760.85,2167.68 2747.07,2153.9 2747.07,2136.92L2747.07,1406.38C2747.07,1389.41 2760.85,1375.63 2777.83,1375.63L2839.34,1375.63C2856.32,1375.63 2870.1,1389.41 2870.1,1406.38ZM614.876,1577.5C610.535,1574.24 605.074,1572.3 599.144,1572.3L548.003,1572.3C533.89,1572.3 522.433,1583.3 522.433,1596.86L522.433,1946.44C522.433,1960 533.89,1971.01 548.003,1971.01L599.144,1971.01C605.074,1971.01 610.535,1969.07 614.876,1965.81L614.876,1577.5ZM2928.43,1965.81L2928.43,1577.5C2932.77,1574.24 2938.23,1572.3 2944.16,1572.3L2995.3,1572.3C3009.42,1572.3 3020.87,1583.3 3020.87,1596.86L3020.87,1946.44C3020.87,1960 3009.42,1971.01 2995.3,1971.01L2944.16,1971.01C2938.23,1971.01 2932.77,1969.07 2928.43,1965.81ZM2507.37,1703.14L1035.94,1703.14L1035.94,1840.16L2507.37,1840.16L2507.37,1898.38L2507.37,1659.46L2507.37,1703.14Z"
|
|
||||||
/>
|
|
||||||
),
|
|
||||||
defaultProps: {
|
|
||||||
boxSize: '24px',
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
export default TrainingIcon;
|
|
@ -1,7 +0,0 @@
|
|||||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
|
||||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
|
||||||
<svg width="100%" height="100%" viewBox="0 0 3543 3543" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
|
|
||||||
<g transform="matrix(1.10943,0,0,1.10943,-206.981,-213.533)">
|
|
||||||
<path d="M688.533,2405.95L542.987,2405.95C349.532,2405.95 192.47,2248.89 192.47,2055.44L192.47,542.987C192.47,349.532 349.532,192.47 542.987,192.47L2527.88,192.47C2721.33,192.47 2878.4,349.532 2878.4,542.987L2878.4,1172.79L3023.94,1172.79C3217.4,1172.79 3374.46,1329.85 3374.46,1523.3C3374.46,1523.3 3374.46,3035.75 3374.46,3035.75C3374.46,3229.21 3217.4,3386.27 3023.94,3386.27L1039.05,3386.27C845.595,3386.27 688.533,3229.21 688.533,3035.75L688.533,2405.95ZM3286.96,2634.37L3286.96,1523.3C3286.96,1378.14 3169.11,1260.29 3023.94,1260.29C3023.94,1260.29 1039.05,1260.29 1039.05,1260.29C893.887,1260.29 776.033,1378.14 776.033,1523.3L776.033,2489.79L1440.94,1736.22L2385.83,2775.59L2880.71,2200.41L3286.96,2634.37ZM2622.05,1405.51C2778.5,1405.51 2905.51,1532.53 2905.51,1688.98C2905.51,1845.42 2778.5,1972.44 2622.05,1972.44C2465.6,1972.44 2338.58,1845.42 2338.58,1688.98C2338.58,1532.53 2465.6,1405.51 2622.05,1405.51ZM2790.9,1172.79L1323.86,1172.79L944.882,755.906L279.97,1509.47L279.97,542.987C279.97,397.824 397.824,279.97 542.987,279.97C542.987,279.97 2527.88,279.97 2527.88,279.97C2673.04,279.97 2790.9,397.824 2790.9,542.987L2790.9,1172.79ZM2125.98,425.197C2282.43,425.197 2409.45,552.213 2409.45,708.661C2409.45,865.11 2282.43,992.126 2125.98,992.126C1969.54,992.126 1842.52,865.11 1842.52,708.661C1842.52,552.213 1969.54,425.197 2125.98,425.197Z"/>
|
|
||||||
</g>
|
|
||||||
</svg>
|
|
Before Width: | Height: | Size: 1.9 KiB |
Before Width: | Height: | Size: 8.9 KiB |
@ -1,5 +0,0 @@
|
|||||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
|
||||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
|
||||||
<svg width="100%" height="100%" viewBox="0 0 3543 3543" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
|
|
||||||
<path d="M3543.31,770.787C3543.31,515.578 3336.11,308.38 3080.9,308.38L462.407,308.38C207.197,308.38 0,515.578 0,770.787L0,2766.03C0,3021.24 207.197,3228.44 462.407,3228.44L3080.9,3228.44C3336.11,3228.44 3543.31,3021.24 3543.31,2766.03C3543.31,2766.03 3543.31,770.787 3543.31,770.787ZM3427.88,770.787L3427.88,2766.03C3427.88,2957.53 3272.4,3113.01 3080.9,3113.01C3080.9,3113.01 462.407,3113.01 462.407,3113.01C270.906,3113.01 115.431,2957.53 115.431,2766.03L115.431,770.787C115.431,579.286 270.906,423.812 462.407,423.812L3080.9,423.812C3272.4,423.812 3427.88,579.286 3427.88,770.787ZM1214.23,1130.69L1321.47,1130.69C1324.01,1130.69 1326.54,1130.53 1329.05,1130.2C1329.05,1130.2 1367.3,1125.33 1397.94,1149.8C1421.63,1168.72 1437.33,1204.3 1437.33,1265.48L1437.33,2078.74L1220.99,2078.74C1146.83,2078.74 1086.61,2138.95 1086.61,2213.12L1086.61,2762.46C1086.61,2836.63 1146.83,2896.84 1220.99,2896.84L1770.34,2896.84C1844.5,2896.84 1904.71,2836.63 1904.71,2762.46L1904.71,2213.12C1904.71,2138.95 1844.5,2078.74 1770.34,2078.74L1554,2078.74L1554,1604.84C1625.84,1658.19 1703.39,1658.1 1703.39,1658.1C1703.54,1658.1 1703.69,1658.11 1703.84,1658.11L2362.2,1658.11L2362.2,1874.44C2362.2,1948.61 2422.42,2008.82 2496.58,2008.82L3045.93,2008.82C3120.09,2008.82 3180.3,1948.61 3180.3,1874.44L3180.3,1325.1C3180.3,1250.93 3120.09,1190.72 3045.93,1190.72L2496.58,1190.72C2422.42,1190.72 2362.2,1250.93 2362.2,1325.1L2362.2,1558.97L2362.2,1541.44L1704.23,1541.44C1702.2,1541.37 1650.96,1539.37 1609.51,1499.26C1577.72,1468.49 1554,1416.47 1554,1331.69L1554,1265.48C1554,1153.86 1513.98,1093.17 1470.76,1058.64C1411.24,1011.1 1338.98,1012.58 1319.15,1014.03L1214.23,1014.03L1214.23,796.992C1214.23,722.828 1154.02,662.617 1079.85,662.617L530.507,662.617C456.343,662.617 396.131,722.828 396.131,796.992L396.131,1346.34C396.131,1420.5 456.343,1480.71 530.507,1480.71L1079.85,1480.71C1154.02,1480.71 1214.23,1420.5 1214.23,1346.34L1214.23,1130.69Z"/>
|
|
||||||
</svg>
|
|
Before Width: | Height: | Size: 2.3 KiB |
Before Width: | Height: | Size: 6.3 KiB |
@ -1,5 +0,0 @@
|
|||||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
|
||||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
|
||||||
<svg width="100%" height="100%" viewBox="0 0 3543 3543" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;">
|
|
||||||
<path d="M709.477,1596.53L992.591,1275.66L2239.09,2646.81L2891.95,1888.03L3427.88,2460.51L3427.88,994.78C3427.88,954.66 3421.05,916.122 3408.5,880.254L3521.9,855.419C3535.8,899.386 3543.31,946.214 3543.31,994.78L3543.31,2990.02C3543.31,3245.23 3336.11,3452.43 3080.9,3452.43C3080.9,3452.43 462.407,3452.43 462.407,3452.43C207.197,3452.43 -0,3245.23 -0,2990.02L-0,994.78C-0,739.571 207.197,532.373 462.407,532.373L505.419,532.373L504.644,532.546L807.104,600.085C820.223,601.729 832.422,607.722 841.77,617.116C850.131,625.517 855.784,636.21 858.055,647.804L462.407,647.804C270.906,647.804 115.431,803.279 115.431,994.78L115.431,2075.73L-0,2101.5L115.431,2127.28L115.431,2269.78L220.47,2150.73L482.345,2209.21C503.267,2211.83 522.722,2221.39 537.63,2236.37C552.538,2251.35 562.049,2270.9 564.657,2291.93L671.84,2776.17L779.022,2291.93C781.631,2270.9 791.141,2251.35 806.05,2236.37C820.958,2221.39 840.413,2211.83 861.334,2209.21L1353.15,2101.5L861.334,1993.8C840.413,1991.18 820.958,1981.62 806.05,1966.64C791.141,1951.66 781.631,1932.11 779.022,1911.08L709.477,1596.53ZM671.84,1573.09L725.556,2006.07C726.863,2016.61 731.63,2026.4 739.101,2033.91C746.573,2041.42 756.323,2046.21 766.808,2047.53L1197.68,2101.5L766.808,2155.48C756.323,2156.8 746.573,2161.59 739.101,2169.09C731.63,2176.6 726.863,2186.4 725.556,2196.94L671.84,2629.92L618.124,2196.94C616.817,2186.4 612.05,2176.6 604.579,2169.09C597.107,2161.59 587.357,2156.8 576.872,2155.48L146.001,2101.5L576.872,2047.53C587.357,2046.21 597.107,2041.42 604.579,2033.91C612.05,2026.4 616.817,2016.61 618.124,2006.07L671.84,1573.09ZM609.035,1710.36L564.657,1911.08C562.049,1932.11 552.538,1951.66 537.63,1966.64C522.722,1981.62 503.267,1991.18 482.345,1993.8L328.665,2028.11L609.035,1710.36ZM2297.12,938.615L2451.12,973.003C2480.59,976.695 2507.99,990.158 2528.99,1011.26C2549.99,1032.37 2563.39,1059.9 2567.07,1089.52L2672.73,1566.9C2634.5,1580.11 2593.44,1587.29 2550.72,1587.29C2344.33,1587.29 2176.77,1419.73 2176.77,1213.34C2176.77,1104.78 2223.13,1006.96 2297.12,938.615ZM2718.05,76.925L2793.72,686.847C2795.56,701.69 2802.27,715.491 2812.8,726.068C2823.32,736.644 2837.06,743.391 2851.83,745.242L3458.78,821.28L2851.83,897.318C2837.06,899.168 2823.32,905.916 2812.8,916.492C2802.27,927.068 2795.56,940.87 2793.72,955.712L2718.05,1565.63L2642.38,955.712C2640.54,940.87 2633.83,927.068 2623.3,916.492C2612.78,905.916 2599.04,899.168 2584.27,897.318L1977.32,821.28L2584.27,745.242C2599.04,743.391 2612.78,736.644 2623.3,726.068C2633.83,715.491 2640.54,701.69 2642.38,686.847L2718.05,76.925ZM2883.68,1043.06C2909.88,1094.13 2924.67,1152.02 2924.67,1213.34C2924.67,1335.4 2866.06,1443.88 2775.49,1512.14L2869.03,1089.52C2871.07,1073.15 2876.07,1057.42 2883.68,1043.06ZM925.928,201.2L959.611,472.704C960.431,479.311 963.42,485.455 968.105,490.163C972.79,494.871 978.904,497.875 985.479,498.698L1255.66,532.546L985.479,566.395C978.904,567.218 972.79,570.222 968.105,574.93C963.42,579.638 960.431,585.781 959.611,592.388L925.928,863.893L892.245,592.388C891.425,585.781 888.436,579.638 883.751,574.93C879.066,570.222 872.952,567.218 866.378,566.395L596.195,532.546L866.378,498.698C872.952,497.875 879.066,494.871 883.751,490.163C888.436,485.455 891.425,479.311 892.245,472.704L925.928,201.2ZM2864.47,532.373L3080.9,532.373C3258.7,532.373 3413.2,632.945 3490.58,780.281L3319.31,742.773C3257.14,683.925 3173.2,647.804 3080.9,647.804L2927.07,647.804C2919.95,642.994 2913.25,637.473 2907.11,631.298C2886.11,610.194 2872.71,582.655 2869.03,553.04L2864.47,532.373ZM1352.36,532.373L2571.64,532.373L2567.07,553.04C2563.39,582.655 2549.99,610.194 2528.99,631.298C2522.85,637.473 2516.16,642.994 2509.03,647.804L993.801,647.804C996.072,636.21 1001.73,625.517 1010.09,617.116C1019.43,607.722 1031.63,601.729 1044.75,600.085L1353.15,532.546L1352.36,532.373Z" style="stroke:white;stroke-opacity:0;stroke-width:1px;"/>
|
|
||||||
</svg>
|
|
Before Width: | Height: | Size: 4.2 KiB |
Before Width: | Height: | Size: 8.1 KiB |
@ -1,5 +0,0 @@
|
|||||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
|
||||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
|
||||||
<svg width="100%" height="100%" viewBox="0 0 3544 3544" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
|
|
||||||
<path d="M0,768.593L0,2774.71C0,2930.6 78.519,3068.3 198.135,3150.37C273.059,3202.68 364.177,3233.38 462.407,3233.38C462.407,3233.38 3080.9,3233.38 3080.9,3233.38C3179.13,3233.38 3270.25,3202.68 3345.17,3150.37C3464.79,3068.3 3543.31,2930.6 3543.31,2774.71L3543.31,768.593C3543.31,517.323 3339.31,313.324 3088.04,313.324L455.269,313.324C203.999,313.324 0,517.323 0,768.593ZM3427.88,775.73L3427.88,2770.97C3427.88,2962.47 3272.4,3117.95 3080.9,3117.95L462.407,3117.95C270.906,3117.95 115.431,2962.47 115.431,2770.97C115.431,2770.97 115.431,775.73 115.431,775.73C115.431,584.229 270.906,428.755 462.407,428.755C462.407,428.755 3080.9,428.755 3080.9,428.755C3272.4,428.755 3427.88,584.229 3427.88,775.73ZM796.24,1322.76L796.24,1250.45C796.24,1199.03 836.16,1157.27 885.331,1157.27C885.331,1157.27 946.847,1157.27 946.847,1157.27C996.017,1157.27 1035.94,1199.03 1035.94,1250.45L1035.94,1644.81L2507.37,1644.81L2507.37,1250.45C2507.37,1199.03 2547.29,1157.27 2596.46,1157.27C2596.46,1157.27 2657.98,1157.27 2657.98,1157.27C2707.15,1157.27 2747.07,1199.03 2747.07,1250.45L2747.07,1322.76C2756.66,1319.22 2767.02,1317.29 2777.83,1317.29C2777.83,1317.29 2839.34,1317.29 2839.34,1317.29C2888.51,1317.29 2928.43,1357.21 2928.43,1406.38L2928.43,1527.32C2933.51,1526.26 2938.77,1525.71 2944.16,1525.71L2995.3,1525.71C3036.18,1525.71 3069.37,1557.59 3069.37,1596.86C3069.37,1596.86 3069.37,1946.44 3069.37,1946.44C3069.37,1985.72 3036.18,2017.6 2995.3,2017.6C2995.3,2017.6 2944.16,2017.6 2944.16,2017.6C2938.77,2017.6 2933.51,2017.04 2928.43,2015.99L2928.43,2136.92C2928.43,2186.09 2888.51,2226.01 2839.34,2226.01L2777.83,2226.01C2767.02,2226.01 2756.66,2224.08 2747.07,2220.55L2747.07,2292.85C2747.07,2344.28 2707.15,2386.03 2657.98,2386.03C2657.98,2386.03 2596.46,2386.03 2596.46,2386.03C2547.29,2386.03 2507.37,2344.28 2507.37,2292.85L2507.37,1898.5L1035.94,1898.5L1035.94,2292.85C1035.94,2344.28 996.017,2386.03 946.847,2386.03C946.847,2386.03 885.331,2386.03 885.331,2386.03C836.16,2386.03 796.24,2344.28 796.24,2292.85L796.24,2220.55C786.651,2224.08 776.29,2226.01 765.482,2226.01L703.967,2226.01C654.796,2226.01 614.876,2186.09 614.876,2136.92L614.876,2015.99C609.801,2017.04 604.539,2017.6 599.144,2017.6C599.144,2017.6 548.003,2017.6 548.003,2017.6C507.125,2017.6 473.937,1985.72 473.937,1946.44C473.937,1946.44 473.937,1596.86 473.937,1596.86C473.937,1557.59 507.125,1525.71 548.003,1525.71L599.144,1525.71C604.539,1525.71 609.801,1526.26 614.876,1527.32L614.876,1406.38C614.876,1357.21 654.796,1317.29 703.967,1317.29C703.967,1317.29 765.482,1317.29 765.482,1317.29C776.29,1317.29 786.651,1319.22 796.24,1322.76ZM977.604,1250.45C977.604,1232.7 963.822,1218.29 946.847,1218.29L885.331,1218.29C868.355,1218.29 854.573,1232.7 854.573,1250.45L854.573,2292.85C854.573,2310.61 868.355,2325.02 885.331,2325.02L946.847,2325.02C963.822,2325.02 977.604,2310.61 977.604,2292.85L977.604,1250.45ZM2565.7,1250.45C2565.7,1232.7 2579.49,1218.29 2596.46,1218.29L2657.98,1218.29C2674.95,1218.29 2688.73,1232.7 2688.73,1250.45L2688.73,2292.85C2688.73,2310.61 2674.95,2325.02 2657.98,2325.02L2596.46,2325.02C2579.49,2325.02 2565.7,2310.61 2565.7,2292.85L2565.7,1250.45ZM673.209,1406.38L673.209,2136.92C673.209,2153.9 686.991,2167.68 703.967,2167.68L765.482,2167.68C782.458,2167.68 796.24,2153.9 796.24,2136.92L796.24,1406.38C796.24,1389.41 782.458,1375.63 765.482,1375.63L703.967,1375.63C686.991,1375.63 673.209,1389.41 673.209,1406.38ZM2870.1,1406.38L2870.1,2136.92C2870.1,2153.9 2856.32,2167.68 2839.34,2167.68L2777.83,2167.68C2760.85,2167.68 2747.07,2153.9 2747.07,2136.92L2747.07,1406.38C2747.07,1389.41 2760.85,1375.63 2777.83,1375.63L2839.34,1375.63C2856.32,1375.63 2870.1,1389.41 2870.1,1406.38ZM614.876,1577.5C610.535,1574.24 605.074,1572.3 599.144,1572.3L548.003,1572.3C533.89,1572.3 522.433,1583.3 522.433,1596.86L522.433,1946.44C522.433,1960 533.89,1971.01 548.003,1971.01L599.144,1971.01C605.074,1971.01 610.535,1969.07 614.876,1965.81L614.876,1577.5ZM2928.43,1965.81L2928.43,1577.5C2932.77,1574.24 2938.23,1572.3 2944.16,1572.3L2995.3,1572.3C3009.42,1572.3 3020.87,1583.3 3020.87,1596.86L3020.87,1946.44C3020.87,1960 3009.42,1971.01 2995.3,1971.01L2944.16,1971.01C2938.23,1971.01 2932.77,1969.07 2928.43,1965.81ZM2507.37,1703.14L1035.94,1703.14L1035.94,1840.16L2507.37,1840.16L2507.37,1898.38L2507.37,1659.46L2507.37,1703.14Z"/>
|
|
||||||
</svg>
|
|
Before Width: | Height: | Size: 4.7 KiB |
Before Width: | Height: | Size: 9.8 KiB |
@ -1,348 +0,0 @@
|
|||||||
import { NUMPY_RAND_MAX, NUMPY_RAND_MIN } from 'app/constants';
|
|
||||||
import { Dimensions } from 'features/canvas/store/canvasTypes';
|
|
||||||
import { GenerationState } from 'features/parameters/store/generationSlice';
|
|
||||||
import { SystemState } from 'features/system/store/systemSlice';
|
|
||||||
import { Vector2d } from 'konva/lib/types';
|
|
||||||
|
|
||||||
import {
|
|
||||||
CanvasState,
|
|
||||||
isCanvasMaskLine,
|
|
||||||
} from 'features/canvas/store/canvasTypes';
|
|
||||||
import createMaskStage from 'features/canvas/util/generateMask';
|
|
||||||
import { getCanvasBaseLayer } from 'features/canvas/util/konvaInstanceProvider';
|
|
||||||
import type {
|
|
||||||
FacetoolType,
|
|
||||||
UpscalingLevel,
|
|
||||||
} from 'features/parameters/store/postprocessingSlice';
|
|
||||||
import { PostprocessingState } from 'features/parameters/store/postprocessingSlice';
|
|
||||||
import { InvokeTabName } from 'features/ui/store/tabMap';
|
|
||||||
import openBase64ImageInTab from './openBase64ImageInTab';
|
|
||||||
import randomInt from './randomInt';
|
|
||||||
import { stringToSeedWeightsArray } from './seedWeightPairs';
|
|
||||||
import { getIsImageDataTransparent, getIsImageDataWhite } from './arrayBuffer';
|
|
||||||
|
|
||||||
export type FrontendToBackendParametersConfig = {
|
|
||||||
generationMode: InvokeTabName;
|
|
||||||
generationState: GenerationState;
|
|
||||||
postprocessingState: PostprocessingState;
|
|
||||||
canvasState: CanvasState;
|
|
||||||
systemState: SystemState;
|
|
||||||
imageToProcessUrl?: string;
|
|
||||||
};
|
|
||||||
|
|
||||||
export type BackendGenerationParameters = {
|
|
||||||
prompt: string;
|
|
||||||
iterations: number;
|
|
||||||
steps: number;
|
|
||||||
cfg_scale: number;
|
|
||||||
threshold: number;
|
|
||||||
perlin: number;
|
|
||||||
height: number;
|
|
||||||
width: number;
|
|
||||||
sampler_name: string;
|
|
||||||
seed: number;
|
|
||||||
progress_images: boolean;
|
|
||||||
progress_latents: boolean;
|
|
||||||
save_intermediates: number;
|
|
||||||
generation_mode: InvokeTabName;
|
|
||||||
init_mask: string;
|
|
||||||
init_img?: string;
|
|
||||||
fit?: boolean;
|
|
||||||
seam_size?: number;
|
|
||||||
seam_blur?: number;
|
|
||||||
seam_strength?: number;
|
|
||||||
seam_steps?: number;
|
|
||||||
tile_size?: number;
|
|
||||||
infill_method?: string;
|
|
||||||
force_outpaint?: boolean;
|
|
||||||
seamless?: boolean;
|
|
||||||
hires_fix?: boolean;
|
|
||||||
strength?: number;
|
|
||||||
invert_mask?: boolean;
|
|
||||||
inpaint_replace?: number;
|
|
||||||
bounding_box?: Vector2d & Dimensions;
|
|
||||||
inpaint_width?: number;
|
|
||||||
inpaint_height?: number;
|
|
||||||
with_variations?: Array<Array<number>>;
|
|
||||||
variation_amount?: number;
|
|
||||||
enable_image_debugging?: boolean;
|
|
||||||
h_symmetry_time_pct?: number;
|
|
||||||
v_symmetry_time_pct?: number;
|
|
||||||
};
|
|
||||||
|
|
||||||
export type BackendEsrGanParameters = {
|
|
||||||
level: UpscalingLevel;
|
|
||||||
denoise_str: number;
|
|
||||||
strength: number;
|
|
||||||
};
|
|
||||||
|
|
||||||
export type BackendFacetoolParameters = {
|
|
||||||
type: FacetoolType;
|
|
||||||
strength: number;
|
|
||||||
codeformer_fidelity?: number;
|
|
||||||
};
|
|
||||||
|
|
||||||
export type BackendParameters = {
|
|
||||||
generationParameters: BackendGenerationParameters;
|
|
||||||
esrganParameters: false | BackendEsrGanParameters;
|
|
||||||
facetoolParameters: false | BackendFacetoolParameters;
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Translates/formats frontend state into parameters suitable
|
|
||||||
* for consumption by the API.
|
|
||||||
*/
|
|
||||||
export const frontendToBackendParameters = (
|
|
||||||
config: FrontendToBackendParametersConfig
|
|
||||||
): BackendParameters => {
|
|
||||||
const canvasBaseLayer = getCanvasBaseLayer();
|
|
||||||
|
|
||||||
const {
|
|
||||||
generationMode,
|
|
||||||
generationState,
|
|
||||||
postprocessingState,
|
|
||||||
canvasState,
|
|
||||||
systemState,
|
|
||||||
} = config;
|
|
||||||
|
|
||||||
const {
|
|
||||||
codeformerFidelity,
|
|
||||||
facetoolStrength,
|
|
||||||
facetoolType,
|
|
||||||
hiresFix,
|
|
||||||
hiresStrength,
|
|
||||||
shouldRunESRGAN,
|
|
||||||
shouldRunFacetool,
|
|
||||||
upscalingLevel,
|
|
||||||
upscalingStrength,
|
|
||||||
upscalingDenoising,
|
|
||||||
} = postprocessingState;
|
|
||||||
|
|
||||||
const {
|
|
||||||
cfgScale,
|
|
||||||
height,
|
|
||||||
img2imgStrength,
|
|
||||||
infillMethod,
|
|
||||||
initialImage,
|
|
||||||
iterations,
|
|
||||||
perlin,
|
|
||||||
prompt,
|
|
||||||
negativePrompt,
|
|
||||||
sampler,
|
|
||||||
seamBlur,
|
|
||||||
seamless,
|
|
||||||
seamSize,
|
|
||||||
seamSteps,
|
|
||||||
seamStrength,
|
|
||||||
seed,
|
|
||||||
seedWeights,
|
|
||||||
shouldFitToWidthHeight,
|
|
||||||
shouldGenerateVariations,
|
|
||||||
shouldRandomizeSeed,
|
|
||||||
steps,
|
|
||||||
threshold,
|
|
||||||
tileSize,
|
|
||||||
variationAmount,
|
|
||||||
width,
|
|
||||||
shouldUseSymmetry,
|
|
||||||
horizontalSymmetrySteps,
|
|
||||||
verticalSymmetrySteps,
|
|
||||||
} = generationState;
|
|
||||||
|
|
||||||
const {
|
|
||||||
shouldDisplayInProgressType,
|
|
||||||
saveIntermediatesInterval,
|
|
||||||
enableImageDebugging,
|
|
||||||
} = systemState;
|
|
||||||
|
|
||||||
const generationParameters: BackendGenerationParameters = {
|
|
||||||
prompt,
|
|
||||||
iterations,
|
|
||||||
steps,
|
|
||||||
cfg_scale: cfgScale,
|
|
||||||
threshold,
|
|
||||||
perlin,
|
|
||||||
height,
|
|
||||||
width,
|
|
||||||
sampler_name: sampler,
|
|
||||||
seed,
|
|
||||||
progress_images: shouldDisplayInProgressType === 'full-res',
|
|
||||||
progress_latents: shouldDisplayInProgressType === 'latents',
|
|
||||||
save_intermediates: saveIntermediatesInterval,
|
|
||||||
generation_mode: generationMode,
|
|
||||||
init_mask: '',
|
|
||||||
};
|
|
||||||
|
|
||||||
let esrganParameters: false | BackendEsrGanParameters = false;
|
|
||||||
let facetoolParameters: false | BackendFacetoolParameters = false;
|
|
||||||
|
|
||||||
if (negativePrompt !== '') {
|
|
||||||
generationParameters.prompt = `${prompt} [${negativePrompt}]`;
|
|
||||||
}
|
|
||||||
|
|
||||||
generationParameters.seed = shouldRandomizeSeed
|
|
||||||
? randomInt(NUMPY_RAND_MIN, NUMPY_RAND_MAX)
|
|
||||||
: seed;
|
|
||||||
|
|
||||||
// Symmetry Settings
|
|
||||||
if (shouldUseSymmetry) {
|
|
||||||
if (horizontalSymmetrySteps > 0) {
|
|
||||||
generationParameters.h_symmetry_time_pct = Math.max(
|
|
||||||
0,
|
|
||||||
Math.min(1, horizontalSymmetrySteps / steps)
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (verticalSymmetrySteps > 0) {
|
|
||||||
generationParameters.v_symmetry_time_pct = Math.max(
|
|
||||||
0,
|
|
||||||
Math.min(1, verticalSymmetrySteps / steps)
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// txt2img exclusive parameters
|
|
||||||
if (generationMode === 'txt2img') {
|
|
||||||
generationParameters.hires_fix = hiresFix;
|
|
||||||
|
|
||||||
if (hiresFix) generationParameters.strength = hiresStrength;
|
|
||||||
}
|
|
||||||
|
|
||||||
// parameters common to txt2img and img2img
|
|
||||||
if (['txt2img', 'img2img'].includes(generationMode)) {
|
|
||||||
generationParameters.seamless = seamless;
|
|
||||||
|
|
||||||
if (shouldRunESRGAN) {
|
|
||||||
esrganParameters = {
|
|
||||||
level: upscalingLevel,
|
|
||||||
denoise_str: upscalingDenoising,
|
|
||||||
strength: upscalingStrength,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
if (shouldRunFacetool) {
|
|
||||||
facetoolParameters = {
|
|
||||||
type: facetoolType,
|
|
||||||
strength: facetoolStrength,
|
|
||||||
};
|
|
||||||
if (facetoolType === 'codeformer') {
|
|
||||||
facetoolParameters.codeformer_fidelity = codeformerFidelity;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// img2img exclusive parameters
|
|
||||||
if (generationMode === 'img2img' && initialImage) {
|
|
||||||
generationParameters.init_img =
|
|
||||||
typeof initialImage === 'string' ? initialImage : initialImage.url;
|
|
||||||
generationParameters.strength = img2imgStrength;
|
|
||||||
generationParameters.fit = shouldFitToWidthHeight;
|
|
||||||
}
|
|
||||||
|
|
||||||
// inpainting exclusive parameters
|
|
||||||
if (generationMode === 'unifiedCanvas' && canvasBaseLayer) {
|
|
||||||
const {
|
|
||||||
layerState: { objects },
|
|
||||||
boundingBoxCoordinates,
|
|
||||||
boundingBoxDimensions,
|
|
||||||
stageScale,
|
|
||||||
isMaskEnabled,
|
|
||||||
shouldPreserveMaskedArea,
|
|
||||||
boundingBoxScaleMethod: boundingBoxScale,
|
|
||||||
scaledBoundingBoxDimensions,
|
|
||||||
} = canvasState;
|
|
||||||
|
|
||||||
const boundingBox = {
|
|
||||||
...boundingBoxCoordinates,
|
|
||||||
...boundingBoxDimensions,
|
|
||||||
};
|
|
||||||
|
|
||||||
const { dataURL: maskDataURL, imageData: maskImageData } = createMaskStage(
|
|
||||||
isMaskEnabled ? objects.filter(isCanvasMaskLine) : [],
|
|
||||||
boundingBox
|
|
||||||
);
|
|
||||||
|
|
||||||
generationParameters.init_mask = maskDataURL;
|
|
||||||
|
|
||||||
generationParameters.fit = false;
|
|
||||||
|
|
||||||
generationParameters.strength = img2imgStrength;
|
|
||||||
|
|
||||||
generationParameters.invert_mask = shouldPreserveMaskedArea;
|
|
||||||
|
|
||||||
generationParameters.bounding_box = boundingBox;
|
|
||||||
|
|
||||||
const tempScale = canvasBaseLayer.scale();
|
|
||||||
|
|
||||||
canvasBaseLayer.scale({
|
|
||||||
x: 1 / stageScale,
|
|
||||||
y: 1 / stageScale,
|
|
||||||
});
|
|
||||||
|
|
||||||
const absPos = canvasBaseLayer.getAbsolutePosition();
|
|
||||||
|
|
||||||
const imageDataURL = canvasBaseLayer.toDataURL({
|
|
||||||
x: boundingBox.x + absPos.x,
|
|
||||||
y: boundingBox.y + absPos.y,
|
|
||||||
width: boundingBox.width,
|
|
||||||
height: boundingBox.height,
|
|
||||||
});
|
|
||||||
|
|
||||||
const ctx = canvasBaseLayer.getContext();
|
|
||||||
const imageData = ctx.getImageData(
|
|
||||||
boundingBox.x + absPos.x,
|
|
||||||
boundingBox.y + absPos.y,
|
|
||||||
boundingBox.width,
|
|
||||||
boundingBox.height
|
|
||||||
);
|
|
||||||
|
|
||||||
const doesBaseHaveTransparency = getIsImageDataTransparent(imageData);
|
|
||||||
const doesMaskHaveTransparency = getIsImageDataWhite(maskImageData);
|
|
||||||
|
|
||||||
if (enableImageDebugging) {
|
|
||||||
openBase64ImageInTab([
|
|
||||||
{ base64: maskDataURL, caption: 'mask sent as init_mask' },
|
|
||||||
{ base64: imageDataURL, caption: 'image sent as init_img' },
|
|
||||||
]);
|
|
||||||
}
|
|
||||||
|
|
||||||
canvasBaseLayer.scale(tempScale);
|
|
||||||
|
|
||||||
generationParameters.init_img = imageDataURL;
|
|
||||||
|
|
||||||
generationParameters.progress_images = false;
|
|
||||||
|
|
||||||
if (boundingBoxScale !== 'none') {
|
|
||||||
generationParameters.inpaint_width = scaledBoundingBoxDimensions.width;
|
|
||||||
generationParameters.inpaint_height = scaledBoundingBoxDimensions.height;
|
|
||||||
}
|
|
||||||
|
|
||||||
generationParameters.seam_size = seamSize;
|
|
||||||
generationParameters.seam_blur = seamBlur;
|
|
||||||
generationParameters.seam_strength = seamStrength;
|
|
||||||
generationParameters.seam_steps = seamSteps;
|
|
||||||
generationParameters.tile_size = tileSize;
|
|
||||||
generationParameters.infill_method = infillMethod;
|
|
||||||
generationParameters.force_outpaint = false;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (shouldGenerateVariations) {
|
|
||||||
generationParameters.variation_amount = variationAmount;
|
|
||||||
if (seedWeights) {
|
|
||||||
generationParameters.with_variations =
|
|
||||||
stringToSeedWeightsArray(seedWeights);
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
generationParameters.variation_amount = 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (enableImageDebugging) {
|
|
||||||
generationParameters.enable_image_debugging = enableImageDebugging;
|
|
||||||
}
|
|
||||||
|
|
||||||
return {
|
|
||||||
generationParameters,
|
|
||||||
esrganParameters,
|
|
||||||
facetoolParameters,
|
|
||||||
};
|
|
||||||
};
|
|
@ -21,7 +21,6 @@ import {
|
|||||||
CanvasLayer,
|
CanvasLayer,
|
||||||
LAYER_NAMES_DICT,
|
LAYER_NAMES_DICT,
|
||||||
} from 'features/canvas/store/canvasTypes';
|
} from 'features/canvas/store/canvasTypes';
|
||||||
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-es';
|
import { isEqual } from 'lodash-es';
|
||||||
|
@ -1,172 +0,0 @@
|
|||||||
import { AnyAction, ThunkAction } from '@reduxjs/toolkit';
|
|
||||||
import * as InvokeAI from 'app/types/invokeai';
|
|
||||||
import { RootState } from 'app/store/store';
|
|
||||||
// import { addImage } from 'features/gallery/store/gallerySlice';
|
|
||||||
import {
|
|
||||||
addToast,
|
|
||||||
setCurrentStatus,
|
|
||||||
setIsCancelable,
|
|
||||||
setIsProcessing,
|
|
||||||
setProcessingIndeterminateTask,
|
|
||||||
} from 'features/system/store/systemSlice';
|
|
||||||
import i18n from 'i18n';
|
|
||||||
import { v4 as uuidv4 } from 'uuid';
|
|
||||||
import copyImage from '../../util/copyImage';
|
|
||||||
import downloadFile from '../../util/downloadFile';
|
|
||||||
import { getCanvasBaseLayer } from '../../util/konvaInstanceProvider';
|
|
||||||
import layerToDataURL from '../../util/layerToDataURL';
|
|
||||||
import { setMergedCanvas } from '../canvasSlice';
|
|
||||||
import { CanvasState } from '../canvasTypes';
|
|
||||||
|
|
||||||
type MergeAndUploadCanvasConfig = {
|
|
||||||
cropVisible?: boolean;
|
|
||||||
cropToBoundingBox?: boolean;
|
|
||||||
shouldSaveToGallery?: boolean;
|
|
||||||
shouldDownload?: boolean;
|
|
||||||
shouldCopy?: boolean;
|
|
||||||
shouldSetAsInitialImage?: boolean;
|
|
||||||
};
|
|
||||||
|
|
||||||
const defaultConfig: MergeAndUploadCanvasConfig = {
|
|
||||||
cropVisible: false,
|
|
||||||
cropToBoundingBox: false,
|
|
||||||
shouldSaveToGallery: false,
|
|
||||||
shouldDownload: false,
|
|
||||||
shouldCopy: false,
|
|
||||||
shouldSetAsInitialImage: true,
|
|
||||||
};
|
|
||||||
|
|
||||||
export const mergeAndUploadCanvas =
|
|
||||||
(config = defaultConfig): ThunkAction<void, RootState, unknown, AnyAction> =>
|
|
||||||
async (dispatch, getState) => {
|
|
||||||
const {
|
|
||||||
cropVisible,
|
|
||||||
cropToBoundingBox,
|
|
||||||
shouldSaveToGallery,
|
|
||||||
shouldDownload,
|
|
||||||
shouldCopy,
|
|
||||||
shouldSetAsInitialImage,
|
|
||||||
} = config;
|
|
||||||
|
|
||||||
dispatch(setProcessingIndeterminateTask('Exporting Image'));
|
|
||||||
dispatch(setIsCancelable(false));
|
|
||||||
|
|
||||||
const state = getState() as RootState;
|
|
||||||
|
|
||||||
const {
|
|
||||||
stageScale,
|
|
||||||
boundingBoxCoordinates,
|
|
||||||
boundingBoxDimensions,
|
|
||||||
stageCoordinates,
|
|
||||||
} = state.canvas as CanvasState;
|
|
||||||
|
|
||||||
const canvasBaseLayer = getCanvasBaseLayer();
|
|
||||||
|
|
||||||
if (!canvasBaseLayer) {
|
|
||||||
dispatch(setIsProcessing(false));
|
|
||||||
dispatch(setIsCancelable(true));
|
|
||||||
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const { dataURL, boundingBox: originalBoundingBox } = layerToDataURL(
|
|
||||||
canvasBaseLayer,
|
|
||||||
stageScale,
|
|
||||||
stageCoordinates,
|
|
||||||
cropToBoundingBox
|
|
||||||
? { ...boundingBoxCoordinates, ...boundingBoxDimensions }
|
|
||||||
: undefined
|
|
||||||
);
|
|
||||||
|
|
||||||
if (!dataURL) {
|
|
||||||
dispatch(setIsProcessing(false));
|
|
||||||
dispatch(setIsCancelable(true));
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const formData = new FormData();
|
|
||||||
|
|
||||||
formData.append(
|
|
||||||
'data',
|
|
||||||
JSON.stringify({
|
|
||||||
dataURL,
|
|
||||||
filename: 'merged_canvas.png',
|
|
||||||
kind: shouldSaveToGallery ? 'result' : 'temp',
|
|
||||||
cropVisible,
|
|
||||||
})
|
|
||||||
);
|
|
||||||
|
|
||||||
const response = await fetch(`${window.location.origin}/upload`, {
|
|
||||||
method: 'POST',
|
|
||||||
body: formData,
|
|
||||||
});
|
|
||||||
|
|
||||||
const image = (await response.json()) as InvokeAI.ImageUploadResponse;
|
|
||||||
|
|
||||||
const { url, width, height } = image;
|
|
||||||
|
|
||||||
const newImage: InvokeAI._Image = {
|
|
||||||
uuid: uuidv4(),
|
|
||||||
category: shouldSaveToGallery ? 'result' : 'user',
|
|
||||||
...image,
|
|
||||||
};
|
|
||||||
|
|
||||||
if (shouldDownload) {
|
|
||||||
downloadFile(url);
|
|
||||||
dispatch(
|
|
||||||
addToast({
|
|
||||||
title: i18n.t('toast.downloadImageStarted'),
|
|
||||||
status: 'success',
|
|
||||||
duration: 2500,
|
|
||||||
isClosable: true,
|
|
||||||
})
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (shouldCopy) {
|
|
||||||
copyImage(url, width, height);
|
|
||||||
dispatch(
|
|
||||||
addToast({
|
|
||||||
title: i18n.t('toast.imageCopied'),
|
|
||||||
status: 'success',
|
|
||||||
duration: 2500,
|
|
||||||
isClosable: true,
|
|
||||||
})
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (shouldSaveToGallery) {
|
|
||||||
dispatch(addImage({ image: newImage, category: 'result' }));
|
|
||||||
dispatch(
|
|
||||||
addToast({
|
|
||||||
title: i18n.t('toast.imageSavedToGallery'),
|
|
||||||
status: 'success',
|
|
||||||
duration: 2500,
|
|
||||||
isClosable: true,
|
|
||||||
})
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (shouldSetAsInitialImage) {
|
|
||||||
dispatch(
|
|
||||||
setMergedCanvas({
|
|
||||||
kind: 'image',
|
|
||||||
layer: 'base',
|
|
||||||
...originalBoundingBox,
|
|
||||||
image: newImage,
|
|
||||||
})
|
|
||||||
);
|
|
||||||
dispatch(
|
|
||||||
addToast({
|
|
||||||
title: i18n.t('toast.canvasMerged'),
|
|
||||||
status: 'success',
|
|
||||||
duration: 2500,
|
|
||||||
isClosable: true,
|
|
||||||
})
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
dispatch(setIsProcessing(false));
|
|
||||||
dispatch(setCurrentStatus(i18n.t('common.statusConnected')));
|
|
||||||
dispatch(setIsCancelable(true));
|
|
||||||
};
|
|
@ -1,34 +0,0 @@
|
|||||||
/**
|
|
||||||
* Copies an image to the clipboard by drawing it to a canvas and then
|
|
||||||
* calling toBlob() on the canvas.
|
|
||||||
*/
|
|
||||||
const copyImage = (url: string, width: number, height: number) => {
|
|
||||||
const imageElement = document.createElement('img');
|
|
||||||
|
|
||||||
imageElement.addEventListener('load', () => {
|
|
||||||
const canvas = document.createElement('canvas');
|
|
||||||
canvas.width = width;
|
|
||||||
canvas.height = height;
|
|
||||||
const context = canvas.getContext('2d');
|
|
||||||
|
|
||||||
if (!context) return;
|
|
||||||
|
|
||||||
context.drawImage(imageElement, 0, 0);
|
|
||||||
|
|
||||||
canvas.toBlob((blob) => {
|
|
||||||
blob &&
|
|
||||||
navigator.clipboard.write([
|
|
||||||
new ClipboardItem({
|
|
||||||
[blob.type]: blob,
|
|
||||||
}),
|
|
||||||
]);
|
|
||||||
});
|
|
||||||
|
|
||||||
canvas.remove();
|
|
||||||
imageElement.remove();
|
|
||||||
});
|
|
||||||
|
|
||||||
imageElement.src = url;
|
|
||||||
};
|
|
||||||
|
|
||||||
export default copyImage;
|
|
@ -1,14 +0,0 @@
|
|||||||
/**
|
|
||||||
* Downloads a file, given its URL.
|
|
||||||
*/
|
|
||||||
const downloadFile = (url: string) => {
|
|
||||||
const a = document.createElement('a');
|
|
||||||
a.href = url;
|
|
||||||
a.download = '';
|
|
||||||
document.body.appendChild(a);
|
|
||||||
a.click();
|
|
||||||
document.body.removeChild(a);
|
|
||||||
a.remove();
|
|
||||||
};
|
|
||||||
|
|
||||||
export default downloadFile;
|
|
@ -1,53 +0,0 @@
|
|||||||
import Konva from 'konva';
|
|
||||||
import { IRect, Vector2d } from 'konva/lib/types';
|
|
||||||
|
|
||||||
const layerToDataURL = (
|
|
||||||
layer: Konva.Layer,
|
|
||||||
stageScale: number,
|
|
||||||
stageCoordinates: Vector2d,
|
|
||||||
boundingBox?: IRect
|
|
||||||
) => {
|
|
||||||
const tempScale = layer.scale();
|
|
||||||
|
|
||||||
const relativeClientRect = layer.getClientRect({
|
|
||||||
relativeTo: layer.getParent(),
|
|
||||||
});
|
|
||||||
|
|
||||||
// Scale the canvas before getting it as a Blob
|
|
||||||
layer.scale({
|
|
||||||
x: 1 / stageScale,
|
|
||||||
y: 1 / stageScale,
|
|
||||||
});
|
|
||||||
|
|
||||||
const { x, y, width, height } = layer.getClientRect();
|
|
||||||
const dataURLBoundingBox = boundingBox
|
|
||||||
? {
|
|
||||||
x: boundingBox.x + stageCoordinates.x,
|
|
||||||
y: boundingBox.y + stageCoordinates.y,
|
|
||||||
width: boundingBox.width,
|
|
||||||
height: boundingBox.height,
|
|
||||||
}
|
|
||||||
: {
|
|
||||||
x: x,
|
|
||||||
y: y,
|
|
||||||
width: width,
|
|
||||||
height: height,
|
|
||||||
};
|
|
||||||
|
|
||||||
const dataURL = layer.toDataURL(dataURLBoundingBox);
|
|
||||||
|
|
||||||
// Unscale the canvas
|
|
||||||
layer.scale(tempScale);
|
|
||||||
|
|
||||||
return {
|
|
||||||
dataURL,
|
|
||||||
boundingBox: {
|
|
||||||
x: relativeClientRect.x,
|
|
||||||
y: relativeClientRect.y,
|
|
||||||
width: width,
|
|
||||||
height: height,
|
|
||||||
},
|
|
||||||
};
|
|
||||||
};
|
|
||||||
|
|
||||||
export default layerToDataURL;
|
|
@ -1,442 +0,0 @@
|
|||||||
// import { NumberSize, Resizable } from 're-resizable';
|
|
||||||
|
|
||||||
// import {
|
|
||||||
// Box,
|
|
||||||
// ButtonGroup,
|
|
||||||
// Flex,
|
|
||||||
// Grid,
|
|
||||||
// Icon,
|
|
||||||
// chakra,
|
|
||||||
// useTheme,
|
|
||||||
// } from '@chakra-ui/react';
|
|
||||||
// import { requestImages } from 'app/socketio/actions';
|
|
||||||
// import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
|
|
||||||
// import IAIButton from 'common/components/IAIButton';
|
|
||||||
// import IAICheckbox from 'common/components/IAICheckbox';
|
|
||||||
// import IAIIconButton from 'common/components/IAIIconButton';
|
|
||||||
// import IAIPopover from 'common/components/IAIPopover';
|
|
||||||
// import IAISlider from 'common/components/IAISlider';
|
|
||||||
// import { setDoesCanvasNeedScaling } from 'features/canvas/store/canvasSlice';
|
|
||||||
// import { imageGallerySelector } from 'features/gallery/store/gallerySelectors';
|
|
||||||
// import {
|
|
||||||
// selectNextImage,
|
|
||||||
// selectPrevImage,
|
|
||||||
// setCurrentCategory,
|
|
||||||
// setGalleryImageMinimumWidth,
|
|
||||||
// setGalleryImageObjectFit,
|
|
||||||
// setGalleryWidth,
|
|
||||||
// setShouldAutoSwitchToNewImages,
|
|
||||||
// setShouldHoldGalleryOpen,
|
|
||||||
// setShouldUseSingleGalleryColumn,
|
|
||||||
// } from 'features/gallery/store/gallerySlice';
|
|
||||||
// import {
|
|
||||||
// setShouldPinGallery,
|
|
||||||
// setShouldShowGallery,
|
|
||||||
// } from 'features/ui/store/uiSlice';
|
|
||||||
// import { InvokeTabName } from 'features/ui/store/tabMap';
|
|
||||||
|
|
||||||
// import { clamp } from 'lodash-es';
|
|
||||||
// import { Direction } from 're-resizable/lib/resizer';
|
|
||||||
// import React, {
|
|
||||||
// ChangeEvent,
|
|
||||||
// useCallback,
|
|
||||||
// useEffect,
|
|
||||||
// useRef,
|
|
||||||
// useState,
|
|
||||||
// } from 'react';
|
|
||||||
// import { useHotkeys } from 'react-hotkeys-hook';
|
|
||||||
// import { useTranslation } from 'react-i18next';
|
|
||||||
// import { BsPinAngle, BsPinAngleFill } from 'react-icons/bs';
|
|
||||||
// import { FaImage, FaUser, FaWrench } from 'react-icons/fa';
|
|
||||||
// import { MdPhotoLibrary } from 'react-icons/md';
|
|
||||||
// import { CSSTransition } from 'react-transition-group';
|
|
||||||
// import HoverableImage from './HoverableImage';
|
|
||||||
// import { APP_GALLERY_HEIGHT_PINNED } from 'theme/util/constants';
|
|
||||||
|
|
||||||
// import './ImageGallery.css';
|
|
||||||
// import { no_scrollbar } from 'theme/components/scrollbar';
|
|
||||||
// import ImageGalleryContent from './ImageGalleryContent';
|
|
||||||
|
|
||||||
// const ChakraResizeable = chakra(Resizable, {
|
|
||||||
// shouldForwardProp: (prop) => !['sx'].includes(prop),
|
|
||||||
// });
|
|
||||||
|
|
||||||
// const GALLERY_SHOW_BUTTONS_MIN_WIDTH = 320;
|
|
||||||
// const GALLERY_IMAGE_WIDTH_OFFSET = 40;
|
|
||||||
|
|
||||||
// const GALLERY_TAB_WIDTHS: Record<
|
|
||||||
// InvokeTabName,
|
|
||||||
// { galleryMinWidth: number; galleryMaxWidth: number }
|
|
||||||
// > = {
|
|
||||||
// txt2img: { galleryMinWidth: 200, galleryMaxWidth: 500 },
|
|
||||||
// img2img: { galleryMinWidth: 200, galleryMaxWidth: 500 },
|
|
||||||
// unifiedCanvas: { galleryMinWidth: 200, galleryMaxWidth: 200 },
|
|
||||||
// nodes: { galleryMinWidth: 200, galleryMaxWidth: 500 },
|
|
||||||
// postprocess: { galleryMinWidth: 200, galleryMaxWidth: 500 },
|
|
||||||
// training: { galleryMinWidth: 200, galleryMaxWidth: 500 },
|
|
||||||
// };
|
|
||||||
|
|
||||||
// const LIGHTBOX_GALLERY_WIDTH = 400;
|
|
||||||
|
|
||||||
// export default function ImageGallery() {
|
|
||||||
// const dispatch = useAppDispatch();
|
|
||||||
// const { direction } = useTheme();
|
|
||||||
|
|
||||||
// const { t } = useTranslation();
|
|
||||||
|
|
||||||
// const {
|
|
||||||
// images,
|
|
||||||
// currentCategory,
|
|
||||||
// currentImageUuid,
|
|
||||||
// shouldPinGallery,
|
|
||||||
// shouldShowGallery,
|
|
||||||
// galleryImageMinimumWidth,
|
|
||||||
// galleryGridTemplateColumns,
|
|
||||||
// activeTabName,
|
|
||||||
// galleryImageObjectFit,
|
|
||||||
// shouldHoldGalleryOpen,
|
|
||||||
// shouldAutoSwitchToNewImages,
|
|
||||||
// areMoreImagesAvailable,
|
|
||||||
// galleryWidth,
|
|
||||||
// isLightboxOpen,
|
|
||||||
// isStaging,
|
|
||||||
// shouldEnableResize,
|
|
||||||
// shouldUseSingleGalleryColumn,
|
|
||||||
// } = useAppSelector(imageGallerySelector);
|
|
||||||
|
|
||||||
// const { galleryMinWidth, galleryMaxWidth } = isLightboxOpen
|
|
||||||
// ? {
|
|
||||||
// galleryMinWidth: LIGHTBOX_GALLERY_WIDTH,
|
|
||||||
// galleryMaxWidth: LIGHTBOX_GALLERY_WIDTH,
|
|
||||||
// }
|
|
||||||
// : GALLERY_TAB_WIDTHS[activeTabName];
|
|
||||||
|
|
||||||
// const [shouldShowButtons, setShouldShowButtons] = useState<boolean>(
|
|
||||||
// galleryWidth >= GALLERY_SHOW_BUTTONS_MIN_WIDTH
|
|
||||||
// );
|
|
||||||
|
|
||||||
// const [isResizing, setIsResizing] = useState(false);
|
|
||||||
// const [galleryResizeHeight, setGalleryResizeHeight] = useState(0);
|
|
||||||
|
|
||||||
// const galleryRef = useRef<HTMLDivElement>(null);
|
|
||||||
// const galleryContainerRef = useRef<HTMLDivElement>(null);
|
|
||||||
// const timeoutIdRef = useRef<number | null>(null);
|
|
||||||
|
|
||||||
// useEffect(() => {
|
|
||||||
// setShouldShowButtons(galleryWidth >= GALLERY_SHOW_BUTTONS_MIN_WIDTH);
|
|
||||||
// }, [galleryWidth]);
|
|
||||||
|
|
||||||
// const handleSetShouldPinGallery = () => {
|
|
||||||
// !shouldPinGallery && dispatch(setShouldShowGallery(true));
|
|
||||||
// dispatch(setShouldPinGallery(!shouldPinGallery));
|
|
||||||
// dispatch(setDoesCanvasNeedScaling(true));
|
|
||||||
// };
|
|
||||||
|
|
||||||
// const handleToggleGallery = () => {
|
|
||||||
// shouldShowGallery ? handleCloseGallery() : handleOpenGallery();
|
|
||||||
// };
|
|
||||||
|
|
||||||
// const handleOpenGallery = () => {
|
|
||||||
// dispatch(setShouldShowGallery(true));
|
|
||||||
// shouldPinGallery && dispatch(setDoesCanvasNeedScaling(true));
|
|
||||||
// };
|
|
||||||
|
|
||||||
// const handleCloseGallery = useCallback(() => {
|
|
||||||
// dispatch(setShouldShowGallery(false));
|
|
||||||
// dispatch(setShouldHoldGalleryOpen(false));
|
|
||||||
// setTimeout(
|
|
||||||
// () => shouldPinGallery && dispatch(setDoesCanvasNeedScaling(true)),
|
|
||||||
// 400
|
|
||||||
// );
|
|
||||||
// }, [dispatch, shouldPinGallery]);
|
|
||||||
|
|
||||||
// const handleClickLoadMore = () => {
|
|
||||||
// dispatch(requestImages(currentCategory));
|
|
||||||
// };
|
|
||||||
|
|
||||||
// const handleChangeGalleryImageMinimumWidth = (v: number) => {
|
|
||||||
// dispatch(setGalleryImageMinimumWidth(v));
|
|
||||||
// };
|
|
||||||
|
|
||||||
// const setCloseGalleryTimer = () => {
|
|
||||||
// if (shouldHoldGalleryOpen) return;
|
|
||||||
// timeoutIdRef.current = window.setTimeout(() => handleCloseGallery(), 500);
|
|
||||||
// };
|
|
||||||
|
|
||||||
// const cancelCloseGalleryTimer = () => {
|
|
||||||
// timeoutIdRef.current && window.clearTimeout(timeoutIdRef.current);
|
|
||||||
// };
|
|
||||||
|
|
||||||
// useHotkeys(
|
|
||||||
// 'g',
|
|
||||||
// () => {
|
|
||||||
// handleToggleGallery();
|
|
||||||
// },
|
|
||||||
// [shouldShowGallery, shouldPinGallery]
|
|
||||||
// );
|
|
||||||
|
|
||||||
// useHotkeys(
|
|
||||||
// 'left',
|
|
||||||
// () => {
|
|
||||||
// dispatch(selectPrevImage());
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// enabled: !isStaging || activeTabName !== 'unifiedCanvas',
|
|
||||||
// },
|
|
||||||
// [isStaging]
|
|
||||||
// );
|
|
||||||
|
|
||||||
// useHotkeys(
|
|
||||||
// 'right',
|
|
||||||
// () => {
|
|
||||||
// dispatch(selectNextImage());
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// enabled: !isStaging || activeTabName !== 'unifiedCanvas',
|
|
||||||
// },
|
|
||||||
// [isStaging]
|
|
||||||
// );
|
|
||||||
|
|
||||||
// useHotkeys(
|
|
||||||
// 'shift+g',
|
|
||||||
// () => {
|
|
||||||
// handleSetShouldPinGallery();
|
|
||||||
// },
|
|
||||||
// [shouldPinGallery]
|
|
||||||
// );
|
|
||||||
|
|
||||||
// useHotkeys(
|
|
||||||
// 'esc',
|
|
||||||
// () => {
|
|
||||||
// dispatch(setShouldShowGallery(false));
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// enabled: () => !shouldPinGallery,
|
|
||||||
// preventDefault: true,
|
|
||||||
// },
|
|
||||||
// [shouldPinGallery]
|
|
||||||
// );
|
|
||||||
|
|
||||||
// const IMAGE_SIZE_STEP = 32;
|
|
||||||
|
|
||||||
// useHotkeys(
|
|
||||||
// 'shift+up',
|
|
||||||
// () => {
|
|
||||||
// if (galleryImageMinimumWidth < 256) {
|
|
||||||
// const newMinWidth = clamp(
|
|
||||||
// galleryImageMinimumWidth + IMAGE_SIZE_STEP,
|
|
||||||
// 32,
|
|
||||||
// 256
|
|
||||||
// );
|
|
||||||
// dispatch(setGalleryImageMinimumWidth(newMinWidth));
|
|
||||||
// }
|
|
||||||
// },
|
|
||||||
// [galleryImageMinimumWidth]
|
|
||||||
// );
|
|
||||||
|
|
||||||
// useHotkeys(
|
|
||||||
// 'shift+down',
|
|
||||||
// () => {
|
|
||||||
// if (galleryImageMinimumWidth > 32) {
|
|
||||||
// const newMinWidth = clamp(
|
|
||||||
// galleryImageMinimumWidth - IMAGE_SIZE_STEP,
|
|
||||||
// 32,
|
|
||||||
// 256
|
|
||||||
// );
|
|
||||||
// dispatch(setGalleryImageMinimumWidth(newMinWidth));
|
|
||||||
// }
|
|
||||||
// },
|
|
||||||
// [galleryImageMinimumWidth]
|
|
||||||
// );
|
|
||||||
|
|
||||||
// useEffect(() => {
|
|
||||||
// function handleClickOutside(e: MouseEvent) {
|
|
||||||
// if (
|
|
||||||
// !shouldPinGallery &&
|
|
||||||
// galleryRef.current &&
|
|
||||||
// !galleryRef.current.contains(e.target as Node)
|
|
||||||
// ) {
|
|
||||||
// handleCloseGallery();
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
// document.addEventListener('mousedown', handleClickOutside);
|
|
||||||
// return () => {
|
|
||||||
// document.removeEventListener('mousedown', handleClickOutside);
|
|
||||||
// };
|
|
||||||
// }, [handleCloseGallery, shouldPinGallery]);
|
|
||||||
|
|
||||||
// return (
|
|
||||||
// <CSSTransition
|
|
||||||
// nodeRef={galleryRef}
|
|
||||||
// in={shouldShowGallery || shouldHoldGalleryOpen}
|
|
||||||
// unmountOnExit
|
|
||||||
// timeout={200}
|
|
||||||
// classNames={`${direction}-image-gallery-css-transition`}
|
|
||||||
// >
|
|
||||||
// <Box
|
|
||||||
// className={`${direction}-image-gallery-css-transition`}
|
|
||||||
// sx={
|
|
||||||
// shouldPinGallery
|
|
||||||
// ? { zIndex: 1, insetInlineEnd: 0 }
|
|
||||||
// : {
|
|
||||||
// zIndex: 100,
|
|
||||||
// position: 'fixed',
|
|
||||||
// height: '100vh',
|
|
||||||
// top: 0,
|
|
||||||
// insetInlineEnd: 0,
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
// ref={galleryRef}
|
|
||||||
// onMouseLeave={!shouldPinGallery ? setCloseGalleryTimer : undefined}
|
|
||||||
// onMouseEnter={!shouldPinGallery ? cancelCloseGalleryTimer : undefined}
|
|
||||||
// onMouseOver={!shouldPinGallery ? cancelCloseGalleryTimer : undefined}
|
|
||||||
// >
|
|
||||||
// <ChakraResizeable
|
|
||||||
// sx={{
|
|
||||||
// padding: 4,
|
|
||||||
// display: 'flex',
|
|
||||||
// flexDirection: 'column',
|
|
||||||
// rowGap: 4,
|
|
||||||
// borderRadius: shouldPinGallery ? 'base' : 0,
|
|
||||||
// borderInlineStartWidth: 5,
|
|
||||||
// // boxShadow: '0 0 1rem blackAlpha.700',
|
|
||||||
// bg: 'base.850',
|
|
||||||
// borderColor: 'base.700',
|
|
||||||
// }}
|
|
||||||
// minWidth={galleryMinWidth}
|
|
||||||
// maxWidth={shouldPinGallery ? galleryMaxWidth : window.innerWidth}
|
|
||||||
// data-pinned={shouldPinGallery}
|
|
||||||
// handleStyles={
|
|
||||||
// direction === 'rtl'
|
|
||||||
// ? {
|
|
||||||
// right: {
|
|
||||||
// width: '15px',
|
|
||||||
// },
|
|
||||||
// }
|
|
||||||
// : {
|
|
||||||
// left: {
|
|
||||||
// width: '15px',
|
|
||||||
// },
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
// enable={
|
|
||||||
// direction === 'rtl'
|
|
||||||
// ? {
|
|
||||||
// right: shouldEnableResize,
|
|
||||||
// }
|
|
||||||
// : {
|
|
||||||
// left: shouldEnableResize,
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
// size={{
|
|
||||||
// width: galleryWidth,
|
|
||||||
// height: shouldPinGallery ? '100%' : '100vh',
|
|
||||||
// }}
|
|
||||||
// onResizeStart={(
|
|
||||||
// _event:
|
|
||||||
// | React.MouseEvent<HTMLElement>
|
|
||||||
// | React.TouchEvent<HTMLElement>,
|
|
||||||
// _direction: Direction,
|
|
||||||
// elementRef: HTMLElement
|
|
||||||
// ) => {
|
|
||||||
// setGalleryResizeHeight(elementRef.clientHeight);
|
|
||||||
// elementRef.style.height = `${elementRef.clientHeight}px`;
|
|
||||||
// if (shouldPinGallery) {
|
|
||||||
// elementRef.style.position = 'fixed';
|
|
||||||
// elementRef.style.insetInlineEnd = '1rem';
|
|
||||||
// setIsResizing(true);
|
|
||||||
// }
|
|
||||||
// }}
|
|
||||||
// onResizeStop={(
|
|
||||||
// _event: MouseEvent | TouchEvent,
|
|
||||||
// _direction: Direction,
|
|
||||||
// elementRef: HTMLElement,
|
|
||||||
// delta: NumberSize
|
|
||||||
// ) => {
|
|
||||||
// const newWidth = shouldPinGallery
|
|
||||||
// ? clamp(
|
|
||||||
// Number(galleryWidth) + delta.width,
|
|
||||||
// galleryMinWidth,
|
|
||||||
// Number(galleryMaxWidth)
|
|
||||||
// )
|
|
||||||
// : Number(galleryWidth) + delta.width;
|
|
||||||
// dispatch(setGalleryWidth(newWidth));
|
|
||||||
|
|
||||||
// elementRef.removeAttribute('data-resize-alert');
|
|
||||||
|
|
||||||
// if (shouldPinGallery) {
|
|
||||||
// console.log('unpin');
|
|
||||||
// elementRef.style.position = 'relative';
|
|
||||||
// elementRef.style.removeProperty('inset-inline-end');
|
|
||||||
// elementRef.style.setProperty(
|
|
||||||
// 'height',
|
|
||||||
// shouldPinGallery ? '100%' : '100vh'
|
|
||||||
// );
|
|
||||||
// setIsResizing(false);
|
|
||||||
// dispatch(setDoesCanvasNeedScaling(true));
|
|
||||||
// }
|
|
||||||
// }}
|
|
||||||
// onResize={(
|
|
||||||
// _event: MouseEvent | TouchEvent,
|
|
||||||
// _direction: Direction,
|
|
||||||
// elementRef: HTMLElement,
|
|
||||||
// delta: NumberSize
|
|
||||||
// ) => {
|
|
||||||
// const newWidth = clamp(
|
|
||||||
// Number(galleryWidth) + delta.width,
|
|
||||||
// galleryMinWidth,
|
|
||||||
// Number(
|
|
||||||
// shouldPinGallery ? galleryMaxWidth : 0.95 * window.innerWidth
|
|
||||||
// )
|
|
||||||
// );
|
|
||||||
|
|
||||||
// if (
|
|
||||||
// newWidth >= GALLERY_SHOW_BUTTONS_MIN_WIDTH &&
|
|
||||||
// !shouldShowButtons
|
|
||||||
// ) {
|
|
||||||
// setShouldShowButtons(true);
|
|
||||||
// } else if (
|
|
||||||
// newWidth < GALLERY_SHOW_BUTTONS_MIN_WIDTH &&
|
|
||||||
// shouldShowButtons
|
|
||||||
// ) {
|
|
||||||
// setShouldShowButtons(false);
|
|
||||||
// }
|
|
||||||
|
|
||||||
// if (
|
|
||||||
// galleryImageMinimumWidth >
|
|
||||||
// newWidth - GALLERY_IMAGE_WIDTH_OFFSET
|
|
||||||
// ) {
|
|
||||||
// dispatch(
|
|
||||||
// setGalleryImageMinimumWidth(
|
|
||||||
// newWidth - GALLERY_IMAGE_WIDTH_OFFSET
|
|
||||||
// )
|
|
||||||
// );
|
|
||||||
// }
|
|
||||||
|
|
||||||
// if (shouldPinGallery) {
|
|
||||||
// if (newWidth >= galleryMaxWidth) {
|
|
||||||
// elementRef.setAttribute('data-resize-alert', 'true');
|
|
||||||
// } else {
|
|
||||||
// elementRef.removeAttribute('data-resize-alert');
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
|
|
||||||
// elementRef.style.height = `${galleryResizeHeight}px`;
|
|
||||||
// }}
|
|
||||||
// >
|
|
||||||
// <ImageGalleryContent />
|
|
||||||
// </ChakraResizeable>
|
|
||||||
// {isResizing && (
|
|
||||||
// <Box
|
|
||||||
// style={{
|
|
||||||
// width: `${galleryWidth}px`,
|
|
||||||
// height: '100%',
|
|
||||||
// }}
|
|
||||||
// />
|
|
||||||
// )}
|
|
||||||
// </Box>
|
|
||||||
// </CSSTransition>
|
|
||||||
// );
|
|
||||||
// }
|
|
||||||
|
|
||||||
export default {};
|
|
@ -1,28 +0,0 @@
|
|||||||
import { createSelector } from '@reduxjs/toolkit';
|
|
||||||
import { useAppSelector } from 'app/store/storeHooks';
|
|
||||||
import { gallerySelector } from '../store/gallerySelectors';
|
|
||||||
|
|
||||||
const selector = createSelector(gallerySelector, (gallery) => ({
|
|
||||||
resultImages: gallery.categories.result.images,
|
|
||||||
userImages: gallery.categories.user.images,
|
|
||||||
}));
|
|
||||||
|
|
||||||
const useGetImageByUuid = () => {
|
|
||||||
const { resultImages, userImages } = useAppSelector(selector);
|
|
||||||
|
|
||||||
return (uuid: string) => {
|
|
||||||
const resultImagesResult = resultImages.find(
|
|
||||||
(image) => image.uuid === uuid
|
|
||||||
);
|
|
||||||
if (resultImagesResult) {
|
|
||||||
return resultImagesResult;
|
|
||||||
}
|
|
||||||
|
|
||||||
const userImagesResult = userImages.find((image) => image.uuid === uuid);
|
|
||||||
if (userImagesResult) {
|
|
||||||
return userImagesResult;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
};
|
|
||||||
|
|
||||||
export default useGetImageByUuid;
|
|
@ -1,52 +0,0 @@
|
|||||||
export const iterationGraph = {
|
|
||||||
nodes: {
|
|
||||||
'0': {
|
|
||||||
id: '0',
|
|
||||||
type: 'range',
|
|
||||||
start: 0,
|
|
||||||
stop: 5,
|
|
||||||
step: 1,
|
|
||||||
},
|
|
||||||
'1': {
|
|
||||||
collection: [],
|
|
||||||
id: '1',
|
|
||||||
index: 0,
|
|
||||||
type: 'iterate',
|
|
||||||
},
|
|
||||||
'2': {
|
|
||||||
cfg_scale: 7.5,
|
|
||||||
height: 512,
|
|
||||||
id: '2',
|
|
||||||
model: '',
|
|
||||||
progress_images: false,
|
|
||||||
prompt: 'dog',
|
|
||||||
sampler_name: 'lms',
|
|
||||||
seamless: false,
|
|
||||||
steps: 11,
|
|
||||||
type: 'txt2img',
|
|
||||||
width: 512,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
edges: [
|
|
||||||
{
|
|
||||||
source: {
|
|
||||||
field: 'collection',
|
|
||||||
node_id: '0',
|
|
||||||
},
|
|
||||||
destination: {
|
|
||||||
field: 'collection',
|
|
||||||
node_id: '1',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
source: {
|
|
||||||
field: 'item',
|
|
||||||
node_id: '1',
|
|
||||||
},
|
|
||||||
destination: {
|
|
||||||
field: 'seed',
|
|
||||||
node_id: '2',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
],
|
|
||||||
};
|
|
@ -1,7 +0,0 @@
|
|||||||
import { createSelector } from '@reduxjs/toolkit';
|
|
||||||
import { RootState } from 'app/store/store';
|
|
||||||
|
|
||||||
export const invocationTemplatesSelector = createSelector(
|
|
||||||
(state: RootState) => state.nodes,
|
|
||||||
(nodes) => nodes.invocationTemplates
|
|
||||||
);
|
|
@ -1,19 +0,0 @@
|
|||||||
export const getGenerationMode = (
|
|
||||||
baseIsPartiallyTransparent: boolean,
|
|
||||||
baseIsFullyTransparent: boolean,
|
|
||||||
doesMaskHaveBlackPixels: boolean
|
|
||||||
): 'txt2img' | `img2img` | 'inpaint' | 'outpaint' => {
|
|
||||||
if (baseIsPartiallyTransparent) {
|
|
||||||
if (baseIsFullyTransparent) {
|
|
||||||
return 'txt2img';
|
|
||||||
}
|
|
||||||
|
|
||||||
return 'outpaint';
|
|
||||||
} else {
|
|
||||||
if (doesMaskHaveBlackPixels) {
|
|
||||||
return 'inpaint';
|
|
||||||
}
|
|
||||||
|
|
||||||
return 'img2img';
|
|
||||||
}
|
|
||||||
};
|
|
@ -13,12 +13,8 @@ import { buildTxt2ImgNode } from '../nodeBuilders/buildTextToImageNode';
|
|||||||
import { buildRangeNode } from '../nodeBuilders/buildRangeNode';
|
import { buildRangeNode } from '../nodeBuilders/buildRangeNode';
|
||||||
import { buildIterateNode } from '../nodeBuilders/buildIterateNode';
|
import { buildIterateNode } from '../nodeBuilders/buildIterateNode';
|
||||||
import { buildEdges } from '../edgeBuilders/buildEdges';
|
import { buildEdges } from '../edgeBuilders/buildEdges';
|
||||||
import { getCanvasData } from 'features/canvas/util/getCanvasData';
|
|
||||||
import { log } from 'app/logging/useLogger';
|
import { log } from 'app/logging/useLogger';
|
||||||
import { buildInpaintNode } from '../nodeBuilders/buildInpaintNode';
|
import { buildInpaintNode } from '../nodeBuilders/buildInpaintNode';
|
||||||
import { getCanvasGenerationMode } from 'features/canvas/util/getCanvasGenerationMode';
|
|
||||||
import { blobToDataURL } from 'features/canvas/util/blobToDataURL';
|
|
||||||
import openBase64ImageInTab from 'common/util/openBase64ImageInTab';
|
|
||||||
|
|
||||||
const moduleLog = log.child({ namespace: 'buildCanvasGraph' });
|
const moduleLog = log.child({ namespace: 'buildCanvasGraph' });
|
||||||
|
|
||||||
@ -46,8 +42,9 @@ const buildBaseNode = (
|
|||||||
/**
|
/**
|
||||||
* Builds the Canvas workflow graph and image blobs.
|
* Builds the Canvas workflow graph and image blobs.
|
||||||
*/
|
*/
|
||||||
export const buildCanvasGraphAndBlobs = async (
|
export const buildCanvasGraphComponents = async (
|
||||||
state: RootState
|
state: RootState,
|
||||||
|
generationMode: 'txt2img' | 'img2img' | 'inpaint' | 'outpaint'
|
||||||
): Promise<
|
): Promise<
|
||||||
| {
|
| {
|
||||||
rangeNode: RangeInvocation | RandomRangeInvocation;
|
rangeNode: RangeInvocation | RandomRangeInvocation;
|
||||||
@ -57,34 +54,9 @@ export const buildCanvasGraphAndBlobs = async (
|
|||||||
| ImageToImageInvocation
|
| ImageToImageInvocation
|
||||||
| InpaintInvocation;
|
| InpaintInvocation;
|
||||||
edges: Edge[];
|
edges: Edge[];
|
||||||
baseBlob: Blob;
|
|
||||||
maskBlob: Blob;
|
|
||||||
generationMode: 'txt2img' | 'img2img' | 'inpaint' | 'outpaint';
|
|
||||||
}
|
}
|
||||||
| undefined
|
| undefined
|
||||||
> => {
|
> => {
|
||||||
const canvasData = await getCanvasData(state);
|
|
||||||
|
|
||||||
if (!canvasData) {
|
|
||||||
moduleLog.error('Unable to create canvas data');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const { baseBlob, baseImageData, maskBlob, maskImageData } = canvasData;
|
|
||||||
|
|
||||||
const generationMode = getCanvasGenerationMode(baseImageData, maskImageData);
|
|
||||||
|
|
||||||
if (state.system.enableImageDebugging) {
|
|
||||||
const baseDataURL = await blobToDataURL(baseBlob);
|
|
||||||
const maskDataURL = await blobToDataURL(maskBlob);
|
|
||||||
openBase64ImageInTab([
|
|
||||||
{ base64: maskDataURL, caption: 'mask b64' },
|
|
||||||
{ base64: baseDataURL, caption: 'image b64' },
|
|
||||||
]);
|
|
||||||
}
|
|
||||||
|
|
||||||
moduleLog.debug(`Generation mode: ${generationMode}`);
|
|
||||||
|
|
||||||
// The base node is a txt2img, img2img or inpaint node
|
// The base node is a txt2img, img2img or inpaint node
|
||||||
const baseNode = buildBaseNode(generationMode, state);
|
const baseNode = buildBaseNode(generationMode, state);
|
||||||
|
|
||||||
@ -130,8 +102,5 @@ export const buildCanvasGraphAndBlobs = async (
|
|||||||
iterateNode,
|
iterateNode,
|
||||||
baseNode,
|
baseNode,
|
||||||
edges,
|
edges,
|
||||||
baseBlob,
|
|
||||||
maskBlob,
|
|
||||||
generationMode,
|
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
|
@ -1,67 +0,0 @@
|
|||||||
import { Flex, Icon, Image } from '@chakra-ui/react';
|
|
||||||
import { createSelector } from '@reduxjs/toolkit';
|
|
||||||
import { useAppSelector } from 'app/store/storeHooks';
|
|
||||||
import { systemSelector } from 'features/system/store/systemSelectors';
|
|
||||||
import { isEqual } from 'lodash-es';
|
|
||||||
import { memo } from 'react';
|
|
||||||
import { FaImage } from 'react-icons/fa';
|
|
||||||
|
|
||||||
const selector = createSelector(
|
|
||||||
[systemSelector],
|
|
||||||
(system) => {
|
|
||||||
const { progressImage } = system;
|
|
||||||
|
|
||||||
return {
|
|
||||||
progressImage,
|
|
||||||
};
|
|
||||||
},
|
|
||||||
{
|
|
||||||
memoizeOptions: {
|
|
||||||
resultEqualityCheck: isEqual,
|
|
||||||
},
|
|
||||||
}
|
|
||||||
);
|
|
||||||
|
|
||||||
const ProgressImage = () => {
|
|
||||||
const { progressImage } = useAppSelector(selector);
|
|
||||||
return progressImage ? (
|
|
||||||
<Flex
|
|
||||||
sx={{
|
|
||||||
position: 'relative',
|
|
||||||
w: 'full',
|
|
||||||
h: 'full',
|
|
||||||
alignItems: 'center',
|
|
||||||
justifyContent: 'center',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Image
|
|
||||||
draggable={false}
|
|
||||||
src={progressImage.dataURL}
|
|
||||||
width={progressImage.width}
|
|
||||||
height={progressImage.height}
|
|
||||||
sx={{
|
|
||||||
position: 'absolute',
|
|
||||||
objectFit: 'contain',
|
|
||||||
maxWidth: '100%',
|
|
||||||
maxHeight: '100%',
|
|
||||||
height: 'auto',
|
|
||||||
borderRadius: 'base',
|
|
||||||
p: 2,
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</Flex>
|
|
||||||
) : (
|
|
||||||
<Flex
|
|
||||||
sx={{
|
|
||||||
w: 'full',
|
|
||||||
h: 'full',
|
|
||||||
alignItems: 'center',
|
|
||||||
justifyContent: 'center',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Icon color="base.400" boxSize={32} as={FaImage} />
|
|
||||||
</Flex>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default memo(ProgressImage);
|
|
@ -1,159 +0,0 @@
|
|||||||
import { Flex, Text } from '@chakra-ui/react';
|
|
||||||
import { createSelector } from '@reduxjs/toolkit';
|
|
||||||
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
|
|
||||||
import { systemSelector } from 'features/system/store/systemSelectors';
|
|
||||||
import { memo } from 'react';
|
|
||||||
import { FaStopwatch } from 'react-icons/fa';
|
|
||||||
import { uiSelector } from 'features/ui/store/uiSelectors';
|
|
||||||
import IAIIconButton from 'common/components/IAIIconButton';
|
|
||||||
import { CloseIcon } from '@chakra-ui/icons';
|
|
||||||
import { useTranslation } from 'react-i18next';
|
|
||||||
import {
|
|
||||||
floatingProgressImageMoved,
|
|
||||||
floatingProgressImageResized,
|
|
||||||
setShouldShowProgressImages,
|
|
||||||
} from 'features/ui/store/uiSlice';
|
|
||||||
import { Rnd } from 'react-rnd';
|
|
||||||
import { Rect } from 'features/ui/store/uiTypes';
|
|
||||||
import { isEqual } from 'lodash-es';
|
|
||||||
import ProgressImage from './ProgressImage';
|
|
||||||
|
|
||||||
const selector = createSelector(
|
|
||||||
[systemSelector, uiSelector],
|
|
||||||
(system, ui) => {
|
|
||||||
const { isProcessing } = system;
|
|
||||||
const {
|
|
||||||
floatingProgressImageRect,
|
|
||||||
shouldShowProgressImages,
|
|
||||||
shouldAutoShowProgressImages,
|
|
||||||
} = ui;
|
|
||||||
|
|
||||||
const showProgressWindow =
|
|
||||||
shouldAutoShowProgressImages && isProcessing
|
|
||||||
? true
|
|
||||||
: shouldShowProgressImages;
|
|
||||||
|
|
||||||
return {
|
|
||||||
floatingProgressImageRect,
|
|
||||||
showProgressWindow,
|
|
||||||
};
|
|
||||||
},
|
|
||||||
{
|
|
||||||
memoizeOptions: {
|
|
||||||
resultEqualityCheck: isEqual,
|
|
||||||
},
|
|
||||||
}
|
|
||||||
);
|
|
||||||
|
|
||||||
const ProgressImagePreview = () => {
|
|
||||||
const dispatch = useAppDispatch();
|
|
||||||
|
|
||||||
const { showProgressWindow, floatingProgressImageRect } =
|
|
||||||
useAppSelector(selector);
|
|
||||||
|
|
||||||
const { t } = useTranslation();
|
|
||||||
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<IAIIconButton
|
|
||||||
onClick={() =>
|
|
||||||
dispatch(setShouldShowProgressImages(!showProgressWindow))
|
|
||||||
}
|
|
||||||
tooltip={t('ui.showProgressImages')}
|
|
||||||
isChecked={showProgressWindow}
|
|
||||||
sx={{
|
|
||||||
position: 'absolute',
|
|
||||||
bottom: 4,
|
|
||||||
insetInlineStart: 4,
|
|
||||||
}}
|
|
||||||
aria-label={t('ui.showProgressImages')}
|
|
||||||
icon={<FaStopwatch />}
|
|
||||||
/>
|
|
||||||
{showProgressWindow && (
|
|
||||||
<Rnd
|
|
||||||
bounds="window"
|
|
||||||
minHeight={200}
|
|
||||||
minWidth={200}
|
|
||||||
size={{
|
|
||||||
width: floatingProgressImageRect.width,
|
|
||||||
height: floatingProgressImageRect.height,
|
|
||||||
}}
|
|
||||||
position={{
|
|
||||||
x: floatingProgressImageRect.x,
|
|
||||||
y: floatingProgressImageRect.y,
|
|
||||||
}}
|
|
||||||
onDragStop={(e, d) => {
|
|
||||||
dispatch(floatingProgressImageMoved({ x: d.x, y: d.y }));
|
|
||||||
}}
|
|
||||||
onResizeStop={(e, direction, ref, delta, position) => {
|
|
||||||
const newRect: Partial<Rect> = {};
|
|
||||||
|
|
||||||
if (ref.style.width) {
|
|
||||||
newRect.width = ref.style.width;
|
|
||||||
}
|
|
||||||
if (ref.style.height) {
|
|
||||||
newRect.height = ref.style.height;
|
|
||||||
}
|
|
||||||
if (position.x) {
|
|
||||||
newRect.x = position.x;
|
|
||||||
}
|
|
||||||
if (position.x) {
|
|
||||||
newRect.y = position.y;
|
|
||||||
}
|
|
||||||
|
|
||||||
dispatch(floatingProgressImageResized(newRect));
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Flex
|
|
||||||
sx={{
|
|
||||||
position: 'relative',
|
|
||||||
w: 'full',
|
|
||||||
h: 'full',
|
|
||||||
alignItems: 'center',
|
|
||||||
justifyContent: 'center',
|
|
||||||
flexDir: 'column',
|
|
||||||
boxShadow: 'dark-lg',
|
|
||||||
bg: 'base.800',
|
|
||||||
borderRadius: 'base',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Flex
|
|
||||||
sx={{
|
|
||||||
w: 'full',
|
|
||||||
alignItems: 'center',
|
|
||||||
justifyContent: 'center',
|
|
||||||
p: 1.5,
|
|
||||||
pl: 4,
|
|
||||||
pr: 3,
|
|
||||||
bg: 'base.700',
|
|
||||||
borderTopRadius: 'base',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Flex
|
|
||||||
sx={{
|
|
||||||
flexGrow: 1,
|
|
||||||
userSelect: 'none',
|
|
||||||
cursor: 'move',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Text fontSize="sm" fontWeight={500}>
|
|
||||||
Progress Images
|
|
||||||
</Text>
|
|
||||||
</Flex>
|
|
||||||
<IAIIconButton
|
|
||||||
onClick={() => dispatch(setShouldShowProgressImages(false))}
|
|
||||||
aria-label={t('ui.hideProgressImages')}
|
|
||||||
size="xs"
|
|
||||||
icon={<CloseIcon />}
|
|
||||||
variant="ghost"
|
|
||||||
/>
|
|
||||||
</Flex>
|
|
||||||
<ProgressImage />
|
|
||||||
</Flex>
|
|
||||||
</Rnd>
|
|
||||||
)}
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default memo(ProgressImagePreview);
|
|
@ -1,97 +0,0 @@
|
|||||||
import type { PayloadAction } from '@reduxjs/toolkit';
|
|
||||||
import { createSlice } from '@reduxjs/toolkit';
|
|
||||||
|
|
||||||
export interface HiresState {
|
|
||||||
codeformerFidelity: number;
|
|
||||||
facetoolStrength: number;
|
|
||||||
facetoolType: FacetoolType;
|
|
||||||
hiresFix: boolean;
|
|
||||||
hiresStrength: number;
|
|
||||||
shouldLoopback: boolean;
|
|
||||||
shouldRunESRGAN: boolean;
|
|
||||||
shouldRunFacetool: boolean;
|
|
||||||
upscalingLevel: UpscalingLevel;
|
|
||||||
upscalingDenoising: number;
|
|
||||||
upscalingStrength: number;
|
|
||||||
}
|
|
||||||
|
|
||||||
export const initialHiresState: HiresState = {
|
|
||||||
codeformerFidelity: 0.75,
|
|
||||||
facetoolStrength: 0.75,
|
|
||||||
facetoolType: 'gfpgan',
|
|
||||||
hiresFix: false,
|
|
||||||
hiresStrength: 0.75,
|
|
||||||
hiresSteps: 30,
|
|
||||||
hiresWidth: 512,
|
|
||||||
hiresHeight: 512,
|
|
||||||
hiresModel: '',
|
|
||||||
shouldLoopback: false,
|
|
||||||
shouldRunESRGAN: false,
|
|
||||||
shouldRunFacetool: false,
|
|
||||||
upscalingLevel: 4,
|
|
||||||
upscalingDenoising: 0.75,
|
|
||||||
upscalingStrength: 0.75,
|
|
||||||
};
|
|
||||||
|
|
||||||
export const postprocessingSlice = createSlice({
|
|
||||||
name: 'postprocessing',
|
|
||||||
initialState: initialPostprocessingState,
|
|
||||||
reducers: {
|
|
||||||
setFacetoolStrength: (state, action: PayloadAction<number>) => {
|
|
||||||
state.facetoolStrength = action.payload;
|
|
||||||
},
|
|
||||||
setCodeformerFidelity: (state, action: PayloadAction<number>) => {
|
|
||||||
state.codeformerFidelity = action.payload;
|
|
||||||
},
|
|
||||||
setUpscalingLevel: (state, action: PayloadAction<UpscalingLevel>) => {
|
|
||||||
state.upscalingLevel = action.payload;
|
|
||||||
},
|
|
||||||
setUpscalingDenoising: (state, action: PayloadAction<number>) => {
|
|
||||||
state.upscalingDenoising = action.payload;
|
|
||||||
},
|
|
||||||
setUpscalingStrength: (state, action: PayloadAction<number>) => {
|
|
||||||
state.upscalingStrength = action.payload;
|
|
||||||
},
|
|
||||||
setHiresFix: (state, action: PayloadAction<boolean>) => {
|
|
||||||
state.hiresFix = action.payload;
|
|
||||||
},
|
|
||||||
setHiresStrength: (state, action: PayloadAction<number>) => {
|
|
||||||
state.hiresStrength = action.payload;
|
|
||||||
},
|
|
||||||
resetPostprocessingState: (state) => {
|
|
||||||
return {
|
|
||||||
...state,
|
|
||||||
...initialPostprocessingState,
|
|
||||||
};
|
|
||||||
},
|
|
||||||
setShouldRunFacetool: (state, action: PayloadAction<boolean>) => {
|
|
||||||
state.shouldRunFacetool = action.payload;
|
|
||||||
},
|
|
||||||
setFacetoolType: (state, action: PayloadAction<FacetoolType>) => {
|
|
||||||
state.facetoolType = action.payload;
|
|
||||||
},
|
|
||||||
setShouldRunESRGAN: (state, action: PayloadAction<boolean>) => {
|
|
||||||
state.shouldRunESRGAN = action.payload;
|
|
||||||
},
|
|
||||||
setShouldLoopback: (state, action: PayloadAction<boolean>) => {
|
|
||||||
state.shouldLoopback = action.payload;
|
|
||||||
},
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
export const {
|
|
||||||
resetPostprocessingState,
|
|
||||||
setCodeformerFidelity,
|
|
||||||
setFacetoolStrength,
|
|
||||||
setFacetoolType,
|
|
||||||
setHiresFix,
|
|
||||||
setHiresStrength,
|
|
||||||
setShouldLoopback,
|
|
||||||
setShouldRunESRGAN,
|
|
||||||
setShouldRunFacetool,
|
|
||||||
setUpscalingLevel,
|
|
||||||
setUpscalingDenoising,
|
|
||||||
setUpscalingStrength,
|
|
||||||
} = postprocessingSlice.actions;
|
|
||||||
|
|
||||||
export default postprocessingSlice.reducer;
|
|
@ -90,12 +90,6 @@ type SettingsModalProps = {
|
|||||||
children: ReactElement;
|
children: ReactElement;
|
||||||
};
|
};
|
||||||
|
|
||||||
/**
|
|
||||||
* Modal for app settings. Also provides Reset functionality in which the
|
|
||||||
* app's localstorage is wiped via redux-persist.
|
|
||||||
*
|
|
||||||
* Secondary post-reset modal is included here.
|
|
||||||
*/
|
|
||||||
const SettingsModal = ({ children }: SettingsModalProps) => {
|
const SettingsModal = ({ children }: SettingsModalProps) => {
|
||||||
const dispatch = useAppDispatch();
|
const dispatch = useAppDispatch();
|
||||||
const { t } = useTranslation();
|
const { t } = useTranslation();
|
||||||
|
@ -1,17 +0,0 @@
|
|||||||
import { RootState } from 'app/store/store';
|
|
||||||
import { useAppSelector } from 'app/store/storeHooks';
|
|
||||||
import { InvokeTabName } from 'features/ui/store/tabMap';
|
|
||||||
import { useCallback } from 'react';
|
|
||||||
|
|
||||||
export const useIsTabDisabled = () => {
|
|
||||||
const disabledTabs = useAppSelector(
|
|
||||||
(state: RootState) => state.config.disabledTabs
|
|
||||||
);
|
|
||||||
|
|
||||||
const isTabDisabled = useCallback(
|
|
||||||
(tab: InvokeTabName) => disabledTabs.includes(tab),
|
|
||||||
[disabledTabs]
|
|
||||||
);
|
|
||||||
|
|
||||||
return isTabDisabled;
|
|
||||||
};
|
|
@ -1,88 +0,0 @@
|
|||||||
import { Box, ChakraProps } from '@chakra-ui/react';
|
|
||||||
import { throttle } from 'lodash-es';
|
|
||||||
import { ReactNode, useEffect, useRef } from 'react';
|
|
||||||
|
|
||||||
const scrollShadowBaseStyles: ChakraProps['sx'] = {
|
|
||||||
position: 'absolute',
|
|
||||||
width: 'full',
|
|
||||||
height: 24,
|
|
||||||
left: 0,
|
|
||||||
pointerEvents: 'none',
|
|
||||||
transition: 'opacity 0.2s ease-in-out',
|
|
||||||
};
|
|
||||||
|
|
||||||
type ScrollableProps = {
|
|
||||||
children: ReactNode;
|
|
||||||
};
|
|
||||||
|
|
||||||
const Scrollable = ({ children }: ScrollableProps) => {
|
|
||||||
const scrollableRef = useRef<HTMLDivElement>(null);
|
|
||||||
const topShadowRef = useRef<HTMLDivElement>(null);
|
|
||||||
const bottomShadowRef = useRef<HTMLDivElement>(null);
|
|
||||||
|
|
||||||
const updateScrollShadowOpacity = throttle(
|
|
||||||
() => {
|
|
||||||
if (
|
|
||||||
!scrollableRef.current ||
|
|
||||||
!topShadowRef.current ||
|
|
||||||
!bottomShadowRef.current
|
|
||||||
) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
const { scrollTop, scrollHeight, offsetHeight } = scrollableRef.current;
|
|
||||||
|
|
||||||
if (scrollTop > 0) {
|
|
||||||
topShadowRef.current.style.opacity = '1';
|
|
||||||
} else {
|
|
||||||
topShadowRef.current.style.opacity = '0';
|
|
||||||
}
|
|
||||||
|
|
||||||
if (scrollTop >= scrollHeight - offsetHeight) {
|
|
||||||
bottomShadowRef.current.style.opacity = '0';
|
|
||||||
} else {
|
|
||||||
bottomShadowRef.current.style.opacity = '1';
|
|
||||||
}
|
|
||||||
},
|
|
||||||
33,
|
|
||||||
{ leading: true }
|
|
||||||
);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
updateScrollShadowOpacity();
|
|
||||||
}, [updateScrollShadowOpacity]);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Box position="relative" w="full" h="full">
|
|
||||||
<Box
|
|
||||||
ref={scrollableRef}
|
|
||||||
position="absolute"
|
|
||||||
w="full"
|
|
||||||
h="full"
|
|
||||||
overflowY="scroll"
|
|
||||||
onScroll={updateScrollShadowOpacity}
|
|
||||||
>
|
|
||||||
{children}
|
|
||||||
</Box>
|
|
||||||
<Box
|
|
||||||
ref={bottomShadowRef}
|
|
||||||
sx={{
|
|
||||||
...scrollShadowBaseStyles,
|
|
||||||
bottom: 0,
|
|
||||||
boxShadow:
|
|
||||||
'inset 0 -3.5rem 2rem -2rem var(--invokeai-colors-base-900)',
|
|
||||||
}}
|
|
||||||
></Box>
|
|
||||||
<Box
|
|
||||||
ref={topShadowRef}
|
|
||||||
sx={{
|
|
||||||
...scrollShadowBaseStyles,
|
|
||||||
top: 0,
|
|
||||||
boxShadow:
|
|
||||||
'inset 0 3.5rem 2rem -2rem var(--invokeai-colors-base-900)',
|
|
||||||
}}
|
|
||||||
></Box>
|
|
||||||
</Box>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default Scrollable;
|
|
@ -3,7 +3,6 @@ import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
|
|||||||
import IAIIconButton from 'common/components/IAIIconButton';
|
import IAIIconButton from 'common/components/IAIIconButton';
|
||||||
import { canvasMerged } from 'features/canvas/store/actions';
|
import { canvasMerged } from 'features/canvas/store/actions';
|
||||||
import { isStagingSelector } from 'features/canvas/store/canvasSelectors';
|
import { isStagingSelector } from 'features/canvas/store/canvasSelectors';
|
||||||
import { mergeAndUploadCanvas } from 'features/canvas/store/thunks/mergeAndUploadCanvas';
|
|
||||||
import { getCanvasBaseLayer } from 'features/canvas/util/konvaInstanceProvider';
|
import { getCanvasBaseLayer } from 'features/canvas/util/konvaInstanceProvider';
|
||||||
import { useHotkeys } from 'react-hotkeys-hook';
|
import { useHotkeys } from 'react-hotkeys-hook';
|
||||||
import { useTranslation } from 'react-i18next';
|
import { useTranslation } from 'react-i18next';
|
||||||
|
@ -1,19 +0,0 @@
|
|||||||
import { useAppSelector } from 'app/store/storeHooks';
|
|
||||||
import { memo } from 'react';
|
|
||||||
import { RootState } from 'app/store/store';
|
|
||||||
import UnifiedCanvasContentBeta from './UnifiedCanvasBeta/UnifiedCanvasContentBeta';
|
|
||||||
import UnifiedCanvasContent from './UnifiedCanvasContent';
|
|
||||||
|
|
||||||
const CanvasWorkspace = () => {
|
|
||||||
const shouldUseCanvasBetaLayout = useAppSelector(
|
|
||||||
(state: RootState) => state.ui.shouldUseCanvasBetaLayout
|
|
||||||
);
|
|
||||||
|
|
||||||
return shouldUseCanvasBetaLayout ? (
|
|
||||||
<UnifiedCanvasContentBeta />
|
|
||||||
) : (
|
|
||||||
<UnifiedCanvasContent />
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default memo(CanvasWorkspace);
|
|
@ -1,14 +0,0 @@
|
|||||||
import { useTheme } from '@chakra-ui/react';
|
|
||||||
import { useMemo } from 'react';
|
|
||||||
import { LangDirection } from '../components/common/ResizableDrawer/types';
|
|
||||||
|
|
||||||
export const useLangDirection = () => {
|
|
||||||
const theme = useTheme();
|
|
||||||
|
|
||||||
const langDirection = useMemo(
|
|
||||||
() => theme.direction as LangDirection,
|
|
||||||
[theme.direction]
|
|
||||||
);
|
|
||||||
|
|
||||||
return langDirection;
|
|
||||||
};
|
|
@ -3,6 +3,8 @@
|
|||||||
/* eslint-disable */
|
/* eslint-disable */
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
* DO NOT DELETE EVEN THOUGH IT IS NOT USED!
|
||||||
|
*
|
||||||
* Custom `request.ts` file for OpenAPI code generator.
|
* Custom `request.ts` file for OpenAPI code generator.
|
||||||
*
|
*
|
||||||
* Patches the request logic in such a way that we can extract headers from requests.
|
* Patches the request logic in such a way that we can extract headers from requests.
|
||||||
|
@ -1,24 +0,0 @@
|
|||||||
import { Graph, TextToImageInvocation } from '../api';
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Make a graph of however many images
|
|
||||||
*/
|
|
||||||
export const makeGraphOfXImages = (numberOfImages: string) =>
|
|
||||||
Array.from(Array(numberOfImages))
|
|
||||||
.map(
|
|
||||||
(_val, i): TextToImageInvocation => ({
|
|
||||||
id: i.toString(),
|
|
||||||
type: 'txt2img',
|
|
||||||
prompt: 'pizza',
|
|
||||||
steps: 50,
|
|
||||||
seed: 123,
|
|
||||||
scheduler: 'ddim',
|
|
||||||
})
|
|
||||||
)
|
|
||||||
.reduce(
|
|
||||||
(acc, val: TextToImageInvocation) => {
|
|
||||||
if (acc.nodes) acc.nodes[val.id] = val;
|
|
||||||
return acc;
|
|
||||||
},
|
|
||||||
{ nodes: {} } as Graph
|
|
||||||
);
|
|
@ -1,4 +1,4 @@
|
|||||||
export declare type InvokeAIThemeColors = {
|
export type InvokeAIThemeColors = {
|
||||||
base: Partial<InvokeAIPaletteSteps>;
|
base: Partial<InvokeAIPaletteSteps>;
|
||||||
accent: Partial<InvokeAIPaletteSteps>;
|
accent: Partial<InvokeAIPaletteSteps>;
|
||||||
working: Partial<InvokeAIPaletteSteps>;
|
working: Partial<InvokeAIPaletteSteps>;
|
||||||
@ -8,7 +8,7 @@ export declare type InvokeAIThemeColors = {
|
|||||||
gridLineColor: string;
|
gridLineColor: string;
|
||||||
};
|
};
|
||||||
|
|
||||||
export declare type InvokeAIPaletteSteps = {
|
export type InvokeAIPaletteSteps = {
|
||||||
0: string;
|
0: string;
|
||||||
50: string;
|
50: string;
|
||||||
100: string;
|
100: string;
|
||||||
|
@ -50,7 +50,7 @@
|
|||||||
resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.21.4.tgz#94003fdfc520bbe2875d4ae557b43ddb6d880f17"
|
resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.21.4.tgz#94003fdfc520bbe2875d4ae557b43ddb6d880f17"
|
||||||
integrity sha512-alVJj7k7zIxqBZ7BTRhz0IqJFxW1VJbm6N8JbcYhQ186df9ZBPbZBmWSqAMXwHGsCJdYks7z/voa3ibiS5bCIw==
|
integrity sha512-alVJj7k7zIxqBZ7BTRhz0IqJFxW1VJbm6N8JbcYhQ186df9ZBPbZBmWSqAMXwHGsCJdYks7z/voa3ibiS5bCIw==
|
||||||
|
|
||||||
"@babel/runtime@^7.0.0", "@babel/runtime@^7.12.1", "@babel/runtime@^7.12.13", "@babel/runtime@^7.12.5", "@babel/runtime@^7.18.3", "@babel/runtime@^7.19.4", "@babel/runtime@^7.20.6", "@babel/runtime@^7.5.5", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2":
|
"@babel/runtime@^7.0.0", "@babel/runtime@^7.12.1", "@babel/runtime@^7.12.13", "@babel/runtime@^7.12.5", "@babel/runtime@^7.18.3", "@babel/runtime@^7.19.4", "@babel/runtime@^7.20.6", "@babel/runtime@^7.9.2":
|
||||||
version "7.21.0"
|
version "7.21.0"
|
||||||
resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.21.0.tgz#5b55c9d394e5fcf304909a8b00c07dc217b56673"
|
resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.21.0.tgz#5b55c9d394e5fcf304909a8b00c07dc217b56673"
|
||||||
integrity sha512-xwII0//EObnq89Ji5AKYQaRYiW/nZ3llSv29d49IuxPhKbtJoLP+9QUUZ4nVragQVtaVGeZrpB+ZtG/Pdy/POw==
|
integrity sha512-xwII0//EObnq89Ji5AKYQaRYiW/nZ3llSv29d49IuxPhKbtJoLP+9QUUZ4nVragQVtaVGeZrpB+ZtG/Pdy/POw==
|
||||||
@ -2613,11 +2613,6 @@ clone@^1.0.2:
|
|||||||
resolved "https://registry.yarnpkg.com/clone/-/clone-1.0.4.tgz#da309cc263df15994c688ca902179ca3c7cd7c7e"
|
resolved "https://registry.yarnpkg.com/clone/-/clone-1.0.4.tgz#da309cc263df15994c688ca902179ca3c7cd7c7e"
|
||||||
integrity sha512-JQHZ2QMW6l3aH/j6xCqQThY/9OH4D/9ls34cgkUBiEeocRTU04tHfKPBsUK1PqZCUQM7GiA0IIXJSuXHI64Kbg==
|
integrity sha512-JQHZ2QMW6l3aH/j6xCqQThY/9OH4D/9ls34cgkUBiEeocRTU04tHfKPBsUK1PqZCUQM7GiA0IIXJSuXHI64Kbg==
|
||||||
|
|
||||||
clsx@^1.1.1:
|
|
||||||
version "1.2.1"
|
|
||||||
resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.2.1.tgz#0ddc4a20a549b59c93a4116bb26f5294ca17dc12"
|
|
||||||
integrity sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==
|
|
||||||
|
|
||||||
code-block-writer@^12.0.0:
|
code-block-writer@^12.0.0:
|
||||||
version "12.0.0"
|
version "12.0.0"
|
||||||
resolved "https://registry.yarnpkg.com/code-block-writer/-/code-block-writer-12.0.0.tgz#4dd58946eb4234105aff7f0035977b2afdc2a770"
|
resolved "https://registry.yarnpkg.com/code-block-writer/-/code-block-writer-12.0.0.tgz#4dd58946eb4234105aff7f0035977b2afdc2a770"
|
||||||
@ -3140,14 +3135,6 @@ doctrine@^3.0.0:
|
|||||||
dependencies:
|
dependencies:
|
||||||
esutils "^2.0.2"
|
esutils "^2.0.2"
|
||||||
|
|
||||||
dom-helpers@^5.0.1:
|
|
||||||
version "5.2.1"
|
|
||||||
resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-5.2.1.tgz#d9400536b2bf8225ad98fe052e029451ac40e902"
|
|
||||||
integrity sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==
|
|
||||||
dependencies:
|
|
||||||
"@babel/runtime" "^7.8.7"
|
|
||||||
csstype "^3.0.2"
|
|
||||||
|
|
||||||
dot-prop@^5.2.0:
|
dot-prop@^5.2.0:
|
||||||
version "5.3.0"
|
version "5.3.0"
|
||||||
resolved "https://registry.yarnpkg.com/dot-prop/-/dot-prop-5.3.0.tgz#90ccce708cd9cd82cc4dc8c3ddd9abdd55b20e88"
|
resolved "https://registry.yarnpkg.com/dot-prop/-/dot-prop-5.3.0.tgz#90ccce708cd9cd82cc4dc8c3ddd9abdd55b20e88"
|
||||||
@ -3575,11 +3562,6 @@ fast-loops@^1.1.3:
|
|||||||
resolved "https://registry.yarnpkg.com/fast-loops/-/fast-loops-1.1.3.tgz#ce96adb86d07e7bf9b4822ab9c6fac9964981f75"
|
resolved "https://registry.yarnpkg.com/fast-loops/-/fast-loops-1.1.3.tgz#ce96adb86d07e7bf9b4822ab9c6fac9964981f75"
|
||||||
integrity sha512-8EZzEP0eKkEEVX+drtd9mtuQ+/QrlfW/5MlwcwK5Nds6EkZ/tRzEexkzUY2mIssnAyVLT+TKHuRXmFNNXYUd6g==
|
integrity sha512-8EZzEP0eKkEEVX+drtd9mtuQ+/QrlfW/5MlwcwK5Nds6EkZ/tRzEexkzUY2mIssnAyVLT+TKHuRXmFNNXYUd6g==
|
||||||
|
|
||||||
fast-memoize@^2.5.1:
|
|
||||||
version "2.5.2"
|
|
||||||
resolved "https://registry.yarnpkg.com/fast-memoize/-/fast-memoize-2.5.2.tgz#79e3bb6a4ec867ea40ba0e7146816f6cdce9b57e"
|
|
||||||
integrity sha512-Ue0LwpDYErFbmNnZSF0UH6eImUwDmogUO1jyE+JbN2gsQz/jICm1Ve7t9QT0rNSsfJt+Hs4/S3GnsDVjL4HVrw==
|
|
||||||
|
|
||||||
fast-printf@^1.6.9:
|
fast-printf@^1.6.9:
|
||||||
version "1.6.9"
|
version "1.6.9"
|
||||||
resolved "https://registry.yarnpkg.com/fast-printf/-/fast-printf-1.6.9.tgz#212f56570d2dc8ccdd057ee93d50dd414d07d676"
|
resolved "https://registry.yarnpkg.com/fast-printf/-/fast-printf-1.6.9.tgz#212f56570d2dc8ccdd057ee93d50dd414d07d676"
|
||||||
@ -5458,13 +5440,6 @@ rc@1.2.8, rc@^1.2.7, rc@^1.2.8:
|
|||||||
minimist "^1.2.0"
|
minimist "^1.2.0"
|
||||||
strip-json-comments "~2.0.1"
|
strip-json-comments "~2.0.1"
|
||||||
|
|
||||||
re-resizable@6.9.6:
|
|
||||||
version "6.9.6"
|
|
||||||
resolved "https://registry.yarnpkg.com/re-resizable/-/re-resizable-6.9.6.tgz#b95d37e3821481b56ddfb1e12862940a791e827d"
|
|
||||||
integrity sha512-0xYKS5+Z0zk+vICQlcZW+g54CcJTTmHluA7JUUgvERDxnKAnytylcyPsA+BSFi759s5hPlHmBRegFrwXs2FuBQ==
|
|
||||||
dependencies:
|
|
||||||
fast-memoize "^2.5.1"
|
|
||||||
|
|
||||||
re-resizable@^6.9.9:
|
re-resizable@^6.9.9:
|
||||||
version "6.9.9"
|
version "6.9.9"
|
||||||
resolved "https://registry.yarnpkg.com/re-resizable/-/re-resizable-6.9.9.tgz#99e8b31c67a62115dc9c5394b7e55892265be216"
|
resolved "https://registry.yarnpkg.com/re-resizable/-/re-resizable-6.9.9.tgz#99e8b31c67a62115dc9c5394b7e55892265be216"
|
||||||
@ -5490,14 +5465,6 @@ react-dom@^18.2.0:
|
|||||||
loose-envify "^1.1.0"
|
loose-envify "^1.1.0"
|
||||||
scheduler "^0.23.0"
|
scheduler "^0.23.0"
|
||||||
|
|
||||||
react-draggable@4.4.5:
|
|
||||||
version "4.4.5"
|
|
||||||
resolved "https://registry.yarnpkg.com/react-draggable/-/react-draggable-4.4.5.tgz#9e37fe7ce1a4cf843030f521a0a4cc41886d7e7c"
|
|
||||||
integrity sha512-OMHzJdyJbYTZo4uQE393fHcqqPYsEtkjfMgvCHr6rejT+Ezn4OZbNyGH50vv+SunC1RMvwOTSWkEODQLzw1M9g==
|
|
||||||
dependencies:
|
|
||||||
clsx "^1.1.1"
|
|
||||||
prop-types "^15.8.1"
|
|
||||||
|
|
||||||
react-dropzone@^14.2.3:
|
react-dropzone@^14.2.3:
|
||||||
version "14.2.3"
|
version "14.2.3"
|
||||||
resolved "https://registry.yarnpkg.com/react-dropzone/-/react-dropzone-14.2.3.tgz#0acab68308fda2d54d1273a1e626264e13d4e84b"
|
resolved "https://registry.yarnpkg.com/react-dropzone/-/react-dropzone-14.2.3.tgz#0acab68308fda2d54d1273a1e626264e13d4e84b"
|
||||||
@ -5562,15 +5529,7 @@ react-is@^18.0.0:
|
|||||||
resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.2.0.tgz#199431eeaaa2e09f86427efbb4f1473edb47609b"
|
resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.2.0.tgz#199431eeaaa2e09f86427efbb4f1473edb47609b"
|
||||||
integrity sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==
|
integrity sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==
|
||||||
|
|
||||||
react-konva-utils@^1.0.4:
|
react-konva@^18.2.7:
|
||||||
version "1.0.4"
|
|
||||||
resolved "https://registry.yarnpkg.com/react-konva-utils/-/react-konva-utils-1.0.4.tgz#bce739a207f02fc5f0246f6ab16a0e295f5544af"
|
|
||||||
integrity sha512-K1J1K9MoVNGFrUxYt+dn7TUVqpppW3Y0fRcf42Ws1wzTQ2Od4qicCom9jnGxLiwh8zyhYaHAUn3hztgfTyYF7g==
|
|
||||||
dependencies:
|
|
||||||
react-konva "^18.0.0-0"
|
|
||||||
use-image "^1.1.0"
|
|
||||||
|
|
||||||
react-konva@^18.0.0-0, react-konva@^18.2.7:
|
|
||||||
version "18.2.7"
|
version "18.2.7"
|
||||||
resolved "https://registry.yarnpkg.com/react-konva/-/react-konva-18.2.7.tgz#f01735ac9ae35a7cd0f3ca359a898374ce791d04"
|
resolved "https://registry.yarnpkg.com/react-konva/-/react-konva-18.2.7.tgz#f01735ac9ae35a7cd0f3ca359a898374ce791d04"
|
||||||
integrity sha512-Q52ghaIR+2g3x14V5aIyt7VWNqPnWRotILo0Nj4YWVbNQisozrTJJ3/w68qb5Ar2fsYo7yXb4T6Nt4yZcGd2yg==
|
integrity sha512-Q52ghaIR+2g3x14V5aIyt7VWNqPnWRotILo0Nj4YWVbNQisozrTJJ3/w68qb5Ar2fsYo7yXb4T6Nt4yZcGd2yg==
|
||||||
@ -5624,15 +5583,6 @@ react-resizable-panels@^0.0.42:
|
|||||||
resolved "https://registry.yarnpkg.com/react-resizable-panels/-/react-resizable-panels-0.0.42.tgz#e1a5d7fde7be4d18f32d0e021a0b4edb28b9edfe"
|
resolved "https://registry.yarnpkg.com/react-resizable-panels/-/react-resizable-panels-0.0.42.tgz#e1a5d7fde7be4d18f32d0e021a0b4edb28b9edfe"
|
||||||
integrity sha512-nOaN9DeUTsmKjN3MFGaLd35kngGyO29SHRLdBRafYR1SV2F/LbWbpVUKVPwL2fBBTnQe2/rqOQwT4k+3cKeK+w==
|
integrity sha512-nOaN9DeUTsmKjN3MFGaLd35kngGyO29SHRLdBRafYR1SV2F/LbWbpVUKVPwL2fBBTnQe2/rqOQwT4k+3cKeK+w==
|
||||||
|
|
||||||
react-rnd@^10.4.1:
|
|
||||||
version "10.4.1"
|
|
||||||
resolved "https://registry.yarnpkg.com/react-rnd/-/react-rnd-10.4.1.tgz#9e1c3f244895d7862ef03be98b2a620848c3fba1"
|
|
||||||
integrity sha512-0m887AjQZr6p2ADLNnipquqsDq4XJu/uqVqI3zuoGD19tRm6uB83HmZWydtkilNp5EWsOHbLGF4IjWMdd5du8Q==
|
|
||||||
dependencies:
|
|
||||||
re-resizable "6.9.6"
|
|
||||||
react-draggable "4.4.5"
|
|
||||||
tslib "2.3.1"
|
|
||||||
|
|
||||||
react-style-singleton@^2.2.1:
|
react-style-singleton@^2.2.1:
|
||||||
version "2.2.1"
|
version "2.2.1"
|
||||||
resolved "https://registry.yarnpkg.com/react-style-singleton/-/react-style-singleton-2.2.1.tgz#f99e420492b2d8f34d38308ff660b60d0b1205b4"
|
resolved "https://registry.yarnpkg.com/react-style-singleton/-/react-style-singleton-2.2.1.tgz#f99e420492b2d8f34d38308ff660b60d0b1205b4"
|
||||||
@ -5642,16 +5592,6 @@ react-style-singleton@^2.2.1:
|
|||||||
invariant "^2.2.4"
|
invariant "^2.2.4"
|
||||||
tslib "^2.0.0"
|
tslib "^2.0.0"
|
||||||
|
|
||||||
react-transition-group@^4.4.5:
|
|
||||||
version "4.4.5"
|
|
||||||
resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.5.tgz#e53d4e3f3344da8521489fbef8f2581d42becdd1"
|
|
||||||
integrity sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==
|
|
||||||
dependencies:
|
|
||||||
"@babel/runtime" "^7.5.5"
|
|
||||||
dom-helpers "^5.0.1"
|
|
||||||
loose-envify "^1.4.0"
|
|
||||||
prop-types "^15.6.2"
|
|
||||||
|
|
||||||
react-universal-interface@^0.6.2:
|
react-universal-interface@^0.6.2:
|
||||||
version "0.6.2"
|
version "0.6.2"
|
||||||
resolved "https://registry.yarnpkg.com/react-universal-interface/-/react-universal-interface-0.6.2.tgz#5e8d438a01729a4dbbcbeeceb0b86be146fe2b3b"
|
resolved "https://registry.yarnpkg.com/react-universal-interface/-/react-universal-interface-0.6.2.tgz#5e8d438a01729a4dbbcbeeceb0b86be146fe2b3b"
|
||||||
@ -5722,21 +5662,11 @@ readdirp@~3.6.0:
|
|||||||
dependencies:
|
dependencies:
|
||||||
picomatch "^2.2.1"
|
picomatch "^2.2.1"
|
||||||
|
|
||||||
redux-deep-persist@^1.0.7:
|
|
||||||
version "1.0.7"
|
|
||||||
resolved "https://registry.yarnpkg.com/redux-deep-persist/-/redux-deep-persist-1.0.7.tgz#fbbd00dcee6111b42624c9d8590b7e124b94476e"
|
|
||||||
integrity sha512-PsD5UXbfCFvDruIPIHKAyaZ3wPhEWBMU8Rtcr/c1pXJT8aYoKbgKUS8JBkaWc3EB1ONlnLTdDDmnC/TOD39hqA==
|
|
||||||
|
|
||||||
redux-dynamic-middlewares@^2.2.0:
|
redux-dynamic-middlewares@^2.2.0:
|
||||||
version "2.2.0"
|
version "2.2.0"
|
||||||
resolved "https://registry.yarnpkg.com/redux-dynamic-middlewares/-/redux-dynamic-middlewares-2.2.0.tgz#6835dd6d4f2fd975266376b45dcae0141320ae97"
|
resolved "https://registry.yarnpkg.com/redux-dynamic-middlewares/-/redux-dynamic-middlewares-2.2.0.tgz#6835dd6d4f2fd975266376b45dcae0141320ae97"
|
||||||
integrity sha512-GHESQC+Y0PV98ZBoaC6br6cDOsNiM1Cu4UleGMqMWCXX03jIr3BoozYVrRkLVVAl4sC216chakMnZOu6SwNdGA==
|
integrity sha512-GHESQC+Y0PV98ZBoaC6br6cDOsNiM1Cu4UleGMqMWCXX03jIr3BoozYVrRkLVVAl4sC216chakMnZOu6SwNdGA==
|
||||||
|
|
||||||
redux-persist@^6.0.0:
|
|
||||||
version "6.0.0"
|
|
||||||
resolved "https://registry.yarnpkg.com/redux-persist/-/redux-persist-6.0.0.tgz#b4d2972f9859597c130d40d4b146fecdab51b3a8"
|
|
||||||
integrity sha512-71LLMbUq2r02ng2We9S215LtPu3fY0KgaGE0k8WRgl6RkqxtGfl7HUozz1Dftwsb0D/5mZ8dwAaPbtnzfvbEwQ==
|
|
||||||
|
|
||||||
redux-remember@^3.3.1:
|
redux-remember@^3.3.1:
|
||||||
version "3.3.1"
|
version "3.3.1"
|
||||||
resolved "https://registry.yarnpkg.com/redux-remember/-/redux-remember-3.3.1.tgz#fad0b3af81458d8e40a54cd30be148c17e40bda9"
|
resolved "https://registry.yarnpkg.com/redux-remember/-/redux-remember-3.3.1.tgz#fad0b3af81458d8e40a54cd30be148c17e40bda9"
|
||||||
@ -6510,11 +6440,6 @@ tsconfig-paths@^4.0.0:
|
|||||||
minimist "^1.2.6"
|
minimist "^1.2.6"
|
||||||
strip-bom "^3.0.0"
|
strip-bom "^3.0.0"
|
||||||
|
|
||||||
tslib@2.3.1:
|
|
||||||
version "2.3.1"
|
|
||||||
resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.3.1.tgz#e8a335add5ceae51aa261d32a490158ef042ef01"
|
|
||||||
integrity sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw==
|
|
||||||
|
|
||||||
tslib@2.4.0:
|
tslib@2.4.0:
|
||||||
version "2.4.0"
|
version "2.4.0"
|
||||||
resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.4.0.tgz#7cecaa7f073ce680a05847aa77be941098f36dc3"
|
resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.4.0.tgz#7cecaa7f073ce680a05847aa77be941098f36dc3"
|
||||||
|