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

為什么選擇基于瀏覽器的推理？

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

由于 Transformers.js 和 WebGPU 加速 的優(yōu)化，專為文本到圖像生成等多模態(tài)任務(wù)設(shè)計(jì)的 DeepSeek Janus-Pro-1B 現(xià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: 通過優(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(),
    });
  }
}

/**
 * 此類使用單例模式來啟用管道延遲加載
 */
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);

  // 告訴主線程我們已開始
  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)題大小寫
        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:
                "您是一位樂于助人的助手。以簡(jiǎ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: "正在加載模型...",
  });

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

  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":
      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 等工具，復(fù)雜的模型現(xiàn)在可以在受限環(huán)境中高效運(yùn)行，同時(shí)保護(hù)用戶隱私。

后續(xù)步驟:

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

對(duì)于開發(fā)人員來說，這標(biāo)志著向去中心化、以用戶為中心的 AI 應(yīng)用的激動(dòng)人心的轉(zhuǎn)變。深入研究示例代碼并開始構(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)文章！