經過前幾天的實作，AI Recipe 網站已經可以接收使用者輸入的食材，也能將食材整理後顯示在畫面上。

今天要讓網站更進一步：根據使用者輸入的食材，顯示一份推薦食譜。

目前還沒有串接真正的 AI，因此先使用預先準備好的食譜資料，模擬推薦功能。

一、為什麼先使用預設資料？

在正式串接 AI API 之前，先確認網站本身的操作流程是很重要的。

如果輸入、判斷和顯示結果都能正常運作，之後就可以把預設資料替換成 AI 回傳的內容。

二、準備食譜資料

在 script.js 中加入以下資料：

const recipes = [
{
name: "番茄炒蛋",
ingredients: ["番茄", "雞蛋"],
steps: "將番茄切塊，炒熟雞蛋後加入番茄拌炒。",
},
{
name: "蔥花煎蛋",
ingredients: ["雞蛋", "蔥"],
steps: "將雞蛋打散，加入蔥花，再放入鍋中煎熟。",
},
{
name: "洋蔥炒蛋",
ingredients: ["雞蛋", "洋蔥"],
steps: "將洋蔥切絲炒軟，加入蛋液並炒至熟透。",
}
];

這裡建立了一個名為 recipes 的陣列，每份食譜都有名稱、所需食材和料理步驟。

三、加入推薦邏輯

先在 HTML 裡加入顯示推薦結果的區域：

最後，在 Day 7 的按鈕事件中，完成食材整理後加入：

recommendRecipe(ingredients);

這樣當使用者輸入符合條件的食材時，網站就會顯示對應的食譜。

四、今天的成果

今天完成了第一個簡單的食譜推薦原型！

不過要特別注意，目前的推薦方式只是比對預先設定的食譜，並不是 AI 自動生成內容。

這個版本的優點是容易理解，也能先測試網站的基本流程。

下一篇會繼續改善食譜的顯示方式，讓推薦結果看起來更清楚、更有條理。