From 056b55bf2a8c155a48e4492b8ca88fe225d97449 Mon Sep 17 00:00:00 2001 From: Robin Huang Date: Thu, 17 Oct 2024 16:24:42 -0700 Subject: [PATCH] Shorten steps to install: select default install location. (#104) --- src/constants.ts | 1 + src/main.ts | 4 +- src/preload.ts | 7 +++ src/renderer/index.tsx | 12 ++++- src/renderer/screens/FirstTimeSetup.tsx | 65 +++++++++++++------------ 5 files changed, 54 insertions(+), 35 deletions(-) diff --git a/src/constants.ts b/src/constants.ts index bc9543c7..93659931 100644 --- 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 index cc2c0e3e..94e4c4f5 100644 --- 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 { + 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 index d97045fb..e8d3a889 100644 --- 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 index 86eefa24..07da4f7a 100644 --- a/src/renderer/index.tsx +++ b/src/renderer/index.tsx @@ -29,7 +29,7 @@ const Home: React.FC = () => { const [showSetup, setShowSetup] = useState(null); const [status, setStatus] = useState('Starting...'); const [logs, setLogs] = useState([]); - + const [defaultInstallLocation, setDefaultInstallLocation] = useState(''); const updateProgress = useCallback(({ status: newStatus }: ProgressUpdate) => { log.info(`Setting new status: ${newStatus}`); setStatus(newStatus); @@ -68,6 +68,14 @@ 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 ....; } @@ -75,7 +83,7 @@ const Home: React.FC = () => { if (showSetup) { return (
- setShowSetup(false)} /> + setShowSetup(false)} initialPath={defaultInstallLocation} />
); } diff --git a/src/renderer/screens/FirstTimeSetup.tsx b/src/renderer/screens/FirstTimeSetup.tsx index 32329922..d042a589 100644 --- 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 = ({ onComplete }) => { - const [selectedPath, setSelectedPath] = useState(''); +const FirstTimeSetup: React.FC = ({ onComplete, initialPath }) => { + const [selectedPath, setSelectedPath] = useState(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 = ({ onComplete }) => { return (

Install ComfyUI

- {!selectedPath && ( - <> -

- 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'. -

-

Otherwise, we will create a ComfyUI folder for you.

- - )} - {!selectedPath && ( - - )} - {selectedPath && ( + <> +

+ 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. +

+

Otherwise, we will create a ComfyUI directory for you.

+ +
= ({ 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" /> -

{selectedPath}

- )} - {selectedPath && ( -
- - -
- )} + +
+ +
+ +
); }; @@ -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',