function MainComponent() { const [upload, { loading }] = useUpload(); const [image, setImage] = useState(null); const [error, setError] = useState(null); const [prompt, setPrompt] = useState(""); const [analyzing, setAnalyzing] = useState(false); const [generatingImage, setGeneratingImage] = useState(false); const [imageDescription, setImageDescription] = useState(""); const [filters, setFilters] = useState({ brightness: 100, contrast: 100, saturation: 100, blur: 0, grayscale: 0, sepia: 0, invert: 0 }); const handleImageUpload = async (e)=>{ const file = e.target.files[0]; if (file) { try { const { url, error } = await upload({ file }); if (error) { setError(error); return; } setImage(url); resetFilters(); analyzeImage(url); } catch (err) { setError("Failed to upload image"); } } }; const downloadImage = async (isOriginal = false, aspectRatio = "original")=>{ try { if (!image) return; if (isOriginal) { const link = document.createElement("a"); link.href = image; link.download = "original-image.png"; link.click(); } else { const canvas = document.createElement("canvas"); const img = new Image(); img.crossOrigin = "anonymous"; img.onload = ()=>{ let targetWidth = img.width; let targetHeight = img.height; switch(aspectRatio){ case "portrait": targetWidth = Math.min(img.width, 1200); targetHeight = targetWidth * 4 / 3; break; case "landscape": targetWidth = Math.min(img.width, 1920); targetHeight = targetWidth * 9 / 16; break; case "square": targetWidth = Math.min(img.width, 1200); targetHeight = targetWidth; break; default: const maxSize = 2000; if (img.width > maxSize || img.height > maxSize) { const ratio = Math.min(maxSize / img.width, maxSize / img.height); targetWidth = img.width * ratio; targetHeight = img.height * ratio; } } canvas.width = targetWidth; canvas.height = targetHeight; const ctx = canvas.getContext("2d"); ctx.filter = getFilterStyle().filter; const scale = Math.max(targetWidth / img.width, targetHeight / img.height); const x = (targetWidth - img.width * scale) * 0.5; const y = (targetHeight - img.height * scale) * 0.5; ctx.fillStyle = "#000000"; ctx.fillRect(0, 0, targetWidth, targetHeight); ctx.drawImage(img, x, y, img.width * scale, img.height * scale); canvas.toBlob((blob)=>{ const url = URL.createObjectURL(blob); const link = document.createElement("a"); link.download = `edited-image-${aspectRatio}.png`; link.href = url; link.click(); URL.revokeObjectURL(url); }, "image/png"); }; img.src = image; } } catch (err) { setError("Failed to download image"); } }; const analyzeImage = async (imageUrl)=>{ setAnalyzing(true); try { const response = await fetch("/integrations/gpt-vision/", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ messages: [ { role: "user", content: [ { type: "text", text: "Describe this image and suggest some artistic enhancements." }, { type: "image_url", image_url: { url: imageUrl } } ] } ] }) }); const data = await response.json(); setImageDescription(data.choices[0].message.content); } catch (err) { setError("Failed to analyze image"); } finally{ setAnalyzing(false); } }; const generateImage = async ()=>{ if (!prompt) return; setGeneratingImage(true); try { const response = await fetch(`/integrations/stable-diffusion-v-3/?prompt=${encodeURIComponent(prompt)}`); const data = await response.json(); if (data.data && data.data[0]) { setImage(data.data[0]); resetFilters(); } } catch (err) { setError("Failed to generate image"); } finally{ setGeneratingImage(false); } }; const getFilterStyle = ()=>{ return { filter: ` brightness(${filters.brightness}%) contrast(${filters.contrast}%) saturate(${filters.saturation}%) blur(${filters.blur}px) grayscale(${filters.grayscale}%) sepia(${filters.sepia}%) invert(${filters.invert}%) ` }; }; const applyPresetFilter = (filterType)=>{ switch(filterType){ case "grayscale": setFilters((prev)=>({ ...prev, grayscale: prev.grayscale === 0 ? 100 : 0 })); break; case "sepia": setFilters((prev)=>({ ...prev, sepia: prev.sepia === 0 ? 100 : 0 })); break; case "blur": setFilters((prev)=>({ ...prev, blur: prev.blur === 0 ? 5 : 0 })); break; case "invert": setFilters((prev)=>({ ...prev, invert: prev.invert === 0 ? 100 : 0 })); break; } }; const resetFilters = ()=>{ setFilters({ brightness: 100, contrast: 100, saturation: 100, blur: 0, grayscale: 0, sepia: 0, invert: 0 }); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gradient-to-br from-gray-900 via-gray-800 to-gray-700 p-8", __source: { fileName: "", lineNumber: 215, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-7xl mx-auto bg-gray-800/30 backdrop-blur-lg rounded-2xl shadow-2xl p-8 border border-gray-600", __source: { fileName: "", lineNumber: 216, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-bold text-gray-100 mb-8 text-center", __source: { fileName: "", lineNumber: 217, columnNumber: 9 }, __self: this }, "Photo Editor Pro"), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col md:flex-row gap-8", __source: { fileName: "", lineNumber: 220, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full md:w-3/4", __source: { fileName: "", lineNumber: 221, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-gray-900/30 backdrop-blur rounded-xl p-6 min-h-[600px] flex items-center justify-center border border-gray-700", __source: { fileName: "", lineNumber: 222, columnNumber: 13 }, __self: this }, !image ? /*#__PURE__*/ React.createElement("label", { className: "cursor-pointer bg-gradient-to-r from-gray-700 to-gray-600 text-gray-100 px-8 py-4 rounded-xl hover:from-gray-600 hover:to-gray-500 transition-all shadow-lg", __source: { fileName: "", lineNumber: 224, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "file", accept: "image/*", onChange: handleImageUpload, className: "hidden", __source: { fileName: "", lineNumber: 225, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("i", { className: "fas fa-cloud-upload-alt mr-2 text-xl", __source: { fileName: "", lineNumber: 231, columnNumber: 19 }, __self: this }), "Upload Image") : /*#__PURE__*/ React.createElement("div", { className: "relative w-full h-full flex items-center justify-center", __source: { fileName: "", lineNumber: 235, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: image, alt: "Editable image", className: "max-w-full max-h-[550px] object-contain rounded-lg shadow-2xl", style: getFilterStyle(), __source: { fileName: "", lineNumber: 236, columnNumber: 19 }, __self: this }))), image && /*#__PURE__*/ React.createElement("div", { className: "mt-6 grid grid-cols-2 md:grid-cols-3 gap-4 bg-gray-900/30 p-6 rounded-xl border border-gray-700", __source: { fileName: "", lineNumber: 246, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 247, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "text-gray-300 text-sm", __source: { fileName: "", lineNumber: 248, columnNumber: 19 }, __self: this }, "Brightness"), /*#__PURE__*/ React.createElement("input", { type: "range", min: "0", max: "200", value: filters.brightness, onChange: (e)=>setFilters((prev)=>({ ...prev, brightness: e.target.value })), className: "w-full", __source: { fileName: "", lineNumber: 249, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 263, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "text-gray-300 text-sm", __source: { fileName: "", lineNumber: 264, columnNumber: 19 }, __self: this }, "Contrast"), /*#__PURE__*/ React.createElement("input", { type: "range", min: "0", max: "200", value: filters.contrast, onChange: (e)=>setFilters((prev)=>({ ...prev, contrast: e.target.value })), className: "w-full", __source: { fileName: "", lineNumber: 265, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 279, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "text-gray-300 text-sm", __source: { fileName: "", lineNumber: 280, columnNumber: 19 }, __self: this }, "Saturation"), /*#__PURE__*/ React.createElement("input", { type: "range", min: "0", max: "200", value: filters.saturation, onChange: (e)=>setFilters((prev)=>({ ...prev, saturation: e.target.value })), className: "w-full", __source: { fileName: "", lineNumber: 281, columnNumber: 19 }, __self: this })))), /*#__PURE__*/ React.createElement("div", { className: "w-full md:w-1/4", __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: "bg-gray-900/30 backdrop-blur p-6 rounded-xl border border-gray-700", __source: { fileName: "", lineNumber: 301, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold text-gray-100 mb-4", __source: { fileName: "", lineNumber: 302, columnNumber: 17 }, __self: this }, "Tools"), /*#__PURE__*/ React.createElement("div", { className: "space-y-6", __source: { fileName: "", lineNumber: 303, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-2 gap-3", __source: { fileName: "", lineNumber: 304, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>applyPresetFilter("grayscale"), className: `bg-gray-800 p-3 rounded-lg transition-all text-gray-100 ${filters.grayscale > 0 ? "ring-2 ring-gray-400" : "hover:bg-gray-700"}`, __source: { fileName: "", lineNumber: 305, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-adjust text-xl mb-1", __source: { fileName: "", lineNumber: 309, columnNumber: 23 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "block text-xs", __source: { fileName: "", lineNumber: 310, columnNumber: 23 }, __self: this }, "B&W")), /*#__PURE__*/ React.createElement("button", { onClick: ()=>applyPresetFilter("sepia"), className: `bg-gray-800 p-3 rounded-lg transition-all text-gray-100 ${filters.sepia > 0 ? "ring-2 ring-gray-400" : "hover:bg-gray-700"}`, __source: { fileName: "", lineNumber: 312, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-sun text-xl mb-1", __source: { fileName: "", lineNumber: 316, columnNumber: 23 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "block text-xs", __source: { fileName: "", lineNumber: 317, columnNumber: 23 }, __self: this }, "Sepia")), /*#__PURE__*/ React.createElement("button", { onClick: ()=>applyPresetFilter("blur"), className: `bg-gray-800 p-3 rounded-lg transition-all text-gray-100 ${filters.blur > 0 ? "ring-2 ring-gray-400" : "hover:bg-gray-700"}`, __source: { fileName: "", lineNumber: 319, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-brush text-xl mb-1", __source: { fileName: "", lineNumber: 323, columnNumber: 23 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "block text-xs", __source: { fileName: "", lineNumber: 324, columnNumber: 23 }, __self: this }, "Blur")), /*#__PURE__*/ React.createElement("button", { onClick: ()=>applyPresetFilter("invert"), className: `bg-gray-800 p-3 rounded-lg transition-all text-gray-100 ${filters.invert > 0 ? "ring-2 ring-gray-400" : "hover:bg-gray-700"}`, __source: { fileName: "", lineNumber: 326, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-palette text-xl mb-1", __source: { fileName: "", lineNumber: 330, columnNumber: 23 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "block text-xs", __source: { fileName: "", lineNumber: 331, columnNumber: 23 }, __self: this }, "Invert")), /*#__PURE__*/ React.createElement("button", { onClick: resetFilters, className: "bg-gray-800 p-3 rounded-lg hover:bg-gray-700 transition-all text-gray-100 col-span-2", __source: { fileName: "", lineNumber: 333, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-undo text-xl mb-1", __source: { fileName: "", lineNumber: 337, columnNumber: 23 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "block text-xs", __source: { fileName: "", lineNumber: 338, columnNumber: 23 }, __self: this }, "Reset"))), /*#__PURE__*/ React.createElement("div", { className: "border-t border-gray-700 pt-6 mt-6", __source: { fileName: "", lineNumber: 342, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-bold text-gray-100 mb-4", __source: { fileName: "", lineNumber: 343, columnNumber: 21 }, __self: this }, "AI Magic"), /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 346, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 347, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", placeholder: "Describe your dream image...", value: prompt, onChange: (e)=>setPrompt(e.target.value), className: "w-full p-3 bg-gray-800 border border-gray-700 rounded-lg text-gray-100 placeholder-gray-500 focus:outline-none focus:border-gray-600", __source: { fileName: "", lineNumber: 348, columnNumber: 25 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: generateImage, disabled: generatingImage, className: "w-full mt-3 bg-gray-700 text-gray-100 p-3 rounded-lg hover:bg-gray-600 transition-all disabled:opacity-50 disabled:cursor-not-allowed", __source: { fileName: "", lineNumber: 355, columnNumber: 25 }, __self: this }, generatingImage ? /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("i", { className: "fas fa-spinner fa-spin mr-2", __source: { fileName: "", lineNumber: 362, columnNumber: 31 }, __self: this }), "Generating...") : /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("i", { className: "fas fa-magic mr-2", __source: { fileName: "", lineNumber: 367, columnNumber: 31 }, __self: this }), "Generate Image"))), analyzing && /*#__PURE__*/ React.createElement("div", { className: "text-gray-400 flex items-center space-x-2", __source: { fileName: "", lineNumber: 374, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-spinner fa-spin", __source: { fileName: "", lineNumber: 375, columnNumber: 27 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 376, columnNumber: 27 }, __self: this }, "Analyzing image...")), imageDescription && /*#__PURE__*/ React.createElement("div", { className: "bg-gray-800/50 p-4 rounded-lg text-gray-300 text-sm border border-gray-700", __source: { fileName: "", lineNumber: 380, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 381, columnNumber: 27 }, __self: this }, imageDescription)))))), image && /*#__PURE__*/ React.createElement("div", { className: "bg-gray-900/30 backdrop-blur rounded-xl p-6 border border-gray-700 mt-6", __source: { fileName: "", lineNumber: 390, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 391, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>downloadImage(true), className: "w-full bg-gray-700 text-gray-100 p-4 rounded-lg hover:bg-gray-600 transition-all flex items-center justify-center space-x-2", __source: { fileName: "", lineNumber: 392, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-download text-xl", __source: { fileName: "", lineNumber: 396, columnNumber: 23 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 397, columnNumber: 23 }, __self: this }, "Download Original")), /*#__PURE__*/ React.createElement("div", { className: "border-t border-gray-700 pt-4", __source: { fileName: "", lineNumber: 400, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("h4", { className: "text-gray-300 mb-3 text-sm font-medium", __source: { fileName: "", lineNumber: 401, columnNumber: 23 }, __self: this }, "Download Edited Version"), /*#__PURE__*/ React.createElement("div", { className: "space-y-2", __source: { fileName: "", lineNumber: 404, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>downloadImage(false, "original"), className: "w-full bg-blue-600 text-gray-100 p-3 rounded-lg hover:bg-blue-500 transition-all flex items-center justify-center space-x-2", __source: { fileName: "", lineNumber: 405, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-crop-alt text-lg", __source: { fileName: "", lineNumber: 409, columnNumber: 27 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 410, columnNumber: 27 }, __self: this }, "Original Ratio")), /*#__PURE__*/ React.createElement("button", { onClick: ()=>downloadImage(false, "portrait"), className: "w-full bg-blue-600/90 text-gray-100 p-3 rounded-lg hover:bg-blue-500 transition-all flex items-center justify-center space-x-2", __source: { fileName: "", lineNumber: 413, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-portrait text-lg", __source: { fileName: "", lineNumber: 417, columnNumber: 27 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 418, columnNumber: 27 }, __self: this }, "Portrait (4:3)")), /*#__PURE__*/ React.createElement("button", { onClick: ()=>downloadImage(false, "landscape"), className: "w-full bg-blue-600/90 text-gray-100 p-3 rounded-lg hover:bg-blue-500 transition-all flex items-center justify-center space-x-2", __source: { fileName: "", lineNumber: 421, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-film text-lg", __source: { fileName: "", lineNumber: 425, columnNumber: 27 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 426, columnNumber: 27 }, __self: this }, "Landscape (16:9)")), /*#__PURE__*/ React.createElement("button", { onClick: ()=>downloadImage(false, "square"), className: "w-full bg-blue-600/90 text-gray-100 p-3 rounded-lg hover:bg-blue-500 transition-all flex items-center justify-center space-x-2", __source: { fileName: "", lineNumber: 429, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-square text-lg", __source: { fileName: "", lineNumber: 433, columnNumber: 27 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 434, columnNumber: 27 }, __self: this }, "Square (1:1)"))))))))))); }