AI HTML Generator V4 🚀

一个基于 AI 的智能 HTML 网页生成器，支持多种图像生成模型，特别优化了 Nano Banana (Gemini 2.5 Flash Image) 的集成。

🎯 最新更新 (V4.0.1)：修复 Nano Banana Google SDK 初始化问题，确保完全后端代理架构！

🌟 项目特色

核心功能

• 智能网页生成: 基于用户描述自动生成完整的 HTML 网页
• 多模型图像生成: 支持 10+ 种图像生成服务
• 实时预览: 即时预览生成的网页效果
• 一键部署: 支持导出和部署到多个平台

技术架构

• 前端: HTML + CSS + JavaScript (原生)
• 后端: Hono Framework + TypeScript
• 部署: Cloudflare Pages/Workers
• 数据库: Cloudflare D1 (SQLite)
• 存储: Cloudflare KV + R2

🎯 支持的图像生成模型

提供商	模型	特色	状态
Nano Banana	Gemini 2.5 Flash Image	🍌 快速、风格丰富	✅ 已优化
ChatGPT	GPT Image 1, DALL-E 3/2	🎨 高质量创意	✅
Vertex AI	Imagen 4.0/3.0	🚀 Google 最新	✅
Gemini Imagen	Imagen 3.0/2.0	🔥 多样化风格	✅
Cloudflare AI	Stable Diffusion XL	☁️ 边缘计算	✅
Qwen Image	通义万相	🇨🇳 中文优化	✅
免费服务	Unsplash, Pollinations	💰 零成本	✅

🍌 Nano Banana 特别优化

问题修复

• ✅ CORS 修复: 通过后端代理避免跨域问题
• ✅ URL 解析: 修复 Cloudflare Workers 环境中的相对路径问题
• ✅ 配置传递: 完善风格配置和输出格式支持
• ✅ 错误处理: 改进错误日志和调试信息

风格配置

基础风格:

• 写实摄影、贴纸图标、Logo设计、商品图、留白插图等

主题风格:

• 可信专业、温暖亲和、科技未来、活力年轻、极简高级等

🚀 快速开始

1. 本地开发

# 克隆项目
git clone https://github.com/suxiaoxinggz/suxiaoxinggz-html-genenrate-1009-V3.git
cd suxiaoxinggz-html-genenrate-1009-V3

# 安装依赖
npm install

# 构建项目
npm run build

# 启动开发服务器
npm run dev:sandbox
# 或使用 PM2
pm2 start ecosystem.config.cjs

2. 配置 API Keys

访问应用后，点击相应的图像提供商进行配置：

• Gemini API (Nano Banana): https://makersuite.google.com/app/apikey
• OpenAI API: https://platform.openai.com/api-keys
• Google Cloud (Vertex AI): https://console.cloud.google.com/
• Cloudflare AI: https://developers.cloudflare.com/ai/

3. 部署到 Cloudflare Pages

# 配置 Cloudflare API
npx wrangler login

# 创建项目
npx wrangler pages project create ai-html-generator-v3 --production-branch main

# 部署
npm run deploy:prod

📁 项目结构

webapp/
├── src/
│   ├── index.tsx              # 主应用入口 (Hono)
│   ├── services/              # 服务层
│   │   ├── NanoBananaService.ts   # 🍌 Nano Banana 服务
│   │   └── ModelService.ts        # 模型管理服务
│   └── input.css              # Tailwind CSS 输入
├── public/
│   ├── static/               # 静态资源
│   │   ├── app.js           # 前端 JavaScript
│   │   ├── styles.css       # 编译后的样式
│   │   ├── test-nano-banana.html      # Nano Banana 简单测试
│   │   └── debug-nano-banana.html     # Nano Banana 调试页面
│   └── favicon.ico          # 网站图标
├── migrations/              # D1 数据库迁移
├── ecosystem.config.cjs     # PM2 配置
├── wrangler.jsonc          # Cloudflare 配置
└── package.json            # 项目配置

🔧 开发脚本

# 开发相关
npm run dev              # Vite 开发服务器
npm run dev:sandbox      # 沙盒环境开发
npm run build           # 构建项目
npm run preview         # 预览构建结果

# 部署相关
npm run deploy          # 部署到 Cloudflare Pages
npm run deploy:prod     # 生产环境部署

# 数据库相关 (D1)
npm run db:migrate:local    # 本地数据库迁移
npm run db:migrate:prod     # 生产数据库迁移
npm run db:console:local    # 本地数据库控制台

# 工具命令
npm run clean-port      # 清理端口
npm run test           # 测试连接

🌍 在线演示

• 生产环境 V4: https://f39a5bb8.ai-html-generator-v4.pages.dev ✨ 已完全修复 Nano Banana SDK 问题
• GitHub V4: https://github.com/suxiaoxinggz/suxiaoxinggz-suxiaoxinggz-html-genenrate-1009-V4
• 测试页面: https://f39a5bb8.ai-html-generator-v4.pages.dev/static/test-nano-banana.html
• 调试工具: https://f39a5bb8.ai-html-generator-v4.pages.dev/static/debug-nano-banana.html

🍌 Nano Banana 使用指南

1. 获取 Gemini API Key
2. 在主页面选择 "Nano Banana" 图像提供商
3. 点击配置按钮，输入 API Key 和选择风格
4. 开始生成网页，享受快速的图像生成！

📊 使用统计

当前功能状态

• ✅ 完整功能: 网页生成、图片生成、预览、导出
• ✅ 多模型支持: 10+ 图像生成服务
• ✅ Nano Banana 优化: CORS 和 URL 解析问题已修复
• ✅ 响应式设计: 支持桌面和移动端
• ✅ 错误处理: 完善的错误提示和调试工具

技术指标

• 构建大小: ~492KB (压缩后)
• 冷启动时间: <100ms (Cloudflare Workers)
• 图片生成: 支持 Base64 和 URL 格式
• 并发处理: 支持批量图片生成
• 所有图像模型: ✅ 生产环境完全支持 (V3.0.4+)
• 紧急修复: ✅ API Key 传递问题已解决

🐛 问题修复记录

V4.0.1 SDK 初始化修复 (2025-10-09) 🔧 架构修复

🚫 Nano Banana Google SDK 初始化问题：

1. SDK 绕过风险 ⭐ 关键修复:

   • 问题: 选择 Nano Banana 时仍初始化 Google SDK，可能绕过后端代理
   • 解决: 修改 SDK 初始化逻辑，添加 imageProvider !== 'nano-banana' 排除条件
   • 影响: 确保 Nano Banana 100% 使用后端代理，避免前端 CORS 问题

2. 架构一致性保证:

   • 问题: SDK 初始化可能导致前端直接调用，违反后端代理架构
   • 解决: 添加明确的日志跟踪和排除逻辑
   • 结果: Nano Banana 现在完全通过后端代理，无任何 SDK 依赖

V3.0.4 紧急修复 (2025-10-09) ⚠️ 关键修复

🚨 所有图像模型 API Key 传递问题：

1. API Key 传递断链 ⭐ 紧急修复:

   • 问题: 配置加载后 imageApiKey 字段为空，导致所有模型失败
   • 解决: 添加 API Key 从模型配置到基础字段的传递逻辑
   • 影响: 修复前所有模型都回退到 Unsplash，现已恢复正常

2. 配置传递链完整性:

   • 问题: 弹窗配置保存成功，但生成时无法读取 API Key
   • 解决: 确保所有模型的 API Key 正确传递到 modelConfig.imageApiKey

V3.0.3 配置系统修复 (2025-10-09)

🔧 全模型配置加载系统：

1. 配置加载逻辑缺失:
   • 问题: 只有 Nano Banana 有配置加载，其他模型配置丢失
   • 解决: 为所有模型添加 localStorage 配置加载逻辑

V3.0.2 Nano Banana API 认证修复 (2025-10-09)

🍌 Nano Banana 生产环境完全修复：

1. API 认证方式错误 ⭐ 关键修复:

   • 问题: 使用错误的 query parameter ?key=${apiKey}
   • 解决: 改用正确的 header 'x-goog-api-key': apiKey
   • 影响: 这是 Nano Banana 失败回退到 Unsplash 的根本原因

2. 配置属性名不一致:

   • 问题: nanoBananaConfig vs nanoBanana 属性名混乱
   • 解决: 统一使用 nanoBanana 属性名

3. 调试信息增强:

   • 问题: 生产环境错误难以诊断
   • 解决: 添加详细的环境检测和错误日志

V3.0.1 版本修复

1. Nano Banana CORS 问题:

   • 问题: 前端直接调用导致 CORS 错误
   • 解决: 实现后端代理机制

2. 配置传递链:

   • 问题: outputFormat 参数未正确传递
   • 解决: 完善配置对象传递逻辑

3. 风格配置:

   • 问题: 风格增强功能不稳定
   • 解决: 重构风格映射和提示词构建逻辑

🤝 贡献指南

1. Fork 项目
2. 创建功能分支 (git checkout -b feature/AmazingFeature)
3. 提交更改 (git commit -m 'Add some AmazingFeature')
4. 推送分支 (git push origin feature/AmazingFeature)
5. 创建 Pull Request

📄 许可证

本项目采用 MIT 许可证 - 查看 LICENSE 文件了解详情。

📞 联系方式

• 项目仓库: https://github.com/suxiaoxinggz/suxiaoxinggz-html-genenrate-1009-V3
• 问题反馈: Issues
• 讨论交流: Discussions

⭐ 致谢

感谢以下服务和技术：

• Hono - 轻量级 Web 框架
• Cloudflare Pages - 边缘部署平台
• Tailwind CSS - CSS 框架
• Google AI Studio - Gemini API
• OpenAI - GPT 和 DALL-E API

---

🚀 开始创建你的第一个 AI 生成网页吧！ 🎨