function MainComponent() { const [loading, setLoading] = React.useState(false); const [result, setResult] = React.useState(""); const [darkMode, setDarkMode] = React.useState(false); const handleCompare = async ()=>{ const price1 = parseFloat(document.querySelector("input[name='price1']").value); const taxIncluded1 = document.querySelector("input[name='tax_included1']").checked; const quantity1 = parseFloat(document.querySelector("input[name='quantity1']").value); const price2 = parseFloat(document.querySelector("input[name='price2']").value); const taxIncluded2 = document.querySelector("input[name='tax_included2']").checked; const quantity2 = parseFloat(document.querySelector("input[name='quantity2']").value); const finalPrice1 = taxIncluded1 ? price1 : price1 * 1.08; const finalPrice2 = taxIncluded2 ? price2 : price2 * 1.08; const costPerGram1 = finalPrice1 / quantity1; const costPerGram2 = finalPrice2 / quantity2; const messages = [ { role: "user", content: `商品1のグラム当たりの価格は${costPerGram1.toFixed(2)}円、商品2のグラム当たりの価格は${costPerGram2.toFixed(2)}円です。お得な商品はどちらですか？` } ]; try { setLoading(true); const response = await fetch("/integrations/chat-gpt/conversationgpt4", { method: "POST", headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages, system_prompt: "Explain this content" }) }); const data = await response.json(); const chatResult = data.choices[0].message.content; setResult(chatResult.includes("商品1") ? "商品1" : "商品2"); } catch (error) { console.error("Error:", error); } finally{ setLoading(false); } }; const toggleDarkMode = ()=>setDarkMode(!darkMode); return /*#__PURE__*/ React.createElement("div", { className: `min-h-screen flex flex-col justify-center items-center ${darkMode ? 'bg-gray-900' : 'bg-gray-100'}`, __source: { fileName: "", lineNumber: 54, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-bold my-4 text-gray-900 dark:text-gray-100", __source: { fileName: "", lineNumber: 55, columnNumber: 7 }, __self: this }, "商品価格比較"), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 56, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "switch", __source: { fileName: "", lineNumber: 57, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "checkbox", checked: darkMode, onChange: toggleDarkMode, __source: { fileName: "", lineNumber: 58, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "slider", __source: { fileName: "", lineNumber: 59, columnNumber: 11 }, __self: this }))), /*#__PURE__*/ React.createElement("form", { className: "w-full max-w-lg bg-white dark:bg-gray-800 p-8 shadow-md rounded-lg", __source: { fileName: "", lineNumber: 62, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-2 gap-4", __source: { fileName: "", lineNumber: 63, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 64, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold text-gray-900 dark:text-gray-100", __source: { fileName: "", lineNumber: 65, columnNumber: 13 }, __self: this }, "商品1"), /*#__PURE__*/ React.createElement("label", { className: "block my-2 text-gray-900 dark:text-gray-100", __source: { fileName: "", lineNumber: 66, columnNumber: 13 }, __self: this }, "価格入力"), /*#__PURE__*/ React.createElement("input", { name: "price1", type: "number", className: "w-full p-2 border border-gray-300 dark:border-gray-700 rounded bg-gray-100 dark:bg-gray-700 text-gray-900 dark:text-gray-100", __source: { fileName: "", lineNumber: 67, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex items-center my-2", __source: { fileName: "", lineNumber: 68, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { name: "tax_included1", type: "checkbox", className: "mr-2", __source: { fileName: "", lineNumber: 69, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "text-gray-900 dark:text-gray-100", __source: { fileName: "", lineNumber: 70, columnNumber: 15 }, __self: this }, "税込価格")), /*#__PURE__*/ React.createElement("label", { className: "block my-2 text-gray-900 dark:text-gray-100", __source: { fileName: "", lineNumber: 72, columnNumber: 13 }, __self: this }, "数量入力 (グラム)"), /*#__PURE__*/ React.createElement("input", { name: "quantity1", type: "number", className: "w-full p-2 border border-gray-300 dark:border-gray-700 rounded bg-gray-100 dark:bg-gray-700 text-gray-900 dark:text-gray-100", __source: { fileName: "", lineNumber: 73, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 75, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold text-gray-900 dark:text-gray-100", __source: { fileName: "", lineNumber: 76, columnNumber: 13 }, __self: this }, "商品2"), /*#__PURE__*/ React.createElement("label", { className: "block my-2 text-gray-900 dark:text-gray-100", __source: { fileName: "", lineNumber: 77, columnNumber: 13 }, __self: this }, "価格入力"), /*#__PURE__*/ React.createElement("input", { name: "price2", type: "number", className: "w-full p-2 border border-gray-300 dark:border-gray-700 rounded bg-gray-100 dark:bg-gray-700 text-gray-900 dark:text-gray-100", __source: { fileName: "", lineNumber: 78, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex items-center my-2", __source: { fileName: "", lineNumber: 79, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { name: "tax_included2", type: "checkbox", className: "mr-2", __source: { fileName: "", lineNumber: 80, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "text-gray-900 dark:text-gray-100", __source: { fileName: "", lineNumber: 81, columnNumber: 15 }, __self: this }, "税込価格")), /*#__PURE__*/ React.createElement("label", { className: "block my-2 text-gray-900 dark:text-gray-100", __source: { fileName: "", lineNumber: 83, columnNumber: 13 }, __self: this }, "数量入力 (グラム)"), /*#__PURE__*/ React.createElement("input", { name: "quantity2", type: "number", className: "w-full p-2 border border-gray-300 dark:border-gray-700 rounded bg-gray-100 dark:bg-gray-700 text-gray-900 dark:text-gray-100", __source: { fileName: "", lineNumber: 84, columnNumber: 13 }, __self: this }))), /*#__PURE__*/ React.createElement("button", { type: "button", onClick: handleCompare, className: "w-full bg-blue-500 dark:bg-blue-700 text-white p-2 rounded", disabled: loading, __source: { fileName: "", lineNumber: 87, columnNumber: 9 }, __self: this }, loading ? "比較中..." : "比較する"), /*#__PURE__*/ React.createElement("div", { className: "my-6", __source: { fileName: "", lineNumber: 95, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-semibold text-gray-900 dark:text-gray-100", __source: { fileName: "", lineNumber: 96, columnNumber: 11 }, __self: this }, "結果"), /*#__PURE__*/ React.createElement("p", { className: "mt-2 p-2 border border-gray-300 dark:border-gray-700 rounded text-gray-900 dark:text-gray-100", __source: { fileName: "", lineNumber: 97, columnNumber: 11 }, __self: this }, "お得な商品は: ", /*#__PURE__*/ React.createElement("span", { className: "font-bold", __source: { fileName: "", lineNumber: 97, columnNumber: 128 }, __self: this }, result)))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 100, columnNumber: 7 }, __self: this }, ` .switch { position: relative; display: inline-block; width: 60px; height: 34px; } .switch input { opacity: 0; width: 0; height: 0; } .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; transition: 0.4s; border-radius: 34px; } .slider:before { position: absolute; content: ""; height: 26px; width: 26px; left: 4px; bottom: 4px; background-color: white; transition: 0.4s; border-radius: 50%; } input:checked + .slider { background-color: #2196F3; } input:checked + .slider:before { transform: translateX(26px); } `)); }