AI 互動行銷頁實戰 — 目標九宮格 — 第 07 章

AI 編輯迴圈與降級設計:
prompt 是可攜帶的資產

學完:讓使用者用一句話修改 AI 背景;改文字換配色零成本即時重繪;服務掛掉時漏斗照樣走得完。

先打破一個錯覺:生圖 API 沒有記憶

• 在 ChatGPT 說「再亮一點」它聽得懂,是對話介面幫你把上一張圖帶著
• 直接呼叫 API 時,它是無狀態的
• 所謂「編輯」= 上一張圖當參考圖附上 + prompt 加一句修改要求,整張重新生成
• 理解這件事,後面的程式碼就都顯而易見

edit 模式的請求:只差兩件事

// 原始 prompt 照舊:風格詞、構圖約束、「不准畫字」鐵律一個字都沒少
let prompt = imagePrompt(req.goal, req.subGoals, preset.words, req.orientation);

// 差異一:使用者那句話「追加」在後面,不是取代
if (req.editInstruction) {
  prompt += `\nRevision request from the user (apply it to the previous design): ${req.editInstruction}`;
}

const payload = { prompt,
  size: req.orientation === 'portrait' ? '1024x1536' : '1536x1024' };

// 差異二:上一張背景圖放進參考圖欄位(純 base64,去掉 data: 前綴)
if (req.referenceImagesBase64?.length)
  payload.reference_images_base64 = req.referenceImagesBase64;

只送「亮一點」三個字,模型就失去風格與構圖的所有上下文,生出來的是另一張不相干的圖。

把上一張背景帶上:縮圖再上傳

// main.js:editInstruction 有值 = 修改模式
if (editInstruction && bgRecord) {
  referenceImagesBase64.push(
    await blobToBase64(await resizeImageBlob(bgRecord.blob, 1280)),
  );
}

• 上一張背景在生成成功時已存進 IndexedDB(第 05 章)
• 第 04 章的兩個工具直接重用:resizeImageBlob 縮長邊 1280、blobToBase64 去前綴
• 送出後走哪條路由 Worker 決定(第 05 章的三層):主路 OpenAI 帶參考圖改打 images/edits、一樣同步回圖;自架備援才是同一個 job 端點、同一套輪詢——對 Worker 來說生成與修改是同一件事,差別只在有沒有參考圖

文字迭代零成本:只重繪,不重生

function rerenderWallpaper() {
  renderWallpaper(wallCanvas, {
    bgBitmap,                      // 背景不變,不重新生圖
    cells: state.cells,
    actions: state.actions,
    styleId: state.wallpaper.styleId,
    orientation: state.wallpaper.orientation,
    mode: wallpaperMode,
  });
}

上一章「背景與文字解耦」的紅利在這裡兌現。成品直接把規則講給使用者聽:「不滿意可以輸入修改指示重生背景;改文字或換風格則即時重繪、不用重生。」把貴的路和免費的路明白標出來,使用者自然把額度花在刀口上。

降級路徑:兩個純前端按鈕,零後端依賴

• (a) 複製生圖 prompt:風格詞、構圖約束、主題意象都是現成的,貼到 ChatGPT 或 Gemini 一樣能生——使用者多半本來就有帳號
• (b) 匯入背景圖:把使用者自己生好的圖收回來,接著合成文字、下載 PNG
• 成品收在步驟四「服務忙線或想自己生?」摺疊面板,生圖出錯時自動展開
• 引導文案把三步講完:貼過去生 → 下載圖 → 帶回來
• 參考照片在使用者自己手上,直接附給 ChatGPT 即可——這條路連參考圖都不經過我們

(a) 複製生圖 prompt

function buildPortablePrompt(goal, subGoals, styleId, orientation) {
  let p = imagePrompt(goal, subGoals, presetById(styleId).words, orientation);
  // API 參數換成人話:外面的工具不吃 size: '1024x1536' 這種參數
  p += orientation === 'portrait'
    ? '\nAspect ratio 2:3, vertical phone wallpaper.'
    : '\nAspect ratio 3:2, horizontal desktop wallpaper.';
  return p;
}

copyBtn.addEventListener('click', async () => {
  await navigator.clipboard.writeText(buildPortablePrompt(/* ... */));
  showMsg(bgMsgEl, '已複製。貼到 ChatGPT 或 Gemini 生成,' +
    '生好的圖用下方「匯入背景圖」帶回來。', 'ok');
});

前端的 imagePrompt 模板與 Worker 端逐字同步。clipboard 在非 https 或 file:// 可能不可用——降級路徑自己也要有降級:備一個唯讀 textarea。

(b) 匯入背景圖

importInput.addEventListener('change', async () => {
  const file = importInput.files[0];
  if (!file) return;
  try {
    bgBitmap = await createImageBitmap(file);
    // 跟 AI 生成的背景同等對待:存 IndexedDB,標記來源是手動匯入
    bgRecord = { blob: file, meta: { source: 'manual' },
                 createdAt: new Date().toISOString() };
    bgRecord.id = await idbPut('wallpapers', bgRecord);
    rerenderWallpaper();   // cover 裁切吃任何比例,直接重繪
  } catch {
    showMsg(bgMsgEl, '這張圖讀不進來,請換一張(支援一般圖片格式)。');
  }
});

不用檢查長寬比——上一章的 coverRect 本來就吃任何比例。匯入的圖走完全相同的後續流程,連「修改背景」都能接著用(它會成為下一輪的參考圖)。

最後一塊拼圖:錯誤訊息把路標出來

• not_configured、queue_full、額度用完、生成逾時——錯誤面板的第一順位建議不是「稍後再試」
• 而是:「複製生圖 prompt 自己生,生好匯入回來」
• 服務掛掉的瞬間,頁面從「壞掉的產品」變成「換一條路的產品」
• 後端是加速器(免操作、有額度管理),不是必經之路
• 漏斗的最後一步——下載桌布、留 email——永遠走得到

常見坑

• 以為 AI 記得上一張圖 → API 無狀態;不附參考圖的「修改」等於完全重抽
• 只送修改句、丟掉原 prompt → 修改句是追加,不是取代
• 參考圖沒縮就上傳 → 先縮長邊 1280 再轉 base64,別撞 20MB 上限
• clipboard API 默默失敗 → 非 https / file:// 要備唯讀 textarea
• 降級路徑藏太深 → 使用者看不到出口等於沒有出口,出錯當下就指路
• 匯入的圖比例不合就拒收 → 不必,cover 裁切吃任何比例

重點回顧

• 迭代分兩層:貴的(重生背景)與免費的(canvas 重繪),UI 要明白標出來
• API 沒有記憶:編輯 = 原 prompt + 修改句 + 上一張圖當參考圖
• prompt 是可攜帶的資產:複製出去自己生、匯入回來繼續合成
• 錯誤訊息把降級路徑標成主要出路,漏斗永遠走得完

下一章:防刷與額度——你的金鑰背後是真鈔。Turnstile 人機驗證加四層防線,讓共用額度撐得住公開上線。