Menjalankan DeepSeek-Rn Penyemak Imbas: Panduan Komprehensif

Memandangkan teknologi kecerdasan buatan terus berkembang, semakin mudah untuk menjalankan model pembelajaran mesin yang kompleks secara terus dalam penyemak imbas. Panduan ini membimbing anda mempelajari cara memuatkan dan menggunakan model DeepSeek-R1 dalam penyemak imbas anda menggunakan JavaScript. Kami juga akan merangkumi butiran pelaksanaan berdasarkan contoh yang disediakan di sini.

Mengapa menjalankan model NLP dalam penyemak imbas?

Secara tradisinya, model pemprosesan bahasa semula jadi (NLP) digunakan di bahagian pelayan dan memerlukan sambungan Internet untuk menghantar permintaan dan menerima respons. Walau bagaimanapun, dengan kemajuan teknologi seperti WebGPU dan ONNX.js, kini boleh menjalankan model lanjutan seperti DeepSeek-R1 secara langsung dalam penyemak imbas. Kelebihannya termasuklah:

• Privasi Dipertingkat: Data pengguna tidak pernah meninggalkan peranti mereka.
• Kependaman Dikurangkan: Menghapuskan kelewatan yang dikaitkan dengan komunikasi pelayan.
• Ketersediaan Luar Talian: Berfungsi walaupun tanpa sambungan Internet.

Mengenai DeepSeek-R1

DeepSeek-R1 ialah model NLP yang ringan dan cekap yang dioptimumkan untuk inferens pada peranti. Ia menyediakan keupayaan pemprosesan teks berkualiti tinggi sambil mengekalkan jejak yang kecil, menjadikannya sesuai untuk persekitaran penyemak imbas.

Sediakan projek anda

Prasyarat

Untuk mula menjalankan model DeepSeek-R1 dalam penyemak imbas anda, anda memerlukan:

• Pelayar moden yang menyokong WebGPU/WebGL.
• Pustaka @huggingface/transformers untuk melaksanakan model transformer dalam JavaScript.
• Mengandungi fail skrip untuk memuatkan dan memproses logik model DeepSeek-R1.

Demo: Cubalah!

Butiran pelaksanaan

Berikut ialah panduan langkah demi langkah tentang cara memuatkan dan menggunakan model DeepSeek-R1 dalam penyemak imbas anda:

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

Isi penting

1. Pengesanan Ciri: Fungsi check melaksanakan pengesanan ciri untuk memastikan sokongan WebGPU.
2. Mod kes tunggal: Kelas TextGenerationPipeline memastikan tokenizer dan model dimuatkan sekali sahaja, mengelakkan pengamulaan berlebihan.
3. Pemuatan model: Kaedah getInstance memuatkan tokenizer dan model daripada sumber pra-latihan dan menyokong panggilan balik kemajuan.
4. Inferens: Fungsi generate memproses input dan menghasilkan output teks, menggunakan tag penstriman TextStreamer.
5. Komunikasi: Urutan pekerja mendengar mesej daripada utas utama dan melakukan tindakan yang sepadan berdasarkan jenis mesej (contohnya, "semak", "muat", "jana", "ganggu", "set semula") beroperasi.

Kesimpulan

Menjalankan model NLP seperti DeepSeek-R1 dalam penyemak imbas menandakan kemajuan yang ketara dalam meningkatkan pengalaman pengguna dan melindungi privasi data. Dengan hanya beberapa baris kod JavaScript dan kuasa perpustakaan @huggingface/transformers, anda boleh membangunkan aplikasi yang responsif dan berkuasa. Sama ada anda sedang membina alatan interaktif atau pembantu pintar, NLP berasaskan penyemak imbas berpotensi untuk menjadi pengubah permainan.

Terokai potensi DeepSeek-R1 dalam penyemak imbas dan mula mencipta aplikasi bahagian hadapan yang lebih pintar hari ini!

Panduan ini memberikan gambaran menyeluruh tentang cara memuatkan dan menggunakan model DeepSeek-R1 dalam persekitaran penyemak imbas, dengan contoh kod terperinci. Untuk butiran pelaksanaan yang lebih khusus, sila rujuk repositori GitHub yang dipautkan.

Output yang disemak ini mengekalkan imej asal dan formatnya, menyusun semula ayat dan menggunakan sinonim untuk mencapai keaslian pseudo sambil mengekalkan makna asal Blok kod tidak berubah kerana ia tidak dianggap sebagai teks untuk tujuan penulisan semula dalam konteks ini.

Atas ialah kandungan terperinci Menjalankan DeepSeek-Rn Penyemak Imbas: Panduan Komprehensif. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!