从 NanoBanana 到自建 AI Agenteasy-vibe 课程手把手带你搭建资产生产流水线【免费下载链接】easy-vibe vibe coding 101The first course for AI-native product builders.项目地址: https://gitcode.com/GitHub_Trending/ea/easy-vibe本篇技术指南源自 easy-vibe 项目 stage-2 前端模块中的 lovart-assets 实战文档另可对照阅读 中文原版。它以 NanoBananaGemini 图像生成模型为起点用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 级别的生成正式开始前只需要完成三个步骤在 Trae 中新建一个文件夹新建一个 Python 文件复制粘贴下面这段完整代码。Trae 会自动完成环境部署与依赖安装无需额外配置。代码需要 NanoBanana 的 API Key——这里不展开申请流程只要能拿到并填入对应参数即可。这一阶段的目标不是读懂每一行代码而是让它成功跑起来。# /// script # dependencies [ # gradio4.0.0, # pillow10.0.0, # requests2.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_okTrue) def image_to_base64_data_uri(image: Image.Image) - str: 将 PIL 图像转换为兼容 OpenAI API 的 data URI 格式。 buffer io.BytesIO() # 统一转换为 PNG 以保证兼容性 image.save(buffer, formatPNG) encoded base64.b64encode(buffer.getvalue()).decode(utf-8) return fdata: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(fBase64 解码错误: {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: fBearer {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, headersheaders, jsonpayload, timeout120) # 检查 HTTP 状态 if response.status_code ! 200: error_msg fAPI 请求错误: {response.status_code} - {response.text} print(error_msg) gr.Error(error_msg) return None result response.json() # Debug: 打印部分响应便于排查 print(fAPI 原始响应(截断): {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(titleNanobanana 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( labelPrompt (提示词), placeholder示例: A cyberpunk cat holding a neon sign..., lines3 ) image_input gr.Image( label参考图片可选用于图生图, typepil, height300 ) submit_btn gr.Button(开始生成, variantprimary) with gr.Column(): image_output gr.Image(label生成结果, formatpng) submit_btn.click( fnsynthesize, inputs[prompt_input, image_input], outputsimage_output ) if __name__ __main__: app.launch(shareTrue)当 Trae 提示运行成功后点击它给出的本地链接通常是http://127.0.0.1:7860。如果一切正常你会看到一个已经可用的 AI 图像生成界面。这个界面看起来简单却已经具备商业级图像生成工具最核心的两项能力文生图与图生图。左侧指令区Input Zone——你在这里下达指令。Prompt提示词输入框输入你的创意描述建议使用英文Input Image参考图片框文生图模式保持该框为空图生图模式拖入一张本地图片AI 将基于它进行创作Submit 按钮点击发送指令开始生成。右侧结果区Output Zone——魔法发生的地方生成的图片会显示在这里。1.2 第一次真实生成现在可以尝试生成你的第一张图片了。本示例使用的 prompt 是A red apple这是一个刻意简化的示例没有任何风格描述或参数。真实流程代码运行后整体流程可归纳为三步将文本描述发送给模型模型生成对应图片图片保存为本地文件。几秒钟后就能看到本地生成的结果。模型生成具有随机性同一个 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 图标常见表现透明材质、发光边缘、糖果色的功能或天气图标。示例 PromptA 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常见表现黑白配色、负空间设计、清晰的品牌感。示例 PromptMinimalist 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 风格。示例 PromptClose-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 元素。示例 PromptEditorial 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按钮现在需要扩展一整套风格统一的按钮如暂停、设置、主页。纯手绘很难保证每个按钮在亮度、透视、色彩数值上完全一致。基本操作流程保存已有的蓝色 PLAY 按钮图片将它拖入界面的Input Image区域作为后续生成的主参考图保持 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 ModeAgent 模式AI 先拆解需求、重写 prompt再执行生成。联网能力开启地球图标后Agent 可以在生成过程中联网检索信息如设计趋势、配色方案作为辅助输入。2.2 为什么原生 API 不够用虽然通过 Python 已经能生成质量不错的图片但原生 API 在复杂任务上仍有局限。关键原因在于原生 API 本质上是命令式的。你让它生成某个具体对象它能直接执行但当输入变成规划一整组游戏资产时它不会主动把目标拆解成多个可执行的步骤。Lovart 的核心差异在于 Agent 机制在用户输入与图像生成模型之间它加入了一层理解与规划的逻辑——先识别用户意图再拆解任务、重写 prompt最后执行生成。2.3 实战演示5 分钟创建一套 IP 贴纸以创建一套程序员鸭子 IP 贴纸为例看看 Agent 如何参与全流程。阶段 1规划Agent 的思考能力原生 API 的问题你需要自己构思角色设定、情绪状态并为每张图单独编写 prompt。Lovart 的做法开启 Thinking Mode输入一条指令设计一套程序员鸭子 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 中角色分工可以归纳为四点语言模型作为决策核心负责理解文章内容、判断用户输入意图把任务分发到合适的生成路径决定下一步做什么以及如何生成图像 prompt图像模型作为执行者图像模型不参与理解与判断只接收整理好的视觉指令专注完成图像渲染用户作为可干预的引导者除了直接输入文本用户还可以在过程中手动调整生成的 prompt或添加参考图辅助生成引导并打磨最终结果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用于查看界面并验证实现效果。模块 1Gradio Blocks 基础框架与界面设计 1、任务目标 - 基于 Gradio 4.0.0 的 Blocks 布局实现项目LLMNanobanana 文生图的基础界面严格按照左 60% 右 40% 的固定左右分栏布局初始化所有 UI 组件并设置正确的初始状态。 2、技术栈要求 - 必须使用 Gradio 4.0.0 的 Blocks 模式开发禁止使用 Interface 模式 - 依赖gradio4.0.0, pillow10.0.0仅导入暂不实现图像处理逻辑 - 代码必须是完整可执行的 Python 文件包含所有必要的 import 声明。 3、界面布局规则核心约束融合实战细节 - 整体布局 页面标题LLM 驱动的完整文生图工具 固定左右分栏左侧占 60% 宽度右侧占 40% 宽度使用 gr.Row 与 gr.Column 实现比例控制。 - 左侧 60% 组件清单prompt 生成流程区 input_text: gr.Textbox标签输入文本教程段落/绘画指令lines6placeholder 输入需要配图的教程文本或直接绘画指令... identify_intent_btn: gr.Buttonvalue识别意图初始状态可正常点击 intent_status: gr.Textbox标签意图类型/处理状态lines2interactiveFalse初始值尚未识别意图 system_prompt: gr.Textbox标签System Prompt仅文章配图意图可编辑lines4interactiveFalseplaceholder LLM 生成 prompt 的约束规则... confirm_prompt_btn: gr.Buttonvalue确认生成图像 promptinteractiveFalse初始禁用防止误操作 generation_prompt: gr.Textbox标签生成用 prompt可编辑lines3interactiveTrue初始为空placeholder 生成的英文图像 prompt 将显示在这里支持手动修改...。 - 右侧 40% 组件清单Nanobanana 图像生成功能区 ref_image: gr.Image标签参考图片可选图生图typefilepathheight300允许上传 generate_btn: gr.Buttonvalue生成图片interactiveFalse初始禁用无 prompt 不可点击 result_image: gr.Image标签生成结果typepilheight300初始为空interactiveFalse。 4、交互逻辑要求 - 所有组件的初始 interactive 状态必须严格遵循上述配置后续通过函数动态更新 - 按钮禁用状态要直观置灰避免用户误操作。 5、输出要求 - 生成完整 Python 代码只实现界面布局与组件初始化不包含业务逻辑 - 代码注释清晰组件命名与实战版本一致input_text/identify_intent_btn 等 - 代码可直接运行界面结构与描述完全一致。在浏览器中打开http://127.0.0.1:7860后可以看到 Trae 按需求生成了页面与要求基本一致即可进入下一步生成。阶段 2️⃣LLM 意图识别模块Siliconflow API日常用 VLM 画图时可能遇到以下三种常见输入情况无意义内容如你好今天吃饭了吗画不出对应图片长文章/长文本字数较多如一篇约 200 字的结构化文章需要先理解文章结构与内容再考虑如何生成一张能完整概括全文的图直接绘画指令如给我画一只洗澡的狗需求描述已足够具体可直接生成图片。与之前一样把下面的 Prompt 复制到 Trae 对话框中实现并填入上一步获取的 API。模块 2LLM 意图识别模块Siliconflow API 1、任务目标 在已实现的 Gradio 界面基础上为识别意图按钮添加点击逻辑调用 Siliconflow API 完成意图识别并联动组件状态。 2、技术栈要求 基于 Gradio 4.0.0 Blocks 依赖requests2.31.0, openai 输出完整可执行的 Python 文件包含模块 1 界面 本模块逻辑。 3、核心业务规则绝对不允许偏离 - 意图分类规则仅 3 类严格返回 数字 描述 1 无意义内容纯闲聊、打招呼、无关对话没有任何绘画/配图需求例你好、吃饭了吗 2 文章/长文本配图需求用户输入整篇文章、教程、段落或描述性文本内容偏叙述/说明/教学隐含为这些内容配图意图无需用户明说给这段文字配图 3 直接绘画指令用户输入简短清晰的绘画命令无长文本背景直接要求画出某个具体事物例画一只 Apple 风格的猫。 - LLM 调用约束融合实战版本模板 接口地址https://api.siliconflow.cn/v1/chat/completions 模型Qwen/Qwen2.5-7B-Instruct temperature0.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地址开始测试能否正确识别三种情况无意义内容可以尝试输入你好谢谢观察是否被正确识别长文章/长文本这里使用一段关于人工智能的文本可换成你自己的论文段落。长文本同样能被成功识别为文章配图需求直接绘画指令输入我想画一只猫同样能被精准识别。到这里第二阶段——意图识别——就成功实现了。阶段 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 temperature0.7保证 prompt 的创造性与适配度 max_tokens200限制输出长度与 prompt 约束匹配 严格使用上述标准 Chat 消息列表结构禁止字符串拼接。 - 输入输出示例核心参考 输入示例 1文章配图意图原始文本AI 如何改变教育随着人工智能技术的发展教师的角色从知识传授者转变为引导者AI 助手可以辅助学生个性化学习课堂中的人机协作成为常态。最终 System PromptSYSTEM_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 PromptSYSTEM_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模块 4Nanobanana 文生图/图生图模块最终版 1、任务目标 实现生成图片按钮的逻辑调用 Nanobanana 真实 API支持文生图/图生图解析 Base64 并展示图片。 2、技术栈要求 基于 Gradio 4.0.0 Blocks 依赖requests, pillow, base64, io, re 完整代码 模块 123 本模块。 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) 输入参数promptgeneration_prompt 字段内容ref_image_pathref_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 101The first course for AI-native product builders.项目地址: https://gitcode.com/GitHub_Trending/ea/easy-vibe创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
从 NanoBanana 到自建 AI Agent：easy-vibe 课程手把手带你搭建资产生产流水线
从 NanoBanana 到自建 AI Agenteasy-vibe 课程手把手带你搭建资产生产流水线【免费下载链接】easy-vibe vibe coding 101The first course for AI-native product builders.项目地址: https://gitcode.com/GitHub_Trending/ea/easy-vibe本篇技术指南源自 easy-vibe 项目 stage-2 前端模块中的 lovart-assets 实战文档另可对照阅读 中文原版。它以 NanoBananaGemini 图像生成模型为起点用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 级别的生成正式开始前只需要完成三个步骤在 Trae 中新建一个文件夹新建一个 Python 文件复制粘贴下面这段完整代码。Trae 会自动完成环境部署与依赖安装无需额外配置。代码需要 NanoBanana 的 API Key——这里不展开申请流程只要能拿到并填入对应参数即可。这一阶段的目标不是读懂每一行代码而是让它成功跑起来。# /// script # dependencies [ # gradio4.0.0, # pillow10.0.0, # requests2.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_okTrue) def image_to_base64_data_uri(image: Image.Image) - str: 将 PIL 图像转换为兼容 OpenAI API 的 data URI 格式。 buffer io.BytesIO() # 统一转换为 PNG 以保证兼容性 image.save(buffer, formatPNG) encoded base64.b64encode(buffer.getvalue()).decode(utf-8) return fdata: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(fBase64 解码错误: {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: fBearer {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, headersheaders, jsonpayload, timeout120) # 检查 HTTP 状态 if response.status_code ! 200: error_msg fAPI 请求错误: {response.status_code} - {response.text} print(error_msg) gr.Error(error_msg) return None result response.json() # Debug: 打印部分响应便于排查 print(fAPI 原始响应(截断): {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(titleNanobanana 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( labelPrompt (提示词), placeholder示例: A cyberpunk cat holding a neon sign..., lines3 ) image_input gr.Image( label参考图片可选用于图生图, typepil, height300 ) submit_btn gr.Button(开始生成, variantprimary) with gr.Column(): image_output gr.Image(label生成结果, formatpng) submit_btn.click( fnsynthesize, inputs[prompt_input, image_input], outputsimage_output ) if __name__ __main__: app.launch(shareTrue)当 Trae 提示运行成功后点击它给出的本地链接通常是http://127.0.0.1:7860。如果一切正常你会看到一个已经可用的 AI 图像生成界面。这个界面看起来简单却已经具备商业级图像生成工具最核心的两项能力文生图与图生图。左侧指令区Input Zone——你在这里下达指令。Prompt提示词输入框输入你的创意描述建议使用英文Input Image参考图片框文生图模式保持该框为空图生图模式拖入一张本地图片AI 将基于它进行创作Submit 按钮点击发送指令开始生成。右侧结果区Output Zone——魔法发生的地方生成的图片会显示在这里。1.2 第一次真实生成现在可以尝试生成你的第一张图片了。本示例使用的 prompt 是A red apple这是一个刻意简化的示例没有任何风格描述或参数。真实流程代码运行后整体流程可归纳为三步将文本描述发送给模型模型生成对应图片图片保存为本地文件。几秒钟后就能看到本地生成的结果。模型生成具有随机性同一个 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 图标常见表现透明材质、发光边缘、糖果色的功能或天气图标。示例 PromptA 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常见表现黑白配色、负空间设计、清晰的品牌感。示例 PromptMinimalist 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 风格。示例 PromptClose-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 元素。示例 PromptEditorial 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按钮现在需要扩展一整套风格统一的按钮如暂停、设置、主页。纯手绘很难保证每个按钮在亮度、透视、色彩数值上完全一致。基本操作流程保存已有的蓝色 PLAY 按钮图片将它拖入界面的Input Image区域作为后续生成的主参考图保持 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 ModeAgent 模式AI 先拆解需求、重写 prompt再执行生成。联网能力开启地球图标后Agent 可以在生成过程中联网检索信息如设计趋势、配色方案作为辅助输入。2.2 为什么原生 API 不够用虽然通过 Python 已经能生成质量不错的图片但原生 API 在复杂任务上仍有局限。关键原因在于原生 API 本质上是命令式的。你让它生成某个具体对象它能直接执行但当输入变成规划一整组游戏资产时它不会主动把目标拆解成多个可执行的步骤。Lovart 的核心差异在于 Agent 机制在用户输入与图像生成模型之间它加入了一层理解与规划的逻辑——先识别用户意图再拆解任务、重写 prompt最后执行生成。2.3 实战演示5 分钟创建一套 IP 贴纸以创建一套程序员鸭子 IP 贴纸为例看看 Agent 如何参与全流程。阶段 1规划Agent 的思考能力原生 API 的问题你需要自己构思角色设定、情绪状态并为每张图单独编写 prompt。Lovart 的做法开启 Thinking Mode输入一条指令设计一套程序员鸭子 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 中角色分工可以归纳为四点语言模型作为决策核心负责理解文章内容、判断用户输入意图把任务分发到合适的生成路径决定下一步做什么以及如何生成图像 prompt图像模型作为执行者图像模型不参与理解与判断只接收整理好的视觉指令专注完成图像渲染用户作为可干预的引导者除了直接输入文本用户还可以在过程中手动调整生成的 prompt或添加参考图辅助生成引导并打磨最终结果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用于查看界面并验证实现效果。模块 1Gradio Blocks 基础框架与界面设计 1、任务目标 - 基于 Gradio 4.0.0 的 Blocks 布局实现项目LLMNanobanana 文生图的基础界面严格按照左 60% 右 40% 的固定左右分栏布局初始化所有 UI 组件并设置正确的初始状态。 2、技术栈要求 - 必须使用 Gradio 4.0.0 的 Blocks 模式开发禁止使用 Interface 模式 - 依赖gradio4.0.0, pillow10.0.0仅导入暂不实现图像处理逻辑 - 代码必须是完整可执行的 Python 文件包含所有必要的 import 声明。 3、界面布局规则核心约束融合实战细节 - 整体布局 页面标题LLM 驱动的完整文生图工具 固定左右分栏左侧占 60% 宽度右侧占 40% 宽度使用 gr.Row 与 gr.Column 实现比例控制。 - 左侧 60% 组件清单prompt 生成流程区 input_text: gr.Textbox标签输入文本教程段落/绘画指令lines6placeholder 输入需要配图的教程文本或直接绘画指令... identify_intent_btn: gr.Buttonvalue识别意图初始状态可正常点击 intent_status: gr.Textbox标签意图类型/处理状态lines2interactiveFalse初始值尚未识别意图 system_prompt: gr.Textbox标签System Prompt仅文章配图意图可编辑lines4interactiveFalseplaceholder LLM 生成 prompt 的约束规则... confirm_prompt_btn: gr.Buttonvalue确认生成图像 promptinteractiveFalse初始禁用防止误操作 generation_prompt: gr.Textbox标签生成用 prompt可编辑lines3interactiveTrue初始为空placeholder 生成的英文图像 prompt 将显示在这里支持手动修改...。 - 右侧 40% 组件清单Nanobanana 图像生成功能区 ref_image: gr.Image标签参考图片可选图生图typefilepathheight300允许上传 generate_btn: gr.Buttonvalue生成图片interactiveFalse初始禁用无 prompt 不可点击 result_image: gr.Image标签生成结果typepilheight300初始为空interactiveFalse。 4、交互逻辑要求 - 所有组件的初始 interactive 状态必须严格遵循上述配置后续通过函数动态更新 - 按钮禁用状态要直观置灰避免用户误操作。 5、输出要求 - 生成完整 Python 代码只实现界面布局与组件初始化不包含业务逻辑 - 代码注释清晰组件命名与实战版本一致input_text/identify_intent_btn 等 - 代码可直接运行界面结构与描述完全一致。在浏览器中打开http://127.0.0.1:7860后可以看到 Trae 按需求生成了页面与要求基本一致即可进入下一步生成。阶段 2️⃣LLM 意图识别模块Siliconflow API日常用 VLM 画图时可能遇到以下三种常见输入情况无意义内容如你好今天吃饭了吗画不出对应图片长文章/长文本字数较多如一篇约 200 字的结构化文章需要先理解文章结构与内容再考虑如何生成一张能完整概括全文的图直接绘画指令如给我画一只洗澡的狗需求描述已足够具体可直接生成图片。与之前一样把下面的 Prompt 复制到 Trae 对话框中实现并填入上一步获取的 API。模块 2LLM 意图识别模块Siliconflow API 1、任务目标 在已实现的 Gradio 界面基础上为识别意图按钮添加点击逻辑调用 Siliconflow API 完成意图识别并联动组件状态。 2、技术栈要求 基于 Gradio 4.0.0 Blocks 依赖requests2.31.0, openai 输出完整可执行的 Python 文件包含模块 1 界面 本模块逻辑。 3、核心业务规则绝对不允许偏离 - 意图分类规则仅 3 类严格返回 数字 描述 1 无意义内容纯闲聊、打招呼、无关对话没有任何绘画/配图需求例你好、吃饭了吗 2 文章/长文本配图需求用户输入整篇文章、教程、段落或描述性文本内容偏叙述/说明/教学隐含为这些内容配图意图无需用户明说给这段文字配图 3 直接绘画指令用户输入简短清晰的绘画命令无长文本背景直接要求画出某个具体事物例画一只 Apple 风格的猫。 - LLM 调用约束融合实战版本模板 接口地址https://api.siliconflow.cn/v1/chat/completions 模型Qwen/Qwen2.5-7B-Instruct temperature0.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地址开始测试能否正确识别三种情况无意义内容可以尝试输入你好谢谢观察是否被正确识别长文章/长文本这里使用一段关于人工智能的文本可换成你自己的论文段落。长文本同样能被成功识别为文章配图需求直接绘画指令输入我想画一只猫同样能被精准识别。到这里第二阶段——意图识别——就成功实现了。阶段 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 temperature0.7保证 prompt 的创造性与适配度 max_tokens200限制输出长度与 prompt 约束匹配 严格使用上述标准 Chat 消息列表结构禁止字符串拼接。 - 输入输出示例核心参考 输入示例 1文章配图意图原始文本AI 如何改变教育随着人工智能技术的发展教师的角色从知识传授者转变为引导者AI 助手可以辅助学生个性化学习课堂中的人机协作成为常态。最终 System PromptSYSTEM_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 PromptSYSTEM_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模块 4Nanobanana 文生图/图生图模块最终版 1、任务目标 实现生成图片按钮的逻辑调用 Nanobanana 真实 API支持文生图/图生图解析 Base64 并展示图片。 2、技术栈要求 基于 Gradio 4.0.0 Blocks 依赖requests, pillow, base64, io, re 完整代码 模块 123 本模块。 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) 输入参数promptgeneration_prompt 字段内容ref_image_pathref_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 101The first course for AI-native product builders.项目地址: https://gitcode.com/GitHub_Trending/ea/easy-vibe创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考