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>Describe this image in detail.",
  },
];
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>