From 18e61e92d944daf92d4cd37ebaf6775796b39ec3 Mon Sep 17 00:00:00 2001 From: Millun Atluri Date: Fri, 26 Jan 2024 17:20:23 -0500 Subject: [PATCH 01/14] {fix} install docs house keeping --- docs/img/favicon.ico | Bin 0 -> 4286 bytes docs/index.md | 5 + docs/installation/INSTALLATION.md | 15 +- .../SDXL_w_Refiner_Text_to_Image.json | 1483 +++++++++++------ mkdocs.yml | 1 + 5 files changed, 988 insertions(+), 516 deletions(-) create mode 100644 docs/img/favicon.ico diff --git a/docs/img/favicon.ico b/docs/img/favicon.ico new file mode 100644 index 0000000000000000000000000000000000000000..16a72bebcbb47fe477c1591e73780f2d3c469913 GIT binary patch literal 4286 zcmc&%O-NKx6n-;WY3eAZHfq|`m{_Q_C^9IJtVptKvL7{c9C2f-s9j7^&`v0g=*LV8 zBP?lUS>|6^1_p+?$QDUSjs>M_SAN~^J#NnEj5^~uKKXq5-aX%W_uO;7bFZT4#E;3O z@VC+wr6_TVqNE9kM@qH;pR1R6XU^21Jx~;23X>CG@%K{=9Gz$I^HtfBf}r|TMc z{(rco6ul1$@TSh<7m$mb3-Rv|^X_dZz`mVHNJ)x>d66IoxyVWG`M!a1@2Wit^Ev~9 zgY;M*AA!{5D4#%Ea*&Ih`9C495|)p)EPQ z_pilYuhStWDg?%u)hc46LvbW~BYw0_Yt?958NNI#MsaTH|8a6WZOP$H{5hWw50B%} z9uqP)t#QE?b2Lix(lFxU--c`FcO!IFFbv@HA^8KRe|H8%LP zNaRAfTRUmvuRC+F{&Ef?Ma;S0%~c2C5YPO@KNk=E^fjKuu1q6zIt6D>Z*|FuxorLM zZsesE=SsFgC*q!!u~yBIK+e6nDi`rFVQTE_F6~wIz#sE+=5UvLVM>z2ml1 z|B=1rv*3rA Date: Fri, 26 Jan 2024 15:02:48 -0500 Subject: [PATCH 02/14] chore(ui): bump @invoke-ai/ui-library, add @invoke-ai/eslint-config-react & @invoke-ai/prettier-config-react --- invokeai/frontend/web/package.json | 8 +- invokeai/frontend/web/pnpm-lock.yaml | 109 ++++++++++++++++-- .../frontend/web/src/app/components/App.tsx | 2 +- .../components/AppErrorBoundaryFallback.tsx | 2 +- .../app/components/ThemeLocaleProvider.tsx | 2 +- .../web/src/app/components/Toaster.ts | 2 +- .../listeners/batchEnqueued.ts | 2 +- .../listeners/imageUploaded.ts | 2 +- .../src/app/store/nanostores/customStarUI.ts | 2 +- .../src/common/components/IAIColorPicker.tsx | 4 +- .../web/src/common/components/IAIDndImage.tsx | 4 +- .../src/common/components/IAIDndImageIcon.tsx | 4 +- .../src/common/components/IAIDraggable.tsx | 4 +- .../src/common/components/IAIDropOverlay.tsx | 2 +- .../src/common/components/IAIDroppable.tsx | 2 +- .../src/common/components/IAIFillSkeleton.tsx | 4 +- .../common/components/IAIImageFallback.tsx | 4 +- .../components/ImageMetadataOverlay.tsx | 2 +- .../common/components/ImageUploadOverlay.tsx | 2 +- .../InformationalPopover.tsx | 2 +- .../InformationalPopover/constants.ts | 2 +- .../src/common/components/Loading/Loading.tsx | 2 +- .../components/NodeSelectionOverlay.tsx | 2 +- .../OverlayScrollbars/ScrollableContent.tsx | 4 +- .../common/components/SelectionOverlay.tsx | 2 +- .../src/common/hooks/useChakraThemeTokens.ts | 2 +- .../common/hooks/useGroupedModelCombobox.ts | 2 +- .../web/src/common/hooks/useModelCombobox.ts | 2 +- .../ClearCanvasHistoryButtonModal.tsx | 2 +- .../features/canvas/components/IAICanvas.tsx | 2 +- .../canvas/components/IAICanvasGrid.tsx | 2 +- .../IAICanvasImageErrorFallback.tsx | 2 +- .../IAICanvasStagingAreaToolbar.tsx | 2 +- .../canvas/components/IAICanvasStatusText.tsx | 2 +- .../IAICanvasStatusTextCursorPos.tsx | 2 +- .../IAICanvasToolbar/IAICanvasBoundingBox.tsx | 2 +- .../IAICanvasToolbar/IAICanvasMaskOptions.tsx | 4 +- .../IAICanvasToolbar/IAICanvasRedoButton.tsx | 2 +- .../IAICanvasSettingsButtonPopover.tsx | 4 +- .../IAICanvasToolChooserOptions.tsx | 2 +- .../IAICanvasToolbar/IAICanvasToolbar.tsx | 4 +- .../IAICanvasToolbar/IAICanvasUndoButton.tsx | 2 +- .../components/ChangeBoardModal.tsx | 4 +- .../components/ControlAdapterConfig.tsx | 2 +- .../components/ControlAdapterImagePreview.tsx | 4 +- .../ControlAdapterShouldAutoConfig.tsx | 2 +- .../imports/ControlNetCanvasImageImports.tsx | 2 +- .../ParamControlAdapterBeginEnd.tsx | 2 +- .../ParamControlAdapterControlMode.tsx | 4 +- .../parameters/ParamControlAdapterModel.tsx | 2 +- .../ParamControlAdapterProcessorSelect.tsx | 4 +- .../ParamControlAdapterResizeMode.tsx | 4 +- .../parameters/ParamControlAdapterWeight.tsx | 2 +- .../components/processors/CannyProcessor.tsx | 2 +- .../processors/ColorMapProcessor.tsx | 2 +- .../processors/ContentShuffleProcessor.tsx | 2 +- .../processors/DepthAnyThingProcessor.tsx | 4 +- .../components/processors/HedProcessor.tsx | 2 +- .../processors/LineartAnimeProcessor.tsx | 2 +- .../processors/LineartProcessor.tsx | 2 +- .../processors/MediapipeFaceProcessor.tsx | 2 +- .../processors/MidasDepthProcessor.tsx | 2 +- .../processors/MlsdImageProcessor.tsx | 2 +- .../processors/NormalBaeProcessor.tsx | 2 +- .../processors/OpenposeProcessor.tsx | 2 +- .../components/processors/PidiProcessor.tsx | 2 +- .../processors/common/ProcessorWrapper.tsx | 2 +- .../components/DeleteImageButton.tsx | 4 +- .../components/DeleteImageModal.tsx | 2 +- .../components/ImageUsageMessage.tsx | 2 +- .../features/dnd/components/DragPreview.tsx | 4 +- .../components/DynamicPromptsPreviewModal.tsx | 2 +- .../ParamDynamicPromptsCombinatorial.tsx | 2 +- .../ParamDynamicPromptsMaxPrompts.tsx | 2 +- .../components/ParamDynamicPromptsPreview.tsx | 4 +- .../ParamDynamicPromptsSeedBehaviour.tsx | 4 +- .../ShowDynamicPromptsPreviewButton.tsx | 4 +- .../features/embedding/AddEmbeddingButton.tsx | 2 +- .../features/embedding/EmbeddingPopover.tsx | 2 +- .../features/embedding/EmbeddingSelect.tsx | 4 +- .../web/src/features/embedding/usePrompt.ts | 2 +- .../gallery/components/Boards/AutoAddIcon.tsx | 2 +- .../components/Boards/BoardAutoAddSelect.tsx | 4 +- .../components/Boards/BoardContextMenu.tsx | 4 +- .../Boards/BoardsList/AddBoardButton.tsx | 2 +- .../Boards/BoardsList/BoardsList.tsx | 2 +- .../Boards/BoardsList/BoardsSearch.tsx | 2 +- .../Boards/BoardsList/GalleryBoard.tsx | 4 +- .../Boards/BoardsList/NoBoardBoard.tsx | 2 +- .../components/Boards/DeleteBoardModal.tsx | 2 +- .../Boards/GalleryBoardContextMenuItems.tsx | 2 +- .../CurrentImage/CurrentImageButtons.tsx | 2 +- .../CurrentImage/CurrentImageDisplay.tsx | 2 +- .../CurrentImage/CurrentImagePreview.tsx | 2 +- .../components/CurrentImage/ProgressImage.tsx | 4 +- .../gallery/components/GalleryBoardName.tsx | 2 +- .../components/GallerySettingsPopover.tsx | 4 +- .../ImageContextMenu/ImageContextMenu.tsx | 4 +- .../MultipleSelectionMenuItems.tsx | 2 +- .../SingleSelectionMenuItems.tsx | 2 +- .../components/ImageGalleryContent.tsx | 2 +- .../components/ImageGrid/GalleryImage.tsx | 4 +- .../components/ImageGrid/GalleryImageGrid.tsx | 2 +- .../ImageGrid/ImageGridItemContainer.tsx | 4 +- .../ImageGrid/ImageGridListContainer.tsx | 4 +- .../ImageMetadataViewer/DataViewer.tsx | 2 +- .../ImageMetadataViewer/ImageMetadataItem.tsx | 2 +- .../ImageMetadataViewer.tsx | 2 +- .../components/NextPrevImageButtons.tsx | 4 +- .../features/hrf/components/HrfSettings.tsx | 2 +- .../hrf/components/ParamHrfMethod.tsx | 4 +- .../hrf/components/ParamHrfStrength.tsx | 2 +- .../hrf/components/ParamHrfToggle.tsx | 2 +- .../src/features/lora/components/LoRACard.tsx | 2 +- .../src/features/lora/components/LoRAList.tsx | 2 +- .../features/lora/components/LoRASelect.tsx | 4 +- .../SyncModels/SyncModelsButton.tsx | 4 +- .../SyncModels/SyncModelsIconButton.tsx | 4 +- .../subpanels/AddModelsPanel/AddModels.tsx | 2 +- .../AddModelsPanel/AdvancedAddCheckpoint.tsx | 2 +- .../AddModelsPanel/AdvancedAddDiffusers.tsx | 2 +- .../AddModelsPanel/AdvancedAddModels.tsx | 4 +- .../AddModelsPanel/FoundModelsList.tsx | 2 +- .../AddModelsPanel/ScanAdvancedAddModels.tsx | 4 +- .../subpanels/AddModelsPanel/ScanModels.tsx | 2 +- .../AddModelsPanel/SearchFolderForm.tsx | 2 +- .../AddModelsPanel/SimpleAddModels.tsx | 4 +- .../subpanels/ImportModelsPanel.tsx | 2 +- .../subpanels/MergeModelsPanel.tsx | 4 +- .../subpanels/ModelManagerPanel.tsx | 2 +- .../ModelManagerPanel/CheckpointModelEdit.tsx | 2 +- .../ModelManagerPanel/DiffusersModelEdit.tsx | 2 +- .../ModelManagerPanel/LoRAModelEdit.tsx | 2 +- .../ModelManagerPanel/ModelConvert.tsx | 2 +- .../subpanels/ModelManagerPanel/ModelList.tsx | 2 +- .../ModelManagerPanel/ModelListItem.tsx | 2 +- .../subpanels/ModelManagerSettingsPanel.tsx | 2 +- .../ModelManagerSettingsPanel/SyncModels.tsx | 2 +- .../subpanels/shared/BaseModelSelect.tsx | 4 +- .../shared/CheckpointConfigsSelect.tsx | 4 +- .../subpanels/shared/ModelVariantSelect.tsx | 4 +- .../features/nodes/components/NodeEditor.tsx | 2 +- .../flow/AddNodePopover/AddNodePopover.tsx | 4 +- .../features/nodes/components/flow/Flow.tsx | 2 +- .../flow/edges/InvocationCollapsedEdge.tsx | 2 +- .../nodes/CurrentImage/CurrentImageNode.tsx | 2 +- .../flow/nodes/Invocation/InvocationNode.tsx | 2 +- .../InvocationNodeClassificationIcon.tsx | 2 +- .../nodes/Invocation/InvocationNodeFooter.tsx | 4 +- .../nodes/Invocation/InvocationNodeHeader.tsx | 2 +- .../Invocation/InvocationNodeInfoIcon.tsx | 2 +- .../InvocationNodeStatusIndicator.tsx | 4 +- .../InvocationNodeUnknownFallback.tsx | 2 +- .../flow/nodes/Invocation/NotesTextarea.tsx | 2 +- .../Invocation/SaveToGalleryCheckbox.tsx | 2 +- .../nodes/Invocation/UseCacheCheckbox.tsx | 2 +- .../Invocation/fields/EditableFieldTitle.tsx | 4 +- .../Invocation/fields/FieldContextMenu.tsx | 4 +- .../nodes/Invocation/fields/FieldHandle.tsx | 2 +- .../nodes/Invocation/fields/FieldTitle.tsx | 2 +- .../Invocation/fields/FieldTooltipContent.tsx | 2 +- .../nodes/Invocation/fields/InputField.tsx | 2 +- .../Invocation/fields/InputFieldRenderer.tsx | 2 +- .../Invocation/fields/LinearViewField.tsx | 2 +- .../nodes/Invocation/fields/OutputField.tsx | 2 +- .../inputs/BoardFieldInputComponent.tsx | 4 +- .../inputs/BooleanFieldInputComponent.tsx | 2 +- .../ControlNetModelFieldInputComponent.tsx | 2 +- .../fields/inputs/EnumFieldInputComponent.tsx | 2 +- .../IPAdapterModelFieldInputComponent.tsx | 2 +- .../inputs/ImageFieldInputComponent.tsx | 2 +- .../inputs/LoRAModelFieldInputComponent.tsx | 2 +- .../inputs/MainModelFieldInputComponent.tsx | 2 +- .../inputs/NumberFieldInputComponent.tsx | 2 +- .../RefinerModelFieldInputComponent.tsx | 2 +- .../SDXLMainModelFieldInputComponent.tsx | 2 +- .../inputs/SchedulerFieldInputComponent.tsx | 4 +- .../inputs/StringFieldInputComponent.tsx | 2 +- .../T2IAdapterModelFieldInputComponent.tsx | 2 +- .../inputs/VAEModelFieldInputComponent.tsx | 2 +- .../components/flow/nodes/Notes/NotesNode.tsx | 2 +- .../flow/nodes/common/NodeCollapseButton.tsx | 2 +- .../flow/nodes/common/NodeTitle.tsx | 4 +- .../flow/nodes/common/NodeWrapper.tsx | 4 +- .../BottomLeftPanel/BottomLeftPanel.tsx | 2 +- .../BottomLeftPanel/NodeOpacitySlider.tsx | 2 +- .../BottomLeftPanel/ViewportControls.tsx | 2 +- .../flow/panels/MinimapPanel/MinimapPanel.tsx | 4 +- .../flow/panels/TopPanel/AddNodeButton.tsx | 2 +- .../flow/panels/TopPanel/TopPanel.tsx | 2 +- .../panels/TopPanel/UpdateNodesButton.tsx | 2 +- .../flow/panels/TopPanel/WorkflowName.tsx | 2 +- .../TopRightPanel/ReloadSchemaButton.tsx | 2 +- .../panels/TopRightPanel/TopRightPanel.tsx | 2 +- .../TopRightPanel/WorkflowEditorSettings.tsx | 2 +- .../sidePanel/NodeEditorPanelGroup.tsx | 2 +- .../inspector/InspectorDetailsTab.tsx | 2 +- .../inspector/InspectorOutputsTab.tsx | 2 +- .../sidePanel/inspector/InspectorPanel.tsx | 2 +- .../inspector/details/EditableNodeTitle.tsx | 2 +- .../sidePanel/workflow/WorkflowGeneralTab.tsx | 4 +- .../sidePanel/workflow/WorkflowJSONTab.tsx | 2 +- .../sidePanel/workflow/WorkflowLinearTab.tsx | 2 +- .../sidePanel/workflow/WorkflowPanel.tsx | 2 +- .../Advanced/ParamCFGRescaleMultiplier.tsx | 2 +- .../components/Advanced/ParamClipSkip.tsx | 2 +- .../BoundingBox/ParamBoundingBoxHeight.tsx | 2 +- .../BoundingBox/ParamBoundingBoxWidth.tsx | 2 +- .../ParamCanvasCoherenceMode.tsx | 4 +- .../ParamCanvasCoherenceSteps.tsx | 2 +- .../ParamCanvasCoherenceStrength.tsx | 2 +- .../MaskAdjustment/ParamMaskBlur.tsx | 2 +- .../MaskAdjustment/ParamMaskBlurMethod.tsx | 4 +- .../Canvas/GenerationModeStatusText.tsx | 2 +- .../InfillAndScaling/ParamInfillMethod.tsx | 4 +- .../ParamInfillPatchmatchDownscaleSize.tsx | 2 +- .../InfillAndScaling/ParamInfillTilesize.tsx | 2 +- .../ParamScaleBeforeProcessing.tsx | 4 +- .../InfillAndScaling/ParamScaledHeight.tsx | 2 +- .../InfillAndScaling/ParamScaledWidth.tsx | 2 +- .../components/Core/ParamCFGScale.tsx | 2 +- .../components/Core/ParamHeight.tsx | 2 +- .../components/Core/ParamNegativePrompt.tsx | 2 +- .../components/Core/ParamPositivePrompt.tsx | 2 +- .../components/Core/ParamScheduler.tsx | 4 +- .../parameters/components/Core/ParamSteps.tsx | 2 +- .../parameters/components/Core/ParamWidth.tsx | 2 +- .../ImageSize/AspectRatioPreview.tsx | 2 +- .../ImageSize/AspectRatioSelect.tsx | 4 +- .../components/ImageSize/ImageSize.tsx | 4 +- .../ImageSize/LockAspectRatioButton.tsx | 2 +- .../ImageSize/SetOptimalSizeButton.tsx | 2 +- .../ImageSize/SwapDimensionsButton.tsx | 2 +- .../components/ImageSize/constants.ts | 2 +- .../ImageToImage/ImageToImageFit.tsx | 2 +- .../ImageToImage/ImageToImageStrength.tsx | 2 +- .../ImageToImage/InitialImageDisplay.tsx | 2 +- .../MainModel/ParamMainModelSelect.tsx | 2 +- .../Prompts/PromptOverlayButtonWrapper.tsx | 2 +- .../parameters/components/Prompts/Prompts.tsx | 2 +- .../Seamless/ParamSeamlessXAxis.tsx | 2 +- .../Seamless/ParamSeamlessYAxis.tsx | 2 +- .../components/Seed/ParamSeedNumberInput.tsx | 2 +- .../components/Seed/ParamSeedRandomize.tsx | 2 +- .../components/Seed/ParamSeedShuffle.tsx | 2 +- .../Upscale/ParamRealESRGANModel.tsx | 4 +- .../Upscale/ParamUpscaleSettings.tsx | 2 +- .../VAEModel/ParamVAEModelSelect.tsx | 2 +- .../components/VAEModel/ParamVAEPrecision.tsx | 4 +- .../features/parameters/types/constants.ts | 2 +- .../CancelCurrentQueueItemIconButton.tsx | 4 +- .../components/ClearInvocationCacheButton.tsx | 2 +- .../queue/components/ClearQueueButton.tsx | 4 +- .../ClearQueueConfirmationAlertDialog.tsx | 4 +- .../queue/components/ClearQueueIconButton.tsx | 4 +- .../components/InvocationCacheStatus.tsx | 2 +- .../components/InvokeQueueBackButton.tsx | 2 +- .../components/QueueActionsMenuButton.tsx | 2 +- .../queue/components/QueueButtonTooltip.tsx | 2 +- .../queue/components/QueueControls.tsx | 2 +- .../queue/components/QueueFrontButton.tsx | 2 +- .../components/QueueIterationsNumberInput.tsx | 2 +- .../QueueList/QueueItemComponent.tsx | 4 +- .../components/QueueList/QueueItemDetail.tsx | 2 +- .../queue/components/QueueList/QueueList.tsx | 2 +- .../QueueList/QueueListComponent.tsx | 2 +- .../components/QueueList/QueueListHeader.tsx | 2 +- .../queue/components/QueueTabContent.tsx | 2 +- .../components/QueueTabQueueControls.tsx | 2 +- .../ToggleInvocationCacheButton.tsx | 2 +- .../queue/components/common/QueueButton.tsx | 4 +- .../components/common/QueueStatusBadge.tsx | 2 +- .../components/common/StatusStatGroup.tsx | 4 +- .../components/common/StatusStatItem.tsx | 4 +- .../ParamSDXLNegativeStylePrompt.tsx | 2 +- .../ParamSDXLPositiveStylePrompt.tsx | 2 +- .../SDXLPrompts/SDXLConcatButton.tsx | 2 +- .../components/SDXLPrompts/SDXLPrompts.tsx | 2 +- .../SDXLRefiner/ParamSDXLRefinerCFGScale.tsx | 2 +- .../ParamSDXLRefinerModelSelect.tsx | 2 +- ...ParamSDXLRefinerNegativeAestheticScore.tsx | 2 +- ...ParamSDXLRefinerPositiveAestheticScore.tsx | 2 +- .../SDXLRefiner/ParamSDXLRefinerScheduler.tsx | 4 +- .../SDXLRefiner/ParamSDXLRefinerStart.tsx | 2 +- .../SDXLRefiner/ParamSDXLRefinerSteps.tsx | 2 +- .../AdvancedSettingsAccordion.tsx | 4 +- .../CompositingSettingsAccordion.tsx | 4 +- .../ControlSettingsAccordion.tsx | 2 +- .../GenerationSettingsAccordion.tsx | 4 +- .../ImageSettingsAccordion.tsx | 4 +- .../RefinerSettingsAccordion.tsx | 4 +- .../components/AboutModal/AboutModal.tsx | 2 +- .../HotkeysModal/HotkeyListItem.tsx | 2 +- .../components/HotkeysModal/HotkeysModal.tsx | 2 +- .../components/InvokeAILogoComponent.tsx | 2 +- .../system/components/ProgressBar.tsx | 2 +- .../SettingsModal/SettingsLanguageSelect.tsx | 4 +- .../SettingsModal/SettingsLogLevelSelect.tsx | 4 +- .../components/SettingsModal/SettingsMenu.tsx | 2 +- .../SettingsModal/SettingsModal.tsx | 2 +- .../components/SettingsModal/StyledFlex.tsx | 2 +- .../system/components/StatusIndicator.tsx | 2 +- .../system/components/StickyScrollable.tsx | 2 +- .../src/features/system/store/systemSlice.ts | 2 +- .../web/src/features/system/store/types.ts | 2 +- .../web/src/features/system/util/makeToast.ts | 2 +- .../ui/components/FloatingGalleryButton.tsx | 2 +- .../FloatingParametersPanelButtons.tsx | 4 +- .../src/features/ui/components/InvokeTabs.tsx | 2 +- .../ui/components/ParametersPanel.tsx | 2 +- .../ui/components/tabs/ImageToImageTab.tsx | 2 +- .../ui/components/tabs/ModelManagerTab.tsx | 2 +- .../ui/components/tabs/ResizeHandle.tsx | 4 +- .../ui/components/tabs/TextToImageTab.tsx | 2 +- .../ui/components/tabs/UnifiedCanvasTab.tsx | 2 +- .../components/WorkflowLibraryButton.tsx | 2 +- .../components/WorkflowLibraryList.tsx | 4 +- .../components/WorkflowLibraryListItem.tsx | 2 +- .../components/WorkflowLibraryListWrapper.tsx | 2 +- .../DownloadWorkflowMenuItem.tsx | 2 +- .../NewWorkflowMenuItem.tsx | 2 +- .../SaveWorkflowAsMenuItem.tsx | 2 +- .../SaveWorkflowMenuItem.tsx | 2 +- .../WorkflowLibraryMenu/SettingsMenuItem.tsx | 2 +- .../UploadWorkflowMenuItem.tsx | 2 +- .../WorkflowLibraryMenu.tsx | 2 +- .../components/WorkflowLibraryModal.tsx | 2 +- .../components/WorkflowLibraryPagination.tsx | 2 +- .../context/WorkflowLibraryModalContext.ts | 2 +- .../hooks/useDeleteLibraryWorkflow.ts | 2 +- .../hooks/useGetAndLoadLibraryWorkflow.ts | 2 +- .../workflowLibrary/hooks/useSaveWorkflow.ts | 4 +- .../hooks/useSaveWorkflowAs.ts | 4 +- .../frontend/web/src/services/api/types.ts | 2 +- 334 files changed, 519 insertions(+), 430 deletions(-) diff --git a/invokeai/frontend/web/package.json b/invokeai/frontend/web/package.json index db43fd2f71..c9bde59ce2 100644 --- a/invokeai/frontend/web/package.json +++ b/invokeai/frontend/web/package.json @@ -32,8 +32,8 @@ "fix": "eslint --fix . && prettier --log-level warn --write .", "preinstall": "npx only-allow pnpm", "postinstall": "pnpm run theme", - "theme": "chakra-cli tokens node_modules/@invoke-ai/ui", - "theme:watch": "chakra-cli tokens node_modules/@invoke-ai/ui --watch", + "theme": "chakra-cli tokens node_modules/@invoke-ai/ui-library", + "theme:watch": "chakra-cli tokens node_modules/@invoke-ai/ui-library --watch", "storybook": "storybook dev -p 6006", "build-storybook": "storybook build", "unimported": "npx unimported" @@ -57,7 +57,7 @@ "@dnd-kit/core": "^6.1.0", "@dnd-kit/utilities": "^3.2.2", "@fontsource-variable/inter": "^5.0.16", - "@invoke-ai/ui": "0.0.13", + "@invoke-ai/ui-library": "^0.0.18", "@mantine/form": "6.0.21", "@nanostores/react": "^0.7.1", "@reduxjs/toolkit": "2.0.1", @@ -116,6 +116,8 @@ "devDependencies": { "@arthurgeron/eslint-plugin-react-usememo": "^2.2.3", "@chakra-ui/cli": "^2.4.1", + "@invoke-ai/eslint-config-react": "^0.0.11", + "@invoke-ai/prettier-config-react": "^0.0.6", "@storybook/addon-docs": "^7.6.10", "@storybook/addon-essentials": "^7.6.10", "@storybook/addon-interactions": "^7.6.10", diff --git a/invokeai/frontend/web/pnpm-lock.yaml b/invokeai/frontend/web/pnpm-lock.yaml index 958c3f6350..ae1dd40d34 100644 --- a/invokeai/frontend/web/pnpm-lock.yaml +++ b/invokeai/frontend/web/pnpm-lock.yaml @@ -28,9 +28,9 @@ dependencies: '@fontsource-variable/inter': specifier: ^5.0.16 version: 5.0.16 - '@invoke-ai/ui': - specifier: 0.0.13 - version: 0.0.13(@chakra-ui/form-control@2.2.0)(@chakra-ui/icon@3.2.0)(@chakra-ui/media-query@3.3.0)(@chakra-ui/menu@2.2.1)(@chakra-ui/spinner@2.1.0)(@chakra-ui/system@2.6.2)(@fontsource-variable/inter@5.0.16)(@internationalized/date@3.5.1)(@types/react@18.2.48)(i18next@23.7.16)(react-dom@18.2.0)(react@18.2.0) + '@invoke-ai/ui-library': + specifier: ^0.0.18 + version: 0.0.18(@chakra-ui/form-control@2.2.0)(@chakra-ui/icon@3.2.0)(@chakra-ui/media-query@3.3.0)(@chakra-ui/menu@2.2.1)(@chakra-ui/spinner@2.1.0)(@chakra-ui/system@2.6.2)(@fontsource-variable/inter@5.0.16)(@internationalized/date@3.5.1)(@types/react@18.2.48)(i18next@23.7.16)(react-dom@18.2.0)(react@18.2.0) '@mantine/form': specifier: 6.0.21 version: 6.0.21(react@18.2.0) @@ -180,6 +180,12 @@ devDependencies: '@chakra-ui/cli': specifier: ^2.4.1 version: 2.4.1 + '@invoke-ai/eslint-config-react': + specifier: ^0.0.11 + version: 0.0.11(@typescript-eslint/eslint-plugin@6.19.0)(@typescript-eslint/parser@6.19.0)(eslint-config-prettier@9.1.0)(eslint-plugin-i18next@6.0.3)(eslint-plugin-import@2.29.1)(eslint-plugin-react-hooks@4.6.0)(eslint-plugin-react-refresh@0.4.5)(eslint-plugin-react@7.33.2)(eslint-plugin-simple-import-sort@10.0.0)(eslint-plugin-storybook@0.6.15)(eslint-plugin-unused-imports@3.0.0)(eslint@8.56.0) + '@invoke-ai/prettier-config-react': + specifier: ^0.0.6 + version: 0.0.6(prettier@3.2.4) '@storybook/addon-docs': specifier: ^7.6.10 version: 7.6.10(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0)(react@18.2.0) @@ -2907,7 +2913,7 @@ packages: resolution: {integrity: sha512-m4HEDZleaaCH+XgDDsPF15Ht6wTLsgDTeR3WYj9Q/k76JtWhrJjcP4+/XlG8LGT/Rol9qUfOIztXeA84ATpqPQ==} dependencies: '@babel/helper-module-imports': 7.22.15 - '@babel/runtime': 7.23.6 + '@babel/runtime': 7.23.8 '@emotion/hash': 0.9.1 '@emotion/memoize': 0.8.1 '@emotion/serialize': 1.1.3 @@ -2966,7 +2972,7 @@ packages: '@types/react': optional: true dependencies: - '@babel/runtime': 7.23.6 + '@babel/runtime': 7.23.8 '@emotion/babel-plugin': 11.11.0 '@emotion/cache': 11.11.0 '@emotion/serialize': 1.1.3 @@ -3759,8 +3765,46 @@ packages: '@swc/helpers': 0.5.3 dev: false - /@invoke-ai/ui@0.0.13(@chakra-ui/form-control@2.2.0)(@chakra-ui/icon@3.2.0)(@chakra-ui/media-query@3.3.0)(@chakra-ui/menu@2.2.1)(@chakra-ui/spinner@2.1.0)(@chakra-ui/system@2.6.2)(@fontsource-variable/inter@5.0.16)(@internationalized/date@3.5.1)(@types/react@18.2.48)(i18next@23.7.16)(react-dom@18.2.0)(react@18.2.0): - resolution: {integrity: sha512-X4Txij2dMnzPUXTPhorBHezByJQ/ceyHxCM+zZ0gpFsSyXUieOFWjaSu+dAVpghS9y0dxFQGayHvNyX6VsX/PA==} + /@invoke-ai/eslint-config-react@0.0.11(@typescript-eslint/eslint-plugin@6.19.0)(@typescript-eslint/parser@6.19.0)(eslint-config-prettier@9.1.0)(eslint-plugin-i18next@6.0.3)(eslint-plugin-import@2.29.1)(eslint-plugin-react-hooks@4.6.0)(eslint-plugin-react-refresh@0.4.5)(eslint-plugin-react@7.33.2)(eslint-plugin-simple-import-sort@10.0.0)(eslint-plugin-storybook@0.6.15)(eslint-plugin-unused-imports@3.0.0)(eslint@8.56.0): + resolution: {integrity: sha512-To3m1qd1XMOkBYAenVT6Zjb1iTvSwetoJZrCITD4DHAtYu/3srhYVykJrNEjslCvz7AGDRtDDCczcQMOIwUJOQ==} + peerDependencies: + '@typescript-eslint/eslint-plugin': ^6.19.0 + '@typescript-eslint/parser': ^6.19.0 + eslint: ^8.56.0 + eslint-config-prettier: ^9.1.0 + eslint-plugin-i18next: ^6.0.3 + eslint-plugin-import: ^2.29.1 + eslint-plugin-react: ^7.33.2 + eslint-plugin-react-hooks: ^4.6.0 + eslint-plugin-react-refresh: ^0.4.5 + eslint-plugin-simple-import-sort: ^10.0.0 + eslint-plugin-storybook: ^0.6.15 + eslint-plugin-unused-imports: ^3.0.0 + dependencies: + '@typescript-eslint/eslint-plugin': 6.19.0(@typescript-eslint/parser@6.19.0)(eslint@8.56.0)(typescript@5.3.3) + '@typescript-eslint/parser': 6.19.0(eslint@8.56.0)(typescript@5.3.3) + eslint: 8.56.0 + eslint-config-prettier: 9.1.0(eslint@8.56.0) + eslint-plugin-i18next: 6.0.3 + eslint-plugin-import: 2.29.1(@typescript-eslint/parser@6.19.0)(eslint@8.56.0) + eslint-plugin-react: 7.33.2(eslint@8.56.0) + eslint-plugin-react-hooks: 4.6.0(eslint@8.56.0) + eslint-plugin-react-refresh: 0.4.5(eslint@8.56.0) + eslint-plugin-simple-import-sort: 10.0.0(eslint@8.56.0) + eslint-plugin-storybook: 0.6.15(eslint@8.56.0)(typescript@5.3.3) + eslint-plugin-unused-imports: 3.0.0(@typescript-eslint/eslint-plugin@6.19.0)(eslint@8.56.0) + dev: true + + /@invoke-ai/prettier-config-react@0.0.6(prettier@3.2.4): + resolution: {integrity: sha512-qHE6GAw/Aka/8TLTN9U1U+8pxjaFe5irDv/uSgzqmrBR1rGiVyMp19pEficWRRt+03zYdquiiDjTmoabWQxY0Q==} + peerDependencies: + prettier: ^3.2.4 + dependencies: + prettier: 3.2.4 + dev: true + + /@invoke-ai/ui-library@0.0.18(@chakra-ui/form-control@2.2.0)(@chakra-ui/icon@3.2.0)(@chakra-ui/media-query@3.3.0)(@chakra-ui/menu@2.2.1)(@chakra-ui/spinner@2.1.0)(@chakra-ui/system@2.6.2)(@fontsource-variable/inter@5.0.16)(@internationalized/date@3.5.1)(@types/react@18.2.48)(i18next@23.7.16)(react-dom@18.2.0)(react@18.2.0): + resolution: {integrity: sha512-Yme+2+pzYy3TPb7ZT0hYmBwahH29ZRSVIxLKSexh3BsbJXbTzGssRQU78QvK6Ymxemgbso3P8Rs+IW0zNhQKjQ==} peerDependencies: '@fontsource-variable/inter': ^5.0.16 react: ^18.2.0 @@ -3782,11 +3826,12 @@ packages: framer-motion: 10.18.0(react-dom@18.2.0)(react@18.2.0) lodash-es: 4.17.21 nanostores: 0.9.5 - overlayscrollbars: 2.4.6 - overlayscrollbars-react: 0.5.3(overlayscrollbars@2.4.6)(react@18.2.0) + overlayscrollbars: 2.4.7 + overlayscrollbars-react: 0.5.4(overlayscrollbars@2.4.7)(react@18.2.0) react: 18.2.0 react-dom: 18.2.0(react@18.2.0) - react-i18next: 14.0.0(i18next@23.7.16)(react-dom@18.2.0)(react@18.2.0) + react-i18next: 14.0.1(i18next@23.7.16)(react-dom@18.2.0)(react@18.2.0) + react-icons: 5.0.1(react@18.2.0) react-select: 5.8.0(@types/react@18.2.48)(react-dom@18.2.0)(react@18.2.0) transitivePeerDependencies: - '@chakra-ui/form-control' @@ -7640,7 +7685,7 @@ packages: resolution: {integrity: sha512-Cg7TFGpIr01vOQNODXOOaGz2NpCU5gl8x1qJFbb6hbZxR7XrcE2vtbAsTAbJ7/xwJtUuJEw8K8Zr/AE0LHlesg==} engines: {node: '>=10', npm: '>=6'} dependencies: - '@babel/runtime': 7.23.6 + '@babel/runtime': 7.23.8 cosmiconfig: 7.1.0 resolve: 1.22.8 dev: false @@ -9198,6 +9243,14 @@ packages: eslint: 8.56.0 dev: true + /eslint-plugin-react-refresh@0.4.5(eslint@8.56.0): + resolution: {integrity: sha512-D53FYKJa+fDmZMtriODxvhwrO+IOqrxoEo21gMA0sjHdU6dPVH4OhyFip9ypl8HOF5RV5KdTo+rBQLvnY2cO8w==} + peerDependencies: + eslint: '>=7' + dependencies: + eslint: 8.56.0 + dev: true + /eslint-plugin-react@7.33.2(eslint@8.56.0): resolution: {integrity: sha512-73QQMKALArI8/7xGLNI/3LylrEYrlKZSb5C9+q3OtOewTnMQi5cT+aE9E41sLCmli3I9PGGmD1yiZydyo4FEPw==} engines: {node: '>=4'} @@ -11565,10 +11618,24 @@ packages: react: 18.2.0 dev: false + /overlayscrollbars-react@0.5.4(overlayscrollbars@2.4.7)(react@18.2.0): + resolution: {integrity: sha512-FPKx9XnXovTnI4+2JXig5uEaTLSEJ6svOwPzIfBBXTHBRNsz2+WhYUmfM0K/BNYxjgDEwuPm+NQhEoOA0RoG1g==} + peerDependencies: + overlayscrollbars: ^2.0.0 + react: '>=16.8.0' + dependencies: + overlayscrollbars: 2.4.7 + react: 18.2.0 + dev: false + /overlayscrollbars@2.4.6: resolution: {integrity: sha512-C7tmhetwMv9frEvIT/RfkAVEgbjRNz/Gh2zE8BVmN+jl35GRaAnz73rlGQCMRoC2arpACAXyMNnJkzHb7GBrcA==} dev: false + /overlayscrollbars@2.4.7: + resolution: {integrity: sha512-02X2/nHno35dzebCx+EO2tRDaKAOltZqUKdUqvq3Pt8htCuhJbYi+mjr0CYerVeGRRoZ2Uo6/8XrNg//DJJ+GA==} + dev: false + /p-limit@2.3.0: resolution: {integrity: sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==} engines: {node: '>=6'} @@ -12207,6 +12274,26 @@ packages: react-dom: 18.2.0(react@18.2.0) dev: false + /react-i18next@14.0.1(i18next@23.7.16)(react-dom@18.2.0)(react@18.2.0): + resolution: {integrity: sha512-TMV8hFismBmpMdIehoFHin/okfvgjFhp723RYgIqB4XyhDobVMyukyM3Z8wtTRmajyFMZrBl/OaaXF2P6WjUAw==} + peerDependencies: + i18next: '>= 23.2.3' + react: '>= 16.8.0' + react-dom: '*' + react-native: '*' + peerDependenciesMeta: + react-dom: + optional: true + react-native: + optional: true + dependencies: + '@babel/runtime': 7.23.8 + html-parse-stringify: 3.0.1 + i18next: 23.7.16 + react: 18.2.0 + react-dom: 18.2.0(react@18.2.0) + dev: false + /react-icons@5.0.1(react@18.2.0): resolution: {integrity: sha512-WqLZJ4bLzlhmsvme6iFdgO8gfZP17rfjYEJ2m9RsZjZ+cc4k1hTzknEz63YS1MeT50kVzoa1Nz36f4BEx+Wigw==} peerDependencies: diff --git a/invokeai/frontend/web/src/app/components/App.tsx b/invokeai/frontend/web/src/app/components/App.tsx index ecd3c829d1..beb22d4446 100644 --- a/invokeai/frontend/web/src/app/components/App.tsx +++ b/invokeai/frontend/web/src/app/components/App.tsx @@ -1,4 +1,4 @@ -import { Box, useGlobalModifiersInit } from '@invoke-ai/ui'; +import { Box, useGlobalModifiersInit } from '@invoke-ai/ui-library'; import { useSocketIO } from 'app/hooks/useSocketIO'; import { useLogger } from 'app/logging/useLogger'; import { appStarted } from 'app/store/middleware/listenerMiddleware/listeners/appStarted'; diff --git a/invokeai/frontend/web/src/app/components/AppErrorBoundaryFallback.tsx b/invokeai/frontend/web/src/app/components/AppErrorBoundaryFallback.tsx index 8ee59e6648..be0269a41b 100644 --- a/invokeai/frontend/web/src/app/components/AppErrorBoundaryFallback.tsx +++ b/invokeai/frontend/web/src/app/components/AppErrorBoundaryFallback.tsx @@ -1,4 +1,4 @@ -import { Button, Flex, Heading, Link, Text, useToast } from '@invoke-ai/ui'; +import { Button, Flex, Heading, Link, Text, useToast } from '@invoke-ai/ui-library'; import newGithubIssueUrl from 'new-github-issue-url'; import { memo, useCallback, useMemo } from 'react'; import { useTranslation } from 'react-i18next'; diff --git a/invokeai/frontend/web/src/app/components/ThemeLocaleProvider.tsx b/invokeai/frontend/web/src/app/components/ThemeLocaleProvider.tsx index 15b4cf28fc..9d7520258c 100644 --- a/invokeai/frontend/web/src/app/components/ThemeLocaleProvider.tsx +++ b/invokeai/frontend/web/src/app/components/ThemeLocaleProvider.tsx @@ -7,7 +7,7 @@ import { extendTheme, theme as _theme, TOAST_OPTIONS, -} from '@invoke-ai/ui'; +} from '@invoke-ai/ui-library'; import type { ReactNode } from 'react'; import { memo, useEffect, useMemo } from 'react'; import { useTranslation } from 'react-i18next'; diff --git a/invokeai/frontend/web/src/app/components/Toaster.ts b/invokeai/frontend/web/src/app/components/Toaster.ts index 6bb2592ba4..0102ce376d 100644 --- a/invokeai/frontend/web/src/app/components/Toaster.ts +++ b/invokeai/frontend/web/src/app/components/Toaster.ts @@ -1,4 +1,4 @@ -import { useToast } from '@invoke-ai/ui'; +import { useToast } from '@invoke-ai/ui-library'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import { addToast, clearToastQueue } from 'features/system/store/systemSlice'; import type { MakeToastArg } from 'features/system/util/makeToast'; diff --git a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/batchEnqueued.ts b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/batchEnqueued.ts index d848434df9..84de200e94 100644 --- a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/batchEnqueued.ts +++ b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/batchEnqueued.ts @@ -1,4 +1,4 @@ -import { createStandaloneToast, theme, TOAST_OPTIONS } from '@invoke-ai/ui'; +import { createStandaloneToast, theme, TOAST_OPTIONS } from '@invoke-ai/ui-library'; import { logger } from 'app/logging/logger'; import { parseify } from 'common/util/serialize'; import { zPydanticValidationError } from 'features/system/store/zodSchemas'; diff --git a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/imageUploaded.ts b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/imageUploaded.ts index fdcfc7b360..675fc58ef7 100644 --- a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/imageUploaded.ts +++ b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/imageUploaded.ts @@ -1,4 +1,4 @@ -import type { UseToastOptions } from '@invoke-ai/ui'; +import type { UseToastOptions } from '@invoke-ai/ui-library'; import { logger } from 'app/logging/logger'; import { setInitialCanvasImage } from 'features/canvas/store/canvasSlice'; import { diff --git a/invokeai/frontend/web/src/app/store/nanostores/customStarUI.ts b/invokeai/frontend/web/src/app/store/nanostores/customStarUI.ts index 71a8fc4017..9f6628ac9c 100644 --- a/invokeai/frontend/web/src/app/store/nanostores/customStarUI.ts +++ b/invokeai/frontend/web/src/app/store/nanostores/customStarUI.ts @@ -1,4 +1,4 @@ -import type { MenuItemProps } from '@invoke-ai/ui'; +import type { MenuItemProps } from '@invoke-ai/ui-library'; import { atom } from 'nanostores'; export type CustomStarUi = { diff --git a/invokeai/frontend/web/src/common/components/IAIColorPicker.tsx b/invokeai/frontend/web/src/common/components/IAIColorPicker.tsx index bacfcff880..b8d143c495 100644 --- a/invokeai/frontend/web/src/common/components/IAIColorPicker.tsx +++ b/invokeai/frontend/web/src/common/components/IAIColorPicker.tsx @@ -1,10 +1,10 @@ -import type { ChakraProps } from '@invoke-ai/ui'; +import type { ChakraProps } from '@invoke-ai/ui-library'; import { CompositeNumberInput, Flex, FormControl, FormLabel, -} from '@invoke-ai/ui'; +} from '@invoke-ai/ui-library'; import type { CSSProperties } from 'react'; import { memo, useCallback } from 'react'; import { RgbaColorPicker } from 'react-colorful'; diff --git a/invokeai/frontend/web/src/common/components/IAIDndImage.tsx b/invokeai/frontend/web/src/common/components/IAIDndImage.tsx index 500ccdfb7b..851b21dd13 100644 --- a/invokeai/frontend/web/src/common/components/IAIDndImage.tsx +++ b/invokeai/frontend/web/src/common/components/IAIDndImage.tsx @@ -1,5 +1,5 @@ -import type { ChakraProps, FlexProps, SystemStyleObject } from '@invoke-ai/ui'; -import { Flex, Icon, Image } from '@invoke-ai/ui'; +import type { ChakraProps, FlexProps, SystemStyleObject } from '@invoke-ai/ui-library'; +import { Flex, Icon, Image } from '@invoke-ai/ui-library'; import { IAILoadingImageFallback, IAINoContentFallback, diff --git a/invokeai/frontend/web/src/common/components/IAIDndImageIcon.tsx b/invokeai/frontend/web/src/common/components/IAIDndImageIcon.tsx index 1df0cb527a..650a0b6a14 100644 --- a/invokeai/frontend/web/src/common/components/IAIDndImageIcon.tsx +++ b/invokeai/frontend/web/src/common/components/IAIDndImageIcon.tsx @@ -1,5 +1,5 @@ -import type { SystemStyleObject } from '@invoke-ai/ui'; -import { IconButton } from '@invoke-ai/ui'; +import type { SystemStyleObject } from '@invoke-ai/ui-library'; +import { IconButton } from '@invoke-ai/ui-library'; import type { MouseEvent, ReactElement } from 'react'; import { memo, useMemo } from 'react'; diff --git a/invokeai/frontend/web/src/common/components/IAIDraggable.tsx b/invokeai/frontend/web/src/common/components/IAIDraggable.tsx index 678f60415d..9e0b5206bc 100644 --- a/invokeai/frontend/web/src/common/components/IAIDraggable.tsx +++ b/invokeai/frontend/web/src/common/components/IAIDraggable.tsx @@ -1,5 +1,5 @@ -import type { BoxProps } from '@invoke-ai/ui'; -import { Box } from '@invoke-ai/ui'; +import type { BoxProps } from '@invoke-ai/ui-library'; +import { Box } from '@invoke-ai/ui-library'; import { useDraggableTypesafe } from 'features/dnd/hooks/typesafeHooks'; import type { TypesafeDraggableData } from 'features/dnd/types'; import { memo, useRef } from 'react'; diff --git a/invokeai/frontend/web/src/common/components/IAIDropOverlay.tsx b/invokeai/frontend/web/src/common/components/IAIDropOverlay.tsx index a6b654a947..e708d0097a 100644 --- a/invokeai/frontend/web/src/common/components/IAIDropOverlay.tsx +++ b/invokeai/frontend/web/src/common/components/IAIDropOverlay.tsx @@ -1,4 +1,4 @@ -import { Box, Flex } from '@invoke-ai/ui'; +import { Box, Flex } from '@invoke-ai/ui-library'; import type { AnimationProps } from 'framer-motion'; import { motion } from 'framer-motion'; import type { ReactNode } from 'react'; diff --git a/invokeai/frontend/web/src/common/components/IAIDroppable.tsx b/invokeai/frontend/web/src/common/components/IAIDroppable.tsx index 2f48229010..3377422a85 100644 --- a/invokeai/frontend/web/src/common/components/IAIDroppable.tsx +++ b/invokeai/frontend/web/src/common/components/IAIDroppable.tsx @@ -1,4 +1,4 @@ -import { Box } from '@invoke-ai/ui'; +import { Box } from '@invoke-ai/ui-library'; import { useDroppableTypesafe } from 'features/dnd/hooks/typesafeHooks'; import type { TypesafeDroppableData } from 'features/dnd/types'; import { isValidDrop } from 'features/dnd/util/isValidDrop'; diff --git a/invokeai/frontend/web/src/common/components/IAIFillSkeleton.tsx b/invokeai/frontend/web/src/common/components/IAIFillSkeleton.tsx index c1e51226fd..29bcb927ac 100644 --- a/invokeai/frontend/web/src/common/components/IAIFillSkeleton.tsx +++ b/invokeai/frontend/web/src/common/components/IAIFillSkeleton.tsx @@ -1,5 +1,5 @@ -import type { SystemStyleObject } from '@invoke-ai/ui'; -import { Box, Skeleton } from '@invoke-ai/ui'; +import type { SystemStyleObject } from '@invoke-ai/ui-library'; +import { Box, Skeleton } from '@invoke-ai/ui-library'; import { memo } from 'react'; const skeletonStyles: SystemStyleObject = { diff --git a/invokeai/frontend/web/src/common/components/IAIImageFallback.tsx b/invokeai/frontend/web/src/common/components/IAIImageFallback.tsx index 4ed3aa814b..c8cf83b5f1 100644 --- a/invokeai/frontend/web/src/common/components/IAIImageFallback.tsx +++ b/invokeai/frontend/web/src/common/components/IAIImageFallback.tsx @@ -1,5 +1,5 @@ -import type { As, ChakraProps, FlexProps } from '@invoke-ai/ui'; -import { Flex, Icon, Skeleton, Spinner, Text } from '@invoke-ai/ui'; +import type { As, ChakraProps, FlexProps } from '@invoke-ai/ui-library'; +import { Flex, Icon, Skeleton, Spinner, Text } from '@invoke-ai/ui-library'; import { memo, useMemo } from 'react'; import { PiImageBold } from 'react-icons/pi'; import type { ImageDTO } from 'services/api/types'; diff --git a/invokeai/frontend/web/src/common/components/ImageMetadataOverlay.tsx b/invokeai/frontend/web/src/common/components/ImageMetadataOverlay.tsx index 003ace0d1c..531b2b4298 100644 --- a/invokeai/frontend/web/src/common/components/ImageMetadataOverlay.tsx +++ b/invokeai/frontend/web/src/common/components/ImageMetadataOverlay.tsx @@ -1,4 +1,4 @@ -import { Badge, Flex } from '@invoke-ai/ui'; +import { Badge, Flex } from '@invoke-ai/ui-library'; import { memo } from 'react'; import type { ImageDTO } from 'services/api/types'; diff --git a/invokeai/frontend/web/src/common/components/ImageUploadOverlay.tsx b/invokeai/frontend/web/src/common/components/ImageUploadOverlay.tsx index dd0b250110..070598f081 100644 --- a/invokeai/frontend/web/src/common/components/ImageUploadOverlay.tsx +++ b/invokeai/frontend/web/src/common/components/ImageUploadOverlay.tsx @@ -1,4 +1,4 @@ -import { Box, Flex, Heading } from '@invoke-ai/ui'; +import { Box, Flex, Heading } from '@invoke-ai/ui-library'; import type { AnimationProps } from 'framer-motion'; import { motion } from 'framer-motion'; import { memo } from 'react'; diff --git a/invokeai/frontend/web/src/common/components/InformationalPopover/InformationalPopover.tsx b/invokeai/frontend/web/src/common/components/InformationalPopover/InformationalPopover.tsx index cd2b320155..0a52000664 100644 --- a/invokeai/frontend/web/src/common/components/InformationalPopover/InformationalPopover.tsx +++ b/invokeai/frontend/web/src/common/components/InformationalPopover/InformationalPopover.tsx @@ -11,7 +11,7 @@ import { PopoverTrigger, Portal, Text, -} from '@invoke-ai/ui'; +} from '@invoke-ai/ui-library'; import { useAppSelector } from 'app/store/storeHooks'; import { merge, omit } from 'lodash-es'; import type { ReactElement } from 'react'; diff --git a/invokeai/frontend/web/src/common/components/InformationalPopover/constants.ts b/invokeai/frontend/web/src/common/components/InformationalPopover/constants.ts index 09d4e9c132..8d3337dcaa 100644 --- a/invokeai/frontend/web/src/common/components/InformationalPopover/constants.ts +++ b/invokeai/frontend/web/src/common/components/InformationalPopover/constants.ts @@ -1,4 +1,4 @@ -import type { PopoverProps } from '@invoke-ai/ui'; +import type { PopoverProps } from '@invoke-ai/ui-library'; export type Feature = | 'clipSkip' diff --git a/invokeai/frontend/web/src/common/components/Loading/Loading.tsx b/invokeai/frontend/web/src/common/components/Loading/Loading.tsx index 024936ebd8..57b4d55560 100644 --- a/invokeai/frontend/web/src/common/components/Loading/Loading.tsx +++ b/invokeai/frontend/web/src/common/components/Loading/Loading.tsx @@ -1,4 +1,4 @@ -import { Flex, Image, Spinner } from '@invoke-ai/ui'; +import { Flex, Image, Spinner } from '@invoke-ai/ui-library'; import InvokeLogoWhite from 'public/assets/images/invoke-symbol-wht-lrg.svg'; import { memo } from 'react'; diff --git a/invokeai/frontend/web/src/common/components/NodeSelectionOverlay.tsx b/invokeai/frontend/web/src/common/components/NodeSelectionOverlay.tsx index 7e31cd74c0..31ea415c90 100644 --- a/invokeai/frontend/web/src/common/components/NodeSelectionOverlay.tsx +++ b/invokeai/frontend/web/src/common/components/NodeSelectionOverlay.tsx @@ -1,4 +1,4 @@ -import { Box } from '@invoke-ai/ui'; +import { Box } from '@invoke-ai/ui-library'; import { memo, useMemo } from 'react'; type Props = { diff --git a/invokeai/frontend/web/src/common/components/OverlayScrollbars/ScrollableContent.tsx b/invokeai/frontend/web/src/common/components/OverlayScrollbars/ScrollableContent.tsx index b78fd3d3a6..f7624075c2 100644 --- a/invokeai/frontend/web/src/common/components/OverlayScrollbars/ScrollableContent.tsx +++ b/invokeai/frontend/web/src/common/components/OverlayScrollbars/ScrollableContent.tsx @@ -1,5 +1,5 @@ -import type { ChakraProps } from '@invoke-ai/ui'; -import { Box, Flex } from '@invoke-ai/ui'; +import type { ChakraProps } from '@invoke-ai/ui-library'; +import { Box, Flex } from '@invoke-ai/ui-library'; import { getOverlayScrollbarsParams } from 'common/components/OverlayScrollbars/constants'; import { OverlayScrollbarsComponent } from 'overlayscrollbars-react'; import type { CSSProperties, PropsWithChildren } from 'react'; diff --git a/invokeai/frontend/web/src/common/components/SelectionOverlay.tsx b/invokeai/frontend/web/src/common/components/SelectionOverlay.tsx index 9eb1af0b99..eb50a6b9d4 100644 --- a/invokeai/frontend/web/src/common/components/SelectionOverlay.tsx +++ b/invokeai/frontend/web/src/common/components/SelectionOverlay.tsx @@ -1,4 +1,4 @@ -import { Box } from '@invoke-ai/ui'; +import { Box } from '@invoke-ai/ui-library'; import { memo, useMemo } from 'react'; type Props = { diff --git a/invokeai/frontend/web/src/common/hooks/useChakraThemeTokens.ts b/invokeai/frontend/web/src/common/hooks/useChakraThemeTokens.ts index 06090b3dbd..93345f6a4c 100644 --- a/invokeai/frontend/web/src/common/hooks/useChakraThemeTokens.ts +++ b/invokeai/frontend/web/src/common/hooks/useChakraThemeTokens.ts @@ -1,4 +1,4 @@ -import { useToken } from '@invoke-ai/ui'; +import { useToken } from '@invoke-ai/ui-library'; export const useChakraThemeTokens = () => { const [ diff --git a/invokeai/frontend/web/src/common/hooks/useGroupedModelCombobox.ts b/invokeai/frontend/web/src/common/hooks/useGroupedModelCombobox.ts index d76eab4a53..44e9101574 100644 --- a/invokeai/frontend/web/src/common/hooks/useGroupedModelCombobox.ts +++ b/invokeai/frontend/web/src/common/hooks/useGroupedModelCombobox.ts @@ -1,4 +1,4 @@ -import type { ComboboxOnChange, ComboboxOption } from '@invoke-ai/ui'; +import type { ComboboxOnChange, ComboboxOption } from '@invoke-ai/ui-library'; import type { EntityState } from '@reduxjs/toolkit'; import { useAppSelector } from 'app/store/storeHooks'; import type { GroupBase } from 'chakra-react-select'; diff --git a/invokeai/frontend/web/src/common/hooks/useModelCombobox.ts b/invokeai/frontend/web/src/common/hooks/useModelCombobox.ts index 25908c5f62..6d2957aca9 100644 --- a/invokeai/frontend/web/src/common/hooks/useModelCombobox.ts +++ b/invokeai/frontend/web/src/common/hooks/useModelCombobox.ts @@ -1,4 +1,4 @@ -import type { ComboboxOnChange, ComboboxOption } from '@invoke-ai/ui'; +import type { ComboboxOnChange, ComboboxOption } from '@invoke-ai/ui-library'; import type { EntityState } from '@reduxjs/toolkit'; import { map } from 'lodash-es'; import { useCallback, useMemo } from 'react'; diff --git a/invokeai/frontend/web/src/features/canvas/components/ClearCanvasHistoryButtonModal.tsx b/invokeai/frontend/web/src/features/canvas/components/ClearCanvasHistoryButtonModal.tsx index 5d352c08c4..98b720f610 100644 --- a/invokeai/frontend/web/src/features/canvas/components/ClearCanvasHistoryButtonModal.tsx +++ b/invokeai/frontend/web/src/features/canvas/components/ClearCanvasHistoryButtonModal.tsx @@ -1,4 +1,4 @@ -import { Button, ConfirmationAlertDialog, useDisclosure } from '@invoke-ai/ui'; +import { Button, ConfirmationAlertDialog, useDisclosure } from '@invoke-ai/ui-library'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import { isStagingSelector } from 'features/canvas/store/canvasSelectors'; import { clearCanvasHistory } from 'features/canvas/store/canvasSlice'; diff --git a/invokeai/frontend/web/src/features/canvas/components/IAICanvas.tsx b/invokeai/frontend/web/src/features/canvas/components/IAICanvas.tsx index fafbccb705..06f9399ede 100644 --- a/invokeai/frontend/web/src/features/canvas/components/IAICanvas.tsx +++ b/invokeai/frontend/web/src/features/canvas/components/IAICanvas.tsx @@ -1,4 +1,4 @@ -import { Box, chakra, Flex } from '@invoke-ai/ui'; +import { Box, chakra, Flex } from '@invoke-ai/ui-library'; import { useStore } from '@nanostores/react'; import { createMemoizedSelector } from 'app/store/createMemoizedSelector'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; diff --git a/invokeai/frontend/web/src/features/canvas/components/IAICanvasGrid.tsx b/invokeai/frontend/web/src/features/canvas/components/IAICanvasGrid.tsx index a049714037..06925d90a3 100644 --- a/invokeai/frontend/web/src/features/canvas/components/IAICanvasGrid.tsx +++ b/invokeai/frontend/web/src/features/canvas/components/IAICanvasGrid.tsx @@ -1,5 +1,5 @@ // Grid drawing adapted from https://longviewcoder.com/2021/12/08/konva-a-better-grid/ -import { getArbitraryBaseColor } from '@invoke-ai/ui'; +import { getArbitraryBaseColor } from '@invoke-ai/ui-library'; import { createMemoizedSelector } from 'app/store/createMemoizedSelector'; import { useAppSelector } from 'app/store/storeHooks'; import { selectCanvasSlice } from 'features/canvas/store/canvasSlice'; diff --git a/invokeai/frontend/web/src/features/canvas/components/IAICanvasImageErrorFallback.tsx b/invokeai/frontend/web/src/features/canvas/components/IAICanvasImageErrorFallback.tsx index ef23a55cd2..55ef24f3e5 100644 --- a/invokeai/frontend/web/src/features/canvas/components/IAICanvasImageErrorFallback.tsx +++ b/invokeai/frontend/web/src/features/canvas/components/IAICanvasImageErrorFallback.tsx @@ -1,4 +1,4 @@ -import { useToken } from '@invoke-ai/ui'; +import { useToken } from '@invoke-ai/ui-library'; import type { CanvasImage } from 'features/canvas/store/canvasTypes'; import { memo } from 'react'; import { useTranslation } from 'react-i18next'; diff --git a/invokeai/frontend/web/src/features/canvas/components/IAICanvasStagingAreaToolbar.tsx b/invokeai/frontend/web/src/features/canvas/components/IAICanvasStagingAreaToolbar.tsx index 976bc7c49a..326426cea8 100644 --- a/invokeai/frontend/web/src/features/canvas/components/IAICanvasStagingAreaToolbar.tsx +++ b/invokeai/frontend/web/src/features/canvas/components/IAICanvasStagingAreaToolbar.tsx @@ -1,4 +1,4 @@ -import { Button, ButtonGroup, Flex, IconButton } from '@invoke-ai/ui'; +import { Button, ButtonGroup, Flex, IconButton } from '@invoke-ai/ui-library'; import { skipToken } from '@reduxjs/toolkit/query'; import { createMemoizedSelector } from 'app/store/createMemoizedSelector'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; diff --git a/invokeai/frontend/web/src/features/canvas/components/IAICanvasStatusText.tsx b/invokeai/frontend/web/src/features/canvas/components/IAICanvasStatusText.tsx index 8e99ffb65a..ff854aef60 100644 --- a/invokeai/frontend/web/src/features/canvas/components/IAICanvasStatusText.tsx +++ b/invokeai/frontend/web/src/features/canvas/components/IAICanvasStatusText.tsx @@ -1,4 +1,4 @@ -import { Box, Flex } from '@invoke-ai/ui'; +import { Box, Flex } from '@invoke-ai/ui-library'; import { createMemoizedSelector } from 'app/store/createMemoizedSelector'; import { useAppSelector } from 'app/store/storeHooks'; import { selectCanvasSlice } from 'features/canvas/store/canvasSlice'; diff --git a/invokeai/frontend/web/src/features/canvas/components/IAICanvasStatusText/IAICanvasStatusTextCursorPos.tsx b/invokeai/frontend/web/src/features/canvas/components/IAICanvasStatusText/IAICanvasStatusTextCursorPos.tsx index dd24ea34a1..6e5afde469 100644 --- a/invokeai/frontend/web/src/features/canvas/components/IAICanvasStatusText/IAICanvasStatusTextCursorPos.tsx +++ b/invokeai/frontend/web/src/features/canvas/components/IAICanvasStatusText/IAICanvasStatusTextCursorPos.tsx @@ -1,4 +1,4 @@ -import { Box } from '@invoke-ai/ui'; +import { Box } from '@invoke-ai/ui-library'; import { useStore } from '@nanostores/react'; import { $cursorPosition } from 'features/canvas/store/canvasNanostore'; import roundToHundreth from 'features/canvas/util/roundToHundreth'; diff --git a/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasBoundingBox.tsx b/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasBoundingBox.tsx index bc7bc6fa4c..3b64bca952 100644 --- a/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasBoundingBox.tsx +++ b/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasBoundingBox.tsx @@ -1,4 +1,4 @@ -import { useShiftModifier } from '@invoke-ai/ui'; +import { useShiftModifier } from '@invoke-ai/ui-library'; import { useStore } from '@nanostores/react'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import { diff --git a/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasMaskOptions.tsx b/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasMaskOptions.tsx index 2e4fcccd85..5665fdc4e7 100644 --- a/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasMaskOptions.tsx +++ b/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasMaskOptions.tsx @@ -1,4 +1,4 @@ -import type { FormLabelProps } from '@invoke-ai/ui'; +import type { FormLabelProps } from '@invoke-ai/ui-library'; import { Box, Button, @@ -13,7 +13,7 @@ import { PopoverBody, PopoverContent, PopoverTrigger, -} from '@invoke-ai/ui'; +} from '@invoke-ai/ui-library'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import IAIColorPicker from 'common/components/IAIColorPicker'; import { canvasMaskSavedToGallery } from 'features/canvas/store/actions'; diff --git a/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasRedoButton.tsx b/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasRedoButton.tsx index 1fdffa0d3e..d156944a60 100644 --- a/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasRedoButton.tsx +++ b/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasRedoButton.tsx @@ -1,4 +1,4 @@ -import { IconButton } from '@invoke-ai/ui'; +import { IconButton } from '@invoke-ai/ui-library'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import { redo } from 'features/canvas/store/canvasSlice'; import { activeTabNameSelector } from 'features/ui/store/uiSelectors'; diff --git a/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasSettingsButtonPopover.tsx b/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasSettingsButtonPopover.tsx index bbdff781bf..32badac87b 100644 --- a/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasSettingsButtonPopover.tsx +++ b/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasSettingsButtonPopover.tsx @@ -1,4 +1,4 @@ -import type { FormLabelProps } from '@invoke-ai/ui'; +import type { FormLabelProps } from '@invoke-ai/ui-library'; import { Checkbox, Flex, @@ -10,7 +10,7 @@ import { PopoverBody, PopoverContent, PopoverTrigger, -} from '@invoke-ai/ui'; +} from '@invoke-ai/ui-library'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import ClearCanvasHistoryButtonModal from 'features/canvas/components/ClearCanvasHistoryButtonModal'; import { diff --git a/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasToolChooserOptions.tsx b/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasToolChooserOptions.tsx index 5584be9ed1..9eb4a3cc65 100644 --- a/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasToolChooserOptions.tsx +++ b/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasToolChooserOptions.tsx @@ -11,7 +11,7 @@ import { PopoverBody, PopoverContent, PopoverTrigger, -} from '@invoke-ai/ui'; +} from '@invoke-ai/ui-library'; import { useStore } from '@nanostores/react'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import IAIColorPicker from 'common/components/IAIColorPicker'; diff --git a/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasToolbar.tsx b/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasToolbar.tsx index 865e0d5767..3d764c50d7 100644 --- a/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasToolbar.tsx +++ b/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasToolbar.tsx @@ -1,4 +1,4 @@ -import type { ComboboxOnChange } from '@invoke-ai/ui'; +import type { ComboboxOnChange } from '@invoke-ai/ui-library'; import { ButtonGroup, Combobox, @@ -6,7 +6,7 @@ import { FormControl, IconButton, Tooltip, -} from '@invoke-ai/ui'; +} from '@invoke-ai/ui-library'; import { useStore } from '@nanostores/react'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import { useCopyImageToClipboard } from 'common/hooks/useCopyImageToClipboard'; diff --git a/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasUndoButton.tsx b/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasUndoButton.tsx index a2b8feac23..f1fcdf96e5 100644 --- a/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasUndoButton.tsx +++ b/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasUndoButton.tsx @@ -1,4 +1,4 @@ -import { IconButton } from '@invoke-ai/ui'; +import { IconButton } from '@invoke-ai/ui-library'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import { undo } from 'features/canvas/store/canvasSlice'; import { activeTabNameSelector } from 'features/ui/store/uiSelectors'; diff --git a/invokeai/frontend/web/src/features/changeBoardModal/components/ChangeBoardModal.tsx b/invokeai/frontend/web/src/features/changeBoardModal/components/ChangeBoardModal.tsx index d7e774c87f..b8688b334d 100644 --- a/invokeai/frontend/web/src/features/changeBoardModal/components/ChangeBoardModal.tsx +++ b/invokeai/frontend/web/src/features/changeBoardModal/components/ChangeBoardModal.tsx @@ -1,11 +1,11 @@ -import type { ComboboxOnChange, ComboboxOption } from '@invoke-ai/ui'; +import type { ComboboxOnChange, ComboboxOption } from '@invoke-ai/ui-library'; import { Combobox, ConfirmationAlertDialog, Flex, FormControl, Text, -} from '@invoke-ai/ui'; +} from '@invoke-ai/ui-library'; import { createMemoizedSelector } from 'app/store/createMemoizedSelector'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import { diff --git a/invokeai/frontend/web/src/features/controlAdapters/components/ControlAdapterConfig.tsx b/invokeai/frontend/web/src/features/controlAdapters/components/ControlAdapterConfig.tsx index 8c40777714..21b05b30d7 100644 --- a/invokeai/frontend/web/src/features/controlAdapters/components/ControlAdapterConfig.tsx +++ b/invokeai/frontend/web/src/features/controlAdapters/components/ControlAdapterConfig.tsx @@ -6,7 +6,7 @@ import { Icon, IconButton, Switch, -} from '@invoke-ai/ui'; +} from '@invoke-ai/ui-library'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import { useControlAdapterIsEnabled } from 'features/controlAdapters/hooks/useControlAdapterIsEnabled'; import { useControlAdapterType } from 'features/controlAdapters/hooks/useControlAdapterType'; diff --git a/invokeai/frontend/web/src/features/controlAdapters/components/ControlAdapterImagePreview.tsx b/invokeai/frontend/web/src/features/controlAdapters/components/ControlAdapterImagePreview.tsx index 8c4e96e799..84cd77fac3 100644 --- a/invokeai/frontend/web/src/features/controlAdapters/components/ControlAdapterImagePreview.tsx +++ b/invokeai/frontend/web/src/features/controlAdapters/components/ControlAdapterImagePreview.tsx @@ -1,5 +1,5 @@ -import type { SystemStyleObject } from '@invoke-ai/ui'; -import { Box, Flex, Spinner } from '@invoke-ai/ui'; +import type { SystemStyleObject } from '@invoke-ai/ui-library'; +import { Box, Flex, Spinner } from '@invoke-ai/ui-library'; import { skipToken } from '@reduxjs/toolkit/query'; import { createMemoizedSelector } from 'app/store/createMemoizedSelector'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; diff --git a/invokeai/frontend/web/src/features/controlAdapters/components/ControlAdapterShouldAutoConfig.tsx b/invokeai/frontend/web/src/features/controlAdapters/components/ControlAdapterShouldAutoConfig.tsx index 073595cf38..b8bdbc7f5a 100644 --- a/invokeai/frontend/web/src/features/controlAdapters/components/ControlAdapterShouldAutoConfig.tsx +++ b/invokeai/frontend/web/src/features/controlAdapters/components/ControlAdapterShouldAutoConfig.tsx @@ -1,4 +1,4 @@ -import { FormControl, FormLabel, Switch } from '@invoke-ai/ui'; +import { FormControl, FormLabel, Switch } from '@invoke-ai/ui-library'; import { useAppDispatch } from 'app/store/storeHooks'; import { useControlAdapterIsEnabled } from 'features/controlAdapters/hooks/useControlAdapterIsEnabled'; import { useControlAdapterShouldAutoConfig } from 'features/controlAdapters/hooks/useControlAdapterShouldAutoConfig'; diff --git a/invokeai/frontend/web/src/features/controlAdapters/components/imports/ControlNetCanvasImageImports.tsx b/invokeai/frontend/web/src/features/controlAdapters/components/imports/ControlNetCanvasImageImports.tsx index 4c94448cf5..8b24ec2b7e 100644 --- a/invokeai/frontend/web/src/features/controlAdapters/components/imports/ControlNetCanvasImageImports.tsx +++ b/invokeai/frontend/web/src/features/controlAdapters/components/imports/ControlNetCanvasImageImports.tsx @@ -1,4 +1,4 @@ -import { Flex, IconButton } from '@invoke-ai/ui'; +import { Flex, IconButton } from '@invoke-ai/ui-library'; import { useAppDispatch } from 'app/store/storeHooks'; import { canvasImageToControlAdapter, diff --git a/invokeai/frontend/web/src/features/controlAdapters/components/parameters/ParamControlAdapterBeginEnd.tsx b/invokeai/frontend/web/src/features/controlAdapters/components/parameters/ParamControlAdapterBeginEnd.tsx index 891cd1776a..bfe513d1fd 100644 --- a/invokeai/frontend/web/src/features/controlAdapters/components/parameters/ParamControlAdapterBeginEnd.tsx +++ b/invokeai/frontend/web/src/features/controlAdapters/components/parameters/ParamControlAdapterBeginEnd.tsx @@ -1,4 +1,4 @@ -import { CompositeRangeSlider, FormControl, FormLabel } from '@invoke-ai/ui'; +import { CompositeRangeSlider, FormControl, FormLabel } from '@invoke-ai/ui-library'; import { useAppDispatch } from 'app/store/storeHooks'; import { useControlAdapterBeginEndStepPct } from 'features/controlAdapters/hooks/useControlAdapterBeginEndStepPct'; import { useControlAdapterIsEnabled } from 'features/controlAdapters/hooks/useControlAdapterIsEnabled'; diff --git a/invokeai/frontend/web/src/features/controlAdapters/components/parameters/ParamControlAdapterControlMode.tsx b/invokeai/frontend/web/src/features/controlAdapters/components/parameters/ParamControlAdapterControlMode.tsx index 1cee707bb6..3a55d97e6a 100644 --- a/invokeai/frontend/web/src/features/controlAdapters/components/parameters/ParamControlAdapterControlMode.tsx +++ b/invokeai/frontend/web/src/features/controlAdapters/components/parameters/ParamControlAdapterControlMode.tsx @@ -1,5 +1,5 @@ -import type { ComboboxOnChange } from '@invoke-ai/ui'; -import { Combobox, FormControl, FormLabel } from '@invoke-ai/ui'; +import type { ComboboxOnChange } from '@invoke-ai/ui-library'; +import { Combobox, FormControl, FormLabel } from '@invoke-ai/ui-library'; import { useAppDispatch } from 'app/store/storeHooks'; import { InformationalPopover } from 'common/components/InformationalPopover/InformationalPopover'; import { useControlAdapterControlMode } from 'features/controlAdapters/hooks/useControlAdapterControlMode'; diff --git a/invokeai/frontend/web/src/features/controlAdapters/components/parameters/ParamControlAdapterModel.tsx b/invokeai/frontend/web/src/features/controlAdapters/components/parameters/ParamControlAdapterModel.tsx index 8323675caf..e835476ba1 100644 --- a/invokeai/frontend/web/src/features/controlAdapters/components/parameters/ParamControlAdapterModel.tsx +++ b/invokeai/frontend/web/src/features/controlAdapters/components/parameters/ParamControlAdapterModel.tsx @@ -1,4 +1,4 @@ -import { Combobox, FormControl, Tooltip } from '@invoke-ai/ui'; +import { Combobox, FormControl, Tooltip } from '@invoke-ai/ui-library'; import { createMemoizedSelector } from 'app/store/createMemoizedSelector'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import { useGroupedModelCombobox } from 'common/hooks/useGroupedModelCombobox'; diff --git a/invokeai/frontend/web/src/features/controlAdapters/components/parameters/ParamControlAdapterProcessorSelect.tsx b/invokeai/frontend/web/src/features/controlAdapters/components/parameters/ParamControlAdapterProcessorSelect.tsx index f395dbad32..5f9dfd3b27 100644 --- a/invokeai/frontend/web/src/features/controlAdapters/components/parameters/ParamControlAdapterProcessorSelect.tsx +++ b/invokeai/frontend/web/src/features/controlAdapters/components/parameters/ParamControlAdapterProcessorSelect.tsx @@ -1,5 +1,5 @@ -import type { ComboboxOnChange, ComboboxOption } from '@invoke-ai/ui'; -import { Combobox, FormControl, FormLabel } from '@invoke-ai/ui'; +import type { ComboboxOnChange, ComboboxOption } from '@invoke-ai/ui-library'; +import { Combobox, FormControl, FormLabel } from '@invoke-ai/ui-library'; import { createMemoizedSelector } from 'app/store/createMemoizedSelector'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import { useControlAdapterIsEnabled } from 'features/controlAdapters/hooks/useControlAdapterIsEnabled'; diff --git a/invokeai/frontend/web/src/features/controlAdapters/components/parameters/ParamControlAdapterResizeMode.tsx b/invokeai/frontend/web/src/features/controlAdapters/components/parameters/ParamControlAdapterResizeMode.tsx index 1ee1fdc2ca..3b6c23a2a1 100644 --- a/invokeai/frontend/web/src/features/controlAdapters/components/parameters/ParamControlAdapterResizeMode.tsx +++ b/invokeai/frontend/web/src/features/controlAdapters/components/parameters/ParamControlAdapterResizeMode.tsx @@ -1,5 +1,5 @@ -import type { ComboboxOnChange } from '@invoke-ai/ui'; -import { Combobox, FormControl, FormLabel } from '@invoke-ai/ui'; +import type { ComboboxOnChange } from '@invoke-ai/ui-library'; +import { Combobox, FormControl, FormLabel } from '@invoke-ai/ui-library'; import { useAppDispatch } from 'app/store/storeHooks'; import { InformationalPopover } from 'common/components/InformationalPopover/InformationalPopover'; import { useControlAdapterIsEnabled } from 'features/controlAdapters/hooks/useControlAdapterIsEnabled'; diff --git a/invokeai/frontend/web/src/features/controlAdapters/components/parameters/ParamControlAdapterWeight.tsx b/invokeai/frontend/web/src/features/controlAdapters/components/parameters/ParamControlAdapterWeight.tsx index 27a4115ae7..068b38d6ba 100644 --- a/invokeai/frontend/web/src/features/controlAdapters/components/parameters/ParamControlAdapterWeight.tsx +++ b/invokeai/frontend/web/src/features/controlAdapters/components/parameters/ParamControlAdapterWeight.tsx @@ -3,7 +3,7 @@ import { CompositeSlider, FormControl, FormLabel, -} from '@invoke-ai/ui'; +} from '@invoke-ai/ui-library'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import { InformationalPopover } from 'common/components/InformationalPopover/InformationalPopover'; import { useControlAdapterIsEnabled } from 'features/controlAdapters/hooks/useControlAdapterIsEnabled'; diff --git a/invokeai/frontend/web/src/features/controlAdapters/components/processors/CannyProcessor.tsx b/invokeai/frontend/web/src/features/controlAdapters/components/processors/CannyProcessor.tsx index 4803188202..0f5c1b72e9 100644 --- a/invokeai/frontend/web/src/features/controlAdapters/components/processors/CannyProcessor.tsx +++ b/invokeai/frontend/web/src/features/controlAdapters/components/processors/CannyProcessor.tsx @@ -3,7 +3,7 @@ import { CompositeSlider, FormControl, FormLabel, -} from '@invoke-ai/ui'; +} from '@invoke-ai/ui-library'; import { useProcessorNodeChanged } from 'features/controlAdapters/components/hooks/useProcessorNodeChanged'; import { CONTROLNET_PROCESSORS } from 'features/controlAdapters/store/constants'; import type { RequiredCannyImageProcessorInvocation } from 'features/controlAdapters/store/types'; diff --git a/invokeai/frontend/web/src/features/controlAdapters/components/processors/ColorMapProcessor.tsx b/invokeai/frontend/web/src/features/controlAdapters/components/processors/ColorMapProcessor.tsx index efbd4e5ba5..bfb2b880f2 100644 --- a/invokeai/frontend/web/src/features/controlAdapters/components/processors/ColorMapProcessor.tsx +++ b/invokeai/frontend/web/src/features/controlAdapters/components/processors/ColorMapProcessor.tsx @@ -3,7 +3,7 @@ import { CompositeSlider, FormControl, FormLabel, -} from '@invoke-ai/ui'; +} from '@invoke-ai/ui-library'; import { useProcessorNodeChanged } from 'features/controlAdapters/components/hooks/useProcessorNodeChanged'; import { CONTROLNET_PROCESSORS } from 'features/controlAdapters/store/constants'; import type { RequiredColorMapImageProcessorInvocation } from 'features/controlAdapters/store/types'; diff --git a/invokeai/frontend/web/src/features/controlAdapters/components/processors/ContentShuffleProcessor.tsx b/invokeai/frontend/web/src/features/controlAdapters/components/processors/ContentShuffleProcessor.tsx index cca0aba74c..7343c220c6 100644 --- a/invokeai/frontend/web/src/features/controlAdapters/components/processors/ContentShuffleProcessor.tsx +++ b/invokeai/frontend/web/src/features/controlAdapters/components/processors/ContentShuffleProcessor.tsx @@ -3,7 +3,7 @@ import { CompositeSlider, FormControl, FormLabel, -} from '@invoke-ai/ui'; +} from '@invoke-ai/ui-library'; import { useProcessorNodeChanged } from 'features/controlAdapters/components/hooks/useProcessorNodeChanged'; import { CONTROLNET_PROCESSORS } from 'features/controlAdapters/store/constants'; import type { RequiredContentShuffleImageProcessorInvocation } from 'features/controlAdapters/store/types'; diff --git a/invokeai/frontend/web/src/features/controlAdapters/components/processors/DepthAnyThingProcessor.tsx b/invokeai/frontend/web/src/features/controlAdapters/components/processors/DepthAnyThingProcessor.tsx index 025c53743e..d1a4db9818 100644 --- a/invokeai/frontend/web/src/features/controlAdapters/components/processors/DepthAnyThingProcessor.tsx +++ b/invokeai/frontend/web/src/features/controlAdapters/components/processors/DepthAnyThingProcessor.tsx @@ -1,11 +1,11 @@ -import type { ComboboxOnChange } from '@invoke-ai/ui'; +import type { ComboboxOnChange } from '@invoke-ai/ui-library'; import { Combobox, CompositeNumberInput, CompositeSlider, FormControl, FormLabel, -} from '@invoke-ai/ui'; +} from '@invoke-ai/ui-library'; import { useProcessorNodeChanged } from 'features/controlAdapters/components/hooks/useProcessorNodeChanged'; import { CONTROLNET_PROCESSORS } from 'features/controlAdapters/store/constants'; import type { diff --git a/invokeai/frontend/web/src/features/controlAdapters/components/processors/HedProcessor.tsx b/invokeai/frontend/web/src/features/controlAdapters/components/processors/HedProcessor.tsx index 83c406829b..4242f7c95b 100644 --- a/invokeai/frontend/web/src/features/controlAdapters/components/processors/HedProcessor.tsx +++ b/invokeai/frontend/web/src/features/controlAdapters/components/processors/HedProcessor.tsx @@ -4,7 +4,7 @@ import { FormControl, FormLabel, Switch, -} from '@invoke-ai/ui'; +} from '@invoke-ai/ui-library'; import { useProcessorNodeChanged } from 'features/controlAdapters/components/hooks/useProcessorNodeChanged'; import { CONTROLNET_PROCESSORS } from 'features/controlAdapters/store/constants'; import type { RequiredHedImageProcessorInvocation } from 'features/controlAdapters/store/types'; diff --git a/invokeai/frontend/web/src/features/controlAdapters/components/processors/LineartAnimeProcessor.tsx b/invokeai/frontend/web/src/features/controlAdapters/components/processors/LineartAnimeProcessor.tsx index a1651cd428..741c02c106 100644 --- a/invokeai/frontend/web/src/features/controlAdapters/components/processors/LineartAnimeProcessor.tsx +++ b/invokeai/frontend/web/src/features/controlAdapters/components/processors/LineartAnimeProcessor.tsx @@ -3,7 +3,7 @@ import { CompositeSlider, FormControl, FormLabel, -} from '@invoke-ai/ui'; +} from '@invoke-ai/ui-library'; import { useProcessorNodeChanged } from 'features/controlAdapters/components/hooks/useProcessorNodeChanged'; import { CONTROLNET_PROCESSORS } from 'features/controlAdapters/store/constants'; import type { RequiredLineartAnimeImageProcessorInvocation } from 'features/controlAdapters/store/types'; diff --git a/invokeai/frontend/web/src/features/controlAdapters/components/processors/LineartProcessor.tsx b/invokeai/frontend/web/src/features/controlAdapters/components/processors/LineartProcessor.tsx index 3535d15d3c..6148364020 100644 --- a/invokeai/frontend/web/src/features/controlAdapters/components/processors/LineartProcessor.tsx +++ b/invokeai/frontend/web/src/features/controlAdapters/components/processors/LineartProcessor.tsx @@ -4,7 +4,7 @@ import { FormControl, FormLabel, Switch, -} from '@invoke-ai/ui'; +} from '@invoke-ai/ui-library'; import { useProcessorNodeChanged } from 'features/controlAdapters/components/hooks/useProcessorNodeChanged'; import { CONTROLNET_PROCESSORS } from 'features/controlAdapters/store/constants'; import type { RequiredLineartImageProcessorInvocation } from 'features/controlAdapters/store/types'; diff --git a/invokeai/frontend/web/src/features/controlAdapters/components/processors/MediapipeFaceProcessor.tsx b/invokeai/frontend/web/src/features/controlAdapters/components/processors/MediapipeFaceProcessor.tsx index e914491000..2fb7aa7310 100644 --- a/invokeai/frontend/web/src/features/controlAdapters/components/processors/MediapipeFaceProcessor.tsx +++ b/invokeai/frontend/web/src/features/controlAdapters/components/processors/MediapipeFaceProcessor.tsx @@ -3,7 +3,7 @@ import { CompositeSlider, FormControl, FormLabel, -} from '@invoke-ai/ui'; +} from '@invoke-ai/ui-library'; import { useProcessorNodeChanged } from 'features/controlAdapters/components/hooks/useProcessorNodeChanged'; import { CONTROLNET_PROCESSORS } from 'features/controlAdapters/store/constants'; import type { RequiredMediapipeFaceProcessorInvocation } from 'features/controlAdapters/store/types'; diff --git a/invokeai/frontend/web/src/features/controlAdapters/components/processors/MidasDepthProcessor.tsx b/invokeai/frontend/web/src/features/controlAdapters/components/processors/MidasDepthProcessor.tsx index e95c4c8a7f..ba52a102af 100644 --- a/invokeai/frontend/web/src/features/controlAdapters/components/processors/MidasDepthProcessor.tsx +++ b/invokeai/frontend/web/src/features/controlAdapters/components/processors/MidasDepthProcessor.tsx @@ -3,7 +3,7 @@ import { CompositeSlider, FormControl, FormLabel, -} from '@invoke-ai/ui'; +} from '@invoke-ai/ui-library'; import { useProcessorNodeChanged } from 'features/controlAdapters/components/hooks/useProcessorNodeChanged'; import { CONTROLNET_PROCESSORS } from 'features/controlAdapters/store/constants'; import type { RequiredMidasDepthImageProcessorInvocation } from 'features/controlAdapters/store/types'; diff --git a/invokeai/frontend/web/src/features/controlAdapters/components/processors/MlsdImageProcessor.tsx b/invokeai/frontend/web/src/features/controlAdapters/components/processors/MlsdImageProcessor.tsx index 34a993b070..1091d5698d 100644 --- a/invokeai/frontend/web/src/features/controlAdapters/components/processors/MlsdImageProcessor.tsx +++ b/invokeai/frontend/web/src/features/controlAdapters/components/processors/MlsdImageProcessor.tsx @@ -3,7 +3,7 @@ import { CompositeSlider, FormControl, FormLabel, -} from '@invoke-ai/ui'; +} from '@invoke-ai/ui-library'; import { useProcessorNodeChanged } from 'features/controlAdapters/components/hooks/useProcessorNodeChanged'; import { CONTROLNET_PROCESSORS } from 'features/controlAdapters/store/constants'; import type { RequiredMlsdImageProcessorInvocation } from 'features/controlAdapters/store/types'; diff --git a/invokeai/frontend/web/src/features/controlAdapters/components/processors/NormalBaeProcessor.tsx b/invokeai/frontend/web/src/features/controlAdapters/components/processors/NormalBaeProcessor.tsx index 24b83ef950..b1709d3bf1 100644 --- a/invokeai/frontend/web/src/features/controlAdapters/components/processors/NormalBaeProcessor.tsx +++ b/invokeai/frontend/web/src/features/controlAdapters/components/processors/NormalBaeProcessor.tsx @@ -3,7 +3,7 @@ import { CompositeSlider, FormControl, FormLabel, -} from '@invoke-ai/ui'; +} from '@invoke-ai/ui-library'; import { useProcessorNodeChanged } from 'features/controlAdapters/components/hooks/useProcessorNodeChanged'; import { CONTROLNET_PROCESSORS } from 'features/controlAdapters/store/constants'; import type { RequiredNormalbaeImageProcessorInvocation } from 'features/controlAdapters/store/types'; diff --git a/invokeai/frontend/web/src/features/controlAdapters/components/processors/OpenposeProcessor.tsx b/invokeai/frontend/web/src/features/controlAdapters/components/processors/OpenposeProcessor.tsx index 8385183cbc..6e27deb291 100644 --- a/invokeai/frontend/web/src/features/controlAdapters/components/processors/OpenposeProcessor.tsx +++ b/invokeai/frontend/web/src/features/controlAdapters/components/processors/OpenposeProcessor.tsx @@ -4,7 +4,7 @@ import { FormControl, FormLabel, Switch, -} from '@invoke-ai/ui'; +} from '@invoke-ai/ui-library'; import { useProcessorNodeChanged } from 'features/controlAdapters/components/hooks/useProcessorNodeChanged'; import { CONTROLNET_PROCESSORS } from 'features/controlAdapters/store/constants'; import type { RequiredOpenposeImageProcessorInvocation } from 'features/controlAdapters/store/types'; diff --git a/invokeai/frontend/web/src/features/controlAdapters/components/processors/PidiProcessor.tsx b/invokeai/frontend/web/src/features/controlAdapters/components/processors/PidiProcessor.tsx index e8dac66e19..e723e876da 100644 --- a/invokeai/frontend/web/src/features/controlAdapters/components/processors/PidiProcessor.tsx +++ b/invokeai/frontend/web/src/features/controlAdapters/components/processors/PidiProcessor.tsx @@ -4,7 +4,7 @@ import { FormControl, FormLabel, Switch, -} from '@invoke-ai/ui'; +} from '@invoke-ai/ui-library'; import { useProcessorNodeChanged } from 'features/controlAdapters/components/hooks/useProcessorNodeChanged'; import { CONTROLNET_PROCESSORS } from 'features/controlAdapters/store/constants'; import type { RequiredPidiImageProcessorInvocation } from 'features/controlAdapters/store/types'; diff --git a/invokeai/frontend/web/src/features/controlAdapters/components/processors/common/ProcessorWrapper.tsx b/invokeai/frontend/web/src/features/controlAdapters/components/processors/common/ProcessorWrapper.tsx index 1eb1b45de1..0b99887b53 100644 --- a/invokeai/frontend/web/src/features/controlAdapters/components/processors/common/ProcessorWrapper.tsx +++ b/invokeai/frontend/web/src/features/controlAdapters/components/processors/common/ProcessorWrapper.tsx @@ -1,4 +1,4 @@ -import { Flex } from '@invoke-ai/ui'; +import { Flex } from '@invoke-ai/ui-library'; import type { PropsWithChildren } from 'react'; import { memo } from 'react'; diff --git a/invokeai/frontend/web/src/features/deleteImageModal/components/DeleteImageButton.tsx b/invokeai/frontend/web/src/features/deleteImageModal/components/DeleteImageButton.tsx index e312553daf..9d46a185f8 100644 --- a/invokeai/frontend/web/src/features/deleteImageModal/components/DeleteImageButton.tsx +++ b/invokeai/frontend/web/src/features/deleteImageModal/components/DeleteImageButton.tsx @@ -1,5 +1,5 @@ -import type { IconButtonProps } from '@invoke-ai/ui'; -import { IconButton } from '@invoke-ai/ui'; +import type { IconButtonProps } from '@invoke-ai/ui-library'; +import { IconButton } from '@invoke-ai/ui-library'; import { useAppSelector } from 'app/store/storeHooks'; import { memo } from 'react'; import { useTranslation } from 'react-i18next'; diff --git a/invokeai/frontend/web/src/features/deleteImageModal/components/DeleteImageModal.tsx b/invokeai/frontend/web/src/features/deleteImageModal/components/DeleteImageModal.tsx index b59d810bd1..2909559975 100644 --- a/invokeai/frontend/web/src/features/deleteImageModal/components/DeleteImageModal.tsx +++ b/invokeai/frontend/web/src/features/deleteImageModal/components/DeleteImageModal.tsx @@ -6,7 +6,7 @@ import { FormLabel, Switch, Text, -} from '@invoke-ai/ui'; +} from '@invoke-ai/ui-library'; import { createMemoizedSelector } from 'app/store/createMemoizedSelector'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import { selectCanvasSlice } from 'features/canvas/store/canvasSlice'; diff --git a/invokeai/frontend/web/src/features/deleteImageModal/components/ImageUsageMessage.tsx b/invokeai/frontend/web/src/features/deleteImageModal/components/ImageUsageMessage.tsx index 2e5c4efe24..756582c287 100644 --- a/invokeai/frontend/web/src/features/deleteImageModal/components/ImageUsageMessage.tsx +++ b/invokeai/frontend/web/src/features/deleteImageModal/components/ImageUsageMessage.tsx @@ -1,4 +1,4 @@ -import { ListItem, Text, UnorderedList } from '@invoke-ai/ui'; +import { ListItem, Text, UnorderedList } from '@invoke-ai/ui-library'; import type { ImageUsage } from 'features/deleteImageModal/store/types'; import { some } from 'lodash-es'; import { memo } from 'react'; diff --git a/invokeai/frontend/web/src/features/dnd/components/DragPreview.tsx b/invokeai/frontend/web/src/features/dnd/components/DragPreview.tsx index f52f7945e0..e9f6c6ee4d 100644 --- a/invokeai/frontend/web/src/features/dnd/components/DragPreview.tsx +++ b/invokeai/frontend/web/src/features/dnd/components/DragPreview.tsx @@ -1,5 +1,5 @@ -import type { ChakraProps } from '@invoke-ai/ui'; -import { Box, Flex, Heading, Image, Text } from '@invoke-ai/ui'; +import type { ChakraProps } from '@invoke-ai/ui-library'; +import { Box, Flex, Heading, Image, Text } from '@invoke-ai/ui-library'; import { useAppSelector } from 'app/store/storeHooks'; import type { TypesafeDraggableData } from 'features/dnd/types'; import { memo } from 'react'; diff --git a/invokeai/frontend/web/src/features/dynamicPrompts/components/DynamicPromptsPreviewModal.tsx b/invokeai/frontend/web/src/features/dynamicPrompts/components/DynamicPromptsPreviewModal.tsx index 1783ccf9d1..620bda597f 100644 --- a/invokeai/frontend/web/src/features/dynamicPrompts/components/DynamicPromptsPreviewModal.tsx +++ b/invokeai/frontend/web/src/features/dynamicPrompts/components/DynamicPromptsPreviewModal.tsx @@ -6,7 +6,7 @@ import { ModalContent, ModalHeader, ModalOverlay, -} from '@invoke-ai/ui'; +} from '@invoke-ai/ui-library'; import { useDynamicPromptsModal } from 'features/dynamicPrompts/hooks/useDynamicPromptsModal'; import { memo } from 'react'; import { useTranslation } from 'react-i18next'; diff --git a/invokeai/frontend/web/src/features/dynamicPrompts/components/ParamDynamicPromptsCombinatorial.tsx b/invokeai/frontend/web/src/features/dynamicPrompts/components/ParamDynamicPromptsCombinatorial.tsx index 1a772d8245..64901ddb86 100644 --- a/invokeai/frontend/web/src/features/dynamicPrompts/components/ParamDynamicPromptsCombinatorial.tsx +++ b/invokeai/frontend/web/src/features/dynamicPrompts/components/ParamDynamicPromptsCombinatorial.tsx @@ -1,4 +1,4 @@ -import { FormControl, FormLabel, Switch } from '@invoke-ai/ui'; +import { FormControl, FormLabel, Switch } from '@invoke-ai/ui-library'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import { combinatorialToggled } from 'features/dynamicPrompts/store/dynamicPromptsSlice'; import { memo, useCallback } from 'react'; diff --git a/invokeai/frontend/web/src/features/dynamicPrompts/components/ParamDynamicPromptsMaxPrompts.tsx b/invokeai/frontend/web/src/features/dynamicPrompts/components/ParamDynamicPromptsMaxPrompts.tsx index cd0daaf22a..1dcd95010e 100644 --- a/invokeai/frontend/web/src/features/dynamicPrompts/components/ParamDynamicPromptsMaxPrompts.tsx +++ b/invokeai/frontend/web/src/features/dynamicPrompts/components/ParamDynamicPromptsMaxPrompts.tsx @@ -3,7 +3,7 @@ import { CompositeSlider, FormControl, FormLabel, -} from '@invoke-ai/ui'; +} from '@invoke-ai/ui-library'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import { InformationalPopover } from 'common/components/InformationalPopover/InformationalPopover'; import { maxPromptsChanged } from 'features/dynamicPrompts/store/dynamicPromptsSlice'; diff --git a/invokeai/frontend/web/src/features/dynamicPrompts/components/ParamDynamicPromptsPreview.tsx b/invokeai/frontend/web/src/features/dynamicPrompts/components/ParamDynamicPromptsPreview.tsx index 48cfd9a8d4..0c374995a7 100644 --- a/invokeai/frontend/web/src/features/dynamicPrompts/components/ParamDynamicPromptsPreview.tsx +++ b/invokeai/frontend/web/src/features/dynamicPrompts/components/ParamDynamicPromptsPreview.tsx @@ -1,4 +1,4 @@ -import type { ChakraProps } from '@invoke-ai/ui'; +import type { ChakraProps } from '@invoke-ai/ui-library'; import { Flex, FormControl, @@ -7,7 +7,7 @@ import { OrderedList, Spinner, Text, -} from '@invoke-ai/ui'; +} from '@invoke-ai/ui-library'; import { createMemoizedSelector } from 'app/store/createMemoizedSelector'; import { useAppSelector } from 'app/store/storeHooks'; import { IAINoContentFallback } from 'common/components/IAIImageFallback'; diff --git a/invokeai/frontend/web/src/features/dynamicPrompts/components/ParamDynamicPromptsSeedBehaviour.tsx b/invokeai/frontend/web/src/features/dynamicPrompts/components/ParamDynamicPromptsSeedBehaviour.tsx index 87a860ac89..7fb6e1a116 100644 --- a/invokeai/frontend/web/src/features/dynamicPrompts/components/ParamDynamicPromptsSeedBehaviour.tsx +++ b/invokeai/frontend/web/src/features/dynamicPrompts/components/ParamDynamicPromptsSeedBehaviour.tsx @@ -1,5 +1,5 @@ -import type { ComboboxOnChange, ComboboxOption } from '@invoke-ai/ui'; -import { Combobox, FormControl, FormLabel } from '@invoke-ai/ui'; +import type { ComboboxOnChange, ComboboxOption } from '@invoke-ai/ui-library'; +import { Combobox, FormControl, FormLabel } from '@invoke-ai/ui-library'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import { InformationalPopover } from 'common/components/InformationalPopover/InformationalPopover'; import { diff --git a/invokeai/frontend/web/src/features/dynamicPrompts/components/ShowDynamicPromptsPreviewButton.tsx b/invokeai/frontend/web/src/features/dynamicPrompts/components/ShowDynamicPromptsPreviewButton.tsx index b590767868..78cd48f22f 100644 --- a/invokeai/frontend/web/src/features/dynamicPrompts/components/ShowDynamicPromptsPreviewButton.tsx +++ b/invokeai/frontend/web/src/features/dynamicPrompts/components/ShowDynamicPromptsPreviewButton.tsx @@ -1,5 +1,5 @@ -import type { SystemStyleObject } from '@invoke-ai/ui'; -import { IconButton, spinAnimation, Tooltip } from '@invoke-ai/ui'; +import type { SystemStyleObject } from '@invoke-ai/ui-library'; +import { IconButton, spinAnimation, Tooltip } from '@invoke-ai/ui-library'; import { useAppSelector } from 'app/store/storeHooks'; import { useDynamicPromptsModal } from 'features/dynamicPrompts/hooks/useDynamicPromptsModal'; import { memo } from 'react'; diff --git a/invokeai/frontend/web/src/features/embedding/AddEmbeddingButton.tsx b/invokeai/frontend/web/src/features/embedding/AddEmbeddingButton.tsx index c1207a13b0..d32d6006ae 100644 --- a/invokeai/frontend/web/src/features/embedding/AddEmbeddingButton.tsx +++ b/invokeai/frontend/web/src/features/embedding/AddEmbeddingButton.tsx @@ -1,4 +1,4 @@ -import { IconButton, Tooltip } from '@invoke-ai/ui'; +import { IconButton, Tooltip } from '@invoke-ai/ui-library'; import { memo } from 'react'; import { useTranslation } from 'react-i18next'; import { PiCodeBold } from 'react-icons/pi'; diff --git a/invokeai/frontend/web/src/features/embedding/EmbeddingPopover.tsx b/invokeai/frontend/web/src/features/embedding/EmbeddingPopover.tsx index bd39c1012a..42c690fe13 100644 --- a/invokeai/frontend/web/src/features/embedding/EmbeddingPopover.tsx +++ b/invokeai/frontend/web/src/features/embedding/EmbeddingPopover.tsx @@ -3,7 +3,7 @@ import { PopoverAnchor, PopoverBody, PopoverContent, -} from '@invoke-ai/ui'; +} from '@invoke-ai/ui-library'; import { EmbeddingSelect } from 'features/embedding/EmbeddingSelect'; import type { EmbeddingPopoverProps } from 'features/embedding/types'; import { memo } from 'react'; diff --git a/invokeai/frontend/web/src/features/embedding/EmbeddingSelect.tsx b/invokeai/frontend/web/src/features/embedding/EmbeddingSelect.tsx index 2a263894ff..d90e0ac93c 100644 --- a/invokeai/frontend/web/src/features/embedding/EmbeddingSelect.tsx +++ b/invokeai/frontend/web/src/features/embedding/EmbeddingSelect.tsx @@ -1,5 +1,5 @@ -import type { ChakraProps } from '@invoke-ai/ui'; -import { Combobox, FormControl } from '@invoke-ai/ui'; +import type { ChakraProps } from '@invoke-ai/ui-library'; +import { Combobox, FormControl } from '@invoke-ai/ui-library'; import { useAppSelector } from 'app/store/storeHooks'; import { useGroupedModelCombobox } from 'common/hooks/useGroupedModelCombobox'; import type { EmbeddingSelectProps } from 'features/embedding/types'; diff --git a/invokeai/frontend/web/src/features/embedding/usePrompt.ts b/invokeai/frontend/web/src/features/embedding/usePrompt.ts index 4c5878df6f..cdc4b1b80f 100644 --- a/invokeai/frontend/web/src/features/embedding/usePrompt.ts +++ b/invokeai/frontend/web/src/features/embedding/usePrompt.ts @@ -1,4 +1,4 @@ -import { useDisclosure } from '@invoke-ai/ui'; +import { useDisclosure } from '@invoke-ai/ui-library'; import { isNil } from 'lodash-es'; import type { ChangeEventHandler, diff --git a/invokeai/frontend/web/src/features/gallery/components/Boards/AutoAddIcon.tsx b/invokeai/frontend/web/src/features/gallery/components/Boards/AutoAddIcon.tsx index edb15344c4..6541b66151 100644 --- a/invokeai/frontend/web/src/features/gallery/components/Boards/AutoAddIcon.tsx +++ b/invokeai/frontend/web/src/features/gallery/components/Boards/AutoAddIcon.tsx @@ -1,4 +1,4 @@ -import { Badge, Flex } from '@invoke-ai/ui'; +import { Badge, Flex } from '@invoke-ai/ui-library'; import { memo } from 'react'; import { useTranslation } from 'react-i18next'; diff --git a/invokeai/frontend/web/src/features/gallery/components/Boards/BoardAutoAddSelect.tsx b/invokeai/frontend/web/src/features/gallery/components/Boards/BoardAutoAddSelect.tsx index 0286dd350d..73bb073464 100644 --- a/invokeai/frontend/web/src/features/gallery/components/Boards/BoardAutoAddSelect.tsx +++ b/invokeai/frontend/web/src/features/gallery/components/Boards/BoardAutoAddSelect.tsx @@ -1,5 +1,5 @@ -import type { ComboboxOnChange, ComboboxOption } from '@invoke-ai/ui'; -import { Combobox, FormControl, FormLabel } from '@invoke-ai/ui'; +import type { ComboboxOnChange, ComboboxOption } from '@invoke-ai/ui-library'; +import { Combobox, FormControl, FormLabel } from '@invoke-ai/ui-library'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import { autoAddBoardIdChanged } from 'features/gallery/store/gallerySlice'; import { memo, useCallback, useMemo } from 'react'; diff --git a/invokeai/frontend/web/src/features/gallery/components/Boards/BoardContextMenu.tsx b/invokeai/frontend/web/src/features/gallery/components/Boards/BoardContextMenu.tsx index 09c4e94709..2e1f4ce90a 100644 --- a/invokeai/frontend/web/src/features/gallery/components/Boards/BoardContextMenu.tsx +++ b/invokeai/frontend/web/src/features/gallery/components/Boards/BoardContextMenu.tsx @@ -1,5 +1,5 @@ -import type { ContextMenuProps } from '@invoke-ai/ui'; -import { ContextMenu, MenuGroup, MenuItem, MenuList } from '@invoke-ai/ui'; +import type { ContextMenuProps } from '@invoke-ai/ui-library'; +import { ContextMenu, MenuGroup, MenuItem, MenuList } from '@invoke-ai/ui-library'; import { createSelector } from '@reduxjs/toolkit'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import { diff --git a/invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/AddBoardButton.tsx b/invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/AddBoardButton.tsx index 5e7a4b0f99..5cd4d001f4 100644 --- a/invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/AddBoardButton.tsx +++ b/invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/AddBoardButton.tsx @@ -1,4 +1,4 @@ -import { IconButton } from '@invoke-ai/ui'; +import { IconButton } from '@invoke-ai/ui-library'; import { memo, useCallback } from 'react'; import { useTranslation } from 'react-i18next'; import { PiPlusBold } from 'react-icons/pi'; diff --git a/invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/BoardsList.tsx b/invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/BoardsList.tsx index 4d62e5393c..ee5a7818d4 100644 --- a/invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/BoardsList.tsx +++ b/invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/BoardsList.tsx @@ -1,4 +1,4 @@ -import { Collapse, Flex, Grid, GridItem } from '@invoke-ai/ui'; +import { Collapse, Flex, Grid, GridItem } from '@invoke-ai/ui-library'; import { useAppSelector } from 'app/store/storeHooks'; import { overlayScrollbarsParams } from 'common/components/OverlayScrollbars/constants'; import DeleteBoardModal from 'features/gallery/components/Boards/DeleteBoardModal'; diff --git a/invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/BoardsSearch.tsx b/invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/BoardsSearch.tsx index 99d5367dd2..09e6fe0b26 100644 --- a/invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/BoardsSearch.tsx +++ b/invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/BoardsSearch.tsx @@ -3,7 +3,7 @@ import { Input, InputGroup, InputRightElement, -} from '@invoke-ai/ui'; +} from '@invoke-ai/ui-library'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import { boardSearchTextChanged } from 'features/gallery/store/gallerySlice'; import type { ChangeEvent, KeyboardEvent } from 'react'; diff --git a/invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/GalleryBoard.tsx b/invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/GalleryBoard.tsx index ca6eac89e4..c887777cdf 100644 --- a/invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/GalleryBoard.tsx +++ b/invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/GalleryBoard.tsx @@ -1,4 +1,4 @@ -import type { SystemStyleObject } from '@invoke-ai/ui'; +import type { SystemStyleObject } from '@invoke-ai/ui-library'; import { Box, Editable, @@ -9,7 +9,7 @@ import { Image, Text, Tooltip, -} from '@invoke-ai/ui'; +} from '@invoke-ai/ui-library'; import { createSelector } from '@reduxjs/toolkit'; import { skipToken } from '@reduxjs/toolkit/query'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; diff --git a/invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/NoBoardBoard.tsx b/invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/NoBoardBoard.tsx index c8e8e3bb53..b7bfcdacac 100644 --- a/invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/NoBoardBoard.tsx +++ b/invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/NoBoardBoard.tsx @@ -1,4 +1,4 @@ -import { Box, Flex, Image, Text, Tooltip } from '@invoke-ai/ui'; +import { Box, Flex, Image, Text, Tooltip } from '@invoke-ai/ui-library'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import IAIDroppable from 'common/components/IAIDroppable'; import SelectionOverlay from 'common/components/SelectionOverlay'; diff --git a/invokeai/frontend/web/src/features/gallery/components/Boards/DeleteBoardModal.tsx b/invokeai/frontend/web/src/features/gallery/components/Boards/DeleteBoardModal.tsx index 0f78177371..36a098df84 100644 --- a/invokeai/frontend/web/src/features/gallery/components/Boards/DeleteBoardModal.tsx +++ b/invokeai/frontend/web/src/features/gallery/components/Boards/DeleteBoardModal.tsx @@ -9,7 +9,7 @@ import { Flex, Skeleton, Text, -} from '@invoke-ai/ui'; +} from '@invoke-ai/ui-library'; import { skipToken } from '@reduxjs/toolkit/query'; import { createMemoizedSelector } from 'app/store/createMemoizedSelector'; import { useAppSelector } from 'app/store/storeHooks'; diff --git a/invokeai/frontend/web/src/features/gallery/components/Boards/GalleryBoardContextMenuItems.tsx b/invokeai/frontend/web/src/features/gallery/components/Boards/GalleryBoardContextMenuItems.tsx index 70e22a920c..9e7df6d16c 100644 --- a/invokeai/frontend/web/src/features/gallery/components/Boards/GalleryBoardContextMenuItems.tsx +++ b/invokeai/frontend/web/src/features/gallery/components/Boards/GalleryBoardContextMenuItems.tsx @@ -1,4 +1,4 @@ -import { MenuItem } from '@invoke-ai/ui'; +import { MenuItem } from '@invoke-ai/ui-library'; import { memo, useCallback } from 'react'; import { useTranslation } from 'react-i18next'; import { PiTrashSimpleBold } from 'react-icons/pi'; diff --git a/invokeai/frontend/web/src/features/gallery/components/CurrentImage/CurrentImageButtons.tsx b/invokeai/frontend/web/src/features/gallery/components/CurrentImage/CurrentImageButtons.tsx index d141371d3c..24293ef070 100644 --- a/invokeai/frontend/web/src/features/gallery/components/CurrentImage/CurrentImageButtons.tsx +++ b/invokeai/frontend/web/src/features/gallery/components/CurrentImage/CurrentImageButtons.tsx @@ -5,7 +5,7 @@ import { Menu, MenuButton, MenuList, -} from '@invoke-ai/ui'; +} from '@invoke-ai/ui-library'; import { createSelector } from '@reduxjs/toolkit'; import { skipToken } from '@reduxjs/toolkit/query'; import { useAppToaster } from 'app/components/Toaster'; diff --git a/invokeai/frontend/web/src/features/gallery/components/CurrentImage/CurrentImageDisplay.tsx b/invokeai/frontend/web/src/features/gallery/components/CurrentImage/CurrentImageDisplay.tsx index 5d7a3755c3..f4b707b859 100644 --- a/invokeai/frontend/web/src/features/gallery/components/CurrentImage/CurrentImageDisplay.tsx +++ b/invokeai/frontend/web/src/features/gallery/components/CurrentImage/CurrentImageDisplay.tsx @@ -1,4 +1,4 @@ -import { Flex } from '@invoke-ai/ui'; +import { Flex } from '@invoke-ai/ui-library'; import { memo } from 'react'; import CurrentImageButtons from './CurrentImageButtons'; diff --git a/invokeai/frontend/web/src/features/gallery/components/CurrentImage/CurrentImagePreview.tsx b/invokeai/frontend/web/src/features/gallery/components/CurrentImage/CurrentImagePreview.tsx index 1496562d5e..a81aca16ed 100644 --- a/invokeai/frontend/web/src/features/gallery/components/CurrentImage/CurrentImagePreview.tsx +++ b/invokeai/frontend/web/src/features/gallery/components/CurrentImage/CurrentImagePreview.tsx @@ -1,4 +1,4 @@ -import { Box, Flex } from '@invoke-ai/ui'; +import { Box, Flex } from '@invoke-ai/ui-library'; import { createSelector } from '@reduxjs/toolkit'; import { skipToken } from '@reduxjs/toolkit/query'; import { useAppSelector } from 'app/store/storeHooks'; diff --git a/invokeai/frontend/web/src/features/gallery/components/CurrentImage/ProgressImage.tsx b/invokeai/frontend/web/src/features/gallery/components/CurrentImage/ProgressImage.tsx index 6cb5ee05be..4b38743438 100644 --- a/invokeai/frontend/web/src/features/gallery/components/CurrentImage/ProgressImage.tsx +++ b/invokeai/frontend/web/src/features/gallery/components/CurrentImage/ProgressImage.tsx @@ -1,5 +1,5 @@ -import type { SystemStyleObject } from '@invoke-ai/ui'; -import { Image } from '@invoke-ai/ui'; +import type { SystemStyleObject } from '@invoke-ai/ui-library'; +import { Image } from '@invoke-ai/ui-library'; import { useAppSelector } from 'app/store/storeHooks'; import { memo, useMemo } from 'react'; diff --git a/invokeai/frontend/web/src/features/gallery/components/GalleryBoardName.tsx b/invokeai/frontend/web/src/features/gallery/components/GalleryBoardName.tsx index 04a4ae8078..55aec17ab2 100644 --- a/invokeai/frontend/web/src/features/gallery/components/GalleryBoardName.tsx +++ b/invokeai/frontend/web/src/features/gallery/components/GalleryBoardName.tsx @@ -1,4 +1,4 @@ -import { Button, Flex, Icon, Spacer } from '@invoke-ai/ui'; +import { Button, Flex, Icon, Spacer } from '@invoke-ai/ui-library'; import { useAppSelector } from 'app/store/storeHooks'; import { memo, useMemo } from 'react'; import { PiCaretUpBold } from 'react-icons/pi'; diff --git a/invokeai/frontend/web/src/features/gallery/components/GallerySettingsPopover.tsx b/invokeai/frontend/web/src/features/gallery/components/GallerySettingsPopover.tsx index bc5720e9fc..7672070463 100644 --- a/invokeai/frontend/web/src/features/gallery/components/GallerySettingsPopover.tsx +++ b/invokeai/frontend/web/src/features/gallery/components/GallerySettingsPopover.tsx @@ -1,4 +1,4 @@ -import type { FormLabelProps } from '@invoke-ai/ui'; +import type { FormLabelProps } from '@invoke-ai/ui-library'; import { Checkbox, CompositeSlider, @@ -12,7 +12,7 @@ import { PopoverContent, PopoverTrigger, Switch, -} from '@invoke-ai/ui'; +} from '@invoke-ai/ui-library'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import { autoAssignBoardOnClickChanged, diff --git a/invokeai/frontend/web/src/features/gallery/components/ImageContextMenu/ImageContextMenu.tsx b/invokeai/frontend/web/src/features/gallery/components/ImageContextMenu/ImageContextMenu.tsx index ada0d7bf61..632763e313 100644 --- a/invokeai/frontend/web/src/features/gallery/components/ImageContextMenu/ImageContextMenu.tsx +++ b/invokeai/frontend/web/src/features/gallery/components/ImageContextMenu/ImageContextMenu.tsx @@ -1,5 +1,5 @@ -import type { ContextMenuProps } from '@invoke-ai/ui'; -import { ContextMenu, MenuList } from '@invoke-ai/ui'; +import type { ContextMenuProps } from '@invoke-ai/ui-library'; +import { ContextMenu, MenuList } from '@invoke-ai/ui-library'; import { useAppSelector } from 'app/store/storeHooks'; import { memo, useCallback } from 'react'; import type { ImageDTO } from 'services/api/types'; diff --git a/invokeai/frontend/web/src/features/gallery/components/ImageContextMenu/MultipleSelectionMenuItems.tsx b/invokeai/frontend/web/src/features/gallery/components/ImageContextMenu/MultipleSelectionMenuItems.tsx index bf30bd2565..64298a2f34 100644 --- a/invokeai/frontend/web/src/features/gallery/components/ImageContextMenu/MultipleSelectionMenuItems.tsx +++ b/invokeai/frontend/web/src/features/gallery/components/ImageContextMenu/MultipleSelectionMenuItems.tsx @@ -1,4 +1,4 @@ -import { MenuDivider, MenuItem } from '@invoke-ai/ui'; +import { MenuDivider, MenuItem } from '@invoke-ai/ui-library'; import { useStore } from '@nanostores/react'; import { $customStarUI } from 'app/store/nanostores/customStarUI'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; diff --git a/invokeai/frontend/web/src/features/gallery/components/ImageContextMenu/SingleSelectionMenuItems.tsx b/invokeai/frontend/web/src/features/gallery/components/ImageContextMenu/SingleSelectionMenuItems.tsx index 049c58e70b..8147892ac4 100644 --- a/invokeai/frontend/web/src/features/gallery/components/ImageContextMenu/SingleSelectionMenuItems.tsx +++ b/invokeai/frontend/web/src/features/gallery/components/ImageContextMenu/SingleSelectionMenuItems.tsx @@ -1,4 +1,4 @@ -import { Flex, MenuDivider, MenuItem, Spinner } from '@invoke-ai/ui'; +import { Flex, MenuDivider, MenuItem, Spinner } from '@invoke-ai/ui-library'; import { useStore } from '@nanostores/react'; import { useAppToaster } from 'app/components/Toaster'; import { $customStarUI } from 'app/store/nanostores/customStarUI'; diff --git a/invokeai/frontend/web/src/features/gallery/components/ImageGalleryContent.tsx b/invokeai/frontend/web/src/features/gallery/components/ImageGalleryContent.tsx index aad3bfeecc..16a1b367b1 100644 --- a/invokeai/frontend/web/src/features/gallery/components/ImageGalleryContent.tsx +++ b/invokeai/frontend/web/src/features/gallery/components/ImageGalleryContent.tsx @@ -8,7 +8,7 @@ import { Tabs, useDisclosure, VStack, -} from '@invoke-ai/ui'; +} from '@invoke-ai/ui-library'; import { useStore } from '@nanostores/react'; import { $galleryHeader } from 'app/store/nanostores/galleryHeader'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; diff --git a/invokeai/frontend/web/src/features/gallery/components/ImageGrid/GalleryImage.tsx b/invokeai/frontend/web/src/features/gallery/components/ImageGrid/GalleryImage.tsx index 3c141a3b5b..25e6fcafdd 100644 --- a/invokeai/frontend/web/src/features/gallery/components/ImageGrid/GalleryImage.tsx +++ b/invokeai/frontend/web/src/features/gallery/components/ImageGrid/GalleryImage.tsx @@ -1,5 +1,5 @@ -import type { SystemStyleObject } from '@invoke-ai/ui'; -import { Box, Flex, useShiftModifier } from '@invoke-ai/ui'; +import type { SystemStyleObject } from '@invoke-ai/ui-library'; +import { Box, Flex, useShiftModifier } from '@invoke-ai/ui-library'; import { useStore } from '@nanostores/react'; import { $customStarUI } from 'app/store/nanostores/customStarUI'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; diff --git a/invokeai/frontend/web/src/features/gallery/components/ImageGrid/GalleryImageGrid.tsx b/invokeai/frontend/web/src/features/gallery/components/ImageGrid/GalleryImageGrid.tsx index b806909c46..86375af208 100644 --- a/invokeai/frontend/web/src/features/gallery/components/ImageGrid/GalleryImageGrid.tsx +++ b/invokeai/frontend/web/src/features/gallery/components/ImageGrid/GalleryImageGrid.tsx @@ -1,4 +1,4 @@ -import { Box, Button, Flex } from '@invoke-ai/ui'; +import { Box, Button, Flex } from '@invoke-ai/ui-library'; import type { EntityId } from '@reduxjs/toolkit'; import { useAppSelector } from 'app/store/storeHooks'; import { IAINoContentFallback } from 'common/components/IAIImageFallback'; diff --git a/invokeai/frontend/web/src/features/gallery/components/ImageGrid/ImageGridItemContainer.tsx b/invokeai/frontend/web/src/features/gallery/components/ImageGrid/ImageGridItemContainer.tsx index 26247cc864..0e8a278371 100644 --- a/invokeai/frontend/web/src/features/gallery/components/ImageGrid/ImageGridItemContainer.tsx +++ b/invokeai/frontend/web/src/features/gallery/components/ImageGrid/ImageGridItemContainer.tsx @@ -1,5 +1,5 @@ -import type { FlexProps } from '@invoke-ai/ui'; -import { Box, forwardRef } from '@invoke-ai/ui'; +import type { FlexProps } from '@invoke-ai/ui-library'; +import { Box, forwardRef } from '@invoke-ai/ui-library'; import type { PropsWithChildren } from 'react'; import { memo } from 'react'; diff --git a/invokeai/frontend/web/src/features/gallery/components/ImageGrid/ImageGridListContainer.tsx b/invokeai/frontend/web/src/features/gallery/components/ImageGrid/ImageGridListContainer.tsx index 58d074712f..6a43171975 100644 --- a/invokeai/frontend/web/src/features/gallery/components/ImageGrid/ImageGridListContainer.tsx +++ b/invokeai/frontend/web/src/features/gallery/components/ImageGrid/ImageGridListContainer.tsx @@ -1,5 +1,5 @@ -import type { FlexProps } from '@invoke-ai/ui'; -import { forwardRef, Grid } from '@invoke-ai/ui'; +import type { FlexProps } from '@invoke-ai/ui-library'; +import { forwardRef, Grid } from '@invoke-ai/ui-library'; import { useAppSelector } from 'app/store/storeHooks'; import type { PropsWithChildren } from 'react'; import { memo } from 'react'; diff --git a/invokeai/frontend/web/src/features/gallery/components/ImageMetadataViewer/DataViewer.tsx b/invokeai/frontend/web/src/features/gallery/components/ImageMetadataViewer/DataViewer.tsx index 394b6cbda9..8c5d55deef 100644 --- a/invokeai/frontend/web/src/features/gallery/components/ImageMetadataViewer/DataViewer.tsx +++ b/invokeai/frontend/web/src/features/gallery/components/ImageMetadataViewer/DataViewer.tsx @@ -1,4 +1,4 @@ -import { Box, Flex, IconButton, Tooltip } from '@invoke-ai/ui'; +import { Box, Flex, IconButton, Tooltip } from '@invoke-ai/ui-library'; import { getOverlayScrollbarsParams } from 'common/components/OverlayScrollbars/constants'; import { isString } from 'lodash-es'; import { OverlayScrollbarsComponent } from 'overlayscrollbars-react'; diff --git a/invokeai/frontend/web/src/features/gallery/components/ImageMetadataViewer/ImageMetadataItem.tsx b/invokeai/frontend/web/src/features/gallery/components/ImageMetadataViewer/ImageMetadataItem.tsx index 976ca2d5b6..7863a1ccb5 100644 --- a/invokeai/frontend/web/src/features/gallery/components/ImageMetadataViewer/ImageMetadataItem.tsx +++ b/invokeai/frontend/web/src/features/gallery/components/ImageMetadataViewer/ImageMetadataItem.tsx @@ -1,4 +1,4 @@ -import { ExternalLink, Flex, IconButton, Text, Tooltip } from '@invoke-ai/ui'; +import { ExternalLink, Flex, IconButton, Text, Tooltip } from '@invoke-ai/ui-library'; import { memo, useCallback } from 'react'; import { useTranslation } from 'react-i18next'; import { IoArrowUndoCircleOutline } from 'react-icons/io5'; diff --git a/invokeai/frontend/web/src/features/gallery/components/ImageMetadataViewer/ImageMetadataViewer.tsx b/invokeai/frontend/web/src/features/gallery/components/ImageMetadataViewer/ImageMetadataViewer.tsx index 58c04e483b..d0d18c93fc 100644 --- a/invokeai/frontend/web/src/features/gallery/components/ImageMetadataViewer/ImageMetadataViewer.tsx +++ b/invokeai/frontend/web/src/features/gallery/components/ImageMetadataViewer/ImageMetadataViewer.tsx @@ -6,7 +6,7 @@ import { TabPanel, TabPanels, Tabs, -} from '@invoke-ai/ui'; +} from '@invoke-ai/ui-library'; import { IAINoContentFallback } from 'common/components/IAIImageFallback'; import ScrollableContent from 'common/components/OverlayScrollbars/ScrollableContent'; import { memo } from 'react'; diff --git a/invokeai/frontend/web/src/features/gallery/components/NextPrevImageButtons.tsx b/invokeai/frontend/web/src/features/gallery/components/NextPrevImageButtons.tsx index 350ac9be1c..f526a1077f 100644 --- a/invokeai/frontend/web/src/features/gallery/components/NextPrevImageButtons.tsx +++ b/invokeai/frontend/web/src/features/gallery/components/NextPrevImageButtons.tsx @@ -1,5 +1,5 @@ -import type { ChakraProps } from '@invoke-ai/ui'; -import { Box, Flex, IconButton, Spinner } from '@invoke-ai/ui'; +import type { ChakraProps } from '@invoke-ai/ui-library'; +import { Box, Flex, IconButton, Spinner } from '@invoke-ai/ui-library'; import { useGalleryImages } from 'features/gallery/hooks/useGalleryImages'; import { useGalleryNavigation } from 'features/gallery/hooks/useGalleryNavigation'; import { memo } from 'react'; diff --git a/invokeai/frontend/web/src/features/hrf/components/HrfSettings.tsx b/invokeai/frontend/web/src/features/hrf/components/HrfSettings.tsx index cca4c49259..2cb96a935f 100644 --- a/invokeai/frontend/web/src/features/hrf/components/HrfSettings.tsx +++ b/invokeai/frontend/web/src/features/hrf/components/HrfSettings.tsx @@ -1,4 +1,4 @@ -import { FormControlGroup } from '@invoke-ai/ui'; +import { FormControlGroup } from '@invoke-ai/ui-library'; import { useAppSelector } from 'app/store/storeHooks'; import { useFeatureStatus } from 'features/system/hooks/useFeatureStatus'; import { memo } from 'react'; diff --git a/invokeai/frontend/web/src/features/hrf/components/ParamHrfMethod.tsx b/invokeai/frontend/web/src/features/hrf/components/ParamHrfMethod.tsx index f13c041f79..e045bdf767 100644 --- a/invokeai/frontend/web/src/features/hrf/components/ParamHrfMethod.tsx +++ b/invokeai/frontend/web/src/features/hrf/components/ParamHrfMethod.tsx @@ -1,5 +1,5 @@ -import type { ComboboxOnChange, ComboboxOption } from '@invoke-ai/ui'; -import { Combobox, FormControl, FormLabel } from '@invoke-ai/ui'; +import type { ComboboxOnChange, ComboboxOption } from '@invoke-ai/ui-library'; +import { Combobox, FormControl, FormLabel } from '@invoke-ai/ui-library'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import { setHrfMethod } from 'features/hrf/store/hrfSlice'; import { isParameterHRFMethod } from 'features/parameters/types/parameterSchemas'; diff --git a/invokeai/frontend/web/src/features/hrf/components/ParamHrfStrength.tsx b/invokeai/frontend/web/src/features/hrf/components/ParamHrfStrength.tsx index 3033b6f578..ca42ae5055 100644 --- a/invokeai/frontend/web/src/features/hrf/components/ParamHrfStrength.tsx +++ b/invokeai/frontend/web/src/features/hrf/components/ParamHrfStrength.tsx @@ -3,7 +3,7 @@ import { CompositeSlider, FormControl, FormLabel, -} from '@invoke-ai/ui'; +} from '@invoke-ai/ui-library'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import { setHrfStrength } from 'features/hrf/store/hrfSlice'; import { memo, useCallback } from 'react'; diff --git a/invokeai/frontend/web/src/features/hrf/components/ParamHrfToggle.tsx b/invokeai/frontend/web/src/features/hrf/components/ParamHrfToggle.tsx index 47ce6190fc..5bdd85a679 100644 --- a/invokeai/frontend/web/src/features/hrf/components/ParamHrfToggle.tsx +++ b/invokeai/frontend/web/src/features/hrf/components/ParamHrfToggle.tsx @@ -1,4 +1,4 @@ -import { FormControl, FormLabel, Switch } from '@invoke-ai/ui'; +import { FormControl, FormLabel, Switch } from '@invoke-ai/ui-library'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import { setHrfEnabled } from 'features/hrf/store/hrfSlice'; import type { ChangeEvent } from 'react'; diff --git a/invokeai/frontend/web/src/features/lora/components/LoRACard.tsx b/invokeai/frontend/web/src/features/lora/components/LoRACard.tsx index 9fdaa64bcc..f0c8e3fcd3 100644 --- a/invokeai/frontend/web/src/features/lora/components/LoRACard.tsx +++ b/invokeai/frontend/web/src/features/lora/components/LoRACard.tsx @@ -6,7 +6,7 @@ import { CompositeSlider, IconButton, Text, -} from '@invoke-ai/ui'; +} from '@invoke-ai/ui-library'; import { useAppDispatch } from 'app/store/storeHooks'; import type { LoRA } from 'features/lora/store/loraSlice'; import { loraRemoved, loraWeightChanged } from 'features/lora/store/loraSlice'; diff --git a/invokeai/frontend/web/src/features/lora/components/LoRAList.tsx b/invokeai/frontend/web/src/features/lora/components/LoRAList.tsx index 4804cf76c6..3983062af1 100644 --- a/invokeai/frontend/web/src/features/lora/components/LoRAList.tsx +++ b/invokeai/frontend/web/src/features/lora/components/LoRAList.tsx @@ -1,4 +1,4 @@ -import { Flex } from '@invoke-ai/ui'; +import { Flex } from '@invoke-ai/ui-library'; import { createMemoizedSelector } from 'app/store/createMemoizedSelector'; import { useAppSelector } from 'app/store/storeHooks'; import { LoRACard } from 'features/lora/components/LoRACard'; diff --git a/invokeai/frontend/web/src/features/lora/components/LoRASelect.tsx b/invokeai/frontend/web/src/features/lora/components/LoRASelect.tsx index 8b51e6876e..aa866e8a55 100644 --- a/invokeai/frontend/web/src/features/lora/components/LoRASelect.tsx +++ b/invokeai/frontend/web/src/features/lora/components/LoRASelect.tsx @@ -1,5 +1,5 @@ -import type { ChakraProps } from '@invoke-ai/ui'; -import { Combobox, FormControl, FormLabel } from '@invoke-ai/ui'; +import type { ChakraProps } from '@invoke-ai/ui-library'; +import { Combobox, FormControl, FormLabel } from '@invoke-ai/ui-library'; import { createMemoizedSelector } from 'app/store/createMemoizedSelector'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import { useGroupedModelCombobox } from 'common/hooks/useGroupedModelCombobox'; diff --git a/invokeai/frontend/web/src/features/modelManager/components/SyncModels/SyncModelsButton.tsx b/invokeai/frontend/web/src/features/modelManager/components/SyncModels/SyncModelsButton.tsx index 0fd2bdb3a6..8a49bc2585 100644 --- a/invokeai/frontend/web/src/features/modelManager/components/SyncModels/SyncModelsButton.tsx +++ b/invokeai/frontend/web/src/features/modelManager/components/SyncModels/SyncModelsButton.tsx @@ -1,5 +1,5 @@ -import type { ButtonProps } from '@invoke-ai/ui'; -import { Button } from '@invoke-ai/ui'; +import type { ButtonProps } from '@invoke-ai/ui-library'; +import { Button } from '@invoke-ai/ui-library'; import { useFeatureStatus } from 'features/system/hooks/useFeatureStatus'; import { memo } from 'react'; import { useTranslation } from 'react-i18next'; diff --git a/invokeai/frontend/web/src/features/modelManager/components/SyncModels/SyncModelsIconButton.tsx b/invokeai/frontend/web/src/features/modelManager/components/SyncModels/SyncModelsIconButton.tsx index 0bff475673..3cf5f7444a 100644 --- a/invokeai/frontend/web/src/features/modelManager/components/SyncModels/SyncModelsIconButton.tsx +++ b/invokeai/frontend/web/src/features/modelManager/components/SyncModels/SyncModelsIconButton.tsx @@ -1,5 +1,5 @@ -import type { IconButtonProps } from '@invoke-ai/ui'; -import { IconButton } from '@invoke-ai/ui'; +import type { IconButtonProps } from '@invoke-ai/ui-library'; +import { IconButton } from '@invoke-ai/ui-library'; import { useFeatureStatus } from 'features/system/hooks/useFeatureStatus'; import { memo } from 'react'; import { useTranslation } from 'react-i18next'; diff --git a/invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/AddModels.tsx b/invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/AddModels.tsx index c3e85a3a5b..a056e54a10 100644 --- a/invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/AddModels.tsx +++ b/invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/AddModels.tsx @@ -1,4 +1,4 @@ -import { Button, ButtonGroup, Flex } from '@invoke-ai/ui'; +import { Button, ButtonGroup, Flex } from '@invoke-ai/ui-library'; import { memo, useCallback, useState } from 'react'; import { useTranslation } from 'react-i18next'; diff --git a/invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/AdvancedAddCheckpoint.tsx b/invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/AdvancedAddCheckpoint.tsx index 0960c51417..9067d243fb 100644 --- a/invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/AdvancedAddCheckpoint.tsx +++ b/invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/AdvancedAddCheckpoint.tsx @@ -6,7 +6,7 @@ import { FormErrorMessage, FormLabel, Input, -} from '@invoke-ai/ui'; +} from '@invoke-ai/ui-library'; import { useAppDispatch } from 'app/store/storeHooks'; import { setAdvancedAddScanModel } from 'features/modelManager/store/modelManagerSlice'; import BaseModelSelect from 'features/modelManager/subpanels/shared/BaseModelSelect'; diff --git a/invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/AdvancedAddDiffusers.tsx b/invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/AdvancedAddDiffusers.tsx index 090b65f8d7..d2be92392e 100644 --- a/invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/AdvancedAddDiffusers.tsx +++ b/invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/AdvancedAddDiffusers.tsx @@ -5,7 +5,7 @@ import { FormErrorMessage, FormLabel, Input, -} from '@invoke-ai/ui'; +} from '@invoke-ai/ui-library'; import { useAppDispatch } from 'app/store/storeHooks'; import { setAdvancedAddScanModel } from 'features/modelManager/store/modelManagerSlice'; import BaseModelSelect from 'features/modelManager/subpanels/shared/BaseModelSelect'; diff --git a/invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/AdvancedAddModels.tsx b/invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/AdvancedAddModels.tsx index 7ea4c68370..2ce9392ef0 100644 --- a/invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/AdvancedAddModels.tsx +++ b/invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/AdvancedAddModels.tsx @@ -1,5 +1,5 @@ -import type { ComboboxOnChange, ComboboxOption } from '@invoke-ai/ui'; -import { Combobox, Flex, FormControl, FormLabel } from '@invoke-ai/ui'; +import type { ComboboxOnChange, ComboboxOption } from '@invoke-ai/ui-library'; +import { Combobox, Flex, FormControl, FormLabel } from '@invoke-ai/ui-library'; import { memo, useCallback, useMemo, useState } from 'react'; import { useTranslation } from 'react-i18next'; import { z } from 'zod'; diff --git a/invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/FoundModelsList.tsx b/invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/FoundModelsList.tsx index 9f58558d7a..6dd48e0aaf 100644 --- a/invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/FoundModelsList.tsx +++ b/invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/FoundModelsList.tsx @@ -5,7 +5,7 @@ import { FormLabel, Input, Text, -} from '@invoke-ai/ui'; +} from '@invoke-ai/ui-library'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import ScrollableContent from 'common/components/OverlayScrollbars/ScrollableContent'; import { setAdvancedAddScanModel } from 'features/modelManager/store/modelManagerSlice'; diff --git a/invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/ScanAdvancedAddModels.tsx b/invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/ScanAdvancedAddModels.tsx index 933a3c8498..c008038548 100644 --- a/invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/ScanAdvancedAddModels.tsx +++ b/invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/ScanAdvancedAddModels.tsx @@ -1,4 +1,4 @@ -import type { ComboboxOnChange, ComboboxOption } from '@invoke-ai/ui'; +import type { ComboboxOnChange, ComboboxOption } from '@invoke-ai/ui-library'; import { Box, Combobox, @@ -7,7 +7,7 @@ import { FormLabel, IconButton, Text, -} from '@invoke-ai/ui'; +} from '@invoke-ai/ui-library'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import { setAdvancedAddScanModel } from 'features/modelManager/store/modelManagerSlice'; import { memo, useCallback, useEffect, useMemo, useState } from 'react'; diff --git a/invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/ScanModels.tsx b/invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/ScanModels.tsx index 694bcbc644..f3287270a2 100644 --- a/invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/ScanModels.tsx +++ b/invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/ScanModels.tsx @@ -1,4 +1,4 @@ -import { Flex } from '@invoke-ai/ui'; +import { Flex } from '@invoke-ai/ui-library'; import { memo } from 'react'; import FoundModelsList from './FoundModelsList'; diff --git a/invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/SearchFolderForm.tsx b/invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/SearchFolderForm.tsx index 6e3368a4d2..3441ab0d4f 100644 --- a/invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/SearchFolderForm.tsx +++ b/invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/SearchFolderForm.tsx @@ -1,4 +1,4 @@ -import { Flex, IconButton, Input, Text } from '@invoke-ai/ui'; +import { Flex, IconButton, Input, Text } from '@invoke-ai/ui-library'; import { useForm } from '@mantine/form'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import { diff --git a/invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/SimpleAddModels.tsx b/invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/SimpleAddModels.tsx index 8b7367153e..aa74fc419f 100644 --- a/invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/SimpleAddModels.tsx +++ b/invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/SimpleAddModels.tsx @@ -1,4 +1,4 @@ -import type { ComboboxOption } from '@invoke-ai/ui'; +import type { ComboboxOption } from '@invoke-ai/ui-library'; import { Button, Combobox, @@ -6,7 +6,7 @@ import { FormControl, FormLabel, Input, -} from '@invoke-ai/ui'; +} from '@invoke-ai/ui-library'; import { useForm } from '@mantine/form'; import { useAppDispatch } from 'app/store/storeHooks'; import { addToast } from 'features/system/store/systemSlice'; diff --git a/invokeai/frontend/web/src/features/modelManager/subpanels/ImportModelsPanel.tsx b/invokeai/frontend/web/src/features/modelManager/subpanels/ImportModelsPanel.tsx index 370af663f3..3558650f5b 100644 --- a/invokeai/frontend/web/src/features/modelManager/subpanels/ImportModelsPanel.tsx +++ b/invokeai/frontend/web/src/features/modelManager/subpanels/ImportModelsPanel.tsx @@ -1,4 +1,4 @@ -import { Button, ButtonGroup, Flex } from '@invoke-ai/ui'; +import { Button, ButtonGroup, Flex } from '@invoke-ai/ui-library'; import { memo, useCallback, useState } from 'react'; import { useTranslation } from 'react-i18next'; diff --git a/invokeai/frontend/web/src/features/modelManager/subpanels/MergeModelsPanel.tsx b/invokeai/frontend/web/src/features/modelManager/subpanels/MergeModelsPanel.tsx index 8c113f5da5..865eb4914c 100644 --- a/invokeai/frontend/web/src/features/modelManager/subpanels/MergeModelsPanel.tsx +++ b/invokeai/frontend/web/src/features/modelManager/subpanels/MergeModelsPanel.tsx @@ -1,4 +1,4 @@ -import type { ComboboxOnChange, ComboboxOption } from '@invoke-ai/ui'; +import type { ComboboxOnChange, ComboboxOption } from '@invoke-ai/ui-library'; import { Button, Checkbox, @@ -14,7 +14,7 @@ import { RadioGroup, Text, Tooltip, -} from '@invoke-ai/ui'; +} from '@invoke-ai/ui-library'; import { useAppDispatch } from 'app/store/storeHooks'; import { addToast } from 'features/system/store/systemSlice'; import { makeToast } from 'features/system/util/makeToast'; diff --git a/invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerPanel.tsx b/invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerPanel.tsx index 55272a98cc..aae1b4c05d 100644 --- a/invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerPanel.tsx +++ b/invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerPanel.tsx @@ -1,4 +1,4 @@ -import { Flex, Text } from '@invoke-ai/ui'; +import { Flex, Text } from '@invoke-ai/ui-library'; import { memo, useState } from 'react'; import { useTranslation } from 'react-i18next'; import { ALL_BASE_MODELS } from 'services/api/constants'; diff --git a/invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerPanel/CheckpointModelEdit.tsx b/invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerPanel/CheckpointModelEdit.tsx index 549c725b34..ecd89cc62a 100644 --- a/invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerPanel/CheckpointModelEdit.tsx +++ b/invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerPanel/CheckpointModelEdit.tsx @@ -9,7 +9,7 @@ import { FormLabel, Input, Text, -} from '@invoke-ai/ui'; +} from '@invoke-ai/ui-library'; import { useAppDispatch } from 'app/store/storeHooks'; import BaseModelSelect from 'features/modelManager/subpanels/shared/BaseModelSelect'; import CheckpointConfigsSelect from 'features/modelManager/subpanels/shared/CheckpointConfigsSelect'; diff --git a/invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerPanel/DiffusersModelEdit.tsx b/invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerPanel/DiffusersModelEdit.tsx index a873d06e61..c2c33fb63b 100644 --- a/invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerPanel/DiffusersModelEdit.tsx +++ b/invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerPanel/DiffusersModelEdit.tsx @@ -7,7 +7,7 @@ import { FormLabel, Input, Text, -} from '@invoke-ai/ui'; +} from '@invoke-ai/ui-library'; import { useAppDispatch } from 'app/store/storeHooks'; import BaseModelSelect from 'features/modelManager/subpanels/shared/BaseModelSelect'; import ModelVariantSelect from 'features/modelManager/subpanels/shared/ModelVariantSelect'; diff --git a/invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerPanel/LoRAModelEdit.tsx b/invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerPanel/LoRAModelEdit.tsx index 67a6f5c1e5..2c82ca56f9 100644 --- a/invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerPanel/LoRAModelEdit.tsx +++ b/invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerPanel/LoRAModelEdit.tsx @@ -7,7 +7,7 @@ import { FormLabel, Input, Text, -} from '@invoke-ai/ui'; +} from '@invoke-ai/ui-library'; import { useAppDispatch } from 'app/store/storeHooks'; import BaseModelSelect from 'features/modelManager/subpanels/shared/BaseModelSelect'; import { diff --git a/invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerPanel/ModelConvert.tsx b/invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerPanel/ModelConvert.tsx index ca272e8eff..748734fdde 100644 --- a/invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerPanel/ModelConvert.tsx +++ b/invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerPanel/ModelConvert.tsx @@ -12,7 +12,7 @@ import { Tooltip, UnorderedList, useDisclosure, -} from '@invoke-ai/ui'; +} from '@invoke-ai/ui-library'; import { useAppDispatch } from 'app/store/storeHooks'; import { addToast } from 'features/system/store/systemSlice'; import { makeToast } from 'features/system/util/makeToast'; diff --git a/invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerPanel/ModelList.tsx b/invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerPanel/ModelList.tsx index 547050f80f..e138062b70 100644 --- a/invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerPanel/ModelList.tsx +++ b/invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerPanel/ModelList.tsx @@ -7,7 +7,7 @@ import { Input, Spinner, Text, -} from '@invoke-ai/ui'; +} from '@invoke-ai/ui-library'; import type { EntityState } from '@reduxjs/toolkit'; import { forEach } from 'lodash-es'; import type { ChangeEvent, PropsWithChildren } from 'react'; diff --git a/invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerPanel/ModelListItem.tsx b/invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerPanel/ModelListItem.tsx index 48774809d2..6203ea12f4 100644 --- a/invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerPanel/ModelListItem.tsx +++ b/invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerPanel/ModelListItem.tsx @@ -7,7 +7,7 @@ import { Text, Tooltip, useDisclosure, -} from '@invoke-ai/ui'; +} from '@invoke-ai/ui-library'; import { useAppDispatch } from 'app/store/storeHooks'; import { MODEL_TYPE_SHORT_MAP } from 'features/parameters/types/constants'; import { addToast } from 'features/system/store/systemSlice'; diff --git a/invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerSettingsPanel.tsx b/invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerSettingsPanel.tsx index 91a6be5044..50118d9b97 100644 --- a/invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerSettingsPanel.tsx +++ b/invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerSettingsPanel.tsx @@ -1,4 +1,4 @@ -import { Flex } from '@invoke-ai/ui'; +import { Flex } from '@invoke-ai/ui-library'; import { memo } from 'react'; import SyncModels from './ModelManagerSettingsPanel/SyncModels'; diff --git a/invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerSettingsPanel/SyncModels.tsx b/invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerSettingsPanel/SyncModels.tsx index d851b566ce..78a69fa0c4 100644 --- a/invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerSettingsPanel/SyncModels.tsx +++ b/invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerSettingsPanel/SyncModels.tsx @@ -1,4 +1,4 @@ -import { Flex, Text } from '@invoke-ai/ui'; +import { Flex, Text } from '@invoke-ai/ui-library'; import { SyncModelsButton } from 'features/modelManager/components/SyncModels/SyncModelsButton'; import { memo } from 'react'; import { useTranslation } from 'react-i18next'; diff --git a/invokeai/frontend/web/src/features/modelManager/subpanels/shared/BaseModelSelect.tsx b/invokeai/frontend/web/src/features/modelManager/subpanels/shared/BaseModelSelect.tsx index fdae4da7dd..345d13c2ea 100644 --- a/invokeai/frontend/web/src/features/modelManager/subpanels/shared/BaseModelSelect.tsx +++ b/invokeai/frontend/web/src/features/modelManager/subpanels/shared/BaseModelSelect.tsx @@ -1,5 +1,5 @@ -import type { ComboboxOnChange, ComboboxOption } from '@invoke-ai/ui'; -import { Combobox, FormControl, FormLabel } from '@invoke-ai/ui'; +import type { ComboboxOnChange, ComboboxOption } from '@invoke-ai/ui-library'; +import { Combobox, FormControl, FormLabel } from '@invoke-ai/ui-library'; import { typedMemo } from 'common/util/typedMemo'; import { MODEL_TYPE_MAP } from 'features/parameters/types/constants'; import { useCallback, useMemo } from 'react'; diff --git a/invokeai/frontend/web/src/features/modelManager/subpanels/shared/CheckpointConfigsSelect.tsx b/invokeai/frontend/web/src/features/modelManager/subpanels/shared/CheckpointConfigsSelect.tsx index 1e9ce209d3..2a15e3aabf 100644 --- a/invokeai/frontend/web/src/features/modelManager/subpanels/shared/CheckpointConfigsSelect.tsx +++ b/invokeai/frontend/web/src/features/modelManager/subpanels/shared/CheckpointConfigsSelect.tsx @@ -2,8 +2,8 @@ import type { ChakraProps, ComboboxOnChange, ComboboxOption, -} from '@invoke-ai/ui'; -import { Combobox, FormControl, FormLabel } from '@invoke-ai/ui'; +} from '@invoke-ai/ui-library'; +import { Combobox, FormControl, FormLabel } from '@invoke-ai/ui-library'; import { memo, useCallback, useMemo } from 'react'; import { useController, type UseControllerProps } from 'react-hook-form'; import { useTranslation } from 'react-i18next'; diff --git a/invokeai/frontend/web/src/features/modelManager/subpanels/shared/ModelVariantSelect.tsx b/invokeai/frontend/web/src/features/modelManager/subpanels/shared/ModelVariantSelect.tsx index 4514e18250..6dcd5f28d3 100644 --- a/invokeai/frontend/web/src/features/modelManager/subpanels/shared/ModelVariantSelect.tsx +++ b/invokeai/frontend/web/src/features/modelManager/subpanels/shared/ModelVariantSelect.tsx @@ -1,5 +1,5 @@ -import type { ComboboxOnChange, ComboboxOption } from '@invoke-ai/ui'; -import { Combobox, FormControl, FormLabel } from '@invoke-ai/ui'; +import type { ComboboxOnChange, ComboboxOption } from '@invoke-ai/ui-library'; +import { Combobox, FormControl, FormLabel } from '@invoke-ai/ui-library'; import { typedMemo } from 'common/util/typedMemo'; import { useCallback, useMemo } from 'react'; import type { UseControllerProps } from 'react-hook-form'; diff --git a/invokeai/frontend/web/src/features/nodes/components/NodeEditor.tsx b/invokeai/frontend/web/src/features/nodes/components/NodeEditor.tsx index 65d142a830..c527085733 100644 --- a/invokeai/frontend/web/src/features/nodes/components/NodeEditor.tsx +++ b/invokeai/frontend/web/src/features/nodes/components/NodeEditor.tsx @@ -1,6 +1,6 @@ import 'reactflow/dist/style.css'; -import { Flex } from '@invoke-ai/ui'; +import { Flex } from '@invoke-ai/ui-library'; import { useAppSelector } from 'app/store/storeHooks'; import { IAINoContentFallback } from 'common/components/IAIImageFallback'; import TopPanel from 'features/nodes/components/flow/panels/TopPanel/TopPanel'; diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/AddNodePopover/AddNodePopover.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/AddNodePopover/AddNodePopover.tsx index 368f3c4f7e..934c071da7 100644 --- a/invokeai/frontend/web/src/features/nodes/components/flow/AddNodePopover/AddNodePopover.tsx +++ b/invokeai/frontend/web/src/features/nodes/components/flow/AddNodePopover/AddNodePopover.tsx @@ -1,6 +1,6 @@ import 'reactflow/dist/style.css'; -import type { ComboboxOnChange, ComboboxOption } from '@invoke-ai/ui'; +import type { ComboboxOnChange, ComboboxOption } from '@invoke-ai/ui-library'; import { Combobox, Flex, @@ -8,7 +8,7 @@ import { PopoverAnchor, PopoverBody, PopoverContent, -} from '@invoke-ai/ui'; +} from '@invoke-ai/ui-library'; import { useAppToaster } from 'app/components/Toaster'; import { createMemoizedSelector } from 'app/store/createMemoizedSelector'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/Flow.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/Flow.tsx index ff69164eb3..69109fe9f6 100644 --- a/invokeai/frontend/web/src/features/nodes/components/flow/Flow.tsx +++ b/invokeai/frontend/web/src/features/nodes/components/flow/Flow.tsx @@ -1,4 +1,4 @@ -import { useGlobalMenuClose, useToken } from '@invoke-ai/ui'; +import { useGlobalMenuClose, useToken } from '@invoke-ai/ui-library'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import { useIsValidConnection } from 'features/nodes/hooks/useIsValidConnection'; import { $mouseOverNode } from 'features/nodes/hooks/useMouseOverNode'; diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/edges/InvocationCollapsedEdge.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/edges/InvocationCollapsedEdge.tsx index 4c313d8f15..084147675d 100644 --- a/invokeai/frontend/web/src/features/nodes/components/flow/edges/InvocationCollapsedEdge.tsx +++ b/invokeai/frontend/web/src/features/nodes/components/flow/edges/InvocationCollapsedEdge.tsx @@ -1,4 +1,4 @@ -import { Badge, Flex } from '@invoke-ai/ui'; +import { Badge, Flex } from '@invoke-ai/ui-library'; import { useAppSelector } from 'app/store/storeHooks'; import { useChakraThemeTokens } from 'common/hooks/useChakraThemeTokens'; import { memo, useMemo } from 'react'; diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/CurrentImage/CurrentImageNode.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/CurrentImage/CurrentImageNode.tsx index 038370db9c..3439bb76f0 100644 --- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/CurrentImage/CurrentImageNode.tsx +++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/CurrentImage/CurrentImageNode.tsx @@ -1,4 +1,4 @@ -import { Flex, Image, Text } from '@invoke-ai/ui'; +import { Flex, Image, Text } from '@invoke-ai/ui-library'; import { createMemoizedSelector } from 'app/store/createMemoizedSelector'; import { useAppSelector } from 'app/store/storeHooks'; import IAIDndImage from 'common/components/IAIDndImage'; diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/InvocationNode.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/InvocationNode.tsx index f798454be1..e14385c764 100644 --- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/InvocationNode.tsx +++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/InvocationNode.tsx @@ -1,4 +1,4 @@ -import { Flex, Grid, GridItem } from '@invoke-ai/ui'; +import { Flex, Grid, GridItem } from '@invoke-ai/ui-library'; import NodeWrapper from 'features/nodes/components/flow/nodes/common/NodeWrapper'; import { useAnyOrDirectInputFieldNames } from 'features/nodes/hooks/useAnyOrDirectInputFieldNames'; import { useConnectionInputFieldNames } from 'features/nodes/hooks/useConnectionInputFieldNames'; diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/InvocationNodeClassificationIcon.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/InvocationNodeClassificationIcon.tsx index 0f21fd8c92..8e1147b944 100644 --- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/InvocationNodeClassificationIcon.tsx +++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/InvocationNodeClassificationIcon.tsx @@ -1,4 +1,4 @@ -import { Icon, Tooltip } from '@invoke-ai/ui'; +import { Icon, Tooltip } from '@invoke-ai/ui-library'; import { useNodeClassification } from 'features/nodes/hooks/useNodeClassification'; import type { Classification } from 'features/nodes/types/common'; import { memo } from 'react'; diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/InvocationNodeFooter.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/InvocationNodeFooter.tsx index abe4ca0856..1b93c0fdd3 100644 --- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/InvocationNodeFooter.tsx +++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/InvocationNodeFooter.tsx @@ -1,5 +1,5 @@ -import type { ChakraProps } from '@invoke-ai/ui'; -import { Flex, FormControlGroup } from '@invoke-ai/ui'; +import type { ChakraProps } from '@invoke-ai/ui-library'; +import { Flex, FormControlGroup } from '@invoke-ai/ui-library'; import { useHasImageOutput } from 'features/nodes/hooks/useHasImageOutput'; import { DRAG_HANDLE_CLASSNAME } from 'features/nodes/types/constants'; import { useFeatureStatus } from 'features/system/hooks/useFeatureStatus'; diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/InvocationNodeHeader.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/InvocationNodeHeader.tsx index 99caba2df8..21ba769bfd 100644 --- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/InvocationNodeHeader.tsx +++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/InvocationNodeHeader.tsx @@ -1,4 +1,4 @@ -import { Flex } from '@invoke-ai/ui'; +import { Flex } from '@invoke-ai/ui-library'; import NodeCollapseButton from 'features/nodes/components/flow/nodes/common/NodeCollapseButton'; import NodeTitle from 'features/nodes/components/flow/nodes/common/NodeTitle'; import InvocationNodeClassificationIcon from 'features/nodes/components/flow/nodes/Invocation/InvocationNodeClassificationIcon'; diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/InvocationNodeInfoIcon.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/InvocationNodeInfoIcon.tsx index 42fd120cd1..01a6d2e493 100644 --- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/InvocationNodeInfoIcon.tsx +++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/InvocationNodeInfoIcon.tsx @@ -1,4 +1,4 @@ -import { Flex, Icon, Text, Tooltip } from '@invoke-ai/ui'; +import { Flex, Icon, Text, Tooltip } from '@invoke-ai/ui-library'; import { compare } from 'compare-versions'; import { useNodeData } from 'features/nodes/hooks/useNodeData'; import { useNodeNeedsUpdate } from 'features/nodes/hooks/useNodeNeedsUpdate'; diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/InvocationNodeStatusIndicator.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/InvocationNodeStatusIndicator.tsx index b96edf9b2a..0586353e64 100644 --- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/InvocationNodeStatusIndicator.tsx +++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/InvocationNodeStatusIndicator.tsx @@ -1,4 +1,4 @@ -import type { SystemStyleObject } from '@invoke-ai/ui'; +import type { SystemStyleObject } from '@invoke-ai/ui-library'; import { Badge, CircularProgress, @@ -7,7 +7,7 @@ import { Image, Text, Tooltip, -} from '@invoke-ai/ui'; +} from '@invoke-ai/ui-library'; import { createMemoizedSelector } from 'app/store/createMemoizedSelector'; import { useAppSelector } from 'app/store/storeHooks'; import { selectNodesSlice } from 'features/nodes/store/nodesSlice'; diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/InvocationNodeUnknownFallback.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/InvocationNodeUnknownFallback.tsx index a1d1a93b0c..914eb134f1 100644 --- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/InvocationNodeUnknownFallback.tsx +++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/InvocationNodeUnknownFallback.tsx @@ -1,4 +1,4 @@ -import { Flex, Text } from '@invoke-ai/ui'; +import { Flex, Text } from '@invoke-ai/ui-library'; import NodeCollapseButton from 'features/nodes/components/flow/nodes/common/NodeCollapseButton'; import NodeWrapper from 'features/nodes/components/flow/nodes/common/NodeWrapper'; import { useNodePack } from 'features/nodes/hooks/useNodePack'; diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/NotesTextarea.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/NotesTextarea.tsx index 6e092b0448..a6bdb1fa75 100644 --- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/NotesTextarea.tsx +++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/NotesTextarea.tsx @@ -1,4 +1,4 @@ -import { FormControl, FormLabel, Textarea } from '@invoke-ai/ui'; +import { FormControl, FormLabel, Textarea } from '@invoke-ai/ui-library'; import { useAppDispatch } from 'app/store/storeHooks'; import { useNodeData } from 'features/nodes/hooks/useNodeData'; import { nodeNotesChanged } from 'features/nodes/store/nodesSlice'; diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/SaveToGalleryCheckbox.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/SaveToGalleryCheckbox.tsx index ca18428d30..55ad9dcbf6 100644 --- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/SaveToGalleryCheckbox.tsx +++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/SaveToGalleryCheckbox.tsx @@ -1,4 +1,4 @@ -import { Checkbox, FormControl, FormLabel } from '@invoke-ai/ui'; +import { Checkbox, FormControl, FormLabel } from '@invoke-ai/ui-library'; import { useAppDispatch } from 'app/store/storeHooks'; import { useHasImageOutput } from 'features/nodes/hooks/useHasImageOutput'; import { useIsIntermediate } from 'features/nodes/hooks/useIsIntermediate'; diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/UseCacheCheckbox.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/UseCacheCheckbox.tsx index 3385c23940..e900747bbd 100644 --- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/UseCacheCheckbox.tsx +++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/UseCacheCheckbox.tsx @@ -1,4 +1,4 @@ -import { Checkbox, FormControl, FormLabel } from '@invoke-ai/ui'; +import { Checkbox, FormControl, FormLabel } from '@invoke-ai/ui-library'; import { useAppDispatch } from 'app/store/storeHooks'; import { useUseCache } from 'features/nodes/hooks/useUseCache'; import { nodeUseCacheChanged } from 'features/nodes/store/nodesSlice'; diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/EditableFieldTitle.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/EditableFieldTitle.tsx index 65d41accec..c5cbda148e 100644 --- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/EditableFieldTitle.tsx +++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/EditableFieldTitle.tsx @@ -1,4 +1,4 @@ -import type { SystemStyleObject } from '@invoke-ai/ui'; +import type { SystemStyleObject } from '@invoke-ai/ui-library'; import { Editable, EditableInput, @@ -7,7 +7,7 @@ import { forwardRef, Tooltip, useEditableControls, -} from '@invoke-ai/ui'; +} from '@invoke-ai/ui-library'; import { useAppDispatch } from 'app/store/storeHooks'; import { useFieldLabel } from 'features/nodes/hooks/useFieldLabel'; import { useFieldTemplateTitle } from 'features/nodes/hooks/useFieldTemplateTitle'; diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/FieldContextMenu.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/FieldContextMenu.tsx index 6c83cf2e9f..7ef79d9544 100644 --- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/FieldContextMenu.tsx +++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/FieldContextMenu.tsx @@ -1,5 +1,5 @@ -import type { ContextMenuProps } from '@invoke-ai/ui'; -import { ContextMenu, MenuGroup, MenuItem, MenuList } from '@invoke-ai/ui'; +import type { ContextMenuProps } from '@invoke-ai/ui-library'; +import { ContextMenu, MenuGroup, MenuItem, MenuList } from '@invoke-ai/ui-library'; import { createSelector } from '@reduxjs/toolkit'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import { useFieldInputKind } from 'features/nodes/hooks/useFieldInputKind'; diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/FieldHandle.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/FieldHandle.tsx index 1860217a92..84aebce773 100644 --- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/FieldHandle.tsx +++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/FieldHandle.tsx @@ -1,4 +1,4 @@ -import { Tooltip } from '@invoke-ai/ui'; +import { Tooltip } from '@invoke-ai/ui-library'; import { colorTokenToCssVar } from 'common/util/colorTokenToCssVar'; import { getFieldColor } from 'features/nodes/components/flow/edges/util/getEdgeColor'; import { useFieldTypeName } from 'features/nodes/hooks/usePrettyFieldType'; diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/FieldTitle.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/FieldTitle.tsx index ead253c06e..dd934478e6 100644 --- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/FieldTitle.tsx +++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/FieldTitle.tsx @@ -1,4 +1,4 @@ -import { Flex, forwardRef, Text } from '@invoke-ai/ui'; +import { Flex, forwardRef, Text } from '@invoke-ai/ui-library'; import { useFieldLabel } from 'features/nodes/hooks/useFieldLabel'; import { useFieldTemplateTitle } from 'features/nodes/hooks/useFieldTemplateTitle'; import { memo } from 'react'; diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/FieldTooltipContent.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/FieldTooltipContent.tsx index 5251da442e..c87649cca0 100644 --- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/FieldTooltipContent.tsx +++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/FieldTooltipContent.tsx @@ -1,4 +1,4 @@ -import { Flex, Text } from '@invoke-ai/ui'; +import { Flex, Text } from '@invoke-ai/ui-library'; import { useFieldInstance } from 'features/nodes/hooks/useFieldData'; import { useFieldTemplate } from 'features/nodes/hooks/useFieldTemplate'; import { useFieldTypeName } from 'features/nodes/hooks/usePrettyFieldType'; diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputField.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputField.tsx index 0de87b8f58..d2513f27c1 100644 --- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputField.tsx +++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputField.tsx @@ -1,4 +1,4 @@ -import { Flex, FormControl, FormLabel } from '@invoke-ai/ui'; +import { Flex, FormControl, FormLabel } from '@invoke-ai/ui-library'; import { useConnectionState } from 'features/nodes/hooks/useConnectionState'; import { useDoesInputHaveValue } from 'features/nodes/hooks/useDoesInputHaveValue'; import { useFieldInputInstance } from 'features/nodes/hooks/useFieldInputInstance'; diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputFieldRenderer.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputFieldRenderer.tsx index 161d5b64fd..9f3d9e2389 100644 --- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputFieldRenderer.tsx +++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputFieldRenderer.tsx @@ -1,4 +1,4 @@ -import { Box, Text } from '@invoke-ai/ui'; +import { Box, Text } from '@invoke-ai/ui-library'; import { useFieldInstance } from 'features/nodes/hooks/useFieldData'; import { useFieldTemplate } from 'features/nodes/hooks/useFieldTemplate'; import { diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/LinearViewField.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/LinearViewField.tsx index 1c7d749b1e..6afc9b2485 100644 --- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/LinearViewField.tsx +++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/LinearViewField.tsx @@ -1,4 +1,4 @@ -import { Flex, Icon, IconButton, Spacer, Tooltip } from '@invoke-ai/ui'; +import { Flex, Icon, IconButton, Spacer, Tooltip } from '@invoke-ai/ui-library'; import { useAppDispatch } from 'app/store/storeHooks'; import NodeSelectionOverlay from 'common/components/NodeSelectionOverlay'; import { useMouseOverNode } from 'features/nodes/hooks/useMouseOverNode'; diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/OutputField.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/OutputField.tsx index f88dedb178..213d4eb891 100644 --- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/OutputField.tsx +++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/OutputField.tsx @@ -1,4 +1,4 @@ -import { Flex, FormControl, FormLabel, Tooltip } from '@invoke-ai/ui'; +import { Flex, FormControl, FormLabel, Tooltip } from '@invoke-ai/ui-library'; import { useConnectionState } from 'features/nodes/hooks/useConnectionState'; import { useFieldOutputInstance } from 'features/nodes/hooks/useFieldOutputInstance'; import { useFieldOutputTemplate } from 'features/nodes/hooks/useFieldOutputTemplate'; diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/BoardFieldInputComponent.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/BoardFieldInputComponent.tsx index 43c5246962..136445177a 100644 --- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/BoardFieldInputComponent.tsx +++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/BoardFieldInputComponent.tsx @@ -1,5 +1,5 @@ -import type { ComboboxOnChange, ComboboxOption } from '@invoke-ai/ui'; -import { Combobox, FormControl } from '@invoke-ai/ui'; +import type { ComboboxOnChange, ComboboxOption } from '@invoke-ai/ui-library'; +import { Combobox, FormControl } from '@invoke-ai/ui-library'; import { useAppDispatch } from 'app/store/storeHooks'; import { fieldBoardValueChanged } from 'features/nodes/store/nodesSlice'; import type { diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/BooleanFieldInputComponent.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/BooleanFieldInputComponent.tsx index b4eb9b3b01..fdd8ab7355 100644 --- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/BooleanFieldInputComponent.tsx +++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/BooleanFieldInputComponent.tsx @@ -1,4 +1,4 @@ -import { Switch } from '@invoke-ai/ui'; +import { Switch } from '@invoke-ai/ui-library'; import { useAppDispatch } from 'app/store/storeHooks'; import { fieldBooleanValueChanged } from 'features/nodes/store/nodesSlice'; import type { diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/ControlNetModelFieldInputComponent.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/ControlNetModelFieldInputComponent.tsx index 8b3c138a2f..0ff6243e19 100644 --- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/ControlNetModelFieldInputComponent.tsx +++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/ControlNetModelFieldInputComponent.tsx @@ -1,4 +1,4 @@ -import { Combobox, FormControl, Tooltip } from '@invoke-ai/ui'; +import { Combobox, FormControl, Tooltip } from '@invoke-ai/ui-library'; import { useAppDispatch } from 'app/store/storeHooks'; import { useGroupedModelCombobox } from 'common/hooks/useGroupedModelCombobox'; import { fieldControlNetModelValueChanged } from 'features/nodes/store/nodesSlice'; diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/EnumFieldInputComponent.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/EnumFieldInputComponent.tsx index 4d123a03b1..586def4367 100644 --- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/EnumFieldInputComponent.tsx +++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/EnumFieldInputComponent.tsx @@ -1,4 +1,4 @@ -import { Select } from '@invoke-ai/ui'; +import { Select } from '@invoke-ai/ui-library'; import { useAppDispatch } from 'app/store/storeHooks'; import { fieldEnumModelValueChanged } from 'features/nodes/store/nodesSlice'; import type { diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/IPAdapterModelFieldInputComponent.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/IPAdapterModelFieldInputComponent.tsx index 20867949f5..e77652eb31 100644 --- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/IPAdapterModelFieldInputComponent.tsx +++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/IPAdapterModelFieldInputComponent.tsx @@ -1,4 +1,4 @@ -import { Combobox, FormControl, Tooltip } from '@invoke-ai/ui'; +import { Combobox, FormControl, Tooltip } from '@invoke-ai/ui-library'; import { useAppDispatch } from 'app/store/storeHooks'; import { useGroupedModelCombobox } from 'common/hooks/useGroupedModelCombobox'; import { fieldIPAdapterModelValueChanged } from 'features/nodes/store/nodesSlice'; diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/ImageFieldInputComponent.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/ImageFieldInputComponent.tsx index 67d4f366ca..04b8992910 100644 --- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/ImageFieldInputComponent.tsx +++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/ImageFieldInputComponent.tsx @@ -1,4 +1,4 @@ -import { Flex, Text } from '@invoke-ai/ui'; +import { Flex, Text } from '@invoke-ai/ui-library'; import { skipToken } from '@reduxjs/toolkit/query'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import IAIDndImage from 'common/components/IAIDndImage'; diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/LoRAModelFieldInputComponent.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/LoRAModelFieldInputComponent.tsx index 84dcdae740..e964ea3b95 100644 --- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/LoRAModelFieldInputComponent.tsx +++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/LoRAModelFieldInputComponent.tsx @@ -1,4 +1,4 @@ -import { Combobox, FormControl } from '@invoke-ai/ui'; +import { Combobox, FormControl } from '@invoke-ai/ui-library'; import { useAppDispatch } from 'app/store/storeHooks'; import { useGroupedModelCombobox } from 'common/hooks/useGroupedModelCombobox'; import { fieldLoRAModelValueChanged } from 'features/nodes/store/nodesSlice'; diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/MainModelFieldInputComponent.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/MainModelFieldInputComponent.tsx index b7c059a288..2f3605139f 100644 --- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/MainModelFieldInputComponent.tsx +++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/MainModelFieldInputComponent.tsx @@ -1,4 +1,4 @@ -import { Combobox, Flex, FormControl } from '@invoke-ai/ui'; +import { Combobox, Flex, FormControl } from '@invoke-ai/ui-library'; import { useAppDispatch } from 'app/store/storeHooks'; import { useGroupedModelCombobox } from 'common/hooks/useGroupedModelCombobox'; import { SyncModelsIconButton } from 'features/modelManager/components/SyncModels/SyncModelsIconButton'; diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/NumberFieldInputComponent.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/NumberFieldInputComponent.tsx index 08838057af..e9e84e526b 100644 --- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/NumberFieldInputComponent.tsx +++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/NumberFieldInputComponent.tsx @@ -1,4 +1,4 @@ -import { CompositeNumberInput } from '@invoke-ai/ui'; +import { CompositeNumberInput } from '@invoke-ai/ui-library'; import { NUMPY_RAND_MAX } from 'app/constants'; import { useAppDispatch } from 'app/store/storeHooks'; import { fieldNumberValueChanged } from 'features/nodes/store/nodesSlice'; diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/RefinerModelFieldInputComponent.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/RefinerModelFieldInputComponent.tsx index 0d306b073a..d4ea0b5585 100644 --- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/RefinerModelFieldInputComponent.tsx +++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/RefinerModelFieldInputComponent.tsx @@ -1,4 +1,4 @@ -import { Combobox, Flex, FormControl } from '@invoke-ai/ui'; +import { Combobox, Flex, FormControl } from '@invoke-ai/ui-library'; import { useAppDispatch } from 'app/store/storeHooks'; import { useGroupedModelCombobox } from 'common/hooks/useGroupedModelCombobox'; import { SyncModelsIconButton } from 'features/modelManager/components/SyncModels/SyncModelsIconButton'; diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/SDXLMainModelFieldInputComponent.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/SDXLMainModelFieldInputComponent.tsx index e34243d740..d46c43bbbe 100644 --- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/SDXLMainModelFieldInputComponent.tsx +++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/SDXLMainModelFieldInputComponent.tsx @@ -1,4 +1,4 @@ -import { Combobox, Flex, FormControl } from '@invoke-ai/ui'; +import { Combobox, Flex, FormControl } from '@invoke-ai/ui-library'; import { useAppDispatch } from 'app/store/storeHooks'; import { useGroupedModelCombobox } from 'common/hooks/useGroupedModelCombobox'; import { SyncModelsIconButton } from 'features/modelManager/components/SyncModels/SyncModelsIconButton'; diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/SchedulerFieldInputComponent.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/SchedulerFieldInputComponent.tsx index dfa75231a4..5a06e780d7 100644 --- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/SchedulerFieldInputComponent.tsx +++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/SchedulerFieldInputComponent.tsx @@ -1,5 +1,5 @@ -import type { ComboboxOnChange } from '@invoke-ai/ui'; -import { Combobox, FormControl } from '@invoke-ai/ui'; +import type { ComboboxOnChange } from '@invoke-ai/ui-library'; +import { Combobox, FormControl } from '@invoke-ai/ui-library'; import { useAppDispatch } from 'app/store/storeHooks'; import { fieldSchedulerValueChanged } from 'features/nodes/store/nodesSlice'; import type { diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/StringFieldInputComponent.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/StringFieldInputComponent.tsx index e4f83a2c03..adcc814093 100644 --- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/StringFieldInputComponent.tsx +++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/StringFieldInputComponent.tsx @@ -1,4 +1,4 @@ -import { Input, Textarea } from '@invoke-ai/ui'; +import { Input, Textarea } from '@invoke-ai/ui-library'; import { useAppDispatch } from 'app/store/storeHooks'; import { fieldStringValueChanged } from 'features/nodes/store/nodesSlice'; import type { diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/T2IAdapterModelFieldInputComponent.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/T2IAdapterModelFieldInputComponent.tsx index ce2a9b51cf..b013f18d8d 100644 --- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/T2IAdapterModelFieldInputComponent.tsx +++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/T2IAdapterModelFieldInputComponent.tsx @@ -1,4 +1,4 @@ -import { Combobox, FormControl, Tooltip } from '@invoke-ai/ui'; +import { Combobox, FormControl, Tooltip } from '@invoke-ai/ui-library'; import { useAppDispatch } from 'app/store/storeHooks'; import { useGroupedModelCombobox } from 'common/hooks/useGroupedModelCombobox'; import { fieldT2IAdapterModelValueChanged } from 'features/nodes/store/nodesSlice'; diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/VAEModelFieldInputComponent.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/VAEModelFieldInputComponent.tsx index 45e3c3c581..4be215c4c1 100644 --- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/VAEModelFieldInputComponent.tsx +++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/VAEModelFieldInputComponent.tsx @@ -1,4 +1,4 @@ -import { Combobox, Flex, FormControl } from '@invoke-ai/ui'; +import { Combobox, Flex, FormControl } from '@invoke-ai/ui-library'; import { useAppDispatch } from 'app/store/storeHooks'; import { useGroupedModelCombobox } from 'common/hooks/useGroupedModelCombobox'; import { SyncModelsIconButton } from 'features/modelManager/components/SyncModels/SyncModelsIconButton'; diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Notes/NotesNode.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Notes/NotesNode.tsx index b9673e0474..896e8482d3 100644 --- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Notes/NotesNode.tsx +++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Notes/NotesNode.tsx @@ -1,4 +1,4 @@ -import { Box, Flex, Textarea } from '@invoke-ai/ui'; +import { Box, Flex, Textarea } from '@invoke-ai/ui-library'; import { useAppDispatch } from 'app/store/storeHooks'; import NodeCollapseButton from 'features/nodes/components/flow/nodes/common/NodeCollapseButton'; import NodeTitle from 'features/nodes/components/flow/nodes/common/NodeTitle'; diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/common/NodeCollapseButton.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/common/NodeCollapseButton.tsx index f90c20fb57..372854b703 100644 --- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/common/NodeCollapseButton.tsx +++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/common/NodeCollapseButton.tsx @@ -1,4 +1,4 @@ -import { Icon, IconButton } from '@invoke-ai/ui'; +import { Icon, IconButton } from '@invoke-ai/ui-library'; import { useAppDispatch } from 'app/store/storeHooks'; import { nodeIsOpenChanged } from 'features/nodes/store/nodesSlice'; import { memo, useCallback } from 'react'; diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/common/NodeTitle.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/common/NodeTitle.tsx index bff38cd608..39c3731bb9 100644 --- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/common/NodeTitle.tsx +++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/common/NodeTitle.tsx @@ -1,4 +1,4 @@ -import type { SystemStyleObject } from '@invoke-ai/ui'; +import type { SystemStyleObject } from '@invoke-ai/ui-library'; import { Box, Editable, @@ -6,7 +6,7 @@ import { EditablePreview, Flex, useEditableControls, -} from '@invoke-ai/ui'; +} from '@invoke-ai/ui-library'; import { useAppDispatch } from 'app/store/storeHooks'; import { useNodeLabel } from 'features/nodes/hooks/useNodeLabel'; import { useNodeTemplateTitle } from 'features/nodes/hooks/useNodeTemplateTitle'; diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/common/NodeWrapper.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/common/NodeWrapper.tsx index 2a3490d360..6cd0263b1c 100644 --- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/common/NodeWrapper.tsx +++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/common/NodeWrapper.tsx @@ -1,5 +1,5 @@ -import type { ChakraProps } from '@invoke-ai/ui'; -import { Box, useGlobalMenuClose, useToken } from '@invoke-ai/ui'; +import type { ChakraProps } from '@invoke-ai/ui-library'; +import { Box, useGlobalMenuClose, useToken } from '@invoke-ai/ui-library'; import { createSelector } from '@reduxjs/toolkit'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import NodeSelectionOverlay from 'common/components/NodeSelectionOverlay'; diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/panels/BottomLeftPanel/BottomLeftPanel.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/panels/BottomLeftPanel/BottomLeftPanel.tsx index ebe2b93496..412ff00052 100644 --- a/invokeai/frontend/web/src/features/nodes/components/flow/panels/BottomLeftPanel/BottomLeftPanel.tsx +++ b/invokeai/frontend/web/src/features/nodes/components/flow/panels/BottomLeftPanel/BottomLeftPanel.tsx @@ -1,4 +1,4 @@ -import { Flex } from '@invoke-ai/ui'; +import { Flex } from '@invoke-ai/ui-library'; import { memo } from 'react'; import NodeOpacitySlider from './NodeOpacitySlider'; diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/panels/BottomLeftPanel/NodeOpacitySlider.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/panels/BottomLeftPanel/NodeOpacitySlider.tsx index 524e400741..b24b2058bd 100644 --- a/invokeai/frontend/web/src/features/nodes/components/flow/panels/BottomLeftPanel/NodeOpacitySlider.tsx +++ b/invokeai/frontend/web/src/features/nodes/components/flow/panels/BottomLeftPanel/NodeOpacitySlider.tsx @@ -1,4 +1,4 @@ -import { CompositeSlider, Flex } from '@invoke-ai/ui'; +import { CompositeSlider, Flex } from '@invoke-ai/ui-library'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import { nodeOpacityChanged } from 'features/nodes/store/nodesSlice'; import { memo, useCallback } from 'react'; diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/panels/BottomLeftPanel/ViewportControls.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/panels/BottomLeftPanel/ViewportControls.tsx index c97d7a9be4..8d0db533e9 100644 --- a/invokeai/frontend/web/src/features/nodes/components/flow/panels/BottomLeftPanel/ViewportControls.tsx +++ b/invokeai/frontend/web/src/features/nodes/components/flow/panels/BottomLeftPanel/ViewportControls.tsx @@ -1,4 +1,4 @@ -import { ButtonGroup, IconButton } from '@invoke-ai/ui'; +import { ButtonGroup, IconButton } from '@invoke-ai/ui-library'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import { // shouldShowFieldTypeLegendChanged, diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/panels/MinimapPanel/MinimapPanel.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/panels/MinimapPanel/MinimapPanel.tsx index 45409c0016..b01860353b 100644 --- a/invokeai/frontend/web/src/features/nodes/components/flow/panels/MinimapPanel/MinimapPanel.tsx +++ b/invokeai/frontend/web/src/features/nodes/components/flow/panels/MinimapPanel/MinimapPanel.tsx @@ -1,5 +1,5 @@ -import type { SystemStyleObject } from '@invoke-ai/ui'; -import { chakra, Flex } from '@invoke-ai/ui'; +import type { SystemStyleObject } from '@invoke-ai/ui-library'; +import { chakra, Flex } from '@invoke-ai/ui-library'; import { useAppSelector } from 'app/store/storeHooks'; import { memo } from 'react'; import { MiniMap } from 'reactflow'; diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/panels/TopPanel/AddNodeButton.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/panels/TopPanel/AddNodeButton.tsx index cf59208749..63a5e7eccb 100644 --- a/invokeai/frontend/web/src/features/nodes/components/flow/panels/TopPanel/AddNodeButton.tsx +++ b/invokeai/frontend/web/src/features/nodes/components/flow/panels/TopPanel/AddNodeButton.tsx @@ -1,4 +1,4 @@ -import { IconButton } from '@invoke-ai/ui'; +import { IconButton } from '@invoke-ai/ui-library'; import { useAppDispatch } from 'app/store/storeHooks'; import { addNodePopoverOpened } from 'features/nodes/store/nodesSlice'; import { memo, useCallback } from 'react'; diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/panels/TopPanel/TopPanel.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/panels/TopPanel/TopPanel.tsx index 3f7834b59b..8cdb4ae2ca 100644 --- a/invokeai/frontend/web/src/features/nodes/components/flow/panels/TopPanel/TopPanel.tsx +++ b/invokeai/frontend/web/src/features/nodes/components/flow/panels/TopPanel/TopPanel.tsx @@ -1,4 +1,4 @@ -import { Flex, Spacer } from '@invoke-ai/ui'; +import { Flex, Spacer } from '@invoke-ai/ui-library'; import AddNodeButton from 'features/nodes/components/flow/panels/TopPanel/AddNodeButton'; import UpdateNodesButton from 'features/nodes/components/flow/panels/TopPanel/UpdateNodesButton'; import WorkflowName from 'features/nodes/components/flow/panels/TopPanel/WorkflowName'; diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/panels/TopPanel/UpdateNodesButton.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/panels/TopPanel/UpdateNodesButton.tsx index 1d64aae5db..63b0dbe9fb 100644 --- a/invokeai/frontend/web/src/features/nodes/components/flow/panels/TopPanel/UpdateNodesButton.tsx +++ b/invokeai/frontend/web/src/features/nodes/components/flow/panels/TopPanel/UpdateNodesButton.tsx @@ -1,4 +1,4 @@ -import { Button } from '@invoke-ai/ui'; +import { Button } from '@invoke-ai/ui-library'; import { useAppDispatch } from 'app/store/storeHooks'; import { useGetNodesNeedUpdate } from 'features/nodes/hooks/useGetNodesNeedUpdate'; import { updateAllNodesRequested } from 'features/nodes/store/actions'; diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/panels/TopPanel/WorkflowName.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/panels/TopPanel/WorkflowName.tsx index 76b81f6e2a..942e526adc 100644 --- a/invokeai/frontend/web/src/features/nodes/components/flow/panels/TopPanel/WorkflowName.tsx +++ b/invokeai/frontend/web/src/features/nodes/components/flow/panels/TopPanel/WorkflowName.tsx @@ -1,4 +1,4 @@ -import { Text } from '@invoke-ai/ui'; +import { Text } from '@invoke-ai/ui-library'; import { useAppSelector } from 'app/store/storeHooks'; import { useFeatureStatus } from 'features/system/hooks/useFeatureStatus'; import { memo, useMemo } from 'react'; diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/panels/TopRightPanel/ReloadSchemaButton.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/panels/TopRightPanel/ReloadSchemaButton.tsx index e3e40788aa..2d67482ec4 100644 --- a/invokeai/frontend/web/src/features/nodes/components/flow/panels/TopRightPanel/ReloadSchemaButton.tsx +++ b/invokeai/frontend/web/src/features/nodes/components/flow/panels/TopRightPanel/ReloadSchemaButton.tsx @@ -1,4 +1,4 @@ -import { Button } from '@invoke-ai/ui'; +import { Button } from '@invoke-ai/ui-library'; import { useAppDispatch } from 'app/store/storeHooks'; import { memo, useCallback } from 'react'; import { useTranslation } from 'react-i18next'; diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/panels/TopRightPanel/TopRightPanel.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/panels/TopRightPanel/TopRightPanel.tsx index 48f79573fe..f8e6d390aa 100644 --- a/invokeai/frontend/web/src/features/nodes/components/flow/panels/TopRightPanel/TopRightPanel.tsx +++ b/invokeai/frontend/web/src/features/nodes/components/flow/panels/TopRightPanel/TopRightPanel.tsx @@ -1,4 +1,4 @@ -import { Flex } from '@invoke-ai/ui'; +import { Flex } from '@invoke-ai/ui-library'; import { useFeatureStatus } from 'features/system/hooks/useFeatureStatus'; import WorkflowLibraryButton from 'features/workflowLibrary/components/WorkflowLibraryButton'; import WorkflowLibraryMenu from 'features/workflowLibrary/components/WorkflowLibraryMenu/WorkflowLibraryMenu'; diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/panels/TopRightPanel/WorkflowEditorSettings.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/panels/TopRightPanel/WorkflowEditorSettings.tsx index 99c4f38ba0..8861c46225 100644 --- a/invokeai/frontend/web/src/features/nodes/components/flow/panels/TopRightPanel/WorkflowEditorSettings.tsx +++ b/invokeai/frontend/web/src/features/nodes/components/flow/panels/TopRightPanel/WorkflowEditorSettings.tsx @@ -13,7 +13,7 @@ import { ModalOverlay, Switch, useDisclosure, -} from '@invoke-ai/ui'; +} from '@invoke-ai/ui-library'; import { createMemoizedSelector } from 'app/store/createMemoizedSelector'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import ReloadNodeTemplatesButton from 'features/nodes/components/flow/panels/TopRightPanel/ReloadSchemaButton'; diff --git a/invokeai/frontend/web/src/features/nodes/components/sidePanel/NodeEditorPanelGroup.tsx b/invokeai/frontend/web/src/features/nodes/components/sidePanel/NodeEditorPanelGroup.tsx index 83c06051cc..0edd27d011 100644 --- a/invokeai/frontend/web/src/features/nodes/components/sidePanel/NodeEditorPanelGroup.tsx +++ b/invokeai/frontend/web/src/features/nodes/components/sidePanel/NodeEditorPanelGroup.tsx @@ -1,6 +1,6 @@ import 'reactflow/dist/style.css'; -import { Flex } from '@invoke-ai/ui'; +import { Flex } from '@invoke-ai/ui-library'; import QueueControls from 'features/queue/components/QueueControls'; import ResizeHandle from 'features/ui/components/tabs/ResizeHandle'; import { usePanelStorage } from 'features/ui/hooks/usePanelStorage'; diff --git a/invokeai/frontend/web/src/features/nodes/components/sidePanel/inspector/InspectorDetailsTab.tsx b/invokeai/frontend/web/src/features/nodes/components/sidePanel/inspector/InspectorDetailsTab.tsx index a53f52b061..b278a9bea8 100644 --- a/invokeai/frontend/web/src/features/nodes/components/sidePanel/inspector/InspectorDetailsTab.tsx +++ b/invokeai/frontend/web/src/features/nodes/components/sidePanel/inspector/InspectorDetailsTab.tsx @@ -1,4 +1,4 @@ -import { Box, Flex, FormControl, FormLabel, HStack, Text } from '@invoke-ai/ui'; +import { Box, Flex, FormControl, FormLabel, HStack, Text } from '@invoke-ai/ui-library'; import { createMemoizedSelector } from 'app/store/createMemoizedSelector'; import { useAppSelector } from 'app/store/storeHooks'; import { IAINoContentFallback } from 'common/components/IAIImageFallback'; diff --git a/invokeai/frontend/web/src/features/nodes/components/sidePanel/inspector/InspectorOutputsTab.tsx b/invokeai/frontend/web/src/features/nodes/components/sidePanel/inspector/InspectorOutputsTab.tsx index 5c94bd0dbc..a9ae4d88cb 100644 --- a/invokeai/frontend/web/src/features/nodes/components/sidePanel/inspector/InspectorOutputsTab.tsx +++ b/invokeai/frontend/web/src/features/nodes/components/sidePanel/inspector/InspectorOutputsTab.tsx @@ -1,4 +1,4 @@ -import { Box, Flex } from '@invoke-ai/ui'; +import { Box, Flex } from '@invoke-ai/ui-library'; import { createMemoizedSelector } from 'app/store/createMemoizedSelector'; import { useAppSelector } from 'app/store/storeHooks'; import { IAINoContentFallback } from 'common/components/IAIImageFallback'; diff --git a/invokeai/frontend/web/src/features/nodes/components/sidePanel/inspector/InspectorPanel.tsx b/invokeai/frontend/web/src/features/nodes/components/sidePanel/inspector/InspectorPanel.tsx index 583c5435bd..a09970cdc5 100644 --- a/invokeai/frontend/web/src/features/nodes/components/sidePanel/inspector/InspectorPanel.tsx +++ b/invokeai/frontend/web/src/features/nodes/components/sidePanel/inspector/InspectorPanel.tsx @@ -1,4 +1,4 @@ -import { Flex, Tab, TabList, TabPanel, TabPanels, Tabs } from '@invoke-ai/ui'; +import { Flex, Tab, TabList, TabPanel, TabPanels, Tabs } from '@invoke-ai/ui-library'; import { memo } from 'react'; import { useTranslation } from 'react-i18next'; diff --git a/invokeai/frontend/web/src/features/nodes/components/sidePanel/inspector/details/EditableNodeTitle.tsx b/invokeai/frontend/web/src/features/nodes/components/sidePanel/inspector/details/EditableNodeTitle.tsx index e749424fc8..444eb09e35 100644 --- a/invokeai/frontend/web/src/features/nodes/components/sidePanel/inspector/details/EditableNodeTitle.tsx +++ b/invokeai/frontend/web/src/features/nodes/components/sidePanel/inspector/details/EditableNodeTitle.tsx @@ -1,4 +1,4 @@ -import { Editable, EditableInput, EditablePreview, Flex } from '@invoke-ai/ui'; +import { Editable, EditableInput, EditablePreview, Flex } from '@invoke-ai/ui-library'; import { useAppDispatch } from 'app/store/storeHooks'; import { useNodeLabel } from 'features/nodes/hooks/useNodeLabel'; import { useNodeTemplateTitle } from 'features/nodes/hooks/useNodeTemplateTitle'; diff --git a/invokeai/frontend/web/src/features/nodes/components/sidePanel/workflow/WorkflowGeneralTab.tsx b/invokeai/frontend/web/src/features/nodes/components/sidePanel/workflow/WorkflowGeneralTab.tsx index 9fa7363d4a..4cd53e91ac 100644 --- a/invokeai/frontend/web/src/features/nodes/components/sidePanel/workflow/WorkflowGeneralTab.tsx +++ b/invokeai/frontend/web/src/features/nodes/components/sidePanel/workflow/WorkflowGeneralTab.tsx @@ -1,4 +1,4 @@ -import type { FormControlProps } from '@invoke-ai/ui'; +import type { FormControlProps } from '@invoke-ai/ui-library'; import { Flex, FormControl, @@ -6,7 +6,7 @@ import { FormLabel, Input, Textarea, -} from '@invoke-ai/ui'; +} from '@invoke-ai/ui-library'; import { createMemoizedSelector } from 'app/store/createMemoizedSelector'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import ScrollableContent from 'common/components/OverlayScrollbars/ScrollableContent'; diff --git a/invokeai/frontend/web/src/features/nodes/components/sidePanel/workflow/WorkflowJSONTab.tsx b/invokeai/frontend/web/src/features/nodes/components/sidePanel/workflow/WorkflowJSONTab.tsx index 0f3a3f5e08..321fe77b10 100644 --- a/invokeai/frontend/web/src/features/nodes/components/sidePanel/workflow/WorkflowJSONTab.tsx +++ b/invokeai/frontend/web/src/features/nodes/components/sidePanel/workflow/WorkflowJSONTab.tsx @@ -1,4 +1,4 @@ -import { Flex } from '@invoke-ai/ui'; +import { Flex } from '@invoke-ai/ui-library'; import { useStore } from '@nanostores/react'; import DataViewer from 'features/gallery/components/ImageMetadataViewer/DataViewer'; import { $builtWorkflow } from 'features/nodes/hooks/useWorkflowWatcher'; diff --git a/invokeai/frontend/web/src/features/nodes/components/sidePanel/workflow/WorkflowLinearTab.tsx b/invokeai/frontend/web/src/features/nodes/components/sidePanel/workflow/WorkflowLinearTab.tsx index 30051f2f71..d2d8185e1a 100644 --- a/invokeai/frontend/web/src/features/nodes/components/sidePanel/workflow/WorkflowLinearTab.tsx +++ b/invokeai/frontend/web/src/features/nodes/components/sidePanel/workflow/WorkflowLinearTab.tsx @@ -1,4 +1,4 @@ -import { Box, Flex } from '@invoke-ai/ui'; +import { Box, Flex } from '@invoke-ai/ui-library'; import { createMemoizedSelector } from 'app/store/createMemoizedSelector'; import { useAppSelector } from 'app/store/storeHooks'; import { IAINoContentFallback } from 'common/components/IAIImageFallback'; diff --git a/invokeai/frontend/web/src/features/nodes/components/sidePanel/workflow/WorkflowPanel.tsx b/invokeai/frontend/web/src/features/nodes/components/sidePanel/workflow/WorkflowPanel.tsx index deb833abc5..b9e09eb9e2 100644 --- a/invokeai/frontend/web/src/features/nodes/components/sidePanel/workflow/WorkflowPanel.tsx +++ b/invokeai/frontend/web/src/features/nodes/components/sidePanel/workflow/WorkflowPanel.tsx @@ -1,4 +1,4 @@ -import { Flex, Tab, TabList, TabPanel, TabPanels, Tabs } from '@invoke-ai/ui'; +import { Flex, Tab, TabList, TabPanel, TabPanels, Tabs } from '@invoke-ai/ui-library'; import { memo } from 'react'; import { useTranslation } from 'react-i18next'; diff --git a/invokeai/frontend/web/src/features/parameters/components/Advanced/ParamCFGRescaleMultiplier.tsx b/invokeai/frontend/web/src/features/parameters/components/Advanced/ParamCFGRescaleMultiplier.tsx index b1646b9b87..aa757e89bd 100644 --- a/invokeai/frontend/web/src/features/parameters/components/Advanced/ParamCFGRescaleMultiplier.tsx +++ b/invokeai/frontend/web/src/features/parameters/components/Advanced/ParamCFGRescaleMultiplier.tsx @@ -3,7 +3,7 @@ import { CompositeSlider, FormControl, FormLabel, -} from '@invoke-ai/ui'; +} from '@invoke-ai/ui-library'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import { InformationalPopover } from 'common/components/InformationalPopover/InformationalPopover'; import { setCfgRescaleMultiplier } from 'features/parameters/store/generationSlice'; diff --git a/invokeai/frontend/web/src/features/parameters/components/Advanced/ParamClipSkip.tsx b/invokeai/frontend/web/src/features/parameters/components/Advanced/ParamClipSkip.tsx index ffb2e76829..ac7582c70c 100644 --- a/invokeai/frontend/web/src/features/parameters/components/Advanced/ParamClipSkip.tsx +++ b/invokeai/frontend/web/src/features/parameters/components/Advanced/ParamClipSkip.tsx @@ -3,7 +3,7 @@ import { CompositeSlider, FormControl, FormLabel, -} from '@invoke-ai/ui'; +} from '@invoke-ai/ui-library'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import { InformationalPopover } from 'common/components/InformationalPopover/InformationalPopover'; import { setClipSkip } from 'features/parameters/store/generationSlice'; diff --git a/invokeai/frontend/web/src/features/parameters/components/Canvas/BoundingBox/ParamBoundingBoxHeight.tsx b/invokeai/frontend/web/src/features/parameters/components/Canvas/BoundingBox/ParamBoundingBoxHeight.tsx index f6b58972d7..34c9e67ae9 100644 --- a/invokeai/frontend/web/src/features/parameters/components/Canvas/BoundingBox/ParamBoundingBoxHeight.tsx +++ b/invokeai/frontend/web/src/features/parameters/components/Canvas/BoundingBox/ParamBoundingBoxHeight.tsx @@ -3,7 +3,7 @@ import { CompositeSlider, FormControl, FormLabel, -} from '@invoke-ai/ui'; +} from '@invoke-ai/ui-library'; import { useAppSelector } from 'app/store/storeHooks'; import { isStagingSelector } from 'features/canvas/store/canvasSelectors'; import { useImageSizeContext } from 'features/parameters/components/ImageSize/ImageSizeContext'; diff --git a/invokeai/frontend/web/src/features/parameters/components/Canvas/BoundingBox/ParamBoundingBoxWidth.tsx b/invokeai/frontend/web/src/features/parameters/components/Canvas/BoundingBox/ParamBoundingBoxWidth.tsx index def547ada4..1336b4482e 100644 --- a/invokeai/frontend/web/src/features/parameters/components/Canvas/BoundingBox/ParamBoundingBoxWidth.tsx +++ b/invokeai/frontend/web/src/features/parameters/components/Canvas/BoundingBox/ParamBoundingBoxWidth.tsx @@ -3,7 +3,7 @@ import { CompositeSlider, FormControl, FormLabel, -} from '@invoke-ai/ui'; +} from '@invoke-ai/ui-library'; import { useAppSelector } from 'app/store/storeHooks'; import { isStagingSelector } from 'features/canvas/store/canvasSelectors'; import { useImageSizeContext } from 'features/parameters/components/ImageSize/ImageSizeContext'; diff --git a/invokeai/frontend/web/src/features/parameters/components/Canvas/Compositing/CoherencePass/ParamCanvasCoherenceMode.tsx b/invokeai/frontend/web/src/features/parameters/components/Canvas/Compositing/CoherencePass/ParamCanvasCoherenceMode.tsx index fcdc1eee6f..0b91154c9b 100644 --- a/invokeai/frontend/web/src/features/parameters/components/Canvas/Compositing/CoherencePass/ParamCanvasCoherenceMode.tsx +++ b/invokeai/frontend/web/src/features/parameters/components/Canvas/Compositing/CoherencePass/ParamCanvasCoherenceMode.tsx @@ -1,5 +1,5 @@ -import type { ComboboxOnChange, ComboboxOption } from '@invoke-ai/ui'; -import { Combobox, FormControl, FormLabel } from '@invoke-ai/ui'; +import type { ComboboxOnChange, ComboboxOption } from '@invoke-ai/ui-library'; +import { Combobox, FormControl, FormLabel } from '@invoke-ai/ui-library'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import { InformationalPopover } from 'common/components/InformationalPopover/InformationalPopover'; import { setCanvasCoherenceMode } from 'features/parameters/store/generationSlice'; diff --git a/invokeai/frontend/web/src/features/parameters/components/Canvas/Compositing/CoherencePass/ParamCanvasCoherenceSteps.tsx b/invokeai/frontend/web/src/features/parameters/components/Canvas/Compositing/CoherencePass/ParamCanvasCoherenceSteps.tsx index 9f6ca54f7a..c82a72a839 100644 --- a/invokeai/frontend/web/src/features/parameters/components/Canvas/Compositing/CoherencePass/ParamCanvasCoherenceSteps.tsx +++ b/invokeai/frontend/web/src/features/parameters/components/Canvas/Compositing/CoherencePass/ParamCanvasCoherenceSteps.tsx @@ -3,7 +3,7 @@ import { CompositeSlider, FormControl, FormLabel, -} from '@invoke-ai/ui'; +} from '@invoke-ai/ui-library'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import { InformationalPopover } from 'common/components/InformationalPopover/InformationalPopover'; import { setCanvasCoherenceSteps } from 'features/parameters/store/generationSlice'; diff --git a/invokeai/frontend/web/src/features/parameters/components/Canvas/Compositing/CoherencePass/ParamCanvasCoherenceStrength.tsx b/invokeai/frontend/web/src/features/parameters/components/Canvas/Compositing/CoherencePass/ParamCanvasCoherenceStrength.tsx index ecac32251e..28998dcf05 100644 --- a/invokeai/frontend/web/src/features/parameters/components/Canvas/Compositing/CoherencePass/ParamCanvasCoherenceStrength.tsx +++ b/invokeai/frontend/web/src/features/parameters/components/Canvas/Compositing/CoherencePass/ParamCanvasCoherenceStrength.tsx @@ -3,7 +3,7 @@ import { CompositeSlider, FormControl, FormLabel, -} from '@invoke-ai/ui'; +} from '@invoke-ai/ui-library'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import { InformationalPopover } from 'common/components/InformationalPopover/InformationalPopover'; import { setCanvasCoherenceStrength } from 'features/parameters/store/generationSlice'; diff --git a/invokeai/frontend/web/src/features/parameters/components/Canvas/Compositing/MaskAdjustment/ParamMaskBlur.tsx b/invokeai/frontend/web/src/features/parameters/components/Canvas/Compositing/MaskAdjustment/ParamMaskBlur.tsx index dd250fb6b0..4b4b6f8a2a 100644 --- a/invokeai/frontend/web/src/features/parameters/components/Canvas/Compositing/MaskAdjustment/ParamMaskBlur.tsx +++ b/invokeai/frontend/web/src/features/parameters/components/Canvas/Compositing/MaskAdjustment/ParamMaskBlur.tsx @@ -3,7 +3,7 @@ import { CompositeSlider, FormControl, FormLabel, -} from '@invoke-ai/ui'; +} from '@invoke-ai/ui-library'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import { InformationalPopover } from 'common/components/InformationalPopover/InformationalPopover'; import { setMaskBlur } from 'features/parameters/store/generationSlice'; diff --git a/invokeai/frontend/web/src/features/parameters/components/Canvas/Compositing/MaskAdjustment/ParamMaskBlurMethod.tsx b/invokeai/frontend/web/src/features/parameters/components/Canvas/Compositing/MaskAdjustment/ParamMaskBlurMethod.tsx index 48f7927501..284a24dd07 100644 --- a/invokeai/frontend/web/src/features/parameters/components/Canvas/Compositing/MaskAdjustment/ParamMaskBlurMethod.tsx +++ b/invokeai/frontend/web/src/features/parameters/components/Canvas/Compositing/MaskAdjustment/ParamMaskBlurMethod.tsx @@ -1,5 +1,5 @@ -import type { ComboboxOnChange, ComboboxOption } from '@invoke-ai/ui'; -import { Combobox, FormControl, FormLabel } from '@invoke-ai/ui'; +import type { ComboboxOnChange, ComboboxOption } from '@invoke-ai/ui-library'; +import { Combobox, FormControl, FormLabel } from '@invoke-ai/ui-library'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import { InformationalPopover } from 'common/components/InformationalPopover/InformationalPopover'; import { setMaskBlurMethod } from 'features/parameters/store/generationSlice'; diff --git a/invokeai/frontend/web/src/features/parameters/components/Canvas/GenerationModeStatusText.tsx b/invokeai/frontend/web/src/features/parameters/components/Canvas/GenerationModeStatusText.tsx index 97781adb06..b4eaf7a43b 100644 --- a/invokeai/frontend/web/src/features/parameters/components/Canvas/GenerationModeStatusText.tsx +++ b/invokeai/frontend/web/src/features/parameters/components/Canvas/GenerationModeStatusText.tsx @@ -1,4 +1,4 @@ -import { Box } from '@invoke-ai/ui'; +import { Box } from '@invoke-ai/ui-library'; import { useCanvasGenerationMode } from 'features/canvas/hooks/useCanvasGenerationMode'; import { memo, useMemo } from 'react'; import { useTranslation } from 'react-i18next'; diff --git a/invokeai/frontend/web/src/features/parameters/components/Canvas/InfillAndScaling/ParamInfillMethod.tsx b/invokeai/frontend/web/src/features/parameters/components/Canvas/InfillAndScaling/ParamInfillMethod.tsx index 62a51fed2c..df9c96ea6f 100644 --- a/invokeai/frontend/web/src/features/parameters/components/Canvas/InfillAndScaling/ParamInfillMethod.tsx +++ b/invokeai/frontend/web/src/features/parameters/components/Canvas/InfillAndScaling/ParamInfillMethod.tsx @@ -1,5 +1,5 @@ -import type { ComboboxOnChange, ComboboxOption } from '@invoke-ai/ui'; -import { Combobox, FormControl, FormLabel } from '@invoke-ai/ui'; +import type { ComboboxOnChange, ComboboxOption } from '@invoke-ai/ui-library'; +import { Combobox, FormControl, FormLabel } from '@invoke-ai/ui-library'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import { InformationalPopover } from 'common/components/InformationalPopover/InformationalPopover'; import { setInfillMethod } from 'features/parameters/store/generationSlice'; diff --git a/invokeai/frontend/web/src/features/parameters/components/Canvas/InfillAndScaling/ParamInfillPatchmatchDownscaleSize.tsx b/invokeai/frontend/web/src/features/parameters/components/Canvas/InfillAndScaling/ParamInfillPatchmatchDownscaleSize.tsx index f879635e4d..113853ad9d 100644 --- a/invokeai/frontend/web/src/features/parameters/components/Canvas/InfillAndScaling/ParamInfillPatchmatchDownscaleSize.tsx +++ b/invokeai/frontend/web/src/features/parameters/components/Canvas/InfillAndScaling/ParamInfillPatchmatchDownscaleSize.tsx @@ -3,7 +3,7 @@ import { CompositeSlider, FormControl, FormLabel, -} from '@invoke-ai/ui'; +} from '@invoke-ai/ui-library'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import { setInfillPatchmatchDownscaleSize } from 'features/parameters/store/generationSlice'; import { memo, useCallback } from 'react'; diff --git a/invokeai/frontend/web/src/features/parameters/components/Canvas/InfillAndScaling/ParamInfillTilesize.tsx b/invokeai/frontend/web/src/features/parameters/components/Canvas/InfillAndScaling/ParamInfillTilesize.tsx index 4d04e2ed04..04006da019 100644 --- a/invokeai/frontend/web/src/features/parameters/components/Canvas/InfillAndScaling/ParamInfillTilesize.tsx +++ b/invokeai/frontend/web/src/features/parameters/components/Canvas/InfillAndScaling/ParamInfillTilesize.tsx @@ -3,7 +3,7 @@ import { CompositeSlider, FormControl, FormLabel, -} from '@invoke-ai/ui'; +} from '@invoke-ai/ui-library'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import { setInfillTileSize } from 'features/parameters/store/generationSlice'; import { memo, useCallback } from 'react'; diff --git a/invokeai/frontend/web/src/features/parameters/components/Canvas/InfillAndScaling/ParamScaleBeforeProcessing.tsx b/invokeai/frontend/web/src/features/parameters/components/Canvas/InfillAndScaling/ParamScaleBeforeProcessing.tsx index bf4b9be2ba..998fa407c0 100644 --- a/invokeai/frontend/web/src/features/parameters/components/Canvas/InfillAndScaling/ParamScaleBeforeProcessing.tsx +++ b/invokeai/frontend/web/src/features/parameters/components/Canvas/InfillAndScaling/ParamScaleBeforeProcessing.tsx @@ -1,5 +1,5 @@ -import type { ComboboxOnChange, ComboboxOption } from '@invoke-ai/ui'; -import { Combobox, FormControl, FormLabel } from '@invoke-ai/ui'; +import type { ComboboxOnChange, ComboboxOption } from '@invoke-ai/ui-library'; +import { Combobox, FormControl, FormLabel } from '@invoke-ai/ui-library'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import { InformationalPopover } from 'common/components/InformationalPopover/InformationalPopover'; import { setBoundingBoxScaleMethod } from 'features/canvas/store/canvasSlice'; diff --git a/invokeai/frontend/web/src/features/parameters/components/Canvas/InfillAndScaling/ParamScaledHeight.tsx b/invokeai/frontend/web/src/features/parameters/components/Canvas/InfillAndScaling/ParamScaledHeight.tsx index 7e1d19e68e..b25e23af53 100644 --- a/invokeai/frontend/web/src/features/parameters/components/Canvas/InfillAndScaling/ParamScaledHeight.tsx +++ b/invokeai/frontend/web/src/features/parameters/components/Canvas/InfillAndScaling/ParamScaledHeight.tsx @@ -3,7 +3,7 @@ import { CompositeSlider, FormControl, FormLabel, -} from '@invoke-ai/ui'; +} from '@invoke-ai/ui-library'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import { setScaledBoundingBoxDimensions } from 'features/canvas/store/canvasSlice'; import { selectOptimalDimension } from 'features/parameters/store/generationSlice'; diff --git a/invokeai/frontend/web/src/features/parameters/components/Canvas/InfillAndScaling/ParamScaledWidth.tsx b/invokeai/frontend/web/src/features/parameters/components/Canvas/InfillAndScaling/ParamScaledWidth.tsx index 4c3fec17a0..29de4c4934 100644 --- a/invokeai/frontend/web/src/features/parameters/components/Canvas/InfillAndScaling/ParamScaledWidth.tsx +++ b/invokeai/frontend/web/src/features/parameters/components/Canvas/InfillAndScaling/ParamScaledWidth.tsx @@ -3,7 +3,7 @@ import { CompositeSlider, FormControl, FormLabel, -} from '@invoke-ai/ui'; +} from '@invoke-ai/ui-library'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import { setScaledBoundingBoxDimensions } from 'features/canvas/store/canvasSlice'; import { selectOptimalDimension } from 'features/parameters/store/generationSlice'; diff --git a/invokeai/frontend/web/src/features/parameters/components/Core/ParamCFGScale.tsx b/invokeai/frontend/web/src/features/parameters/components/Core/ParamCFGScale.tsx index 985d5763a5..34fde9ce9d 100644 --- a/invokeai/frontend/web/src/features/parameters/components/Core/ParamCFGScale.tsx +++ b/invokeai/frontend/web/src/features/parameters/components/Core/ParamCFGScale.tsx @@ -3,7 +3,7 @@ import { CompositeSlider, FormControl, FormLabel, -} from '@invoke-ai/ui'; +} from '@invoke-ai/ui-library'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import { InformationalPopover } from 'common/components/InformationalPopover/InformationalPopover'; import { setCfgScale } from 'features/parameters/store/generationSlice'; diff --git a/invokeai/frontend/web/src/features/parameters/components/Core/ParamHeight.tsx b/invokeai/frontend/web/src/features/parameters/components/Core/ParamHeight.tsx index 73e89a3c6f..21300ca90e 100644 --- a/invokeai/frontend/web/src/features/parameters/components/Core/ParamHeight.tsx +++ b/invokeai/frontend/web/src/features/parameters/components/Core/ParamHeight.tsx @@ -3,7 +3,7 @@ import { CompositeSlider, FormControl, FormLabel, -} from '@invoke-ai/ui'; +} from '@invoke-ai/ui-library'; import { useAppSelector } from 'app/store/storeHooks'; import { useImageSizeContext } from 'features/parameters/components/ImageSize/ImageSizeContext'; import { selectOptimalDimension } from 'features/parameters/store/generationSlice'; diff --git a/invokeai/frontend/web/src/features/parameters/components/Core/ParamNegativePrompt.tsx b/invokeai/frontend/web/src/features/parameters/components/Core/ParamNegativePrompt.tsx index bece1338b1..780e6da1cf 100644 --- a/invokeai/frontend/web/src/features/parameters/components/Core/ParamNegativePrompt.tsx +++ b/invokeai/frontend/web/src/features/parameters/components/Core/ParamNegativePrompt.tsx @@ -1,4 +1,4 @@ -import { Box, Textarea } from '@invoke-ai/ui'; +import { Box, Textarea } from '@invoke-ai/ui-library'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import { AddEmbeddingButton } from 'features/embedding/AddEmbeddingButton'; import { EmbeddingPopover } from 'features/embedding/EmbeddingPopover'; diff --git a/invokeai/frontend/web/src/features/parameters/components/Core/ParamPositivePrompt.tsx b/invokeai/frontend/web/src/features/parameters/components/Core/ParamPositivePrompt.tsx index 4ce90d5741..b192dee29a 100644 --- a/invokeai/frontend/web/src/features/parameters/components/Core/ParamPositivePrompt.tsx +++ b/invokeai/frontend/web/src/features/parameters/components/Core/ParamPositivePrompt.tsx @@ -1,4 +1,4 @@ -import { Box, Textarea } from '@invoke-ai/ui'; +import { Box, Textarea } from '@invoke-ai/ui-library'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import { ShowDynamicPromptsPreviewButton } from 'features/dynamicPrompts/components/ShowDynamicPromptsPreviewButton'; import { AddEmbeddingButton } from 'features/embedding/AddEmbeddingButton'; diff --git a/invokeai/frontend/web/src/features/parameters/components/Core/ParamScheduler.tsx b/invokeai/frontend/web/src/features/parameters/components/Core/ParamScheduler.tsx index 08d0ae635f..a0bae81aa3 100644 --- a/invokeai/frontend/web/src/features/parameters/components/Core/ParamScheduler.tsx +++ b/invokeai/frontend/web/src/features/parameters/components/Core/ParamScheduler.tsx @@ -1,5 +1,5 @@ -import type { ComboboxOnChange } from '@invoke-ai/ui'; -import { Combobox, FormControl, FormLabel } from '@invoke-ai/ui'; +import type { ComboboxOnChange } from '@invoke-ai/ui-library'; +import { Combobox, FormControl, FormLabel } from '@invoke-ai/ui-library'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import { InformationalPopover } from 'common/components/InformationalPopover/InformationalPopover'; import { setScheduler } from 'features/parameters/store/generationSlice'; diff --git a/invokeai/frontend/web/src/features/parameters/components/Core/ParamSteps.tsx b/invokeai/frontend/web/src/features/parameters/components/Core/ParamSteps.tsx index 3401f503ea..90f1fb63c4 100644 --- a/invokeai/frontend/web/src/features/parameters/components/Core/ParamSteps.tsx +++ b/invokeai/frontend/web/src/features/parameters/components/Core/ParamSteps.tsx @@ -3,7 +3,7 @@ import { CompositeSlider, FormControl, FormLabel, -} from '@invoke-ai/ui'; +} from '@invoke-ai/ui-library'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import { InformationalPopover } from 'common/components/InformationalPopover/InformationalPopover'; import { setSteps } from 'features/parameters/store/generationSlice'; diff --git a/invokeai/frontend/web/src/features/parameters/components/Core/ParamWidth.tsx b/invokeai/frontend/web/src/features/parameters/components/Core/ParamWidth.tsx index f0f1596981..1ef6d7dd08 100644 --- a/invokeai/frontend/web/src/features/parameters/components/Core/ParamWidth.tsx +++ b/invokeai/frontend/web/src/features/parameters/components/Core/ParamWidth.tsx @@ -3,7 +3,7 @@ import { CompositeSlider, FormControl, FormLabel, -} from '@invoke-ai/ui'; +} from '@invoke-ai/ui-library'; import { useAppSelector } from 'app/store/storeHooks'; import { useImageSizeContext } from 'features/parameters/components/ImageSize/ImageSizeContext'; import { selectOptimalDimension } from 'features/parameters/store/generationSlice'; diff --git a/invokeai/frontend/web/src/features/parameters/components/ImageSize/AspectRatioPreview.tsx b/invokeai/frontend/web/src/features/parameters/components/ImageSize/AspectRatioPreview.tsx index 65baa5223a..68885c9925 100644 --- a/invokeai/frontend/web/src/features/parameters/components/ImageSize/AspectRatioPreview.tsx +++ b/invokeai/frontend/web/src/features/parameters/components/ImageSize/AspectRatioPreview.tsx @@ -1,5 +1,5 @@ import { useSize } from '@chakra-ui/react-use-size'; -import { Flex, Icon } from '@invoke-ai/ui'; +import { Flex, Icon } from '@invoke-ai/ui-library'; import { useImageSizeContext } from 'features/parameters/components/ImageSize/ImageSizeContext'; import { AnimatePresence, motion } from 'framer-motion'; import { useMemo, useRef } from 'react'; diff --git a/invokeai/frontend/web/src/features/parameters/components/ImageSize/AspectRatioSelect.tsx b/invokeai/frontend/web/src/features/parameters/components/ImageSize/AspectRatioSelect.tsx index a5ee9d16c4..cfb26b51b3 100644 --- a/invokeai/frontend/web/src/features/parameters/components/ImageSize/AspectRatioSelect.tsx +++ b/invokeai/frontend/web/src/features/parameters/components/ImageSize/AspectRatioSelect.tsx @@ -1,5 +1,5 @@ -import type { ComboboxOption, SystemStyleObject } from '@invoke-ai/ui'; -import { Combobox, FormControl, FormLabel } from '@invoke-ai/ui'; +import type { ComboboxOption, SystemStyleObject } from '@invoke-ai/ui-library'; +import { Combobox, FormControl, FormLabel } from '@invoke-ai/ui-library'; import type { SingleValue } from 'chakra-react-select'; import { ASPECT_RATIO_OPTIONS } from 'features/parameters/components/ImageSize/constants'; import { useImageSizeContext } from 'features/parameters/components/ImageSize/ImageSizeContext'; diff --git a/invokeai/frontend/web/src/features/parameters/components/ImageSize/ImageSize.tsx b/invokeai/frontend/web/src/features/parameters/components/ImageSize/ImageSize.tsx index a4dab594cc..811578263a 100644 --- a/invokeai/frontend/web/src/features/parameters/components/ImageSize/ImageSize.tsx +++ b/invokeai/frontend/web/src/features/parameters/components/ImageSize/ImageSize.tsx @@ -1,5 +1,5 @@ -import type { FormLabelProps } from '@invoke-ai/ui'; -import { Flex, FormControlGroup } from '@invoke-ai/ui'; +import type { FormLabelProps } from '@invoke-ai/ui-library'; +import { Flex, FormControlGroup } from '@invoke-ai/ui-library'; import { AspectRatioPreview } from 'features/parameters/components/ImageSize/AspectRatioPreview'; import { AspectRatioSelect } from 'features/parameters/components/ImageSize/AspectRatioSelect'; import type { ImageSizeContextInnerValue } from 'features/parameters/components/ImageSize/ImageSizeContext'; diff --git a/invokeai/frontend/web/src/features/parameters/components/ImageSize/LockAspectRatioButton.tsx b/invokeai/frontend/web/src/features/parameters/components/ImageSize/LockAspectRatioButton.tsx index 31519f8f14..d6ec18c64e 100644 --- a/invokeai/frontend/web/src/features/parameters/components/ImageSize/LockAspectRatioButton.tsx +++ b/invokeai/frontend/web/src/features/parameters/components/ImageSize/LockAspectRatioButton.tsx @@ -1,4 +1,4 @@ -import { IconButton } from '@invoke-ai/ui'; +import { IconButton } from '@invoke-ai/ui-library'; import { useImageSizeContext } from 'features/parameters/components/ImageSize/ImageSizeContext'; import { memo, useCallback } from 'react'; import { useTranslation } from 'react-i18next'; diff --git a/invokeai/frontend/web/src/features/parameters/components/ImageSize/SetOptimalSizeButton.tsx b/invokeai/frontend/web/src/features/parameters/components/ImageSize/SetOptimalSizeButton.tsx index 4d58da7047..189978519b 100644 --- a/invokeai/frontend/web/src/features/parameters/components/ImageSize/SetOptimalSizeButton.tsx +++ b/invokeai/frontend/web/src/features/parameters/components/ImageSize/SetOptimalSizeButton.tsx @@ -1,4 +1,4 @@ -import { IconButton } from '@invoke-ai/ui'; +import { IconButton } from '@invoke-ai/ui-library'; import { useAppSelector } from 'app/store/storeHooks'; import { useImageSizeContext } from 'features/parameters/components/ImageSize/ImageSizeContext'; import { selectOptimalDimension } from 'features/parameters/store/generationSlice'; diff --git a/invokeai/frontend/web/src/features/parameters/components/ImageSize/SwapDimensionsButton.tsx b/invokeai/frontend/web/src/features/parameters/components/ImageSize/SwapDimensionsButton.tsx index 1c126aa2ef..80cfc6952c 100644 --- a/invokeai/frontend/web/src/features/parameters/components/ImageSize/SwapDimensionsButton.tsx +++ b/invokeai/frontend/web/src/features/parameters/components/ImageSize/SwapDimensionsButton.tsx @@ -1,4 +1,4 @@ -import { IconButton } from '@invoke-ai/ui'; +import { IconButton } from '@invoke-ai/ui-library'; import { useImageSizeContext } from 'features/parameters/components/ImageSize/ImageSizeContext'; import { memo, useCallback } from 'react'; import { useTranslation } from 'react-i18next'; diff --git a/invokeai/frontend/web/src/features/parameters/components/ImageSize/constants.ts b/invokeai/frontend/web/src/features/parameters/components/ImageSize/constants.ts index 939480554b..3f187100d4 100644 --- a/invokeai/frontend/web/src/features/parameters/components/ImageSize/constants.ts +++ b/invokeai/frontend/web/src/features/parameters/components/ImageSize/constants.ts @@ -1,4 +1,4 @@ -import type { ComboboxOption } from '@invoke-ai/ui'; +import type { ComboboxOption } from '@invoke-ai/ui-library'; import type { AspectRatioID, AspectRatioState } from './types'; diff --git a/invokeai/frontend/web/src/features/parameters/components/ImageToImage/ImageToImageFit.tsx b/invokeai/frontend/web/src/features/parameters/components/ImageToImage/ImageToImageFit.tsx index b0f4f5bae9..72c618941d 100644 --- a/invokeai/frontend/web/src/features/parameters/components/ImageToImage/ImageToImageFit.tsx +++ b/invokeai/frontend/web/src/features/parameters/components/ImageToImage/ImageToImageFit.tsx @@ -1,4 +1,4 @@ -import { FormControl, FormLabel, Switch } from '@invoke-ai/ui'; +import { FormControl, FormLabel, Switch } from '@invoke-ai/ui-library'; import type { RootState } from 'app/store/store'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import { setShouldFitToWidthHeight } from 'features/parameters/store/generationSlice'; diff --git a/invokeai/frontend/web/src/features/parameters/components/ImageToImage/ImageToImageStrength.tsx b/invokeai/frontend/web/src/features/parameters/components/ImageToImage/ImageToImageStrength.tsx index 7f063aa841..b85a0291ee 100644 --- a/invokeai/frontend/web/src/features/parameters/components/ImageToImage/ImageToImageStrength.tsx +++ b/invokeai/frontend/web/src/features/parameters/components/ImageToImage/ImageToImageStrength.tsx @@ -3,7 +3,7 @@ import { CompositeSlider, FormControl, FormLabel, -} from '@invoke-ai/ui'; +} from '@invoke-ai/ui-library'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import { InformationalPopover } from 'common/components/InformationalPopover/InformationalPopover'; import { setImg2imgStrength } from 'features/parameters/store/generationSlice'; diff --git a/invokeai/frontend/web/src/features/parameters/components/ImageToImage/InitialImageDisplay.tsx b/invokeai/frontend/web/src/features/parameters/components/ImageToImage/InitialImageDisplay.tsx index 0d041e483d..879e899d19 100644 --- a/invokeai/frontend/web/src/features/parameters/components/ImageToImage/InitialImageDisplay.tsx +++ b/invokeai/frontend/web/src/features/parameters/components/ImageToImage/InitialImageDisplay.tsx @@ -1,4 +1,4 @@ -import { Flex, IconButton, Spacer, Text } from '@invoke-ai/ui'; +import { Flex, IconButton, Spacer, Text } from '@invoke-ai/ui-library'; import { createMemoizedSelector } from 'app/store/createMemoizedSelector'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import { useImageUploadButton } from 'common/hooks/useImageUploadButton'; diff --git a/invokeai/frontend/web/src/features/parameters/components/MainModel/ParamMainModelSelect.tsx b/invokeai/frontend/web/src/features/parameters/components/MainModel/ParamMainModelSelect.tsx index 950ffa0f6e..0d626db26e 100644 --- a/invokeai/frontend/web/src/features/parameters/components/MainModel/ParamMainModelSelect.tsx +++ b/invokeai/frontend/web/src/features/parameters/components/MainModel/ParamMainModelSelect.tsx @@ -1,4 +1,4 @@ -import { Combobox, FormControl, FormLabel, Tooltip } from '@invoke-ai/ui'; +import { Combobox, FormControl, FormLabel, Tooltip } from '@invoke-ai/ui-library'; import { createMemoizedSelector } from 'app/store/createMemoizedSelector'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import { useGroupedModelCombobox } from 'common/hooks/useGroupedModelCombobox'; diff --git a/invokeai/frontend/web/src/features/parameters/components/Prompts/PromptOverlayButtonWrapper.tsx b/invokeai/frontend/web/src/features/parameters/components/Prompts/PromptOverlayButtonWrapper.tsx index 2ecacf0b19..a45279fd34 100644 --- a/invokeai/frontend/web/src/features/parameters/components/Prompts/PromptOverlayButtonWrapper.tsx +++ b/invokeai/frontend/web/src/features/parameters/components/Prompts/PromptOverlayButtonWrapper.tsx @@ -1,4 +1,4 @@ -import { Flex } from '@invoke-ai/ui'; +import { Flex } from '@invoke-ai/ui-library'; import { memo, type PropsWithChildren } from 'react'; export const PromptOverlayButtonWrapper = memo((props: PropsWithChildren) => ( diff --git a/invokeai/frontend/web/src/features/parameters/components/Prompts/Prompts.tsx b/invokeai/frontend/web/src/features/parameters/components/Prompts/Prompts.tsx index c92705cc27..320c15f7df 100644 --- a/invokeai/frontend/web/src/features/parameters/components/Prompts/Prompts.tsx +++ b/invokeai/frontend/web/src/features/parameters/components/Prompts/Prompts.tsx @@ -1,4 +1,4 @@ -import { Flex } from '@invoke-ai/ui'; +import { Flex } from '@invoke-ai/ui-library'; import { ParamNegativePrompt } from 'features/parameters/components/Core/ParamNegativePrompt'; import { ParamPositivePrompt } from 'features/parameters/components/Core/ParamPositivePrompt'; import { memo } from 'react'; diff --git a/invokeai/frontend/web/src/features/parameters/components/Seamless/ParamSeamlessXAxis.tsx b/invokeai/frontend/web/src/features/parameters/components/Seamless/ParamSeamlessXAxis.tsx index fd2c823fbc..b66293580a 100644 --- a/invokeai/frontend/web/src/features/parameters/components/Seamless/ParamSeamlessXAxis.tsx +++ b/invokeai/frontend/web/src/features/parameters/components/Seamless/ParamSeamlessXAxis.tsx @@ -1,4 +1,4 @@ -import { FormControl, FormLabel, Switch } from '@invoke-ai/ui'; +import { FormControl, FormLabel, Switch } from '@invoke-ai/ui-library'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import { setSeamlessXAxis } from 'features/parameters/store/generationSlice'; import type { ChangeEvent } from 'react'; diff --git a/invokeai/frontend/web/src/features/parameters/components/Seamless/ParamSeamlessYAxis.tsx b/invokeai/frontend/web/src/features/parameters/components/Seamless/ParamSeamlessYAxis.tsx index 679fc546da..e983565476 100644 --- a/invokeai/frontend/web/src/features/parameters/components/Seamless/ParamSeamlessYAxis.tsx +++ b/invokeai/frontend/web/src/features/parameters/components/Seamless/ParamSeamlessYAxis.tsx @@ -1,4 +1,4 @@ -import { FormControl, FormLabel, Switch } from '@invoke-ai/ui'; +import { FormControl, FormLabel, Switch } from '@invoke-ai/ui-library'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import { setSeamlessYAxis } from 'features/parameters/store/generationSlice'; import type { ChangeEvent } from 'react'; diff --git a/invokeai/frontend/web/src/features/parameters/components/Seed/ParamSeedNumberInput.tsx b/invokeai/frontend/web/src/features/parameters/components/Seed/ParamSeedNumberInput.tsx index be6a980927..86cc7b0e54 100644 --- a/invokeai/frontend/web/src/features/parameters/components/Seed/ParamSeedNumberInput.tsx +++ b/invokeai/frontend/web/src/features/parameters/components/Seed/ParamSeedNumberInput.tsx @@ -1,4 +1,4 @@ -import { CompositeNumberInput, FormControl, FormLabel } from '@invoke-ai/ui'; +import { CompositeNumberInput, FormControl, FormLabel } from '@invoke-ai/ui-library'; import { NUMPY_RAND_MAX, NUMPY_RAND_MIN } from 'app/constants'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import { InformationalPopover } from 'common/components/InformationalPopover/InformationalPopover'; diff --git a/invokeai/frontend/web/src/features/parameters/components/Seed/ParamSeedRandomize.tsx b/invokeai/frontend/web/src/features/parameters/components/Seed/ParamSeedRandomize.tsx index 7416707210..29ccafe8fb 100644 --- a/invokeai/frontend/web/src/features/parameters/components/Seed/ParamSeedRandomize.tsx +++ b/invokeai/frontend/web/src/features/parameters/components/Seed/ParamSeedRandomize.tsx @@ -1,4 +1,4 @@ -import { FormControl, FormLabel, Switch } from '@invoke-ai/ui'; +import { FormControl, FormLabel, Switch } from '@invoke-ai/ui-library'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import { setShouldRandomizeSeed } from 'features/parameters/store/generationSlice'; import type { ChangeEvent } from 'react'; diff --git a/invokeai/frontend/web/src/features/parameters/components/Seed/ParamSeedShuffle.tsx b/invokeai/frontend/web/src/features/parameters/components/Seed/ParamSeedShuffle.tsx index 3a3a60fe02..71162c60ed 100644 --- a/invokeai/frontend/web/src/features/parameters/components/Seed/ParamSeedShuffle.tsx +++ b/invokeai/frontend/web/src/features/parameters/components/Seed/ParamSeedShuffle.tsx @@ -1,4 +1,4 @@ -import { Button } from '@invoke-ai/ui'; +import { Button } from '@invoke-ai/ui-library'; import { NUMPY_RAND_MAX, NUMPY_RAND_MIN } from 'app/constants'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import randomInt from 'common/util/randomInt'; diff --git a/invokeai/frontend/web/src/features/parameters/components/Upscale/ParamRealESRGANModel.tsx b/invokeai/frontend/web/src/features/parameters/components/Upscale/ParamRealESRGANModel.tsx index 8e5141be82..813ee11c76 100644 --- a/invokeai/frontend/web/src/features/parameters/components/Upscale/ParamRealESRGANModel.tsx +++ b/invokeai/frontend/web/src/features/parameters/components/Upscale/ParamRealESRGANModel.tsx @@ -1,5 +1,5 @@ -import type { ComboboxOnChange, ComboboxOption } from '@invoke-ai/ui'; -import { Combobox, FormControl, FormLabel } from '@invoke-ai/ui'; +import type { ComboboxOnChange, ComboboxOption } from '@invoke-ai/ui-library'; +import { Combobox, FormControl, FormLabel } from '@invoke-ai/ui-library'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import type { GroupBase } from 'chakra-react-select'; import { diff --git a/invokeai/frontend/web/src/features/parameters/components/Upscale/ParamUpscaleSettings.tsx b/invokeai/frontend/web/src/features/parameters/components/Upscale/ParamUpscaleSettings.tsx index d35d8cab14..c0309bebe4 100644 --- a/invokeai/frontend/web/src/features/parameters/components/Upscale/ParamUpscaleSettings.tsx +++ b/invokeai/frontend/web/src/features/parameters/components/Upscale/ParamUpscaleSettings.tsx @@ -7,7 +7,7 @@ import { PopoverContent, PopoverTrigger, useDisclosure, -} from '@invoke-ai/ui'; +} from '@invoke-ai/ui-library'; import { upscaleRequested } from 'app/store/middleware/listenerMiddleware/listeners/upscaleRequested'; import { useAppDispatch } from 'app/store/storeHooks'; import { useIsAllowedToUpscale } from 'features/parameters/hooks/useIsAllowedToUpscale'; diff --git a/invokeai/frontend/web/src/features/parameters/components/VAEModel/ParamVAEModelSelect.tsx b/invokeai/frontend/web/src/features/parameters/components/VAEModel/ParamVAEModelSelect.tsx index d0072442e7..2be948a9cb 100644 --- a/invokeai/frontend/web/src/features/parameters/components/VAEModel/ParamVAEModelSelect.tsx +++ b/invokeai/frontend/web/src/features/parameters/components/VAEModel/ParamVAEModelSelect.tsx @@ -1,4 +1,4 @@ -import { Combobox, FormControl, FormLabel } from '@invoke-ai/ui'; +import { Combobox, FormControl, FormLabel } from '@invoke-ai/ui-library'; import { createMemoizedSelector } from 'app/store/createMemoizedSelector'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import { InformationalPopover } from 'common/components/InformationalPopover/InformationalPopover'; diff --git a/invokeai/frontend/web/src/features/parameters/components/VAEModel/ParamVAEPrecision.tsx b/invokeai/frontend/web/src/features/parameters/components/VAEModel/ParamVAEPrecision.tsx index 14b4700dea..18a627367f 100644 --- a/invokeai/frontend/web/src/features/parameters/components/VAEModel/ParamVAEPrecision.tsx +++ b/invokeai/frontend/web/src/features/parameters/components/VAEModel/ParamVAEPrecision.tsx @@ -1,5 +1,5 @@ -import type { ComboboxOnChange } from '@invoke-ai/ui'; -import { Combobox, FormControl, FormLabel } from '@invoke-ai/ui'; +import type { ComboboxOnChange } from '@invoke-ai/ui-library'; +import { Combobox, FormControl, FormLabel } from '@invoke-ai/ui-library'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import { InformationalPopover } from 'common/components/InformationalPopover/InformationalPopover'; import { vaePrecisionChanged } from 'features/parameters/store/generationSlice'; diff --git a/invokeai/frontend/web/src/features/parameters/types/constants.ts b/invokeai/frontend/web/src/features/parameters/types/constants.ts index d1cc9fd68a..a74807a959 100644 --- a/invokeai/frontend/web/src/features/parameters/types/constants.ts +++ b/invokeai/frontend/web/src/features/parameters/types/constants.ts @@ -1,4 +1,4 @@ -import type { ComboboxOption } from '@invoke-ai/ui'; +import type { ComboboxOption } from '@invoke-ai/ui-library'; import type { LoRAModelFormat } from 'services/api/types'; /** diff --git a/invokeai/frontend/web/src/features/queue/components/CancelCurrentQueueItemIconButton.tsx b/invokeai/frontend/web/src/features/queue/components/CancelCurrentQueueItemIconButton.tsx index 2195e5064d..a763ad23d3 100644 --- a/invokeai/frontend/web/src/features/queue/components/CancelCurrentQueueItemIconButton.tsx +++ b/invokeai/frontend/web/src/features/queue/components/CancelCurrentQueueItemIconButton.tsx @@ -1,5 +1,5 @@ -import type { ChakraProps } from '@invoke-ai/ui'; -import { IconButton } from '@invoke-ai/ui'; +import type { ChakraProps } from '@invoke-ai/ui-library'; +import { IconButton } from '@invoke-ai/ui-library'; import { useCancelCurrentQueueItem } from 'features/queue/hooks/useCancelCurrentQueueItem'; import { memo } from 'react'; import { useTranslation } from 'react-i18next'; diff --git a/invokeai/frontend/web/src/features/queue/components/ClearInvocationCacheButton.tsx b/invokeai/frontend/web/src/features/queue/components/ClearInvocationCacheButton.tsx index cba6115e2f..c13298da46 100644 --- a/invokeai/frontend/web/src/features/queue/components/ClearInvocationCacheButton.tsx +++ b/invokeai/frontend/web/src/features/queue/components/ClearInvocationCacheButton.tsx @@ -1,4 +1,4 @@ -import { Button } from '@invoke-ai/ui'; +import { Button } from '@invoke-ai/ui-library'; import { useClearInvocationCache } from 'features/queue/hooks/useClearInvocationCache'; import { memo } from 'react'; import { useTranslation } from 'react-i18next'; diff --git a/invokeai/frontend/web/src/features/queue/components/ClearQueueButton.tsx b/invokeai/frontend/web/src/features/queue/components/ClearQueueButton.tsx index 118314d667..c899dd0482 100644 --- a/invokeai/frontend/web/src/features/queue/components/ClearQueueButton.tsx +++ b/invokeai/frontend/web/src/features/queue/components/ClearQueueButton.tsx @@ -1,5 +1,5 @@ -import type { ButtonProps } from '@invoke-ai/ui'; -import { Button, useDisclosure } from '@invoke-ai/ui'; +import type { ButtonProps } from '@invoke-ai/ui-library'; +import { Button, useDisclosure } from '@invoke-ai/ui-library'; import ClearQueueConfirmationAlertDialog from 'features/queue/components/ClearQueueConfirmationAlertDialog'; import { useClearQueue } from 'features/queue/hooks/useClearQueue'; import { memo } from 'react'; diff --git a/invokeai/frontend/web/src/features/queue/components/ClearQueueConfirmationAlertDialog.tsx b/invokeai/frontend/web/src/features/queue/components/ClearQueueConfirmationAlertDialog.tsx index 98d94c643b..291419d024 100644 --- a/invokeai/frontend/web/src/features/queue/components/ClearQueueConfirmationAlertDialog.tsx +++ b/invokeai/frontend/web/src/features/queue/components/ClearQueueConfirmationAlertDialog.tsx @@ -1,5 +1,5 @@ -import type { UseDisclosureReturn } from '@invoke-ai/ui'; -import { ConfirmationAlertDialog, Text } from '@invoke-ai/ui'; +import type { UseDisclosureReturn } from '@invoke-ai/ui-library'; +import { ConfirmationAlertDialog, Text } from '@invoke-ai/ui-library'; import { useClearQueue } from 'features/queue/hooks/useClearQueue'; import { memo } from 'react'; import { useTranslation } from 'react-i18next'; diff --git a/invokeai/frontend/web/src/features/queue/components/ClearQueueIconButton.tsx b/invokeai/frontend/web/src/features/queue/components/ClearQueueIconButton.tsx index cb7061e92d..8400fab7fd 100644 --- a/invokeai/frontend/web/src/features/queue/components/ClearQueueIconButton.tsx +++ b/invokeai/frontend/web/src/features/queue/components/ClearQueueIconButton.tsx @@ -1,5 +1,5 @@ -import type { IconButtonProps } from '@invoke-ai/ui'; -import { IconButton, useDisclosure, useShiftModifier } from '@invoke-ai/ui'; +import type { IconButtonProps } from '@invoke-ai/ui-library'; +import { IconButton, useDisclosure, useShiftModifier } from '@invoke-ai/ui-library'; import ClearQueueConfirmationAlertDialog from 'features/queue/components/ClearQueueConfirmationAlertDialog'; import { useCancelCurrentQueueItem } from 'features/queue/hooks/useCancelCurrentQueueItem'; import { useClearQueue } from 'features/queue/hooks/useClearQueue'; diff --git a/invokeai/frontend/web/src/features/queue/components/InvocationCacheStatus.tsx b/invokeai/frontend/web/src/features/queue/components/InvocationCacheStatus.tsx index 0a5e1b3c30..9ce334c996 100644 --- a/invokeai/frontend/web/src/features/queue/components/InvocationCacheStatus.tsx +++ b/invokeai/frontend/web/src/features/queue/components/InvocationCacheStatus.tsx @@ -1,4 +1,4 @@ -import { ButtonGroup } from '@invoke-ai/ui'; +import { ButtonGroup } from '@invoke-ai/ui-library'; import { memo } from 'react'; import { useTranslation } from 'react-i18next'; import { useGetInvocationCacheStatusQuery } from 'services/api/endpoints/appInfo'; diff --git a/invokeai/frontend/web/src/features/queue/components/InvokeQueueBackButton.tsx b/invokeai/frontend/web/src/features/queue/components/InvokeQueueBackButton.tsx index 13ed3086d2..7819fdbee6 100644 --- a/invokeai/frontend/web/src/features/queue/components/InvokeQueueBackButton.tsx +++ b/invokeai/frontend/web/src/features/queue/components/InvokeQueueBackButton.tsx @@ -1,4 +1,4 @@ -import { Button, Flex, Spacer } from '@invoke-ai/ui'; +import { Button, Flex, Spacer } from '@invoke-ai/ui-library'; import { useAppSelector } from 'app/store/storeHooks'; import { QueueIterationsNumberInput } from 'features/queue/components/QueueIterationsNumberInput'; import { useQueueBack } from 'features/queue/hooks/useQueueBack'; diff --git a/invokeai/frontend/web/src/features/queue/components/QueueActionsMenuButton.tsx b/invokeai/frontend/web/src/features/queue/components/QueueActionsMenuButton.tsx index 2c1f808095..421a070b2f 100644 --- a/invokeai/frontend/web/src/features/queue/components/QueueActionsMenuButton.tsx +++ b/invokeai/frontend/web/src/features/queue/components/QueueActionsMenuButton.tsx @@ -8,7 +8,7 @@ import { MenuItem, MenuList, useDisclosure, -} from '@invoke-ai/ui'; +} from '@invoke-ai/ui-library'; import { useAppDispatch } from 'app/store/storeHooks'; import ClearQueueConfirmationAlertDialog from 'features/queue/components/ClearQueueConfirmationAlertDialog'; import { useClearQueue } from 'features/queue/hooks/useClearQueue'; diff --git a/invokeai/frontend/web/src/features/queue/components/QueueButtonTooltip.tsx b/invokeai/frontend/web/src/features/queue/components/QueueButtonTooltip.tsx index 6370e6ae6a..24baed9e3d 100644 --- a/invokeai/frontend/web/src/features/queue/components/QueueButtonTooltip.tsx +++ b/invokeai/frontend/web/src/features/queue/components/QueueButtonTooltip.tsx @@ -1,4 +1,4 @@ -import { Divider, Flex, ListItem, Text, UnorderedList } from '@invoke-ai/ui'; +import { Divider, Flex, ListItem, Text, UnorderedList } from '@invoke-ai/ui-library'; import { createSelector } from '@reduxjs/toolkit'; import { useAppSelector } from 'app/store/storeHooks'; import { useIsReadyToEnqueue } from 'common/hooks/useIsReadyToEnqueue'; diff --git a/invokeai/frontend/web/src/features/queue/components/QueueControls.tsx b/invokeai/frontend/web/src/features/queue/components/QueueControls.tsx index 15b7191717..13946b87c1 100644 --- a/invokeai/frontend/web/src/features/queue/components/QueueControls.tsx +++ b/invokeai/frontend/web/src/features/queue/components/QueueControls.tsx @@ -1,4 +1,4 @@ -import { ButtonGroup, Flex, Spacer } from '@invoke-ai/ui'; +import { ButtonGroup, Flex, Spacer } from '@invoke-ai/ui-library'; import ClearQueueIconButton from 'features/queue/components/ClearQueueIconButton'; import QueueFrontButton from 'features/queue/components/QueueFrontButton'; import ProgressBar from 'features/system/components/ProgressBar'; diff --git a/invokeai/frontend/web/src/features/queue/components/QueueFrontButton.tsx b/invokeai/frontend/web/src/features/queue/components/QueueFrontButton.tsx index ac091dbd0d..07ad0f5b3c 100644 --- a/invokeai/frontend/web/src/features/queue/components/QueueFrontButton.tsx +++ b/invokeai/frontend/web/src/features/queue/components/QueueFrontButton.tsx @@ -1,4 +1,4 @@ -import { IconButton } from '@invoke-ai/ui'; +import { IconButton } from '@invoke-ai/ui-library'; import { useQueueFront } from 'features/queue/hooks/useQueueFront'; import { memo } from 'react'; import { useTranslation } from 'react-i18next'; diff --git a/invokeai/frontend/web/src/features/queue/components/QueueIterationsNumberInput.tsx b/invokeai/frontend/web/src/features/queue/components/QueueIterationsNumberInput.tsx index 10707da730..977a9f8989 100644 --- a/invokeai/frontend/web/src/features/queue/components/QueueIterationsNumberInput.tsx +++ b/invokeai/frontend/web/src/features/queue/components/QueueIterationsNumberInput.tsx @@ -1,4 +1,4 @@ -import { CompositeNumberInput } from '@invoke-ai/ui'; +import { CompositeNumberInput } from '@invoke-ai/ui-library'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import { InformationalPopover } from 'common/components/InformationalPopover/InformationalPopover'; import { setIterations } from 'features/parameters/store/generationSlice'; diff --git a/invokeai/frontend/web/src/features/queue/components/QueueList/QueueItemComponent.tsx b/invokeai/frontend/web/src/features/queue/components/QueueList/QueueItemComponent.tsx index 9419c696f3..250bbbafb6 100644 --- a/invokeai/frontend/web/src/features/queue/components/QueueList/QueueItemComponent.tsx +++ b/invokeai/frontend/web/src/features/queue/components/QueueList/QueueItemComponent.tsx @@ -1,5 +1,5 @@ -import type { ChakraProps, CollapseProps } from '@invoke-ai/ui'; -import { ButtonGroup, Collapse, Flex, IconButton, Text } from '@invoke-ai/ui'; +import type { ChakraProps, CollapseProps } from '@invoke-ai/ui-library'; +import { ButtonGroup, Collapse, Flex, IconButton, Text } from '@invoke-ai/ui-library'; import QueueStatusBadge from 'features/queue/components/common/QueueStatusBadge'; import { useCancelQueueItem } from 'features/queue/hooks/useCancelQueueItem'; import { getSecondsFromTimestamps } from 'features/queue/util/getSecondsFromTimestamps'; diff --git a/invokeai/frontend/web/src/features/queue/components/QueueList/QueueItemDetail.tsx b/invokeai/frontend/web/src/features/queue/components/QueueList/QueueItemDetail.tsx index 2401962e98..98794d3c8d 100644 --- a/invokeai/frontend/web/src/features/queue/components/QueueList/QueueItemDetail.tsx +++ b/invokeai/frontend/web/src/features/queue/components/QueueList/QueueItemDetail.tsx @@ -5,7 +5,7 @@ import { Heading, Spinner, Text, -} from '@invoke-ai/ui'; +} from '@invoke-ai/ui-library'; import DataViewer from 'features/gallery/components/ImageMetadataViewer/DataViewer'; import { useCancelBatch } from 'features/queue/hooks/useCancelBatch'; import { useCancelQueueItem } from 'features/queue/hooks/useCancelQueueItem'; diff --git a/invokeai/frontend/web/src/features/queue/components/QueueList/QueueList.tsx b/invokeai/frontend/web/src/features/queue/components/QueueList/QueueList.tsx index 3e2316478c..fa5b61cb5a 100644 --- a/invokeai/frontend/web/src/features/queue/components/QueueList/QueueList.tsx +++ b/invokeai/frontend/web/src/features/queue/components/QueueList/QueueList.tsx @@ -1,4 +1,4 @@ -import { Flex, Heading } from '@invoke-ai/ui'; +import { Flex, Heading } from '@invoke-ai/ui-library'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import { IAINoContentFallbackWithSpinner } from 'common/components/IAIImageFallback'; import { overlayScrollbarsParams } from 'common/components/OverlayScrollbars/constants'; diff --git a/invokeai/frontend/web/src/features/queue/components/QueueList/QueueListComponent.tsx b/invokeai/frontend/web/src/features/queue/components/QueueList/QueueListComponent.tsx index a2ad566838..c76caeca12 100644 --- a/invokeai/frontend/web/src/features/queue/components/QueueList/QueueListComponent.tsx +++ b/invokeai/frontend/web/src/features/queue/components/QueueList/QueueListComponent.tsx @@ -1,4 +1,4 @@ -import { Flex, forwardRef } from '@invoke-ai/ui'; +import { Flex, forwardRef } from '@invoke-ai/ui-library'; import { memo } from 'react'; import type { Components } from 'react-virtuoso'; import type { SessionQueueItemDTO } from 'services/api/types'; diff --git a/invokeai/frontend/web/src/features/queue/components/QueueList/QueueListHeader.tsx b/invokeai/frontend/web/src/features/queue/components/QueueList/QueueListHeader.tsx index 0287bbba4e..d025dafde9 100644 --- a/invokeai/frontend/web/src/features/queue/components/QueueList/QueueListHeader.tsx +++ b/invokeai/frontend/web/src/features/queue/components/QueueList/QueueListHeader.tsx @@ -1,4 +1,4 @@ -import { Flex, Text } from '@invoke-ai/ui'; +import { Flex, Text } from '@invoke-ai/ui-library'; import { memo } from 'react'; import { useTranslation } from 'react-i18next'; diff --git a/invokeai/frontend/web/src/features/queue/components/QueueTabContent.tsx b/invokeai/frontend/web/src/features/queue/components/QueueTabContent.tsx index f0f4f6fd81..7f4f9b95b7 100644 --- a/invokeai/frontend/web/src/features/queue/components/QueueTabContent.tsx +++ b/invokeai/frontend/web/src/features/queue/components/QueueTabContent.tsx @@ -1,4 +1,4 @@ -import { Box, Flex } from '@invoke-ai/ui'; +import { Box, Flex } from '@invoke-ai/ui-library'; import { useFeatureStatus } from 'features/system/hooks/useFeatureStatus'; import { memo } from 'react'; diff --git a/invokeai/frontend/web/src/features/queue/components/QueueTabQueueControls.tsx b/invokeai/frontend/web/src/features/queue/components/QueueTabQueueControls.tsx index 64e539682d..b42fc04e4d 100644 --- a/invokeai/frontend/web/src/features/queue/components/QueueTabQueueControls.tsx +++ b/invokeai/frontend/web/src/features/queue/components/QueueTabQueueControls.tsx @@ -1,4 +1,4 @@ -import { ButtonGroup, Flex } from '@invoke-ai/ui'; +import { ButtonGroup, Flex } from '@invoke-ai/ui-library'; import { useFeatureStatus } from 'features/system/hooks/useFeatureStatus'; import { memo } from 'react'; diff --git a/invokeai/frontend/web/src/features/queue/components/ToggleInvocationCacheButton.tsx b/invokeai/frontend/web/src/features/queue/components/ToggleInvocationCacheButton.tsx index 6174ad96fd..f25696257f 100644 --- a/invokeai/frontend/web/src/features/queue/components/ToggleInvocationCacheButton.tsx +++ b/invokeai/frontend/web/src/features/queue/components/ToggleInvocationCacheButton.tsx @@ -1,4 +1,4 @@ -import { Button } from '@invoke-ai/ui'; +import { Button } from '@invoke-ai/ui-library'; import { useDisableInvocationCache } from 'features/queue/hooks/useDisableInvocationCache'; import { useEnableInvocationCache } from 'features/queue/hooks/useEnableInvocationCache'; import { memo } from 'react'; diff --git a/invokeai/frontend/web/src/features/queue/components/common/QueueButton.tsx b/invokeai/frontend/web/src/features/queue/components/common/QueueButton.tsx index 72307589d5..786708faf1 100644 --- a/invokeai/frontend/web/src/features/queue/components/common/QueueButton.tsx +++ b/invokeai/frontend/web/src/features/queue/components/common/QueueButton.tsx @@ -1,5 +1,5 @@ -import type { ChakraProps, ThemeTypings } from '@invoke-ai/ui'; -import { Button, IconButton } from '@invoke-ai/ui'; +import type { ChakraProps, ThemeTypings } from '@invoke-ai/ui-library'; +import { Button, IconButton } from '@invoke-ai/ui-library'; import type { ReactElement, ReactNode } from 'react'; import { memo } from 'react'; diff --git a/invokeai/frontend/web/src/features/queue/components/common/QueueStatusBadge.tsx b/invokeai/frontend/web/src/features/queue/components/common/QueueStatusBadge.tsx index ed15edb424..9bea1b4581 100644 --- a/invokeai/frontend/web/src/features/queue/components/common/QueueStatusBadge.tsx +++ b/invokeai/frontend/web/src/features/queue/components/common/QueueStatusBadge.tsx @@ -1,4 +1,4 @@ -import { Badge } from '@invoke-ai/ui'; +import { Badge } from '@invoke-ai/ui-library'; import { memo } from 'react'; import { useTranslation } from 'react-i18next'; import type { SessionQueueItemStatus } from 'services/api/endpoints/queue'; diff --git a/invokeai/frontend/web/src/features/queue/components/common/StatusStatGroup.tsx b/invokeai/frontend/web/src/features/queue/components/common/StatusStatGroup.tsx index 13a9565b49..1a1e8054e8 100644 --- a/invokeai/frontend/web/src/features/queue/components/common/StatusStatGroup.tsx +++ b/invokeai/frontend/web/src/features/queue/components/common/StatusStatGroup.tsx @@ -1,5 +1,5 @@ -import type { StatGroupProps } from '@invoke-ai/ui'; -import { StatGroup } from '@invoke-ai/ui'; +import type { StatGroupProps } from '@invoke-ai/ui-library'; +import { StatGroup } from '@invoke-ai/ui-library'; import { memo } from 'react'; const StatusStatGroup = ({ children, ...rest }: StatGroupProps) => ( diff --git a/invokeai/frontend/web/src/features/queue/components/common/StatusStatItem.tsx b/invokeai/frontend/web/src/features/queue/components/common/StatusStatItem.tsx index c5f7e3d8fa..90413640c1 100644 --- a/invokeai/frontend/web/src/features/queue/components/common/StatusStatItem.tsx +++ b/invokeai/frontend/web/src/features/queue/components/common/StatusStatItem.tsx @@ -1,5 +1,5 @@ -import type { ChakraProps, StatProps } from '@invoke-ai/ui'; -import { Stat, StatLabel, StatNumber } from '@invoke-ai/ui'; +import type { ChakraProps, StatProps } from '@invoke-ai/ui-library'; +import { Stat, StatLabel, StatNumber } from '@invoke-ai/ui-library'; import { memo } from 'react'; const sx: ChakraProps['sx'] = { diff --git a/invokeai/frontend/web/src/features/sdxl/components/SDXLPrompts/ParamSDXLNegativeStylePrompt.tsx b/invokeai/frontend/web/src/features/sdxl/components/SDXLPrompts/ParamSDXLNegativeStylePrompt.tsx index 87570f77fa..dca1f2b48d 100644 --- a/invokeai/frontend/web/src/features/sdxl/components/SDXLPrompts/ParamSDXLNegativeStylePrompt.tsx +++ b/invokeai/frontend/web/src/features/sdxl/components/SDXLPrompts/ParamSDXLNegativeStylePrompt.tsx @@ -1,4 +1,4 @@ -import { Box, Textarea } from '@invoke-ai/ui'; +import { Box, Textarea } from '@invoke-ai/ui-library'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import { AddEmbeddingButton } from 'features/embedding/AddEmbeddingButton'; import { EmbeddingPopover } from 'features/embedding/EmbeddingPopover'; diff --git a/invokeai/frontend/web/src/features/sdxl/components/SDXLPrompts/ParamSDXLPositiveStylePrompt.tsx b/invokeai/frontend/web/src/features/sdxl/components/SDXLPrompts/ParamSDXLPositiveStylePrompt.tsx index 6e4ec72eec..183a9da038 100644 --- a/invokeai/frontend/web/src/features/sdxl/components/SDXLPrompts/ParamSDXLPositiveStylePrompt.tsx +++ b/invokeai/frontend/web/src/features/sdxl/components/SDXLPrompts/ParamSDXLPositiveStylePrompt.tsx @@ -1,4 +1,4 @@ -import { Box, Textarea } from '@invoke-ai/ui'; +import { Box, Textarea } from '@invoke-ai/ui-library'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import { AddEmbeddingButton } from 'features/embedding/AddEmbeddingButton'; import { EmbeddingPopover } from 'features/embedding/EmbeddingPopover'; diff --git a/invokeai/frontend/web/src/features/sdxl/components/SDXLPrompts/SDXLConcatButton.tsx b/invokeai/frontend/web/src/features/sdxl/components/SDXLPrompts/SDXLConcatButton.tsx index fb5d0b83bb..fa7e7e723b 100644 --- a/invokeai/frontend/web/src/features/sdxl/components/SDXLPrompts/SDXLConcatButton.tsx +++ b/invokeai/frontend/web/src/features/sdxl/components/SDXLPrompts/SDXLConcatButton.tsx @@ -1,4 +1,4 @@ -import { IconButton, Tooltip } from '@invoke-ai/ui'; +import { IconButton, Tooltip } from '@invoke-ai/ui-library'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import { setShouldConcatSDXLStylePrompt } from 'features/sdxl/store/sdxlSlice'; import { memo, useCallback, useMemo } from 'react'; diff --git a/invokeai/frontend/web/src/features/sdxl/components/SDXLPrompts/SDXLPrompts.tsx b/invokeai/frontend/web/src/features/sdxl/components/SDXLPrompts/SDXLPrompts.tsx index a2257366b9..f8274d2b0f 100644 --- a/invokeai/frontend/web/src/features/sdxl/components/SDXLPrompts/SDXLPrompts.tsx +++ b/invokeai/frontend/web/src/features/sdxl/components/SDXLPrompts/SDXLPrompts.tsx @@ -1,4 +1,4 @@ -import { Flex } from '@invoke-ai/ui'; +import { Flex } from '@invoke-ai/ui-library'; import { useAppSelector } from 'app/store/storeHooks'; import { ParamNegativePrompt } from 'features/parameters/components/Core/ParamNegativePrompt'; import { ParamPositivePrompt } from 'features/parameters/components/Core/ParamPositivePrompt'; diff --git a/invokeai/frontend/web/src/features/sdxl/components/SDXLRefiner/ParamSDXLRefinerCFGScale.tsx b/invokeai/frontend/web/src/features/sdxl/components/SDXLRefiner/ParamSDXLRefinerCFGScale.tsx index db64c4ccd2..643bf51f8e 100644 --- a/invokeai/frontend/web/src/features/sdxl/components/SDXLRefiner/ParamSDXLRefinerCFGScale.tsx +++ b/invokeai/frontend/web/src/features/sdxl/components/SDXLRefiner/ParamSDXLRefinerCFGScale.tsx @@ -3,7 +3,7 @@ import { CompositeSlider, FormControl, FormLabel, -} from '@invoke-ai/ui'; +} from '@invoke-ai/ui-library'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import { setRefinerCFGScale } from 'features/sdxl/store/sdxlSlice'; import { memo, useCallback, useMemo } from 'react'; diff --git a/invokeai/frontend/web/src/features/sdxl/components/SDXLRefiner/ParamSDXLRefinerModelSelect.tsx b/invokeai/frontend/web/src/features/sdxl/components/SDXLRefiner/ParamSDXLRefinerModelSelect.tsx index 9b423676df..691fdf57a5 100644 --- a/invokeai/frontend/web/src/features/sdxl/components/SDXLRefiner/ParamSDXLRefinerModelSelect.tsx +++ b/invokeai/frontend/web/src/features/sdxl/components/SDXLRefiner/ParamSDXLRefinerModelSelect.tsx @@ -1,4 +1,4 @@ -import { Combobox, FormControl, FormLabel } from '@invoke-ai/ui'; +import { Combobox, FormControl, FormLabel } from '@invoke-ai/ui-library'; import { createMemoizedSelector } from 'app/store/createMemoizedSelector'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import { useModelCombobox } from 'common/hooks/useModelCombobox'; diff --git a/invokeai/frontend/web/src/features/sdxl/components/SDXLRefiner/ParamSDXLRefinerNegativeAestheticScore.tsx b/invokeai/frontend/web/src/features/sdxl/components/SDXLRefiner/ParamSDXLRefinerNegativeAestheticScore.tsx index 104ad3bec3..5379553217 100644 --- a/invokeai/frontend/web/src/features/sdxl/components/SDXLRefiner/ParamSDXLRefinerNegativeAestheticScore.tsx +++ b/invokeai/frontend/web/src/features/sdxl/components/SDXLRefiner/ParamSDXLRefinerNegativeAestheticScore.tsx @@ -3,7 +3,7 @@ import { CompositeSlider, FormControl, FormLabel, -} from '@invoke-ai/ui'; +} from '@invoke-ai/ui-library'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import { setRefinerNegativeAestheticScore } from 'features/sdxl/store/sdxlSlice'; import { memo, useCallback } from 'react'; diff --git a/invokeai/frontend/web/src/features/sdxl/components/SDXLRefiner/ParamSDXLRefinerPositiveAestheticScore.tsx b/invokeai/frontend/web/src/features/sdxl/components/SDXLRefiner/ParamSDXLRefinerPositiveAestheticScore.tsx index 12477064b1..a65af5f75d 100644 --- a/invokeai/frontend/web/src/features/sdxl/components/SDXLRefiner/ParamSDXLRefinerPositiveAestheticScore.tsx +++ b/invokeai/frontend/web/src/features/sdxl/components/SDXLRefiner/ParamSDXLRefinerPositiveAestheticScore.tsx @@ -3,7 +3,7 @@ import { CompositeSlider, FormControl, FormLabel, -} from '@invoke-ai/ui'; +} from '@invoke-ai/ui-library'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import { setRefinerPositiveAestheticScore } from 'features/sdxl/store/sdxlSlice'; import { memo, useCallback } from 'react'; diff --git a/invokeai/frontend/web/src/features/sdxl/components/SDXLRefiner/ParamSDXLRefinerScheduler.tsx b/invokeai/frontend/web/src/features/sdxl/components/SDXLRefiner/ParamSDXLRefinerScheduler.tsx index b0faabaf6a..c033880e63 100644 --- a/invokeai/frontend/web/src/features/sdxl/components/SDXLRefiner/ParamSDXLRefinerScheduler.tsx +++ b/invokeai/frontend/web/src/features/sdxl/components/SDXLRefiner/ParamSDXLRefinerScheduler.tsx @@ -1,5 +1,5 @@ -import type { ComboboxOnChange } from '@invoke-ai/ui'; -import { Combobox, FormControl, FormLabel } from '@invoke-ai/ui'; +import type { ComboboxOnChange } from '@invoke-ai/ui-library'; +import { Combobox, FormControl, FormLabel } from '@invoke-ai/ui-library'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import { SCHEDULER_OPTIONS } from 'features/parameters/types/constants'; import { isParameterScheduler } from 'features/parameters/types/parameterSchemas'; diff --git a/invokeai/frontend/web/src/features/sdxl/components/SDXLRefiner/ParamSDXLRefinerStart.tsx b/invokeai/frontend/web/src/features/sdxl/components/SDXLRefiner/ParamSDXLRefinerStart.tsx index e21c129860..efb2948e8c 100644 --- a/invokeai/frontend/web/src/features/sdxl/components/SDXLRefiner/ParamSDXLRefinerStart.tsx +++ b/invokeai/frontend/web/src/features/sdxl/components/SDXLRefiner/ParamSDXLRefinerStart.tsx @@ -3,7 +3,7 @@ import { CompositeSlider, FormControl, FormLabel, -} from '@invoke-ai/ui'; +} from '@invoke-ai/ui-library'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import { setRefinerStart } from 'features/sdxl/store/sdxlSlice'; import { memo, useCallback } from 'react'; diff --git a/invokeai/frontend/web/src/features/sdxl/components/SDXLRefiner/ParamSDXLRefinerSteps.tsx b/invokeai/frontend/web/src/features/sdxl/components/SDXLRefiner/ParamSDXLRefinerSteps.tsx index cec24f41a8..5fcb79ea39 100644 --- a/invokeai/frontend/web/src/features/sdxl/components/SDXLRefiner/ParamSDXLRefinerSteps.tsx +++ b/invokeai/frontend/web/src/features/sdxl/components/SDXLRefiner/ParamSDXLRefinerSteps.tsx @@ -3,7 +3,7 @@ import { CompositeSlider, FormControl, FormLabel, -} from '@invoke-ai/ui'; +} from '@invoke-ai/ui-library'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import { setRefinerSteps } from 'features/sdxl/store/sdxlSlice'; import { memo, useCallback, useMemo } from 'react'; diff --git a/invokeai/frontend/web/src/features/settingsAccordions/components/AdvancedSettingsAccordion/AdvancedSettingsAccordion.tsx b/invokeai/frontend/web/src/features/settingsAccordions/components/AdvancedSettingsAccordion/AdvancedSettingsAccordion.tsx index 311b3907a6..229296b7ae 100644 --- a/invokeai/frontend/web/src/features/settingsAccordions/components/AdvancedSettingsAccordion/AdvancedSettingsAccordion.tsx +++ b/invokeai/frontend/web/src/features/settingsAccordions/components/AdvancedSettingsAccordion/AdvancedSettingsAccordion.tsx @@ -1,5 +1,5 @@ -import type { FormLabelProps } from '@invoke-ai/ui'; -import { Flex, FormControlGroup, StandaloneAccordion } from '@invoke-ai/ui'; +import type { FormLabelProps } from '@invoke-ai/ui-library'; +import { Flex, FormControlGroup, StandaloneAccordion } from '@invoke-ai/ui-library'; import { createMemoizedSelector } from 'app/store/createMemoizedSelector'; import { useAppSelector } from 'app/store/storeHooks'; import ParamCFGRescaleMultiplier from 'features/parameters/components/Advanced/ParamCFGRescaleMultiplier'; diff --git a/invokeai/frontend/web/src/features/settingsAccordions/components/CompositingSettingsAccordion/CompositingSettingsAccordion.tsx b/invokeai/frontend/web/src/features/settingsAccordions/components/CompositingSettingsAccordion/CompositingSettingsAccordion.tsx index bbd569bfde..219255a440 100644 --- a/invokeai/frontend/web/src/features/settingsAccordions/components/CompositingSettingsAccordion/CompositingSettingsAccordion.tsx +++ b/invokeai/frontend/web/src/features/settingsAccordions/components/CompositingSettingsAccordion/CompositingSettingsAccordion.tsx @@ -1,4 +1,4 @@ -import type { FormLabelProps } from '@invoke-ai/ui'; +import type { FormLabelProps } from '@invoke-ai/ui-library'; import { Flex, FormControlGroup, @@ -8,7 +8,7 @@ import { TabPanel, TabPanels, Tabs, -} from '@invoke-ai/ui'; +} from '@invoke-ai/ui-library'; import ParamCanvasCoherenceMode from 'features/parameters/components/Canvas/Compositing/CoherencePass/ParamCanvasCoherenceMode'; import ParamCanvasCoherenceSteps from 'features/parameters/components/Canvas/Compositing/CoherencePass/ParamCanvasCoherenceSteps'; import ParamCanvasCoherenceStrength from 'features/parameters/components/Canvas/Compositing/CoherencePass/ParamCanvasCoherenceStrength'; diff --git a/invokeai/frontend/web/src/features/settingsAccordions/components/ControlSettingsAccordion/ControlSettingsAccordion.tsx b/invokeai/frontend/web/src/features/settingsAccordions/components/ControlSettingsAccordion/ControlSettingsAccordion.tsx index 38c01ff2b2..454d49d704 100644 --- a/invokeai/frontend/web/src/features/settingsAccordions/components/ControlSettingsAccordion/ControlSettingsAccordion.tsx +++ b/invokeai/frontend/web/src/features/settingsAccordions/components/ControlSettingsAccordion/ControlSettingsAccordion.tsx @@ -4,7 +4,7 @@ import { Divider, Flex, StandaloneAccordion, -} from '@invoke-ai/ui'; +} from '@invoke-ai/ui-library'; import { createMemoizedSelector } from 'app/store/createMemoizedSelector'; import { useAppSelector } from 'app/store/storeHooks'; import ControlAdapterConfig from 'features/controlAdapters/components/ControlAdapterConfig'; diff --git a/invokeai/frontend/web/src/features/settingsAccordions/components/GenerationSettingsAccordion/GenerationSettingsAccordion.tsx b/invokeai/frontend/web/src/features/settingsAccordions/components/GenerationSettingsAccordion/GenerationSettingsAccordion.tsx index cf0ff7b7ca..17427787d6 100644 --- a/invokeai/frontend/web/src/features/settingsAccordions/components/GenerationSettingsAccordion/GenerationSettingsAccordion.tsx +++ b/invokeai/frontend/web/src/features/settingsAccordions/components/GenerationSettingsAccordion/GenerationSettingsAccordion.tsx @@ -1,4 +1,4 @@ -import type { FormLabelProps } from '@invoke-ai/ui'; +import type { FormLabelProps } from '@invoke-ai/ui-library'; import { Expander, Flex, @@ -9,7 +9,7 @@ import { TabPanel, TabPanels, Tabs, -} from '@invoke-ai/ui'; +} from '@invoke-ai/ui-library'; import { createMemoizedSelector } from 'app/store/createMemoizedSelector'; import { useAppSelector } from 'app/store/storeHooks'; import { LoRAList } from 'features/lora/components/LoRAList'; diff --git a/invokeai/frontend/web/src/features/settingsAccordions/components/ImageSettingsAccordion/ImageSettingsAccordion.tsx b/invokeai/frontend/web/src/features/settingsAccordions/components/ImageSettingsAccordion/ImageSettingsAccordion.tsx index 36b97ecd72..193032fd7f 100644 --- a/invokeai/frontend/web/src/features/settingsAccordions/components/ImageSettingsAccordion/ImageSettingsAccordion.tsx +++ b/invokeai/frontend/web/src/features/settingsAccordions/components/ImageSettingsAccordion/ImageSettingsAccordion.tsx @@ -1,10 +1,10 @@ -import type { FormLabelProps } from '@invoke-ai/ui'; +import type { FormLabelProps } from '@invoke-ai/ui-library'; import { Expander, Flex, FormControlGroup, StandaloneAccordion, -} from '@invoke-ai/ui'; +} from '@invoke-ai/ui-library'; import { createMemoizedSelector } from 'app/store/createMemoizedSelector'; import { useAppSelector } from 'app/store/storeHooks'; import { selectCanvasSlice } from 'features/canvas/store/canvasSlice'; diff --git a/invokeai/frontend/web/src/features/settingsAccordions/components/RefinerSettingsAccordion/RefinerSettingsAccordion.tsx b/invokeai/frontend/web/src/features/settingsAccordions/components/RefinerSettingsAccordion/RefinerSettingsAccordion.tsx index ea50350a63..fd1cc03cd9 100644 --- a/invokeai/frontend/web/src/features/settingsAccordions/components/RefinerSettingsAccordion/RefinerSettingsAccordion.tsx +++ b/invokeai/frontend/web/src/features/settingsAccordions/components/RefinerSettingsAccordion/RefinerSettingsAccordion.tsx @@ -1,10 +1,10 @@ -import type { FormLabelProps } from '@invoke-ai/ui'; +import type { FormLabelProps } from '@invoke-ai/ui-library'; import { Flex, FormControlGroup, StandaloneAccordion, Text, -} from '@invoke-ai/ui'; +} from '@invoke-ai/ui-library'; import { createMemoizedSelector } from 'app/store/createMemoizedSelector'; import { useAppSelector } from 'app/store/storeHooks'; import ParamSDXLRefinerCFGScale from 'features/sdxl/components/SDXLRefiner/ParamSDXLRefinerCFGScale'; diff --git a/invokeai/frontend/web/src/features/system/components/AboutModal/AboutModal.tsx b/invokeai/frontend/web/src/features/system/components/AboutModal/AboutModal.tsx index 9ff0389e26..c4b38bbdbc 100644 --- a/invokeai/frontend/web/src/features/system/components/AboutModal/AboutModal.tsx +++ b/invokeai/frontend/web/src/features/system/components/AboutModal/AboutModal.tsx @@ -14,7 +14,7 @@ import { ModalOverlay, Text, useDisclosure, -} from '@invoke-ai/ui'; +} from '@invoke-ai/ui-library'; import ScrollableContent from 'common/components/OverlayScrollbars/ScrollableContent'; import { discordLink, diff --git a/invokeai/frontend/web/src/features/system/components/HotkeysModal/HotkeyListItem.tsx b/invokeai/frontend/web/src/features/system/components/HotkeysModal/HotkeyListItem.tsx index c23b86a0e4..cf07acd789 100644 --- a/invokeai/frontend/web/src/features/system/components/HotkeysModal/HotkeyListItem.tsx +++ b/invokeai/frontend/web/src/features/system/components/HotkeysModal/HotkeyListItem.tsx @@ -1,4 +1,4 @@ -import { Flex, Kbd, Spacer, Text } from '@invoke-ai/ui'; +import { Flex, Kbd, Spacer, Text } from '@invoke-ai/ui-library'; import { Fragment, memo } from 'react'; import { useTranslation } from 'react-i18next'; diff --git a/invokeai/frontend/web/src/features/system/components/HotkeysModal/HotkeysModal.tsx b/invokeai/frontend/web/src/features/system/components/HotkeysModal/HotkeysModal.tsx index 36d24ba5eb..d315ee3f90 100644 --- a/invokeai/frontend/web/src/features/system/components/HotkeysModal/HotkeysModal.tsx +++ b/invokeai/frontend/web/src/features/system/components/HotkeysModal/HotkeysModal.tsx @@ -13,7 +13,7 @@ import { ModalHeader, ModalOverlay, useDisclosure, -} from '@invoke-ai/ui'; +} from '@invoke-ai/ui-library'; import { IAINoContentFallback } from 'common/components/IAIImageFallback'; import ScrollableContent from 'common/components/OverlayScrollbars/ScrollableContent'; import type { HotkeyGroup } from 'features/system/components/HotkeysModal/useHotkeyData'; diff --git a/invokeai/frontend/web/src/features/system/components/InvokeAILogoComponent.tsx b/invokeai/frontend/web/src/features/system/components/InvokeAILogoComponent.tsx index ba02ca1a1c..91d4382a52 100644 --- a/invokeai/frontend/web/src/features/system/components/InvokeAILogoComponent.tsx +++ b/invokeai/frontend/web/src/features/system/components/InvokeAILogoComponent.tsx @@ -1,5 +1,5 @@ /* eslint-disable i18next/no-literal-string */ -import { Image, Text, Tooltip } from '@invoke-ai/ui'; +import { Image, Text, Tooltip } from '@invoke-ai/ui-library'; import { useStore } from '@nanostores/react'; import { $logo } from 'app/store/nanostores/logo'; import InvokeLogoYellow from 'public/assets/images/invoke-symbol-ylw-lrg.svg'; diff --git a/invokeai/frontend/web/src/features/system/components/ProgressBar.tsx b/invokeai/frontend/web/src/features/system/components/ProgressBar.tsx index 600535fb66..6084facc4f 100644 --- a/invokeai/frontend/web/src/features/system/components/ProgressBar.tsx +++ b/invokeai/frontend/web/src/features/system/components/ProgressBar.tsx @@ -1,4 +1,4 @@ -import { Progress } from '@invoke-ai/ui'; +import { Progress } from '@invoke-ai/ui-library'; import { createSelector } from '@reduxjs/toolkit'; import { useAppSelector } from 'app/store/storeHooks'; import { selectSystemSlice } from 'features/system/store/systemSlice'; diff --git a/invokeai/frontend/web/src/features/system/components/SettingsModal/SettingsLanguageSelect.tsx b/invokeai/frontend/web/src/features/system/components/SettingsModal/SettingsLanguageSelect.tsx index 5a71161010..9f40cfa99c 100644 --- a/invokeai/frontend/web/src/features/system/components/SettingsModal/SettingsLanguageSelect.tsx +++ b/invokeai/frontend/web/src/features/system/components/SettingsModal/SettingsLanguageSelect.tsx @@ -1,5 +1,5 @@ -import type { ComboboxOnChange } from '@invoke-ai/ui'; -import { Combobox, FormControl, FormLabel } from '@invoke-ai/ui'; +import type { ComboboxOnChange } from '@invoke-ai/ui-library'; +import { Combobox, FormControl, FormLabel } from '@invoke-ai/ui-library'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import { useFeatureStatus } from 'features/system/hooks/useFeatureStatus'; import { languageChanged } from 'features/system/store/systemSlice'; diff --git a/invokeai/frontend/web/src/features/system/components/SettingsModal/SettingsLogLevelSelect.tsx b/invokeai/frontend/web/src/features/system/components/SettingsModal/SettingsLogLevelSelect.tsx index a83a6403bd..8d54c5a24b 100644 --- a/invokeai/frontend/web/src/features/system/components/SettingsModal/SettingsLogLevelSelect.tsx +++ b/invokeai/frontend/web/src/features/system/components/SettingsModal/SettingsLogLevelSelect.tsx @@ -1,5 +1,5 @@ -import type { ComboboxOnChange } from '@invoke-ai/ui'; -import { Combobox, FormControl, FormLabel } from '@invoke-ai/ui'; +import type { ComboboxOnChange } from '@invoke-ai/ui-library'; +import { Combobox, FormControl, FormLabel } from '@invoke-ai/ui-library'; import { isLogLevel, zLogLevel } from 'app/logging/logger'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import { consoleLogLevelChanged } from 'features/system/store/systemSlice'; diff --git a/invokeai/frontend/web/src/features/system/components/SettingsModal/SettingsMenu.tsx b/invokeai/frontend/web/src/features/system/components/SettingsModal/SettingsMenu.tsx index 965a43690b..fa31dd0ade 100644 --- a/invokeai/frontend/web/src/features/system/components/SettingsModal/SettingsMenu.tsx +++ b/invokeai/frontend/web/src/features/system/components/SettingsModal/SettingsMenu.tsx @@ -7,7 +7,7 @@ import { MenuList, useDisclosure, useGlobalMenuClose, -} from '@invoke-ai/ui'; +} from '@invoke-ai/ui-library'; import AboutModal from 'features/system/components/AboutModal/AboutModal'; import HotkeysModal from 'features/system/components/HotkeysModal/HotkeysModal'; import { useFeatureStatus } from 'features/system/hooks/useFeatureStatus'; diff --git a/invokeai/frontend/web/src/features/system/components/SettingsModal/SettingsModal.tsx b/invokeai/frontend/web/src/features/system/components/SettingsModal/SettingsModal.tsx index 31cb25620f..b69b406eff 100644 --- a/invokeai/frontend/web/src/features/system/components/SettingsModal/SettingsModal.tsx +++ b/invokeai/frontend/web/src/features/system/components/SettingsModal/SettingsModal.tsx @@ -14,7 +14,7 @@ import { Switch, Text, useDisclosure, -} from '@invoke-ai/ui'; +} from '@invoke-ai/ui-library'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import { InformationalPopover } from 'common/components/InformationalPopover/InformationalPopover'; import ScrollableContent from 'common/components/OverlayScrollbars/ScrollableContent'; diff --git a/invokeai/frontend/web/src/features/system/components/SettingsModal/StyledFlex.tsx b/invokeai/frontend/web/src/features/system/components/SettingsModal/StyledFlex.tsx index 479bd5321b..5cc01a19ab 100644 --- a/invokeai/frontend/web/src/features/system/components/SettingsModal/StyledFlex.tsx +++ b/invokeai/frontend/web/src/features/system/components/SettingsModal/StyledFlex.tsx @@ -1,4 +1,4 @@ -import { Flex } from '@invoke-ai/ui'; +import { Flex } from '@invoke-ai/ui-library'; import type { PropsWithChildren } from 'react'; import { memo } from 'react'; diff --git a/invokeai/frontend/web/src/features/system/components/StatusIndicator.tsx b/invokeai/frontend/web/src/features/system/components/StatusIndicator.tsx index 52968ece2a..25dda11b4a 100644 --- a/invokeai/frontend/web/src/features/system/components/StatusIndicator.tsx +++ b/invokeai/frontend/web/src/features/system/components/StatusIndicator.tsx @@ -1,4 +1,4 @@ -import { Icon, Tooltip } from '@invoke-ai/ui'; +import { Icon, Tooltip } from '@invoke-ai/ui-library'; import { useAppSelector } from 'app/store/storeHooks'; import { memo } from 'react'; import { useTranslation } from 'react-i18next'; diff --git a/invokeai/frontend/web/src/features/system/components/StickyScrollable.tsx b/invokeai/frontend/web/src/features/system/components/StickyScrollable.tsx index c705d90a80..87bc60bc89 100644 --- a/invokeai/frontend/web/src/features/system/components/StickyScrollable.tsx +++ b/invokeai/frontend/web/src/features/system/components/StickyScrollable.tsx @@ -1,4 +1,4 @@ -import { Flex, Heading } from '@invoke-ai/ui'; +import { Flex, Heading } from '@invoke-ai/ui-library'; import type { PropsWithChildren } from 'react'; import { memo } from 'react'; diff --git a/invokeai/frontend/web/src/features/system/store/systemSlice.ts b/invokeai/frontend/web/src/features/system/store/systemSlice.ts index aee77b7d52..8da6c4b4cd 100644 --- a/invokeai/frontend/web/src/features/system/store/systemSlice.ts +++ b/invokeai/frontend/web/src/features/system/store/systemSlice.ts @@ -1,4 +1,4 @@ -import type { UseToastOptions } from '@invoke-ai/ui'; +import type { UseToastOptions } from '@invoke-ai/ui-library'; import type { PayloadAction } from '@reduxjs/toolkit'; import { createSlice, isAnyOf } from '@reduxjs/toolkit'; import type { RootState } from 'app/store/store'; diff --git a/invokeai/frontend/web/src/features/system/store/types.ts b/invokeai/frontend/web/src/features/system/store/types.ts index 7df3f72c40..df774897e9 100644 --- a/invokeai/frontend/web/src/features/system/store/types.ts +++ b/invokeai/frontend/web/src/features/system/store/types.ts @@ -1,4 +1,4 @@ -import type { UseToastOptions } from '@invoke-ai/ui'; +import type { UseToastOptions } from '@invoke-ai/ui-library'; import type { LogLevel } from 'app/logging/logger'; import type { ProgressImage } from 'services/events/types'; import { z } from 'zod'; diff --git a/invokeai/frontend/web/src/features/system/util/makeToast.ts b/invokeai/frontend/web/src/features/system/util/makeToast.ts index 7afadd7ca8..aa77fd60ae 100644 --- a/invokeai/frontend/web/src/features/system/util/makeToast.ts +++ b/invokeai/frontend/web/src/features/system/util/makeToast.ts @@ -1,4 +1,4 @@ -import type { UseToastOptions } from '@invoke-ai/ui'; +import type { UseToastOptions } from '@invoke-ai/ui-library'; export type MakeToastArg = string | UseToastOptions; diff --git a/invokeai/frontend/web/src/features/ui/components/FloatingGalleryButton.tsx b/invokeai/frontend/web/src/features/ui/components/FloatingGalleryButton.tsx index fd448758a8..65bb5cc015 100644 --- a/invokeai/frontend/web/src/features/ui/components/FloatingGalleryButton.tsx +++ b/invokeai/frontend/web/src/features/ui/components/FloatingGalleryButton.tsx @@ -1,4 +1,4 @@ -import { Flex, IconButton, Portal, Tooltip } from '@invoke-ai/ui'; +import { Flex, IconButton, Portal, Tooltip } from '@invoke-ai/ui-library'; import type { UsePanelReturn } from 'features/ui/hooks/usePanel'; import { memo } from 'react'; import { useTranslation } from 'react-i18next'; diff --git a/invokeai/frontend/web/src/features/ui/components/FloatingParametersPanelButtons.tsx b/invokeai/frontend/web/src/features/ui/components/FloatingParametersPanelButtons.tsx index 6e1278c665..f96a4e047c 100644 --- a/invokeai/frontend/web/src/features/ui/components/FloatingParametersPanelButtons.tsx +++ b/invokeai/frontend/web/src/features/ui/components/FloatingParametersPanelButtons.tsx @@ -1,4 +1,4 @@ -import type { SystemStyleObject } from '@invoke-ai/ui'; +import type { SystemStyleObject } from '@invoke-ai/ui-library'; import { ButtonGroup, Flex, @@ -6,7 +6,7 @@ import { IconButton, Portal, spinAnimation, -} from '@invoke-ai/ui'; +} from '@invoke-ai/ui-library'; import CancelCurrentQueueItemIconButton from 'features/queue/components/CancelCurrentQueueItemIconButton'; import ClearQueueIconButton from 'features/queue/components/ClearQueueIconButton'; import { QueueButtonTooltip } from 'features/queue/components/QueueButtonTooltip'; diff --git a/invokeai/frontend/web/src/features/ui/components/InvokeTabs.tsx b/invokeai/frontend/web/src/features/ui/components/InvokeTabs.tsx index d79ea1e741..dd703e315b 100644 --- a/invokeai/frontend/web/src/features/ui/components/InvokeTabs.tsx +++ b/invokeai/frontend/web/src/features/ui/components/InvokeTabs.tsx @@ -8,7 +8,7 @@ import { TabPanels, Tabs, Tooltip, -} from '@invoke-ai/ui'; +} from '@invoke-ai/ui-library'; import { useStore } from '@nanostores/react'; import { createMemoizedSelector } from 'app/store/createMemoizedSelector'; import { $customNavComponent } from 'app/store/nanostores/customNavComponent'; diff --git a/invokeai/frontend/web/src/features/ui/components/ParametersPanel.tsx b/invokeai/frontend/web/src/features/ui/components/ParametersPanel.tsx index 6ff7228932..3551cd6cd1 100644 --- a/invokeai/frontend/web/src/features/ui/components/ParametersPanel.tsx +++ b/invokeai/frontend/web/src/features/ui/components/ParametersPanel.tsx @@ -1,4 +1,4 @@ -import { Box, Flex } from '@invoke-ai/ui'; +import { Box, Flex } from '@invoke-ai/ui-library'; import { useAppSelector } from 'app/store/storeHooks'; import { overlayScrollbarsParams } from 'common/components/OverlayScrollbars/constants'; import { Prompts } from 'features/parameters/components/Prompts/Prompts'; diff --git a/invokeai/frontend/web/src/features/ui/components/tabs/ImageToImageTab.tsx b/invokeai/frontend/web/src/features/ui/components/tabs/ImageToImageTab.tsx index b2b2a8e103..2c32861b79 100644 --- a/invokeai/frontend/web/src/features/ui/components/tabs/ImageToImageTab.tsx +++ b/invokeai/frontend/web/src/features/ui/components/tabs/ImageToImageTab.tsx @@ -1,4 +1,4 @@ -import { Box } from '@invoke-ai/ui'; +import { Box } from '@invoke-ai/ui-library'; import InitialImageDisplay from 'features/parameters/components/ImageToImage/InitialImageDisplay'; import ResizeHandle from 'features/ui/components/tabs/ResizeHandle'; import TextToImageTabMain from 'features/ui/components/tabs/TextToImageTab'; diff --git a/invokeai/frontend/web/src/features/ui/components/tabs/ModelManagerTab.tsx b/invokeai/frontend/web/src/features/ui/components/tabs/ModelManagerTab.tsx index d57177af9e..5c21ff3549 100644 --- a/invokeai/frontend/web/src/features/ui/components/tabs/ModelManagerTab.tsx +++ b/invokeai/frontend/web/src/features/ui/components/tabs/ModelManagerTab.tsx @@ -1,4 +1,4 @@ -import { Tab, TabList, TabPanel, TabPanels, Tabs } from '@invoke-ai/ui'; +import { Tab, TabList, TabPanel, TabPanels, Tabs } from '@invoke-ai/ui-library'; import ImportModelsPanel from 'features/modelManager/subpanels/ImportModelsPanel'; import MergeModelsPanel from 'features/modelManager/subpanels/MergeModelsPanel'; import ModelManagerPanel from 'features/modelManager/subpanels/ModelManagerPanel'; diff --git a/invokeai/frontend/web/src/features/ui/components/tabs/ResizeHandle.tsx b/invokeai/frontend/web/src/features/ui/components/tabs/ResizeHandle.tsx index af144c71ef..6f7ae7f549 100644 --- a/invokeai/frontend/web/src/features/ui/components/tabs/ResizeHandle.tsx +++ b/invokeai/frontend/web/src/features/ui/components/tabs/ResizeHandle.tsx @@ -1,5 +1,5 @@ -import type { SystemStyleObject } from '@invoke-ai/ui'; -import { Box, chakra, Flex } from '@invoke-ai/ui'; +import type { SystemStyleObject } from '@invoke-ai/ui-library'; +import { Box, chakra, Flex } from '@invoke-ai/ui-library'; import { memo } from 'react'; import type { PanelResizeHandleProps } from 'react-resizable-panels'; import { PanelResizeHandle } from 'react-resizable-panels'; diff --git a/invokeai/frontend/web/src/features/ui/components/tabs/TextToImageTab.tsx b/invokeai/frontend/web/src/features/ui/components/tabs/TextToImageTab.tsx index 4dc7dd3aeb..2310be4f1d 100644 --- a/invokeai/frontend/web/src/features/ui/components/tabs/TextToImageTab.tsx +++ b/invokeai/frontend/web/src/features/ui/components/tabs/TextToImageTab.tsx @@ -1,4 +1,4 @@ -import { Box, Flex } from '@invoke-ai/ui'; +import { Box, Flex } from '@invoke-ai/ui-library'; import CurrentImageDisplay from 'features/gallery/components/CurrentImage/CurrentImageDisplay'; import { memo } from 'react'; diff --git a/invokeai/frontend/web/src/features/ui/components/tabs/UnifiedCanvasTab.tsx b/invokeai/frontend/web/src/features/ui/components/tabs/UnifiedCanvasTab.tsx index b47717b8bd..1ab25c0507 100644 --- a/invokeai/frontend/web/src/features/ui/components/tabs/UnifiedCanvasTab.tsx +++ b/invokeai/frontend/web/src/features/ui/components/tabs/UnifiedCanvasTab.tsx @@ -1,4 +1,4 @@ -import { Flex } from '@invoke-ai/ui'; +import { Flex } from '@invoke-ai/ui-library'; import IAIDropOverlay from 'common/components/IAIDropOverlay'; import IAICanvas from 'features/canvas/components/IAICanvas'; import IAICanvasToolbar from 'features/canvas/components/IAICanvasToolbar/IAICanvasToolbar'; diff --git a/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryButton.tsx b/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryButton.tsx index 8b1f0a2283..8f7cebfcae 100644 --- a/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryButton.tsx +++ b/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryButton.tsx @@ -1,4 +1,4 @@ -import { Button, useDisclosure } from '@invoke-ai/ui'; +import { Button, useDisclosure } from '@invoke-ai/ui-library'; import { WorkflowLibraryModalContext } from 'features/workflowLibrary/context/WorkflowLibraryModalContext'; import { memo } from 'react'; import { useTranslation } from 'react-i18next'; diff --git a/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryList.tsx b/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryList.tsx index 0aeab01680..5ce3d36a97 100644 --- a/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryList.tsx +++ b/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryList.tsx @@ -1,4 +1,4 @@ -import type { ComboboxOnChange, ComboboxOption } from '@invoke-ai/ui'; +import type { ComboboxOnChange, ComboboxOption } from '@invoke-ai/ui-library'; import { Button, ButtonGroup, @@ -11,7 +11,7 @@ import { Input, InputGroup, InputRightElement, -} from '@invoke-ai/ui'; +} from '@invoke-ai/ui-library'; import { useStore } from '@nanostores/react'; import { $projectId } from 'app/store/nanostores/projectId'; import { $workflowCategories } from 'app/store/nanostores/workflowCategories'; diff --git a/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryListItem.tsx b/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryListItem.tsx index da122c39e0..3ffd25281d 100644 --- a/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryListItem.tsx +++ b/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryListItem.tsx @@ -1,4 +1,4 @@ -import { Button, Flex, Heading, Spacer, Text } from '@invoke-ai/ui'; +import { Button, Flex, Heading, Spacer, Text } from '@invoke-ai/ui-library'; import { useAppSelector } from 'app/store/storeHooks'; import dateFormat, { masks } from 'dateformat'; import { useWorkflowLibraryModalContext } from 'features/workflowLibrary/context/useWorkflowLibraryModalContext'; diff --git a/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryListWrapper.tsx b/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryListWrapper.tsx index 3dd726b03f..157e552240 100644 --- a/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryListWrapper.tsx +++ b/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryListWrapper.tsx @@ -1,4 +1,4 @@ -import { Flex } from '@invoke-ai/ui'; +import { Flex } from '@invoke-ai/ui-library'; import type { PropsWithChildren } from 'react'; import { memo } from 'react'; diff --git a/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryMenu/DownloadWorkflowMenuItem.tsx b/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryMenu/DownloadWorkflowMenuItem.tsx index 62988147fe..add85d9e8a 100644 --- a/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryMenu/DownloadWorkflowMenuItem.tsx +++ b/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryMenu/DownloadWorkflowMenuItem.tsx @@ -1,4 +1,4 @@ -import { MenuItem } from '@invoke-ai/ui'; +import { MenuItem } from '@invoke-ai/ui-library'; import { useDownloadWorkflow } from 'features/workflowLibrary/hooks/useDownloadWorkflow'; import { memo } from 'react'; import { useTranslation } from 'react-i18next'; diff --git a/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryMenu/NewWorkflowMenuItem.tsx b/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryMenu/NewWorkflowMenuItem.tsx index 82acfa860d..1c41c7be9e 100644 --- a/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryMenu/NewWorkflowMenuItem.tsx +++ b/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryMenu/NewWorkflowMenuItem.tsx @@ -4,7 +4,7 @@ import { MenuItem, Text, useDisclosure, -} from '@invoke-ai/ui'; +} from '@invoke-ai/ui-library'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import { nodeEditorReset } from 'features/nodes/store/nodesSlice'; import { addToast } from 'features/system/store/systemSlice'; diff --git a/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryMenu/SaveWorkflowAsMenuItem.tsx b/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryMenu/SaveWorkflowAsMenuItem.tsx index 6510cac329..d57d76da2b 100644 --- a/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryMenu/SaveWorkflowAsMenuItem.tsx +++ b/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryMenu/SaveWorkflowAsMenuItem.tsx @@ -5,7 +5,7 @@ import { Input, MenuItem, useDisclosure, -} from '@invoke-ai/ui'; +} from '@invoke-ai/ui-library'; import { useAppSelector } from 'app/store/storeHooks'; import { useSaveWorkflowAs } from 'features/workflowLibrary/hooks/useSaveWorkflowAs'; import { getWorkflowCopyName } from 'features/workflowLibrary/util/getWorkflowCopyName'; diff --git a/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryMenu/SaveWorkflowMenuItem.tsx b/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryMenu/SaveWorkflowMenuItem.tsx index a047444bbc..1e2866cb77 100644 --- a/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryMenu/SaveWorkflowMenuItem.tsx +++ b/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryMenu/SaveWorkflowMenuItem.tsx @@ -1,4 +1,4 @@ -import { MenuItem } from '@invoke-ai/ui'; +import { MenuItem } from '@invoke-ai/ui-library'; import { useSaveLibraryWorkflow } from 'features/workflowLibrary/hooks/useSaveWorkflow'; import { memo } from 'react'; import { useTranslation } from 'react-i18next'; diff --git a/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryMenu/SettingsMenuItem.tsx b/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryMenu/SettingsMenuItem.tsx index c0aa94264e..157e6abc9b 100644 --- a/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryMenu/SettingsMenuItem.tsx +++ b/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryMenu/SettingsMenuItem.tsx @@ -1,4 +1,4 @@ -import { MenuItem } from '@invoke-ai/ui'; +import { MenuItem } from '@invoke-ai/ui-library'; import WorkflowEditorSettings from 'features/nodes/components/flow/panels/TopRightPanel/WorkflowEditorSettings'; import { memo } from 'react'; import { useTranslation } from 'react-i18next'; diff --git a/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryMenu/UploadWorkflowMenuItem.tsx b/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryMenu/UploadWorkflowMenuItem.tsx index d6c497cadb..a769f52909 100644 --- a/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryMenu/UploadWorkflowMenuItem.tsx +++ b/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryMenu/UploadWorkflowMenuItem.tsx @@ -1,4 +1,4 @@ -import { MenuItem } from '@invoke-ai/ui'; +import { MenuItem } from '@invoke-ai/ui-library'; import { useLoadWorkflowFromFile } from 'features/workflowLibrary/hooks/useLoadWorkflowFromFile'; import { memo, useCallback, useRef } from 'react'; import { useDropzone } from 'react-dropzone'; diff --git a/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryMenu/WorkflowLibraryMenu.tsx b/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryMenu/WorkflowLibraryMenu.tsx index b174bf483e..771a682854 100644 --- a/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryMenu/WorkflowLibraryMenu.tsx +++ b/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryMenu/WorkflowLibraryMenu.tsx @@ -6,7 +6,7 @@ import { MenuList, useDisclosure, useGlobalMenuClose, -} from '@invoke-ai/ui'; +} from '@invoke-ai/ui-library'; import { useFeatureStatus } from 'features/system/hooks/useFeatureStatus'; import DownloadWorkflowMenuItem from 'features/workflowLibrary/components/WorkflowLibraryMenu/DownloadWorkflowMenuItem'; import NewWorkflowMenuItem from 'features/workflowLibrary/components/WorkflowLibraryMenu/NewWorkflowMenuItem'; diff --git a/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryModal.tsx b/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryModal.tsx index e3367dfe28..ae8386e392 100644 --- a/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryModal.tsx +++ b/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryModal.tsx @@ -6,7 +6,7 @@ import { ModalFooter, ModalHeader, ModalOverlay, -} from '@invoke-ai/ui'; +} from '@invoke-ai/ui-library'; import WorkflowLibraryContent from 'features/workflowLibrary/components/WorkflowLibraryContent'; import { useWorkflowLibraryModalContext } from 'features/workflowLibrary/context/useWorkflowLibraryModalContext'; import { memo } from 'react'; diff --git a/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryPagination.tsx b/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryPagination.tsx index d000d5863a..5664255fab 100644 --- a/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryPagination.tsx +++ b/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryPagination.tsx @@ -1,4 +1,4 @@ -import { Button, ButtonGroup, IconButton } from '@invoke-ai/ui'; +import { Button, ButtonGroup, IconButton } from '@invoke-ai/ui-library'; import type { Dispatch, SetStateAction } from 'react'; import { memo, useCallback, useMemo } from 'react'; import { useTranslation } from 'react-i18next'; diff --git a/invokeai/frontend/web/src/features/workflowLibrary/context/WorkflowLibraryModalContext.ts b/invokeai/frontend/web/src/features/workflowLibrary/context/WorkflowLibraryModalContext.ts index 20e5640a33..0b3c4f7512 100644 --- a/invokeai/frontend/web/src/features/workflowLibrary/context/WorkflowLibraryModalContext.ts +++ b/invokeai/frontend/web/src/features/workflowLibrary/context/WorkflowLibraryModalContext.ts @@ -1,4 +1,4 @@ -import type { UseDisclosureReturn } from '@invoke-ai/ui'; +import type { UseDisclosureReturn } from '@invoke-ai/ui-library'; import { createContext } from 'react'; export const WorkflowLibraryModalContext = diff --git a/invokeai/frontend/web/src/features/workflowLibrary/hooks/useDeleteLibraryWorkflow.ts b/invokeai/frontend/web/src/features/workflowLibrary/hooks/useDeleteLibraryWorkflow.ts index ae541c8157..c7d8ae39a4 100644 --- a/invokeai/frontend/web/src/features/workflowLibrary/hooks/useDeleteLibraryWorkflow.ts +++ b/invokeai/frontend/web/src/features/workflowLibrary/hooks/useDeleteLibraryWorkflow.ts @@ -1,4 +1,4 @@ -import { useToast } from '@invoke-ai/ui'; +import { useToast } from '@invoke-ai/ui-library'; import { useAppToaster } from 'app/components/Toaster'; import { useCallback } from 'react'; import { useTranslation } from 'react-i18next'; diff --git a/invokeai/frontend/web/src/features/workflowLibrary/hooks/useGetAndLoadLibraryWorkflow.ts b/invokeai/frontend/web/src/features/workflowLibrary/hooks/useGetAndLoadLibraryWorkflow.ts index 85a0a6c757..62786e4405 100644 --- a/invokeai/frontend/web/src/features/workflowLibrary/hooks/useGetAndLoadLibraryWorkflow.ts +++ b/invokeai/frontend/web/src/features/workflowLibrary/hooks/useGetAndLoadLibraryWorkflow.ts @@ -1,4 +1,4 @@ -import { useToast } from '@invoke-ai/ui'; +import { useToast } from '@invoke-ai/ui-library'; import { useAppToaster } from 'app/components/Toaster'; import { useAppDispatch } from 'app/store/storeHooks'; import { workflowLoadRequested } from 'features/nodes/store/actions'; diff --git a/invokeai/frontend/web/src/features/workflowLibrary/hooks/useSaveWorkflow.ts b/invokeai/frontend/web/src/features/workflowLibrary/hooks/useSaveWorkflow.ts index 85589c6694..0e75417742 100644 --- a/invokeai/frontend/web/src/features/workflowLibrary/hooks/useSaveWorkflow.ts +++ b/invokeai/frontend/web/src/features/workflowLibrary/hooks/useSaveWorkflow.ts @@ -1,5 +1,5 @@ -import type { ToastId } from '@invoke-ai/ui'; -import { useToast } from '@invoke-ai/ui'; +import type { ToastId } from '@invoke-ai/ui-library'; +import { useToast } from '@invoke-ai/ui-library'; import { useAppDispatch } from 'app/store/storeHooks'; import { $builtWorkflow } from 'features/nodes/hooks/useWorkflowWatcher'; import { diff --git a/invokeai/frontend/web/src/features/workflowLibrary/hooks/useSaveWorkflowAs.ts b/invokeai/frontend/web/src/features/workflowLibrary/hooks/useSaveWorkflowAs.ts index cb827f2195..925984c56e 100644 --- a/invokeai/frontend/web/src/features/workflowLibrary/hooks/useSaveWorkflowAs.ts +++ b/invokeai/frontend/web/src/features/workflowLibrary/hooks/useSaveWorkflowAs.ts @@ -1,5 +1,5 @@ -import type { ToastId } from '@invoke-ai/ui'; -import { useToast } from '@invoke-ai/ui'; +import type { ToastId } from '@invoke-ai/ui-library'; +import { useToast } from '@invoke-ai/ui-library'; import { useAppDispatch } from 'app/store/storeHooks'; import { $builtWorkflow } from 'features/nodes/hooks/useWorkflowWatcher'; import { diff --git a/invokeai/frontend/web/src/services/api/types.ts b/invokeai/frontend/web/src/services/api/types.ts index 871a7f5a2e..63969d3a62 100644 --- a/invokeai/frontend/web/src/services/api/types.ts +++ b/invokeai/frontend/web/src/services/api/types.ts @@ -1,4 +1,4 @@ -import type { UseToastOptions } from '@invoke-ai/ui'; +import type { UseToastOptions } from '@invoke-ai/ui-library'; import type { EntityState } from '@reduxjs/toolkit'; import type { components, paths } from 'services/api/schema'; import type { O } from 'ts-toolbelt'; From aa134a2db80b04c94652b884204a273c4ce56200 Mon Sep 17 00:00:00 2001 From: psychedelicious <4822129+psychedelicious@users.noreply.github.com> Date: Sat, 27 Jan 2024 20:49:57 +1100 Subject: [PATCH 03/14] chore(ui): remove postinstall script --- invokeai/frontend/web/package.json | 1 - 1 file changed, 1 deletion(-) diff --git a/invokeai/frontend/web/package.json b/invokeai/frontend/web/package.json index c9bde59ce2..ba99b5fdcb 100644 --- a/invokeai/frontend/web/package.json +++ b/invokeai/frontend/web/package.json @@ -31,7 +31,6 @@ "lint": "concurrently -g -n eslint,prettier,tsc,madge -c cyan,green,magenta,yellow \"pnpm run lint:eslint\" \"pnpm run lint:prettier\" \"pnpm run lint:tsc\" \"pnpm run lint:madge\"", "fix": "eslint --fix . && prettier --log-level warn --write .", "preinstall": "npx only-allow pnpm", - "postinstall": "pnpm run theme", "theme": "chakra-cli tokens node_modules/@invoke-ai/ui-library", "theme:watch": "chakra-cli tokens node_modules/@invoke-ai/ui-library --watch", "storybook": "storybook dev -p 6006", From 26c3378ede6b74af674aa479453241b75e9621d9 Mon Sep 17 00:00:00 2001 From: psychedelicious <4822129+psychedelicious@users.noreply.github.com> Date: Sat, 27 Jan 2024 20:51:28 +1100 Subject: [PATCH 04/14] chore(ui): use new eslint config, add some overrides --- invokeai/frontend/web/.eslintrc.js | 132 ++--------------------------- 1 file changed, 5 insertions(+), 127 deletions(-) diff --git a/invokeai/frontend/web/.eslintrc.js b/invokeai/frontend/web/.eslintrc.js index 4ad387951f..2d1f21a0f2 100644 --- a/invokeai/frontend/web/.eslintrc.js +++ b/invokeai/frontend/web/.eslintrc.js @@ -1,131 +1,9 @@ module.exports = { - env: { - browser: true, - es6: true, - node: true, - }, - extends: [ - 'eslint:recommended', - 'plugin:@typescript-eslint/recommended', - 'plugin:react/recommended', - 'plugin:react-hooks/recommended', - 'plugin:react/jsx-runtime', - 'prettier', - 'plugin:storybook/recommended', - ], - parser: '@typescript-eslint/parser', - parserOptions: { - ecmaFeatures: { - jsx: true, - }, - ecmaVersion: 2018, - sourceType: 'module', - }, - plugins: [ - 'react', - '@typescript-eslint', - 'eslint-plugin-react-hooks', - 'i18next', - 'path', - 'unused-imports', - 'simple-import-sort', - 'eslint-plugin-import', - // These rules are too strict for normal usage, but are useful for optimizing rerenders - // '@arthurgeron/react-usememo', - ], - root: true, + extends: ['@invoke-ai/eslint-config-react'], rules: { - 'path/no-relative-imports': ['error', { maxDepth: 0 }], - curly: 'error', - 'i18next/no-literal-string': 'warn', - 'react/jsx-no-bind': ['error', { allowBind: true }], - 'react/jsx-curly-brace-presence': [ - 'error', - { props: 'never', children: 'never' }, - ], - 'react-hooks/exhaustive-deps': 'error', - 'no-var': 'error', - 'brace-style': 'error', - 'prefer-template': 'error', - 'import/no-duplicates': 'error', - radix: 'error', - 'space-before-blocks': 'error', - 'import/prefer-default-export': 'off', - '@typescript-eslint/no-unused-vars': 'off', - 'unused-imports/no-unused-imports': 'error', - 'unused-imports/no-unused-vars': [ - 'warn', - { - vars: 'all', - varsIgnorePattern: '^_', - args: 'after-used', - argsIgnorePattern: '^_', - }, - ], - // These rules are too strict for normal usage, but are useful for optimizing rerenders - // '@arthurgeron/react-usememo/require-usememo': [ - // 'warn', - // { - // strict: false, - // checkHookReturnObject: false, - // fix: { addImports: true }, - // checkHookCalls: false, - - // }, - // ], - // '@arthurgeron/react-usememo/require-memo': 'warn', - '@typescript-eslint/ban-ts-comment': 'warn', - '@typescript-eslint/no-explicit-any': 'warn', - '@typescript-eslint/no-empty-interface': [ - 'error', - { - allowSingleExtends: true, - }, - ], - '@typescript-eslint/consistent-type-imports': [ - 'error', - { - prefer: 'type-imports', - fixStyle: 'separate-type-imports', - disallowTypeAnnotations: true, - }, - ], - '@typescript-eslint/no-import-type-side-effects': 'error', - 'simple-import-sort/imports': 'error', - 'simple-import-sort/exports': 'error', - // Prefer @invoke-ai/ui components over chakra - 'no-restricted-imports': 'off', - '@typescript-eslint/no-restricted-imports': [ - 'warn', - { - paths: [ - { - name: '@chakra-ui/react', - message: "Please import from '@invoke-ai/ui' instead.", - }, - { - name: '@chakra-ui/layout', - message: "Please import from '@invoke-ai/ui' instead.", - }, - { - name: '@chakra-ui/portal', - message: "Please import from '@invoke-ai/ui' instead.", - }, - ], - }, - ], - }, - overrides: [ - { - files: ['*.stories.tsx'], - rules: { - 'i18next/no-literal-string': 'off', - }, - }, - ], - settings: { - react: { - version: 'detect', - }, + // TODO(psyche): Enable this rule. Requires no default exports in components - many changes. + 'react-refresh/only-export-components': 'off', + // TODO(psyche): Enable this rule. Requires a lot of eslint-disable-next-line comments. + '@typescript-eslint/consistent-type-assertions': 'off', }, }; From 138caa34de036c69c7d5fe002a0255c46cfb53de Mon Sep 17 00:00:00 2001 From: psychedelicious <4822129+psychedelicious@users.noreply.github.com> Date: Sat, 27 Jan 2024 20:51:34 +1100 Subject: [PATCH 05/14] chore(ui): lint --- .../web/src/app/components/AppErrorBoundaryFallback.tsx | 9 ++++++++- .../listenerMiddleware/listeners/batchEnqueued.ts | 6 +++++- .../frontend/web/src/common/components/IAIDndImage.tsx | 6 +++++- .../canvas/components/ClearCanvasHistoryButtonModal.tsx | 6 +++++- .../parameters/ParamControlAdapterBeginEnd.tsx | 6 +++++- .../gallery/components/Boards/BoardContextMenu.tsx | 7 ++++++- .../components/ImageMetadataViewer/ImageMetadataItem.tsx | 8 +++++++- .../flow/nodes/Invocation/fields/FieldContextMenu.tsx | 7 ++++++- .../sidePanel/inspector/InspectorDetailsTab.tsx | 9 ++++++++- .../components/sidePanel/inspector/InspectorPanel.tsx | 9 ++++++++- .../sidePanel/inspector/details/EditableNodeTitle.tsx | 7 ++++++- .../components/sidePanel/workflow/WorkflowPanel.tsx | 9 ++++++++- .../components/MainModel/ParamMainModelSelect.tsx | 7 ++++++- .../parameters/components/Seed/ParamSeedNumberInput.tsx | 6 +++++- .../features/queue/components/ClearQueueIconButton.tsx | 6 +++++- .../src/features/queue/components/QueueButtonTooltip.tsx | 8 +++++++- .../queue/components/QueueList/QueueItemComponent.tsx | 8 +++++++- .../AdvancedSettingsAccordion.tsx | 6 +++++- 18 files changed, 112 insertions(+), 18 deletions(-) diff --git a/invokeai/frontend/web/src/app/components/AppErrorBoundaryFallback.tsx b/invokeai/frontend/web/src/app/components/AppErrorBoundaryFallback.tsx index be0269a41b..b3a0368ac9 100644 --- a/invokeai/frontend/web/src/app/components/AppErrorBoundaryFallback.tsx +++ b/invokeai/frontend/web/src/app/components/AppErrorBoundaryFallback.tsx @@ -1,4 +1,11 @@ -import { Button, Flex, Heading, Link, Text, useToast } from '@invoke-ai/ui-library'; +import { + Button, + Flex, + Heading, + Link, + Text, + useToast, +} from '@invoke-ai/ui-library'; import newGithubIssueUrl from 'new-github-issue-url'; import { memo, useCallback, useMemo } from 'react'; import { useTranslation } from 'react-i18next'; diff --git a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/batchEnqueued.ts b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/batchEnqueued.ts index 84de200e94..f6a59d3557 100644 --- a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/batchEnqueued.ts +++ b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/batchEnqueued.ts @@ -1,4 +1,8 @@ -import { createStandaloneToast, theme, TOAST_OPTIONS } from '@invoke-ai/ui-library'; +import { + createStandaloneToast, + theme, + TOAST_OPTIONS, +} from '@invoke-ai/ui-library'; import { logger } from 'app/logging/logger'; import { parseify } from 'common/util/serialize'; import { zPydanticValidationError } from 'features/system/store/zodSchemas'; diff --git a/invokeai/frontend/web/src/common/components/IAIDndImage.tsx b/invokeai/frontend/web/src/common/components/IAIDndImage.tsx index 851b21dd13..17fbaafa41 100644 --- a/invokeai/frontend/web/src/common/components/IAIDndImage.tsx +++ b/invokeai/frontend/web/src/common/components/IAIDndImage.tsx @@ -1,4 +1,8 @@ -import type { ChakraProps, FlexProps, SystemStyleObject } from '@invoke-ai/ui-library'; +import type { + ChakraProps, + FlexProps, + SystemStyleObject, +} from '@invoke-ai/ui-library'; import { Flex, Icon, Image } from '@invoke-ai/ui-library'; import { IAILoadingImageFallback, diff --git a/invokeai/frontend/web/src/features/canvas/components/ClearCanvasHistoryButtonModal.tsx b/invokeai/frontend/web/src/features/canvas/components/ClearCanvasHistoryButtonModal.tsx index 98b720f610..209ca91479 100644 --- a/invokeai/frontend/web/src/features/canvas/components/ClearCanvasHistoryButtonModal.tsx +++ b/invokeai/frontend/web/src/features/canvas/components/ClearCanvasHistoryButtonModal.tsx @@ -1,4 +1,8 @@ -import { Button, ConfirmationAlertDialog, useDisclosure } from '@invoke-ai/ui-library'; +import { + Button, + ConfirmationAlertDialog, + useDisclosure, +} from '@invoke-ai/ui-library'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import { isStagingSelector } from 'features/canvas/store/canvasSelectors'; import { clearCanvasHistory } from 'features/canvas/store/canvasSlice'; diff --git a/invokeai/frontend/web/src/features/controlAdapters/components/parameters/ParamControlAdapterBeginEnd.tsx b/invokeai/frontend/web/src/features/controlAdapters/components/parameters/ParamControlAdapterBeginEnd.tsx index bfe513d1fd..409251d5d1 100644 --- a/invokeai/frontend/web/src/features/controlAdapters/components/parameters/ParamControlAdapterBeginEnd.tsx +++ b/invokeai/frontend/web/src/features/controlAdapters/components/parameters/ParamControlAdapterBeginEnd.tsx @@ -1,4 +1,8 @@ -import { CompositeRangeSlider, FormControl, FormLabel } from '@invoke-ai/ui-library'; +import { + CompositeRangeSlider, + FormControl, + FormLabel, +} from '@invoke-ai/ui-library'; import { useAppDispatch } from 'app/store/storeHooks'; import { useControlAdapterBeginEndStepPct } from 'features/controlAdapters/hooks/useControlAdapterBeginEndStepPct'; import { useControlAdapterIsEnabled } from 'features/controlAdapters/hooks/useControlAdapterIsEnabled'; diff --git a/invokeai/frontend/web/src/features/gallery/components/Boards/BoardContextMenu.tsx b/invokeai/frontend/web/src/features/gallery/components/Boards/BoardContextMenu.tsx index 2e1f4ce90a..8d25fbff72 100644 --- a/invokeai/frontend/web/src/features/gallery/components/Boards/BoardContextMenu.tsx +++ b/invokeai/frontend/web/src/features/gallery/components/Boards/BoardContextMenu.tsx @@ -1,5 +1,10 @@ import type { ContextMenuProps } from '@invoke-ai/ui-library'; -import { ContextMenu, MenuGroup, MenuItem, MenuList } from '@invoke-ai/ui-library'; +import { + ContextMenu, + MenuGroup, + MenuItem, + MenuList, +} from '@invoke-ai/ui-library'; import { createSelector } from '@reduxjs/toolkit'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import { diff --git a/invokeai/frontend/web/src/features/gallery/components/ImageMetadataViewer/ImageMetadataItem.tsx b/invokeai/frontend/web/src/features/gallery/components/ImageMetadataViewer/ImageMetadataItem.tsx index 7863a1ccb5..3018c80b94 100644 --- a/invokeai/frontend/web/src/features/gallery/components/ImageMetadataViewer/ImageMetadataItem.tsx +++ b/invokeai/frontend/web/src/features/gallery/components/ImageMetadataViewer/ImageMetadataItem.tsx @@ -1,4 +1,10 @@ -import { ExternalLink, Flex, IconButton, Text, Tooltip } from '@invoke-ai/ui-library'; +import { + ExternalLink, + Flex, + IconButton, + Text, + Tooltip, +} from '@invoke-ai/ui-library'; import { memo, useCallback } from 'react'; import { useTranslation } from 'react-i18next'; import { IoArrowUndoCircleOutline } from 'react-icons/io5'; diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/FieldContextMenu.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/FieldContextMenu.tsx index 7ef79d9544..35ea2e80f1 100644 --- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/FieldContextMenu.tsx +++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/FieldContextMenu.tsx @@ -1,5 +1,10 @@ import type { ContextMenuProps } from '@invoke-ai/ui-library'; -import { ContextMenu, MenuGroup, MenuItem, MenuList } from '@invoke-ai/ui-library'; +import { + ContextMenu, + MenuGroup, + MenuItem, + MenuList, +} from '@invoke-ai/ui-library'; import { createSelector } from '@reduxjs/toolkit'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import { useFieldInputKind } from 'features/nodes/hooks/useFieldInputKind'; diff --git a/invokeai/frontend/web/src/features/nodes/components/sidePanel/inspector/InspectorDetailsTab.tsx b/invokeai/frontend/web/src/features/nodes/components/sidePanel/inspector/InspectorDetailsTab.tsx index b278a9bea8..a2c4759a72 100644 --- a/invokeai/frontend/web/src/features/nodes/components/sidePanel/inspector/InspectorDetailsTab.tsx +++ b/invokeai/frontend/web/src/features/nodes/components/sidePanel/inspector/InspectorDetailsTab.tsx @@ -1,4 +1,11 @@ -import { Box, Flex, FormControl, FormLabel, HStack, Text } from '@invoke-ai/ui-library'; +import { + Box, + Flex, + FormControl, + FormLabel, + HStack, + Text, +} from '@invoke-ai/ui-library'; import { createMemoizedSelector } from 'app/store/createMemoizedSelector'; import { useAppSelector } from 'app/store/storeHooks'; import { IAINoContentFallback } from 'common/components/IAIImageFallback'; diff --git a/invokeai/frontend/web/src/features/nodes/components/sidePanel/inspector/InspectorPanel.tsx b/invokeai/frontend/web/src/features/nodes/components/sidePanel/inspector/InspectorPanel.tsx index a09970cdc5..e4d1bc5d6c 100644 --- a/invokeai/frontend/web/src/features/nodes/components/sidePanel/inspector/InspectorPanel.tsx +++ b/invokeai/frontend/web/src/features/nodes/components/sidePanel/inspector/InspectorPanel.tsx @@ -1,4 +1,11 @@ -import { Flex, Tab, TabList, TabPanel, TabPanels, Tabs } from '@invoke-ai/ui-library'; +import { + Flex, + Tab, + TabList, + TabPanel, + TabPanels, + Tabs, +} from '@invoke-ai/ui-library'; import { memo } from 'react'; import { useTranslation } from 'react-i18next'; diff --git a/invokeai/frontend/web/src/features/nodes/components/sidePanel/inspector/details/EditableNodeTitle.tsx b/invokeai/frontend/web/src/features/nodes/components/sidePanel/inspector/details/EditableNodeTitle.tsx index 444eb09e35..d75e52f3ad 100644 --- a/invokeai/frontend/web/src/features/nodes/components/sidePanel/inspector/details/EditableNodeTitle.tsx +++ b/invokeai/frontend/web/src/features/nodes/components/sidePanel/inspector/details/EditableNodeTitle.tsx @@ -1,4 +1,9 @@ -import { Editable, EditableInput, EditablePreview, Flex } from '@invoke-ai/ui-library'; +import { + Editable, + EditableInput, + EditablePreview, + Flex, +} from '@invoke-ai/ui-library'; import { useAppDispatch } from 'app/store/storeHooks'; import { useNodeLabel } from 'features/nodes/hooks/useNodeLabel'; import { useNodeTemplateTitle } from 'features/nodes/hooks/useNodeTemplateTitle'; diff --git a/invokeai/frontend/web/src/features/nodes/components/sidePanel/workflow/WorkflowPanel.tsx b/invokeai/frontend/web/src/features/nodes/components/sidePanel/workflow/WorkflowPanel.tsx index b9e09eb9e2..96d8764ccb 100644 --- a/invokeai/frontend/web/src/features/nodes/components/sidePanel/workflow/WorkflowPanel.tsx +++ b/invokeai/frontend/web/src/features/nodes/components/sidePanel/workflow/WorkflowPanel.tsx @@ -1,4 +1,11 @@ -import { Flex, Tab, TabList, TabPanel, TabPanels, Tabs } from '@invoke-ai/ui-library'; +import { + Flex, + Tab, + TabList, + TabPanel, + TabPanels, + Tabs, +} from '@invoke-ai/ui-library'; import { memo } from 'react'; import { useTranslation } from 'react-i18next'; diff --git a/invokeai/frontend/web/src/features/parameters/components/MainModel/ParamMainModelSelect.tsx b/invokeai/frontend/web/src/features/parameters/components/MainModel/ParamMainModelSelect.tsx index 0d626db26e..6de3868e72 100644 --- a/invokeai/frontend/web/src/features/parameters/components/MainModel/ParamMainModelSelect.tsx +++ b/invokeai/frontend/web/src/features/parameters/components/MainModel/ParamMainModelSelect.tsx @@ -1,4 +1,9 @@ -import { Combobox, FormControl, FormLabel, Tooltip } from '@invoke-ai/ui-library'; +import { + Combobox, + FormControl, + FormLabel, + Tooltip, +} from '@invoke-ai/ui-library'; import { createMemoizedSelector } from 'app/store/createMemoizedSelector'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import { useGroupedModelCombobox } from 'common/hooks/useGroupedModelCombobox'; diff --git a/invokeai/frontend/web/src/features/parameters/components/Seed/ParamSeedNumberInput.tsx b/invokeai/frontend/web/src/features/parameters/components/Seed/ParamSeedNumberInput.tsx index 86cc7b0e54..6dc76adbe1 100644 --- a/invokeai/frontend/web/src/features/parameters/components/Seed/ParamSeedNumberInput.tsx +++ b/invokeai/frontend/web/src/features/parameters/components/Seed/ParamSeedNumberInput.tsx @@ -1,4 +1,8 @@ -import { CompositeNumberInput, FormControl, FormLabel } from '@invoke-ai/ui-library'; +import { + CompositeNumberInput, + FormControl, + FormLabel, +} from '@invoke-ai/ui-library'; import { NUMPY_RAND_MAX, NUMPY_RAND_MIN } from 'app/constants'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import { InformationalPopover } from 'common/components/InformationalPopover/InformationalPopover'; diff --git a/invokeai/frontend/web/src/features/queue/components/ClearQueueIconButton.tsx b/invokeai/frontend/web/src/features/queue/components/ClearQueueIconButton.tsx index 8400fab7fd..fe8763d65f 100644 --- a/invokeai/frontend/web/src/features/queue/components/ClearQueueIconButton.tsx +++ b/invokeai/frontend/web/src/features/queue/components/ClearQueueIconButton.tsx @@ -1,5 +1,9 @@ import type { IconButtonProps } from '@invoke-ai/ui-library'; -import { IconButton, useDisclosure, useShiftModifier } from '@invoke-ai/ui-library'; +import { + IconButton, + useDisclosure, + useShiftModifier, +} from '@invoke-ai/ui-library'; import ClearQueueConfirmationAlertDialog from 'features/queue/components/ClearQueueConfirmationAlertDialog'; import { useCancelCurrentQueueItem } from 'features/queue/hooks/useCancelCurrentQueueItem'; import { useClearQueue } from 'features/queue/hooks/useClearQueue'; diff --git a/invokeai/frontend/web/src/features/queue/components/QueueButtonTooltip.tsx b/invokeai/frontend/web/src/features/queue/components/QueueButtonTooltip.tsx index 24baed9e3d..e34a096ae1 100644 --- a/invokeai/frontend/web/src/features/queue/components/QueueButtonTooltip.tsx +++ b/invokeai/frontend/web/src/features/queue/components/QueueButtonTooltip.tsx @@ -1,4 +1,10 @@ -import { Divider, Flex, ListItem, Text, UnorderedList } from '@invoke-ai/ui-library'; +import { + Divider, + Flex, + ListItem, + Text, + UnorderedList, +} from '@invoke-ai/ui-library'; import { createSelector } from '@reduxjs/toolkit'; import { useAppSelector } from 'app/store/storeHooks'; import { useIsReadyToEnqueue } from 'common/hooks/useIsReadyToEnqueue'; diff --git a/invokeai/frontend/web/src/features/queue/components/QueueList/QueueItemComponent.tsx b/invokeai/frontend/web/src/features/queue/components/QueueList/QueueItemComponent.tsx index 250bbbafb6..2e08d36db9 100644 --- a/invokeai/frontend/web/src/features/queue/components/QueueList/QueueItemComponent.tsx +++ b/invokeai/frontend/web/src/features/queue/components/QueueList/QueueItemComponent.tsx @@ -1,5 +1,11 @@ import type { ChakraProps, CollapseProps } from '@invoke-ai/ui-library'; -import { ButtonGroup, Collapse, Flex, IconButton, Text } from '@invoke-ai/ui-library'; +import { + ButtonGroup, + Collapse, + Flex, + IconButton, + Text, +} from '@invoke-ai/ui-library'; import QueueStatusBadge from 'features/queue/components/common/QueueStatusBadge'; import { useCancelQueueItem } from 'features/queue/hooks/useCancelQueueItem'; import { getSecondsFromTimestamps } from 'features/queue/util/getSecondsFromTimestamps'; diff --git a/invokeai/frontend/web/src/features/settingsAccordions/components/AdvancedSettingsAccordion/AdvancedSettingsAccordion.tsx b/invokeai/frontend/web/src/features/settingsAccordions/components/AdvancedSettingsAccordion/AdvancedSettingsAccordion.tsx index 229296b7ae..637819ff9b 100644 --- a/invokeai/frontend/web/src/features/settingsAccordions/components/AdvancedSettingsAccordion/AdvancedSettingsAccordion.tsx +++ b/invokeai/frontend/web/src/features/settingsAccordions/components/AdvancedSettingsAccordion/AdvancedSettingsAccordion.tsx @@ -1,5 +1,9 @@ import type { FormLabelProps } from '@invoke-ai/ui-library'; -import { Flex, FormControlGroup, StandaloneAccordion } from '@invoke-ai/ui-library'; +import { + Flex, + FormControlGroup, + StandaloneAccordion, +} from '@invoke-ai/ui-library'; import { createMemoizedSelector } from 'app/store/createMemoizedSelector'; import { useAppSelector } from 'app/store/storeHooks'; import ParamCFGRescaleMultiplier from 'features/parameters/components/Advanced/ParamCFGRescaleMultiplier'; From 89da69f64705f2cd21ef682bfcff4434b39a00b0 Mon Sep 17 00:00:00 2001 From: psychedelicious <4822129+psychedelicious@users.noreply.github.com> Date: Sat, 27 Jan 2024 20:53:32 +1100 Subject: [PATCH 06/14] fix(ui): correct import in ReduxInit --- invokeai/frontend/web/.storybook/ReduxInit.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/invokeai/frontend/web/.storybook/ReduxInit.tsx b/invokeai/frontend/web/.storybook/ReduxInit.tsx index 9e62877ef0..55d0132242 100644 --- a/invokeai/frontend/web/.storybook/ReduxInit.tsx +++ b/invokeai/frontend/web/.storybook/ReduxInit.tsx @@ -1,7 +1,7 @@ import { PropsWithChildren, memo, useEffect } from 'react'; import { modelChanged } from '../src/features/parameters/store/generationSlice'; import { useAppDispatch } from '../src/app/store/storeHooks'; -import { useGlobalModifiersInit } from '@invoke-ai/ui'; +import { useGlobalModifiersInit } from '@invoke-ai/ui-library'; /** * Initializes some state for storybook. Must be in a different component * so that it is run inside the redux context. From b922ee566a82914518d2141ee31652e2db658f6a Mon Sep 17 00:00:00 2001 From: psychedelicious <4822129+psychedelicious@users.noreply.github.com> Date: Sat, 27 Jan 2024 20:54:54 +1100 Subject: [PATCH 07/14] chore(ui): use new prettier config --- invokeai/frontend/web/.prettierrc.js | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/invokeai/frontend/web/.prettierrc.js b/invokeai/frontend/web/.prettierrc.js index bffbd08257..c7f57d1475 100644 --- a/invokeai/frontend/web/.prettierrc.js +++ b/invokeai/frontend/web/.prettierrc.js @@ -1,9 +1,5 @@ module.exports = { - trailingComma: 'es5', - tabWidth: 2, - semi: true, - singleQuote: true, - endOfLine: 'auto', + ...require('@invoke-ai/prettier-config-react'), overrides: [ { files: ['public/locales/*.json'], From 189c430e46d5c0f5b5bf6231bc20d3a8ee2bb646 Mon Sep 17 00:00:00 2001 From: psychedelicious <4822129+psychedelicious@users.noreply.github.com> Date: Sat, 27 Jan 2024 20:55:55 +1100 Subject: [PATCH 08/14] chore(ui): format Lots of changed bc the line length is now 120. May as well do it now. --- invokeai/frontend/web/.unimportedrc.json | 8 +- invokeai/frontend/web/public/locales/en.json | 37 +- invokeai/frontend/web/scripts/typegen.js | 4 +- .../frontend/web/src/app/components/App.tsx | 13 +- .../components/AppErrorBoundaryFallback.tsx | 42 +- .../app/components/ThemeLocaleProvider.tsx | 8 +- .../web/src/app/components/Toaster.ts | 5 +- .../frontend/web/src/app/hooks/useSocketIO.ts | 14 +- .../frontend/web/src/app/logging/logger.ts | 15 +- .../frontend/web/src/app/logging/useLogger.ts | 5 +- .../src/app/store/createMemoizedSelector.ts | 6 +- .../store/enhancers/reduxRemember/driver.ts | 11 +- .../store/middleware/debugLoggerMiddleware.ts | 19 +- .../middleware/devtools/actionSanitizer.ts | 3 +- .../middleware/listenerMiddleware/index.ts | 26 +- .../addCommitStagingAreaImageListener.ts | 11 +- .../addFirstListImagesListener.ts.ts | 10 +- .../listeners/appConfigReceived.ts | 11 +- .../listeners/batchEnqueued.ts | 21 +- .../listeners/boardAndImagesDeleted.ts | 8 +- .../listeners/boardIdSelected.ts | 45 +- .../listeners/canvasCopiedToClipboard.ts | 4 +- .../listeners/canvasDownloadedAsImage.ts | 8 +- .../listeners/canvasMerged.ts | 4 +- .../listeners/controlNetAutoProcess.ts | 13 +- .../listeners/controlNetImageProcessed.ts | 24 +- .../listeners/enqueueRequestedCanvas.ts | 32 +- .../listeners/enqueueRequestedLinear.ts | 4 +- .../listeners/galleryImageClicked.ts | 22 +- .../listeners/imageDeleted.ts | 75 +-- .../listeners/imageDropped.ts | 37 +- .../listeners/imageToDeleteSelected.ts | 5 +- .../listeners/imageUploaded.ts | 13 +- .../listeners/initialImageSelected.ts | 6 +- .../listeners/modelSelected.ts | 17 +- .../listeners/modelsLoaded.ts | 101 +-- .../listeners/promptChanged.ts | 13 +- .../listeners/receivedOpenAPISchema.ts | 16 +- .../listeners/socketio/socketConnected.ts | 10 +- .../socketio/socketInvocationComplete.ts | 50 +- .../socketio/socketInvocationError.ts | 5 +- .../socketInvocationRetrievalError.ts | 5 +- .../socketio/socketInvocationStarted.ts | 5 +- .../listeners/socketio/socketModelLoad.ts | 11 +- .../socketio/socketQueueItemStatusChanged.ts | 31 +- .../socketio/socketSessionRetrievalError.ts | 5 +- .../listeners/updateAllNodesRequested.ts | 5 +- .../listeners/upscaleRequested.ts | 23 +- .../listeners/workflowLoadRequested.ts | 20 +- .../web/src/app/store/nanostores/store.ts | 4 +- .../store/nanostores/workflowCategories.ts | 5 +- invokeai/frontend/web/src/app/store/store.ts | 69 +- .../src/common/components/IAIColorPicker.tsx | 39 +- .../web/src/common/components/IAIDndImage.tsx | 56 +- .../src/common/components/IAIDropOverlay.tsx | 7 +- .../src/common/components/IAIDroppable.tsx | 4 +- .../src/common/components/IAIFillSkeleton.tsx | 8 +- .../common/components/IAIImageFallback.tsx | 62 +- .../common/components/ImageUploadOverlay.tsx | 4 +- .../InformationalPopover.tsx | 70 +- .../InformationalPopover/constants.ts | 4 +- .../src/common/components/Loading/Loading.tsx | 9 +- .../OverlayScrollbars/ScrollableContent.tsx | 13 +- .../src/common/hooks/useFullscreenDropzone.ts | 29 +- .../web/src/common/hooks/useGlobalHotkeys.ts | 21 +- .../common/hooks/useGroupedModelCombobox.ts | 14 +- .../src/common/hooks/useImageUploadButton.tsx | 5 +- .../src/common/hooks/useIsReadyToEnqueue.ts | 28 +- .../web/src/common/hooks/useModelCombobox.ts | 14 +- .../web/src/common/util/arrayBuffer.ts | 7 +- .../web/src/common/util/colorTokenToCssVar.ts | 3 +- .../web/src/common/util/generateSeeds.ts | 12 +- .../src/common/util/roundDownToMultiple.ts | 5 +- .../ClearCanvasHistoryButtonModal.tsx | 18 +- .../features/canvas/components/IAICanvas.tsx | 84 +-- .../IAICanvasBoundingBoxOverlay.tsx | 18 +- .../canvas/components/IAICanvasImage.tsx | 9 +- .../IAICanvasImageErrorFallback.tsx | 4 +- .../components/IAICanvasIntermediateImage.tsx | 26 +- .../components/IAICanvasMaskCompositer.tsx | 31 +- .../canvas/components/IAICanvasMaskLines.tsx | 4 +- .../components/IAICanvasObjectRenderer.tsx | 4 +- .../components/IAICanvasStagingArea.tsx | 19 +- .../IAICanvasStagingAreaToolbar.tsx | 41 +- .../canvas/components/IAICanvasStatusText.tsx | 39 +- .../IAICanvasStatusTextCursorPos.tsx | 6 +- .../components/IAICanvasToolPreview.tsx | 161 ++--- .../IAICanvasToolbar/IAICanvasBoundingBox.tsx | 76 +-- .../IAICanvasToolbar/IAICanvasMaskOptions.tsx | 37 +- .../IAICanvasSettingsButtonPopover.tsx | 86 +-- .../IAICanvasToolChooserOptions.tsx | 18 +- .../IAICanvasToolbar/IAICanvasToolbar.tsx | 27 +- .../canvas/hooks/useCanvasDragMove.ts | 14 +- .../canvas/hooks/useCanvasGenerationMode.ts | 37 +- .../features/canvas/hooks/useCanvasHotkeys.ts | 7 +- .../canvas/hooks/useCanvasMouseDown.ts | 6 +- .../canvas/hooks/useCanvasMouseMove.ts | 19 +- .../features/canvas/hooks/useCanvasMouseUp.ts | 10 +- .../features/canvas/hooks/useCanvasZoom.ts | 17 +- .../canvas/hooks/useColorUnderCursor.ts | 25 +- .../web/src/features/canvas/store/actions.ts | 24 +- .../features/canvas/store/canvasNanostore.ts | 3 +- .../features/canvas/store/canvasSelectors.ts | 9 +- .../src/features/canvas/store/canvasSlice.ts | 140 +--- .../src/features/canvas/store/canvasTypes.ts | 16 +- .../canvas/util/calculateCoordinates.ts | 8 +- .../features/canvas/util/createMaskStage.ts | 3 +- .../canvas/util/dataURLToImageData.ts | 6 +- .../features/canvas/util/getBaseLayerBlob.ts | 11 +- .../src/features/canvas/util/getCanvasData.ts | 15 +- .../canvas/util/getCanvasGenerationMode.ts | 16 +- .../util/getScaledBoundingBoxDimensions.ts | 15 +- .../canvas/util/isElChildOfCanvasTab.tsx | 4 +- .../features/canvas/util/konvaNodeToBlob.ts | 5 +- .../canvas/util/konvaNodeToImageData.ts | 11 +- .../canvas/util/roundDimensionsToMultiple.ts | 5 +- .../components/ChangeBoardModal.tsx | 30 +- .../features/changeBoardModal/store/slice.ts | 6 +- .../components/ControlAdapterConfig.tsx | 54 +- .../components/ControlAdapterImagePreview.tsx | 53 +- .../ControlAdapterProcessorComponent.tsx | 112 +--- .../ControlAdapterShouldAutoConfig.tsx | 5 +- .../imports/ControlNetCanvasImageImports.tsx | 9 +- .../ParamControlAdapterBeginEnd.tsx | 11 +- .../ParamControlAdapterControlMode.tsx | 6 +- .../parameters/ParamControlAdapterModel.tsx | 40 +- .../ParamControlAdapterProcessorSelect.tsx | 18 +- .../ParamControlAdapterResizeMode.tsx | 12 +- .../parameters/ParamControlAdapterWeight.tsx | 15 +- .../components/processors/CannyProcessor.tsx | 10 +- .../processors/ColorMapProcessor.tsx | 10 +- .../processors/ContentShuffleProcessor.tsx | 58 +- .../processors/DepthAnyThingProcessor.tsx | 13 +- .../components/processors/HedProcessor.tsx | 11 +- .../processors/LineartAnimeProcessor.tsx | 7 +- .../processors/LineartProcessor.tsx | 11 +- .../processors/MediapipeFaceProcessor.tsx | 10 +- .../processors/MidasDepthProcessor.tsx | 7 +- .../processors/MlsdImageProcessor.tsx | 10 +- .../processors/NormalBaeProcessor.tsx | 10 +- .../processors/OpenposeProcessor.tsx | 11 +- .../components/processors/PidiProcessor.tsx | 11 +- .../hooks/useAddControlAdapter.ts | 4 +- .../hooks/useControlAdapterControlImage.ts | 3 +- .../hooks/useControlAdapterIsEnabled.ts | 3 +- .../hooks/useControlAdapterModel.ts | 3 +- .../hooks/useControlAdapterModels.ts | 15 +- .../useControlAdapterProcessedControlImage.ts | 4 +- .../hooks/useControlAdapterProcessorNode.ts | 4 +- .../hooks/useControlAdapterProcessorType.ts | 4 +- .../hooks/useControlAdapterWeight.ts | 3 +- .../controlAdapters/store/constants.ts | 5 +- .../store/controlAdaptersPersistDenylist.ts | 4 +- .../store/controlAdaptersSlice.ts | 120 +--- .../features/controlAdapters/store/types.ts | 157 +---- .../util/buildControlAdapter.ts | 6 +- .../components/DeleteImageModal.tsx | 53 +- .../components/ImageUsageMessage.tsx | 16 +- .../deleteImageModal/store/selectors.ts | 12 +- .../features/deleteImageModal/store/slice.ts | 9 +- .../features/dnd/components/AppDndContext.tsx | 19 +- .../features/dnd/components/DndOverlay.tsx | 13 +- .../features/dnd/components/DragPreview.tsx | 17 +- .../dnd/hooks/useScaledCenteredModifer.ts | 6 +- .../web/src/features/dnd/types/index.ts | 31 +- .../features/dnd/util/customPointerWithin.ts | 19 +- .../web/src/features/dnd/util/isValidDrop.ts | 13 +- .../ParamDynamicPromptsMaxPrompts.tsx | 27 +- .../components/ParamDynamicPromptsPreview.tsx | 51 +- .../ParamDynamicPromptsSeedBehaviour.tsx | 15 +- .../ShowDynamicPromptsPreviewButton.tsx | 12 +- .../store/dynamicPromptsPersistDenylist.ts | 3 +- .../store/dynamicPromptsSlice.ts | 11 +- .../util/getShouldProcessPrompt.ts | 3 +- .../features/embedding/EmbeddingPopover.tsx | 7 +- .../features/embedding/EmbeddingSelect.tsx | 92 ++- .../web/src/features/embedding/usePrompt.ts | 12 +- .../components/Boards/BoardAutoAddSelect.tsx | 9 +- .../components/Boards/BoardContextMenu.tsx | 44 +- .../Boards/BoardsList/BoardsList.tsx | 30 +- .../Boards/BoardsList/BoardsSearch.tsx | 7 +- .../Boards/BoardsList/GalleryBoard.tsx | 74 +-- .../Boards/BoardsList/NoBoardBoard.tsx | 33 +- .../components/Boards/DeleteBoardModal.tsx | 59 +- .../Boards/GalleryBoardContextMenuItems.tsx | 6 +- .../CurrentImage/CurrentImageButtons.tsx | 53 +- .../CurrentImage/CurrentImagePreview.tsx | 43 +- .../components/CurrentImage/ProgressImage.tsx | 8 +- .../components/GallerySettingsPopover.tsx | 21 +- .../MultipleSelectionMenuItems.tsx | 37 +- .../SingleSelectionMenuItems.tsx | 83 +-- .../components/ImageGalleryContent.tsx | 43 +- .../components/ImageGrid/GalleryImage.tsx | 39 +- .../components/ImageGrid/GalleryImageGrid.tsx | 29 +- .../ImageGrid/ImageGridItemContainer.tsx | 7 +- .../ImageGrid/ImageGridListContainer.tsx | 4 +- .../ImageGrid/getGalleryImageDataTestId.ts | 3 +- .../ImageMetadataViewer/DataViewer.tsx | 36 +- .../ImageMetadataActions.tsx | 89 +-- .../ImageMetadataViewer/ImageMetadataItem.tsx | 22 +- .../ImageMetadataViewer.tsx | 19 +- .../components/NextPrevImageButtons.tsx | 23 +- .../gallery/hooks/useGalleryHotkeys.ts | 26 +- .../gallery/hooks/useGalleryImages.ts | 5 +- .../gallery/hooks/useGalleryNavigation.ts | 39 +- .../features/gallery/hooks/useMultiselect.ts | 9 +- .../gallery/hooks/useScrollIntoView.ts | 6 +- .../web/src/features/gallery/store/actions.ts | 7 +- .../gallery/store/gallerySelectors.ts | 8 +- .../features/gallery/store/gallerySlice.ts | 26 +- .../web/src/features/gallery/store/types.ts | 7 +- .../gallery/util/getScrollToIndexAlign.ts | 5 +- .../hrf/components/ParamHrfMethod.tsx | 5 +- .../hrf/components/ParamHrfStrength.tsx | 15 +- .../hrf/components/ParamHrfToggle.tsx | 3 +- .../web/src/features/hrf/store/hrfSlice.ts | 5 +- .../src/features/lora/components/LoRAList.tsx | 4 +- .../features/lora/components/LoRASelect.tsx | 9 +- .../web/src/features/lora/store/loraSlice.ts | 20 +- .../SyncModels/SyncModelsIconButton.tsx | 42 +- .../modelManager/store/modelManagerSlice.ts | 3 +- .../subpanels/AddModelsPanel/AddModels.tsx | 29 +- .../AddModelsPanel/AdvancedAddCheckpoint.tsx | 44 +- .../AddModelsPanel/AdvancedAddDiffusers.tsx | 33 +- .../AddModelsPanel/AdvancedAddModels.tsx | 11 +- .../AddModelsPanel/FoundModelsList.tsx | 102 +-- .../AddModelsPanel/ScanAdvancedAddModels.tsx | 52 +- .../AddModelsPanel/SearchFolderForm.tsx | 41 +- .../AddModelsPanel/SimpleAddModels.tsx | 29 +- .../subpanels/ImportModelsPanel.tsx | 15 +- .../subpanels/MergeModelsPanel.tsx | 145 +---- .../subpanels/ModelManagerPanel.tsx | 26 +- .../ModelManagerPanel/CheckpointModelEdit.tsx | 47 +- .../ModelManagerPanel/DiffusersModelEdit.tsx | 35 +- .../ModelManagerPanel/LoRAModelEdit.tsx | 39 +- .../ModelManagerPanel/ModelConvert.tsx | 52 +- .../subpanels/ModelManagerPanel/ModelList.tsx | 159 ++--- .../ModelManagerPanel/ModelListItem.tsx | 29 +- .../ModelManagerSettingsPanel/SyncModels.tsx | 10 +- .../subpanels/shared/BaseModelSelect.tsx | 9 +- .../shared/CheckpointConfigsSelect.tsx | 28 +- .../subpanels/shared/ModelVariantSelect.tsx | 16 +- .../features/nodes/components/NodeEditor.tsx | 19 +- .../flow/AddNodePopover/AddNodePopover.tsx | 135 ++-- .../features/nodes/components/flow/Flow.tsx | 56 +- .../connectionLines/CustomConnectionLine.tsx | 26 +- .../flow/edges/InvocationCollapsedEdge.tsx | 16 +- .../flow/edges/InvocationDefaultEdge.tsx | 9 +- .../flow/edges/util/makeEdgeSelector.ts | 12 +- .../nodes/CurrentImage/CurrentImageNode.tsx | 56 +- .../flow/nodes/Invocation/InvocationNode.tsx | 26 +- .../InvocationNodeClassificationIcon.tsx | 31 +- .../Invocation/InvocationNodeInfoIcon.tsx | 14 +- .../InvocationNodeStatusIndicator.tsx | 59 +- .../InvocationNodeUnknownFallback.tsx | 8 +- .../Invocation/InvocationNodeWrapper.tsx | 23 +- .../flow/nodes/Invocation/NotesTextarea.tsx | 7 +- .../nodes/Invocation/UseCacheCheckbox.tsx | 6 +- .../Invocation/fields/EditableFieldTitle.tsx | 32 +- .../Invocation/fields/FieldContextMenu.tsx | 46 +- .../nodes/Invocation/fields/FieldHandle.tsx | 31 +- .../nodes/Invocation/fields/FieldTitle.tsx | 4 +- .../Invocation/fields/FieldTooltipContent.tsx | 5 +- .../nodes/Invocation/fields/InputField.tsx | 76 +-- .../Invocation/fields/InputFieldRenderer.tsx | 215 ++---- .../Invocation/fields/LinearViewField.tsx | 17 +- .../nodes/Invocation/fields/OutputField.tsx | 65 +- .../inputs/BoardFieldInputComponent.tsx | 14 +- .../inputs/BooleanFieldInputComponent.tsx | 18 +- .../inputs/ColorFieldInputComponent.tsx | 17 +- .../ControlNetModelFieldInputComponent.tsx | 25 +- .../fields/inputs/EnumFieldInputComponent.tsx | 19 +- .../IPAdapterModelFieldInputComponent.tsx | 21 +- .../inputs/ImageFieldInputComponent.tsx | 26 +- .../inputs/LoRAModelFieldInputComponent.tsx | 31 +- .../inputs/MainModelFieldInputComponent.tsx | 29 +- .../inputs/NumberFieldInputComponent.tsx | 5 +- .../RefinerModelFieldInputComponent.tsx | 24 +- .../SDXLMainModelFieldInputComponent.tsx | 29 +- .../inputs/SchedulerFieldInputComponent.tsx | 15 +- .../inputs/StringFieldInputComponent.tsx | 27 +- .../T2IAdapterModelFieldInputComponent.tsx | 21 +- .../inputs/VAEModelFieldInputComponent.tsx | 29 +- .../nodes/Invocation/fields/inputs/types.ts | 10 +- .../components/flow/nodes/Notes/NotesNode.tsx | 8 +- .../flow/nodes/common/NodeTitle.tsx | 32 +- .../flow/nodes/common/NodeWrapper.tsx | 17 +- .../BottomLeftPanel/ViewportControls.tsx | 16 +- .../flow/panels/MinimapPanel/MinimapPanel.tsx | 4 +- .../flow/panels/TopPanel/TopPanel.tsx | 13 +- .../panels/TopPanel/UpdateNodesButton.tsx | 6 +- .../flow/panels/TopPanel/WorkflowName.tsx | 13 +- .../panels/TopRightPanel/TopRightPanel.tsx | 3 +- .../TopRightPanel/WorkflowEditorSettings.tsx | 50 +- .../sidePanel/NodeEditorPanelGroup.tsx | 5 +- .../sidePanel/inspector/InspectorDataTab.tsx | 7 +- .../inspector/InspectorDetailsTab.tsx | 65 +- .../inspector/InspectorOutputsTab.tsx | 63 +- .../sidePanel/inspector/InspectorPanel.tsx | 19 +- .../inspector/InspectorTemplateTab.tsx | 29 +- .../inspector/details/EditableNodeTitle.tsx | 15 +- .../sidePanel/workflow/WorkflowGeneralTab.tsx | 33 +- .../sidePanel/workflow/WorkflowLinearTab.tsx | 26 +- .../sidePanel/workflow/WorkflowPanel.tsx | 19 +- .../hooks/useAnyOrDirectInputFieldNames.ts | 35 +- .../src/features/nodes/hooks/useBuildNode.ts | 14 +- .../hooks/useConnectionInputFieldNames.ts | 41 +- .../nodes/hooks/useConnectionState.ts | 29 +- .../nodes/hooks/useDoNodeVersionsMatch.ts | 24 +- .../features/nodes/hooks/useFieldInputKind.ts | 20 +- .../nodes/hooks/useFieldInputTemplate.ts | 18 +- .../nodes/hooks/useFieldOutputTemplate.ts | 18 +- .../features/nodes/hooks/useFieldTemplate.ts | 24 +- .../nodes/hooks/useFieldTemplateTitle.ts | 24 +- .../features/nodes/hooks/useFieldType.ts.ts | 6 +- .../nodes/hooks/useGetNodesNeedUpdate.ts | 19 +- .../nodes/hooks/useIsValidConnection.ts | 4 +- .../nodes/hooks/useNodeClassification.ts | 18 +- .../nodes/hooks/useNodeNeedsUpdate.ts | 18 +- .../features/nodes/hooks/useNodeTemplate.ts | 14 +- .../nodes/hooks/useNodeTemplateByType.ts | 9 +- .../nodes/hooks/useNodeTemplateTitle.ts | 22 +- .../nodes/hooks/useOutputFieldNames.ts | 26 +- .../src/features/nodes/hooks/useWithFooter.ts | 5 +- .../nodes/hooks/useWorkflowWatcher.ts | 10 +- .../web/src/features/nodes/store/actions.ts | 16 +- .../nodes/store/nodeTemplatesSlice.ts | 8 +- .../src/features/nodes/store/nodesSlice.ts | 228 ++----- .../web/src/features/nodes/store/types.ts | 7 +- .../store/util/findConnectionToValidHandle.ts | 49 +- .../nodes/store/util/getIsGraphAcyclic.ts | 7 +- .../util/makeIsConnectionValidSelector.ts | 15 +- .../util/validateSourceAndTargetTypes.ts | 28 +- .../src/features/nodes/store/workflowSlice.ts | 24 +- .../web/src/features/nodes/types/common.ts | 31 +- .../web/src/features/nodes/types/field.ts | 612 ++++++------------ .../src/features/nodes/types/invocation.ts | 30 +- .../web/src/features/nodes/types/metadata.ts | 4 +- .../web/src/features/nodes/types/openapi.ts | 47 +- .../web/src/features/nodes/types/semver.ts | 4 +- .../src/features/nodes/types/v1/workflowV1.ts | 26 +- .../web/src/features/nodes/types/workflow.ts | 14 +- .../util/graph/addControlNetToLinearGraph.ts | 15 +- .../nodes/util/graph/addHrfToGraph.ts | 29 +- .../util/graph/addIPAdapterToLinearGraph.ts | 19 +- .../nodes/util/graph/addLinearUIOutputNode.ts | 13 +- .../nodes/util/graph/addLoRAsToGraph.ts | 22 +- .../nodes/util/graph/addNSFWCheckerToGraph.ts | 10 +- .../nodes/util/graph/addSDXLLoRAstoGraph.ts | 24 +- .../nodes/util/graph/addSDXLRefinerToGraph.ts | 39 +- .../util/graph/addSeamlessToLinearGraph.ts | 15 +- .../util/graph/addT2IAdapterToLinearGraph.ts | 19 +- .../nodes/util/graph/addVAEToGraph.ts | 9 +- .../nodes/util/graph/addWatermarkerToGraph.ts | 11 +- .../util/graph/buildAdHocUpscaleGraph.ts | 13 +- .../nodes/util/graph/buildCanvasGraph.ts | 32 +- .../graph/buildCanvasImageToImageGraph.ts | 34 +- .../util/graph/buildCanvasInpaintGraph.ts | 18 +- .../util/graph/buildCanvasOutpaintGraph.ts | 14 +- .../graph/buildCanvasSDXLImageToImageGraph.ts | 48 +- .../util/graph/buildCanvasSDXLInpaintGraph.ts | 25 +- .../graph/buildCanvasSDXLOutpaintGraph.ts | 29 +- .../graph/buildCanvasSDXLTextToImageGraph.ts | 34 +- .../util/graph/buildCanvasTextToImageGraph.ts | 24 +- .../util/graph/buildLinearBatchConfig.ts | 18 +- .../graph/buildLinearImageToImageGraph.ts | 15 +- .../graph/buildLinearSDXLImageToImageGraph.ts | 22 +- .../graph/buildLinearSDXLTextToImageGraph.ts | 7 +- .../util/graph/buildLinearTextToImageGraph.ts | 4 +- .../nodes/util/graph/buildNodesGraph.ts | 97 ++- .../features/nodes/util/graph/constants.ts | 21 +- .../nodes/util/graph/getSDXLStylePrompt.ts | 18 +- .../src/features/nodes/util/graph/metadata.ts | 27 +- .../nodes/util/node/buildCurrentImageNode.ts | 4 +- .../nodes/util/node/buildInvocationNode.ts | 20 +- .../util/node/getSortedFilteredFieldNames.ts | 9 +- .../features/nodes/util/node/nodeUpdate.ts | 20 +- .../util/schema/buildFieldInputInstance.ts | 54 +- .../util/schema/buildFieldInputTemplate.ts | 188 +++--- .../util/schema/buildFieldOutputTemplate.ts | 5 +- .../nodes/util/schema/parseFieldType.ts | 29 +- .../features/nodes/util/schema/parseSchema.ts | 49 +- .../nodes/util/workflow/buildWorkflow.ts | 12 +- .../nodes/util/workflow/migrations.ts | 24 +- .../nodes/util/workflow/validateWorkflow.ts | 32 +- .../Advanced/ParamCFGRescaleMultiplier.tsx | 44 +- .../components/Advanced/ParamClipSkip.tsx | 11 +- .../BoundingBox/ParamBoundingBoxHeight.tsx | 31 +- .../BoundingBox/ParamBoundingBoxWidth.tsx | 27 +- .../ParamCanvasCoherenceMode.tsx | 9 +- .../ParamCanvasCoherenceSteps.tsx | 39 +- .../ParamCanvasCoherenceStrength.tsx | 11 +- .../MaskAdjustment/ParamMaskBlur.tsx | 15 +- .../MaskAdjustment/ParamMaskBlurMethod.tsx | 5 +- .../Canvas/GenerationModeStatusText.tsx | 3 +- .../InfillAndScaling/ParamInfillMethod.tsx | 5 +- .../ParamInfillPatchmatchDownscaleSize.tsx | 39 +- .../InfillAndScaling/ParamInfillTilesize.tsx | 19 +- .../ParamScaleBeforeProcessing.tsx | 9 +- .../InfillAndScaling/ParamScaledHeight.tsx | 39 +- .../InfillAndScaling/ParamScaledWidth.tsx | 39 +- .../components/Core/ParamCFGScale.tsx | 25 +- .../components/Core/ParamHeight.tsx | 20 +- .../components/Core/ParamNegativePrompt.tsx | 11 +- .../components/Core/ParamPositivePrompt.tsx | 10 +- .../components/Core/ParamScheduler.tsx | 5 +- .../parameters/components/Core/ParamSteps.tsx | 20 +- .../parameters/components/Core/ParamWidth.tsx | 20 +- .../ImageSize/AspectRatioPreview.tsx | 18 +- .../ImageSize/AspectRatioSelect.tsx | 12 +- .../components/ImageSize/ImageSizeContext.ts | 42 +- .../ImageSize/LockAspectRatioButton.tsx | 8 +- .../ImageSize/SetOptimalSizeButton.tsx | 5 +- .../components/ImageSize/calculateNewSize.ts | 5 +- .../components/ImageSize/constants.ts | 5 +- .../parameters/components/ImageSize/hooks.ts | 7 +- .../parameters/components/ImageSize/types.ts | 14 +- .../ImageToImage/ImageToImageFit.tsx | 4 +- .../ImageToImage/ImageToImageStrength.tsx | 32 +- .../components/ImageToImage/InitialImage.tsx | 25 +- .../ImageToImage/InitialImageDisplay.tsx | 24 +- .../MainModel/ParamMainModelSelect.tsx | 38 +- .../components/Seed/ParamSeedNumberInput.tsx | 15 +- .../components/Seed/ParamSeedRandomize.tsx | 12 +- .../components/Seed/ParamSeedShuffle.tsx | 4 +- .../Upscale/ParamRealESRGANModel.tsx | 17 +- .../VAEModel/ParamVAEModelSelect.tsx | 20 +- .../components/VAEModel/ParamVAEPrecision.tsx | 5 +- .../hooks/useCoreParametersCollapseLabel.ts | 9 +- .../parameters/hooks/useIsAllowedToUpscale.ts | 51 +- .../parameters/hooks/usePreselectedImage.ts | 13 +- .../parameters/hooks/useRecallParameters.ts | 149 +---- .../src/features/parameters/store/actions.ts | 8 +- .../parameters/store/generationSlice.ts | 41 +- .../parameters/store/postprocessingSlice.ts | 8 +- .../src/features/parameters/store/types.ts | 6 +- .../parameters/types/parameterSchemas.ts | 122 +--- .../util/modelIdToControlNetModelParam.ts | 4 +- .../util/modelIdToIPAdapterModelParams.ts | 4 +- .../util/modelIdToLoRAModelParam.ts | 4 +- .../util/modelIdToMainModelParam.ts | 4 +- .../util/modelIdToSDXLRefinerModelParam.ts | 4 +- .../util/modelIdToT2IAdapterModelParam.ts | 4 +- .../parameters/util/modelIdToVAEModelParam.ts | 4 +- .../parameters/util/optimalDimension.ts | 23 +- .../CancelCurrentQueueItemIconButton.tsx | 3 +- .../components/ClearInvocationCacheButton.tsx | 9 +- .../queue/components/ClearQueueIconButton.tsx | 14 +- .../components/InvokeQueueBackButton.tsx | 4 +- .../components/QueueActionsMenuButton.tsx | 28 +- .../queue/components/QueueButtonTooltip.tsx | 16 +- .../queue/components/QueueControls.tsx | 9 +- .../QueueList/QueueItemComponent.tsx | 59 +- .../components/QueueList/QueueItemDetail.tsx | 70 +- .../queue/components/QueueList/QueueList.tsx | 38 +- .../QueueList/QueueListComponent.tsx | 19 +- .../components/QueueList/QueueListHeader.tsx | 6 +- .../features/queue/components/QueueStatus.tsx | 30 +- .../queue/components/QueueTabContent.tsx | 3 +- .../ToggleInvocationCacheButton.tsx | 12 +- .../components/common/QueueStatusBadge.tsx | 6 +- .../components/common/StatusStatItem.tsx | 7 +- .../features/queue/hooks/useCancelBatch.ts | 5 +- .../queue/hooks/useCancelCurrentQueueItem.ts | 15 +- .../queue/hooks/useClearInvocationCache.ts | 10 +- .../src/features/queue/hooks/useClearQueue.ts | 15 +- .../queue/hooks/useDisableInvocationCache.ts | 5 +- .../queue/hooks/useEnableInvocationCache.ts | 5 +- .../hooks/useIsQueueMutationInProgress.ts | 42 +- .../features/queue/hooks/usePauseProcessor.ts | 15 +- .../src/features/queue/hooks/usePruneQueue.ts | 18 +- .../queue/hooks/useResumeProcessor.ts | 15 +- .../src/features/queue/store/queueSlice.ts | 10 +- .../ParamSDXLNegativeStylePrompt.tsx | 10 +- .../ParamSDXLPositiveStylePrompt.tsx | 11 +- .../SDXLPrompts/SDXLConcatButton.tsx | 17 +- .../components/SDXLPrompts/SDXLPrompts.tsx | 4 +- .../SDXLRefiner/ParamSDXLRefinerCFGScale.tsx | 25 +- .../ParamSDXLRefinerModelSelect.tsx | 28 +- ...ParamSDXLRefinerNegativeAestheticScore.tsx | 16 +- ...ParamSDXLRefinerPositiveAestheticScore.tsx | 16 +- .../SDXLRefiner/ParamSDXLRefinerScheduler.tsx | 5 +- .../SDXLRefiner/ParamSDXLRefinerStart.tsx | 12 +- .../SDXLRefiner/ParamSDXLRefinerSteps.tsx | 20 +- .../web/src/features/sdxl/store/sdxlSlice.ts | 15 +- .../AdvancedSettingsAccordion.tsx | 56 +- .../CompositingSettingsAccordion.tsx | 6 +- .../ControlSettingsAccordion.tsx | 115 ++-- .../GenerationSettingsAccordion.tsx | 44 +- .../ImageSettingsAccordion.tsx | 35 +- .../ImageSizeCanvas.tsx | 9 +- .../ImageSizeLinear.tsx | 6 +- .../RefinerSettingsAccordion.tsx | 41 +- .../hooks/useExpanderToggle.ts | 6 +- .../hooks/useStandaloneAccordionToggle.ts | 15 +- .../components/AboutModal/AboutModal.tsx | 56 +- .../HotkeysModal/HotkeyListItem.tsx | 5 +- .../components/HotkeysModal/HotkeysModal.tsx | 37 +- .../components/HotkeysModal/useHotkeyData.ts | 16 +- .../system/components/ProgressBar.tsx | 4 +- .../SettingsModal/SettingsLanguageSelect.tsx | 8 +- .../SettingsModal/SettingsLogLevelSelect.tsx | 10 +- .../components/SettingsModal/SettingsMenu.tsx | 28 +- .../SettingsModal/SettingsModal.tsx | 163 ++--- .../components/SettingsModal/StyledFlex.tsx | 8 +- .../SettingsModal/useClearIntermediates.ts | 26 +- .../system/components/StatusIndicator.tsx | 7 +- .../system/components/StickyScrollable.tsx | 32 +- .../features/system/hooks/useFeatureStatus.ts | 4 +- .../src/features/system/store/configSlice.ts | 14 +- .../system/store/systemPersistDenylist.ts | 6 +- .../features/system/store/systemSelectors.ts | 5 +- .../src/features/system/store/systemSlice.ts | 22 +- .../web/src/features/system/store/types.ts | 10 +- .../system/util/calculateStepPercentage.ts | 6 +- .../system/util/copyBlobToClipboard.ts | 5 +- .../ui/components/FloatingGalleryButton.tsx | 8 +- .../FloatingParametersPanelButtons.tsx | 9 +- .../src/features/ui/components/InvokeTabs.tsx | 57 +- .../ui/components/ParametersPanel.tsx | 14 +- .../ui/components/tabs/ImageToImageTab.tsx | 20 +- .../ui/components/tabs/ModelManagerTab.tsx | 17 +- .../ui/components/tabs/ResizeHandle.tsx | 5 +- .../ui/components/tabs/TextToImageTab.tsx | 9 +- .../ui/components/tabs/UnifiedCanvasTab.tsx | 5 +- .../web/src/features/ui/hooks/usePanel.ts | 38 +- .../web/src/features/ui/store/tabMap.ts | 9 +- .../web/src/features/ui/store/uiSelectors.ts | 14 +- .../web/src/features/ui/store/uiSlice.ts | 15 +- .../components/WorkflowLibraryButton.tsx | 6 +- .../components/WorkflowLibraryList.tsx | 75 +-- .../components/WorkflowLibraryListItem.tsx | 49 +- .../components/WorkflowLibraryListWrapper.tsx | 11 +- .../DownloadWorkflowMenuItem.tsx | 6 +- .../NewWorkflowMenuItem.tsx | 8 +- .../SaveWorkflowAsMenuItem.tsx | 16 +- .../WorkflowLibraryMenu.tsx | 3 +- .../components/WorkflowLibraryModal.tsx | 9 +- .../components/WorkflowLibraryPagination.tsx | 10 +- .../context/WorkflowLibraryModalContext.ts | 3 +- .../context/useWorkflowLibraryModalContext.ts | 4 +- .../hooks/useDeleteLibraryWorkflow.ts | 20 +- .../hooks/useGetAndLoadEmbeddedWorkflow.ts | 16 +- .../hooks/useGetAndLoadLibraryWorkflow.ts | 27 +- .../hooks/useLoadWorkflowFromFile.tsx | 12 +- .../workflowLibrary/hooks/useSaveWorkflow.ts | 23 +- .../hooks/useSaveWorkflowAs.ts | 17 +- .../util/getWorkflowCopyName.ts | 3 +- invokeai/frontend/web/src/main.tsx | 4 +- .../src/services/api/authToastMiddleware.ts | 54 +- .../web/src/services/api/constants.ts | 13 +- .../web/src/services/api/endpoints/appInfo.ts | 6 +- .../web/src/services/api/endpoints/boards.ts | 34 +- .../web/src/services/api/endpoints/images.ts | 540 +++++----------- .../web/src/services/api/endpoints/models.ts | 231 ++----- .../web/src/services/api/endpoints/queue.ts | 73 +-- .../src/services/api/endpoints/workflows.ts | 11 +- .../src/services/api/hooks/useBoardTotal.ts | 5 +- .../api/hooks/useDebouncedImageWorkflow.ts | 13 +- .../api/hooks/useDebouncedMetadata.ts | 8 +- .../frontend/web/src/services/api/index.ts | 21 +- .../web/src/services/api/thunks/schema.ts | 29 +- .../frontend/web/src/services/api/types.ts | 73 +-- .../frontend/web/src/services/api/util.ts | 21 +- .../web/src/services/events/actions.ts | 4 +- .../frontend/web/src/services/events/types.ts | 12 +- .../services/events/util/setEventListeners.ts | 9 +- invokeai/frontend/web/tsconfig.node.json | 7 +- 568 files changed, 3602 insertions(+), 11172 deletions(-) diff --git a/invokeai/frontend/web/.unimportedrc.json b/invokeai/frontend/web/.unimportedrc.json index 733e958861..cf96610502 100644 --- a/invokeai/frontend/web/.unimportedrc.json +++ b/invokeai/frontend/web/.unimportedrc.json @@ -1,13 +1,7 @@ { "entry": ["src/main.tsx"], "extensions": [".ts", ".tsx"], - "ignorePatterns": [ - "**/node_modules/**", - "dist/**", - "public/**", - "**/*.stories.tsx", - "config/**" - ], + "ignorePatterns": ["**/node_modules/**", "dist/**", "public/**", "**/*.stories.tsx", "config/**"], "ignoreUnresolved": [], "ignoreUnimported": ["src/i18.d.ts", "vite.config.ts", "src/vite-env.d.ts"], "respectGitignore": true, diff --git a/invokeai/frontend/web/public/locales/en.json b/invokeai/frontend/web/public/locales/en.json index 6b9dbaf7bc..b2d873d6d5 100644 --- a/invokeai/frontend/web/public/locales/en.json +++ b/invokeai/frontend/web/public/locales/en.json @@ -1463,9 +1463,7 @@ }, "compositingCoherencePass": { "heading": "Coherence Pass", - "paragraphs": [ - "A second round of denoising helps to composite the Inpainted/Outpainted image." - ] + "paragraphs": ["A second round of denoising helps to composite the Inpainted/Outpainted image."] }, "compositingCoherenceMode": { "heading": "Mode", @@ -1473,10 +1471,7 @@ }, "compositingCoherenceSteps": { "heading": "Steps", - "paragraphs": [ - "Number of denoising steps used in the Coherence Pass.", - "Same as the main Steps parameter." - ] + "paragraphs": ["Number of denoising steps used in the Coherence Pass.", "Same as the main Steps parameter."] }, "compositingStrength": { "heading": "Strength", @@ -1498,15 +1493,11 @@ }, "controlNetControlMode": { "heading": "Control Mode", - "paragraphs": [ - "Lends more weight to either the prompt or ControlNet." - ] + "paragraphs": ["Lends more weight to either the prompt or ControlNet."] }, "controlNetResizeMode": { "heading": "Resize Mode", - "paragraphs": [ - "How the ControlNet image will be fit to the image output size." - ] + "paragraphs": ["How the ControlNet image will be fit to the image output size."] }, "controlNet": { "heading": "ControlNet", @@ -1516,9 +1507,7 @@ }, "controlNetWeight": { "heading": "Weight", - "paragraphs": [ - "How strongly the ControlNet will impact the generated image." - ] + "paragraphs": ["How strongly the ControlNet will impact the generated image."] }, "dynamicPrompts": { "heading": "Dynamic Prompts", @@ -1530,9 +1519,7 @@ }, "dynamicPromptsMaxPrompts": { "heading": "Max Prompts", - "paragraphs": [ - "Limits the number of prompts that can be generated by Dynamic Prompts." - ] + "paragraphs": ["Limits the number of prompts that can be generated by Dynamic Prompts."] }, "dynamicPromptsSeedBehaviour": { "heading": "Seed Behaviour", @@ -1549,9 +1536,7 @@ }, "lora": { "heading": "LoRA Weight", - "paragraphs": [ - "Higher LoRA weight will lead to larger impacts on the final image." - ] + "paragraphs": ["Higher LoRA weight will lead to larger impacts on the final image."] }, "noiseUseCPU": { "heading": "Use CPU Noise", @@ -1563,9 +1548,7 @@ }, "paramCFGScale": { "heading": "CFG Scale", - "paragraphs": [ - "Controls how much your prompt influences the generation process." - ] + "paragraphs": ["Controls how much your prompt influences the generation process."] }, "paramCFGRescaleMultiplier": { "heading": "CFG Rescale Multiplier", @@ -1617,9 +1600,7 @@ }, "paramVAE": { "heading": "VAE", - "paragraphs": [ - "Model used for translating AI output into the final image." - ] + "paragraphs": ["Model used for translating AI output into the final image."] }, "paramVAEPrecision": { "heading": "VAE Precision", diff --git a/invokeai/frontend/web/scripts/typegen.js b/invokeai/frontend/web/scripts/typegen.js index ce78e3e5ba..78ea6150cd 100644 --- a/invokeai/frontend/web/scripts/typegen.js +++ b/invokeai/frontend/web/scripts/typegen.js @@ -6,9 +6,7 @@ const OPENAPI_URL = 'http://127.0.0.1:9090/openapi.json'; const OUTPUT_FILE = 'src/services/api/schema.ts'; async function main() { - process.stdout.write( - `Generating types "${OPENAPI_URL}" --> "${OUTPUT_FILE}"...` - ); + process.stdout.write(`Generating types "${OPENAPI_URL}" --> "${OUTPUT_FILE}"...`); const types = await openapiTS(OPENAPI_URL, { exportType: true, transform: (schemaObject) => { diff --git a/invokeai/frontend/web/src/app/components/App.tsx b/invokeai/frontend/web/src/app/components/App.tsx index beb22d4446..3474be5227 100644 --- a/invokeai/frontend/web/src/app/components/App.tsx +++ b/invokeai/frontend/web/src/app/components/App.tsx @@ -45,8 +45,7 @@ const App = ({ config = DEFAULT_CONFIG, selectedImage }: Props) => { useGlobalModifiersInit(); useGlobalHotkeys(); - const { dropzone, isHandlingUpload, setIsHandlingUpload } = - useFullscreenDropzone(); + const { dropzone, isHandlingUpload, setIsHandlingUpload } = useFullscreenDropzone(); const handleReset = useCallback(() => { clearStorage(); @@ -70,10 +69,7 @@ const App = ({ config = DEFAULT_CONFIG, selectedImage }: Props) => { }, [dispatch]); return ( - + { {dropzone.isDragActive && isHandlingUpload && ( - + )} diff --git a/invokeai/frontend/web/src/app/components/AppErrorBoundaryFallback.tsx b/invokeai/frontend/web/src/app/components/AppErrorBoundaryFallback.tsx index b3a0368ac9..d2992a8cd9 100644 --- a/invokeai/frontend/web/src/app/components/AppErrorBoundaryFallback.tsx +++ b/invokeai/frontend/web/src/app/components/AppErrorBoundaryFallback.tsx @@ -1,19 +1,8 @@ -import { - Button, - Flex, - Heading, - Link, - Text, - useToast, -} from '@invoke-ai/ui-library'; +import { Button, Flex, Heading, Link, Text, useToast } from '@invoke-ai/ui-library'; import newGithubIssueUrl from 'new-github-issue-url'; import { memo, useCallback, useMemo } from 'react'; import { useTranslation } from 'react-i18next'; -import { - PiArrowCounterClockwiseBold, - PiArrowSquareOutBold, - PiCopyBold, -} from 'react-icons/pi'; +import { PiArrowCounterClockwiseBold, PiArrowSquareOutBold, PiCopyBold } from 'react-icons/pi'; import { serializeError } from 'serialize-error'; type Props = { @@ -44,22 +33,8 @@ const AppErrorBoundaryFallback = ({ error, resetErrorBoundary }: Props) => { [error.message, error.name] ); return ( - - + + {t('common.somethingWentWrong')} { - - + diff --git a/invokeai/frontend/web/src/app/components/ThemeLocaleProvider.tsx b/invokeai/frontend/web/src/app/components/ThemeLocaleProvider.tsx index 9d7520258c..0b4ca90933 100644 --- a/invokeai/frontend/web/src/app/components/ThemeLocaleProvider.tsx +++ b/invokeai/frontend/web/src/app/components/ThemeLocaleProvider.tsx @@ -1,13 +1,7 @@ import '@fontsource-variable/inter'; import 'overlayscrollbars/overlayscrollbars.css'; -import { - ChakraProvider, - DarkMode, - extendTheme, - theme as _theme, - TOAST_OPTIONS, -} from '@invoke-ai/ui-library'; +import { ChakraProvider, DarkMode, extendTheme, theme as _theme, TOAST_OPTIONS } from '@invoke-ai/ui-library'; import type { ReactNode } from 'react'; import { memo, useEffect, useMemo } from 'react'; import { useTranslation } from 'react-i18next'; diff --git a/invokeai/frontend/web/src/app/components/Toaster.ts b/invokeai/frontend/web/src/app/components/Toaster.ts index 0102ce376d..c86fd5060d 100644 --- a/invokeai/frontend/web/src/app/components/Toaster.ts +++ b/invokeai/frontend/web/src/app/components/Toaster.ts @@ -36,10 +36,7 @@ const Toaster = () => { */ export const useAppToaster = () => { const dispatch = useAppDispatch(); - const toaster = useCallback( - (arg: MakeToastArg) => dispatch(addToast(makeToast(arg))), - [dispatch] - ); + const toaster = useCallback((arg: MakeToastArg) => dispatch(addToast(makeToast(arg))), [dispatch]); return toaster; }; diff --git a/invokeai/frontend/web/src/app/hooks/useSocketIO.ts b/invokeai/frontend/web/src/app/hooks/useSocketIO.ts index 7b6d05b7a1..058a607261 100644 --- a/invokeai/frontend/web/src/app/hooks/useSocketIO.ts +++ b/invokeai/frontend/web/src/app/hooks/useSocketIO.ts @@ -6,10 +6,7 @@ import { useAppDispatch } from 'app/store/storeHooks'; import type { MapStore } from 'nanostores'; import { atom, map } from 'nanostores'; import { useEffect, useMemo } from 'react'; -import type { - ClientToServerEvents, - ServerToClientEvents, -} from 'services/events/types'; +import type { ClientToServerEvents, ServerToClientEvents } from 'services/events/types'; import { setEventListeners } from 'services/events/util/setEventListeners'; import type { ManagerOptions, Socket, SocketOptions } from 'socket.io-client'; import { io } from 'socket.io-client'; @@ -45,9 +42,7 @@ export const useSocketIO = () => { const socketOptions = useMemo(() => { const options: Partial = { timeout: 60000, - path: baseUrl - ? '/ws/socket.io' - : `${window.location.pathname}ws/socket.io`, + path: baseUrl ? '/ws/socket.io' : `${window.location.pathname}ws/socket.io`, autoConnect: false, // achtung! removing this breaks the dynamic middleware forceNew: true, }; @@ -66,10 +61,7 @@ export const useSocketIO = () => { return; } - const socket: Socket = io( - socketUrl, - socketOptions - ); + const socket: Socket = io(socketUrl, socketOptions); setEventListeners({ dispatch, socket }); socket.connect(); diff --git a/invokeai/frontend/web/src/app/logging/logger.ts b/invokeai/frontend/web/src/app/logging/logger.ts index c68fe64d39..491fc27688 100644 --- a/invokeai/frontend/web/src/app/logging/logger.ts +++ b/invokeai/frontend/web/src/app/logging/logger.ts @@ -30,20 +30,11 @@ export type LoggerNamespace = | 'queue' | 'dnd'; -export const logger = (namespace: LoggerNamespace) => - $logger.get().child({ namespace }); +export const logger = (namespace: LoggerNamespace) => $logger.get().child({ namespace }); -export const zLogLevel = z.enum([ - 'trace', - 'debug', - 'info', - 'warn', - 'error', - 'fatal', -]); +export const zLogLevel = z.enum(['trace', 'debug', 'info', 'warn', 'error', 'fatal']); export type LogLevel = z.infer; -export const isLogLevel = (v: unknown): v is LogLevel => - zLogLevel.safeParse(v).success; +export const isLogLevel = (v: unknown): v is LogLevel => zLogLevel.safeParse(v).success; // Translate human-readable log levels to numbers, used for log filtering export const LOG_LEVEL_MAP: Record = { diff --git a/invokeai/frontend/web/src/app/logging/useLogger.ts b/invokeai/frontend/web/src/app/logging/useLogger.ts index de60852c1b..6e170ca376 100644 --- a/invokeai/frontend/web/src/app/logging/useLogger.ts +++ b/invokeai/frontend/web/src/app/logging/useLogger.ts @@ -17,10 +17,7 @@ export const useLogger = (namespace: LoggerNamespace) => { localStorage.setItem('ROARR_LOG', 'true'); // Use a filter to show only logs of the given level - localStorage.setItem( - 'ROARR_FILTER', - `context.logLevel:>=${LOG_LEVEL_MAP[consoleLogLevel]}` - ); + localStorage.setItem('ROARR_FILTER', `context.logLevel:>=${LOG_LEVEL_MAP[consoleLogLevel]}`); } else { // Disable console log output localStorage.setItem('ROARR_LOG', 'false'); diff --git a/invokeai/frontend/web/src/app/store/createMemoizedSelector.ts b/invokeai/frontend/web/src/app/store/createMemoizedSelector.ts index b4d46a4ef8..8e6142ce1d 100644 --- a/invokeai/frontend/web/src/app/store/createMemoizedSelector.ts +++ b/invokeai/frontend/web/src/app/store/createMemoizedSelector.ts @@ -1,8 +1,4 @@ -import { - createDraftSafeSelectorCreator, - createSelectorCreator, - lruMemoize, -} from '@reduxjs/toolkit'; +import { createDraftSafeSelectorCreator, createSelectorCreator, lruMemoize } from '@reduxjs/toolkit'; import type { GetSelectorsOptions } from '@reduxjs/toolkit/dist/entities/state_selectors'; import { isEqual } from 'lodash-es'; diff --git a/invokeai/frontend/web/src/app/store/enhancers/reduxRemember/driver.ts b/invokeai/frontend/web/src/app/store/enhancers/reduxRemember/driver.ts index 465199002b..61fbd015f8 100644 --- a/invokeai/frontend/web/src/app/store/enhancers/reduxRemember/driver.ts +++ b/invokeai/frontend/web/src/app/store/enhancers/reduxRemember/driver.ts @@ -1,19 +1,12 @@ import { StorageError } from 'app/store/enhancers/reduxRemember/errors'; import { $projectId } from 'app/store/nanostores/projectId'; import type { UseStore } from 'idb-keyval'; -import { - clear, - createStore as createIDBKeyValStore, - get, - set, -} from 'idb-keyval'; +import { clear, createStore as createIDBKeyValStore, get, set } from 'idb-keyval'; import { action, atom } from 'nanostores'; import type { Driver } from 'redux-remember'; // Create a custom idb-keyval store (just needed to customize the name) -export const $idbKeyValStore = atom( - createIDBKeyValStore('invoke', 'invoke-store') -); +export const $idbKeyValStore = atom(createIDBKeyValStore('invoke', 'invoke-store')); export const clearIdbKeyValStore = action($idbKeyValStore, 'clear', (store) => { clear(store.get()); diff --git a/invokeai/frontend/web/src/app/store/middleware/debugLoggerMiddleware.ts b/invokeai/frontend/web/src/app/store/middleware/debugLoggerMiddleware.ts index 501a8146ec..b6df6dab94 100644 --- a/invokeai/frontend/web/src/app/store/middleware/debugLoggerMiddleware.ts +++ b/invokeai/frontend/web/src/app/store/middleware/debugLoggerMiddleware.ts @@ -4,13 +4,12 @@ import { diff } from 'jsondiffpatch'; /** * Super simple logger middleware. Useful for debugging when the redux devtools are awkward. */ -export const debugLoggerMiddleware: Middleware = - (api: MiddlewareAPI) => (next) => (action) => { - const originalState = api.getState(); - console.log('REDUX: dispatching', action); - const result = next(action); - const nextState = api.getState(); - console.log('REDUX: next state', nextState); - console.log('REDUX: diff', diff(originalState, nextState)); - return result; - }; +export const debugLoggerMiddleware: Middleware = (api: MiddlewareAPI) => (next) => (action) => { + const originalState = api.getState(); + console.log('REDUX: dispatching', action); + const result = next(action); + const nextState = api.getState(); + console.log('REDUX: next state', nextState); + console.log('REDUX: diff', diff(originalState, nextState)); + return result; +}; diff --git a/invokeai/frontend/web/src/app/store/middleware/devtools/actionSanitizer.ts b/invokeai/frontend/web/src/app/store/middleware/devtools/actionSanitizer.ts index 9c7bae725b..f4fa2766e6 100644 --- a/invokeai/frontend/web/src/app/store/middleware/devtools/actionSanitizer.ts +++ b/invokeai/frontend/web/src/app/store/middleware/devtools/actionSanitizer.ts @@ -35,8 +35,7 @@ export const actionSanitizer = (action: A): A => { if (socketGeneratorProgress.match(action)) { const sanitized = cloneDeep(action); if (sanitized.payload.data.progress_image) { - sanitized.payload.data.progress_image.dataURL = - ''; + sanitized.payload.data.progress_image.dataURL = ''; } return sanitized; } diff --git a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/index.ts b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/index.ts index 0b3accfd4d..1d21215d9d 100644 --- a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/index.ts +++ b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/index.ts @@ -1,9 +1,4 @@ -import type { - ListenerEffect, - TypedAddListener, - TypedStartListening, - UnknownAction, -} from '@reduxjs/toolkit'; +import type { ListenerEffect, TypedAddListener, TypedStartListening, UnknownAction } from '@reduxjs/toolkit'; import { addListener, createListenerMiddleware } from '@reduxjs/toolkit'; import { addGalleryImageClickedListener } from 'app/store/middleware/listenerMiddleware/listeners/galleryImageClicked'; import type { AppDispatch, RootState } from 'app/store/store'; @@ -47,10 +42,7 @@ import { import { addImagesStarredListener } from './listeners/imagesStarred'; import { addImagesUnstarredListener } from './listeners/imagesUnstarred'; import { addImageToDeleteSelectedListener } from './listeners/imageToDeleteSelected'; -import { - addImageUploadedFulfilledListener, - addImageUploadedRejectedListener, -} from './listeners/imageUploaded'; +import { addImageUploadedFulfilledListener, addImageUploadedRejectedListener } from './listeners/imageUploaded'; import { addInitialImageSelectedListener } from './listeners/initialImageSelected'; import { addModelSelectedListener } from './listeners/modelSelected'; import { addModelsLoadedListener } from './listeners/modelsLoaded'; @@ -78,19 +70,11 @@ export const listenerMiddleware = createListenerMiddleware(); export type AppStartListening = TypedStartListening; -export const startAppListening = - listenerMiddleware.startListening as AppStartListening; +export const startAppListening = listenerMiddleware.startListening as AppStartListening; -export const addAppListener = addListener as TypedAddListener< - RootState, - AppDispatch ->; +export const addAppListener = addListener as TypedAddListener; -export type AppListenerEffect = ListenerEffect< - UnknownAction, - RootState, - AppDispatch ->; +export type AppListenerEffect = ListenerEffect; /** * The RTK listener middleware is a lightweight alternative sagas/observables. diff --git a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/addCommitStagingAreaImageListener.ts b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/addCommitStagingAreaImageListener.ts index 2dbf68a837..2c5fbfbbe4 100644 --- a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/addCommitStagingAreaImageListener.ts +++ b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/addCommitStagingAreaImageListener.ts @@ -1,10 +1,6 @@ import { isAnyOf } from '@reduxjs/toolkit'; import { logger } from 'app/logging/logger'; -import { - canvasBatchIdsReset, - commitStagingAreaImage, - discardStagedImages, -} from 'features/canvas/store/canvasSlice'; +import { canvasBatchIdsReset, commitStagingAreaImage, discardStagedImages } from 'features/canvas/store/canvasSlice'; import { addToast } from 'features/system/store/systemSlice'; import { t } from 'i18next'; import { queueApi } from 'services/api/endpoints/queue'; @@ -23,10 +19,7 @@ export const addCommitStagingAreaImageListener = () => { try { const req = dispatch( - queueApi.endpoints.cancelByBatchIds.initiate( - { batch_ids: batchIds }, - { fixedCacheKey: 'cancelByBatchIds' } - ) + queueApi.endpoints.cancelByBatchIds.initiate({ batch_ids: batchIds }, { fixedCacheKey: 'cancelByBatchIds' }) ); const { canceled } = await req.unwrap(); req.reset(); diff --git a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/addFirstListImagesListener.ts.ts b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/addFirstListImagesListener.ts.ts index ed85aa2714..3c9b245b11 100644 --- a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/addFirstListImagesListener.ts.ts +++ b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/addFirstListImagesListener.ts.ts @@ -12,15 +12,9 @@ export const appStarted = createAction('app/appStarted'); export const addFirstListImagesListener = () => { startAppListening({ matcher: imagesApi.endpoints.listImages.matchFulfilled, - effect: async ( - action, - { dispatch, unsubscribe, cancelActiveListeners } - ) => { + effect: async (action, { dispatch, unsubscribe, cancelActiveListeners }) => { // Only run this listener on the first listImages request for no-board images - if ( - action.meta.arg.queryCacheKey !== - getListImagesUrl({ board_id: 'none', categories: IMAGE_CATEGORIES }) - ) { + if (action.meta.arg.queryCacheKey !== getListImagesUrl({ board_id: 'none', categories: IMAGE_CATEGORIES })) { return; } diff --git a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/appConfigReceived.ts b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/appConfigReceived.ts index 52090f7ab7..3fc9cdda44 100644 --- a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/appConfigReceived.ts +++ b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/appConfigReceived.ts @@ -1,8 +1,5 @@ import { setInfillMethod } from 'features/parameters/store/generationSlice'; -import { - shouldUseNSFWCheckerChanged, - shouldUseWatermarkerChanged, -} from 'features/system/store/systemSlice'; +import { shouldUseNSFWCheckerChanged, shouldUseWatermarkerChanged } from 'features/system/store/systemSlice'; import { appInfoApi } from 'services/api/endpoints/appInfo'; import { startAppListening } from '..'; @@ -11,11 +8,7 @@ export const addAppConfigReceivedListener = () => { startAppListening({ matcher: appInfoApi.endpoints.getAppConfig.matchFulfilled, effect: async (action, { getState, dispatch }) => { - const { - infill_methods = [], - nsfw_methods = [], - watermarking_methods = [], - } = action.payload; + const { infill_methods = [], nsfw_methods = [], watermarking_methods = [] } = action.payload; const infillMethod = getState().generation.infillMethod; if (!infill_methods.includes(infillMethod)) { diff --git a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/batchEnqueued.ts b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/batchEnqueued.ts index f6a59d3557..6419f840ec 100644 --- a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/batchEnqueued.ts +++ b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/batchEnqueued.ts @@ -1,8 +1,4 @@ -import { - createStandaloneToast, - theme, - TOAST_OPTIONS, -} from '@invoke-ai/ui-library'; +import { createStandaloneToast, theme, TOAST_OPTIONS } from '@invoke-ai/ui-library'; import { logger } from 'app/logging/logger'; import { parseify } from 'common/util/serialize'; import { zPydanticValidationError } from 'features/system/store/zodSchemas'; @@ -24,10 +20,7 @@ export const addBatchEnqueuedListener = () => { effect: async (action) => { const response = action.payload; const arg = action.meta.arg.originalArgs; - logger('queue').debug( - { enqueueResult: parseify(response) }, - 'Batch enqueued' - ); + logger('queue').debug({ enqueueResult: parseify(response) }, 'Batch enqueued'); if (!toast.isActive('batch-queued')) { toast({ @@ -57,10 +50,7 @@ export const addBatchEnqueuedListener = () => { status: 'error', description: 'Unknown Error', }); - logger('queue').error( - { batchConfig: parseify(arg), error: parseify(response) }, - t('queue.batchFailedToQueue') - ); + logger('queue').error({ batchConfig: parseify(arg), error: parseify(response) }, t('queue.batchFailedToQueue')); return; } @@ -85,10 +75,7 @@ export const addBatchEnqueuedListener = () => { status: 'error', }); } - logger('queue').error( - { batchConfig: parseify(arg), error: parseify(response) }, - t('queue.batchFailedToQueue') - ); + logger('queue').error({ batchConfig: parseify(arg), error: parseify(response) }, t('queue.batchFailedToQueue')); }, }); }; diff --git a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/boardAndImagesDeleted.ts b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/boardAndImagesDeleted.ts index 83fab1df54..2e77896ad3 100644 --- a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/boardAndImagesDeleted.ts +++ b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/boardAndImagesDeleted.ts @@ -22,13 +22,7 @@ export const addDeleteBoardAndImagesFulfilledListener = () => { const { generation, canvas, nodes, controlAdapters } = getState(); deleted_images.forEach((image_name) => { - const imageUsage = getImageUsage( - generation, - canvas, - nodes, - controlAdapters, - image_name - ); + const imageUsage = getImageUsage(generation, canvas, nodes, controlAdapters, image_name); if (imageUsage.isInitialImage && !wasInitialImageReset) { dispatch(clearInitialImage()); diff --git a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/boardIdSelected.ts b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/boardIdSelected.ts index 0bf5e9e264..c93381f0f2 100644 --- a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/boardIdSelected.ts +++ b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/boardIdSelected.ts @@ -1,13 +1,6 @@ import { isAnyOf } from '@reduxjs/toolkit'; -import { - boardIdSelected, - galleryViewChanged, - imageSelected, -} from 'features/gallery/store/gallerySlice'; -import { - ASSETS_CATEGORIES, - IMAGE_CATEGORIES, -} from 'features/gallery/store/types'; +import { boardIdSelected, galleryViewChanged, imageSelected } from 'features/gallery/store/gallerySlice'; +import { ASSETS_CATEGORIES, IMAGE_CATEGORIES } from 'features/gallery/store/types'; import { imagesApi } from 'services/api/endpoints/images'; import { imagesSelectors } from 'services/api/util'; @@ -16,53 +9,35 @@ import { startAppListening } from '..'; export const addBoardIdSelectedListener = () => { startAppListening({ matcher: isAnyOf(boardIdSelected, galleryViewChanged), - effect: async ( - action, - { getState, dispatch, condition, cancelActiveListeners } - ) => { + effect: async (action, { getState, dispatch, condition, cancelActiveListeners }) => { // Cancel any in-progress instances of this listener, we don't want to select an image from a previous board cancelActiveListeners(); const state = getState(); - const board_id = boardIdSelected.match(action) - ? action.payload.boardId - : state.gallery.selectedBoardId; + const board_id = boardIdSelected.match(action) ? action.payload.boardId : state.gallery.selectedBoardId; - const galleryView = galleryViewChanged.match(action) - ? action.payload - : state.gallery.galleryView; + const galleryView = galleryViewChanged.match(action) ? action.payload : state.gallery.galleryView; // when a board is selected, we need to wait until the board has loaded *some* images, then select the first one - const categories = - galleryView === 'images' ? IMAGE_CATEGORIES : ASSETS_CATEGORIES; + const categories = galleryView === 'images' ? IMAGE_CATEGORIES : ASSETS_CATEGORIES; const queryArgs = { board_id: board_id ?? 'none', categories }; // wait until the board has some images - maybe it already has some from a previous fetch // must use getState() to ensure we do not have stale state const isSuccess = await condition( - () => - imagesApi.endpoints.listImages.select(queryArgs)(getState()) - .isSuccess, + () => imagesApi.endpoints.listImages.select(queryArgs)(getState()).isSuccess, 5000 ); if (isSuccess) { // the board was just changed - we can select the first image - const { data: boardImagesData } = - imagesApi.endpoints.listImages.select(queryArgs)(getState()); + const { data: boardImagesData } = imagesApi.endpoints.listImages.select(queryArgs)(getState()); - if ( - boardImagesData && - boardIdSelected.match(action) && - action.payload.selectedImageName - ) { + if (boardImagesData && boardIdSelected.match(action) && action.payload.selectedImageName) { const firstImage = imagesSelectors.selectAll(boardImagesData)[0]; - const selectedImage = imagesSelectors.selectById( - boardImagesData, - action.payload.selectedImageName - ); + const selectedImage = imagesSelectors.selectById(boardImagesData, action.payload.selectedImageName); dispatch(imageSelected(selectedImage || firstImage || null)); } else { diff --git a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/canvasCopiedToClipboard.ts b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/canvasCopiedToClipboard.ts index ec2c2388e5..a4ae936ada 100644 --- a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/canvasCopiedToClipboard.ts +++ b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/canvasCopiedToClipboard.ts @@ -11,9 +11,7 @@ export const addCanvasCopiedToClipboardListener = () => { startAppListening({ actionCreator: canvasCopiedToClipboard, effect: async (action, { dispatch, getState }) => { - const moduleLog = $logger - .get() - .child({ namespace: 'canvasCopiedToClipboardListener' }); + const moduleLog = $logger.get().child({ namespace: 'canvasCopiedToClipboardListener' }); const state = getState(); try { diff --git a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/canvasDownloadedAsImage.ts b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/canvasDownloadedAsImage.ts index 0cbdb8bfcc..af37afa8d5 100644 --- a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/canvasDownloadedAsImage.ts +++ b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/canvasDownloadedAsImage.ts @@ -11,9 +11,7 @@ export const addCanvasDownloadedAsImageListener = () => { startAppListening({ actionCreator: canvasDownloadedAsImage, effect: async (action, { dispatch, getState }) => { - const moduleLog = $logger - .get() - .child({ namespace: 'canvasSavedToGalleryListener' }); + const moduleLog = $logger.get().child({ namespace: 'canvasSavedToGalleryListener' }); const state = getState(); let blob; @@ -32,9 +30,7 @@ export const addCanvasDownloadedAsImageListener = () => { } downloadBlob(blob, 'canvas.png'); - dispatch( - addToast({ title: t('toast.canvasDownloaded'), status: 'success' }) - ); + dispatch(addToast({ title: t('toast.canvasDownloaded'), status: 'success' })); }, }); }; diff --git a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/canvasMerged.ts b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/canvasMerged.ts index 946f413d34..f29a095c1f 100644 --- a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/canvasMerged.ts +++ b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/canvasMerged.ts @@ -13,9 +13,7 @@ export const addCanvasMergedListener = () => { startAppListening({ actionCreator: canvasMerged, effect: async (action, { dispatch }) => { - const moduleLog = $logger - .get() - .child({ namespace: 'canvasCopiedToClipboardListener' }); + const moduleLog = $logger.get().child({ namespace: 'canvasCopiedToClipboardListener' }); const blob = await getFullBaseLayerBlob(); if (!blob) { diff --git a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/controlNetAutoProcess.ts b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/controlNetAutoProcess.ts index 78e69d71c1..d194195665 100644 --- a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/controlNetAutoProcess.ts +++ b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/controlNetAutoProcess.ts @@ -21,11 +21,7 @@ type AnyControlAdapterParamChangeAction = | ReturnType | ReturnType; -const predicate: AnyListenerPredicate = ( - action, - state, - prevState -) => { +const predicate: AnyListenerPredicate = (action, state, prevState) => { const isActionMatched = controlAdapterProcessorParamsChanged.match(action) || controlAdapterModelChanged.match(action) || @@ -40,12 +36,7 @@ const predicate: AnyListenerPredicate = ( const { id } = action.payload; const prevCA = selectControlAdapterById(prevState.controlAdapters, id); const ca = selectControlAdapterById(state.controlAdapters, id); - if ( - !prevCA || - !isControlNetOrT2IAdapter(prevCA) || - !ca || - !isControlNetOrT2IAdapter(ca) - ) { + if (!prevCA || !isControlNetOrT2IAdapter(prevCA) || !ca || !isControlNetOrT2IAdapter(ca)) { return false; } diff --git a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/controlNetImageProcessed.ts b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/controlNetImageProcessed.ts index 61316231cc..fba274beb8 100644 --- a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/controlNetImageProcessed.ts +++ b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/controlNetImageProcessed.ts @@ -64,37 +64,28 @@ export const addControlNetImageProcessedListener = () => { ); const enqueueResult = await req.unwrap(); req.reset(); - log.debug( - { enqueueResult: parseify(enqueueResult) }, - t('queue.graphQueued') - ); + log.debug({ enqueueResult: parseify(enqueueResult) }, t('queue.graphQueued')); const [invocationCompleteAction] = await take( (action): action is ReturnType => socketInvocationComplete.match(action) && - action.payload.data.queue_batch_id === - enqueueResult.batch.batch_id && + action.payload.data.queue_batch_id === enqueueResult.batch.batch_id && action.payload.data.source_node_id === nodeId ); // We still have to check the output type if (isImageOutput(invocationCompleteAction.payload.data.result)) { - const { image_name } = - invocationCompleteAction.payload.data.result.image; + const { image_name } = invocationCompleteAction.payload.data.result.image; // Wait for the ImageDTO to be received const [{ payload }] = await take( (action) => - imagesApi.endpoints.getImageDTO.matchFulfilled(action) && - action.payload.image_name === image_name + imagesApi.endpoints.getImageDTO.matchFulfilled(action) && action.payload.image_name === image_name ); const processedControlImage = payload as ImageDTO; - log.debug( - { controlNetId: action.payload, processedControlImage }, - 'ControlNet image processed' - ); + log.debug({ controlNetId: action.payload, processedControlImage }, 'ControlNet image processed'); // Update the processed image in the store dispatch( @@ -105,10 +96,7 @@ export const addControlNetImageProcessedListener = () => { ); } } catch (error) { - log.error( - { enqueueBatchArg: parseify(enqueueBatchArg) }, - t('queue.graphFailedToQueue') - ); + log.error({ enqueueBatchArg: parseify(enqueueBatchArg) }, t('queue.graphFailedToQueue')); if (error instanceof Object) { if ('data' in error && 'status' in error) { diff --git a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/enqueueRequestedCanvas.ts b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/enqueueRequestedCanvas.ts index a803441c59..7847448d3e 100644 --- a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/enqueueRequestedCanvas.ts +++ b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/enqueueRequestedCanvas.ts @@ -2,10 +2,7 @@ import { logger } from 'app/logging/logger'; import { enqueueRequested } from 'app/store/actions'; import openBase64ImageInTab from 'common/util/openBase64ImageInTab'; import { parseify } from 'common/util/serialize'; -import { - canvasBatchIdAdded, - stagingAreaInitialized, -} from 'features/canvas/store/canvasSlice'; +import { canvasBatchIdAdded, stagingAreaInitialized } from 'features/canvas/store/canvasSlice'; import { blobToDataURL } from 'features/canvas/util/blobToDataURL'; import { getCanvasData } from 'features/canvas/util/getCanvasData'; import { getCanvasGenerationMode } from 'features/canvas/util/getCanvasGenerationMode'; @@ -34,20 +31,14 @@ import { startAppListening } from '..'; export const addEnqueueRequestedCanvasListener = () => { startAppListening({ predicate: (action): action is ReturnType => - enqueueRequested.match(action) && - action.payload.tabName === 'unifiedCanvas', + enqueueRequested.match(action) && action.payload.tabName === 'unifiedCanvas', effect: async (action, { getState, dispatch }) => { const log = logger('queue'); const { prepend } = action.payload; const state = getState(); - const { - layerState, - boundingBoxCoordinates, - boundingBoxDimensions, - isMaskEnabled, - shouldPreserveMaskedArea, - } = state.canvas; + const { layerState, boundingBoxCoordinates, boundingBoxDimensions, isMaskEnabled, shouldPreserveMaskedArea } = + state.canvas; // Build canvas blobs const canvasBlobsAndImageData = await getCanvasData( @@ -63,14 +54,10 @@ export const addEnqueueRequestedCanvasListener = () => { return; } - const { baseBlob, baseImageData, maskBlob, maskImageData } = - canvasBlobsAndImageData; + const { baseBlob, baseImageData, maskBlob, maskImageData } = canvasBlobsAndImageData; // Determine the generation mode - const generationMode = getCanvasGenerationMode( - baseImageData, - maskImageData - ); + const generationMode = getCanvasGenerationMode(baseImageData, maskImageData); if (state.system.enableImageDebugging) { const baseDataURL = await blobToDataURL(baseBlob); @@ -115,12 +102,7 @@ export const addEnqueueRequestedCanvasListener = () => { ).unwrap(); } - const graph = buildCanvasGraph( - state, - generationMode, - canvasInitImage, - canvasMaskImage - ); + const graph = buildCanvasGraph(state, generationMode, canvasInitImage, canvasMaskImage); log.debug({ graph: parseify(graph) }, `Canvas graph built`); diff --git a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/enqueueRequestedLinear.ts b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/enqueueRequestedLinear.ts index 547f5e5948..e1e13fadbe 100644 --- a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/enqueueRequestedLinear.ts +++ b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/enqueueRequestedLinear.ts @@ -11,9 +11,7 @@ import { startAppListening } from '..'; export const addEnqueueRequestedLinear = () => { startAppListening({ predicate: (action): action is ReturnType => - enqueueRequested.match(action) && - (action.payload.tabName === 'txt2img' || - action.payload.tabName === 'img2img'), + enqueueRequested.match(action) && (action.payload.tabName === 'txt2img' || action.payload.tabName === 'img2img'), effect: async (action, { getState, dispatch }) => { const state = getState(); const model = state.generation.model; diff --git a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/galleryImageClicked.ts b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/galleryImageClicked.ts index 4287f3ec16..cc810a2517 100644 --- a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/galleryImageClicked.ts +++ b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/galleryImageClicked.ts @@ -32,8 +32,7 @@ export const addGalleryImageClickedListener = () => { const { imageDTO, shiftKey, ctrlKey, metaKey } = action.payload; const state = getState(); const queryArgs = selectListImagesQueryArgs(state); - const { data: listImagesData } = - imagesApi.endpoints.listImages.select(queryArgs)(state); + const { data: listImagesData } = imagesApi.endpoints.listImages.select(queryArgs)(state); if (!listImagesData) { // Should never happen if we have clicked a gallery image @@ -46,12 +45,8 @@ export const addGalleryImageClickedListener = () => { if (shiftKey) { const rangeEndImageName = imageDTO.image_name; const lastSelectedImage = selection[selection.length - 1]?.image_name; - const lastClickedIndex = imageDTOs.findIndex( - (n) => n.image_name === lastSelectedImage - ); - const currentClickedIndex = imageDTOs.findIndex( - (n) => n.image_name === rangeEndImageName - ); + const lastClickedIndex = imageDTOs.findIndex((n) => n.image_name === lastSelectedImage); + const currentClickedIndex = imageDTOs.findIndex((n) => n.image_name === rangeEndImageName); if (lastClickedIndex > -1 && currentClickedIndex > -1) { // We have a valid range! const start = Math.min(lastClickedIndex, currentClickedIndex); @@ -60,15 +55,8 @@ export const addGalleryImageClickedListener = () => { dispatch(selectionChanged(selection.concat(imagesToSelect))); } } else if (ctrlKey || metaKey) { - if ( - selection.some((i) => i.image_name === imageDTO.image_name) && - selection.length > 1 - ) { - dispatch( - selectionChanged( - selection.filter((n) => n.image_name !== imageDTO.image_name) - ) - ); + if (selection.some((i) => i.image_name === imageDTO.image_name) && selection.length > 1) { + dispatch(selectionChanged(selection.filter((n) => n.image_name !== imageDTO.image_name))); } else { dispatch(selectionChanged(selection.concat(imageDTO))); } diff --git a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/imageDeleted.ts b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/imageDeleted.ts index ccc6130cff..1312e54891 100644 --- a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/imageDeleted.ts +++ b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/imageDeleted.ts @@ -43,31 +43,21 @@ export const addRequestedSingleImageDeletionListener = () => { dispatch(isModalOpenChanged(false)); const state = getState(); - const lastSelectedImage = - state.gallery.selection[state.gallery.selection.length - 1]?.image_name; + const lastSelectedImage = state.gallery.selection[state.gallery.selection.length - 1]?.image_name; if (imageDTO && imageDTO?.image_name === lastSelectedImage) { const { image_name } = imageDTO; const baseQueryArgs = selectListImagesQueryArgs(state); - const { data } = - imagesApi.endpoints.listImages.select(baseQueryArgs)(state); + const { data } = imagesApi.endpoints.listImages.select(baseQueryArgs)(state); const cachedImageDTOs = data ? imagesSelectors.selectAll(data) : []; - const deletedImageIndex = cachedImageDTOs.findIndex( - (i) => i.image_name === image_name - ); + const deletedImageIndex = cachedImageDTOs.findIndex((i) => i.image_name === image_name); - const filteredImageDTOs = cachedImageDTOs.filter( - (i) => i.image_name !== image_name - ); + const filteredImageDTOs = cachedImageDTOs.filter((i) => i.image_name !== image_name); - const newSelectedImageIndex = clamp( - deletedImageIndex, - 0, - filteredImageDTOs.length - 1 - ); + const newSelectedImageIndex = clamp(deletedImageIndex, 0, filteredImageDTOs.length - 1); const newSelectedImageDTO = filteredImageDTOs[newSelectedImageIndex]; @@ -85,9 +75,7 @@ export const addRequestedSingleImageDeletionListener = () => { imageDTOs.forEach((imageDTO) => { // reset init image if we deleted it - if ( - getState().generation.initialImage?.imageName === imageDTO.image_name - ) { + if (getState().generation.initialImage?.imageName === imageDTO.image_name) { dispatch(clearInitialImage()); } @@ -95,8 +83,7 @@ export const addRequestedSingleImageDeletionListener = () => { forEach(selectControlAdapterAll(getState().controlAdapters), (ca) => { if ( ca.controlImage === imageDTO.image_name || - (isControlNetOrT2IAdapter(ca) && - ca.processedControlImage === imageDTO.image_name) + (isControlNetOrT2IAdapter(ca) && ca.processedControlImage === imageDTO.image_name) ) { dispatch( controlAdapterImageChanged({ @@ -120,10 +107,7 @@ export const addRequestedSingleImageDeletionListener = () => { } forEach(node.data.inputs, (input) => { - if ( - isImageFieldInputInstance(input) && - input.value?.image_name === imageDTO.image_name - ) { + if (isImageFieldInputInstance(input) && input.value?.image_name === imageDTO.image_name) { dispatch( fieldImageValueChanged({ nodeId: node.data.id, @@ -137,24 +121,16 @@ export const addRequestedSingleImageDeletionListener = () => { }); // Delete from server - const { requestId } = dispatch( - imagesApi.endpoints.deleteImage.initiate(imageDTO) - ); + const { requestId } = dispatch(imagesApi.endpoints.deleteImage.initiate(imageDTO)); // Wait for successful deletion, then trigger boards to re-fetch const wasImageDeleted = await condition( - (action) => - imagesApi.endpoints.deleteImage.matchFulfilled(action) && - action.meta.requestId === requestId, + (action) => imagesApi.endpoints.deleteImage.matchFulfilled(action) && action.meta.requestId === requestId, 30000 ); if (wasImageDeleted) { - dispatch( - api.util.invalidateTags([ - { type: 'Board', id: imageDTO.board_id ?? 'none' }, - ]) - ); + dispatch(api.util.invalidateTags([{ type: 'Board', id: imageDTO.board_id ?? 'none' }])); } }, }); @@ -176,17 +152,12 @@ export const addRequestedMultipleImageDeletionListener = () => { try { // Delete from server - await dispatch( - imagesApi.endpoints.deleteImages.initiate({ imageDTOs }) - ).unwrap(); + await dispatch(imagesApi.endpoints.deleteImages.initiate({ imageDTOs })).unwrap(); const state = getState(); const queryArgs = selectListImagesQueryArgs(state); - const { data } = - imagesApi.endpoints.listImages.select(queryArgs)(state); + const { data } = imagesApi.endpoints.listImages.select(queryArgs)(state); - const newSelectedImageDTO = data - ? imagesSelectors.selectAll(data)[0] - : undefined; + const newSelectedImageDTO = data ? imagesSelectors.selectAll(data)[0] : undefined; if (newSelectedImageDTO) { dispatch(imageSelected(newSelectedImageDTO)); @@ -204,10 +175,7 @@ export const addRequestedMultipleImageDeletionListener = () => { imageDTOs.forEach((imageDTO) => { // reset init image if we deleted it - if ( - getState().generation.initialImage?.imageName === - imageDTO.image_name - ) { + if (getState().generation.initialImage?.imageName === imageDTO.image_name) { dispatch(clearInitialImage()); } @@ -215,8 +183,7 @@ export const addRequestedMultipleImageDeletionListener = () => { forEach(selectControlAdapterAll(getState().controlAdapters), (ca) => { if ( ca.controlImage === imageDTO.image_name || - (isControlNetOrT2IAdapter(ca) && - ca.processedControlImage === imageDTO.image_name) + (isControlNetOrT2IAdapter(ca) && ca.processedControlImage === imageDTO.image_name) ) { dispatch( controlAdapterImageChanged({ @@ -240,10 +207,7 @@ export const addRequestedMultipleImageDeletionListener = () => { } forEach(node.data.inputs, (input) => { - if ( - isImageFieldInputInstance(input) && - input.value?.image_name === imageDTO.image_name - ) { + if (isImageFieldInputInstance(input) && input.value?.image_name === imageDTO.image_name) { dispatch( fieldImageValueChanged({ nodeId: node.data.id, @@ -295,10 +259,7 @@ export const addImageDeletedRejectedListener = () => { matcher: imagesApi.endpoints.deleteImage.matchRejected, effect: (action) => { const log = logger('images'); - log.debug( - { imageDTO: action.meta.arg.originalArgs }, - 'Unable to delete image' - ); + log.debug({ imageDTO: action.meta.arg.originalArgs }, 'Unable to delete image'); }, }); }; diff --git a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/imageDropped.ts b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/imageDropped.ts index fdd5b45907..268aac25d9 100644 --- a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/imageDropped.ts +++ b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/imageDropped.ts @@ -6,16 +6,10 @@ import { controlAdapterImageChanged, controlAdapterIsEnabledChanged, } from 'features/controlAdapters/store/controlAdaptersSlice'; -import type { - TypesafeDraggableData, - TypesafeDroppableData, -} from 'features/dnd/types'; +import type { TypesafeDraggableData, TypesafeDroppableData } from 'features/dnd/types'; import { imageSelected } from 'features/gallery/store/gallerySlice'; import { fieldImageValueChanged } from 'features/nodes/store/nodesSlice'; -import { - initialImageChanged, - selectOptimalDimension, -} from 'features/parameters/store/generationSlice'; +import { initialImageChanged, selectOptimalDimension } from 'features/parameters/store/generationSlice'; import { imagesApi } from 'services/api/endpoints/images'; import { startAppListening } from '../'; @@ -35,15 +29,9 @@ export const addImageDroppedListener = () => { if (activeData.payloadType === 'IMAGE_DTO') { log.debug({ activeData, overData }, 'Image dropped'); } else if (activeData.payloadType === 'GALLERY_SELECTION') { - log.debug( - { activeData, overData }, - `Images (${getState().gallery.selection.length}) dropped` - ); + log.debug({ activeData, overData }, `Images (${getState().gallery.selection.length}) dropped`); } else if (activeData.payloadType === 'NODE_FIELD') { - log.debug( - { activeData: parseify(activeData), overData: parseify(overData) }, - 'Node field dropped' - ); + log.debug({ activeData: parseify(activeData), overData: parseify(overData) }, 'Node field dropped'); } else { log.debug({ activeData, overData }, `Unknown payload dropped`); } @@ -104,12 +92,7 @@ export const addImageDroppedListener = () => { activeData.payloadType === 'IMAGE_DTO' && activeData.payload.imageDTO ) { - dispatch( - setInitialCanvasImage( - activeData.payload.imageDTO, - selectOptimalDimension(getState()) - ) - ); + dispatch(setInitialCanvasImage(activeData.payload.imageDTO, selectOptimalDimension(getState()))); return; } @@ -191,10 +174,7 @@ export const addImageDroppedListener = () => { /** * Multiple images dropped on user board */ - if ( - overData.actionType === 'ADD_TO_BOARD' && - activeData.payloadType === 'GALLERY_SELECTION' - ) { + if (overData.actionType === 'ADD_TO_BOARD' && activeData.payloadType === 'GALLERY_SELECTION') { const imageDTOs = getState().gallery.selection; const { boardId } = overData.context; dispatch( @@ -209,10 +189,7 @@ export const addImageDroppedListener = () => { /** * Multiple images dropped on 'none' board */ - if ( - overData.actionType === 'REMOVE_FROM_BOARD' && - activeData.payloadType === 'GALLERY_SELECTION' - ) { + if (overData.actionType === 'REMOVE_FROM_BOARD' && activeData.payloadType === 'GALLERY_SELECTION') { const imageDTOs = getState().gallery.selection; dispatch( imagesApi.endpoints.removeImagesFromBoard.initiate({ diff --git a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/imageToDeleteSelected.ts b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/imageToDeleteSelected.ts index ccc14165a3..03921264a2 100644 --- a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/imageToDeleteSelected.ts +++ b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/imageToDeleteSelected.ts @@ -1,9 +1,6 @@ import { imageDeletionConfirmed } from 'features/deleteImageModal/store/actions'; import { selectImageUsage } from 'features/deleteImageModal/store/selectors'; -import { - imagesToDeleteSelected, - isModalOpenChanged, -} from 'features/deleteImageModal/store/slice'; +import { imagesToDeleteSelected, isModalOpenChanged } from 'features/deleteImageModal/store/slice'; import { startAppListening } from '..'; diff --git a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/imageUploaded.ts b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/imageUploaded.ts index 675fc58ef7..d17727fcdc 100644 --- a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/imageUploaded.ts +++ b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/imageUploaded.ts @@ -6,10 +6,7 @@ import { controlAdapterIsEnabledChanged, } from 'features/controlAdapters/store/controlAdaptersSlice'; import { fieldImageValueChanged } from 'features/nodes/store/nodesSlice'; -import { - initialImageChanged, - selectOptimalDimension, -} from 'features/parameters/store/generationSlice'; +import { initialImageChanged, selectOptimalDimension } from 'features/parameters/store/generationSlice'; import { addToast } from 'features/system/store/systemSlice'; import { t } from 'i18next'; import { omit } from 'lodash-es'; @@ -79,9 +76,7 @@ export const addImageUploadedFulfilledListener = () => { } if (postUploadAction?.type === 'SET_CANVAS_INITIAL_IMAGE') { - dispatch( - setInitialCanvasImage(imageDTO, selectOptimalDimension(state)) - ); + dispatch(setInitialCanvasImage(imageDTO, selectOptimalDimension(state))); dispatch( addToast({ ...DEFAULT_UPLOADED_TOAST, @@ -127,9 +122,7 @@ export const addImageUploadedFulfilledListener = () => { if (postUploadAction?.type === 'SET_NODES_IMAGE') { const { nodeId, fieldName } = postUploadAction; - dispatch( - fieldImageValueChanged({ nodeId, fieldName, value: imageDTO }) - ); + dispatch(fieldImageValueChanged({ nodeId, fieldName, value: imageDTO })); dispatch( addToast({ ...DEFAULT_UPLOADED_TOAST, diff --git a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/initialImageSelected.ts b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/initialImageSelected.ts index 09598440a5..93e921e911 100644 --- a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/initialImageSelected.ts +++ b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/initialImageSelected.ts @@ -11,11 +11,7 @@ export const addInitialImageSelectedListener = () => { actionCreator: initialImageSelected, effect: (action, { dispatch }) => { if (!action.payload) { - dispatch( - addToast( - makeToast({ title: t('toast.imageNotLoadedDesc'), status: 'error' }) - ) - ); + dispatch(addToast(makeToast({ title: t('toast.imageNotLoadedDesc'), status: 'error' }))); return; } diff --git a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/modelSelected.ts b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/modelSelected.ts index fae6925ad5..7638c5522a 100644 --- a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/modelSelected.ts +++ b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/modelSelected.ts @@ -5,10 +5,7 @@ import { } from 'features/controlAdapters/store/controlAdaptersSlice'; import { loraRemoved } from 'features/lora/store/loraSlice'; import { modelSelected } from 'features/parameters/store/actions'; -import { - modelChanged, - vaeSelected, -} from 'features/parameters/store/generationSlice'; +import { modelChanged, vaeSelected } from 'features/parameters/store/generationSlice'; import { zParameterModel } from 'features/parameters/types/parameterSchemas'; import { addToast } from 'features/system/store/systemSlice'; import { makeToast } from 'features/system/util/makeToast'; @@ -27,18 +24,14 @@ export const addModelSelectedListener = () => { const result = zParameterModel.safeParse(action.payload); if (!result.success) { - log.error( - { error: result.error.format() }, - 'Failed to parse main model' - ); + log.error({ error: result.error.format() }, 'Failed to parse main model'); return; } const newModel = result.data; const newBaseModel = newModel.base_model; - const didBaseModelChange = - state.generation.model?.base_model !== newBaseModel; + const didBaseModelChange = state.generation.model?.base_model !== newBaseModel; if (didBaseModelChange) { // we may need to reset some incompatible submodels @@ -62,9 +55,7 @@ export const addModelSelectedListener = () => { // handle incompatible controlnets selectControlAdapterAll(state.controlAdapters).forEach((ca) => { if (ca.model?.base_model !== newBaseModel) { - dispatch( - controlAdapterIsEnabledChanged({ id: ca.id, isEnabled: false }) - ); + dispatch(controlAdapterIsEnabledChanged({ id: ca.id, isEnabled: false })); modelsCleared += 1; } }); diff --git a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/modelsLoaded.ts b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/modelsLoaded.ts index 1e50d3578b..0ffe88cd07 100644 --- a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/modelsLoaded.ts +++ b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/modelsLoaded.ts @@ -6,41 +6,24 @@ import { selectAllT2IAdapters, } from 'features/controlAdapters/store/controlAdaptersSlice'; import { loraRemoved } from 'features/lora/store/loraSlice'; -import { - modelChanged, - vaeSelected, -} from 'features/parameters/store/generationSlice'; -import { - zParameterModel, - zParameterVAEModel, -} from 'features/parameters/types/parameterSchemas'; +import { modelChanged, vaeSelected } from 'features/parameters/store/generationSlice'; +import { zParameterModel, zParameterVAEModel } from 'features/parameters/types/parameterSchemas'; import { refinerModelChanged } from 'features/sdxl/store/sdxlSlice'; import { forEach, some } from 'lodash-es'; -import { - mainModelsAdapterSelectors, - modelsApi, - vaeModelsAdapterSelectors, -} from 'services/api/endpoints/models'; +import { mainModelsAdapterSelectors, modelsApi, vaeModelsAdapterSelectors } from 'services/api/endpoints/models'; import type { TypeGuardFor } from 'services/api/types'; import { startAppListening } from '..'; export const addModelsLoadedListener = () => { startAppListening({ - predicate: ( - action - ): action is TypeGuardFor< - typeof modelsApi.endpoints.getMainModels.matchFulfilled - > => + predicate: (action): action is TypeGuardFor => modelsApi.endpoints.getMainModels.matchFulfilled(action) && !action.meta.arg.originalArgs.includes('sdxl-refiner'), effect: async (action, { getState, dispatch }) => { // models loaded, we need to ensure the selected model is available and if not, select the first one const log = logger('models'); - log.info( - { models: action.payload.entities }, - `Main models loaded (${action.payload.ids.length})` - ); + log.info({ models: action.payload.entities }, `Main models loaded (${action.payload.ids.length})`); const currentModel = getState().generation.model; const models = mainModelsAdapterSelectors.selectAll(action.payload); @@ -67,10 +50,7 @@ export const addModelsLoadedListener = () => { const result = zParameterModel.safeParse(models[0]); if (!result.success) { - log.error( - { error: result.error.format() }, - 'Failed to parse main model' - ); + log.error({ error: result.error.format() }, 'Failed to parse main model'); return; } @@ -78,20 +58,12 @@ export const addModelsLoadedListener = () => { }, }); startAppListening({ - predicate: ( - action - ): action is TypeGuardFor< - typeof modelsApi.endpoints.getMainModels.matchFulfilled - > => - modelsApi.endpoints.getMainModels.matchFulfilled(action) && - action.meta.arg.originalArgs.includes('sdxl-refiner'), + predicate: (action): action is TypeGuardFor => + modelsApi.endpoints.getMainModels.matchFulfilled(action) && action.meta.arg.originalArgs.includes('sdxl-refiner'), effect: async (action, { getState, dispatch }) => { // models loaded, we need to ensure the selected model is available and if not, select the first one const log = logger('models'); - log.info( - { models: action.payload.entities }, - `SDXL Refiner models loaded (${action.payload.ids.length})` - ); + log.info({ models: action.payload.entities }, `SDXL Refiner models loaded (${action.payload.ids.length})`); const currentModel = getState().sdxl.refinerModel; const models = mainModelsAdapterSelectors.selectAll(action.payload); @@ -122,10 +94,7 @@ export const addModelsLoadedListener = () => { effect: async (action, { getState, dispatch }) => { // VAEs loaded, need to reset the VAE is it's no longer available const log = logger('models'); - log.info( - { models: action.payload.entities }, - `VAEs loaded (${action.payload.ids.length})` - ); + log.info({ models: action.payload.entities }, `VAEs loaded (${action.payload.ids.length})`); const currentVae = getState().generation.vae; @@ -136,9 +105,7 @@ export const addModelsLoadedListener = () => { const isCurrentVAEAvailable = some( action.payload.entities, - (m) => - m?.model_name === currentVae?.model_name && - m?.base_model === currentVae?.base_model + (m) => m?.model_name === currentVae?.model_name && m?.base_model === currentVae?.base_model ); if (isCurrentVAEAvailable) { @@ -156,10 +123,7 @@ export const addModelsLoadedListener = () => { const result = zParameterVAEModel.safeParse(firstModel); if (!result.success) { - log.error( - { error: result.error.format() }, - 'Failed to parse VAE model' - ); + log.error({ error: result.error.format() }, 'Failed to parse VAE model'); return; } @@ -171,19 +135,14 @@ export const addModelsLoadedListener = () => { effect: async (action, { getState, dispatch }) => { // LoRA models loaded - need to remove missing LoRAs from state const log = logger('models'); - log.info( - { models: action.payload.entities }, - `LoRAs loaded (${action.payload.ids.length})` - ); + log.info({ models: action.payload.entities }, `LoRAs loaded (${action.payload.ids.length})`); const loras = getState().lora.loras; forEach(loras, (lora, id) => { const isLoRAAvailable = some( action.payload.entities, - (m) => - m?.model_name === lora?.model_name && - m?.base_model === lora?.base_model + (m) => m?.model_name === lora?.model_name && m?.base_model === lora?.base_model ); if (isLoRAAvailable) { @@ -199,17 +158,12 @@ export const addModelsLoadedListener = () => { effect: async (action, { getState, dispatch }) => { // ControlNet models loaded - need to remove missing ControlNets from state const log = logger('models'); - log.info( - { models: action.payload.entities }, - `ControlNet models loaded (${action.payload.ids.length})` - ); + log.info({ models: action.payload.entities }, `ControlNet models loaded (${action.payload.ids.length})`); selectAllControlNets(getState().controlAdapters).forEach((ca) => { const isModelAvailable = some( action.payload.entities, - (m) => - m?.model_name === ca?.model?.model_name && - m?.base_model === ca?.model?.base_model + (m) => m?.model_name === ca?.model?.model_name && m?.base_model === ca?.model?.base_model ); if (isModelAvailable) { @@ -225,17 +179,12 @@ export const addModelsLoadedListener = () => { effect: async (action, { getState, dispatch }) => { // ControlNet models loaded - need to remove missing ControlNets from state const log = logger('models'); - log.info( - { models: action.payload.entities }, - `T2I Adapter models loaded (${action.payload.ids.length})` - ); + log.info({ models: action.payload.entities }, `T2I Adapter models loaded (${action.payload.ids.length})`); selectAllT2IAdapters(getState().controlAdapters).forEach((ca) => { const isModelAvailable = some( action.payload.entities, - (m) => - m?.model_name === ca?.model?.model_name && - m?.base_model === ca?.model?.base_model + (m) => m?.model_name === ca?.model?.model_name && m?.base_model === ca?.model?.base_model ); if (isModelAvailable) { @@ -251,17 +200,12 @@ export const addModelsLoadedListener = () => { effect: async (action, { getState, dispatch }) => { // ControlNet models loaded - need to remove missing ControlNets from state const log = logger('models'); - log.info( - { models: action.payload.entities }, - `IP Adapter models loaded (${action.payload.ids.length})` - ); + log.info({ models: action.payload.entities }, `IP Adapter models loaded (${action.payload.ids.length})`); selectAllIPAdapters(getState().controlAdapters).forEach((ca) => { const isModelAvailable = some( action.payload.entities, - (m) => - m?.model_name === ca?.model?.model_name && - m?.base_model === ca?.model?.base_model + (m) => m?.model_name === ca?.model?.model_name && m?.base_model === ca?.model?.base_model ); if (isModelAvailable) { @@ -276,10 +220,7 @@ export const addModelsLoadedListener = () => { matcher: modelsApi.endpoints.getTextualInversionModels.matchFulfilled, effect: async (action) => { const log = logger('models'); - log.info( - { models: action.payload.entities }, - `Embeddings loaded (${action.payload.ids.length})` - ); + log.info({ models: action.payload.entities }, `Embeddings loaded (${action.payload.ids.length})`); }, }); }; diff --git a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/promptChanged.ts b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/promptChanged.ts index 2dd36690a0..bd6cd502f6 100644 --- a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/promptChanged.ts +++ b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/promptChanged.ts @@ -15,21 +15,12 @@ import { socketConnected } from 'services/events/actions'; import { startAppListening } from '..'; -const matcher = isAnyOf( - setPositivePrompt, - combinatorialToggled, - maxPromptsChanged, - maxPromptsReset, - socketConnected -); +const matcher = isAnyOf(setPositivePrompt, combinatorialToggled, maxPromptsChanged, maxPromptsReset, socketConnected); export const addDynamicPromptsListener = () => { startAppListening({ matcher, - effect: async ( - action, - { dispatch, getState, cancelActiveListeners, delay } - ) => { + effect: async (action, { dispatch, getState, cancelActiveListeners, delay }) => { cancelActiveListeners(); const state = getState(); const { positivePrompt } = state.generation; diff --git a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/receivedOpenAPISchema.ts b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/receivedOpenAPISchema.ts index a11c49d069..4ab175cfba 100644 --- a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/receivedOpenAPISchema.ts +++ b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/receivedOpenAPISchema.ts @@ -17,16 +17,9 @@ export const addReceivedOpenAPISchemaListener = () => { log.debug({ schemaJSON }, 'Received OpenAPI schema'); const { nodesAllowlist, nodesDenylist } = getState().config; - const nodeTemplates = parseSchema( - schemaJSON, - nodesAllowlist, - nodesDenylist - ); + const nodeTemplates = parseSchema(schemaJSON, nodesAllowlist, nodesDenylist); - log.debug( - { nodeTemplates: parseify(nodeTemplates) }, - `Built ${size(nodeTemplates)} node templates` - ); + log.debug({ nodeTemplates: parseify(nodeTemplates) }, `Built ${size(nodeTemplates)} node templates`); dispatch(nodeTemplatesBuilt(nodeTemplates)); }, @@ -36,10 +29,7 @@ export const addReceivedOpenAPISchemaListener = () => { actionCreator: receivedOpenAPISchema.rejected, effect: (action) => { const log = logger('system'); - log.error( - { error: parseify(action.error) }, - 'Problem retrieving OpenAPI Schema' - ); + log.error({ error: parseify(action.error) }, 'Problem retrieving OpenAPI Schema'); }, }); }; diff --git a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/socketio/socketConnected.ts b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/socketio/socketConnected.ts index e8e36d026c..05cb0d64b3 100644 --- a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/socketio/socketConnected.ts +++ b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/socketio/socketConnected.ts @@ -16,10 +16,7 @@ const $isFirstConnection = atom(true); export const addSocketConnectedEventListener = () => { startAppListening({ actionCreator: socketConnected, - effect: async ( - action, - { dispatch, getState, cancelActiveListeners, delay } - ) => { + effect: async (action, { dispatch, getState, cancelActiveListeners, delay }) => { log.debug('Connected'); /** @@ -86,10 +83,7 @@ export const addSocketConnectedEventListener = () => { effect: async (action, { dispatch, getState }) => { const { nodeTemplates, config } = getState(); // We only want to re-fetch the schema if we don't have any node templates - if ( - !size(nodeTemplates.templates) && - !config.disabledTabs.includes('nodes') - ) { + if (!size(nodeTemplates.templates) && !config.disabledTabs.includes('nodes')) { // This request is a createAsyncThunk - resetting API state as in the above listener // will not trigger this request, so we need to manually do it. dispatch(receivedOpenAPISchema()); diff --git a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/socketio/socketInvocationComplete.ts b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/socketio/socketInvocationComplete.ts index d59ac3fb11..d49f35cd2a 100644 --- a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/socketio/socketInvocationComplete.ts +++ b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/socketio/socketInvocationComplete.ts @@ -1,17 +1,10 @@ import { logger } from 'app/logging/logger'; import { parseify } from 'common/util/serialize'; import { addImageToStagingArea } from 'features/canvas/store/canvasSlice'; -import { - boardIdSelected, - galleryViewChanged, - imageSelected, -} from 'features/gallery/store/gallerySlice'; +import { boardIdSelected, galleryViewChanged, imageSelected } from 'features/gallery/store/gallerySlice'; import { IMAGE_CATEGORIES } from 'features/gallery/store/types'; import { isImageOutput } from 'features/nodes/types/common'; -import { - LINEAR_UI_OUTPUT, - nodeIDDenyList, -} from 'features/nodes/util/graph/constants'; +import { LINEAR_UI_OUTPUT, nodeIDDenyList } from 'features/nodes/util/graph/constants'; import { boardsApi } from 'services/api/endpoints/boards'; import { imagesApi } from 'services/api/endpoints/images'; import { imagesAdapter } from 'services/api/util'; @@ -29,19 +22,12 @@ export const addInvocationCompleteEventListener = () => { actionCreator: socketInvocationComplete, effect: async (action, { dispatch, getState }) => { const { data } = action.payload; - log.debug( - { data: parseify(data) }, - `Invocation complete (${action.payload.data.node.type})` - ); + log.debug({ data: parseify(data) }, `Invocation complete (${action.payload.data.node.type})`); const { result, node, queue_batch_id, source_node_id } = data; // This complete event has an associated image output - if ( - isImageOutput(result) && - !nodeTypeDenylist.includes(node.type) && - !nodeIDDenyList.includes(source_node_id) - ) { + if (isImageOutput(result) && !nodeTypeDenylist.includes(node.type) && !nodeIDDenyList.includes(source_node_id)) { const { image_name } = result.image; const { canvas, gallery } = getState(); @@ -56,10 +42,7 @@ export const addInvocationCompleteEventListener = () => { imageDTORequest.unsubscribe(); // Add canvas images to the staging area - if ( - canvas.batchIds.includes(queue_batch_id) && - [LINEAR_UI_OUTPUT].includes(data.source_node_id) - ) { + if (canvas.batchIds.includes(queue_batch_id) && [LINEAR_UI_OUTPUT].includes(data.source_node_id)) { dispatch(addImageToStagingArea(imageDTO)); } @@ -84,21 +67,13 @@ export const addInvocationCompleteEventListener = () => { // update the total images for the board dispatch( - boardsApi.util.updateQueryData( - 'getBoardImagesTotal', - imageDTO.board_id ?? 'none', - (draft) => { - // eslint-disable-next-line @typescript-eslint/no-unused-vars - draft.total += 1; - } - ) + boardsApi.util.updateQueryData('getBoardImagesTotal', imageDTO.board_id ?? 'none', (draft) => { + // eslint-disable-next-line @typescript-eslint/no-unused-vars + draft.total += 1; + }) ); - dispatch( - imagesApi.util.invalidateTags([ - { type: 'Board', id: imageDTO.board_id ?? 'none' }, - ]) - ); + dispatch(imagesApi.util.invalidateTags([{ type: 'Board', id: imageDTO.board_id ?? 'none' }])); const { shouldAutoSwitch } = gallery; @@ -109,10 +84,7 @@ export const addInvocationCompleteEventListener = () => { dispatch(galleryViewChanged('images')); } - if ( - imageDTO.board_id && - imageDTO.board_id !== gallery.selectedBoardId - ) { + if (imageDTO.board_id && imageDTO.board_id !== gallery.selectedBoardId) { dispatch( boardIdSelected({ boardId: imageDTO.board_id, diff --git a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/socketio/socketInvocationError.ts b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/socketio/socketInvocationError.ts index a13a9011c5..dfc1f0dd58 100644 --- a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/socketio/socketInvocationError.ts +++ b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/socketio/socketInvocationError.ts @@ -9,10 +9,7 @@ export const addInvocationErrorEventListener = () => { startAppListening({ actionCreator: socketInvocationError, effect: (action) => { - log.error( - action.payload, - `Invocation error (${action.payload.data.node.type})` - ); + log.error(action.payload, `Invocation error (${action.payload.data.node.type})`); }, }); }; diff --git a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/socketio/socketInvocationRetrievalError.ts b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/socketio/socketInvocationRetrievalError.ts index 394c67dbc9..f02317c236 100644 --- a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/socketio/socketInvocationRetrievalError.ts +++ b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/socketio/socketInvocationRetrievalError.ts @@ -9,10 +9,7 @@ export const addInvocationRetrievalErrorEventListener = () => { startAppListening({ actionCreator: socketInvocationRetrievalError, effect: (action) => { - log.error( - action.payload, - `Invocation retrieval error (${action.payload.data.graph_execution_state_id})` - ); + log.error(action.payload, `Invocation retrieval error (${action.payload.data.graph_execution_state_id})`); }, }); }; diff --git a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/socketio/socketInvocationStarted.ts b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/socketio/socketInvocationStarted.ts index 6b293132a2..12766b2707 100644 --- a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/socketio/socketInvocationStarted.ts +++ b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/socketio/socketInvocationStarted.ts @@ -9,10 +9,7 @@ export const addInvocationStartedEventListener = () => { startAppListening({ actionCreator: socketInvocationStarted, effect: (action) => { - log.debug( - action.payload, - `Invocation started (${action.payload.data.node.type})` - ); + log.debug(action.payload, `Invocation started (${action.payload.data.node.type})`); }, }); }; diff --git a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/socketio/socketModelLoad.ts b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/socketio/socketModelLoad.ts index 828102bfa9..aa91c69d75 100644 --- a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/socketio/socketModelLoad.ts +++ b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/socketio/socketModelLoad.ts @@ -1,8 +1,5 @@ import { logger } from 'app/logging/logger'; -import { - socketModelLoadCompleted, - socketModelLoadStarted, -} from 'services/events/actions'; +import { socketModelLoadCompleted, socketModelLoadStarted } from 'services/events/actions'; import { startAppListening } from '../..'; @@ -12,8 +9,7 @@ export const addModelLoadEventListener = () => { startAppListening({ actionCreator: socketModelLoadStarted, effect: (action) => { - const { base_model, model_name, model_type, submodel } = - action.payload.data; + const { base_model, model_name, model_type, submodel } = action.payload.data; let message = `Model load started: ${base_model}/${model_type}/${model_name}`; @@ -28,8 +24,7 @@ export const addModelLoadEventListener = () => { startAppListening({ actionCreator: socketModelLoadCompleted, effect: (action) => { - const { base_model, model_name, model_type, submodel } = - action.payload.data; + const { base_model, model_name, model_type, submodel } = action.payload.data; let message = `Model load complete: ${base_model}/${model_type}/${model_name}`; diff --git a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/socketio/socketQueueItemStatusChanged.ts b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/socketio/socketQueueItemStatusChanged.ts index a766437f15..bd5471b299 100644 --- a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/socketio/socketQueueItemStatusChanged.ts +++ b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/socketio/socketQueueItemStatusChanged.ts @@ -13,10 +13,7 @@ export const addSocketQueueItemStatusChangedEventListener = () => { // we've got new status for the queue item, batch and queue const { queue_item, batch_status, queue_status } = action.payload.data; - log.debug( - action.payload, - `Queue item ${queue_item.item_id} status updated: ${queue_item.status}` - ); + log.debug(action.payload, `Queue item ${queue_item.item_id} status updated: ${queue_item.status}`); // Update this specific queue item in the list of queue items (this is the queue item DTO, without the session) dispatch( @@ -40,35 +37,23 @@ export const addSocketQueueItemStatusChangedEventListener = () => { // Update the batch status dispatch( - queueApi.util.updateQueryData( - 'getBatchStatus', - { batch_id: batch_status.batch_id }, - () => batch_status - ) + queueApi.util.updateQueryData('getBatchStatus', { batch_id: batch_status.batch_id }, () => batch_status) ); // Update the queue item status (this is the full queue item, including the session) dispatch( - queueApi.util.updateQueryData( - 'getQueueItem', - queue_item.item_id, - (draft) => { - if (!draft) { - return; - } - Object.assign(draft, queue_item); + queueApi.util.updateQueryData('getQueueItem', queue_item.item_id, (draft) => { + if (!draft) { + return; } - ) + Object.assign(draft, queue_item); + }) ); // Invalidate caches for things we cannot update // TODO: technically, we could possibly update the current session queue item, but feels safer to just request it again dispatch( - queueApi.util.invalidateTags([ - 'CurrentSessionQueueItem', - 'NextSessionQueueItem', - 'InvocationCacheStatus', - ]) + queueApi.util.invalidateTags(['CurrentSessionQueueItem', 'NextSessionQueueItem', 'InvocationCacheStatus']) ); }, }); diff --git a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/socketio/socketSessionRetrievalError.ts b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/socketio/socketSessionRetrievalError.ts index e20a8cf6cb..b655a686de 100644 --- a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/socketio/socketSessionRetrievalError.ts +++ b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/socketio/socketSessionRetrievalError.ts @@ -9,10 +9,7 @@ export const addSessionRetrievalErrorEventListener = () => { startAppListening({ actionCreator: socketSessionRetrievalError, effect: (action) => { - log.error( - action.payload, - `Session retrieval error (${action.payload.data.graph_execution_state_id})` - ); + log.error(action.payload, `Session retrieval error (${action.payload.data.graph_execution_state_id})`); }, }); }; diff --git a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/updateAllNodesRequested.ts b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/updateAllNodesRequested.ts index 371983c781..752c3b09df 100644 --- a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/updateAllNodesRequested.ts +++ b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/updateAllNodesRequested.ts @@ -3,10 +3,7 @@ import { updateAllNodesRequested } from 'features/nodes/store/actions'; import { nodeReplaced } from 'features/nodes/store/nodesSlice'; import { NodeUpdateError } from 'features/nodes/types/error'; import { isInvocationNode } from 'features/nodes/types/invocation'; -import { - getNeedsUpdate, - updateNode, -} from 'features/nodes/util/node/nodeUpdate'; +import { getNeedsUpdate, updateNode } from 'features/nodes/util/node/nodeUpdate'; import { addToast } from 'features/system/store/systemSlice'; import { makeToast } from 'features/system/util/makeToast'; import { t } from 'i18next'; diff --git a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/upscaleRequested.ts b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/upscaleRequested.ts index 75c67a08cc..46f55ef21f 100644 --- a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/upscaleRequested.ts +++ b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/upscaleRequested.ts @@ -10,9 +10,7 @@ import type { BatchConfig, ImageDTO } from 'services/api/types'; import { startAppListening } from '..'; -export const upscaleRequested = createAction<{ imageDTO: ImageDTO }>( - `upscale/upscaleRequested` -); +export const upscaleRequested = createAction<{ imageDTO: ImageDTO }>(`upscale/upscaleRequested`); export const addUpscaleRequestedListener = () => { startAppListening({ @@ -24,8 +22,7 @@ export const addUpscaleRequestedListener = () => { const { image_name } = imageDTO; const state = getState(); - const { isAllowedToUpscale, detailTKey } = - createIsAllowedToUpscaleSelector(imageDTO)(state); + const { isAllowedToUpscale, detailTKey } = createIsAllowedToUpscaleSelector(imageDTO)(state); // if we can't upscale, show a toast and return if (!isAllowedToUpscale) { @@ -66,21 +63,11 @@ export const addUpscaleRequestedListener = () => { const enqueueResult = await req.unwrap(); req.reset(); - log.debug( - { enqueueResult: parseify(enqueueResult) }, - t('queue.graphQueued') - ); + log.debug({ enqueueResult: parseify(enqueueResult) }, t('queue.graphQueued')); } catch (error) { - log.error( - { enqueueBatchArg: parseify(enqueueBatchArg) }, - t('queue.graphFailedToQueue') - ); + log.error({ enqueueBatchArg: parseify(enqueueBatchArg) }, t('queue.graphFailedToQueue')); - if ( - error instanceof Object && - 'status' in error && - error.status === 403 - ) { + if (error instanceof Object && 'status' in error && error.status === 403) { return; } else { dispatch( diff --git a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/workflowLoadRequested.ts b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/workflowLoadRequested.ts index 1e26ea7a0c..0b37271be7 100644 --- a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/workflowLoadRequested.ts +++ b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/workflowLoadRequested.ts @@ -1,14 +1,8 @@ import { logger } from 'app/logging/logger'; import { parseify } from 'common/util/serialize'; -import { - workflowLoaded, - workflowLoadRequested, -} from 'features/nodes/store/actions'; +import { workflowLoaded, workflowLoadRequested } from 'features/nodes/store/actions'; import { $flow } from 'features/nodes/store/reactFlowInstance'; -import { - WorkflowMigrationError, - WorkflowVersionError, -} from 'features/nodes/types/error'; +import { WorkflowMigrationError, WorkflowVersionError } from 'features/nodes/types/error'; import { validateWorkflow } from 'features/nodes/util/workflow/validateWorkflow'; import { addToast } from 'features/system/store/systemSlice'; import { makeToast } from 'features/system/util/makeToast'; @@ -28,10 +22,7 @@ export const addWorkflowLoadRequestedListener = () => { const nodeTemplates = getState().nodeTemplates.templates; try { - const { workflow: validatedWorkflow, warnings } = validateWorkflow( - workflow, - nodeTemplates - ); + const { workflow: validatedWorkflow, warnings } = validateWorkflow(workflow, nodeTemplates); if (asCopy) { // If we're loading a copy, we need to remove the ID so that the backend will create a new workflow @@ -108,10 +99,7 @@ export const addWorkflowLoadRequestedListener = () => { ); } else { // Some other error occurred - log.error( - { error: parseify(e) }, - t('nodes.unknownErrorValidatingWorkflow') - ); + log.error({ error: parseify(e) }, t('nodes.unknownErrorValidatingWorkflow')); dispatch( addToast( makeToast({ diff --git a/invokeai/frontend/web/src/app/store/nanostores/store.ts b/invokeai/frontend/web/src/app/store/nanostores/store.ts index 59eba50e87..aee0f0e6ef 100644 --- a/invokeai/frontend/web/src/app/store/nanostores/store.ts +++ b/invokeai/frontend/web/src/app/store/nanostores/store.ts @@ -8,6 +8,4 @@ declare global { } } -export const $store = atom< - Readonly> | undefined ->(); +export const $store = atom> | undefined>(); diff --git a/invokeai/frontend/web/src/app/store/nanostores/workflowCategories.ts b/invokeai/frontend/web/src/app/store/nanostores/workflowCategories.ts index a643219c66..e0d6107129 100644 --- a/invokeai/frontend/web/src/app/store/nanostores/workflowCategories.ts +++ b/invokeai/frontend/web/src/app/store/nanostores/workflowCategories.ts @@ -1,7 +1,4 @@ import type { WorkflowCategory } from 'features/nodes/types/workflow'; import { atom } from 'nanostores'; -export const $workflowCategories = atom([ - 'user', - 'default', -]); +export const $workflowCategories = atom(['user', 'default']); diff --git a/invokeai/frontend/web/src/app/store/store.ts b/invokeai/frontend/web/src/app/store/store.ts index 567b70786f..81088ffcbb 100644 --- a/invokeai/frontend/web/src/app/store/store.ts +++ b/invokeai/frontend/web/src/app/store/store.ts @@ -1,17 +1,10 @@ import type { ThunkDispatch, UnknownAction } from '@reduxjs/toolkit'; -import { - autoBatchEnhancer, - combineReducers, - configureStore, -} from '@reduxjs/toolkit'; +import { autoBatchEnhancer, combineReducers, configureStore } from '@reduxjs/toolkit'; import { logger } from 'app/logging/logger'; import { idbKeyValDriver } from 'app/store/enhancers/reduxRemember/driver'; import { errorHandler } from 'app/store/enhancers/reduxRemember/errors'; import { canvasPersistDenylist } from 'features/canvas/store/canvasPersistDenylist'; -import canvasReducer, { - initialCanvasState, - migrateCanvasState, -} from 'features/canvas/store/canvasSlice'; +import canvasReducer, { initialCanvasState, migrateCanvasState } from 'features/canvas/store/canvasSlice'; import changeBoardModalReducer from 'features/changeBoardModal/store/slice'; import { controlAdaptersPersistDenylist } from 'features/controlAdapters/store/controlAdaptersPersistDenylist'; import controlAdaptersReducer, { @@ -25,32 +18,17 @@ import dynamicPromptsReducer, { migrateDynamicPromptsState, } from 'features/dynamicPrompts/store/dynamicPromptsSlice'; import { galleryPersistDenylist } from 'features/gallery/store/galleryPersistDenylist'; -import galleryReducer, { - initialGalleryState, - migrateGalleryState, -} from 'features/gallery/store/gallerySlice'; -import hrfReducer, { - initialHRFState, - migrateHRFState, -} from 'features/hrf/store/hrfSlice'; -import loraReducer, { - initialLoraState, - migrateLoRAState, -} from 'features/lora/store/loraSlice'; +import galleryReducer, { initialGalleryState, migrateGalleryState } from 'features/gallery/store/gallerySlice'; +import hrfReducer, { initialHRFState, migrateHRFState } from 'features/hrf/store/hrfSlice'; +import loraReducer, { initialLoraState, migrateLoRAState } from 'features/lora/store/loraSlice'; import modelmanagerReducer, { initialModelManagerState, migrateModelManagerState, } from 'features/modelManager/store/modelManagerSlice'; import { nodesPersistDenylist } from 'features/nodes/store/nodesPersistDenylist'; -import nodesReducer, { - initialNodesState, - migrateNodesState, -} from 'features/nodes/store/nodesSlice'; +import nodesReducer, { initialNodesState, migrateNodesState } from 'features/nodes/store/nodesSlice'; import nodeTemplatesReducer from 'features/nodes/store/nodeTemplatesSlice'; -import workflowReducer, { - initialWorkflowState, - migrateWorkflowState, -} from 'features/nodes/store/workflowSlice'; +import workflowReducer, { initialWorkflowState, migrateWorkflowState } from 'features/nodes/store/workflowSlice'; import { generationPersistDenylist } from 'features/parameters/store/generationPersistDenylist'; import generationReducer, { initialGenerationState, @@ -62,21 +40,12 @@ import postprocessingReducer, { migratePostprocessingState, } from 'features/parameters/store/postprocessingSlice'; import queueReducer from 'features/queue/store/queueSlice'; -import sdxlReducer, { - initialSDXLState, - migrateSDXLState, -} from 'features/sdxl/store/sdxlSlice'; +import sdxlReducer, { initialSDXLState, migrateSDXLState } from 'features/sdxl/store/sdxlSlice'; import configReducer from 'features/system/store/configSlice'; import { systemPersistDenylist } from 'features/system/store/systemPersistDenylist'; -import systemReducer, { - initialSystemState, - migrateSystemState, -} from 'features/system/store/systemSlice'; +import systemReducer, { initialSystemState, migrateSystemState } from 'features/system/store/systemSlice'; import { uiPersistDenylist } from 'features/ui/store/uiPersistDenylist'; -import uiReducer, { - initialUIState, - migrateUIState, -} from 'features/ui/store/uiSlice'; +import uiReducer, { initialUIState, migrateUIState } from 'features/ui/store/uiSlice'; import { diff } from 'jsondiffpatch'; import { defaultsDeep, keys, omit, pick } from 'lodash-es'; import dynamicMiddlewares from 'redux-dynamic-middlewares'; @@ -206,10 +175,7 @@ const unserialize: UnserializeFunction = (data, key) => { ); return transformed; } catch (err) { - log.warn( - { error: serializeError(err) }, - `Error rehydrating slice "${key}", falling back to default initial state` - ); + log.warn({ error: serializeError(err) }, `Error rehydrating slice "${key}", falling back to default initial state`); return config.initialState; } }; @@ -229,10 +195,7 @@ const serializationDenylist: { }; export const serialize: SerializeFunction = (data, key) => { - const result = omit( - data, - serializationDenylist[key as keyof typeof serializationDenylist] ?? [] - ); + const result = omit(data, serializationDenylist[key as keyof typeof serializationDenylist] ?? []); return JSON.stringify(result); }; @@ -256,9 +219,7 @@ export const createStore = (uniqueStoreKey?: string, persist = true) => persistDebounce: 300, serialize, unserialize, - prefix: uniqueStoreKey - ? `${STORAGE_PREFIX}${uniqueStoreKey}-` - : STORAGE_PREFIX, + prefix: uniqueStoreKey ? `${STORAGE_PREFIX}${uniqueStoreKey}-` : STORAGE_PREFIX, errorHandler, }) ); @@ -278,9 +239,7 @@ export const createStore = (uniqueStoreKey?: string, persist = true) => }, }); -export type AppGetState = ReturnType< - ReturnType['getState'] ->; +export type AppGetState = ReturnType['getState']>; export type RootState = ReturnType['getState']>; // eslint-disable-next-line @typescript-eslint/no-explicit-any export type AppThunkDispatch = ThunkDispatch; diff --git a/invokeai/frontend/web/src/common/components/IAIColorPicker.tsx b/invokeai/frontend/web/src/common/components/IAIColorPicker.tsx index b8d143c495..8c3b329f2f 100644 --- a/invokeai/frontend/web/src/common/components/IAIColorPicker.tsx +++ b/invokeai/frontend/web/src/common/components/IAIColorPicker.tsx @@ -1,17 +1,9 @@ import type { ChakraProps } from '@invoke-ai/ui-library'; -import { - CompositeNumberInput, - Flex, - FormControl, - FormLabel, -} from '@invoke-ai/ui-library'; +import { CompositeNumberInput, Flex, FormControl, FormLabel } from '@invoke-ai/ui-library'; import type { CSSProperties } from 'react'; import { memo, useCallback } from 'react'; import { RgbaColorPicker } from 'react-colorful'; -import type { - ColorPickerBaseProps, - RgbaColor, -} from 'react-colorful/dist/types'; +import type { ColorPickerBaseProps, RgbaColor } from 'react-colorful/dist/types'; import { useTranslation } from 'react-i18next'; type IAIColorPickerProps = ColorPickerBaseProps & { @@ -39,30 +31,13 @@ const numberInputWidth: ChakraProps['w'] = '4.2rem'; const IAIColorPicker = (props: IAIColorPickerProps) => { const { color, onChange, withNumberInput, ...rest } = props; const { t } = useTranslation(); - const handleChangeR = useCallback( - (r: number) => onChange({ ...color, r }), - [color, onChange] - ); - const handleChangeG = useCallback( - (g: number) => onChange({ ...color, g }), - [color, onChange] - ); - const handleChangeB = useCallback( - (b: number) => onChange({ ...color, b }), - [color, onChange] - ); - const handleChangeA = useCallback( - (a: number) => onChange({ ...color, a }), - [color, onChange] - ); + const handleChangeR = useCallback((r: number) => onChange({ ...color, r }), [color, onChange]); + const handleChangeG = useCallback((g: number) => onChange({ ...color, g }), [color, onChange]); + const handleChangeB = useCallback((b: number) => onChange({ ...color, b }), [color, onChange]); + const handleChangeA = useCallback((a: number) => onChange({ ...color, a }), [color, onChange]); return ( - + {withNumberInput && ( diff --git a/invokeai/frontend/web/src/common/components/IAIDndImage.tsx b/invokeai/frontend/web/src/common/components/IAIDndImage.tsx index 17fbaafa41..01107c21b4 100644 --- a/invokeai/frontend/web/src/common/components/IAIDndImage.tsx +++ b/invokeai/frontend/web/src/common/components/IAIDndImage.tsx @@ -1,26 +1,11 @@ -import type { - ChakraProps, - FlexProps, - SystemStyleObject, -} from '@invoke-ai/ui-library'; +import type { ChakraProps, FlexProps, SystemStyleObject } from '@invoke-ai/ui-library'; import { Flex, Icon, Image } from '@invoke-ai/ui-library'; -import { - IAILoadingImageFallback, - IAINoContentFallback, -} from 'common/components/IAIImageFallback'; +import { IAILoadingImageFallback, IAINoContentFallback } from 'common/components/IAIImageFallback'; import ImageMetadataOverlay from 'common/components/ImageMetadataOverlay'; import { useImageUploadButton } from 'common/hooks/useImageUploadButton'; -import type { - TypesafeDraggableData, - TypesafeDroppableData, -} from 'features/dnd/types'; +import type { TypesafeDraggableData, TypesafeDroppableData } from 'features/dnd/types'; import ImageContextMenu from 'features/gallery/components/ImageContextMenu/ImageContextMenu'; -import type { - MouseEvent, - ReactElement, - ReactNode, - SyntheticEvent, -} from 'react'; +import type { MouseEvent, ReactElement, ReactNode, SyntheticEvent } from 'react'; import { memo, useCallback, useMemo, useState } from 'react'; import { PiImageBold, PiUploadSimpleBold } from 'react-icons/pi'; import type { ImageDTO, PostUploadAction } from 'services/api/types'; @@ -165,14 +150,8 @@ const IAIDndImage = (props: IAIDndImageProps) => { - ) - } + fallbackSrc={useThumbailFallback ? imageDTO.thumbnail_url : undefined} + fallback={useThumbailFallback ? undefined : } onError={onError} draggable={false} w={imageDTO.width} @@ -183,13 +162,8 @@ const IAIDndImage = (props: IAIDndImageProps) => { sx={imageSx} data-testid={dataTestId} /> - {withMetadataOverlay && ( - - )} - + {withMetadataOverlay && } + )} {!imageDTO && !isUploadDisabled && ( @@ -202,20 +176,10 @@ const IAIDndImage = (props: IAIDndImageProps) => { )} {!imageDTO && isUploadDisabled && noContentFallback} {imageDTO && !isDragDisabled && ( - + )} {children} - {!isDropDisabled && ( - - )} + {!isDropDisabled && } )} diff --git a/invokeai/frontend/web/src/common/components/IAIDropOverlay.tsx b/invokeai/frontend/web/src/common/components/IAIDropOverlay.tsx index e708d0097a..cd3e0cbee1 100644 --- a/invokeai/frontend/web/src/common/components/IAIDropOverlay.tsx +++ b/invokeai/frontend/web/src/common/components/IAIDropOverlay.tsx @@ -27,12 +27,7 @@ const IAIDropOverlay = (props: Props) => { const { isOver, label = t('gallery.drop') } = props; const motionId = useRef(uuidv4()); return ( - + { pointerEvents={active ? 'auto' : 'none'} > - {isValidDrop(data, active) && ( - - )} + {isValidDrop(data, active) && } ); diff --git a/invokeai/frontend/web/src/common/components/IAIFillSkeleton.tsx b/invokeai/frontend/web/src/common/components/IAIFillSkeleton.tsx index 29bcb927ac..20e9fa2c68 100644 --- a/invokeai/frontend/web/src/common/components/IAIFillSkeleton.tsx +++ b/invokeai/frontend/web/src/common/components/IAIFillSkeleton.tsx @@ -16,13 +16,7 @@ const skeletonStyles: SystemStyleObject = { const IAIFillSkeleton = () => { return ( - + ); }; diff --git a/invokeai/frontend/web/src/common/components/IAIImageFallback.tsx b/invokeai/frontend/web/src/common/components/IAIImageFallback.tsx index c8cf83b5f1..1a23c458cf 100644 --- a/invokeai/frontend/web/src/common/components/IAIImageFallback.tsx +++ b/invokeai/frontend/web/src/common/components/IAIImageFallback.tsx @@ -19,15 +19,7 @@ export const IAILoadingImageFallback = memo((props: Props) => { } return ( - + ); @@ -77,32 +69,30 @@ type IAINoImageFallbackWithSpinnerProps = FlexProps & { label?: string; }; -export const IAINoContentFallbackWithSpinner = memo( - (props: IAINoImageFallbackWithSpinnerProps) => { - const { sx, ...rest } = props; - const styles = useMemo( - () => ({ - w: 'full', - h: 'full', - alignItems: 'center', - justifyContent: 'center', - borderRadius: 'base', - flexDir: 'column', - gap: 2, - userSelect: 'none', - opacity: 0.7, - color: 'base.500', - ...sx, - }), - [sx] - ); +export const IAINoContentFallbackWithSpinner = memo((props: IAINoImageFallbackWithSpinnerProps) => { + const { sx, ...rest } = props; + const styles = useMemo( + () => ({ + w: 'full', + h: 'full', + alignItems: 'center', + justifyContent: 'center', + borderRadius: 'base', + flexDir: 'column', + gap: 2, + userSelect: 'none', + opacity: 0.7, + color: 'base.500', + ...sx, + }), + [sx] + ); - return ( - - - {props.label && {props.label}} - - ); - } -); + return ( + + + {props.label && {props.label}} + + ); +}); IAINoContentFallbackWithSpinner.displayName = 'IAINoContentFallbackWithSpinner'; diff --git a/invokeai/frontend/web/src/common/components/ImageUploadOverlay.tsx b/invokeai/frontend/web/src/common/components/ImageUploadOverlay.tsx index 070598f081..abd68e72cb 100644 --- a/invokeai/frontend/web/src/common/components/ImageUploadOverlay.tsx +++ b/invokeai/frontend/web/src/common/components/ImageUploadOverlay.tsx @@ -91,9 +91,7 @@ const ImageUploadOverlay = (props: ImageUploadOverlayProps) => { ) : ( <> {t('toast.invalidUpload')} - - {t('toast.uploadFailedInvalidUploadDesc')} - + {t('toast.uploadFailedInvalidUploadDesc')} )} diff --git a/invokeai/frontend/web/src/common/components/InformationalPopover/InformationalPopover.tsx b/invokeai/frontend/web/src/common/components/InformationalPopover/InformationalPopover.tsx index 0a52000664..935212ee58 100644 --- a/invokeai/frontend/web/src/common/components/InformationalPopover/InformationalPopover.tsx +++ b/invokeai/frontend/web/src/common/components/InformationalPopover/InformationalPopover.tsx @@ -28,46 +28,39 @@ type Props = { children: ReactElement; }; -export const InformationalPopover = memo( - ({ feature, children, inPortal = true, ...rest }: Props) => { - const shouldEnableInformationalPopovers = useAppSelector( - (s) => s.system.shouldEnableInformationalPopovers - ); +export const InformationalPopover = memo(({ feature, children, inPortal = true, ...rest }: Props) => { + const shouldEnableInformationalPopovers = useAppSelector((s) => s.system.shouldEnableInformationalPopovers); - const data = useMemo(() => POPOVER_DATA[feature], [feature]); + const data = useMemo(() => POPOVER_DATA[feature], [feature]); - const popoverProps = useMemo( - () => merge(omit(data, ['image', 'href', 'buttonLabel']), rest), - [data, rest] - ); + const popoverProps = useMemo(() => merge(omit(data, ['image', 'href', 'buttonLabel']), rest), [data, rest]); - if (!shouldEnableInformationalPopovers) { - return children; - } - - return ( - - {children} - {inPortal ? ( - - - - ) : ( - - )} - - ); + if (!shouldEnableInformationalPopovers) { + return children; } -); + + return ( + + {children} + {inPortal ? ( + + + + ) : ( + + )} + + ); +}); InformationalPopover.displayName = 'InformationalPopover'; @@ -79,10 +72,7 @@ type ContentProps = { const Content = ({ data, feature }: ContentProps) => { const { t } = useTranslation(); - const heading = useMemo( - () => t(`popovers.${feature}.heading`), - [feature, t] - ); + const heading = useMemo(() => t(`popovers.${feature}.heading`), [feature, t]); const paragraphs = useMemo( () => diff --git a/invokeai/frontend/web/src/common/components/InformationalPopover/constants.ts b/invokeai/frontend/web/src/common/components/InformationalPopover/constants.ts index 8d3337dcaa..bdcd1ca9a4 100644 --- a/invokeai/frontend/web/src/common/components/InformationalPopover/constants.ts +++ b/invokeai/frontend/web/src/common/components/InformationalPopover/constants.ts @@ -95,6 +95,4 @@ export const POPOVER_DATA: { [key in Feature]?: PopoverData } = { export const OPEN_DELAY = 1000; // in milliseconds -export const POPPER_MODIFIERS: PopoverProps['modifiers'] = [ - { name: 'preventOverflow', options: { padding: 10 } }, -]; +export const POPPER_MODIFIERS: PopoverProps['modifiers'] = [{ name: 'preventOverflow', options: { padding: 10 } }]; diff --git a/invokeai/frontend/web/src/common/components/Loading/Loading.tsx b/invokeai/frontend/web/src/common/components/Loading/Loading.tsx index 57b4d55560..dae5b40e8c 100644 --- a/invokeai/frontend/web/src/common/components/Loading/Loading.tsx +++ b/invokeai/frontend/web/src/common/components/Loading/Loading.tsx @@ -6,14 +6,7 @@ import { memo } from 'react'; const Loading = () => { return ( - + { +const ScrollableContent = ({ children, maxHeight, overflowX = 'hidden', overflowY = 'scroll' }: Props) => { const overlayscrollbarsOptions = useMemo( () => getOverlayScrollbarsParams(overflowX, overflowY).options, [overflowX, overflowY] @@ -26,11 +21,7 @@ const ScrollableContent = ({ return ( - + {children} diff --git a/invokeai/frontend/web/src/common/hooks/useFullscreenDropzone.ts b/invokeai/frontend/web/src/common/hooks/useFullscreenDropzone.ts index 2894414bb3..350e09b6e5 100644 --- a/invokeai/frontend/web/src/common/hooks/useFullscreenDropzone.ts +++ b/invokeai/frontend/web/src/common/hooks/useFullscreenDropzone.ts @@ -14,22 +14,19 @@ const accept: Accept = { 'image/jpeg': ['.jpg', '.jpeg', '.png'], }; -const selectPostUploadAction = createMemoizedSelector( - activeTabNameSelector, - (activeTabName) => { - let postUploadAction: PostUploadAction = { type: 'TOAST' }; +const selectPostUploadAction = createMemoizedSelector(activeTabNameSelector, (activeTabName) => { + let postUploadAction: PostUploadAction = { type: 'TOAST' }; - if (activeTabName === 'unifiedCanvas') { - postUploadAction = { type: 'SET_CANVAS_INITIAL_IMAGE' }; - } - - if (activeTabName === 'img2img') { - postUploadAction = { type: 'SET_INITIAL_IMAGE' }; - } - - return postUploadAction; + if (activeTabName === 'unifiedCanvas') { + postUploadAction = { type: 'SET_CANVAS_INITIAL_IMAGE' }; } -); + + if (activeTabName === 'img2img') { + postUploadAction = { type: 'SET_INITIAL_IMAGE' }; + } + + return postUploadAction; +}); export const useFullscreenDropzone = () => { const { t } = useTranslation(); @@ -112,9 +109,7 @@ export const useFullscreenDropzone = () => { // Set the files on the dropzone.inputRef dropzone.inputRef.current.files = e.clipboardData.files; // Dispatch the change event, dropzone catches this and we get to use its own validation - dropzone.inputRef.current?.dispatchEvent( - new Event('change', { bubbles: true }) - ); + dropzone.inputRef.current?.dispatchEvent(new Event('change', { bubbles: true })); } }; diff --git a/invokeai/frontend/web/src/common/hooks/useGlobalHotkeys.ts b/invokeai/frontend/web/src/common/hooks/useGlobalHotkeys.ts index 4416480f0e..372452ce99 100644 --- a/invokeai/frontend/web/src/common/hooks/useGlobalHotkeys.ts +++ b/invokeai/frontend/web/src/common/hooks/useGlobalHotkeys.ts @@ -9,13 +9,8 @@ import { useHotkeys } from 'react-hotkeys-hook'; export const useGlobalHotkeys = () => { const dispatch = useAppDispatch(); - const isModelManagerEnabled = - useFeatureStatus('modelManager').isFeatureEnabled; - const { - queueBack, - isDisabled: isDisabledQueueBack, - isLoading: isLoadingQueueBack, - } = useQueueBack(); + const isModelManagerEnabled = useFeatureStatus('modelManager').isFeatureEnabled; + const { queueBack, isDisabled: isDisabledQueueBack, isLoading: isLoadingQueueBack } = useQueueBack(); useHotkeys( ['ctrl+enter', 'meta+enter'], @@ -28,11 +23,7 @@ export const useGlobalHotkeys = () => { [queueBack, isDisabledQueueBack, isLoadingQueueBack] ); - const { - queueFront, - isDisabled: isDisabledQueueFront, - isLoading: isLoadingQueueFront, - } = useQueueFront(); + const { queueFront, isDisabled: isDisabledQueueFront, isLoading: isLoadingQueueFront } = useQueueFront(); useHotkeys( ['ctrl+shift+enter', 'meta+shift+enter'], @@ -61,11 +52,7 @@ export const useGlobalHotkeys = () => { [cancelQueueItem, isDisabledCancelQueueItem, isLoadingCancelQueueItem] ); - const { - clearQueue, - isDisabled: isDisabledClearQueue, - isLoading: isLoadingClearQueue, - } = useClearQueue(); + const { clearQueue, isDisabled: isDisabledClearQueue, isLoading: isLoadingClearQueue } = useClearQueue(); useHotkeys( ['ctrl+shift+x', 'meta+shift+x'], diff --git a/invokeai/frontend/web/src/common/hooks/useGroupedModelCombobox.ts b/invokeai/frontend/web/src/common/hooks/useGroupedModelCombobox.ts index 44e9101574..eb55db79ca 100644 --- a/invokeai/frontend/web/src/common/hooks/useGroupedModelCombobox.ts +++ b/invokeai/frontend/web/src/common/hooks/useGroupedModelCombobox.ts @@ -28,11 +28,8 @@ export const useGroupedModelCombobox = ( arg: UseGroupedModelComboboxArg ): UseGroupedModelComboboxReturn => { const { t } = useTranslation(); - const base_model = useAppSelector( - (s) => s.generation.model?.base_model ?? 'sdxl' - ); - const { modelEntities, selectedModel, getIsDisabled, onChange, isLoading } = - arg; + const base_model = useAppSelector((s) => s.generation.model?.base_model ?? 'sdxl'); + const { modelEntities, selectedModel, getIsDisabled, onChange, isLoading } = arg; const options = useMemo[]>(() => { if (!modelEntities) { return []; @@ -60,11 +57,8 @@ export const useGroupedModelCombobox = ( const value = useMemo( () => - options - .flatMap((o) => o.options) - .find((m) => - selectedModel ? m.value === getModelId(selectedModel) : false - ) ?? null, + options.flatMap((o) => o.options).find((m) => (selectedModel ? m.value === getModelId(selectedModel) : false)) ?? + null, [options, selectedModel] ); diff --git a/invokeai/frontend/web/src/common/hooks/useImageUploadButton.tsx b/invokeai/frontend/web/src/common/hooks/useImageUploadButton.tsx index 085c98cb38..011f49ec26 100644 --- a/invokeai/frontend/web/src/common/hooks/useImageUploadButton.tsx +++ b/invokeai/frontend/web/src/common/hooks/useImageUploadButton.tsx @@ -28,10 +28,7 @@ type UseImageUploadButtonArgs = { * { const isStaging = useAppSelector(isStagingSelector); const isMaskEnabled = useAppSelector((s) => s.canvas.isMaskEnabled); - const shouldShowBoundingBox = useAppSelector( - (s) => s.canvas.shouldShowBoundingBox - ); + const shouldShowBoundingBox = useAppSelector((s) => s.canvas.shouldShowBoundingBox); const shouldShowGrid = useAppSelector((s) => s.canvas.shouldShowGrid); const stageScale = useAppSelector((s) => s.canvas.stageScale); - const shouldShowIntermediates = useAppSelector( - (s) => s.canvas.shouldShowIntermediates - ); + const shouldShowIntermediates = useAppSelector((s) => s.canvas.shouldShowIntermediates); const shouldAntialias = useAppSelector((s) => s.canvas.shouldAntialias); - const shouldRestrictStrokesToBox = useAppSelector( - (s) => s.canvas.shouldRestrictStrokesToBox - ); + const shouldRestrictStrokesToBox = useAppSelector((s) => s.canvas.shouldRestrictStrokesToBox); const { stageCoordinates, stageDimensions } = useAppSelector(selector); const dispatch = useAppDispatch(); const containerRef = useRef(null); @@ -95,22 +86,12 @@ const IAICanvas = () => { return 'default'; } return 'none'; - }, [ - isMouseOverBoundingBox, - isMovingStage, - isStaging, - isTransformingBoundingBox, - shouldRestrictStrokesToBox, - tool, - ]); + }, [isMouseOverBoundingBox, isMovingStage, isStaging, isTransformingBoundingBox, shouldRestrictStrokesToBox, tool]); - const canvasBaseLayerRefCallback = useCallback( - (layerElement: Konva.Layer) => { - $canvasBaseLayer.set(layerElement); - canvasBaseLayerRef.current = layerElement; - }, - [] - ); + const canvasBaseLayerRefCallback = useCallback((layerElement: Konva.Layer) => { + $canvasBaseLayer.set(layerElement); + canvasBaseLayerRef.current = layerElement; + }, []); const lastCursorPositionRef = useRef({ x: 0, y: 0 }); @@ -120,18 +101,10 @@ const IAICanvas = () => { const handleWheel = useCanvasWheel(stageRef); const handleMouseDown = useCanvasMouseDown(stageRef); const handleMouseUp = useCanvasMouseUp(stageRef, didMouseMoveRef); - const handleMouseMove = useCanvasMouseMove( - stageRef, - didMouseMoveRef, - lastCursorPositionRef - ); - const { handleDragStart, handleDragMove, handleDragEnd } = - useCanvasDragMove(); + const handleMouseMove = useCanvasMouseMove(stageRef, didMouseMoveRef, lastCursorPositionRef); + const { handleDragStart, handleDragMove, handleDragEnd } = useCanvasDragMove(); const handleMouseOut = useCanvasMouseOut(); - const handleContextMenu = useCallback( - (e: KonvaEventObject) => e.evt.preventDefault(), - [] - ); + const handleContextMenu = useCallback((e: KonvaEventObject) => e.evt.preventDefault(), []); useEffect(() => { if (!containerRef.current) { @@ -169,14 +142,7 @@ const IAICanvas = () => { const scale = useMemo(() => ({ x: stageScale, y: stageScale }), [stageScale]); return ( - + { - + - + @@ -225,17 +182,10 @@ const IAICanvas = () => { - {!isStaging && ( - - )} + {!isStaging && } {shouldShowIntermediates && } - + diff --git a/invokeai/frontend/web/src/features/canvas/components/IAICanvasBoundingBoxOverlay.tsx b/invokeai/frontend/web/src/features/canvas/components/IAICanvasBoundingBoxOverlay.tsx index 8d364a91ab..3cb75c09c6 100644 --- a/invokeai/frontend/web/src/features/canvas/components/IAICanvasBoundingBoxOverlay.tsx +++ b/invokeai/frontend/web/src/features/canvas/components/IAICanvasBoundingBoxOverlay.tsx @@ -5,12 +5,7 @@ import { memo } from 'react'; import { Group, Rect } from 'react-konva'; const selector = createMemoizedSelector(selectCanvasSlice, (canvas) => { - const { - boundingBoxCoordinates, - boundingBoxDimensions, - stageDimensions, - stageCoordinates, - } = canvas; + const { boundingBoxCoordinates, boundingBoxDimensions, stageDimensions, stageCoordinates } = canvas; return { boundingBoxCoordinates, @@ -21,15 +16,8 @@ const selector = createMemoizedSelector(selectCanvasSlice, (canvas) => { }); const IAICanvasBoundingBoxOverlay = () => { - const { - boundingBoxCoordinates, - boundingBoxDimensions, - stageCoordinates, - stageDimensions, - } = useAppSelector(selector); - const shouldDarkenOutsideBoundingBox = useAppSelector( - (s) => s.canvas.shouldDarkenOutsideBoundingBox - ); + const { boundingBoxCoordinates, boundingBoxDimensions, stageCoordinates, stageDimensions } = useAppSelector(selector); + const shouldDarkenOutsideBoundingBox = useAppSelector((s) => s.canvas.shouldDarkenOutsideBoundingBox); const stageScale = useAppSelector((s) => s.canvas.stageScale); return ( diff --git a/invokeai/frontend/web/src/features/canvas/components/IAICanvasImage.tsx b/invokeai/frontend/web/src/features/canvas/components/IAICanvasImage.tsx index 437f1d7d9d..75ae983f23 100644 --- a/invokeai/frontend/web/src/features/canvas/components/IAICanvasImage.tsx +++ b/invokeai/frontend/web/src/features/canvas/components/IAICanvasImage.tsx @@ -13,13 +13,8 @@ type IAICanvasImageProps = { }; const IAICanvasImage = (props: IAICanvasImageProps) => { const { x, y, imageName } = props.canvasImage; - const { currentData: imageDTO, isError } = useGetImageDTOQuery( - imageName ?? skipToken - ); - const [image, status] = useImage( - imageDTO?.image_url ?? '', - $authToken.get() ? 'use-credentials' : 'anonymous' - ); + const { currentData: imageDTO, isError } = useGetImageDTOQuery(imageName ?? skipToken); + const [image, status] = useImage(imageDTO?.image_url ?? '', $authToken.get() ? 'use-credentials' : 'anonymous'); if (isError || status === 'failed') { return ; diff --git a/invokeai/frontend/web/src/features/canvas/components/IAICanvasImageErrorFallback.tsx b/invokeai/frontend/web/src/features/canvas/components/IAICanvasImageErrorFallback.tsx index 55ef24f3e5..1606dfa844 100644 --- a/invokeai/frontend/web/src/features/canvas/components/IAICanvasImageErrorFallback.tsx +++ b/invokeai/frontend/web/src/features/canvas/components/IAICanvasImageErrorFallback.tsx @@ -7,9 +7,7 @@ import { Group, Rect, Text } from 'react-konva'; type IAICanvasImageErrorFallbackProps = { canvasImage: CanvasImage; }; -const IAICanvasImageErrorFallback = ({ - canvasImage, -}: IAICanvasImageErrorFallbackProps) => { +const IAICanvasImageErrorFallback = ({ canvasImage }: IAICanvasImageErrorFallbackProps) => { const [rectFill, textFill] = useToken('colors', ['base.500', 'base.900']); const { t } = useTranslation(); return ( diff --git a/invokeai/frontend/web/src/features/canvas/components/IAICanvasIntermediateImage.tsx b/invokeai/frontend/web/src/features/canvas/components/IAICanvasIntermediateImage.tsx index 966017a814..bd9b93997e 100644 --- a/invokeai/frontend/web/src/features/canvas/components/IAICanvasIntermediateImage.tsx +++ b/invokeai/frontend/web/src/features/canvas/components/IAICanvasIntermediateImage.tsx @@ -5,26 +5,20 @@ import { selectSystemSlice } from 'features/system/store/systemSlice'; import { memo, useEffect, useState } from 'react'; import { Image as KonvaImage } from 'react-konva'; -const progressImageSelector = createMemoizedSelector( - [selectSystemSlice, selectCanvasSlice], - (system, canvas) => { - const { denoiseProgress } = system; - const { batchIds } = canvas; +const progressImageSelector = createMemoizedSelector([selectSystemSlice, selectCanvasSlice], (system, canvas) => { + const { denoiseProgress } = system; + const { batchIds } = canvas; - return { - progressImage: - denoiseProgress && batchIds.includes(denoiseProgress.batch_id) - ? denoiseProgress.progress_image - : undefined, - boundingBox: canvas.layerState.stagingArea.boundingBox, - }; - } -); + return { + progressImage: + denoiseProgress && batchIds.includes(denoiseProgress.batch_id) ? denoiseProgress.progress_image : undefined, + boundingBox: canvas.layerState.stagingArea.boundingBox, + }; +}); const IAICanvasIntermediateImage = () => { const { progressImage, boundingBox } = useAppSelector(progressImageSelector); - const [loadedImageElement, setLoadedImageElement] = - useState(null); + const [loadedImageElement, setLoadedImageElement] = useState(null); useEffect(() => { if (!progressImage) { diff --git a/invokeai/frontend/web/src/features/canvas/components/IAICanvasMaskCompositer.tsx b/invokeai/frontend/web/src/features/canvas/components/IAICanvasMaskCompositer.tsx index 1a0aaa62d2..6098d85359 100644 --- a/invokeai/frontend/web/src/features/canvas/components/IAICanvasMaskCompositer.tsx +++ b/invokeai/frontend/web/src/features/canvas/components/IAICanvasMaskCompositer.tsx @@ -9,30 +9,22 @@ import { isNumber } from 'lodash-es'; import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react'; import { Rect } from 'react-konva'; -export const canvasMaskCompositerSelector = createMemoizedSelector( - selectCanvasSlice, - (canvas) => { - return { - stageCoordinates: canvas.stageCoordinates, - stageDimensions: canvas.stageDimensions, - }; - } -); +export const canvasMaskCompositerSelector = createMemoizedSelector(selectCanvasSlice, (canvas) => { + return { + stageCoordinates: canvas.stageCoordinates, + stageDimensions: canvas.stageDimensions, + }; +}); type IAICanvasMaskCompositerProps = RectConfig; const IAICanvasMaskCompositer = (props: IAICanvasMaskCompositerProps) => { const { ...rest } = props; - const { stageCoordinates, stageDimensions } = useAppSelector( - canvasMaskCompositerSelector - ); + const { stageCoordinates, stageDimensions } = useAppSelector(canvasMaskCompositerSelector); const stageScale = useAppSelector((s) => s.canvas.stageScale); - const maskColorString = useAppSelector((s) => - rgbaColorToString(s.canvas.maskColor) - ); - const [fillPatternImage, setFillPatternImage] = - useState(null); + const maskColorString = useAppSelector((s) => rgbaColorToString(s.canvas.maskColor)); + const [fillPatternImage, setFillPatternImage] = useState(null); const [offset, setOffset] = useState(0); @@ -66,10 +58,7 @@ const IAICanvasMaskCompositer = (props: IAICanvasMaskCompositerProps) => { return () => clearInterval(timer); }, []); - const fillPatternScale = useMemo( - () => ({ x: 1 / stageScale, y: 1 / stageScale }), - [stageScale] - ); + const fillPatternScale = useMemo(() => ({ x: 1 / stageScale, y: 1 / stageScale }), [stageScale]); if ( !fillPatternImage || diff --git a/invokeai/frontend/web/src/features/canvas/components/IAICanvasMaskLines.tsx b/invokeai/frontend/web/src/features/canvas/components/IAICanvasMaskLines.tsx index 5511652e8d..27a733cb5e 100644 --- a/invokeai/frontend/web/src/features/canvas/components/IAICanvasMaskLines.tsx +++ b/invokeai/frontend/web/src/features/canvas/components/IAICanvasMaskLines.tsx @@ -27,9 +27,7 @@ const IAICanvasLines = (props: InpaintingCanvasLinesProps) => { lineJoin="round" shadowForStrokeEnabled={false} listening={false} - globalCompositeOperation={ - line.tool === 'brush' ? 'source-over' : 'destination-out' - } + globalCompositeOperation={line.tool === 'brush' ? 'source-over' : 'destination-out'} /> ))} diff --git a/invokeai/frontend/web/src/features/canvas/components/IAICanvasObjectRenderer.tsx b/invokeai/frontend/web/src/features/canvas/components/IAICanvasObjectRenderer.tsx index bc089fe28a..23005a9d24 100644 --- a/invokeai/frontend/web/src/features/canvas/components/IAICanvasObjectRenderer.tsx +++ b/invokeai/frontend/web/src/features/canvas/components/IAICanvasObjectRenderer.tsx @@ -31,9 +31,7 @@ const IAICanvasObjectRenderer = () => { lineJoin="round" shadowForStrokeEnabled={false} listening={false} - globalCompositeOperation={ - obj.tool === 'brush' ? 'source-over' : 'destination-out' - } + globalCompositeOperation={obj.tool === 'brush' ? 'source-over' : 'destination-out'} /> ); if (obj.clip) { diff --git a/invokeai/frontend/web/src/features/canvas/components/IAICanvasStagingArea.tsx b/invokeai/frontend/web/src/features/canvas/components/IAICanvasStagingArea.tsx index 361da7658c..8b9b580e63 100644 --- a/invokeai/frontend/web/src/features/canvas/components/IAICanvasStagingArea.tsx +++ b/invokeai/frontend/web/src/features/canvas/components/IAICanvasStagingArea.tsx @@ -22,9 +22,7 @@ const selector = createMemoizedSelector(selectCanvasSlice, (canvas) => { return { currentStagingAreaImage: - images.length > 0 && selectedImageIndex !== undefined - ? images[selectedImageIndex] - : undefined, + images.length > 0 && selectedImageIndex !== undefined ? images[selectedImageIndex] : undefined, isOnFirstImage: selectedImageIndex === 0, isOnLastImage: selectedImageIndex === images.length - 1, shouldShowStagingImage, @@ -39,21 +37,12 @@ const selector = createMemoizedSelector(selectCanvasSlice, (canvas) => { type Props = GroupConfig; const IAICanvasStagingArea = (props: Props) => { - const { - currentStagingAreaImage, - shouldShowStagingImage, - shouldShowStagingOutline, - x, - y, - width, - height, - } = useAppSelector(selector); + const { currentStagingAreaImage, shouldShowStagingImage, shouldShowStagingOutline, x, y, width, height } = + useAppSelector(selector); return ( - {shouldShowStagingImage && currentStagingAreaImage && ( - - )} + {shouldShowStagingImage && currentStagingAreaImage && } {shouldShowStagingOutline && ( { return { currentIndex: selectedImageIndex, total: images.length, - currentStagingAreaImage: - images.length > 0 ? images[selectedImageIndex] : undefined, + currentStagingAreaImage: images.length > 0 ? images[selectedImageIndex] : undefined, shouldShowStagingImage, shouldShowStagingOutline, }; @@ -47,12 +46,7 @@ const selector = createMemoizedSelector(selectCanvasSlice, (canvas) => { const IAICanvasStagingAreaToolbar = () => { const dispatch = useAppDispatch(); - const { - currentStagingAreaImage, - shouldShowStagingImage, - currentIndex, - total, - } = useAppSelector(selector); + const { currentStagingAreaImage, shouldShowStagingImage, currentIndex, total } = useAppSelector(selector); const { t } = useTranslation(); @@ -64,20 +58,11 @@ const IAICanvasStagingAreaToolbar = () => { dispatch(setShouldShowStagingOutline(false)); }, [dispatch]); - const handlePrevImage = useCallback( - () => dispatch(prevStagingAreaImage()), - [dispatch] - ); + const handlePrevImage = useCallback(() => dispatch(prevStagingAreaImage()), [dispatch]); - const handleNextImage = useCallback( - () => dispatch(nextStagingAreaImage()), - [dispatch] - ); + const handleNextImage = useCallback(() => dispatch(nextStagingAreaImage()), [dispatch]); - const handleAccept = useCallback( - () => dispatch(commitStagingAreaImage()), - [dispatch] - ); + const handleAccept = useCallback(() => dispatch(commitStagingAreaImage()), [dispatch]); useHotkeys(['left'], handlePrevImage, { enabled: () => true, @@ -94,9 +79,7 @@ const IAICanvasStagingAreaToolbar = () => { preventDefault: true, }); - const { data: imageDTO } = useGetImageDTOQuery( - currentStagingAreaImage?.imageName ?? skipToken - ); + const { data: imageDTO } = useGetImageDTOQuery(currentStagingAreaImage?.imageName ?? skipToken); const handleToggleShouldShowStagingImage = useCallback(() => { dispatch(setShouldShowStagingImage(!shouldShowStagingImage)); @@ -166,16 +149,8 @@ const IAICanvasStagingAreaToolbar = () => { colorScheme="invokeBlue" /> : } onClick={handleToggleShouldShowStagingImage} diff --git a/invokeai/frontend/web/src/features/canvas/components/IAICanvasStatusText.tsx b/invokeai/frontend/web/src/features/canvas/components/IAICanvasStatusText.tsx index ff854aef60..4c8153b83f 100644 --- a/invokeai/frontend/web/src/features/canvas/components/IAICanvasStatusText.tsx +++ b/invokeai/frontend/web/src/features/canvas/components/IAICanvasStatusText.tsx @@ -16,10 +16,7 @@ const selector = createMemoizedSelector(selectCanvasSlice, (canvas) => { stageDimensions: { width: stageWidth, height: stageHeight }, stageCoordinates: { x: stageX, y: stageY }, boundingBoxDimensions: { width: boxWidth, height: boxHeight }, - scaledBoundingBoxDimensions: { - width: scaledBoxWidth, - height: scaledBoxHeight, - }, + scaledBoundingBoxDimensions: { width: scaledBoxWidth, height: scaledBoxHeight }, boundingBoxCoordinates: { x: boxX, y: boxY }, stageScale, shouldShowCanvasDebugInfo, @@ -31,10 +28,8 @@ const selector = createMemoizedSelector(selectCanvasSlice, (canvas) => { let boundingBoxColor = 'inherit'; if ( - (boundingBoxScaleMethod === 'none' && - (boxWidth < 512 || boxHeight < 512)) || - (boundingBoxScaleMethod === 'manual' && - scaledBoxWidth * scaledBoxHeight < 512 * 512) + (boundingBoxScaleMethod === 'none' && (boxWidth < 512 || boxHeight < 512)) || + (boundingBoxScaleMethod === 'manual' && scaledBoxWidth * scaledBoxHeight < 512 * 512) ) { boundingBoxColor = warningColor; } @@ -45,14 +40,10 @@ const selector = createMemoizedSelector(selectCanvasSlice, (canvas) => { activeLayerColor, layer, boundingBoxColor, - boundingBoxCoordinatesString: `(${roundToHundreth(boxX)}, ${roundToHundreth( - boxY - )})`, + boundingBoxCoordinatesString: `(${roundToHundreth(boxX)}, ${roundToHundreth(boxY)})`, boundingBoxDimensionsString: `${boxWidth}×${boxHeight}`, scaledBoundingBoxDimensionsString: `${scaledBoxWidth}×${scaledBoxHeight}`, - canvasCoordinatesString: `${roundToHundreth(stageX)}×${roundToHundreth( - stageY - )}`, + canvasCoordinatesString: `${roundToHundreth(stageX)}×${roundToHundreth(stageY)}`, canvasDimensionsString: `${stageWidth}×${stageHeight}`, canvasScaleString: Math.round(stageScale * 100), shouldShowCanvasDebugInfo, @@ -99,9 +90,7 @@ const IAICanvasStatusText = () => { bg="base.800" > - {`${t('unifiedCanvas.activeLayer')}: ${t( - `unifiedCanvas.${layer}` - )}`} + {`${t('unifiedCanvas.activeLayer')}: ${t(`unifiedCanvas.${layer}`)}`} {`${t('unifiedCanvas.canvasScale')}: ${canvasScaleString}%`} {shouldPreserveMaskedArea && ( @@ -109,9 +98,7 @@ const IAICanvasStatusText = () => { )} {shouldShowBoundingBox && ( - {`${t( - 'unifiedCanvas.boundingBox' - )}: ${boundingBoxDimensionsString}`} + {`${t('unifiedCanvas.boundingBox')}: ${boundingBoxDimensionsString}`} )} {shouldShowScaledBoundingBox && ( {`${t( @@ -120,15 +107,9 @@ const IAICanvasStatusText = () => { )} {shouldShowCanvasDebugInfo && ( <> - {`${t( - 'unifiedCanvas.boundingBoxPosition' - )}: ${boundingBoxCoordinatesString}`} - {`${t( - 'unifiedCanvas.canvasDimensions' - )}: ${canvasDimensionsString}`} - {`${t( - 'unifiedCanvas.canvasPosition' - )}: ${canvasCoordinatesString}`} + {`${t('unifiedCanvas.boundingBoxPosition')}: ${boundingBoxCoordinatesString}`} + {`${t('unifiedCanvas.canvasDimensions')}: ${canvasDimensionsString}`} + {`${t('unifiedCanvas.canvasPosition')}: ${canvasCoordinatesString}`} )} diff --git a/invokeai/frontend/web/src/features/canvas/components/IAICanvasStatusText/IAICanvasStatusTextCursorPos.tsx b/invokeai/frontend/web/src/features/canvas/components/IAICanvasStatusText/IAICanvasStatusTextCursorPos.tsx index 6e5afde469..a7e9ecb157 100644 --- a/invokeai/frontend/web/src/features/canvas/components/IAICanvasStatusText/IAICanvasStatusTextCursorPos.tsx +++ b/invokeai/frontend/web/src/features/canvas/components/IAICanvasStatusText/IAICanvasStatusTextCursorPos.tsx @@ -14,11 +14,7 @@ const IAICanvasStatusTextCursorPos = () => { return `(${roundToHundreth(x)}, ${roundToHundreth(y)})`; }, [cursorPosition?.x, cursorPosition?.y]); - return ( - {`${t( - 'unifiedCanvas.cursorPosition' - )}: ${cursorCoordinatesString}`} - ); + return {`${t('unifiedCanvas.cursorPosition')}: ${cursorCoordinatesString}`}; }; export default memo(IAICanvasStatusTextCursorPos); diff --git a/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolPreview.tsx b/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolPreview.tsx index 97ad0c6073..be1a4c2d4c 100644 --- a/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolPreview.tsx +++ b/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolPreview.tsx @@ -9,104 +9,84 @@ import { } from 'features/canvas/store/canvasNanostore'; import { selectCanvasSlice } from 'features/canvas/store/canvasSlice'; import { rgbaColorToString } from 'features/canvas/util/colorToString'; -import { - COLOR_PICKER_SIZE, - COLOR_PICKER_STROKE_RADIUS, -} from 'features/canvas/util/constants'; +import { COLOR_PICKER_SIZE, COLOR_PICKER_STROKE_RADIUS } from 'features/canvas/util/constants'; import type { GroupConfig } from 'konva/lib/Group'; import { memo, useMemo } from 'react'; import { Circle, Group } from 'react-konva'; -const canvasBrushPreviewSelector = createMemoizedSelector( - selectCanvasSlice, - (canvas) => { - const { - stageDimensions, - boundingBoxCoordinates, - boundingBoxDimensions, - shouldRestrictStrokesToBox, - } = canvas; +const canvasBrushPreviewSelector = createMemoizedSelector(selectCanvasSlice, (canvas) => { + const { stageDimensions, boundingBoxCoordinates, boundingBoxDimensions, shouldRestrictStrokesToBox } = canvas; - const clip = shouldRestrictStrokesToBox - ? { - clipX: boundingBoxCoordinates.x, - clipY: boundingBoxCoordinates.y, - clipWidth: boundingBoxDimensions.width, - clipHeight: boundingBoxDimensions.height, - } - : {}; + const clip = shouldRestrictStrokesToBox + ? { + clipX: boundingBoxCoordinates.x, + clipY: boundingBoxCoordinates.y, + clipWidth: boundingBoxDimensions.width, + clipHeight: boundingBoxDimensions.height, + } + : {}; - // // big brain time; this is the *inverse* of the clip that is needed for shouldRestrictStrokesToBox - // // it took some fiddling to work out, so I am leaving it here in case it is needed for something else... - // const clipFunc = shouldRestrictStrokesToBox - // ? (ctx: SceneContext) => { - // console.log( - // stageCoordinates.x / stageScale, - // stageCoordinates.y / stageScale, - // stageDimensions.height / stageScale, - // stageDimensions.width / stageScale - // ); - // ctx.fillStyle = 'red'; - // ctx.rect( - // -stageCoordinates.x / stageScale, - // -stageCoordinates.y / stageScale, - // stageDimensions.width / stageScale, - // stageCoordinates.y / stageScale + boundingBoxCoordinates.y - // ); - // ctx.rect( - // -stageCoordinates.x / stageScale, - // boundingBoxCoordinates.y + boundingBoxDimensions.height, - // stageDimensions.width / stageScale, - // stageDimensions.height / stageScale - // ); - // ctx.rect( - // -stageCoordinates.x / stageScale, - // -stageCoordinates.y / stageScale, - // stageCoordinates.x / stageScale + boundingBoxCoordinates.x, - // stageDimensions.height / stageScale - // ); - // ctx.rect( - // boundingBoxCoordinates.x + boundingBoxDimensions.width, - // -stageCoordinates.y / stageScale, - // stageDimensions.width / stageScale - - // (boundingBoxCoordinates.x + boundingBoxDimensions.width), - // stageDimensions.height / stageScale - // ); - // } - // : undefined; + // // big brain time; this is the *inverse* of the clip that is needed for shouldRestrictStrokesToBox + // // it took some fiddling to work out, so I am leaving it here in case it is needed for something else... + // const clipFunc = shouldRestrictStrokesToBox + // ? (ctx: SceneContext) => { + // console.log( + // stageCoordinates.x / stageScale, + // stageCoordinates.y / stageScale, + // stageDimensions.height / stageScale, + // stageDimensions.width / stageScale + // ); + // ctx.fillStyle = 'red'; + // ctx.rect( + // -stageCoordinates.x / stageScale, + // -stageCoordinates.y / stageScale, + // stageDimensions.width / stageScale, + // stageCoordinates.y / stageScale + boundingBoxCoordinates.y + // ); + // ctx.rect( + // -stageCoordinates.x / stageScale, + // boundingBoxCoordinates.y + boundingBoxDimensions.height, + // stageDimensions.width / stageScale, + // stageDimensions.height / stageScale + // ); + // ctx.rect( + // -stageCoordinates.x / stageScale, + // -stageCoordinates.y / stageScale, + // stageCoordinates.x / stageScale + boundingBoxCoordinates.x, + // stageDimensions.height / stageScale + // ); + // ctx.rect( + // boundingBoxCoordinates.x + boundingBoxDimensions.width, + // -stageCoordinates.y / stageScale, + // stageDimensions.width / stageScale - + // (boundingBoxCoordinates.x + boundingBoxDimensions.width), + // stageDimensions.height / stageScale + // ); + // } + // : undefined; - return { - clip, - stageDimensions, - }; - } -); + return { + clip, + stageDimensions, + }; +}); /** * Draws a black circle around the canvas brush preview. */ const IAICanvasToolPreview = (props: GroupConfig) => { const radius = useAppSelector((s) => s.canvas.brushSize / 2); - const maskColorString = useAppSelector((s) => - rgbaColorToString({ ...s.canvas.maskColor, a: 0.5 }) - ); + const maskColorString = useAppSelector((s) => rgbaColorToString({ ...s.canvas.maskColor, a: 0.5 })); const tool = useStore($tool); const layer = useAppSelector((s) => s.canvas.layer); const dotRadius = useAppSelector((s) => 1.5 / s.canvas.stageScale); const strokeWidth = useAppSelector((s) => 1.5 / s.canvas.stageScale); - const brushColorString = useAppSelector((s) => - rgbaColorToString(s.canvas.brushColor) - ); - const colorPickerColorString = useAppSelector((s) => - rgbaColorToString(s.canvas.colorPickerColor) - ); + const brushColorString = useAppSelector((s) => rgbaColorToString(s.canvas.brushColor)); + const colorPickerColorString = useAppSelector((s) => rgbaColorToString(s.canvas.colorPickerColor)); const colorPickerInnerRadius = useAppSelector( - (s) => - (COLOR_PICKER_SIZE - COLOR_PICKER_STROKE_RADIUS + 1) / s.canvas.stageScale - ); - const colorPickerOuterRadius = useAppSelector( - (s) => COLOR_PICKER_SIZE / s.canvas.stageScale + (s) => (COLOR_PICKER_SIZE - COLOR_PICKER_STROKE_RADIUS + 1) / s.canvas.stageScale ); + const colorPickerOuterRadius = useAppSelector((s) => COLOR_PICKER_SIZE / s.canvas.stageScale); const { clip, stageDimensions } = useAppSelector(canvasBrushPreviewSelector); const cursorPosition = useStore($cursorPosition); @@ -123,8 +103,7 @@ const IAICanvasToolPreview = (props: GroupConfig) => { ); const shouldDrawBrushPreview = useMemo( - () => - !(isMovingBoundingBox || isTransformingBoundingBox || !cursorPosition), + () => !(isMovingBoundingBox || isTransformingBoundingBox || !cursorPosition), [cursorPosition, isMovingBoundingBox, isTransformingBoundingBox] ); @@ -162,9 +141,7 @@ const IAICanvasToolPreview = (props: GroupConfig) => { y={brushY} radius={radius} fill={layer === 'mask' ? maskColorString : brushColorString} - globalCompositeOperation={ - tool === 'eraser' ? 'destination-out' : 'source-out' - } + globalCompositeOperation={tool === 'eraser' ? 'destination-out' : 'source-out'} listening={false} /> { /> )} - - + + ); }; diff --git a/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasBoundingBox.tsx b/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasBoundingBox.tsx index 3b64bca952..98ca55351c 100644 --- a/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasBoundingBox.tsx +++ b/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasBoundingBox.tsx @@ -1,11 +1,7 @@ import { useShiftModifier } from '@invoke-ai/ui-library'; import { useStore } from '@nanostores/react'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; -import { - roundDownToMultiple, - roundDownToMultipleMin, - roundToMultiple, -} from 'common/util/roundDownToMultiple'; +import { roundDownToMultiple, roundDownToMultipleMin, roundToMultiple } from 'common/util/roundDownToMultiple'; import { $isDrawing, $isMouseOverBoundingBox, @@ -20,10 +16,7 @@ import { setBoundingBoxDimensions, setShouldSnapToGrid, } from 'features/canvas/store/canvasSlice'; -import { - CANVAS_GRID_SIZE_COARSE, - CANVAS_GRID_SIZE_FINE, -} from 'features/canvas/store/constants'; +import { CANVAS_GRID_SIZE_COARSE, CANVAS_GRID_SIZE_FINE } from 'features/canvas/store/constants'; import { calculateNewSize } from 'features/parameters/components/ImageSize/calculateNewSize'; import { selectOptimalDimension } from 'features/parameters/store/generationSlice'; import type Konva from 'konva'; @@ -41,12 +34,8 @@ type IAICanvasBoundingBoxPreviewProps = GroupConfig; const IAICanvasBoundingBox = (props: IAICanvasBoundingBoxPreviewProps) => { const { ...rest } = props; const dispatch = useAppDispatch(); - const boundingBoxCoordinates = useAppSelector( - (s) => s.canvas.boundingBoxCoordinates - ); - const boundingBoxDimensions = useAppSelector( - (s) => s.canvas.boundingBoxDimensions - ); + const boundingBoxCoordinates = useAppSelector((s) => s.canvas.boundingBoxCoordinates); + const boundingBoxDimensions = useAppSelector((s) => s.canvas.boundingBoxDimensions); const stageScale = useAppSelector((s) => s.canvas.stageScale); const shouldSnapToGrid = useAppSelector((s) => s.canvas.shouldSnapToGrid); const hitStrokeWidth = useAppSelector((s) => 20 / s.canvas.stageScale); @@ -59,9 +48,7 @@ const IAICanvasBoundingBox = (props: IAICanvasBoundingBoxPreviewProps) => { const isDrawing = useStore($isDrawing); const isMovingBoundingBox = useStore($isMovingBoundingBox); const isTransformingBoundingBox = useStore($isTransformingBoundingBox); - const isMouseOverBoundingBoxOutline = useStore( - $isMouseOverBoundingBoxOutline - ); + const isMouseOverBoundingBoxOutline = useStore($isMouseOverBoundingBoxOutline); useEffect(() => { if (!transformerRef.current || !shapeRef.current) { @@ -71,14 +58,8 @@ const IAICanvasBoundingBox = (props: IAICanvasBoundingBoxPreviewProps) => { transformerRef.current.getLayer()?.batchDraw(); }, []); - const gridSize = useMemo( - () => (shift ? CANVAS_GRID_SIZE_FINE : CANVAS_GRID_SIZE_COARSE), - [shift] - ); - const scaledStep = useMemo( - () => gridSize * stageScale, - [gridSize, stageScale] - ); + const gridSize = useMemo(() => (shift ? CANVAS_GRID_SIZE_FINE : CANVAS_GRID_SIZE_COARSE), [shift]); + const scaledStep = useMemo(() => gridSize * stageScale, [gridSize, stageScale]); useHotkeys( 'N', @@ -143,10 +124,7 @@ const IAICanvasBoundingBox = (props: IAICanvasBoundingBoxPreviewProps) => { const y = Math.round(rect.y()); if (aspectRatio.isLocked) { - const newDimensions = calculateNewSize( - aspectRatio.value, - width * height - ); + const newDimensions = calculateNewSize(aspectRatio.value, width * height); dispatch( setBoundingBoxDimensions( { @@ -186,14 +164,7 @@ const IAICanvasBoundingBox = (props: IAICanvasBoundingBoxPreviewProps) => { rect.scaleX(1); rect.scaleY(1); }, - [ - aspectRatio.isLocked, - aspectRatio.value, - dispatch, - shouldSnapToGrid, - gridSize, - optimalDimension, - ] + [aspectRatio.isLocked, aspectRatio.value, dispatch, shouldSnapToGrid, gridSize, optimalDimension] ); const anchorDragBoundFunc = useCallback( @@ -255,9 +226,7 @@ const IAICanvasBoundingBox = (props: IAICanvasBoundingBoxPreviewProps) => { }, []); const handleMouseOut = useCallback(() => { - !isTransformingBoundingBox && - !isMovingBoundingBox && - $isMouseOverBoundingBoxOutline.set(false); + !isTransformingBoundingBox && !isMovingBoundingBox && $isMouseOverBoundingBoxOutline.set(false); }, [isMovingBoundingBox, isTransformingBoundingBox]); const handleMouseEnterBoundingBox = useCallback(() => { @@ -269,35 +238,18 @@ const IAICanvasBoundingBox = (props: IAICanvasBoundingBoxPreviewProps) => { }, []); const stroke = useMemo(() => { - if ( - isMouseOverBoundingBoxOutline || - isMovingBoundingBox || - isTransformingBoundingBox - ) { + if (isMouseOverBoundingBoxOutline || isMovingBoundingBox || isTransformingBoundingBox) { return 'rgba(255,255,255,0.5)'; } return 'white'; - }, [ - isMouseOverBoundingBoxOutline, - isMovingBoundingBox, - isTransformingBoundingBox, - ]); + }, [isMouseOverBoundingBoxOutline, isMovingBoundingBox, isTransformingBoundingBox]); const strokeWidth = useMemo(() => { - if ( - isMouseOverBoundingBoxOutline || - isMovingBoundingBox || - isTransformingBoundingBox - ) { + if (isMouseOverBoundingBoxOutline || isMovingBoundingBox || isTransformingBoundingBox) { return 6 / stageScale; } return 1 / stageScale; - }, [ - isMouseOverBoundingBoxOutline, - isMovingBoundingBox, - isTransformingBoundingBox, - stageScale, - ]); + }, [isMouseOverBoundingBoxOutline, isMovingBoundingBox, isTransformingBoundingBox, stageScale]); const enabledAnchors = useMemo(() => { if (tool !== 'move') { diff --git a/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasMaskOptions.tsx b/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasMaskOptions.tsx index 5665fdc4e7..6dacb7c59d 100644 --- a/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasMaskOptions.tsx +++ b/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasMaskOptions.tsx @@ -30,11 +30,7 @@ import { memo, useCallback } from 'react'; import type { RgbaColor } from 'react-colorful'; import { useHotkeys } from 'react-hotkeys-hook'; import { useTranslation } from 'react-i18next'; -import { - PiExcludeBold, - PiFloppyDiskBackFill, - PiTrashSimpleFill, -} from 'react-icons/pi'; +import { PiExcludeBold, PiFloppyDiskBackFill, PiTrashSimpleFill } from 'react-icons/pi'; const formLabelProps: FormLabelProps = { flexGrow: 1, @@ -46,9 +42,7 @@ const IAICanvasMaskOptions = () => { const layer = useAppSelector((s) => s.canvas.layer); const maskColor = useAppSelector((s) => s.canvas.maskColor); const isMaskEnabled = useAppSelector((s) => s.canvas.isMaskEnabled); - const shouldPreserveMaskedArea = useAppSelector( - (s) => s.canvas.shouldPreserveMaskedArea - ); + const shouldPreserveMaskedArea = useAppSelector((s) => s.canvas.shouldPreserveMaskedArea); const isStaging = useAppSelector(isStagingSelector); useHotkeys( @@ -134,38 +128,21 @@ const IAICanvasMaskOptions = () => { {`${t('unifiedCanvas.enableMask')} (H)`} - + {t('unifiedCanvas.preserveMaskedArea')} - + - + - - diff --git a/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasSettingsButtonPopover.tsx b/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasSettingsButtonPopover.tsx index 32badac87b..1d3ccc52f9 100644 --- a/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasSettingsButtonPopover.tsx +++ b/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasSettingsButtonPopover.tsx @@ -38,23 +38,13 @@ const IAICanvasSettingsButtonPopover = () => { const dispatch = useAppDispatch(); const { t } = useTranslation(); const shouldAutoSave = useAppSelector((s) => s.canvas.shouldAutoSave); - const shouldCropToBoundingBoxOnSave = useAppSelector( - (s) => s.canvas.shouldCropToBoundingBoxOnSave - ); - const shouldDarkenOutsideBoundingBox = useAppSelector( - (s) => s.canvas.shouldDarkenOutsideBoundingBox - ); - const shouldShowCanvasDebugInfo = useAppSelector( - (s) => s.canvas.shouldShowCanvasDebugInfo - ); + const shouldCropToBoundingBoxOnSave = useAppSelector((s) => s.canvas.shouldCropToBoundingBoxOnSave); + const shouldDarkenOutsideBoundingBox = useAppSelector((s) => s.canvas.shouldDarkenOutsideBoundingBox); + const shouldShowCanvasDebugInfo = useAppSelector((s) => s.canvas.shouldShowCanvasDebugInfo); const shouldShowGrid = useAppSelector((s) => s.canvas.shouldShowGrid); - const shouldShowIntermediates = useAppSelector( - (s) => s.canvas.shouldShowIntermediates - ); + const shouldShowIntermediates = useAppSelector((s) => s.canvas.shouldShowIntermediates); const shouldSnapToGrid = useAppSelector((s) => s.canvas.shouldSnapToGrid); - const shouldRestrictStrokesToBox = useAppSelector( - (s) => s.canvas.shouldRestrictStrokesToBox - ); + const shouldRestrictStrokesToBox = useAppSelector((s) => s.canvas.shouldRestrictStrokesToBox); const shouldAntialias = useAppSelector((s) => s.canvas.shouldAntialias); useHotkeys( @@ -70,49 +60,40 @@ const IAICanvasSettingsButtonPopover = () => { ); const handleChangeShouldSnapToGrid = useCallback( - (e: ChangeEvent) => - dispatch(setShouldSnapToGrid(e.target.checked)), + (e: ChangeEvent) => dispatch(setShouldSnapToGrid(e.target.checked)), [dispatch] ); const handleChangeShouldShowIntermediates = useCallback( - (e: ChangeEvent) => - dispatch(setShouldShowIntermediates(e.target.checked)), + (e: ChangeEvent) => dispatch(setShouldShowIntermediates(e.target.checked)), [dispatch] ); const handleChangeShouldShowGrid = useCallback( - (e: ChangeEvent) => - dispatch(setShouldShowGrid(e.target.checked)), + (e: ChangeEvent) => dispatch(setShouldShowGrid(e.target.checked)), [dispatch] ); const handleChangeShouldDarkenOutsideBoundingBox = useCallback( - (e: ChangeEvent) => - dispatch(setShouldDarkenOutsideBoundingBox(e.target.checked)), + (e: ChangeEvent) => dispatch(setShouldDarkenOutsideBoundingBox(e.target.checked)), [dispatch] ); const handleChangeShouldAutoSave = useCallback( - (e: ChangeEvent) => - dispatch(setShouldAutoSave(e.target.checked)), + (e: ChangeEvent) => dispatch(setShouldAutoSave(e.target.checked)), [dispatch] ); const handleChangeShouldCropToBoundingBoxOnSave = useCallback( - (e: ChangeEvent) => - dispatch(setShouldCropToBoundingBoxOnSave(e.target.checked)), + (e: ChangeEvent) => dispatch(setShouldCropToBoundingBoxOnSave(e.target.checked)), [dispatch] ); const handleChangeShouldRestrictStrokesToBox = useCallback( - (e: ChangeEvent) => - dispatch(setShouldRestrictStrokesToBox(e.target.checked)), + (e: ChangeEvent) => dispatch(setShouldRestrictStrokesToBox(e.target.checked)), [dispatch] ); const handleChangeShouldShowCanvasDebugInfo = useCallback( - (e: ChangeEvent) => - dispatch(setShouldShowCanvasDebugInfo(e.target.checked)), + (e: ChangeEvent) => dispatch(setShouldShowCanvasDebugInfo(e.target.checked)), [dispatch] ); const handleChangeShouldAntialias = useCallback( - (e: ChangeEvent) => - dispatch(setShouldAntialias(e.target.checked)), + (e: ChangeEvent) => dispatch(setShouldAntialias(e.target.checked)), [dispatch] ); @@ -131,29 +112,18 @@ const IAICanvasSettingsButtonPopover = () => { {t('unifiedCanvas.showIntermediates')} - + {t('unifiedCanvas.showGrid')} - + {t('unifiedCanvas.snapToGrid')} - + - - {t('unifiedCanvas.darkenOutsideSelection')} - + {t('unifiedCanvas.darkenOutsideSelection')} { {t('unifiedCanvas.autoSaveToGallery')} - + {t('unifiedCanvas.saveBoxRegionOnly')} @@ -175,24 +142,15 @@ const IAICanvasSettingsButtonPopover = () => { {t('unifiedCanvas.limitStrokesToBox')} - + {t('unifiedCanvas.showCanvasDebugInfo')} - + {t('unifiedCanvas.antialiasing')} - + diff --git a/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasToolChooserOptions.tsx b/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasToolChooserOptions.tsx index 9eb4a3cc65..697434739e 100644 --- a/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasToolChooserOptions.tsx +++ b/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasToolChooserOptions.tsx @@ -15,17 +15,9 @@ import { import { useStore } from '@nanostores/react'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import IAIColorPicker from 'common/components/IAIColorPicker'; -import { - $tool, - resetToolInteractionState, -} from 'features/canvas/store/canvasNanostore'; +import { $tool, resetToolInteractionState } from 'features/canvas/store/canvasNanostore'; import { isStagingSelector } from 'features/canvas/store/canvasSelectors'; -import { - addEraseRect, - addFillRect, - setBrushColor, - setBrushSize, -} from 'features/canvas/store/canvasSlice'; +import { addEraseRect, addFillRect, setBrushColor, setBrushSize } from 'features/canvas/store/canvasSlice'; import { clamp } from 'lodash-es'; import { memo, useCallback } from 'react'; import type { RgbaColor } from 'react-colorful'; @@ -275,11 +267,7 @@ const IAICanvasToolChooserOptions = () => { - + diff --git a/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasToolbar.tsx b/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasToolbar.tsx index 3d764c50d7..65a46d580a 100644 --- a/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasToolbar.tsx +++ b/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasToolbar.tsx @@ -1,12 +1,5 @@ import type { ComboboxOnChange } from '@invoke-ai/ui-library'; -import { - ButtonGroup, - Combobox, - Flex, - FormControl, - IconButton, - Tooltip, -} from '@invoke-ai/ui-library'; +import { ButtonGroup, Combobox, Flex, FormControl, IconButton, Tooltip } from '@invoke-ai/ui-library'; import { useStore } from '@nanostores/react'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import { useCopyImageToClipboard } from 'common/hooks/useCopyImageToClipboard'; @@ -20,12 +13,7 @@ import { } from 'features/canvas/store/actions'; import { $canvasBaseLayer, $tool } from 'features/canvas/store/canvasNanostore'; import { isStagingSelector } from 'features/canvas/store/canvasSelectors'; -import { - resetCanvas, - resetCanvasView, - setIsMaskEnabled, - setLayer, -} from 'features/canvas/store/canvasSlice'; +import { resetCanvas, resetCanvasView, setIsMaskEnabled, setLayer } from 'features/canvas/store/canvasSlice'; import type { CanvasLayer } from 'features/canvas/store/canvasTypes'; import { LAYER_NAMES_DICT } from 'features/canvas/store/canvasTypes'; import { memo, useCallback, useMemo } from 'react'; @@ -203,20 +191,13 @@ const IAICanvasToolbar = () => { [dispatch, isMaskEnabled] ); - const value = useMemo( - () => LAYER_NAMES_DICT.filter((o) => o.value === layer)[0], - [layer] - ); + const value = useMemo(() => LAYER_NAMES_DICT.filter((o) => o.value === layer)[0], [layer]); return ( - + diff --git a/invokeai/frontend/web/src/features/canvas/hooks/useCanvasDragMove.ts b/invokeai/frontend/web/src/features/canvas/hooks/useCanvasDragMove.ts index 8f777ca39b..d47b1c6ccd 100644 --- a/invokeai/frontend/web/src/features/canvas/hooks/useCanvasDragMove.ts +++ b/invokeai/frontend/web/src/features/canvas/hooks/useCanvasDragMove.ts @@ -1,9 +1,5 @@ import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; -import { - $isMovingBoundingBox, - $isMovingStage, - $tool, -} from 'features/canvas/store/canvasNanostore'; +import { $isMovingBoundingBox, $isMovingStage, $tool } from 'features/canvas/store/canvasNanostore'; import { isStagingSelector } from 'features/canvas/store/canvasSelectors'; import { setStageCoordinates } from 'features/canvas/store/canvasSlice'; import type { KonvaEventObject } from 'konva/lib/Node'; @@ -13,9 +9,7 @@ const useCanvasDrag = () => { const dispatch = useAppDispatch(); const isStaging = useAppSelector(isStagingSelector); const handleDragStart = useCallback(() => { - if ( - !(($tool.get() === 'move' || isStaging) && !$isMovingBoundingBox.get()) - ) { + if (!(($tool.get() === 'move' || isStaging) && !$isMovingBoundingBox.get())) { return; } $isMovingStage.set(true); @@ -36,9 +30,7 @@ const useCanvasDrag = () => { ); const handleDragEnd = useCallback(() => { - if ( - !(($tool.get() === 'move' || isStaging) && !$isMovingBoundingBox.get()) - ) { + if (!(($tool.get() === 'move' || isStaging) && !$isMovingBoundingBox.get())) { return; } $isMovingStage.set(false); diff --git a/invokeai/frontend/web/src/features/canvas/hooks/useCanvasGenerationMode.ts b/invokeai/frontend/web/src/features/canvas/hooks/useCanvasGenerationMode.ts index a7d6a173ad..45852cd1bc 100644 --- a/invokeai/frontend/web/src/features/canvas/hooks/useCanvasGenerationMode.ts +++ b/invokeai/frontend/web/src/features/canvas/hooks/useCanvasGenerationMode.ts @@ -8,30 +8,16 @@ import { useDebounce } from 'react-use'; export const useCanvasGenerationMode = () => { const layerState = useAppSelector((s) => s.canvas.layerState); - const boundingBoxCoordinates = useAppSelector( - (s) => s.canvas.boundingBoxCoordinates - ); - const boundingBoxDimensions = useAppSelector( - (s) => s.canvas.boundingBoxDimensions - ); + const boundingBoxCoordinates = useAppSelector((s) => s.canvas.boundingBoxCoordinates); + const boundingBoxDimensions = useAppSelector((s) => s.canvas.boundingBoxDimensions); const isMaskEnabled = useAppSelector((s) => s.canvas.isMaskEnabled); - const shouldPreserveMaskedArea = useAppSelector( - (s) => s.canvas.shouldPreserveMaskedArea - ); - const [generationMode, setGenerationMode] = useState< - GenerationMode | undefined - >(); + const shouldPreserveMaskedArea = useAppSelector((s) => s.canvas.shouldPreserveMaskedArea); + const [generationMode, setGenerationMode] = useState(); useEffect(() => { setGenerationMode(undefined); - }, [ - layerState, - boundingBoxCoordinates, - boundingBoxDimensions, - isMaskEnabled, - shouldPreserveMaskedArea, - ]); + }, [layerState, boundingBoxCoordinates, boundingBoxDimensions, isMaskEnabled, shouldPreserveMaskedArea]); useDebounce( async () => { @@ -51,21 +37,12 @@ export const useCanvasGenerationMode = () => { const { baseImageData, maskImageData } = canvasBlobsAndImageData; // Determine the generation mode - const generationMode = getCanvasGenerationMode( - baseImageData, - maskImageData - ); + const generationMode = getCanvasGenerationMode(baseImageData, maskImageData); setGenerationMode(generationMode); }, 1000, - [ - layerState, - boundingBoxCoordinates, - boundingBoxDimensions, - isMaskEnabled, - shouldPreserveMaskedArea, - ] + [layerState, boundingBoxCoordinates, boundingBoxDimensions, isMaskEnabled, shouldPreserveMaskedArea] ); return generationMode; diff --git a/invokeai/frontend/web/src/features/canvas/hooks/useCanvasHotkeys.ts b/invokeai/frontend/web/src/features/canvas/hooks/useCanvasHotkeys.ts index ed7434898e..05ed0d7119 100644 --- a/invokeai/frontend/web/src/features/canvas/hooks/useCanvasHotkeys.ts +++ b/invokeai/frontend/web/src/features/canvas/hooks/useCanvasHotkeys.ts @@ -22,9 +22,7 @@ import { useHotkeys } from 'react-hotkeys-hook'; const useInpaintingCanvasHotkeys = () => { const dispatch = useAppDispatch(); const activeTabName = useAppSelector(activeTabNameSelector); - const shouldShowBoundingBox = useAppSelector( - (s) => s.canvas.shouldShowBoundingBox - ); + const shouldShowBoundingBox = useAppSelector((s) => s.canvas.shouldShowBoundingBox); const isStaging = useAppSelector(isStagingSelector); const isMaskEnabled = useAppSelector((s) => s.canvas.isMaskEnabled); const shouldSnapToGrid = useAppSelector((s) => s.canvas.shouldSnapToGrid); @@ -44,8 +42,7 @@ const useInpaintingCanvasHotkeys = () => { [] ); - const handleToggleEnableMask = () => - dispatch(setIsMaskEnabled(!isMaskEnabled)); + const handleToggleEnableMask = () => dispatch(setIsMaskEnabled(!isMaskEnabled)); useHotkeys( ['h'], diff --git a/invokeai/frontend/web/src/features/canvas/hooks/useCanvasMouseDown.ts b/invokeai/frontend/web/src/features/canvas/hooks/useCanvasMouseDown.ts index a208c17378..b392b72e3f 100644 --- a/invokeai/frontend/web/src/features/canvas/hooks/useCanvasMouseDown.ts +++ b/invokeai/frontend/web/src/features/canvas/hooks/useCanvasMouseDown.ts @@ -1,9 +1,5 @@ import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; -import { - $isDrawing, - $isMovingStage, - $tool, -} from 'features/canvas/store/canvasNanostore'; +import { $isDrawing, $isMovingStage, $tool } from 'features/canvas/store/canvasNanostore'; import { isStagingSelector } from 'features/canvas/store/canvasSelectors'; import { addLine } from 'features/canvas/store/canvasSlice'; import getScaledCursorPosition from 'features/canvas/util/getScaledCursorPosition'; diff --git a/invokeai/frontend/web/src/features/canvas/hooks/useCanvasMouseMove.ts b/invokeai/frontend/web/src/features/canvas/hooks/useCanvasMouseMove.ts index 3bf0953967..6d0a97031b 100644 --- a/invokeai/frontend/web/src/features/canvas/hooks/useCanvasMouseMove.ts +++ b/invokeai/frontend/web/src/features/canvas/hooks/useCanvasMouseMove.ts @@ -1,9 +1,5 @@ import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; -import { - $cursorPosition, - $isDrawing, - $tool, -} from 'features/canvas/store/canvasNanostore'; +import { $cursorPosition, $isDrawing, $tool } from 'features/canvas/store/canvasNanostore'; import { isStagingSelector } from 'features/canvas/store/canvasSelectors'; import { addPointToCurrentLine } from 'features/canvas/store/canvasSlice'; import getScaledCursorPosition from 'features/canvas/util/getScaledCursorPosition'; @@ -49,17 +45,8 @@ const useCanvasMouseMove = ( } didMouseMoveRef.current = true; - dispatch( - addPointToCurrentLine([scaledCursorPosition.x, scaledCursorPosition.y]) - ); - }, [ - didMouseMoveRef, - dispatch, - isStaging, - lastCursorPositionRef, - stageRef, - updateColorUnderCursor, - ]); + dispatch(addPointToCurrentLine([scaledCursorPosition.x, scaledCursorPosition.y])); + }, [didMouseMoveRef, dispatch, isStaging, lastCursorPositionRef, stageRef, updateColorUnderCursor]); }; export default useCanvasMouseMove; diff --git a/invokeai/frontend/web/src/features/canvas/hooks/useCanvasMouseUp.ts b/invokeai/frontend/web/src/features/canvas/hooks/useCanvasMouseUp.ts index 9c6b4c6186..e3c291f1e1 100644 --- a/invokeai/frontend/web/src/features/canvas/hooks/useCanvasMouseUp.ts +++ b/invokeai/frontend/web/src/features/canvas/hooks/useCanvasMouseUp.ts @@ -1,10 +1,6 @@ import { useStore } from '@nanostores/react'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; -import { - $isDrawing, - $isMovingStage, - $tool, -} from 'features/canvas/store/canvasNanostore'; +import { $isDrawing, $isMovingStage, $tool } from 'features/canvas/store/canvasNanostore'; import { isStagingSelector } from 'features/canvas/store/canvasSelectors'; import { addPointToCurrentLine } from 'features/canvas/store/canvasSlice'; import getScaledCursorPosition from 'features/canvas/util/getScaledCursorPosition'; @@ -39,9 +35,7 @@ const useCanvasMouseUp = ( * the line's existing points. This allows the line to render as a circle * centered on that point. */ - dispatch( - addPointToCurrentLine([scaledCursorPosition.x, scaledCursorPosition.y]) - ); + dispatch(addPointToCurrentLine([scaledCursorPosition.x, scaledCursorPosition.y])); } else { didMouseMoveRef.current = false; } diff --git a/invokeai/frontend/web/src/features/canvas/hooks/useCanvasZoom.ts b/invokeai/frontend/web/src/features/canvas/hooks/useCanvasZoom.ts index 8c1ac9833b..fbcc133f7f 100644 --- a/invokeai/frontend/web/src/features/canvas/hooks/useCanvasZoom.ts +++ b/invokeai/frontend/web/src/features/canvas/hooks/useCanvasZoom.ts @@ -1,15 +1,8 @@ import { useStore } from '@nanostores/react'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import { $isMoveStageKeyHeld } from 'features/canvas/store/canvasNanostore'; -import { - setStageCoordinates, - setStageScale, -} from 'features/canvas/store/canvasSlice'; -import { - CANVAS_SCALE_BY, - MAX_CANVAS_SCALE, - MIN_CANVAS_SCALE, -} from 'features/canvas/util/constants'; +import { setStageCoordinates, setStageScale } from 'features/canvas/store/canvasSlice'; +import { CANVAS_SCALE_BY, MAX_CANVAS_SCALE, MIN_CANVAS_SCALE } from 'features/canvas/util/constants'; import type Konva from 'konva'; import type { KonvaEventObject } from 'konva/lib/Node'; import { clamp } from 'lodash-es'; @@ -49,11 +42,7 @@ const useCanvasWheel = (stageRef: MutableRefObject) => { delta = -delta; } - const newScale = clamp( - stageScale * CANVAS_SCALE_BY ** delta, - MIN_CANVAS_SCALE, - MAX_CANVAS_SCALE - ); + const newScale = clamp(stageScale * CANVAS_SCALE_BY ** delta, MIN_CANVAS_SCALE, MAX_CANVAS_SCALE); const newCoordinates = { x: cursorPos.x - mousePointTo.x * newScale, diff --git a/invokeai/frontend/web/src/features/canvas/hooks/useColorUnderCursor.ts b/invokeai/frontend/web/src/features/canvas/hooks/useColorUnderCursor.ts index 913dd3c8f0..f07433a3de 100644 --- a/invokeai/frontend/web/src/features/canvas/hooks/useColorUnderCursor.ts +++ b/invokeai/frontend/web/src/features/canvas/hooks/useColorUnderCursor.ts @@ -1,13 +1,6 @@ import { useAppDispatch } from 'app/store/storeHooks'; -import { - $canvasBaseLayer, - $canvasStage, - $tool, -} from 'features/canvas/store/canvasNanostore'; -import { - commitColorPickerColor, - setColorPickerColor, -} from 'features/canvas/store/canvasSlice'; +import { $canvasBaseLayer, $canvasStage, $tool } from 'features/canvas/store/canvasNanostore'; +import { commitColorPickerColor, setColorPickerColor } from 'features/canvas/store/canvasSlice'; import Konva from 'konva'; import { useCallback } from 'react'; @@ -31,19 +24,9 @@ const useColorPicker = () => { const [r, g, b, a] = canvasBaseLayer .getContext() - .getImageData( - position.x * pixelRatio, - position.y * pixelRatio, - 1, - 1 - ).data; + .getImageData(position.x * pixelRatio, position.y * pixelRatio, 1, 1).data; - if ( - r === undefined || - g === undefined || - b === undefined || - a === undefined - ) { + if (r === undefined || g === undefined || b === undefined || a === undefined) { return; } diff --git a/invokeai/frontend/web/src/features/canvas/store/actions.ts b/invokeai/frontend/web/src/features/canvas/store/actions.ts index 058f853192..b6483b7f3a 100644 --- a/invokeai/frontend/web/src/features/canvas/store/actions.ts +++ b/invokeai/frontend/web/src/features/canvas/store/actions.ts @@ -3,28 +3,16 @@ import type { ImageDTO } from 'services/api/types'; export const canvasSavedToGallery = createAction('canvas/canvasSavedToGallery'); -export const canvasMaskSavedToGallery = createAction( - 'canvas/canvasMaskSavedToGallery' -); +export const canvasMaskSavedToGallery = createAction('canvas/canvasMaskSavedToGallery'); -export const canvasCopiedToClipboard = createAction( - 'canvas/canvasCopiedToClipboard' -); +export const canvasCopiedToClipboard = createAction('canvas/canvasCopiedToClipboard'); -export const canvasDownloadedAsImage = createAction( - 'canvas/canvasDownloadedAsImage' -); +export const canvasDownloadedAsImage = createAction('canvas/canvasDownloadedAsImage'); export const canvasMerged = createAction('canvas/canvasMerged'); -export const stagingAreaImageSaved = createAction<{ imageDTO: ImageDTO }>( - 'canvas/stagingAreaImageSaved' -); +export const stagingAreaImageSaved = createAction<{ imageDTO: ImageDTO }>('canvas/stagingAreaImageSaved'); -export const canvasMaskToControlAdapter = createAction<{ id: string }>( - 'canvas/canvasMaskToControlAdapter' -); +export const canvasMaskToControlAdapter = createAction<{ id: string }>('canvas/canvasMaskToControlAdapter'); -export const canvasImageToControlAdapter = createAction<{ id: string }>( - 'canvas/canvasImageToControlAdapter' -); +export const canvasImageToControlAdapter = createAction<{ id: string }>('canvas/canvasImageToControlAdapter'); diff --git a/invokeai/frontend/web/src/features/canvas/store/canvasNanostore.ts b/invokeai/frontend/web/src/features/canvas/store/canvasNanostore.ts index d90f7942e8..81ed62addf 100644 --- a/invokeai/frontend/web/src/features/canvas/store/canvasNanostore.ts +++ b/invokeai/frontend/web/src/features/canvas/store/canvasNanostore.ts @@ -16,8 +16,7 @@ export const $isTransformingBoundingBox = atom(false); export const $isMouseOverBoundingBoxOutline = atom(false); export const $isModifyingBoundingBox = computed( [$isTransformingBoundingBox, $isMovingBoundingBox], - (isTransformingBoundingBox, isMovingBoundingBox) => - isTransformingBoundingBox || isMovingBoundingBox + (isTransformingBoundingBox, isMovingBoundingBox) => isTransformingBoundingBox || isMovingBoundingBox ); export const resetCanvasInteractionState = () => { diff --git a/invokeai/frontend/web/src/features/canvas/store/canvasSelectors.ts b/invokeai/frontend/web/src/features/canvas/store/canvasSelectors.ts index 9158e3a137..a337cfaab1 100644 --- a/invokeai/frontend/web/src/features/canvas/store/canvasSelectors.ts +++ b/invokeai/frontend/web/src/features/canvas/store/canvasSelectors.ts @@ -6,12 +6,9 @@ import { isCanvasBaseImage } from './canvasTypes'; export const isStagingSelector = createSelector( selectCanvasSlice, - (canvas) => - canvas.batchIds.length > 0 || - canvas.layerState.stagingArea.images.length > 0 + (canvas) => canvas.batchIds.length > 0 || canvas.layerState.stagingArea.images.length > 0 ); -export const initialCanvasImageSelector = createMemoizedSelector( - selectCanvasSlice, - (canvas) => canvas.layerState.objects.find(isCanvasBaseImage) +export const initialCanvasImageSelector = createMemoizedSelector(selectCanvasSlice, (canvas) => + canvas.layerState.objects.find(isCanvasBaseImage) ); diff --git a/invokeai/frontend/web/src/features/canvas/store/canvasSlice.ts b/invokeai/frontend/web/src/features/canvas/store/canvasSlice.ts index 16535ad34e..a049c13419 100644 --- a/invokeai/frontend/web/src/features/canvas/store/canvasSlice.ts +++ b/invokeai/frontend/web/src/features/canvas/store/canvasSlice.ts @@ -1,10 +1,7 @@ import type { PayloadAction } from '@reduxjs/toolkit'; import { createSlice } from '@reduxjs/toolkit'; import type { RootState } from 'app/store/store'; -import { - roundDownToMultiple, - roundToMultiple, -} from 'common/util/roundDownToMultiple'; +import { roundDownToMultiple, roundToMultiple } from 'common/util/roundDownToMultiple'; import calculateCoordinates from 'features/canvas/util/calculateCoordinates'; import calculateScale from 'features/canvas/util/calculateScale'; import { STAGE_PADDING_PERCENTAGE } from 'features/canvas/util/constants'; @@ -14,10 +11,7 @@ import { initialAspectRatioState } from 'features/parameters/components/ImageSiz import type { AspectRatioState } from 'features/parameters/components/ImageSize/types'; import { modelChanged } from 'features/parameters/store/generationSlice'; import type { PayloadActionWithOptimalDimension } from 'features/parameters/store/types'; -import { - getIsSizeOptimal, - getOptimalDimension, -} from 'features/parameters/util/optimalDimension'; +import { getIsSizeOptimal, getOptimalDimension } from 'features/parameters/util/optimalDimension'; import type { IRect, Vector2d } from 'konva/lib/types'; import { clamp, cloneDeep } from 'lodash-es'; import type { RgbaColor } from 'react-colorful'; @@ -105,10 +99,7 @@ const setBoundingBoxDimensionsReducer = ( }; state.boundingBoxDimensions = newDimensions; if (state.boundingBoxScaleMethod === 'auto') { - const scaledDimensions = getScaledBoundingBoxDimensions( - newDimensions, - optimalDimension - ); + const scaledDimensions = getScaledBoundingBoxDimensions(newDimensions, optimalDimension); state.scaledBoundingBoxDimensions = scaledDimensions; } }; @@ -131,9 +122,7 @@ export const canvasSlice = createSlice({ }, clearMask: (state) => { state.pastLayerStates.push(cloneDeep(state.layerState)); - state.layerState.objects = state.layerState.objects.filter( - (obj) => !isCanvasMaskLine(obj) - ); + state.layerState.objects = state.layerState.objects.filter((obj) => !isCanvasMaskLine(obj)); state.futureLayerStates = []; state.shouldPreserveMaskedArea = false; }, @@ -157,32 +146,17 @@ export const canvasSlice = createSlice({ const { stageDimensions } = state; const newBoundingBoxDimensions = { - width: roundDownToMultiple( - clamp(width, CANVAS_GRID_SIZE_FINE, optimalDimension), - CANVAS_GRID_SIZE_FINE - ), - height: roundDownToMultiple( - clamp(height, CANVAS_GRID_SIZE_FINE, optimalDimension), - CANVAS_GRID_SIZE_FINE - ), + width: roundDownToMultiple(clamp(width, CANVAS_GRID_SIZE_FINE, optimalDimension), CANVAS_GRID_SIZE_FINE), + height: roundDownToMultiple(clamp(height, CANVAS_GRID_SIZE_FINE, optimalDimension), CANVAS_GRID_SIZE_FINE), }; const newBoundingBoxCoordinates = { - x: roundToMultiple( - width / 2 - newBoundingBoxDimensions.width / 2, - CANVAS_GRID_SIZE_FINE - ), - y: roundToMultiple( - height / 2 - newBoundingBoxDimensions.height / 2, - CANVAS_GRID_SIZE_FINE - ), + x: roundToMultiple(width / 2 - newBoundingBoxDimensions.width / 2, CANVAS_GRID_SIZE_FINE), + y: roundToMultiple(height / 2 - newBoundingBoxDimensions.height / 2, CANVAS_GRID_SIZE_FINE), }; if (state.boundingBoxScaleMethod === 'auto') { - const scaledDimensions = getScaledBoundingBoxDimensions( - newBoundingBoxDimensions, - optimalDimension - ); + const scaledDimensions = getScaledBoundingBoxDimensions(newBoundingBoxDimensions, optimalDimension); state.scaledBoundingBoxDimensions = scaledDimensions; } @@ -247,10 +221,7 @@ export const canvasSlice = createSlice({ setStageScale: (state, action: PayloadAction) => { state.stageScale = action.payload; }, - setShouldDarkenOutsideBoundingBox: ( - state, - action: PayloadAction - ) => { + setShouldDarkenOutsideBoundingBox: (state, action: PayloadAction) => { state.shouldDarkenOutsideBoundingBox = action.payload; }, clearCanvasHistory: (state) => { @@ -306,8 +277,7 @@ export const canvasSlice = createSlice({ imageName: image.image_name, }); - state.layerState.stagingArea.selectedImageIndex = - state.layerState.stagingArea.images.length - 1; + state.layerState.stagingArea.selectedImageIndex = state.layerState.stagingArea.images.length - 1; state.futureLayerStates = []; }, @@ -318,9 +288,7 @@ export const canvasSlice = createSlice({ state.pastLayerStates.shift(); } - state.layerState.stagingArea = cloneDeep( - cloneDeep(initialLayerState) - ).stagingArea; + state.layerState.stagingArea = cloneDeep(cloneDeep(initialLayerState)).stagingArea; state.futureLayerStates = []; state.shouldShowStagingOutline = true; @@ -328,8 +296,7 @@ export const canvasSlice = createSlice({ state.batchIds = []; }, addFillRect: (state) => { - const { boundingBoxCoordinates, boundingBoxDimensions, brushColor } = - state; + const { boundingBoxCoordinates, boundingBoxDimensions, brushColor } = state; state.pastLayerStates.push(cloneDeep(state.layerState)); @@ -365,12 +332,8 @@ export const canvasSlice = createSlice({ state.futureLayerStates = []; }, - addLine: ( - state, - action: PayloadAction<{ points: number[]; tool: CanvasTool }> - ) => { - const { layer, brushColor, brushSize, shouldRestrictStrokesToBox } = - state; + addLine: (state, action: PayloadAction<{ points: number[]; tool: CanvasTool }>) => { + const { layer, brushColor, brushSize, shouldRestrictStrokesToBox } = state; const { points, tool } = action.payload; if (tool === 'move' || tool === 'colorPicker') { @@ -380,8 +343,7 @@ export const canvasSlice = createSlice({ const newStrokeWidth = brushSize / 2; // set & then spread this to only conditionally add the "color" key - const newColor = - layer === 'base' && tool === 'brush' ? { color: brushColor } : {}; + const newColor = layer === 'base' && tool === 'brush' ? { color: brushColor } : {}; state.pastLayerStates.push(cloneDeep(state.layerState)); @@ -488,10 +450,7 @@ export const canvasSlice = createSlice({ 1 ); }, - canvasResized: ( - state, - action: PayloadAction<{ width: number; height: number }> - ) => { + canvasResized: (state, action: PayloadAction<{ width: number; height: number }>) => { state.stageDimensions = { width: Math.floor(action.payload.width), height: Math.floor(action.payload.height), @@ -540,8 +499,7 @@ export const canvasSlice = createSlice({ const nextIndex = state.layerState.stagingArea.selectedImageIndex + 1; const lastIndex = state.layerState.stagingArea.images.length - 1; - state.layerState.stagingArea.selectedImageIndex = - nextIndex > lastIndex ? 0 : nextIndex; + state.layerState.stagingArea.selectedImageIndex = nextIndex > lastIndex ? 0 : nextIndex; }, prevStagingAreaImage: (state) => { if (!state.layerState.stagingArea.images.length) { @@ -551,8 +509,7 @@ export const canvasSlice = createSlice({ const prevIndex = state.layerState.stagingArea.selectedImageIndex - 1; const lastIndex = state.layerState.stagingArea.images.length - 1; - state.layerState.stagingArea.selectedImageIndex = - prevIndex < 0 ? lastIndex : prevIndex; + state.layerState.stagingArea.selectedImageIndex = prevIndex < 0 ? lastIndex : prevIndex; }, commitStagingAreaImage: (state) => { if (!state.layerState.stagingArea.images.length) { @@ -582,19 +539,13 @@ export const canvasSlice = createSlice({ state.batchIds = []; }, setBoundingBoxScaleMethod: { - reducer: ( - state, - action: PayloadActionWithOptimalDimension - ) => { + reducer: (state, action: PayloadActionWithOptimalDimension) => { const boundingBoxScaleMethod = action.payload; const { optimalDimension } = action.meta; state.boundingBoxScaleMethod = boundingBoxScaleMethod; if (boundingBoxScaleMethod === 'auto') { - const scaledDimensions = getScaledBoundingBoxDimensions( - state.boundingBoxDimensions, - optimalDimension - ); + const scaledDimensions = getScaledBoundingBoxDimensions(state.boundingBoxDimensions, optimalDimension); state.scaledBoundingBoxDimensions = scaledDimensions; } }, @@ -605,25 +556,15 @@ export const canvasSlice = createSlice({ }, }), }, - setScaledBoundingBoxDimensions: ( - state, - action: PayloadAction> - ) => { + setScaledBoundingBoxDimensions: (state, action: PayloadAction>) => { state.scaledBoundingBoxDimensions = { ...state.scaledBoundingBoxDimensions, ...action.payload, }; }, setBoundingBoxDimensions: { - reducer: ( - state, - action: PayloadActionWithOptimalDimension> - ) => { - setBoundingBoxDimensionsReducer( - state, - action.payload, - action.meta.optimalDimension - ); + reducer: (state, action: PayloadActionWithOptimalDimension>) => { + setBoundingBoxDimensionsReducer(state, action.payload, action.meta.optimalDimension); }, prepare: (payload: Partial, optimalDimension: number) => ({ payload, @@ -660,10 +601,7 @@ export const canvasSlice = createSlice({ setShouldAntialias: (state, action: PayloadAction) => { state.shouldAntialias = action.payload; }, - setShouldCropToBoundingBoxOnSave: ( - state, - action: PayloadAction - ) => { + setShouldCropToBoundingBoxOnSave: (state, action: PayloadAction) => { state.shouldCropToBoundingBoxOnSave = action.payload; }, setColorPickerColor: (state, action: PayloadAction) => { @@ -688,9 +626,7 @@ export const canvasSlice = createSlice({ }, extraReducers: (builder) => { builder.addCase(modelChanged, (state, action) => { - if ( - action.meta.previousModel?.base_model === action.payload?.base_model - ) { + if (action.meta.previousModel?.base_model === action.payload?.base_model) { // The base model hasn't changed, we don't need to optimize the size return; } @@ -716,25 +652,15 @@ export const canvasSlice = createSlice({ } if (batch_status.in_progress === 0 && batch_status.pending === 0) { - state.batchIds = state.batchIds.filter( - (id) => id !== batch_status.batch_id - ); + state.batchIds = state.batchIds.filter((id) => id !== batch_status.batch_id); } }); - builder.addMatcher( - queueApi.endpoints.clearQueue.matchFulfilled, - (state) => { - state.batchIds = []; - } - ); - builder.addMatcher( - queueApi.endpoints.cancelByBatchIds.matchFulfilled, - (state, action) => { - state.batchIds = state.batchIds.filter( - (id) => !action.meta.arg.originalArgs.batch_ids.includes(id) - ); - } - ); + builder.addMatcher(queueApi.endpoints.clearQueue.matchFulfilled, (state) => { + state.batchIds = []; + }); + builder.addMatcher(queueApi.endpoints.cancelByBatchIds.matchFulfilled, (state, action) => { + state.batchIds = state.batchIds.filter((id) => !action.meta.arg.originalArgs.batch_ids.includes(id)); + }); }, }); diff --git a/invokeai/frontend/web/src/features/canvas/store/canvasTypes.ts b/invokeai/frontend/web/src/features/canvas/store/canvasTypes.ts index 56bca50a77..dc6b764075 100644 --- a/invokeai/frontend/web/src/features/canvas/store/canvasTypes.ts +++ b/invokeai/frontend/web/src/features/canvas/store/canvasTypes.ts @@ -14,9 +14,8 @@ export const LAYER_NAMES = ['base', 'mask'] as const; export const zBoundingBoxScaleMethod = z.enum(['none', 'auto', 'manual']); export type BoundingBoxScaleMethod = z.infer; -export const isBoundingBoxScaleMethod = ( - v: unknown -): v is BoundingBoxScaleMethod => zBoundingBoxScaleMethod.safeParse(v).success; +export const isBoundingBoxScaleMethod = (v: unknown): v is BoundingBoxScaleMethod => + zBoundingBoxScaleMethod.safeParse(v).success; export type CanvasDrawingTool = 'brush' | 'eraser'; @@ -75,12 +74,7 @@ export type CanvasEraseRect = { height: number; }; -export type CanvasObject = - | CanvasImage - | CanvasBaseLine - | CanvasMaskLine - | CanvasFillRect - | CanvasEraseRect; +export type CanvasObject = CanvasImage | CanvasBaseLine | CanvasMaskLine | CanvasFillRect | CanvasEraseRect; export type CanvasLayerState = { objects: CanvasObject[]; @@ -112,9 +106,7 @@ export const isCanvasFillRect = (obj: CanvasObject): obj is CanvasFillRect => export const isCanvasEraseRect = (obj: CanvasObject): obj is CanvasEraseRect => obj.kind === 'eraseRect' && obj.layer === 'base'; -export const isCanvasAnyLine = ( - obj: CanvasObject -): obj is CanvasMaskLine | CanvasBaseLine => obj.kind === 'line'; +export const isCanvasAnyLine = (obj: CanvasObject): obj is CanvasMaskLine | CanvasBaseLine => obj.kind === 'line'; export interface CanvasState { _version: 1; diff --git a/invokeai/frontend/web/src/features/canvas/util/calculateCoordinates.ts b/invokeai/frontend/web/src/features/canvas/util/calculateCoordinates.ts index e6c935c95b..fe9c14b2ba 100644 --- a/invokeai/frontend/web/src/features/canvas/util/calculateCoordinates.ts +++ b/invokeai/frontend/web/src/features/canvas/util/calculateCoordinates.ts @@ -9,12 +9,8 @@ const calculateCoordinates = ( contentHeight: number, scale: number ): Vector2d => { - const x = Math.floor( - containerWidth / 2 - (containerX + contentWidth / 2) * scale - ); - const y = Math.floor( - containerHeight / 2 - (containerY + contentHeight / 2) * scale - ); + const x = Math.floor(containerWidth / 2 - (containerX + contentWidth / 2) * scale); + const y = Math.floor(containerHeight / 2 - (containerY + contentHeight / 2) * scale); return { x, y }; }; diff --git a/invokeai/frontend/web/src/features/canvas/util/createMaskStage.ts b/invokeai/frontend/web/src/features/canvas/util/createMaskStage.ts index 4a7ceb5d50..d0a71dee40 100644 --- a/invokeai/frontend/web/src/features/canvas/util/createMaskStage.ts +++ b/invokeai/frontend/web/src/features/canvas/util/createMaskStage.ts @@ -44,8 +44,7 @@ const createMaskStage = async ( lineCap: 'round', lineJoin: 'round', shadowForStrokeEnabled: false, - globalCompositeOperation: - line.tool === 'brush' ? 'source-over' : 'destination-out', + globalCompositeOperation: line.tool === 'brush' ? 'source-over' : 'destination-out', }) ) ); diff --git a/invokeai/frontend/web/src/features/canvas/util/dataURLToImageData.ts b/invokeai/frontend/web/src/features/canvas/util/dataURLToImageData.ts index 739240a79d..d19cbe4612 100644 --- a/invokeai/frontend/web/src/features/canvas/util/dataURLToImageData.ts +++ b/invokeai/frontend/web/src/features/canvas/util/dataURLToImageData.ts @@ -1,11 +1,7 @@ /** * Gets an ImageData object from an image dataURL by drawing it to a canvas. */ -export const dataURLToImageData = async ( - dataURL: string, - width: number, - height: number -): Promise => +export const dataURLToImageData = async (dataURL: string, width: number, height: number): Promise => new Promise((resolve, reject) => { const canvas = document.createElement('canvas'); canvas.width = width; diff --git a/invokeai/frontend/web/src/features/canvas/util/getBaseLayerBlob.ts b/invokeai/frontend/web/src/features/canvas/util/getBaseLayerBlob.ts index ac6bed10a7..d37d644008 100644 --- a/invokeai/frontend/web/src/features/canvas/util/getBaseLayerBlob.ts +++ b/invokeai/frontend/web/src/features/canvas/util/getBaseLayerBlob.ts @@ -6,21 +6,14 @@ import { konvaNodeToBlob } from './konvaNodeToBlob'; /** * Get the canvas base layer blob, with or without bounding box according to `shouldCropToBoundingBoxOnSave` */ -export const getBaseLayerBlob = async ( - state: RootState, - alwaysUseBoundingBox: boolean = false -) => { +export const getBaseLayerBlob = async (state: RootState, alwaysUseBoundingBox: boolean = false) => { const canvasBaseLayer = $canvasBaseLayer.get(); if (!canvasBaseLayer) { throw new Error('Problem getting base layer blob'); } - const { - shouldCropToBoundingBoxOnSave, - boundingBoxCoordinates, - boundingBoxDimensions, - } = state.canvas; + const { shouldCropToBoundingBoxOnSave, boundingBoxCoordinates, boundingBoxDimensions } = state.canvas; const clonedBaseLayer = canvasBaseLayer.clone(); diff --git a/invokeai/frontend/web/src/features/canvas/util/getCanvasData.ts b/invokeai/frontend/web/src/features/canvas/util/getCanvasData.ts index e521cbe091..d17096cb71 100644 --- a/invokeai/frontend/web/src/features/canvas/util/getCanvasData.ts +++ b/invokeai/frontend/web/src/features/canvas/util/getCanvasData.ts @@ -1,12 +1,6 @@ import { logger } from 'app/logging/logger'; -import { - $canvasBaseLayer, - $canvasStage, -} from 'features/canvas/store/canvasNanostore'; -import type { - CanvasLayerState, - Dimensions, -} from 'features/canvas/store/canvasTypes'; +import { $canvasBaseLayer, $canvasStage } from 'features/canvas/store/canvasNanostore'; +import type { CanvasLayerState, Dimensions } from 'features/canvas/store/canvasTypes'; import { isCanvasMaskLine } from 'features/canvas/store/canvasTypes'; import { konvaNodeToImageData } from 'features/canvas/util/konvaNodeToImageData'; import type { Vector2d } from 'konva/lib/types'; @@ -57,10 +51,7 @@ export const getCanvasData = async ( // For the base layer, use the offset boundingBox const baseBlob = await konvaNodeToBlob(clonedBaseLayer, offsetBoundingBox); - const baseImageData = await konvaNodeToImageData( - clonedBaseLayer, - offsetBoundingBox - ); + const baseImageData = await konvaNodeToImageData(clonedBaseLayer, offsetBoundingBox); // For the mask layer, use the normal boundingBox const maskStage = await createMaskStage( diff --git a/invokeai/frontend/web/src/features/canvas/util/getCanvasGenerationMode.ts b/invokeai/frontend/web/src/features/canvas/util/getCanvasGenerationMode.ts index aa3b586869..f0a3464986 100644 --- a/invokeai/frontend/web/src/features/canvas/util/getCanvasGenerationMode.ts +++ b/invokeai/frontend/web/src/features/canvas/util/getCanvasGenerationMode.ts @@ -1,17 +1,9 @@ -import { - areAnyPixelsBlack, - getImageDataTransparency, -} from 'common/util/arrayBuffer'; +import { areAnyPixelsBlack, getImageDataTransparency } from 'common/util/arrayBuffer'; import type { GenerationMode } from 'features/canvas/store/canvasTypes'; -export const getCanvasGenerationMode = ( - baseImageData: ImageData, - maskImageData: ImageData -): GenerationMode => { - const { - isPartiallyTransparent: baseIsPartiallyTransparent, - isFullyTransparent: baseIsFullyTransparent, - } = getImageDataTransparency(baseImageData.data); +export const getCanvasGenerationMode = (baseImageData: ImageData, maskImageData: ImageData): GenerationMode => { + const { isPartiallyTransparent: baseIsPartiallyTransparent, isFullyTransparent: baseIsFullyTransparent } = + getImageDataTransparency(baseImageData.data); // check mask for black const doesMaskHaveBlackPixels = areAnyPixelsBlack(maskImageData.data); diff --git a/invokeai/frontend/web/src/features/canvas/util/getScaledBoundingBoxDimensions.ts b/invokeai/frontend/web/src/features/canvas/util/getScaledBoundingBoxDimensions.ts index 4f8f217701..de38d12cf5 100644 --- a/invokeai/frontend/web/src/features/canvas/util/getScaledBoundingBoxDimensions.ts +++ b/invokeai/frontend/web/src/features/canvas/util/getScaledBoundingBoxDimensions.ts @@ -2,10 +2,7 @@ import { roundToMultiple } from 'common/util/roundDownToMultiple'; import type { Dimensions } from 'features/canvas/store/canvasTypes'; import { CANVAS_GRID_SIZE_FINE } from 'features/canvas/store/constants'; -const getScaledBoundingBoxDimensions = ( - dimensions: Dimensions, - optimalDimension: number -) => { +const getScaledBoundingBoxDimensions = (dimensions: Dimensions, optimalDimension: number) => { const { width, height } = dimensions; const scaledDimensions = { width, height }; @@ -22,16 +19,10 @@ const getScaledBoundingBoxDimensions = ( } else { if (aspectRatio > 1) { scaledDimensions.width = maxDimension; - scaledDimensions.height = roundToMultiple( - maxDimension / aspectRatio, - CANVAS_GRID_SIZE_FINE - ); + scaledDimensions.height = roundToMultiple(maxDimension / aspectRatio, CANVAS_GRID_SIZE_FINE); } else if (aspectRatio < 1) { scaledDimensions.height = maxDimension; - scaledDimensions.width = roundToMultiple( - maxDimension * aspectRatio, - CANVAS_GRID_SIZE_FINE - ); + scaledDimensions.width = roundToMultiple(maxDimension * aspectRatio, CANVAS_GRID_SIZE_FINE); } currentArea = scaledDimensions.width * scaledDimensions.height; } diff --git a/invokeai/frontend/web/src/features/canvas/util/isElChildOfCanvasTab.tsx b/invokeai/frontend/web/src/features/canvas/util/isElChildOfCanvasTab.tsx index ea2b781e34..a59e780abc 100644 --- a/invokeai/frontend/web/src/features/canvas/util/isElChildOfCanvasTab.tsx +++ b/invokeai/frontend/web/src/features/canvas/util/isElChildOfCanvasTab.tsx @@ -7,8 +7,6 @@ import { CANVAS_TAB_TESTID } from 'features/canvas/store/constants'; * it's safer to check the canvas tab and grab its parent. */ export const isElChildOfCanvasTab = (el: HTMLElement) => { - const canvasContainerEl = document.querySelector( - `[data-testid="${CANVAS_TAB_TESTID}"]` - ); + const canvasContainerEl = document.querySelector(`[data-testid="${CANVAS_TAB_TESTID}"]`); return Boolean(canvasContainerEl?.parentElement?.contains(el)); }; diff --git a/invokeai/frontend/web/src/features/canvas/util/konvaNodeToBlob.ts b/invokeai/frontend/web/src/features/canvas/util/konvaNodeToBlob.ts index 40b9768e5a..e16988ea23 100644 --- a/invokeai/frontend/web/src/features/canvas/util/konvaNodeToBlob.ts +++ b/invokeai/frontend/web/src/features/canvas/util/konvaNodeToBlob.ts @@ -9,9 +9,6 @@ import { canvasToBlob } from './canvasToBlob'; * @param boundingBox - The bounding box to crop to * @returns A Promise that resolves with Blob of the node cropped to the bounding box */ -export const konvaNodeToBlob = async ( - node: Konva.Node, - boundingBox: IRect -): Promise => { +export const konvaNodeToBlob = async (node: Konva.Node, boundingBox: IRect): Promise => { return await canvasToBlob(node.toCanvas(boundingBox)); }; diff --git a/invokeai/frontend/web/src/features/canvas/util/konvaNodeToImageData.ts b/invokeai/frontend/web/src/features/canvas/util/konvaNodeToImageData.ts index e3c3c008fa..3b5780ae16 100644 --- a/invokeai/frontend/web/src/features/canvas/util/konvaNodeToImageData.ts +++ b/invokeai/frontend/web/src/features/canvas/util/konvaNodeToImageData.ts @@ -9,16 +9,9 @@ import { dataURLToImageData } from './dataURLToImageData'; * @param boundingBox - The bounding box to crop to * @returns A Promise that resolves with ImageData object of the node cropped to the bounding box */ -export const konvaNodeToImageData = async ( - node: Konva.Node, - boundingBox: IRect -): Promise => { +export const konvaNodeToImageData = async (node: Konva.Node, boundingBox: IRect): Promise => { // get a dataURL of the bbox'd region const dataURL = node.toDataURL(boundingBox); - return await dataURLToImageData( - dataURL, - boundingBox.width, - boundingBox.height - ); + return await dataURLToImageData(dataURL, boundingBox.width, boundingBox.height); }; diff --git a/invokeai/frontend/web/src/features/canvas/util/roundDimensionsToMultiple.ts b/invokeai/frontend/web/src/features/canvas/util/roundDimensionsToMultiple.ts index 18141d29a8..8e526a54e6 100644 --- a/invokeai/frontend/web/src/features/canvas/util/roundDimensionsToMultiple.ts +++ b/invokeai/frontend/web/src/features/canvas/util/roundDimensionsToMultiple.ts @@ -1,10 +1,7 @@ import { roundToMultiple } from 'common/util/roundDownToMultiple'; import type { Dimensions } from 'features/canvas/store/canvasTypes'; -const roundDimensionsToMultiple = ( - dimensions: Dimensions, - multiple: number -): Dimensions => { +const roundDimensionsToMultiple = (dimensions: Dimensions, multiple: number): Dimensions => { return { width: roundToMultiple(dimensions.width, multiple), height: roundToMultiple(dimensions.height, multiple), diff --git a/invokeai/frontend/web/src/features/changeBoardModal/components/ChangeBoardModal.tsx b/invokeai/frontend/web/src/features/changeBoardModal/components/ChangeBoardModal.tsx index b8688b334d..218e297393 100644 --- a/invokeai/frontend/web/src/features/changeBoardModal/components/ChangeBoardModal.tsx +++ b/invokeai/frontend/web/src/features/changeBoardModal/components/ChangeBoardModal.tsx @@ -1,11 +1,5 @@ import type { ComboboxOnChange, ComboboxOption } from '@invoke-ai/ui-library'; -import { - Combobox, - ConfirmationAlertDialog, - Flex, - FormControl, - Text, -} from '@invoke-ai/ui-library'; +import { Combobox, ConfirmationAlertDialog, Flex, FormControl, Text } from '@invoke-ai/ui-library'; import { createMemoizedSelector } from 'app/store/createMemoizedSelector'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import { @@ -16,10 +10,7 @@ import { import { memo, useCallback, useMemo, useState } from 'react'; import { useTranslation } from 'react-i18next'; import { useListAllBoardsQuery } from 'services/api/endpoints/boards'; -import { - useAddImagesToBoardMutation, - useRemoveImagesFromBoardMutation, -} from 'services/api/endpoints/images'; +import { useAddImagesToBoardMutation, useRemoveImagesFromBoardMutation } from 'services/api/endpoints/images'; const selectImagesToChange = createMemoizedSelector( selectChangeBoardModalSlice, @@ -45,10 +36,7 @@ const ChangeBoardModal = () => { ); }, [boards, t]); - const value = useMemo( - () => options.find((o) => o.value === selectedBoard), - [options, selectedBoard] - ); + const value = useMemo(() => options.find((o) => o.value === selectedBoard), [options, selectedBoard]); const handleClose = useCallback(() => { dispatch(changeBoardReset()); @@ -70,13 +58,7 @@ const ChangeBoardModal = () => { } setSelectedBoard(null); dispatch(changeBoardReset()); - }, [ - addImagesToBoard, - dispatch, - imagesToChange, - removeImagesFromBoard, - selectedBoard, - ]); + }, [addImagesToBoard, dispatch, imagesToChange, removeImagesFromBoard, selectedBoard]); const onChange = useCallback((v) => { if (!v) { @@ -103,9 +85,7 @@ const ChangeBoardModal = () => { - state.changeBoardModal; +export const selectChangeBoardModalSlice = (state: RootState) => state.changeBoardModal; diff --git a/invokeai/frontend/web/src/features/controlAdapters/components/ControlAdapterConfig.tsx b/invokeai/frontend/web/src/features/controlAdapters/components/ControlAdapterConfig.tsx index 21b05b30d7..6124823808 100644 --- a/invokeai/frontend/web/src/features/controlAdapters/components/ControlAdapterConfig.tsx +++ b/invokeai/frontend/web/src/features/controlAdapters/components/ControlAdapterConfig.tsx @@ -1,12 +1,4 @@ -import { - Box, - Flex, - FormControl, - FormLabel, - Icon, - IconButton, - Switch, -} from '@invoke-ai/ui-library'; +import { Box, Flex, FormControl, FormLabel, Icon, IconButton, Switch } from '@invoke-ai/ui-library'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import { useControlAdapterIsEnabled } from 'features/controlAdapters/hooks/useControlAdapterIsEnabled'; import { useControlAdapterType } from 'features/controlAdapters/hooks/useControlAdapterType'; @@ -68,19 +60,10 @@ const ControlAdapterConfig = (props: { id: string; number: number }) => { } return ( - + - - {t(`controlnet.${controlAdapterType}`, { number })} - + {t(`controlnet.${controlAdapterType}`, { number })} { - + - {activeTabName === 'unifiedCanvas' && ( - - )} + {activeTabName === 'unifiedCanvas' && } { /> { {!isExpanded && ( - + )} diff --git a/invokeai/frontend/web/src/features/controlAdapters/components/ControlAdapterImagePreview.tsx b/invokeai/frontend/web/src/features/controlAdapters/components/ControlAdapterImagePreview.tsx index 84cd77fac3..32aca81185 100644 --- a/invokeai/frontend/web/src/features/controlAdapters/components/ControlAdapterImagePreview.tsx +++ b/invokeai/frontend/web/src/features/controlAdapters/components/ControlAdapterImagePreview.tsx @@ -13,23 +13,12 @@ import { controlAdapterImageChanged, selectControlAdaptersSlice, } from 'features/controlAdapters/store/controlAdaptersSlice'; -import type { - TypesafeDraggableData, - TypesafeDroppableData, -} from 'features/dnd/types'; -import { - heightChanged, - selectOptimalDimension, - widthChanged, -} from 'features/parameters/store/generationSlice'; +import type { TypesafeDraggableData, TypesafeDroppableData } from 'features/dnd/types'; +import { heightChanged, selectOptimalDimension, widthChanged } from 'features/parameters/store/generationSlice'; import { activeTabNameSelector } from 'features/ui/store/uiSelectors'; import { memo, useCallback, useEffect, useMemo, useState } from 'react'; import { useTranslation } from 'react-i18next'; -import { - PiArrowCounterClockwiseBold, - PiFloppyDiskBold, - PiRulerBold, -} from 'react-icons/pi'; +import { PiArrowCounterClockwiseBold, PiFloppyDiskBold, PiRulerBold } from 'react-icons/pi'; import { useAddImageToBoardMutation, useChangeImageIsIntermediateMutation, @@ -62,13 +51,13 @@ const ControlAdapterImagePreview = ({ isSmall, id }: Props) => { const [isMouseOverImage, setIsMouseOverImage] = useState(false); - const { currentData: controlImage, isError: isErrorControlImage } = - useGetImageDTOQuery(controlImageName ?? skipToken); + const { currentData: controlImage, isError: isErrorControlImage } = useGetImageDTOQuery( + controlImageName ?? skipToken + ); - const { - currentData: processedControlImage, - isError: isErrorProcessedControlImage, - } = useGetImageDTOQuery(processedControlImageName ?? skipToken); + const { currentData: processedControlImage, isError: isErrorProcessedControlImage } = useGetImageDTOQuery( + processedControlImageName ?? skipToken + ); const [changeIsIntermediate] = useChangeImageIsIntermediateMutation(); const [addToBoard] = useAddImageToBoardMutation(); @@ -95,13 +84,7 @@ const ControlAdapterImagePreview = ({ isSmall, id }: Props) => { } else { removeFromBoard({ imageDTO: processedControlImage }); } - }, [ - processedControlImage, - changeIsIntermediate, - autoAddBoardId, - addToBoard, - removeFromBoard, - ]); + }, [processedControlImage, changeIsIntermediate, autoAddBoardId, addToBoard, removeFromBoard]); const handleSetControlImageToDimensions = useCallback(() => { if (!controlImage) { @@ -151,10 +134,7 @@ const ControlAdapterImagePreview = ({ isSmall, id }: Props) => { [id] ); - const postUploadAction = useMemo( - () => ({ type: 'SET_CONTROL_ADAPTER_IMAGE', id }), - [id] - ); + const postUploadAction = useMemo(() => ({ type: 'SET_CONTROL_ADAPTER_IMAGE', id }), [id]); const shouldShowProcessedImage = controlImage && @@ -167,12 +147,7 @@ const ControlAdapterImagePreview = ({ isSmall, id }: Props) => { if (isConnected && (isErrorControlImage || isErrorProcessedControlImage)) { handleResetControlImage(); } - }, [ - handleResetControlImage, - isConnected, - isErrorControlImage, - isErrorProcessedControlImage, - ]); + }, [handleResetControlImage, isConnected, isErrorControlImage, isErrorProcessedControlImage]); return ( { <> : undefined - } + icon={controlImage ? : undefined} tooltip={t('controlnet.resetControlImage')} /> { } if (processorNode.type === 'canny_image_processor') { - return ( - - ); + return ; } if (processorNode.type === 'color_map_image_processor') { - return ( - - ); + return ; } if (processorNode.type === 'depth_anything_image_processor') { - return ( - - ); + return ; } if (processorNode.type === 'hed_image_processor') { - return ( - - ); + return ; } if (processorNode.type === 'lineart_image_processor') { - return ( - - ); + return ; } if (processorNode.type === 'content_shuffle_image_processor') { - return ( - - ); + return ; } if (processorNode.type === 'lineart_anime_image_processor') { - return ( - - ); + return ; } if (processorNode.type === 'mediapipe_face_processor') { - return ( - - ); + return ; } if (processorNode.type === 'midas_depth_image_processor') { - return ( - - ); + return ; } if (processorNode.type === 'mlsd_image_processor') { - return ( - - ); + return ; } if (processorNode.type === 'normalbae_image_processor') { - return ( - - ); + return ; } if (processorNode.type === 'openpose_image_processor') { - return ( - - ); + return ; } if (processorNode.type === 'pidi_image_processor') { - return ( - - ); + return ; } if (processorNode.type === 'zoe_depth_image_processor') { - return ( - - ); + return ; } return null; diff --git a/invokeai/frontend/web/src/features/controlAdapters/components/ControlAdapterShouldAutoConfig.tsx b/invokeai/frontend/web/src/features/controlAdapters/components/ControlAdapterShouldAutoConfig.tsx index b8bdbc7f5a..7399febb2d 100644 --- a/invokeai/frontend/web/src/features/controlAdapters/components/ControlAdapterShouldAutoConfig.tsx +++ b/invokeai/frontend/web/src/features/controlAdapters/components/ControlAdapterShouldAutoConfig.tsx @@ -28,10 +28,7 @@ const ControlAdapterShouldAutoConfig = ({ id }: Props) => { return ( {t('controlnet.autoConfigure')} - + ); }; diff --git a/invokeai/frontend/web/src/features/controlAdapters/components/imports/ControlNetCanvasImageImports.tsx b/invokeai/frontend/web/src/features/controlAdapters/components/imports/ControlNetCanvasImageImports.tsx index 8b24ec2b7e..fada3e3abf 100644 --- a/invokeai/frontend/web/src/features/controlAdapters/components/imports/ControlNetCanvasImageImports.tsx +++ b/invokeai/frontend/web/src/features/controlAdapters/components/imports/ControlNetCanvasImageImports.tsx @@ -1,9 +1,6 @@ import { Flex, IconButton } from '@invoke-ai/ui-library'; import { useAppDispatch } from 'app/store/storeHooks'; -import { - canvasImageToControlAdapter, - canvasMaskToControlAdapter, -} from 'features/canvas/store/actions'; +import { canvasImageToControlAdapter, canvasMaskToControlAdapter } from 'features/canvas/store/actions'; import { memo, useCallback } from 'react'; import { useTranslation } from 'react-i18next'; import { PiExcludeBold, PiImageSquareBold } from 'react-icons/pi'; @@ -12,9 +9,7 @@ type ControlNetCanvasImageImportsProps = { id: string; }; -const ControlNetCanvasImageImports = ( - props: ControlNetCanvasImageImportsProps -) => { +const ControlNetCanvasImageImports = (props: ControlNetCanvasImageImportsProps) => { const { id } = props; const dispatch = useAppDispatch(); const { t } = useTranslation(); diff --git a/invokeai/frontend/web/src/features/controlAdapters/components/parameters/ParamControlAdapterBeginEnd.tsx b/invokeai/frontend/web/src/features/controlAdapters/components/parameters/ParamControlAdapterBeginEnd.tsx index 409251d5d1..a62f7e7d8a 100644 --- a/invokeai/frontend/web/src/features/controlAdapters/components/parameters/ParamControlAdapterBeginEnd.tsx +++ b/invokeai/frontend/web/src/features/controlAdapters/components/parameters/ParamControlAdapterBeginEnd.tsx @@ -1,8 +1,4 @@ -import { - CompositeRangeSlider, - FormControl, - FormLabel, -} from '@invoke-ai/ui-library'; +import { CompositeRangeSlider, FormControl, FormLabel } from '@invoke-ai/ui-library'; import { useAppDispatch } from 'app/store/storeHooks'; import { useControlAdapterBeginEndStepPct } from 'features/controlAdapters/hooks/useControlAdapterBeginEndStepPct'; import { useControlAdapterIsEnabled } from 'features/controlAdapters/hooks/useControlAdapterIsEnabled'; @@ -58,10 +54,7 @@ export const ParamControlAdapterBeginEnd = memo(({ id }: Props) => { ); }, [dispatch, id]); - const value = useMemo<[number, number]>( - () => [stepPcts?.beginStepPct ?? 0, stepPcts?.endStepPct ?? 1], - [stepPcts] - ); + const value = useMemo<[number, number]>(() => [stepPcts?.beginStepPct ?? 0, stepPcts?.endStepPct ?? 1], [stepPcts]); if (!stepPcts) { return null; diff --git a/invokeai/frontend/web/src/features/controlAdapters/components/parameters/ParamControlAdapterControlMode.tsx b/invokeai/frontend/web/src/features/controlAdapters/components/parameters/ParamControlAdapterControlMode.tsx index 3a55d97e6a..ea16d6bc1f 100644 --- a/invokeai/frontend/web/src/features/controlAdapters/components/parameters/ParamControlAdapterControlMode.tsx +++ b/invokeai/frontend/web/src/features/controlAdapters/components/parameters/ParamControlAdapterControlMode.tsx @@ -58,11 +58,7 @@ const ParamControlAdapterControlMode = ({ id }: Props) => { {t('controlnet.controlMode')} - + ); }; diff --git a/invokeai/frontend/web/src/features/controlAdapters/components/parameters/ParamControlAdapterModel.tsx b/invokeai/frontend/web/src/features/controlAdapters/components/parameters/ParamControlAdapterModel.tsx index e835476ba1..13851b143c 100644 --- a/invokeai/frontend/web/src/features/controlAdapters/components/parameters/ParamControlAdapterModel.tsx +++ b/invokeai/frontend/web/src/features/controlAdapters/components/parameters/ParamControlAdapterModel.tsx @@ -22,32 +22,21 @@ type ParamControlAdapterModelProps = { id: string; }; -const selectMainModel = createMemoizedSelector( - selectGenerationSlice, - (generation) => generation.model -); +const selectMainModel = createMemoizedSelector(selectGenerationSlice, (generation) => generation.model); const ParamControlAdapterModel = ({ id }: ParamControlAdapterModelProps) => { const isEnabled = useControlAdapterIsEnabled(id); const controlAdapterType = useControlAdapterType(id); const model = useControlAdapterModel(id); const dispatch = useAppDispatch(); - const currentBaseModel = useAppSelector( - (s) => s.generation.model?.base_model - ); + const currentBaseModel = useAppSelector((s) => s.generation.model?.base_model); const mainModel = useAppSelector(selectMainModel); const { t } = useTranslation(); const models = useControlAdapterModelEntities(controlAdapterType); const _onChange = useCallback( - ( - model: - | ControlNetModelConfigEntity - | IPAdapterModelConfigEntity - | T2IAdapterModelConfigEntity - | null - ) => { + (model: ControlNetModelConfigEntity | IPAdapterModelConfigEntity | T2IAdapterModelConfigEntity | null) => { if (!model) { return; } @@ -62,10 +51,7 @@ const ParamControlAdapterModel = ({ id }: ParamControlAdapterModelProps) => { ); const selectedModel = useMemo( - () => - model && controlAdapterType - ? { ...model, model_type: controlAdapterType } - : null, + () => (model && controlAdapterType ? { ...model, model_type: controlAdapterType } : null), [controlAdapterType, model] ); @@ -78,20 +64,16 @@ const ParamControlAdapterModel = ({ id }: ParamControlAdapterModelProps) => { [currentBaseModel] ); - const { options, value, onChange, noOptionsMessage } = - useGroupedModelCombobox({ - modelEntities: models, - onChange: _onChange, - selectedModel, - getIsDisabled, - }); + const { options, value, onChange, noOptionsMessage } = useGroupedModelCombobox({ + modelEntities: models, + onChange: _onChange, + selectedModel, + getIsDisabled, + }); return ( - + { })) .sort((a, b) => // sort 'none' to the top - a.value === 'none' - ? -1 - : b.value === 'none' - ? 1 - : a.label.localeCompare(b.label) + a.value === 'none' ? -1 : b.value === 'none' ? 1 : a.label.localeCompare(b.label) ) - .filter( - (d) => - !config.sd.disabledControlNetProcessors.includes( - d.value as ControlAdapterProcessorType - ) - ); + .filter((d) => !config.sd.disabledControlNetProcessors.includes(d.value as ControlAdapterProcessorType)); return options; }); @@ -60,10 +51,7 @@ const ParamControlAdapterProcessorSelect = ({ id }: Props) => { }, [id, dispatch] ); - const value = useMemo( - () => options.find((o) => o.value === processorNode?.type), - [options, processorNode] - ); + const value = useMemo(() => options.find((o) => o.value === processorNode?.type), [options, processorNode]); if (!processorNode) { return null; diff --git a/invokeai/frontend/web/src/features/controlAdapters/components/parameters/ParamControlAdapterResizeMode.tsx b/invokeai/frontend/web/src/features/controlAdapters/components/parameters/ParamControlAdapterResizeMode.tsx index 3b6c23a2a1..58b8905f5a 100644 --- a/invokeai/frontend/web/src/features/controlAdapters/components/parameters/ParamControlAdapterResizeMode.tsx +++ b/invokeai/frontend/web/src/features/controlAdapters/components/parameters/ParamControlAdapterResizeMode.tsx @@ -45,10 +45,7 @@ const ParamControlAdapterResizeMode = ({ id }: Props) => { [id, dispatch] ); - const value = useMemo( - () => options.find((o) => o.value === resizeMode), - [options, resizeMode] - ); + const value = useMemo(() => options.find((o) => o.value === resizeMode), [options, resizeMode]); if (!resizeMode) { return null; @@ -59,12 +56,7 @@ const ParamControlAdapterResizeMode = ({ id }: Props) => { {t('controlnet.resizeMode')} - + ); }; diff --git a/invokeai/frontend/web/src/features/controlAdapters/components/parameters/ParamControlAdapterWeight.tsx b/invokeai/frontend/web/src/features/controlAdapters/components/parameters/ParamControlAdapterWeight.tsx index 068b38d6ba..7f45901f53 100644 --- a/invokeai/frontend/web/src/features/controlAdapters/components/parameters/ParamControlAdapterWeight.tsx +++ b/invokeai/frontend/web/src/features/controlAdapters/components/parameters/ParamControlAdapterWeight.tsx @@ -1,9 +1,4 @@ -import { - CompositeNumberInput, - CompositeSlider, - FormControl, - FormLabel, -} from '@invoke-ai/ui-library'; +import { CompositeNumberInput, CompositeSlider, FormControl, FormLabel } from '@invoke-ai/ui-library'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import { InformationalPopover } from 'common/components/InformationalPopover/InformationalPopover'; import { useControlAdapterIsEnabled } from 'features/controlAdapters/hooks/useControlAdapterIsEnabled'; @@ -27,12 +22,8 @@ const ParamControlAdapterWeight = ({ id }: ParamControlAdapterWeightProps) => { const initial = useAppSelector((s) => s.config.sd.ca.weight.initial); const sliderMin = useAppSelector((s) => s.config.sd.ca.weight.sliderMin); const sliderMax = useAppSelector((s) => s.config.sd.ca.weight.sliderMax); - const numberInputMin = useAppSelector( - (s) => s.config.sd.ca.weight.numberInputMin - ); - const numberInputMax = useAppSelector( - (s) => s.config.sd.ca.weight.numberInputMax - ); + const numberInputMin = useAppSelector((s) => s.config.sd.ca.weight.numberInputMin); + const numberInputMax = useAppSelector((s) => s.config.sd.ca.weight.numberInputMax); const coarseStep = useAppSelector((s) => s.config.sd.ca.weight.coarseStep); const fineStep = useAppSelector((s) => s.config.sd.ca.weight.fineStep); diff --git a/invokeai/frontend/web/src/features/controlAdapters/components/processors/CannyProcessor.tsx b/invokeai/frontend/web/src/features/controlAdapters/components/processors/CannyProcessor.tsx index 0f5c1b72e9..1cc458be8e 100644 --- a/invokeai/frontend/web/src/features/controlAdapters/components/processors/CannyProcessor.tsx +++ b/invokeai/frontend/web/src/features/controlAdapters/components/processors/CannyProcessor.tsx @@ -1,9 +1,4 @@ -import { - CompositeNumberInput, - CompositeSlider, - FormControl, - FormLabel, -} from '@invoke-ai/ui-library'; +import { CompositeNumberInput, CompositeSlider, FormControl, FormLabel } from '@invoke-ai/ui-library'; import { useProcessorNodeChanged } from 'features/controlAdapters/components/hooks/useProcessorNodeChanged'; import { CONTROLNET_PROCESSORS } from 'features/controlAdapters/store/constants'; import type { RequiredCannyImageProcessorInvocation } from 'features/controlAdapters/store/types'; @@ -12,8 +7,7 @@ import { useTranslation } from 'react-i18next'; import ProcessorWrapper from './common/ProcessorWrapper'; -const DEFAULTS = CONTROLNET_PROCESSORS.canny_image_processor - .default as RequiredCannyImageProcessorInvocation; +const DEFAULTS = CONTROLNET_PROCESSORS.canny_image_processor.default as RequiredCannyImageProcessorInvocation; type CannyProcessorProps = { controlNetId: string; diff --git a/invokeai/frontend/web/src/features/controlAdapters/components/processors/ColorMapProcessor.tsx b/invokeai/frontend/web/src/features/controlAdapters/components/processors/ColorMapProcessor.tsx index bfb2b880f2..b0ddde6f93 100644 --- a/invokeai/frontend/web/src/features/controlAdapters/components/processors/ColorMapProcessor.tsx +++ b/invokeai/frontend/web/src/features/controlAdapters/components/processors/ColorMapProcessor.tsx @@ -1,9 +1,4 @@ -import { - CompositeNumberInput, - CompositeSlider, - FormControl, - FormLabel, -} from '@invoke-ai/ui-library'; +import { CompositeNumberInput, CompositeSlider, FormControl, FormLabel } from '@invoke-ai/ui-library'; import { useProcessorNodeChanged } from 'features/controlAdapters/components/hooks/useProcessorNodeChanged'; import { CONTROLNET_PROCESSORS } from 'features/controlAdapters/store/constants'; import type { RequiredColorMapImageProcessorInvocation } from 'features/controlAdapters/store/types'; @@ -12,8 +7,7 @@ import { useTranslation } from 'react-i18next'; import ProcessorWrapper from './common/ProcessorWrapper'; -const DEFAULTS = CONTROLNET_PROCESSORS.color_map_image_processor - .default as RequiredColorMapImageProcessorInvocation; +const DEFAULTS = CONTROLNET_PROCESSORS.color_map_image_processor.default as RequiredColorMapImageProcessorInvocation; type ColorMapProcessorProps = { controlNetId: string; diff --git a/invokeai/frontend/web/src/features/controlAdapters/components/processors/ContentShuffleProcessor.tsx b/invokeai/frontend/web/src/features/controlAdapters/components/processors/ContentShuffleProcessor.tsx index 7343c220c6..413f301f5a 100644 --- a/invokeai/frontend/web/src/features/controlAdapters/components/processors/ContentShuffleProcessor.tsx +++ b/invokeai/frontend/web/src/features/controlAdapters/components/processors/ContentShuffleProcessor.tsx @@ -1,9 +1,4 @@ -import { - CompositeNumberInput, - CompositeSlider, - FormControl, - FormLabel, -} from '@invoke-ai/ui-library'; +import { CompositeNumberInput, CompositeSlider, FormControl, FormLabel } from '@invoke-ai/ui-library'; import { useProcessorNodeChanged } from 'features/controlAdapters/components/hooks/useProcessorNodeChanged'; import { CONTROLNET_PROCESSORS } from 'features/controlAdapters/store/constants'; import type { RequiredContentShuffleImageProcessorInvocation } from 'features/controlAdapters/store/types'; @@ -102,57 +97,18 @@ const ContentShuffleProcessor = (props: Props) => { {t('controlnet.w')} - - + + {t('controlnet.h')} - - + + {t('controlnet.f')} - - + + ); diff --git a/invokeai/frontend/web/src/features/controlAdapters/components/processors/DepthAnyThingProcessor.tsx b/invokeai/frontend/web/src/features/controlAdapters/components/processors/DepthAnyThingProcessor.tsx index d1a4db9818..272a2cab49 100644 --- a/invokeai/frontend/web/src/features/controlAdapters/components/processors/DepthAnyThingProcessor.tsx +++ b/invokeai/frontend/web/src/features/controlAdapters/components/processors/DepthAnyThingProcessor.tsx @@ -1,11 +1,5 @@ import type { ComboboxOnChange } from '@invoke-ai/ui-library'; -import { - Combobox, - CompositeNumberInput, - CompositeSlider, - FormControl, - FormLabel, -} from '@invoke-ai/ui-library'; +import { Combobox, CompositeNumberInput, CompositeSlider, FormControl, FormLabel } from '@invoke-ai/ui-library'; import { useProcessorNodeChanged } from 'features/controlAdapters/components/hooks/useProcessorNodeChanged'; import { CONTROLNET_PROCESSORS } from 'features/controlAdapters/store/constants'; import type { @@ -55,10 +49,7 @@ const DepthAnythingProcessor = (props: Props) => { [t] ); - const value = useMemo( - () => options.filter((o) => o.value === model_size)[0], - [options, model_size] - ); + const value = useMemo(() => options.filter((o) => o.value === model_size)[0], [options, model_size]); const handleResolutionChange = useCallback( (v: number) => { diff --git a/invokeai/frontend/web/src/features/controlAdapters/components/processors/HedProcessor.tsx b/invokeai/frontend/web/src/features/controlAdapters/components/processors/HedProcessor.tsx index 4242f7c95b..2452021d5e 100644 --- a/invokeai/frontend/web/src/features/controlAdapters/components/processors/HedProcessor.tsx +++ b/invokeai/frontend/web/src/features/controlAdapters/components/processors/HedProcessor.tsx @@ -1,10 +1,4 @@ -import { - CompositeNumberInput, - CompositeSlider, - FormControl, - FormLabel, - Switch, -} from '@invoke-ai/ui-library'; +import { CompositeNumberInput, CompositeSlider, FormControl, FormLabel, Switch } from '@invoke-ai/ui-library'; import { useProcessorNodeChanged } from 'features/controlAdapters/components/hooks/useProcessorNodeChanged'; import { CONTROLNET_PROCESSORS } from 'features/controlAdapters/store/constants'; import type { RequiredHedImageProcessorInvocation } from 'features/controlAdapters/store/types'; @@ -14,8 +8,7 @@ import { useTranslation } from 'react-i18next'; import ProcessorWrapper from './common/ProcessorWrapper'; -const DEFAULTS = CONTROLNET_PROCESSORS.hed_image_processor - .default as RequiredHedImageProcessorInvocation; +const DEFAULTS = CONTROLNET_PROCESSORS.hed_image_processor.default as RequiredHedImageProcessorInvocation; type HedProcessorProps = { controlNetId: string; diff --git a/invokeai/frontend/web/src/features/controlAdapters/components/processors/LineartAnimeProcessor.tsx b/invokeai/frontend/web/src/features/controlAdapters/components/processors/LineartAnimeProcessor.tsx index 741c02c106..3d08e4724a 100644 --- a/invokeai/frontend/web/src/features/controlAdapters/components/processors/LineartAnimeProcessor.tsx +++ b/invokeai/frontend/web/src/features/controlAdapters/components/processors/LineartAnimeProcessor.tsx @@ -1,9 +1,4 @@ -import { - CompositeNumberInput, - CompositeSlider, - FormControl, - FormLabel, -} from '@invoke-ai/ui-library'; +import { CompositeNumberInput, CompositeSlider, FormControl, FormLabel } from '@invoke-ai/ui-library'; import { useProcessorNodeChanged } from 'features/controlAdapters/components/hooks/useProcessorNodeChanged'; import { CONTROLNET_PROCESSORS } from 'features/controlAdapters/store/constants'; import type { RequiredLineartAnimeImageProcessorInvocation } from 'features/controlAdapters/store/types'; diff --git a/invokeai/frontend/web/src/features/controlAdapters/components/processors/LineartProcessor.tsx b/invokeai/frontend/web/src/features/controlAdapters/components/processors/LineartProcessor.tsx index 6148364020..22a96f51f9 100644 --- a/invokeai/frontend/web/src/features/controlAdapters/components/processors/LineartProcessor.tsx +++ b/invokeai/frontend/web/src/features/controlAdapters/components/processors/LineartProcessor.tsx @@ -1,10 +1,4 @@ -import { - CompositeNumberInput, - CompositeSlider, - FormControl, - FormLabel, - Switch, -} from '@invoke-ai/ui-library'; +import { CompositeNumberInput, CompositeSlider, FormControl, FormLabel, Switch } from '@invoke-ai/ui-library'; import { useProcessorNodeChanged } from 'features/controlAdapters/components/hooks/useProcessorNodeChanged'; import { CONTROLNET_PROCESSORS } from 'features/controlAdapters/store/constants'; import type { RequiredLineartImageProcessorInvocation } from 'features/controlAdapters/store/types'; @@ -14,8 +8,7 @@ import { useTranslation } from 'react-i18next'; import ProcessorWrapper from './common/ProcessorWrapper'; -const DEFAULTS = CONTROLNET_PROCESSORS.lineart_image_processor - .default as RequiredLineartImageProcessorInvocation; +const DEFAULTS = CONTROLNET_PROCESSORS.lineart_image_processor.default as RequiredLineartImageProcessorInvocation; type LineartProcessorProps = { controlNetId: string; diff --git a/invokeai/frontend/web/src/features/controlAdapters/components/processors/MediapipeFaceProcessor.tsx b/invokeai/frontend/web/src/features/controlAdapters/components/processors/MediapipeFaceProcessor.tsx index 2fb7aa7310..a0d5308210 100644 --- a/invokeai/frontend/web/src/features/controlAdapters/components/processors/MediapipeFaceProcessor.tsx +++ b/invokeai/frontend/web/src/features/controlAdapters/components/processors/MediapipeFaceProcessor.tsx @@ -1,9 +1,4 @@ -import { - CompositeNumberInput, - CompositeSlider, - FormControl, - FormLabel, -} from '@invoke-ai/ui-library'; +import { CompositeNumberInput, CompositeSlider, FormControl, FormLabel } from '@invoke-ai/ui-library'; import { useProcessorNodeChanged } from 'features/controlAdapters/components/hooks/useProcessorNodeChanged'; import { CONTROLNET_PROCESSORS } from 'features/controlAdapters/store/constants'; import type { RequiredMediapipeFaceProcessorInvocation } from 'features/controlAdapters/store/types'; @@ -12,8 +7,7 @@ import { useTranslation } from 'react-i18next'; import ProcessorWrapper from './common/ProcessorWrapper'; -const DEFAULTS = CONTROLNET_PROCESSORS.mediapipe_face_processor - .default as RequiredMediapipeFaceProcessorInvocation; +const DEFAULTS = CONTROLNET_PROCESSORS.mediapipe_face_processor.default as RequiredMediapipeFaceProcessorInvocation; type Props = { controlNetId: string; diff --git a/invokeai/frontend/web/src/features/controlAdapters/components/processors/MidasDepthProcessor.tsx b/invokeai/frontend/web/src/features/controlAdapters/components/processors/MidasDepthProcessor.tsx index ba52a102af..ba245bc2eb 100644 --- a/invokeai/frontend/web/src/features/controlAdapters/components/processors/MidasDepthProcessor.tsx +++ b/invokeai/frontend/web/src/features/controlAdapters/components/processors/MidasDepthProcessor.tsx @@ -1,9 +1,4 @@ -import { - CompositeNumberInput, - CompositeSlider, - FormControl, - FormLabel, -} from '@invoke-ai/ui-library'; +import { CompositeNumberInput, CompositeSlider, FormControl, FormLabel } from '@invoke-ai/ui-library'; import { useProcessorNodeChanged } from 'features/controlAdapters/components/hooks/useProcessorNodeChanged'; import { CONTROLNET_PROCESSORS } from 'features/controlAdapters/store/constants'; import type { RequiredMidasDepthImageProcessorInvocation } from 'features/controlAdapters/store/types'; diff --git a/invokeai/frontend/web/src/features/controlAdapters/components/processors/MlsdImageProcessor.tsx b/invokeai/frontend/web/src/features/controlAdapters/components/processors/MlsdImageProcessor.tsx index 1091d5698d..5138b2168b 100644 --- a/invokeai/frontend/web/src/features/controlAdapters/components/processors/MlsdImageProcessor.tsx +++ b/invokeai/frontend/web/src/features/controlAdapters/components/processors/MlsdImageProcessor.tsx @@ -1,9 +1,4 @@ -import { - CompositeNumberInput, - CompositeSlider, - FormControl, - FormLabel, -} from '@invoke-ai/ui-library'; +import { CompositeNumberInput, CompositeSlider, FormControl, FormLabel } from '@invoke-ai/ui-library'; import { useProcessorNodeChanged } from 'features/controlAdapters/components/hooks/useProcessorNodeChanged'; import { CONTROLNET_PROCESSORS } from 'features/controlAdapters/store/constants'; import type { RequiredMlsdImageProcessorInvocation } from 'features/controlAdapters/store/types'; @@ -12,8 +7,7 @@ import { useTranslation } from 'react-i18next'; import ProcessorWrapper from './common/ProcessorWrapper'; -const DEFAULTS = CONTROLNET_PROCESSORS.mlsd_image_processor - .default as RequiredMlsdImageProcessorInvocation; +const DEFAULTS = CONTROLNET_PROCESSORS.mlsd_image_processor.default as RequiredMlsdImageProcessorInvocation; type Props = { controlNetId: string; diff --git a/invokeai/frontend/web/src/features/controlAdapters/components/processors/NormalBaeProcessor.tsx b/invokeai/frontend/web/src/features/controlAdapters/components/processors/NormalBaeProcessor.tsx index b1709d3bf1..d05f600eaf 100644 --- a/invokeai/frontend/web/src/features/controlAdapters/components/processors/NormalBaeProcessor.tsx +++ b/invokeai/frontend/web/src/features/controlAdapters/components/processors/NormalBaeProcessor.tsx @@ -1,9 +1,4 @@ -import { - CompositeNumberInput, - CompositeSlider, - FormControl, - FormLabel, -} from '@invoke-ai/ui-library'; +import { CompositeNumberInput, CompositeSlider, FormControl, FormLabel } from '@invoke-ai/ui-library'; import { useProcessorNodeChanged } from 'features/controlAdapters/components/hooks/useProcessorNodeChanged'; import { CONTROLNET_PROCESSORS } from 'features/controlAdapters/store/constants'; import type { RequiredNormalbaeImageProcessorInvocation } from 'features/controlAdapters/store/types'; @@ -12,8 +7,7 @@ import { useTranslation } from 'react-i18next'; import ProcessorWrapper from './common/ProcessorWrapper'; -const DEFAULTS = CONTROLNET_PROCESSORS.normalbae_image_processor - .default as RequiredNormalbaeImageProcessorInvocation; +const DEFAULTS = CONTROLNET_PROCESSORS.normalbae_image_processor.default as RequiredNormalbaeImageProcessorInvocation; type Props = { controlNetId: string; diff --git a/invokeai/frontend/web/src/features/controlAdapters/components/processors/OpenposeProcessor.tsx b/invokeai/frontend/web/src/features/controlAdapters/components/processors/OpenposeProcessor.tsx index 6e27deb291..bdc2e633ae 100644 --- a/invokeai/frontend/web/src/features/controlAdapters/components/processors/OpenposeProcessor.tsx +++ b/invokeai/frontend/web/src/features/controlAdapters/components/processors/OpenposeProcessor.tsx @@ -1,10 +1,4 @@ -import { - CompositeNumberInput, - CompositeSlider, - FormControl, - FormLabel, - Switch, -} from '@invoke-ai/ui-library'; +import { CompositeNumberInput, CompositeSlider, FormControl, FormLabel, Switch } from '@invoke-ai/ui-library'; import { useProcessorNodeChanged } from 'features/controlAdapters/components/hooks/useProcessorNodeChanged'; import { CONTROLNET_PROCESSORS } from 'features/controlAdapters/store/constants'; import type { RequiredOpenposeImageProcessorInvocation } from 'features/controlAdapters/store/types'; @@ -14,8 +8,7 @@ import { useTranslation } from 'react-i18next'; import ProcessorWrapper from './common/ProcessorWrapper'; -const DEFAULTS = CONTROLNET_PROCESSORS.openpose_image_processor - .default as RequiredOpenposeImageProcessorInvocation; +const DEFAULTS = CONTROLNET_PROCESSORS.openpose_image_processor.default as RequiredOpenposeImageProcessorInvocation; type Props = { controlNetId: string; diff --git a/invokeai/frontend/web/src/features/controlAdapters/components/processors/PidiProcessor.tsx b/invokeai/frontend/web/src/features/controlAdapters/components/processors/PidiProcessor.tsx index e723e876da..8948e8250d 100644 --- a/invokeai/frontend/web/src/features/controlAdapters/components/processors/PidiProcessor.tsx +++ b/invokeai/frontend/web/src/features/controlAdapters/components/processors/PidiProcessor.tsx @@ -1,10 +1,4 @@ -import { - CompositeNumberInput, - CompositeSlider, - FormControl, - FormLabel, - Switch, -} from '@invoke-ai/ui-library'; +import { CompositeNumberInput, CompositeSlider, FormControl, FormLabel, Switch } from '@invoke-ai/ui-library'; import { useProcessorNodeChanged } from 'features/controlAdapters/components/hooks/useProcessorNodeChanged'; import { CONTROLNET_PROCESSORS } from 'features/controlAdapters/store/constants'; import type { RequiredPidiImageProcessorInvocation } from 'features/controlAdapters/store/types'; @@ -14,8 +8,7 @@ import { useTranslation } from 'react-i18next'; import ProcessorWrapper from './common/ProcessorWrapper'; -const DEFAULTS = CONTROLNET_PROCESSORS.pidi_image_processor - .default as RequiredPidiImageProcessorInvocation; +const DEFAULTS = CONTROLNET_PROCESSORS.pidi_image_processor.default as RequiredPidiImageProcessorInvocation; type Props = { controlNetId: string; diff --git a/invokeai/frontend/web/src/features/controlAdapters/hooks/useAddControlAdapter.ts b/invokeai/frontend/web/src/features/controlAdapters/hooks/useAddControlAdapter.ts index c08adc7f6f..51b36968d2 100644 --- a/invokeai/frontend/web/src/features/controlAdapters/hooks/useAddControlAdapter.ts +++ b/invokeai/frontend/web/src/features/controlAdapters/hooks/useAddControlAdapter.ts @@ -13,9 +13,7 @@ export const useAddControlAdapter = (type: ControlAdapterType) => { const firstModel = useMemo(() => { // prefer to use a model that matches the base model - const firstCompatibleModel = models.filter((m) => - baseModel ? m.base_model === baseModel : true - )[0]; + const firstCompatibleModel = models.filter((m) => (baseModel ? m.base_model === baseModel : true))[0]; if (firstCompatibleModel) { return firstCompatibleModel; diff --git a/invokeai/frontend/web/src/features/controlAdapters/hooks/useControlAdapterControlImage.ts b/invokeai/frontend/web/src/features/controlAdapters/hooks/useControlAdapterControlImage.ts index 2ac85b960a..c8efdf9125 100644 --- a/invokeai/frontend/web/src/features/controlAdapters/hooks/useControlAdapterControlImage.ts +++ b/invokeai/frontend/web/src/features/controlAdapters/hooks/useControlAdapterControlImage.ts @@ -11,8 +11,7 @@ export const useControlAdapterControlImage = (id: string) => { () => createSelector( selectControlAdaptersSlice, - (controlAdapters) => - selectControlAdapterById(controlAdapters, id)?.controlImage + (controlAdapters) => selectControlAdapterById(controlAdapters, id)?.controlImage ), [id] ); diff --git a/invokeai/frontend/web/src/features/controlAdapters/hooks/useControlAdapterIsEnabled.ts b/invokeai/frontend/web/src/features/controlAdapters/hooks/useControlAdapterIsEnabled.ts index ba4e263f59..58bb956ce3 100644 --- a/invokeai/frontend/web/src/features/controlAdapters/hooks/useControlAdapterIsEnabled.ts +++ b/invokeai/frontend/web/src/features/controlAdapters/hooks/useControlAdapterIsEnabled.ts @@ -11,8 +11,7 @@ export const useControlAdapterIsEnabled = (id: string) => { () => createSelector( selectControlAdaptersSlice, - (controlAdapters) => - selectControlAdapterById(controlAdapters, id)?.isEnabled ?? false + (controlAdapters) => selectControlAdapterById(controlAdapters, id)?.isEnabled ?? false ), [id] ); diff --git a/invokeai/frontend/web/src/features/controlAdapters/hooks/useControlAdapterModel.ts b/invokeai/frontend/web/src/features/controlAdapters/hooks/useControlAdapterModel.ts index dd23c8ff44..1416c8c9f1 100644 --- a/invokeai/frontend/web/src/features/controlAdapters/hooks/useControlAdapterModel.ts +++ b/invokeai/frontend/web/src/features/controlAdapters/hooks/useControlAdapterModel.ts @@ -11,8 +11,7 @@ export const useControlAdapterModel = (id: string) => { () => createMemoizedSelector( selectControlAdaptersSlice, - (controlAdapters) => - selectControlAdapterById(controlAdapters, id)?.model + (controlAdapters) => selectControlAdapterById(controlAdapters, id)?.model ), [id] ); diff --git a/invokeai/frontend/web/src/features/controlAdapters/hooks/useControlAdapterModels.ts b/invokeai/frontend/web/src/features/controlAdapters/hooks/useControlAdapterModels.ts index 57da6ec6e8..dd23211b9b 100644 --- a/invokeai/frontend/web/src/features/controlAdapters/hooks/useControlAdapterModels.ts +++ b/invokeai/frontend/web/src/features/controlAdapters/hooks/useControlAdapterModels.ts @@ -12,27 +12,18 @@ import { export const useControlAdapterModels = (type?: ControlAdapterType) => { const { data: controlNetModelsData } = useGetControlNetModelsQuery(); const controlNetModels = useMemo( - () => - controlNetModelsData - ? controlNetModelsAdapterSelectors.selectAll(controlNetModelsData) - : [], + () => (controlNetModelsData ? controlNetModelsAdapterSelectors.selectAll(controlNetModelsData) : []), [controlNetModelsData] ); const { data: t2iAdapterModelsData } = useGetT2IAdapterModelsQuery(); const t2iAdapterModels = useMemo( - () => - t2iAdapterModelsData - ? t2iAdapterModelsAdapterSelectors.selectAll(t2iAdapterModelsData) - : [], + () => (t2iAdapterModelsData ? t2iAdapterModelsAdapterSelectors.selectAll(t2iAdapterModelsData) : []), [t2iAdapterModelsData] ); const { data: ipAdapterModelsData } = useGetIPAdapterModelsQuery(); const ipAdapterModels = useMemo( - () => - ipAdapterModelsData - ? ipAdapterModelsAdapterSelectors.selectAll(ipAdapterModelsData) - : [], + () => (ipAdapterModelsData ? ipAdapterModelsAdapterSelectors.selectAll(ipAdapterModelsData) : []), [ipAdapterModelsData] ); diff --git a/invokeai/frontend/web/src/features/controlAdapters/hooks/useControlAdapterProcessedControlImage.ts b/invokeai/frontend/web/src/features/controlAdapters/hooks/useControlAdapterProcessedControlImage.ts index d316ecb0a0..a02e1f9ed9 100644 --- a/invokeai/frontend/web/src/features/controlAdapters/hooks/useControlAdapterProcessedControlImage.ts +++ b/invokeai/frontend/web/src/features/controlAdapters/hooks/useControlAdapterProcessedControlImage.ts @@ -13,9 +13,7 @@ export const useControlAdapterProcessedControlImage = (id: string) => { createSelector(selectControlAdaptersSlice, (controlAdapters) => { const ca = selectControlAdapterById(controlAdapters, id); - return ca && isControlNetOrT2IAdapter(ca) - ? ca.processedControlImage - : undefined; + return ca && isControlNetOrT2IAdapter(ca) ? ca.processedControlImage : undefined; }), [id] ); diff --git a/invokeai/frontend/web/src/features/controlAdapters/hooks/useControlAdapterProcessorNode.ts b/invokeai/frontend/web/src/features/controlAdapters/hooks/useControlAdapterProcessorNode.ts index 6626374dd2..272af132a6 100644 --- a/invokeai/frontend/web/src/features/controlAdapters/hooks/useControlAdapterProcessorNode.ts +++ b/invokeai/frontend/web/src/features/controlAdapters/hooks/useControlAdapterProcessorNode.ts @@ -13,9 +13,7 @@ export const useControlAdapterProcessorNode = (id: string) => { createMemoizedSelector(selectControlAdaptersSlice, (controlAdapters) => { const ca = selectControlAdapterById(controlAdapters, id); - return ca && isControlNetOrT2IAdapter(ca) - ? ca.processorNode - : undefined; + return ca && isControlNetOrT2IAdapter(ca) ? ca.processorNode : undefined; }), [id] ); diff --git a/invokeai/frontend/web/src/features/controlAdapters/hooks/useControlAdapterProcessorType.ts b/invokeai/frontend/web/src/features/controlAdapters/hooks/useControlAdapterProcessorType.ts index b7b58aed8b..777bfc05b4 100644 --- a/invokeai/frontend/web/src/features/controlAdapters/hooks/useControlAdapterProcessorType.ts +++ b/invokeai/frontend/web/src/features/controlAdapters/hooks/useControlAdapterProcessorType.ts @@ -13,9 +13,7 @@ export const useControlAdapterProcessorType = (id: string) => { createSelector(selectControlAdaptersSlice, (controlAdapters) => { const ca = selectControlAdapterById(controlAdapters, id); - return ca && isControlNetOrT2IAdapter(ca) - ? ca.processorType - : undefined; + return ca && isControlNetOrT2IAdapter(ca) ? ca.processorType : undefined; }), [id] ); diff --git a/invokeai/frontend/web/src/features/controlAdapters/hooks/useControlAdapterWeight.ts b/invokeai/frontend/web/src/features/controlAdapters/hooks/useControlAdapterWeight.ts index 53f1074bd0..9e65993fde 100644 --- a/invokeai/frontend/web/src/features/controlAdapters/hooks/useControlAdapterWeight.ts +++ b/invokeai/frontend/web/src/features/controlAdapters/hooks/useControlAdapterWeight.ts @@ -11,8 +11,7 @@ export const useControlAdapterWeight = (id: string) => { () => createSelector( selectControlAdaptersSlice, - (controlAdapters) => - selectControlAdapterById(controlAdapters, id)?.weight + (controlAdapters) => selectControlAdapterById(controlAdapters, id)?.weight ), [id] ); diff --git a/invokeai/frontend/web/src/features/controlAdapters/store/constants.ts b/invokeai/frontend/web/src/features/controlAdapters/store/constants.ts index ddebffcfde..61af98afc4 100644 --- a/invokeai/frontend/web/src/features/controlAdapters/store/constants.ts +++ b/invokeai/frontend/web/src/features/controlAdapters/store/constants.ts @@ -1,9 +1,6 @@ import i18n from 'i18next'; -import type { - ControlAdapterProcessorType, - RequiredControlAdapterProcessorNode, -} from './types'; +import type { ControlAdapterProcessorType, RequiredControlAdapterProcessorNode } from './types'; type ControlNetProcessorsDict = Record< ControlAdapterProcessorType, diff --git a/invokeai/frontend/web/src/features/controlAdapters/store/controlAdaptersPersistDenylist.ts b/invokeai/frontend/web/src/features/controlAdapters/store/controlAdaptersPersistDenylist.ts index 0dfd46889f..ff8fcd1594 100644 --- a/invokeai/frontend/web/src/features/controlAdapters/store/controlAdaptersPersistDenylist.ts +++ b/invokeai/frontend/web/src/features/controlAdapters/store/controlAdaptersPersistDenylist.ts @@ -3,6 +3,4 @@ import type { ControlAdaptersState } from './types'; /** * ControlNet slice persist denylist */ -export const controlAdaptersPersistDenylist: (keyof ControlAdaptersState)[] = [ - 'pendingControlImages', -]; +export const controlAdaptersPersistDenylist: (keyof ControlAdaptersState)[] = ['pendingControlImages']; diff --git a/invokeai/frontend/web/src/features/controlAdapters/store/controlAdaptersSlice.ts b/invokeai/frontend/web/src/features/controlAdapters/store/controlAdaptersSlice.ts index 5e856a01eb..fd9a70ef57 100644 --- a/invokeai/frontend/web/src/features/controlAdapters/store/controlAdaptersSlice.ts +++ b/invokeai/frontend/web/src/features/controlAdapters/store/controlAdaptersSlice.ts @@ -28,20 +28,12 @@ import type { ResizeMode, T2IAdapterConfig, } from './types'; -import { - isControlNet, - isControlNetOrT2IAdapter, - isIPAdapter, - isT2IAdapter, -} from './types'; +import { isControlNet, isControlNetOrT2IAdapter, isIPAdapter, isT2IAdapter } from './types'; export const caAdapter = createEntityAdapter({ selectId: (ca) => ca.id, }); -export const caAdapterSelectors = caAdapter.getSelectors( - undefined, - getSelectorsOptions -); +export const caAdapterSelectors = caAdapter.getSelectors(undefined, getSelectorsOptions); export const { selectById: selectControlAdapterById, @@ -51,14 +43,13 @@ export const { selectTotal: selectControlAdapterTotal, } = caAdapterSelectors; -export const initialControlAdaptersState: ControlAdaptersState = - caAdapter.getInitialState<{ - _version: 1; - pendingControlImages: string[]; - }>({ - _version: 1, - pendingControlImages: [], - }); +export const initialControlAdaptersState: ControlAdaptersState = caAdapter.getInitialState<{ + _version: 1; + pendingControlImages: string[]; +}>({ + _version: 1, + pendingControlImages: [], +}); export const selectAllControlNets = (controlAdapters: ControlAdaptersState) => selectControlAdapterAll(controlAdapters).filter(isControlNet); @@ -70,8 +61,7 @@ export const selectValidControlNets = (controlAdapters: ControlAdaptersState) => (ca) => ca.isEnabled && ca.model && - (Boolean(ca.processedControlImage) || - (ca.processorType === 'none' && Boolean(ca.controlImage))) + (Boolean(ca.processedControlImage) || (ca.processorType === 'none' && Boolean(ca.controlImage))) ); export const selectAllIPAdapters = (controlAdapters: ControlAdaptersState) => @@ -92,8 +82,7 @@ export const selectValidT2IAdapters = (controlAdapters: ControlAdaptersState) => (ca) => ca.isEnabled && ca.model && - (Boolean(ca.processedControlImage) || - (ca.processorType === 'none' && Boolean(ca.controlImage))) + (Boolean(ca.processedControlImage) || (ca.processorType === 'none' && Boolean(ca.controlImage))) ); export const controlAdaptersSlice = createSlice({ @@ -112,20 +101,11 @@ export const controlAdaptersSlice = createSlice({ const { id, type, overrides } = action.payload; caAdapter.addOne(state, buildControlAdapter(id, type, overrides)); }, - prepare: ({ - type, - overrides, - }: { - type: ControlAdapterType; - overrides?: Partial; - }) => { + prepare: ({ type, overrides }: { type: ControlAdapterType; overrides?: Partial }) => { return { payload: { id: uuidv4(), type, overrides } }; }, }, - controlAdapterRecalled: ( - state, - action: PayloadAction - ) => { + controlAdapterRecalled: (state, action: PayloadAction) => { caAdapter.addOne(state, action.payload); }, controlAdapterDuplicated: { @@ -161,25 +141,16 @@ export const controlAdaptersSlice = createSlice({ }> ) => { const { id, type, controlImage } = action.payload; - caAdapter.addOne( - state, - buildControlAdapter(id, type, { controlImage }) - ); + caAdapter.addOne(state, buildControlAdapter(id, type, { controlImage })); }, - prepare: (payload: { - type: ControlAdapterType; - controlImage: string; - }) => { + prepare: (payload: { type: ControlAdapterType; controlImage: string }) => { return { payload: { ...payload, id: uuidv4() } }; }, }, controlAdapterRemoved: (state, action: PayloadAction<{ id: string }>) => { caAdapter.removeOne(state, action.payload.id); }, - controlAdapterIsEnabledChanged: ( - state, - action: PayloadAction<{ id: string; isEnabled: boolean }> - ) => { + controlAdapterIsEnabledChanged: (state, action: PayloadAction<{ id: string; isEnabled: boolean }>) => { const { id, isEnabled } = action.payload; caAdapter.updateOne(state, { id, changes: { isEnabled } }); }, @@ -201,11 +172,7 @@ export const controlAdaptersSlice = createSlice({ changes: { controlImage, processedControlImage: null }, }); - if ( - controlImage !== null && - isControlNetOrT2IAdapter(ca) && - ca.processorType !== 'none' - ) { + if (controlImage !== null && isControlNetOrT2IAdapter(ca) && ca.processorType !== 'none') { state.pendingControlImages.push(id); } }, @@ -233,14 +200,9 @@ export const controlAdaptersSlice = createSlice({ }, }); - state.pendingControlImages = state.pendingControlImages.filter( - (pendingId) => pendingId !== id - ); + state.pendingControlImages = state.pendingControlImages.filter((pendingId) => pendingId !== id); }, - controlAdapterModelCleared: ( - state, - action: PayloadAction<{ id: string }> - ) => { + controlAdapterModelCleared: (state, action: PayloadAction<{ id: string }>) => { caAdapter.updateOne(state, { id: action.payload.id, changes: { model: null }, @@ -250,10 +212,7 @@ export const controlAdaptersSlice = createSlice({ state, action: PayloadAction<{ id: string; - model: - | ParameterControlNetModel - | ParameterT2IAdapterModel - | ParameterIPAdapterModel; + model: ParameterControlNetModel | ParameterT2IAdapterModel | ParameterIPAdapterModel; }> ) => { const { id, model } = action.payload; @@ -278,8 +237,7 @@ export const controlAdaptersSlice = createSlice({ for (const modelSubstring in CONTROLADAPTER_MODEL_DEFAULT_PROCESSORS) { if (model.model_name.includes(modelSubstring)) { - processorType = - CONTROLADAPTER_MODEL_DEFAULT_PROCESSORS[modelSubstring]; + processorType = CONTROLADAPTER_MODEL_DEFAULT_PROCESSORS[modelSubstring]; break; } } @@ -290,37 +248,24 @@ export const controlAdaptersSlice = createSlice({ .default as RequiredControlAdapterProcessorNode; } else { update.changes.processorType = 'none'; - update.changes.processorNode = CONTROLNET_PROCESSORS.none - .default as RequiredControlAdapterProcessorNode; + update.changes.processorNode = CONTROLNET_PROCESSORS.none.default as RequiredControlAdapterProcessorNode; } caAdapter.updateOne(state, update); }, - controlAdapterWeightChanged: ( - state, - action: PayloadAction<{ id: string; weight: number }> - ) => { + controlAdapterWeightChanged: (state, action: PayloadAction<{ id: string; weight: number }>) => { const { id, weight } = action.payload; caAdapter.updateOne(state, { id, changes: { weight } }); }, - controlAdapterBeginStepPctChanged: ( - state, - action: PayloadAction<{ id: string; beginStepPct: number }> - ) => { + controlAdapterBeginStepPctChanged: (state, action: PayloadAction<{ id: string; beginStepPct: number }>) => { const { id, beginStepPct } = action.payload; caAdapter.updateOne(state, { id, changes: { beginStepPct } }); }, - controlAdapterEndStepPctChanged: ( - state, - action: PayloadAction<{ id: string; endStepPct: number }> - ) => { + controlAdapterEndStepPctChanged: (state, action: PayloadAction<{ id: string; endStepPct: number }>) => { const { id, endStepPct } = action.payload; caAdapter.updateOne(state, { id, changes: { endStepPct } }); }, - controlAdapterControlModeChanged: ( - state, - action: PayloadAction<{ id: string; controlMode: ControlMode }> - ) => { + controlAdapterControlModeChanged: (state, action: PayloadAction<{ id: string; controlMode: ControlMode }>) => { const { id, controlMode } = action.payload; const cn = selectControlAdapterById(state, id); if (!cn || !isControlNet(cn)) { @@ -415,8 +360,7 @@ export const controlAdaptersSlice = createSlice({ for (const modelSubstring in CONTROLADAPTER_MODEL_DEFAULT_PROCESSORS) { if (cn.model?.model_name.includes(modelSubstring)) { - processorType = - CONTROLADAPTER_MODEL_DEFAULT_PROCESSORS[modelSubstring]; + processorType = CONTROLADAPTER_MODEL_DEFAULT_PROCESSORS[modelSubstring]; break; } } @@ -427,8 +371,7 @@ export const controlAdaptersSlice = createSlice({ .default as RequiredControlAdapterProcessorNode; } else { update.changes.processorType = 'none'; - update.changes.processorNode = CONTROLNET_PROCESSORS.none - .default as RequiredControlAdapterProcessorNode; + update.changes.processorNode = CONTROLNET_PROCESSORS.none.default as RequiredControlAdapterProcessorNode; } } @@ -448,9 +391,7 @@ export const controlAdaptersSlice = createSlice({ return; } if (cn.controlImage !== null) { - state.pendingControlImages = uniq( - state.pendingControlImages.concat(action.payload.id) - ); + state.pendingControlImages = uniq(state.pendingControlImages.concat(action.payload.id)); } }); @@ -491,8 +432,7 @@ export const isAnyControlAdapterAdded = isAnyOf( controlAdapterRecalled ); -export const selectControlAdaptersSlice = (state: RootState) => - state.controlAdapters; +export const selectControlAdaptersSlice = (state: RootState) => state.controlAdapters; /* eslint-disable-next-line @typescript-eslint/no-explicit-any */ export const migrateControlAdaptersState = (state: any): any => { diff --git a/invokeai/frontend/web/src/features/controlAdapters/store/types.ts b/invokeai/frontend/web/src/features/controlAdapters/store/types.ts index 87366a443d..86aff63155 100644 --- a/invokeai/frontend/web/src/features/controlAdapters/store/types.ts +++ b/invokeai/frontend/web/src/features/controlAdapters/store/types.ts @@ -47,9 +47,7 @@ export type ControlAdapterProcessorNode = /** * Any ControlNet processor type */ -export type ControlAdapterProcessorType = NonNullable< - ControlAdapterProcessorNode['type'] | 'none' ->; +export type ControlAdapterProcessorType = NonNullable; /** * The Canny processor node, with parameters flagged as required @@ -85,9 +83,8 @@ export type RequiredDepthAnythingImageProcessorInvocation = O.Required< export const zDepthAnythingModelSize = z.enum(['large', 'base', 'small']); export type DepthAnythingModelSize = z.infer; -export const isDepthAnythingModelSize = ( - v: unknown -): v is DepthAnythingModelSize => zDepthAnythingModelSize.safeParse(v).success; +export const isDepthAnythingModelSize = (v: unknown): v is DepthAnythingModelSize => + zDepthAnythingModelSize.safeParse(v).success; /** * The HED processor node, with parameters flagged as required @@ -164,10 +161,7 @@ export type RequiredPidiImageProcessorInvocation = O.Required< /** * The ZoeDepth processor node, with parameters flagged as required */ -export type RequiredZoeDepthImageProcessorInvocation = O.Required< - ZoeDepthImageProcessorInvocation, - 'type' ->; +export type RequiredZoeDepthImageProcessorInvocation = O.Required; /** * Any ControlNet Processor node, with its parameters flagged as required @@ -195,9 +189,7 @@ export type RequiredControlAdapterProcessorNode = /** * Type guard for CannyImageProcessorInvocation */ -export const isCannyImageProcessorInvocation = ( - obj: unknown -): obj is CannyImageProcessorInvocation => { +export const isCannyImageProcessorInvocation = (obj: unknown): obj is CannyImageProcessorInvocation => { if (isObject(obj) && 'type' in obj && obj.type === 'canny_image_processor') { return true; } @@ -207,14 +199,8 @@ export const isCannyImageProcessorInvocation = ( /** * Type guard for ColorMapImageProcessorInvocation */ -export const isColorMapImageProcessorInvocation = ( - obj: unknown -): obj is ColorMapImageProcessorInvocation => { - if ( - isObject(obj) && - 'type' in obj && - obj.type === 'color_map_image_processor' - ) { +export const isColorMapImageProcessorInvocation = (obj: unknown): obj is ColorMapImageProcessorInvocation => { + if (isObject(obj) && 'type' in obj && obj.type === 'color_map_image_processor') { return true; } return false; @@ -226,11 +212,7 @@ export const isColorMapImageProcessorInvocation = ( export const isContentShuffleImageProcessorInvocation = ( obj: unknown ): obj is ContentShuffleImageProcessorInvocation => { - if ( - isObject(obj) && - 'type' in obj && - obj.type === 'content_shuffle_image_processor' - ) { + if (isObject(obj) && 'type' in obj && obj.type === 'content_shuffle_image_processor') { return true; } return false; @@ -239,14 +221,8 @@ export const isContentShuffleImageProcessorInvocation = ( /** * Type guard for DepthAnythingImageProcessorInvocation */ -export const isDepthAnythingImageProcessorInvocation = ( - obj: unknown -): obj is DepthAnythingImageProcessorInvocation => { - if ( - isObject(obj) && - 'type' in obj && - obj.type === 'depth_anything_image_processor' - ) { +export const isDepthAnythingImageProcessorInvocation = (obj: unknown): obj is DepthAnythingImageProcessorInvocation => { + if (isObject(obj) && 'type' in obj && obj.type === 'depth_anything_image_processor') { return true; } return false; @@ -255,9 +231,7 @@ export const isDepthAnythingImageProcessorInvocation = ( /** * Type guard for HedImageprocessorInvocation */ -export const isHedImageprocessorInvocation = ( - obj: unknown -): obj is HedImageProcessorInvocation => { +export const isHedImageprocessorInvocation = (obj: unknown): obj is HedImageProcessorInvocation => { if (isObject(obj) && 'type' in obj && obj.type === 'hed_image_processor') { return true; } @@ -267,14 +241,8 @@ export const isHedImageprocessorInvocation = ( /** * Type guard for LineartAnimeImageProcessorInvocation */ -export const isLineartAnimeImageProcessorInvocation = ( - obj: unknown -): obj is LineartAnimeImageProcessorInvocation => { - if ( - isObject(obj) && - 'type' in obj && - obj.type === 'lineart_anime_image_processor' - ) { +export const isLineartAnimeImageProcessorInvocation = (obj: unknown): obj is LineartAnimeImageProcessorInvocation => { + if (isObject(obj) && 'type' in obj && obj.type === 'lineart_anime_image_processor') { return true; } return false; @@ -283,14 +251,8 @@ export const isLineartAnimeImageProcessorInvocation = ( /** * Type guard for LineartImageProcessorInvocation */ -export const isLineartImageProcessorInvocation = ( - obj: unknown -): obj is LineartImageProcessorInvocation => { - if ( - isObject(obj) && - 'type' in obj && - obj.type === 'lineart_image_processor' - ) { +export const isLineartImageProcessorInvocation = (obj: unknown): obj is LineartImageProcessorInvocation => { + if (isObject(obj) && 'type' in obj && obj.type === 'lineart_image_processor') { return true; } return false; @@ -299,14 +261,8 @@ export const isLineartImageProcessorInvocation = ( /** * Type guard for MediapipeFaceProcessorInvocation */ -export const isMediapipeFaceProcessorInvocation = ( - obj: unknown -): obj is MediapipeFaceProcessorInvocation => { - if ( - isObject(obj) && - 'type' in obj && - obj.type === 'mediapipe_face_processor' - ) { +export const isMediapipeFaceProcessorInvocation = (obj: unknown): obj is MediapipeFaceProcessorInvocation => { + if (isObject(obj) && 'type' in obj && obj.type === 'mediapipe_face_processor') { return true; } return false; @@ -315,14 +271,8 @@ export const isMediapipeFaceProcessorInvocation = ( /** * Type guard for MidasDepthImageProcessorInvocation */ -export const isMidasDepthImageProcessorInvocation = ( - obj: unknown -): obj is MidasDepthImageProcessorInvocation => { - if ( - isObject(obj) && - 'type' in obj && - obj.type === 'midas_depth_image_processor' - ) { +export const isMidasDepthImageProcessorInvocation = (obj: unknown): obj is MidasDepthImageProcessorInvocation => { + if (isObject(obj) && 'type' in obj && obj.type === 'midas_depth_image_processor') { return true; } return false; @@ -331,9 +281,7 @@ export const isMidasDepthImageProcessorInvocation = ( /** * Type guard for MlsdImageProcessorInvocation */ -export const isMlsdImageProcessorInvocation = ( - obj: unknown -): obj is MlsdImageProcessorInvocation => { +export const isMlsdImageProcessorInvocation = (obj: unknown): obj is MlsdImageProcessorInvocation => { if (isObject(obj) && 'type' in obj && obj.type === 'mlsd_image_processor') { return true; } @@ -343,14 +291,8 @@ export const isMlsdImageProcessorInvocation = ( /** * Type guard for NormalbaeImageProcessorInvocation */ -export const isNormalbaeImageProcessorInvocation = ( - obj: unknown -): obj is NormalbaeImageProcessorInvocation => { - if ( - isObject(obj) && - 'type' in obj && - obj.type === 'normalbae_image_processor' - ) { +export const isNormalbaeImageProcessorInvocation = (obj: unknown): obj is NormalbaeImageProcessorInvocation => { + if (isObject(obj) && 'type' in obj && obj.type === 'normalbae_image_processor') { return true; } return false; @@ -359,14 +301,8 @@ export const isNormalbaeImageProcessorInvocation = ( /** * Type guard for OpenposeImageProcessorInvocation */ -export const isOpenposeImageProcessorInvocation = ( - obj: unknown -): obj is OpenposeImageProcessorInvocation => { - if ( - isObject(obj) && - 'type' in obj && - obj.type === 'openpose_image_processor' - ) { +export const isOpenposeImageProcessorInvocation = (obj: unknown): obj is OpenposeImageProcessorInvocation => { + if (isObject(obj) && 'type' in obj && obj.type === 'openpose_image_processor') { return true; } return false; @@ -375,9 +311,7 @@ export const isOpenposeImageProcessorInvocation = ( /** * Type guard for PidiImageProcessorInvocation */ -export const isPidiImageProcessorInvocation = ( - obj: unknown -): obj is PidiImageProcessorInvocation => { +export const isPidiImageProcessorInvocation = (obj: unknown): obj is PidiImageProcessorInvocation => { if (isObject(obj) && 'type' in obj && obj.type === 'pidi_image_processor') { return true; } @@ -387,32 +321,18 @@ export const isPidiImageProcessorInvocation = ( /** * Type guard for ZoeDepthImageProcessorInvocation */ -export const isZoeDepthImageProcessorInvocation = ( - obj: unknown -): obj is ZoeDepthImageProcessorInvocation => { - if ( - isObject(obj) && - 'type' in obj && - obj.type === 'zoe_depth_image_processor' - ) { +export const isZoeDepthImageProcessorInvocation = (obj: unknown): obj is ZoeDepthImageProcessorInvocation => { + if (isObject(obj) && 'type' in obj && obj.type === 'zoe_depth_image_processor') { return true; } return false; }; -export type ControlMode = NonNullable< - components['schemas']['ControlNetInvocation']['control_mode'] ->; +export type ControlMode = NonNullable; -export const zResizeMode = z.enum([ - 'just_resize', - 'crop_resize', - 'fill_resize', - 'just_resize_simple', -]); +export const zResizeMode = z.enum(['just_resize', 'crop_resize', 'fill_resize', 'just_resize_simple']); export type ResizeMode = z.infer; -export const isResizeMode = (v: unknown): v is ResizeMode => - zResizeMode.safeParse(v).success; +export const isResizeMode = (v: unknown): v is ResizeMode => zResizeMode.safeParse(v).success; export type ControlNetConfig = { type: 'controlnet'; @@ -458,10 +378,7 @@ export type IPAdapterConfig = { endStepPct: number; }; -export type ControlAdapterConfig = - | ControlNetConfig - | IPAdapterConfig - | T2IAdapterConfig; +export type ControlAdapterConfig = ControlNetConfig | IPAdapterConfig | T2IAdapterConfig; export type ControlAdapterType = ControlAdapterConfig['type']; @@ -469,21 +386,15 @@ export type ControlAdaptersState = EntityState & { pendingControlImages: string[]; }; -export const isControlNet = ( - controlAdapter: ControlAdapterConfig -): controlAdapter is ControlNetConfig => { +export const isControlNet = (controlAdapter: ControlAdapterConfig): controlAdapter is ControlNetConfig => { return controlAdapter.type === 'controlnet'; }; -export const isIPAdapter = ( - controlAdapter: ControlAdapterConfig -): controlAdapter is IPAdapterConfig => { +export const isIPAdapter = (controlAdapter: ControlAdapterConfig): controlAdapter is IPAdapterConfig => { return controlAdapter.type === 'ip_adapter'; }; -export const isT2IAdapter = ( - controlAdapter: ControlAdapterConfig -): controlAdapter is T2IAdapterConfig => { +export const isT2IAdapter = (controlAdapter: ControlAdapterConfig): controlAdapter is T2IAdapterConfig => { return controlAdapter.type === 't2i_adapter'; }; diff --git a/invokeai/frontend/web/src/features/controlAdapters/util/buildControlAdapter.ts b/invokeai/frontend/web/src/features/controlAdapters/util/buildControlAdapter.ts index fb8a019570..34803b3de3 100644 --- a/invokeai/frontend/web/src/features/controlAdapters/util/buildControlAdapter.ts +++ b/invokeai/frontend/web/src/features/controlAdapters/util/buildControlAdapter.ts @@ -21,8 +21,7 @@ export const initialControlNet: Omit = { controlImage: null, processedControlImage: null, processorType: 'canny_image_processor', - processorNode: CONTROLNET_PROCESSORS.canny_image_processor - .default as RequiredCannyImageProcessorInvocation, + processorNode: CONTROLNET_PROCESSORS.canny_image_processor.default as RequiredCannyImageProcessorInvocation, shouldAutoConfig: true, }; @@ -37,8 +36,7 @@ export const initialT2IAdapter: Omit = { controlImage: null, processedControlImage: null, processorType: 'canny_image_processor', - processorNode: CONTROLNET_PROCESSORS.canny_image_processor - .default as RequiredCannyImageProcessorInvocation, + processorNode: CONTROLNET_PROCESSORS.canny_image_processor.default as RequiredCannyImageProcessorInvocation, shouldAutoConfig: true, }; diff --git a/invokeai/frontend/web/src/features/deleteImageModal/components/DeleteImageModal.tsx b/invokeai/frontend/web/src/features/deleteImageModal/components/DeleteImageModal.tsx index 2909559975..5783fe4ffc 100644 --- a/invokeai/frontend/web/src/features/deleteImageModal/components/DeleteImageModal.tsx +++ b/invokeai/frontend/web/src/features/deleteImageModal/components/DeleteImageModal.tsx @@ -1,21 +1,10 @@ -import { - ConfirmationAlertDialog, - Divider, - Flex, - FormControl, - FormLabel, - Switch, - Text, -} from '@invoke-ai/ui-library'; +import { ConfirmationAlertDialog, Divider, Flex, FormControl, FormLabel, Switch, Text } from '@invoke-ai/ui-library'; import { createMemoizedSelector } from 'app/store/createMemoizedSelector'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import { selectCanvasSlice } from 'features/canvas/store/canvasSlice'; import { selectControlAdaptersSlice } from 'features/controlAdapters/store/controlAdaptersSlice'; import { imageDeletionConfirmed } from 'features/deleteImageModal/store/actions'; -import { - getImageUsage, - selectImageUsage, -} from 'features/deleteImageModal/store/selectors'; +import { getImageUsage, selectImageUsage } from 'features/deleteImageModal/store/selectors'; import { imageDeletionCanceled, isModalOpenChanged, @@ -41,14 +30,7 @@ const selectImageUsages = createMemoizedSelector( selectControlAdaptersSlice, selectImageUsage, ], - ( - deleteImageModal, - generation, - canvas, - nodes, - controlAdapters, - imagesUsage - ) => { + (deleteImageModal, generation, canvas, nodes, controlAdapters, imagesUsage) => { const { imagesToDelete } = deleteImageModal; const allImageUsage = (imagesToDelete ?? []).map(({ image_name }) => @@ -73,19 +55,13 @@ const selectImageUsages = createMemoizedSelector( const DeleteImageModal = () => { const dispatch = useAppDispatch(); const { t } = useTranslation(); - const shouldConfirmOnDelete = useAppSelector( - (s) => s.system.shouldConfirmOnDelete - ); - const canRestoreDeletedImagesFromBin = useAppSelector( - (s) => s.config.canRestoreDeletedImagesFromBin - ); + const shouldConfirmOnDelete = useAppSelector((s) => s.system.shouldConfirmOnDelete); + const canRestoreDeletedImagesFromBin = useAppSelector((s) => s.config.canRestoreDeletedImagesFromBin); const isModalOpen = useAppSelector((s) => s.deleteImageModal.isModalOpen); - const { imagesToDelete, imagesUsage, imageUsageSummary } = - useAppSelector(selectImageUsages); + const { imagesToDelete, imagesUsage, imageUsageSummary } = useAppSelector(selectImageUsages); const handleChangeShouldConfirmOnDelete = useCallback( - (e: ChangeEvent) => - dispatch(setShouldConfirmOnDelete(!e.target.checked)), + (e: ChangeEvent) => dispatch(setShouldConfirmOnDelete(!e.target.checked)), [dispatch] ); @@ -99,9 +75,7 @@ const DeleteImageModal = () => { return; } dispatch(imageDeletionCanceled()); - dispatch( - imageDeletionConfirmed({ imageDTOs: imagesToDelete, imagesUsage }) - ); + dispatch(imageDeletionConfirmed({ imageDTOs: imagesToDelete, imagesUsage })); }, [dispatch, imagesToDelete, imagesUsage]); return ( @@ -116,18 +90,11 @@ const DeleteImageModal = () => { - - {canRestoreDeletedImagesFromBin - ? t('gallery.deleteImageBin') - : t('gallery.deleteImagePermanent')} - + {canRestoreDeletedImagesFromBin ? t('gallery.deleteImageBin') : t('gallery.deleteImagePermanent')} {t('common.areYouSure')} {t('common.dontAskMeAgain')} - + diff --git a/invokeai/frontend/web/src/features/deleteImageModal/components/ImageUsageMessage.tsx b/invokeai/frontend/web/src/features/deleteImageModal/components/ImageUsageMessage.tsx index 756582c287..5a6856f346 100644 --- a/invokeai/frontend/web/src/features/deleteImageModal/components/ImageUsageMessage.tsx +++ b/invokeai/frontend/web/src/features/deleteImageModal/components/ImageUsageMessage.tsx @@ -29,18 +29,10 @@ const ImageUsageMessage = (props: Props) => { <> {topMessage} - {imageUsage.isInitialImage && ( - {t('common.img2img')} - )} - {imageUsage.isCanvasImage && ( - {t('common.unifiedCanvas')} - )} - {imageUsage.isControlImage && ( - {t('common.controlNet')} - )} - {imageUsage.isNodesImage && ( - {t('common.nodeEditor')} - )} + {imageUsage.isInitialImage && {t('common.img2img')}} + {imageUsage.isCanvasImage && {t('common.unifiedCanvas')}} + {imageUsage.isControlImage && {t('common.controlNet')}} + {imageUsage.isNodesImage && {t('common.nodeEditor')}} {bottomMessage} diff --git a/invokeai/frontend/web/src/features/deleteImageModal/store/selectors.ts b/invokeai/frontend/web/src/features/deleteImageModal/store/selectors.ts index 24192647fc..f54f9a0dbb 100644 --- a/invokeai/frontend/web/src/features/deleteImageModal/store/selectors.ts +++ b/invokeai/frontend/web/src/features/deleteImageModal/store/selectors.ts @@ -27,23 +27,17 @@ export const getImageUsage = ( ) => { const isInitialImage = generation.initialImage?.imageName === image_name; - const isCanvasImage = canvas.layerState.objects.some( - (obj) => obj.kind === 'image' && obj.imageName === image_name - ); + const isCanvasImage = canvas.layerState.objects.some((obj) => obj.kind === 'image' && obj.imageName === image_name); const isNodesImage = nodes.nodes.filter(isInvocationNode).some((node) => { return some( node.data.inputs, - (input) => - isImageFieldInputInstance(input) && - input.value?.image_name === image_name + (input) => isImageFieldInputInstance(input) && input.value?.image_name === image_name ); }); const isControlImage = selectControlAdapterAll(controlAdapters).some( - (ca) => - ca.controlImage === image_name || - (isControlNetOrT2IAdapter(ca) && ca.processedControlImage === image_name) + (ca) => ca.controlImage === image_name || (isControlNetOrT2IAdapter(ca) && ca.processedControlImage === image_name) ); const imageUsage: ImageUsage = { diff --git a/invokeai/frontend/web/src/features/deleteImageModal/store/slice.ts b/invokeai/frontend/web/src/features/deleteImageModal/store/slice.ts index 03d1901d99..268602c350 100644 --- a/invokeai/frontend/web/src/features/deleteImageModal/store/slice.ts +++ b/invokeai/frontend/web/src/features/deleteImageModal/store/slice.ts @@ -22,13 +22,8 @@ const deleteImageModal = createSlice({ }, }); -export const { - isModalOpenChanged, - imagesToDeleteSelected, - imageDeletionCanceled, -} = deleteImageModal.actions; +export const { isModalOpenChanged, imagesToDeleteSelected, imageDeletionCanceled } = deleteImageModal.actions; export default deleteImageModal.reducer; -export const selectDeleteImageModalSlice = (state: RootState) => - state.deleteImageModal; +export const selectDeleteImageModalSlice = (state: RootState) => state.deleteImageModal; diff --git a/invokeai/frontend/web/src/features/dnd/components/AppDndContext.tsx b/invokeai/frontend/web/src/features/dnd/components/AppDndContext.tsx index 0fe069f68a..f800e5c869 100644 --- a/invokeai/frontend/web/src/features/dnd/components/AppDndContext.tsx +++ b/invokeai/frontend/web/src/features/dnd/components/AppDndContext.tsx @@ -4,11 +4,7 @@ import { dndDropped } from 'app/store/middleware/listenerMiddleware/listeners/im import { useAppDispatch } from 'app/store/storeHooks'; import { parseify } from 'common/util/serialize'; import DndOverlay from 'features/dnd/components/DndOverlay'; -import type { - DragEndEvent, - DragStartEvent, - TypesafeDraggableData, -} from 'features/dnd/types'; +import type { DragEndEvent, DragStartEvent, TypesafeDraggableData } from 'features/dnd/types'; import { customPointerWithin } from 'features/dnd/util/customPointerWithin'; import type { PropsWithChildren } from 'react'; import { memo, useCallback, useState } from 'react'; @@ -16,18 +12,14 @@ import { memo, useCallback, useState } from 'react'; import { DndContextTypesafe } from './DndContextTypesafe'; const AppDndContext = (props: PropsWithChildren) => { - const [activeDragData, setActiveDragData] = - useState(null); + const [activeDragData, setActiveDragData] = useState(null); const log = logger('images'); const dispatch = useAppDispatch(); const handleDragStart = useCallback( (event: DragStartEvent) => { - log.trace( - { dragData: parseify(event.active.data.current) }, - 'Drag started' - ); + log.trace({ dragData: parseify(event.active.data.current) }, 'Drag started'); const activeData = event.active.data.current; if (!activeData) { return; @@ -39,10 +31,7 @@ const AppDndContext = (props: PropsWithChildren) => { const handleDragEnd = useCallback( (event: DragEndEvent) => { - log.trace( - { dragData: parseify(event.active.data.current) }, - 'Drag ended' - ); + log.trace({ dragData: parseify(event.active.data.current) }, 'Drag ended'); const overData = event.over?.data.current; if (!activeDragData || !overData) { return; diff --git a/invokeai/frontend/web/src/features/dnd/components/DndOverlay.tsx b/invokeai/frontend/web/src/features/dnd/components/DndOverlay.tsx index 263ebf928c..34067c9b46 100644 --- a/invokeai/frontend/web/src/features/dnd/components/DndOverlay.tsx +++ b/invokeai/frontend/web/src/features/dnd/components/DndOverlay.tsx @@ -17,19 +17,10 @@ const DndOverlay = (props: DndOverlayProps) => { const modifiers = useMemo(() => [scaledModifier], [scaledModifier]); return ( - + {props.activeDragData && ( - + )} diff --git a/invokeai/frontend/web/src/features/dnd/components/DragPreview.tsx b/invokeai/frontend/web/src/features/dnd/components/DragPreview.tsx index e9f6c6ee4d..9c4b715953 100644 --- a/invokeai/frontend/web/src/features/dnd/components/DragPreview.tsx +++ b/invokeai/frontend/web/src/features/dnd/components/DragPreview.tsx @@ -61,21 +61,8 @@ const DragPreview = (props: OverlayDragImageProps) => { if (props.dragData.payloadType === 'IMAGE_DTO') { const { thumbnail_url, width, height } = props.dragData.payload.imageDTO; return ( - - + + ); } diff --git a/invokeai/frontend/web/src/features/dnd/hooks/useScaledCenteredModifer.ts b/invokeai/frontend/web/src/features/dnd/hooks/useScaledCenteredModifer.ts index e2ef6ab75c..2816fc4830 100644 --- a/invokeai/frontend/web/src/features/dnd/hooks/useScaledCenteredModifer.ts +++ b/invokeai/frontend/web/src/features/dnd/hooks/useScaledCenteredModifer.ts @@ -6,10 +6,8 @@ import { selectNodesSlice } from 'features/nodes/store/nodesSlice'; import { activeTabNameSelector } from 'features/ui/store/uiSelectors'; import { useCallback } from 'react'; -const selectZoom = createSelector( - [selectNodesSlice, activeTabNameSelector], - (nodes, activeTabName) => - activeTabName === 'nodes' ? nodes.viewport.zoom : 1 +const selectZoom = createSelector([selectNodesSlice, activeTabNameSelector], (nodes, activeTabName) => + activeTabName === 'nodes' ? nodes.viewport.zoom : 1 ); /** diff --git a/invokeai/frontend/web/src/features/dnd/types/index.ts b/invokeai/frontend/web/src/features/dnd/types/index.ts index ac62eb65cd..6e680b4ba9 100644 --- a/invokeai/frontend/web/src/features/dnd/types/index.ts +++ b/invokeai/frontend/web/src/features/dnd/types/index.ts @@ -11,10 +11,7 @@ import type { UseDroppableArguments, } from '@dnd-kit/core'; import type { BoardId } from 'features/gallery/store/types'; -import type { - FieldInputInstance, - FieldInputTemplate, -} from 'features/nodes/types/field'; +import type { FieldInputInstance, FieldInputTemplate } from 'features/nodes/types/field'; import type { ImageDTO } from 'services/api/types'; type BaseDropData = { @@ -93,33 +90,22 @@ export type GallerySelectionDraggableData = BaseDragData & { payload: { boardId: BoardId }; }; -export type TypesafeDraggableData = - | NodeFieldDraggableData - | ImageDraggableData - | GallerySelectionDraggableData; +export type TypesafeDraggableData = NodeFieldDraggableData | ImageDraggableData | GallerySelectionDraggableData; -export interface UseDroppableTypesafeArguments - extends Omit { +export interface UseDroppableTypesafeArguments extends Omit { data?: TypesafeDroppableData; } -export type UseDroppableTypesafeReturnValue = Omit< - ReturnType, - 'active' | 'over' -> & { +export type UseDroppableTypesafeReturnValue = Omit, 'active' | 'over'> & { active: TypesafeActive | null; over: TypesafeOver | null; }; -export interface UseDraggableTypesafeArguments - extends Omit { +export interface UseDraggableTypesafeArguments extends Omit { data?: TypesafeDraggableData; } -export type UseDraggableTypesafeReturnValue = Omit< - ReturnType, - 'active' | 'over' -> & { +export type UseDraggableTypesafeReturnValue = Omit, 'active' | 'over'> & { active: TypesafeActive | null; over: TypesafeOver | null; }; @@ -147,10 +133,7 @@ export interface DragEndEvent extends DragEvent {} export interface DragCancelEvent extends DragEndEvent {} export interface DndContextTypesafeProps - extends Omit< - DndContextProps, - 'onDragStart' | 'onDragMove' | 'onDragOver' | 'onDragEnd' | 'onDragCancel' - > { + extends Omit { onDragStart?(event: DragStartEvent): void; onDragMove?(event: DragMoveEvent): void; onDragOver?(event: DragOverEvent): void; diff --git a/invokeai/frontend/web/src/features/dnd/util/customPointerWithin.ts b/invokeai/frontend/web/src/features/dnd/util/customPointerWithin.ts index f3d08a75ca..5de1248324 100644 --- a/invokeai/frontend/web/src/features/dnd/util/customPointerWithin.ts +++ b/invokeai/frontend/web/src/features/dnd/util/customPointerWithin.ts @@ -16,20 +16,15 @@ export const customPointerWithin: CollisionDetection = (arg) => { // Get all elements at the pointer coordinates. This excludes elements which are overflowed, // so it won't include the droppable elements that are scrolled out of view. - const targetElements = document.elementsFromPoint( - arg.pointerCoordinates.x, - arg.pointerCoordinates.y - ); + const targetElements = document.elementsFromPoint(arg.pointerCoordinates.x, arg.pointerCoordinates.y); - const filteredDroppableContainers = arg.droppableContainers.filter( - (container) => { - if (!container.node.current) { - return false; - } - // Only include droppable elements that are in the list of elements at the pointer coordinates. - return targetElements.includes(container.node.current); + const filteredDroppableContainers = arg.droppableContainers.filter((container) => { + if (!container.node.current) { + return false; } - ); + // Only include droppable elements that are in the list of elements at the pointer coordinates. + return targetElements.includes(container.node.current); + }); // Run the provided collision detection with the filtered droppable elements. return pointerWithin({ diff --git a/invokeai/frontend/web/src/features/dnd/util/isValidDrop.ts b/invokeai/frontend/web/src/features/dnd/util/isValidDrop.ts index c691a1deba..c2c9de3f0c 100644 --- a/invokeai/frontend/web/src/features/dnd/util/isValidDrop.ts +++ b/invokeai/frontend/web/src/features/dnd/util/isValidDrop.ts @@ -1,9 +1,6 @@ import type { TypesafeActive, TypesafeDroppableData } from 'features/dnd/types'; -export const isValidDrop = ( - overData: TypesafeDroppableData | undefined, - active: TypesafeActive | null -) => { +export const isValidDrop = (overData: TypesafeDroppableData | undefined, active: TypesafeActive | null) => { if (!overData || !active?.data.current) { return false; } @@ -30,9 +27,7 @@ export const isValidDrop = ( // If the board is the same, don't allow the drop // Check the payload types - const isPayloadValid = ['IMAGE_DTO', 'GALLERY_SELECTION'].includes( - payloadType - ); + const isPayloadValid = ['IMAGE_DTO', 'GALLERY_SELECTION'].includes(payloadType); if (!isPayloadValid) { return false; } @@ -59,9 +54,7 @@ export const isValidDrop = ( // If the board is the same, don't allow the drop // Check the payload types - const isPayloadValid = ['IMAGE_DTO', 'GALLERY_SELECTION'].includes( - payloadType - ); + const isPayloadValid = ['IMAGE_DTO', 'GALLERY_SELECTION'].includes(payloadType); if (!isPayloadValid) { return false; } diff --git a/invokeai/frontend/web/src/features/dynamicPrompts/components/ParamDynamicPromptsMaxPrompts.tsx b/invokeai/frontend/web/src/features/dynamicPrompts/components/ParamDynamicPromptsMaxPrompts.tsx index 1dcd95010e..eb533db74f 100644 --- a/invokeai/frontend/web/src/features/dynamicPrompts/components/ParamDynamicPromptsMaxPrompts.tsx +++ b/invokeai/frontend/web/src/features/dynamicPrompts/components/ParamDynamicPromptsMaxPrompts.tsx @@ -1,9 +1,4 @@ -import { - CompositeNumberInput, - CompositeSlider, - FormControl, - FormLabel, -} from '@invoke-ai/ui-library'; +import { CompositeNumberInput, CompositeSlider, FormControl, FormLabel } from '@invoke-ai/ui-library'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import { InformationalPopover } from 'common/components/InformationalPopover/InformationalPopover'; import { maxPromptsChanged } from 'features/dynamicPrompts/store/dynamicPromptsSlice'; @@ -12,21 +7,11 @@ import { useTranslation } from 'react-i18next'; const ParamDynamicPromptsMaxPrompts = () => { const maxPrompts = useAppSelector((s) => s.dynamicPrompts.maxPrompts); - const sliderMin = useAppSelector( - (s) => s.config.sd.dynamicPrompts.maxPrompts.sliderMin - ); - const sliderMax = useAppSelector( - (s) => s.config.sd.dynamicPrompts.maxPrompts.sliderMax - ); - const numberInputMin = useAppSelector( - (s) => s.config.sd.dynamicPrompts.maxPrompts.numberInputMin - ); - const numberInputMax = useAppSelector( - (s) => s.config.sd.dynamicPrompts.maxPrompts.numberInputMax - ); - const initial = useAppSelector( - (s) => s.config.sd.dynamicPrompts.maxPrompts.initial - ); + const sliderMin = useAppSelector((s) => s.config.sd.dynamicPrompts.maxPrompts.sliderMin); + const sliderMax = useAppSelector((s) => s.config.sd.dynamicPrompts.maxPrompts.sliderMax); + const numberInputMin = useAppSelector((s) => s.config.sd.dynamicPrompts.maxPrompts.numberInputMin); + const numberInputMax = useAppSelector((s) => s.config.sd.dynamicPrompts.maxPrompts.numberInputMax); + const initial = useAppSelector((s) => s.config.sd.dynamicPrompts.maxPrompts.initial); const isDisabled = useAppSelector((s) => !s.dynamicPrompts.combinatorial); const dispatch = useAppDispatch(); const { t } = useTranslation(); diff --git a/invokeai/frontend/web/src/features/dynamicPrompts/components/ParamDynamicPromptsPreview.tsx b/invokeai/frontend/web/src/features/dynamicPrompts/components/ParamDynamicPromptsPreview.tsx index 0c374995a7..e714533a30 100644 --- a/invokeai/frontend/web/src/features/dynamicPrompts/components/ParamDynamicPromptsPreview.tsx +++ b/invokeai/frontend/web/src/features/dynamicPrompts/components/ParamDynamicPromptsPreview.tsx @@ -1,13 +1,5 @@ import type { ChakraProps } from '@invoke-ai/ui-library'; -import { - Flex, - FormControl, - FormLabel, - ListItem, - OrderedList, - Spinner, - Text, -} from '@invoke-ai/ui-library'; +import { Flex, FormControl, FormLabel, ListItem, OrderedList, Spinner, Text } from '@invoke-ai/ui-library'; import { createMemoizedSelector } from 'app/store/createMemoizedSelector'; import { useAppSelector } from 'app/store/storeHooks'; import { IAINoContentFallback } from 'common/components/IAIImageFallback'; @@ -18,10 +10,7 @@ import { memo, useMemo } from 'react'; import { useTranslation } from 'react-i18next'; import { PiWarningCircleBold } from 'react-icons/pi'; -const selectPrompts = createMemoizedSelector( - selectDynamicPromptsSlice, - (dynamicPrompts) => dynamicPrompts.prompts -); +const selectPrompts = createMemoizedSelector(selectDynamicPromptsSlice, (dynamicPrompts) => dynamicPrompts.prompts); const listItemStyles: ChakraProps['sx'] = { '&::marker': { color: 'base.500' }, @@ -44,48 +33,22 @@ const ParamDynamicPromptsPreview = () => { if (isError) { return ( - - + + ); } return ( - + {label} - + {prompts.map((prompt, i) => ( - + {prompt} ))} diff --git a/invokeai/frontend/web/src/features/dynamicPrompts/components/ParamDynamicPromptsSeedBehaviour.tsx b/invokeai/frontend/web/src/features/dynamicPrompts/components/ParamDynamicPromptsSeedBehaviour.tsx index 7fb6e1a116..d04faf0d10 100644 --- a/invokeai/frontend/web/src/features/dynamicPrompts/components/ParamDynamicPromptsSeedBehaviour.tsx +++ b/invokeai/frontend/web/src/features/dynamicPrompts/components/ParamDynamicPromptsSeedBehaviour.tsx @@ -2,10 +2,7 @@ import type { ComboboxOnChange, ComboboxOption } from '@invoke-ai/ui-library'; import { Combobox, FormControl, FormLabel } from '@invoke-ai/ui-library'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import { InformationalPopover } from 'common/components/InformationalPopover/InformationalPopover'; -import { - isSeedBehaviour, - seedBehaviourChanged, -} from 'features/dynamicPrompts/store/dynamicPromptsSlice'; +import { isSeedBehaviour, seedBehaviourChanged } from 'features/dynamicPrompts/store/dynamicPromptsSlice'; import { memo, useCallback, useMemo } from 'react'; import { useTranslation } from 'react-i18next'; @@ -39,17 +36,11 @@ const ParamDynamicPromptsSeedBehaviour = () => { [dispatch] ); - const value = useMemo( - () => options.find((o) => o.value === seedBehaviour), - [options, seedBehaviour] - ); + const value = useMemo(() => options.find((o) => o.value === seedBehaviour), [options, seedBehaviour]); return ( - + {t('dynamicPrompts.seedBehaviour.label')} diff --git a/invokeai/frontend/web/src/features/dynamicPrompts/components/ShowDynamicPromptsPreviewButton.tsx b/invokeai/frontend/web/src/features/dynamicPrompts/components/ShowDynamicPromptsPreviewButton.tsx index 78cd48f22f..3be6bfa747 100644 --- a/invokeai/frontend/web/src/features/dynamicPrompts/components/ShowDynamicPromptsPreviewButton.tsx +++ b/invokeai/frontend/web/src/features/dynamicPrompts/components/ShowDynamicPromptsPreviewButton.tsx @@ -13,19 +13,11 @@ const loadingStyles: SystemStyleObject = { export const ShowDynamicPromptsPreviewButton = memo(() => { const { t } = useTranslation(); const isLoading = useAppSelector((s) => s.dynamicPrompts.isLoading); - const isError = useAppSelector((s) => - Boolean(s.dynamicPrompts.isError || s.dynamicPrompts.parsingError) - ); + const isError = useAppSelector((s) => Boolean(s.dynamicPrompts.isError || s.dynamicPrompts.parsingError)); const { isOpen, onOpen } = useDynamicPromptsModal(); return ( - + ; -export const isSeedBehaviour = (v: unknown): v is SeedBehaviour => - zSeedBehaviour.safeParse(v).success; +export const isSeedBehaviour = (v: unknown): v is SeedBehaviour => zSeedBehaviour.safeParse(v).success; export interface DynamicPromptsState { _version: 1; @@ -49,10 +48,7 @@ export const dynamicPromptsSlice = createSlice({ state.prompts = action.payload; state.isLoading = false; }, - parsingErrorChanged: ( - state, - action: PayloadAction - ) => { + parsingErrorChanged: (state, action: PayloadAction) => { state.parsingError = action.payload; }, isErrorChanged: (state, action: PayloadAction) => { @@ -80,8 +76,7 @@ export const { export default dynamicPromptsSlice.reducer; -export const selectDynamicPromptsSlice = (state: RootState) => - state.dynamicPrompts; +export const selectDynamicPromptsSlice = (state: RootState) => state.dynamicPrompts; /* eslint-disable-next-line @typescript-eslint/no-explicit-any */ export const migrateDynamicPromptsState = (state: any): any => { diff --git a/invokeai/frontend/web/src/features/dynamicPrompts/util/getShouldProcessPrompt.ts b/invokeai/frontend/web/src/features/dynamicPrompts/util/getShouldProcessPrompt.ts index 1d2a5e715e..416363fec1 100644 --- a/invokeai/frontend/web/src/features/dynamicPrompts/util/getShouldProcessPrompt.ts +++ b/invokeai/frontend/web/src/features/dynamicPrompts/util/getShouldProcessPrompt.ts @@ -1,3 +1,2 @@ const hasOpenCloseCurlyBracesRegex = /.*\{[\s\S]*\}.*/; -export const getShouldProcessPrompt = (prompt: string): boolean => - hasOpenCloseCurlyBracesRegex.test(prompt); +export const getShouldProcessPrompt = (prompt: string): boolean => hasOpenCloseCurlyBracesRegex.test(prompt); diff --git a/invokeai/frontend/web/src/features/embedding/EmbeddingPopover.tsx b/invokeai/frontend/web/src/features/embedding/EmbeddingPopover.tsx index 42c690fe13..1ff18dc107 100644 --- a/invokeai/frontend/web/src/features/embedding/EmbeddingPopover.tsx +++ b/invokeai/frontend/web/src/features/embedding/EmbeddingPopover.tsx @@ -1,9 +1,4 @@ -import { - Popover, - PopoverAnchor, - PopoverBody, - PopoverContent, -} from '@invoke-ai/ui-library'; +import { Popover, PopoverAnchor, PopoverBody, PopoverContent } from '@invoke-ai/ui-library'; import { EmbeddingSelect } from 'features/embedding/EmbeddingSelect'; import type { EmbeddingPopoverProps } from 'features/embedding/types'; import { memo } from 'react'; diff --git a/invokeai/frontend/web/src/features/embedding/EmbeddingSelect.tsx b/invokeai/frontend/web/src/features/embedding/EmbeddingSelect.tsx index d90e0ac93c..ffe9d63360 100644 --- a/invokeai/frontend/web/src/features/embedding/EmbeddingSelect.tsx +++ b/invokeai/frontend/web/src/features/embedding/EmbeddingSelect.tsx @@ -11,60 +11,54 @@ import { useGetTextualInversionModelsQuery } from 'services/api/endpoints/models const noOptionsMessage = () => t('embedding.noMatchingEmbedding'); -export const EmbeddingSelect = memo( - ({ onSelect, onClose }: EmbeddingSelectProps) => { - const { t } = useTranslation(); +export const EmbeddingSelect = memo(({ onSelect, onClose }: EmbeddingSelectProps) => { + const { t } = useTranslation(); - const currentBaseModel = useAppSelector( - (s) => s.generation.model?.base_model - ); + const currentBaseModel = useAppSelector((s) => s.generation.model?.base_model); - const getIsDisabled = useCallback( - (embedding: TextualInversionModelConfigEntity): boolean => { - const isCompatible = currentBaseModel === embedding.base_model; - const hasMainModel = Boolean(currentBaseModel); - return !hasMainModel || !isCompatible; - }, - [currentBaseModel] - ); - const { data, isLoading } = useGetTextualInversionModelsQuery(); + const getIsDisabled = useCallback( + (embedding: TextualInversionModelConfigEntity): boolean => { + const isCompatible = currentBaseModel === embedding.base_model; + const hasMainModel = Boolean(currentBaseModel); + return !hasMainModel || !isCompatible; + }, + [currentBaseModel] + ); + const { data, isLoading } = useGetTextualInversionModelsQuery(); - const _onChange = useCallback( - (embedding: TextualInversionModelConfigEntity | null) => { - if (!embedding) { - return; - } - onSelect(embedding.model_name); - }, - [onSelect] - ); + const _onChange = useCallback( + (embedding: TextualInversionModelConfigEntity | null) => { + if (!embedding) { + return; + } + onSelect(embedding.model_name); + }, + [onSelect] + ); - const { options, onChange } = useGroupedModelCombobox({ - modelEntities: data, - getIsDisabled, - onChange: _onChange, - }); + const { options, onChange } = useGroupedModelCombobox({ + modelEntities: data, + getIsDisabled, + onChange: _onChange, + }); - return ( - - - - ); - } -); + return ( + + + + ); +}); EmbeddingSelect.displayName = 'EmbeddingSelect'; diff --git a/invokeai/frontend/web/src/features/embedding/usePrompt.ts b/invokeai/frontend/web/src/features/embedding/usePrompt.ts index cdc4b1b80f..c3a708e6ce 100644 --- a/invokeai/frontend/web/src/features/embedding/usePrompt.ts +++ b/invokeai/frontend/web/src/features/embedding/usePrompt.ts @@ -1,10 +1,6 @@ import { useDisclosure } from '@invoke-ai/ui-library'; import { isNil } from 'lodash-es'; -import type { - ChangeEventHandler, - KeyboardEventHandler, - RefObject, -} from 'react'; +import type { ChangeEventHandler, KeyboardEventHandler, RefObject } from 'react'; import { useCallback } from 'react'; import { flushSync } from 'react-dom'; @@ -14,11 +10,7 @@ export type UseInsertEmbeddingArg = { onChange: (v: string) => void; }; -export const usePrompt = ({ - prompt, - textareaRef, - onChange: _onChange, -}: UseInsertEmbeddingArg) => { +export const usePrompt = ({ prompt, textareaRef, onChange: _onChange }: UseInsertEmbeddingArg) => { const { isOpen, onClose, onOpen } = useDisclosure(); const onChange: ChangeEventHandler = useCallback( diff --git a/invokeai/frontend/web/src/features/gallery/components/Boards/BoardAutoAddSelect.tsx b/invokeai/frontend/web/src/features/gallery/components/Boards/BoardAutoAddSelect.tsx index 73bb073464..da05209d9d 100644 --- a/invokeai/frontend/web/src/features/gallery/components/Boards/BoardAutoAddSelect.tsx +++ b/invokeai/frontend/web/src/features/gallery/components/Boards/BoardAutoAddSelect.tsx @@ -10,9 +10,7 @@ const BoardAutoAddSelect = () => { const dispatch = useAppDispatch(); const { t } = useTranslation(); const autoAddBoardId = useAppSelector((s) => s.gallery.autoAddBoardId); - const autoAssignBoardOnClick = useAppSelector( - (s) => s.gallery.autoAssignBoardOnClick - ); + const autoAssignBoardOnClick = useAppSelector((s) => s.gallery.autoAssignBoardOnClick); const { options, hasBoards } = useListAllBoardsQuery(undefined, { selectFromResult: ({ data }) => { const options: ComboboxOption[] = [ @@ -43,10 +41,7 @@ const BoardAutoAddSelect = () => { [dispatch] ); - const value = useMemo( - () => options.find((o) => o.value === autoAddBoardId), - [options, autoAddBoardId] - ); + const value = useMemo(() => options.find((o) => o.value === autoAddBoardId), [options, autoAddBoardId]); const noOptionsMessage = useCallback(() => t('boards.noMatching'), [t]); diff --git a/invokeai/frontend/web/src/features/gallery/components/Boards/BoardContextMenu.tsx b/invokeai/frontend/web/src/features/gallery/components/Boards/BoardContextMenu.tsx index 8d25fbff72..490e8eac9e 100644 --- a/invokeai/frontend/web/src/features/gallery/components/Boards/BoardContextMenu.tsx +++ b/invokeai/frontend/web/src/features/gallery/components/Boards/BoardContextMenu.tsx @@ -1,16 +1,8 @@ import type { ContextMenuProps } from '@invoke-ai/ui-library'; -import { - ContextMenu, - MenuGroup, - MenuItem, - MenuList, -} from '@invoke-ai/ui-library'; +import { ContextMenu, MenuGroup, MenuItem, MenuList } from '@invoke-ai/ui-library'; import { createSelector } from '@reduxjs/toolkit'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; -import { - autoAddBoardIdChanged, - selectGallerySlice, -} from 'features/gallery/store/gallerySlice'; +import { autoAddBoardIdChanged, selectGallerySlice } from 'features/gallery/store/gallerySlice'; import type { BoardId } from 'features/gallery/store/types'; import { useFeatureStatus } from 'features/system/hooks/useFeatureStatus'; import { addToast } from 'features/system/store/systemSlice'; @@ -30,30 +22,18 @@ type Props = { setBoardToDelete?: (board?: BoardDTO) => void; }; -const BoardContextMenu = ({ - board, - board_id, - setBoardToDelete, - children, -}: Props) => { +const BoardContextMenu = ({ board, board_id, setBoardToDelete, children }: Props) => { const { t } = useTranslation(); const dispatch = useAppDispatch(); - const autoAssignBoardOnClick = useAppSelector( - (s) => s.gallery.autoAssignBoardOnClick - ); + const autoAssignBoardOnClick = useAppSelector((s) => s.gallery.autoAssignBoardOnClick); const selectIsSelectedForAutoAdd = useMemo( - () => - createSelector( - selectGallerySlice, - (gallery) => board && board.board_id === gallery.autoAddBoardId - ), + () => createSelector(selectGallerySlice, (gallery) => board && board.board_id === gallery.autoAddBoardId), [board] ); const isSelectedForAutoAdd = useAppSelector(selectIsSelectedForAutoAdd); const boardName = useBoardName(board_id); - const isBulkDownloadEnabled = - useFeatureStatus('bulkDownload').isFeatureEnabled; + const isBulkDownloadEnabled = useFeatureStatus('bulkDownload').isFeatureEnabled; const [bulkDownload] = useBulkDownloadImagesMutation(); @@ -103,19 +83,11 @@ const BoardContextMenu = ({ {t('boards.menuItemAutoAdd')} {isBulkDownloadEnabled && ( - } - onClickCapture={handleBulkDownload} - > + } onClickCapture={handleBulkDownload}> {t('boards.downloadBoard')} )} - {board && ( - - )} + {board && } ), diff --git a/invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/BoardsList.tsx b/invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/BoardsList.tsx index ee5a7818d4..7f95bcc973 100644 --- a/invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/BoardsList.tsx +++ b/invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/BoardsList.tsx @@ -28,32 +28,19 @@ const BoardsList = (props: Props) => { const boardSearchText = useAppSelector((s) => s.gallery.boardSearchText); const { data: boards } = useListAllBoardsQuery(); const filteredBoards = boardSearchText - ? boards?.filter((board) => - board.board_name.toLowerCase().includes(boardSearchText.toLowerCase()) - ) + ? boards?.filter((board) => board.board_name.toLowerCase().includes(boardSearchText.toLowerCase())) : boards; const [boardToDelete, setBoardToDelete] = useState(); return ( <> - + - + { {filteredBoards && filteredBoards.map((board, index) => ( - + { - + ); }; diff --git a/invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/BoardsSearch.tsx b/invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/BoardsSearch.tsx index 09e6fe0b26..931c1e6cbb 100644 --- a/invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/BoardsSearch.tsx +++ b/invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/BoardsSearch.tsx @@ -1,9 +1,4 @@ -import { - IconButton, - Input, - InputGroup, - InputRightElement, -} from '@invoke-ai/ui-library'; +import { IconButton, Input, InputGroup, InputRightElement } from '@invoke-ai/ui-library'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import { boardSearchTextChanged } from 'features/gallery/store/gallerySlice'; import type { ChangeEvent, KeyboardEvent } from 'react'; diff --git a/invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/GalleryBoard.tsx b/invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/GalleryBoard.tsx index c887777cdf..8e3c7e4ab2 100644 --- a/invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/GalleryBoard.tsx +++ b/invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/GalleryBoard.tsx @@ -1,15 +1,5 @@ import type { SystemStyleObject } from '@invoke-ai/ui-library'; -import { - Box, - Editable, - EditableInput, - EditablePreview, - Flex, - Icon, - Image, - Text, - Tooltip, -} from '@invoke-ai/ui-library'; +import { Box, Editable, EditableInput, EditablePreview, Flex, Icon, Image, Text, Tooltip } from '@invoke-ai/ui-library'; import { createSelector } from '@reduxjs/toolkit'; import { skipToken } from '@reduxjs/toolkit/query'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; @@ -18,11 +8,7 @@ import SelectionOverlay from 'common/components/SelectionOverlay'; import type { AddToBoardDropData } from 'features/dnd/types'; import AutoAddIcon from 'features/gallery/components/Boards/AutoAddIcon'; import BoardContextMenu from 'features/gallery/components/Boards/BoardContextMenu'; -import { - autoAddBoardIdChanged, - boardIdSelected, - selectGallerySlice, -} from 'features/gallery/store/gallerySlice'; +import { autoAddBoardIdChanged, boardIdSelected, selectGallerySlice } from 'features/gallery/store/gallerySlice'; import { memo, useCallback, useMemo, useState } from 'react'; import { useTranslation } from 'react-i18next'; import { PiImagesSquare } from 'react-icons/pi'; @@ -48,21 +34,11 @@ interface GalleryBoardProps { setBoardToDelete: (board?: BoardDTO) => void; } -const GalleryBoard = ({ - board, - isSelected, - setBoardToDelete, -}: GalleryBoardProps) => { +const GalleryBoard = ({ board, isSelected, setBoardToDelete }: GalleryBoardProps) => { const dispatch = useAppDispatch(); - const autoAssignBoardOnClick = useAppSelector( - (s) => s.gallery.autoAssignBoardOnClick - ); + const autoAssignBoardOnClick = useAppSelector((s) => s.gallery.autoAssignBoardOnClick); const selectIsSelectedForAutoAdd = useMemo( - () => - createSelector( - selectGallerySlice, - (gallery) => board.board_id === gallery.autoAddBoardId - ), + () => createSelector(selectGallerySlice, (gallery) => board.board_id === gallery.autoAddBoardId), [board.board_id] ); @@ -86,9 +62,7 @@ const GalleryBoard = ({ } asset${assetsTotal.total === 1 ? '' : 's'}`; }, [assetsTotal, imagesTotal]); - const { currentData: coverImage } = useGetImageDTOQuery( - board.cover_image_name ?? skipToken - ); + const { currentData: coverImage } = useGetImageDTOQuery(board.cover_image_name ?? skipToken); const { board_name, board_id } = board; const [localBoardName, setLocalBoardName] = useState(board_name); @@ -100,8 +74,7 @@ const GalleryBoard = ({ } }, [board_id, autoAssignBoardOnClick, dispatch]); - const [updateBoard, { isLoading: isUpdateBoardLoading }] = - useUpdateBoardMutation(); + const [updateBoard, { isLoading: isUpdateBoardLoading }] = useUpdateBoardMutation(); const droppableData: AddToBoardDropData = useMemo( () => ({ @@ -157,11 +130,7 @@ const GalleryBoard = ({ w="full" h="full" > - + {(ref) => ( ) : ( - - + + )} {isSelectedForAutoAdd && } - + - {t('unifiedCanvas.move')} - } - /> + {t('unifiedCanvas.move')}} /> )} diff --git a/invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/NoBoardBoard.tsx b/invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/NoBoardBoard.tsx index b7bfcdacac..2b022dc90a 100644 --- a/invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/NoBoardBoard.tsx +++ b/invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/NoBoardBoard.tsx @@ -5,17 +5,11 @@ import SelectionOverlay from 'common/components/SelectionOverlay'; import type { RemoveFromBoardDropData } from 'features/dnd/types'; import AutoAddIcon from 'features/gallery/components/Boards/AutoAddIcon'; import BoardContextMenu from 'features/gallery/components/Boards/BoardContextMenu'; -import { - autoAddBoardIdChanged, - boardIdSelected, -} from 'features/gallery/store/gallerySlice'; +import { autoAddBoardIdChanged, boardIdSelected } from 'features/gallery/store/gallerySlice'; import InvokeLogoSVG from 'public/assets/images/invoke-symbol-wht-lrg.svg'; import { memo, useCallback, useMemo, useState } from 'react'; import { useTranslation } from 'react-i18next'; -import { - useGetBoardAssetsTotalQuery, - useGetBoardImagesTotalQuery, -} from 'services/api/endpoints/boards'; +import { useGetBoardAssetsTotalQuery, useGetBoardImagesTotalQuery } from 'services/api/endpoints/boards'; import { useBoardName } from 'services/api/hooks/useBoardName'; interface Props { @@ -25,9 +19,7 @@ interface Props { const NoBoardBoard = memo(({ isSelected }: Props) => { const dispatch = useAppDispatch(); const autoAddBoardId = useAppSelector((s) => s.gallery.autoAddBoardId); - const autoAssignBoardOnClick = useAppSelector( - (s) => s.gallery.autoAssignBoardOnClick - ); + const autoAssignBoardOnClick = useAppSelector((s) => s.gallery.autoAssignBoardOnClick); const boardName = useBoardName('none'); const handleSelectBoard = useCallback(() => { dispatch(boardIdSelected({ boardId: 'none' })); @@ -92,12 +84,7 @@ const NoBoardBoard = memo(({ isSelected }: Props) => { cursor="pointer" bg="base.800" > - + invoke-ai-logo { > {boardName} - - {t('unifiedCanvas.move')} - } - /> + + {t('unifiedCanvas.move')}} /> )} diff --git a/invokeai/frontend/web/src/features/gallery/components/Boards/DeleteBoardModal.tsx b/invokeai/frontend/web/src/features/gallery/components/Boards/DeleteBoardModal.tsx index 36a098df84..6581033aaa 100644 --- a/invokeai/frontend/web/src/features/gallery/components/Boards/DeleteBoardModal.tsx +++ b/invokeai/frontend/web/src/features/gallery/components/Boards/DeleteBoardModal.tsx @@ -24,10 +24,7 @@ import { some } from 'lodash-es'; import { memo, useCallback, useMemo, useRef } from 'react'; import { useTranslation } from 'react-i18next'; import { useListAllImageNamesForBoardQuery } from 'services/api/endpoints/boards'; -import { - useDeleteBoardAndImagesMutation, - useDeleteBoardMutation, -} from 'services/api/endpoints/images'; +import { useDeleteBoardAndImagesMutation, useDeleteBoardMutation } from 'services/api/endpoints/images'; import type { BoardDTO } from 'services/api/types'; type Props = { @@ -38,21 +35,15 @@ type Props = { const DeleteBoardModal = (props: Props) => { const { boardToDelete, setBoardToDelete } = props; const { t } = useTranslation(); - const canRestoreDeletedImagesFromBin = useAppSelector( - (s) => s.config.canRestoreDeletedImagesFromBin + const canRestoreDeletedImagesFromBin = useAppSelector((s) => s.config.canRestoreDeletedImagesFromBin); + const { currentData: boardImageNames, isFetching: isFetchingBoardNames } = useListAllImageNamesForBoardQuery( + boardToDelete?.board_id ?? skipToken ); - const { currentData: boardImageNames, isFetching: isFetchingBoardNames } = - useListAllImageNamesForBoardQuery(boardToDelete?.board_id ?? skipToken); const selectImageUsageSummary = useMemo( () => createMemoizedSelector( - [ - selectGenerationSlice, - selectCanvasSlice, - selectNodesSlice, - selectControlAdaptersSlice, - ], + [selectGenerationSlice, selectCanvasSlice, selectNodesSlice, selectControlAdaptersSlice], (generation, canvas, nodes, controlAdapters) => { const allImageUsage = (boardImageNames ?? []).map((imageName) => getImageUsage(generation, canvas, nodes, controlAdapters, imageName) @@ -71,11 +62,9 @@ const DeleteBoardModal = (props: Props) => { [boardImageNames] ); - const [deleteBoardOnly, { isLoading: isDeleteBoardOnlyLoading }] = - useDeleteBoardMutation(); + const [deleteBoardOnly, { isLoading: isDeleteBoardOnlyLoading }] = useDeleteBoardMutation(); - const [deleteBoardAndImages, { isLoading: isDeleteBoardAndImagesLoading }] = - useDeleteBoardAndImagesMutation(); + const [deleteBoardAndImages, { isLoading: isDeleteBoardAndImagesLoading }] = useDeleteBoardAndImagesMutation(); const imageUsageSummary = useAppSelector(selectImageUsageSummary); @@ -102,15 +91,8 @@ const DeleteBoardModal = (props: Props) => { const cancelRef = useRef(null); const isLoading = useMemo( - () => - isDeleteBoardAndImagesLoading || - isDeleteBoardOnlyLoading || - isFetchingBoardNames, - [ - isDeleteBoardAndImagesLoading, - isDeleteBoardOnlyLoading, - isFetchingBoardNames, - ] + () => isDeleteBoardAndImagesLoading || isDeleteBoardOnlyLoading || isFetchingBoardNames, + [isDeleteBoardAndImagesLoading, isDeleteBoardOnlyLoading, isFetchingBoardNames] ); if (!boardToDelete) { @@ -118,12 +100,7 @@ const DeleteBoardModal = (props: Props) => { } return ( - + @@ -145,9 +122,7 @@ const DeleteBoardModal = (props: Props) => { )} {t('boards.deletedBoardsCannotbeRestored')} - {canRestoreDeletedImagesFromBin - ? t('gallery.deleteImageBin') - : t('gallery.deleteImagePermanent')} + {canRestoreDeletedImagesFromBin ? t('gallery.deleteImageBin') : t('gallery.deleteImagePermanent')} @@ -156,18 +131,10 @@ const DeleteBoardModal = (props: Props) => { - - diff --git a/invokeai/frontend/web/src/features/gallery/components/Boards/GalleryBoardContextMenuItems.tsx b/invokeai/frontend/web/src/features/gallery/components/Boards/GalleryBoardContextMenuItems.tsx index 9e7df6d16c..d1280bf109 100644 --- a/invokeai/frontend/web/src/features/gallery/components/Boards/GalleryBoardContextMenuItems.tsx +++ b/invokeai/frontend/web/src/features/gallery/components/Boards/GalleryBoardContextMenuItems.tsx @@ -20,11 +20,7 @@ const GalleryBoardContextMenuItems = ({ board, setBoardToDelete }: Props) => { return ( <> - } - onClick={handleDelete} - > + } onClick={handleDelete}> {t('boards.deleteBoard')} diff --git a/invokeai/frontend/web/src/features/gallery/components/CurrentImage/CurrentImageButtons.tsx b/invokeai/frontend/web/src/features/gallery/components/CurrentImage/CurrentImageButtons.tsx index 24293ef070..e25324b9ea 100644 --- a/invokeai/frontend/web/src/features/gallery/components/CurrentImage/CurrentImageButtons.tsx +++ b/invokeai/frontend/web/src/features/gallery/components/CurrentImage/CurrentImageButtons.tsx @@ -1,11 +1,4 @@ -import { - ButtonGroup, - Flex, - IconButton, - Menu, - MenuButton, - MenuList, -} from '@invoke-ai/ui-library'; +import { ButtonGroup, Flex, IconButton, Menu, MenuButton, MenuList } from '@invoke-ai/ui-library'; import { createSelector } from '@reduxjs/toolkit'; import { skipToken } from '@reduxjs/toolkit/query'; import { useAppToaster } from 'app/components/Toaster'; @@ -23,10 +16,7 @@ import { initialImageSelected } from 'features/parameters/store/actions'; import { useIsQueueMutationInProgress } from 'features/queue/hooks/useIsQueueMutationInProgress'; import { useFeatureStatus } from 'features/system/hooks/useFeatureStatus'; import { selectSystemSlice } from 'features/system/store/systemSlice'; -import { - setShouldShowImageDetails, - setShouldShowProgressInViewer, -} from 'features/ui/store/uiSlice'; +import { setShouldShowImageDetails, setShouldShowProgressInViewer } from 'features/ui/store/uiSlice'; import { useGetAndLoadEmbeddedWorkflow } from 'features/workflowLibrary/hooks/useGetAndLoadEmbeddedWorkflow'; import { memo, useCallback } from 'react'; import { useHotkeys } from 'react-hotkeys-hook'; @@ -58,39 +48,23 @@ const selectShouldDisableToolbarButtons = createSelector( const CurrentImageButtons = () => { const dispatch = useAppDispatch(); const isConnected = useAppSelector((s) => s.system.isConnected); - const shouldShowImageDetails = useAppSelector( - (s) => s.ui.shouldShowImageDetails - ); - const shouldShowProgressInViewer = useAppSelector( - (s) => s.ui.shouldShowProgressInViewer - ); + const shouldShowImageDetails = useAppSelector((s) => s.ui.shouldShowImageDetails); + const shouldShowProgressInViewer = useAppSelector((s) => s.ui.shouldShowProgressInViewer); const lastSelectedImage = useAppSelector(selectLastSelectedImage); - const shouldDisableToolbarButtons = useAppSelector( - selectShouldDisableToolbarButtons - ); + const shouldDisableToolbarButtons = useAppSelector(selectShouldDisableToolbarButtons); const isUpscalingEnabled = useFeatureStatus('upscaling').isFeatureEnabled; const isQueueMutationInProgress = useIsQueueMutationInProgress(); const toaster = useAppToaster(); const { t } = useTranslation(); - const { - recallBothPrompts, - recallSeed, - recallWidthAndHeight, - recallAllParameters, - } = useRecallParameters(); + const { recallBothPrompts, recallSeed, recallWidthAndHeight, recallAllParameters } = useRecallParameters(); - const { currentData: imageDTO } = useGetImageDTOQuery( - lastSelectedImage?.image_name ?? skipToken - ); + const { currentData: imageDTO } = useGetImageDTOQuery(lastSelectedImage?.image_name ?? skipToken); - const { metadata, isLoading: isLoadingMetadata } = useDebouncedMetadata( - lastSelectedImage?.image_name - ); + const { metadata, isLoading: isLoadingMetadata } = useDebouncedMetadata(lastSelectedImage?.image_name); - const { getAndLoadEmbeddedWorkflow, getAndLoadEmbeddedWorkflowResult } = - useGetAndLoadEmbeddedWorkflow({}); + const { getAndLoadEmbeddedWorkflow, getAndLoadEmbeddedWorkflowResult } = useGetAndLoadEmbeddedWorkflow({}); const handleLoadWorkflow = useCallback(() => { if (!lastSelectedImage || !lastSelectedImage.has_workflow) { @@ -173,10 +147,7 @@ const CurrentImageButtons = () => { handleClickUpscale(); }, { - enabled: () => - Boolean( - isUpscalingEnabled && !shouldDisableToolbarButtons && isConnected - ), + enabled: () => Boolean(isUpscalingEnabled && !shouldDisableToolbarButtons && isConnected), }, [isUpscalingEnabled, imageDTO, shouldDisableToolbarButtons, isConnected] ); @@ -227,9 +198,7 @@ const CurrentImageButtons = () => { isDisabled={!imageDTO} icon={} /> - - {imageDTO && } - + {imageDTO && } diff --git a/invokeai/frontend/web/src/features/gallery/components/CurrentImage/CurrentImagePreview.tsx b/invokeai/frontend/web/src/features/gallery/components/CurrentImage/CurrentImagePreview.tsx index a81aca16ed..02863daa2f 100644 --- a/invokeai/frontend/web/src/features/gallery/components/CurrentImage/CurrentImagePreview.tsx +++ b/invokeai/frontend/web/src/features/gallery/components/CurrentImage/CurrentImagePreview.tsx @@ -4,10 +4,7 @@ import { skipToken } from '@reduxjs/toolkit/query'; import { useAppSelector } from 'app/store/storeHooks'; import IAIDndImage from 'common/components/IAIDndImage'; import { IAINoContentFallback } from 'common/components/IAIImageFallback'; -import type { - TypesafeDraggableData, - TypesafeDroppableData, -} from 'features/dnd/types'; +import type { TypesafeDraggableData, TypesafeDroppableData } from 'features/dnd/types'; import ProgressImage from 'features/gallery/components/CurrentImage/ProgressImage'; import ImageMetadataViewer from 'features/gallery/components/ImageMetadataViewer/ImageMetadataViewer'; import NextPrevImageButtons from 'features/gallery/components/NextPrevImageButtons'; @@ -26,16 +23,10 @@ const selectLastSelectedImageName = createSelector( ); const CurrentImagePreview = () => { - const shouldShowImageDetails = useAppSelector( - (s) => s.ui.shouldShowImageDetails - ); + const shouldShowImageDetails = useAppSelector((s) => s.ui.shouldShowImageDetails); const imageName = useAppSelector(selectLastSelectedImageName); - const hasDenoiseProgress = useAppSelector((s) => - Boolean(s.system.denoiseProgress) - ); - const shouldShowProgressInViewer = useAppSelector( - (s) => s.ui.shouldShowProgressInViewer - ); + const hasDenoiseProgress = useAppSelector((s) => Boolean(s.system.denoiseProgress)); + const shouldShowProgressInViewer = useAppSelector((s) => s.ui.shouldShowProgressInViewer); const { currentData: imageDTO } = useGetImageDTOQuery(imageName ?? skipToken); @@ -58,8 +49,7 @@ const CurrentImagePreview = () => { ); // Show and hide the next/prev buttons on mouse move - const [shouldShowNextPrevButtons, setShouldShowNextPrevButtons] = - useState(false); + const [shouldShowNextPrevButtons, setShouldShowNextPrevButtons] = useState(false); const timeoutId = useRef(0); @@ -97,35 +87,18 @@ const CurrentImagePreview = () => { fitContainer useThumbailFallback dropLabel={t('gallery.setCurrentImage')} - noContentFallback={ - - } + noContentFallback={} dataTestId="image-preview" /> )} {shouldShowImageDetails && imageDTO && ( - + )} {!shouldShowImageDetails && imageDTO && shouldShowNextPrevButtons && ( - + )} diff --git a/invokeai/frontend/web/src/features/gallery/components/CurrentImage/ProgressImage.tsx b/invokeai/frontend/web/src/features/gallery/components/CurrentImage/ProgressImage.tsx index 4b38743438..0ee75fbcd4 100644 --- a/invokeai/frontend/web/src/features/gallery/components/CurrentImage/ProgressImage.tsx +++ b/invokeai/frontend/web/src/features/gallery/components/CurrentImage/ProgressImage.tsx @@ -4,12 +4,8 @@ import { useAppSelector } from 'app/store/storeHooks'; import { memo, useMemo } from 'react'; const CurrentImagePreview = () => { - const progress_image = useAppSelector( - (s) => s.system.denoiseProgress?.progress_image - ); - const shouldAntialiasProgressImage = useAppSelector( - (s) => s.system.shouldAntialiasProgressImage - ); + const progress_image = useAppSelector((s) => s.system.denoiseProgress?.progress_image); + const shouldAntialiasProgressImage = useAppSelector((s) => s.system.shouldAntialiasProgressImage); const sx = useMemo( () => ({ diff --git a/invokeai/frontend/web/src/features/gallery/components/GallerySettingsPopover.tsx b/invokeai/frontend/web/src/features/gallery/components/GallerySettingsPopover.tsx index 7672070463..a877ce0128 100644 --- a/invokeai/frontend/web/src/features/gallery/components/GallerySettingsPopover.tsx +++ b/invokeai/frontend/web/src/features/gallery/components/GallerySettingsPopover.tsx @@ -33,13 +33,9 @@ const formLabelProps: FormLabelProps = { const GallerySettingsPopover = () => { const dispatch = useAppDispatch(); const { t } = useTranslation(); - const galleryImageMinimumWidth = useAppSelector( - (s) => s.gallery.galleryImageMinimumWidth - ); + const galleryImageMinimumWidth = useAppSelector((s) => s.gallery.galleryImageMinimumWidth); const shouldAutoSwitch = useAppSelector((s) => s.gallery.shouldAutoSwitch); - const autoAssignBoardOnClick = useAppSelector( - (s) => s.gallery.autoAssignBoardOnClick - ); + const autoAssignBoardOnClick = useAppSelector((s) => s.gallery.autoAssignBoardOnClick); const handleChangeGalleryImageMinimumWidth = useCallback( (v: number) => { @@ -56,8 +52,7 @@ const GallerySettingsPopover = () => { ); const handleChangeAutoAssignBoardOnClick = useCallback( - (e: ChangeEvent) => - dispatch(autoAssignBoardOnClickChanged(e.target.checked)), + (e: ChangeEvent) => dispatch(autoAssignBoardOnClickChanged(e.target.checked)), [dispatch] ); @@ -87,17 +82,11 @@ const GallerySettingsPopover = () => { {t('gallery.autoSwitchNewImages')} - + {t('gallery.autoAssignBoardOnClick')} - + diff --git a/invokeai/frontend/web/src/features/gallery/components/ImageContextMenu/MultipleSelectionMenuItems.tsx b/invokeai/frontend/web/src/features/gallery/components/ImageContextMenu/MultipleSelectionMenuItems.tsx index 64298a2f34..e8f71c02f3 100644 --- a/invokeai/frontend/web/src/features/gallery/components/ImageContextMenu/MultipleSelectionMenuItems.tsx +++ b/invokeai/frontend/web/src/features/gallery/components/ImageContextMenu/MultipleSelectionMenuItems.tsx @@ -2,22 +2,13 @@ import { MenuDivider, MenuItem } from '@invoke-ai/ui-library'; import { useStore } from '@nanostores/react'; import { $customStarUI } from 'app/store/nanostores/customStarUI'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; -import { - imagesToChangeSelected, - isModalOpenChanged, -} from 'features/changeBoardModal/store/slice'; +import { imagesToChangeSelected, isModalOpenChanged } from 'features/changeBoardModal/store/slice'; import { imagesToDeleteSelected } from 'features/deleteImageModal/store/slice'; import { useFeatureStatus } from 'features/system/hooks/useFeatureStatus'; import { addToast } from 'features/system/store/systemSlice'; import { memo, useCallback, useMemo } from 'react'; import { useTranslation } from 'react-i18next'; -import { - PiDownloadSimpleBold, - PiFoldersBold, - PiStarBold, - PiStarFill, - PiTrashSimpleBold, -} from 'react-icons/pi'; +import { PiDownloadSimpleBold, PiFoldersBold, PiStarBold, PiStarFill, PiTrashSimpleBold } from 'react-icons/pi'; import { useBulkDownloadImagesMutation, useStarImagesMutation, @@ -30,8 +21,7 @@ const MultipleSelectionMenuItems = () => { const selection = useAppSelector((s) => s.gallery.selection); const customStarUi = useStore($customStarUI); - const isBulkDownloadEnabled = - useFeatureStatus('bulkDownload').isFeatureEnabled; + const isBulkDownloadEnabled = useFeatureStatus('bulkDownload').isFeatureEnabled; const [starImages] = useStarImagesMutation(); const [unstarImages] = useUnstarImagesMutation(); @@ -94,26 +84,17 @@ const MultipleSelectionMenuItems = () => { return ( <> {areAllStarred && ( - } - onClickCapture={handleUnstarSelection} - > + } onClickCapture={handleUnstarSelection}> {customStarUi ? customStarUi.off.text : `Unstar All`} )} {(areAllUnstarred || (!areAllStarred && !areAllUnstarred)) && ( - } - onClickCapture={handleStarSelection} - > + } onClickCapture={handleStarSelection}> {customStarUi ? customStarUi.on.text : `Star All`} )} {isBulkDownloadEnabled && ( - } - onClickCapture={handleBulkDownload} - > + } onClickCapture={handleBulkDownload}> {t('gallery.downloadSelection')} )} @@ -121,11 +102,7 @@ const MultipleSelectionMenuItems = () => { {t('boards.changeBoard')} - } - onClickCapture={handleDeleteSelection} - > + } onClickCapture={handleDeleteSelection}> {t('gallery.deleteSelection')} diff --git a/invokeai/frontend/web/src/features/gallery/components/ImageContextMenu/SingleSelectionMenuItems.tsx b/invokeai/frontend/web/src/features/gallery/components/ImageContextMenu/SingleSelectionMenuItems.tsx index 8147892ac4..4a9b9c6e8b 100644 --- a/invokeai/frontend/web/src/features/gallery/components/ImageContextMenu/SingleSelectionMenuItems.tsx +++ b/invokeai/frontend/web/src/features/gallery/components/ImageContextMenu/SingleSelectionMenuItems.tsx @@ -5,15 +5,9 @@ import { $customStarUI } from 'app/store/nanostores/customStarUI'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import { useCopyImageToClipboard } from 'common/hooks/useCopyImageToClipboard'; import { setInitialCanvasImage } from 'features/canvas/store/canvasSlice'; -import { - imagesToChangeSelected, - isModalOpenChanged, -} from 'features/changeBoardModal/store/slice'; +import { imagesToChangeSelected, isModalOpenChanged } from 'features/changeBoardModal/store/slice'; import { imagesToDeleteSelected } from 'features/deleteImageModal/store/slice'; -import { - sentImageToCanvas, - sentImageToImg2Img, -} from 'features/gallery/store/actions'; +import { sentImageToCanvas, sentImageToImg2Img } from 'features/gallery/store/actions'; import { useRecallParameters } from 'features/parameters/hooks/useRecallParameters'; import { initialImageSelected } from 'features/parameters/store/actions'; import { selectOptimalDimension } from 'features/parameters/store/generationSlice'; @@ -37,10 +31,7 @@ import { PiStarFill, PiTrashSimpleBold, } from 'react-icons/pi'; -import { - useStarImagesMutation, - useUnstarImagesMutation, -} from 'services/api/endpoints/images'; +import { useStarImagesMutation, useUnstarImagesMutation } from 'services/api/endpoints/images'; import { useDebouncedMetadata } from 'services/api/hooks/useDebouncedMetadata'; import type { ImageDTO } from 'services/api/types'; @@ -57,12 +48,9 @@ const SingleSelectionMenuItems = (props: SingleSelectionMenuItemsProps) => { const isCanvasEnabled = useFeatureStatus('unifiedCanvas').isFeatureEnabled; const customStarUi = useStore($customStarUI); - const { metadata, isLoading: isLoadingMetadata } = useDebouncedMetadata( - imageDTO?.image_name - ); + const { metadata, isLoading: isLoadingMetadata } = useDebouncedMetadata(imageDTO?.image_name); - const { getAndLoadEmbeddedWorkflow, getAndLoadEmbeddedWorkflowResult } = - useGetAndLoadEmbeddedWorkflow({}); + const { getAndLoadEmbeddedWorkflow, getAndLoadEmbeddedWorkflowResult } = useGetAndLoadEmbeddedWorkflow({}); const handleLoadWorkflow = useCallback(() => { getAndLoadEmbeddedWorkflow(imageDTO.image_name); @@ -71,8 +59,7 @@ const SingleSelectionMenuItems = (props: SingleSelectionMenuItemsProps) => { const [starImages] = useStarImagesMutation(); const [unstarImages] = useUnstarImagesMutation(); - const { isClipboardAPIAvailable, copyImageToClipboard } = - useCopyImageToClipboard(); + const { isClipboardAPIAvailable, copyImageToClipboard } = useCopyImageToClipboard(); const handleDelete = useCallback(() => { if (!imageDTO) { @@ -81,8 +68,7 @@ const SingleSelectionMenuItems = (props: SingleSelectionMenuItemsProps) => { dispatch(imagesToDeleteSelected([imageDTO])); }, [dispatch, imageDTO]); - const { recallBothPrompts, recallSeed, recallAllParameters } = - useRecallParameters(); + const { recallBothPrompts, recallSeed, recallAllParameters } = useRecallParameters(); // Recall parameters handlers const handleRecallPrompt = useCallback(() => { @@ -159,12 +145,7 @@ const SingleSelectionMenuItems = (props: SingleSelectionMenuItemsProps) => { return ( <> - } - > + }> {t('common.openInNewTab')} {isClipboardAPIAvailable && ( @@ -184,27 +165,17 @@ const SingleSelectionMenuItems = (props: SingleSelectionMenuItemsProps) => { - ) : ( - - ) - } + icon={getAndLoadEmbeddedWorkflowResult.isLoading ? : } onClickCapture={handleLoadWorkflow} isDisabled={!imageDTO.has_workflow} > {t('nodes.loadWorkflow')} : - } + icon={isLoadingMetadata ? : } onClickCapture={handleRemixImage} isDisabled={ - isLoadingMetadata || - (metadata?.positive_prompt === undefined && - metadata?.negative_prompt === undefined) + isLoadingMetadata || (metadata?.positive_prompt === undefined && metadata?.negative_prompt === undefined) } > {t('parameters.remixImage')} @@ -213,9 +184,7 @@ const SingleSelectionMenuItems = (props: SingleSelectionMenuItemsProps) => { icon={isLoadingMetadata ? : } onClickCapture={handleRecallPrompt} isDisabled={ - isLoadingMetadata || - (metadata?.positive_prompt === undefined && - metadata?.negative_prompt === undefined) + isLoadingMetadata || (metadata?.positive_prompt === undefined && metadata?.negative_prompt === undefined) } > {t('parameters.usePrompt')} @@ -235,19 +204,11 @@ const SingleSelectionMenuItems = (props: SingleSelectionMenuItemsProps) => { {t('parameters.useAll')} - } - onClickCapture={handleSendToImageToImage} - id="send-to-img2img" - > + } onClickCapture={handleSendToImageToImage} id="send-to-img2img"> {t('parameters.sendToImg2Img')} {isCanvasEnabled && ( - } - onClickCapture={handleSendToCanvas} - id="send-to-canvas" - > + } onClickCapture={handleSendToCanvas} id="send-to-canvas"> {t('parameters.sendToUnifiedCanvas')} )} @@ -256,26 +217,16 @@ const SingleSelectionMenuItems = (props: SingleSelectionMenuItemsProps) => { {t('boards.changeBoard')} {imageDTO.starred ? ( - } - onClickCapture={handleUnstarImage} - > + } onClickCapture={handleUnstarImage}> {customStarUi ? customStarUi.off.text : t('gallery.unstarImage')} ) : ( - } - onClickCapture={handleStarImage} - > + } onClickCapture={handleStarImage}> {customStarUi ? customStarUi.on.text : t('gallery.starImage')} )} - } - onClickCapture={handleDelete} - > + } onClickCapture={handleDelete}> {t('gallery.deleteImage')} diff --git a/invokeai/frontend/web/src/features/gallery/components/ImageGalleryContent.tsx b/invokeai/frontend/web/src/features/gallery/components/ImageGalleryContent.tsx index 16a1b367b1..bd9afcd417 100644 --- a/invokeai/frontend/web/src/features/gallery/components/ImageGalleryContent.tsx +++ b/invokeai/frontend/web/src/features/gallery/components/ImageGalleryContent.tsx @@ -1,14 +1,4 @@ -import { - Box, - Button, - ButtonGroup, - Flex, - Tab, - TabList, - Tabs, - useDisclosure, - VStack, -} from '@invoke-ai/ui-library'; +import { Box, Button, ButtonGroup, Flex, Tab, TabList, Tabs, useDisclosure, VStack } from '@invoke-ai/ui-library'; import { useStore } from '@nanostores/react'; import { $galleryHeader } from 'app/store/nanostores/galleryHeader'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; @@ -30,8 +20,7 @@ const ImageGalleryContent = () => { const galleryView = useAppSelector((s) => s.gallery.galleryView); const dispatch = useAppDispatch(); const galleryHeader = useStore($galleryHeader); - const { isOpen: isBoardListOpen, onToggle: onToggleBoardList } = - useDisclosure({ defaultIsOpen: true }); + const { isOpen: isBoardListOpen, onToggle: onToggleBoardList } = useDisclosure({ defaultIsOpen: true }); const handleClickImages = useCallback(() => { dispatch(galleryViewChanged('images')); @@ -42,26 +31,11 @@ const ImageGalleryContent = () => { }, [dispatch]); return ( - + {galleryHeader} - - + + @@ -70,12 +44,7 @@ const ImageGalleryContent = () => { - + { const shift = useShiftModifier(); const { t } = useTranslation(); const selectedBoardId = useAppSelector((s) => s.gallery.selectedBoardId); - const { handleClick, isSelected, areMultiplesSelected } = - useMultiselect(imageDTO); + const { handleClick, isSelected, areMultiplesSelected } = useMultiselect(imageDTO); const customStarUi = useStore($customStarUI); - const imageContainerRef = useScrollIntoView( - isSelected, - props.index, - areMultiplesSelected - ); + const imageContainerRef = useScrollIntoView(isSelected, props.index, areMultiplesSelected); const handleDelete = useCallback( (e: MouseEvent) => { @@ -127,22 +114,14 @@ const GalleryImage = (props: HoverableImageProps) => { return ''; }, [imageDTO?.starred, customStarUi]); - const dataTestId = useMemo( - () => getGalleryImageDataTestId(imageDTO?.image_name), - [imageDTO?.image_name] - ); + const dataTestId = useMemo(() => getGalleryImageDataTestId(imageDTO?.image_name), [imageDTO?.image_name]); if (!imageDTO) { return ; } return ( - + { onMouseOut={handleMouseOut} > <> - + {isHovered && shift && ( { const { t } = useTranslation(); const rootRef = useRef(null); const [scroller, setScroller] = useState(null); - const [initialize, osInstance] = useOverlayScrollbars( - overlayScrollbarsParams - ); + const [initialize, osInstance] = useOverlayScrollbars(overlayScrollbarsParams); const selectedBoardId = useAppSelector((s) => s.gallery.selectedBoardId); const { currentViewTotal } = useBoardTotal(selectedBoardId); const virtuosoRangeRef = useRef(null); @@ -49,13 +42,7 @@ const GalleryImageGrid = () => { } = useGalleryImages(); useGalleryHotkeys(); const itemContentFunc: ItemContent = useCallback( - (index, imageName) => ( - - ), + (index, imageName) => , [] ); @@ -95,10 +82,7 @@ const GalleryImageGrid = () => { if (isSuccess && currentData?.ids.length === 0) { return ( - + ); } @@ -135,10 +119,7 @@ const GalleryImageGrid = () => { if (isError) { return ( - + ); } diff --git a/invokeai/frontend/web/src/features/gallery/components/ImageGrid/ImageGridItemContainer.tsx b/invokeai/frontend/web/src/features/gallery/components/ImageGrid/ImageGridItemContainer.tsx index 0e8a278371..16e851c0eb 100644 --- a/invokeai/frontend/web/src/features/gallery/components/ImageGrid/ImageGridItemContainer.tsx +++ b/invokeai/frontend/web/src/features/gallery/components/ImageGrid/ImageGridItemContainer.tsx @@ -7,12 +7,7 @@ export const imageItemContainerTestId = 'image-item-container'; type ItemContainerProps = PropsWithChildren & FlexProps; const ItemContainer = forwardRef((props: ItemContainerProps, ref) => ( - + {props.children} )); diff --git a/invokeai/frontend/web/src/features/gallery/components/ImageGrid/ImageGridListContainer.tsx b/invokeai/frontend/web/src/features/gallery/components/ImageGrid/ImageGridListContainer.tsx index 6a43171975..1dbf7d95a6 100644 --- a/invokeai/frontend/web/src/features/gallery/components/ImageGrid/ImageGridListContainer.tsx +++ b/invokeai/frontend/web/src/features/gallery/components/ImageGrid/ImageGridListContainer.tsx @@ -8,9 +8,7 @@ export const imageListContainerTestId = 'image-list-container'; type ListContainerProps = PropsWithChildren & FlexProps; const ListContainer = forwardRef((props: ListContainerProps, ref) => { - const galleryImageMinimumWidth = useAppSelector( - (s) => s.gallery.galleryImageMinimumWidth - ); + const galleryImageMinimumWidth = useAppSelector((s) => s.gallery.galleryImageMinimumWidth); return ( - `gallery-image-${imageName}`; +export const getGalleryImageDataTestId = (imageName?: string) => `gallery-image-${imageName}`; diff --git a/invokeai/frontend/web/src/features/gallery/components/ImageMetadataViewer/DataViewer.tsx b/invokeai/frontend/web/src/features/gallery/components/ImageMetadataViewer/DataViewer.tsx index 8c5d55deef..8f6cef2c20 100644 --- a/invokeai/frontend/web/src/features/gallery/components/ImageMetadataViewer/DataViewer.tsx +++ b/invokeai/frontend/web/src/features/gallery/components/ImageMetadataViewer/DataViewer.tsx @@ -15,17 +15,11 @@ type Props = { withCopy?: boolean; }; -const overlayscrollbarsOptions = getOverlayScrollbarsParams( - 'scroll', - 'scroll' -).options; +const overlayscrollbarsOptions = getOverlayScrollbarsParams('scroll', 'scroll').options; const DataViewer = (props: Props) => { const { label, data, fileName, withDownload = true, withCopy = true } = props; - const dataString = useMemo( - () => (isString(data) ? data : JSON.stringify(data, null, 2)), - [data] - ); + const dataString = useMemo(() => (isString(data) ? data : JSON.stringify(data, null, 2)), [data]); const handleCopy = useCallback(() => { navigator.clipboard.writeText(dataString); @@ -44,29 +38,9 @@ const DataViewer = (props: Props) => { const { t } = useTranslation(); return ( - - - + + + 
{dataString}
 diff --git a/invokeai/frontend/web/src/features/gallery/components/ImageMetadataViewer/ImageMetadataActions.tsx b/invokeai/frontend/web/src/features/gallery/components/ImageMetadataViewer/ImageMetadataActions.tsx index 3cf0d5db10..e9a1461186 100644 --- a/invokeai/frontend/web/src/features/gallery/components/ImageMetadataViewer/ImageMetadataActions.tsx +++ b/invokeai/frontend/web/src/features/gallery/components/ImageMetadataViewer/ImageMetadataActions.tsx @@ -147,25 +147,19 @@ const ImageMetadataActions = (props: Props) => { const validControlNets: ControlNetMetadataItem[] = useMemo(() => { return metadata?.controlnets - ? metadata.controlnets.filter((controlnet) => - isParameterControlNetModel(controlnet.control_model) - ) + ? metadata.controlnets.filter((controlnet) => isParameterControlNetModel(controlnet.control_model)) : []; }, [metadata?.controlnets]); const validIPAdapters: IPAdapterMetadataItem[] = useMemo(() => { return metadata?.ipAdapters - ? metadata.ipAdapters.filter((ipAdapter) => - isParameterControlNetModel(ipAdapter.ip_adapter_model) - ) + ? metadata.ipAdapters.filter((ipAdapter) => isParameterControlNetModel(ipAdapter.ip_adapter_model)) : []; }, [metadata?.ipAdapters]); const validT2IAdapters: T2IAdapterMetadataItem[] = useMemo(() => { return metadata?.t2iAdapters - ? metadata.t2iAdapters.filter((t2iAdapter) => - isParameterT2IAdapterModel(t2iAdapter.t2i_adapter_model) - ) + ? metadata.t2iAdapters.filter((t2iAdapter) => isParameterT2IAdapterModel(t2iAdapter.t2i_adapter_model)) : []; }, [metadata?.t2iAdapters]); @@ -175,17 +169,9 @@ const ImageMetadataActions = (props: Props) => { return ( <> - {metadata.created_by && ( - - )} + {metadata.created_by && } {metadata.generation_mode && ( - + )} {metadata.positive_prompt && ( { /> )} {metadata.seed !== undefined && metadata.seed !== null && ( - + + )} + {metadata.model !== undefined && metadata.model !== null && metadata.model.model_name && ( + )} - {metadata.model !== undefined && - metadata.model !== null && - metadata.model.model_name && ( - - )} {metadata.width && ( - + )} {metadata.height && ( - + )} {metadata.scheduler && ( - + )} { onClick={handleRecallVaeModel} /> {metadata.steps && ( - + )} {metadata.cfg_scale !== undefined && metadata.cfg_scale !== null && ( + + )} + {metadata.cfg_rescale_multiplier !== undefined && metadata.cfg_rescale_multiplier !== null && ( )} - {metadata.cfg_rescale_multiplier !== undefined && - metadata.cfg_rescale_multiplier !== null && ( - - )} {metadata.strength && ( - + )} {metadata.hrf_enabled && ( { +const ImageMetadataItem = ({ label, value, onClick, isLink, labelPosition, withCopy = false }: MetadataItemProps) => { const { t } = useTranslation(); - const handleCopy = useCallback( - () => navigator.clipboard.writeText(value.toString()), - [value] - ); + const handleCopy = useCallback(() => navigator.clipboard.writeText(value.toString()), [value]); if (!value) { return null; diff --git a/invokeai/frontend/web/src/features/gallery/components/ImageMetadataViewer/ImageMetadataViewer.tsx b/invokeai/frontend/web/src/features/gallery/components/ImageMetadataViewer/ImageMetadataViewer.tsx index d0d18c93fc..6cb4f6ddd3 100644 --- a/invokeai/frontend/web/src/features/gallery/components/ImageMetadataViewer/ImageMetadataViewer.tsx +++ b/invokeai/frontend/web/src/features/gallery/components/ImageMetadataViewer/ImageMetadataViewer.tsx @@ -1,12 +1,4 @@ -import { - ExternalLink, - Flex, - Tab, - TabList, - TabPanel, - TabPanels, - Tabs, -} from '@invoke-ai/ui-library'; +import { ExternalLink, Flex, Tab, TabList, TabPanel, TabPanels, Tabs } from '@invoke-ai/ui-library'; import { IAINoContentFallback } from 'common/components/IAIImageFallback'; import ScrollableContent from 'common/components/OverlayScrollbars/ScrollableContent'; import { memo } from 'react'; @@ -46,14 +38,7 @@ const ImageMetadataViewer = ({ image }: ImageMetadataViewerProps) => { > - + {t('metadata.recallParameters')} {t('metadata.metadata')} diff --git a/invokeai/frontend/web/src/features/gallery/components/NextPrevImageButtons.tsx b/invokeai/frontend/web/src/features/gallery/components/NextPrevImageButtons.tsx index f526a1077f..9949fb5bd5 100644 --- a/invokeai/frontend/web/src/features/gallery/components/NextPrevImageButtons.tsx +++ b/invokeai/frontend/web/src/features/gallery/components/NextPrevImageButtons.tsx @@ -4,11 +4,7 @@ import { useGalleryImages } from 'features/gallery/hooks/useGalleryImages'; import { useGalleryNavigation } from 'features/gallery/hooks/useGalleryNavigation'; import { memo } from 'react'; import { useTranslation } from 'react-i18next'; -import { - PiCaretDoubleRightBold, - PiCaretLeftBold, - PiCaretRightBold, -} from 'react-icons/pi'; +import { PiCaretDoubleRightBold, PiCaretLeftBold, PiCaretRightBold } from 'react-icons/pi'; const nextPrevButtonStyles: ChakraProps['sx'] = { color: 'base.100', @@ -18,8 +14,7 @@ const nextPrevButtonStyles: ChakraProps['sx'] = { const NextPrevImageButtons = () => { const { t } = useTranslation(); - const { handleLeftImage, handleRightImage, isOnFirstImage, isOnLastImage } = - useGalleryNavigation(); + const { handleLeftImage, handleRightImage, isOnFirstImage, isOnLastImage } = useGalleryNavigation(); const { areMoreImagesAvailable, @@ -29,12 +24,7 @@ const NextPrevImageButtons = () => { return ( - + {!isOnFirstImage && ( { /> )} - + {!isOnLastImage && ( { queryResult: { isFetching }, } = useGalleryImages(); - const { - handleLeftImage, - handleRightImage, - handleUpImage, - handleDownImage, - isOnLastImage, - areImagesBelowCurrent, - } = useGalleryNavigation(); + const { handleLeftImage, handleRightImage, handleUpImage, handleDownImage, isOnLastImage, areImagesBelowCurrent } = + useGalleryNavigation(); useHotkeys( 'left', @@ -40,13 +34,7 @@ export const useGalleryHotkeys = () => { handleRightImage(); } }, - [ - isOnLastImage, - areMoreImagesAvailable, - handleLoadMoreImages, - isFetching, - handleRightImage, - ] + [isOnLastImage, areMoreImagesAvailable, handleLoadMoreImages, isFetching, handleRightImage] ); useHotkeys( @@ -68,12 +56,6 @@ export const useGalleryHotkeys = () => { handleDownImage(); }, { preventDefault: true }, - [ - areImagesBelowCurrent, - areMoreImagesAvailable, - handleLoadMoreImages, - isFetching, - handleDownImage, - ] + [areImagesBelowCurrent, areMoreImagesAvailable, handleLoadMoreImages, isFetching, handleDownImage] ); }; diff --git a/invokeai/frontend/web/src/features/gallery/hooks/useGalleryImages.ts b/invokeai/frontend/web/src/features/gallery/hooks/useGalleryImages.ts index 773fba9013..b3310d5e34 100644 --- a/invokeai/frontend/web/src/features/gallery/hooks/useGalleryImages.ts +++ b/invokeai/frontend/web/src/features/gallery/hooks/useGalleryImages.ts @@ -2,10 +2,7 @@ import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import { selectListImagesQueryArgs } from 'features/gallery/store/gallerySelectors'; import { moreImagesLoaded } from 'features/gallery/store/gallerySlice'; import { useCallback, useMemo } from 'react'; -import { - useGetBoardAssetsTotalQuery, - useGetBoardImagesTotalQuery, -} from 'services/api/endpoints/boards'; +import { useGetBoardAssetsTotalQuery, useGetBoardImagesTotalQuery } from 'services/api/endpoints/boards'; import { useListImagesQuery } from 'services/api/endpoints/images'; /** diff --git a/invokeai/frontend/web/src/features/gallery/hooks/useGalleryNavigation.ts b/invokeai/frontend/web/src/features/gallery/hooks/useGalleryNavigation.ts index a0d6d208a4..b6fdb183e6 100644 --- a/invokeai/frontend/web/src/features/gallery/hooks/useGalleryNavigation.ts +++ b/invokeai/frontend/web/src/features/gallery/hooks/useGalleryNavigation.ts @@ -29,14 +29,10 @@ import { imagesSelectors } from 'services/api/util'; */ const getImagesPerRow = (): number => { const widthOfGalleryImage = - document - .querySelector(`[data-testid="${imageItemContainerTestId}"]`) - ?.getBoundingClientRect().width ?? 1; + document.querySelector(`[data-testid="${imageItemContainerTestId}"]`)?.getBoundingClientRect().width ?? 1; const widthOfGalleryGrid = - document - .querySelector(`[data-testid="${imageListContainerTestId}"]`) - ?.getBoundingClientRect().width ?? 0; + document.querySelector(`[data-testid="${imageListContainerTestId}"]`)?.getBoundingClientRect().width ?? 0; const imagesPerRow = Math.round(widthOfGalleryGrid / widthOfGalleryImage); @@ -59,9 +55,7 @@ const scrollToImage = (imageName: string, index: number) => { return; } - const imageElement = document.querySelector( - `[data-testid="${getGalleryImageDataTestId(imageName)}"]` - ); + const imageElement = document.querySelector(`[data-testid="${getGalleryImageDataTestId(imageName)}"]`); const itemRect = imageElement?.getBoundingClientRect(); const rootRect = root.getBoundingClientRect(); if (!itemRect || !getIsVisible(itemRect, rootRect)) { @@ -90,9 +84,7 @@ const getUpImage = (images: ImageDTO[], currentIndex: number) => { const imagesPerRow = getImagesPerRow(); // If we are on the first row, we want to stay on the first row, not go to first image const isOnFirstRow = currentIndex < imagesPerRow; - const index = isOnFirstRow - ? currentIndex - : clamp(currentIndex - imagesPerRow, 0, images.length - 1); + const index = isOnFirstRow ? currentIndex : clamp(currentIndex - imagesPerRow, 0, images.length - 1); const image = images[index]; return { index, image }; }; @@ -101,9 +93,7 @@ const getDownImage = (images: ImageDTO[], currentIndex: number) => { const imagesPerRow = getImagesPerRow(); // If there are no images below the current image, we want to stay where we are const areImagesBelow = currentIndex < images.length - imagesPerRow; - const index = areImagesBelow - ? clamp(currentIndex + imagesPerRow, 0, images.length - 1) - : currentIndex; + const index = areImagesBelow ? clamp(currentIndex + imagesPerRow, 0, images.length - 1) : currentIndex; const image = images[index]; return { index, image }; }; @@ -137,17 +127,12 @@ export const useGalleryNavigation = (): UseGalleryNavigationReturn => { const { queryResult: { data }, } = useGalleryImages(); - const loadedImagesCount = useMemo( - () => data?.ids.length ?? 0, - [data?.ids.length] - ); + const loadedImagesCount = useMemo(() => data?.ids.length ?? 0, [data?.ids.length]); const lastSelectedImageIndex = useMemo(() => { if (!data || !lastSelectedImage) { return 0; } - return imagesSelectors - .selectAll(data) - .findIndex((i) => i.image_name === lastSelectedImage.image_name); + return imagesSelectors.selectAll(data).findIndex((i) => i.image_name === lastSelectedImage.image_name); }, [lastSelectedImage, data]); const handleNavigation = useCallback( @@ -155,10 +140,7 @@ export const useGalleryNavigation = (): UseGalleryNavigationReturn => { if (!data) { return; } - const { index, image } = getImageFuncs[direction]( - imagesSelectors.selectAll(data), - lastSelectedImageIndex - ); + const { index, image } = getImageFuncs[direction](imagesSelectors.selectAll(data), lastSelectedImageIndex); if (!image || index === lastSelectedImageIndex) { return; } @@ -168,10 +150,7 @@ export const useGalleryNavigation = (): UseGalleryNavigationReturn => { [dispatch, lastSelectedImageIndex, data] ); - const isOnFirstImage = useMemo( - () => lastSelectedImageIndex === 0, - [lastSelectedImageIndex] - ); + const isOnFirstImage = useMemo(() => lastSelectedImageIndex === 0, [lastSelectedImageIndex]); const isOnLastImage = useMemo( () => lastSelectedImageIndex === loadedImagesCount - 1, diff --git a/invokeai/frontend/web/src/features/gallery/hooks/useMultiselect.ts b/invokeai/frontend/web/src/features/gallery/hooks/useMultiselect.ts index b32fec6e02..05e7d075e5 100644 --- a/invokeai/frontend/web/src/features/gallery/hooks/useMultiselect.ts +++ b/invokeai/frontend/web/src/features/gallery/hooks/useMultiselect.ts @@ -1,10 +1,7 @@ import { createSelector } from '@reduxjs/toolkit'; import { galleryImageClicked } from 'app/store/middleware/listenerMiddleware/listeners/galleryImageClicked'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; -import { - selectGallerySlice, - selectionChanged, -} from 'features/gallery/store/gallerySlice'; +import { selectGallerySlice, selectionChanged } from 'features/gallery/store/gallerySlice'; import { useFeatureStatus } from 'features/system/hooks/useFeatureStatus'; import type { MouseEvent } from 'react'; import { useCallback, useMemo } from 'react'; @@ -12,9 +9,7 @@ import type { ImageDTO } from 'services/api/types'; export const useMultiselect = (imageDTO?: ImageDTO) => { const dispatch = useAppDispatch(); - const areMultiplesSelected = useAppSelector( - (s) => s.gallery.selection.length > 1 - ); + const areMultiplesSelected = useAppSelector((s) => s.gallery.selection.length > 1); const selectIsSelected = useMemo( () => createSelector(selectGallerySlice, (gallery) => diff --git a/invokeai/frontend/web/src/features/gallery/hooks/useScrollIntoView.ts b/invokeai/frontend/web/src/features/gallery/hooks/useScrollIntoView.ts index 01579cfe79..9947a4d78c 100644 --- a/invokeai/frontend/web/src/features/gallery/hooks/useScrollIntoView.ts +++ b/invokeai/frontend/web/src/features/gallery/hooks/useScrollIntoView.ts @@ -16,11 +16,7 @@ import { useEffect, useRef } from 'react'; * @param selectionCount The number of images selected. * @returns */ -export const useScrollIntoView = ( - isSelected: boolean, - index: number, - areMultiplesSelected: boolean -) => { +export const useScrollIntoView = (isSelected: boolean, index: number, areMultiplesSelected: boolean) => { const imageContainerRef = useRef(null); useEffect(() => { diff --git a/invokeai/frontend/web/src/features/gallery/store/actions.ts b/invokeai/frontend/web/src/features/gallery/store/actions.ts index 5b2891e147..4ebf4e021d 100644 --- a/invokeai/frontend/web/src/features/gallery/store/actions.ts +++ b/invokeai/frontend/web/src/features/gallery/store/actions.ts @@ -7,10 +7,9 @@ export type RequestedBoardImagesDeletionArg = { imagesUsage: ImageUsage; }; -export const requestedBoardImagesDeletion = - createAction( - 'gallery/requestedBoardImagesDeletion' - ); +export const requestedBoardImagesDeletion = createAction( + 'gallery/requestedBoardImagesDeletion' +); export const sentImageToCanvas = createAction('gallery/sentImageToCanvas'); diff --git a/invokeai/frontend/web/src/features/gallery/store/gallerySelectors.ts b/invokeai/frontend/web/src/features/gallery/store/gallerySelectors.ts index ceea56b2da..1c64fc7809 100644 --- a/invokeai/frontend/web/src/features/gallery/store/gallerySelectors.ts +++ b/invokeai/frontend/web/src/features/gallery/store/gallerySelectors.ts @@ -1,9 +1,6 @@ import { createMemoizedSelector } from 'app/store/createMemoizedSelector'; import { selectGallerySlice } from 'features/gallery/store/gallerySlice'; -import { - ASSETS_CATEGORIES, - IMAGE_CATEGORIES, -} from 'features/gallery/store/types'; +import { ASSETS_CATEGORIES, IMAGE_CATEGORIES } from 'features/gallery/store/types'; import type { ListImagesArgs } from 'services/api/types'; export const selectLastSelectedImage = createMemoizedSelector( @@ -15,8 +12,7 @@ export const selectListImagesQueryArgs = createMemoizedSelector( selectGallerySlice, (gallery): ListImagesArgs => ({ board_id: gallery.selectedBoardId, - categories: - gallery.galleryView === 'images' ? IMAGE_CATEGORIES : ASSETS_CATEGORIES, + categories: gallery.galleryView === 'images' ? IMAGE_CATEGORIES : ASSETS_CATEGORIES, offset: gallery.offset, limit: gallery.limit, is_intermediate: false, diff --git a/invokeai/frontend/web/src/features/gallery/store/gallerySlice.ts b/invokeai/frontend/web/src/features/gallery/store/gallerySlice.ts index d1158173ed..6adad0be70 100644 --- a/invokeai/frontend/web/src/features/gallery/store/gallerySlice.ts +++ b/invokeai/frontend/web/src/features/gallery/store/gallerySlice.ts @@ -41,10 +41,7 @@ export const gallerySlice = createSlice({ autoAssignBoardOnClickChanged: (state, action: PayloadAction) => { state.autoAssignBoardOnClick = action.payload; }, - boardIdSelected: ( - state, - action: PayloadAction<{ boardId: BoardId; selectedImageName?: string }> - ) => { + boardIdSelected: (state, action: PayloadAction<{ boardId: BoardId; selectedImageName?: string }>) => { state.selectedBoardId = action.payload.boardId; state.galleryView = 'images'; state.offset = 0; @@ -86,19 +83,16 @@ export const gallerySlice = createSlice({ state.autoAddBoardId = 'none'; } }); - builder.addMatcher( - boardsApi.endpoints.listAllBoards.matchFulfilled, - (state, action) => { - const boards = action.payload; - if (!state.autoAddBoardId) { - return; - } - - if (!boards.map((b) => b.board_id).includes(state.autoAddBoardId)) { - state.autoAddBoardId = 'none'; - } + builder.addMatcher(boardsApi.endpoints.listAllBoards.matchFulfilled, (state, action) => { + const boards = action.payload; + if (!state.autoAddBoardId) { + return; } - ); + + if (!boards.map((b) => b.board_id).includes(state.autoAddBoardId)) { + state.autoAddBoardId = 'none'; + } + }); }, }); diff --git a/invokeai/frontend/web/src/features/gallery/store/types.ts b/invokeai/frontend/web/src/features/gallery/store/types.ts index 9f7ceedc6a..6ac9269b36 100644 --- a/invokeai/frontend/web/src/features/gallery/store/types.ts +++ b/invokeai/frontend/web/src/features/gallery/store/types.ts @@ -1,12 +1,7 @@ import type { ImageCategory, ImageDTO } from 'services/api/types'; export const IMAGE_CATEGORIES: ImageCategory[] = ['general']; -export const ASSETS_CATEGORIES: ImageCategory[] = [ - 'control', - 'mask', - 'user', - 'other', -]; +export const ASSETS_CATEGORIES: ImageCategory[] = ['control', 'mask', 'user', 'other']; export const INITIAL_IMAGE_LIMIT = 100; export const IMAGE_LIMIT = 20; diff --git a/invokeai/frontend/web/src/features/gallery/util/getScrollToIndexAlign.ts b/invokeai/frontend/web/src/features/gallery/util/getScrollToIndexAlign.ts index 46be56db88..686f89cd45 100644 --- a/invokeai/frontend/web/src/features/gallery/util/getScrollToIndexAlign.ts +++ b/invokeai/frontend/web/src/features/gallery/util/getScrollToIndexAlign.ts @@ -6,10 +6,7 @@ import type { ListRange } from 'react-virtuoso'; * @param range The range of items currently visible. * @returns */ -export const getScrollToIndexAlign = ( - index: number, - range: ListRange -): 'start' | 'end' => { +export const getScrollToIndexAlign = (index: number, range: ListRange): 'start' | 'end' => { if (index > (range.endIndex - range.startIndex) / 2 + range.startIndex) { return 'end'; } diff --git a/invokeai/frontend/web/src/features/hrf/components/ParamHrfMethod.tsx b/invokeai/frontend/web/src/features/hrf/components/ParamHrfMethod.tsx index e045bdf767..8a94544233 100644 --- a/invokeai/frontend/web/src/features/hrf/components/ParamHrfMethod.tsx +++ b/invokeai/frontend/web/src/features/hrf/components/ParamHrfMethod.tsx @@ -26,10 +26,7 @@ const ParamHrfMethodSelect = () => { [dispatch] ); - const value = useMemo( - () => options.find((o) => o.value === hrfMethod), - [hrfMethod] - ); + const value = useMemo(() => options.find((o) => o.value === hrfMethod), [hrfMethod]); return ( diff --git a/invokeai/frontend/web/src/features/hrf/components/ParamHrfStrength.tsx b/invokeai/frontend/web/src/features/hrf/components/ParamHrfStrength.tsx index ca42ae5055..c663989b08 100644 --- a/invokeai/frontend/web/src/features/hrf/components/ParamHrfStrength.tsx +++ b/invokeai/frontend/web/src/features/hrf/components/ParamHrfStrength.tsx @@ -1,9 +1,4 @@ -import { - CompositeNumberInput, - CompositeSlider, - FormControl, - FormLabel, -} from '@invoke-ai/ui-library'; +import { CompositeNumberInput, CompositeSlider, FormControl, FormLabel } from '@invoke-ai/ui-library'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import { setHrfStrength } from 'features/hrf/store/hrfSlice'; import { memo, useCallback } from 'react'; @@ -14,12 +9,8 @@ const ParamHrfStrength = () => { const initial = useAppSelector((s) => s.config.sd.hrfStrength.initial); const sliderMin = useAppSelector((s) => s.config.sd.hrfStrength.sliderMin); const sliderMax = useAppSelector((s) => s.config.sd.hrfStrength.sliderMax); - const numberInputMin = useAppSelector( - (s) => s.config.sd.hrfStrength.numberInputMin - ); - const numberInputMax = useAppSelector( - (s) => s.config.sd.hrfStrength.numberInputMax - ); + const numberInputMin = useAppSelector((s) => s.config.sd.hrfStrength.numberInputMin); + const numberInputMax = useAppSelector((s) => s.config.sd.hrfStrength.numberInputMax); const coarseStep = useAppSelector((s) => s.config.sd.hrfStrength.coarseStep); const fineStep = useAppSelector((s) => s.config.sd.hrfStrength.fineStep); const dispatch = useAppDispatch(); diff --git a/invokeai/frontend/web/src/features/hrf/components/ParamHrfToggle.tsx b/invokeai/frontend/web/src/features/hrf/components/ParamHrfToggle.tsx index 5bdd85a679..fdd2c97e9f 100644 --- a/invokeai/frontend/web/src/features/hrf/components/ParamHrfToggle.tsx +++ b/invokeai/frontend/web/src/features/hrf/components/ParamHrfToggle.tsx @@ -12,8 +12,7 @@ const ParamHrfToggle = () => { const hrfEnabled = useAppSelector((s) => s.hrf.hrfEnabled); const handleHrfEnabled = useCallback( - (e: ChangeEvent) => - dispatch(setHrfEnabled(e.target.checked)), + (e: ChangeEvent) => dispatch(setHrfEnabled(e.target.checked)), [dispatch] ); diff --git a/invokeai/frontend/web/src/features/hrf/store/hrfSlice.ts b/invokeai/frontend/web/src/features/hrf/store/hrfSlice.ts index 5190272b97..ac846ec58e 100644 --- a/invokeai/frontend/web/src/features/hrf/store/hrfSlice.ts +++ b/invokeai/frontend/web/src/features/hrf/store/hrfSlice.ts @@ -1,10 +1,7 @@ import type { PayloadAction } from '@reduxjs/toolkit'; import { createSlice } from '@reduxjs/toolkit'; import type { RootState } from 'app/store/store'; -import type { - ParameterHRFMethod, - ParameterStrength, -} from 'features/parameters/types/parameterSchemas'; +import type { ParameterHRFMethod, ParameterStrength } from 'features/parameters/types/parameterSchemas'; export interface HRFState { _version: 1; diff --git a/invokeai/frontend/web/src/features/lora/components/LoRAList.tsx b/invokeai/frontend/web/src/features/lora/components/LoRAList.tsx index 3983062af1..9f37454d16 100644 --- a/invokeai/frontend/web/src/features/lora/components/LoRAList.tsx +++ b/invokeai/frontend/web/src/features/lora/components/LoRAList.tsx @@ -6,9 +6,7 @@ import { selectLoraSlice } from 'features/lora/store/loraSlice'; import { map } from 'lodash-es'; import { memo } from 'react'; -const selectLoRAsArray = createMemoizedSelector(selectLoraSlice, (lora) => - map(lora.loras) -); +const selectLoRAsArray = createMemoizedSelector(selectLoraSlice, (lora) => map(lora.loras)); export const LoRAList = memo(() => { const lorasArray = useAppSelector(selectLoRAsArray); diff --git a/invokeai/frontend/web/src/features/lora/components/LoRASelect.tsx b/invokeai/frontend/web/src/features/lora/components/LoRASelect.tsx index aa866e8a55..30ef99d2f7 100644 --- a/invokeai/frontend/web/src/features/lora/components/LoRASelect.tsx +++ b/invokeai/frontend/web/src/features/lora/components/LoRASelect.tsx @@ -9,19 +9,14 @@ import { useTranslation } from 'react-i18next'; import type { LoRAModelConfigEntity } from 'services/api/endpoints/models'; import { useGetLoRAModelsQuery } from 'services/api/endpoints/models'; -const selectAddedLoRAs = createMemoizedSelector( - selectLoraSlice, - (lora) => lora.loras -); +const selectAddedLoRAs = createMemoizedSelector(selectLoraSlice, (lora) => lora.loras); const LoRASelect = () => { const dispatch = useAppDispatch(); const { data, isLoading } = useGetLoRAModelsQuery(); const { t } = useTranslation(); const addedLoRAs = useAppSelector(selectAddedLoRAs); - const currentBaseModel = useAppSelector( - (s) => s.generation.model?.base_model - ); + const currentBaseModel = useAppSelector((s) => s.generation.model?.base_model); const getIsDisabled = (lora: LoRAModelConfigEntity): boolean => { const isCompatible = currentBaseModel === lora.base_model; diff --git a/invokeai/frontend/web/src/features/lora/store/loraSlice.ts b/invokeai/frontend/web/src/features/lora/store/loraSlice.ts index c61a42af02..8562090fbc 100644 --- a/invokeai/frontend/web/src/features/lora/store/loraSlice.ts +++ b/invokeai/frontend/web/src/features/lora/store/loraSlice.ts @@ -31,10 +31,7 @@ export const loraSlice = createSlice({ const { model_name, id, base_model } = action.payload; state.loras[id] = { id, model_name, base_model, ...defaultLoRAConfig }; }, - loraRecalled: ( - state, - action: PayloadAction - ) => { + loraRecalled: (state, action: PayloadAction) => { const { model_name, id, base_model, weight } = action.payload; state.loras[id] = { id, model_name, base_model, weight }; }, @@ -45,10 +42,7 @@ export const loraSlice = createSlice({ lorasCleared: (state) => { state.loras = {}; }, - loraWeightChanged: ( - state, - action: PayloadAction<{ id: string; weight: number }> - ) => { + loraWeightChanged: (state, action: PayloadAction<{ id: string; weight: number }>) => { const { id, weight } = action.payload; const lora = state.loras[id]; if (!lora) { @@ -67,14 +61,8 @@ export const loraSlice = createSlice({ }, }); -export const { - loraAdded, - loraRemoved, - loraWeightChanged, - loraWeightReset, - lorasCleared, - loraRecalled, -} = loraSlice.actions; +export const { loraAdded, loraRemoved, loraWeightChanged, loraWeightReset, lorasCleared, loraRecalled } = + loraSlice.actions; export default loraSlice.reducer; diff --git a/invokeai/frontend/web/src/features/modelManager/components/SyncModels/SyncModelsIconButton.tsx b/invokeai/frontend/web/src/features/modelManager/components/SyncModels/SyncModelsIconButton.tsx index 3cf5f7444a..986a99bd0b 100644 --- a/invokeai/frontend/web/src/features/modelManager/components/SyncModels/SyncModelsIconButton.tsx +++ b/invokeai/frontend/web/src/features/modelManager/components/SyncModels/SyncModelsIconButton.tsx @@ -7,29 +7,27 @@ import { PiArrowsClockwiseBold } from 'react-icons/pi'; import { useSyncModels } from './useSyncModels'; -export const SyncModelsIconButton = memo( - (props: Omit) => { - const { t } = useTranslation(); - const { syncModels, isLoading } = useSyncModels(); - const isSyncModelEnabled = useFeatureStatus('syncModels').isFeatureEnabled; +export const SyncModelsIconButton = memo((props: Omit) => { + const { t } = useTranslation(); + const { syncModels, isLoading } = useSyncModels(); + const isSyncModelEnabled = useFeatureStatus('syncModels').isFeatureEnabled; - if (!isSyncModelEnabled) { - return null; - } - - return ( - } - tooltip={t('modelManager.syncModels')} - aria-label={t('modelManager.syncModels')} - isLoading={isLoading} - onClick={syncModels} - size="sm" - variant="ghost" - {...props} - /> - ); + if (!isSyncModelEnabled) { + return null; } -); + + return ( + } + tooltip={t('modelManager.syncModels')} + aria-label={t('modelManager.syncModels')} + isLoading={isLoading} + onClick={syncModels} + size="sm" + variant="ghost" + {...props} + /> + ); +}); SyncModelsIconButton.displayName = 'SyncModelsIconButton'; diff --git a/invokeai/frontend/web/src/features/modelManager/store/modelManagerSlice.ts b/invokeai/frontend/web/src/features/modelManager/store/modelManagerSlice.ts index 829e9d4d9b..5da08d7f54 100644 --- a/invokeai/frontend/web/src/features/modelManager/store/modelManagerSlice.ts +++ b/invokeai/frontend/web/src/features/modelManager/store/modelManagerSlice.ts @@ -27,8 +27,7 @@ export const modelManagerSlice = createSlice({ }, }); -export const { setSearchFolder, setAdvancedAddScanModel } = - modelManagerSlice.actions; +export const { setSearchFolder, setAdvancedAddScanModel } = modelManagerSlice.actions; export default modelManagerSlice.reducer; diff --git a/invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/AddModels.tsx b/invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/AddModels.tsx index a056e54a10..9796a0e6a3 100644 --- a/invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/AddModels.tsx +++ b/invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/AddModels.tsx @@ -7,35 +7,16 @@ import SimpleAddModels from './SimpleAddModels'; const AddModels = () => { const { t } = useTranslation(); - const [addModelMode, setAddModelMode] = useState<'simple' | 'advanced'>( - 'simple' - ); + const [addModelMode, setAddModelMode] = useState<'simple' | 'advanced'>('simple'); const handleAddModelSimple = useCallback(() => setAddModelMode('simple'), []); - const handleAddModelAdvanced = useCallback( - () => setAddModelMode('advanced'), - [] - ); + const handleAddModelAdvanced = useCallback(() => setAddModelMode('advanced'), []); return ( - + - - diff --git a/invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/AdvancedAddCheckpoint.tsx b/invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/AdvancedAddCheckpoint.tsx index 9067d243fb..31f4312eb5 100644 --- a/invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/AdvancedAddCheckpoint.tsx +++ b/invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/AdvancedAddCheckpoint.tsx @@ -1,12 +1,4 @@ -import { - Button, - Checkbox, - Flex, - FormControl, - FormErrorMessage, - FormLabel, - Input, -} from '@invoke-ai/ui-library'; +import { Button, Checkbox, Flex, FormControl, FormErrorMessage, FormLabel, Input } from '@invoke-ai/ui-library'; import { useAppDispatch } from 'app/store/storeHooks'; import { setAdvancedAddScanModel } from 'features/modelManager/store/modelManagerSlice'; import BaseModelSelect from 'features/modelManager/subpanels/shared/BaseModelSelect'; @@ -113,10 +105,7 @@ const AdvancedAddCheckpoint = (props: AdvancedAddCheckpointProps) => { [getValues, setValue] ); - const handleChangeUseCustomConfig = useCallback( - () => setUseCustomConfig((prev) => !prev), - [] - ); + const handleChangeUseCustomConfig = useCallback(() => setUseCustomConfig((prev) => !prev), []); return (
@@ -125,30 +114,21 @@ const AdvancedAddCheckpoint = (props: AdvancedAddCheckpointProps) => { {t('modelManager.model')} - value.trim().length > 3 || 'Must be at least 3 characters', + validate: (value) => value.trim().length > 3 || 'Must be at least 3 characters', })} /> - {errors.model_name?.message && ( - {errors.model_name?.message} - )} + {errors.model_name?.message && {errors.model_name?.message}} - - control={control} - name="base_model" - /> + control={control} name="base_model" /> {t('modelManager.modelLocation')} - value.trim().length > 0 || 'Must provide a path', + validate: (value) => value.trim().length > 0 || 'Must provide a path', onBlur, })} /> - {errors.path?.message && ( - {errors.path?.message} - )} + {errors.path?.message && {errors.path?.message}} {t('modelManager.description')} @@ -158,10 +138,7 @@ const AdvancedAddCheckpoint = (props: AdvancedAddCheckpointProps) => { {t('modelManager.vaeLocation')} - - control={control} - name="variant" - /> + control={control} name="variant" /> {!useCustomConfig ? ( @@ -173,10 +150,7 @@ const AdvancedAddCheckpoint = (props: AdvancedAddCheckpointProps) => { )} {t('modelManager.useCustomConfig')} - + - ) : ( - + {t('common.installed')} )} @@ -162,15 +125,7 @@ const FoundModelsList = () => { if (!foundModels || foundModels.length === 0) { return ( - + {t('modelManager.noModels')} ); @@ -204,10 +159,7 @@ const FoundModelsList = () => { return renderFoundModels(); }; -const foundModelsFilter = ( - data: SearchFolderResponse | undefined, - nameFilter: string -) => { +const foundModelsFilter = (data: SearchFolderResponse | undefined, nameFilter: string) => { const filteredModels: SearchFolderResponse = []; forEach(data, (model) => { if (!model) { diff --git a/invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/ScanAdvancedAddModels.tsx b/invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/ScanAdvancedAddModels.tsx index c008038548..445eb7ed5a 100644 --- a/invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/ScanAdvancedAddModels.tsx +++ b/invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/ScanAdvancedAddModels.tsx @@ -1,13 +1,5 @@ import type { ComboboxOnChange, ComboboxOption } from '@invoke-ai/ui-library'; -import { - Box, - Combobox, - Flex, - FormControl, - FormLabel, - IconButton, - Text, -} from '@invoke-ai/ui-library'; +import { Box, Combobox, Flex, FormControl, FormLabel, IconButton, Text } from '@invoke-ai/ui-library'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import { setAdvancedAddScanModel } from 'features/modelManager/store/modelManagerSlice'; import { memo, useCallback, useEffect, useMemo, useState } from 'react'; @@ -20,9 +12,7 @@ import type { ManualAddMode } from './AdvancedAddModels'; import { isManualAddMode } from './AdvancedAddModels'; const ScanAdvancedAddModels = () => { - const advancedAddScanModel = useAppSelector( - (s) => s.modelmanager.advancedAddScanModel - ); + const advancedAddScanModel = useAppSelector((s) => s.modelmanager.advancedAddScanModel); const { t } = useTranslation(); @@ -34,26 +24,19 @@ const ScanAdvancedAddModels = () => { [t] ); - const [advancedAddMode, setAdvancedAddMode] = - useState('diffusers'); + const [advancedAddMode, setAdvancedAddMode] = useState('diffusers'); const [isCheckpoint, setIsCheckpoint] = useState(true); useEffect(() => { - advancedAddScanModel && - ['.ckpt', '.safetensors', '.pth', '.pt'].some((ext) => - advancedAddScanModel.endsWith(ext) - ) + advancedAddScanModel && ['.ckpt', '.safetensors', '.pth', '.pt'].some((ext) => advancedAddScanModel.endsWith(ext)) ? setAdvancedAddMode('checkpoint') : setAdvancedAddMode('diffusers'); }, [advancedAddScanModel, setAdvancedAddMode, isCheckpoint]); const dispatch = useAppDispatch(); - const handleClickSetAdvanced = useCallback( - () => dispatch(setAdvancedAddScanModel(null)), - [dispatch] - ); + const handleClickSetAdvanced = useCallback(() => dispatch(setAdvancedAddScanModel(null)), [dispatch]); const handleChangeAddMode = useCallback((v) => { if (!isManualAddMode(v?.value)) { @@ -67,10 +50,7 @@ const ScanAdvancedAddModels = () => { } }, []); - const value = useMemo( - () => options.find((o) => o.value === advancedAddMode), - [options, advancedAddMode] - ); + const value = useMemo(() => options.find((o) => o.value === advancedAddMode), [options, advancedAddMode]); if (!advancedAddScanModel) { return null; @@ -90,9 +70,7 @@ const ScanAdvancedAddModels = () => { > - {isCheckpoint || advancedAddMode === 'checkpoint' - ? 'Add Checkpoint Model' - : 'Add Diffusers Model'} + {isCheckpoint || advancedAddMode === 'checkpoint' ? 'Add Checkpoint Model' : 'Add Diffusers Model'} } @@ -103,22 +81,12 @@ const ScanAdvancedAddModels = () => { {t('modelManager.modelType')} - + {isCheckpoint ? ( - + ) : ( - + )} ); diff --git a/invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/SearchFolderForm.tsx b/invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/SearchFolderForm.tsx index 3441ab0d4f..dc1d39f7aa 100644 --- a/invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/SearchFolderForm.tsx +++ b/invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/SearchFolderForm.tsx @@ -1,18 +1,11 @@ import { Flex, IconButton, Input, Text } from '@invoke-ai/ui-library'; import { useForm } from '@mantine/form'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; -import { - setAdvancedAddScanModel, - setSearchFolder, -} from 'features/modelManager/store/modelManagerSlice'; +import { setAdvancedAddScanModel, setSearchFolder } from 'features/modelManager/store/modelManagerSlice'; import type { CSSProperties } from 'react'; import { memo, useCallback } from 'react'; import { useTranslation } from 'react-i18next'; -import { - PiArrowsCounterClockwiseBold, - PiMagnifyingGlassBold, - PiTrashSimpleBold, -} from 'react-icons/pi'; +import { PiArrowsCounterClockwiseBold, PiMagnifyingGlassBold, PiTrashSimpleBold } from 'react-icons/pi'; import { useGetModelsInFolderQuery } from 'services/api/endpoints/models'; type SearchFolderForm = { @@ -52,38 +45,16 @@ function SearchFolderForm() { }, [dispatch]); return ( - - searchFolderFormSubmitHandler(values) - )} - style={formStyles} - > + searchFolderFormSubmitHandler(values))} style={formStyles}> - + {t('common.folder')} {!searchFolder ? ( - + ) : ( - + {searchFolder} )} diff --git a/invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/SimpleAddModels.tsx b/invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/SimpleAddModels.tsx index aa74fc419f..d7f705aedc 100644 --- a/invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/SimpleAddModels.tsx +++ b/invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/SimpleAddModels.tsx @@ -1,12 +1,5 @@ import type { ComboboxOption } from '@invoke-ai/ui-library'; -import { - Button, - Combobox, - Flex, - FormControl, - FormLabel, - Input, -} from '@invoke-ai/ui-library'; +import { Button, Combobox, Flex, FormControl, FormLabel, Input } from '@invoke-ai/ui-library'; import { useForm } from '@mantine/form'; import { useAppDispatch } from 'app/store/storeHooks'; import { addToast } from 'features/system/store/systemSlice'; @@ -44,8 +37,7 @@ const SimpleAddModels = () => { const handleAddModelSubmit = (values: ExtendedImportModelConfig) => { const importModelResponseBody = { location: values.location, - prediction_type: - values.prediction_type === 'none' ? undefined : values.prediction_type, + prediction_type: values.prediction_type === 'none' ? undefined : values.prediction_type, }; importMainModel({ body: importModelResponseBody }) @@ -76,26 +68,15 @@ const SimpleAddModels = () => { }; return ( - handleAddModelSubmit(v))} - style={formStyles} - > + handleAddModelSubmit(v))} style={formStyles}> {t('modelManager.modelLocation')} - + {t('modelManager.predictionType')} - + - diff --git a/invokeai/frontend/web/src/features/modelManager/subpanels/MergeModelsPanel.tsx b/invokeai/frontend/web/src/features/modelManager/subpanels/MergeModelsPanel.tsx index 865eb4914c..fe90db5b8a 100644 --- a/invokeai/frontend/web/src/features/modelManager/subpanels/MergeModelsPanel.tsx +++ b/invokeai/frontend/web/src/features/modelManager/subpanels/MergeModelsPanel.tsx @@ -23,10 +23,7 @@ import type { ChangeEvent } from 'react'; import { memo, useCallback, useMemo, useState } from 'react'; import { useTranslation } from 'react-i18next'; import { ALL_BASE_MODELS } from 'services/api/constants'; -import { - useGetMainModelsQuery, - useMergeMainModelsMutation, -} from 'services/api/endpoints/models'; +import { useGetMainModelsQuery, useMergeMainModelsMutation } from 'services/api/endpoints/models'; import type { BaseModelType, MergeModelConfig } from 'services/api/types'; const baseModelTypeSelectOptions: ComboboxOption[] = [ @@ -34,11 +31,7 @@ const baseModelTypeSelectOptions: ComboboxOption[] = [ { label: 'Stable Diffusion 2', value: 'sd-2' }, ]; -type MergeInterpolationMethods = - | 'weighted_sum' - | 'sigmoid' - | 'inv_sigmoid' - | 'add_difference'; +type MergeInterpolationMethods = 'weighted_sum' | 'sigmoid' | 'inv_sigmoid' | 'add_difference'; const MergeModelsPanel = () => { const { t } = useTranslation(); @@ -49,20 +42,15 @@ const MergeModelsPanel = () => { const [mergeModels, { isLoading }] = useMergeMainModelsMutation(); const [baseModel, setBaseModel] = useState('sd-1'); - const valueBaseModel = useMemo( - () => baseModelTypeSelectOptions.find((o) => o.value === baseModel), - [baseModel] - ); + const valueBaseModel = useMemo(() => baseModelTypeSelectOptions.find((o) => o.value === baseModel), [baseModel]); const sd1DiffusersModels = pickBy( data?.entities, - (value, _) => - value?.model_format === 'diffusers' && value?.base_model === 'sd-1' + (value, _) => value?.model_format === 'diffusers' && value?.base_model === 'sd-1' ); const sd2DiffusersModels = pickBy( data?.entities, - (value, _) => - value?.model_format === 'diffusers' && value?.base_model === 'sd-2' + (value, _) => value?.model_format === 'diffusers' && value?.base_model === 'sd-2' ); const modelsMap = useMemo(() => { @@ -83,15 +71,11 @@ const MergeModelsPanel = () => { const [mergedModelName, setMergedModelName] = useState(''); const [modelMergeAlpha, setModelMergeAlpha] = useState(0.5); - const [modelMergeInterp, setModelMergeInterp] = - useState('weighted_sum'); + const [modelMergeInterp, setModelMergeInterp] = useState('weighted_sum'); - const [modelMergeSaveLocType, setModelMergeSaveLocType] = useState< - 'root' | 'custom' - >('root'); + const [modelMergeSaveLocType, setModelMergeSaveLocType] = useState<'root' | 'custom'>('root'); - const [modelMergeCustomSaveLoc, setModelMergeCustomSaveLoc] = - useState(''); + const [modelMergeCustomSaveLoc, setModelMergeCustomSaveLoc] = useState(''); const [modelMergeForce, setModelMergeForce] = useState(false); @@ -153,14 +137,8 @@ const MergeModelsPanel = () => { } }, []); - const valueModelOne = useMemo( - () => optionsModelOne.find((o) => o.value === modelOne), - [modelOne, optionsModelOne] - ); - const valueModelTwo = useMemo( - () => optionsModelTwo.find((o) => o.value === modelTwo), - [modelTwo, optionsModelTwo] - ); + const valueModelOne = useMemo(() => optionsModelOne.find((o) => o.value === modelOne), [modelOne, optionsModelOne]); + const valueModelTwo = useMemo(() => optionsModelTwo.find((o) => o.value === modelTwo), [modelTwo, optionsModelTwo]); const valueModelThree = useMemo( () => optionsModelThree.find((o) => o.value === modelThree), [modelThree, optionsModelThree] @@ -170,25 +148,12 @@ const MergeModelsPanel = () => { (e: ChangeEvent) => setMergedModelName(e.target.value), [] ); - const handleChangeModelMergeAlpha = useCallback( - (v: number) => setModelMergeAlpha(v), - [] - ); - const handleResetModelMergeAlpha = useCallback( - () => setModelMergeAlpha(0.5), - [] - ); - const handleChangeMergeInterp = useCallback( - (v: MergeInterpolationMethods) => setModelMergeInterp(v), - [] - ); - const handleChangeMergeSaveLocType = useCallback( - (v: 'root' | 'custom') => setModelMergeSaveLocType(v), - [] - ); + const handleChangeModelMergeAlpha = useCallback((v: number) => setModelMergeAlpha(v), []); + const handleResetModelMergeAlpha = useCallback(() => setModelMergeAlpha(0.5), []); + const handleChangeMergeInterp = useCallback((v: MergeInterpolationMethods) => setModelMergeInterp(v), []); + const handleChangeMergeSaveLocType = useCallback((v: 'root' | 'custom') => setModelMergeSaveLocType(v), []); const handleChangeMergeCustomSaveLoc = useCallback( - (e: ChangeEvent) => - setModelMergeCustomSaveLoc(e.target.value), + (e: ChangeEvent) => setModelMergeCustomSaveLoc(e.target.value), [] ); const handleChangeModelMergeForce = useCallback( @@ -210,13 +175,11 @@ const MergeModelsPanel = () => { const mergeModelsInfo: MergeModelConfig['body'] = { model_names: models_names, - merged_model_name: - mergedModelName !== '' ? mergedModelName : models_names.join('-'), + merged_model_name: mergedModelName !== '' ? mergedModelName : models_names.join('-'), alpha: modelMergeAlpha, interp: modelMergeInterp, force: modelMergeForce, - merge_dest_directory: - modelMergeSaveLocType === 'root' ? undefined : modelMergeCustomSaveLoc, + merge_dest_directory: modelMergeSaveLocType === 'root' ? undefined : modelMergeCustomSaveLoc, }; mergeModels({ @@ -274,36 +237,19 @@ const MergeModelsPanel = () => { {t('modelManager.modelType')} - + {t('modelManager.modelOne')} - + {t('modelManager.modelTwo')} - + {t('modelManager.modelThree')} - + @@ -312,13 +258,7 @@ const MergeModelsPanel = () => { - + {t('modelManager.alpha')} { onChange={handleChangeModelMergeAlpha} onReset={handleResetModelMergeAlpha} /> - - {t('modelManager.modelMergeAlphaHelp')} - + {t('modelManager.modelMergeAlphaHelp')} @@ -364,9 +302,7 @@ const MergeModelsPanel = () => { ) : ( - + {t('modelManager.addDifference')} @@ -375,21 +311,12 @@ const MergeModelsPanel = () => { - + {t('modelManager.mergedModelSaveLocation')} - + {t('modelManager.invokeAIFolder')} @@ -404,30 +331,18 @@ const MergeModelsPanel = () => { {modelMergeSaveLocType === 'custom' && ( - - {t('modelManager.mergedModelCustomSaveLocation')} - - + {t('modelManager.mergedModelCustomSaveLocation')} + )} {t('modelManager.ignoreMismatch')} - + - diff --git a/invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerPanel.tsx b/invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerPanel.tsx index aae1b4c05d..6b9abdbfec 100644 --- a/invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerPanel.tsx +++ b/invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerPanel.tsx @@ -7,10 +7,7 @@ import type { LoRAModelConfigEntity, MainModelConfigEntity, } from 'services/api/endpoints/models'; -import { - useGetLoRAModelsQuery, - useGetMainModelsQuery, -} from 'services/api/endpoints/models'; +import { useGetLoRAModelsQuery, useGetMainModelsQuery } from 'services/api/endpoints/models'; import CheckpointModelEdit from './ModelManagerPanel/CheckpointModelEdit'; import DiffusersModelEdit from './ModelManagerPanel/DiffusersModelEdit'; @@ -34,10 +31,7 @@ const ModelManagerPanel = () => { return ( - + ); @@ -56,12 +50,7 @@ const ModelEdit = (props: ModelEditProps) => { } if (model?.model_format === 'diffusers') { - return ( - - ); + return ; } if (model?.model_type === 'lora') { @@ -69,14 +58,7 @@ const ModelEdit = (props: ModelEditProps) => { } return ( - + {t('modelManager.noModelSelected')} ); diff --git a/invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerPanel/CheckpointModelEdit.tsx b/invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerPanel/CheckpointModelEdit.tsx index ecd89cc62a..f4d271187d 100644 --- a/invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerPanel/CheckpointModelEdit.tsx +++ b/invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerPanel/CheckpointModelEdit.tsx @@ -22,10 +22,7 @@ import type { SubmitHandler } from 'react-hook-form'; import { useForm } from 'react-hook-form'; import { useTranslation } from 'react-i18next'; import type { CheckpointModelConfigEntity } from 'services/api/endpoints/models'; -import { - useGetCheckpointConfigsQuery, - useUpdateMainModelsMutation, -} from 'services/api/endpoints/models'; +import { useGetCheckpointConfigsQuery, useUpdateMainModelsMutation } from 'services/api/endpoints/models'; import type { CheckpointModelConfig } from 'services/api/types'; import ModelConvert from './ModelConvert'; @@ -72,10 +69,7 @@ const CheckpointModelEdit = (props: CheckpointModelEditProps) => { mode: 'onChange', }); - const handleChangeUseCustomConfig = useCallback( - () => setUseCustomConfig((prev) => !prev), - [] - ); + const handleChangeUseCustomConfig = useCallback(() => setUseCustomConfig((prev) => !prev), []); const onSubmit = useCallback>( (values) => { @@ -133,50 +127,32 @@ const CheckpointModelEdit = (props: CheckpointModelEditProps) => { - + {t('modelManager.name')} - value.trim().length > 3 || 'Must be at least 3 characters', + validate: (value) => value.trim().length > 3 || 'Must be at least 3 characters', })} /> - {errors.model_name?.message && ( - - {errors.model_name?.message} - - )} + {errors.model_name?.message && {errors.model_name?.message}} {t('modelManager.description')} - - control={control} - name="base_model" - /> - - control={control} - name="variant" - /> + control={control} name="base_model" /> + control={control} name="variant" /> {t('modelManager.modelLocation')} - value.trim().length > 0 || 'Must provide a path', + validate: (value) => value.trim().length > 0 || 'Must provide a path', })} /> - {errors.path?.message && ( - {errors.path?.message} - )} + {errors.path?.message && {errors.path?.message}} {t('modelManager.vaeLocation')} @@ -194,10 +170,7 @@ const CheckpointModelEdit = (props: CheckpointModelEditProps) => { )} {t('modelManager.useCustomConfig')} - + diff --git a/invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerPanel/DiffusersModelEdit.tsx b/invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerPanel/DiffusersModelEdit.tsx index c2c33fb63b..4670f32157 100644 --- a/invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerPanel/DiffusersModelEdit.tsx +++ b/invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerPanel/DiffusersModelEdit.tsx @@ -1,13 +1,4 @@ -import { - Button, - Divider, - Flex, - FormControl, - FormErrorMessage, - FormLabel, - Input, - Text, -} from '@invoke-ai/ui-library'; +import { Button, Divider, Flex, FormControl, FormErrorMessage, FormLabel, Input, Text } from '@invoke-ai/ui-library'; import { useAppDispatch } from 'app/store/storeHooks'; import BaseModelSelect from 'features/modelManager/subpanels/shared/BaseModelSelect'; import ModelVariantSelect from 'features/modelManager/subpanels/shared/ModelVariantSelect'; @@ -108,37 +99,25 @@ const DiffusersModelEdit = (props: DiffusersModelEditProps) => { {t('modelManager.name')} - value.trim().length > 3 || 'Must be at least 3 characters', + validate: (value) => value.trim().length > 3 || 'Must be at least 3 characters', })} /> - {errors.model_name?.message && ( - {errors.model_name?.message} - )} + {errors.model_name?.message && {errors.model_name?.message}} {t('modelManager.description')} - - control={control} - name="base_model" - /> - - control={control} - name="variant" - /> + control={control} name="base_model" /> + control={control} name="variant" /> {t('modelManager.modelLocation')} - value.trim().length > 0 || 'Must provide a path', + validate: (value) => value.trim().length > 0 || 'Must provide a path', })} /> - {errors.path?.message && ( - {errors.path?.message} - )} + {errors.path?.message && {errors.path?.message}} {t('modelManager.vaeLocation')} diff --git a/invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerPanel/LoRAModelEdit.tsx b/invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerPanel/LoRAModelEdit.tsx index 2c82ca56f9..2baf735bee 100644 --- a/invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerPanel/LoRAModelEdit.tsx +++ b/invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerPanel/LoRAModelEdit.tsx @@ -1,19 +1,7 @@ -import { - Button, - Divider, - Flex, - FormControl, - FormErrorMessage, - FormLabel, - Input, - Text, -} from '@invoke-ai/ui-library'; +import { Button, Divider, Flex, FormControl, FormErrorMessage, FormLabel, Input, Text } from '@invoke-ai/ui-library'; import { useAppDispatch } from 'app/store/storeHooks'; import BaseModelSelect from 'features/modelManager/subpanels/shared/BaseModelSelect'; -import { - LORA_MODEL_FORMAT_MAP, - MODEL_TYPE_MAP, -} from 'features/parameters/types/constants'; +import { LORA_MODEL_FORMAT_MAP, MODEL_TYPE_MAP } from 'features/parameters/types/constants'; import { addToast } from 'features/system/store/systemSlice'; import { makeToast } from 'features/system/util/makeToast'; import { memo, useCallback } from 'react'; @@ -97,8 +85,8 @@ const LoRAModelEdit = (props: LoRAModelEditProps) => { {model.model_name} - {MODEL_TYPE_MAP[model.base_model]} {t('modelManager.model')} ⋅{' '} - {LORA_MODEL_FORMAT_MAP[model.model_format]} {t('common.format')} + {MODEL_TYPE_MAP[model.base_model]} {t('modelManager.model')} ⋅ {LORA_MODEL_FORMAT_MAP[model.model_format]}{' '} + {t('common.format')} @@ -109,34 +97,25 @@ const LoRAModelEdit = (props: LoRAModelEditProps) => { {t('modelManager.name')} - value.trim().length > 3 || 'Must be at least 3 characters', + validate: (value) => value.trim().length > 3 || 'Must be at least 3 characters', })} /> - {errors.model_name?.message && ( - {errors.model_name?.message} - )} + {errors.model_name?.message && {errors.model_name?.message}} {t('modelManager.description')} - - control={control} - name="base_model" - /> + control={control} name="base_model" /> {t('modelManager.modelLocation')} - value.trim().length > 0 || 'Must provide a path', + validate: (value) => value.trim().length > 0 || 'Must provide a path', })} /> - {errors.path?.message && ( - {errors.path?.message} - )} + {errors.path?.message && {errors.path?.message}} - @@ -122,16 +83,9 @@ const ModelList = (props: ModelListProps) => { - + {/* Diffusers List */} - {isLoadingDiffusersModels && ( - - )} + {isLoadingDiffusersModels && } {['all', 'diffusers'].includes(modelFormatFilter) && !isLoadingDiffusersModels && filteredDiffusersModels.length > 0 && ( @@ -143,9 +97,7 @@ const ModelList = (props: ModelListProps) => { /> )} {/* Checkpoints List */} - {isLoadingCheckpointModels && ( - - )} + {isLoadingCheckpointModels && } {['all', 'checkpoint'].includes(modelFormatFilter) && !isLoadingCheckpointModels && filteredCheckpointModels.length > 0 && ( @@ -158,19 +110,15 @@ const ModelList = (props: ModelListProps) => { )} {/* LoRAs List */} - {isLoadingLoraModels && ( - + {isLoadingLoraModels && } + {['all', 'lora'].includes(modelFormatFilter) && !isLoadingLoraModels && filteredLoraModels.length > 0 && ( + )} - {['all', 'lora'].includes(modelFormatFilter) && - !isLoadingLoraModels && - filteredLoraModels.length > 0 && ( - - )} @@ -191,12 +139,9 @@ const modelsFilter = ( return; } - const matchesFilter = model.model_name - .toLowerCase() - .includes(nameFilter.toLowerCase()); + const matchesFilter = model.model_name.toLowerCase().includes(nameFilter.toLowerCase()); - const matchesFormat = - model_format === undefined || model.model_format === model_format; + const matchesFormat = model_format === undefined || model.model_format === model_format; const matchesType = model.model_type === model_type; if (matchesFilter && matchesFormat && matchesType) { @@ -245,25 +190,15 @@ const ModelListWrapper = memo((props: ModelListWrapperProps) => { ModelListWrapper.displayName = 'ModelListWrapper'; -const FetchingModelsLoader = memo( - ({ loadingMessage }: { loadingMessage?: string }) => { - return ( - - - - - {loadingMessage ? loadingMessage : 'Fetching...'} - - - - ); - } -); +const FetchingModelsLoader = memo(({ loadingMessage }: { loadingMessage?: string }) => { + return ( + + + + {loadingMessage ? loadingMessage : 'Fetching...'} + + + ); +}); FetchingModelsLoader.displayName = 'FetchingModelsLoader'; diff --git a/invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerPanel/ModelListItem.tsx b/invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerPanel/ModelListItem.tsx index 6203ea12f4..fdd13e09f5 100644 --- a/invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerPanel/ModelListItem.tsx +++ b/invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerPanel/ModelListItem.tsx @@ -15,14 +15,8 @@ import { makeToast } from 'features/system/util/makeToast'; import { memo, useCallback } from 'react'; import { useTranslation } from 'react-i18next'; import { PiTrashSimpleBold } from 'react-icons/pi'; -import type { - LoRAModelConfigEntity, - MainModelConfigEntity, -} from 'services/api/endpoints/models'; -import { - useDeleteLoRAModelsMutation, - useDeleteMainModelsMutation, -} from 'services/api/endpoints/models'; +import type { LoRAModelConfigEntity, MainModelConfigEntity } from 'services/api/endpoints/models'; +import { useDeleteLoRAModelsMutation, useDeleteMainModelsMutation } from 'services/api/endpoints/models'; type ModelListItemProps = { model: MainModelConfigEntity | LoRAModelConfigEntity; @@ -66,9 +60,7 @@ const ModelListItem = (props: ModelListItemProps) => { dispatch( addToast( makeToast({ - title: `${t('modelManager.modelDeleteFailed')}: ${ - model.model_name - }`, + title: `${t('modelManager.modelDeleteFailed')}: ${model.model_name}`, status: 'error', }) ) @@ -76,14 +68,7 @@ const ModelListItem = (props: ModelListItemProps) => { } }); setSelectedModelId(undefined); - }, [ - deleteMainModel, - deleteLoRAModel, - model, - setSelectedModelId, - dispatch, - t, - ]); + }, [deleteMainModel, deleteLoRAModel, model, setSelectedModelId, dispatch, t]); return ( @@ -100,11 +85,7 @@ const ModelListItem = (props: ModelListItemProps) => { > - { - MODEL_TYPE_SHORT_MAP[ - model.base_model as keyof typeof MODEL_TYPE_SHORT_MAP - ] - } + {MODEL_TYPE_SHORT_MAP[model.base_model as keyof typeof MODEL_TYPE_SHORT_MAP]} {model.model_name} diff --git a/invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerSettingsPanel/SyncModels.tsx b/invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerSettingsPanel/SyncModels.tsx index 78a69fa0c4..a4af3e1517 100644 --- a/invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerSettingsPanel/SyncModels.tsx +++ b/invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerSettingsPanel/SyncModels.tsx @@ -7,15 +7,7 @@ const SyncModels = () => { const { t } = useTranslation(); return ( - + {t('modelManager.syncModels')} diff --git a/invokeai/frontend/web/src/features/modelManager/subpanels/shared/BaseModelSelect.tsx b/invokeai/frontend/web/src/features/modelManager/subpanels/shared/BaseModelSelect.tsx index 345d13c2ea..fce16f3f13 100644 --- a/invokeai/frontend/web/src/features/modelManager/subpanels/shared/BaseModelSelect.tsx +++ b/invokeai/frontend/web/src/features/modelManager/subpanels/shared/BaseModelSelect.tsx @@ -15,15 +15,10 @@ const options: ComboboxOption[] = [ { value: 'sdxl-refiner', label: MODEL_TYPE_MAP['sdxl-refiner'] }, ]; -const BaseModelSelect = ( - props: UseControllerProps -) => { +const BaseModelSelect = (props: UseControllerProps) => { const { t } = useTranslation(); const { field } = useController(props); - const value = useMemo( - () => options.find((o) => o.value === field.value), - [field.value] - ); + const value = useMemo(() => options.find((o) => o.value === field.value), [field.value]); const onChange = useCallback( (v) => { field.onChange(v?.value); diff --git a/invokeai/frontend/web/src/features/modelManager/subpanels/shared/CheckpointConfigsSelect.tsx b/invokeai/frontend/web/src/features/modelManager/subpanels/shared/CheckpointConfigsSelect.tsx index 2a15e3aabf..569f1abbba 100644 --- a/invokeai/frontend/web/src/features/modelManager/subpanels/shared/CheckpointConfigsSelect.tsx +++ b/invokeai/frontend/web/src/features/modelManager/subpanels/shared/CheckpointConfigsSelect.tsx @@ -1,8 +1,4 @@ -import type { - ChakraProps, - ComboboxOnChange, - ComboboxOption, -} from '@invoke-ai/ui-library'; +import type { ChakraProps, ComboboxOnChange, ComboboxOption } from '@invoke-ai/ui-library'; import { Combobox, FormControl, FormLabel } from '@invoke-ai/ui-library'; import { memo, useCallback, useMemo } from 'react'; import { useController, type UseControllerProps } from 'react-hook-form'; @@ -12,20 +8,12 @@ import type { CheckpointModelConfig } from 'services/api/types'; const sx: ChakraProps['sx'] = { w: 'full' }; -const CheckpointConfigsSelect = ( - props: UseControllerProps -) => { +const CheckpointConfigsSelect = (props: UseControllerProps) => { const { data } = useGetCheckpointConfigsQuery(); const { t } = useTranslation(); - const options = useMemo( - () => (data ? data.map((i) => ({ label: i, value: i })) : []), - [data] - ); + const options = useMemo(() => (data ? data.map((i) => ({ label: i, value: i })) : []), [data]); const { field } = useController(props); - const value = useMemo( - () => options.find((o) => o.value === field.value), - [field.value, options] - ); + const value = useMemo(() => options.find((o) => o.value === field.value), [field.value, options]); const onChange = useCallback( (v) => { field.onChange(v?.value); @@ -36,13 +24,7 @@ const CheckpointConfigsSelect = ( return ( {t('modelManager.configFile')} - + ); }; diff --git a/invokeai/frontend/web/src/features/modelManager/subpanels/shared/ModelVariantSelect.tsx b/invokeai/frontend/web/src/features/modelManager/subpanels/shared/ModelVariantSelect.tsx index 6dcd5f28d3..27ded93843 100644 --- a/invokeai/frontend/web/src/features/modelManager/subpanels/shared/ModelVariantSelect.tsx +++ b/invokeai/frontend/web/src/features/modelManager/subpanels/shared/ModelVariantSelect.tsx @@ -5,10 +5,7 @@ import { useCallback, useMemo } from 'react'; import type { UseControllerProps } from 'react-hook-form'; import { useController } from 'react-hook-form'; import { useTranslation } from 'react-i18next'; -import type { - CheckpointModelConfig, - DiffusersModelConfig, -} from 'services/api/types'; +import type { CheckpointModelConfig, DiffusersModelConfig } from 'services/api/types'; const options: ComboboxOption[] = [ { value: 'normal', label: 'Normal' }, @@ -16,17 +13,10 @@ const options: ComboboxOption[] = [ { value: 'depth', label: 'Depth' }, ]; -const ModelVariantSelect = < - T extends CheckpointModelConfig | DiffusersModelConfig, ->( - props: UseControllerProps -) => { +const ModelVariantSelect = (props: UseControllerProps) => { const { t } = useTranslation(); const { field } = useController(props); - const value = useMemo( - () => options.find((o) => o.value === field.value), - [field.value] - ); + const value = useMemo(() => options.find((o) => o.value === field.value), [field.value]); const onChange = useCallback( (v) => { field.onChange(v?.value); diff --git a/invokeai/frontend/web/src/features/nodes/components/NodeEditor.tsx b/invokeai/frontend/web/src/features/nodes/components/NodeEditor.tsx index c527085733..501d263c38 100644 --- a/invokeai/frontend/web/src/features/nodes/components/NodeEditor.tsx +++ b/invokeai/frontend/web/src/features/nodes/components/NodeEditor.tsx @@ -53,12 +53,7 @@ const NodeEditor = () => { > {isReady && ( - + @@ -69,12 +64,7 @@ const NodeEditor = () => { {!isReady && ( - + { justifyContent="center" pointerEvents="none" > - + )} diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/AddNodePopover/AddNodePopover.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/AddNodePopover/AddNodePopover.tsx index 934c071da7..5d2bb1f3d2 100644 --- a/invokeai/frontend/web/src/features/nodes/components/flow/AddNodePopover/AddNodePopover.tsx +++ b/invokeai/frontend/web/src/features/nodes/components/flow/AddNodePopover/AddNodePopover.tsx @@ -1,24 +1,13 @@ import 'reactflow/dist/style.css'; import type { ComboboxOnChange, ComboboxOption } from '@invoke-ai/ui-library'; -import { - Combobox, - Flex, - Popover, - PopoverAnchor, - PopoverBody, - PopoverContent, -} from '@invoke-ai/ui-library'; +import { Combobox, Flex, Popover, PopoverAnchor, PopoverBody, PopoverContent } from '@invoke-ai/ui-library'; import { useAppToaster } from 'app/components/Toaster'; import { createMemoizedSelector } from 'app/store/createMemoizedSelector'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import type { SelectInstance } from 'chakra-react-select'; import { useBuildNode } from 'features/nodes/hooks/useBuildNode'; -import { - addNodePopoverClosed, - addNodePopoverOpened, - nodeAdded, -} from 'features/nodes/store/nodesSlice'; +import { addNodePopoverClosed, addNodePopoverOpened, nodeAdded } from 'features/nodes/store/nodesSlice'; import { selectNodeTemplatesSlice } from 'features/nodes/store/nodeTemplatesSlice'; import { validateSourceAndTargetTypes } from 'features/nodes/store/util/validateSourceAndTargetTypes'; import { filter, map, memoize, some } from 'lodash-es'; @@ -42,19 +31,17 @@ const createRegex = memoize( ) ); -const filterOption = memoize( - (option: FilterOptionOption, inputValue: string) => { - if (!inputValue) { - return true; - } - const regex = createRegex(inputValue); - return ( - regex.test(option.label) || - regex.test(option.data.description ?? '') || - (option.data.tags ?? []).some((tag) => regex.test(tag)) - ); +const filterOption = memoize((option: FilterOptionOption, inputValue: string) => { + if (!inputValue) { + return true; } -); + const regex = createRegex(inputValue); + return ( + regex.test(option.label) || + regex.test(option.data.description ?? '') || + (option.data.tags ?? []).some((tag) => regex.test(tag)) + ); +}); const AddNodePopover = () => { const dispatch = useAppDispatch(); @@ -65,64 +52,53 @@ const AddNodePopover = () => { const inputRef = useRef(null); const fieldFilter = useAppSelector((s) => s.nodes.connectionStartFieldType); - const handleFilter = useAppSelector( - (s) => s.nodes.connectionStartParams?.handleType - ); + const handleFilter = useAppSelector((s) => s.nodes.connectionStartParams?.handleType); - const selector = createMemoizedSelector( - selectNodeTemplatesSlice, - (nodeTemplates) => { - // If we have a connection in progress, we need to filter the node choices - const filteredNodeTemplates = fieldFilter - ? filter(nodeTemplates.templates, (template) => { - const handles = - handleFilter == 'source' ? template.inputs : template.outputs; + const selector = createMemoizedSelector(selectNodeTemplatesSlice, (nodeTemplates) => { + // If we have a connection in progress, we need to filter the node choices + const filteredNodeTemplates = fieldFilter + ? filter(nodeTemplates.templates, (template) => { + const handles = handleFilter == 'source' ? template.inputs : template.outputs; - return some(handles, (handle) => { - const sourceType = - handleFilter == 'source' ? fieldFilter : handle.type; - const targetType = - handleFilter == 'target' ? fieldFilter : handle.type; + return some(handles, (handle) => { + const sourceType = handleFilter == 'source' ? fieldFilter : handle.type; + const targetType = handleFilter == 'target' ? fieldFilter : handle.type; - return validateSourceAndTargetTypes(sourceType, targetType); - }); - }) - : map(nodeTemplates.templates); + return validateSourceAndTargetTypes(sourceType, targetType); + }); + }) + : map(nodeTemplates.templates); - const options: ComboboxOption[] = map( - filteredNodeTemplates, - (template) => { - return { - label: template.title, - value: template.type, - description: template.description, - tags: template.tags, - }; - } - ); + const options: ComboboxOption[] = map(filteredNodeTemplates, (template) => { + return { + label: template.title, + value: template.type, + description: template.description, + tags: template.tags, + }; + }); - //We only want these nodes if we're not filtered - if (fieldFilter === null) { - options.push({ - label: t('nodes.currentImage'), - value: 'current_image', - description: t('nodes.currentImageDescription'), - tags: ['progress'], - }); + //We only want these nodes if we're not filtered + if (fieldFilter === null) { + options.push({ + label: t('nodes.currentImage'), + value: 'current_image', + description: t('nodes.currentImageDescription'), + tags: ['progress'], + }); - options.push({ - label: t('nodes.notes'), - value: 'notes', - description: t('nodes.notesDescription'), - tags: ['notes'], - }); - } - - options.sort((a, b) => a.label.localeCompare(b.label)); - - return { options }; + options.push({ + label: t('nodes.notes'), + value: 'notes', + description: t('nodes.notesDescription'), + tags: ['notes'], + }); } - ); + + options.sort((a, b) => a.label.localeCompare(b.label)); + + return { options }; + }); const { options } = useAppSelector(selector); const isOpen = useAppSelector((s) => s.nodes.isAddNodePopoverOpen); @@ -205,12 +181,7 @@ const AddNodePopover = () => { initialFocusRef={inputRef} > - + { // Easiest to just keep track of the last mouse event for this particular feature const edgeUpdateMouseEvent = useRef(); - const onEdgeUpdateStart: NonNullable = - useCallback( - (e, edge, _handleType) => { - // update mouse event - edgeUpdateMouseEvent.current = e; - // always delete the edge when starting an updated - dispatch(edgeDeleted(edge.id)); - dispatch(edgeChangeStarted()); - }, - [dispatch] - ); + const onEdgeUpdateStart: NonNullable = useCallback( + (e, edge, _handleType) => { + // update mouse event + edgeUpdateMouseEvent.current = e; + // always delete the edge when starting an updated + dispatch(edgeDeleted(edge.id)); + dispatch(edgeChangeStarted()); + }, + [dispatch] + ); const onEdgeUpdate: OnEdgeUpdateFunc = useCallback( (_oldEdge, newConnection) => { @@ -214,24 +213,23 @@ export const Flow = memo(() => { [dispatch] ); - const onEdgeUpdateEnd: NonNullable = - useCallback( - (e, edge, _handleType) => { - // Handle the case where user begins a drag but didn't move the cursor - - // bc we deleted the edge, we need to add it back - if ( - // ignore touch events - !('touches' in e) && - edgeUpdateMouseEvent.current?.clientX === e.clientX && - edgeUpdateMouseEvent.current?.clientY === e.clientY - ) { - dispatch(edgeAdded(edge)); - } - // reset mouse event - edgeUpdateMouseEvent.current = undefined; - }, - [dispatch] - ); + const onEdgeUpdateEnd: NonNullable = useCallback( + (e, edge, _handleType) => { + // Handle the case where user begins a drag but didn't move the cursor - + // bc we deleted the edge, we need to add it back + if ( + // ignore touch events + !('touches' in e) && + edgeUpdateMouseEvent.current?.clientX === e.clientX && + edgeUpdateMouseEvent.current?.clientY === e.clientY + ) { + dispatch(edgeAdded(edge)); + } + // reset mouse event + edgeUpdateMouseEvent.current = undefined; + }, + [dispatch] + ); // #endregion diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/connectionLines/CustomConnectionLine.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/connectionLines/CustomConnectionLine.tsx index 7be6f1544b..61efcea06a 100644 --- a/invokeai/frontend/web/src/features/nodes/components/flow/connectionLines/CustomConnectionLine.tsx +++ b/invokeai/frontend/web/src/features/nodes/components/flow/connectionLines/CustomConnectionLine.tsx @@ -9,27 +9,16 @@ import type { ConnectionLineComponentProps } from 'reactflow'; import { getBezierPath } from 'reactflow'; const selectStroke = createSelector(selectNodesSlice, (nodes) => - nodes.shouldColorEdges - ? getFieldColor(nodes.connectionStartFieldType) - : colorTokenToCssVar('base.500') + nodes.shouldColorEdges ? getFieldColor(nodes.connectionStartFieldType) : colorTokenToCssVar('base.500') ); const selectClassName = createSelector(selectNodesSlice, (nodes) => - nodes.shouldAnimateEdges - ? 'react-flow__custom_connection-path animated' - : 'react-flow__custom_connection-path' + nodes.shouldAnimateEdges ? 'react-flow__custom_connection-path animated' : 'react-flow__custom_connection-path' ); const pathStyles: CSSProperties = { opacity: 0.8 }; -const CustomConnectionLine = ({ - fromX, - fromY, - fromPosition, - toX, - toY, - toPosition, -}: ConnectionLineComponentProps) => { +const CustomConnectionLine = ({ fromX, fromY, fromPosition, toX, toY, toPosition }: ConnectionLineComponentProps) => { const stroke = useAppSelector(selectStroke); const className = useAppSelector(selectClassName); @@ -46,14 +35,7 @@ const CustomConnectionLine = ({ return ( - + ); }; diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/edges/InvocationCollapsedEdge.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/edges/InvocationCollapsedEdge.tsx index 084147675d..eae7970804 100644 --- a/invokeai/frontend/web/src/features/nodes/components/flow/edges/InvocationCollapsedEdge.tsx +++ b/invokeai/frontend/web/src/features/nodes/components/flow/edges/InvocationCollapsedEdge.tsx @@ -23,14 +23,7 @@ const InvocationCollapsedEdge = ({ targetHandleId, }: EdgeProps<{ count: number }>) => { const selector = useMemo( - () => - makeEdgeSelector( - source, - sourceHandleId, - target, - targetHandleId, - selected - ), + () => makeEdgeSelector(source, sourceHandleId, target, targetHandleId, selected), [selected, source, sourceHandleId, target, targetHandleId] ); @@ -68,12 +61,7 @@ const InvocationCollapsedEdge = ({ transform={`translate(-50%, -50%) translate(${labelX}px,${labelY}px)`} className="nodrag nopan" > - + {data.count} diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/edges/InvocationDefaultEdge.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/edges/InvocationDefaultEdge.tsx index 15e0f851ca..0a18c2a959 100644 --- a/invokeai/frontend/web/src/features/nodes/components/flow/edges/InvocationDefaultEdge.tsx +++ b/invokeai/frontend/web/src/features/nodes/components/flow/edges/InvocationDefaultEdge.tsx @@ -21,14 +21,7 @@ const InvocationDefaultEdge = ({ targetHandleId, }: EdgeProps) => { const selector = useMemo( - () => - makeEdgeSelector( - source, - sourceHandleId, - target, - targetHandleId, - selected - ), + () => makeEdgeSelector(source, sourceHandleId, target, targetHandleId, selected), [source, sourceHandleId, target, targetHandleId, selected] ); diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/edges/util/makeEdgeSelector.ts b/invokeai/frontend/web/src/features/nodes/components/flow/edges/util/makeEdgeSelector.ts index 89d9e514ff..4bfc588e67 100644 --- a/invokeai/frontend/web/src/features/nodes/components/flow/edges/util/makeEdgeSelector.ts +++ b/invokeai/frontend/web/src/features/nodes/components/flow/edges/util/makeEdgeSelector.ts @@ -16,18 +16,12 @@ export const makeEdgeSelector = ( const sourceNode = nodes.nodes.find((node) => node.id === source); const targetNode = nodes.nodes.find((node) => node.id === target); - const isInvocationToInvocationEdge = - isInvocationNode(sourceNode) && isInvocationNode(targetNode); + const isInvocationToInvocationEdge = isInvocationNode(sourceNode) && isInvocationNode(targetNode); const isSelected = sourceNode?.selected || targetNode?.selected || selected; - const sourceType = isInvocationToInvocationEdge - ? sourceNode?.data?.outputs[sourceHandleId || '']?.type - : undefined; + const sourceType = isInvocationToInvocationEdge ? sourceNode?.data?.outputs[sourceHandleId || '']?.type : undefined; - const stroke = - sourceType && nodes.shouldColorEdges - ? getFieldColor(sourceType) - : colorTokenToCssVar('base.500'); + const stroke = sourceType && nodes.shouldColorEdges ? getFieldColor(sourceType) : colorTokenToCssVar('base.500'); return { isSelected, diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/CurrentImage/CurrentImageNode.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/CurrentImage/CurrentImageNode.tsx index 3439bb76f0..968136a3c2 100644 --- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/CurrentImage/CurrentImageNode.tsx +++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/CurrentImage/CurrentImageNode.tsx @@ -15,18 +15,14 @@ import { memo, useCallback, useState } from 'react'; import { useTranslation } from 'react-i18next'; import type { NodeProps } from 'reactflow'; -const selector = createMemoizedSelector( - selectSystemSlice, - selectGallerySlice, - (system, gallery) => { - const imageDTO = gallery.selection[gallery.selection.length - 1]; +const selector = createMemoizedSelector(selectSystemSlice, selectGallerySlice, (system, gallery) => { + const imageDTO = gallery.selection[gallery.selection.length - 1]; - return { - imageDTO, - progressImage: system.denoiseProgress?.progress_image, - }; - } -); + return { + imageDTO, + progressImage: system.denoiseProgress?.progress_image, + }; +}); const CurrentImageNode = (props: NodeProps) => { const { progressImage, imageDTO } = useAppSelector(selector); @@ -34,13 +30,7 @@ const CurrentImageNode = (props: NodeProps) => { if (progressImage) { return ( - + ); } @@ -74,11 +64,7 @@ const Wrapper = (props: PropsWithChildren<{ nodeProps: NodeProps }>) => { }, []); const { t } = useTranslation(); return ( - + ) => { position="relative" flexDirection="column" > - + {t('nodes.currentImage')} - + {props.children} {isHovering && ( - + )} diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/InvocationNode.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/InvocationNode.tsx index e14385c764..0147bcaed2 100644 --- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/InvocationNode.tsx +++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/InvocationNode.tsx @@ -27,13 +27,7 @@ const InvocationNode = ({ nodeId, isOpen, label, type, selected }: Props) => { return ( - + {isOpen && ( <> { {inputConnectionFieldNames.map((fieldName, i) => ( - + ))} {outputFieldNames.map((fieldName, i) => ( - + ))} {inputAnyOrDirectFieldNames.map((fieldName) => ( - + ))} diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/InvocationNodeClassificationIcon.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/InvocationNodeClassificationIcon.tsx index 8e1147b944..ddeb883d23 100644 --- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/InvocationNodeClassificationIcon.tsx +++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/InvocationNodeClassificationIcon.tsx @@ -22,33 +22,26 @@ const InvocationNodeClassificationIcon = ({ nodeId }: Props) => { placement="top" shouldWrapChildren > - + ); }; export default memo(InvocationNodeClassificationIcon); -const ClassificationTooltipContent = memo( - ({ classification }: { classification: Classification }) => { - const { t } = useTranslation(); +const ClassificationTooltipContent = memo(({ classification }: { classification: Classification }) => { + const { t } = useTranslation(); - if (classification === 'beta') { - return t('nodes.betaDesc'); - } - - if (classification === 'prototype') { - return t('nodes.prototypeDesc'); - } - - return null; + if (classification === 'beta') { + return t('nodes.betaDesc'); } -); + + if (classification === 'prototype') { + return t('nodes.prototypeDesc'); + } + + return null; +}); ClassificationTooltipContent.displayName = 'ClassificationTooltipContent'; diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/InvocationNodeInfoIcon.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/InvocationNodeInfoIcon.tsx index 01a6d2e493..58e881860e 100644 --- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/InvocationNodeInfoIcon.tsx +++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/InvocationNodeInfoIcon.tsx @@ -16,18 +16,8 @@ const InvocationNodeInfoIcon = ({ nodeId }: Props) => { const needsUpdate = useNodeNeedsUpdate(nodeId); return ( - } - placement="top" - shouldWrapChildren - > - + } placement="top" shouldWrapChildren> + ); }; diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/InvocationNodeStatusIndicator.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/InvocationNodeStatusIndicator.tsx index 0586353e64..3138cb32fe 100644 --- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/InvocationNodeStatusIndicator.tsx +++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/InvocationNodeStatusIndicator.tsx @@ -1,13 +1,5 @@ import type { SystemStyleObject } from '@invoke-ai/ui-library'; -import { - Badge, - CircularProgress, - Flex, - Icon, - Image, - Text, - Tooltip, -} from '@invoke-ai/ui-library'; +import { Badge, CircularProgress, Flex, Icon, Image, Text, Tooltip } from '@invoke-ai/ui-library'; import { createMemoizedSelector } from 'app/store/createMemoizedSelector'; import { useAppSelector } from 'app/store/storeHooks'; import { selectNodesSlice } from 'features/nodes/store/nodesSlice'; @@ -16,11 +8,7 @@ import type { NodeExecutionState } from 'features/nodes/types/invocation'; import { zNodeStatus } from 'features/nodes/types/invocation'; import { memo, useMemo } from 'react'; import { useTranslation } from 'react-i18next'; -import { - PiCheckBold, - PiDotsThreeOutlineFill, - PiWarningBold, -} from 'react-icons/pi'; +import { PiCheckBold, PiDotsThreeOutlineFill, PiWarningBold } from 'react-icons/pi'; type Props = { nodeId: string; @@ -37,11 +25,7 @@ const circleStyles: SystemStyleObject = { const InvocationNodeStatusIndicator = ({ nodeId }: Props) => { const selectNodeExecutionState = useMemo( - () => - createMemoizedSelector( - selectNodesSlice, - (nodes) => nodes.nodeExecutionStates[nodeId] - ), + () => createMemoizedSelector(selectNodesSlice, (nodes) => nodes.nodeExecutionStates[nodeId]), [nodeId] ); @@ -52,17 +36,8 @@ const InvocationNodeStatusIndicator = ({ nodeId }: Props) => { } return ( - } - placement="top" - > - + } placement="top"> + @@ -85,13 +60,7 @@ const TooltipLabel = memo(({ nodeExecutionState }: TooltipLabelProps) => { if (progressImage) { return ( - + {progress !== null && ( {Math.round(progress * 100)}% @@ -132,23 +101,11 @@ type StatusIconProps = { const StatusIcon = memo((props: StatusIconProps) => { const { progress, status } = props.nodeExecutionState; if (status === zNodeStatus.enum.PENDING) { - return ( - - ); + return ; } if (status === zNodeStatus.enum.IN_PROGRESS) { return progress === null ? ( - + ) : ( { +const InvocationNodeUnknownFallback = ({ nodeId, isOpen, label, type, selected }: Props) => { const { t } = useTranslation(); const nodePack = useNodePack(nodeId); return ( diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/InvocationNodeWrapper.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/InvocationNodeWrapper.tsx index b2ee81c292..d7a5dc3895 100644 --- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/InvocationNodeWrapper.tsx +++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/InvocationNodeWrapper.tsx @@ -13,10 +13,7 @@ const InvocationNodeWrapper = (props: NodeProps) => { const { id: nodeId, type, isOpen, label } = data; const hasTemplateSelector = useMemo( - () => - createSelector(selectNodeTemplatesSlice, (nodeTemplates) => - Boolean(nodeTemplates.templates[type]) - ), + () => createSelector(selectNodeTemplatesSlice, (nodeTemplates) => Boolean(nodeTemplates.templates[type])), [type] ); @@ -24,25 +21,11 @@ const InvocationNodeWrapper = (props: NodeProps) => { if (!hasTemplate) { return ( - + ); } - return ( - - ); + return ; }; export default memo(InvocationNodeWrapper); diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/NotesTextarea.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/NotesTextarea.tsx index a6bdb1fa75..ed5031d435 100644 --- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/NotesTextarea.tsx +++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/NotesTextarea.tsx @@ -23,12 +23,7 @@ const NotesTextarea = ({ nodeId }: { nodeId: string }) => { return ( {t('nodes.notes')} -