function MainComponent() { const [response, setResponse] = React.useState(null); const [loading, setLoading] = React.useState(false); const [ingredients, setIngredients] = React.useState([]); const [ingredient, setIngredient] = React.useState({ name: '', amount: '', unit: '個数' }); const handleInputChange = (e)=>{ const { name, value } = e.target; setIngredient({ ...ingredient, [name]: value }); }; const addIngredient = ()=>{ if (ingredients.length < 20) { setIngredients([ ...ingredients, ingredient ]); setIngredient({ name: '', amount: '', unit: '個数' }); } }; const removeIngredient = (index)=>{ const newIngredients = ingredients.slice(); newIngredients.splice(index, 1); setIngredients(newIngredients); }; const handleRequest = ()=>{ setLoading(true); fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ { role: 'user', content: `Please provide a recipe and nutritional information for the following ingredients: ${JSON.stringify(ingredients)}` } ], system_prompt: 'Explain this content' }) }).then((response)=>response.json()).then((data)=>{ setResponse(data.choices[0].message.content); setLoading(false); }); }; return /*#__PURE__*/ React.createElement("div", { className: "font-sans", __source: { fileName: "", lineNumber: 50, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "flex justify-between items-center p-4 bg-[#f8fafc] shadow", __source: { fileName: "", lineNumber: 51, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-2xl font-bold cursor-pointer", __source: { fileName: "", lineNumber: 52, columnNumber: 9 }, __self: this }, "冷蔵庫システム"), /*#__PURE__*/ React.createElement("nav", { className: "space-x-4", __source: { fileName: "", lineNumber: 53, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", className: "text-lg", __source: { fileName: "", lineNumber: 54, columnNumber: 11 }, __self: this }, "ホーム"), /*#__PURE__*/ React.createElement("a", { href: "#", className: "text-lg", __source: { fileName: "", lineNumber: 55, columnNumber: 11 }, __self: this }, "機能紹介"))), /*#__PURE__*/ React.createElement("main", { className: "p-8", __source: { fileName: "", lineNumber: 58, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("section", { className: "mb-8", __source: { fileName: "", lineNumber: 59, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-3xl font-bold mb-4", __source: { fileName: "", lineNumber: 60, columnNumber: 11 }, __self: this }, "食材を入力してください"), /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap space-x-4 mb-4", __source: { fileName: "", lineNumber: 61, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { name: "name", value: ingredient.name, onChange: handleInputChange, className: "border p-2 w-[200px] mb-2", placeholder: "食材名", __source: { fileName: "", lineNumber: 62, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("input", { name: "amount", value: ingredient.amount, onChange: handleInputChange, className: "border p-2 w-[100px] mb-2", placeholder: "数量", __source: { fileName: "", lineNumber: 69, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("select", { name: "unit", value: ingredient.unit, onChange: handleInputChange, className: "border p-2 w-[100px] mb-2", __source: { fileName: "", lineNumber: 76, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "個数", __source: { fileName: "", lineNumber: 82, columnNumber: 15 }, __self: this }, "個数"), /*#__PURE__*/ React.createElement("option", { value: "グラム", __source: { fileName: "", lineNumber: 83, columnNumber: 15 }, __self: this }, "グラム"), /*#__PURE__*/ React.createElement("option", { value: "ミリリットル", __source: { fileName: "", lineNumber: 84, columnNumber: 15 }, __self: this }, "ミリリットル")), /*#__PURE__*/ React.createElement("button", { onClick: addIngredient, className: "bg-[#007bff] text-white py-2 px-4 rounded hover:bg-[#0056b3] mb-2", __source: { fileName: "", lineNumber: 86, columnNumber: 13 }, __self: this }, "追加")), /*#__PURE__*/ React.createElement("ul", { className: "mb-4", __source: { fileName: "", lineNumber: 88, columnNumber: 11 }, __self: this }, ingredients.map((ing, index)=>/*#__PURE__*/ React.createElement("li", { key: index, className: "flex space-x-4 items-center mb-2", __source: { fileName: "", lineNumber: 90, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 91, columnNumber: 17 }, __self: this }, ing.name), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 92, columnNumber: 17 }, __self: this }, ing.amount, " ", ing.unit), /*#__PURE__*/ React.createElement("button", { onClick: ()=>removeIngredient(index), className: "bg-[#dc3545] text-white py-1 px-2 rounded hover:bg-[#c82333]", __source: { fileName: "", lineNumber: 93, columnNumber: 17 }, __self: this }, "削除")))), /*#__PURE__*/ React.createElement("button", { onClick: handleRequest, className: "bg-[#28a745] text-white py-2 px-4 rounded hover:bg-[#218838]", __source: { fileName: "", lineNumber: 97, columnNumber: 11 }, __self: this }, "献立提案"), loading && /*#__PURE__*/ React.createElement("div", { className: "mt-4 text-center", __source: { fileName: "", lineNumber: 98, columnNumber: 23 }, __self: this }, "読み込み中...")), response && /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("section", { className: "mb-8", __source: { fileName: "", lineNumber: 102, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-3xl font-bold mb-4", __source: { fileName: "", lineNumber: 103, columnNumber: 15 }, __self: this }, "提案された献立"), /*#__PURE__*/ React.createElement("div", { className: "p-4 border rounded", __source: { fileName: "", lineNumber: 104, columnNumber: 15 }, __self: this }, response)), /*#__PURE__*/ React.createElement("section", { __source: { fileName: "", lineNumber: 106, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-3xl font-bold mb-4", __source: { fileName: "", lineNumber: 107, columnNumber: 15 }, __self: this }, "栄養素分析"), /*#__PURE__*/ React.createElement("div", { className: "p-4 border rounded", __source: { fileName: "", lineNumber: 108, columnNumber: 15 }, __self: this }, "カロリー, タンパク質, 脂質, 炭水化物を含む主要栄養素がここに表示されます。")))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 115, columnNumber: 7 }, __self: this }, ` .cursor-pointer:hover { color: #007bff; } input:focus, select:focus { outline: none; border-color: #007bff; box-shadow: 0 0 5px rgba(0, 123, 255, 0.5); } button:focus { outline: none; box-shadow: 0 0 5px rgba(0, 123, 255, 0.5); } `)); }