Update

Avoid packaging model with app - fixing build process Prompt user with electron file dialog for model path
grctest · Oct 26, 2024 · f1e0c40 · f1e0c40
1 parent 4458b6a
commit f1e0c40
Show file tree

Hide file tree

Showing 7 changed files with 36 additions and 42 deletions.
diff --git a/app/img/notification.png b/app/img/notification.png
diff --git a/app/img/taskbar.png b/app/img/taskbar.png
diff --git a/app/img/tray.png b/app/img/tray.png
diff --git a/package.json b/package.json
@@ -12,12 +12,11 @@
   },
   "build": {
     "appId": "ElectronBitnet",
-    "productName": "Electron Bitnet",
+    "productName": "ElectronBitnet",
     "artifactName": "ElectronBitnet.${ext}",
     "files": [
       "app/**/*",
       "bin/**/*",
-      "models/*",
       "node_modules/**/*",
       "package.json"
     ],

diff --git a/src/background.js b/src/background.js
@@ -6,7 +6,7 @@ import fs from 'fs';
 import url from "url";
 import express from "express";
 
-import { app, BrowserWindow, Menu, Tray, ipcMain, screen, shell } from "electron";
+import { app, BrowserWindow, Menu, Tray, ipcMain, shell, dialog } from "electron";
 
 import { initApplicationMenu } from "./lib/applicationMenu.js";
 
@@ -23,7 +23,7 @@ function runInference(args) {
 
   const command = [
     `"${mainPath}"`,
-    '-m', path.join('models', args.model),
+    '-m', args.model,
     '-n', args.n_predict,
     '-t', args.threads,
     '-p', `"${args.prompt}"`,
@@ -162,6 +162,14 @@ const createWindow = async () => {
     signalHandler();
   });
 
+  ipcMain.handle('openFileDialog', async () => {
+    const result = await dialog.showOpenDialog({
+        properties: ['openFile'],
+        filters: [{ name: 'GGUF Files', extensions: ['gguf'] }]
+    });
+    return result.filePaths;
+  });
+
   tray.on("click", () => {
     mainWindow?.setAlwaysOnTop(true);
     mainWindow?.show();

diff --git a/src/components/Home.jsx b/src/components/Home.jsx
@@ -1,4 +1,5 @@
 import React, { useState, useEffect } from "react";
+import { UploadIcon } from "@radix-ui/react-icons";
 
 import {
   Card,
@@ -14,23 +15,11 @@ import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { Textarea } from "@/components/ui/textarea";
 
-import {
-    Select,
-    SelectContent,
-    SelectGroup,
-    SelectLabel,
-    SelectItem,
-    SelectTrigger,
-    SelectValue,
-} from "@/components/ui/select";
-
 import ExternalLink from "@/components/ExternalLink.jsx";
 
 export default function Home(properties) {
-
-
     const [tokenQuantity, setTokenQuantity] = useState(20);
-    const [model, setModel] = useState("ggml-model-i2_s.gguf");
+    const [model, setModel] = useState(""); // proven compatible: ggml-model-i2_s.gguf
     const [threads, setThreads] = useState(2);
     const [ctxSize, setCtxSize] = useState(2048);
     const [temperature, setTemperature] = useState(0.8);
@@ -40,6 +29,13 @@ export default function Home(properties) {
     const [runningInference, setRunningInference] = useState(false);
     const [aiResponse, setAiResponse] = useState("");
 
+    const handleFileSelect = async () => {
+        const filePaths = await window.electron.openFileDialog();
+        if (filePaths.length > 0) {
+            setModel(filePaths[0]);
+        }
+    };
+
     useEffect(() => {
         if (!window.electron) {
             return;
@@ -86,24 +82,14 @@ export default function Home(properties) {
                                 }}
                             />
                             <Label>Model</Label>
-                            <Select
-                                onValueChange={(model) => {
-                                    setModel(model);
-                                }}
-                                value={model}
-                            >
-                                <SelectTrigger>
-                                    <SelectValue>{model}</SelectValue>
-                                </SelectTrigger>
-                                <SelectContent>
-                                    <SelectGroup>
-                                        <SelectLabel>Models</SelectLabel>
-                                        <SelectItem value="ggml-model-i2_s.gguf">
-                                            ggml-model-i2_s.gguf
-                                        </SelectItem>
-                                    </SelectGroup>
-                                </SelectContent>
-                            </Select>
+                            <div className="grid grid-cols-4 gap-2">
+                                <div className="col-span-3">
+                                    <Input readOnly value={model ? model.split("\\").at(-1) : ""} />
+                                </div>
+                                <Button variant="outline" onClick={handleFileSelect}>
+                                    <UploadIcon />
+                                </Button>
+                            </div>
                             <Label>Threads</Label>
                             <Input
                                 placeholder={2}
@@ -152,8 +138,11 @@ export default function Home(properties) {
                             />
                             <div className="grid grid-cols-2 gap-2">
                                 {
-                                    !runningInference
-                                    ? <Button
+                                    runningInference || !model
+                                    ? <Button disabled>
+                                        Run Inference
+                                    </Button>
+                                    : <Button
                                         onClick={() => {
                                             setAiResponse("");
                                             setRunningInference(true);
@@ -169,9 +158,6 @@ export default function Home(properties) {
                                     >
                                         Run Inference
                                     </Button>
-                                    : <Button disabled>
-                                        Run Inference
-                                    </Button>
                                 }
 
                                 <Button
@@ -185,6 +171,7 @@ export default function Home(properties) {
 
                         </div>
                         <div className="col-span-2">
+                            <b>Response</b>
                             <Textarea readOnly={true} rows={20} className="w-full" value={aiResponse} />
                         </div>
                     </div>

diff --git a/src/preload.js b/src/preload.js
@@ -2,7 +2,6 @@ import { ipcRenderer, contextBridge } from "electron";
 
 contextBridge.exposeInMainWorld("electron", {
   openURL: async (target) => ipcRenderer.send("openURL", target),
-  // on aiResponse
   onAiResponse: (func) => {
     ipcRenderer.on("aiResponse", (event, data) => {
       func(data);
@@ -19,5 +18,6 @@ contextBridge.exposeInMainWorld("electron", {
     });
   },
   runInference: async (args) => ipcRenderer.send("runInference", args),
-  stopInference: async (args) => ipcRenderer.send("stopInference", args)
+  stopInference: async (args) => ipcRenderer.send("stopInference", args),
+  openFileDialog: async () => ipcRenderer.invoke("openFileDialog"),
 });