From 2cabb4540e631ec468fb0ae87a4c7db0edac8f1b Mon Sep 17 00:00:00 2001 From: Tsurubara-UTcode <168950066+Tsurubara-UTcode@users.noreply.github.com> Date: Sun, 1 Sep 2024 15:12:15 +0900 Subject: [PATCH 1/2] =?UTF-8?q?=E5=80=A4=E6=AE=B5=E6=A9=9F=E8=83=BD?= =?UTF-8?q?=E5=AE=9F=E8=A3=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/index.html | 1 + public/script.js | 211 +++++++++++++++++++++++++++++----------------- 2 files changed, 135 insertions(+), 77 deletions(-) diff --git a/public/index.html b/public/index.html index 15a108d..d9d4e71 100644 --- a/public/index.html +++ b/public/index.html @@ -110,6 +110,7 @@

AI チャット

+
diff --git a/public/script.js b/public/script.js index db5b864..7e0480b 100644 --- a/public/script.js +++ b/public/script.js @@ -4,8 +4,11 @@ const menu2Element = document.getElementById("menu2"); const menu3Element = document.getElementById("menu3"); 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) { @@ -38,18 +41,74 @@ async function postChat(request) { // 材料の配列から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'); @@ -58,15 +117,20 @@ function displayRecipeResponse(response) { const reducedIngredients = reduceIngredients(response, syokuzai); const remainIngredientsList = remainIngredients(response, syokuzai); - // レスポンスを適切にHTMLフォーマットに変換 - const formattedResponse = formatResponse(reducedIngredients); + // 残りの材料の詳細リストを生成 + const detailedIngredientsList = getDetailedIngredients(remainIngredientsList); - responseDisplayElement.innerHTML = `
    ${formattedResponse}
    `; + // detailedListに含まれる内容だけを表示 + responseDisplayElement.innerHTML = ` +
    ${detailedIngredientsList}
    + `; // レスポンスをそのまま表示する - console.log("減算された材料リスト:", remainIngredientsList); + console.log("詳細な材料リスト:", detailedIngredientsList); } + + // レスポンスをHTMLフォーマットに変換する関数 function formatResponse(response) { // 改行を
    タグに変換 @@ -79,6 +143,7 @@ function formatResponse(response) { return formatted; } + // displayMenu 関数 function displayMenu(menu1, menu2, menu3) { menu1Element.innerHTML = formatMenu(menu1); @@ -99,22 +164,9 @@ 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 choiceGenre = ["肉類", "野菜・果実類", "魚類", "乾物・海藻類", "きのこ・山菜類", "卵類", "いも類", "パン類", "ごはん類", "乳製品類", "豆・豆腐・豆腐加工品類", "麺類", "その他食材"]; - -// 各ジャンルに対応する食材リストをオブジェクトで定義 const ingredients = { "肉類": ["牛肉", "豚肉", "鶏肉", "ひき肉"], "野菜・果実類": ["キャベツ", "人参", "レタス", "白菜", "玉ねぎ", "長ネギ", "もやし", "トマト", "きゅうり", "なす", "ピーマン", "かぼちゃ", "大根", "レンコン", "アボカド"], @@ -156,6 +208,7 @@ choiceGenre.forEach((genre) => { } }; }); + const selectedIngredients = []; const showSelectedIngredients = document.getElementById("selectedIngredients"); @@ -196,73 +249,77 @@ 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); - // 必要に応じて他の処理を追加 - // 3つの献立をページの下部に表示 - displayMenu(menu1, menu2, menu3); + // 必要に応じて他の処理を追加 + // 3つの献立をページの下部に表示 + displayMenu(menu1, menu2, menu3); }; +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('http://localhost:3000/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('http://localhost:3000/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(); From 780d4428af54f571eb8943b49320a23c220bd994 Mon Sep 17 00:00:00 2001 From: Tsurubara-UTcode <168950066+Tsurubara-UTcode@users.noreply.github.com> Date: Sun, 1 Sep 2024 15:34:49 +0900 Subject: [PATCH 2/2] =?UTF-8?q?=E7=B4=B0=E3=81=8B=E3=81=84=E9=83=A8?= =?UTF-8?q?=E5=88=86=E3=81=AE=E4=BF=AE=E6=AD=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/index.html | 1 + 1 file changed, 1 insertion(+) diff --git a/public/index.html b/public/index.html index d9d4e71..c28255e 100644 --- a/public/index.html +++ b/public/index.html @@ -108,6 +108,7 @@

    AI チャット

    +