function MainComponent() { const [imageURL, setImageURL] = React.useState(""); const canvasRef = React.useRef(null); const handleSketchSubmit = async (event)=>{ event.preventDefault(); const canvas = canvasRef.current; canvas.toBlob(async (blob)=>{ const formData = new FormData(); formData.append("file", blob, "sketch.png"); const response = await fetch("https://api.stablediffusionapi.com/generate", { method: "POST", body: formData }); const result = await response.json(); setImageURL(result.generatedImageUrl); }); }; const clearCanvas = ()=>{ const canvas = canvasRef.current; const context = canvas.getContext("2d"); context.clearRect(0, 0, canvas.width, canvas.height); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-100 flex flex-col items-center p-4", __source: { fileName: "", lineNumber: 29, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-roboto text-center my-4", __source: { fileName: "", lineNumber: 30, columnNumber: 7 }, __self: this }, "Stable Diffusion AI Image Generator"), /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-[800px] bg-white p-6 rounded shadow-md", __source: { fileName: "", lineNumber: 31, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("form", { className: "flex flex-col gap-4", onSubmit: handleSketchSubmit, __source: { fileName: "", lineNumber: 32, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center mb-4", __source: { fileName: "", lineNumber: 33, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "sketch-canvas", className: "block text-lg font-roboto mb-2", __source: { fileName: "", lineNumber: 34, columnNumber: 13 }, __self: this }, "Draw Your Sketch:"), /*#__PURE__*/ React.createElement("canvas", { ref: canvasRef, id: "sketch-canvas", width: "500", height: "500", className: "border border-gray-300", __source: { fileName: "", lineNumber: 35, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "button", onClick: clearCanvas, className: "mt-2 bg-red-500 hover:bg-red-700 text-white text-sm font-roboto py-1 px-2 rounded", __source: { fileName: "", lineNumber: 42, columnNumber: 13 }, __self: this }, "Clear Sketch")), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "self-center bg-blue-500 hover:bg-blue-700 text-white text-lg font-roboto py-2 px-4 rounded", __source: { fileName: "", lineNumber: 50, columnNumber: 11 }, __self: this }, "Generate Image")), /*#__PURE__*/ React.createElement("div", { id: "generated-image", className: "mt-8 text-center", __source: { fileName: "", lineNumber: 57, columnNumber: 9 }, __self: this }, imageURL && /*#__PURE__*/ React.createElement("img", { src: imageURL, alt: "Generated AI Image", className: "mx-auto max-w-full max-h-[400px]", __source: { fileName: "", lineNumber: 58, columnNumber: 24 }, __self: this })))); }