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

fix(ui): fix all eslint & prettier issues

Browse Source
This commit is contained in:
psychedelicious 2023-07-22 23:26:14 +10:00
parent 6452d0fc28
commit c5147d0f57
95 changed files with 333 additions and 670 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
invokeai/frontend/web/.prettierignore
View File

@ -5,6 +5,10 @@ patches/
stats.html
index.html
.yarn/
.yalc/
*.scss
src/services/api/
src/services/fixtures/*
docs/
static/
src/theme/css/overlayscrollbars.css

2
invokeai/frontend/web/src/app/logging/useLogger.ts
View File

@ -48,6 +48,8 @@ export const useLogger = () => {
// Update the module-scoped logger context as needed
useEffect(() => {
// TODO: type this properly
//eslint-disable-next-line @typescript-eslint/no-explicit-any
const newContext: Record<string, any> = {
...BASE_CONTEXT,
};

2
invokeai/frontend/web/src/app/store/enhancers/reduxRemember/unserialize.ts
View File

@ -12,7 +12,7 @@ import { defaultsDeep } from 'lodash-es';
import { UnserializeFunction } from 'redux-remember';
const initialStates: {
[key: string]: any;
[key: string]: object; // TODO: type this properly
} = {
canvas: initialCanvasState,
gallery: initialGalleryState,

2
invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/addFirstListImagesListener.ts.ts
View File

@ -15,7 +15,7 @@ export const addFirstListImagesListener = () => {
matcher: imagesApi.endpoints.listImages.matchFulfilled,
effect: async (
action,
{ getState, dispatch, unsubscribe, cancelActiveListeners }
{ dispatch, unsubscribe, cancelActiveListeners }
) => {
// Only run this listener on the first listImages request for no-board images
if (

5
invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/appStarted.ts
View File

@ -6,10 +6,7 @@ export const appStarted = createAction('app/appStarted');
export const addAppStartedListener = () => {
startAppListening({
actionCreator: appStarted,
effect: async (
action,
{ getState, dispatch, unsubscribe, cancelActiveListeners }
) => {
effect: async (action, { unsubscribe, cancelActiveListeners }) => {
// this should only run once
cancelActiveListeners();
unsubscribe();

4
invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/boardAndImagesDeleted.ts
View File

@ -9,8 +9,8 @@ import { boardsApi } from '../../../../../services/api/endpoints/boards';
export const addDeleteBoardAndImagesFulfilledListener = () => {
startAppListening({
matcher: boardsApi.endpoints.deleteBoardAndImages.matchFulfilled,
effect: async (action, { dispatch, getState, condition }) => {
const { board_id, deleted_board_images, deleted_images } = action.payload;
effect: async (action, { dispatch, getState }) => {
const { deleted_images } = action.payload;
// Remove all deleted images from the UI

2
invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/canvasMerged.ts
View File

@ -10,7 +10,7 @@ import { startAppListening } from '..';
export const addCanvasMergedListener = () => {
startAppListening({
actionCreator: canvasMerged,
effect: async (action, { dispatch, getState, take }) => {
effect: async (action, { dispatch }) => {
const moduleLog = $logger
.get()
.child({ namespace: 'canvasCopiedToClipboardListener' });

2
invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/canvasSavedToGallery.ts
View File

@ -8,7 +8,7 @@ import { startAppListening } from '..';
export const addCanvasSavedToGalleryListener = () => {
startAppListening({
actionCreator: canvasSavedToGallery,
effect: async (action, { dispatch, getState, take }) => {
effect: async (action, { dispatch, getState }) => {
const log = logger('canvas');
const state = getState();

5
invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/controlNetAutoProcess.ts
View File

@ -62,10 +62,7 @@ const predicate: AnyListenerPredicate<RootState> = (
export const addControlNetAutoProcessListener = () => {
startAppListening({
predicate,
effect: async (
action,
{ dispatch, getState, cancelActiveListeners, delay }
) => {
effect: async (action, { dispatch, cancelActiveListeners, delay }) => {
const log = logger('session');
const { controlNetId } = action.payload;

7
invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/controlNetImageProcessed.ts
View File

@ -1,4 +1,4 @@
import { $logger, logger } from 'app/logging/logger';
import { logger } from 'app/logging/logger';
import { controlNetImageProcessed } from 'features/controlNet/store/actions';
import { controlNetProcessedImageChanged } from 'features/controlNet/store/controlNetSlice';
import { sessionReadyToInvoke } from 'features/system/store/actions';
@ -12,10 +12,7 @@ import { startAppListening } from '..';
export const addControlNetImageProcessedListener = () => {
startAppListening({
actionCreator: controlNetImageProcessed,
effect: async (
action,
{ dispatch, getState, take, unsubscribe, subscribe }
) => {
effect: async (action, { dispatch, getState, take }) => {
const log = logger('session');
const { controlNetId } = action.payload;
const controlNet = getState().controlNet.controlNets[controlNetId];

4
invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/imageAddedToBoard.ts
View File

@ -5,7 +5,7 @@ import { startAppListening } from '..';
export const addImageAddedToBoardFulfilledListener = () => {
startAppListening({
matcher: imagesApi.endpoints.addImageToBoard.matchFulfilled,
effect: (action, { getState, dispatch }) => {
effect: (action) => {
const log = logger('images');
const { board_id, imageDTO } = action.meta.arg.originalArgs;
@ -19,7 +19,7 @@ export const addImageAddedToBoardFulfilledListener = () => {
export const addImageAddedToBoardRejectedListener = () => {
startAppListening({
matcher: imagesApi.endpoints.addImageToBoard.matchRejected,
effect: (action, { getState, dispatch }) => {
effect: (action) => {
const log = logger('images');
const { board_id, imageDTO } = action.meta.arg.originalArgs;

8
invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/imageDeleted.ts
View File

@ -19,7 +19,6 @@ export const addRequestedImageDeletionListener = () => {
startAppListening({
actionCreator: imageDeletionConfirmed,
effect: async (action, { dispatch, getState, condition }) => {
const log = logger('images');
const { imageDTO, imageUsage } = action.payload;
dispatch(isModalOpenChanged(false));
@ -104,8 +103,7 @@ export const addRequestedImageDeletionListener = () => {
export const addImageDeletedPendingListener = () => {
startAppListening({
matcher: imagesApi.endpoints.deleteImage.matchPending,
effect: (action, { dispatch, getState }) => {
const log = logger('images');
effect: () => {
//
},
});
@ -117,7 +115,7 @@ export const addImageDeletedPendingListener = () => {
export const addImageDeletedFulfilledListener = () => {
startAppListening({
matcher: imagesApi.endpoints.deleteImage.matchFulfilled,
effect: (action, { dispatch, getState }) => {
effect: (action) => {
const log = logger('images');
log.debug({ imageDTO: action.meta.arg.originalArgs }, 'Image deleted');
},
@ -130,7 +128,7 @@ export const addImageDeletedFulfilledListener = () => {
export const addImageDeletedRejectedListener = () => {
startAppListening({
matcher: imagesApi.endpoints.deleteImage.matchRejected,
effect: (action, { dispatch, getState }) => {
effect: (action) => {
const log = logger('images');
log.debug(
{ imageDTO: action.meta.arg.originalArgs },

2
invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/imageDropped.ts
View File

@ -23,7 +23,7 @@ export const dndDropped = createAction<{
export const addImageDroppedListener = () => {
startAppListening({
actionCreator: dndDropped,
effect: async (action, { dispatch, getState, take }) => {
effect: async (action, { dispatch }) => {
const log = logger('images');
const { activeData, overData } = action.payload;

4
invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/imageRemovedFromBoard.ts
View File

@ -5,7 +5,7 @@ import { startAppListening } from '..';
export const addImageRemovedFromBoardFulfilledListener = () => {
startAppListening({
matcher: imagesApi.endpoints.removeImageFromBoard.matchFulfilled,
effect: (action, { getState, dispatch }) => {
effect: (action) => {
const log = logger('images');
const imageDTO = action.meta.arg.originalArgs;
@ -17,7 +17,7 @@ export const addImageRemovedFromBoardFulfilledListener = () => {
export const addImageRemovedFromBoardRejectedListener = () => {
startAppListening({
matcher: imagesApi.endpoints.removeImageFromBoard.matchRejected,
effect: (action, { getState, dispatch }) => {
effect: (action) => {
const log = logger('images');
const imageDTO = action.meta.arg.originalArgs;

2
invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/imageToDeleteSelected.ts
View File

@ -9,7 +9,7 @@ import { startAppListening } from '..';
export const addImageToDeleteSelectedListener = () => {
startAppListening({
actionCreator: imageToDeleteSelected,
effect: async (action, { dispatch, getState, condition }) => {
effect: async (action, { dispatch, getState }) => {
const imageDTO = action.payload;
const state = getState();
const { shouldConfirmOnDelete } = state.system;

11
invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/imageUploaded.ts
View File

@ -9,6 +9,7 @@ import { addToast } from 'features/system/store/systemSlice';
import { boardsApi } from 'services/api/endpoints/boards';
import { startAppListening } from '..';
import { imagesApi } from '../../../../../services/api/endpoints/images';
import { omit } from 'lodash-es';
const DEFAULT_UPLOADED_TOAST: UseToastOptions = {
title: 'Image Uploaded',
@ -22,7 +23,7 @@ export const addImageUploadedFulfilledListener = () => {
const log = logger('images');
const imageDTO = action.payload;
const state = getState();
const { selectedBoardId, autoAddBoardId } = state.gallery;
const { autoAddBoardId } = state.gallery;
log.debug({ imageDTO }, 'Image uploaded');
@ -140,8 +141,12 @@ export const addImageUploadedRejectedListener = () => {
matcher: imagesApi.endpoints.uploadImage.matchRejected,
effect: (action, { dispatch }) => {
const log = logger('images');
const { file, postUploadAction, ...rest } = action.meta.arg.originalArgs;
const sanitizedData = { arg: { ...rest, file: '<Blob>' } };
const sanitizedData = {
arg: {
...omit(action.meta.arg.originalArgs, ['file', 'postUploadAction']),
file: '<Blob>',
},
};
log.error({ ...sanitizedData }, 'Image upload failed');
dispatch(
addToast({

2
invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/initialImageSelected.ts
View File

@ -8,7 +8,7 @@ import { startAppListening } from '..';
export const addInitialImageSelectedListener = () => {
startAppListening({
actionCreator: initialImageSelected,
effect: (action, { getState, dispatch }) => {
effect: (action, { dispatch }) => {
if (!action.payload) {
dispatch(
addToast(

6
invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/modelsLoaded.ts
View File

@ -1,4 +1,5 @@
import { $logger, logger } from 'app/logging/logger';
import { logger } from 'app/logging/logger';
import { controlNetRemoved } from 'features/controlNet/store/controlNetSlice';
import { loraRemoved } from 'features/lora/store/loraSlice';
import {
modelChanged,
@ -11,7 +12,6 @@ import {
import { forEach, some } from 'lodash-es';
import { modelsApi } from 'services/api/endpoints/models';
import { startAppListening } from '..';
import { controlNetRemoved } from 'features/controlNet/store/controlNetSlice';
export const addModelsLoadedListener = () => {
startAppListening({
@ -167,7 +167,7 @@ export const addModelsLoadedListener = () => {
});
startAppListening({
matcher: modelsApi.endpoints.getTextualInversionModels.matchFulfilled,
effect: async (action, { getState, dispatch }) => {
effect: async (action) => {
const log = logger('models');
log.info(
{ models: action.payload.entities },

6
invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/receivedOpenAPISchema.ts
View File

@ -1,15 +1,15 @@
import { logger } from 'app/logging/logger';
import { parseify } from 'common/util/serialize';
import { nodeTemplatesBuilt } from 'features/nodes/store/nodesSlice';
import { parseSchema } from 'features/nodes/util/parseSchema';
import { size } from 'lodash-es';
import { receivedOpenAPISchema } from 'services/api/thunks/schema';
import { startAppListening } from '..';
import { parseify } from 'common/util/serialize';
export const addReceivedOpenAPISchemaListener = () => {
startAppListening({
actionCreator: receivedOpenAPISchema.fulfilled,
effect: (action, { dispatch, getState }) => {
effect: (action, { dispatch }) => {
const log = logger('system');
const schemaJSON = action.payload;
@ -28,7 +28,7 @@ export const addReceivedOpenAPISchemaListener = () => {
startAppListening({
actionCreator: receivedOpenAPISchema.rejected,
effect: (action, { dispatch, getState }) => {
effect: () => {
const log = logger('system');
log.error('Problem dereferencing OpenAPI Schema');
},

7
invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/sessionCanceled.ts
View File

@ -6,8 +6,7 @@ import { startAppListening } from '..';
export const addSessionCanceledPendingListener = () => {
startAppListening({
actionCreator: sessionCanceled.pending,
effect: (action, { getState, dispatch }) => {
const log = logger('session');
effect: () => {
//
},
});
@ -16,7 +15,7 @@ export const addSessionCanceledPendingListener = () => {
export const addSessionCanceledFulfilledListener = () => {
startAppListening({
actionCreator: sessionCanceled.fulfilled,
effect: (action, { getState, dispatch }) => {
effect: (action) => {
const log = logger('session');
const { session_id } = action.meta.arg;
log.debug({ session_id }, `Session canceled (${session_id})`);
@ -27,7 +26,7 @@ export const addSessionCanceledFulfilledListener = () => {
export const addSessionCanceledRejectedListener = () => {
startAppListening({
actionCreator: sessionCanceled.rejected,
effect: (action, { getState, dispatch }) => {
effect: (action) => {
const log = logger('session');
const { session_id } = action.meta.arg;
if (action.payload) {

9
invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/sessionCreated.ts
View File

@ -7,8 +7,7 @@ import { startAppListening } from '..';
export const addSessionCreatedPendingListener = () => {
startAppListening({
actionCreator: sessionCreated.pending,
effect: (action, { getState, dispatch }) => {
const log = logger('session');
effect: () => {
//
},
});
@ -17,7 +16,7 @@ export const addSessionCreatedPendingListener = () => {
export const addSessionCreatedFulfilledListener = () => {
startAppListening({
actionCreator: sessionCreated.fulfilled,
effect: (action, { getState, dispatch }) => {
effect: (action) => {
const log = logger('session');
const session = action.payload;
log.debug(
@ -31,10 +30,10 @@ export const addSessionCreatedFulfilledListener = () => {
export const addSessionCreatedRejectedListener = () => {
startAppListening({
actionCreator: sessionCreated.rejected,
effect: (action, { getState, dispatch }) => {
effect: (action) => {
const log = logger('session');
if (action.payload) {
const { arg, error } = action.payload;
const { error } = action.payload;
const graph = parseify(action.meta.arg);
const stringifiedError = JSON.stringify(error);
log.error(

9
invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/sessionInvoked.ts
View File

@ -6,8 +6,7 @@ import { startAppListening } from '..';
export const addSessionInvokedPendingListener = () => {
startAppListening({
actionCreator: sessionInvoked.pending,
effect: (action, { getState, dispatch }) => {
const log = logger('session');
effect: () => {
//
},
});
@ -16,7 +15,7 @@ export const addSessionInvokedPendingListener = () => {
export const addSessionInvokedFulfilledListener = () => {
startAppListening({
actionCreator: sessionInvoked.fulfilled,
effect: (action, { getState, dispatch }) => {
effect: (action) => {
const log = logger('session');
const { session_id } = action.meta.arg;
log.debug({ session_id }, `Session invoked (${session_id})`);
@ -27,11 +26,11 @@ export const addSessionInvokedFulfilledListener = () => {
export const addSessionInvokedRejectedListener = () => {
startAppListening({
actionCreator: sessionInvoked.rejected,
effect: (action, { getState, dispatch }) => {
effect: (action) => {
const log = logger('session');
const { session_id } = action.meta.arg;
if (action.payload) {
const { arg, error } = action.payload;
const { error } = action.payload;
const stringifiedError = JSON.stringify(error);
log.error(
{

2
invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/socketio/socketDisconnected.ts
View File

@ -8,7 +8,7 @@ import { startAppListening } from '../..';
export const addSocketDisconnectedEventListener = () => {
startAppListening({
actionCreator: socketDisconnected,
effect: (action, { dispatch, getState }) => {
effect: (action, { dispatch }) => {
const log = logger('socketio');
log.debug('Disconnected');
// pass along the socket event as an application action

2
invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/socketio/socketGraphExecutionStateComplete.ts
View File

@ -8,7 +8,7 @@ import { startAppListening } from '../..';
export const addGraphExecutionStateCompleteEventListener = () => {
startAppListening({
actionCreator: socketGraphExecutionStateComplete,
effect: (action, { dispatch, getState }) => {
effect: (action, { dispatch }) => {
const log = logger('socketio');
log.debug(action.payload, 'Session complete');
// pass along the socket event as an application action

2
invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/socketio/socketInvocationComplete.ts
View File

@ -22,7 +22,7 @@ const nodeDenylist = ['dataURL_image'];
export const addInvocationCompleteEventListener = () => {
startAppListening({
actionCreator: socketInvocationComplete,
effect: async (action, { dispatch, getState, take }) => {
effect: async (action, { dispatch, getState }) => {
const log = logger('socketio');
const { data } = action.payload;
log.debug(

2
invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/socketio/socketInvocationError.ts
View File

@ -8,7 +8,7 @@ import { startAppListening } from '../..';
export const addInvocationErrorEventListener = () => {
startAppListening({
actionCreator: socketInvocationError,
effect: (action, { dispatch, getState }) => {
effect: (action, { dispatch }) => {
const log = logger('socketio');
log.error(
action.payload,

13
invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/socketio/socketModelLoad.ts
View File

@ -1,5 +1,4 @@
import { logger } from 'app/logging/logger';
import { ModelType } from 'services/api/types';
import {
appSocketModelLoadCompleted,
appSocketModelLoadStarted,
@ -8,18 +7,10 @@ import {
} from 'services/events/actions';
import { startAppListening } from '../..';
const MODEL_TYPES: Record<ModelType, string> = {
main: 'main',
vae: 'VAE',
lora: 'LoRA',
controlnet: 'ControlNet',
embedding: 'embedding',
};
export const addModelLoadEventListener = () => {
startAppListening({
actionCreator: socketModelLoadStarted,
effect: (action, { dispatch, getState }) => {
effect: (action, { dispatch }) => {
const log = logger('socketio');
const { base_model, model_name, model_type, submodel } =
action.payload.data;
@ -39,7 +30,7 @@ export const addModelLoadEventListener = () => {
startAppListening({
actionCreator: socketModelLoadCompleted,
effect: (action, { dispatch, getState }) => {
effect: (action, { dispatch }) => {
const log = logger('socketio');
const { base_model, model_name, model_type, submodel } =
action.payload.data;

2
invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/socketio/socketSubscribed.ts
View File

@ -5,7 +5,7 @@ import { startAppListening } from '../..';
export const addSocketSubscribedEventListener = () => {
startAppListening({
actionCreator: socketSubscribed,
effect: (action, { dispatch, getState }) => {
effect: (action, { dispatch }) => {
const log = logger('socketio');
log.debug(action.payload, 'Subscribed');
dispatch(appSocketSubscribed(action.payload));

2
invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/socketio/socketUnsubscribed.ts
View File

@ -8,7 +8,7 @@ import { startAppListening } from '../..';
export const addSocketUnsubscribedEventListener = () => {
startAppListening({
actionCreator: socketUnsubscribed,
effect: (action, { dispatch, getState }) => {
effect: (action, { dispatch }) => {
const log = logger('socketio');
log.debug(action.payload, 'Unsubscribed');
dispatch(appSocketUnsubscribed(action.payload));

4
invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/stagingAreaImageSaved.ts
View File

@ -1,4 +1,3 @@
import { logger } from 'app/logging/logger';
import { stagingAreaImageSaved } from 'features/canvas/store/actions';
import { addToast } from 'features/system/store/systemSlice';
import { imagesApi } from 'services/api/endpoints/images';
@ -7,8 +6,7 @@ import { startAppListening } from '..';
export const addStagingAreaImageSavedListener = () => {
startAppListening({
actionCreator: stagingAreaImageSaved,
effect: async (action, { dispatch, getState, take }) => {
const log = logger('canvas');
effect: async (action, { dispatch, getState }) => {
const { imageDTO } = action.payload;
try {

5
invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/upscaleRequested.ts
View File

@ -11,10 +11,7 @@ export const upscaleRequested = createAction<{ image_name: string }>(
export const addUpscaleRequestedListener = () => {
startAppListening({
actionCreator: upscaleRequested,
effect: async (
action,
{ dispatch, getState, take, unsubscribe, subscribe }
) => {
effect: async (action, { dispatch, getState, take }) => {
const { image_name } = action.payload;
const { esrganModelName } = getState().postprocessing;

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

@ -4,7 +4,6 @@ import {
autoBatchEnhancer,
combineReducers,
configureStore,
createAsyncThunk,
} from '@reduxjs/toolkit';
import canvasReducer from 'features/canvas/store/canvasSlice';
import controlNetReducer from 'features/controlNet/store/controlNetSlice';
@ -118,6 +117,7 @@ export const store = configureStore({
export type AppGetState = typeof store.getState;
export type RootState = ReturnType<typeof store.getState>;
// eslint-disable-next-line @typescript-eslint/no-explicit-any
export type AppThunkDispatch = ThunkDispatch<RootState, any, AnyAction>;
export type AppDispatch = typeof store.dispatch;
export const stateSelector = (state: RootState) => state;

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

@ -13,11 +13,10 @@ type IAIDroppableProps = {
dropLabel?: ReactNode;
disabled?: boolean;
data?: TypesafeDroppableData;
hoverRef?: React.Ref<HTMLDivElement>;
};
const IAIDroppable = (props: IAIDroppableProps) => {
const { dropLabel, data, disabled, hoverRef } = props;
const { dropLabel, data, disabled } = props;
const dndId = useRef(uuidv4());
const { isOver, setNodeRef, active } = useDroppable({

5
invokeai/frontend/web/src/common/components/IAIMantineSelectItemWithTooltip.tsx
View File

@ -10,7 +10,10 @@ interface ItemProps extends React.ComponentPropsWithoutRef<'div'> {
}
const IAIMantineSelectItemWithTooltip = forwardRef<HTMLDivElement, ItemProps>(
({ label, tooltip, description, disabled, ...others }: ItemProps, ref) => (
(
{ label, tooltip, description, disabled: _disabled, ...others }: ItemProps,
ref
) => (
<Tooltip label={tooltip} placement="top" hasArrow openDelay={500}>
<Box ref={ref} {...others}>
<Box>

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

@ -1,5 +1,4 @@
import {
ChakraProps,
FormControl,
FormControlProps,
FormLabel,
@ -24,16 +23,15 @@ import {
Tooltip,
TooltipProps,
} from '@chakra-ui/react';
import { clamp } from 'lodash-es';
import { useAppDispatch } from 'app/store/storeHooks';
import { roundDownToMultiple } from 'common/util/roundDownToMultiple';
import { shiftKeyPressed } from 'features/ui/store/hotkeysSlice';
import { clamp } from 'lodash-es';
import {
FocusEvent,
KeyboardEvent,
memo,
MouseEvent,
memo,
useCallback,
useEffect,
useMemo,

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

@ -1,6 +1,7 @@
import { Box, chakra, Flex } from '@chakra-ui/react';
import { createSelector } from '@reduxjs/toolkit';
import { useAppSelector } from 'app/store/storeHooks';
import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
import {
canvasSelector,
isStagingSelector,
@ -8,8 +9,6 @@ import {
import Konva from 'konva';
import { KonvaEventObject } from 'konva/lib/Node';
import { Vector2d } from 'konva/lib/types';
import { isEqual } from 'lodash-es';
import { useCallback, useRef } from 'react';
import { Layer, Stage } from 'react-konva';
import useCanvasDragMove from '../hooks/useCanvasDragMove';
@ -34,7 +33,6 @@ import IAICanvasStagingAreaToolbar from './IAICanvasStagingAreaToolbar';
import IAICanvasStatusText from './IAICanvasStatusText';
import IAICanvasBoundingBox from './IAICanvasToolbar/IAICanvasBoundingBox';
import IAICanvasToolPreview from './IAICanvasToolPreview';
import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
const selector = createSelector(
[canvasSelector, isStagingSelector],

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

@ -713,7 +713,7 @@ export const canvasSlice = createSlice({
},
commitStagingAreaImage: (
state,
action: PayloadAction<string | undefined>
_action: PayloadAction<string | undefined>
) => {
if (!state.layerState.stagingArea.images.length) {
return;
@ -866,11 +866,11 @@ export const canvasSlice = createSlice({
}
});
builder.addCase(setShouldUseCanvasBetaLayout, (state, action) => {
builder.addCase(setShouldUseCanvasBetaLayout, (state) => {
state.doesCanvasNeedScaling = true;
});
builder.addCase(setActiveTab, (state, action) => {
builder.addCase(setActiveTab, (state) => {
state.doesCanvasNeedScaling = true;
});
builder.addCase(setAspectRatio, (state, action) => {
@ -882,26 +882,6 @@ export const canvasSlice = createSlice({
);
}
});
// builder.addCase(imageUrlsReceived.fulfilled, (state, action) => {
// const { image_name, image_url, thumbnail_url } = action.payload;
// state.layerState.objects.forEach((object) => {
// if (object.kind === 'image') {
// if (object.image.image_name === image_name) {
// object.image.image_url = image_url;
// object.image.thumbnail_url = thumbnail_url;
// }
// }
// });
// state.layerState.stagingArea.images.forEach((stagedImage) => {
// if (stagedImage.image.image_name === image_name) {
// stagedImage.image.image_url = image_url;
// stagedImage.image.thumbnail_url = thumbnail_url;
// }
// });
// });
},
});

20
invokeai/frontend/web/src/features/controlNet/components/ControlNetImagePreview.tsx
View File

@ -11,8 +11,8 @@ import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
import IAIDndImage from 'common/components/IAIDndImage';
import { memo, useCallback, useMemo, useState } from 'react';
import { useGetImageDTOQuery } from 'services/api/endpoints/images';
import { controlNetImageChanged } from '../store/controlNetSlice';
import { PostUploadAction } from 'services/api/types';
import { controlNetImageChanged } from '../store/controlNetSlice';
type Props = {
controlNetId: string;
@ -59,19 +59,13 @@ const ControlNetImagePreview = (props: Props) => {
const [isMouseOverImage, setIsMouseOverImage] = useState(false);
const {
currentData: controlImage,
isLoading: isLoadingControlImage,
isError: isErrorControlImage,
isSuccess: isSuccessControlImage,
} = useGetImageDTOQuery(controlImageName ?? skipToken);
const { currentData: controlImage } = useGetImageDTOQuery(
controlImageName ?? skipToken
);
const {
currentData: processedControlImage,
isLoading: isLoadingProcessedControlImage,
isError: isErrorProcessedControlImage,
isSuccess: isSuccessProcessedControlImage,
} = useGetImageDTOQuery(processedControlImageName ?? skipToken);
const { currentData: processedControlImage } = useGetImageDTOQuery(
processedControlImageName ?? skipToken
);
const handleResetControlImage = useCallback(() => {
dispatch(controlNetImageChanged({ controlNetId, controlImage: null }));

5
invokeai/frontend/web/src/features/controlNet/components/parameters/ParamControlNetBeginEnd.tsx
View File

@ -55,11 +55,6 @@ const ParamControlNetBeginEnd = (props: Props) => {
[controlNetId, dispatch]
);
const handleStepPctReset = useCallback(() => {
dispatch(controlNetBeginStepPctChanged({ controlNetId, beginStepPct: 0 }));
dispatch(controlNetEndStepPctChanged({ controlNetId, endStepPct: 1 }));
}, [controlNetId, dispatch]);
return (
<FormControl isDisabled={!isEnabled}>
<FormLabel>Begin / End Step Percentage</FormLabel>

3
invokeai/frontend/web/src/features/controlNet/components/parameters/ParamControlNetControlMode.tsx
View File

@ -8,7 +8,6 @@ import {
controlNetControlModeChanged,
} from 'features/controlNet/store/controlNetSlice';
import { useCallback, useMemo } from 'react';
import { useTranslation } from 'react-i18next';
type ParamControlNetControlModeProps = {
controlNetId: string;
@ -42,8 +41,6 @@ export default function ParamControlNetControlMode(
const { controlMode, isEnabled } = useAppSelector(selector);
const { t } = useTranslation();
const handleControlModeChange = useCallback(
(controlMode: ControlModes) => {
dispatch(controlNetControlModeChanged({ controlNetId, controlMode }));

1
invokeai/frontend/web/src/features/controlNet/components/parameters/ParamControlNetProcessorSelect.tsx
View File

@ -13,7 +13,6 @@ import { memo, useCallback, useMemo } from 'react';
import { CONTROLNET_PROCESSORS } from '../../store/constants';
import { controlNetProcessorTypeChanged } from '../../store/controlNetSlice';
import { ControlNetProcessorType } from '../../store/types';
import { FormControl, FormLabel } from '@chakra-ui/react';
type ParamControlNetProcessorSelectProps = {
controlNetId: string;

3
invokeai/frontend/web/src/features/controlNet/components/parameters/ParamControlNetResizeMode.tsx
View File

@ -8,7 +8,6 @@ import {
controlNetResizeModeChanged,
} from 'features/controlNet/store/controlNetSlice';
import { useCallback, useMemo } from 'react';
import { useTranslation } from 'react-i18next';
type ParamControlNetResizeModeProps = {
controlNetId: string;
@ -41,8 +40,6 @@ export default function ParamControlNetResizeMode(
const { resizeMode, isEnabled } = useAppSelector(selector);
const { t } = useTranslation();
const handleResizeModeChange = useCallback(
(resizeMode: ResizeModes) => {
dispatch(controlNetResizeModeChanged({ controlNetId, resizeMode }));

2
invokeai/frontend/web/src/features/controlNet/components/processors/ZoeDepthProcessor.tsx
View File

@ -7,7 +7,7 @@ type Props = {
isEnabled: boolean;
};
const ZoeDepthProcessor = (props: Props) => {
const ZoeDepthProcessor = (_props: Props) => {
// Has no parameters?
return null;
};

4
invokeai/frontend/web/src/features/controlNet/store/controlNetSlice.ts
View File

@ -314,11 +314,11 @@ export const controlNetSlice = createSlice({
}
});
builder.addCase(appSocketInvocationError, (state, action) => {
builder.addCase(appSocketInvocationError, (state) => {
state.pendingControlImages = [];
});
builder.addMatcher(isAnySessionRejected, (state, action) => {
builder.addMatcher(isAnySessionRejected, (state) => {
state.pendingControlImages = [];
});

22
invokeai/frontend/web/src/features/gallery/components/Boards/BoardContextMenu.tsx
View File

@ -1,19 +1,16 @@
import { MenuGroup, MenuItem, MenuList } from '@chakra-ui/react';
import { createSelector } from '@reduxjs/toolkit';
import { stateSelector } from 'app/store/store';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import { ContextMenu, ContextMenuProps } from 'chakra-ui-contextmenu';
import {
autoAddBoardIdChanged,
boardIdSelected,
} from 'features/gallery/store/gallerySlice';
import { autoAddBoardIdChanged } from 'features/gallery/store/gallerySlice';
import { MouseEvent, memo, useCallback, useMemo } from 'react';
import { FaFolder, FaPlus } from 'react-icons/fa';
import { FaPlus } from 'react-icons/fa';
import { useBoardName } from 'services/api/hooks/useBoardName';
import { BoardDTO } from 'services/api/types';
import { menuListMotionProps } from 'theme/components/menu';
import GalleryBoardContextMenuItems from './GalleryBoardContextMenuItems';
import NoBoardContextMenuItems from './NoBoardContextMenuItems';
import { useBoardName } from 'services/api/hooks/useBoardName';
import { createSelector } from '@reduxjs/toolkit';
import { stateSelector } from 'app/store/store';
type Props = {
board?: BoardDTO;
@ -29,20 +26,15 @@ const BoardContextMenu = memo(
const selector = useMemo(
() =>
createSelector(stateSelector, ({ gallery }) => {
const isSelected = gallery.selectedBoardId === board_id;
const isAutoAdd = gallery.autoAddBoardId === board_id;
return { isSelected, isAutoAdd };
return { isAutoAdd };
}),
[board_id]
);
const { isSelected, isAutoAdd } = useAppSelector(selector);
const { isAutoAdd } = useAppSelector(selector);
const boardName = useBoardName(board_id);
const handleSelectBoard = useCallback(() => {
dispatch(boardIdSelected(board_id));
}, [board_id, dispatch]);
const handleSetAutoAdd = useCallback(() => {
dispatch(autoAddBoardIdChanged(board_id));
}, [board_id, dispatch]);

10
invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/BoardsList.tsx
View File

@ -1,21 +1,16 @@
import { ButtonGroup, Collapse, Flex, Grid, GridItem } from '@chakra-ui/react';
import { Collapse, Flex, Grid, GridItem } from '@chakra-ui/react';
import { createSelector } from '@reduxjs/toolkit';
import { stateSelector } from 'app/store/store';
import { useAppSelector } from 'app/store/storeHooks';
import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
import IAIIconButton from 'common/components/IAIIconButton';
import { AnimatePresence, motion } from 'framer-motion';
import { OverlayScrollbarsComponent } from 'overlayscrollbars-react';
import { memo, useCallback, useState } from 'react';
import { FaSearch } from 'react-icons/fa';
import { memo, useState } from 'react';
import { useListAllBoardsQuery } from 'services/api/endpoints/boards';
import { BoardDTO } from 'services/api/types';
import { useFeatureStatus } from '../../../../system/hooks/useFeatureStatus';
import DeleteBoardModal from '../DeleteBoardModal';
import AddBoardButton from './AddBoardButton';
import BoardsSearch from './BoardsSearch';
import GalleryBoard from './GalleryBoard';
import SystemBoardButton from './SystemBoardButton';
import NoBoardBoard from './NoBoardBoard';
const selector = createSelector(
@ -36,7 +31,6 @@ const BoardsList = (props: Props) => {
const { isOpen } = props;
const { selectedBoardId, searchText } = useAppSelector(selector);
const { data: boards } = useListAllBoardsQuery();
const isBatchEnabled = useFeatureStatus('batches').isFeatureEnabled;
const filteredBoards = searchText
? boards?.filter((board) =>
board.board_name.toLowerCase().includes(searchText.toLowerCase())

11
invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/GalleryBoard.tsx
View File

@ -1,7 +1,5 @@
import {
Badge,
Box,
ChakraProps,
Editable,
EditableInput,
EditablePreview,
@ -17,21 +15,16 @@ import { stateSelector } from 'app/store/store';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
import IAIDroppable from 'common/components/IAIDroppable';
import SelectionOverlay from 'common/components/SelectionOverlay';
import { boardIdSelected } from 'features/gallery/store/gallerySlice';
import { memo, useCallback, useMemo, useState } from 'react';
import { FaUser } from 'react-icons/fa';
import { useUpdateBoardMutation } from 'services/api/endpoints/boards';
import { useGetImageDTOQuery } from 'services/api/endpoints/images';
import { useBoardTotal } from 'services/api/hooks/useBoardTotal';
import { BoardDTO } from 'services/api/types';
import AutoAddIcon from '../AutoAddIcon';
import BoardContextMenu from '../BoardContextMenu';
import SelectionOverlay from 'common/components/SelectionOverlay';
const BASE_BADGE_STYLES: ChakraProps['sx'] = {
bg: 'base.500',
color: 'whiteAlpha.900',
};
interface GalleryBoardProps {
board: BoardDTO;
isSelected: boolean;
@ -68,8 +61,6 @@ const GalleryBoard = memo(
board.cover_image_name ?? skipToken
);
const { totalImages, totalAssets } = useBoardTotal(board.board_id);
const { board_name, board_id } = board;
const [localBoardName, setLocalBoardName] = useState(board_name);

9
invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/NoBoardBoard.tsx
View File

@ -1,4 +1,4 @@
import { Box, ChakraProps, Flex, Image, Text } from '@chakra-ui/react';
import { Box, Flex, Image, Text } from '@chakra-ui/react';
import { createSelector } from '@reduxjs/toolkit';
import { MoveBoardDropData } from 'app/components/ImageDnd/typesafeDnd';
import { stateSelector } from 'app/store/store';
@ -10,14 +10,8 @@ import SelectionOverlay from 'common/components/SelectionOverlay';
import { boardIdSelected } from 'features/gallery/store/gallerySlice';
import { memo, useCallback, useMemo, useState } from 'react';
import { useBoardName } from 'services/api/hooks/useBoardName';
import { useBoardTotal } from 'services/api/hooks/useBoardTotal';
import AutoAddIcon from '../AutoAddIcon';
import BoardContextMenu from '../BoardContextMenu';
const BASE_BADGE_STYLES: ChakraProps['sx'] = {
bg: 'base.500',
color: 'whiteAlpha.900',
};
interface Props {
isSelected: boolean;
}
@ -33,7 +27,6 @@ const selector = createSelector(
const NoBoardBoard = memo(({ isSelected }: Props) => {
const dispatch = useAppDispatch();
const { totalImages, totalAssets } = useBoardTotal(undefined);
const { autoAddBoardId } = useAppSelector(selector);
const boardName = useBoardName(undefined);
const handleSelectBoard = useCallback(() => {

39
invokeai/frontend/web/src/features/gallery/components/Boards/GalleryBoardContextMenuItems.tsx
View File

@ -1,11 +1,6 @@
import { MenuItem } from '@chakra-ui/react';
import { createSelector } from '@reduxjs/toolkit';
import { stateSelector } from 'app/store/store';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
import { autoAddBoardIdChanged } from 'features/gallery/store/gallerySlice';
import { memo, useCallback, useMemo } from 'react';
import { FaPlus, FaTrash } from 'react-icons/fa';
import { memo, useCallback } from 'react';
import { FaTrash } from 'react-icons/fa';
import { BoardDTO } from 'services/api/types';
type Props = {
@ -14,25 +9,6 @@ type Props = {
};
const GalleryBoardContextMenuItems = ({ board, setBoardToDelete }: Props) => {
const dispatch = useAppDispatch();
const selector = useMemo(
() =>
createSelector(
stateSelector,
({ gallery }) => {
const isSelectedForAutoAdd =
board.board_id === gallery.autoAddBoardId;
return { isSelectedForAutoAdd };
},
defaultSelectorOptions
),
[board.board_id]
);
const { isSelectedForAutoAdd } = useAppSelector(selector);
const handleDelete = useCallback(() => {
if (!setBoardToDelete) {
return;
@ -40,12 +16,6 @@ const GalleryBoardContextMenuItems = ({ board, setBoardToDelete }: Props) => {
setBoardToDelete(board);
}, [board, setBoardToDelete]);
const handleToggleAutoAdd = useCallback(() => {
dispatch(
autoAddBoardIdChanged(isSelectedForAutoAdd ? undefined : board.board_id)
);
}, [board.board_id, dispatch, isSelectedForAutoAdd]);
return (
<>
{board.image_count > 0 && (
@ -59,11 +29,6 @@ const GalleryBoardContextMenuItems = ({ board, setBoardToDelete }: Props) => {
</MenuItem> */}
</>
)}
{/* {!isSelectedForAutoAdd && (
<MenuItem icon={<FaPlus />} onClick={handleToggleAutoAdd}>
Auto-add to this Board
</MenuItem>
)} */}
<MenuItem
sx={{ color: 'error.600', _dark: { color: 'error.300' } }}
icon={<FaTrash />}

15
invokeai/frontend/web/src/features/gallery/components/Boards/NoBoardContextMenuItems.tsx
View File

@ -1,19 +1,6 @@
import { MenuItem } from '@chakra-ui/react';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import { autoAddBoardIdChanged } from 'features/gallery/store/gallerySlice';
import { memo, useCallback } from 'react';
import { FaPlus } from 'react-icons/fa';
import { memo } from 'react';
const NoBoardContextMenuItems = () => {
const dispatch = useAppDispatch();
const autoAddBoardId = useAppSelector(
(state) => state.gallery.autoAddBoardId
);
const handleDisableAutoAdd = useCallback(() => {
dispatch(autoAddBoardIdChanged(undefined));
}, [dispatch]);
return (
<>
{/* {autoAddBoardId && (

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

@ -108,7 +108,7 @@ const CurrentImageButtons = (props: CurrentImageButtonsProps) => {
500
);
const { currentData: imageDTO, isFetching } = useGetImageDTOQuery(
const { currentData: imageDTO } = useGetImageDTOQuery(
lastSelectedImage ?? skipToken
);

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

@ -8,17 +8,17 @@ import {
import { stateSelector } from 'app/store/store';
import { useAppSelector } from 'app/store/storeHooks';
import IAIDndImage from 'common/components/IAIDndImage';
import { IAINoContentFallback } from 'common/components/IAIImageFallback';
import { useNextPrevImage } from 'features/gallery/hooks/useNextPrevImage';
import { selectLastSelectedImage } from 'features/gallery/store/gallerySelectors';
import { AnimatePresence, motion } from 'framer-motion';
import { isEqual } from 'lodash-es';
import { memo, useCallback, useMemo, useRef, useState } from 'react';
import { useHotkeys } from 'react-hotkeys-hook';
import { FaImage } from 'react-icons/fa';
import { useGetImageDTOQuery } from 'services/api/endpoints/images';
import ImageMetadataViewer from '../ImageMetadataViewer/ImageMetadataViewer';
import NextPrevImageButtons from '../NextPrevImageButtons';
import { IAINoContentFallback } from 'common/components/IAIImageFallback';
import { FaImage } from 'react-icons/fa';
export const imagesSelector = createSelector(
[stateSelector, selectLastSelectedImage],
@ -93,12 +93,7 @@ const CurrentImagePreview = () => {
]
);
const {
currentData: imageDTO,
isLoading,
isError,
isSuccess,
} = useGetImageDTOQuery(imageName ?? skipToken);
const { currentData: imageDTO } = useGetImageDTOQuery(imageName ?? skipToken);
const draggableData = useMemo<TypesafeDraggableData | undefined>(() => {
if (imageDTO) {

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

@ -1,9 +1,7 @@
import {
Box,
Button,
ButtonGroup,
Flex,
Spacer,
Tab,
TabList,
Tabs,
@ -14,16 +12,16 @@ import { createSelector } from '@reduxjs/toolkit';
import { stateSelector } from 'app/store/store';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
import IAIButton from 'common/components/IAIButton';
import { memo, useCallback, useRef } from 'react';
import { FaImages, FaServer } from 'react-icons/fa';
import { galleryViewChanged } from '../store/gallerySlice';
import BoardsList from './Boards/BoardsList/BoardsList';
import GalleryBoardName from './GalleryBoardName';
import GalleryPinButton from './GalleryPinButton';
import GallerySettingsPopover from './GallerySettingsPopover';
import BatchImageGrid from './ImageGrid/BatchImageGrid';
import GalleryImageGrid from './ImageGrid/GalleryImageGrid';
import IAIButton from 'common/components/IAIButton';
import { FaImages, FaServer } from 'react-icons/fa';
import { galleryViewChanged } from '../store/gallerySlice';
const selector = createSelector(
[stateSelector],

36
invokeai/frontend/web/src/features/gallery/components/ImageGrid/BatchImage.tsx
View File

@ -8,13 +8,8 @@ import IAIDndImage from 'common/components/IAIDndImage';
import IAIErrorLoadingImageFallback from 'common/components/IAIErrorLoadingImageFallback';
import IAIFillSkeleton from 'common/components/IAIFillSkeleton';
import ImageContextMenu from 'features/gallery/components/ImageContextMenu/ImageContextMenu';
import {
imageRangeEndSelected,
imageSelected,
imageSelectionToggled,
imagesRemovedFromBatch,
} from 'features/gallery/store/gallerySlice';
import { MouseEvent, memo, useCallback, useMemo } from 'react';
import { imagesRemovedFromBatch } from 'features/gallery/store/gallerySlice';
import { memo, useCallback, useMemo } from 'react';
import { useGetImageDTOQuery } from 'services/api/endpoints/images';
const makeSelector = (image_name: string) =>
@ -39,7 +34,6 @@ const BatchImage = (props: BatchImageProps) => {
currentData: imageDTO,
isLoading,
isError,
isSuccess,
} = useGetImageDTOQuery(imageName);
const selector = useMemo(() => makeSelector(imageName), [imageName]);
@ -49,18 +43,18 @@ const BatchImage = (props: BatchImageProps) => {
dispatch(imagesRemovedFromBatch([imageName]));
}, [dispatch, imageName]);
const handleClick = useCallback(
(e: MouseEvent<HTMLDivElement>) => {
if (e.shiftKey) {
dispatch(imageRangeEndSelected(imageName));
} else if (e.ctrlKey || e.metaKey) {
dispatch(imageSelectionToggled(imageName));
} else {
dispatch(imageSelected(imageName));
}
},
[dispatch, imageName]
);
// const handleClick = useCallback(
// (e: MouseEvent<HTMLDivElement>) => {
// if (e.shiftKey) {
// dispatch(imageRangeEndSelected(imageName));
// } else if (e.ctrlKey || e.metaKey) {
// dispatch(imageSelectionToggled(imageName));
// } else {
// dispatch(imageSelected(imageName));
// }
// },
// [dispatch, imageName]
// );
const draggableData = useMemo<TypesafeDraggableData | undefined>(() => {
if (selectionCount > 1) {
@ -105,7 +99,7 @@ const BatchImage = (props: BatchImageProps) => {
}}
>
<IAIDndImage
onClick={handleClick}
// onClick={handleClick}
imageDTO={imageDTO}
draggableData={draggableData}
isSelected={isSelected}

8
invokeai/frontend/web/src/features/gallery/components/ImageGrid/GalleryImage.tsx
View File

@ -6,7 +6,6 @@ import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
import IAIDndImage from 'common/components/IAIDndImage';
import IAIFillSkeleton from 'common/components/IAIFillSkeleton';
import ImageContextMenu from 'features/gallery/components/ImageContextMenu/ImageContextMenu';
import { imageSelected } from 'features/gallery/store/gallerySlice';
import { imageToDeleteSelected } from 'features/imageDeletion/store/imageDeletionSlice';
import { MouseEvent, memo, useCallback, useMemo } from 'react';
@ -36,8 +35,7 @@ const GalleryImage = (props: HoverableImageProps) => {
const { isSelected, selectionCount, selection } =
useAppSelector(localSelector);
const handleClick = useCallback(
(e: MouseEvent<HTMLDivElement>) => {
const handleClick = useCallback(() => {
// disable multiselect for now
// if (e.shiftKey) {
// dispatch(imageRangeEndSelected(imageName));
@ -47,9 +45,7 @@ const GalleryImage = (props: HoverableImageProps) => {
// dispatch(imageSelected(imageName));
// }
dispatch(imageSelected(imageName));
},
[dispatch, imageName]
);
}, [dispatch, imageName]);
const handleDelete = useCallback(
(e: MouseEvent<HTMLButtonElement>) => {

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

@ -19,8 +19,10 @@ export const gallerySlice = createSlice({
name: 'gallery',
initialState: initialGalleryState,
reducers: {
imageRangeEndSelected: (state, action: PayloadAction<string>) => {
// TODO: multiselect
imageRangeEndSelected: () => {
// TODO
},
// imageRangeEndSelected: (state, action: PayloadAction<string>) => {
// const rangeEndImageName = action.payload;
// const lastSelectedImage = state.selection[state.selection.length - 1];
// const filteredImages = selectFilteredImagesLocal(state);
@ -39,8 +41,11 @@ export const gallerySlice = createSlice({
// .map((i) => i.image_name);
// state.selection = uniq(state.selection.concat(imagesToSelect));
// }
// },
imageSelectionToggled: () => {
// TODO
},
imageSelectionToggled: (state, action: PayloadAction<string>) => {
// imageSelectionToggled: (state, action: PayloadAction<string>) => {
// TODO: multiselect
// if (
// state.selection.includes(action.payload) &&
@ -52,7 +57,6 @@ export const gallerySlice = createSlice({
// } else {
// state.selection = uniq(state.selection.concat(action.payload));
// }
},
imageSelected: (state, action: PayloadAction<string | null>) => {
state.selection = action.payload ? [action.payload] : [];
},

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

@ -7,10 +7,8 @@ import { FaList } from 'react-icons/fa';
import { FieldComponentProps } from './types';
const ArrayInputFieldComponent = (
props: FieldComponentProps<ArrayInputFieldValue, ArrayInputFieldTemplate>
_props: FieldComponentProps<ArrayInputFieldValue, ArrayInputFieldTemplate>
) => {
const { nodeId, field } = props;
return <FaList />;
};

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

@ -6,10 +6,8 @@ import { memo } from 'react';
import { FieldComponentProps } from './types';
const ClipInputFieldComponent = (
props: FieldComponentProps<ClipInputFieldValue, ClipInputFieldTemplate>
_props: FieldComponentProps<ClipInputFieldValue, ClipInputFieldTemplate>
) => {
const { nodeId, field } = props;
return null;
};

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

@ -6,13 +6,11 @@ import { memo } from 'react';
import { FieldComponentProps } from './types';
const ConditioningInputFieldComponent = (
props: FieldComponentProps<
_props: FieldComponentProps<
ConditioningInputFieldValue,
ConditioningInputFieldTemplate
>
) => {
const { nodeId, field } = props;
return null;
};

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

@ -6,10 +6,8 @@ import { memo } from 'react';
import { FieldComponentProps } from './types';
const ControlInputFieldComponent = (
props: FieldComponentProps<ControlInputFieldValue, ControlInputFieldTemplate>
_props: FieldComponentProps<ControlInputFieldValue, ControlInputFieldTemplate>
) => {
const { nodeId, field } = props;
return null;
};

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

@ -10,7 +10,6 @@ import { MODEL_TYPE_MAP } from 'features/parameters/types/constants';
import { modelIdToControlNetModelParam } from 'features/parameters/util/modelIdToControlNetModelParam';
import { forEach } from 'lodash-es';
import { memo, useCallback, useMemo } from 'react';
import { useTranslation } from 'react-i18next';
import { useGetControlNetModelsQuery } from 'services/api/endpoints/models';
import { FieldComponentProps } from './types';
@ -23,7 +22,6 @@ const ControlNetModelInputFieldComponent = (
const { nodeId, field } = props;
const controlNetModel = field.value;
const dispatch = useAppDispatch();
const { t } = useTranslation();
const { data: controlNetModels } = useGetControlNetModelsQuery();

59
invokeai/frontend/web/src/features/nodes/components/fields/ImageCollectionInputFieldComponent.tsx
View File

@ -1,25 +1,19 @@
import { useAppDispatch } from 'app/store/storeHooks';
import { fieldValueChanged } from 'features/nodes/store/nodesSlice';
import {
ImageCollectionInputFieldTemplate,
ImageCollectionInputFieldValue,
} from 'features/nodes/types/types';
import { memo, useCallback } from 'react';
import { memo } from 'react';
import { FieldComponentProps } from './types';
import IAIDndImage from 'common/components/IAIDndImage';
import { ImageDTO } from 'services/api/types';
import { Flex } from '@chakra-ui/react';
import { useGetImageDTOQuery } from 'services/api/endpoints/images';
import { skipToken } from '@reduxjs/toolkit/dist/query';
import { uniq, uniqBy } from 'lodash-es';
import {
NodesMultiImageDropData,
isValidDrop,
useDroppable,
} from 'app/components/ImageDnd/typesafeDnd';
import IAIDndImage from 'common/components/IAIDndImage';
import IAIDropOverlay from 'common/components/IAIDropOverlay';
import { useGetImageDTOQuery } from 'services/api/endpoints/images';
import { FieldComponentProps } from './types';
const ImageCollectionInputFieldComponent = (
props: FieldComponentProps<
@ -29,20 +23,20 @@ const ImageCollectionInputFieldComponent = (
) => {
const { nodeId, field } = props;
const dispatch = useAppDispatch();
// const dispatch = useAppDispatch();
const handleDrop = useCallback(
({ image_name }: ImageDTO) => {
dispatch(
fieldValueChanged({
nodeId,
fieldName: field.name,
value: uniqBy([...(field.value ?? []), { image_name }], 'image_name'),
})
);
},
[dispatch, field.name, field.value, nodeId]
);
// const handleDrop = useCallback(
// ({ image_name }: ImageDTO) => {
// dispatch(
// fieldValueChanged({
// nodeId,
// fieldName: field.name,
// value: uniqBy([...(field.value ?? []), { image_name }], 'image_name'),
// })
// );
// },
// [dispatch, field.name, field.value, nodeId]
// );
const droppableData: NodesMultiImageDropData = {
id: `node-${nodeId}-${field.name}`,
@ -54,21 +48,20 @@ const ImageCollectionInputFieldComponent = (
isOver,
setNodeRef: setDroppableRef,
active,
over,
} = useDroppable({
id: `node_${nodeId}`,
data: droppableData,
});
const handleReset = useCallback(() => {
dispatch(
fieldValueChanged({
nodeId,
fieldName: field.name,
value: undefined,
})
);
}, [dispatch, field.name, nodeId]);
// const handleReset = useCallback(() => {
// dispatch(
// fieldValueChanged({
// nodeId,
// fieldName: field.name,
// value: undefined,
// })
// );
// }, [dispatch, field.name, nodeId]);
return (
<Flex

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

@ -1,22 +1,20 @@
import { useAppDispatch } from 'app/store/storeHooks';
import { fieldValueChanged } from 'features/nodes/store/nodesSlice';
import {
ImageInputFieldTemplate,
ImageInputFieldValue,
} from 'features/nodes/types/types';
import { memo, useCallback, useMemo } from 'react';
import { Flex } from '@chakra-ui/react';
import { skipToken } from '@reduxjs/toolkit/dist/query';
import {
TypesafeDraggableData,
TypesafeDroppableData,
} from 'app/components/ImageDnd/typesafeDnd';
import { useAppDispatch } from 'app/store/storeHooks';
import IAIDndImage from 'common/components/IAIDndImage';
import { fieldValueChanged } from 'features/nodes/store/nodesSlice';
import {
ImageInputFieldTemplate,
ImageInputFieldValue,
} from 'features/nodes/types/types';
import { memo, useCallback, useMemo } from 'react';
import { useGetImageDTOQuery } from 'services/api/endpoints/images';
import { FieldComponentProps } from './types';
import { PostUploadAction } from 'services/api/types';
import { FieldComponentProps } from './types';
const ImageInputFieldComponent = (
props: FieldComponentProps<ImageInputFieldValue, ImageInputFieldTemplate>
@ -25,12 +23,9 @@ const ImageInputFieldComponent = (
const dispatch = useAppDispatch();
const {
currentData: imageDTO,
isLoading,
isError,
isSuccess,
} = useGetImageDTOQuery(field.value?.image_name ?? skipToken);
const { currentData: imageDTO } = useGetImageDTOQuery(
field.value?.image_name ?? skipToken
);
const handleReset = useCallback(() => {
dispatch(

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

@ -7,10 +7,8 @@ import { FaAddressCard } from 'react-icons/fa';
import { FieldComponentProps } from './types';
const ItemInputFieldComponent = (
props: FieldComponentProps<ItemInputFieldValue, ItemInputFieldTemplate>
_props: FieldComponentProps<ItemInputFieldValue, ItemInputFieldTemplate>
) => {
const { nodeId, field } = props;
return <FaAddressCard />;
};

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

@ -6,10 +6,8 @@ import { memo } from 'react';
import { FieldComponentProps } from './types';
const LatentsInputFieldComponent = (
props: FieldComponentProps<LatentsInputFieldValue, LatentsInputFieldTemplate>
_props: FieldComponentProps<LatentsInputFieldValue, LatentsInputFieldTemplate>
) => {
const { nodeId, field } = props;
return null;
};

3
invokeai/frontend/web/src/features/nodes/components/fields/UnetInputFieldComponent.tsx
View File

@ -6,9 +6,8 @@ import { memo } from 'react';
import { FieldComponentProps } from './types';
const UNetInputFieldComponent = (
props: FieldComponentProps<UNetInputFieldValue, UNetInputFieldTemplate>
_props: FieldComponentProps<UNetInputFieldValue, UNetInputFieldTemplate>
) => {
const { nodeId, field } = props;
return null;
};

3
invokeai/frontend/web/src/features/nodes/components/fields/VaeInputFieldComponent.tsx
View File

@ -6,9 +6,8 @@ import { memo } from 'react';
import { FieldComponentProps } from './types';
const VaeInputFieldComponent = (
props: FieldComponentProps<VaeInputFieldValue, VaeInputFieldTemplate>
_props: FieldComponentProps<VaeInputFieldValue, VaeInputFieldTemplate>
) => {
const { nodeId, field } = props;
return null;
};

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

@ -11,7 +11,6 @@ import { MODEL_TYPE_MAP } from 'features/parameters/types/constants';
import { modelIdToVAEModelParam } from 'features/parameters/util/modelIdToVAEModelParam';
import { forEach } from 'lodash-es';
import { memo, useCallback, useMemo } from 'react';
import { useTranslation } from 'react-i18next';
import { useGetVaeModelsQuery } from 'services/api/endpoints/models';
import { FieldComponentProps } from './types';
@ -24,7 +23,6 @@ const VaeModelInputFieldComponent = (
const { nodeId, field } = props;
const vae = field.value;
const dispatch = useAppDispatch();
const { t } = useTranslation();
const { data: vaeModels } = useGetVaeModelsQuery();
const data = useMemo(() => {

13
invokeai/frontend/web/src/features/nodes/components/search/NodeSearch.tsx
View File

@ -1,26 +1,25 @@
import { Box, Flex } from '@chakra-ui/layout';
import { Tooltip } from '@chakra-ui/tooltip';
import { useAppToaster } from 'app/components/Toaster';
import { RootState } from 'app/store/store';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import IAIInput from 'common/components/IAIInput';
import { useBuildInvocation } from 'features/nodes/hooks/useBuildInvocation';
import { InvocationTemplate } from 'features/nodes/types/types';
import Fuse from 'fuse.js';
import { map } from 'lodash-es';
import {
ChangeEvent,
FocusEvent,
KeyboardEvent,
memo,
ReactNode,
memo,
useCallback,
useRef,
useState,
} from 'react';
import { Tooltip } from '@chakra-ui/tooltip';
import { AnyInvocationType } from 'services/events/types';
import { useBuildInvocation } from 'features/nodes/hooks/useBuildInvocation';
import { addToast } from 'features/system/store/systemSlice';
import { nodeAdded } from '../../store/nodesSlice';
import Fuse from 'fuse.js';
import { InvocationTemplate } from 'features/nodes/types/types';
import { useAppToaster } from 'app/components/Toaster';
interface NodeListItemProps {
title: string;

153
invokeai/frontend/web/src/features/nodes/hooks/useIsValidConnection.ts
View File

@ -1,93 +1,94 @@
import { useCallback } from 'react';
import { Connection, Node, useReactFlow } from 'reactflow';
import graphlib from '@dagrejs/graphlib';
import { InvocationValue } from '../types/types';
// TODO: enable this at some point
// import graphlib from '@dagrejs/graphlib';
// import { useCallback } from 'react';
// import { Connection, Node, useReactFlow } from 'reactflow';
// import { InvocationValue } from '../types/types';
export const useIsValidConnection = () => {
const flow = useReactFlow();
// export const useIsValidConnection = () => {
// const flow = useReactFlow();
// Check if an in-progress connection is valid
const isValidConnection = useCallback(
({ source, sourceHandle, target, targetHandle }: Connection): boolean => {
const edges = flow.getEdges();
const nodes = flow.getNodes();
// // Check if an in-progress connection is valid
// const isValidConnection = useCallback(
// ({ source, sourceHandle, target, targetHandle }: Connection): boolean => {
// const edges = flow.getEdges();
// const nodes = flow.getNodes();
return true;
// // Connection must have valid targets
// if (!(source && sourceHandle && target && targetHandle)) {
// return false;
// }
// // Connection must have valid targets
// if (!(source && sourceHandle && target && targetHandle)) {
// return false;
// }
// // Connection is invalid if target already has a connection
// if (
// edges.find((edge) => {
// return edge.target === target && edge.targetHandle === targetHandle;
// })
// ) {
// return false;
// }
// // Connection is invalid if target already has a connection
// if (
// edges.find((edge) => {
// return edge.target === target && edge.targetHandle === targetHandle;
// })
// ) {
// return false;
// }
// // Find the source and target nodes
// const sourceNode = flow.getNode(source) as Node<InvocationValue>;
// // Find the source and target nodes
// const sourceNode = flow.getNode(source) as Node<InvocationValue>;
// const targetNode = flow.getNode(target) as Node<InvocationValue>;
// const targetNode = flow.getNode(target) as Node<InvocationValue>;
// // Conditional guards against undefined nodes/handles
// if (!(sourceNode && targetNode && sourceNode.data && targetNode.data)) {
// return false;
// }
// // Conditional guards against undefined nodes/handles
// if (!(sourceNode && targetNode && sourceNode.data && targetNode.data)) {
// return false;
// }
// // Connection types must be the same for a connection
// if (
// sourceNode.data.outputs[sourceHandle].type !==
// targetNode.data.inputs[targetHandle].type
// ) {
// return false;
// }
// // Connection types must be the same for a connection
// if (
// sourceNode.data.outputs[sourceHandle].type !==
// targetNode.data.inputs[targetHandle].type
// ) {
// return false;
// }
// // Graphs much be acyclic (no loops!)
// // Graphs much be acyclic (no loops!)
// /**
// * TODO: use `graphlib.alg.findCycles()` to identify strong connections
// *
// * this validation func only runs when the cursor hits the second handle of the connection,
// * and only on that second handle - so it cannot tell us exhaustively which connections
// * are valid.
// *
// * ideally, we check when the connection starts to calculate all invalid handles at once.
// *
// * requires making a new graphlib graph - and calling `findCycles()` - for each potential
// * handle. instead of using the `isValidConnection` prop, it would use the `onConnectStart`
// * prop.
// *
// * the strong connections should be stored in global state.
// *
// * then, `isValidConnection` would simple loop through the strong connections and if the
// * source and target are in a single strong connection, return false.
// *
// * and also, we can use this knowledge to style every handle when a connection starts,
// * which is otherwise not possible.
// */
// /**
// * TODO: use `graphlib.alg.findCycles()` to identify strong connections
// *
// * this validation func only runs when the cursor hits the second handle of the connection,
// * and only on that second handle - so it cannot tell us exhaustively which connections
// * are valid.
// *
// * ideally, we check when the connection starts to calculate all invalid handles at once.
// *
// * requires making a new graphlib graph - and calling `findCycles()` - for each potential
// * handle. instead of using the `isValidConnection` prop, it would use the `onConnectStart`
// * prop.
// *
// * the strong connections should be stored in global state.
// *
// * then, `isValidConnection` would simple loop through the strong connections and if the
// * source and target are in a single strong connection, return false.
// *
// * and also, we can use this knowledge to style every handle when a connection starts,
// * which is otherwise not possible.
// */
// // build a graphlib graph
// const g = new graphlib.Graph();
// // build a graphlib graph
// const g = new graphlib.Graph();
// nodes.forEach((n) => {
// g.setNode(n.id);
// });
// nodes.forEach((n) => {
// g.setNode(n.id);
// });
// edges.forEach((e) => {
// g.setEdge(e.source, e.target);
// });
// edges.forEach((e) => {
// g.setEdge(e.source, e.target);
// });
// // Add the candidate edge to the graph
// g.setEdge(source, target);
// // Add the candidate edge to the graph
// g.setEdge(source, target);
// return graphlib.alg.isAcyclic(g);
// },
// [flow]
// );
// return graphlib.alg.isAcyclic(g);
},
[flow]
);
// return isValidConnection;
// };
return isValidConnection;
};
export const useIsValidConnection = () => () => true;

4
invokeai/frontend/web/src/features/nodes/util/fieldTemplateBuilders.ts
View File

@ -417,14 +417,17 @@ export const getFieldType = (
// if schemaObject has no type, then it should have one of allOf, anyOf, oneOf
if (schemaObject.allOf) {
rawFieldType = refObjectToFieldType(
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
schemaObject.allOf![0] as OpenAPIV3.ReferenceObject
);
} else if (schemaObject.anyOf) {
rawFieldType = refObjectToFieldType(
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
schemaObject.anyOf![0] as OpenAPIV3.ReferenceObject
);
} else if (schemaObject.oneOf) {
rawFieldType = refObjectToFieldType(
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
schemaObject.oneOf![0] as OpenAPIV3.ReferenceObject
);
}
@ -547,6 +550,7 @@ export const buildOutputFieldTemplates = (
const outputSchemaName = refObject.$ref.split('/').slice(-1)[0];
// get the output schema itself
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
const outputSchema = openAPI.components!.schemas![outputSchemaName];
if (isSchemaObject(outputSchema)) {

6
invokeai/frontend/web/src/features/nodes/util/graphBuilders/buildNodesGraph.ts
View File

@ -37,7 +37,7 @@ export const buildNodesGraph = (state: RootState): Graph => {
// Reduce the node editor nodes into invocation graph nodes
const parsedNodes = filteredNodes.reduce<NonNullable<Graph['nodes']>>(
(nodesAccumulator, node, nodeIndex) => {
(nodesAccumulator, node) => {
const { id, data } = node;
const { type, inputs } = data;
@ -50,7 +50,7 @@ export const buildNodesGraph = (state: RootState): Graph => {
return inputsAccumulator;
},
{} as Record<Exclude<string, 'id' | 'type'>, any>
{} as Record<Exclude<string, 'id' | 'type'>, unknown>
);
// Build this specific node
@ -72,7 +72,7 @@ export const buildNodesGraph = (state: RootState): Graph => {
// Reduce the node editor edges into invocation graph edges
const parsedEdges = edges.reduce<NonNullable<Graph['edges']>>(
(edgesAccumulator, edge, edgeIndex) => {
(edgesAccumulator, edge) => {
const { source, target, sourceHandle, targetHandle } = edge;
// Format the edges and add to the edges array

2
invokeai/frontend/web/src/features/nodes/util/parseSchema.ts
View File

@ -24,6 +24,7 @@ const invocationDenylist = [
export const parseSchema = (openAPI: OpenAPIV3.Document) => {
// filter out non-invocation schemas, plus some tricky invocations for now
const filteredSchemas = filter(
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
openAPI.components!.schemas,
(schema, key) =>
key.includes('Invocation') &&
@ -102,6 +103,7 @@ export const parseSchema = (openAPI: OpenAPIV3.Document) => {
// some special handling is needed for collect, iterate and range nodes
if (type === 'iterate') {
// this is guaranteed to be a SchemaObject
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
const iterationOutput = openAPI.components!.schemas![
'IterateInvocationOutput'
] as OpenAPIV3.SchemaObject;

2
invokeai/frontend/web/src/features/parameters/components/Parameters/ControlNet/ParamControlNetCollapse.tsx
View File

@ -15,7 +15,6 @@ import { getValidControlNets } from 'features/controlNet/util/getValidControlNet
import { useFeatureStatus } from 'features/system/hooks/useFeatureStatus';
import { map } from 'lodash-es';
import { Fragment, memo, useCallback } from 'react';
import { useTranslation } from 'react-i18next';
import { FaPlus } from 'react-icons/fa';
import { useGetControlNetModelsQuery } from 'services/api/endpoints/models';
import { v4 as uuidv4 } from 'uuid';
@ -38,7 +37,6 @@ const selector = createSelector(
);
const ParamControlNetCollapse = () => {
const { t } = useTranslation();
const { controlNetsArray, activeLabel } = useAppSelector(selector);
const isControlNetDisabled = useFeatureStatus('controlNet').isFeatureDisabled;
const dispatch = useAppDispatch();

2
invokeai/frontend/web/src/features/parameters/components/Parameters/Core/ParamWidth.tsx
View File

@ -10,7 +10,7 @@ import { useTranslation } from 'react-i18next';
const selector = createSelector(
[stateSelector],
({ generation, hotkeys, config, ui }) => {
({ generation, hotkeys, config }) => {
const { initial, min, sliderMax, inputMax, fineStep, coarseStep } =
config.sd.width;
const { width, aspectRatio } = generation;

9
invokeai/frontend/web/src/features/parameters/components/Parameters/ImageToImage/InitialImage.tsx
View File

@ -27,12 +27,9 @@ const selector = createSelector(
const InitialImage = () => {
const { initialImage } = useAppSelector(selector);
const {
currentData: imageDTO,
isLoading,
isError,
isSuccess,
} = useGetImageDTOQuery(initialImage?.imageName ?? skipToken);
const { currentData: imageDTO } = useGetImageDTOQuery(
initialImage?.imageName ?? skipToken
);
const draggableData = useMemo<TypesafeDraggableData | undefined>(() => {
if (imageDTO) {

3
invokeai/frontend/web/src/features/parameters/components/Parameters/Noise/ParamCpuNoise.tsx
View File

@ -5,7 +5,6 @@ import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
import IAISwitch from 'common/components/IAISwitch';
import { shouldUseCpuNoiseChanged } from 'features/parameters/store/generationSlice';
import { ChangeEvent } from 'react';
import { useTranslation } from 'react-i18next';
const selector = createSelector(
stateSelector,
@ -23,8 +22,6 @@ export const ParamCpuNoiseToggle = () => {
const dispatch = useAppDispatch();
const { isDisabled, shouldUseCpuNoise } = useAppSelector(selector);
const { t } = useTranslation();
const handleChange = (e: ChangeEvent<HTMLInputElement>) =>
dispatch(shouldUseCpuNoiseChanged(e.target.checked));

3
invokeai/frontend/web/src/features/parameters/components/Parameters/Noise/ParamNoiseToggle.tsx
View File

@ -3,7 +3,6 @@ import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import IAISwitch from 'common/components/IAISwitch';
import { setShouldUseNoiseSettings } from 'features/parameters/store/generationSlice';
import { ChangeEvent } from 'react';
import { useTranslation } from 'react-i18next';
export const ParamNoiseToggle = () => {
const dispatch = useAppDispatch();
@ -12,8 +11,6 @@ export const ParamNoiseToggle = () => {
(state: RootState) => state.generation.shouldUseNoiseSettings
);
const { t } = useTranslation();
const handleChange = (e: ChangeEvent<HTMLInputElement>) =>
dispatch(setShouldUseNoiseSettings(e.target.checked));

1
invokeai/frontend/web/src/features/parameters/components/Parameters/Upscale/ParamRealESRGANModel.tsx
View File

@ -7,7 +7,6 @@ import {
ESRGANModelName,
esrganModelNameChanged,
} from 'features/parameters/store/postprocessingSlice';
import { useTranslation } from 'react-i18next';
export const ESRGAN_MODEL_NAMES: SelectItem[] = [
{

3
invokeai/frontend/web/src/features/parameters/components/Parameters/Variations/ParamVariationToggle.tsx
View File

@ -3,7 +3,6 @@ import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import IAISwitch from 'common/components/IAISwitch';
import { setShouldGenerateVariations } from 'features/parameters/store/generationSlice';
import { ChangeEvent } from 'react';
import { useTranslation } from 'react-i18next';
export const ParamVariationToggle = () => {
const dispatch = useAppDispatch();
@ -12,8 +11,6 @@ export const ParamVariationToggle = () => {
(state: RootState) => state.generation.shouldGenerateVariations
);
const { t } = useTranslation();
const handleChange = (e: ChangeEvent<HTMLInputElement>) =>
dispatch(setShouldGenerateVariations(e.target.checked));

75
invokeai/frontend/web/src/features/parameters/components/Parameters/_ImageDimensions/AspectRatioPreview.tsx
View File

@ -1,75 +0,0 @@
import { Flex, Text } from '@chakra-ui/react';
import { memo, useMemo } from 'react';
export const ratioToCSSString = (
ratio: AspectRatio,
orientation: Orientation
) => {
if (orientation === 'portrait') {
return `${ratio[0]}/${ratio[1]}`;
}
return `${ratio[1]}/${ratio[0]}`;
};
export const ratioToDisplayString = (
ratio: AspectRatio,
orientation: Orientation
) => {
if (orientation === 'portrait') {
return `${ratio[0]}:${ratio[1]}`;
}
return `${ratio[1]}:${ratio[0]}`;
};
type AspectRatioPreviewProps = {
ratio: AspectRatio;
orientation: Orientation;
size: string;
};
export type AspectRatio = [number, number];
export type Orientation = 'portrait' | 'landscape';
const AspectRatioPreview = (props: AspectRatioPreviewProps) => {
const { ratio, size, orientation } = props;
const ratioCSSString = useMemo(() => {
if (orientation === 'portrait') {
return `${ratio[0]}/${ratio[1]}`;
}
return `${ratio[1]}/${ratio[0]}`;
}, [ratio, orientation]);
const ratioDisplayString = useMemo(() => `${ratio[0]}:${ratio[1]}`, [ratio]);
return (
<Flex
sx={{
alignItems: 'center',
justifyContent: 'center',
w: size,
h: size,
}}
>
<Flex
sx={{
alignItems: 'center',
justifyContent: 'center',
bg: 'base.700',
color: 'base.400',
borderRadius: 'base',
aspectRatio: ratioCSSString,
objectFit: 'contain',
...(orientation === 'landscape' ? { h: 'full' } : { w: 'full' }),
}}
>
<Text sx={{ size: 'xs', userSelect: 'none' }}>
{ratioDisplayString}
</Text>
</Flex>
</Flex>
);
};
export default memo(AspectRatioPreview);

76
invokeai/frontend/web/src/features/parameters/components/Parameters/_ImageDimensions/DimensionsSettings.tsx
View File

@ -1,76 +0,0 @@
import { Box, Flex, FormControl, FormLabel, Select } from '@chakra-ui/react';
import { createSelector } from '@reduxjs/toolkit';
import { RootState } from 'app/store/store';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import IAISlider from 'common/components/IAISlider';
import { setWidth } from 'features/parameters/store/generationSlice';
import { memo, useState } from 'react';
import AspectRatioPreview, {
AspectRatio,
Orientation,
} from './AspectRatioPreview';
const RATIOS: AspectRatio[] = [
[1, 1],
[5, 4],
[3, 2],
[16, 10],
[16, 9],
];
RATIOS.forEach((r) => {
const float = r[0] / r[1];
console.log((512 * float) / 8);
});
const dimensionsSettingsSelector = createSelector(
(state: RootState) => state.generation,
(generation) => {
const { width, height } = generation;
return { width, height };
}
);
const DimensionsSettings = () => {
const { width, height } = useAppSelector(dimensionsSettingsSelector);
const dispatch = useAppDispatch();
const [ratioIndex, setRatioIndex] = useState(4);
const [orientation, setOrientation] = useState<Orientation>('portrait');
return (
<Flex gap={3}>
<Box flexShrink={0}>
<AspectRatioPreview
ratio={RATIOS[ratioIndex]}
orientation={orientation}
size="4rem"
/>
</Box>
<FormControl>
<FormLabel>Aspect Ratio</FormLabel>
<Select
onChange={(e) => {
setRatioIndex(Number(e.target.value));
}}
>
{RATIOS.map((r, i) => (
<option key={r.join()} value={i}>{`${r[0]}:${r[1]}`}</option>
))}
</Select>
</FormControl>
<IAISlider
label="Size"
value={width}
min={64}
max={2048}
step={8}
onChange={(v) => {
dispatch(setWidth(v));
}}
/>
</Flex>
);
};
export default memo(DimensionsSettings);

1
invokeai/frontend/web/src/features/parameters/hooks/useRecallParameters.ts
View File

@ -3,7 +3,6 @@ import { useAppDispatch } from 'app/store/storeHooks';
import { useCallback } from 'react';
import { useTranslation } from 'react-i18next';
import { UnsafeImageMetadata } from 'services/api/endpoints/images';
import { isImageField } from 'services/api/guards';
import { ImageDTO } from 'services/api/types';
import { initialImageSelected, modelSelected } from '../store/actions';
import {

2
invokeai/frontend/web/src/features/parameters/store/generationSlice.ts
View File

@ -266,7 +266,7 @@ export const generationSlice = createSlice({
const defaultModel = action.payload.sd?.defaultModel;
if (defaultModel && !state.model) {
const [base_model, model_type, model_name] = defaultModel.split('/');
const [base_model, _model_type, model_name] = defaultModel.split('/');
const result = zMainModel.safeParse({
model_name,

2
invokeai/frontend/web/src/features/parameters/util/modelIdToControlNetModelParam.ts
View File

@ -6,7 +6,7 @@ export const modelIdToControlNetModelParam = (
controlNetModelId: string
): ControlNetModelField | undefined => {
const log = logger('models');
const [base_model, model_type, model_name] = controlNetModelId.split('/');
const [base_model, _model_type, model_name] = controlNetModelId.split('/');
const result = zControlNetModel.safeParse({
base_model,

2
invokeai/frontend/web/src/features/parameters/util/modelIdToLoRAModelParam.ts
View File

@ -6,7 +6,7 @@ export const modelIdToLoRAModelParam = (
): LoRAModelParam | undefined => {
const log = logger('models');
const [base_model, model_type, model_name] = loraModelId.split('/');
const [base_model, _model_type, model_name] = loraModelId.split('/');
const result = zLoRAModel.safeParse({
base_model,

2
invokeai/frontend/web/src/features/parameters/util/modelIdToMainModelParam.ts
View File

@ -8,7 +8,7 @@ export const modelIdToMainModelParam = (
mainModelId: string
): MainModelParam | undefined => {
const log = logger('models');
const [base_model, model_type, model_name] = mainModelId.split('/');
const [base_model, _model_type, model_name] = mainModelId.split('/');
const result = zMainModel.safeParse({
base_model,

2
invokeai/frontend/web/src/features/parameters/util/modelIdToVAEModelParam.ts
View File

@ -5,7 +5,7 @@ export const modelIdToVAEModelParam = (
vaeModelId: string
): VaeModelParam | undefined => {
const log = logger('models');
const [base_model, model_type, model_name] = vaeModelId.split('/');
const [base_model, _model_type, model_name] = vaeModelId.split('/');
const result = zVaeModel.safeParse({
base_model,

9
invokeai/frontend/web/src/features/system/components/StatusIndicator.tsx
View File

@ -1,15 +1,14 @@
import { Flex, Icon, Text } from '@chakra-ui/react';
import { createSelector } from '@reduxjs/toolkit';
import { useAppSelector } from 'app/store/storeHooks';
import { isEqual } from 'lodash-es';
import { useTranslation } from 'react-i18next';
import { systemSelector } from '../store/systemSelectors';
import { ResourceKey } from 'i18next';
import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
import { AnimatePresence, motion } from 'framer-motion';
import { ResourceKey } from 'i18next';
import { useMemo, useRef } from 'react';
import { useTranslation } from 'react-i18next';
import { FaCircle } from 'react-icons/fa';
import { useHoverDirty } from 'react-use';
import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
import { systemSelector } from '../store/systemSelectors';
const statusIndicatorSelector = createSelector(
systemSelector,

1
invokeai/frontend/web/src/features/ui/components/ParametersPinnedWrapper.tsx
View File

@ -5,7 +5,6 @@ import { PropsWithChildren, memo } from 'react';
import { PARAMETERS_PANEL_WIDTH } from 'theme/util/constants';
import { uiSelector } from '../store/uiSelectors';
import PinParametersPanelButton from './PinParametersPanelButton';
import OverlayScrollable from './common/OverlayScrollable';
const selector = createSelector(uiSelector, (ui) => {
const { shouldPinParametersPanel, shouldShowParametersPanel } = ui;

7
invokeai/frontend/web/src/features/ui/components/tabs/ImageToImage/ImageToImageTabCoreParameters.tsx
View File

@ -19,18 +19,17 @@ const selector = createSelector(
[uiSelector, generationSelector],
(ui, generation) => {
const { shouldUseSliders } = ui;
const { shouldFitToWidthHeight, shouldRandomizeSeed } = generation;
const { shouldRandomizeSeed } = generation;
const activeLabel = !shouldRandomizeSeed ? 'Manual Seed' : undefined;
return { shouldUseSliders, shouldFitToWidthHeight, activeLabel };
return { shouldUseSliders, activeLabel };
},
defaultSelectorOptions
);
const ImageToImageTabCoreParameters = () => {
const { shouldUseSliders, shouldFitToWidthHeight, activeLabel } =
useAppSelector(selector);
const { shouldUseSliders, activeLabel } = useAppSelector(selector);
return (
<IAICollapse

3
invokeai/frontend/web/src/i18n.ts
View File

@ -1,12 +1,11 @@
import i18n from 'i18next';
import LanguageDetector from 'i18next-browser-languagedetector';
import Backend from 'i18next-http-backend';
import { initReactI18next } from 'react-i18next';
// TODO: Disabled for IDE performance issues with our translation JSON
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
import translationEN from '../public/locales/en.json';
import { LOCALSTORAGE_PREFIX } from 'app/store/constants';
if (import.meta.env.MODE === 'package') {
i18n.use(initReactI18next).init({

4
invokeai/frontend/web/src/services/events/util/setEventListeners.ts
View File

@ -50,7 +50,9 @@ export const setEventListeners = (arg: SetEventListenersArg) => {
socket.on('connect_error', (error) => {
if (error && error.message) {
const data: string | undefined = (error as any).data;
const data: string | undefined = (
error as unknown as { data: string | undefined }
).data;
if (data === 'ERR_UNAUTHENTICATED') {
dispatch(
addToast(

8
invokeai/frontend/web/src/theme/components/button.ts
View File

@ -71,9 +71,13 @@ const invokeAIOutline = defineStyle((props) => {
border: '1px solid',
borderColor: c === 'gray' ? borderColor : 'currentColor',
'.chakra-button__group[data-attached][data-orientation=horizontal] > &:not(:last-of-type)':
{ marginEnd: '-1px' },
{
marginEnd: '-1px',
},
'.chakra-button__group[data-attached][data-orientation=vertical] > &:not(:last-of-type)':
{ marginBottom: '-1px' },
{
marginBottom: '-1px',
},
};
});

8
invokeai/frontend/web/src/theme/components/modal.ts
View File

@ -14,14 +14,14 @@ const invokeAIOverlay = defineStyle((props) => ({
const invokeAIDialogContainer = defineStyle({});
const invokeAIDialog = defineStyle((props) => {
const invokeAIDialog = defineStyle(() => {
return {
layerStyle: 'first',
maxH: '80vh',
};
});
const invokeAIHeader = defineStyle((props) => {
const invokeAIHeader = defineStyle(() => {
return {
fontWeight: '600',
fontSize: 'lg',
@ -42,8 +42,8 @@ const invokeAIFooter = defineStyle({});
export const invokeAI = definePartsStyle((props) => ({
overlay: invokeAIOverlay(props),
dialogContainer: invokeAIDialogContainer,
dialog: invokeAIDialog(props),
header: invokeAIHeader(props),
dialog: invokeAIDialog(),
header: invokeAIHeader(),
closeButton: invokeAICloseButton,
body: invokeAIBody,
footer: invokeAIFooter,