function MainComponent() { const [prompt, setPrompt] = React.useState(""); const [imageUrl, setImageUrl] = React.useState(""); const handleGenerate = async ()=>{ const response = await fetch("https://api.stablediffusionapi.com/generate", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ prompt }) }); const data = await response.json(); setImageUrl(data.url); }; const handleSave = ()=>{ const link = document.createElement("a"); link.href = imageUrl; link.download = "generated_image.png"; link.click(); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col min-h-screen bg-gray-100", __source: { fileName: "", lineNumber: 25, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "bg-[#4A90E2] text-white text-center p-4 font-noto-sans", __source: { fileName: "", lineNumber: 26, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl", __source: { fileName: "", lineNumber: 27, columnNumber: 9 }, __self: this }, "画像生成器")), /*#__PURE__*/ React.createElement("main", { className: "flex-1 p-4 flex flex-col items-center font-noto-sans", __source: { fileName: "", lineNumber: 29, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4 w-full max-w-[600px]", __source: { fileName: "", lineNumber: 30, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "prompt", placeholder: "生成したい画像を説明するプロンプトを入力してください", className: "w-full p-2 border border-gray-300 rounded", value: prompt, onChange: (e)=>setPrompt(e.target.value), __source: { fileName: "", lineNumber: 31, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("button", { className: "bg-[#4A90E2] text-white px-4 py-2 rounded mb-4 w-full max-w-[600px]", onClick: handleGenerate, __source: { fileName: "", lineNumber: 40, columnNumber: 9 }, __self: this }, "生成"), /*#__PURE__*/ React.createElement("div", { className: "w-full flex justify-center", __source: { fileName: "", lineNumber: 46, columnNumber: 9 }, __self: this }, imageUrl && /*#__PURE__*/ React.createElement("img", { src: imageUrl, alt: "ユーザーのプロンプトによって生成された画像", className: "w-full max-w-[600px] h-[400px] bg-gray-200", __source: { fileName: "", lineNumber: 48, columnNumber: 13 }, __self: this })), imageUrl && /*#__PURE__*/ React.createElement("button", { className: "bg-green-500 text-white px-4 py-2 rounded mt-4 w-full max-w-[600px]", onClick: handleSave, __source: { fileName: "", lineNumber: 56, columnNumber: 11 }, __self: this }, "画像を保存")), /*#__PURE__*/ React.createElement("footer", { className: "bg-gray-800 text-white text-center p-4 mt-auto font-noto-sans", __source: { fileName: "", lineNumber: 64, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "mb-2", __source: { fileName: "", lineNumber: 65, columnNumber: 9 }, __self: this }, "chii"), /*#__PURE__*/ React.createElement("a", { href: "https://yourwebsite.com", className: "text-[#4A90E2]", __source: { fileName: "", lineNumber: 66, columnNumber: 9 }, __self: this }, "開発者のウェブサイト"))); }