diff --git a/public/script.js b/public/script.js
index a151781..5bb0672 100644
--- a/public/script.js
+++ b/public/script.js
@@ -7,8 +7,11 @@ const menuImageElement2 = document.getElementById("menu-img2");
const menuImageElement3 = document.getElementById("menu-img3");
const chatMessageTemplateElement = document.getElementById("chat-message-template");
const submitButtonElement = document.getElementById("submit-button");
-const syokuzai = ["豚肉", "鯖", "ごはん", "味噌", "タマネギ", "人参", "じゃがいも", "砂糖", "塩","醤油","ごま油","ミカン"];
-const nedan = [300, 200, 300, 300];
+const syokuzai = ["ピーマン", '塩', '豆苗', '長なす', 'じゃがいも(メークイン）', '玉ねぎ(アーリーレッド)', '大根', 'ごぼう', 'インゲン', 'にんじん', '長芋', '大根', '枝豆', 'スナップエンドウ', 'ズッキーニ', 'ゴーヤ', 'とうもろこし', 'きぬさや', '大和芋', 'さつまいも(紅はるか)', '舞茸', 'えのき茸', 'なめこ', 'エリンギ', 'ブラウンマッシュルーム', 'ホワイトマッシュルーム', '肉厚生しいたけ', '生しいたけ', '霜降りひらたけ', '生きくらげ', '長ねぎ2本・1束', '長ねぎ', 'にら', 'にんにくの芽', 'ししとう', 'しょうが', 'にんにく', '大葉(しそ)', 'みょうが', 'きざみ小ねぎ', 'きざみ長ねぎ', 'パセリ', '糸みつば', '小ねぎ'];
+let name_data = [];
+let nedan_data = [];
+let RemainedIngredientsList = [];
+
// メッセージを画面に描画する
function addChatMessageElement(author, chatMessage) {
@@ -65,18 +68,74 @@ async function generateMenuImages(menu, imgNum) {
// 材料の配列からsyokuzaiの要素を減算する関数
function reduceIngredients(ingredientsText, syokuzai) {
- const ingredientsList = ingredientsText.split('・').map(item => item.trim());
- const reducedList = ingredientsList.filter(item => !syokuzai.includes(item));
+ const ingredientsList1 = ingredientsText.split('・').map(item => item.trim());
+ const reducedList = ingredientsList1.filter(item => !syokuzai.includes(item));
return reducedList.join('・');
}
// 材料の配列からsyokuzaiの要素を残す関数
function remainIngredients(ingredientsText, syokuzai) {
- const IngredientsList = ingredientsText.split('・').map(item => item.trim());
- const remainList = IngredientsList.filter(item => syokuzai.includes(item));
+ const ingredientsList2 = ingredientsText.split('・').map(item => item.trim());
+ const remainList = ingredientsList2.filter(item => syokuzai.includes(item));
+ console.log(remainList);
return remainList.join('・');
}
+// 材料と価格の詳細リストを取得する関数
+function getDetailedIngredients(ingredientsText) {
+ const ingredientsList3 = ingredientsText.split('・').map(item => item.trim());
+ console.log(ingredientsText);
+ console.log(ingredientsList3);
+ let localDetailedList = ``; // localDetailedListに変更
+ let sum_price=0;
+
+ ingredientsList3.forEach(item => {
+ let index = name_data.indexOf(item);
+ if (index !== -1) {
+ localDetailedList += `${item} - ${nedan_data[index]}円`;
+ sum_price += Number(nedan_data[index]);
+ }
+ });
+ localDetailedList += `合計 - ${sum_price}円`
+
+ console.log(localDetailedList); // ログで内容を確認
+ return ``;
+}
+
+// レシピリクエストを送信する関数
+async function sendRecipeRequest(menu) {
+ const promptText = `${menu} この献立の料理のレシピの材料を送信してください。ただし数量や料理名は表示しないかつ、材料は必ず・で箇条書きしてください。食材の書き方は${name_data}の書き方に基づいてください。`;
+
+ const aiResponse = await postChat({ promptText });
+ console.log(aiResponse);
+
+ // レスポンスをページ上の指定された場所に表示
+ const response = aiResponse.content;
+ const reducedIngredientsList = reduceIngredients(response, syokuzai);
+ const remainIngredientsList = remainIngredients(response, syokuzai);
+
+ // 残りの材料の詳細リストを生成
+ let detailedIngredientsList = getDetailedIngredients(reducedIngredientsList);
+ RemainedIngredientsList = getDetailedIngredients(remainIngredientsList);
+
+
+
+ // detailedListに含まれる内容だけを表示
+ document.getElementById('response-display').innerHTML = `
+ ${detailedIngredientsList}
+ ${remainIngredientsList}
+
+ `;
+
+ console.log("詳細な材料リスト:", detailedIngredientsList);
+ console.log(RemainedIngredientsList)
+}
+
+// 初期化時にデータを取得
+fetchProducts().then(() => {
+ // データ取得後の処理があればここに記述
+});
+
// レシピのレスポンスをHTMLで整形して表示する関数
function displayRecipeResponse(response) {
const responseDisplayElement = document.getElementById('response-display');
@@ -85,14 +144,18 @@ function displayRecipeResponse(response) {
const reducedIngredients = reduceIngredients(response, syokuzai);
const remainIngredientsList = remainIngredients(response, syokuzai);
- // レスポンスを適切にHTMLフォーマットに変換
- const formattedResponse = formatResponse(reducedIngredients);
+ // 残りの材料の詳細リストを生成
+ const detailedIngredientsList = getDetailedIngredients(remainIngredientsList);
+
+
+ // detailedListに含まれる内容だけを表示
+ responseDisplayElement.innerHTML = `
+ ${detailedIngredientsList}
+ `;
- responseDisplayElement.innerHTML = `${formattedResponse}
`;
- responseDisplayElement.style.display = "block"
// レスポンスをそのまま表示する
- console.log("減算された材料リスト:", remainIngredientsList);
+ console.log("詳細な材料リスト:", detailedIngredientsList);
}
@@ -108,6 +171,7 @@ function formatResponse(response) {
return formatted;
}
+
// displayMenu 関数
function displayMenu(menu1, menu2, menu3) {
menu1Element.innerHTML = formatMenu(menu1);
@@ -132,18 +196,7 @@ function formatMenu(menu) {
return menu.replace(/#/g, '
#');
}
-// レシピリクエストを送信する関数
-async function sendRecipeRequest(menu) {
- const promptText = `${menu} この献立の料理のレシピの材料を送信してください。ただし数量や料理名は表示しないかつ、材料は必ず・で箇条書きしてください。食材の書き方は${syokuzai}の書き方に基づいてください。`;
-
- const aiResponse = await postChat({ promptText });
- console.log(aiResponse);
- // レスポンスをページ上の指定された場所に表示
- displayRecipeResponse(aiResponse.content);
-}
-
-// ボタン作成のコード（省略）
-
+// ボタン作成のコード
const createButton = document.getElementById("selectButton");
const selectButton2 = document.getElementById("selectButton2")
const choiceGenre = ["肉類", "野菜・果実類", "魚類", "乾物・海藻類", "きのこ・山菜類", "卵類", "いも類", "パン類", "ごはん類", "乳製品類", "豆・豆腐・豆腐加工品類", "麺類"];
@@ -190,6 +243,7 @@ choiceGenre.forEach((genre) => {
}
};
});
+
const selectedIngredients = [];
const showSelectedIngredients = document.getElementById("selectedIngredients");
@@ -230,37 +284,37 @@ document.addEventListener('click', function(event) {
});
submitButtonElement.onclick = async () => {
- const cookTime = document.getElementById("cook-time-slider").value;
- const peopleNumber = document.getElementById("people-number-slider").value;
- const otherRequest = document.getElementById("more-request-message").value;
- const otherMenu = document.getElementById("tuika").value;
+ const cookTime = document.getElementById("cook-time-slider").value;
+ const peopleNumber = document.getElementById("people-number-slider").value;
+ const otherRequest = document.getElementById("more-request-message").value;
+ const otherMenu = document.getElementById("tuika").value;
- const menuCheckedBoxes = document.querySelectorAll('input[name="dish"]:checked');
+ const menuCheckedBoxes = document.querySelectorAll('input[name="dish"]:checked');
- // チェックがついたチェックボックスの値を配列に変換
- const menuList = Array.from(menuCheckedBoxes).map(checkbox => checkbox.value);
+ // チェックがついたチェックボックスの値を配列に変換
+ const menuList = Array.from(menuCheckedBoxes).map(checkbox => checkbox.value);
- // 配列をコンソールに出力
- console.log(menuList);
+ // 配列をコンソールに出力
+ console.log(menuList);
- const promptText = selectedIngredients.join("と") + "を用いた主菜を含む一食の献立を3つ提案してください。ただし、一つ一つの献立の始めには###を、終わりには---をつけて、わかりやすく表示してください。また、材料やレシピは表示せず、料理名のみ出力してください。ただし、献立の条件を以下のようにします。#調理時間は"+cookTime+"分以内であること。 #" + peopleNumber + "人分であること。 #" + menuList.join("と")+ "と他" + otherMenu + "品で構成されていること。 #" + otherRequest;
- const aiChatMessage = await postChat({ promptText });
- addChatMessageElement("you", { content: promptText });
- addChatMessageElement("ai", aiChatMessage);
- const responseString = aiChatMessage.content;
- console.log(responseString); // これで返答をstring形式で取得できます
+ const promptText = `${selectedIngredients.join("と")}を用いた主菜を含む一食の献立を3つ提案してください。ただし、一つ一つの献立の始めには###を、終わりには---をつけて、わかりやすく表示してください。また、材料やレシピは表示せず、料理名のみ出力してください。ただし、献立の条件を以下のようにします。#調理時間は${cookTime}分以内であること。 #${peopleNumber}人分であること。 #${menuList.join("と")}と他${otherMenu}品で構成されていること。 #${otherRequest}`;
+ const aiChatMessage = await postChat({ promptText });
+ addChatMessageElement("you", { content: promptText });
+ addChatMessageElement("ai", aiChatMessage);
+ const responseString = aiChatMessage.content;
+ console.log(responseString); // これで返答をstring形式で取得できます
- // 献立を3つに分割（改行文字 "\n\n" を基準に分割する例）
- const menuItems = responseString.match(/###([\s\S]*?)---/g).map(item => item.replace(/###|---/g, '').trim());
+ // 献立を3つに分割（改行文字 "\n\n" を基準に分割する例）
+ const menuItems = responseString.match(/###([\s\S]*?)---/g).map(item => item.replace(/###|---/g, '').trim());
- // 分割した献立をそれぞれ個別に保存または処理
- const menu1 = menuItems[0];
- const menu2 = menuItems[1];
- const menu3 = menuItems[2];
+ // 分割した献立をそれぞれ個別に保存または処理
+ const menu1 = menuItems[0];
+ const menu2 = menuItems[1];
+ const menu3 = menuItems[2];
- console.log("献立 1:", menu1);
- console.log("献立 2:", menu2);
- console.log("献立 3:", menu3);
+ console.log("献立 1:", menu1);
+ console.log("献立 2:", menu2);
+ console.log("献立 3:", menu3);
displayMenu(menu1, menu2, menu3);
@@ -271,36 +325,41 @@ submitButtonElement.onclick = async () => {
// 3つの献立をページの下部に表示
};
+const cookTimeSlider = document.getElementById("cook-time-slider");
+const peopleNumberSlider = document.getElementById("people-number-slider");
+const cookTimeDisplay = document.getElementById('cook-time-display');
+const peopleNumberDisplay = document.getElementById('people-number-display');
- const cookTimeSlider = document.getElementById("cook-time-slider");
- const peopleNumberSlider = document.getElementById("people-number-slider");
- const cookTimeDisplay = document.getElementById('cook-time-display');
- const peopleNumberDisplay = document.getElementById('people-number-display');
+// 初期表示
+cookTimeDisplay.textContent = cookTimeSlider.value + "分以内";
+peopleNumberDisplay.textContent = peopleNumberSlider.value + "人";
- // 初期表示
- cookTimeDisplay.textContent = cookTimeSlider.value + "分以内";
- peopleNumberDisplay.textContent = peopleNumberSlider.value + "人";
+// イベントリスナーを追加
+cookTimeSlider.addEventListener('input', function() {
+ cookTimeDisplay.textContent = this.value + "分以内";
+});
- // イベントリスナーを追加
- cookTimeSlider.addEventListener('input', function() {
- cookTimeDisplay.textContent = this.value + "分以内";
- });
+peopleNumberSlider.addEventListener('input', function() {
+ peopleNumberDisplay.textContent = this.value + "人";
+});
- peopleNumberSlider.addEventListener('input', function() {
- peopleNumberDisplay.textContent = this.value + "人";
- });
- async function fetchProducts() {
- try {
- const response = await fetch('/products');
- if (!response.ok) {
- throw new Error(`HTTP error! Status: ${response.status}`);
- }
- let data = await response.json();
- console.log('Fetched data:', data);
- } catch (error) {
- console.error('Error fetching data:', error);
+async function fetchProducts() {
+ try {
+ const response = await fetch('/products');
+ if (!response.ok) {
+ throw new Error(`HTTP error! Status: ${response.status}`);
}
+ let data = await response.json();
+ name_data = data.map(item => item.name);
+ nedan_data = data.map(item => item.price);
+
+ console.log('Name data:', name_data);
+ console.log('Nedan data:', nedan_data);
+ } catch (error) {
+ console.error('Error fetching data:', error);
}
+}
- fetchProducts();
+// 初期化時にデータを取得
+fetchProducts();