function MainComponent({ userInput, generatedPrompt }) { const [userInputText, setUserInputText] = React.useState(userInput); const [generatedPromptText, setGeneratedPromptText] = React.useState(generatedPrompt); const [progress, setProgress] = React.useState(""); const [imageUrl, setImageUrl] = React.useState(""); const handleGenerateImage = async ()=>{ const prompt = userInputText.toLowerCase(); setProgress("Generating image..."); const response = await fetch(`/integrations/stable-diffusion-v-3/?prompt=${encodeURIComponent(userInputText)}&width=3840&height=2160`, { method: 'GET' }); const data = await response.json(); setImageUrl(data.data[0]); setProgress("Image generated."); }; const handleClear = ()=>{ setUserInputText(""); setGeneratedPromptText(""); setProgress(""); setImageUrl(""); }; const handleSaveImage = ()=>{ const a = document.createElement("a"); a.href = imageUrl; a.download = "generated_image.png"; document.body.appendChild(a); a.click(); document.body.removeChild(a); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center p-4", __source: { fileName: "", lineNumber: 35, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-[500px]", __source: { fileName: "", lineNumber: 36, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("textarea", { name: "userInput", className: "w-full p-2 border border-gray-300 rounded mt-2 font-roboto", placeholder: "Type your message here...", value: userInputText, onChange: (e)=>setUserInputText(e.target.value), __source: { fileName: "", lineNumber: 37, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex justify-end mt-2", __source: { fileName: "", lineNumber: 44, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "bg-blue-500 text-white p-2 rounded font-roboto mr-2", onClick: handleGenerateImage, __source: { fileName: "", lineNumber: 45, columnNumber: 11 }, __self: this }, "画像生成"), /*#__PURE__*/ React.createElement("button", { className: "bg-gray-500 text-white p-2 rounded font-roboto", onClick: handleClear, __source: { fileName: "", lineNumber: 51, columnNumber: 11 }, __self: this }, "クリア"))), /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-[500px] mt-4", __source: { fileName: "", lineNumber: 59, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("textarea", { name: "progressInfo", className: "w-full p-2 border border-gray-300 rounded mt-2 font-roboto", placeholder: "Progress info will appear here...", value: progress, readOnly: true, __source: { fileName: "", lineNumber: 60, columnNumber: 9 }, __self: this })), imageUrl && /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-[500px] mt-4", __source: { fileName: "", lineNumber: 69, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: imageUrl, alt: "Generated unique image based on user prompt", className: "w-full h-auto rounded", __source: { fileName: "", lineNumber: 70, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "bg-green-500 text-white p-2 rounded font-roboto mt-2 w-full", onClick: handleSaveImage, __source: { fileName: "", lineNumber: 71, columnNumber: 11 }, __self: this }, "保存"))); } function StoryComponent() { return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 85, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(MainComponent, { userInput: "", generatedPrompt: "", __source: { fileName: "", lineNumber: 86, columnNumber: 7 }, __self: this })); }