function MainComponent() { const [prompt, setPrompt] = useState(""); const [generatedIcon, setGeneratedIcon] = useState(""); const [isLoading, setIsLoading] = useState(false); const [error, setError] = useState(""); const [stylePreset, setStylePreset] = useState("Minimal"); const [size, setSize] = useState("512x512"); const [colorScheme, setColorScheme] = useState("Monochrome"); const [primaryColor, setPrimaryColor] = useState("#000000"); const [secondaryColor, setSecondaryColor] = useState("#FFFFFF"); const [useGradient, setUseGradient] = useState(false); const [showShortcuts, setShowShortcuts] = useState(false); const [iconShape, setIconShape] = useState("Square"); const [categories] = useState([ { name: "Tech", prompts: [ "modern tech logo", "circuit pattern", "digital wave icon" ] }, { name: "Nature", prompts: [ "leaf design", "mountain silhouette", "water droplet" ] }, { name: "Abstract", prompts: [ "geometric shapes", "fluid pattern", "minimalist lines" ] }, { name: "Business", prompts: [ "professional emblem", "corporate symbol", "business icon" ] } ]); const generateIcon = async ()=>{ if (!prompt.trim()) { setError("Please enter a description for your icon"); return; } setIsLoading(true); setError(""); try { let colorPrompt = ""; if (colorScheme === "Custom") { colorPrompt = useGradient ? ` with a gradient from ${primaryColor} to ${secondaryColor}` : ` using ${primaryColor} and ${secondaryColor} colors`; } else { colorPrompt = ` with ${colorScheme} color scheme`; } const styleDescriptions = { Minimal: "minimalist and clean", "Flat Modern": "flat design with modern aesthetics", "3D Rendered": "three-dimensional rendered with depth and shadows", "Geometric Abstract": "made of basic geometric shapes in an abstract style", "Hand-drawn Sketch": "hand-drawn sketchy style with natural lines", "Gradient Modern": "modern design with smooth gradient transitions", "Pixel Art": "8-bit pixel art style", "Neon Glow": "glowing neon effect with light emission", Isometric: "isometric 3D perspective", "Line Art": "continuous line art style with clean strokes", Polygon: "low-poly geometric style with angular faces", Metallic: "metallic finish with reflective surfaces", Clay: "3D clay-like texture with soft shadows", Illustrated: "hand-illustrated style with detailed linework" }; const styleDescription = styleDescriptions[stylePreset] || stylePreset.toLowerCase(); const fullPrompt = `${prompt}. Generate this as a ${styleDescription} icon in a ${iconShape.toLowerCase()} shape${colorPrompt}, centered composition, ${size}`; const response = await fetch(`/integrations/dall-e-3/?prompt=${encodeURIComponent(fullPrompt)}`); if (!response.ok) { throw new Error(`Error: ${response.status}`); } const data = await response.json(); const generatedUrl = data.data[0]; setGeneratedIcon(generatedUrl); const saveResponse = await fetch("/api/save-icon", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ prompt, image_url: generatedUrl, style_preset: stylePreset, size, color_scheme: colorScheme, primary_color: primaryColor, secondary_color: secondaryColor, use_gradient: useGradient }) }); if (!saveResponse.ok) { console.error("Failed to save icon to history"); } } catch (err) { setError("Failed to generate icon. Please try again later."); console.error(err); } finally{ setIsLoading(false); } }; useEffect(()=>{ const handleKeyPress = (e)=>{ if (e.key === "Enter" && !isLoading && prompt.trim()) { generateIcon(); } else if (e.key === "Escape") { setPrompt(""); } }; document.addEventListener("keydown", handleKeyPress); return ()=>document.removeEventListener("keydown", handleKeyPress); }, [ prompt, isLoading ]); return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-100 py-4 px-3 sm:py-8 sm:px-6", __source: { fileName: "", lineNumber: 125, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-4xl mx-auto", __source: { fileName: "", lineNumber: 126, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl sm:text-4xl font-bold text-center text-gray-900 mb-4 sm:mb-8 font-roboto", __source: { fileName: "", lineNumber: 127, columnNumber: 9 }, __self: this }, "AI Icon Generator"), /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg shadow p-4 sm:p-6 mb-4 sm:mb-6", __source: { fileName: "", lineNumber: 131, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 sm:grid-cols-4 gap-3 mb-4", __source: { fileName: "", lineNumber: 132, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("select", { name: "style-preset", value: stylePreset, onChange: (e)=>setStylePreset(e.target.value), className: "w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm", __source: { fileName: "", lineNumber: 133, columnNumber: 13 }, __self: this }, [ "Minimal", "Flat Modern", "3D Rendered", "Geometric Abstract", "Hand-drawn Sketch", "Gradient Modern", "Pixel Art", "Neon Glow", "Isometric", "Line Art", "Polygon", "Metallic", "Clay", "Illustrated" ].map((style)=>/*#__PURE__*/ React.createElement("option", { key: style, value: style, __source: { fileName: "", lineNumber: 155, columnNumber: 17 }, __self: this }, style))), /*#__PURE__*/ React.createElement("select", { name: "icon-shape", value: iconShape, onChange: (e)=>setIconShape(e.target.value), className: "w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm", __source: { fileName: "", lineNumber: 161, columnNumber: 13 }, __self: this }, [ "Square", "Circle", "Rounded Square", "Hexagon" ].map((shape)=>/*#__PURE__*/ React.createElement("option", { key: shape, value: shape, __source: { fileName: "", lineNumber: 169, columnNumber: 19 }, __self: this }, shape))), /*#__PURE__*/ React.createElement("select", { name: "size", value: size, onChange: (e)=>setSize(e.target.value), className: "w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm", __source: { fileName: "", lineNumber: 176, columnNumber: 13 }, __self: this }, [ "512x512", "256x256", "128x128", "64x64" ].map((size)=>/*#__PURE__*/ React.createElement("option", { key: size, value: size, __source: { fileName: "", lineNumber: 183, columnNumber: 17 }, __self: this }, size))), /*#__PURE__*/ React.createElement("select", { name: "color-scheme", value: colorScheme, onChange: (e)=>setColorScheme(e.target.value), className: "w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm", __source: { fileName: "", lineNumber: 189, columnNumber: 13 }, __self: this }, [ "Monochrome", "Blue & White", "Green & White", "Red & White", "Purple & White", "Custom" ].map((scheme)=>/*#__PURE__*/ React.createElement("option", { key: scheme, value: scheme, __source: { fileName: "", lineNumber: 203, columnNumber: 17 }, __self: this }, scheme)))), colorScheme === "Custom" && /*#__PURE__*/ React.createElement("div", { className: "mb-4 grid grid-cols-1 sm:grid-cols-3 gap-3", __source: { fileName: "", lineNumber: 211, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-2", __source: { fileName: "", lineNumber: 212, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "text-sm", __source: { fileName: "", lineNumber: 213, columnNumber: 17 }, __self: this }, "Primary:"), /*#__PURE__*/ React.createElement("input", { type: "color", value: primaryColor, onChange: (e)=>setPrimaryColor(e.target.value), className: "flex-1 h-8 sm:h-10 cursor-pointer rounded", __source: { fileName: "", lineNumber: 214, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-2", __source: { fileName: "", lineNumber: 221, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "text-sm", __source: { fileName: "", lineNumber: 222, columnNumber: 17 }, __self: this }, "Secondary:"), /*#__PURE__*/ React.createElement("input", { type: "color", value: secondaryColor, onChange: (e)=>setSecondaryColor(e.target.value), className: "flex-1 h-8 sm:h-10 cursor-pointer rounded", __source: { fileName: "", lineNumber: 223, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-2", __source: { fileName: "", lineNumber: 230, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "text-sm", __source: { fileName: "", lineNumber: 231, columnNumber: 17 }, __self: this }, "Use Gradient:"), /*#__PURE__*/ React.createElement("input", { type: "checkbox", checked: useGradient, onChange: (e)=>setUseGradient(e.target.checked), className: "w-5 h-5 cursor-pointer", __source: { fileName: "", lineNumber: 232, columnNumber: 17 }, __self: this }))), /*#__PURE__*/ React.createElement("textarea", { name: "icon-prompt", placeholder: "Describe your icon (e.g., 'a minimalist rocket logo in blue')", value: prompt, onChange: (e)=>setPrompt(e.target.value), maxLength: 2000, rows: 3, className: "w-full px-3 py-2 border border-gray-300 rounded-md mb-3 focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm resize-y min-h-[80px]", __source: { fileName: "", lineNumber: 242, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "text-right text-xs text-gray-500 -mt-2 mb-2", __source: { fileName: "", lineNumber: 251, columnNumber: 11 }, __self: this }, prompt.length, "/2000 characters"), /*#__PURE__*/ React.createElement("button", { onClick: generateIcon, disabled: isLoading || !prompt.trim(), className: "w-full bg-blue-500 text-white px-4 py-2 rounded-md hover:bg-blue-600 disabled:bg-gray-400 disabled:cursor-not-allowed transition-colors text-sm sm:text-base", __source: { fileName: "", lineNumber: 254, columnNumber: 11 }, __self: this }, isLoading ? /*#__PURE__*/ React.createElement("span", { className: "flex items-center justify-center", __source: { fileName: "", lineNumber: 260, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-spinner fa-spin mr-2", __source: { fileName: "", lineNumber: 261, columnNumber: 17 }, __self: this }), "Creating your icon...") : "Generate Icon"), /*#__PURE__*/ React.createElement("div", { className: "pt-6 mt-6 border-t border-gray-200", __source: { fileName: "", lineNumber: 268, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-semibold mb-2 sm:mb-3", __source: { fileName: "", lineNumber: 269, columnNumber: 13 }, __self: this }, "Need inspiration? Try these prompts:"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-3", __source: { fileName: "", lineNumber: 272, columnNumber: 13 }, __self: this }, categories.map((cat)=>/*#__PURE__*/ React.createElement("div", { key: cat.name, className: "space-y-1", __source: { fileName: "", lineNumber: 274, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("h4", { className: "font-medium text-gray-700", __source: { fileName: "", lineNumber: 275, columnNumber: 19 }, __self: this }, cat.name), /*#__PURE__*/ React.createElement("div", { className: "space-y-1", __source: { fileName: "", lineNumber: 276, columnNumber: 19 }, __self: this }, cat.prompts.map((p)=>/*#__PURE__*/ React.createElement("button", { key: p, onClick: ()=>setPrompt(p), className: "text-sm text-blue-500 hover:text-blue-700 block w-full text-left py-1", __source: { fileName: "", lineNumber: 278, columnNumber: 23 }, __self: this }, p)))))))), error && /*#__PURE__*/ React.createElement("div", { className: "bg-red-50 border border-red-200 text-red-700 px-3 py-2 rounded-md mb-4 text-sm", __source: { fileName: "", lineNumber: 294, columnNumber: 11 }, __self: this }, error), generatedIcon && /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg shadow p-4 sm:p-6 mb-4 sm:mb-6", __source: { fileName: "", lineNumber: 300, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-2 gap-3 sm:gap-4", __source: { fileName: "", lineNumber: 301, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-3 sm:p-4 bg-white rounded-lg border", __source: { fileName: "", lineNumber: 302, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-16 h-16 mx-auto", __source: { fileName: "", lineNumber: 303, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: generatedIcon, alt: "Light mode preview", className: "w-full h-full rounded-xl object-cover", __source: { fileName: "", lineNumber: 304, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("p", { className: "text-center text-xs sm:text-sm mt-2", __source: { fileName: "", lineNumber: 310, columnNumber: 17 }, __self: this }, "Light Mode")), /*#__PURE__*/ React.createElement("div", { className: "p-3 sm:p-4 bg-[#1a1a1a] rounded-lg border", __source: { fileName: "", lineNumber: 315, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-16 h-16 mx-auto", __source: { fileName: "", lineNumber: 316, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: generatedIcon, alt: "Dark mode preview", className: "w-full h-full object-cover", __source: { fileName: "", lineNumber: 317, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("p", { className: "text-center text-xs sm:text-sm mt-2 text-white", __source: { fileName: "", lineNumber: 323, columnNumber: 17 }, __self: this }, "Dark Mode"))))), /*#__PURE__*/ React.createElement("div", { className: "fixed bottom-3 right-3 sm:bottom-4 sm:right-4", __source: { fileName: "", lineNumber: 332, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setShowShortcuts(true), className: "bg-gray-800 text-white p-2 rounded-full shadow-lg", __source: { fileName: "", lineNumber: 333, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-keyboard", __source: { fileName: "", lineNumber: 337, columnNumber: 11 }, __self: this }))), showShortcuts && /*#__PURE__*/ React.createElement("div", { className: "fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4", __source: { fileName: "", lineNumber: 342, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white p-4 sm:p-6 rounded-lg max-w-md w-full", __source: { fileName: "", lineNumber: 343, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-bold mb-3 sm:mb-4", __source: { fileName: "", lineNumber: 344, columnNumber: 13 }, __self: this }, "Keyboard Shortcuts"), /*#__PURE__*/ React.createElement("ul", { className: "space-y-2", __source: { fileName: "", lineNumber: 345, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("li", { className: "text-sm", __source: { fileName: "", lineNumber: 346, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("kbd", { className: "bg-gray-100 px-2 py-1 rounded text-xs", __source: { fileName: "", lineNumber: 347, columnNumber: 17 }, __self: this }, "Enter"), " ", "Generate Icon"), /*#__PURE__*/ React.createElement("li", { className: "text-sm", __source: { fileName: "", lineNumber: 352, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("kbd", { className: "bg-gray-100 px-2 py-1 rounded text-xs", __source: { fileName: "", lineNumber: 353, columnNumber: 17 }, __self: this }, "Esc"), " ", "Clear Input")), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setShowShortcuts(false), className: "mt-3 sm:mt-4 text-blue-500 text-sm", __source: { fileName: "", lineNumber: 357, columnNumber: 13 }, __self: this }, "Close"))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 367, columnNumber: 7 }, __self: this }, ` @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .loading-animation { animation: spin 1s linear infinite; } `)); }