function MainComponent() { const [prompt, setPrompt] = React.useState(""); const [generatedImage, setGeneratedImage] = React.useState(null); const [loading, setLoading] = React.useState(false); const [error, setError] = React.useState(null); const generateImage = React.useCallback(async ()=>{ if (!prompt.trim()) { setError("Please enter a prompt to generate an image"); return; } setLoading(true); setError(null); setGeneratedImage(null); try { const response = await fetch(`/integrations/dall-e-3/?prompt=${encodeURIComponent(prompt)}`, { method: "GET" }); if (!response.ok) { throw new Error(`Failed to generate image: ${response.status} ${response.statusText}`); } const result = await response.json(); if (result.data && result.data.length > 0) { setGeneratedImage(result.data[0]); } else { throw new Error("No image was generated"); } } catch (err) { console.error(err); setError("Failed to generate image. Please try again."); } finally{ setLoading(false); } }, [ prompt ]); const handleKeyPress = React.useCallback((e)=>{ if (e.key === "Enter" && !loading) { generateImage(); } }, [ generateImage, loading ]); return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gradient-to-br from-purple-900 via-blue-900 to-indigo-900 p-4", __source: { fileName: "", lineNumber: 56, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-4xl mx-auto", __source: { fileName: "", lineNumber: 57, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center mb-8 pt-8", __source: { fileName: "", lineNumber: 59, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-center mb-4", __source: { fileName: "", lineNumber: 60, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "https://ucarecdn.com/31a22285-9029-4098-8c8a-d667bf15005d/-/format/auto/", alt: "MCO Logo", className: "w-24 h-24 md:w-32 md:h-32 rounded-full shadow-lg", __source: { fileName: "", lineNumber: 61, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("h1", { className: "text-4xl md:text-6xl font-bold text-white mb-4 font-inter", __source: { fileName: "", lineNumber: 67, columnNumber: 11 }, __self: this }, "MCO Image Generator"), /*#__PURE__*/ React.createElement("p", { className: "text-xl text-purple-200 font-roboto", __source: { fileName: "", lineNumber: 70, columnNumber: 11 }, __self: this }, "Create stunning AI-generated images with DALL-E 3")), /*#__PURE__*/ React.createElement("div", { className: "bg-white/10 backdrop-blur-lg rounded-2xl p-6 mb-8 border border-white/20", __source: { fileName: "", lineNumber: 76, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center mb-6", __source: { fileName: "", lineNumber: 77, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold text-white font-inter", __source: { fileName: "", lineNumber: 78, columnNumber: 13 }, __self: this }, "MASTERCOTUTORIALS")), /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 82, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-white text-lg font-medium mb-2 font-roboto", __source: { fileName: "", lineNumber: 83, columnNumber: 13 }, __self: this }, "Describe your image:"), /*#__PURE__*/ React.createElement("textarea", { value: prompt, onChange: (e)=>setPrompt(e.target.value), onKeyPress: handleKeyPress, placeholder: "e.g., a majestic dragon flying over a mystical forest at sunset", className: "w-full p-4 rounded-xl bg-white/20 text-white placeholder-white/60 border border-white/30 focus:border-purple-400 focus:outline-none resize-none font-roboto", rows: "3", __source: { fileName: "", lineNumber: 86, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("button", { onClick: generateImage, disabled: loading || !prompt.trim(), className: "w-full bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-700 hover:to-pink-700 disabled:from-gray-600 disabled:to-gray-700 text-white font-bold py-4 px-8 rounded-xl transition-all duration-200 font-roboto text-lg", __source: { fileName: "", lineNumber: 96, columnNumber: 11 }, __self: this }, loading ? /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-center", __source: { fileName: "", lineNumber: 102, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "animate-spin rounded-full h-6 w-6 border-b-2 border-white mr-3", __source: { fileName: "", lineNumber: 103, columnNumber: 17 }, __self: this }), "Generating...") : "Generate Image")), error && /*#__PURE__*/ React.createElement("div", { className: "bg-red-500/20 border border-red-500/50 rounded-xl p-4 mb-8", __source: { fileName: "", lineNumber: 114, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-red-200 font-roboto", __source: { fileName: "", lineNumber: 115, columnNumber: 13 }, __self: this }, error)), generatedImage && /*#__PURE__*/ React.createElement("div", { className: "bg-white/10 backdrop-blur-lg rounded-2xl p-6 border border-white/20", __source: { fileName: "", lineNumber: 121, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold text-white mb-4 font-inter", __source: { fileName: "", lineNumber: 122, columnNumber: 13 }, __self: this }, "Generated Image"), /*#__PURE__*/ React.createElement("div", { className: "flex justify-center", __source: { fileName: "", lineNumber: 125, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: generatedImage, alt: "Generated AI image", className: "max-w-full h-auto rounded-xl shadow-2xl", style: { maxHeight: "600px" }, __source: { fileName: "", lineNumber: 126, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mt-4 text-center", __source: { fileName: "", lineNumber: 133, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: generatedImage, download: "mco-generated-image.jpg", className: "inline-block bg-green-600 hover:bg-green-700 text-white font-bold py-2 px-6 rounded-lg transition-colors duration-200 font-roboto", __source: { fileName: "", lineNumber: 134, columnNumber: 15 }, __self: this }, "Download Image"))), /*#__PURE__*/ React.createElement("div", { className: "text-center mt-12 pb-8", __source: { fileName: "", lineNumber: 146, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-white/60 text-sm font-roboto", __source: { fileName: "", lineNumber: 147, columnNumber: 11 }, __self: this }, "CREATED BY SIDIQUL AKBAR")))); }