function MainComponent() { const [inputText, setInputText] = React.useState(""); const [generatedImage, setGeneratedImage] = React.useState(null); const [loading, setLoading] = React.useState(false); const [error, setError] = React.useState(null); const handleInputChange = (e)=>{ setInputText(e.target.value); }; const handleSend = async ()=>{ if (inputText.trim() === "") return; setLoading(true); setError(null); try { const response = await fetch(`/integrations/stable-diffusion-v-3/?prompt=${encodeURIComponent(inputText)}`, { method: 'GET' }); const data = await response.json(); if (data.data && data.data.length > 0) { setGeneratedImage(data.data[0]); } else { throw new Error("画像生成に失敗しました。"); } } catch (err) { setError("画像生成に失敗しました。"); } finally{ setLoading(false); } }; const handleDownload = ()=>{ if (generatedImage) { const link = document.createElement("a"); link.href = generatedImage; link.download = "generated-image.jpg"; link.click(); } }; return /*#__PURE__*/ React.createElement("div", { className: "bg-[#001f3f] min-h-screen flex flex-col font-helvetica", __source: { fileName: "", lineNumber: 42, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "flex items-center justify-between p-4 bg-[#2c3e50] text-[#ecf0f1]", __source: { fileName: "", lineNumber: 43, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold", __source: { fileName: "", lineNumber: 44, columnNumber: 9 }, __self: this }, "Magic.ai"), /*#__PURE__*/ React.createElement("nav", { __source: { fileName: "", lineNumber: 45, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("a", { className: "mr-4", href: "#home", __source: { fileName: "", lineNumber: 46, columnNumber: 11 }, __self: this }, "ホーム"), /*#__PURE__*/ React.createElement("a", { className: "mr-4", href: "#how-to-use", __source: { fileName: "", lineNumber: 47, columnNumber: 11 }, __self: this }, "使い方"), /*#__PURE__*/ React.createElement("a", { href: "#contact", __source: { fileName: "", lineNumber: 48, columnNumber: 11 }, __self: this }, "お問い合わせ"))), /*#__PURE__*/ React.createElement("main", { className: "flex-grow flex flex-col items-center p-4", __source: { fileName: "", lineNumber: 51, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-[600px] bg-[#34495e] p-4 rounded-lg shadow-md", __source: { fileName: "", lineNumber: 52, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex mb-4", __source: { fileName: "", lineNumber: 53, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { className: "flex-grow p-2 rounded-l-lg text-[#2c3e50]", type: "text", placeholder: "ここにテキストを入力...", name: "chat-input", value: inputText, onChange: handleInputChange, __source: { fileName: "", lineNumber: 54, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "bg-[#8e44ad] text-white p-2 rounded-r-lg hover:bg-[#9b59b6] transition-colors duration-300", onClick: handleSend, disabled: loading, __source: { fileName: "", lineNumber: 62, columnNumber: 13 }, __self: this }, loading ? "送信中..." : "送信")), /*#__PURE__*/ React.createElement("div", { className: "mt-4 bg-[#ecf0f1] p-4 rounded-lg flex justify-center items-center", __source: { fileName: "", lineNumber: 66, columnNumber: 11 }, __self: this }, error ? /*#__PURE__*/ React.createElement("span", { className: "text-red-500", __source: { fileName: "", lineNumber: 68, columnNumber: 15 }, __self: this }, error) : generatedImage ? /*#__PURE__*/ React.createElement("img", { src: generatedImage, alt: "生成されたAI画像", className: "max-w-full max-h-[400px]", __source: { fileName: "", lineNumber: 70, columnNumber: 15 }, __self: this }) : /*#__PURE__*/ React.createElement("span", { className: "text-[#2c3e50] text-center", __source: { fileName: "", lineNumber: 76, columnNumber: 15 }, __self: this }, "ここに生成された画像が表示されます。")), /*#__PURE__*/ React.createElement("div", { className: "mt-4 flex justify-end", __source: { fileName: "", lineNumber: 79, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "bg-[#3498db] text-white p-2 rounded-lg hover:bg-[#2980b9] transition-colors duration-300", onClick: handleDownload, disabled: !generatedImage, __source: { fileName: "", lineNumber: 80, columnNumber: 13 }, __self: this }, "ダウンロード")))), /*#__PURE__*/ React.createElement("footer", { className: "bg-[#2c3e50] text-[#ecf0f1] p-4 text-center", __source: { fileName: "", lineNumber: 86, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 87, columnNumber: 9 }, __self: this }, "© 2023 Magic.ai"), /*#__PURE__*/ React.createElement("div", { className: "mt-2", __source: { fileName: "", lineNumber: 88, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("a", { className: "mr-4", href: "#terms", __source: { fileName: "", lineNumber: 89, columnNumber: 11 }, __self: this }, "利用規約"), /*#__PURE__*/ React.createElement("a", { href: "#privacy", __source: { fileName: "", lineNumber: 90, columnNumber: 11 }, __self: this }, "プライバシーポリシー"))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 93, columnNumber: 7 }, __self: this }, ` @keyframes magicFontColor { 0% { color: #8e44ad; } 50% { color: #3498db; } 100% { color: #8e44ad; } } input::placeholder { animation: magicFontColor 2s infinite; } `)); }