function MainComponent() { const [file, setFile] = useState(null); const [imageUrl, setImageUrl] = useState(null); const [analysis, setAnalysis] = useState(null); const [loading, setLoading] = useState(false); const [prompt, setPrompt] = useState(""); const [suggestions, setSuggestions] = useState(null); const [generatingNew, setGeneratingNew] = useState(false); const [upload, { loading: uploading }] = useUpload(); const analyzeImage = async (url)=>{ try { const response = await fetch(`/integrations/gpt-4-vision/?image=${encodeURIComponent(url)}&prompt=${encodeURIComponent(prompt || "Analyze this image and suggest improvements")}`); const data = await response.json(); setAnalysis(data.text); setSuggestions(data.text.split("\n").filter((line)=>line.startsWith("-"))); } catch (error) { setAnalysis("Failed to analyze image. Please try again."); } setLoading(false); }; const handleUpload = async ()=>{ setLoading(true); const { url, error } = await upload({ file }); if (error) { setAnalysis("Upload failed. Please try again."); setLoading(false); return; } setImageUrl(url); await analyzeImage(url); }; const handleImageEffect = async (effect)=>{ setLoading(true); try { const response = await fetch("/api/process-image", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ imageUrl, effect }) }); const data = await response.json(); setImageUrl(data.processedImageUrl); } catch (error) { setAnalysis("Failed to apply effect. Please try again."); } setLoading(false); }; const generateNewVersion = async ()=>{ setGeneratingNew(true); try { const response = await fetch(`/integrations/dall-e-3/?prompt=${encodeURIComponent(analysis)}`); const data = await response.json(); setImageUrl(data.data[0]); } catch (error) { setAnalysis("Failed to generate new version. Please try again."); } setGeneratingNew(false); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gradient-to-br from-[#0A192F] via-[#112240] to-[#0A192F]", __source: { fileName: "", lineNumber: 72, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "container mx-auto px-4 py-16", __source: { fileName: "", lineNumber: 73, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-8", __source: { fileName: "", lineNumber: 74, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/", className: "inline-flex items-center text-[#64FFDA] hover:opacity-80 transition-opacity duration-300", __source: { fileName: "", lineNumber: 75, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-arrow-left mr-2", __source: { fileName: "", lineNumber: 79, columnNumber: 13 }, __self: this }), "Back to Tools")), /*#__PURE__*/ React.createElement("h1", { className: "text-5xl md:text-7xl font-bold text-[#64FFDA] mb-12 text-center font-poppins", __source: { fileName: "", lineNumber: 83, columnNumber: 9 }, __self: this }, "Image Analyzer"), /*#__PURE__*/ React.createElement("div", { className: "max-w-2xl mx-auto", __source: { fileName: "", lineNumber: 87, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col gap-4 mb-8", __source: { fileName: "", lineNumber: 88, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "file", accept: "image/*", onChange: (e)=>e.target.files && setFile(e.target.files[0]), className: "bg-[#112240] text-gray-300 px-6 py-4 rounded-lg font-roboto border border-[#64FFDA] w-full", name: "image", __source: { fileName: "", lineNumber: 89, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "text", value: prompt, onChange: (e)=>setPrompt(e.target.value), placeholder: "What would you like to know about this image?", className: "bg-[#112240] text-gray-300 px-6 py-4 rounded-lg font-roboto border border-[#64FFDA] w-full", name: "prompt", __source: { fileName: "", lineNumber: 96, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: handleUpload, disabled: loading || !file, className: "bg-[#112240] text-[#64FFDA] border-2 border-[#64FFDA] px-8 py-4 rounded-lg font-bold hover:bg-[#64FFDA] hover:text-[#112240] transition-colors duration-300 disabled:opacity-50", __source: { fileName: "", lineNumber: 104, columnNumber: 13 }, __self: this }, loading ? /*#__PURE__*/ React.createElement("i", { className: "fas fa-spinner fa-spin mr-2", __source: { fileName: "", lineNumber: 110, columnNumber: 17 }, __self: this }) : /*#__PURE__*/ React.createElement("i", { className: "fas fa-brain mr-2", __source: { fileName: "", lineNumber: 112, columnNumber: 17 }, __self: this }), loading ? "Analyzing..." : "Analyze Image")), imageUrl && /*#__PURE__*/ React.createElement("div", { className: "relative mb-8", __source: { fileName: "", lineNumber: 119, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 bg-[#64FFDA] rounded-3xl blur-3xl opacity-20 animate-pulse", __source: { fileName: "", lineNumber: 120, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "relative", __source: { fileName: "", lineNumber: 121, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: imageUrl, alt: "Uploaded image for analysis", className: "relative w-full rounded-3xl shadow-2xl", __source: { fileName: "", lineNumber: 122, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap gap-4 mt-4", __source: { fileName: "", lineNumber: 127, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleImageEffect("blur"), className: "bg-[#112240] text-[#64FFDA] border border-[#64FFDA] px-4 py-2 rounded-lg hover:bg-[#64FFDA] hover:text-[#112240]", __source: { fileName: "", lineNumber: 128, columnNumber: 19 }, __self: this }, "Blur"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleImageEffect("pixelate"), className: "bg-[#112240] text-[#64FFDA] border border-[#64FFDA] px-4 py-2 rounded-lg hover:bg-[#64FFDA] hover:text-[#112240]", __source: { fileName: "", lineNumber: 134, columnNumber: 19 }, __self: this }, "Pixelate"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleImageEffect("noise"), className: "bg-[#112240] text-[#64FFDA] border border-[#64FFDA] px-4 py-2 rounded-lg hover:bg-[#64FFDA] hover:text-[#112240]", __source: { fileName: "", lineNumber: 140, columnNumber: 19 }, __self: this }, "Add Noise"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleImageEffect("scramble"), className: "bg-[#112240] text-[#64FFDA] border border-[#64FFDA] px-4 py-2 rounded-lg hover:bg-[#64FFDA] hover:text-[#112240]", __source: { fileName: "", lineNumber: 146, columnNumber: 19 }, __self: this }, "Scramble")))), analysis && /*#__PURE__*/ React.createElement("div", { className: "space-y-6", __source: { fileName: "", lineNumber: 158, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-[#112240] p-6 rounded-lg border border-[#64FFDA]", __source: { fileName: "", lineNumber: 159, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-[#64FFDA] text-xl mb-4 font-poppins", __source: { fileName: "", lineNumber: 160, columnNumber: 17 }, __self: this }, "Analysis"), /*#__PURE__*/ React.createElement("p", { className: "text-gray-300 font-roboto whitespace-pre-line", __source: { fileName: "", lineNumber: 163, columnNumber: 17 }, __self: this }, analysis)), suggestions && suggestions.length > 0 && /*#__PURE__*/ React.createElement("div", { className: "bg-[#112240] p-6 rounded-lg border border-[#64FFDA]", __source: { fileName: "", lineNumber: 169, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-[#64FFDA] text-xl mb-4 font-poppins", __source: { fileName: "", lineNumber: 170, columnNumber: 19 }, __self: this }, "Suggestions"), /*#__PURE__*/ React.createElement("ul", { className: "list-disc list-inside space-y-2", __source: { fileName: "", lineNumber: 173, columnNumber: 19 }, __self: this }, suggestions.map((suggestion, index)=>/*#__PURE__*/ React.createElement("li", { key: index, className: "text-gray-300 font-roboto", __source: { fileName: "", lineNumber: 175, columnNumber: 23 }, __self: this }, suggestion.slice(2)))), /*#__PURE__*/ React.createElement("button", { onClick: generateNewVersion, disabled: generatingNew, className: "mt-6 w-full bg-[#64FFDA] text-[#0A192F] px-8 py-4 rounded-lg font-bold hover:opacity-90 transition-opacity duration-300 disabled:opacity-50", __source: { fileName: "", lineNumber: 180, columnNumber: 19 }, __self: this }, generatingNew ? /*#__PURE__*/ React.createElement("i", { className: "fas fa-spinner fa-spin mr-2", __source: { fileName: "", lineNumber: 186, columnNumber: 23 }, __self: this }) : /*#__PURE__*/ React.createElement("i", { className: "fas fa-magic mr-2", __source: { fileName: "", lineNumber: 188, columnNumber: 23 }, __self: this }), generatingNew ? "Generating..." : "Generate New Version"))))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 198, columnNumber: 7 }, __self: this }, ` @keyframes pulse { 0% { opacity: 0.1; } 50% { opacity: 0.3; } 100% { opacity: 0.1; } } .animate-pulse { animation: pulse 3s infinite; } `)); }