在小组件/小程序(WIP)场景下,不同小组件往往具备多模态内容理解与多模态内容输出的需求。借助模型的图像理解与生成能力,可以实现例如:
小组件Showcase | 小鸟心理 | 吉光卡片(文字图片模板制作) | 日落岛(导入图片生成日落壁纸) | CapWords(AI 记单词) |
|---|---|---|---|---|
| 界面示意 |
基于智能体 @vectorx/agent-runtime 对接平台 AI 多模态能力,和文本模型没有差异,仅需按照多模态协议标准,进行模态数据入参的处理即可:
// Qwen Image 文生图模型
async sendMessage(message) {
try {
// 创建 qwen-image 模型
const model = this.createModel('qwen-image');
// 组装多模态入参:支持文本 + 可选参考图片
const contentParts = [];
if (Array.isArray(message?.files) && message.files.length > 0) {
// 仅将图片类型作为参考图参与提示(如果有)
const image = message.files.find((f) => f?.type === 'image' && f?.url);
if (image) {
contentParts.push({
type: 'image_url',
image_url: { url: image.url },
});
}
}
if (message?.msg) { contentParts.push({ type: 'text', text: message.msg }); }
const modelResponse = await model.streamText({
messages: [
{
role: 'system',
content: [
{ type: 'text', text: '你是一个图像生成助手,请基于提示词生成图片。' },
],
},
{
role: 'user',
content: contentParts.length > 0
? contentParts
: [{ type: 'text', text: message?.msg || '请根据描述生成图片' }],
},
],
});
for await (const chunk of modelResponse) {
this.sseSender.send({ data: chunk });
}
this.sseSender.end();
} catch (error) {
console.error('qwen-image stream error:', error);
this.sseSender.end();
}
}
[
{
"role": "system",
"content": "你是一个天气查询助手。"
},
{
"role": "user",
"content": "今天天气怎么样?"
},
{
"role": "tool",
"function": "get_weather",
"arguments": {
"location": "New York"
}
},
{
"role": "tool",
"function": "get_weather",
"name": "weather_info",
"content": {
"temperature": 25,
"condition": "Sunny"
}
},
{
"role": "assistant",
"content": "今天纽约的天气是25度,晴朗。"
}
]
{
"role": "user",
"content": [
{
"type": "image_url",
"image_url": {
"url": "https://help-static-aliyun-doc.aliyuncs.com/file-manage-files/zh-CN/20241022/emyrja/dog_and_girl.jpeg"
},
},
{
"type": "text", "text": "图中描绘的是什么景象?"
},
],
},
通过 Cli 或者使用 IDE,对多模态智能体进行调试,目前模拟器已同步开放多模态调试功能:
由于多模态模型(如图像生成、视频生成等)因处理时间较长,因此一般多模态模型采用异步调用机制,通常需要调用两个接口完成操作:
在开放平台内,您可以快速完成此功能的调用:
整个流程如下:
多模态对话示例
async sendMessage(message) {
try {
// 创建 qwen-image 模型
const model = this.createModel('qwen-image');
// 组装多模态入参:支持文本 + 可选参考图片
const contentParts = [];
if (Array.isArray(message?.files) && message.files.length > 0) {
// 仅将图片类型作为参考图参与提示(如果有)
const image = message.files.find((f) => f?.type === 'image' && f?.url);
if (image) {
contentParts.push({
type: 'image_url',
image_url: { url: image.url },
});
}
}
if (message?.msg) { contentParts.push({ type: 'text', text: message.msg }); }
const modelResponse = await model.streamText({
messages: [
{
role: 'system',
content: [
{ type: 'text', text: '你是一个图像生成助手,请基于提示词生成图片。' },
],
},
{
role: 'user',
content: contentParts.length > 0
? contentParts
: [{ type: 'text', text: message?.msg || '请根据描述生成图片' }],
},
],
});
for await (const chunk of modelResponse) {
this.sseSender.send({ data: chunk });
}
this.sseSender.end();
} catch (error) {
console.error('qwen-image stream error:', error);
this.sseSender.end();
}
}
多模态对话SDK流程示意
本期新增的模型列表如下( 优先支持框架侧接入多模态模型,后续可快速迭代更多模型接入 ):
模型名称 | ID | 标签 | 厂商 | 上下文长度 | 更新时间 | 模型描述 |
|---|---|---|---|---|---|---|
| 通义千问VL-Max | qwen-vl-max | 图片理解,视频理解 | 通义 | 128K | 2025-05-26 | 通义千问VL-Max(qwen-vl-max),即通义千问超大规模视觉语言模型。相比增强版,再次提升视觉推理能力和指令遵循能力,提供更高的视觉感知和认知水平。在更多复杂任务上提供最佳的性能。 |
| 通义千问-QwenImage | qwen-image | 图片生成 | 通义 | 128K | 2025-6-16 | 通义千问系列首个图像生成模型,参数规模200亿。具备卓越的文本渲染能力,在复杂文本渲染、各类生成与编辑任务重表现出色,在多个公开基准测试中获得SOTA。 |