function MainComponent() { const [ingredients, setIngredients] = React.useState(""); const [loading, setLoading] = React.useState(false); const [recipe, setRecipe] = React.useState(""); const [image, setImage] = React.useState(""); const handleGenerateRecipe = async ()=>{ setLoading(true); const chatGptResponse = await fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ { role: 'user', content: `材料を使って簡単料理のレシピを作ってください：${ingredients}` } ], system_prompt: 'Explain this content' }) }); const chatGptResult = await chatGptResponse.json(); const recipeContent = chatGptResult.choices[0].message.content; setRecipe(recipeContent); const promptForImage = `${recipeContent}に含まれる材料で作られた料理の画像`; const dallEResponse = await fetch(`/integrations/dall-e-3/?prompt=${encodeURIComponent(promptForImage)}`, { method: 'GET' }); const dallEResult = await dallEResponse.json(); const imageUrl = dallEResult.data[0]; setImage(imageUrl); setLoading(false); }; const handleReset = ()=>{ setIngredients(""); setRecipe(""); setImage(""); }; return /*#__PURE__*/ React.createElement("div", { className: "bg-[#fff5e1] min-h-screen flex flex-col items-center justify-center p-8", __source: { fileName: "", lineNumber: 46, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-5xl mb-4 font-crimson-text", __source: { fileName: "", lineNumber: 47, columnNumber: 7 }, __self: this }, "余った食材で作る料理レシピ"), /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-[600px] bg-white shadow-md rounded-lg p-6 mb-4", __source: { fileName: "", lineNumber: 50, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-3xl mb-2 font-crimson-text", __source: { fileName: "", lineNumber: 51, columnNumber: 9 }, __self: this }, "材料"), /*#__PURE__*/ React.createElement("textarea", { name: "ingredients", className: "w-full h-[100px] p-2 border border-gray-300 rounded-md mb-4 font-crimson-text", value: ingredients, onChange: (e)=>setIngredients(e.target.value), placeholder: "材料を入力してください...", __source: { fileName: "", lineNumber: 54, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex space-x-4", __source: { fileName: "", lineNumber: 61, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: handleGenerateRecipe, className: "bg-[#ffa07a] text-white py-2 px-4 rounded-lg font-crimson-text", __source: { fileName: "", lineNumber: 62, columnNumber: 11 }, __self: this }, loading ? "生成中..." : "レシピを生成する"), /*#__PURE__*/ React.createElement("button", { onClick: handleReset, className: "bg-gray-400 text-white py-2 px-4 rounded-lg font-crimson-text", __source: { fileName: "", lineNumber: 68, columnNumber: 11 }, __self: this }, "リセット"))), recipe && /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-[600px] bg-white shadow-md rounded-lg p-6 mb-4", __source: { fileName: "", lineNumber: 78, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-3xl mb-2 font-crimson-text", __source: { fileName: "", lineNumber: 79, columnNumber: 11 }, __self: this }, "手順"), /*#__PURE__*/ React.createElement("p", { className: "font-crimson-text whitespace-pre-line", __source: { fileName: "", lineNumber: 82, columnNumber: 11 }, __self: this }, recipe)), image && /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-[600px] bg-white shadow-md rounded-lg p-6", __source: { fileName: "", lineNumber: 87, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-3xl mb-2 font-crimson-text", __source: { fileName: "", lineNumber: 88, columnNumber: 11 }, __self: this }, "画像"), /*#__PURE__*/ React.createElement("img", { src: image, alt: "料理の画像", className: "w-full h-auto rounded-md", __source: { fileName: "", lineNumber: 91, columnNumber: 11 }, __self: this }))); }