Inject preload script into webview.

src/config/extra_model_config.ts

@@ -44,6 +44,7 @@ const commonPaths = {
   blip: 'models/blip/',
   CogVideo: 'models/CogVideo/',
   xlabs: 'models/xlabs/',
+  instantid: 'models/instantid/',
   // End custom node model directories.
   custom_nodes: 'custom_nodes/',
 };

src/constants.ts

@@ -13,6 +13,7 @@ export const IPC_CHANNELS = {
   GET_COMFYUI_URL: 'get-comfyui-url',
   TOGGLE_LOGS: 'toggle-logs',
   COMFYUI_READY: 'comfyui-ready',
+  GET_PRELOAD_SCRIPT: 'get-preload-script',
 } as const;
 
 export const COMFY_ERROR_MESSAGE =

src/main.ts

@@ -261,7 +261,7 @@ async function loadRendererIntoMainWindow(): Promise<void> {
     log.info('Loading Vite Dev Server');
     await mainWindow.loadURL(MAIN_WINDOW_VITE_DEV_SERVER_URL);
     log.info('Opened Vite Dev Server');
-    mainWindow.webContents.openDevTools();
+    //mainWindow.webContents.openDevTools();
   } else {
     mainWindow.loadFile(path.join(__dirname, `../renderer/${MAIN_WINDOW_VITE_NAME}/index.html`));
   }
@@ -333,13 +333,15 @@ export const createWindow = async (userResourcesPath?: string): Promise<BrowserW
       preload: path.join(__dirname, 'preload.js'),
       nodeIntegration: true,
       contextIsolation: true,
+      webviewTag: true,
     },
     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'));
   });
+  ipcMain.handle(IPC_CHANNELS.GET_PRELOAD_SCRIPT, () => path.join(__dirname, 'preload.js'));
   await loadRendererIntoMainWindow();
   log.info('Renderer loaded into main window');
 
@@ -546,7 +548,7 @@ const spawnPython = (
   cwd: string,
   options = { stdx: true, logFile: '' }
 ) => {
-  log.info(`Spawning python process with command: ${cmd.join(' ')} in directory: ${cwd}`);
+  log.info(`Spawning python process ${pythonInterpreterPath} with command: ${cmd.join(' ')} in directory: ${cwd}`);
   const pythonProcess: ChildProcess = spawn(pythonInterpreterPath, cmd, {
     cwd,
   });

src/preload.ts

@@ -2,7 +2,6 @@
 
 import { contextBridge, ipcRenderer } from 'electron';
 import { IPC_CHANNELS, ELECTRON_BRIDGE_API } from './constants';
-import log from 'electron-log/main';
 
 export interface ElectronAPI {
   /**
@@ -27,34 +26,35 @@ export interface ElectronAPI {
   isPackaged: () => Promise<boolean>;
   openDialog: (options: Electron.OpenDialogOptions) => Promise<string[] | undefined>;
   getComfyUIUrl: () => Promise<string>;
+  getPreloadScript: () => Promise<string>;
   getLogs: () => Promise<string[]>;
 }
 
 const electronAPI: ElectronAPI = {
   onProgressUpdate: (callback: (update: { status: string }) => void) => {
     ipcRenderer.on(IPC_CHANNELS.LOADING_PROGRESS, (_event, value) => {
-      log.info(`Received ${IPC_CHANNELS.LOADING_PROGRESS} event`, value);
+      console.info(`Received ${IPC_CHANNELS.LOADING_PROGRESS} event`, value);
       callback(value);
     });
   },
   onLogMessage: (callback: (message: string) => void) => {
     ipcRenderer.on(IPC_CHANNELS.LOG_MESSAGE, (_event, value) => {
-      log.info(`Received ${IPC_CHANNELS.LOG_MESSAGE} event`, value);
+      console.info(`Received ${IPC_CHANNELS.LOG_MESSAGE} event`, value);
       callback(value);
     });
   },
   onComfyUIReady: (callback: (port: number) => void) => {
     ipcRenderer.on(IPC_CHANNELS.COMFYUI_READY, (_event, port: number) => callback(port));
   },
   sendReady: () => {
-    log.info('Sending ready event to main process');
+    console.log('Sending ready event to main process');
     ipcRenderer.send(IPC_CHANNELS.RENDERER_READY);
   },
   isPackaged: () => {
     return ipcRenderer.invoke(IPC_CHANNELS.IS_PACKAGED);
   }, //Emulates app.ispackaged in renderer
   restartApp: (): void => {
-    log.info('Sending restarting app message to main process');
+    console.log('Sending restarting app message to main process');
     ipcRenderer.send(IPC_CHANNELS.RESTART_APP);
   },
   onToggleLogsView: (callback: () => void) => {
@@ -72,6 +72,9 @@ const electronAPI: ElectronAPI = {
   getComfyUIUrl: (): Promise<string> => {
     return ipcRenderer.invoke(IPC_CHANNELS.GET_COMFYUI_URL);
   },
+  getPreloadScript: (): Promise<string> => {
+    return ipcRenderer.invoke(IPC_CHANNELS.GET_PRELOAD_SCRIPT);
+  },
   openDialog: (options: Electron.OpenDialogOptions) => {
     return ipcRenderer.invoke(IPC_CHANNELS.OPEN_DIALOG, options);
   },
@@ -80,7 +83,7 @@ const electronAPI: ElectronAPI = {
   },
   onDefaultInstallLocation: (callback: (location: string) => void) => {
     ipcRenderer.on(IPC_CHANNELS.DEFAULT_INSTALL_LOCATION, (_event, value) => {
-      log.info(`Received ${IPC_CHANNELS.DEFAULT_INSTALL_LOCATION} event`, value);
+      console.log(`Received ${IPC_CHANNELS.DEFAULT_INSTALL_LOCATION} event`, value);
       callback(value);
     });
   },

src/renderer/index.tsx

@@ -1,11 +1,11 @@
-import React, { useEffect, useState, useCallback } from 'react';
+import React, { useEffect, useState, useCallback, useRef } from 'react';
 import ProgressOverlay from './screens/ProgressOverlay';
 import log from 'electron-log/renderer';
 import FirstTimeSetup from './screens/FirstTimeSetup';
 import { ElectronAPI } from 'src/preload';
 import { ELECTRON_BRIDGE_API } from 'src/constants';
 import LogViewer from './screens/LogViewer';
-
+import path from 'path';
 export interface ProgressUpdate {
   status: string;
   overwrite?: boolean;
@@ -26,6 +26,8 @@ const bodyStyle: React.CSSProperties = {
 const iframeStyle: React.CSSProperties = {
   flexGrow: 1,
   border: 'none',
+  width: '100%',
+  height: '100%',
 };
 
 const logContainerStyle: React.CSSProperties = {
@@ -51,6 +53,8 @@ const Home: React.FC = () => {
   const [showStreamingLogs, setShowStreamingLogs] = useState(false);
   const [comfyReady, setComfyReady] = useState(false);
   const [comfyPort, setComfyPort] = useState<number | null>(null);
+  const [preloadScript, setPreloadScript] = useState<string>('');
+
   const updateProgress = useCallback(({ status: newStatus }: ProgressUpdate) => {
     log.info(`Setting new status: ${newStatus}`);
     setStatus(newStatus);
@@ -87,6 +91,10 @@ const Home: React.FC = () => {
       setComfyPort(port);
       setComfyReady(true);
     });
+
+    electronAPI.getPreloadScript().then((script) => {
+      setPreloadScript(script);
+    });
   }, []);
 
   useEffect(() => {
@@ -123,7 +131,12 @@ const Home: React.FC = () => {
   if (comfyReady && comfyPort) {
     return (
       <div style={iframeContainerStyle}>
-        <iframe id="comfy-container" style={iframeStyle} src={`http://localhost:${comfyPort}`}></iframe>
+        <webview
+          id="comfy-container"
+          src={`http://localhost:${comfyPort}`}
+          style={iframeStyle}
+          preload={`file://${preloadScript}`}
+        />
         {showStreamingLogs && (
           <div style={logContainerStyle}>
             <LogViewer onClose={() => setShowStreamingLogs(false)} />