upgrade dependencies, investigate the electron build

.nvmrc

@@ -1 +1 @@
-v20.9.0
+v20.15.1

README.md

@@ -70,11 +70,12 @@ As a prerequisite you need to have [git lfs](https://git-lfs.com/) installed (se
 git lfs install
 ```
 
-Clapper has been tested with Node `20.9.*`.
+Clapper has been tested with Node `20.15.1`.
 
 To make sure you use this version, you can use [NVM](https://github.com/nvm-sh/nvm) to activate it:
 
 ```bash
+nvm install
 nvm use
 ```
 

forge.config.js

@@ -0,0 +1,47 @@
+module.exports = {
+  packagerConfig: {
+    asar: false, // true,
+    icon: "./public/icon",
+    osxSign: {}
+  },
+  rebuildConfig: {},
+  makers: [
+    {
+      name: '@electron-forge/maker-squirrel',
+      config: {},
+    },
+    {
+      name: '@electron-forge/maker-zip',
+      platforms: ['darwin'],
+    },
+    {
+      name: '@electron-forge/maker-deb',
+      config: {
+        options: {
+          icon: './public/icon.png'
+        }
+      },
+    },
+    {
+      name: '@electron-forge/maker-dmg',
+      config: {
+        options: {
+          icon: './public/icon.icns'
+        }
+      },
+    },
+    {
+      name: '@electron-forge/maker-rpm',
+      config: {},
+    },
+  ],
+  plugins: [
+    /*
+    Only needed if asar is set to true
+    {
+      name: '@electron-forge/plugin-auto-unpack-natives',
+      config: {},
+    },
+    */
+  ],
+};

main.js

@@ -0,0 +1,67 @@
+const fs = require('fs')
+const path = require('path')
+const dotenv = require('dotenv')
+
+dotenv.config()
+
+try {
+  if (fs.existsSync(".env.local")) {
+    const result = dotenv.config({ path: ".env.local" })
+    console.log("using .env.local")
+    process.env = {
+      ...process.env,
+      ...result.parsed,
+    }
+  }
+} catch (err) {
+  // do nothing
+  console.log("using .env")
+}
+
+const { app, BrowserWindow, screen } = require('electron')
+
+const currentDir = process.cwd()
+
+const mainServerPath = path.join(currentDir, '.next/standalone/server.js')
+
+// now we load the main server
+require(mainServerPath)
+
+const voiceServerPath = path.join(currentDir, '.next/standalone/voice-server.js')
+
+// now we load the voice server
+require(voiceServerPath)
+
+
+const createWindow = () => {
+  const mainScreen = screen.getPrimaryDisplay()
+  const allScreens = screen.getAllDisplays()
+  console.log("debug:", {
+    mainScreen,
+    allScreens
+  })
+
+  const mainWindow = new BrowserWindow({
+    // copy the width and height
+    ...mainScreen.workAreaSize,
+
+    icon: './public/icon.png'
+  })
+
+  mainWindow.loadURL('http://0.0.0.0:3000/')
+
+  mainWindow.on('closed', () => {
+    app.quit()
+  })
+}
+
+app.whenReady().then(() => {
+
+  createWindow()
+})
+
+app.on('window-all-closed', () => {
+  if (process.platform !== 'darwin') {
+    app.quit()
+  }
+})

next.config.js

@@ -1,5 +1,7 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
+  // output: 'standalone',
+
   experimental: {
     serverActions: {
       // a clap file can be quite large - but that's OK
@@ -40,7 +42,7 @@ const nextConfig = {
         // matching ALL routes
         source: "/:path*",
         headers: [
-          // for security reasons, performance.now() not performant unless we disable some CORS stuff
+          // for security reasons, performance.now() is not performant unless we disable some CORS stuff
           //  more context about why, please check the Security paragraph here:
           // https://developer.mozilla.org/en-US/docs/Web/API/Performance/now#security_requirements
           { key: "Cross-Origin-Opener-Policy", value: "same-origin" },

package.json

@@ -16,7 +16,11 @@
     "test": "npm run build && npm run test:unit:ci && npm run test:e2e",
     "test:unit:ci": "vitest run",
     "test:unit:watch": "vitest",
-    "test:e2e": "npx playwright test"
+    "test:e2e": "npx playwright test",
+    "electron": "electron .",
+    "electron:start": "electron-forge start",
+    "electron:package": "electron-forge package",
+    "electron:make": "electron-forge make"
   },
   "dependencies": {
     "@aitube/broadway": "0.0.22",
@@ -27,16 +31,16 @@
     "@fal-ai/serverless-client": "^0.13.0",
     "@ffmpeg/ffmpeg": "^0.12.10",
     "@ffmpeg/util": "^0.12.1",
-    "@gradio/client": "^1.1.1",
+    "@gradio/client": "^1.3.0",
     "@huggingface/hub": "^0.15.1",
-    "@huggingface/inference": "^2.7.0",
-    "@langchain/anthropic": "^0.2.2",
-    "@langchain/cohere": "^0.1.0",
-    "@langchain/core": "^0.2.9",
-    "@langchain/google-vertexai": "^0.0.19",
-    "@langchain/groq": "^0.0.13",
-    "@langchain/mistralai": "^0.0.24",
-    "@langchain/openai": "^0.2.0",
+    "@huggingface/inference": "^2.8.0",
+    "@langchain/anthropic": "^0.2.6",
+    "@langchain/cohere": "^0.2.1",
+    "@langchain/core": "^0.2.17",
+    "@langchain/google-vertexai": "^0.0.20",
+    "@langchain/groq": "^0.0.15",
+    "@langchain/mistralai": "^0.0.26",
+    "@langchain/openai": "^0.2.4",
     "@monaco-editor/react": "^4.6.0",
     "@radix-ui/react-accordion": "^1.1.2",
     "@radix-ui/react-avatar": "^1.0.4",
@@ -66,8 +70,6 @@
     "@react-three/uikit-lucide": "^0.3.4",
     "@tailwindcss/container-queries": "^0.1.1",
     "@types/dom-speech-recognition": "^0.0.4",
-    "@upstash/ratelimit": "^1.1.3",
-    "@upstash/redis": "^1.31.1",
     "@xenova/transformers": "github:xenova/transformers.js#v3",
     "autoprefixer": "10.4.19",
     "class-variance-authority": "^0.7.0",
@@ -98,10 +100,10 @@
     "react-icons": "^5.2.1",
     "react-reflex": "^4.2.6",
     "react-speakup": "^1.0.0",
-    "replicate": "^0.30.2",
+    "replicate": "^0.31.1",
     "sharp": "^0.33.4",
     "sonner": "^1.5.0",
-    "tailwind-merge": "^2.3.0",
+    "tailwind-merge": "^2.4.0",
     "tailwindcss-animate": "^1.0.7",
     "three": "^0.164.1",
     "ts-node": "^10.9.2",
@@ -114,6 +116,13 @@
     "zx": "^8.1.3"
   },
   "devDependencies": {
+    "@electron-forge/cli": "^7.4.0",
+    "@electron-forge/maker-deb": "^7.4.0",
+    "@electron-forge/maker-dmg": "^7.4.0",
+    "@electron-forge/maker-rpm": "^7.4.0",
+    "@electron-forge/maker-squirrel": "^7.4.0",
+    "@electron-forge/maker-zip": "^7.4.0",
+    "@electron-forge/plugin-auto-unpack-natives": "^7.4.0",
     "@playwright/test": "^1.45.1",
     "@testing-library/react": "^16.0.0",
     "@types/fluent-ffmpeg": "^2.1.24",
@@ -123,6 +132,7 @@
     "@types/react-dom": "^18",
     "@types/uuid": "^9.0.8",
     "@vitejs/plugin-react": "^4.3.1",
+    "electron": "^31.2.1",
     "eslint": "^8",
     "eslint-config-next": "14.2.5",
     "eslint-config-prettier": "^9.1.0",

src/services/broadcast/useBroadcast.ts

@@ -7,10 +7,10 @@ import { getDefaultBroadcastState } from './getDefaultBroadcastState'
 
 /**
  * Service to manage streaming
- * 
- * Ideally this should be down on the client side, to keep the backend 
+ *
+ * Ideally this should be down on the client side, to keep the backend
  * able to scale to thousand of users
- * 
+ *
  * Here are some useful pointers and discussions regarding client-side:
  * - https://github.com/ffmpegwasm/ffmpeg.wasm/issues/100
  * - https://github.com/Kagami/ffmpeg.js/pull/166