function MainComponent() { const [prompt, setPrompt] = useState(''); const [loading, setLoading] = useState(false); const [error, setError] = useState(''); const [generatedImages, setGeneratedImages] = useState([]); const [model, setModel] = useState('dalle'); const [style, setStyle] = useState('Drawing'); const [imageCount, setImageCount] = useState(1); const [currentImageNum, setCurrentImageNum] = useState(0); const [showStyleInfo, setShowStyleInfo] = useState(false); const [hoveredStyle, setHoveredStyle] = useState(''); const styleDescriptions = { 'Drawing': 'hand-drawn with detailed line work', 'Doodle': 'simple, spontaneous, hand-drawn sketch', 'Flat Illustration': 'modern flat design with clean shapes and minimal shading', '3D Illustration': 'three-dimensional design with depth and volumetric shading', 'Line Art': 'clean, precise line drawing without shading', 'Caricature': 'exaggerated features in a humorous style', 'Pencil Illustration': 'detailed graphite pencil drawing with shading', 'Cartoon Illustration': 'stylized cartoon with bold outlines', 'Ink Illustration': 'black and white ink drawing with crosshatching', 'Comic Book': 'dynamic comic book style with bold colors and strong outlines', 'Isometric': 'isometric perspective illustration with geometric precision', 'Pop Art': 'bold, colorful pop art style with halftone dots', 'Vector Illustration': 'clean vector art with smooth gradients', 'Watercolor Illustration': 'soft watercolor illustration with translucent colors', 'Digital Illustration': 'polished digital art with smooth blending', 'Children\'s Book Illustration': 'whimsical, colorful storybook illustration', 'Technical Illustration': 'precise technical drawing with detailed components', 'Fashion Illustration': 'elegant fashion drawing with flowing lines', 'Architectural Illustration': 'detailed architectural drawing with precise perspective', 'Botanical Illustration': 'detailed botanical drawing with scientific accuracy', 'Medical Illustration': 'accurate medical illustration with anatomical detail', 'Scientific Illustration': 'detailed scientific diagram with precise accuracy' }; const placeholderPrompts = [ "a serene mountain landscape at sunset with flowing rivers", "a friendly robot teaching children in a classroom", "a detailed cross-section of a futuristic flying car", "a mystical forest with glowing mushrooms and fairy lights", "an underwater city with bioluminescent architecture" ]; const [currentPlaceholderIndex, setCurrentPlaceholderIndex] = useState(0); useEffect(()=>{ const interval = setInterval(()=>{ setCurrentPlaceholderIndex((prev)=>(prev + 1) % placeholderPrompts.length); }, 3000); return ()=>clearInterval(interval); }, []); const styles = [ 'Drawing', 'Doodle', 'Flat Illustration', '3D Illustration', 'Line Art', 'Caricature', 'Pencil Illustration', 'Cartoon Illustration', 'Ink Illustration', 'Comic Book', 'Isometric', 'Pop Art', 'Vector Illustration', 'Watercolor Illustration', 'Digital Illustration', 'Children\'s Book Illustration', 'Technical Illustration', 'Fashion Illustration', 'Architectural Illustration', 'Botanical Illustration', 'Medical Illustration', 'Scientific Illustration' ]; const modelRecommendations = { 'Drawing': 'HDCIL', 'Doodle': 'ARIN', 'Flat Illustration': 'HDCIL', '3D Illustration': 'ARIN', 'Line Art': 'HDCIL', 'Caricature': 'ARIN', 'Pencil Illustration': 'HDCIL', 'Cartoon Illustration': 'ARIN', 'Ink Illustration': 'HDCIL', 'Comic Book': 'ARIN', 'Isometric': 'HDCIL', 'Pop Art': 'ARIN', 'Vector Illustration': 'HDCIL', 'Watercolor Illustration': 'HDCIL', 'Digital Illustration': 'ARIN', 'Children\'s Book Illustration': 'HDCIL', 'Technical Illustration': 'ARIN', 'Fashion Illustration': 'HDCIL', 'Architectural Illustration': 'ARIN', 'Botanical Illustration': 'HDCIL', 'Medical Illustration': 'ARIN', 'Scientific Illustration': 'HDCIL' }; const generateImages = async ()=>{ if (!prompt.trim()) { setError('Please enter a description of what you want to create'); return; } setLoading(true); setError(''); setGeneratedImages([]); const newImages = []; const startTime = Date.now(); for(let i = 0; i < imageCount; i++){ setCurrentImageNum(i + 1); try { const enhancedPrompt = `Create a professional illustration in ${style} style: ${prompt}. The style should be ${styleDescriptions[style]}`; const response = await fetch('/api/generate-image', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ prompt: enhancedPrompt, model: model === 'dalle' ? 'dalle' : 'stable-diffusion', numberOfImages: 1, style: style.toLowerCase().replace(' ', '-') }) }); const data = await response.json(); if (data.error) { throw new Error(data.error); } newImages.push({ url: data.urls[0], prompt, style, model: model === 'dalle' ? 'HDCIL' : 'ARIN', timestamp: new Date().toISOString() }); } catch (err) { const errorMessage = err.message.includes('inappropriate content') ? 'Your prompt contains inappropriate content. Please revise and try again.' : 'Failed to generate image. Please try different settings or refine your prompt.'; setError(errorMessage); console.error(err); break; } } setGeneratedImages(newImages); setLoading(false); setCurrentImageNum(0); }; const handleDownload = (imageUrl, index)=>{ const link = document.createElement('a'); link.href = imageUrl; link.download = `ai-illustration-${index + 1}.png`; document.body.appendChild(link); link.click(); document.body.removeChild(link); }; const handleCopyPrompt = (promptText)=>{ navigator.clipboard.writeText(promptText); }; const getRecommendedStyles = (promptText)=>{ const recommendations = []; const lowerPrompt = promptText.toLowerCase(); if (lowerPrompt.includes('blueprint') || lowerPrompt.includes('diagram')) { recommendations.push('Technical Illustration'); } if (lowerPrompt.includes('character') || lowerPrompt.includes('mascot')) { recommendations.push('Cartoon Illustration'); } if (lowerPrompt.includes('nature') || lowerPrompt.includes('landscape')) { recommendations.push('Watercolor Illustration'); } if (lowerPrompt.includes('medical') || lowerPrompt.includes('anatomy')) { recommendations.push('Medical Illustration'); } return recommendations; }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen p-4 md:p-8 bg-white dark:bg-gray-900", __source: { fileName: "", lineNumber: 193, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-6xl mx-auto", __source: { fileName: "", lineNumber: 194, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl md:text-5xl font-bold text-gray-900 dark:text-white mb-6 font-inter", __source: { fileName: "", lineNumber: 195, columnNumber: 9 }, __self: this }, "AI Illustration Generator"), /*#__PURE__*/ React.createElement("p", { className: "text-gray-700 dark:text-gray-300 mb-8 text-md font-inter", __source: { fileName: "", lineNumber: 198, columnNumber: 9 }, __self: this }, "Create stunning AI-generated artwork by entering a descriptive prompt below. Choose your preferred AI model, style, and number of images to generate."), /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 202, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 203, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative", __source: { fileName: "", lineNumber: 204, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", value: prompt, onChange: (e)=>setPrompt(e.target.value), placeholder: placeholderPrompts[currentPlaceholderIndex], className: "w-full p-3 rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-900 dark:text-white font-inter", name: "prompt", __source: { fileName: "", lineNumber: 205, columnNumber: 15 }, __self: this }), prompt && getRecommendedStyles(prompt).length > 0 && /*#__PURE__*/ React.createElement("div", { className: "mt-2 text-sm text-gray-600 dark:text-gray-400", __source: { fileName: "", lineNumber: 214, columnNumber: 17 }, __self: this }, "Recommended styles: ", getRecommendedStyles(prompt).join(', ')), /*#__PURE__*/ React.createElement("div", { className: "mt-2 p-4 bg-gray-100 dark:bg-gray-800 rounded-lg", __source: { fileName: "", lineNumber: 218, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h4", { className: "font-bold text-gray-900 dark:text-white mb-2", __source: { fileName: "", lineNumber: 219, columnNumber: 17 }, __self: this }, "📝 Writing Tips:"), /*#__PURE__*/ React.createElement("ul", { className: "text-sm text-gray-600 dark:text-gray-400 space-y-1", __source: { fileName: "", lineNumber: 220, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 221, columnNumber: 19 }, __self: this }, "• Be specific with details, setting, and mood"), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 222, columnNumber: 19 }, __self: this }, "• Include information about lighting and composition"), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 223, columnNumber: 19 }, __self: this }, "• Mention specific elements you want to see")))), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-4", __source: { fileName: "", lineNumber: 228, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("select", { value: model, onChange: (e)=>setModel(e.target.value), className: "p-3 rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-900 dark:text-white font-inter", name: "model", __source: { fileName: "", lineNumber: 229, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "dalle", __source: { fileName: "", lineNumber: 235, columnNumber: 17 }, __self: this }, "HDCIL"), /*#__PURE__*/ React.createElement("option", { value: "stable-diffusion", __source: { fileName: "", lineNumber: 236, columnNumber: 17 }, __self: this }, "ARIN")), /*#__PURE__*/ React.createElement("div", { className: "relative", __source: { fileName: "", lineNumber: 239, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 240, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("select", { value: style, onChange: (e)=>setStyle(e.target.value), onMouseEnter: (e)=>setHoveredStyle(e.target.value), onMouseLeave: ()=>setHoveredStyle(''), className: "flex-1 p-3 rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-900 dark:text-white font-inter", name: "style", __source: { fileName: "", lineNumber: 241, columnNumber: 19 }, __self: this }, styles.map((s)=>/*#__PURE__*/ React.createElement("option", { key: s, value: s, __source: { fileName: "", lineNumber: 250, columnNumber: 23 }, __self: this }, s))), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setShowStyleInfo(!showStyleInfo), className: "ml-2 p-2 text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white", __source: { fileName: "", lineNumber: 253, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-info-circle", __source: { fileName: "", lineNumber: 257, columnNumber: 21 }, __self: this }))), (hoveredStyle || showStyleInfo) && /*#__PURE__*/ React.createElement("div", { className: "absolute z-10 mt-2 p-4 bg-white dark:bg-gray-800 rounded-lg shadow-lg border border-gray-200 dark:border-gray-700 w-64", __source: { fileName: "", lineNumber: 261, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-600 dark:text-gray-400", __source: { fileName: "", lineNumber: 262, columnNumber: 21 }, __self: this }, styleDescriptions[hoveredStyle || style]), /*#__PURE__*/ React.createElement("p", { className: "mt-2 text-sm font-semibold", __source: { fileName: "", lineNumber: 265, columnNumber: 21 }, __self: this }, "Recommended Model: ", modelRecommendations[hoveredStyle || style]))), /*#__PURE__*/ React.createElement("input", { type: "number", min: "1", max: "4", value: imageCount, onChange: (e)=>setImageCount(Math.min(4, Math.max(1, parseInt(e.target.value)))), className: "p-3 rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-900 dark:text-white font-inter", name: "imageCount", __source: { fileName: "", lineNumber: 272, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("button", { onClick: generateImages, disabled: !prompt || loading, className: "w-full bg-gray-900 hover:bg-gray-700 text-white font-inter px-6 py-3 rounded-md transition-colors disabled:opacity-50 disabled:cursor-not-allowed", __source: { fileName: "", lineNumber: 283, columnNumber: 13 }, __self: this }, loading ? `Generating image ${currentImageNum} of ${imageCount}...` : 'Generate Images')), error && /*#__PURE__*/ React.createElement("div", { className: "bg-red-100 dark:bg-red-900 border border-red-400 text-red-700 dark:text-red-200 px-4 py-3 rounded relative", __source: { fileName: "", lineNumber: 293, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("strong", { className: "font-bold", __source: { fileName: "", lineNumber: 294, columnNumber: 15 }, __self: this }, "Error:"), /*#__PURE__*/ React.createElement("span", { className: "block sm:inline", __source: { fileName: "", lineNumber: 295, columnNumber: 15 }, __self: this }, " ", error), /*#__PURE__*/ React.createElement("button", { onClick: generateImages, className: "mt-2 bg-red-500 hover:bg-red-600 text-white font-bold py-2 px-4 rounded", __source: { fileName: "", lineNumber: 296, columnNumber: 15 }, __self: this }, "Try Again")), loading && /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 306, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full bg-gray-200 rounded-full h-2.5", __source: { fileName: "", lineNumber: 307, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-gray-900 dark:bg-white h-2.5 rounded-full transition-all duration-500", style: { width: `${currentImageNum / imageCount * 100}%` }, __source: { fileName: "", lineNumber: 308, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("p", { className: "text-center text-gray-600 dark:text-gray-400", __source: { fileName: "", lineNumber: 313, columnNumber: 15 }, __self: this }, "Generating image ", currentImageNum, " of ", imageCount, "...", /*#__PURE__*/ React.createElement("br", { __source: { fileName: "", lineNumber: 315, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "text-sm", __source: { fileName: "", lineNumber: 316, columnNumber: 17 }, __self: this }, "Estimated time remaining: ", Math.max(1, imageCount - currentImageNum), " minute(s)")), /*#__PURE__*/ React.createElement("div", { className: "flex justify-center items-center py-4", __source: { fileName: "", lineNumber: 320, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "animate-spin rounded-full h-12 w-12 border-4 border-gray-900 dark:border-white border-t-transparent", __source: { fileName: "", lineNumber: 321, columnNumber: 17 }, __self: this }))), generatedImages.length > 0 && !loading && /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 mt-8", __source: { fileName: "", lineNumber: 327, columnNumber: 13 }, __self: this }, generatedImages.map((image, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "relative bg-white dark:bg-gray-800 rounded-lg shadow-lg p-4", __source: { fileName: "", lineNumber: 329, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: image.url, alt: `AI generated ${image.style} illustration ${index + 1}`, className: "w-full aspect-square object-cover rounded-lg mb-4", __source: { fileName: "", lineNumber: 330, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "space-y-2", __source: { fileName: "", lineNumber: 335, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-600 dark:text-gray-400", __source: { fileName: "", lineNumber: 336, columnNumber: 21 }, __self: this }, "Style: ", image.style, /*#__PURE__*/ React.createElement("br", { __source: { fileName: "", lineNumber: 338, columnNumber: 23 }, __self: this }), "Model: ", image.model), /*#__PURE__*/ React.createElement("div", { className: "flex space-x-2", __source: { fileName: "", lineNumber: 341, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleDownload(image.url, index), className: "flex-1 bg-gray-900 hover:bg-gray-700 text-white px-3 py-1 rounded text-sm", __source: { fileName: "", lineNumber: 342, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-download mr-1", __source: { fileName: "", lineNumber: 346, columnNumber: 25 }, __self: this }), " Download"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleCopyPrompt(image.prompt), className: "flex-1 bg-gray-900 hover:bg-gray-700 text-white px-3 py-1 rounded text-sm", __source: { fileName: "", lineNumber: 348, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-copy mr-1", __source: { fileName: "", lineNumber: 352, columnNumber: 25 }, __self: this }), " Copy Prompt"))))))))); }