企业官网建设流程全解析

如何用 puter.ai.chat() 的 image_config 用 Gemini 模型生成图像并做多轮编辑？

【免费下载链接】puter🌐 The Internet Computer! Free, Open-Source, and Self-Hostable.项目地址: https://gitcode.com/GitHub_Trending/pu/puter

本文解决一个具体任务：在 Puter.js 中使用puter.ai.chat()调用 Gemini 图像模型生成图片，通过image_config控制输出比例和分辨率，并把生成的图片带回对话做多轮编辑。完成本方案后，你可以在浏览器或 Node.js 环境中拿到data:image/...格式的图像 URL，并在后续轮次中基于上一轮结果继续修改图像。

前提：引入 Puter.js

chat()的图像能力由 Puter.js 提供，需要先引入 SDK。根据 Getting Started，有两种方式：

npm install @heyputer/puter.js

Node.js 环境需要初始化 auth token：

import { init } from "@heyputer/puter.js/src/init.cjs"; const puter = init(process.env.puterAuthToken);

浏览器环境也可以用 CDN 直接引入<script src="https://js.puter.com/v2/"></script>（官方文档与 playground 示例均采用这种方式）。

选择支持图像输出的 Gemini 模型

并非所有模型都支持image_config。根据 puter.ai.chat() 文档，支持在对话中生成和编辑图像的模型及各自可用的质量级别（quality levels）如下：

image_config的两个字段：

文档同时说明：每个模型可用的宽高比和图像尺寸，以该文档引用的 Gemini Image Generation 上游文档为准。选择image_size时先对照上表确认当前模型支持哪些档位。

第一步：用 image_config 生成图像

最简调用是传入文本 prompt 和 options 对象：

const result = await puter.ai.chat("Draw a cute cat wearing a top hat", { model: "gemini-3.1-flash-image-preview", image_config: { aspect_ratio: "16:9", image_size: "2K" }, });

非流式响应中，当模型生成了图像时，message上会带一个images数组（文档示例结构）：

{ message: { role: "assistant", content: "Here is your image.", images: [ { type: "image_url", image_url: { url: "data:image/png;base64,..." } } ] } }

判断本轮是否成功产出图像，就是检查result.message.images?.length > 0，然后取result.message.images[0].image_url.url——这是一个可直接赋给<img src>的 data URL。官方 Image Generation 示例 展示了完整的浏览器实现：取回 URL 后创建<img>元素并插入页面。

第二步：把图像带回对话做多轮编辑

多轮编辑的关键是两点：把上一轮生成的图像放进assistant消息，并且带上上一轮响应中该图像的thoughtSignature以保持编辑上下文。完整两步流程如下（对应官方 多轮图像编辑示例）：

const model = "gemini-3.1-flash-image-preview"; // Step 1: 生成初始图像 const r1 = await puter.ai.chat("Create a simple infographic about photosynthesis", { model, image_config: { image_size: "1K" }, }); const img1 = r1.message.images?.[0]?.image_url?.url; const thoughtSignature1 = r1.message.images?.[0]?.thoughtSignature; // Step 2: 在后续轮次中编辑这张图像 const r2 = await puter.ai.chat([ { role: "user", content: "Create a simple infographic about photosynthesis" }, { role: "assistant", content: [ { type: "text", text: r1.message.content }, { type: "image_url", image_url: { url: img1 }, thoughtSignature: thoughtSignature1 }, ]}, { role: "user", content: "Translate all text to Spanish. Keep everything else the same." }, ], { model, image_config: { aspect_ratio: "16:9", image_size: "2K" }, }); const img2 = r2.message.images?.[0]?.image_url?.url;

这段代码的构造要点：

1. messages第一条是原始用户请求，第二条是assistant消息，其content为内容对象数组，包含上一轮的文本（r1.message.content）和图像（type: "image_url"，image_url.url为上一轮拿到的 data URL）；
2. thoughtSignature取自上一轮r1.message.images[0].thoughtSignature，挂在同一个image_url内容对象上；
3. 第三条是新的用户指令，例如"把所有文字翻译成西班牙语，其余保持不变"；
4. 第二轮编辑产出的图像同样在r2.message.images[0].image_url.url中，可继续作为下一轮编辑的输入。

验证方式与第一步相同：检查img2是否有值（即r2.message.images非空），有值说明编辑成功返回了新图像。

可选分支：流式接收图像

文档说明图像生成支持stream: true，图像以image事件的形式到达，文本则以text字段到达：

const resp = await puter.ai.chat("Draw a cat", { model: "gemini-3.1-flash-image-preview", stream: true, }); for await (const part of resp) { if (part.text) console.log(part.text); if (part.image) { // part.image is { type: "image_url", image_url: { url: "data:..." } } const img = document.createElement("img"); img.src = part.image.image_url.url; document.body.appendChild(img); } }

流式场景下判断成功的标准是循环中收到了至少一个带part.image的 chunk。

限制与注意事项

• image_size必须取对应模型支持的质量级别：gemini-2.5-flash-image在文档中未列出质量级别，而gemini-3-pro-image-preview只支持1K/2K/4K，gemini-3.1-flash-image-preview支持512/1K/2K/4K。
• 多轮编辑依赖thoughtSignature：文档要求"pass thethoughtSignaturefrom the previous response to maintain editing context"，省略它会使编辑上下文丢失，这一点应在调试多轮编辑效果异常时优先检查。
• 返回的images数组是条件性的（"when the model generates images"），代码中应按示例使用?.可选链访问并做空值判断，而不是假定一定存在。
• 具体可用的宽高比和图像尺寸组合以上游 Gemini Image Generation 文档为准，本文表格只覆盖 Puter 文档列出的模型与质量级别。

下一步

完整可运行的实现位于仓库的 playground 示例中：单轮生成示例 和 多轮编辑示例，均通过 CDN 引入https://js.puter.com/v2/，保存为 HTML 文件即可在浏览器中直接运行。参数细节、流式与函数调用等其他chat()能力见 puter.ai.chat() 完整文档。

【免费下载链接】puter🌐 The Internet Computer! Free, Open-Source, and Self-Hostable.项目地址: https://gitcode.com/GitHub_Trending/pu/puter