function MainComponent() { const [companyName, setCompanyName] = useState(""); const [description, setDescription] = useState(""); const [logo, setLogo] = useState(""); const [loading, setLoading] = useState(false); const [error, setError] = useState(""); const [size, setSize] = useState("medium"); const [colorScheme, setColorScheme] = useState("Any"); const [styleType, setStyleType] = useState("Minimal/Modern"); const [industry, setIndustry] = useState(""); const [layoutPreference, setLayoutPreference] = useState("Symbol + Text"); const [includeText, setIncludeText] = useState(true); const [tagline, setTagline] = useState(""); const generateLogo = async ()=>{ if (!companyName || !description) { setError("Please fill in both company name and style description"); return; } setLoading(true); setError(""); try { const basePrompt = `Create a professional business logo for a company named "${companyName}"${tagline ? ` with tagline "${tagline}"` : ""}. `; const stylePrompt = `Style: ${description}. Using ${colorScheme} colors in a ${styleType} style. `; const industryPrompt = industry ? `This is for a ${industry} company. ` : ""; const layoutPrompt = `The logo should be ${layoutPreference}${includeText ? " with the company name included" : " without text"}. `; const finalPrompt = basePrompt + stylePrompt + industryPrompt + layoutPrompt + "Make it minimal, scalable, and suitable for business use. The logo should be centered in the image with plenty of padding."; const response = await fetch(`/integrations/dall-e-3/?prompt=${encodeURIComponent(finalPrompt)}`); if (!response.ok) { throw new Error(`Error: ${response.status} ${response.statusText}`); } const data = await response.json(); setLogo(data.data[0]); } catch (err) { setError("Failed to generate logo. Please try again later. If the problem persists, try a different style description."); console.error(err); } finally{ setLoading(false); } }; const generateVariation = async ()=>{ setLoading(true); setError(""); try { const prompt = `Create a variation of a logo for "${companyName}" with style: ${description}. Make it minimal, scalable, and suitable for business use.`; const response = await fetch(`/integrations/dall-e-3/?prompt=${encodeURIComponent(prompt)}`); if (!response.ok) { throw new Error(`Error: ${response.status} ${response.statusText}`); } const data = await response.json(); setLogo(data.data[0]); } catch (err) { setError("Failed to generate variation. Please try again later."); console.error(err); } finally{ setLoading(false); } }; const downloadLogo = async ()=>{ const link = document.createElement("a"); link.href = logo; link.download = `${companyName.toLowerCase().replace(/\s+/g, "-")}-logo.png`; document.body.appendChild(link); link.click(); document.body.removeChild(link); }; const examplePrompts = [ "modern tech startup with bold colors", "eco-friendly organic brand with natural elements", "luxury fashion brand with elegant design", "playful children's brand with bright colors" ]; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-50 py-6 px-4 sm:py-12 sm:px-6 lg:px-8", __source: { fileName: "", lineNumber: 103, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-2xl mx-auto", __source: { fileName: "", lineNumber: 104, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mb-6 sm:mb-8", __source: { fileName: "", lineNumber: 105, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl sm:text-4xl font-bold text-gray-900 font-montserrat", __source: { fileName: "", lineNumber: 106, columnNumber: 11 }, __self: this }, "AI Logo Generator")), /*#__PURE__*/ React.createElement("div", { className: "space-y-4 sm:space-y-6 bg-white p-4 sm:p-8 rounded-lg shadow", __source: { fileName: "", lineNumber: 111, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 gap-4 sm:gap-6", __source: { fileName: "", lineNumber: 112, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 113, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700 mb-1 sm:mb-2", __source: { fileName: "", lineNumber: 114, columnNumber: 15 }, __self: this }, "Company Name"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "companyName", value: companyName, onChange: (e)=>setCompanyName(e.target.value), className: "w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500", placeholder: "Enter your company name", __source: { fileName: "", lineNumber: 117, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 127, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700 mb-1 sm:mb-2", __source: { fileName: "", lineNumber: 128, columnNumber: 15 }, __self: this }, "Size", /*#__PURE__*/ React.createElement("span", { className: "ml-1 text-gray-400 cursor-help", title: "Larger sizes may take longer to generate but provide higher quality results", __source: { fileName: "", lineNumber: 130, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-question-circle", __source: { fileName: "", lineNumber: 134, columnNumber: 19 }, __self: this }))), /*#__PURE__*/ React.createElement("select", { value: size, onChange: (e)=>setSize(e.target.value), className: "w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500", __source: { fileName: "", lineNumber: 137, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "small", __source: { fileName: "", lineNumber: 142, columnNumber: 17 }, __self: this }, "Small (256x256)"), /*#__PURE__*/ React.createElement("option", { value: "medium", __source: { fileName: "", lineNumber: 143, columnNumber: 17 }, __self: this }, "Medium (512x512)"), /*#__PURE__*/ React.createElement("option", { value: "large", __source: { fileName: "", lineNumber: 144, columnNumber: 17 }, __self: this }, "Large (1024x1024)")))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 148, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700 mb-1 sm:mb-2", __source: { fileName: "", lineNumber: 149, columnNumber: 13 }, __self: this }, "Style Description"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "description", value: description, onChange: (e)=>setDescription(e.target.value), className: "w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500", placeholder: "Describe your brand style", __source: { fileName: "", lineNumber: 152, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "overflow-x-auto -mx-4 px-4 sm:mx-0 sm:px-0", __source: { fileName: "", lineNumber: 161, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-500 mb-2", __source: { fileName: "", lineNumber: 162, columnNumber: 13 }, __self: this }, "Example styles:"), /*#__PURE__*/ React.createElement("div", { className: "flex gap-2 pb-2", __source: { fileName: "", lineNumber: 163, columnNumber: 13 }, __self: this }, examplePrompts.map((prompt, index)=>/*#__PURE__*/ React.createElement("button", { key: index, onClick: ()=>setDescription(prompt), className: "whitespace-nowrap text-xs bg-gray-100 hover:bg-gray-200 px-3 py-1 rounded-full", __source: { fileName: "", lineNumber: 165, columnNumber: 17 }, __self: this }, prompt)))), /*#__PURE__*/ React.createElement("div", { className: "space-y-4 sm:space-y-6 mt-4", __source: { fileName: "", lineNumber: 176, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 gap-4 sm:gap-6", __source: { fileName: "", lineNumber: 177, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 178, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700 mb-1 sm:mb-2", __source: { fileName: "", lineNumber: 179, columnNumber: 17 }, __self: this }, "Color Scheme"), /*#__PURE__*/ React.createElement("select", { value: colorScheme, onChange: (e)=>setColorScheme(e.target.value), className: "w-full px-3 py-2 border border-gray-300 rounded-md", __source: { fileName: "", lineNumber: 182, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "Any", __source: { fileName: "", lineNumber: 187, columnNumber: 19 }, __self: this }, "Any"), /*#__PURE__*/ React.createElement("option", { value: "Monochrome", __source: { fileName: "", lineNumber: 188, columnNumber: 19 }, __self: this }, "Monochrome"), /*#__PURE__*/ React.createElement("option", { value: "Warm Colors", __source: { fileName: "", lineNumber: 189, columnNumber: 19 }, __self: this }, "Warm Colors"), /*#__PURE__*/ React.createElement("option", { value: "Cool Colors", __source: { fileName: "", lineNumber: 190, columnNumber: 19 }, __self: this }, "Cool Colors"), /*#__PURE__*/ React.createElement("option", { value: "Pastels", __source: { fileName: "", lineNumber: 191, columnNumber: 19 }, __self: this }, "Pastels"), /*#__PURE__*/ React.createElement("option", { value: "Bold & Vibrant", __source: { fileName: "", lineNumber: 192, columnNumber: 19 }, __self: this }, "Bold & Vibrant"))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 196, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700 mb-1 sm:mb-2", __source: { fileName: "", lineNumber: 197, columnNumber: 17 }, __self: this }, "Industry"), /*#__PURE__*/ React.createElement("select", { value: industry, onChange: (e)=>setIndustry(e.target.value), className: "w-full px-3 py-2 border border-gray-300 rounded-md", __source: { fileName: "", lineNumber: 200, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "", __source: { fileName: "", lineNumber: 205, columnNumber: 19 }, __self: this }, "Select Industry"), /*#__PURE__*/ React.createElement("option", { value: "Technology", __source: { fileName: "", lineNumber: 206, columnNumber: 19 }, __self: this }, "Technology"), /*#__PURE__*/ React.createElement("option", { value: "Food & Beverage", __source: { fileName: "", lineNumber: 207, columnNumber: 19 }, __self: this }, "Food & Beverage"), /*#__PURE__*/ React.createElement("option", { value: "Healthcare", __source: { fileName: "", lineNumber: 208, columnNumber: 19 }, __self: this }, "Healthcare"), /*#__PURE__*/ React.createElement("option", { value: "Fashion", __source: { fileName: "", lineNumber: 209, columnNumber: 19 }, __self: this }, "Fashion"), /*#__PURE__*/ React.createElement("option", { value: "Entertainment", __source: { fileName: "", lineNumber: 210, columnNumber: 19 }, __self: this }, "Entertainment"), /*#__PURE__*/ React.createElement("option", { value: "Finance", __source: { fileName: "", lineNumber: 211, columnNumber: 19 }, __self: this }, "Finance"), /*#__PURE__*/ React.createElement("option", { value: "Education", __source: { fileName: "", lineNumber: 212, columnNumber: 19 }, __self: this }, "Education"), /*#__PURE__*/ React.createElement("option", { value: "Sport", __source: { fileName: "", lineNumber: 213, columnNumber: 19 }, __self: this }, "Sport"), /*#__PURE__*/ React.createElement("option", { value: "Other", __source: { fileName: "", lineNumber: 214, columnNumber: 19 }, __self: this }, "Other")))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 218, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700 mb-2", __source: { fileName: "", lineNumber: 219, columnNumber: 15 }, __self: this }, "Logo Style"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-3", __source: { fileName: "", lineNumber: 222, columnNumber: 15 }, __self: this }, [ "Minimal/Modern", "Classic/Traditional", "Abstract/Geometric", "Mascot/Character", "Typography-based", "Emblem/Badge" ].map((style)=>/*#__PURE__*/ React.createElement("div", { key: style, className: "flex items-center p-2 bg-gray-50 rounded-md", __source: { fileName: "", lineNumber: 231, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "radio", id: style, name: "styleType", value: style, checked: styleType === style, onChange: (e)=>setStyleType(e.target.value), className: "mr-2 h-4 w-4", __source: { fileName: "", lineNumber: 235, columnNumber: 21 }, __self: this }), /*#__PURE__*/ React.createElement("label", { htmlFor: style, className: "text-sm text-gray-600", __source: { fileName: "", lineNumber: 244, columnNumber: 21 }, __self: this }, style))))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 251, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700 mb-2", __source: { fileName: "", lineNumber: 252, columnNumber: 15 }, __self: this }, "Layout"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-3", __source: { fileName: "", lineNumber: 255, columnNumber: 15 }, __self: this }, [ "Symbol Only", "Text Only", "Symbol + Text", "Text Inside Symbol" ].map((layout)=>/*#__PURE__*/ React.createElement("div", { key: layout, className: "flex items-center p-2 bg-gray-50 rounded-md", __source: { fileName: "", lineNumber: 262, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "radio", id: layout, name: "layoutPreference", value: layout, checked: layoutPreference === layout, onChange: (e)=>setLayoutPreference(e.target.value), className: "mr-2 h-4 w-4", __source: { fileName: "", lineNumber: 266, columnNumber: 21 }, __self: this }), /*#__PURE__*/ React.createElement("label", { htmlFor: layout, className: "text-sm text-gray-600", __source: { fileName: "", lineNumber: 275, columnNumber: 21 }, __self: this }, layout))))), /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 283, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center p-2 bg-gray-50 rounded-md", __source: { fileName: "", lineNumber: 284, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "checkbox", id: "includeText", checked: includeText, onChange: (e)=>setIncludeText(e.target.checked), className: "mr-2 h-4 w-4", __source: { fileName: "", lineNumber: 285, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("label", { htmlFor: "includeText", className: "text-sm text-gray-600", __source: { fileName: "", lineNumber: 292, columnNumber: 17 }, __self: this }, "Include Company Name in Logo")), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 297, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700 mb-1 sm:mb-2", __source: { fileName: "", lineNumber: 298, columnNumber: 17 }, __self: this }, "Tagline (Optional)"), /*#__PURE__*/ React.createElement("input", { type: "text", value: tagline, onChange: (e)=>setTagline(e.target.value), className: "w-full px-3 py-2 border border-gray-300 rounded-md", placeholder: "Add a short tagline or slogan", __source: { fileName: "", lineNumber: 301, columnNumber: 17 }, __self: this })))), error && /*#__PURE__*/ React.createElement("div", { className: "bg-red-50 border-l-4 border-red-400 p-3 sm:p-4", __source: { fileName: "", lineNumber: 313, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex", __source: { fileName: "", lineNumber: 314, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex-shrink-0", __source: { fileName: "", lineNumber: 315, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-exclamation-circle text-red-400", __source: { fileName: "", lineNumber: 316, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "ml-3", __source: { fileName: "", lineNumber: 318, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-sm text-red-700", __source: { fileName: "", lineNumber: 319, columnNumber: 19 }, __self: this }, error)))), /*#__PURE__*/ React.createElement("button", { onClick: generateLogo, disabled: loading, className: "w-full bg-blue-600 text-white py-3 px-4 rounded-md hover:bg-blue-700 disabled:bg-blue-300 transition-colors", __source: { fileName: "", lineNumber: 325, columnNumber: 11 }, __self: this }, loading ? /*#__PURE__*/ React.createElement("span", { className: "flex items-center justify-center", __source: { fileName: "", lineNumber: 331, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("svg", { className: "animate-spin -ml-1 mr-3 h-5 w-5 text-white", xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", __source: { fileName: "", lineNumber: 332, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4", __source: { fileName: "", lineNumber: 338, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z", __source: { fileName: "", lineNumber: 346, columnNumber: 19 }, __self: this })), "Generating Logo...") : "Generate Logo"), logo && !loading && /*#__PURE__*/ React.createElement("div", { className: "mt-4 sm:mt-6 space-y-4", __source: { fileName: "", lineNumber: 360, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative", __source: { fileName: "", lineNumber: 361, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: logo, alt: "Generated company logo", className: "w-full rounded-lg shadow-lg", __source: { fileName: "", lineNumber: 362, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "absolute top-2 right-2", __source: { fileName: "", lineNumber: 367, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: downloadLogo, className: "bg-white p-2 rounded-full shadow-lg hover:bg-gray-100", title: "Download Logo", __source: { fileName: "", lineNumber: 368, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-download text-gray-700", __source: { fileName: "", lineNumber: 373, columnNumber: 21 }, __self: this })))), /*#__PURE__*/ React.createElement("button", { onClick: generateVariation, className: "w-full bg-gray-100 text-gray-700 py-2 px-4 rounded-md hover:bg-gray-200 transition-colors", __source: { fileName: "", lineNumber: 377, columnNumber: 15 }, __self: this }, "Generate Variations"))))); }