直接在瀏覽器中運(yùn)行大型語(yǔ)言模型 (LLM) 為保護(hù)隱私的客戶端 AI 應(yīng)用帶來(lái)了新的可能性。在本博文中，我們將探討如何使用 WebGPU 和 Hugging Face 的 Transformers.js 庫(kù)在瀏覽器中完全運(yùn)行功能強(qiáng)大的文本到圖像生成模型 DeepSeek Janus-Pro-1B。

為什麼選擇基於瀏覽器的推理？

1. 隱私: 數(shù)據(jù)永遠(yuǎn)不會(huì)離開(kāi)用戶的設(shè)備。
2. 成本效益: 無(wú)需服務(wù)器基礎(chǔ)設(shè)施。
3. 可訪問(wèn)性: 可以在任何具有現(xiàn)代瀏覽器和 WebGPU 支持的設(shè)備上運(yùn)行。

由於Transformers.js 和WebGPU 加速 的優(yōu)化，專為文本到圖像生成等多模態(tài)任務(wù)設(shè)計(jì)的DeepSeek Janus-Pro-1B 現(xiàn)在可以通過(guò)基於瀏覽器的推理訪問(wèn)。

關(guān)鍵工具和庫(kù)

1. Transformers.js: Hugging Face 的 Transformers 庫(kù)的 JavaScript 版本，針對(duì)瀏覽器執(zhí)行進(jìn)行了優(yōu)化。
2. WebGPU: 用於瀏覽器中 GPU 加速的現(xiàn)代 API，它以改進(jìn)的 ML 工作負(fù)載性能取代了 WebGL。
3. ONNX Runtime: 通過(guò)優(yōu)化的計(jì)算圖實(shí)現(xiàn)模型執(zhí)行。

演示代碼演練

以下示例演示如何在 Web Worker 中加載和運(yùn)行 DeepSeek Janus-Pro-1B 以進(jìn)行非阻塞推理。完整的代碼可在 GitHub 存儲(chǔ)庫(kù)中找到。

import {
  AutoProcessor,
  MultiModalityCausalLM,
  BaseStreamer,
  TextStreamer,
  InterruptableStoppingCriteria,
} from "@huggingface/transformers";

// 定義常量
const IMAGE_GENERATION_COMMAND_PREFIX = "/imagine ";
const MAX_NEW_TEXT_TOKENS = 1024;

/**
 * 用于執(zhí)行 WebGPU 功能檢測(cè)的輔助函數(shù)
 */
let fp16_supported = false;
async function check() {
  try {
    const adapter = await navigator.gpu.requestAdapter();
    if (!adapter) {
      throw new Error("WebGPU 不受支持（未找到適配器）");
    }
    fp16_supported = adapter.features.has("shader-f16");
    self.postMessage({
      status: "success",
      data: fp16_supported,
    });
  } catch (e) {
    self.postMessage({
      status: "error",
      data: e.toString(),
    });
  }
}

/**
 * 此類使用單例模式來(lái)啟用管道延遲加載
 */
class ImageGenerationPipeline {
  static model_id = "onnx-community/Janus-Pro-1B-ONNX";

  static async getInstance(progress_callback = null) {
    this.processor ??= AutoProcessor.from_pretrained(this.model_id, {
      progress_callback,
    });

    this.model ??= MultiModalityCausalLM.from_pretrained(this.model_id, {
      dtype: fp16_supported
        ? {
            prepare_inputs_embeds: "q4",
            language_model: "q4f16",
            lm_head: "fp16",
            gen_head: "fp16",
            gen_img_embeds: "fp16",
            image_decode: "fp32",
          }
        : {
            prepare_inputs_embeds: "fp32",
            language_model: "q4",
            lm_head: "fp32",
            lm_head: "fp32",
            gen_head: "fp32",
            gen_img_embeds: "fp32",
            image_decode: "fp32",
          },
      device: {
        prepare_inputs_embeds: "wasm", // TODO 當(dāng)錯(cuò)誤修復(fù)后使用“webgpu”
        language_model: "webgpu",
        lm_head: "webgpu",
        gen_head: "webgpu",
        gen_img_embeds: "webgpu",
        image_decode: "webgpu",
      },
      progress_callback,
    });

    return Promise.all([this.processor, this.model]);
  }
}

class ProgressStreamer extends BaseStreamer {
  constructor(total, on_progress) {
    super();
    this.total = total;
    this.on_progress = on_progress;

    this.count = null;
    this.start_time = null;
  }

  put(value) {
    if (this.count === null) {
      // 忽略第一批標(biāo)記（提示）
      this.count = 0;
      this.start_time = performance.now();
      return;
    }

    const progress = ++this.count / this.total;

    this.on_progress({
      count: this.count,
      total: this.total,
      progress,
      time: performance.now() - this.start_time,
    });
  }

  end() {
    /* 什么也不做 */
  }
}

const stopping_criteria = new InterruptableStoppingCriteria();

async function generate(messages) {
  // 對(duì)于此演示，我們只響應(yīng)最后一條消息
  const message = messages.at(-1);

  // 告訴主線程我們已開(kāi)始
  self.postMessage({ status: "start" });

  // 加載管道
  const [processor, model] = await ImageGenerationPipeline.getInstance();

  // 確定用戶是否要生成圖像或文本
  if (message.content.startsWith(IMAGE_GENERATION_COMMAND_PREFIX)) {
    const text = message.content.replace(IMAGE_GENERATION_COMMAND_PREFIX, "");

    const conversation = [
      {
        role: "", // 使用標(biāo)題大小寫(xiě)
        content: text,
      },
    ];
    const inputs = await processor(conversation, {
      chat_template: "text_to_image",
    });

    const callback_function = (output) => {
      self.postMessage({
        status: "image-update",
        ...output,
      });
    };

    const num_image_tokens = processor.num_image_tokens;
    const streamer = new ProgressStreamer(num_image_tokens, callback_function);

    const outputs = await model.generate_images({
      ...inputs,
      min_new_tokens: num_image_tokens,
      max_new_tokens: num_image_tokens,
      do_sample: true,
      streamer,
    });

    const blob = await outputs[0].toBlob();

    // 將輸出發(fā)送回主線程
    self.postMessage({
      status: "image-update",
      blob,
    });
  } else {
    const inputs = await processor(
      message.image
        ? [
            {
              role: "",
              content: "<image_placeholder>\n" + message.content,
              images: [message.image],
            },
          ]
        : [
            {
              role: "",
              content:
                "您是一位樂(lè)于助人的助手。以簡(jiǎn)潔的方式回答用戶的問(wèn)題。",
            },
            {
              role: "",
              content: message.content,
            },
          ],
    );

    let startTime;
    let numTokens = 0;
    let tps;
    const token_callback_function = () => {
      startTime ??= performance.now();

      if (numTokens++ > 0) {
        tps = (numTokens / (performance.now() - startTime)) * 1000;
      }
    };
    const callback_function = (output) => {
      self.postMessage({
        status: "text-update",
        output,
        tps,
        numTokens,
      });
    };

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

    // 生成響應(yīng)
    const outputs = await model.generate({
      ...inputs,
      max_new_tokens: MAX_NEW_TEXT_TOKENS,
      do_sample: false,
      streamer,
      stopping_criteria,
    });
  }

  // 告訴主線程我們已完成
  self.postMessage({
    status: "complete",
  });
}

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

  // 加載管道并將其保存以備將來(lái)使用。
  const [processor, model] = await ImageGenerationPipeline.getInstance((x) => {
    // 我們還向管道添加進(jìn)度回調(diào)，以便我們可以
    // 跟蹤模型加載。
    self.postMessage(x);
  });

  self.postMessage({ status: "ready" });
}

// 偵聽(tīng)來(lái)自主線程的消息
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":
      stopping_criteria.reset();
      break;
  }
});

運(yùn)行演示

在此處查看實(shí)時(shí)演示：DeepSeek Janus-Pro-1B 瀏覽器演示。

演示的關(guān)鍵功能:

• 模型加載和推理期間的實(shí)時(shí)進(jìn)度更新。
• WebGPU 加速生成（需要 Chrome 113 或 Edge 113 ）。
• 完全客戶端執(zhí)行——不會(huì)將數(shù)據(jù)發(fā)送到外部服務(wù)器。

挑戰(zhàn)與優(yōu)化

1. 模型量化: 模型量化為 8 位以減小其大小並提高加載速度。
2. 內(nèi)存管理: Web Worker 可防止推理期間 UI 凍結(jié)。
3. 瀏覽器兼容性: WebGPU 仍在試驗(yàn)階段，但對(duì)於性能至關(guān)重要。

結(jié)論

在瀏覽器中運(yùn)行 DeepSeek Janus-Pro-1B 展示了客戶端 AI 的潛力。借助 Transformers.js 和 WebGPU 等工具，複雜的模型現(xiàn)在可以在受限環(huán)境中高效運(yùn)行，同時(shí)保護(hù)用戶隱私。

後續(xù)步驟:

• 嘗試不同的提示和模型配置。
• 探索微調(diào)模型以用於特定領(lǐng)域的任務(wù)。
• 監(jiān)控 WebGPU 的採(cǎi)用情況以確保更廣泛的兼容性。

對(duì)於開(kāi)發(fā)人員來(lái)說(shuō)，這標(biāo)誌著向去中心化、以用戶為中心的 AI 應(yīng)用的激動(dòng)人心的轉(zhuǎn)變。深入研究示例代碼並開(kāi)始構(gòu)建！ ?

This revised output maintains the original meaning while using different wording and sentence structures. The image remains in its original format and location. The code is also included, though it's a very long code snippet and might benefit from being broken into smaller, more manageable chunks in a real application.

以上是運(yùn)行DeepSeek Janus-Pro-in瀏覽器：逐步指南的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！