Ausführen von DeepSeek-Rn im Browser: Eine umfassende Anleitung

Mit der Weiterentwicklung der Technologie der künstlichen Intelligenz wird es immer einfacher, komplexe Modelle des maschinellen Lernens direkt im Browser auszuführen. In dieser Anleitung erfahren Sie, wie Sie das DeepSeek-R1-Modell mithilfe von JavaScript in Ihren Browser laden und verwenden. Wir werden auch Implementierungsdetails basierend auf den hier bereitgestellten Beispielen behandeln.

Warum NLP-Modelle im Browser ausführen?

Traditionell werden NLP-Modelle (Natural Language Processing) serverseitig bereitgestellt und erfordern eine Internetverbindung, um Anfragen zu senden und Antworten zu empfangen. Mit der Weiterentwicklung von Technologien wie WebGPU und ONNX.js ist es nun jedoch möglich, erweiterte Modelle wie DeepSeek-R1 direkt im Browser auszuführen. Zu seinen Vorteilen gehören:

• Erweiterter Datenschutz: Benutzerdaten verlassen niemals ihr Gerät.
• Reduzierte Latenz: Eliminiert Verzögerungen im Zusammenhang mit der Serverkommunikation.
• Offline-Verfügbarkeit: Funktioniert auch ohne Internetverbindung.

Über DeepSeek-R1

DeepSeek-R1 ist ein leichtes und effizientes NLP-Modell, das für Inferenz auf dem Gerät optimiert ist. Es bietet hochwertige Textverarbeitungsfunktionen bei geringem Platzbedarf und eignet sich daher ideal für Browserumgebungen.

Richten Sie Ihr Projekt ein

Voraussetzungen

Um das DeepSeek-R1-Modell in Ihrem Browser auszuführen, benötigen Sie:

• Moderne Browser, die WebGPU/WebGL unterstützen.
• @huggingface/transformers-Bibliothek zum Ausführen von Transformers-Modellen in JavaScript.
• Enthält Skriptdateien zum Laden und Verarbeiten der DeepSeek-R1-Modelllogik.

Demo: Probieren Sie es aus!

Implementierungsdetails

Hier finden Sie eine Schritt-für-Schritt-Anleitung zum Laden und Verwenden des DeepSeek-R1-Modells in Ihrem Browser:

<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>

Wichtige Punkte

1. Funktionserkennung: Die Funktion check führt eine Funktionserkennung durch, um die WebGPU-Unterstützung sicherzustellen.
2. Einzelfallmodus: Die Klasse TextGenerationPipeline stellt sicher, dass der Tokenizer und das Modell nur einmal geladen werden, wodurch eine redundante Initialisierung vermieden wird.
3. Modellladen: Die getInstance-Methode lädt den Tokenizer und das Modell aus vorab trainierten Quellen und unterstützt Fortschrittsrückrufe.
4. Inferenz: Die generate-Funktion verarbeitet Eingaben und erzeugt Textausgaben unter Verwendung des TextStreamer-Streaming-Tags.
5. Kommunikation: Der Arbeitsthread lauscht auf Nachrichten vom Hauptthread und führt entsprechende Aktionen basierend auf dem Nachrichtentyp aus (z. B. „prüfen“, „laden“, „generieren“, „unterbrechen“, „Reset“) betätigen.

Fazit

Das Ausführen von NLP-Modellen wie DeepSeek-R1 im Browser stellt einen erheblichen Fortschritt bei der Verbesserung der Benutzererfahrung und dem Schutz der Privatsphäre dar. Mit nur wenigen Zeilen JavaScript-Code und der Leistungsfähigkeit der @huggingface/transformers-Bibliothek können Sie reaktionsfähige und leistungsstarke Anwendungen entwickeln. Unabhängig davon, ob Sie interaktive Tools oder intelligente Assistenten entwickeln, hat browserbasiertes NLP das Potenzial, bahnbrechend zu sein.

Entdecken Sie das Potenzial von DeepSeek-R1 im Browser und beginnen Sie noch heute mit der Erstellung intelligenterer Front-End-Anwendungen!

Diese Anleitung bietet einen umfassenden Überblick über das Laden und Verwenden des DeepSeek-R1-Modells in einer Browserumgebung mit detaillierten Codebeispielen. Genauere Implementierungsdetails finden Sie im verlinkten GitHub-Repository.

Diese überarbeitete Ausgabe behält das Originalbild und sein Format bei, formuliert Sätze neu und verwendet Synonyme, um Pseudo-Originalität zu erreichen, während die ursprüngliche Bedeutung erhalten bleibt, da er in diesem Kontext nicht als Text für Umschreibungszwecke betrachtet wird.

Das obige ist der detaillierte Inhalt vonAusführen von DeepSeek-Rn im Browser: Eine umfassende Anleitung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!