今天把 Hugging Face 的圖像生成串到專案，從拿到 Token、能在終端生出一張圖，到前端真的按一下就出圖，整條流程走通。

Hugging Face 測試

一開始先在 Hugging Face 產 Token，先用 cURL 測通道：把 prompt 丟到 stabilityai/stable-diffusion-xl-base-1.0，確認回傳一個 PNG。

後端串接

後端我放在 Vercel Functions，補了一個 /api/encouragement-image：

• 預設模型：SDXL base
• guidance_scale / steps / width / height / negative_prompt 都開成參數
• 錯誤處理：403/404 時會直接提示「要去模型頁面接受條款」

這樣之後調參就不用改程式。

前端串接

前端用 Pinia 管理 loading / error / 歷史紀錄，UI 留了幾個風格模板幫助組 prompt。
測試後圖片會直接顯示在卡片裡，為了乾淨，把圖片下方的小字說明拿掉，只保留圖。

整體流程：

• vercel dev --listen 3000 跑 API
• npm run dev 跑 Vite (5173)
• proxy 自動把 /api 轉到 3000
• .env.local 只要放 HUGGINGFACE_API_KEY 就能用

下一步

明天把重心放在「鼓勵語句生成」的 AI 功能，老樣子先接 Hugging Face 的文字生成模型，把常見的激勵用語做成模板，再讓前端可以即時產生一段鼓勵句子，搭配圖片功能，體驗更完整。