---

构建基于 Google Gemini 的无限画布创作平台：NanoBanana Pro 技术解析与实践

作者：MaynorAI 团队
日期：2025年11月24日

---

引言

在 AIGC 爆发的今天，图像生成工具层出不穷。然而，国内开发者和创作者在实际落地过程中，往往面临两个核心痛点：

1. 网络连通性挑战：顶尖的多模态大模型（如 Google Gemini）通常受到网络地域限制，导致 API 访问困难。
2. 线性交互的局限性：传统的 ChatUI 或流式生成界面是线性的，一旦灵感发散，很难在旧有的上下文中进行分支探索或回溯。

为了解决上述问题，我们构建了 NanoBanana Pro——一个集成 Google Gemini AI 的非线性无限画布创作系统。本文将从技术实现、产品架构及工作流设计的角度，深度解析这一平台的构建思路。

核心架构：无限画布（Infinite Canvas）

NanoBanana Pro 的核心差异化在于抛弃了传统的“对话流”，转而采用**无限画布（Infinite Canvas）**交互模式。

非线性创作逻辑

传统的生成式 AI 是“一次性”的，而创作往往是迭代的。我们在前端实现了一套节点式系统：

• 节点化（Node-based）：每一次生成的图像、提示词都被封装为一个独立的节点。
• 可视化脉络：通过连线展示节点的继承关系（Parent-Child），形成思维导图式的创作路径。
• 空间交互：利用 React 生态中的画布库，支持无边界的拖拽、缩放与平移。

设计理念：每一次生成都不是终点，而是新的起点。 用户可以基于任意历史节点（Branching）进行变异或重组，构建一个可视化的创意宇宙。

技术解决方案：如何实现国内直连？

为了降低用户的使用门槛，我们在网络层做了特殊处理，实现了开箱即用的体验。

API 中转架构

• 零门槛访问：前端直接与我们预置的 API 中转服务通信，绕过了复杂的网络环境配置。
• 代理服务：我们部署了高性能的中转层，负责将用户的请求转发至 Google Gemini 官方接口，并处理鉴权与响应流。
• 数据隐私：尽管经过中转，但支持本地 API Key 配置，且支持项目数据本地导出，确保核心数据安全可控。

AI 深度集成：不仅是绘图，更是思考

在模型层，我们深度集成了 Google Gemini 系列模型，利用其强大的多模态理解能力。

1. 双模型驱动架构

• 推理层 (Reasoning)：使用 Gemini 2.5 Flash。它充当“AI 艺术总监”的角色，负责理解用户的简短意图（即便是中文），并将其转译、扩写为专业的英文绘图 Prompt。
• 生成层 (Generation)：使用 Gemini 3 Pro 或 2.5 Flash。根据用户选择，提供从极速验证到 4K 超高清输出的不同生成能力。

2. 图像处理与多模态工作流

得益于 Gemini 的多模态特性，我们在前端实现了复杂的图生图逻辑：

• 风格迁移与重塑：通过将参考图作为 Prompt 的一部分输入模型，保留构图的同时变换风格。
• 多图融合：支持并发上传多张参考图，模型会自动提取特征进行融合。
• 并发控制：支持单张或四张并发生成，满足不同场景下的性能需求。

工程实现与技术栈

为了保证流畅的画布交互和高性能的响应，我们采用了最新的前端技术栈：

分类	技术选型	说明
前端框架	React 19 + TypeScript	利用 React 19 的 Actions 和新 Hook 优化状态管理
构建工具	Vite 6	极速的开发服务器与构建性能
样式方案	Tailwind CSS	原子化 CSS，快速构建现代化 UI
AI 核心	Google Gemini (@google/genai)	官方 SDK 集成，支持最新的模型特性
状态持久化	JSON 序列化	支持完整工作流的导入/导出
交互引导	react-joyride	为复杂应用提供友好的新手引导

快速上手指南

NanoBanana Pro 现已上线，以下是配置与使用的简要流程。

🔗 在线体验地址: https://pro.nanobanana-free.top/

步骤一：环境配置

1. 点击界面左上角的 设置 (Settings) 图标。

2. Base URL (关键)：保持默认 https://apipro.maynor1024.live/ 以使用国内加速通道。

3. API Key：填入你的 Google Gemini API Key。

   • 官方获取
   • 国内中转 Token 获取

4. 保存配置。

步骤二：开始创作

在底部输入框输入描述（支持中文），建议开启左侧的 深度思考 (Deep Thinking) 功能，让 AI 自动优化提示词，随后点击发送即可在画布上生成节点。

常见技术问题排查 (FAQ)

在开发和测试过程中，我们总结了以下常见报错及处理逻辑：

错误提示	技术原因	解决方案
“模型拒绝生成”	触发了 Gemini 的 Safety Filter 机制	优化 Prompt，避免敏感词，改用更写实的描述词。
“未接收到图片数据”	Base URL 配置错误或网络握手失败	检查设置中 Base URL 是否为 https://apipro.maynor1024.live/。
“403 权限不足”	API Key 鉴权失败或 Quota 耗尽	检查 API Key 有效性，或切换至免费的 Flash 模型。

未来演进规划 (Roadmap)

为了进一步提升“专业生产力工具”的属性，我们正在攻克以下技术难点：

1. 基于栈的撤销/重做 (Undo/Redo)：

   • 引入 Command Pattern（命令模式）管理画布状态，解决误操作导致节点丢失的问题。

2. 工作流版本控制 (Snapshots)：

   • 实现类似 Git 的版本快照功能，允许用户保存并切换不同的创意分支（如“赛博朋克版 v1” vs “水墨版 v2”）。

3. 交互优化：

   • 实现 Canvas 级别的拖拽连线生成节点，提供更符合直觉的思维导图操作体验。

4. 协同创作：

   • 探索基于 WebSocket 的实时数据同步，实现多人在线协作画布。

---

结语

NanoBanana Pro 是我们对 AI 辅助创作工具形态的一次探索。我们希望通过打破网络限制和交互边界，让国内开发者和设计师也能无缝体验 Google Gemini 强大的多模态能力。

创意无界，画布无限。

Built with ❤️ by MaynorAI Team · Powered by Google Gemini