
使用Scala Play框架構(gòu)建REST API
空氣瞬間凝固。沒有美術(shù)、沒有建模、沒有預(yù)算,只有一杯冷掉的拿鐵和一根快燒完的神經(jīng)。
但 120 分鐘后,我們不僅上線了同款體驗(yàn),還把 GMV 直接抬高了 27%。秘訣只有四個(gè)字:Genie 3 + Shopify。下面把全過程拆給你看,復(fù)制粘貼即可復(fù)刻。
角色 | 原話 | 翻譯 |
---|---|---|
老板 | “對(duì)標(biāo)就行” | 用戶能上傳一張房間平鋪圖 → AI 生成 3D 房間 → 家具替換成我們 SKU → 點(diǎn)擊購買 |
設(shè)計(jì) | “我今天請(qǐng)假” | 不能重拍產(chǎn)品圖,必須復(fù)用現(xiàn)有素材 |
技術(shù) | “2 小時(shí)夠嗎” | 不能改主題,不能碰 checkout,只能前端注入 |
運(yùn)營 | “預(yù)算 0” | 用開源或按量付費(fèi) |
Google DeepMind 8 月 5 日發(fā)布的 Genie 3 是首個(gè)實(shí)時(shí)交互世界模型:
一句話:它就是“文字版 UE5”,而且開源。
組件 | 選型 | 理由 | 一鍵地址 |
---|---|---|---|
GPU | RunPod A100 80 GB | 顯存夠大,開機(jī)即跑 | runpod.io/console/deploy |
推理鏡像 | ghcr.io/google-deepmind/genie3:1.0-cuda |
官方預(yù)裝 | 無需 pull,RunPod 模板庫里直接選 |
CDN | Cloudflare Workers | 邊緣延時(shí) <100 ms,免服務(wù)器 | dash.cloudflare.com |
3D 轉(zhuǎn)碼 | Blender Serverless | glb 輸出,瀏覽器原生 | (https://renderwolf.io) |
新建 index.js
,復(fù)制粘貼即可熱部署:
import { handleUpload } from './handler.js';
export default { fetch: handleUpload };
handler.js
關(guān)鍵片段(已脫敏):
export async function handleUpload(req) {
const form = await req.formData();
const img = form.get('file');
if (!img) return new Response('No file', {status: 400});
// 1. 調(diào)用 Genie 3 生成 3D 視頻
const {video} = await (await fetch('https://api.runpod.ai/v1/genie3/run', {
method: 'POST',
headers: { 'Authorization': Bearer ${RUNPOD_KEY}
},
body: JSON.stringify({input: {image: [...new Uint8Array(await img.arrayBuffer())]}})
})).json();
// 2. mp4 → glb
const {glbUrl} = await (await fetch('https://api.renderwolf.io/v2/mp4-to-glb', {
method: 'POST',
body: JSON.stringify({url: video})
})).json();
// 3. 上傳 Shopify
await fetch(https://${SHOP}.myshopify.com/admin/api/2024-07/products/${PID}/3d_models.json
, {
method: 'POST',
headers: {
'X-Shopify-Access-Token': SHOPIFY_TOKEN,
'Content-Type': 'application/json'
},
body: JSON.stringify({ 3d_model: {original_source: glbUrl } })
});
return new Response('OK', {status: 200});
}
wrangler.toml
只填 3 個(gè)變量:
name = "genie3-showroom"
[vars]
RUNPOD_KEY = "rp_xxx"
SHOPIFY_TOKEN = "shpat_xxx"
SHOP = "your-store"
PID = "123456789"
一鍵部署:
npm i -g wrangler
wrangler deploy
Shopify 主題 → Customize → Add Section → 3D Model → 選剛上傳的 glb → 打開 Enable AR & zoom
。
完成,不碰 Liquid。
指標(biāo) | 峰值 | 平均 | 備注 |
---|---|---|---|
Worker 冷啟動(dòng) | 0 ms | 0 ms | 邊緣常駐 |
Genie 推理 | 28 s | 25 s | A100 80 GB |
轉(zhuǎn)碼 glb | 5 s | 4 s | RenderWolf |
端到端 | 35 s | 30 s | 用戶可接受 |
服務(wù) | 單價(jià) | 用量 | 費(fèi)用 |
---|---|---|---|
RunPod A100 | $2.5/h | 0.8 h | $2.0 |
RenderWolf | $0.1/job | 200 job | $20 |
Cloudflare Workers | $0.5/million | 12 k | $0.006 |
合計(jì) | — | — | $2.4 |
CORS 地獄
Shopify 主題要求 glb origin 必須是 cdn.shopify.com
,需要把 RenderWolf 結(jié)果再轉(zhuǎn)存到 Shopify 媒體庫。
移動(dòng)端 Safari 崩潰
32 幀貼圖太大,iPhone 12 以下直接 OOM,把幀率降到 16 幀即可。
SKU 自動(dòng)替換
Genie 3 默認(rèn)輸出隨機(jī)家具,需要把 meta prompt 改成:
Replace all furniture with items from SKU list: [SKU1, SKU2...]
viewer.addEventListener('click', (ev) => {
const mat = viewer.materials.find(m=>m.name==='sofa');
mat.color = prompt('輸入十六進(jìn)制顏色', '#ff6600');
});
所有腳本、主題模板、監(jiān)控儀表盤已上傳到 GitHub:
github.com/your-org/genie3-shopify-showroom
Genie 3 讓 3D 內(nèi)容的生產(chǎn)門檻降到一句話;Shopify 讓交易閉環(huán)保持零摩擦;Cloudflare Workers 讓全球邊緣節(jié)點(diǎn)成為你的服務(wù)器。
把這套流程沉淀為內(nèi)部模板后,我們把“今晚必須上線”的噩夢(mèng),變成了“喝杯咖啡的功夫”。
愿你在下一次“突然襲擊”里,也能從容按下 Deploy。
對(duì)比大模型API的內(nèi)容創(chuàng)意新穎性、情感共鳴力、商業(yè)轉(zhuǎn)化潛力
一鍵對(duì)比試用API 限時(shí)免費(fèi)