fix app crashign when document is undefined

invokeai/app/services/invocation_processor/invocation_processor_default.py

@@ -1,4 +1,3 @@
-import cProfile
 import time
 import traceback
 from threading import BoundedSemaphore, Event, Thread
@@ -40,9 +39,6 @@ class DefaultInvocationProcessor(InvocationProcessorABC):
             self.__threadLimit.acquire()
             queue_item: Optional[InvocationQueueItem] = None
 
-            profiler = None
-            last_gesid = None
-
             while not stop_event.is_set():
                 try:
                     queue_item = self.__invoker.services.queue.get()
@@ -53,21 +49,6 @@ class DefaultInvocationProcessor(InvocationProcessorABC):
                     # do not hammer the queue
                     time.sleep(0.5)
                     continue
-
-                if last_gesid != queue_item.graph_execution_state_id:
-                    if profiler is not None:
-                        # I'm not sure what would cause us to get here, but if we do, we should restart the profiler for
-                        # the new graph_execution_state_id.
-                        profiler.disable()
-                        logger.info(f"Stopped profiler for {last_gesid}.")
-                        profiler = None
-                        last_gesid = None
-
-                    profiler = cProfile.Profile()
-                    profiler.enable()
-                    last_gesid = queue_item.graph_execution_state_id
-                    logger.info(f"Started profiling {last_gesid}.")
-
                 try:
                     graph_execution_state = self.__invoker.services.graph_execution_manager.get(
                         queue_item.graph_execution_state_id
@@ -220,13 +201,6 @@ class DefaultInvocationProcessor(InvocationProcessorABC):
                         queue_id=queue_item.session_queue_id,
                         graph_execution_state_id=graph_execution_state.id,
                     )
-                    if profiler is not None:
-                        profiler.disable()
-                        dump_path = f"{last_gesid}.prof"
-                        profiler.dump_stats(dump_path)
-                        logger.info(f"Saved profile to {dump_path}.")
-                        profiler = None
-                        last_gesid = None
 
         except KeyboardInterrupt:
             pass  # Log something? KeyboardInterrupt is probably not going to be seen by the processor

invokeai/frontend/web/package.json

@@ -96,7 +96,7 @@
     "react-icons": "^4.12.0",
     "react-konva": "^18.2.10",
     "react-redux": "9.0.4",
-    "react-resizable-panels": "^1.0.8",
+    "react-resizable-panels": "^1.0.7",
     "react-select": "5.8.0",
     "react-textarea-autosize": "^8.5.3",
     "react-use": "^17.4.2",

invokeai/frontend/web/pnpm-lock.yaml

@@ -143,8 +143,8 @@ dependencies:
     specifier: 9.0.4
     version: 9.0.4(@types/react@18.2.47)(react@18.2.0)(redux@5.0.1)
   react-resizable-panels:
-    specifier: ^1.0.8
-    version: 1.0.8(react-dom@18.2.0)(react@18.2.0)
+    specifier: ^1.0.7
+    version: 1.0.7(react-dom@18.2.0)(react@18.2.0)
   react-select:
     specifier: 5.8.0
     version: 5.8.0(@types/react@18.2.47)(react-dom@18.2.0)(react@18.2.0)
@@ -11638,8 +11638,8 @@ packages:
       use-sidecar: 1.1.2(@types/react@18.2.47)(react@18.2.0)
     dev: false
 
-  /react-resizable-panels@1.0.8(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-IuivK06FWN115VSN8TDGYuIoAzplC4oPUCDZ5d+VWJj0p6N3SMfwjggpjMUGSpQJLvMi0FXPSLLn4rGVmESjmA==}
+  /react-resizable-panels@1.0.7(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-CluJkHQheeNqIJly2FYDfri3ME+2h2nCXpf0Y+hTO1K1eVtNxXFA5hVp5cUD6NS70iiufswOmnku9QZiLr1hYg==}
     peerDependencies:
       react: ^16.14.0 || ^17.0.0 || ^18.0.0
       react-dom: ^16.14.0 || ^17.0.0 || ^18.0.0

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

@@ -116,9 +116,7 @@
         "unsaved": "Non salvato",
         "direction": "Direzione",
         "advancedOptions": "Opzioni avanzate",
-        "free": "Libero",
-        "or": "o",
-        "preferencesLabel": "Preferenze"
+        "free": "Libero"
     },
     "gallery": {
         "generations": "Generazioni",

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

@@ -24,8 +24,8 @@ export const InvAutosizeTextarea = memo(
             ref={ref}
             overflow="scroll"
             w="100%"
+            resize="none"
             minRows={3}
-            minH={20}
             onPaste={stopPastePropagation}
             onKeyUp={onKeyUpDown}
             onKeyDown={onKeyUpDown}

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

@@ -23,7 +23,6 @@ export const InvTextarea = memo(
           onPaste={stopPastePropagation}
           onKeyUp={onKeyUpDown}
           onKeyDown={onKeyUpDown}
-          minH={20}
           {...rest}
         />
       );

invokeai/frontend/web/src/common/util/isInputElement.ts

@@ -1,7 +0,0 @@
-export const isInputElement = (el: HTMLElement) => {
-  return (
-    el.tagName.toLowerCase() === 'input' ||
-    el.tagName.toLowerCase() === 'textarea' ||
-    el.tagName.toLowerCase() === 'select'
-  );
-};

invokeai/frontend/web/src/features/canvas/hooks/useCanvasHotkeys.ts

@@ -1,5 +1,4 @@
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
-import { isInputElement } from 'common/util/isInputElement';
 import {
   $canvasStage,
   $tool,
@@ -14,7 +13,6 @@ import {
   setShouldShowBoundingBox,
   setShouldSnapToGrid,
 } from 'features/canvas/store/canvasSlice';
-import { isElChildOfCanvasTab } from 'features/canvas/util/isElChildOfCanvasTab';
 import { activeTabNameSelector } from 'features/ui/store/uiSelectors';
 import { useCallback, useEffect } from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';
@@ -95,13 +93,16 @@ const useInpaintingCanvasHotkeys = () => {
     [activeTabName, shouldShowBoundingBox]
   );
 
+  useEffect(() => {
+    window.addEventListener('keydown', (e) => {
+      if (e.key === ' ' && !e.repeat) {
+        console.log('spaceeee');
+      }
+    });
+  }, []);
+
   const onKeyDown = useCallback((e: KeyboardEvent) => {
-    if (
-      e.repeat ||
-      e.key !== ' ' ||
-      isInputElement(e.target as HTMLElement) ||
-      !isElChildOfCanvasTab(e.target as HTMLElement)
-    ) {
+    if (e.repeat || e.key !== ' ') {
       return;
     }
     if ($toolStash.get() || $tool.get() === 'move') {
@@ -113,12 +114,7 @@ const useInpaintingCanvasHotkeys = () => {
     resetToolInteractionState();
   }, []);
   const onKeyUp = useCallback((e: KeyboardEvent) => {
-    if (
-      e.repeat ||
-      e.key !== ' ' ||
-      isInputElement(e.target as HTMLElement) ||
-      !isElChildOfCanvasTab(e.target as HTMLElement)
-    ) {
+    if (e.repeat || e.key !== ' ') {
       return;
     }
     if (!$toolStash.get() || $tool.get() !== 'move') {

invokeai/frontend/web/src/features/canvas/store/constants.ts

@@ -1,3 +1,2 @@
 export const CANVAS_GRID_SIZE_COARSE = 64;
 export const CANVAS_GRID_SIZE_FINE = 8;
-export const CANVAS_TAB_TESTID = 'unified-canvas-tab';

invokeai/frontend/web/src/features/canvas/util/isElChildOfCanvasTab.tsx

@@ -1,14 +0,0 @@
-import { CANVAS_TAB_TESTID } from 'features/canvas/store/constants';
-
-/**
- * Determines if an element is a child of the canvas tab. Uses the canvas data-testid,
- * actually checking against the *parent* of that element, which is the canvas's
- * panel from `react-resizable-panels`. This panel element has dynamic children, so
- * 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}"]`
-  );
-  return Boolean(canvasContainerEl?.parentElement?.contains(el));
-};

invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/BoardsSearch.tsx

@@ -3,13 +3,14 @@ import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { InvIconButton } from 'common/components/InvIconButton/InvIconButton';
 import { boardSearchTextChanged } from 'features/gallery/store/gallerySlice';
 import type { ChangeEvent, KeyboardEvent } from 'react';
-import { memo, useCallback } from 'react';
+import { memo, useCallback, useEffect, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
 import { PiXBold } from 'react-icons/pi';
 
 const BoardsSearch = () => {
   const dispatch = useAppDispatch();
   const boardSearchText = useAppSelector((s) => s.gallery.boardSearchText);
+  const inputRef = useRef<HTMLInputElement>(null);
   const { t } = useTranslation();
 
   const handleBoardSearch = useCallback(
@@ -40,9 +41,18 @@ const BoardsSearch = () => {
     [handleBoardSearch]
   );
 
+  useEffect(() => {
+    // focus the search box on mount
+    if (!inputRef.current) {
+      return;
+    }
+    inputRef.current.focus();
+  }, []);
+
   return (
     <InputGroup>
       <Input
+        ref={inputRef}
         placeholder={t('boards.searchBoard')}
         value={boardSearchText}
         onKeyDown={handleKeydown}

invokeai/frontend/web/src/features/gallery/hooks/useGalleryNavigation.ts

@@ -29,13 +29,11 @@ import { imagesSelectors } from 'services/api/util';
  */
 const getImagesPerRow = (): number => {
   const widthOfGalleryImage =
-    document
-      .querySelector(`[data-testid="${imageItemContainerTestId}"]`)
+    document?.querySelector(`[data-testid="${imageItemContainerTestId}"]`)
       ?.getBoundingClientRect().width ?? 1;
 
   const widthOfGalleryGrid =
-    document
-      .querySelector(`[data-testid="${imageListContainerTestId}"]`)
+    document?.querySelector(`[data-testid="${imageListContainerTestId}"]`)
       ?.getBoundingClientRect().width ?? 0;
 
   const imagesPerRow = Math.round(widthOfGalleryGrid / widthOfGalleryImage);
@@ -59,7 +57,7 @@ const scrollToImage = (imageName: string, index: number) => {
     return;
   }
 
-  const imageElement = document.querySelector(
+  const imageElement = document?.querySelector(
     `[data-testid="${getGalleryImageDataTestId(imageName)}"]`
   );
   const itemRect = imageElement?.getBoundingClientRect();

invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/StringFieldInputComponent.tsx

@@ -42,13 +42,7 @@ const StringFieldInputComponent = (
     );
   }
 
-  return (
-    <InvInput
-      className="nodrag"
-      onChange={handleValueChanged}
-      value={field.value}
-    />
-  );
+  return <InvInput onChange={handleValueChanged} value={field.value} />;
 };
 
 export default memo(StringFieldInputComponent);

invokeai/frontend/web/src/features/parameters/components/Core/ParamNegativePrompt.tsx

@@ -1,6 +1,6 @@
 import { Box } from '@chakra-ui/layout';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
-import { InvTextarea } from 'common/components/InvTextarea/InvTextarea';
+import { InvAutosizeTextarea } from 'common/components/InvAutosizeTextarea/InvAutosizeTextarea';
 import { AddEmbeddingButton } from 'features/embedding/AddEmbeddingButton';
 import { EmbeddingPopover } from 'features/embedding/EmbeddingPopover';
 import { usePrompt } from 'features/embedding/usePrompt';
@@ -35,7 +35,7 @@ export const ParamNegativePrompt = memo(() => {
       width={textareaRef.current?.clientWidth}
     >
       <Box pos="relative">
-        <InvTextarea
+        <InvAutosizeTextarea
           id="negativePrompt"
           name="negativePrompt"
           ref={textareaRef}
@@ -43,7 +43,10 @@ export const ParamNegativePrompt = memo(() => {
           placeholder={t('parameters.negativePromptPlaceholder')}
           onChange={onChange}
           onKeyDown={onKeyDown}
+          minH="unset"
           fontSize="sm"
+          minRows={2}
+          maxRows={5}
           variant="darkFilled"
         />
         <PromptOverlayButtonWrapper>

invokeai/frontend/web/src/features/parameters/components/Core/ParamPositivePrompt.tsx

@@ -1,6 +1,6 @@
 import { Box } from '@chakra-ui/layout';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
-import { InvTextarea } from 'common/components/InvTextarea/InvTextarea';
+import { InvAutosizeTextarea } from 'common/components/InvAutosizeTextarea/InvAutosizeTextarea';
 import { ShowDynamicPromptsPreviewButton } from 'features/dynamicPrompts/components/ShowDynamicPromptsPreviewButton';
 import { AddEmbeddingButton } from 'features/embedding/AddEmbeddingButton';
 import { EmbeddingPopover } from 'features/embedding/EmbeddingPopover';
@@ -58,15 +58,16 @@ export const ParamPositivePrompt = memo(() => {
       width={textareaRef.current?.clientWidth}
     >
       <Box pos="relative">
-        <InvTextarea
+        <InvAutosizeTextarea
           id="prompt"
           name="prompt"
           ref={textareaRef}
           value={prompt}
           placeholder={t('parameters.positivePromptPlaceholder')}
           onChange={onChange}
-          minH={28}
           onKeyDown={onKeyDown}
+          minRows={4}
+          maxRows={7}
           variant="darkFilled"
         />
         <PromptOverlayButtonWrapper>

invokeai/frontend/web/src/features/sdxl/components/SDXLPrompts/ParamSDXLNegativeStylePrompt.tsx

@@ -1,6 +1,6 @@
 import { Box } from '@chakra-ui/layout';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
-import { InvTextarea } from 'common/components/InvTextarea/InvTextarea';
+import { InvAutosizeTextarea } from 'common/components/InvAutosizeTextarea/InvAutosizeTextarea';
 import { AddEmbeddingButton } from 'features/embedding/AddEmbeddingButton';
 import { EmbeddingPopover } from 'features/embedding/EmbeddingPopover';
 import { usePrompt } from 'features/embedding/usePrompt';
@@ -45,7 +45,7 @@ export const ParamSDXLNegativeStylePrompt = memo(() => {
       width={textareaRef.current?.clientWidth}
     >
       <Box pos="relative">
-        <InvTextarea
+        <InvAutosizeTextarea
           id="prompt"
           name="prompt"
           ref={textareaRef}
@@ -53,7 +53,10 @@ export const ParamSDXLNegativeStylePrompt = memo(() => {
           placeholder={t('sdxl.negStylePrompt')}
           onChange={onChange}
           onKeyDown={onKeyDown}
+          minH="unset"
           fontSize="sm"
+          minRows={2}
+          maxRows={5}
           variant="darkFilled"
         />
         <PromptOverlayButtonWrapper>

invokeai/frontend/web/src/features/sdxl/components/SDXLPrompts/ParamSDXLPositiveStylePrompt.tsx

@@ -1,6 +1,6 @@
 import { Box } from '@chakra-ui/layout';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
-import { InvTextarea } from 'common/components/InvTextarea/InvTextarea';
+import { InvAutosizeTextarea } from 'common/components/InvAutosizeTextarea/InvAutosizeTextarea';
 import { AddEmbeddingButton } from 'features/embedding/AddEmbeddingButton';
 import { EmbeddingPopover } from 'features/embedding/EmbeddingPopover';
 import { usePrompt } from 'features/embedding/usePrompt';
@@ -35,7 +35,7 @@ export const ParamSDXLPositiveStylePrompt = memo(() => {
       width={textareaRef.current?.clientWidth}
     >
       <Box pos="relative">
-        <InvTextarea
+        <InvAutosizeTextarea
           id="prompt"
           name="prompt"
           ref={textareaRef}
@@ -43,7 +43,10 @@ export const ParamSDXLPositiveStylePrompt = memo(() => {
           placeholder={t('sdxl.posStylePrompt')}
           onChange={onChange}
           onKeyDown={onKeyDown}
+          minH="unset"
           fontSize="sm"
+          minRows={2}
+          maxRows={5}
           variant="darkFilled"
         />
         <PromptOverlayButtonWrapper>

invokeai/frontend/web/src/features/ui/components/tabs/UnifiedCanvasTab.tsx

@@ -2,7 +2,6 @@ import { Flex } from '@chakra-ui/react';
 import IAIDropOverlay from 'common/components/IAIDropOverlay';
 import IAICanvas from 'features/canvas/components/IAICanvas';
 import IAICanvasToolbar from 'features/canvas/components/IAICanvasToolbar/IAICanvasToolbar';
-import { CANVAS_TAB_TESTID } from 'features/canvas/store/constants';
 import { useDroppableTypesafe } from 'features/dnd/hooks/typesafeHooks';
 import type { CanvasInitialImageDropData } from 'features/dnd/types';
 import { isValidDrop } from 'features/dnd/util/isValidDrop';
@@ -29,6 +28,7 @@ const UnifiedCanvasTab = () => {
     <Flex
       layerStyle="first"
       ref={setDroppableRef}
+      tabIndex={-1}
       flexDirection="column"
       alignItems="center"
       gap={4}
@@ -36,7 +36,6 @@ const UnifiedCanvasTab = () => {
       borderRadius="base"
       w="full"
       h="full"
-      data-testid={CANVAS_TAB_TESTID}
     >
       <IAICanvasToolbar />
       <IAICanvas />

invokeai/frontend/web/src/features/ui/hooks/usePanel.ts

@@ -107,11 +107,8 @@ export const usePanel = (arg: UsePanelOptions): UsePanelReturn => {
       return;
     }
     const id = arg.panelGroupRef.current.getId();
-    const panelGroupElement = getPanelGroupElement(id, document);
-    const panelGroupHandleElements = getResizeHandleElementsForGroup(
-      id,
-      document
-    );
+    const panelGroupElement = getPanelGroupElement(id);
+    const panelGroupHandleElements = getResizeHandleElementsForGroup(id);
     if (!panelGroupElement) {
       return;
     }
@@ -247,7 +244,7 @@ const getSizeAsPercentage = (
     return 0;
   }
   const id = panelGroupHandleRef.current.getId();
-  const panelGroupElement = getPanelGroupElement(id, document);
+  const panelGroupElement = getPanelGroupElement(id);
   if (!panelGroupElement) {
     // No panel group element, size is 0
     return 0;
@@ -260,7 +257,7 @@ const getSizeAsPercentage = (
       : panelGroupElement.offsetHeight;
 
   // ...minus the width/height of the resize handles
-  getResizeHandleElementsForGroup(id, document).forEach((el) => {
+  getResizeHandleElementsForGroup(id).forEach((el) => {
     availableSpace -=
       panelGroupDirection === 'horizontal' ? el.offsetWidth : el.offsetHeight;
   });