Remove folder picker

backend/invoke_ai_web_server.py

@@ -9,8 +9,6 @@ import io
 import base64
 import os
 import json
-import tkinter as tk
-import sys
 
 from werkzeug.utils import secure_filename
 from flask import Flask, redirect, send_from_directory, request, make_response
@@ -301,21 +299,8 @@ class InvokeAIWebServer:
             socketio.emit("systemConfig", config)
 
         @socketio.on('searchForModels')
-        def handle_search_models():
+        def handle_search_models(search_folder: str):
             try:
-                # Using tkinter to get the filepath because JS doesn't allow
-                root = tk.Tk()
-                root.title('InvokeAI')
-                root.withdraw()
-                root.iconbitmap(default=os.path.join(os.getcwd(), '../backend/logo.ico'))
-                if root.wm_state() == 'withdrawn':
-                    root.iconify()
-                root.wm_attributes('-topmost', 1)
-                root.focus_force()
-                search_folder = filedialog.askdirectory(parent=root, title='Select Checkpoint Folder')
-                root.quit()
-                root.destroy()
-
                 if not search_folder:
                     socketio.emit(
                     "foundModels",

frontend/src/app/socketio/actions.ts

@@ -30,9 +30,7 @@ export const requestSystemConfig = createAction<undefined>(
   'socketio/requestSystemConfig'
 );
 
-export const searchForModels = createAction<undefined>(
-  'socketio/searchForModels'
-);
+export const searchForModels = createAction<string>('socketio/searchForModels');
 
 export const addNewModel = createAction<InvokeAI.InvokeModelConfigProps>(
   'socketio/addNewModel'

frontend/src/app/socketio/emitters.ts

@@ -159,8 +159,8 @@ const makeSocketIOEmitters = (
     emitRequestSystemConfig: () => {
       socketio.emit('requestSystemConfig');
     },
-    emitSearchForModels: () => {
-      socketio.emit('searchForModels');
+    emitSearchForModels: (modelFolder: string) => {
+      socketio.emit('searchForModels', modelFolder);
     },
     emitAddNewModel: (modelConfig: InvokeAI.InvokeModelConfigProps) => {
       socketio.emit('addNewModel', modelConfig);

frontend/src/app/socketio/middleware.ts

@@ -185,7 +185,7 @@ export const socketioMiddleware = () => {
       }
 
       case 'socketio/searchForModels': {
-        emitSearchForModels();
+        emitSearchForModels(action.payload);
         break;
       }
 

frontend/src/common/components/IAIInput.tsx

@@ -6,6 +6,7 @@ interface IAIInputProps extends InputProps {
   label?: string;
   width?: string | number;
   value?: string;
+  size?: string;
   onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
 }
 
@@ -16,6 +17,7 @@ export default function IAIInput(props: IAIInputProps) {
     isDisabled = false,
     fontSize = 'sm',
     width,
+    size = 'sm',
     isInvalid,
     ...rest
   } = props;
@@ -39,7 +41,7 @@ export default function IAIInput(props: IAIInputProps) {
           {label}
         </FormLabel>
       )}
-      <Input {...rest} className="input-entry" size={'sm'} width={width} />
+      <Input {...rest} className="input-entry" size={size} width={width} />
     </FormControl>
   );
 }

frontend/src/features/system/components/ModelManager/SearchModels.tsx

@@ -5,7 +5,7 @@ import IAIIconButton from 'common/components/IAIIconButton';
 
 import { createSelector } from '@reduxjs/toolkit';
 import { systemSelector } from 'features/system/store/systemSelectors';
-import { Box, Flex, VStack } from '@chakra-ui/react';
+import { Box, Flex, FormControl, HStack, VStack } from '@chakra-ui/react';
 import { useAppDispatch, useAppSelector } from 'app/storeHooks';
 import { useTranslation } from 'react-i18next';
 
@@ -24,6 +24,8 @@ import _ from 'lodash';
 import type { RootState } from 'app/store';
 import type { ReactNode, ChangeEvent } from 'react';
 import type { FoundModel } from 'app/invokeai';
+import IAIInput from 'common/components/IAIInput';
+import { Field, Formik } from 'formik';
 
 const existingModelsSelector = createSelector([systemSelector], (system) => {
   const { model_list } = system;
@@ -136,8 +138,8 @@ export default function SearchModels() {
     setModelsToAdd([]);
   };
 
-  const findModelsHandler = () => {
-    dispatch(searchForModels());
+  const findModelsHandler = (values: { checkpointFolder: string }) => {
+    dispatch(searchForModels(values.checkpointFolder));
   };
 
   const addAllToSelected = () => {
@@ -250,15 +252,36 @@ export default function SearchModels() {
           />
         </Flex>
       ) : (
-        <IAIButton
-          aria-label={t('modelmanager:findModels')}
-          onClick={findModelsHandler}
+        <Formik
+          initialValues={{ checkpointFolder: '' }}
+          onSubmit={(values) => {
+            findModelsHandler(values);
+          }}
         >
-          <Flex columnGap={'0.5rem'}>
-            <MdFindInPage fontSize={20} />
-            {t('modelmanager:selectFolder')}
-          </Flex>
-        </IAIButton>
+          {({ handleSubmit }) => (
+            <form onSubmit={handleSubmit}>
+              <HStack columnGap="0.5rem">
+                <FormControl isRequired width="max-content">
+                  <Field
+                    as={IAIInput}
+                    id="checkpointFolder"
+                    name="checkpointFolder"
+                    type="text"
+                    width="lg"
+                    size="md"
+                    label={t('modelmanager:checkpointFolder')}
+                  />
+                </FormControl>
+                <IAIIconButton
+                  icon={<MdFindInPage />}
+                  aria-label={t('modelmanager:findModels')}
+                  tooltip={t('modelmanager:findModels')}
+                  type="submit"
+                />
+              </HStack>
+            </form>
+          )}
+        </Formik>
       )}
       {foundModels && (
         <Flex flexDirection={'column'} rowGap={'1rem'}>