▶️ 單元展示
📒 單元說明
本單元將設計一個簡易的 AI 食譜建議頁面,讓使用者輸入某一食材名稱,按下按鈕後,即可透過對話機器人(如 Google Gemini)取得推薦的餐點名稱與烹飪方式。
📒 系統拆解
為了完成本單元任務,可以將整體系統拆解為以下五個步驟:
畫面編排:建立 AI 食譜建議畫面,包含「文字輸入框」、「按鈕元件」與「標籤元件」,讓使用者能輸入食材名稱,並顯示 AI 回應的建議內容。
取得 Gemini 金鑰:前往 Google 的 Gemini API 官方網站,取得API 金鑰,用於與生成式 AI 進行連線與對話。
設定對話機器人元件:新增【對話機器人】元件,做為與生成式 AI 互動的介面,處理提問與回覆。
設定提問內容與呼叫對話:當使用者按下「取得建議」按鈕時,將輸入的食材轉換為具體問題文字,呼叫對話機器人元件並傳送問題。
顯示 AI 回覆內容:取得 AI 回應後,將結果顯示於標籤元件中,讓使用者能看到根據輸入食材所生成的餐點建議。