Add Features and Improvements for Lunar Lake Release

WebUI/components.json

@@ -0,0 +1,17 @@
+{
+  "$schema": "https://shadcn-vue.com/schema.json",
+  "style": "new-york",
+  "typescript": true,
+  "tsConfigPath": "./tsconfig.json",
+  "tailwind": {
+    "config": "tailwind.config.cjs",
+    "css": "src/assets/css/index.css",
+    "baseColor": "slate",
+    "cssVariables": false
+  },
+  "framework": "vite",
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils"
+  }
+}

WebUI/electron/electron-env.d.ts

@@ -30,6 +30,8 @@ type KVObject = {
   [key: string]: any;
 };
 
+type Theme = 'dark' | 'lnl';
+
 type LocalSettings = {
   apiHost: string;
   settingPath: string;
@@ -38,6 +40,10 @@ type LocalSettings = {
   port:number;
 } & KVObject;
 
+type ThemeSettings = {
+  availableThemes: Theme[];
+};
+
 type ModelPaths = {
   llm: string,
   embedding: string,
@@ -64,4 +70,8 @@ type SetupData = {
   envType: string,
   isAdminExec:boolean,
   version:string,
+}
+
+type BackendStatus = {
+  status: 'starting' | 'running' | 'stopped',
 }

WebUI/electron/main.ts

@@ -18,6 +18,7 @@ import { randomUUID } from "node:crypto";
 import koffi from 'koffi';
 import sudo from "sudo-prompt";
 import { PathsManager } from "./pathsManager";
+import getPort, { portNumbers } from "get-port";
 
 // }
 // The built directory structure
@@ -68,11 +69,31 @@ const settings: LocalSettings = {
   isAdminExec: false,
   debug: 0,
   envType: "ultra",
-  port: 59999
+  port: 59999,
+  availableThemes: ["dark", "lnl"],
 };
 
+const logger = {
+  info: (message: string, source: 'electron-backend' | 'ai-backend' = 'electron-backend') => {
+    console.info(`[${source}]: ${message}`);
+    try {
+      win?.webContents.send('debugLog', { level: 'info', source, message })
+    } catch (error) {
+      console.error('Could not send debug log to renderer process');
+    }
+  },
+  error: (message: string, source: 'electron-backend' | 'ai-backend' = 'electron-backend') => {
+    console.error(`[${source}]: ${message}`);
+    try {
+      win?.webContents.send('debugLog', { level: 'error', source, message })
+    } catch (error) {
+      console.error('Could not send debug log to renderer process');
+    }
+  }
+}
 
-function loadSettings() {
+
+async function loadSettings() {
   const settingPath = app.isPackaged
     ? path.join(process.resourcesPath, "settings.json")
     : path.join(__dirname, "../../external/settings-dev.json");
@@ -87,6 +108,7 @@ function loadSettings() {
       }
     });
   }
+  settings.port = await getPort({ port: portNumbers(59000, 59999) });
   settings.apiHost = `http://127.0.0.1:${settings.port}`;
 }
 
@@ -134,7 +156,7 @@ async function createWindow() {
         ...details.responseHeaders,
         "Access-Control-Allow-Origin": ["*"],
         "Access-Control-Allow-Methods": ["GET,POST"],
-        "Access-Control-Allow-Headers": ["x-requested-with,Content-Type"],
+        "Access-Control-Allow-Headers": ["x-requested-with,Content-Type,Authorization"],
       }
       callback(details);
     } else {
@@ -158,7 +180,7 @@ async function createWindow() {
 
   if (VITE_DEV_SERVER_URL) {
     win.loadURL(VITE_DEV_SERVER_URL);
-    console.log("load url:" + VITE_DEV_SERVER_URL);
+    logger.info("load url:" + VITE_DEV_SERVER_URL);
   } else {
     win.loadFile(path.join(process.env.DIST, "index.html"));
   }
@@ -174,7 +196,7 @@ function logMessage(message: string) {
   if (app.isPackaged) {
     fs.appendFileSync(path.join(externalRes, "debug.log"), message + "\r\n");
   } else {
-    console.log(message);
+    logger.info(message);
   }
 }
 
@@ -233,6 +255,12 @@ function initEventHandle() {
     }
   });
 
+  ipcMain.handle("getThemeSettings", async () => {
+    return {
+      availableThemes: settings.availableThemes,
+    };
+  });
+
   ipcMain.handle("getLocalSettings", async () => {
     return {
       apiHost: settings.apiHost,
@@ -324,13 +352,13 @@ function initEventHandle() {
           const arrayBuffer = await response.arrayBuffer();
           const buffer = Buffer.from(arrayBuffer);
           fs.writeFileSync(result.filePath, buffer);
-          console.log("File downloaded and saved:", result.filePath);
+          logger.info(`File downloaded and saved: ${result.filePath}`);
         } catch (error) {
-          console.error("Download and save error:", error);
+          logger.error(`Download and save error: ${JSON.stringify(error, Object.getOwnPropertyNames, 2)}`);
         }
       }
-    } catch (err) {
-      console.error(err);
+    } catch (error) {
+      logger.error(`${JSON.stringify(error, Object.getOwnPropertyNames, 2)}`);
     };
   });
 
@@ -358,13 +386,15 @@ function initEventHandle() {
     return fs.existsSync(path);
   });
 
+  ipcMain.handle("getPythonBackendStatus", () => apiService.status)
+
   let pathsManager = new PathsManager(path.join(externalRes, app.isPackaged ? "model_config.json" : "model_config.dev.json"));
 
   ipcMain.handle("getInitSetting", (event) => {
     const win = BrowserWindow.fromWebContents(event.sender);
     if (!win) { return; }
     return {
-      apiHost:settings.apiHost,
+      apiHost: settings.apiHost,
       modelLists: pathsManager.sacanAll(),
       modelPaths: pathsManager.modelPaths,
       envType: settings.envType,
@@ -395,6 +425,34 @@ function initEventHandle() {
     return pathsManager.scanLLMModles();
   });
 
+  ipcMain.handle("refreshEmbeddingModels", (event) => {
+    return pathsManager.scanEmbedding();
+  });
+
+  ipcMain.handle("getDownloadedDiffusionModels", (event) => {
+    return pathsManager.scanSDModleLists(false);
+  });
+
+  ipcMain.handle("getDownloadedInpaintModels", (event) => {
+    return pathsManager.scanInpaint(false);
+  });
+
+  ipcMain.handle("getDownloadedLoras", (event) => {
+    return pathsManager.scanLora(false);
+  });
+
+  ipcMain.handle("getDownloadedLLMs", (event) => {
+    return pathsManager.scanLLMModles(false);
+  });
+
+  ipcMain.handle("getDownloadedEmbeddingModels", (event) => {
+    return pathsManager.scanEmbedding(false);
+  });
+
+  ipcMain.on("openDevTools", () => {
+    win?.webContents.openDevTools({ mode: "detach", activate: true });
+  });
+
   ipcMain.on("openImageWithSystem", (event, url: string) => {
     // Assuming 'settings' and 'externalRes' are properly defined
     let imagePath = url.replace(settings.apiHost + "/", ""); // Remove the API host part
@@ -437,10 +495,14 @@ function initEventHandle() {
 }
 const apiService: {
   webProcess: ChildProcess | null,
-  normalExit: boolean
+  normalExit: boolean,
+  status: BackendStatus,
+  desiredState: 'running' | 'stopped'
 } = {
   webProcess: null,
-  normalExit: true
+  normalExit: true,
+  status: { status: "starting" },
+  desiredState: 'running'
 }
 
 function isProcessRunning(pid: number) {
@@ -455,30 +517,66 @@ function wakeupApiService() {
   const wordkDir = path.resolve(app.isPackaged ? path.join(process.resourcesPath, "service") : path.join(__dirname, "../../../service"));
   const baseDir = app.isPackaged ? process.resourcesPath : path.join(__dirname, "../../../");
   const pythonExe = path.resolve(path.join(baseDir, "env/python.exe"));
-  const newEnv = {
+  const additionalEnvVariables = {
     "SYCL_ENABLE_DEFAULT_CONTEXTS": "1",
     "SYCL_CACHE_PERSISTENT": "1",
     "PYTHONIOENCODING": "utf-8"
   };
 
-  if (settings.debug) {
-    apiService.webProcess = spawn("cmd.exe", ["/c", pythonExe, "web_api.py", "--port", settings.port.toString()], {
-      cwd: wordkDir,
-      detached: true,
-      windowsHide: false,
-      env: Object.assign(process.env, newEnv)
-    });
-  } else {
-    apiService.webProcess = spawn(pythonExe, ["web_api.py", "--port", settings.port.toString()], {
-      cwd: wordkDir,
-      windowsHide: true,
-      env: Object.assign(process.env, newEnv)
-    });
-  }
+  spawnAPI(pythonExe, wordkDir, additionalEnvVariables);
 }
 
+function spawnAPI(pythonExe: string, wordkDir: string, additionalEnvVariables: Record<string, string>, tries = 0) {
+  if (apiService.desiredState === 'stopped') return;
+  tries++;
+  let stderrData = '';
+  let maxTries = 2;
+  logger.info(`#${tries} try to start python API`)
+
+  const webProcess = spawn(pythonExe, ["web_api.py", "--port", settings.port.toString()], {
+    cwd: wordkDir,
+    windowsHide: true,
+    env: Object.assign(process.env, additionalEnvVariables)
+  });
+
+  apiService.webProcess = webProcess;
+
+  const handleFailure = (err: Error | null, code: number | null) => {
+    logger.error(`Error: ${err || `Process exited with code ${code}`}`);
+    if (tries < maxTries) {
+      spawnAPI(pythonExe, wordkDir, additionalEnvVariables, tries);
+    } else {
+      apiService.status = { status: "stopped" };
+      logger.error(`Maximum attempts reached. Giving up.`);
+      if (webProcess.stderr != null) {
+        // TODO: catch + retry
+        logger.info(`stderrData: ${stderrData}`);
+        win?.webContents.send('reportError', stderrData);
+        //throw new Error(`Backend could not start:\n ${stderrData}`) 
+      }
+    }
+  };
+
+  apiService.status = { status: "running" };
+
+  webProcess.on('error', (err) => handleFailure(err, null));
+  webProcess.on('exit', (code, signal) => handleFailure(null, code));
+  webProcess.stderr?.on('data', (data) => {
+    stderrData = data.toString();
+  });
+
+  webProcess.stdout.on('data', (message) => {
+    logger.info(`${message}`, 'ai-backend')
+  })
+  webProcess.stderr.on('data', (message) => {
+    logger.error(`${message}`, 'ai-backend')
+  })
+}
+
+
 function closeApiService() {
   apiService.normalExit = true;
+  apiService.desiredState = 'stopped';
   if (apiService.webProcess != null && apiService.webProcess.pid && isProcessRunning(apiService.webProcess.pid)) {
     apiService.webProcess.kill();
     apiService.webProcess = null;
@@ -521,8 +619,8 @@ ipcMain.on("openImageWin", (_: IpcMainEvent, url: string, title: string, width:
 ipcMain.handle('showSaveDialog', async (event, options: Electron.SaveDialogOptions) => {
   dialog.showSaveDialog(options).then(result => {
     return result;
-  }).catch(err => {
-    console.error(err);
+  }).catch(error => {
+    logger.error(`${JSON.stringify(error, Object.getOwnPropertyNames, 2)}`);
   });
 });
 
@@ -584,7 +682,7 @@ app.whenReady().then(async () => {
     });
     app.exit();
   } else {
-    loadSettings();
+    await loadSettings();
     initEventHandle();
     createWindow();
     wakeupApiService();

WebUI/electron/pathsManager.ts

@@ -58,11 +58,11 @@ export class PathsManager {
             throw ex;
         }
     }
-    scanSDModleLists() {
-        const models = [
+    scanSDModleLists(returnDefaults = true) {
+        const models = returnDefaults ? [
             "Lykon/dreamshaper-8",
             "RunDiffusion/Juggernaut-XL-v9",
-        ]
+        ] : [];
         const dir = this.modelPaths.stableDiffusion;
         if (fs.existsSync(dir)) {
 
@@ -94,10 +94,10 @@ export class PathsManager {
         }
         return models
     }
-    scanLLMModles() {
-        const models = [
+    scanLLMModles(returnDefaults = true) {
+        const models = returnDefaults ? [
             "microsoft/Phi-3-mini-4k-instruct",
-        ]
+        ] : [];
         const dir = this.modelPaths.llm;
         if (fs.existsSync(dir)) {
             const modelsSet = new Set(models);
@@ -119,12 +119,12 @@ export class PathsManager {
         }
         return models
     }
-    scanLora() {
-        const models = [
+    scanLora(returnDefaults = true) {
+        const models = returnDefaults ? [
             "None",
             "latent-consistency/lcm-lora-sdxl",
             "latent-consistency/lcm-lora-sdv1-5",
-        ]
+        ] : [];
         const loraDir = this.modelPaths.lora;
         if (fs.existsSync(loraDir)) {
             const modelsSet = new Set(models);
@@ -153,16 +153,16 @@ export class PathsManager {
         }
         return models
     }
-    scanEmbedding() {
-        return [
+    scanEmbedding(returnDefaults = true) {
+        return returnDefaults ? [
             "BAAI/bge-large-en-v1.5",
             "BAAI/bge-large-zh-v1.5"
-        ]
+        ] : [];
     }
-    scanInpaint() {
-        const models = [
+    scanInpaint(returnDefaults = true) {
+        const models = returnDefaults ? [
             "Lykon/dreamshaper-8-inpainting"
-        ]
+        ] : [];
         const dir = this.modelPaths.inpaint;
         if (fs.existsSync(dir)) {
             const modelsSet = new Set(models);