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>