library_name: transformers.js license: apple-amlr pipeline_tag: image-text-to-text tags:

• fastvlm

用法

Transformers.js

如果你还没有安装，可以通过 NPM 安装 Transformers.js JavaScript 库：

npm i @huggingface/transformers

然后你可以按以下方式为图像生成描述：

import {
  AutoProcessor,
  AutoModelForImageTextToText,
  load_image,
  TextStreamer,
} from "@huggingface/transformers";

// 加载处理器和模型
const model_id = "onnx-community/FastVLM-0.5B-ONNX";
const processor = await AutoProcessor.from_pretrained(model_id);
const model = await AutoModelForImageTextToText.from_pretrained(model_id, {
  dtype: {
    embed_tokens: "fp16",
    vision_encoder: "q4",
    decoder_model_merged: "q4",
  },
});

// 准备提示词
const messages = [
  {
    role: "user",
    content: "<image>请详细描述这张图片。",
  },
];
const prompt = processor.apply_chat_template(messages, {
  add_generation_prompt: true,
});

// 准备输入
const url = "https://huggingface.co/datasets/huggingface/documentation-images/resolve/main/bee.jpg";
const image = await load_image(url);
const inputs = await processor(image, prompt, {
  add_special_tokens: false,
});

// 生成输出
const outputs = await model.generate({
  ...inputs,
  max_new_tokens: 512,
  do_sample: false,
  streamer: new TextStreamer(processor.tokenizer, {
    skip_prompt: true,
    skip_special_tokens: false,
    // callback_function: (text) => { /* 对流式输出进行处理 */ },
  }),
});

// 解码输出
const decoded = processor.batch_decode(
  outputs.slice(null, [inputs.input_ids.dims.at(-1), null]),
  { skip_special_tokens: true },
);
console.log(decoded[0]);

<details>

<summary>点击查看示例输出</summary>

这张图片展示了一个充满活力和色彩的场景，以多种花卉和植物为特色。主要的焦点是一朵引人注目的粉色花朵，花心深色，看起来像是一种矮牵牛花。花瓣呈现出浓郁、深沉的粉色，花朵具有经典的、略微皱褶的外观。花朵的深色花心是对比鲜明的颜色，可能是深紫色或黑色，这增强了花朵的视觉吸引力。

在背景中，还有其他几朵花和植物，每一朵都有其独特的颜色和形状。在左边，有一朵红色的花朵，色调明亮、生动，在粉色花朵的映衬下格外醒目。红色花朵的形状更圆润，中心较浅，花瓣的颜色比粉色花朵的红色更浅。

在粉色花朵的右边，有一株开红花的植物，花朵更小、更密集。这些红花呈现出深沉、浓郁的红色，与粉色花朵相比形状更紧凑。

在前景中，有一株绿色的植物，有几片叶子和几朵小花。叶子是明亮的绿色，花朵是较浅的绿色，有几片微微张开的花瓣。

整体而言，这张图片很好地展示了一个花园或自然场景，各种花卉和植物都在盛开。色彩鲜艳，构图均衡，中心的粉色花朵吸引着观众的目光。

</details>