企业官网建设流程全解析

从 NanoBanana 到自建 AI Agent：easy-vibe 课程手把手带你搭建资产生产流水线

【免费下载链接】easy-vibe💻 vibe coding 101｜The first course for AI-native product builders.项目地址: https://gitcode.com/GitHub_Trending/ea/easy-vibe

本篇技术指南源自 easy-vibe 项目 stage-2 前端模块中的 lovart-assets 实战文档（另可对照阅读 中文原版）。它以 NanoBanana（Gemini 图像生成模型）为起点，用"1 分钟生成第一张图 → Agent 工具 Lovart 体验 → 从零搭建自己的图像生成 Agent"三段式路径，完整讲解 AI 资产（assets）生产的核心能力：文生图、图生图、参考图一致性保持，以及"LLM 理解 + 图像模型执行"的 Agent 分层架构。读完本文，你将掌握一个可直接运行的 Gradio 图像生成工具、一套可复用的 Agent 构建思路，以及配套的分阶段 Prompt 工程模板。

第 1 章：1 分钟生成你的第一张图片资产

在设计、风格、Prompt 工程之前，先解决一件更重要的事：确认你真的能生成一张图片。

主流大模型普遍已具备图像生成与编辑能力，这类模型通常被称为生成式模型（Generative Models）。为了把流程简化到极致，本教程选用一个已经具备稳定图像生成与编辑能力的模型作为示例——NanoBanana，其官方名称为Gemini 3.1 Flash Image Preview，支持直接从自然语言生成图像，也支持对已有图片进行修改。从能力层面看，它与你可能听过的其他模型（如 GPT-4o、Claude、Qwen、Midjourney 等）没有本质区别：输入一段描述，模型输出结果。

你可以把它理解为一支"画笔"。本章只关心一件事：这支画笔能否在你手里画出第一笔。

1.1 "Hello World" 级别的生成

正式开始前，只需要完成三个步骤：

1. 在 Trae 中新建一个文件夹；
2. 新建一个 Python 文件；
3. 复制粘贴下面这段完整代码。

Trae 会自动完成环境部署与依赖安装，无需额外配置。代码需要 NanoBanana 的 API Key——这里不展开申请流程，只要能拿到并填入对应参数即可。这一阶段的目标不是读懂每一行代码，而是让它成功跑起来。

# /// script # dependencies = [ # "gradio>=4.0.0", # "pillow>=10.0.0", # "requests>=2.31.0", # ] # /// import gradio as gr import requests import base64 from PIL import Image import io import os import time import re from typing import Optional, Dict, Any, List # 配置 API 信息 NANOBANANA_API_URL: str = "YOUR API URL" NANOBANANA_API_KEY: str = "YOUR API KEY" OUTPUT_DIR: str = "outputs" # 确保输出目录存在 os.makedirs(OUTPUT_DIR, exist_ok=True) def image_to_base64_data_uri(image: Image.Image) -> str: """ 将 PIL 图像转换为兼容 OpenAI API 的 data URI 格式。 """ buffer = io.BytesIO() # 统一转换为 PNG 以保证兼容性 image.save(buffer, format="PNG") encoded = base64.b64encode(buffer.getvalue()).decode('utf-8') return f"data:image/png;base64,{encoded}" def base64_to_image(base64_str: str) -> Optional[Image.Image]: """ 将纯 Base64 字符串转换为 PIL 图像。 """ try: image_bytes = base64.b64decode(base64_str) return Image.open(io.BytesIO(image_bytes)) except Exception as e: print(f"Base64 解码错误: {e}") return None def extract_base64_from_response(content: Any) -> Optional[str]: """ 核心解析逻辑：从 API 返回的 content 中提取图像 Base64 数据。 兼容 Markdown 格式与结构化列表格式。 """ if not content: return None base64_data = None # 1. 结构化提取尝试（List） # 对应返回格式: [{"type": "image_url", "image_url": {"url": "data:..."}}] if isinstance(content, list): for part in reversed(content): # 逆序查找，通常最新图片在末尾 if isinstance(part, dict): # 检查 image_url 或 output_image 字段 img_field = part.get("image_url") or part.get("image") or part.get("output_image") if isinstance(img_field, dict): url = img_field.get("url", "") if url.startswith("data:image/") and "," in url: return url.split(",", 1)[1].strip() # 若列表中无结构化图片，尝试拼接列表文本寻找 Markdown text_parts = [ str(p.get("text", "")) for p in content if isinstance(p, dict) and p.get("type") in ["text", "input_text"] ] content_str = "".join(text_parts) else: content_str = str(content) # 2. Markdown 正则提取尝试（String） # 对应返回格式: "Here is your image: img" pattern = re.compile(r"!\[.*?\]\((data:image/[^;]+;base64,[^)]+)\)", re.IGNORECASE) match = pattern.search(content_str) if match: data_url = match.group(1) if "," in data_url: return data_url.split(",", 1)[1].strip() return None def synthesize(prompt: str, input_image: Optional[Image.Image]) -> Optional[Image.Image]: """ 调用 Nanobanana API 进行生成。 """ if not prompt or not prompt.strip(): gr.Warning("请输入 prompt") return None print(f">>> 开始任务: {prompt[:50]}...") headers = { "Content-Type": "application/json", "Authorization": f"Bearer {NANOBANANA_API_KEY}" } # 按 OpenAI Vision / Chat 标准构造 payload messages = [] if input_image is not None: # 多模态输入 / 图生图模式 print(">>> 检测到输入图片，使用多模态模式") img_base64 = image_to_base64_data_uri(input_image) messages.append({ "role": "user", "content": [ {"type": "text", "text": prompt}, {"type": "image_url", "image_url": {"url": img_base64}} ] }) else: # 纯文生图模式 messages.append({ "role": "user", "content": prompt }) payload = { "messages": messages, # 使用第一个代码中已验证可用的模型 "model": "gemini-2.5-flash-image", # 可选参数，取决于 API 支持 "stream": False } try: # 加大超时时间，图像生成通常更慢 response = requests.post(NANOBANANA_API_URL, headers=headers, json=payload, timeout=120) # 检查 HTTP 状态 if response.status_code != 200: error_msg = f"API 请求错误: {response.status_code} - {response.text}" print(error_msg) gr.Error(error_msg) return None result = response.json() # Debug: 打印部分响应，便于排查 print(f"API 原始响应(截断): {str(result)[:200]}...") # 提取 Content content = None if "choices" in result and len(result["choices"]) > 0: content = result["choices"][0].get("message", {}).get("content") if not content: gr.Warning("API 响应中不包含 content 字段") return None # 使用已验证的逻辑提取 Base64 base64_str = extract_base64_from_response(content) if base64_str: output_image = base64_to_image(base64_str) if output_image: return output_image # 未提取到图片，可能被模型拒绝或仅返回文本 text_content = str(content) if not isinstance(content, list) else " ".join([str(x) for x in content]) gr.Info(f"未生成图片，模型返回文本: {text_content[:100]}...") return None except requests.exceptions.Timeout: gr.Error("请求超时，请稍后重试") return None except Exception as e: import traceback traceback.print_exc() gr.Error(f"未知错误: {str(e)}") return None # Gradio 界面配置 with gr.Blocks(title="Nanobanana Image Generator") as app: gr.Markdown("# 🍌 Nanobanana Text/Image to Image") gr.Markdown("基于 Gemini-2.5-Flash-Image 模型，支持文生图与图生图。") with gr.Row(): with gr.Column(): prompt_input = gr.Textbox( label="Prompt (提示词)", placeholder="示例: A cyberpunk cat holding a neon sign...", lines=3 ) image_input = gr.Image( label="参考图片（可选，用于图生图）", type="pil", height=300 ) submit_btn = gr.Button("开始生成", variant="primary") with gr.Column(): image_output = gr.Image(label="生成结果", format="png") submit_btn.click( fn=synthesize, inputs=[prompt_input, image_input], outputs=image_output ) if __name__ == "__main__": app.launch(share=True)

当 Trae 提示运行成功后，点击它给出的本地链接（通常是http://127.0.0.1:7860）。如果一切正常，你会看到一个已经可用的 AI 图像生成界面。

这个界面看起来简单，却已经具备商业级图像生成工具最核心的两项能力：文生图与图生图。

• 左侧：指令区（Input Zone）——你在这里下达指令。
  • Prompt（提示词输入框）：输入你的创意描述（建议使用英文）；
  • Input Image（参考图片框）：
    • 文生图模式：保持该框为空；
    • 图生图模式：拖入一张本地图片，AI 将基于它进行创作；
  • Submit 按钮：点击发送指令，开始生成。
• 右侧：结果区（Output Zone）——魔法发生的地方，生成的图片会显示在这里。

1.2 第一次真实生成

现在可以尝试生成你的第一张图片了。本示例使用的 prompt 是：

A red apple

这是一个刻意简化的示例，没有任何风格描述或参数。

真实流程

代码运行后，整体流程可归纳为三步：

1. 将文本描述发送给模型；
2. 模型生成对应图片；
3. 图片保存为本地文件。

几秒钟后就能看到本地生成的结果。模型生成具有随机性，同一个 prompt 每次结果都不同，可以多生成几次选出最喜欢的一张。

你也可以丰富 prompt，加上更多描述与限制。例如使用下面这个 prompt，就能得到一张更具质感的图片：

"A hyper-realistic close-up of a fresh red apple with water droplets on its skin, sitting on a dark rustic wooden table. Cinematic dramatic lighting, rim light, shallow depth of field, bokeh background, 8k resolution, macro photography." （一颗新鲜红苹果的超写实特写，表皮带水珠，置于暗色做旧木桌上。电影级戏剧化布光、轮廓光、浅景深、背景虚化、8k 分辨率、微距摄影。）

生成后在 Output Image 区域点击下载，即可将图片保存到本地。

1.3 图像生成模型的常见资产生产场景

在实际工作中，大模型图像生成更多被用于高效产出设计资产，而不是创作单张艺术品。观察设计类营销账号的爆款案例，其产出主要集中于两类场景：

• 文生图（从 0 到 1）
• 参考图生成（从 1 到 N）

场景一：文生图——快速获取设计素材

这类场景讲究效率。当你需要填补设计中的空白（如空状态、头像、插画）时，AI 本质上是一个即时生成的图片素材库。

① UI 设计资产生成

• 趋势：Dribbble 上常见的玻璃拟态（glassmorphism）或黏土（clay）风格 3D 图标；
• 常见表现：透明材质、发光边缘、糖果色的功能或天气图标。

示例 Prompt：

A set of 3D weather icons (sun, cloud, rain), glassmorphism style, frosted glass texture, soft pastel gradient colors, soft studio lighting, isometric view, transparent background, 4k.

② Logo 生成

• 趋势：极简线条 + 几何组合的科技感 Logo；
• 常见表现：黑白配色、负空间设计、清晰的品牌感。

示例 Prompt：

Minimalist vector logo design for a tech brand "Coffee Code", combining a coffee cup with coding brackets < >, flat design, solid black lines, white background, Paul Rand style, svg.

③ 网站用户头像生成

• 趋势：SaaS 网站常见的 3D 虚拟头像，规避真人肖像权问题；
• 常见表现：友善表情、卡通比例、Pixar 或 Memoji 风格。

示例 Prompt：

Close-up portrait of a friendly young tech professional, smiling, Memoji 3D style, clay render, bright colors, soft lighting, solid plain background, Pixar character design.

④ 文章配图插画生成

• 趋势：科技公司博客常见的抽象扁平插画；
• 常见表现：紫蓝配色、夸张的人物比例、漂浮的 UI 元素。

示例 Prompt：

Editorial flat illustration representing remote work, a person sitting on a giant globe using a laptop, corporate memphis art style, vibrant colors (purple and teal), vector texture.

场景二：参考图生成——保持视觉一致性

这类场景更看重可扩展性。适用于已有一张满意的主视觉，需要生成整套风格一致的资产。

⑤ 与主视觉一致的按钮组或交互资产

在游戏开发中，UI 一致性至关重要。假设你已有主界面的"PLAY"按钮，现在需要扩展一整套风格统一的按钮（如暂停、设置、主页）。纯手绘很难保证每个按钮在亮度、透视、色彩数值上完全一致。

基本操作流程：

1. 保存已有的蓝色 "PLAY" 按钮图片；
2. 将它拖入界面的Input Image区域，作为后续生成的主参考图；
3. 保持 prompt 中的风格描述不变，只修改主体内容。

这样，只需替换主体描述，就能获得功能不同但风格一致的按钮。

示例 Prompt（变体 A：暂停按钮，图标型）：

A capsule-shaped game UI button with a white pause icon (two vertical bars) inside. Same glossy blue jelly style, shiny plastic texture, white thick outline, vector illustration, high quality.

示例 Prompt（变体 B：设置按钮，复杂图标）：

A capsule-shaped game UI button with a white gear icon (settings symbol) inside. Same glossy blue jelly style, shiny plastic texture, white thick outline, vector illustration, high quality.

示例 Prompt（变体 C：重播按钮，形状变化）：

如果需要调整按钮外形，可以直接在 prompt 中描述形状，模型会在保持材质特征的同时尝试改变结构：

A round game UI button with a white circular arrow icon (replay symbol) inside. Same glossy blue jelly style, shiny plastic texture, white thick outline, vector illustration, high quality.

通过这一套操作，你不仅能替换按钮的功能与图标，甚至能改变按钮形状，所有生成结果依然在材质、色彩、光线上保持高度一致。这正是大模型在设计资产衍生场景中的核心价值。

第 2 章：一个更"听话"的图像生成助手——以 Lovart 为例

第 1 章中，我们通过代码直接调用 NanoBanana，体验了"输入即生成"的基础流程。需求简单时这种方式没有问题；但当生成任务开始包含更多约束时，例如：

• 需要生成多张风格一致的图片；
• 需要在已有结果上做迭代调整；
• 需要根据用户输入动态调整生成方向；

单次调用方式就会逐渐力不从心。

这时就需要引入AI Agent（智能体）。本章以Lovart为例，展示图像生成模型拥有"思考层"后，整个工作流会发生怎样的变化。注意：这不是广告，只是为了帮助大家快速体会 AI Agent 的便捷之处。

2.1 初识 Lovart：你的 AI 设计代理

Lovart 是一款基于 Agent 的网页设计工具。相比普通图像生成工具，它在生成之前多了一层"思考与规划"。

进入 Lovart 后，主要需要认识以下控件：

模型选择

点击输入框下方的立方体图标，可以查看可用的生成模型（如 GPT Image、Flux 等）。为了与前面的示例保持一致，本章继续使用 NanoBanana 作为底层生成模型。

思考模式（核心开关）

• Fast Mode（⚡）：类似原生 API，响应快，适合指令明确的单张图片生成；
• Thinking Mode（💡）：Agent 模式，AI 先拆解需求、重写 prompt，再执行生成。

联网能力

开启地球图标后，Agent 可以在生成过程中联网检索信息（如设计趋势、配色方案）作为辅助输入。

2.2 为什么原生 API 不够用？

虽然通过 Python 已经能生成质量不错的图片，但原生 API 在复杂任务上仍有局限。关键原因在于：原生 API 本质上是命令式的。你让它生成某个具体对象，它能直接执行；但当输入变成"规划一整组游戏资产"时，它不会主动把目标拆解成多个可执行的步骤。

Lovart 的核心差异在于 Agent 机制：在用户输入与图像生成模型之间，它加入了一层"理解与规划"的逻辑——先识别用户意图，再拆解任务、重写 prompt，最后执行生成。

2.3 实战演示：5 分钟创建一套 IP 贴纸

以"创建一套程序员鸭子 IP 贴纸"为例，看看 Agent 如何参与全流程。

阶段 1：规划（Agent 的思考能力）

原生 API 的问题：你需要自己构思角色设定、情绪状态，并为每张图单独编写 prompt。

Lovart 的做法：

1. 开启 💡Thinking Mode；
2. 输入一条指令：

设计一套程序员鸭子 IP 贴纸，扁平 kawaii 风格

AI 不会立刻开画，而是先联网检索程序员鸭子相关的设计参考，生成拆解后的方案，自动创建 Debug、Coffee Break、Panic 等场景，并生成对应的多组视觉描述。这一步里，AI 从"执行者"变成了"规划者"。分析完需求后，Lovart 画布区域会展示多张不同风格、不同内容的程序员鸭子，你可以从中筛选喜欢的风格。

阶段 2：一致性（基于参考的视觉锚定）

在 Lovart 中，图片不只是结果，还会参与后续生成。

整图参考

• 从草图中选出最满意的"标准鸭子"，点击画布区域对应图片；
• 图片会自动出现在聊天区域作为 Reference；
• 输入一个新动作（如 happy）并生成。

生成结果会继承主图的配色、比例与细节。

局部参考 / 多图拼接

除整图参考外，Lovart 还支持：

• 只选取图片的局部区域（例如只参考帽子或表情）：点击画布区域左侧的选项卡栏，选择 "Mark" 键，框选目标图片的局部区域，该部分内容会自动同步到对话框。例如可以只修改背景颜色——新生成的图片只改变了背景色，与输入需求完全一致；
• 分别引用多张图片的子元素，再组合生成新结果：例如保留 A 图的人物主体，只把 B 图的帽子风格替换过来，Agent 会在后台自动整合这些视觉约束。以程序员鸭子为例，可以保留第一张图的鸭子形象，将第二张图作为主体元素替换进去，最终效果非常显著。

阶段 3：交付（Agent 的工具调用）

生成完成后，可以直接执行放大、去背景、擦除等操作。这些不是简单滤镜，而是 Agent 自动调度不同工具完成的结果。确认基础风格后，就能快速产出一系列贴纸图。最终得到的是可直接交付的生产级资产，而不只是一张演示图片。

2.4 使用说明与收费

Lovart 采用订阅制，不同套餐对应不同的使用额度与功能权限，具体以官网公布为准。本教程不推荐、不比较任何套餐，实际使用中请根据个人情况选择付费升级。目前支持通过支付宝等方式付款。

小结

Lovart 没有取代底层模型，而是通过 Agent 机制，把图像生成从"单次执行"升级为"持续工作流"。当任务开始涉及规划、一致性与交付时，这类工具的优势会非常明显。

第 3 章：构建你自己的智能图像生成助手

除了直接使用 Lovart，我们也可以自己实现一个简化版图像生成助手。本章以"文章自动配图"为例，从真实问题出发，逐步搭建一个具备思考能力的 Agent。

3.1 问题引入：为什么把整篇文章直接丢给图像模型不行？

如果把一篇长文直接发给 NanoBanana 并让它配图，通常很难得到满意结果。原因不是模型"不会画"，而是它不擅长理解长文本。

图像生成模型更擅长处理简短清晰的视觉描述。当输入变成一篇有结构、有要点、有上下文关系的文章时，模型无法判断哪个内容才是真正需要被画面表达的，常常导致输出偏离主题，或只捕捉到零散细节，缺乏整体概括能力。本质上，图像模型只有"执行"能力，缺少对文本的分析与筛选过程。

3.2 解决方案：用 Agent 把"理解"与"执行"分离

解决这个问题的关键不是更复杂的 prompt，而是在生成图片之前先把思路想清楚。因此，我们在生成流程中引入一个独立的"思考层"，用它构建最简洁实用的 Agent。

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

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

那么，我们的 Agent 如何理解用户意图？这里选择做一个简化的"思考层"，配置了三种不同意图：无效输入、直接生成图片、需要理解的长文本。

在这个 Agent 中，角色分工可以归纳为四点：

1. 语言模型作为决策核心：负责理解文章内容、判断用户输入意图，把任务分发到合适的生成路径，决定"下一步做什么"以及如何生成图像 prompt；
2. 图像模型作为执行者：图像模型不参与理解与判断，只接收整理好的视觉指令，专注完成图像渲染；
3. 用户作为可干预的引导者：除了直接输入文本，用户还可以在过程中手动调整生成的 prompt，或添加参考图辅助生成，引导并打磨最终结果；
4. Gradio 与 API 后端作为综合支撑层：负责连接界面、模型调用与结果展示，保证整个 Agent 作为一个完整的 Web 应用稳定运转。

3.3 动手准备：获取 API

运行上述流程，只需准备两类 API。

手：NanoBanana API（图像生成）——直接复用第 1 章已配置好的 API Key 与 API URL，无需额外配置。

脑：SiliconFlow API（文本思考）——需要一个大型语言模型承担"思考层"角色，本教程使用 SiliconFlow 提供的模型服务。SiliconFlow 提供兼容 OpenAI API 规范的接口，可在项目中通过标准网络请求方便地调用。这里选用免费的 Qwen2.5-7B-Instruct 模型。调用所需的一切都已写进后面的 Prompt 中，开始前只需在官网注册账号并创建 API Key 即可。

3.4 Agent 搭建实战

本实验主要使用 Trae 编写代码，教程选用的模型是 Gemini-3-Pro-Preview。整体思路是：新建项目，把下面完整的 Prompt 复制到对话框中，逐步替换 API KEY，运行代码并完成测试。

阶段 1️⃣：Gradio Blocks 基础框架与界面设计

这一阶段的目标是先搭出整个 Agent 的"外观"，实现前端页面设计。把下面的 Prompt 复制到 Trae 对话框中实现后，会得到一个本地 URL（通常是http://127.0.0.1:7860），用于查看界面并验证实现效果。

模块 1：Gradio Blocks 基础框架与界面设计 1、任务目标 - 基于 Gradio 4.0.0+ 的 Blocks 布局，实现项目"LLM+Nanobanana 文生图"的基础界面，严格按照左 60% 右 40% 的固定左右分栏布局，初始化所有 UI 组件并设置正确的初始状态。 2、技术栈要求 - 必须使用 Gradio 4.0.0+ 的 Blocks 模式开发，禁止使用 Interface 模式； - 依赖：gradio>=4.0.0, pillow>=10.0.0（仅导入，暂不实现图像处理逻辑）； - 代码必须是完整可执行的 Python 文件，包含所有必要的 import 声明。 3、界面布局规则（核心约束，融合实战细节） - 整体布局： 页面标题：LLM 驱动的完整文生图工具； 固定左右分栏：左侧占 60% 宽度，右侧占 40% 宽度，使用 gr.Row 与 gr.Column 实现比例控制。 - 左侧 60% 组件清单（prompt 生成流程区）： input_text: gr.Textbox，标签"输入文本（教程段落/绘画指令）"，lines=6，placeholder "输入需要配图的教程文本或直接绘画指令..."； identify_intent_btn: gr.Button，value="识别意图"，初始状态可正常点击； intent_status: gr.Textbox，标签"意图类型/处理状态"，lines=2，interactive=False，初始值"尚未识别意图"； system_prompt: gr.Textbox，标签"System Prompt（仅文章配图意图可编辑）"，lines=4，interactive=False，placeholder "LLM 生成 prompt 的约束规则..."； confirm_prompt_btn: gr.Button，value="确认生成图像 prompt"，interactive=False（初始禁用，防止误操作）； generation_prompt: gr.Textbox，标签"生成用 prompt（可编辑）"，lines=3，interactive=True，初始为空，placeholder "生成的英文图像 prompt 将显示在这里，支持手动修改..."。 - 右侧 40% 组件清单（Nanobanana 图像生成功能区）： ref_image: gr.Image，标签"参考图片（可选，图生图）"，type=filepath，height=300，允许上传； generate_btn: gr.Button，value="生成图片"，interactive=False（初始禁用，无 prompt 不可点击）； result_image: gr.Image，标签"生成结果"，type=pil，height=300，初始为空，interactive=False。 4、交互逻辑要求 - 所有组件的初始 interactive 状态必须严格遵循上述配置，后续通过函数动态更新； - 按钮禁用状态要直观（置灰），避免用户误操作。 5、输出要求 - 生成完整 Python 代码，只实现界面布局与组件初始化，不包含业务逻辑； - 代码注释清晰，组件命名与实战版本一致（input_text/identify_intent_btn 等）； - 代码可直接运行，界面结构与描述完全一致。

在浏览器中打开http://127.0.0.1:7860后，可以看到 Trae 按需求生成了页面，与要求基本一致，即可进入下一步生成。

阶段 2️⃣：LLM 意图识别模块（Siliconflow API）

日常用 VLM 画图时，可能遇到以下三种常见输入情况：

1. 无意义内容：如"你好""今天吃饭了吗"，画不出对应图片；
2. 长文章/长文本：字数较多，如一篇约 200 字的结构化文章，需要先理解文章结构与内容，再考虑如何生成一张能完整概括全文的图；
3. 直接绘画指令：如"给我画一只洗澡的狗"，需求描述已足够具体，可直接生成图片。

与之前一样，把下面的 Prompt 复制到 Trae 对话框中实现，并填入上一步获取的 API。

模块 2：LLM 意图识别模块（Siliconflow API） 1、任务目标 在已实现的 Gradio 界面基础上，为"识别意图"按钮添加点击逻辑，调用 Siliconflow API 完成意图识别，并联动组件状态。 2、技术栈要求 基于 Gradio 4.0.0+ Blocks； 依赖：requests>=2.31.0, openai； 输出完整可执行的 Python 文件，包含模块 1 界面 + 本模块逻辑。 3、核心业务规则（绝对不允许偏离） - 意图分类规则（仅 3 类，严格返回 数字 + 描述） 1 = 无意义内容：纯闲聊、打招呼、无关对话，没有任何绘画/配图需求（例："你好"、"吃饭了吗"）； 2 = 文章/长文本配图需求：用户输入整篇文章、教程、段落或描述性文本，内容偏叙述/说明/教学，隐含为这些内容配图意图，无需用户明说"给这段文字配图"； 3 = 直接绘画指令：用户输入简短清晰的绘画命令，无长文本背景，直接要求画出某个具体事物（例："画一只 Apple 风格的猫"）。 - LLM 调用约束（融合实战版本模板） 接口地址：https://api.siliconflow.cn/v1/chat/completions； 模型：Qwen/Qwen2.5-7B-Instruct； temperature=0.1； 统一代码定义： python 执行 LLM_BASE_URL = "https://api.siliconflow.cn/v1" LLM_API_KEY = "" # 用户需替换 LLM_MODEL = "Qwen/Qwen2.5-7B-Instruct"# 实战验证过的意图识别模板（固定写入代码） INTENT_PROMPT_TEMPLATE = """请识别用户输入文本的意图，只返回下面 3 个结果之一（格式：数字 + 中文描述）： 1 = 无意义内容；2 = 文章/长文本配图需求；3 = 直接绘画指令。 用户输入：{user_input} 识别结果： 只提取返回结果的数字和描述，禁止额外内容。"""

刷新上面的http://127.0.0.1:7860地址，开始测试能否正确识别三种情况：

1. 无意义内容：可以尝试输入"你好""谢谢"，观察是否被正确识别；
2. 长文章/长文本：这里使用一段关于人工智能的文本（可换成你自己的论文段落）。长文本同样能被成功识别为"文章配图需求"；
3. 直接绘画指令：输入"我想画一只猫"，同样能被精准识别。

到这里，第二阶段——意图识别——就成功实现了。

阶段 3️⃣：图像 prompt 生成模块（第二次 LLM 调用）

意图识别完成后，对于文章/长文本，有一个非常关键的步骤：生成绘画用的 prompt，这正是本 Agent 的重点所在。

模块 3：图像 prompt 生成模块（第二次 LLM 调用） 1、任务目标 在意图识别的基础上，实现"确认生成图像 prompt"按钮的逻辑，调用 LLM 把文本优化成适合绘画的英文视觉 prompt，填入编辑区，并与"生成图片"按钮联动。 2、技术栈要求 与模块 2 相同，输出完整代码 = 模块 1 + 模块 2 + 本模块； 复用模块 2 中定义的 LLM_BASE_URL、LLM_API_KEY、LLM_MODEL，不新增密钥。 3、核心业务规则（融合实战版本 prompt 组装逻辑） - prompt 生成输入规则（严格遵守） 图像 prompt 的生成不再是简单的字符串拼接，而是构造标准 Chat 消息列表。代码结构如下： python 执行 messages=[# System 角色：网页上用户最终确认/编辑的 system_prompt 内容{"role": "system", "content": final_system_prompt},# User 角色：承载待处理数据，明确任务目标{"role": "user", "content": f"为以下内容生成视觉 prompt：\n\n{user_input}"}] 当意图为 2 时：System 内容取用户编辑后的最终版 system_prompt； 当意图为 3 时：System 内容取禁用状态下填充的默认规则 user_input 是用户最初在 input_text 字段输入的原始文本。 - 实战验证过的 System Prompt 预设（固定写入代码） python 执行 SYSTEM_PROMPT_DEFAULT = """现在你是 NanoBanana 的绘画 prompt 创作助手。 你需要根据我的内容进行处理。这张图片的目的是能够讲解这段文字所说的内容，让所有人理解这段文字的前后文结构，也就是它在整体上说了什么。 可以有类似 PPT 的讲解（例：左上角展示关键点，右下角展示数据）。 设计风格要求：极简，Apple 设计哲学（Apple Design Philosophy）。 约束：直接返回 NanoBanana 可用的英文 prompts，不要返回任何解释、前缀或不必要的文字。""" - LLM 调用约束 复用模块 2 的同一组 LLM_BASE_URL、LLM_API_KEY、LLM_MODEL； temperature=0.7（保证 prompt 的创造性与适配度）； max_tokens=200（限制输出长度，与 prompt 约束匹配）； 严格使用上述标准 Chat 消息列表结构，禁止字符串拼接。 - 输入输出示例（核心参考） 输入示例 1（文章配图意图）：原始文本："AI 如何改变教育：随着人工智能技术的发展，教师的角色从知识传授者转变为引导者，AI 助手可以辅助学生个性化学习，课堂中的人机协作成为常态。"最终 System Prompt：SYSTEM_PROMPT_DEFAULT（未修改）预期输出："Minimalist illustration, Apple Design Philosophy, 1024x1024. Top left shows 'AI + Education' core concept, bottom right shows data of teacher-student-AI collaboration, soft color palette, clean lines, no redundant elements." 输入示例 2（直接绘画指令）：原始文本："画一只 Apple 风格的猫，坐在 MacBook 旁边"最终 System Prompt：SYSTEM_PROMPT_DEFAULT（禁用状态）预期输出："Minimalist cat, Apple style, 1024x1024, sitting next to a silver MacBook, clean white background, soft shadows, geometric shapes, no extra details." - prompt 输出强制约束 纯英文，不要中文； 必须包含 Apple Design Philosophy/Apple style + 1024x1024； 长度 50-200 字符，代码中校验； 不要额外解释、前缀或不必要文字，只返回 prompt 本身。 4、组件联动规则 生成成功：将 prompt 填入 generation_prompt 字段，激活 generate_btn，在 intent_status 追加"Prompt 生成成功，可修改后生成图片"； 生成失败：给出具体原因（如 API 调用失败、长度不足），generate_btn 保持禁用，generation_prompt 字段清空； 用户手动修改/清空 generation_prompt 字段： 清空时，自动禁用 generate_btn； 非空时，保持 generate_btn 激活。 5、异常处理 API 调用失败：友好提示"prompt 生成失败：{具体错误信息}"，不崩溃； prompt 校验失败：明确指出原因（如"未包含 Apple style"、"长度只有 40 字符"），允许重试； 响应解析失败：提示"无法解析 LLM 返回结果，请重试"。 6、输出要求 完整可执行代码，仅替换 LLM_API_KEY 即可使用； 代码结构清晰，注释完整，界面美观简洁； 严格实现标准 Chat 消息列表结构，参数与示例逻辑一致； 包含 prompt 长度与内容校验逻辑，友好的错误提示。

同样复制第二模块的文本进行验证。

需要说明的是，这里为图像 prompt 生成预设的 System Prompt 是：

现在你是 NanoBanana 的绘画 prompt 创作助手。 你需要根据我的内容进行处理。这张图片的目的是能够讲解这段文字所说的内容，让所有人理解这段文字的前后文结构，也就是它在整体上说了什么。 可以有类似 PPT 的讲解（例：左上角展示关键点，右下角展示数据）。 设计风格要求：极简，Apple 设计哲学（Apple Design Philosophy）。 约束：直接返回 NanoBanana 可用的英文 prompts，不要返回任何解释、前缀或不必要的文字。

如果想换一套预设模板，可以在上面的 prompt 里修改，或直接在 Trae 中通过对话修改。

除了修改基础代码，还可以在网页上快速编辑。例如在 System Prompt 末尾加一句"开头加 Pic Prompt"，新生成的 prompt 也会在开头带上这句话。这个设计是为了方便快速修改生成用 System Prompt，帮我们快速切换风格。

阶段 4️⃣：Nanobanana 文生图/图生图模块

终于到了最后一步。不接入图像生成模型，就不算完整的 Agent！

模块 4：Nanobanana 文生图/图生图模块（最终版） 1、任务目标 实现"生成图片"按钮的逻辑，调用 Nanobanana 真实 API，支持文生图/图生图，解析 Base64 并展示图片。 2、技术栈要求 基于 Gradio 4.0.0+ Blocks； 依赖：requests, pillow, base64, io, re； 完整代码 = 模块 1+2+3 + 本模块。 3、API 核心配置（固定且实战验证） 代码中固定配置： python 执行 # 代码中固定写入的 API 配置 NANOBANANA_API_URL = "https://api.zyai.online/v1/chat/completions" NANOBANANA_MODEL = "gemini-2.5-flash-image" NANOBANANA_API_KEY = "" # 用户需替换 认证方式：Header Authorization: Bearer {NANOBANANA_API_KEY}。 4、图像预处理要求（必须实现） 实现函数 image_to_base64_data_uri (ref_image_path)，核心逻辑： 将 PIL 图像转换为 PNG 格式； 自动缩放至 1024x1024 分辨率； 将透明通道转换为白色背景； 编码为 Base64，返回格式：data:image/png;base64,... 5、请求构造规则（严格遵守实战版本分支逻辑） - 核心函数定义 实现函数 generate_image (prompt, ref_image_path)： 输入参数：prompt（generation_prompt 字段内容），ref_image_path（ref_image 上传的文件路径）； 返回：PIL Image（显示到 result_image）或错误信息。 - 分支逻辑 1：纯文生图（ref_image_path 为空） python 执行 messages = [{"role": "user", "content": prompt}] - 分支逻辑 2：图生图（ref_image_path 有值） python 执行 # 先调用图像预处理函数 image_base64 = image_to_base64_data_uri(ref_image_path) messages = [{"role": "user","content": [{"type": "text", "text": prompt},{"type": "image_url", "image_url": {"url": image_base64}}]}] 6、响应解析要求（必须兼容两种格式） 从 choices [0].message.content 中提取图像 Base64，兼容： 结构化 JSON 返回的 image_url 字段； Markdown 格式； 统一提取 Base64 编码，解码并转换为 PIL Image 返回。 7、组件联动与异常处理 生成成功：在 result_image 展示 PIL Image，并在 intent_status 提示"图片生成成功"； 生成/解析/上传失败：在 intent_status 给出清晰的文本提示（如"Base64 解析失败"、"API 调用超时"），不崩溃。 8、输出要求 完整可执行代码，仅替换 LLM_API_KEY 与 NANOBANANA_API_KEY 即可直接运行，全流程功能可用，分支逻辑与实战版本严格一致。

到这里，终于成功生成了这个 Agent 的第一张图片。仔细看生成的图片，与我们的文本和 prompt 高度吻合——至此，你已经基本实现了属于自己的 Agent！

此外还加入了图生图功能：上传喜欢的图片，AI 会自动参考其风格。值得一提的是，前面步骤生成的 prompt 在网页上也是可编辑的，最终点击按钮时以当时的 prompt 为准——即使在这里改成 "a cute cat"，最终生成的图片也会是一只可爱的小猫。

第 4 章：总结

终于完成了！从第 1 章的"1 分钟生成第一张图"，到第 3 章"搭建自己的图像生成 Agent"，把整个流程从头到尾跑通本身就是一件了不起的事，说明你真的动手敲了键盘、一步步完成了。🎉

回看这条路径，其实并不复杂：想清楚要解决的问题 → 把长文本交给语言模型拆解 → 把整理好的视觉意图交给图像生成模型渲染 → 最后把整个流程封装进你自己的个人助手。走到这一步，你不再只是"使用模型"，而是在构建一个能长期陪伴你工作的系统。

这门课程真正想留下的，不是模型的名字、参数或某种固定套路，而是帮助你逐步建立一种"分工感"：哪些事可以放心交给 AI 去理解和规划，哪些地方只需要你决定方向。一旦这种分工建立起来，很多原本看起来复杂的生成流程都会开始变得顺畅——这恰恰也是 easy-vibe 课程 stage-2 前端模块所强调的 Vibe Coding 能力：把资产生产真正接入产品流程，用 AI 重塑设计资产的生产效率。

如果你想把资产生成真正接入产品流程，可以继续学习 easy-vibe 项目 stage-2 前端模块中的其他章节（见 docs/es-es/stage-2/frontend），以及 stage-2 课程索引。

【免费下载链接】easy-vibe💻 vibe coding 101｜The first course for AI-native product builders.项目地址: https://gitcode.com/GitHub_Trending/ea/easy-vibe