DeepSeek の実行 - ブラウザーでの実行: 総合ガイド

人工知能テクノロジーが発展し続けるにつれて、複雑な機械学習モデルをブラウザーで直接実行することがますます実現可能になってきています。このガイドでは、JavaScript を使用してブラウザーに DeepSeek-R1 モデルをロードして使用する方法を説明します。ここで提供される例に基づいて実装の詳細についても説明します。

ブラウザで NLP モデルを実行するのはなぜですか?

従来、自然言語処理 (NLP) モデルはサーバー側にデプロイされ、リクエストの送信と応答の受信にはインターネット接続が必要です。しかし、WebGPU や ONNX.js などのテクノロジーの進歩により、DeepSeek-R1 などの高度なモデルをブラウザーで直接実行できるようになりました。その利点は次のとおりです:

• プライバシーの強化: ユーザー データがデバイスから流出することはありません。
• 遅延の削減: サーバー通信に関連する遅延を排除します。
• オフライン可用性: インターネット接続がなくても機能します。

DeepSeek-R1 について

DeepSeek-R1 は、オンデバイス推論用に最適化された軽量で効率的な NLP モデルです。小さなフットプリントを維持しながら高品質のテキスト処理機能を提供するため、ブラウザ環境に最適です。

プロジェクトをセットアップする

前提条件

ブラウザで DeepSeek-R1 モデルの実行を開始するには、次のものが必要です:

• WebGPU/WebGL をサポートする最新のブラウザ。
• @huggingface/transformers JavaScript でトランスフォーマー モデルを実行するためのライブラリ。
• 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 クラスは、トークナイザーとモデルが 1 回だけロードされることを保証し、冗長な初期化を回避します。
3. モデルの読み込み: getInstance メソッドは、事前トレーニングされたソースからトークナイザーとモデルを読み込み、進行状況のコールバックをサポートします。
4. 推論: generate 関数は、TextStreamer ストリーミング タグを使用して入力を処理し、テキスト出力を生成します。
5. 通信: ワーカー スレッドはメイン スレッドからのメッセージをリッスンし、メッセージ タイプに基づいて対応するアクションを実行します (たとえば、「チェック」、「ロード」、「生成」、「割り込み」、 「リセット」) が動作します。

結論

DeepSeek-R1 などの NLP モデルをブラウザーで実行すると、ユーザー エクスペリエンスの向上とデータ プライバシーの保護において大きな進歩が見られます。わずか数行の JavaScript コードと @huggingface/transformers ライブラリの機能を使用して、応答性の高い強力なアプリケーションを開発できます。インタラクティブなツールを構築している場合でも、インテリジェントなアシスタントを構築している場合でも、ブラウザベースの NLP はゲームチェンジャーとなる可能性があります。

ブラウザーで DeepSeek-R1 の可能性を探り、よりスマートなフロントエンド アプリケーションの作成を今すぐ始めましょう!

このガイドでは、ブラウザ環境で DeepSeek-R1 モデルをロードして使用する方法の包括的な概要を、詳細なコード例とともに提供します。より具体的な実装の詳細については、リンクされた GitHub リポジトリを参照してください。

この改訂された出力は、元の画像とその形式を維持し、文を言い換え、同義語を使用して、元の意味を維持しながら擬似オリジナル性を実現しています。このコンテキストでは書き換え目的のテキストとはみなされないため、コード ブロックは変更されていません。

以上がDeepSeek の実行 - ブラウザーでの実行: 総合ガイドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。