Skip to content

Small bugs #23

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Tsurubara-UTcode wants to merge 3 commits into
base: main
Choose a base branch
from
Open

Small bugs #23

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
2cabb45
値段機能実装
Tsurubara-UTcode Sep 1, 2024
780d442
細かい部分の修正
Tsurubara-UTcode Sep 1, 2024
c4b8e0f
Merge branch 'main' into small-bugs
GuY8528 Sep 1, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
203 changes: 131 additions & 72 deletions public/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand Down Expand Up @@ -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 += `<li>${item} - ${nedan_data[index]}円</li>`;
sum_price += Number(nedan_data[index]);
}
});
localDetailedList += `<li>合計 - ${sum_price}円</li>`

console.log(localDetailedList); // ログで内容を確認
return `<ul>${localDetailedList}</ul>`;
}

// レシピリクエストを送信する関数
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 = `
<div class="recipe-box">${detailedIngredientsList}
<span style="color: red;">${remainIngredientsList}</span>
</div>
`;

console.log("詳細な材料リスト:", detailedIngredientsList);
console.log(RemainedIngredientsList)
}

// 初期化時にデータを取得
fetchProducts().then(() => {
// データ取得後の処理があればここに記述
});

// レシピのレスポンスをHTMLで整形して表示する関数
function displayRecipeResponse(response) {
const responseDisplayElement = document.getElementById('response-display');
Expand All @@ -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 = `
<div class="recipe-box">${detailedIngredientsList}</div>
`;

responseDisplayElement.innerHTML = `<div class="recipe-box">${formattedResponse}</div>`;
responseDisplayElement.style.display = "block"

// レスポンスをそのまま表示する
console.log("減算された材料リスト:", remainIngredientsList);
console.log("詳細な材料リスト:", detailedIngredientsList);
}


Expand All @@ -108,6 +171,7 @@ function formatResponse(response) {
return formatted;
}


// displayMenu 関数
function displayMenu(menu1, menu2, menu3) {
menu1Element.innerHTML = formatMenu(menu1);
Expand All @@ -132,18 +196,7 @@ function formatMenu(menu) {
return menu.replace(/#/g, '<br/>#');
}

// レシピリクエストを送信する関数
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 = ["肉類", "野菜・果実類", "魚類", "乾物・海藻類", "きのこ・山菜類", "卵類", "いも類", "パン類", "ごはん類", "乳製品類", "豆・豆腐・豆腐加工品類", "麺類"];
Expand Down Expand Up @@ -190,6 +243,7 @@ choiceGenre.forEach((genre) => {
}
};
});

const selectedIngredients = [];
const showSelectedIngredients = document.getElementById("selectedIngredients");

Expand Down Expand Up @@ -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);

Expand All @@ -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();