function MainComponent() { const [prompt, setPrompt] = useState(''); const [image, setImage] = useState(''); const [loading, setLoading] = useState(false); const [error, setError] = useState(''); const [sizeRatio, setSizeRatio] = useState('square'); const [colorMode, setColorMode] = useState('color'); const [artStyle, setArtStyle] = useState('normal'); const ratioConfigs = { square: { width: 1024, height: 1024, label: 'Square (1:1)' }, landscape: { width: 1792, height: 1024, label: 'Landscape (16:9)' }, portrait: { width: 1024, height: 1792, label: 'Portrait (9:16)' } }; const artStyles = { normal: { label: 'Normal', prompt: '' }, pencilSketch: { label: 'Pencil Sketch', prompt: 'in detailed pencil sketch style, graphite drawing' }, paintBrush: { label: 'Paint Brush', prompt: 'in oil painting style with visible brush strokes' }, pastel: { label: 'Pastel', prompt: 'in soft pastel art style' }, waterColor: { label: 'Water Color', prompt: 'in watercolor painting style, flowing colors' } }; useEffect(()=>{ if (!sizeRatio) { setSizeRatio('square'); } }, [ sizeRatio ]); const handleReset = useCallback(()=>{ setPrompt(''); setImage(''); setError(''); }, []); const generateImage = async ()=>{ if (!prompt.trim()) { setError('Please enter a description first'); return; } setLoading(true); setError(''); try { const { width, height } = ratioConfigs[sizeRatio]; if (!width || !height) { throw new Error('Invalid image dimensions'); } let finalPrompt = prompt; if (artStyle !== 'normal') { finalPrompt += ', ' + artStyles[artStyle].prompt; } if (colorMode === 'bw') { finalPrompt += ', black and white, monochrome'; } const response = await fetch(`/integrations/dall-e-3/?prompt=${encodeURIComponent(finalPrompt)}`); if (!response.ok) { const errorData = await response.json().catch(()=>({})); throw new Error(errorData.error || `Error: ${response.status}`); } const data = await response.json(); if (!data.data || !data.data[0]) { throw new Error('No image was generated'); } setImage(data.data[0]); } catch (err) { console.error('Image generation error:', err); setError(err.message === 'Invalid image dimensions' ? 'Invalid image dimensions selected' : 'Failed to generate image. Please try again.'); } finally{ setLoading(false); } }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#121212] px-4 py-8 md:px-8", __source: { fileName: "", lineNumber: 81, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-4xl mx-auto", __source: { fileName: "", lineNumber: 82, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-center mb-8", __source: { fileName: "", lineNumber: 83, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "https://ucarecdn.com/ed838473-0d10-4a3c-a60f-2385e1ce20c8/-/format/auto/", alt: "Website Development Company", title: "Website Development Company", className: "w-[180px] h-auto", __source: { fileName: "", lineNumber: 84, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("h1", { className: "text-transparent bg-clip-text bg-gradient-to-r from-[#ffffff] via-[#f0f0f0] to-[#e0e0e0] font-roboto text-[22px] text-center mb-8 mt-2", __source: { fileName: "", lineNumber: 91, columnNumber: 1 }, __self: this }, "AI Image Generator"), /*#__PURE__*/ React.createElement("div", { className: "space-y-6", __source: { fileName: "", lineNumber: 95, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center gap-6 mb-6", __source: { fileName: "", lineNumber: 96, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex gap-4", __source: { fileName: "", lineNumber: 97, columnNumber: 13 }, __self: this }, Object.entries(ratioConfigs).map(([key, config])=>/*#__PURE__*/ React.createElement("button", { key: key, onClick: ()=>setSizeRatio(key), className: ` px-6 py-3 rounded-md transition-all duration-200 cursor-pointer ${sizeRatio === key ? 'bg-[#555555] text-white' : 'bg-[#2a2a2a] text-gray-400 hover:text-white hover:bg-[#444444]'} focus:outline-none focus:ring-2 focus:ring-[#666666] focus:ring-opacity-50 `, __source: { fileName: "", lineNumber: 99, columnNumber: 17 }, __self: this }, config.label))), /*#__PURE__*/ React.createElement("div", { className: "flex gap-4 flex-wrap justify-center", __source: { fileName: "", lineNumber: 115, columnNumber: 1 }, __self: this }, Object.entries(artStyles).map(([key, style])=>/*#__PURE__*/ React.createElement("button", { key: key, onClick: ()=>setArtStyle(key), className: ` px-6 py-3 rounded-md transition-all duration-200 cursor-pointer ${artStyle === key ? 'bg-[#555555] text-white' : 'bg-[#2a2a2a] text-gray-400 hover:text-white hover:bg-[#444444]'} focus:outline-none focus:ring-2 focus:ring-[#666666] focus:ring-opacity-50 `, __source: { fileName: "", lineNumber: 117, columnNumber: 17 }, __self: this }, style.label))), /*#__PURE__*/ React.createElement("div", { className: "flex gap-4", __source: { fileName: "", lineNumber: 133, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setColorMode('color'), className: ` px-6 py-3 rounded-md transition-all duration-200 cursor-pointer ${colorMode === 'color' ? 'bg-[#555555] text-white' : 'bg-[#2a2a2a] text-gray-400 hover:text-white hover:bg-[#444444]'} focus:outline-none focus:ring-2 focus:ring-[#666666] focus:ring-opacity-50 `, __source: { fileName: "", lineNumber: 134, columnNumber: 15 }, __self: this }, "Color"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setColorMode('bw'), className: ` px-6 py-3 rounded-md transition-all duration-200 cursor-pointer ${colorMode === 'bw' ? 'bg-[#555555] text-white' : 'bg-[#2a2a2a] text-gray-400 hover:text-white hover:bg-[#444444]'} focus:outline-none focus:ring-2 focus:ring-[#666666] focus:ring-opacity-50 `, __source: { fileName: "", lineNumber: 147, columnNumber: 15 }, __self: this }, "Black & White"))), /*#__PURE__*/ React.createElement("input", { type: "text", value: prompt, onChange: (e)=>setPrompt(e.target.value), placeholder: "Describe the image you want to generate...", className: "w-full px-4 py-3 rounded-lg bg-[#2a2a2a] text-white placeholder-gray-400 border-none focus:ring-2 focus:ring-gray-500", __source: { fileName: "", lineNumber: 162, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex justify-center gap-4", __source: { fileName: "", lineNumber: 169, columnNumber: 1 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: generateImage, disabled: loading, className: "px-8 py-3 bg-[#333333] text-white rounded-md hover:bg-[#444444] transition-colors duration-200 disabled:opacity-50", __source: { fileName: "", lineNumber: 170, columnNumber: 13 }, __self: this }, loading ? /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-2", __source: { fileName: "", lineNumber: 176, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-5 h-5 border-2 border-t-transparent border-white rounded-full animate-spin", __source: { fileName: "", lineNumber: 177, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 178, columnNumber: 19 }, __self: this }, "Generating...")) : 'Generate Image'), /*#__PURE__*/ React.createElement("button", { onClick: handleReset, disabled: loading || !prompt && !image, className: "px-8 py-3 bg-[#222222] text-gray-400 rounded-md hover:bg-[#2a2a2a] hover:text-white transition-colors duration-200 disabled:opacity-30", __source: { fileName: "", lineNumber: 184, columnNumber: 13 }, __self: this }, "Reset")), error && /*#__PURE__*/ React.createElement("div", { className: "text-red-400 text-center py-2", __source: { fileName: "", lineNumber: 194, columnNumber: 13 }, __self: this }, error), image && /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center", __source: { fileName: "", lineNumber: 200, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative rounded-lg overflow-hidden transition-all duration-300 w-full", style: { maxWidth: Math.min(ratioConfigs[sizeRatio].width, 1024), aspectRatio: `${ratioConfigs[sizeRatio].width}/${ratioConfigs[sizeRatio].height}` }, __source: { fileName: "", lineNumber: 201, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: image, alt: "AI Generated artwork", className: "w-full h-full object-cover animate-[sizeTransition_0.3s_ease-out]", __source: { fileName: "", lineNumber: 208, columnNumber: 17 }, __self: this }))), loading && !image && /*#__PURE__*/ React.createElement("div", { className: "flex justify-center py-12", __source: { fileName: "", lineNumber: 218, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative border-2 border-[#333333] rounded-lg transition-all duration-300", style: { width: '100%', maxWidth: Math.min(ratioConfigs[sizeRatio].width, 1024), aspectRatio: `${ratioConfigs[sizeRatio].width}/${ratioConfigs[sizeRatio].height}` }, __source: { fileName: "", lineNumber: 219, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 flex items-center justify-center", __source: { fileName: "", lineNumber: 227, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-16 h-16 border-4 border-t-transparent border-white rounded-full animate-spin", __source: { fileName: "", lineNumber: 228, columnNumber: 19 }, __self: this })))))), /*#__PURE__*/ React.createElement("div", { className: "w-full flex flex-col items-center mt-12 mb-6 text-gray-400", __source: { fileName: "", lineNumber: 236, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "https://www.designfo.net", target: "_blank", rel: "noopener noreferrer", className: "hover:opacity-80 transition-opacity", title: "Website Development Company", __source: { fileName: "", lineNumber: 237, columnNumber: 3 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "https://ucarecdn.com/ed838473-0d10-4a3c-a60f-2385e1ce20c8/-/format/auto/", alt: "Website Development Company", title: "Website Development Company", className: "w-[120px] h-auto mb-3", __source: { fileName: "", lineNumber: 244, columnNumber: 5 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "text-sm", __source: { fileName: "", lineNumber: 251, columnNumber: 3 }, __self: this }, "© 2024 AI Image Generator. All rights reserved.")), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 256, columnNumber: 7 }, __self: this }, ` @keyframes sizeTransition { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } } `)); }