function MainComponent() { const [loading, setLoading] = React.useState(false); const [chatResponse, setChatResponse] = React.useState(""); const [imageUrl, setImageUrl] = React.useState("./default-image.png"); const [translatedText, setTranslatedText] = React.useState(""); const [selectedMedicine, setSelectedMedicine] = React.useState(""); const [selectedQuantity, setSelectedQuantity] = React.useState(""); const handleChat = async ()=>{ setLoading(true); const response = await fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ { role: 'user', content: 'Hello, I need help.' } ], system_prompt: 'Provide assistance for ED treatment products' }) }); const data = await response.json(); setChatResponse(data.choices[0].message.content); setLoading(false); }; const handleGenerateImage = async ()=>{ const response = await fetch('/integrations/dall-e-3/?prompt=a+package+of+ED+treatment+medicine', { method: 'GET' }); const data = await response.json(); setImageUrl(data.data[0]); }; const handleTranslate = async ()=>{ const response = await fetch('/integrations/google-translate/language/translate/v2', { method: 'POST', headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, body: new URLSearchParams({ q: 'ED treatment online shop', target: 'ja' }) }); const data = await response.json(); setTranslatedText(data.data.translations[0].translatedText); }; const handleMedicineChange = (e)=>{ setSelectedMedicine(e.target.value); setSelectedQuantity(""); }; const handleQuantityChange = (e)=>{ setSelectedQuantity(e.target.value); }; const getQuantities = ()=>{ if (selectedMedicine === "setA" || selectedMedicine === "setB") { return [ "1セット", "2セット", "3セット" ]; } else if (selectedMedicine) { return [ "1錠", "2錠", "3錠", "4錠", "5錠", "6錠", "7錠", "8錠", "9錠", "10錠", "20錠", "30錠" ]; } return []; }; const quantities = getQuantities(); return /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-md mx-auto p-4 bg-gray-100", __source: { fileName: "", lineNumber: 66, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "text-center mb-6", __source: { fileName: "", lineNumber: 67, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold text-blue-700 font-roboto", __source: { fileName: "", lineNumber: 68, columnNumber: 9 }, __self: this }, "ED治療薬のECショップ")), /*#__PURE__*/ React.createElement("form", { className: "mb-4", __source: { fileName: "", lineNumber: 70, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block mb-2 font-roboto", __source: { fileName: "", lineNumber: 71, columnNumber: 9 }, __self: this }, "ED治療薬を選択"), /*#__PURE__*/ React.createElement("select", { name: "medicine", className: "w-full p-2 border border-gray-300 rounded mb-4", value: selectedMedicine, onChange: handleMedicineChange, __source: { fileName: "", lineNumber: 72, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "", __source: { fileName: "", lineNumber: 78, columnNumber: 11 }, __self: this }, "薬を選択してください"), /*#__PURE__*/ React.createElement("option", { value: "viagra20mg", __source: { fileName: "", lineNumber: 79, columnNumber: 11 }, __self: this }, "バイアグラ20mg"), /*#__PURE__*/ React.createElement("option", { value: "viagra50mg", __source: { fileName: "", lineNumber: 80, columnNumber: 11 }, __self: this }, "バイアグラ50mg"), /*#__PURE__*/ React.createElement("option", { value: "cialis10mg", __source: { fileName: "", lineNumber: 81, columnNumber: 11 }, __self: this }, "シアリス10mg"), /*#__PURE__*/ React.createElement("option", { value: "cialis20mg", __source: { fileName: "", lineNumber: 82, columnNumber: 11 }, __self: this }, "シアリス20mg"), /*#__PURE__*/ React.createElement("option", { value: "levitra10mg", __source: { fileName: "", lineNumber: 83, columnNumber: 11 }, __self: this }, "レビトラ10mg"), /*#__PURE__*/ React.createElement("option", { value: "levitra20mg", __source: { fileName: "", lineNumber: 84, columnNumber: 11 }, __self: this }, "レビトラ20mg"), /*#__PURE__*/ React.createElement("option", { value: "stendra200mg", __source: { fileName: "", lineNumber: 85, columnNumber: 11 }, __self: this }, "ステンドラ200mg"), /*#__PURE__*/ React.createElement("option", { value: "priligy60mg", __source: { fileName: "", lineNumber: 86, columnNumber: 11 }, __self: this }, "早漏防止プリリジー60mg"), /*#__PURE__*/ React.createElement("option", { value: "setA", __source: { fileName: "", lineNumber: 87, columnNumber: 11 }, __self: this }, "まとめておためしセットA"), /*#__PURE__*/ React.createElement("option", { value: "setB", __source: { fileName: "", lineNumber: 88, columnNumber: 11 }, __self: this }, "まとめておためしセットB")), selectedMedicine && /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 92, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block mb-2 font-roboto", __source: { fileName: "", lineNumber: 93, columnNumber: 13 }, __self: this }, "数量を選択"), /*#__PURE__*/ React.createElement("select", { name: "quantity", className: "w-full p-2 border border-gray-300 rounded mb-4", value: selectedQuantity, onChange: handleQuantityChange, __source: { fileName: "", lineNumber: 94, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "", __source: { fileName: "", lineNumber: 100, columnNumber: 15 }, __self: this }, "数量を選択してください"), quantities.map((qty)=>/*#__PURE__*/ React.createElement("option", { key: qty, value: qty, __source: { fileName: "", lineNumber: 102, columnNumber: 17 }, __self: this }, qty))))), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 108, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "w-full bg-blue-500 text-white p-2 rounded font-roboto", onClick: handleChat, __source: { fileName: "", lineNumber: 109, columnNumber: 9 }, __self: this }, loading ? "Loading..." : "Chat with us"), chatResponse && /*#__PURE__*/ React.createElement("p", { className: "text-center mt-2", __source: { fileName: "", lineNumber: 115, columnNumber: 26 }, __self: this }, chatResponse)), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 117, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: imageUrl, alt: "Generated image of ED treatment package", className: "w-full h-auto rounded", __source: { fileName: "", lineNumber: 118, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "w-full bg-yellow-500 text-white p-2 rounded mt-2 font-roboto", onClick: handleGenerateImage, __source: { fileName: "", lineNumber: 123, columnNumber: 9 }, __self: this }, "Generate Image")), /*#__PURE__*/ React.createElement("div", { className: "mb-4 text-center", __source: { fileName: "", lineNumber: 130, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "p-2 bg-green-500 text-white rounded font-roboto", onClick: handleTranslate, __source: { fileName: "", lineNumber: 131, columnNumber: 9 }, __self: this }, "Translate"), translatedText && /*#__PURE__*/ React.createElement("p", { className: "mt-2", __source: { fileName: "", lineNumber: 137, columnNumber: 28 }, __self: this }, translatedText)), /*#__PURE__*/ React.createElement("footer", { className: "text-center mt-6", __source: { fileName: "", lineNumber: 139, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-600 font-roboto", __source: { fileName: "", lineNumber: 140, columnNumber: 9 }, __self: this }, "© 2023 ED治療薬のECショップ"))); }