react-cai 1.0.0

package/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "react-cai",
+  "version": "1.0.0",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "scripts": {
+    "build:worker": "tsup src/worker.ts --format esm --no-splitting --clean --dts",
+    "embed": "node scripts/embed-worker.js",
+    "build:lib": "tsup src/index.ts --format cjs,esm --dts --external react",
+    "build": "npm run build:worker && npm run embed && npm run build:lib"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "description": "",
+  "dependencies": {
+    "@mlc-ai/web-llm": "^0.2.80"
+  },
+  "devDependencies": {
+    "@types/node": "^25.0.3",
+    "@types/react": "^19.2.7",
+    "@webgpu/types": "^0.1.68",
+    "esbuild-plugin-obfuscator": "^1.4.0",
+    "react": "^19.2.3",
+    "tsup": "^8.5.1",
+    "typescript": "^5.9.3"
+  }
+}

package/scripts/embed-worker.js

@@ -0,0 +1,20 @@
+const fs = require('fs');
+const path = require('path');
+
+// CHANGE THIS LINE: Point to .mjs instead of .js
+const workerPath = path.join(__dirname, '../dist/worker.mjs');
+
+// Verify file exists before reading
+if (!fs.existsSync(workerPath)) {
+    console.error("❌ Error: Could not find", workerPath);
+    process.exit(1);
+}
+
+const workerCode = fs.readFileSync(workerPath, 'utf8');
+
+const content = `export const WORKER_CODE = ${JSON.stringify(workerCode)};`;
+
+const outputPath = path.join(__dirname, '../src/worker-embedded.ts');
+fs.writeFileSync(outputPath, content);
+
+console.log("✅ Worker code embedded into src/worker-embedded.ts");

package/src/index.ts

@@ -0,0 +1,3 @@
+// src/index.ts
+export * from "./useLocalAI";
+export * from "./types";

package/src/types.ts

@@ -0,0 +1,44 @@
+// src/types.ts
+import { InitProgressReport } from "@mlc-ai/web-llm";
+
+export type ModelID = "Llama-3-8B-Instruct-q4f16_1-MLC" | "Gemma-2b-it-q4f16_1-MLC" | string;
+
+export interface Message {
+    role: "system" | "user" | "assistant";
+    content: string;
+}
+
+export interface WorkerMessage {
+    type: "READY" | "PROGRESS" | "TOKEN" | "DONE" | "ERROR";
+    payload?: any;
+}
+
+// src/types.ts (or wherever you keep this)
+
+// src/types.ts (Add this)
+export interface CustomModelRecord {
+    model: string;      // URL to Hugging Face weights repo
+    model_id: string;   // Unique ID for local caching
+    model_lib: string;  // URL to the .wasm binary for the architecture
+}
+
+// src/types.ts
+export interface ModelRecord {
+    model: string;      // HF URL
+    model_id: string;   // Local ID
+    model_lib: string;  // WASM URL
+}
+
+export interface WorkerPayload {
+    type: "LOAD" | "GENERATE";
+    modelId?: string | ModelRecord; // Allow both
+    messages?: any[];
+    options?: {
+        context_window_size?: number;
+    };
+}
+// ... include your WorkerMessage and InitProgressReport types here
+
+
+
+export type { InitProgressReport };

package/src/useLocalAI.ts

@@ -0,0 +1,109 @@
+// src/useLocalAI.ts
+import { useState, useCallback, useEffect, useRef } from "react";
+import { Message, InitProgressReport, CustomModelRecord } from "./types";
+// This file doesn't exist yet, but your "npm run build" script will generate it!
+import { WORKER_CODE } from "./worker-embedded";
+
+export function useLocalAI() {
+    const workerRef = useRef<Worker | null>(null);
+
+    const [isSupported, setIsSupported] = useState<boolean | null>(null);
+
+    const [isReady, setIsReady] = useState(false);
+    const [isLoading, setIsLoading] = useState(false);
+    const [response, setResponse] = useState("");
+    const [progress, setProgress] = useState<InitProgressReport | null>(null);
+    const [error, setError] = useState<string | null>(null);
+
+    // 1. AUTOMATIC INITIALIZATION (No more initWorker)
+    useEffect(() => {
+        if (!navigator.gpu) {
+            console.error("WebGPU is not supported on this device.");
+            setIsSupported(false);
+            setError("WebGPU is not supported on this device.");
+            return; // Stop here, don't load the worker
+        }
+        
+        setIsSupported(true);
+
+        if (!WORKER_CODE) return;
+
+        // A. Create the worker from the embedded string
+        const blob = new Blob([WORKER_CODE], { type: 'application/javascript' });
+        const workerUrl = URL.createObjectURL(blob);
+        const worker = new Worker(workerUrl, { type: 'module' });
+
+        workerRef.current = worker;
+
+        // B. Set up the listeners immediately
+        worker.onmessage = (event) => {
+            const { type, payload } = event.data;
+
+            switch (type) {
+                case "PROGRESS":
+                    setProgress(payload);
+                    break;
+                case "READY":
+                    setIsReady(true);
+                    break;
+                case "TOKEN":
+                    setResponse((prev) => prev + payload);
+                    break;
+                case "DONE":
+                    setIsLoading(false);
+                    break;
+                case "ERROR":
+                    setError(String(payload));
+                    setIsLoading(false);
+                    break;
+            }
+        };
+
+        // C. Cleanup when the component unmounts
+        return () => {
+            worker.terminate();
+            URL.revokeObjectURL(workerUrl);
+        };
+    }, []);
+
+const loadModel = useCallback((
+    model: string | CustomModelRecord, 
+    options?: { contextWindow?: number }
+) => {
+    if (!workerRef.current) return;
+    setError(null);
+    setIsReady(false);
+    setProgress(null); // Clear old progress
+
+    workerRef.current.postMessage({ 
+        type: "LOAD", 
+        payload: {
+            model, 
+            options: { context_window_size: options?.contextWindow }
+        }
+    });
+}, []);
+
+const chat = useCallback((messages: Message[]) => {
+    if (!workerRef.current) return;
+    setIsLoading(true);
+    setResponse("");
+    // Ensure this matches the worker's "GENERATE" listener
+    workerRef.current.postMessage({ 
+        type: "GENERATE", 
+        messages 
+    });
+}, []);
+
+    return {
+        // initWorker is gone!
+        isSupported,
+        loadModel,
+        chat,
+        isReady,
+        isLoading,
+        response,
+        progress,
+        error
+    };
+}