一張產品照片 → 五張阿里巴巴標準上架圖
Powered by Google Gemini 3 Pro Image (Banana Nano 3)
上傳一張產品圖片，AI 自動生成阿里巴巴國際站所需的 5 張標準上架圖：
| # | 圖片類型 | 用途 |
|---|---|---|
| 1️⃣ | 主圖（白底） | 搜索結果封面 |
| 2️⃣ | 45度展示圖 | 展示結構與立體感 |
| 3️⃣ | 尺寸說明圖 | 標註長寬高，降低詢盤成本 |
| 4️⃣ | 材質/工藝細節 | 微距特寫，展示品質 |
| 5️⃣ | 品牌場景應用 | 場景圖，刺激詢盤 |
- ✅ 一鍵五圖 — 一次生成全部，批次下載
- ✅ BYOK（自備金鑰） — 使用者自行輸入 Gemini API Key，不經伺服器儲存
- ✅ 前端壓縮 — 上傳自動壓縮至 2MB 以下，Canvas resize + quality 調整
- ✅ 提示詞可編輯 — 預設 5 組專業提示詞，可自由修改
- ✅ 桌面一屏 — 1920×1080 不需捲動，左側上傳 + 右側五圖並排
- ✅ 獨立可部署 — 不依賴外部資料庫或第三方服務（僅需 Gemini API）
- ✅ 開源 MIT — 可商用、可修改、可分發
前往 Google AI Studio 免費取得 API Key。
# Clone
git clone https://github.com/morningbeachs/mbapi2b3.git
cd mbapi2b3
# 安裝依賴
npm install
# 啟動開發模式
npm run dev打開瀏覽器訪問 http://localhost:3000
- 在頂部輸入你的 Gemini API Key
- 左側上傳一張產品圖片（自動壓縮）
- 選填產品尺寸（會帶入尺寸圖提示詞）
- 點「🚀🚀🚀 一鍵生成全部」或逐張生成
- 下載生成的圖片
mbapi2b3/
├── app/
│ ├── layout.tsx # 根佈局
│ ├── page.tsx # 主頁面（前端 UI）
│ ├── globals.css # 全域樣式（Tailwind v4）
│ └── api/
│ └── alibaba-image-gen/
│ └── route.ts # API 代理路由
├── package.json
├── tsconfig.json
├── next.config.js
├── postcss.config.mjs
├── tailwind.config.js
├── LICENSE
├── TECHNICAL.md # 詳細技術文件
└── README.md # 本文件
npm i -g vercel
vercel --prod或直接在 vercel.com 導入 GitHub repo，零配置自動部署。
FROM node:20-alpine
WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . .
RUN npm run build
EXPOSE 3000
CMD ["npm", "start"]支援任何能跑 Next.js 的平台：Netlify、Railway、Render、Fly.io 等。
如果你已有 Next.js 專案，只需複製兩個檔案：
# 1. 複製前端頁面
cp app/page.tsx YOUR_PROJECT/app/alibaba-image-gen/page.tsx
# 2. 複製 API 路由
cp app/api/alibaba-image-gen/route.ts YOUR_PROJECT/app/api/alibaba-image-gen/route.ts然後訪問 /alibaba-image-gen 即可。
依賴要求：Next.js 14+、React 18+、Tailwind CSS v4
代理 Google Gemini 3 Pro Image API，接收產品圖片 + 提示詞，返回 AI 生成圖片。
{
"apiKey": "your-gemini-api-key",
"prompt": "Generate an Alibaba product listing hero image...",
"imageBase64": "/9j/4AAQSkZJRg..."
}| 欄位 | 類型 | 必填 | 說明 |
|---|---|---|---|
apiKey |
string | ✅ | Gemini API Key |
prompt |
string | ✅ | 圖片生成提示詞 |
imageBase64 |
string | ✅ | 產品圖片的 Base64 編碼（不含 data: 前綴） |
{
"imageData": "data:image/png;base64,iVBORw0KGgo..."
}{
"error": "API Key 無效或已過期，請檢查您的金鑰"
}| HTTP 狀態碼 | 說明 |
|---|---|
| 200 | 成功，返回生成圖片 |
| 400 | 參數缺失或安全過濾攔截 |
| 401 | API Key 無效 |
| 429 | API 呼叫次數超限 |
| 500 | 伺服器錯誤或 AI 未返回圖片 |
每張圖都有精心設計的英文提示詞（避免中文被寫入圖片），可透過下拉選單載入後自行編輯。
1️⃣ 主圖（白底）— 點擊展開
Generate an Alibaba product listing hero image with pure white background (RGB 255,255,255).
Product centered in frame, occupying 70-80% of the canvas.
Even, diffused lighting from all angles.
Soft, natural drop shadow beneath the product.
Product requirements:
- Crystal clear structure and form
- Strong three-dimensional appearance
- Detailed material texture visible (paper grain, coating sheen)
- Surface finishing clearly shown (hot stamping / UV coating / embossing if present)
Overall mood: Premium, professional, factory-direct quality.
Clean composition, no distracting elements.
Output: Square 1:1 aspect ratio.
2️⃣ 45度展示圖
Generate a 45-degree angle professional product showcase image.
Background: Light gray premium gradient or soft neutral backdrop.
Include natural cast shadow on surface.
Emphasize:
- Side thickness and edge details
- Folding structure and construction
- Opening/closing mechanism
- Structural stability and build quality
Lighting: High-end commercial studio photography feel.
Realistic but not over-exaggerated.
Output: Square 1:1 aspect ratio.
3️⃣ 尺寸說明圖
Generate a dimension specification diagram for the product.
Add precise dimension annotation lines on the product image.
Mark Length, Width, and Height with clean measurement lines.
Lines should be thin, elegant, gray or dark accent color.
Layout style: Industrial design / technical drawing aesthetic.
Background: Ultra-minimal, white or very light gray.
Text labels: Clear, professional, commercially usable font.
Maintain accurate product proportions — do not distort dimensions.
Output: Square 1:1 aspect ratio.
4️⃣ 材質/工藝細節
Generate a material and craft detail close-up (macro) image.
Zoom into the product surface showing:
- Paper texture and fiber detail
- Embossing / debossing patterns
- Hot stamping / foil finish with metallic sheen
- UV spot coating glossy effect
- Edge finishing quality
Lighting: High-end hard light macro photography style.
Texture must be ultra-sharp and crystal clear.
Output: Square 1:1 aspect ratio.
5️⃣ 品牌場景應用
Generate a high-end brand lifestyle application scene.
Scene options (choose most appropriate):
- Luxury brand desktop / boutique display setting
- Model hands holding the product elegantly
- Business meeting table with corporate gifts
- Premium gifting arrangement scene
Atmosphere: Modern minimalist, fashionable, strong brand identity.
The product MUST remain the visual hero.
Output: Square 1:1 aspect ratio.
- API Key 不經伺服器儲存 — Key 由前端直接傳入 API route，僅在請求生命週期內使用
- 圖片不保存 — 上傳的圖片和生成結果僅存在於使用者瀏覽器記憶體中
- API route 僅做代理 — 轉發至 Google Gemini API，不做任何資料持久化
- 無需資料庫 — 完全無狀態運行
歡迎 PR！可以改進的方向：
- 支援更多 AI 模型（DALL·E、Midjourney API 等）
- 支援自定義提示詞模板庫
- 增加圖片後處理（裁切、浮水印）
- i18n 多語言支援
- 批次產品處理（多產品上傳）
MIT License — 可自由使用、修改、分發。
MB Packaging — mbpack.co
專業包裝設計與製造，服務全球品牌客戶。
💡 提示：此工具使用 Google Gemini 3 Pro Image（又名 Banana Nano 3）模型。免費額度有限，大量使用請參考 Google AI 定價。