iT邦幫忙

2025 iThome 鐵人賽
DAY 12
0
Modern Web

融合AI圖像生成技術的前端開發實戰系列 第 12 篇

DAY12

17th鐵人賽
14 瀏覽

  • 分享至 

  • xImage
    •  

照片合成功能(2)

在上一篇文章中，我們完成了前端的實作，這篇文章將介紹後端如何接收前端的請求，處理圖片合成，並回傳結果。

一、功能流程

  1. 接收請求：後端接收來自前端的圖片與提示詞。
  2. 圖片處理：後端將圖片與提示詞傳送到 AI 模型進行合成。
  3. 回傳結果：後端將合成後的圖片儲存，並回傳圖片的網址給前端。

二、後端實作重點

  1. API 路由設計

在 main.py 中，後端提供 /api/mix-images 路由，接收圖片與提示詞，並回傳合成結果。

https://ithelp.ithome.com.tw/upload/images/20250926/20168630F8f3fK3uVX.png

  1. 呼叫 Google Gemini API
    初始化函式，它會去讀取系統環境變數 GEMINI_API_KEY，取得我們的金鑰。

https://ithelp.ithome.com.tw/upload/images/20250926/20168630ED9oq2jPkY.png

  1. 使用 Google GenAI 進行圖片合成
    使用 Google GenAI 的 generate_content_stream 方法來處理圖片

https://ithelp.ithome.com.tw/upload/images/20250926/201686302PaYY8u2MI.png

  1. 處理 GenAI 回應
    將 GenAI 回應的圖片資料轉換為 base64 格式，並回傳給前端。

https://ithelp.ithome.com.tw/upload/images/20250926/20168630QzqRbMU0Xs.png


上一篇
DAY11
下一篇
DAY13
系列文
融合AI圖像生成技術的前端開發實戰 共 13 篇
  1. 9
    DAY9
  2. 10
    DAY10
  3. 11
    DAY11
  4. 12
    DAY12
  5. 13
    DAY13
完整目錄
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言
iThome鐵人賽
iThome鐵人賽
參賽組數
902 組
團體組數
37 組
累計文章數
12628 篇
完賽人數
109 人
iT+看影片追技術 看影片追技術 看更多
熱門tag 看更多
15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽 17th鐵人賽 鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# windows server linux css react
熱門問題
熱門回答
熱門文章
IT邦幫忙