function GenerateImageButton({ type = "submit", onClick }) { return /*#__PURE__*/ React.createElement("button", { type: type, className: "bg-blue-500 text-white font-roboto py-2 px-4 rounded", onClick: onClick, __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, "Generate Image"); } function GenerateImageButtonStory() { return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 15, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(GenerateImageButton, { __source: { fileName: "", lineNumber: 16, columnNumber: 7 }, __self: this })); } function MainComponent() { const [prompt, setPrompt] = React.useState('(best quality, 8k, 32k, masterpiece:1.4), pretty japanese girl, 1girl, loli, blonde hair, upper body, high school uniform, long sleeve shirt, red bow tie, smile, bangs, meadow'); const [imageUrl, setImageUrl] = React.useState(''); const [loading, setLoading] = React.useState(false); const handleSubmit = async (e)=>{ e.preventDefault(); setLoading(true); try { const response = await fetch(`/integrations/stable-diffusion-v-3/?prompt=${encodeURIComponent(prompt)}`, { method: 'GET' }); const result = await response.json(); setImageUrl(result.data[0]); } catch (error) { console.error('Error generating image:', error); } setLoading(false); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center p-4", __source: { fileName: "", lineNumber: 22, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-roboto mb-4", __source: { fileName: "", lineNumber: 23, columnNumber: 7 }, __self: this }, "日本人かわいい Image Generator"), /*#__PURE__*/ React.createElement("form", { className: "flex flex-col items-center", onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 24, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "prompt", value: prompt, onChange: (e)=>setPrompt(e.target.value), className: "border rounded p-2 mb-4 w-[300px] font-roboto", placeholder: "Enter prompt", required: true, __source: { fileName: "", lineNumber: 25, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement(GenerateImageButton, { type: "submit", __source: { fileName: "", lineNumber: 34, columnNumber: 9 }, __self: this })), loading && /*#__PURE__*/ React.createElement("p", { className: "mt-4 font-roboto", __source: { fileName: "", lineNumber: 36, columnNumber: 19 }, __self: this }, "Loading..."), imageUrl && /*#__PURE__*/ React.createElement("img", { src: imageUrl, alt: "Generated Japanese girl in meadow", className: "mt-4 w-[300px] h-auto", __source: { fileName: "", lineNumber: 37, columnNumber: 20 }, __self: this })); }

日本人 かわいい Image Generator

日本人かわいい Image Generator