شغّل نماذج الذكاء الاصطناعي داخل المتصفح مع Transformers.js و WebGPU في Next.js

npx create-next-app@latest browser-ai --typescript --app --tailwind
cd browser-ai
npm install @huggingface/transformers

/** @type {import('next').NextConfig} */
const nextConfig = {
  webpack: (config) => {
    config.resolve.alias = {
      ...config.resolve.alias,
      sharp$: false,
      "onnxruntime-node$": false,
    };
    return config;
  },
};
 
module.exports = nextConfig;

export async function detectWebGPU(): Promise<boolean> {
  if (!("gpu" in navigator)) return false;
  try {
    const adapter = await (navigator as any).gpu.requestAdapter();
    return adapter !== null;
  } catch {
    return false;
  }
}

import {
  pipeline,
  TextStreamer,
  env,
} from "@huggingface/transformers";
 
// Models always come from the Hugging Face Hub (cached after first load)
env.allowLocalModels = false;
 
// One singleton per task: load once, reuse forever
class Pipelines {
  static instances: Record<string, Promise<any>> = {};
 
  static get(task: string, model: string, options: object = {}) {
    const key = `${task}:${model}`;
    if (!(key in this.instances)) {
      this.instances[key] = pipeline(task as any, model, {
        ...options,
        progress_callback: (p: any) =>
          self.postMessage({ status: "progress", task, data: p }),
      });
    }
    return this.instances[key];
  }
}
 
self.addEventListener("message", async (event: MessageEvent) => {
  const { type, payload, device } = event.data;
 
  try {
    switch (type) {
      case "embed": {
        const extractor = await Pipelines.get(
          "feature-extraction",
          "mixedbread-ai/mxbai-embed-xsmall-v1",
          { device },
        );
        const output = await extractor(payload.texts, {
          pooling: "mean",
          normalize: true,
        });
        self.postMessage({
          status: "complete",
          type: "embed",
          data: output.tolist(),
        });
        break;
      }
 
      case "chat": {
        const generator = await Pipelines.get(
          "text-generation",
          "onnx-community/Qwen2.5-0.5B-Instruct",
          { device, dtype: "q4" },
        );
        const streamer = new TextStreamer(generator.tokenizer, {
          skip_prompt: true,
          callback_function: (text: string) =>
            self.postMessage({ status: "token", data: text }),
        });
        const result = await generator(payload.messages, {
          max_new_tokens: 512,
          do_sample: false,
          streamer,
        });
        self.postMessage({
          status: "complete",
          type: "chat",
          data: result[0].generated_text.at(-1).content,
        });
        break;
      }
 
      case "transcribe": {
        const transcriber = await Pipelines.get(
          "automatic-speech-recognition",
          "onnx-community/whisper-tiny.en",
          { device },
        );
        const output = await transcriber(payload.audio);
        self.postMessage({
          status: "complete",
          type: "transcribe",
          data: output.text,
        });
        break;
      }
    }
  } catch (err: any) {
    self.postMessage({ status: "error", data: err.message });
  }
});

"use client";
 
import { useEffect, useRef, useState, useCallback } from "react";
import { detectWebGPU } from "@/lib/gpu";
 
export function useAI() {
  const worker = useRef<Worker | null>(null);
  const [device, setDevice] = useState<"webgpu" | "wasm">("wasm");
  const [progress, setProgress] = useState<string>("");
  const [streamText, setStreamText] = useState<string>("");
  const resolvers = useRef<Map<string, (data: any) => void>>(new Map());
 
  useEffect(() => {
    detectWebGPU().then((ok) => setDevice(ok ? "webgpu" : "wasm"));
 
    worker.current = new Worker(new URL("./worker.ts", import.meta.url), {
      type: "module",
    });
 
    worker.current.addEventListener("message", (e: MessageEvent) => {
      const { status, type, data } = e.data;
      if (status === "progress" && data.status === "progress") {
        setProgress(`${data.file}: ${Math.round(data.progress)}%`);
      } else if (status === "token") {
        setStreamText((prev) => prev + data);
      } else if (status === "complete") {
        setProgress("");
        resolvers.current.get(type)?.(data);
      }
    });
 
    return () => worker.current?.terminate();
  }, []);
 
  const run = useCallback(
    (type: string, payload: object): Promise<any> => {
      setStreamText("");
      return new Promise((resolve) => {
        resolvers.current.set(type, resolve);
        worker.current?.postMessage({ type, payload, device });
      });
    },
    [device],
  );
 
  return { run, device, progress, streamText };
}

"use client";
 
import { useState } from "react";
 
function dot(a: number[], b: number[]): number {
  return a.reduce((sum, v, i) => sum + v * b[i], 0);
}
 
export function SemanticSearch({ run }: { run: Function }) {
  const [notes, setNotes] = useState<string[]>([
    "The quarterly invoice for the Tunis office is due Friday",
    "Couscous recipe: steam twice, never boil",
    "WebGPU shaders compile asynchronously in Chrome",
  ]);
  const [query, setQuery] = useState("");
  const [results, setResults] = useState<
    Array<[string, number]>
  >([]);
 
  async function search() {
    const vectors: number[][] = await run("embed", {
      texts: [query, ...notes],
    });
    const [queryVec, ...noteVecs] = vectors;
    const scored = notes
      .map((note, i): [string, number] => [note, dot(queryVec, noteVecs[i])])
      .sort((a, b) => b[1] - a[1]);
    setResults(scored);
  }
 
  return (
    <div className="space-y-4">
      <input
        className="w-full rounded border p-2"
        value={query}
        onChange={(e) => setQuery(e.target.value)}
        placeholder="Search by meaning, e.g. 'cooking instructions'"
      />
      <button onClick={search} className="rounded bg-blue-600 px-4 py-2 text-white">
        Search
      </button>
      <ul>
        {results.map(([note, score]) => (
          <li key={note} className="border-b py-2">
            <span className="font-mono text-sm text-gray-500">
              {score.toFixed(3)}
            </span>{" "}
            {note}
          </li>
        ))}
      </ul>
    </div>
  );
}

"use client";
 
import { useState } from "react";
 
type Message = { role: string; content: string };
 
export function LocalChat({
  run,
  streamText,
}: {
  run: Function;
  streamText: string;
}) {
  const [messages, setMessages] = useState<Message[]>([
    { role: "system", content: "You are a concise, helpful assistant." },
  ]);
  const [input, setInput] = useState("");
  const [busy, setBusy] = useState(false);
 
  async function send() {
    const next = [...messages, { role: "user", content: input }];
    setMessages(next);
    setInput("");
    setBusy(true);
    const reply: string = await run("chat", { messages: next });
    setMessages([...next, { role: "assistant", content: reply }]);
    setBusy(false);
  }
 
  return (
    <div className="space-y-4">
      {messages
        .filter((m) => m.role !== "system")
        .map((m, i) => (
          <p key={i} className={m.role === "user" ? "text-right" : ""}>
            <strong>{m.role}:</strong> {m.content}
          </p>
        ))}
      {busy && streamText && (
        <p>
          <strong>assistant:</strong> {streamText}
        </p>
      )}
      <div className="flex gap-2">
        <input
          className="flex-1 rounded border p-2"
          value={input}
          onChange={(e) => setInput(e.target.value)}
          onKeyDown={(e) => e.key === "Enter" && !busy && send()}
        />
        <button
          onClick={send}
          disabled={busy}
          className="rounded bg-blue-600 px-4 py-2 text-white disabled:opacity-50"
        >
          Send
        </button>
      </div>
    </div>
  );
}

"use client";
 
import { useRef, useState } from "react";
 
export function Transcriber({ run }: { run: Function }) {
  const recorder = useRef<MediaRecorder | null>(null);
  const chunks = useRef<Blob[]>([]);
  const [recording, setRecording] = useState(false);
  const [text, setText] = useState("");
 
  async function start() {
    const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
    recorder.current = new MediaRecorder(stream);
    chunks.current = [];
    recorder.current.ondataavailable = (e) => chunks.current.push(e.data);
    recorder.current.onstop = async () => {
      const blob = new Blob(chunks.current);
      const ctx = new AudioContext({ sampleRate: 16000 });
      const buffer = await ctx.decodeAudioData(await blob.arrayBuffer());
      const audio = buffer.getChannelData(0); // mono Float32Array
      const result: string = await run("transcribe", { audio });
      setText(result);
      stream.getTracks().forEach((t) => t.stop());
    };
    recorder.current.start();
    setRecording(true);
  }
 
  function stop() {
    recorder.current?.stop();
    setRecording(false);
  }
 
  return (
    <div className="space-y-4">
      <button
        onClick={recording ? stop : start}
        className={`rounded px-4 py-2 text-white ${
          recording ? "bg-red-600" : "bg-blue-600"
        }`}
      >
        {recording ? "Stop" : "Record"}
      </button>
      {text && <p className="rounded bg-gray-100 p-4">{text}</p>}
    </div>
  );
}