function MainComponent() { const [images, setImages] = React.useState([]); const [selectedImage, setSelectedImage] = React.useState(null); const promptRef = React.useRef(null); const refinePromptRef = React.useRef(null); const generateImages = async ()=>{ const prompt = promptRef.current.value; const response = await fetch(`/integrations/dall-e-3/?prompt=${encodeURIComponent(prompt)}`, { method: 'GET' }); const result = await response.json(); setImages(result.data.slice(0, 3)); setSelectedImage(null); }; const refineImage = async ()=>{ if (selectedImage) { const refinePrompt = refinePromptRef.current.value; const response = await fetch(`/integrations/dall-e-3/?prompt=${encodeURIComponent(refinePrompt)}`, { method: 'GET' }); const result = await response.json(); setImages(result.data.slice(0, 3)); setSelectedImage(null); } }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center p-4", __source: { fileName: "", lineNumber: 30, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold mb-4 font-roboto", __source: { fileName: "", lineNumber: 31, columnNumber: 7 }, __self: this }, "DALL-E 3 Image Generator"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "prompt", placeholder: "Enter your prompt here...", className: "border p-2 mb-4 w-full max-w-md", ref: promptRef, __source: { fileName: "", lineNumber: 32, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: generateImages, className: "bg-blue-500 hover:bg-blue-700 text-white py-2 px-4 rounded w-full max-w-md", __source: { fileName: "", lineNumber: 39, columnNumber: 7 }, __self: this }, "Generate"), /*#__PURE__*/ React.createElement("div", { className: "mt-6 grid grid-cols-1 md:grid-cols-3 gap-4 w-full max-w-4xl", __source: { fileName: "", lineNumber: 46, columnNumber: 7 }, __self: this }, images.map((img, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "border p-2 flex flex-col items-center", __source: { fileName: "", lineNumber: 48, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: img, alt: `Generated option ${index + 1}`, className: "w-full h-[200px] object-cover mb-2", __source: { fileName: "", lineNumber: 49, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setSelectedImage(img), className: "bg-green-500 hover:bg-green-700 text-white py-2 px-4 rounded mb-2 w-full", __source: { fileName: "", lineNumber: 54, columnNumber: 13 }, __self: this }, "Select"), /*#__PURE__*/ React.createElement("button", { className: "bg-yellow-500 hover:bg-yellow-700 text-white py-2 px-4 rounded w-full", __source: { fileName: "", lineNumber: 60, columnNumber: 13 }, __self: this }, "Refine")))), /*#__PURE__*/ React.createElement("div", { className: "mt-6 w-full max-w-md", __source: { fileName: "", lineNumber: 67, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold mb-2 font-roboto", __source: { fileName: "", lineNumber: 68, columnNumber: 9 }, __self: this }, "Refine Image"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "refinePrompt", placeholder: "Add your new prompt...", className: "border p-2 mb-4 w-full", ref: refinePromptRef, __source: { fileName: "", lineNumber: 69, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: refineImage, className: "bg-blue-500 hover:bg-blue-700 text-white py-2 px-4 rounded w-full", __source: { fileName: "", lineNumber: 76, columnNumber: 9 }, __self: this }, "Refine Selected Image"))); }