Merge branch 'main' into ip-adapter-style-comp

2024-08-30 20:32:17 +00:00 · 2024-04-16 21:14:06 +05:30
parent f46bbaf8c4 fce6b3e44c
commit 6bab040d24
84 changed files with 802 additions and 390 deletions
--- a/invokeai/frontend/web/index.html
+++ b/invokeai/frontend/web/index.html
@ -8,7 +8,7 @@
  <meta http-equiv="Pragma" content="no-cache">
  <meta http-equiv="Expires" content="0">
  <title>Invoke - Community Edition</title>
-  <link rel="icon" type="icon" href="assets/images/invoke-favicon.svg" />
+  <link id="invoke-favicon" rel="icon" type="icon" href="assets/images/invoke-favicon.svg" />
  <style>
    html,
    body {
@ -23,4 +23,4 @@
  <script type="module" src="/src/main.tsx"></script>
 </body>

-</html>
+</html>
--- a/invokeai/frontend/web/knip.ts
+++ b/invokeai/frontend/web/knip.ts
@ -1,6 +1,7 @@
 import type { KnipConfig } from 'knip';

 const config: KnipConfig = {
+  project: ['src/**/*.{ts,tsx}!'],
  ignore: [
    // This file is only used during debugging
    'src/app/store/middleware/debugLoggerMiddleware.ts',
@ -10,6 +11,9 @@ const config: KnipConfig = {
    'src/features/nodes/types/v2/**',
  ],
  ignoreBinaries: ['only-allow'],
+  paths: {
+    'public/*': ['public/*'],
+  },
 };

 export default config;
--- a/invokeai/frontend/web/package.json
+++ b/invokeai/frontend/web/package.json
@ -24,7 +24,7 @@
    "build": "pnpm run lint && vite build",
    "typegen": "node scripts/typegen.js",
    "preview": "vite preview",
-    "lint:knip": "knip --tags=-@knipignore",
+    "lint:knip": "knip",
    "lint:dpdm": "dpdm --no-warning --no-tree --transform --exit-code circular:1 src/main.tsx",
    "lint:eslint": "eslint --max-warnings=0 .",
    "lint:prettier": "prettier --check .",
--- a/invokeai/frontend/web/public/assets/images/invoke-alert-favicon.svg
+++ b/invokeai/frontend/web/public/assets/images/invoke-alert-favicon.svg
@ -0,0 +1,5 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="16" height="16" rx="2" fill="#E6FD13"/>
+<path d="M9.61889 5.45H12.5V3.5H3.5V5.45H6.38111L9.61889 10.55H12.5V12.5H3.5V10.55H6.38111" stroke="black"/>
+<circle cx="12" cy="4" r="3" fill="#f5480c" stroke="#0d1117" stroke-width="1"/>
+</svg>
--- a/invokeai/frontend/web/public/locales/en.json
+++ b/invokeai/frontend/web/public/locales/en.json
@ -330,7 +330,8 @@
        "drop": "Drop",
        "dropOrUpload": "$t(gallery.drop) or Upload",
        "dropToUpload": "$t(gallery.drop) to Upload",
-        "deleteImage": "Delete Image",
+        "deleteImage_one": "Delete Image",
+        "deleteImage_other": "Delete {{count}} Images",
        "deleteImageBin": "Deleted images will be sent to your operating system's Bin.",
        "deleteImagePermanent": "Deleted images cannot be restored.",
        "download": "Download",
@ -773,6 +774,8 @@
        "float": "Float",
        "fullyContainNodes": "Fully Contain Nodes to Select",
        "fullyContainNodesHelp": "Nodes must be fully inside the selection box to be selected",
+        "showEdgeLabels": "Show Edge Labels",
+        "showEdgeLabelsHelp": "Show labels on edges, indicating the connected nodes",
        "hideLegendNodes": "Hide Field Type Legend",
        "hideMinimapnodes": "Hide MiniMap",
        "inputMayOnlyHaveOneConnection": "Input may only have one connection",
@ -1428,6 +1431,7 @@
        "eraseBoundingBox": "Erase Bounding Box",
        "eraser": "Eraser",
        "fillBoundingBox": "Fill Bounding Box",
+        "hideBoundingBox": "Hide Bounding Box",
        "initialFitImageSize": "Fit Image Size on Drop",
        "invertBrushSizeScrollDirection": "Invert Scroll for Brush Size",
        "layer": "Layer",
@ -1445,6 +1449,7 @@
        "saveMask": "Save $t(unifiedCanvas.mask)",
        "saveToGallery": "Save To Gallery",
        "scaledBoundingBox": "Scaled Bounding Box",
+        "showBoundingBox": "Show Bounding Box",
        "showCanvasDebugInfo": "Show Additional Canvas Info",
        "showGrid": "Show Grid",
        "showResultsOn": "Show Results (On)",
--- a/invokeai/frontend/web/public/locales/it.json
+++ b/invokeai/frontend/web/public/locales/it.json
@ -444,7 +444,8 @@
        "hfTokenInvalidErrorMessage2": "Aggiornalo in ",
        "main": "Principali",
        "noModelsInstalledDesc1": "Installa i modelli con",
-        "ipAdapters": "Adattatori IP"
+        "ipAdapters": "Adattatori IP",
+        "noMatchingModels": "Nessun modello corrispondente"
    },
    "parameters": {
        "images": "Immagini",
@ -526,7 +527,12 @@
        "aspect": "Aspetto",
        "setToOptimalSizeTooLarge": "$t(parameters.setToOptimalSize) (potrebbe essere troppo grande)",
        "remixImage": "Remixa l'immagine",
-        "coherenceEdgeSize": "Dim. bordo"
+        "coherenceEdgeSize": "Dim. bordo",
+        "infillMosaicTileWidth": "Larghezza piastrella",
+        "infillMosaicMinColor": "Colore minimo",
+        "infillMosaicMaxColor": "Colore massimo",
+        "infillMosaicTileHeight": "Altezza piastrella",
+        "infillColorValue": "Colore di riempimento"
    },
    "settings": {
        "models": "Modelli",
@ -620,7 +626,8 @@
        "uploadInitialImage": "Carica l'immagine iniziale",
        "problemDownloadingImage": "Impossibile scaricare l'immagine",
        "prunedQueue": "Coda ripulita",
-        "modelImportCanceled": "Importazione del modello annullata"
+        "modelImportCanceled": "Importazione del modello annullata",
+        "parameters": "Parametri"
    },
    "tooltip": {
        "feature": {
@ -689,7 +696,10 @@
        "coherenceModeBoxBlur": "Sfocatura Box",
        "coherenceModeStaged": "Maschera espansa",
        "invertBrushSizeScrollDirection": "Inverti scorrimento per dimensione pennello",
-        "discardCurrent": "Scarta l'attuale"
+        "discardCurrent": "Scarta l'attuale",
+        "initialFitImageSize": "Adatta dimensione immagine al rilascio",
+        "hideBoundingBox": "Nascondi il rettangolo di selezione",
+        "showBoundingBox": "Mostra il rettangolo di selezione"
    },
    "accessibility": {
        "invokeProgressBar": "Barra di avanzamento generazione",
@ -832,7 +842,8 @@
        "editMode": "Modifica nell'editor del flusso di lavoro",
        "resetToDefaultValue": "Ripristina il valore predefinito",
        "noFieldsViewMode": "Questo flusso di lavoro non ha campi selezionati da visualizzare. Visualizza il flusso di lavoro completo per configurare i valori.",
-        "edit": "Modifica"
+        "edit": "Modifica",
+        "graph": "Grafico"
    },
    "boards": {
        "autoAddBoard": "Aggiungi automaticamente bacheca",
@ -1346,13 +1357,13 @@
            ]
        },
        "seamlessTilingXAxis": {
-            "heading": "Asse X di piastrellatura senza cuciture",
+            "heading": "Piastrella senza giunte sull'asse X",
            "paragraphs": [
                "Affianca senza soluzione di continuità un'immagine lungo l'asse orizzontale."
            ]
        },
        "seamlessTilingYAxis": {
-            "heading": "Asse Y di piastrellatura senza cuciture",
+            "heading": "Piastrella senza giunte sull'asse Y",
            "paragraphs": [
                "Affianca senza soluzione di continuità un'immagine lungo l'asse verticale."
            ]
@ -1476,7 +1487,11 @@
        "name": "Nome",
        "updated": "Aggiornato",
        "projectWorkflows": "Flussi di lavoro del progetto",
-        "opened": "Aperto"
+        "opened": "Aperto",
+        "convertGraph": "Converti grafico",
+        "loadWorkflow": "$t(common.load) Flusso di lavoro",
+        "autoLayout": "Disposizione automatica",
+        "loadFromGraph": "Carica il flusso di lavoro dal grafico"
    },
    "app": {
        "storeNotInitialized": "Il negozio non è inizializzato"
--- a/invokeai/frontend/web/public/locales/ru.json
+++ b/invokeai/frontend/web/public/locales/ru.json
@ -448,7 +448,9 @@
        "loraModels": "LoRAs",
        "main": "Основные",
        "noModelsInstalled": "Нет установленных моделей",
-        "noModelsInstalledDesc1": "Установите модели с помощью"
+        "noModelsInstalledDesc1": "Установите модели с помощью",
+        "noMatchingModels": "Нет подходящих моделей",
+        "ipAdapters": "IP адаптеры"
    },
    "parameters": {
        "images": "Изображения",
@ -532,7 +534,12 @@
        "lockAspectRatio": "Заблокировать соотношение",
        "remixImage": "Ремикс изображения",
        "coherenceMinDenoise": "Мин. шумоподавление",
-        "coherenceEdgeSize": "Размер края"
+        "coherenceEdgeSize": "Размер края",
+        "infillMosaicTileWidth": "Ширина плиток",
+        "infillMosaicTileHeight": "Высота плиток",
+        "infillMosaicMinColor": "Мин цвет",
+        "infillMosaicMaxColor": "Макс цвет",
+        "infillColorValue": "Цвет заливки"
    },
    "settings": {
        "models": "Модели",
@ -626,7 +633,8 @@
        "uploadInitialImage": "Загрузить начальное изображение",
        "resetInitialImage": "Сбросить начальное изображение",
        "prunedQueue": "Урезанная очередь",
-        "modelImportCanceled": "Импорт модели отменен"
+        "modelImportCanceled": "Импорт модели отменен",
+        "parameters": "Параметры"
    },
    "tooltip": {
        "feature": {
@ -695,7 +703,8 @@
        "coherenceModeGaussianBlur": "Размытие по Гауссу",
        "coherenceModeBoxBlur": "коробчатое размытие",
        "discardCurrent": "Отбросить текущее",
-        "invertBrushSizeScrollDirection": "Инвертировать прокрутку для размера кисти"
+        "invertBrushSizeScrollDirection": "Инвертировать прокрутку для размера кисти",
+        "initialFitImageSize": "Подогнать размер изображения при перебросе"
    },
    "accessibility": {
        "uploadImage": "Загрузить изображение",
@ -921,7 +930,8 @@
        "modelSize": "Размер модели",
        "small": "Маленький",
        "body": "Тело",
-        "hands": "Руки"
+        "hands": "Руки",
+        "selectCLIPVisionModel": "Выбрать модель CLIP Vision"
    },
    "boards": {
        "autoAddBoard": "Авто добавление Доски",
--- a/invokeai/frontend/web/public/locales/zh_CN.json
+++ b/invokeai/frontend/web/public/locales/zh_CN.json
@ -65,7 +65,12 @@
        "nextPage": "下一页",
        "saveAs": "保存为",
        "ai": "ai",
-        "or": "或"
+        "or": "或",
+        "aboutDesc": "使用 Invoke 工作？查看：",
+        "add": "添加",
+        "loglevel": "日志级别",
+        "copy": "复制",
+        "localSystem": "本地系统"
    },
    "gallery": {
        "galleryImageSize": "预览大小",
@ -599,7 +604,8 @@
        "loadMore": "加载更多",
        "mode": "模式",
        "resetUI": "$t(accessibility.reset) UI",
-        "createIssue": "创建问题"
+        "createIssue": "创建问题",
+        "about": "关于"
    },
    "tooltip": {
        "feature": {
@ -1201,7 +1207,16 @@
        "workflows": "工作流",
        "noDescription": "无描述",
        "uploadWorkflow": "从文件中加载",
-        "newWorkflowCreated": "已创建新的工作流"
+        "newWorkflowCreated": "已创建新的工作流",
+        "name": "名称",
+        "defaultWorkflows": "默认工作流",
+        "created": "已创建",
+        "ascending": "升序",
+        "descending": "降序",
+        "updated": "已更新",
+        "userWorkflows": "我的工作流",
+        "projectWorkflows": "项目工作流",
+        "opened": "已打开"
    },
    "app": {
        "storeNotInitialized": "商店尚未初始化"
@ -1219,7 +1234,8 @@
            "title": "生成"
        },
        "advanced": {
-            "title": "高级"
+            "title": "高级",
+            "options": "$t(accordions.advanced.title) 选项"
        },
        "image": {
            "title": "图像"
--- a/invokeai/frontend/web/src/app/components/App.tsx
+++ b/invokeai/frontend/web/src/app/components/App.tsx
@ -1,5 +1,6 @@
 import { Box, useGlobalModifiersInit } from '@invoke-ai/ui-library';
 import { useSocketIO } from 'app/hooks/useSocketIO';
+import { useSyncQueueStatus } from 'app/hooks/useSyncQueueStatus';
 import { useLogger } from 'app/logging/useLogger';
 import { appStarted } from 'app/store/middleware/listenerMiddleware/listeners/appStarted';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
@ -70,6 +71,7 @@ const App = ({ config = DEFAULT_CONFIG, selectedImage }: Props) => {
  }, [dispatch]);

  useStarterModelsToast();
+  useSyncQueueStatus();

  return (
    <ErrorBoundary onReset={handleReset} FallbackComponent={AppErrorBoundaryFallback}>
--- a/invokeai/frontend/web/src/app/hooks/useSyncQueueStatus.ts
+++ b/invokeai/frontend/web/src/app/hooks/useSyncQueueStatus.ts
@ -0,0 +1,25 @@
+import { useEffect } from 'react';
+import { useGetQueueStatusQuery } from 'services/api/endpoints/queue';
+
+const baseTitle = document.title;
+const invokeLogoSVG = 'assets/images/invoke-favicon.svg';
+const invokeAlertLogoSVG = 'assets/images/invoke-alert-favicon.svg';
+
+/**
+ * This hook synchronizes the queue status with the page's title and favicon.
+ * It should be considered a singleton and only used once in the component tree.
+ */
+export const useSyncQueueStatus = () => {
+  const { queueSize } = useGetQueueStatusQuery(undefined, {
+    selectFromResult: (res) => ({
+      queueSize: res.data ? res.data.queue.pending + res.data.queue.in_progress : 0,
+    }),
+  });
+  useEffect(() => {
+    document.title = queueSize > 0 ? `(${queueSize}) ${baseTitle}` : baseTitle;
+    const faviconEl = document.getElementById('invoke-favicon');
+    if (faviconEl instanceof HTMLLinkElement) {
+      faviconEl.href = queueSize > 0 ? invokeAlertLogoSVG : invokeLogoSVG;
+    }
+  }, [queueSize]);
+};
--- a/invokeai/frontend/web/src/common/components/Loading/Loading.tsx
+++ b/invokeai/frontend/web/src/common/components/Loading/Loading.tsx
@ -1,5 +1,4 @@
 import { Flex, Image, Spinner } from '@invoke-ai/ui-library';
-/** @knipignore */
 import InvokeLogoWhite from 'public/assets/images/invoke-symbol-wht-lrg.svg';
 import { memo } from 'react';

--- a/invokeai/frontend/web/src/common/hooks/useGlobalHotkeys.ts
+++ b/invokeai/frontend/web/src/common/hooks/useGlobalHotkeys.ts
@ -9,7 +9,7 @@ import { useHotkeys } from 'react-hotkeys-hook';

 export const useGlobalHotkeys = () => {
  const dispatch = useAppDispatch();
-  const isModelManagerEnabled = useFeatureStatus('modelManager').isFeatureEnabled;
+  const isModelManagerEnabled = useFeatureStatus('modelManager');
  const { queueBack, isDisabled: isDisabledQueueBack, isLoading: isLoadingQueueBack } = useQueueBack();

  useHotkeys(
--- a/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasToolbar.tsx
+++ b/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasToolbar.tsx
@ -13,7 +13,13 @@ 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,
+  setShouldShowBoundingBox,
+} 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';
@ -23,6 +29,8 @@ import {
  PiCopyBold,
  PiCrosshairSimpleBold,
  PiDownloadSimpleBold,
+  PiEyeBold,
+  PiEyeSlashBold,
  PiFloppyDiskBold,
  PiHandGrabbingBold,
  PiStackBold,
@ -44,6 +52,7 @@ const IAICanvasToolbar = () => {
  const isStaging = useAppSelector(isStagingSelector);
  const { t } = useTranslation();
  const { isClipboardAPIAvailable } = useCopyImageToClipboard();
+  const shouldShowBoundingBox = useAppSelector((s) => s.canvas.shouldShowBoundingBox);

  const { getUploadButtonProps, getUploadInputProps } = useImageUploadButton({
    postUploadAction: { type: 'SET_CANVAS_INITIAL_IMAGE' },
@ -61,6 +70,18 @@ const IAICanvasToolbar = () => {
    []
  );

+  useHotkeys(
+    'shift+h',
+    () => {
+      dispatch(setShouldShowBoundingBox(!shouldShowBoundingBox));
+    },
+    {
+      enabled: () => !isStaging,
+      preventDefault: true,
+    },
+    [shouldShowBoundingBox]
+  );
+
  useHotkeys(
    ['r'],
    () => {
@ -125,6 +146,10 @@ const IAICanvasToolbar = () => {
    $tool.set('move');
  }, []);

+  const handleSetShouldShowBoundingBox = useCallback(() => {
+    dispatch(setShouldShowBoundingBox(!shouldShowBoundingBox));
+  }, [dispatch, shouldShowBoundingBox]);
+
  const handleResetCanvasView = useCallback(
    (shouldScaleTo1 = false) => {
      const canvasBaseLayer = $canvasBaseLayer.get();
@ -212,6 +237,13 @@ const IAICanvasToolbar = () => {
          isChecked={tool === 'move' || isStaging}
          onClick={handleSelectMoveTool}
        />
+        <IconButton
+          aria-label={`${shouldShowBoundingBox ? t('unifiedCanvas.hideBoundingBox') : t('unifiedCanvas.showBoundingBox')} (Shift + H)`}
+          tooltip={`${shouldShowBoundingBox ? t('unifiedCanvas.hideBoundingBox') : t('unifiedCanvas.showBoundingBox')} (Shift + H)`}
+          icon={shouldShowBoundingBox ? <PiEyeBold /> : <PiEyeSlashBold />}
+          onClick={handleSetShouldShowBoundingBox}
+          isDisabled={isStaging}
+        />
        <IconButton
          aria-label={`${t('unifiedCanvas.resetView')} (R)`}
          tooltip={`${t('unifiedCanvas.resetView')} (R)`}
--- a/invokeai/frontend/web/src/features/canvas/hooks/useCanvasHotkeys.ts
+++ b/invokeai/frontend/web/src/features/canvas/hooks/useCanvasHotkeys.ts
@ -7,12 +7,7 @@ import {
  resetToolInteractionState,
 } from 'features/canvas/store/canvasNanostore';
 import { isStagingSelector } from 'features/canvas/store/canvasSelectors';
-import {
-  clearMask,
-  setIsMaskEnabled,
-  setShouldShowBoundingBox,
-  setShouldSnapToGrid,
-} from 'features/canvas/store/canvasSlice';
+import { clearMask, setIsMaskEnabled, setShouldSnapToGrid } from 'features/canvas/store/canvasSlice';
 import { isInteractiveTarget } from 'features/canvas/util/isInteractiveTarget';
 import { activeTabNameSelector } from 'features/ui/store/uiSelectors';
 import { useCallback, useEffect } from 'react';
@ -21,7 +16,6 @@ import { useHotkeys } from 'react-hotkeys-hook';
 const useInpaintingCanvasHotkeys = () => {
  const dispatch = useAppDispatch();
  const activeTabName = useAppSelector(activeTabNameSelector);
-  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);
@ -79,18 +73,6 @@ const useInpaintingCanvasHotkeys = () => {
    }
  );

-  useHotkeys(
-    'shift+h',
-    () => {
-      dispatch(setShouldShowBoundingBox(!shouldShowBoundingBox));
-    },
-    {
-      enabled: () => !isStaging,
-      preventDefault: true,
-    },
-    [activeTabName, shouldShowBoundingBox]
-  );
-
  const onKeyDown = useCallback(
    (e: KeyboardEvent) => {
      if (e.repeat || e.key !== ' ' || isInteractiveTarget(e.target) || activeTabName !== 'unifiedCanvas') {
--- a/invokeai/frontend/web/src/features/controlAdapters/components/parameters/ParamControlAdapterModel.tsx
+++ b/invokeai/frontend/web/src/features/controlAdapters/components/parameters/ParamControlAdapterModel.tsx
@ -103,7 +103,7 @@ const ParamControlAdapterModel = ({ id }: ParamControlAdapterModelProps) => {

  return (
    <Flex sx={{ gap: 2 }}>
-      <Tooltip label={value?.description}>
+      <Tooltip label={selectedModel?.description}>
        <FormControl
          isDisabled={!isEnabled}
          isInvalid={!value || mainModel?.base !== modelConfig?.base}
--- a/invokeai/frontend/web/src/features/deleteImageModal/components/DeleteImageButton.tsx
+++ b/invokeai/frontend/web/src/features/deleteImageModal/components/DeleteImageButton.tsx
@ -13,13 +13,15 @@ export const DeleteImageButton = memo((props: DeleteImageButtonProps) => {
  const { onClick, isDisabled } = props;
  const { t } = useTranslation();
  const isConnected = useAppSelector((s) => s.system.isConnected);
+  const imageSelectionLength: number = useAppSelector((s) => s.gallery.selection.length);
+  const labelMessage: string = `${t('gallery.deleteImage', { count: imageSelectionLength })} (Del)`;

  return (
    <IconButton
      onClick={onClick}
      icon={<PiTrashSimpleBold />}
-      tooltip={`${t('gallery.deleteImage')} (Del)`}
-      aria-label={`${t('gallery.deleteImage')} (Del)`}
+      tooltip={labelMessage}
+      aria-label={labelMessage}
      isDisabled={isDisabled || !isConnected}
      colorScheme="error"
    />
--- a/invokeai/frontend/web/src/features/deleteImageModal/components/DeleteImageModal.tsx
+++ b/invokeai/frontend/web/src/features/deleteImageModal/components/DeleteImageModal.tsx
@ -80,7 +80,7 @@ const DeleteImageModal = () => {

  return (
    <ConfirmationAlertDialog
-      title={t('gallery.deleteImage')}
+      title={t('gallery.deleteImage', { count: imagesToDelete.length })}
      isOpen={isModalOpen}
      onClose={handleClose}
      cancelButtonText={t('boards.cancel')}
--- a/invokeai/frontend/web/src/features/gallery/components/Boards/BoardContextMenu.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/Boards/BoardContextMenu.tsx
@ -32,7 +32,7 @@ const BoardContextMenu = ({ board, board_id, setBoardToDelete, children }: Props

  const isSelectedForAutoAdd = useAppSelector(selectIsSelectedForAutoAdd);
  const boardName = useBoardName(board_id);
-  const isBulkDownloadEnabled = useFeatureStatus('bulkDownload').isFeatureEnabled;
+  const isBulkDownloadEnabled = useFeatureStatus('bulkDownload');

  const [bulkDownload] = useBulkDownloadImagesMutation();

--- a/invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/NoBoardBoard.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/NoBoardBoard.tsx
@ -6,7 +6,6 @@ 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';
-/** @knipignore */
 import InvokeLogoSVG from 'public/assets/images/invoke-symbol-wht-lrg.svg';
 import { memo, useCallback, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
--- a/invokeai/frontend/web/src/features/gallery/components/CurrentImage/CurrentImageButtons.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/CurrentImage/CurrentImageButtons.tsx
@ -51,9 +51,10 @@ const CurrentImageButtons = () => {
  const shouldShowImageDetails = useAppSelector((s) => s.ui.shouldShowImageDetails);
  const shouldShowProgressInViewer = useAppSelector((s) => s.ui.shouldShowProgressInViewer);
  const lastSelectedImage = useAppSelector(selectLastSelectedImage);
+  const selection = useAppSelector((s) => s.gallery.selection);
  const shouldDisableToolbarButtons = useAppSelector(selectShouldDisableToolbarButtons);

-  const isUpscalingEnabled = useFeatureStatus('upscaling').isFeatureEnabled;
+  const isUpscalingEnabled = useFeatureStatus('upscaling');
  const isQueueMutationInProgress = useIsQueueMutationInProgress();
  const toaster = useAppToaster();
  const { t } = useTranslation();
@ -102,8 +103,8 @@ const CurrentImageButtons = () => {
    if (!imageDTO) {
      return;
    }
-    dispatch(imagesToDeleteSelected([imageDTO]));
-  }, [dispatch, imageDTO]);
+    dispatch(imagesToDeleteSelected(selection));
+  }, [dispatch, imageDTO, selection]);

  useHotkeys(
    'Shift+U',
--- a/invokeai/frontend/web/src/features/gallery/components/ImageContextMenu/MultipleSelectionMenuItems.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/ImageContextMenu/MultipleSelectionMenuItems.tsx
@ -20,7 +20,7 @@ const MultipleSelectionMenuItems = () => {
  const selection = useAppSelector((s) => s.gallery.selection);
  const customStarUi = useStore($customStarUI);

-  const isBulkDownloadEnabled = useFeatureStatus('bulkDownload').isFeatureEnabled;
+  const isBulkDownloadEnabled = useFeatureStatus('bulkDownload');

  const [starImages] = useStarImagesMutation();
  const [unstarImages] = useUnstarImagesMutation();
--- a/invokeai/frontend/web/src/features/gallery/components/ImageContextMenu/SingleSelectionMenuItems.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/ImageContextMenu/SingleSelectionMenuItems.tsx
@ -45,7 +45,7 @@ const SingleSelectionMenuItems = (props: SingleSelectionMenuItemsProps) => {
  const dispatch = useAppDispatch();
  const { t } = useTranslation();
  const toaster = useAppToaster();
-  const isCanvasEnabled = useFeatureStatus('unifiedCanvas').isFeatureEnabled;
+  const isCanvasEnabled = useFeatureStatus('unifiedCanvas');
  const customStarUi = useStore($customStarUI);
  const { downloadImage } = useDownloadImage();

@ -188,7 +188,7 @@ const SingleSelectionMenuItems = (props: SingleSelectionMenuItemsProps) => {
      )}
      <MenuDivider />
      <MenuItem color="error.300" icon={<PiTrashSimpleBold />} onClickCapture={handleDelete}>
-        {t('gallery.deleteImage')}
+        {t('gallery.deleteImage', { count: 1 })}
      </MenuItem>
    </>
  );
--- a/invokeai/frontend/web/src/features/gallery/components/ImageGrid/GalleryImage.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/ImageGrid/GalleryImage.tsx
@ -180,7 +180,7 @@ const GalleryImage = (props: HoverableImageProps) => {
              <IAIDndImageIcon
                onClick={handleDelete}
                icon={<PiTrashSimpleFill size="16px" />}
-                tooltip={t('gallery.deleteImage')}
+                tooltip={t('gallery.deleteImage', { count: 1 })}
                styleOverrides={imageIconStyleOverrides}
              />
            )}
--- a/invokeai/frontend/web/src/features/gallery/hooks/useMultiselect.ts
+++ b/invokeai/frontend/web/src/features/gallery/hooks/useMultiselect.ts
@ -18,7 +18,7 @@ export const useMultiselect = (imageDTO?: ImageDTO) => {
    [imageDTO?.image_name]
  );
  const isSelected = useAppSelector(selectIsSelected);
-  const isMultiSelectEnabled = useFeatureStatus('multiselect').isFeatureEnabled;
+  const isMultiSelectEnabled = useFeatureStatus('multiselect');

  const handleClick = useCallback(
    (e: MouseEvent<HTMLDivElement>) => {
--- a/invokeai/frontend/web/src/features/hrf/components/HrfSettings.tsx
+++ b/invokeai/frontend/web/src/features/hrf/components/HrfSettings.tsx
@ -8,7 +8,7 @@ import ParamHrfStrength from './ParamHrfStrength';
 import ParamHrfToggle from './ParamHrfToggle';

 export const HrfSettings = memo(() => {
-  const isHRFFeatureEnabled = useFeatureStatus('hrf').isFeatureEnabled;
+  const isHRFFeatureEnabled = useFeatureStatus('hrf');
  const hrfEnabled = useAppSelector((s) => s.hrf.hrfEnabled);

  if (!isHRFFeatureEnabled) {
--- a/invokeai/frontend/web/src/features/metadata/util/parsers.ts
+++ b/invokeai/frontend/web/src/features/metadata/util/parsers.ts
@ -156,8 +156,13 @@ const parseSteps: MetadataParseFunc<ParameterSteps> = (metadata) => getProperty(
 const parseStrength: MetadataParseFunc<ParameterStrength> = (metadata) =>
  getProperty(metadata, 'strength', isParameterStrength);

-const parseHRFEnabled: MetadataParseFunc<ParameterHRFEnabled> = (metadata) =>
-  getProperty(metadata, 'hrf_enabled', isParameterHRFEnabled);
+const parseHRFEnabled: MetadataParseFunc<ParameterHRFEnabled> = async (metadata) => {
+  try {
+    return await getProperty(metadata, 'hrf_enabled', isParameterHRFEnabled);
+  } catch {
+    return false;
+  }
+};

 const parseHRFStrength: MetadataParseFunc<ParameterStrength> = (metadata) =>
  getProperty(metadata, 'hrf_strength', isParameterStrength);
@ -224,12 +229,16 @@ const parseLoRA: MetadataParseFunc<LoRA> = async (metadataItem) => {
 };

 const parseAllLoRAs: MetadataParseFunc<LoRA[]> = async (metadata) => {
-  const lorasRaw = await getProperty(metadata, 'loras', isArray);
-  const parseResults = await Promise.allSettled(lorasRaw.map((lora) => parseLoRA(lora)));
-  const loras = parseResults
-    .filter((result): result is PromiseFulfilledResult<LoRA> => result.status === 'fulfilled')
-    .map((result) => result.value);
-  return loras;
+  try {
+    const lorasRaw = await getProperty(metadata, 'loras', isArray);
+    const parseResults = await Promise.allSettled(lorasRaw.map((lora) => parseLoRA(lora)));
+    const loras = parseResults
+      .filter((result): result is PromiseFulfilledResult<LoRA> => result.status === 'fulfilled')
+      .map((result) => result.value);
+    return loras;
+  } catch {
+    return [];
+  }
 };

 const parseControlNet: MetadataParseFunc<ControlNetConfigMetadata> = async (metadataItem) => {
@ -288,12 +297,16 @@ const parseControlNet: MetadataParseFunc<ControlNetConfigMetadata> = async (meta
 };

 const parseAllControlNets: MetadataParseFunc<ControlNetConfigMetadata[]> = async (metadata) => {
-  const controlNetsRaw = await getProperty(metadata, 'controlnets', isArray);
-  const parseResults = await Promise.allSettled(controlNetsRaw.map((cn) => parseControlNet(cn)));
-  const controlNets = parseResults
-    .filter((result): result is PromiseFulfilledResult<ControlNetConfigMetadata> => result.status === 'fulfilled')
-    .map((result) => result.value);
-  return controlNets;
+  try {
+    const controlNetsRaw = await getProperty(metadata, 'controlnets', isArray || undefined);
+    const parseResults = await Promise.allSettled(controlNetsRaw.map((cn) => parseControlNet(cn)));
+    const controlNets = parseResults
+      .filter((result): result is PromiseFulfilledResult<ControlNetConfigMetadata> => result.status === 'fulfilled')
+      .map((result) => result.value);
+    return controlNets;
+  } catch {
+    return [];
+  }
 };

 const parseT2IAdapter: MetadataParseFunc<T2IAdapterConfigMetadata> = async (metadataItem) => {
@ -348,12 +361,16 @@ const parseT2IAdapter: MetadataParseFunc<T2IAdapterConfigMetadata> = async (meta
 };

 const parseAllT2IAdapters: MetadataParseFunc<T2IAdapterConfigMetadata[]> = async (metadata) => {
-  const t2iAdaptersRaw = await getProperty(metadata, 't2iAdapters', isArray);
-  const parseResults = await Promise.allSettled(t2iAdaptersRaw.map((t2iAdapter) => parseT2IAdapter(t2iAdapter)));
-  const t2iAdapters = parseResults
-    .filter((result): result is PromiseFulfilledResult<T2IAdapterConfigMetadata> => result.status === 'fulfilled')
-    .map((result) => result.value);
-  return t2iAdapters;
+  try {
+    const t2iAdaptersRaw = await getProperty(metadata, 't2iAdapters', isArray);
+    const parseResults = await Promise.allSettled(t2iAdaptersRaw.map((t2iAdapter) => parseT2IAdapter(t2iAdapter)));
+    const t2iAdapters = parseResults
+      .filter((result): result is PromiseFulfilledResult<T2IAdapterConfigMetadata> => result.status === 'fulfilled')
+      .map((result) => result.value);
+    return t2iAdapters;
+  } catch {
+    return [];
+  }
 };

 const parseIPAdapter: MetadataParseFunc<IPAdapterConfigMetadata> = async (metadataItem) => {
@ -399,12 +416,16 @@ const parseIPAdapter: MetadataParseFunc<IPAdapterConfigMetadata> = async (metada
 };

 const parseAllIPAdapters: MetadataParseFunc<IPAdapterConfigMetadata[]> = async (metadata) => {
-  const ipAdaptersRaw = await getProperty(metadata, 'ipAdapters', isArray);
-  const parseResults = await Promise.allSettled(ipAdaptersRaw.map((ipAdapter) => parseIPAdapter(ipAdapter)));
-  const ipAdapters = parseResults
-    .filter((result): result is PromiseFulfilledResult<IPAdapterConfigMetadata> => result.status === 'fulfilled')
-    .map((result) => result.value);
-  return ipAdapters;
+  try {
+    const ipAdaptersRaw = await getProperty(metadata, 'ipAdapters', isArray);
+    const parseResults = await Promise.allSettled(ipAdaptersRaw.map((ipAdapter) => parseIPAdapter(ipAdapter)));
+    const ipAdapters = parseResults
+      .filter((result): result is PromiseFulfilledResult<IPAdapterConfigMetadata> => result.status === 'fulfilled')
+      .map((result) => result.value);
+    return ipAdapters;
+  } catch {
+    return [];
+  }
 };

 export const parsers = {
--- a/invokeai/frontend/web/src/features/metadata/util/recallers.ts
+++ b/invokeai/frontend/web/src/features/metadata/util/recallers.ts
@ -177,11 +177,11 @@ const recallLoRA: MetadataRecallFunc<LoRA> = (lora) => {
 };

 const recallAllLoRAs: MetadataRecallFunc<LoRA[]> = (loras) => {
+  const { dispatch } = getStore();
+  dispatch(lorasReset());
  if (!loras.length) {
    return;
  }
-  const { dispatch } = getStore();
-  dispatch(lorasReset());
  loras.forEach((lora) => {
    dispatch(loraRecalled(lora));
  });
@ -192,11 +192,11 @@ const recallControlNet: MetadataRecallFunc<ControlNetConfigMetadata> = (controlN
 };

 const recallControlNets: MetadataRecallFunc<ControlNetConfigMetadata[]> = (controlNets) => {
+  const { dispatch } = getStore();
+  dispatch(controlNetsReset());
  if (!controlNets.length) {
    return;
  }
-  const { dispatch } = getStore();
-  dispatch(controlNetsReset());
  controlNets.forEach((controlNet) => {
    dispatch(controlAdapterRecalled(controlNet));
  });
@ -207,11 +207,11 @@ const recallT2IAdapter: MetadataRecallFunc<T2IAdapterConfigMetadata> = (t2iAdapt
 };

 const recallT2IAdapters: MetadataRecallFunc<T2IAdapterConfigMetadata[]> = (t2iAdapters) => {
+  const { dispatch } = getStore();
+  dispatch(t2iAdaptersReset());
  if (!t2iAdapters.length) {
    return;
  }
-  const { dispatch } = getStore();
-  dispatch(t2iAdaptersReset());
  t2iAdapters.forEach((t2iAdapter) => {
    dispatch(controlAdapterRecalled(t2iAdapter));
  });
@ -222,11 +222,11 @@ const recallIPAdapter: MetadataRecallFunc<IPAdapterConfigMetadata> = (ipAdapter)
 };

 const recallIPAdapters: MetadataRecallFunc<IPAdapterConfigMetadata[]> = (ipAdapters) => {
+  const { dispatch } = getStore();
+  dispatch(ipAdaptersReset());
  if (!ipAdapters.length) {
    return;
  }
-  const { dispatch } = getStore();
-  dispatch(ipAdaptersReset());
  ipAdapters.forEach((ipAdapter) => {
    dispatch(controlAdapterRecalled(ipAdapter));
  });
--- a/invokeai/frontend/web/src/features/modelManagerV2/hooks/useStarterModelsToast.tsx
+++ b/invokeai/frontend/web/src/features/modelManagerV2/hooks/useStarterModelsToast.tsx
@ -10,7 +10,7 @@ const TOAST_ID = 'starterModels';

 export const useStarterModelsToast = () => {
  const { t } = useTranslation();
-  const isEnabled = useFeatureStatus('starterModels').isFeatureEnabled;
+  const isEnabled = useFeatureStatus('starterModels');
  const [didToast, setDidToast] = useState(false);
  const [mainModels, { data }] = useMainModels();
  const toast = useToast();
--- a/invokeai/frontend/web/src/features/nodes/components/flow/edges/InvocationDefaultEdge.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/edges/InvocationDefaultEdge.tsx
@ -1,8 +1,9 @@
+import { Flex, Text } from '@invoke-ai/ui-library';
 import { useAppSelector } from 'app/store/storeHooks';
 import type { CSSProperties } from 'react';
 import { memo, useMemo } from 'react';
 import type { EdgeProps } from 'reactflow';
-import { BaseEdge, getBezierPath } from 'reactflow';
+import { BaseEdge, EdgeLabelRenderer, getBezierPath } from 'reactflow';

 import { makeEdgeSelector } from './util/makeEdgeSelector';

@ -25,9 +26,10 @@ const InvocationDefaultEdge = ({
    [source, sourceHandleId, target, targetHandleId, selected]
  );

-  const { isSelected, shouldAnimate, stroke } = useAppSelector(selector);
+  const { isSelected, shouldAnimate, stroke, label } = useAppSelector(selector);
+  const shouldShowEdgeLabels = useAppSelector((s) => s.nodes.shouldShowEdgeLabels);

-  const [edgePath] = getBezierPath({
+  const [edgePath, labelX, labelY] = getBezierPath({
    sourceX,
    sourceY,
    sourcePosition,
@ -47,7 +49,33 @@ const InvocationDefaultEdge = ({
    [isSelected, shouldAnimate, stroke]
  );

-  return <BaseEdge path={edgePath} markerEnd={markerEnd} style={edgeStyles} />;
+  return (
+    <>
+      <BaseEdge path={edgePath} markerEnd={markerEnd} style={edgeStyles} />
+      {label && shouldShowEdgeLabels && (
+        <EdgeLabelRenderer>
+          <Flex
+            className="nodrag nopan"
+            pointerEvents="all"
+            position="absolute"
+            transform={`translate(-50%, -50%) translate(${labelX}px,${labelY}px)`}
+            bg="base.800"
+            borderRadius="base"
+            borderWidth={1}
+            borderColor={isSelected ? 'undefined' : 'transparent'}
+            opacity={isSelected ? 1 : 0.5}
+            py={1}
+            px={3}
+            shadow="md"
+          >
+            <Text size="sm" fontWeight="semibold" color={isSelected ? 'base.100' : 'base.300'}>
+              {label}
+            </Text>
+          </Flex>
+        </EdgeLabelRenderer>
+      )}
+    </>
+  );
 };

 export default memo(InvocationDefaultEdge);
--- 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
@ -1,7 +1,7 @@
 import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
 import { colorTokenToCssVar } from 'common/util/colorTokenToCssVar';
 import { selectNodesSlice } from 'features/nodes/store/nodesSlice';
-import { selectFieldOutputTemplate } from 'features/nodes/store/selectors';
+import { selectFieldOutputTemplate, selectNodeTemplate } from 'features/nodes/store/selectors';
 import { isInvocationNode } from 'features/nodes/types/invocation';

 import { getFieldColor } from './getEdgeColor';
@ -10,6 +10,7 @@ const defaultReturnValue = {
  isSelected: false,
  shouldAnimate: false,
  stroke: colorTokenToCssVar('base.500'),
+  label: '',
 };

 export const makeEdgeSelector = (
@ -19,25 +20,34 @@ export const makeEdgeSelector = (
  targetHandleId: string | null | undefined,
  selected?: boolean
 ) =>
-  createMemoizedSelector(selectNodesSlice, (nodes): { isSelected: boolean; shouldAnimate: boolean; stroke: string } => {
-    const sourceNode = nodes.nodes.find((node) => node.id === source);
-    const targetNode = nodes.nodes.find((node) => node.id === target);
+  createMemoizedSelector(
+    selectNodesSlice,
+    (nodes): { isSelected: boolean; shouldAnimate: boolean; stroke: string; label: string } => {
+      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 = Boolean(sourceNode?.selected || targetNode?.selected || selected);
-    if (!sourceNode || !sourceHandleId) {
-      return defaultReturnValue;
+      const isSelected = Boolean(sourceNode?.selected || targetNode?.selected || selected);
+      if (!sourceNode || !sourceHandleId || !targetNode || !targetHandleId) {
+        return defaultReturnValue;
+      }
+
+      const outputFieldTemplate = selectFieldOutputTemplate(nodes, sourceNode.id, sourceHandleId);
+      const sourceType = isInvocationToInvocationEdge ? outputFieldTemplate?.type : undefined;
+
+      const stroke = sourceType && nodes.shouldColorEdges ? getFieldColor(sourceType) : colorTokenToCssVar('base.500');
+
+      const sourceNodeTemplate = selectNodeTemplate(nodes, sourceNode.id);
+      const targetNodeTemplate = selectNodeTemplate(nodes, targetNode.id);
+
+      const label = `${sourceNodeTemplate?.title || sourceNode.data?.label} -> ${targetNodeTemplate?.title || targetNode.data?.label}`;
+
+      return {
+        isSelected,
+        shouldAnimate: nodes.shouldAnimateEdges && isSelected,
+        stroke,
+        label,
+      };
    }
-
-    const outputFieldTemplate = selectFieldOutputTemplate(nodes, sourceNode.id, sourceHandleId);
-    const sourceType = isInvocationToInvocationEdge ? outputFieldTemplate?.type : undefined;
-
-    const stroke = sourceType && nodes.shouldColorEdges ? getFieldColor(sourceType) : colorTokenToCssVar('base.500');
-
-    return {
-      isSelected,
-      shouldAnimate: nodes.shouldAnimateEdges && isSelected,
-      stroke,
-    };
-  });
+  );
--- 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
@ -16,7 +16,7 @@ const props: ChakraProps = { w: 'unset' };

 const InvocationNodeFooter = ({ nodeId }: Props) => {
  const hasImageOutput = useHasImageOutput(nodeId);
-  const isCacheEnabled = useFeatureStatus('invocationCache').isFeatureEnabled;
+  const isCacheEnabled = useFeatureStatus('invocationCache');
  return (
    <Flex
      className={DRAG_HANDLE_CLASSNAME}
--- 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
@ -24,6 +24,7 @@ import {
  selectNodesSlice,
  shouldAnimateEdgesChanged,
  shouldColorEdgesChanged,
+  shouldShowEdgeLabelsChanged,
  shouldSnapToGridChanged,
  shouldValidateGraphChanged,
 } from 'features/nodes/store/nodesSlice';
@ -35,12 +36,20 @@ import { SelectionMode } from 'reactflow';
 const formLabelProps: FormLabelProps = { flexGrow: 1 };

 const selector = createMemoizedSelector(selectNodesSlice, (nodes) => {
-  const { shouldAnimateEdges, shouldValidateGraph, shouldSnapToGrid, shouldColorEdges, selectionMode } = nodes;
+  const {
+    shouldAnimateEdges,
+    shouldValidateGraph,
+    shouldSnapToGrid,
+    shouldColorEdges,
+    shouldShowEdgeLabels,
+    selectionMode,
+  } = nodes;
  return {
    shouldAnimateEdges,
    shouldValidateGraph,
    shouldSnapToGrid,
    shouldColorEdges,
+    shouldShowEdgeLabels,
    selectionModeIsChecked: selectionMode === SelectionMode.Full,
  };
 });
@ -52,8 +61,14 @@ type Props = {
 const WorkflowEditorSettings = ({ children }: Props) => {
  const { isOpen, onOpen, onClose } = useDisclosure();
  const dispatch = useAppDispatch();
-  const { shouldAnimateEdges, shouldValidateGraph, shouldSnapToGrid, shouldColorEdges, selectionModeIsChecked } =
-    useAppSelector(selector);
+  const {
+    shouldAnimateEdges,
+    shouldValidateGraph,
+    shouldSnapToGrid,
+    shouldColorEdges,
+    shouldShowEdgeLabels,
+    selectionModeIsChecked,
+  } = useAppSelector(selector);

  const handleChangeShouldValidate = useCallback(
    (e: ChangeEvent<HTMLInputElement>) => {
@ -90,6 +105,13 @@ const WorkflowEditorSettings = ({ children }: Props) => {
    [dispatch]
  );

+  const handleChangeShouldShowEdgeLabels = useCallback(
+    (e: ChangeEvent<HTMLInputElement>) => {
+      dispatch(shouldShowEdgeLabelsChanged(e.target.checked));
+    },
+    [dispatch]
+  );
+
  const { t } = useTranslation();

  return (
@ -137,6 +159,14 @@ const WorkflowEditorSettings = ({ children }: Props) => {
                  <FormHelperText>{t('nodes.fullyContainNodesHelp')}</FormHelperText>
                </FormControl>
                <Divider />
+                <FormControl>
+                  <Flex w="full">
+                    <FormLabel>{t('nodes.showEdgeLabels')}</FormLabel>
+                    <Switch isChecked={shouldShowEdgeLabels} onChange={handleChangeShouldShowEdgeLabels} />
+                  </Flex>
+                  <FormHelperText>{t('nodes.showEdgeLabelsHelp')}</FormHelperText>
+                </FormControl>
+                <Divider />
                <Heading size="sm" pt={4}>
                  {t('common.advanced')}
                </Heading>
--- a/invokeai/frontend/web/src/features/nodes/components/sidePanel/viewMode/EmptyState.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/sidePanel/viewMode/EmptyState.tsx
@ -1,7 +1,6 @@
 import { Button, Flex, Image, Text } from '@invoke-ai/ui-library';
 import { useAppDispatch } from 'app/store/storeHooks';
 import { workflowModeChanged } from 'features/nodes/store/workflowSlice';
-/** @knipignore */
 import InvokeLogoSVG from 'public/assets/images/invoke-symbol-wht-lrg.svg';
 import { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
--- a/invokeai/frontend/web/src/features/nodes/hooks/useOutputFieldNames.ts
+++ b/invokeai/frontend/web/src/features/nodes/hooks/useOutputFieldNames.ts
@ -1,5 +1,5 @@
-import { createSelector } from '@reduxjs/toolkit';
 import { EMPTY_ARRAY } from 'app/store/constants';
+import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
 import { useAppSelector } from 'app/store/storeHooks';
 import { selectNodesSlice } from 'features/nodes/store/nodesSlice';
 import { selectNodeTemplate } from 'features/nodes/store/selectors';
@ -10,7 +10,7 @@ import { useMemo } from 'react';
 export const useOutputFieldNames = (nodeId: string) => {
  const selector = useMemo(
    () =>
-      createSelector(selectNodesSlice, (nodes) => {
+      createMemoizedSelector(selectNodesSlice, (nodes) => {
        const template = selectNodeTemplate(nodes, nodeId);
        if (!template) {
          return EMPTY_ARRAY;
--- a/invokeai/frontend/web/src/features/nodes/hooks/useWithFooter.ts
+++ b/invokeai/frontend/web/src/features/nodes/hooks/useWithFooter.ts
@ -5,8 +5,7 @@ import { useHasImageOutput } from './useHasImageOutput';

 export const useWithFooter = (nodeId: string) => {
  const hasImageOutput = useHasImageOutput(nodeId);
-  const isCacheEnabled = useFeatureStatus('invocationCache').isFeatureEnabled;
-
+  const isCacheEnabled = useFeatureStatus('invocationCache');
  const withFooter = useMemo(() => hasImageOutput || isCacheEnabled, [hasImageOutput, isCacheEnabled]);
  return withFooter;
 };
--- a/invokeai/frontend/web/src/features/nodes/store/nodesSlice.ts
+++ b/invokeai/frontend/web/src/features/nodes/store/nodesSlice.ts
@ -103,6 +103,7 @@ const initialNodesState: NodesState = {
  shouldAnimateEdges: true,
  shouldSnapToGrid: false,
  shouldColorEdges: true,
+  shouldShowEdgeLabels: false,
  isAddNodePopoverOpen: false,
  nodeOpacity: 1,
  selectedNodes: [],
@ -549,6 +550,9 @@ export const nodesSlice = createSlice({
    shouldAnimateEdgesChanged: (state, action: PayloadAction<boolean>) => {
      state.shouldAnimateEdges = action.payload;
    },
+    shouldShowEdgeLabelsChanged: (state, action: PayloadAction<boolean>) => {
+      state.shouldShowEdgeLabels = action.payload;
+    },
    shouldSnapToGridChanged: (state, action: PayloadAction<boolean>) => {
      state.shouldSnapToGrid = action.payload;
    },
@ -831,6 +835,7 @@ export const {
  viewportChanged,
  edgeAdded,
  nodeTemplatesBuilt,
+  shouldShowEdgeLabelsChanged,
 } = nodesSlice.actions;

 // This is used for tracking `state.workflow.isTouched`
--- a/invokeai/frontend/web/src/features/nodes/store/types.ts
+++ b/invokeai/frontend/web/src/features/nodes/store/types.ts
@ -32,6 +32,7 @@ export type NodesState = {
  isAddNodePopoverOpen: boolean;
  addNewNodePosition: XYPosition | null;
  selectionMode: SelectionMode;
+  shouldShowEdgeLabels: boolean;
 };

 export type WorkflowMode = 'edit' | 'view';
--- a/invokeai/frontend/web/src/features/parameters/components/Canvas/InfillAndScaling/ParamInfillColorOptions.tsx
+++ b/invokeai/frontend/web/src/features/parameters/components/Canvas/InfillAndScaling/ParamInfillColorOptions.tsx
@ -1,24 +1,18 @@
 import { Box, Flex, FormControl, FormLabel } from '@invoke-ai/ui-library';
-import { createSelector } from '@reduxjs/toolkit';
+import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import IAIColorPicker from 'common/components/IAIColorPicker';
 import { selectGenerationSlice, setInfillColorValue } from 'features/parameters/store/generationSlice';
-import { memo, useCallback, useMemo } from 'react';
+import { memo, useCallback } from 'react';
 import type { RgbaColor } from 'react-colorful';
 import { useTranslation } from 'react-i18next';

+const selectInfillColor = createMemoizedSelector(selectGenerationSlice, (generation) => generation.infillColorValue);
+
 const ParamInfillColorOptions = () => {
  const dispatch = useAppDispatch();

-  const selector = useMemo(
-    () =>
-      createSelector(selectGenerationSlice, (generation) => ({
-        infillColor: generation.infillColorValue,
-      })),
-    []
-  );
-
-  const { infillColor } = useAppSelector(selector);
+  const infillColor = useAppSelector(selectInfillColor);

  const infillMethod = useAppSelector((s) => s.generation.infillMethod);

--- a/invokeai/frontend/web/src/features/parameters/components/Canvas/InfillAndScaling/ParamInfillMosaicOptions.tsx
+++ b/invokeai/frontend/web/src/features/parameters/components/Canvas/InfillAndScaling/ParamInfillMosaicOptions.tsx
@ -1,35 +1,23 @@
 import { Box, CompositeNumberInput, CompositeSlider, Flex, FormControl, FormLabel } from '@invoke-ai/ui-library';
-import { createSelector } from '@reduxjs/toolkit';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import IAIColorPicker from 'common/components/IAIColorPicker';
 import {
-  selectGenerationSlice,
  setInfillMosaicMaxColor,
  setInfillMosaicMinColor,
  setInfillMosaicTileHeight,
  setInfillMosaicTileWidth,
 } from 'features/parameters/store/generationSlice';
-import { memo, useCallback, useMemo } from 'react';
+import { memo, useCallback } from 'react';
 import type { RgbaColor } from 'react-colorful';
 import { useTranslation } from 'react-i18next';

 const ParamInfillMosaicTileSize = () => {
  const dispatch = useAppDispatch();

-  const selector = useMemo(
-    () =>
-      createSelector(selectGenerationSlice, (generation) => ({
-        infillMosaicTileWidth: generation.infillMosaicTileWidth,
-        infillMosaicTileHeight: generation.infillMosaicTileHeight,
-        infillMosaicMinColor: generation.infillMosaicMinColor,
-        infillMosaicMaxColor: generation.infillMosaicMaxColor,
-      })),
-    []
-  );
-
-  const { infillMosaicTileWidth, infillMosaicTileHeight, infillMosaicMinColor, infillMosaicMaxColor } =
-    useAppSelector(selector);
-
+  const infillMosaicTileWidth = useAppSelector((s) => s.generation.infillMosaicTileWidth);
+  const infillMosaicTileHeight = useAppSelector((s) => s.generation.infillMosaicTileHeight);
+  const infillMosaicMinColor = useAppSelector((s) => s.generation.infillMosaicMinColor);
+  const infillMosaicMaxColor = useAppSelector((s) => s.generation.infillMosaicMaxColor);
  const infillMethod = useAppSelector((s) => s.generation.infillMethod);

  const { t } = useTranslation();
--- 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-library';
+import { Box, Combobox, FormControl, FormLabel, Tooltip } 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';
@ -46,20 +46,22 @@ const ParamMainModelSelect = () => {
  });

  return (
-    <Tooltip label={tooltipLabel}>
-      <FormControl isDisabled={!modelConfigs.length} isInvalid={!value || !modelConfigs.length}>
-        <InformationalPopover feature="paramModel">
-          <FormLabel>{t('modelManager.model')}</FormLabel>
-        </InformationalPopover>
-        <Combobox
-          value={value}
-          placeholder={placeholder}
-          options={options}
-          onChange={onChange}
-          noOptionsMessage={noOptionsMessage}
-        />
-      </FormControl>
-    </Tooltip>
+    <FormControl isDisabled={!modelConfigs.length} isInvalid={!value || !modelConfigs.length}>
+      <InformationalPopover feature="paramModel">
+        <FormLabel>{t('modelManager.model')}</FormLabel>
+      </InformationalPopover>
+      <Tooltip label={tooltipLabel}>
+        <Box w="full">
+          <Combobox
+            value={value}
+            placeholder={placeholder}
+            options={options}
+            onChange={onChange}
+            noOptionsMessage={noOptionsMessage}
+          />
+        </Box>
+      </Tooltip>
+    </FormControl>
  );
 };

--- a/invokeai/frontend/web/src/features/queue/components/QueueActionsMenuButton.tsx
+++ b/invokeai/frontend/web/src/features/queue/components/QueueActionsMenuButton.tsx
@ -27,8 +27,8 @@ export const QueueActionsMenuButton = memo(() => {
  const dispatch = useAppDispatch();
  const { t } = useTranslation();
  const clearQueueDisclosure = useDisclosure();
-  const isPauseEnabled = useFeatureStatus('pauseQueue').isFeatureEnabled;
-  const isResumeEnabled = useFeatureStatus('resumeQueue').isFeatureEnabled;
+  const isPauseEnabled = useFeatureStatus('pauseQueue');
+  const isResumeEnabled = useFeatureStatus('resumeQueue');
  const { queueSize } = useGetQueueStatusQuery(undefined, {
    selectFromResult: (res) => ({
      queueSize: res.data ? res.data.queue.pending + res.data.queue.in_progress : 0,
--- a/invokeai/frontend/web/src/features/queue/components/QueueControls.tsx
+++ b/invokeai/frontend/web/src/features/queue/components/QueueControls.tsx
@ -9,7 +9,7 @@ import { InvokeQueueBackButton } from './InvokeQueueBackButton';
 import { QueueActionsMenuButton } from './QueueActionsMenuButton';

 const QueueControls = () => {
-  const isPrependEnabled = useFeatureStatus('prependQueue').isFeatureEnabled;
+  const isPrependEnabled = useFeatureStatus('prependQueue');
  return (
    <Flex w="full" position="relative" borderRadius="base" gap={2} pt={2} flexDir="column">
      <ButtonGroup size="lg" isAttached={false}>
--- a/invokeai/frontend/web/src/features/queue/components/QueueTabContent.tsx
+++ b/invokeai/frontend/web/src/features/queue/components/QueueTabContent.tsx
@ -8,7 +8,7 @@ import QueueStatus from './QueueStatus';
 import QueueTabQueueControls from './QueueTabQueueControls';

 const QueueTabContent = () => {
-  const isInvocationCacheEnabled = useFeatureStatus('invocationCache').isFeatureEnabled;
+  const isInvocationCacheEnabled = useFeatureStatus('invocationCache');

  return (
    <Flex borderRadius="base" w="full" h="full" flexDir="column" gap={2}>
--- a/invokeai/frontend/web/src/features/queue/components/QueueTabQueueControls.tsx
+++ b/invokeai/frontend/web/src/features/queue/components/QueueTabQueueControls.tsx
@ -8,8 +8,8 @@ import PruneQueueButton from './PruneQueueButton';
 import ResumeProcessorButton from './ResumeProcessorButton';

 const QueueTabQueueControls = () => {
-  const isPauseEnabled = useFeatureStatus('pauseQueue').isFeatureEnabled;
-  const isResumeEnabled = useFeatureStatus('resumeQueue').isFeatureEnabled;
+  const isPauseEnabled = useFeatureStatus('pauseQueue');
+  const isResumeEnabled = useFeatureStatus('resumeQueue');
  return (
    <Flex layerStyle="first" borderRadius="base" p={2} gap={2}>
      {isPauseEnabled || isResumeEnabled ? (
--- a/invokeai/frontend/web/src/features/queue/hooks/useQueueFront.ts
+++ b/invokeai/frontend/web/src/features/queue/hooks/useQueueFront.ts
@ -13,7 +13,7 @@ export const useQueueFront = () => {
  const [_, { isLoading }] = useEnqueueBatchMutation({
    fixedCacheKey: 'enqueueBatch',
  });
-  const prependEnabled = useFeatureStatus('prependQueue').isFeatureEnabled;
+  const prependEnabled = useFeatureStatus('prependQueue');

  const isDisabled = useMemo(() => {
    return !isReady || !prependEnabled;
--- a/invokeai/frontend/web/src/features/settingsAccordions/components/ControlSettingsAccordion/ControlSettingsAccordion.tsx
+++ b/invokeai/frontend/web/src/features/settingsAccordions/components/ControlSettingsAccordion/ControlSettingsAccordion.tsx
@ -62,7 +62,7 @@ const selector = createMemoizedSelector(selectControlAdaptersSlice, (controlAdap
 export const ControlSettingsAccordion: React.FC = memo(() => {
  const { t } = useTranslation();
  const { controlAdapterIds, badges } = useAppSelector(selector);
-  const isControlNetDisabled = useFeatureStatus('controlNet').isFeatureDisabled;
+  const isControlNetEnabled = useFeatureStatus('controlNet');
  const { isOpen, onToggle } = useStandaloneAccordionToggle({
    id: 'control-settings',
    defaultIsOpen: true,
@ -71,7 +71,7 @@ export const ControlSettingsAccordion: React.FC = memo(() => {
  const [addIPAdapter, isAddIPAdapterDisabled] = useAddControlAdapter('ip_adapter');
  const [addT2IAdapter, isAddT2IAdapterDisabled] = useAddControlAdapter('t2i_adapter');

-  if (isControlNetDisabled) {
+  if (!isControlNetEnabled) {
    return null;
  }

--- a/invokeai/frontend/web/src/features/settingsAccordions/components/ImageSettingsAccordion/ImageSettingsAccordion.tsx
+++ b/invokeai/frontend/web/src/features/settingsAccordions/components/ImageSettingsAccordion/ImageSettingsAccordion.tsx
@ -29,6 +29,7 @@ const selector = createMemoizedSelector(
    const { shouldRandomizeSeed, model } = generation;
    const { hrfEnabled } = hrf;
    const badges: string[] = [];
+    const isSDXL = model?.base === 'sdxl';

    if (activeTabName === 'unifiedCanvas') {
      const {
@ -53,10 +54,10 @@ const selector = createMemoizedSelector(
      badges.push('Manual Seed');
    }

-    if (hrfEnabled) {
+    if (hrfEnabled && !isSDXL) {
      badges.push('HiRes Fix');
    }
-    return { badges, activeTabName, isSDXL: model?.base === 'sdxl' };
+    return { badges, activeTabName, isSDXL };
  }
 );

--- a/invokeai/frontend/web/src/features/system/components/AboutModal/AboutModal.tsx
+++ b/invokeai/frontend/web/src/features/system/components/AboutModal/AboutModal.tsx
@ -21,7 +21,6 @@ import {
 import ScrollableContent from 'common/components/OverlayScrollbars/ScrollableContent';
 import { discordLink, githubLink, websiteLink } from 'features/system/store/constants';
 import { map } from 'lodash-es';
-/** @knipignore */
 import InvokeLogoYellow from 'public/assets/images/invoke-tag-lrg.svg';
 import type { ReactElement } from 'react';
 import { cloneElement, memo, useCallback } from 'react';
--- a/invokeai/frontend/web/src/features/system/components/InvokeAILogoComponent.tsx
+++ b/invokeai/frontend/web/src/features/system/components/InvokeAILogoComponent.tsx
@ -2,7 +2,6 @@
 import { Image, Text, Tooltip } from '@invoke-ai/ui-library';
 import { useStore } from '@nanostores/react';
 import { $logo } from 'app/store/nanostores/logo';
-/** @knipignore */
 import InvokeLogoYellow from 'public/assets/images/invoke-symbol-ylw-lrg.svg';
 import { memo, useMemo, useRef } from 'react';
 import { useGetAppVersionQuery } from 'services/api/endpoints/appInfo';
--- a/invokeai/frontend/web/src/features/system/components/SettingsModal/SettingsLanguageSelect.tsx
+++ b/invokeai/frontend/web/src/features/system/components/SettingsModal/SettingsLanguageSelect.tsx
@ -40,7 +40,7 @@ export const SettingsLanguageSelect = memo(() => {
  const { t } = useTranslation();
  const dispatch = useAppDispatch();
  const language = useAppSelector((s) => s.system.language);
-  const isLocalizationEnabled = useFeatureStatus('localization').isFeatureEnabled;
+  const isLocalizationEnabled = useFeatureStatus('localization');

  const value = useMemo(() => options.find((o) => o.value === language), [language]);

--- a/invokeai/frontend/web/src/features/system/components/SettingsModal/SettingsMenu.tsx
+++ b/invokeai/frontend/web/src/features/system/components/SettingsModal/SettingsMenu.tsx
@ -23,9 +23,9 @@ const SettingsMenu = () => {
  const { isOpen, onOpen, onClose } = useDisclosure();
  useGlobalMenuClose(onClose);

-  const isBugLinkEnabled = useFeatureStatus('bugLink').isFeatureEnabled;
-  const isDiscordLinkEnabled = useFeatureStatus('discordLink').isFeatureEnabled;
-  const isGithubLinkEnabled = useFeatureStatus('githubLink').isFeatureEnabled;
+  const isBugLinkEnabled = useFeatureStatus('bugLink');
+  const isDiscordLinkEnabled = useFeatureStatus('discordLink');
+  const isGithubLinkEnabled = useFeatureStatus('githubLink');

  return (
    <Menu isOpen={isOpen} onOpen={onOpen} onClose={onClose}>
--- a/invokeai/frontend/web/src/features/system/hooks/useFeatureStatus.ts
+++ b/invokeai/frontend/web/src/features/system/hooks/useFeatureStatus.ts
@ -1,32 +1,24 @@
+import { createSelector } from '@reduxjs/toolkit';
 import { useAppSelector } from 'app/store/storeHooks';
 import type { AppFeature, SDFeature } from 'app/types/invokeai';
+import { selectConfigSlice } from 'features/system/store/configSlice';
 import type { InvokeTabName } from 'features/ui/store/tabMap';
 import { useMemo } from 'react';

 export const useFeatureStatus = (feature: AppFeature | SDFeature | InvokeTabName) => {
-  const disabledTabs = useAppSelector((s) => s.config.disabledTabs);
-
-  const disabledFeatures = useAppSelector((s) => s.config.disabledFeatures);
-
-  const disabledSDFeatures = useAppSelector((s) => s.config.disabledSDFeatures);
-
-  const isFeatureDisabled = useMemo(
+  const selectIsFeatureEnabled = useMemo(
    () =>
-      disabledFeatures.includes(feature as AppFeature) ||
-      disabledSDFeatures.includes(feature as SDFeature) ||
-      disabledTabs.includes(feature as InvokeTabName),
-    [disabledFeatures, disabledSDFeatures, disabledTabs, feature]
+      createSelector(selectConfigSlice, (config) => {
+        return !(
+          config.disabledFeatures.includes(feature as AppFeature) ||
+          config.disabledSDFeatures.includes(feature as SDFeature) ||
+          config.disabledTabs.includes(feature as InvokeTabName)
+        );
+      }),
+    [feature]
  );

-  const isFeatureEnabled = useMemo(
-    () =>
-      !(
-        disabledFeatures.includes(feature as AppFeature) ||
-        disabledSDFeatures.includes(feature as SDFeature) ||
-        disabledTabs.includes(feature as InvokeTabName)
-      ),
-    [disabledFeatures, disabledSDFeatures, disabledTabs, feature]
-  );
+  const isFeatureEnabled = useAppSelector(selectIsFeatureEnabled);

-  return { isFeatureDisabled, isFeatureEnabled };
+  return isFeatureEnabled;
 };