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>