目前網站已經能根據使用者輸入的食材產生料理建議。

不過，每個人的飲食喜好不同，有些人喜歡台式料理，有些人則偏好日式或韓式料理。

因此，今天要加入料理類型選擇功能。

一、建立下拉式選單

在 HTML 中加入：

<label for="cuisine">料理類型：</label>

<select id="cuisine">
    <option value="不限">不限</option>
    <option value="台式">台式</option>
    <option value="日式">日式</option>
    <option value="韓式">韓式</option>
    <option value="義式">義式</option>
</select>

二、取得使用者選擇

在 JavaScript 中取得選單：

const cuisineSelect =
    document.querySelector("#cuisine");

當使用者按下推薦按鈕時，可以取得選擇的料理類型：

const cuisine = cuisineSelect.value;

接著將它加入傳送給後端的需求內容：

const query =
    `請使用這些食材推薦料理：${ingredients.join("、")}。
     希望料理類型為：${cuisine}。`;

實際使用時，可以將 query 一起傳送給後端，再由後端轉交給 AI。

三、今天的成果

今天完成了料理類型選擇介面，讓使用者除了輸入食材，也能指定希望推薦的料理風格。

這樣 AI 就能根據更多條件產生回答。

下一篇要繼續增加料理時間限制，讓推薦結果更符合使用者當下的需求。