NanoBanana 智能绘图助手

本环节是介绍0基础的Vibe 超级简单小项目，旨在复习我对ai的熟练度，方便我后续调度ai制作更宏大的全栈式项目，大概一共有七八个vibe小项目，包括前后端的各种方面以及一些小工具小优化和知识类的，下面开始我们的项目吧~

本项目是通过ai来生成图片，就是做一个智能绘图助手

在开始讨论设计风格、提示词工程之前，我们先解决一件更重要的事：确认你真的可以生成一张图片。当前主流的大模型已经具备图像生成与编辑能力，这类模型通常被称为生成式模型。

为了把流程尽量简化，本教程选择了一个已经具备稳定图像生成与编辑能力的模型作为示例——NanoBanana。它是 Google 推出的图像生成模型，正式名称为 Gemini 3.1 Flash Image Preview ，支持通过自然语言直接生成图片，也支持在已有图片基础上进行修改

我们这里是将不再访问网页版的nanobanana之类的，在本地引入LLM部署， 但是我们为什么不访问网页版呢，因为网页版有时候不方便，我们在进行一些项目需要部署ai的时候，需要调用MCP，MCP在我的另一篇大项目构建自己的智能体ai中又有说，大体来说可以这么理解，就是一个我们定义接入工具的接口，我们可以调用他来使用网上形形色色的各种工具，MCP类似于一个电脑插座，我们可以给电脑平板手机充电，这个电脑手机平板就是不同的工具，我们的程序就是用这些设备的人，我们能通过SSE（网页）或者本地的方式调用MCP，如果部署到本地的话，这样这个生成图片就可以作为我们某个项目的其中一步的工具调用，只需要填入对应使用的apikey就好了，非常方便，不用我们手动去网页访问。

然后我们想想为什么要用大语言模型呢，我们直接引入这个图片生成模型不就好了吗？痛点引入：为什么直接发文章给画图模型没用？

直接将一篇较长的文章输入给 NanoBanana 并要求配图，通常很难得到理想结果。原因并不在于模型“画得不行”，而在于 它并不擅长理解长文本 。

图像生成模型更适合处理简短、明确的视觉描述，而当输入变成一段包含结构、重点和上下文关系的文章时，模型无法判断哪些内容才是画面中真正需要表达的部分。这往往会导致生成结果偏离主题，或只能捕捉到零散细节，缺乏整体概括能力。

本质上，图像模型只有“执行”的能力，却缺少对文本进行分析和取舍的过程。

要解决这个问题，关键并不是更复杂的提示词，而是 在绘图之前先把事情想清楚 。因此，我们在生成流程中引入一个独立的「思考层」，并以此构建一个最简单可用的 Agent。

这个 Agent 的核心目标只有一个：让最终生成的图片，尽可能贴近用户真正的表达意图。

整体流程可以概括为：长文本输入 → 语言模型理解与判断 → 生成合适的视觉提示词 → 图像模型执行生成 → 输出图片

那我们构建的 Agent 怎样才能明白用户的意图呢？

这里选择做一个简化的 “思考层” ，我们设置了三种不同的意图：无效输入、直接生图、需要理解的长文本。

在这个 Agent 中，各个角色的分工可以概括为四点：

语言模型作为决策核心 它负责理解文章内容、判断用户输入的意图，并将任务分发到合适的生成路径中，决定接下来“该怎么做”以及如何生成生图提示词。

图像模型作为执行者 图像模型不参与理解与判断，只接收已经整理好的视觉指令，专注完成图像渲染。

用户作为可介入的引导者 除了直接输入文本，用户还可以在过程中手动调整生成的提示词，或加入参考图来辅助生成，从而对最终结果进行引导和微调。

Gradio 与后端 API 作为整体承载层 它们负责将界面、模型调用和结果展示串联起来，保证整个 Agent 能够以一个完整 Web 应用的形式稳定运行。

本项目用ai来编程，使用Trae，cursor，codex，Claude之类的助手都可以，选一个自己习惯的就好，语言用自己习惯的就好，推荐Py和java

我将从零带领大家做出这个东西~我这里使用的Pycharm和codex来实现

首先第一步先创建项目，记得添加git仓库，方便ai修改提交

添加出的venv 模块用于创建轻量级的虚拟环境，其核心目的是隔离项目依赖。生成的 venv 文件夹包含以下关键子目录：

pyvenv.cfg：配置文件，记录基础 Python 路径和虚拟环境参数

Scripts/（Windows）或 bin/（Linux/macOS）：存放激活脚本和可执行工具（如 pip、python.exe）

Lib/：安装第三方包的实际路径（如 site-packages）

Include/：C 头文件，用于扩展编译

所以不要动venv，直接新建成下面这样，我们将引入ai的两个工作概念

Agents.md这个markdown文件是用来写自己的项目的各种需求，类似自己扮演产品经理发PDF，把自己的前后端布局即类似于框架的逻辑，布局的界面要求，，交互要求，技术栈要求等一一提出，可以让ai帮你生成一篇对应的这个prompt类似于这种，然后自己再修改修改，或者让ai再帮你思考不足修改，框架最好使用比较厉害的模型比如说gpt5.0以上，gemini3.0以上之类的，或者国内Deepseek思考模式改个一两次即可，和我生成的大致差不多就可，最后做出的肯定不一样

让ai生成好markdown文件类型后复制粘贴到AGENTS.md中即可，这会使ai严谨考虑我们的需求，然后让ai生成SPEC.md 这个是我们这个项目的功能，即他能实现什么功能，比如说文生图，我说要求生成对应的提示词之类的，放入SPEC.md，然后这是我们的大语言模型的AGENTS.md和nanobanana的SPEC.md，一起也放进去就好

此时AGENTS.md有两个这个文本，SPEC.md有两个这个文本，然后我们把文件发送给ai生成对应的代码

接下来第二步配置解释器用的包和环境

记得选project5，别选错了，工作目录和脚本路径，我的是这样C:\Users\FLY\AppData\Local\Programs\Python\Python314\python.exe

脚本路径C:\Users\FLY\PycharmProjects\PythonProject5\nanobanana_app.py

工作目录C:\Users\FLY\PycharmProjects\PythonProject5

下载对应的包，把报错的包搜出来下载就好了

第三步，找到对应的apikey，我先把我的源码发出来，在我的github，https://github.com/flyyansii/nanobanana去下载对应的代码，或者用你自己生成的然后需要注意的是，那个api-key填入你自己的硅基流动选择的模型apikey，就是这里要选择对应的模型，我选的是千问2.5，和gemini-2.5-flash-image-preview

，gemini的key不好搞，可以去第三方卖key的中介去买，去看他们支持生成图片img的模型是哪个，然后把对应的URL和nanobanana的对应的URL填下去，不要暴露出自己的key给别人

运行成功后会出现本地的端口，因为我们没部署到类似于vercel的网站，所以就在本地，运行成功就是这个界面，接着就可以使用啦，这个目前来说只是个简单的。后面我在别的项目会把它弄成MCP服务端开发和客户端使用的形式，或者是工具调用，本节只作为大全栈项目中的一小步~

接下来看看成果~