function MainComponent() { const [posted, setPosted] = React.useState(false); const [content, setContent] = React.useState(''); const [imageUrl, setImageUrl] = React.useState(''); const handleSubmit = async (event)=>{ event.preventDefault(); setPosted(true); try { const response = await fetch(`/integrations/stable-diffusion/?prompt=${encodeURIComponent(content)}`, { method: 'GET' }); const data = await response.json(); if (data.data.length > 0) { setImageUrl(data.data[0]); } } catch (error) { console.error("Error fetching image:", error); } setTimeout(()=>setPosted(false), 2000); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-[#f0f2f5] p-4", __source: { fileName: "", lineNumber: 24, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-semibold text-center text-[#333] mb-4 font-roboto", __source: { fileName: "", lineNumber: 25, columnNumber: 7 }, __self: this }, "安定拡散機能"), /*#__PURE__*/ React.createElement("div", { className: "bg-white shadow-md rounded-lg p-6 w-full max-w-md", __source: { fileName: "", lineNumber: 28, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("form", { className: "space-y-4", onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 29, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 30, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "content", className: "block text-sm font-medium text-[#333] font-roboto", __source: { fileName: "", lineNumber: 31, columnNumber: 13 }, __self: this }, "投稿内容"), /*#__PURE__*/ React.createElement("textarea", { id: "content", name: "content", rows: "4", className: "mt-1 block w-full p-2.5 border border-gray-300 rounded-md shadow-sm focus:border-blue-500 focus:ring-blue-500", placeholder: "内容を入力してください...", value: content, onChange: (e)=>setContent(e.target.value), __source: { fileName: "", lineNumber: 34, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 44, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-[#0d6efd] hover:bg-[#0b5ed7] focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-[#0d6efd] font-roboto", __source: { fileName: "", lineNumber: 45, columnNumber: 13 }, __self: this }, "投稿")), /*#__PURE__*/ React.createElement("img", { src: imageUrl, alt: "Generated from prompt", className: "w-full max-w-md h-auto mt-4", __source: { fileName: "", lineNumber: 52, columnNumber: 11 }, __self: this }))), posted && /*#__PURE__*/ React.createElement("div", { style: { animation: "diffusion 2s infinite" }, className: "mt-8 w-10 h-10 rounded-full bg-[#0d6efd] opacity-50", __source: { fileName: "", lineNumber: 56, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 63, columnNumber: 7 }, __self: this }, ` @keyframes diffusion { from { transform: scale(1); opacity: 1; } to { transform: scale(1.5); opacity: 0; } } `)); }