研究透過 LangChain 替產品導入本地模型與配套 Harness

// 1. 檢查瀏覽器是否支援，並確認模型已下載完畢
const capabilities = await ai.languageModel.capabilities();
if (capabilities.available === 'readily') {

  // 2. 建立 session，並在建立時帶入 system prompt
  const session = await ai.languageModel.create({
    systemPrompt: "You are a helpful and friendly assistant."
  });

  // 3. 模擬對話歷史 (Prompt API 會在同一個 session 中自動維持 context)
  // 第一輪對話 (User)
  const response1 = await session.prompt("Can you write a short poem about coding?");
  console.log("Assistant:", response1);
  // 輸出: Code is the poetry of machines, Where logic weaves through screens and seams.

  // 4. 如果你想在建立 session 時就直接注入「過去的對話歷史」(歷史紀錄 payload)
  // 可以使用 initialPrompts 參數：
  const sessionWithHistory = await ai.languageModel.create({
    systemPrompt: "You are a helpful and friendly assistant.",
    initialPrompts: [
      { role: 'user', content: 'Can you write a short poem about coding?' },
      { role: 'assistant', content: 'Code is the poetry of machines, Where logic weaves through screens and seams.' }
    ]
  });

  // 之後繼續對話，它就會記得這段歷史
  const response2 = await sessionWithHistory.prompt("Can you explain the first line?");
  console.log("Assistant:", response2);

  // 記得不用時要銷毀 session 釋放記憶體
  session.destroy();
  sessionWithHistory.destroy();
}

<|im_start|>system
You are a helpful and friendly assistant.<|im_end|>
<|im_start|>user
Can you write a short poem about coding?<|im_end|>
<|im_start|>assistant
Code is the poetry of machines,
Where logic weaves through screens and seams.<|im_end|>

收到問題 → 判斷是否需要改寫 → 檢索文件 → 生成答案 → 檢查結果是否符合預期 → 必要時重新執行某個步驟

// 1. 定義狀態結構
const MyState = Annotation.Root({
  ...MessagesAnnotation.spec,
  rephrasedQuestion: Annotation<string>,
  sourceDocuments: Annotation<Document[]>,
});
// 2. 定義節點
const nodeA = async (state) => {
  return { rephrasedQuestion: "改寫後的問題" };
};
// 3. 組裝流程
const graph = new StateGraph(MyState)
  .addNode("nodeA", nodeA)
  .addNode("nodeB", nodeB)
  .addConditionalEdges("__start__", (state) => {
    return state.messages.length > 1 ? "nodeA" : "nodeB";
  })
  .addEdge("nodeA", "nodeB")
  .compile();

import { WebPDFLoader } from "@langchain/community/document_loaders/web/pdf";
import { RecursiveCharacterTextSplitter } from "langchain/text_splitter";
import { Voy as VoyClient } from "voy-search";
import { HuggingFaceTransformersEmbeddings } from "@langchain/community/embeddings/hf_transformers";

const embeddings = new HuggingFaceTransformersEmbeddings({
  modelName: "Xenova/all-MiniLM-L6-v2",
  // Can use "nomic-ai/nomic-embed-text-v1" for more powerful but slower embeddings
  // modelName: "nomic-ai/nomic-embed-text-v1",
});

const voyClient = new VoyClient();
const vectorstore = new VoyVectorStore(voyClient, embeddings);

const embedPDF = async (pdfBlob: Blob) => {
  // 1. 用 LangChain 的 WebPDFLoader 解析 PDF
  const pdfLoader = new WebPDFLoader(pdfBlob, { parsedItemSeparator: " " });
  const docs = await pdfLoader.load();

  // 2. 用 RecursiveCharacterTextSplitter 切成小塊
  const splitter = new RecursiveCharacterTextSplitter({
    chunkSize: 500,
    chunkOverlap: 50,
  });
  const splitDocs = await splitter.splitDocuments(docs);

  // 3. 透過 Transformers.js Embedding 轉換後存入 Voy 向量資料庫
  await vectorstore.addDocuments(splitDocs);
};

const graph = new StateGraph(RAGStateAnnotation)
  .addNode("rephraseQuestion", rephraseQuestion)
  .addNode("retrieveSourceDocuments", retrieveSourceDocuments)
  .addNode("generateResponse", generateResponse)
  .addConditionalEdges("__start__", async (state) => {
    // 首輪對話直接檢索；多輪對話先改寫問題再檢索
    if (state.messages.length > 1) {
      return "rephraseQuestion";
    }
    return "retrieveSourceDocuments";
  })
  .addEdge("rephraseQuestion", "retrieveSourceDocuments")
  .addEdge("retrieveSourceDocuments", "generateResponse")
  .compile();

let model;
if (modelProvider === "webllm") {
  model = new ChatWebLLM(modelConfig);    // 瀏覽器內 WebGPU 推論
} else if (modelProvider === "chrome_ai") {
  model = new ChromeAI(modelConfig);       // Chrome 內建 Gemini Nano
} else {
  model = new ChatOllama(modelConfig);     // 本地 Ollama 伺服器
}