ui: redesign followups 4

invokeai/frontend/web/public/locales/en.json

@@ -426,6 +426,9 @@
         "problemDeletingImagesDesc": "One or more images could not be deleted"
     },
     "hotkeys": {
+        "searchHotkeys": "Search Hotkeys",
+        "clearSearch": "Clear Search",
+        "noHotkeysFound": "No Hotkeys Found",
         "acceptStagingImage": {
             "desc": "Accept Current Staging Area Image",
             "title": "Accept Staging Image"
@@ -434,7 +437,7 @@
             "desc": "Opens the add node menu",
             "title": "Add Nodes"
         },
-        "appHotkeys": "App Hotkeys",
+        "appHotkeys": "App",
         "cancel": {
             "desc": "Cancel current queue item",
             "title": "Cancel"
@@ -499,8 +502,8 @@
             "desc": "Focus the prompt input area",
             "title": "Focus Prompt"
         },
-        "galleryHotkeys": "Gallery Hotkeys",
-        "generalHotkeys": "General Hotkeys",
+        "galleryHotkeys": "Gallery",
+        "generalHotkeys": "General",
         "hideMask": {
             "desc": "Hide and unhide mask",
             "title": "Hide Mask"
@@ -521,7 +524,7 @@
             "desc": "Generate an image",
             "title": "Invoke"
         },
-        "keyboardShortcuts": "Keyboard Shortcuts",
+        "keyboardShortcuts": "Hotkeys",
         "maximizeWorkSpace": {
             "desc": "Close panels and maximize work area",
             "title": "Maximize Workspace"
@@ -542,7 +545,7 @@
             "desc": "Next Staging Area Image",
             "title": "Next Staging Image"
         },
-        "nodesHotkeys": "Nodes Hotkeys",
+        "nodesHotkeys": "Nodes",
         "pinOptions": {
             "desc": "Pin the options panel",
             "title": "Pin Options"
@@ -611,31 +614,31 @@
             "desc": "Open and close the gallery drawer",
             "title": "Toggle Gallery"
         },
-        "toggleGalleryPin": {
-            "desc": "Pins and unpins the gallery to the UI",
-            "title": "Toggle Gallery Pin"
+        "toggleOptions": {
+            "desc": "Open and close the options panel",
+            "title": "Toggle Options"
+        },
+        "toggleOptionsAndGallery": {
+            "desc": "Open and close the options and gallery panels",
+            "title": "Toggle Options and Gallery"
+        },
+        "resetOptionsAndGallery": {
+            "desc": "Resets the options and gallery panels",
+            "title": "Reset Options and Gallery"
         },
         "toggleLayer": {
             "desc": "Toggles mask/base layer selection",
             "title": "Toggle Layer"
         },
-        "toggleOptions": {
-            "desc": "Open and close the options panel",
-            "title": "Toggle Options"
-        },
         "toggleSnap": {
             "desc": "Toggles Snap to Grid",
             "title": "Toggle Snap"
         },
-        "toggleViewer": {
-            "desc": "Open and close Image Viewer",
-            "title": "Toggle Viewer"
-        },
         "undoStroke": {
             "desc": "Undo a brush stroke",
             "title": "Undo Stroke"
         },
-        "unifiedCanvasHotkeys": "Unified Canvas Hotkeys",
+        "unifiedCanvasHotkeys": "Unified Canvas",
         "upscale": {
             "desc": "Upscale the current image",
             "title": "Upscale"
@@ -1076,6 +1079,11 @@
         "aspect": "Aspect",
         "aspectRatio": "Aspect Ratio",
         "aspectRatioFree": "Free",
+        "lockAspectRatio": "Lock Aspect Ratio",
+        "swapDimensions": "Swap Dimensions",
+        "setToOptimalSize": "Optimize size for model",
+        "setToOptimalSizeTooSmall": "$t(parameters.setToOptimalSize) (may be too small)",
+        "setToOptimalSizeTooLarge": "$t(parameters.setToOptimalSize) (may be too large)",
         "boundingBoxHeader": "Bounding Box",
         "boundingBoxHeight": "Bounding Box Height",
         "boundingBoxWidth": "Bounding Box Width",

invokeai/frontend/web/src/app/store/middleware/devtools/actionsDenylist.ts

@@ -3,19 +3,14 @@
  */
 export const actionsDenylist = [
   // very spammy canvas actions
-  'canvas/setCursorPosition',
   'canvas/setStageCoordinates',
   'canvas/setStageScale',
-  'canvas/setIsDrawing',
   'canvas/setBoundingBoxCoordinates',
   'canvas/setBoundingBoxDimensions',
-  'canvas/setIsDrawing',
   'canvas/addPointToCurrentLine',
   // bazillions during generation
   'socket/socketGeneratorProgress',
   'socket/appSocketGeneratorProgress',
-  // every time user presses shift
-  // 'hotkeys/shiftKeyPressed',
   // this happens after every state change
   '@@REMEMBER_PERSISTED',
 ];

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

@@ -13,7 +13,10 @@ import type {
 import { imageSelected } from 'features/gallery/store/gallerySlice';
 import { fieldImageValueChanged } from 'features/nodes/store/nodesSlice';
 import { workflowExposedFieldAdded } from 'features/nodes/store/workflowSlice';
-import { initialImageChanged } from 'features/parameters/store/generationSlice';
+import {
+  initialImageChanged,
+  selectOptimalDimension,
+} from 'features/parameters/store/generationSlice';
 import { imagesApi } from 'services/api/endpoints/images';
 
 import { startAppListening } from '../';
@@ -26,7 +29,7 @@ export const dndDropped = createAction<{
 export const addImageDroppedListener = () => {
   startAppListening({
     actionCreator: dndDropped,
-    effect: async (action, { dispatch }) => {
+    effect: async (action, { dispatch, getState }) => {
       const log = logger('dnd');
       const { activeData, overData } = action.payload;
 
@@ -115,7 +118,12 @@ export const addImageDroppedListener = () => {
         activeData.payloadType === 'IMAGE_DTO' &&
         activeData.payload.imageDTO
       ) {
-        dispatch(setInitialCanvasImage(activeData.payload.imageDTO));
+        dispatch(
+          setInitialCanvasImage(
+            activeData.payload.imageDTO,
+            selectOptimalDimension(getState())
+          )
+        );
         return;
       }
 

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

@@ -6,7 +6,10 @@ import {
   controlAdapterIsEnabledChanged,
 } from 'features/controlAdapters/store/controlAdaptersSlice';
 import { fieldImageValueChanged } from 'features/nodes/store/nodesSlice';
-import { initialImageChanged } 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';
@@ -76,7 +79,9 @@ export const addImageUploadedFulfilledListener = () => {
       }
 
       if (postUploadAction?.type === 'SET_CANVAS_INITIAL_IMAGE') {
-        dispatch(setInitialCanvasImage(imageDTO));
+        dispatch(
+          setInitialCanvasImage(imageDTO, selectOptimalDimension(state))
+        );
         dispatch(
           addToast({
             ...DEFAULT_UPLOADED_TOAST,

invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/modelSelected.ts

@@ -1,16 +1,13 @@
 import { logger } from 'app/logging/logger';
-import { setBoundingBoxDimensions } from 'features/canvas/store/canvasSlice';
 import {
   controlAdapterIsEnabledChanged,
   selectControlAdapterAll,
 } from 'features/controlAdapters/store/controlAdaptersSlice';
 import { loraRemoved } from 'features/lora/store/loraSlice';
 import { modelSelected } from 'features/parameters/store/actions';
 import {
-  heightChanged,
   modelChanged,
   vaeSelected,
-  widthChanged,
 } from 'features/parameters/store/generationSlice';
 import { zParameterModel } from 'features/parameters/types/parameterSchemas';
 import { addToast } from 'features/system/store/systemSlice';
@@ -84,22 +81,6 @@ export const addModelSelectedListener = () => {
         }
       }
 
-      // Update Width / Height / Bounding Box Dimensions on Model Change
-      if (
-        state.generation.model?.base_model !== newModel.base_model &&
-        state.ui.shouldAutoChangeDimensions
-      ) {
-        if (['sdxl', 'sdxl-refiner'].includes(newModel.base_model)) {
-          dispatch(widthChanged(1024));
-          dispatch(heightChanged(1024));
-          dispatch(setBoundingBoxDimensions({ width: 1024, height: 1024 }));
-        } else {
-          dispatch(widthChanged(512));
-          dispatch(heightChanged(512));
-          dispatch(setBoundingBoxDimensions({ width: 512, height: 512 }));
-        }
-      }
-
       dispatch(modelChanged(newModel));
     },
   });

invokeai/frontend/web/src/common/components/IAIImageFallback.tsx

@@ -65,7 +65,11 @@ export const IAINoContentFallback = memo((props: IAINoImageFallbackProps) => {
   return (
     <Flex sx={styles} {...rest}>
       {icon && <Icon as={icon} boxSize={boxSize} opacity={0.7} />}
-      {props.label && <InvText textAlign="center">{props.label}</InvText>}
+      {props.label && (
+        <InvText textAlign="center" fontSize="md">
+          {props.label}
+        </InvText>
+      )}
     </Flex>
   );
 });