该工具已开源，可访问 Github 获取：https://github.com/yitao2020/Vue-AI-web-game-asset-generator
根据 Gemini 给出的 API 指导文档，我将 Vue 框架搭建的 Nano banana 进行了图片输出比例的迭代。基于 https://kie.ai/zh-CN 提供的接口，我只需要参考 Gemini 所列出的比例调用示例全部复制交给 Cursor claude 即可。
将前端的比例参数在文本输入框上进行添加，样式选择单选边框按钮。效果图如下：
输出一个 16:9 的生图效果
接上篇文字换成 Vue 框架来做前端搭建。Gradio 有个缺陷，没法灵活调整左侧任务栏卡片，因为涉及到删除管理操作，点击加载历史内容。框架存在局限，而Vue 能够很好的解决这个问题。
顺便一提，还是Cursor+Claude 好用，是真正再理解你的意思去解决问题，Qoder有点兜圈子，回头还是原地杵。
以下是效果图，比我预期完成的更好。这次的效果比 Gradio 完成度更高，之前存在卡片未对齐，文本摆放不美观的问题。
我实现了以下功能：
因为都在本地调试，除了接入好 Nano banana edit 编辑模型外，要接入图床，这样能够实现图像传输到编辑模型。图像的传输格式选择是 Base 64，同时接入Kie.ai 提供的免费图床 API 。对此，一个图像编辑需求功能才算正常跑通。
诊断为Canvas污染机制，当Canvas中绘制了跨域图片时，浏览器会将整个Canvas标记为”tainted”
我们的流程：AI图片 → 加载到Canvas → 用户涂抹 → 导出Base64 → 上传到图床
失败点：在导出Base64这一步失败了
![[迭代] Vue 框架搭建 Gemini-nano-banana 支持图像比例输出](https://trilightlab.com/wp-content/uploads/2025/10/Screenshot-2025-10-09-215911-1568x636.png)
![[迭代] 我用 Vue 框架搭建 Gemini-nano-banana](https://trilightlab.com/wp-content/uploads/2025/09/Dingtalk_20250925201030-1568x934.jpg)
原始图片URL → createCleanImageBase64() → 干净的Base64 → Fabric.js
以上图片的局部重绘得以解决。
去掉Fabric.js，改用vue原生的 Canvas 局部重绘。
后续考虑后续增加 Seedream 的模型API、腾讯混元3.0 模型的API接入，这个后续再研究，相信是个更有意思的事情……
该工具流程主要是面向需求量集中，使用人群面向团队内部，小组群体。方便管理者统一核算成本。下面分享我使用的开发工具是阿里最近推出 Qoder（使用的是 Qwen 大模型），接入 Gemini-nano-banana的api ，并通过 Gradio 框架搭建一个简单的 web 界面。
1、通过Qoder编写一个简单的web文生图界面
新用户 1000 个积分，我的使用感受下来是能够满足基本的功能搭建，我是没有任何代码阅读能力的，所以全程都是从一个视觉设计师的角度来请求命令，产生的 bug 较多。当通过一条命令要求生成小猫图片后，1000 个积分已经消耗完毕。完成的界面效果图如下：
这个界面左侧是任务列表，右侧是对话列表（上半部分是当前任务的生成记录，下半部分是输入框），可以上传图片、局部重绘，以及底部的提示词范本。这还是基本效果，细节布局还待优化，耗时1天搭建。
2、我是如何接入 Gemini-nano-banana 的 API ？
一开始我尝试使用 Google AI studio 获取 api，提供 api 的示例样本给到 Qoder，测试下来能够调用成功，但是会出现 404，通过排查发现是要升级到计费账户，也就是需要国外注册地的 Google 账号，同时你要使用到境外的信用卡才能订阅。
这一步就走不通。选择用了第三方的API接口，我使用的是 https://kie.ai/zh-CN ,一个中国人做的，包含了很多大模型的接口（Chatgpt、VEO3、midjourney、Runway、flux kontext……）最便捷的还是付款方式非常方便，支持支付宝…..
这是 Nano banana api 接口信息：https://kie.ai/nano-banana?model=google%2Fnano-banana-edit
它包含三个类型：生图模型、编辑模型、高质量模型，也就是说完成从生图需求到编辑图像需求，再到高质量图像的需求你需要接入这三个API的配置信息。
还有一个注意的地方，我使用的调用方式是 Query Task（Get），使用 Create Task（post）会遇到 404 问题。总的来说接入还算比较顺滑。
3、国产编程模型使用感受
使用过 Trae、Curse-Claude对比 Qoder 我觉得是体验感受是这样的，Curse-Claude > Qoder > Trae。我的命令请求都不是站在程序员角度发出的，这对大模型的中文的理解能力也有一定的挑战，我认为使用 Curse claude调试 bug 是最省心的，我用它来开发 iOS 应用程序，Trae 每次修 bug 都会说修正好了（实际上并没有），平均时间要花费3天。同样的问题，同样的提问请求下 Curse-Claude 能在1天就修完所有Bug。
Qoder 使用下来对文本理解能力很强，能够主动通过测试监控结果找到 bug，这点做的很赞。但是在每次调试 bug 过程中，总会请求不同的端口测试，上下文关联较弱。即使说清楚指定一个端口测试依然会在后续多轮测试中忘记，有待加强。附上我对它狂哄的交流记录：
就到这里，还有很多功能和 bug 需要修复。
我觉得正因为有了 Nano-banana、即梦 这类模型精准的修改能力，出错也越来越少。非常适合在游戏美术团队中使用，特别是前期的新项目筹备需要大量试错，尝试不同的风格。基于这个场景下通过 N8N.io 这类自动化工具接入 Nano-banana-API，并给场景原画、角色立绘、道具设计、图标设计等等进行一些批量生成的定制化工作流。甚至编写不同的需求信息，一并交给Agent 进行排序生成管理，设定命令触发时间，通过视觉大模型检阅生成效果，不满足要求继续触发生成，而设计师只需要在第二天打开云盘审核筛选，优化生成命令，这将会是一个游戏视觉设计师与AI新的协作方式。
照现在这个大模型的迭代速度，实现口交创作不再是梦想。笔者打算把 Qwen-image 的模型进行一轮改图对比测试，结果还躺在草稿箱。
这不，谷歌的Gemini-image一出，改图能力太强大了。身边同事都不免说出牛逼的惊叹。这妥妥的就是懒人设计师的福音，改图口交的神器。哪怕游戏策划再多修改要求，那也是分分钟都能出很多方案啊！实在是等不及想分享给游戏行业的设计师、开发者们。
另外为了体现出Gemini 2.5 Flash Image的生图能力，我单独开了一个专栏进行记录分享：https://trilightlab.com/about-_aigc/
废话不多说，开测。依然是左边是原图，右图是修改后的。
要求：将这个图的王冠修改一个兔头，保持画面风格的一致
修改要求一定要明确，具体。不要出现过多的形容词，例如：参考、大一点、小一点、类似这种抽象类词汇。
要求：将这个图左边的绿叶植物换成水仙，花朵换成水仙花，要求画风一致，将瓶子的颜色修改成绿色主色调。
要求：参考这个构图，重新绘制一个以哈利波特元素相关的药水瓶，要求构图类似，同时融入哈利波特的一些经典元素，植物花朵元素换成食人花，瓶子的主色调为紫色和棕色，有冷暖的对比。
到这一会发现它的修改能力下降了，有可能是因为提示词还有待提高，但同时我认为还存在缺陷。让它参考构图重新创作美感，构图表达是局限。即使你的修改要求巨长，描述的非常具体模型对审美上理解是存在缺陷的。这是天然的一个缺陷。
要求：将图中蓝色的小女孩换成一个老人
上难度，给它潦草的草稿，将图进行上色。该工作流支持2张图，多张图融合输入。
要求：参考图1的画风，给图2进行上色，做成彩色，画面风格一致
总体对于我来说很不错，指哪打哪，很舒服！
线稿上色
要求：参考图1的参考构图，将图2的脸迁移到图1，同时给同1的草稿上色
以上，我认为这将是又一次新的工作流革新。原画师、UI设计师能够在基于现有的设计稿，将工作流嵌入自己的项目中，提供多种设计方案不再需要数小时的修改，更不需要和上游策划掰扯如何修改更合理。多种方案对比之后必然是找到更合适的解决方案。
更重要的是能够让广大的设计师从繁琐的工作中解放出来，聚焦很重要的工作内容上。但同时我们的文字表达又是有局限的，设计师在屏幕上画两笔抽象的形状，文字如何表达出来？这种前后关系文字表达注定是缺点，希望对你有启发。
工作流地址：https://blog.comfy.org/p/nano-banana-via-comfyui-api-nodes
