照片合成功能(1)

在這篇文章中，我們將介紹如何在前端實現照片合成功能，重點是如何將使用者上傳的圖片與提示詞傳送到後端 API，並顯示合成結果。

一、功能流程說明

1. 使用者在前端選擇1~5張照片，並輸入提示詞
2. 點擊開始合成按鈕，前端JS會將圖片與提示詞打包成formdata，送到後端/api/mix-image API
3. 後端收到圖片，進行合成處理，產生新的圖片並回傳結果給網址
4. 前端收到回應後，顯示合成結果圖片，並提供下載按鈕。

二、前端實作重點

1. 收集使用者輸入

在前端，使用者可以透過檔案上傳區域選擇圖片，並輸入提示詞。

const files = Array.from(document.getElementById('photo-upload').files);
const prompt = document.getElementById('prompt-input').value.trim();

2. 建立FormData並發送API請求

將圖片與提示詞加入 FormData，然後使用 fetch 發送 POST 請求到後端的 /api/mix-images API。

const formData = new FormData();
files.forEach(file => formData.append('images', file));
if (prompt) formData.append('prompt', prompt);

const response = await fetch('/api/mix-images', {
    method: 'POST',
    body: formData,
});
const result = await response.json();

3. 處理後端回應並顯示結果

後端回應的 JSON 可能包含 image_url（合成圖片的路徑）或 error 訊息。前端根據回應動態更新結果區域。

if (result.error) {
    showError(result.error);
} else if (result.image_url) {
    showResultImage(result.image_url);
}

4. 顯示合成結果
   收到合成圖片的網址後，前端會將圖片顯示在結果區域，並提供下載按鈕。

function showResultImage(url) {
    const gallery = document.getElementById('result-gallery');
    gallery.innerHTML = `<img src="${url}" alt="合成結果" style="max-width:400px;">`;
    document.getElementById('download-btn').onclick = () => {
        window.open(url, '_blank');
    };
}

這篇文章介紹了照片合成功能的前端實作，重點在於如何將圖片與提示詞傳送到後端，並顯示合成結果。下一篇文章，我們將專注於後端的圖片合成邏輯，並使用 AI 模型來處理圖片。