function MainComponent() { const [inputText, setInputText] = React.useState(''); const [chatGPTResponse, setChatGPTResponse] = React.useState(''); const [claudeResponse, setClaudeResponse] = React.useState(''); function handleInputChange(event) { setInputText(event.target.value); } function handleSubmit() { setChatGPTResponse(`これはChatGPTによる${inputText}の模擬回答です。`); setClaudeResponse(`これはClaudeによる${inputText}の模擬回答です。`); } return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-gradient-to-b from-[#0f0c29] to-[#302b63] via-[#24243e]", __source: { fileName: "", lineNumber: 16, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 17, columnNumber: 7 }, __self: this }, ` @keyframes glow { from { box-shadow: 0 0 10px #00b4d8, 0 0 20px #00b4d8, 0 0 40px #00b4d8, 0 0 80px #00b4d8, 0 0 160px #00b4d8; } to { box-shadow: 0 0 20px #00b4d8, 0 0 30px #ff4bd8, 0 0 50px #00b4d8, 0 0 90px #ff4bd8, 0 0 180px #00b4d8; } } `), /*#__PURE__*/ React.createElement("div", { className: "mb-8 w-full px-4 lg:w-1/2", __source: { fileName: "", lineNumber: 27, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "inputText", value: inputText, onChange: handleInputChange, className: "w-full p-4 border-2 border-[#FFFFFF] rounded-md shadow-lg focus:outline-none focus:border-[#00B4D8] transition duration-300 bg-[#24243e] text-white", placeholder: "ここに質問を入力してください", style: { animation: 'glow 2s ease-in-out infinite alternate' }, __source: { fileName: "", lineNumber: 28, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: handleSubmit, className: "mt-4 w-full py-3 bg-[#00B4D8] text-white font-roboto rounded-md shadow-lg hover:bg-[#0096C7] transition duration-300", style: { animation: 'glow 2s ease-in-out infinite alternate' }, __source: { fileName: "", lineNumber: 37, columnNumber: 9 }, __self: this }, "比較開始")), /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap justify-center items-start p-4 gap-8", __source: { fileName: "", lineNumber: 45, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full md:w-1/2", __source: { fileName: "", lineNumber: 46, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-4 border border-[#FFFFFF] rounded-md shadow-lg bg-[#F0F9FF]", style: { animation: 'glow 2s ease-in-out infinite alternate' }, __source: { fileName: "", lineNumber: 47, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-roboto text-lg mb-2", __source: { fileName: "", lineNumber: 48, columnNumber: 13 }, __self: this }, "ChatGPTの回答"), /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-sm text-[#374151]", __source: { fileName: "", lineNumber: 49, columnNumber: 13 }, __self: this }, chatGPTResponse))), /*#__PURE__*/ React.createElement("div", { className: "w-full md:w-1/2", __source: { fileName: "", lineNumber: 52, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-4 border border-[#FFFFFF] rounded-md shadow-lg bg-[#F0F9FF]", style: { animation: 'glow 2s ease-in-out infinite alternate' }, __source: { fileName: "", lineNumber: 53, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-roboto text-lg mb-2", __source: { fileName: "", lineNumber: 54, columnNumber: 13 }, __self: this }, "Claudeの回答"), /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-sm text-[#374151]", __source: { fileName: "", lineNumber: 55, columnNumber: 13 }, __self: this }, claudeResponse))))); }