Final changes - working with api key add on ,storing, location change…

… for electron app building and appdata location update for audio files
BarathwajAnandan · Nov 2, 2024 · ce9458b · ce9458b
1 parent 35c1e8f
commit ce9458b
Show file tree

Hide file tree

Showing 38 changed files with 465 additions and 719 deletions.
diff --git a/package.json b/package.json
@@ -7,32 +7,40 @@
     "start": "electron .",
     "build": "electron-builder",
     "prod": "NODE_ENV=production electron .",
-    "build:mac": "PYTHON_PATH=/opt/anaconda3/envs/quiz/bin/python electron-builder build --mac --x64 --arm64",
+    "build:mac": "electron-builder build --mac --x64 --arm64",
     "build:win": "electron-builder build --win",
     "build:linux": "electron-builder build --linux",
     "clean": "rm -rf dist node_modules",
-    "rebuild": "npm run clean && npm cache clean --force && npm install && npm run patch-dmg-builder && DEBUG=electron-builder PYTHON_PATH=/opt/anaconda3/envs/quiz/bin/python npm run build:mac",
+    "rebuild": "npm run clean && npm cache clean --force && npm install && npm run patch-dmg-builder && DEBUG=electron-builder npm run build:mac",
     "patch-dmg-builder": "node patch-dmg-builder.js"
   },
   "author": "Your Name",
   "license": "ISC",
   "devDependencies": {
     "electron": "^32.1.2",
-    "electron-builder": "^25.0.5"
+    "electron-builder": "^25.1.8"
   },
   "dependencies": {
     "axios": "^1.7.7",
     "dotenv": "^10.0.0",
+    "electron-store": "^8.1.0",
     "groq-sdk": "^0.7.0",
     "reveal.js": "^5.1.0",
     "ws": "^8.18.0"
   },
   "build": {
-    "appId": "com.yourdomain.streamsage",
+    "appId": "com.quizzible.streamsage",
     "productName": "StreamSage",
     "mac": {
-      "category": "public.app-category.productivity"
+      "category": "public.app-category.productivity",
+      "hardenedRuntime": true,
+      "entitlements": "build/entitlements.mac.plist",
+      "entitlementsInherit": "build/entitlements.mac.plist",
+      "target": ["dmg"], 
+      "artifactName": "${productName}.${ext}"
     },
+    "icon": "assets/icon.icns",
+
     "files": [
       "src/**/*",
       "StreamSage/**/*",
@@ -45,8 +53,13 @@
         "filter": [
           "**/*"
         ]
+      },
+      {
+        "from": "src/assets/",
+        "to": "assets"
       }
     ],
+
     "afterPack": "./after-pack.js"
   }
 }
diff --git a/src/S_16.png b/src/S_16.png
diff --git a/src/S_210.png b/src/S_210.png
diff --git a/src/S_32.png b/src/S_32.png
diff --git a/src/S_64.png b/src/S_64.png
diff --git a/src/assets/beep.mp3 b/src/assets/beep.mp3
diff --git a/src/assets/hey.m4a b/src/assets/hey.m4a
diff --git a/src/assets/icon.icns b/src/assets/icon.icns
diff --git a/src/download_512.png b/src/download_512.png
diff --git a/src/icon.icns b/src/icon.icns
diff --git a/streamsage_extension/icons/icon16.png → src/icon16.png b/streamsage_extension/icons/icon16.png → src/icon16.png
diff --git a/src/index.html b/src/index.html
@@ -1,8 +1,8 @@
 <!DOCTYPE html>
 <html>
 <head>
-    <link href="https://fonts.googleapis.com/css2?family=Bangers&display=swap" rel="stylesheet"> <!-- Add this line -->
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"> <!-- Add this line -->
+    <link href="https://fonts.googleapis.com/css2?family=Bangers&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
     <style>
         body { 
             font-family: 'Bangers'; /* Use the Spider-Man style font */
@@ -51,16 +51,41 @@
             opacity: 0.7;
             text-align: center;
         }
+        .api-input-container {
+            margin: 10px 0;
+            display: flex;
+            gap: 8px;
+            align-items: center;
+        }
+
+        #apiKeyInput {
+            flex: 1;
+            padding: 8px;
+            background: #222;
+            border: 1px solid #444;
+            color: white;
+            border-radius: 5px;
+            font-family: monospace;
+            font-size: 12px;
+        }
+
+        #saveApiKey {
+            padding: 8px 12px;
+            margin: 0;
+            font-size: 12px;
+        }
     </style>
 </head>
 <body>
     <div id="micStatus">Mic: Unmuted</div> 
     <div id="recordingStatus">Press (M) to mute, (R) to record</div>
+    <div class="api-input-container">
+        <input type="password" id="apiKeyInput" placeholder="Enter GROQ API Key">
+        <button id="saveApiKey">Save</button>
+    </div>
     <button id="toggleMute"></button> 
     <button id="toggleRecording"></button> 
     <div id="statusArea">Idle</div> 
     <script src="renderer.js"></script>
-    <!-- Subtle status area below the mic animation -->
-
 </body>
 </html>
diff --git a/src/main.js b/src/main.js
@@ -4,6 +4,7 @@ const path = require('path');
 const fs = require('fs');
 const dotenv = require('dotenv');
 const WebSocket = require('ws');
+const store = require('./store');
 
 // Load environment variables from .env file
 dotenv.config();
@@ -37,7 +38,7 @@ async function listDevices()
 }
 
 function createTray() {
-  tray = new Tray(path.join(__dirname, 'icon16.png')); // Replace with your icon path
+  tray = new Tray(path.join(__dirname, 'S_16.png')); // Replace with your icon path
   const contextMenu = Menu.buildFromTemplate([
     { 
       label: 'Help', 
@@ -79,10 +80,25 @@ function createWindow()
     {
       nodeIntegration: true, // Enable Node.js integration
       contextIsolation: false, // Disable context isolation
+    // Add these permissions
+    webSecurity: true,
+    allowRunningInsecureContent: false,
+    enableRemoteModule: true,
       devTools: true // Enable developer tools
     },
     show: false,
   });
+      // Request microphone permission
+      mainWindow.webContents.session.setPermissionRequestHandler((webContents, permission, callback) => {
+        const allowedPermissions = ['media', 'microphone'];
+        if (allowedPermissions.includes(permission)) {
+          callback(true);
+        } 
+        else 
+        {
+          callback(false);
+        }
+    });
 
   // Load the main HTML file into the window
   mainWindow.loadFile('src/index.html');
@@ -105,8 +121,11 @@ function createWindow()
     return false;
   });
 
-  // Initialize the backend processor
-  initializeBackendProcessor();
+  // Initialize backend processor if API key exists
+  const apiKey = store.get('groqApiKey');
+  if (apiKey) {
+    initializeBackendProcessor();
+  }
 
   // Enable the console window for debugging
   // mainWindow.webContents.openDevTools();
@@ -126,8 +145,8 @@ function handleSaveAudio(arrayBuffer, fileName)
     return; // Exit the function if the data is invalid
   }
 
-  // Construct the file path for saving the audio
-  const filePath = path.join(__dirname, '..', 'StreamSage', fileName);
+  // Construct the file path for saving the audio using app.getPath('userData')
+  const filePath = path.join(app.getPath('userData'), fileName);
   const buffer = Buffer.from(arrayBuffer); // Convert ArrayBuffer to Buffer
 
   // Write the buffer to the specified file
@@ -166,8 +185,8 @@ function handleSaveQuestion(arrayBuffer)
     return; // Exit the function if the data is invalid
   }
 
-  // Construct the file path for saving the user question audio
-  const filePath = path.join(__dirname, '..', 'StreamSage', 'user_question.wav');
+  // Construct the file path for saving the user question audio using app.getPath('userData')
+  const filePath = path.join(app.getPath('userData'), 'user_question.wav');
   const buffer = Buffer.from(arrayBuffer); // Convert ArrayBuffer to Buffer
 
   // Write the buffer to the specified file
@@ -326,7 +345,7 @@ ipcMain.on('save-question', (event, arrayBuffer) =>
 // });
 
 // Clean up on app quit
-const filePathToDelete = path.join(__dirname, `../StreamSage/${screenAudio_filename}`); // Define the file path to delete
+const filePathToDelete = path.join(app.getPath('userData'), screenAudio_filename); // Define the file path to delete
 
 app.on('before-quit', () => 
 {
@@ -368,4 +387,13 @@ function sendToggleCommand(isMuted)
       }
   }
 );
-}
+}
+
+// Handle API key updates
+ipcMain.on('api-key-updated', (event, apiKey) => {
+    if (backendProcessor) {
+        backendProcessor.updateApiKey(apiKey);
+    } else {
+        initializeBackendProcessor();
+    }
+});