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>