如何用 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.jschat()的图像能力由 Puter.js 提供需要先引入 SDK。根据 Getting Started有两种方式npm install heyputer/puter.jsNode.js 环境需要初始化 auth tokenimport { init } from heyputer/puter.js/src/init.cjs; const puter init(process.env.puterAuthToken);浏览器环境也可以用 CDN 直接引入script srchttps://js.puter.com/v2//script官方文档与 playground 示例均采用这种方式。选择支持图像输出的 Gemini 模型并非所有模型都支持image_config。根据 puter.ai.chat() 文档支持在对话中生成和编辑图像的模型及各自可用的质量级别quality levels如下模型支持的image_sizegemini-2.5-flash-image—文档未列出质量级别gemini-3-pro-image-preview1K、2K、4Kgemini-3.1-flash-image-preview512、1K、2K、4Kimage_config的两个字段选项类型说明image_config.aspect_ratioString宽高比例如16:9、1:1、9:16image_config.image_sizeString输出质量/分辨率必须取该模型支持的质量级别之一文档同时说明每个模型可用的宽高比和图像尺寸以该文档引用的 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;这段代码的构造要点messages第一条是原始用户请求第二条是assistant消息其content为内容对象数组包含上一轮的文本r1.message.content和图像type: image_urlimage_url.url为上一轮拿到的 data URLthoughtSignature取自上一轮r1.message.images[0].thoughtSignature挂在同一个image_url内容对象上第三条是新的用户指令例如把所有文字翻译成西班牙语其余保持不变第二轮编辑产出的图像同样在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/4Kgemini-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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考