Shorten steps to install: select default install location. (#104)

Comfy-Org · Oct 17, 2024 · 056b55b · 056b55b
1 parent b76ddb5
commit 056b55b
Show file tree

Hide file tree

Showing 5 changed files with 54 additions and 35 deletions.
diff --git a/src/constants.ts b/src/constants.ts
@@ -7,6 +7,7 @@ export const IPC_CHANNELS = {
   SELECTED_DIRECTORY: 'selected-directory',
   OPEN_DIALOG: 'open-dialog',
   FIRST_TIME_SETUP_COMPLETE: 'first-time-setup-complete',
+  DEFAULT_INSTALL_LOCATION: 'default-install-location',
 } as const;
 
 export const COMFY_ERROR_MESSAGE =

diff --git a/src/main.ts b/src/main.ts
@@ -168,7 +168,6 @@ if (!gotTheLock) {
         log.info('Open dialog');
         return dialog.showOpenDialogSync({
           ...options,
-          defaultPath: app.getPath('documents'),
         });
       });
       await handleFirstTimeSetup();
@@ -300,6 +299,9 @@ export const createWindow = async (userResourcesPath?: string): Promise<BrowserW
     autoHideMenuBar: true,
   });
   log.info('Loading renderer into main window');
+  mainWindow.webContents.on('did-finish-load', () => {
+    mainWindow.webContents.send(IPC_CHANNELS.DEFAULT_INSTALL_LOCATION, app.getPath('documents'));
+  });
   await loadRendererIntoMainWindow();
   log.info('Renderer loaded into main window');
 

diff --git a/src/preload.ts b/src/preload.ts
@@ -19,6 +19,7 @@ export interface ElectronAPI {
   onShowSelectDirectory: (callback: () => void) => void;
   onLogMessage: (callback: (message: string) => void) => void;
   onFirstTimeSetupComplete: (callback: () => void) => void;
+  onDefaultInstallLocation: (callback: (location: string) => void) => void;
   sendReady: () => void;
   restartApp: () => void;
   isPackaged: boolean;
@@ -59,6 +60,12 @@ const electronAPI: ElectronAPI = {
   onFirstTimeSetupComplete: (callback: () => void) => {
     ipcRenderer.on(IPC_CHANNELS.FIRST_TIME_SETUP_COMPLETE, () => callback());
   },
+  onDefaultInstallLocation: (callback: (location: string) => void) => {
+    ipcRenderer.on(IPC_CHANNELS.DEFAULT_INSTALL_LOCATION, (_event, value) => {
+      log.info(`Received ${IPC_CHANNELS.DEFAULT_INSTALL_LOCATION} event`, value);
+      callback(value);
+    });
+  },
 };
 
 contextBridge.exposeInMainWorld(ELECTRON_BRIDGE_API, electronAPI);
diff --git a/src/renderer/index.tsx b/src/renderer/index.tsx
@@ -29,7 +29,7 @@ const Home: React.FC = () => {
   const [showSetup, setShowSetup] = useState<boolean | null>(null);
   const [status, setStatus] = useState('Starting...');
   const [logs, setLogs] = useState<string[]>([]);
-
+  const [defaultInstallLocation, setDefaultInstallLocation] = useState<string>('');
   const updateProgress = useCallback(({ status: newStatus }: ProgressUpdate) => {
     log.info(`Setting new status: ${newStatus}`);
     setStatus(newStatus);
@@ -68,14 +68,22 @@ const Home: React.FC = () => {
     });
   }, [updateProgress, addLogMessage]);
 
+  useEffect(() => {
+    const electronAPI: ElectronAPI = (window as any)[ELECTRON_BRIDGE_API];
+
+    electronAPI.onDefaultInstallLocation((location: string) => {
+      setDefaultInstallLocation(location);
+    });
+  }, []);
+
   if (showSetup === null) {
     return <> Loading ....</>;
   }
 
   if (showSetup) {
     return (
       <div style={bodyStyle}>
-        <FirstTimeSetup onComplete={() => setShowSetup(false)} />
+        <FirstTimeSetup onComplete={() => setShowSetup(false)} initialPath={defaultInstallLocation} />
       </div>
     );
   }

diff --git a/src/renderer/screens/FirstTimeSetup.tsx b/src/renderer/screens/FirstTimeSetup.tsx
@@ -4,16 +4,18 @@ import log from 'electron-log/renderer';
 
 interface FirstTimeSetupProps {
   onComplete: (selectedDirectory: string) => void;
+  initialPath: string;
 }
 
-const FirstTimeSetup: React.FC<FirstTimeSetupProps> = ({ onComplete }) => {
-  const [selectedPath, setSelectedPath] = useState<string>('');
+const FirstTimeSetup: React.FC<FirstTimeSetupProps> = ({ onComplete, initialPath }) => {
+  const [selectedPath, setSelectedPath] = useState<string>(initialPath);
   const electronAPI: ElectronAPI = (window as any).electronAPI;
 
-  const handleDirectorySelect = async () => {
+  const handleDirectoryChange = async () => {
     const options: Electron.OpenDialogOptions = {
       title: 'Select a directory',
       properties: ['openDirectory', 'createDirectory'],
+      defaultPath: selectedPath,
     };
     const directory = await electronAPI.openDialog(options);
     if (directory && directory.length > 0) {
@@ -38,21 +40,15 @@ const FirstTimeSetup: React.FC<FirstTimeSetupProps> = ({ onComplete }) => {
   return (
     <div style={styles.container}>
       <h1 style={styles.title}>Install ComfyUI</h1>
-      {!selectedPath && (
-        <>
-          <p style={styles.description}>
-            Please select a directory for where ComfyUI will store models, outputs, etc. If you already have a ComfyUI
-            setup, you can select that to reuse your existing model files eg. 'C:/Users/comfy/ComfyUI'.
-          </p>
-          <p style={styles.description}>Otherwise, we will create a ComfyUI folder for you.</p>
-        </>
-      )}
-      {!selectedPath && (
-        <button onClick={handleDirectorySelect} style={styles.selectButton}>
-          Select Directory
-        </button>
-      )}
-      {selectedPath && (
+      <>
+        <p style={styles.description}>
+          Select a directory for where ComfyUI will store models, outputs, and custom nodes. If you already have a
+          ComfyUI setup, you can select that to reuse your existing model files eg. 'C:/Users/comfyanonymous/ComfyUI'.
+          Custom nodes will need to be re-installed.
+        </p>
+        <p style={styles.description}>Otherwise, we will create a ComfyUI directory for you.</p>
+      </>
+      <div style={styles.directoryContainer}>
         <div style={styles.pathDisplay}>
           <svg
             xmlns="http://www.w3.org/2000/svg"
@@ -69,20 +65,18 @@ const FirstTimeSetup: React.FC<FirstTimeSetupProps> = ({ onComplete }) => {
               d="M2.25 12.75V12A2.25 2.25 0 0 1 4.5 9.75h15A2.25 2.25 0 0 1 21.75 12v.75m-8.69-6.44-2.12-2.12a1.5 1.5 0 0 0-1.061-.44H4.5A2.25 2.25 0 0 0 2.25 6v12a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9a2.25 2.25 0 0 0-2.25-2.25h-5.379a1.5 1.5 0 0 1-1.06-.44Z"
             />
           </svg>
-
           <p style={styles.pathText}>{selectedPath}</p>
         </div>
-      )}
-      {selectedPath && (
-        <div style={styles.buttonContainer}>
-          <button onClick={() => setSelectedPath('')} style={styles.changePathButton}>
-            Back
-          </button>
-          <button onClick={handleInstall} style={styles.installButton}>
-            Install
-          </button>
-        </div>
-      )}
+        <button onClick={handleDirectoryChange} style={styles.changePathButton}>
+          Change
+        </button>
+      </div>
+
+      <div style={styles.buttonContainer}>
+        <button onClick={handleInstall} style={styles.installButton}>
+          Install
+        </button>
+      </div>
     </div>
   );
 };
@@ -127,9 +121,16 @@ const styles = {
     backgroundColor: '#60a5fa',
     color: '#ffffff',
   },
-  pathDisplay: {
-    marginTop: '10px',
+  directoryContainer: {
+    display: 'flex',
+    flexDirection: 'row' as const,
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: '10px',
     marginBottom: '20px',
+    marginTop: '10px',
+  },
+  pathDisplay: {
     padding: '10px',
     backgroundColor: '#2d2d2d',
     borderRadius: '3px',