Prompt2Wood · AI 定制宠物实木家具可视化

一个基于 Next.js 与 Google Gemini 的 MVP 项目，让用户通过表单描述宠物家具需求，AI 自动扩写提示词并生成实木家具设计效果图。

---

技术栈

类别	技术
框架	Next.js 15 (App Router)
UI	React 19 + TypeScript 5.7
样式	Tailwind CSS 4
图标	Lucide React
AI	Google Gemini API：gemini-2.0-flash（文本扩写）+ imagen-4.0-generate-001（图片生成）
SDK	@google/genai 官方 JavaScript/TypeScript SDK

---

项目结构

Prompt2Wood/
├── src/
│   ├── app/
│   │   ├── layout.tsx              # 根布局、metadata
│   │   ├── page.tsx                # 主页面：左表单 + 右展示
│   │   ├── globals.css              # 全局样式、Tailwind、动画
│   │   └── api/
│   │       └── generate-pet-furniture/
│   │           └── route.ts         # POST 接口：双重 API 调用
│   ├── components/
│   │   ├── PetFurnitureForm.tsx     # 左侧参数表单
│   │   ├── ResultDisplay.tsx        # 右侧展示区（空态/Loading/错误/成功）
│   │   └── SkeletonLoader.tsx      # 骨架屏加载动画
│   ├── lib/
│   │   └── gemini.ts                # Gemini 封装：Prompt 扩写 + 图片生成
│   └── types/
│       └── index.ts                 # TypeScript 类型定义
├── .env.local                       # API Key（不提交 Git）
├── package.json
└── README.md

---

开发过程：三步走

第一步：前端 UI 搭建

目标：搭好静态界面与交互框架。

完成内容：

• 使用 create-next-app 初始化 Next.js + TypeScript + Tailwind 项目
• 定义 FormData、GenerateResponse 等 TypeScript 类型
• 左侧表单 PetFurnitureForm：
  • 宠物类型（猫/狗）卡片切换
  • 基础形态下拉（半封闭/开放/异形/塔式/隧道式）
  • 附加结构多选（斜坡、围栏、亚克力窗、软垫、吊床等）
  • 木材偏好色块选择（橡木、胡桃木、松木等）
  • 大白话补充要求 Textarea
  • 「生成家具设计」按钮
• 右侧展示区 ResultDisplay：空态引导、Loading、错误、成功四种状态
• 骨架屏 SkeletonLoader：shimmer 动画 + 弹跳点
• 主页面 page.tsx：左右分栏布局，统一状态管理

结果：UI 完整可用，点击「生成」时调用占位 API，返回 501。

---

第二步：后端双重 API 调用

目标：实现真实 AI 生成流程。

完成内容：

1. Step 1 - Prompt 扩写（expandPrompt）

   • 使用 gemini-2.0-flash
   • 系统提示：扮演 Midjourney 提示词专家
   • 将表单选项 + 中文补充转换为高质量英文生图 Prompt
   • 自动注入质量锚点：Photorealistic, highly detailed solid wood texture, 8k resolution...

2. Step 2 - 文本生图（generateImage）

   • 使用 imagen-4.0-generate-001
   • 输入 Step 1 的英文 Prompt，生成 1:1 图片
   • 返回 Base64 编码图片数据

3. API 路由（/api/generate-pet-furniture）

   • 校验表单参数（petType、baseShape、woodType 白名单等）
   • 顺序执行 Step 1 → Step 2
   • 各步骤独立 try/catch，精确定位失败阶段
   • 返回 { success, imageBase64, optimizedPrompt } 或 { error }

结果：端到端流程打通，可实际生成设计图。

---

第三步：Loading 与错误处理

目标：完善用户体验与健壮性。

完成内容：

• 120 秒 AbortController 超时
• 区分网络错误、超时、API 报错，展示对应提示
• 错误状态下显示「重新生成」按钮
• 成功状态下提供图片下载 + 可折叠的英文 Prompt 调试展示

---

本地运行

1. 安装依赖

npm install

2. 配置 API Key

复制 .env.example 为 .env.local 或新建 .env.local：

GEMINI_API_KEY=你的Gemini_API_Key

在 Google AI Studio 申请 API Key。

3. 启动开发服务器

npm run dev

访问 http://localhost:3000。

4. 构建生产版本

npm run build
npm start

---

后续规划与改进

功能增强

优先级	改进项	说明
高	多尺寸 / 多比例	支持 3:4、9:16 等比例，适配不同展示场景
高	历史记录	本地或云端保存生成结果，支持对比与复用
中	图片编辑	接入 Gemini 2.0 图生图能力，支持局部修改
中	分享链接	生成唯一链接，分享设计给他人查看
低	更多宠物类型	支持兔子、仓鼠等小宠物家具形态
低	风格预设	日式、北欧、工业风等一键切换

技术优化

方向	改进项
性能	对图片做 CDN 上传或对象存储，减少 Base64 在 JSON 中传输
安全	增加 Rate Limit、请求签名、防刷机制
可观测	接入 Sentry/日志服务，监控 API 失败率与延迟
测试	为 expandPrompt、generateImage 和 API 路由写单元/集成测试
模型	可尝试 imagen-3.0-generate-002（需确认账户权限）或 Gemini 2.0 原生图生

部署

• 可直接部署到 Vercel（Next.js 官方支持）
• 确保 GEMINI_API_KEY 在环境变量中配置
• 建议使用 Vercel Edge Functions 或类似能力，进一步控制冷启动与延迟

---

API 费用参考

• Gemini 2.0 Flash：按 token 计费，约 $0.075 / 百万 input tokens
• Imagen 4.0：约 $0.03 / 张图（具体以 Google AI 定价 为准）

建议在开发阶段关注用量，避免超额。

---

开源协议

MIT