function MainComponent() { const [prompt, setPrompt] = useState(""); const [patterns, setPatterns] = useState([]); const [numPatterns, setNumPatterns] = useState(1); const [loading, setLoading] = useState(false); const [error, setError] = useState(""); const [selectedStyles, setSelectedStyles] = useState([]); const [fullscreenPattern, setFullscreenPattern] = useState(null); const [notification, setNotification] = useState(null); const [colorScheme, setColorScheme] = useState("vibrant"); const [density, setDensity] = useState("medium"); const [textareaHeight, setTextareaHeight] = useState("auto"); const [expandedSections, setExpandedSections] = useState({ styleFusion: true, colorScheme: true, patternDensity: true }); const toggleSection = (section)=>{ setExpandedSections((prev)=>({ ...prev, [section]: !prev[section] })); }; const toggleAllSections = (expanded)=>{ setExpandedSections({ styleFusion: expanded, colorScheme: expanded, patternDensity: expanded }); }; const examplePrompts = [ "Abstract geometric shapes in pastel colors", "Art deco pattern with gold and black", "Watercolor floral pattern in autumn colors", "Modern minimalist pattern with circles and lines" ]; const themes = { nature: [ "Floral", "Leaves", "Ocean", "Mountains", "Trees" ], geometric: [ "Abstract", "Shapes", "Lines", "Dots", "Grid" ], texture: [ "Marble", "Wood", "Fabric", "Leather", "Metal" ] }; const colorSchemes = [ "Pastel", "Vibrant", "Monochrome", "Earth", "Neon", "Vintage", "Jewel Tones", "Metallic", "Ocean", "Forest", "Desert", "Sunset", "Rainbow", "Grayscale", "Duotone" ]; const densityOptions = [ "Very Sparse", "Sparse", "Medium", "Dense", "Very Dense", "Micro", "Macro", "Mixed" ]; const styles = [ "Watercolor", "Minimalist", "Ink Print", "Oil Painting", "Cute", "Low Poly", "Isometric", "Papercut", "Line Art", "Tribal", "Cubism", "Comic", "Paper Quilling", "Stained Glass", "Pop Art", "Zentangle", "Origami", "Art Nouveau", "Gothic", "Retro", "Futuristic", "Baroque", "Celtic", "Japanese", "Scandinavian", "Bohemian", "Industrial", "Steampunk", "Digital", "Graffiti", "Mosaic", "Mandala", "Abstract", "Geometric", "Organic", "Psychedelic", "Memphis Style", "Bauhaus", "3D", "Pixel Art" ]; const generatePattern = async ()=>{ setLoading(true); setError(""); setPatterns([]); const fullPrompt = `${prompt}, ${selectedStyles.join(" + ")}, ${colorScheme} colors, ${density} pattern, seamless pattern, tileable, high quality`; try { const patternPromises = Array(numPatterns).fill(0).map(async ()=>{ const response = await fetch(`/integrations/stable-diffusion-v-3/?prompt=${encodeURIComponent(fullPrompt)}&width=1024&height=1024`); if (!response.ok) { throw new Error(`Error: ${response.status}`); } const data = await response.json(); return data.data[0]; }); const newPatterns = await Promise.all(patternPromises); setPatterns(newPatterns); showNotification("Patterns generated successfully!"); } catch (err) { setError("Failed to generate patterns using Stable Diffusion. Please try again."); console.error(err); } finally{ setLoading(false); } }; const toggleStyle = (style)=>{ setSelectedStyles((prev)=>prev.includes(style) ? prev.filter((s)=>s !== style) : [ ...prev, style ]); }; const clearStyles = ()=>{ setSelectedStyles([]); }; const showNotification = (message)=>{ setNotification(message); setTimeout(()=>setNotification(null), 3000); }; const getRandomPrompt = ()=>{ const themes = [ "nature", "geometric", "texture" ]; const randomTheme = themes[Math.floor(Math.random() * themes.length)]; const randomStyle = styles[Math.floor(Math.random() * styles.length)]; const randomColor = colorSchemes[Math.floor(Math.random() * colorSchemes.length)]; setPrompt(`${randomTheme} pattern with ${randomStyle} style in ${randomColor} colors`); }; const handleDownload = async (patternUrl, index)=>{ try { const response = await fetch(patternUrl); const blob = await response.blob(); const url = window.URL.createObjectURL(blob); const link = document.createElement("a"); link.href = url; link.download = `pattern-${index + 1}-${Date.now()}.png`; document.body.appendChild(link); link.click(); document.body.removeChild(link); window.URL.revokeObjectURL(url); } catch (err) { console.error("Download failed:", err); setError("Failed to download pattern"); } }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-100 dark:bg-gray-900", __source: { fileName: "", lineNumber: 186, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "grid md:grid-cols-[40%_60%] h-screen", __source: { fileName: "", lineNumber: 187, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "md:h-screen md:overflow-y-auto bg-white dark:bg-gray-800 p-6 space-y-6 border-r border-gray-200 dark:border-gray-700", __source: { fileName: "", lineNumber: 189, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl md:text-4xl font-bold text-gray-900 dark:text-white mb-6 font-inter", __source: { fileName: "", lineNumber: 190, columnNumber: 11 }, __self: this }, "Pattern Generator"), /*#__PURE__*/ React.createElement("div", { className: "flex justify-end mb-4", __source: { fileName: "", lineNumber: 193, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>toggleAllSections(true), className: "text-sm text-gray-500 hover:text-gray-700 dark:hover:text-gray-300 mr-4", __source: { fileName: "", lineNumber: 194, columnNumber: 13 }, __self: this }, "Expand All"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>toggleAllSections(false), className: "text-sm text-gray-500 hover:text-gray-700 dark:hover:text-gray-300", __source: { fileName: "", lineNumber: 200, columnNumber: 13 }, __self: this }, "Collapse All")), /*#__PURE__*/ React.createElement("div", { className: "space-y-6", __source: { fileName: "", lineNumber: 207, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 208, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative", __source: { fileName: "", lineNumber: 209, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("textarea", { name: "prompt", value: prompt, onChange: (e)=>setPrompt(e.target.value), placeholder: "Describe your pattern...", maxLength: 4000, rows: 3, className: "w-full p-4 md:p-3 border border-gray-200 dark:border-gray-700 rounded-lg text-gray-900 dark:text-white bg-transparent font-inter pr-24 text-base md:text-sm min-h-[96px] max-h-[256px] resize-y", style: { overflowY: "auto", scrollbarWidth: "thin", scrollbarColor: "rgba(156, 163, 175, 0.5) transparent" }, __source: { fileName: "", lineNumber: 210, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "absolute right-4 top-4 md:top-3 text-sm text-gray-500", __source: { fileName: "", lineNumber: 224, columnNumber: 17 }, __self: this }, prompt.length, "/4000")), /*#__PURE__*/ React.createElement("div", { className: "flex gap-3", __source: { fileName: "", lineNumber: 229, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("select", { value: numPatterns, onChange: (e)=>setNumPatterns(Number(e.target.value)), className: "min-w-[120px] p-3 border border-gray-200 dark:border-gray-700 rounded-lg text-gray-900 dark:text-white bg-transparent font-inter text-base md:text-sm", __source: { fileName: "", lineNumber: 230, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: 1, __source: { fileName: "", lineNumber: 235, columnNumber: 19 }, __self: this }, "1 Pattern"), /*#__PURE__*/ React.createElement("option", { value: 2, __source: { fileName: "", lineNumber: 236, columnNumber: 19 }, __self: this }, "2 Patterns"), /*#__PURE__*/ React.createElement("option", { value: 3, __source: { fileName: "", lineNumber: 237, columnNumber: 19 }, __self: this }, "3 Patterns"), /*#__PURE__*/ React.createElement("option", { value: 4, __source: { fileName: "", lineNumber: 238, columnNumber: 19 }, __self: this }, "4 Patterns")), /*#__PURE__*/ React.createElement("button", { onClick: getRandomPrompt, className: "flex-1 bg-gray-100 dark:bg-gray-700 text-gray-900 dark:text-white font-inter p-3 rounded-lg hover:opacity-80 transition-opacity text-base md:text-sm", __source: { fileName: "", lineNumber: 240, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-random mr-2", __source: { fileName: "", lineNumber: 244, columnNumber: 19 }, __self: this }), "Random Inspiration")), /*#__PURE__*/ React.createElement("div", { className: "border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden", __source: { fileName: "", lineNumber: 248, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>toggleSection("styleFusion"), className: "w-full flex justify-between items-center p-4 bg-gray-50 dark:bg-gray-800/50 hover:bg-gray-100 dark:hover:bg-gray-700/50 transition-colors", __source: { fileName: "", lineNumber: 249, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-sm font-medium text-gray-900 dark:text-white font-inter", __source: { fileName: "", lineNumber: 253, columnNumber: 19 }, __self: this }, "Style Fusion"), /*#__PURE__*/ React.createElement("i", { className: `fas fa-chevron-down transition-transform duration-300 ${expandedSections.styleFusion ? "rotate-180" : ""}`, __source: { fileName: "", lineNumber: 256, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: `transition-all duration-300 overflow-hidden ${expandedSections.styleFusion ? "max-h-[500px] opacity-100" : "max-h-0 opacity-0"}`, __source: { fileName: "", lineNumber: 260, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-4 border-t border-gray-200 dark:border-gray-700", __source: { fileName: "", lineNumber: 267, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-end mb-3", __source: { fileName: "", lineNumber: 268, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: clearStyles, className: "text-sm text-gray-500 hover:text-gray-700 dark:hover:text-gray-300 underline", __source: { fileName: "", lineNumber: 269, columnNumber: 23 }, __self: this }, "Clear all")), /*#__PURE__*/ React.createElement("div", { className: "h-[300px] overflow-y-auto", __source: { fileName: "", lineNumber: 276, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-2 gap-2", __source: { fileName: "", lineNumber: 277, columnNumber: 23 }, __self: this }, styles.map((style)=>/*#__PURE__*/ React.createElement("button", { key: style, onClick: ()=>toggleStyle(style), className: `p-3 text-base md:text-sm rounded-lg border transition-all font-inter ${selectedStyles.includes(style) ? "border-blue-500 bg-blue-50 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300" : "border-gray-200 dark:border-gray-700 text-gray-900 dark:text-white hover:bg-gray-50 dark:hover:bg-gray-700/50"}`, __source: { fileName: "", lineNumber: 279, columnNumber: 27 }, __self: this }, style))))))))), /*#__PURE__*/ React.createElement("div", { className: "space-y-6", __source: { fileName: "", lineNumber: 299, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "space-y-6", __source: { fileName: "", lineNumber: 300, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden", __source: { fileName: "", lineNumber: 301, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>toggleSection("colorScheme"), className: "w-full flex justify-between items-center p-4 bg-gray-50 dark:bg-gray-800/50 hover:bg-gray-100 dark:hover:bg-gray-700/50 transition-colors", __source: { fileName: "", lineNumber: 302, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-sm font-medium text-gray-900 dark:text-white font-inter", __source: { fileName: "", lineNumber: 306, columnNumber: 19 }, __self: this }, "Color Scheme"), /*#__PURE__*/ React.createElement("i", { className: `fas fa-chevron-down transition-transform duration-300 ${expandedSections.colorScheme ? "rotate-180" : ""}`, __source: { fileName: "", lineNumber: 309, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: `transition-all duration-300 overflow-hidden ${expandedSections.colorScheme ? "max-h-[500px] opacity-100" : "max-h-0 opacity-0"}`, __source: { fileName: "", lineNumber: 313, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-4 border-t border-gray-200 dark:border-gray-700", __source: { fileName: "", lineNumber: 320, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap gap-2", __source: { fileName: "", lineNumber: 321, columnNumber: 21 }, __self: this }, colorSchemes.map((scheme)=>/*#__PURE__*/ React.createElement("button", { key: scheme, onClick: ()=>setColorScheme(scheme.toLowerCase()), className: `px-4 py-1.5 text-sm rounded-full transition-all font-inter ${colorScheme === scheme.toLowerCase() ? "bg-purple-500 text-white" : "bg-gray-100 dark:bg-gray-700 text-gray-900 dark:text-white hover:bg-gray-200 dark:hover:bg-gray-600"}`, __source: { fileName: "", lineNumber: 323, columnNumber: 25 }, __self: this }, scheme)))))), /*#__PURE__*/ React.createElement("div", { className: "border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden", __source: { fileName: "", lineNumber: 340, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>toggleSection("patternDensity"), className: "w-full flex justify-between items-center p-4 bg-gray-50 dark:bg-gray-800/50 hover:bg-gray-100 dark:hover:bg-gray-700/50 transition-colors", __source: { fileName: "", lineNumber: 341, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-sm font-medium text-gray-900 dark:text-white font-inter", __source: { fileName: "", lineNumber: 345, columnNumber: 19 }, __self: this }, "Pattern Density"), /*#__PURE__*/ React.createElement("i", { className: `fas fa-chevron-down transition-transform duration-300 ${expandedSections.patternDensity ? "rotate-180" : ""}`, __source: { fileName: "", lineNumber: 348, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: `transition-all duration-300 overflow-hidden ${expandedSections.patternDensity ? "max-h-[500px] opacity-100" : "max-h-0 opacity-0"}`, __source: { fileName: "", lineNumber: 352, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-4 border-t border-gray-200 dark:border-gray-700", __source: { fileName: "", lineNumber: 359, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap gap-2", __source: { fileName: "", lineNumber: 360, columnNumber: 21 }, __self: this }, densityOptions.map((option)=>/*#__PURE__*/ React.createElement("button", { key: option, onClick: ()=>setDensity(option.toLowerCase()), className: `px-4 py-1.5 text-sm rounded-full transition-all font-inter ${density === option.toLowerCase() ? "bg-green-500 text-white" : "bg-gray-100 dark:bg-gray-700 text-gray-900 dark:text-white hover:bg-gray-200 dark:hover:bg-gray-600"}`, __source: { fileName: "", lineNumber: 362, columnNumber: 25 }, __self: this }, option)))))), /*#__PURE__*/ React.createElement("button", { onClick: generatePattern, disabled: loading || !prompt, className: "w-full bg-gray-900 dark:bg-gray-700 text-white font-inter py-3.5 px-6 rounded-lg hover:opacity-80 transition-opacity disabled:opacity-50", __source: { fileName: "", lineNumber: 379, columnNumber: 15 }, __self: this }, loading ? "Generating..." : `Generate ${numPatterns} Pattern${numPatterns > 1 ? "s" : ""}`))), /*#__PURE__*/ React.createElement("div", { className: "bg-white dark:bg-gray-800 rounded-lg p-6", __source: { fileName: "", lineNumber: 391, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 392, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-700 dark:text-gray-300 font-inter mb-4", __source: { fileName: "", lineNumber: 393, columnNumber: 15 }, __self: this }, "Try these examples:"), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col gap-2", __source: { fileName: "", lineNumber: 396, columnNumber: 15 }, __self: this }, examplePrompts.map((examplePrompt)=>/*#__PURE__*/ React.createElement("button", { key: examplePrompt, onClick: ()=>setPrompt(examplePrompt), className: "text-left text-sm border border-gray-200 dark:border-gray-700 rounded-lg px-4 py-3 text-gray-900 dark:text-white hover:bg-gray-50 dark:hover:bg-gray-700/50 transition-colors font-inter", __source: { fileName: "", lineNumber: 398, columnNumber: 19 }, __self: this }, examplePrompt)))))), /*#__PURE__*/ React.createElement("div", { className: "h-screen overflow-y-auto p-6", __source: { fileName: "", lineNumber: 412, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "space-y-6", __source: { fileName: "", lineNumber: 413, columnNumber: 11 }, __self: this }, error && /*#__PURE__*/ React.createElement("div", { className: "text-red-500 dark:text-red-400 mb-4 text-center font-inter p-4 bg-red-50 dark:bg-red-900/20 rounded-lg", __source: { fileName: "", lineNumber: 415, columnNumber: 15 }, __self: this }, error), notification && /*#__PURE__*/ React.createElement("div", { className: "fixed top-4 right-4 bg-green-500 text-white px-6 py-3 rounded-lg shadow-lg z-50 font-inter", __source: { fileName: "", lineNumber: 421, columnNumber: 15 }, __self: this }, notification), fullscreenPattern && /*#__PURE__*/ React.createElement("div", { className: "fixed inset-0 bg-black bg-opacity-90 flex items-center justify-center z-50 p-4", onClick: ()=>setFullscreenPattern(null), __source: { fileName: "", lineNumber: 427, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: fullscreenPattern, alt: "Fullscreen pattern", className: "max-w-[90vw] max-h-[90vh] object-contain rounded-lg", __source: { fileName: "", lineNumber: 431, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: `grid gap-6 ${patterns.length === 1 ? "grid-cols-1" : patterns.length === 2 ? "grid-cols-1 md:grid-cols-2" : "grid-cols-1 md:grid-cols-2 lg:grid-cols-3"}`, __source: { fileName: "", lineNumber: 439, columnNumber: 13 }, __self: this }, loading && Array(numPatterns).fill(0).map((_, index)=>/*#__PURE__*/ React.createElement("div", { key: `loading-${index}`, className: "animate-pulse bg-gray-200 dark:bg-gray-700 rounded-lg w-full", style: { aspectRatio: "1/1" }, __source: { fileName: "", lineNumber: 452, columnNumber: 21 }, __self: this })), !loading && patterns.map((patternUrl, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "bg-white dark:bg-gray-800 rounded-lg p-4 space-y-4", __source: { fileName: "", lineNumber: 461, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative w-full", __source: { fileName: "", lineNumber: 465, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: patternUrl, alt: `Generated pattern ${index + 1}`, className: "w-full rounded-lg cursor-pointer hover:opacity-90 transition-opacity", onClick: ()=>setFullscreenPattern(patternUrl), style: { aspectRatio: "1/1" }, __source: { fileName: "", lineNumber: 466, columnNumber: 23 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex justify-center", __source: { fileName: "", lineNumber: 474, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleDownload(patternUrl, index), className: "bg-gray-900 dark:bg-gray-700 text-white font-inter py-3 px-6 rounded-lg hover:opacity-80 transition-opacity text-base md:text-sm", __source: { fileName: "", lineNumber: 475, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-download mr-2", __source: { fileName: "", lineNumber: 479, columnNumber: 25 }, __self: this }), "Download")), /*#__PURE__*/ React.createElement("div", { className: "text-sm text-gray-500 dark:text-gray-400 text-center", __source: { fileName: "", lineNumber: 482, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 483, columnNumber: 23 }, __self: this }, selectedStyles.join(" + ") || "No styles"), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 484, columnNumber: 23 }, __self: this }, colorScheme, " • ", density))))), !loading && patterns.length === 0 && /*#__PURE__*/ React.createElement("div", { className: "text-center text-gray-700 dark:text-gray-300 font-inter bg-white dark:bg-gray-800 rounded-lg p-8", __source: { fileName: "", lineNumber: 493, columnNumber: 15 }, __self: this }, "Your generated patterns will appear here"))))); }