🎨 AI 图像生成工作台：从零搭建支持异步轮询的图片生成服务

🎨 从浏览器超时到异步轮询，从 CORS 错误到移动端适配，记录 AI 图像生成服务的完整搭建过程

📌 项目背景

在个人博客中集成 AI 图像生成功能，让访客可以通过简单的文字描述生成精美图像。项目基于 Hexo 静态博客 + VPS 后端 + BoostAPI 图像生成服务，实现了一个完整的异步图片生成工作台。

在线体验： https://blog.shanyu1314.top/image-generator/

🎯 功能特性

✨ 核心功能

• 🎨 文字生成图像：输入描述，AI 自动生成精美图片
• 📐 三种尺寸选择：正方形 (1:1)、横屏 (16:9)、竖屏 (9:16)
• 🎭 预设模板：写实风格、动漫场景、自然风光快速体验
• 🖼️ 全屏查看：点击图片全屏查看，支持 ESC 键关闭
• 📥 智能下载：桌面端自动下载，移动端提示长按保存
• 🔄 重新生成：一键使用相同参数重新生成
• ⏱️ 实时进度：显示生成进度，40-90 秒完成
• 🌓 暗色模式：完美适配明暗主题

🏗️ 技术亮点

• ⚡ 异步任务 + 轮询架构：解决浏览器超时问题
• 🔐 API Key 后端注入：前端零暴露，安全可靠
• 🌐 CORS 统一处理：Nginx 层面处理跨域
• 📱 移动端适配：响应式设计 + 移动端优化
• 🎯 DNS 灰色云：绕过 Cloudflare 100 秒超时限制

🎬 功能演示

1. 模板快速体验

提供三个精心设计的模板，点击即可快速生成：

• 🎬 写实风格人像：电影级灯光，高质量宣传照风格
• 🌸 动漫风格场景：新海诚风格，细腻光影
• 🏔️ 自然风光摄影：摄影作品级别，广角镜头

2. 生成过程展示

点击生成后，系统会显示实时进度，通常需要 40-90 秒：

生成完成后，图片会自动添加到画廊：

3. 更多生成示例

桂花乌龙茶主题：

4. 全屏查看功能

点击生成的图片可以全屏查看，黑色半透明背景，图片居中显示：

• 点击背景或按 ESC 键关闭
• 右上角有关闭按钮（×）
• 底部显示图片描述

🏗️ 技术架构

整体架构图

1
2
3
4
5
6
7
8
9

用户浏览器
    ↓ (HTTPS)
Cloudflare Pages (静态页面)
    ↓ (HTTPS, DNS-only)
Nginx (image.shanyu1314.top)
    ↓ (HTTP, 本地)
Node.js Express (127.0.0.1:3000)
    ↓ (HTTPS)
BoostAPI (fuck.boostapi.top)

关键技术栈

前端：

• Hexo 静态博客框架
• 原生 JavaScript（异步任务 + 轮询）
• CSS3 动画（加载动画、模态框）
• 响应式设计（移动端适配）

后端：

• Node.js + Express
• 内存任务队列（Map 存储）
• 异步任务处理
• 定时清理过期任务

部署：

• Cloudflare Pages（前端）
• VPS Ubuntu（后端 + Nginx）
• DNS 灰色云（DNS-only 模式）
• Systemd 服务管理

💡 核心功能实现

异步任务处理架构

图片生成需要 40-90 秒，直接同步请求会导致浏览器超时。我采用了异步任务 + 轮询的架构：

1. 前端提交任务：用户点击生成后，立即返回任务 ID
2. 后端异步处理：后端在后台调用 BoostAPI 生成图片
3. 前端轮询状态：每 3 秒查询一次任务状态，直到完成或失败
4. DNS 灰色云：设置为 DNS-only 模式，绕过 Cloudflare 100 秒超时限制

这样用户不会感觉到”卡死”，而是能看到实时的生成进度。

全屏查看功能

点击生成的图片会弹出全屏模态框，黑色半透明背景，图片居中显示。支持：

• 点击背景关闭
• ESC 键关闭
• 底部显示图片描述

移动端适配

移动端和桌面端的下载体验不同：

• 桌面端：点击下载按钮自动下载到本地
• 移动端：提示用户长按图片保存（移动端标准操作）

通过检测设备类型，提供最适合的交互方式。

🐛 遇到的问题与解决

问题 1：浏览器超时

现象： 图片生成需要 40-90 秒，浏览器在 60-100 秒时超时

解决： 采用异步任务 + 轮询架构，DNS 设置为灰色云（DNS-only）绕过 Cloudflare 代理

问题 2：CORS 跨域错误

现象： 浏览器报错 Access-Control-Allow-Origin 重复

解决： 统一在 Nginx 层面处理 CORS，移除 Node.js 后端的 CORS 中间件

问题 3：API 请求失败

现象： BoostAPI 返回 400 “failed to parse request body”

解决：

• 后端转换尺寸格式（1:1 → 1024x1024）
• 正确计算 UTF-8 字节长度（中文字符的字节数 ≠ 字符数）

问题 4：移动端下载失败

现象： 移动端点击下载按钮提示”下载失败”

解决： 检测设备类型，移动端提示长按保存，桌面端自动下载

问题 5：图片 CDN 安全警告

现象： 移动端访问图片时显示”Deceptive Website Warning”

说明： 这是 BoostAPI 的 CDN 域名被浏览器误判，图片本身是安全的

🚀 快速开始

想要在自己的博客上集成类似功能？核心步骤：

1. 前端页面：创建静态页面，实现任务提交和轮询逻辑
2. 后端 API：Node.js + Express 处理异步任务
3. Nginx 配置：处理 CORS 和反向代理
4. DNS 设置：灰色云模式，绕过 CDN 超时限制

详细的部署指南和代码实现可以参考项目文档。

📊 与 SaaS 平台对比

很多人会问：为什么不直接用现成的 SaaS 平台？

自建服务的优势

适用场景

选择自建：

• 想要完全掌控用户体验
• 需要深度集成到现有系统
• 有一定技术基础
• 追求学习和成长

选择 SaaS：

• 快速上线，不想折腾
• 没有技术背景
• 只需要基础功能
• 预算充足

🔗 相关资源

• 在线体验： https://blog.shanyu1314.top/image-generator/
• BoostAPI 文档： https://boostapi.top

💬 需要帮助？

如果你在搭建过程中遇到任何问题，欢迎通过以下方式联系我：

• 微信号： h314896654
• 备注： AI 图像生成