Build an Electron app

import { useState } from 'react'
import clsx from 'clsx'

function App() {
  const [loading, setLoading] = useState(false)
  const [msgHistory, setMsgHistory] = useState([])
  const [inputText, setInputText] = useState('')

  // Append a user message and a stub assistant response.
  const handleSend = () => {
    const newMsgHistory = [
      ...msgHistory,
      { role: 'user', content: inputText },
      { role: 'assistant', content: 'Response from the assistant' }
    ]
    setInputText('')
    setMsgHistory(newMsgHistory)
  }

  return (
    <div className="h-screen w-[100vw] text-white bg-gray-900 p-4 flex flex-col gap-4">
      {/* Main output area */}
      <div className="flex-1 rounded-lg border-2 border-teal-500 p-4 flex flex-col gap-4 overflow-y-auto">
        {loading ? (
          <div className="min-h-0 flex-1 flex items-center justify-center text-2xl">
            Loading...
          </div>
        ) : (
          msgHistory.map((msg, index) => (
            <div
              key={index}
              className={clsx(
                'flex',
                msg.role === 'user' ? 'justify-end' : 'justify-start'
              )}
            >
              {/* Message bubble */}
              <div className="p-2 rounded-lg bg-gray-600 prose max-w-3/4">
                {msg.content}
              </div>
            </div>
          ))
        )}
      </div>

      {/* Input area */}
      <div className="h-[108px] rounded-lg border-2 border-teal-500 flex p-4 gap-4">
        <textarea
          className="flex-1 resize-none bg-transparent outline-none"
          placeholder="Type your message here..."
          value={inputText}
          onChange={e => setInputText(e.target.value)}
          onKeyDown={e => {
            if (e.key === 'Enter' && !e.shiftKey) {
              e.preventDefault()
              handleSend()
            }
          }}
        />
        <button
          onClick={handleSend}
          className=" text-teal-500 outline-none underline underline-offset-4"
        >
          Send
        </button>
      </div>
    </div>
  )
}

export default App

const { app, BrowserWindow, ipcMain } = require('electron')
const path = require('path')
const {
  LLAMA_3_2_1B_INST_Q4_0,
  loadModel,
  unloadModel,
  completion
} = require('@qvac/sdk')

let win
let modelId

// Create the Electron window and load the renderer.
const createWindow = () => {
  win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js'),
      contextIsolation: true,
      nodeIntegration: false
    }
  })

  win.loadURL('http://localhost:5173')
}

// IPC handlers: load model, run completion, unload model.
const setupHandlers = () => {
  ipcMain.handle('load-model', async () => {
    modelId = await loadModel({
      modelSrc: LLAMA_3_2_1B_INST_Q4_0,
      modelType: 'llm',
      onProgress: progress => {
        console.log(progress)
      }
    })
    return 'model loaded'
  })

  ipcMain.handle('infer', async (event, history) => {
    if (!modelId) {
      throw new Error('Model not loaded. This should not happen.')
    }

    const result = completion({ modelId, history, stream: true })
    // Stream tokens back to the renderer.
    for await (const token of result.tokenStream) {
      win.webContents.send('completion-stream', token)
    }
    // Signal completion to the renderer.
    win.webContents.send('completion-stream', '')
  })

  ipcMain.handle('unload-model', async () => {
    if (!modelId) {
      throw new Error('Model not loaded. This should not happen.')
    }

    await unloadModel({ modelId })
    modelId = null
    return 'model unloaded'
  })
}

app.whenReady().then(() => {
  createWindow()
  setupHandlers()
})

import { useEffect, useState } from 'react'
import clsx from 'clsx'

const { loadModel, infer, onCompletionStream, unloadModel } = window.qvacSDK

function App() {
  const [loading, setLoading] = useState(true)
  const [processing, setProcessing] = useState(false)
  const [msgHistory, setMsgHistory] = useState([])
  const [inputText, setInputText] = useState('')

  // Load the model once and subscribe to streaming tokens.
  useEffect(() => {
    loadModel().then(() => setLoading(false))

    onCompletionStream(token => {
      console.log(token)
      if (token === '') {
        setProcessing(false)
      } else {
        setMsgHistory(prev => {
          const newMsgHistory = [...prev]
          newMsgHistory[newMsgHistory.length - 1].content += token
          return newMsgHistory
        })
      }
    })

    return () => unloadModel()
  }, [])

  // Send the latest user message and start streaming the response.
  const handleSend = () => {
    const nextHistory = [
      ...msgHistory,
      { role: 'user', content: inputText }
    ]
    setMsgHistory([...nextHistory, { role: 'assistant', content: '' }])
    infer([
      { role: 'system', content: 'You are a helpful assistant.' },
      ...nextHistory
    ])
    setInputText('')
    setProcessing(true)
  }

  return (
    <div className="h-screen w-[100vw] text-white bg-gray-900 p-4 flex flex-col gap-4">
      {/* Output area */}
      <div className="flex-1 rounded-lg border-2 border-teal-500 p-4 flex flex-col gap-4 overflow-y-auto">
        {loading ? (
          <div className="min-h-0 flex-1 flex items-center justify-center text-2xl">
            Loading...
          </div>
        ) : (
          msgHistory.map((msg, index) => (
            <div
              key={index}
              className={clsx(
                'flex',
                msg.role === 'user' ? 'justify-end' : 'justify-start'
              )}
            >
              {/* Message bubble */}
              <div className="p-2 rounded-lg bg-gray-600 prose max-w-3/4">
                {msg.content}
              </div>
            </div>
          ))
        )}
      </div>

      {/* Input area */}
      <div className="h-[108px] rounded-lg border-2 border-teal-500 flex p-4 gap-4">
        <textarea
          className="flex-1 resize-none bg-transparent outline-none"
          placeholder="Type your message here..."
          value={inputText}
          onChange={e => setInputText(e.target.value)}
          onKeyDown={e => {
            if (e.key === 'Enter' && !e.shiftKey) {
              e.preventDefault()
              handleSend()
            }
          }}
        />
        <button
          onClick={handleSend}
          disabled={processing || loading}
          className=" text-teal-500 outline-none underline underline-offset-4 disabled:cursor-not-allowed"
        >
          Send
        </button>
      </div>
    </div>
  )
}

export default App