Exécuter DeepSeek-Rn le navigateur : un guide complet-js tutoriel-php.cn

Running DeepSeek-Rn the Browser: A Comprehensive Guide

À mesure que la technologie de l'intelligence artificielle continue de se développer, il devient de plus en plus possible d'exécuter des modèles d'apprentissage automatique complexes directement dans le navigateur. Ce guide vous explique comment charger et utiliser le modèle DeepSeek-R1 dans votre navigateur à l'aide de JavaScript. Nous aborderons également les détails de mise en œuvre sur la base des exemples fournis ici.

Pourquoi exécuter des modèles NLP dans le navigateur ?

Traditionnellement, les modèles de traitement du langage naturel (NLP) sont déployés côté serveur et nécessitent une connexion Internet pour envoyer des requêtes et recevoir des réponses. Cependant, avec l'avancement des technologies telles que WebGPU et ONNX.js, il est désormais possible d'exécuter des modèles avancés tels que DeepSeek-R1 directement dans le navigateur. Ses avantages incluent :

Confidentialité améliorée : les données des utilisateurs ne quittent jamais leur appareil.
Latence réduite : élimine les retards associés à la communication du serveur.
Disponibilité hors ligne : fonctionne même sans connexion Internet.

À propos de DeepSeek-R1

DeepSeek-R1 est un modèle NLP léger et efficace optimisé pour l'inférence sur l'appareil. Il offre des capacités de traitement de texte de haute qualité tout en conservant un faible encombrement, ce qui le rend idéal pour les environnements de navigateur.

Montez votre projet

Prérequis

Pour commencer à exécuter le modèle DeepSeek-R1 dans votre navigateur, vous avez besoin de :

Navigateurs modernes prenant en charge WebGPU/WebGL.
Bibliothèque @huggingface/transformers pour exécuter des modèles de transformateurs en JavaScript.
Contient des fichiers de script pour charger et traiter la logique du modèle DeepSeek-R1.

Démo : essayez-la !

Détails de mise en œuvre

Voici un guide étape par étape sur la façon de charger et d'utiliser le modèle DeepSeek-R1 dans votre navigateur :

<code class="language-javascript">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;
  }
});</code>

Copier après la connexion

Points clés

Détection de fonctionnalités : La fonction check effectue une détection de fonctionnalités pour garantir la prise en charge de WebGPU.
Mode cas unique : La classe TextGenerationPipeline garantit que le tokenizer et le modèle ne sont chargés qu'une seule fois, évitant ainsi une initialisation redondante.
Chargement du modèle : la méthode getInstance charge le tokenizer et le modèle à partir de sources pré-entraînées et prend en charge les rappels de progression.
Inférence : la fonction generate traite l'entrée et produit une sortie de texte, à l'aide de la balise de streaming TextStreamer.
Communication : Le thread de travail écoute les messages du thread principal et effectue les actions correspondantes en fonction du type de message (par exemple, "vérifier", "charger", "générer", "interrompre", "réinitialisation") fonctionnent.

Conclusion

L'exécution de modèles NLP comme DeepSeek-R1 dans le navigateur marque un progrès significatif dans l'amélioration de l'expérience utilisateur et la protection de la confidentialité des données. Avec seulement quelques lignes de code JavaScript et la puissance de la bibliothèque @huggingface/transformers, vous pouvez développer des applications réactives et puissantes. Que vous créiez des outils interactifs ou des assistants intelligents, la PNL basée sur un navigateur a le potentiel de changer la donne.

Explorez le potentiel de DeepSeek-R1 dans le navigateur et commencez dès aujourd'hui à créer des applications frontales plus intelligentes !

Ce guide fournit un aperçu complet de la façon de charger et d'utiliser le modèle DeepSeek-R1 dans un environnement de navigateur, avec des exemples de code détaillés. Pour des détails de mise en œuvre plus spécifiques, veuillez vous référer au référentiel GitHub lié.

Cette sortie révisée conserve l'image originale et son format, reformule les phrases et utilise des synonymes pour obtenir une pseudo-originalité tout en préservant le sens original car il n'est pas considéré comme du texte à des fins de réécriture dans ce contexte.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!