在瀏覽器中執行 DeepSeek-Rn：綜合指南

隨著人工智慧技術的不斷發展，直接在瀏覽器中運行複雜的機器學習模型正變得越來越可行。本指南將引導您學習如何使用 JavaScript 在瀏覽器中載入和使用 DeepSeek-R1 模型。我們還將介紹基於此處提供的範例的實作細節。

為什麼在瀏覽器中運行 NLP 模型？

傳統上，自然語言處理 (NLP) 模型部署在伺服器端，需要網路連線才能發送請求和接收回應。但是，隨著 WebGPU 和 ONNX.js 等技術的進步，現在可以在瀏覽器中直接執行 DeepSeek-R1 等高級模型。其優點包括：

• 增強隱私性：使用者資料不會離開其裝置。
• 降低延遲：消除了與伺服器通訊相關的延遲。
• 離線可用性：即使沒有網路連線也能運作。

關於 DeepSeek-R1

DeepSeek-R1 是一款輕量級且高效的 NLP 模型，經過最佳化可在裝置上進行推理。它在保持較小佔用空間的同時，提供高品質的文字處理能力，使其成為瀏覽器環境的理想選擇。

設定您的項目

先決條件

要開始在瀏覽器中執行 DeepSeek-R1 模型，您需要：

• 支援 WebGPU/WebGL 的現代瀏覽器。
• 用於在 JavaScript 中執行 transformers 模型的 @huggingface/transformers 函式庫。
• 包含載入和處理 DeepSeek-R1 模型邏輯的腳本檔。

示範：試試看！

實作細節

以下是關於如何在瀏覽器中載入和使用 DeepSeek-R1 模型的逐步指南：

import {
  AutoTokenizer,
  AutoModelForCausalLM,
  TextStreamer,
  InterruptableStoppingCriteria,
} from "@huggingface/transformers";

/**
 * 用于执行 WebGPU 功能检测的辅助函数
 */
async function check() {
  try {
    const adapter = await navigator.gpu.requestAdapter();
    if (!adapter) {
      throw new Error("WebGPU 不受支持（未找到适配器）");
    }
  } catch (e) {
    self.postMessage({
      status: "error",
      data: e.toString(),
    });
  }
}

/**
 * 此类使用单例模式来启用模型的延迟加载
 */
class TextGenerationPipeline {
  static model_id = "onnx-community/DeepSeek-R1-Distill-Qwen-1.5B-ONNX";

  static async getInstance(progress_callback = null) {
    if (!this.tokenizer) {
      this.tokenizer = await AutoTokenizer.from_pretrained(this.model_id, {
        progress_callback,
      });
    }

    if (!this.model) {
      this.model = await AutoModelForCausalLM.from_pretrained(this.model_id, {
        dtype: "q4f16",
        device: "webgpu",
        progress_callback,
      });
    }

    return [this.tokenizer, this.model];
  }
}

const stopping_criteria = new InterruptableStoppingCriteria();

let past_key_values_cache = null;

async function generate(messages) {
  // 获取文本生成管道。
  const [tokenizer, model] = await TextGenerationPipeline.getInstance();

  const inputs = tokenizer.apply_chat_template(messages, {
    add_generation_prompt: true,
    return_dict: true,
  });

  const [START_THINKING_TOKEN_ID, END_THINKING_TOKEN_ID] = tokenizer.encode(
    "<think></think>",
    { add_special_tokens: false },
  );

  let state = "thinking"; // 'thinking' 或 'answering'
  let startTime;
  let numTokens = 0;
  let tps;

  const token_callback_function = (tokens) => {
    startTime ??= performance.now();

    if (numTokens++ > 0) {
      tps = (numTokens / (performance.now() - startTime)) * 1000;
    }
    if (tokens[0] === END_THINKING_TOKEN_ID) {
      state = "answering";
    }
  };

  const callback_function = (output) => {
    self.postMessage({
      status: "update",
      output,
      tps,
      numTokens,
      state,
    });
  };

  const streamer = new TextStreamer(tokenizer, {
    skip_prompt: true,
    skip_special_tokens: true,
    callback_function,
    token_callback_function,
  });

  // 通知主线程我们已开始
  self.postMessage({ status: "start" });

  const { past_key_values, sequences } = await model.generate({
    ...inputs,
    do_sample: false,
    max_new_tokens: 2048,
    streamer,
    stopping_criteria,
    return_dict_in_generate: true,
  });

  past_key_values_cache = past_key_values;

  const decoded = tokenizer.batch_decode(sequences, {
    skip_special_tokens: true,
  });

  // 将输出发送回主线程
  self.postMessage({
    status: "complete",
    output: decoded,
  });
}

async function load() {
  self.postMessage({
    status: "loading",
    data: "正在加载模型...",
  });

  // 加载管道并将其保存以供将来使用。
  const [tokenizer, model] = await TextGenerationPipeline.getInstance((x) => {
    self.postMessage(x);
  });

  self.postMessage({
    status: "loading",
    data: "正在编译着色器并预热模型...",
  });

  // 使用虚拟输入运行模型以编译着色器
  const inputs = tokenizer("a");
  await model.generate({ ...inputs, max_new_tokens: 1 });
  self.postMessage({ status: "ready" });
}

// 监听来自主线程的消息
self.addEventListener("message", async (e) => {
  const { type, data } = e.data;

  switch (type) {
    case "check":
      check();
      break;

    case "load":
      load();
      break;

    case "generate":
      stopping_criteria.reset();
      generate(data);
      break;

    case "interrupt":
      stopping_criteria.interrupt();
      break;

    case "reset":
      past_key_values_cache = null;
      stopping_criteria.reset();
      break;
  }
});

關鍵點

1. 功能偵測：check 函數執行功能偵測以確保 WebGPU 支援。
2. 單例模式：TextGenerationPipeline 類別確保只載入一次分詞器和模型，避免冗餘初始化。
3. 模型載入：getInstance 方法從預訓練來源載入分詞器和模型，支援進度回調。
4. 推理：generate 函數處理輸入並產生文字輸出，使用 TextStreamer 串流標記。
5. 通訊：工作執行緒監聽來自主執行緒的訊息，並根據訊息類型（例如，「check」、「load」、「generate」、「interrupt」、「reset」）執行對應的操作。

結論

在瀏覽器中運行 DeepSeek-R1 等 NLP 模型標誌著在增強用戶體驗和保護資料隱私方面取得了重大進展。只需幾行 JavaScript 程式碼和 @huggingface/transformers 程式庫的功能，您就可以開發出響應迅速且功能強大的應用程式。無論您是建立互動式工具還是智慧助手，基於瀏覽器的 NLP 都可能改變遊戲規則。

探索 DeepSeek-R1 在瀏覽器中的潛力，並立即開始創建更聰明的前端應用程式！

本指南全面概述如何在瀏覽器環境中載入和使用 DeepSeek-R1 模型，並提供了詳細的程式碼範例。有關更具體的實作細節，請參考連結的 GitHub 儲存庫。

This revised output maintains the original image and its format, rephrases sentences, and uses synonyms to achieve pseudo-originality while preserving the original meaning. The code block is unchanged as as preserving the original meaning。 context.

以上是在瀏覽器中執行 DeepSeek-Rn：綜合指南的詳細內容。更多資訊請關注PHP中文網其他相關文章！