function MainComponent() { const [alcoholType, setAlcoholType] = React.useState(''); const [dishName, setDishName] = React.useState(''); const [dishImage, setDishImage] = React.useState(null); const [pairingResult, setPairingResult] = React.useState(''); const [isLoading, setIsLoading] = React.useState(false); const handleAlcoholChange = (e)=>setAlcoholType(e.target.value); const handleDishNameChange = (e)=>setDishName(e.target.value); const handleImageUpload = (e)=>setDishImage(e.target.files[0]); const handlePairingStart = async ()=>{ if (!alcoholType || !dishName && !dishImage) { alert('お酒の種類と料理名または画像を入力してください。'); return; } setIsLoading(true); const messages = [ { role: 'user', content: `お酒の種類: ${alcoholType}, 料理: ${dishName || '画像あり'}. このお酒と料理の最適なペアリングを提案してください。お酒の名前と特徴を含めてください。` } ]; try { const response = await fetch('/integrations/google-gemini-1-5/', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages }) }); const data = await response.json(); setPairingResult(data.choices[0].message.content); } catch (error) { console.error('Error:', error); setPairingResult('ペアリング結果の取得に失敗しました。'); } finally{ setIsLoading(false); } }; return /*#__PURE__*/ React.createElement("div", { className: "bg-white min-h-screen font-shippori-mincho text-black", __source: { fileName: "", lineNumber: 43, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl text-center py-8 font-bold", __source: { fileName: "", lineNumber: 44, columnNumber: 7 }, __self: this }, "日本独自のお酒ペアリングサービス"), /*#__PURE__*/ React.createElement("div", { className: "w-full mb-8", __source: { fileName: "", lineNumber: 46, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "https://ucarecdn.com/7b55e7c7-48d7-4d6f-9770-a97404b6be5e/-/format/auto/", alt: "日本酒を優雅に注ぐ様子", className: "w-full object-cover", __source: { fileName: "", lineNumber: 47, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "max-w-2xl mx-auto px-4", __source: { fileName: "", lineNumber: 50, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 51, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block mb-2 text-lg", __source: { fileName: "", lineNumber: 52, columnNumber: 11 }, __self: this }, "お酒の種類:"), /*#__PURE__*/ React.createElement("div", { className: "flex space-x-4", __source: { fileName: "", lineNumber: 53, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setAlcoholType('日本酒'), className: `flex-1 p-6 border border-black rounded text-2xl ${alcoholType === '日本酒' ? 'bg-black text-white' : 'bg-white text-black'} flex items-center justify-center`, __source: { fileName: "", lineNumber: 54, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "https://ucarecdn.com/36a9eb2f-1e17-4c98-82ac-92271019967a/-/format/auto/", alt: "日本酒ロゴ", className: "w-12 h-12 mr-3", __source: { fileName: "", lineNumber: 58, columnNumber: 15 }, __self: this }), "日本酒"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setAlcoholType('缶チューハイ'), className: `flex-1 p-6 border border-black rounded text-2xl ${alcoholType === '缶チューハイ' ? 'bg-black text-white' : 'bg-white text-black'} flex items-center justify-center`, __source: { fileName: "", lineNumber: 61, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "https://ucarecdn.com/50b2302e-507c-4a80-9dc5-19fcdf8d1f5c/-/format/auto/", alt: "缶チューハイロゴ", className: "w-12 h-12 mr-3", __source: { fileName: "", lineNumber: 65, columnNumber: 15 }, __self: this }), "缶チューハイ"))), /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 71, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block mb-2 text-lg", __source: { fileName: "", lineNumber: 72, columnNumber: 11 }, __self: this }, "料理名:"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "dishName", onChange: handleDishNameChange, value: dishName, className: "w-full p-2 border border-gray-300 rounded bg-white", __source: { fileName: "", lineNumber: 73, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 76, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block mb-2 text-lg", __source: { fileName: "", lineNumber: 77, columnNumber: 11 }, __self: this }, "料理の画像:"), /*#__PURE__*/ React.createElement("input", { type: "file", name: "dishImage", onChange: handleImageUpload, accept: "image/*", className: "w-full p-2 border border-gray-300 rounded bg-white", __source: { fileName: "", lineNumber: 78, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("button", { onClick: handlePairingStart, disabled: isLoading, className: "w-full bg-black text-white py-3 rounded hover:bg-gray-800 transition duration-300", __source: { fileName: "", lineNumber: 81, columnNumber: 9 }, __self: this }, isLoading ? 'ペアリング中...' : 'ペアリングスタート'), pairingResult && /*#__PURE__*/ React.createElement("div", { className: "mt-8 p-4 border border-gray-300 rounded bg-white", __source: { fileName: "", lineNumber: 86, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl mb-4", __source: { fileName: "", lineNumber: 87, columnNumber: 13 }, __self: this }, "ペアリング結果"), /*#__PURE__*/ React.createElement("p", { className: "whitespace-pre-wrap", __source: { fileName: "", lineNumber: 88, columnNumber: 13 }, __self: this }, pairingResult))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 93, columnNumber: 7 }, __self: this }, ` @import url('https://fonts.googleapis.com/css2?family=Shippori+Mincho:wght@400;700&display=swap'); .font-shippori-mincho { font-family: 'Shippori Mincho', serif; } `)); }