import React, { useState, useEffect, useRef, useCallback } from 'react'; import { Upload, Download, Crop, Sliders, Sun, Contrast, Image as ImageIcon, Layers, Wand2, Type, Eraser, Move, Maximize, RotateCcw, Trash2, Check, X, ChevronRight, ChevronLeft, Palette, CloudSun, Focus, Save, Settings2, Scissors, MousePointer2, RefreshCw, ZoomIn, ZoomOut, Maximize2, RotateCw, FlipHorizontal, Cloud, Wand, Undo2, Redo2, Activity, Thermometer, Droplets, Target, Moon, SunMedium, Type as TypeIcon, Pipette } from 'lucide-react'; const App = () => { const [image, setImage] = useState(null); const [activeTab, setActiveTab] = useState('adjust'); const [isDraggingFile, setIsDraggingFile] = useState(false); const [isMagicRunning, setIsMagicRunning] = useState(false); // Drag-to-scroll logic for tools menu const toolsRef = useRef(null); const isDown = useRef(false); const startX = useRef(0); const scrollLeft = useRef(0); // Color Eraser State const [isPickingColor, setIsPickingColor] = useState(false); const [targetColor, setTargetColor] = useState(null); // State for single-slider adjustment UI const [selectedAdj, setSelectedAdj] = useState('brightness'); const dragCounter = useRef(0); const [history, setHistory] = useState([]); const [historyIndex, setHistoryIndex] = useState(-1); const skipNextPush = useRef(false); const [zoom, setZoom] = useState(1); const [pan, setPan] = useState({ x: 0, y: 0 }); const [fineRotation, setFineRotation] = useState(0); const [baseRotation, setBaseRotation] = useState(0); const [flipH, setFlipH] = useState(false); const [isDraggingImage, setIsDraggingImage] = useState(false); const [dragStart, setDragStart] = useState({ x: 0, y: 0 }); const [adjustments, setAdjustments] = useState({ brightness: 0, contrast: 0, saturation: 0, warmth: 0, tint: 0, highlights: 0, shadows: 0, whitePoint: 0, blackPoint: 0, skinTone: 0, blueTone: 0, pop: 0, vignette: 0 }); const [activeFilter, setActiveFilter] = useState('Original'); const [saveScale, setSaveScale] = useState(1); const [canvasSize, setCanvasSize] = useState({ width: 0, height: 0 }); const SCALES = [0.25, 0.5, 0.75, 1, 1.25, 1.5, 1.75, 2, 3, 4, 5]; const [cropBox, setCropBox] = useState({ x: 10, y: 10, w: 80, h: 80 }); const [activeRatio, setActiveRatio] = useState('Free'); const [isResizingCrop, setIsResizingCrop] = useState(null); const displayCanvasRef = useRef(null); const containerRef = useRef(null); const FILTER_LIST = ['Original', 'Vivid', 'Playa', 'Honey', 'Isla', 'Desert', 'Clay', 'Palma', 'Blush', 'Onyx', 'West', 'Metro']; const RATIOS = [ { label: 'Free', value: null }, { label: 'Original', value: 'original' }, { label: '16:9', value: 16/9 }, { label: '9:16', value: 9/16 }, { label: '5:4', value: 5/4 }, { label: '4:5', value: 4/5 }, { label: '4:3', value: 4/3 }, { label: '3:4', value: 3/4 }, { label: '3:2', value: 3/2 }, { label: '2:3', value: 2/3 }, { label: 'Square', value: 1 } ]; const ADJ_TOOLS = [ { key: 'brightness', label: 'Brightness', icon: }, { key: 'contrast', label: 'Contrast', icon: }, { key: 'saturation', label: 'Saturation', icon: }, { key: 'warmth', label: 'Warmth', icon: }, { key: 'tint', label: 'Tint', icon: }, { key: 'highlights', label: 'Highlights', icon: }, { key: 'shadows', label: 'Shadows', icon: }, { key: 'whitePoint', label: 'White Pt', icon: }, { key: 'blackPoint', label: 'Black Pt', icon: }, { key: 'skinTone', label: 'Skin Tone', icon: }, { key: 'blueTone', label: 'Blue Tone', icon: }, { key: 'pop', label: 'Pop', icon: }, { key: 'vignette', label: 'Vignette', icon: }, ]; const processFile = (file) => { if (!file || !file.type.startsWith('image/')) return; const reader = new FileReader(); reader.onload = (event) => { const img = new Image(); img.onload = () => { setImage(img); setZoom(1); setPan({ x: 0, y: 0 }); setFineRotation(0); setBaseRotation(0); setFlipH(false); resetAdjustments(); const initialState = { imageSrc: event.target.result, adjustments: { brightness: 0, contrast: 0, saturation: 0, warmth: 0, tint: 0, highlights: 0, shadows: 0, whitePoint: 0, blackPoint: 0, skinTone: 0, blueTone: 0, pop: 0, vignette: 0 }, activeFilter: 'Original', baseRotation: 0, fineRotation: 0, flipH: false }; setHistory([initialState]); setHistoryIndex(0); }; img.src = event.target.result; }; reader.readAsDataURL(file); }; const pushToHistory = useCallback((customState = null) => { if (!image || skipNextPush.current) { if (skipNextPush.current) skipNextPush.current = false; return; } setHistory(prevHistory => { const currentState = customState || { imageSrc: image.src, adjustments: { ...adjustments }, activeFilter, baseRotation, fineRotation, flipH }; if (historyIndex >= 0 && prevHistory[historyIndex]) { const lastState = prevHistory[historyIndex]; if (lastState.imageSrc === currentState.imageSrc && lastState.activeFilter === currentState.activeFilter && lastState.baseRotation === currentState.baseRotation && lastState.flipH === currentState.flipH && lastState.fineRotation === currentState.fineRotation && JSON.stringify(lastState.adjustments) === JSON.stringify(currentState.adjustments)) { return prevHistory; } } const newHistory = prevHistory.slice(0, historyIndex + 1); newHistory.push(currentState); if (newHistory.length > 30) newHistory.shift(); setTimeout(() => setHistoryIndex(newHistory.length - 1), 0); return newHistory; }); }, [image, adjustments, activeFilter, baseRotation, fineRotation, flipH, historyIndex]); const undo = () => { if (historyIndex > 0) { const prevIndex = historyIndex - 1; const state = history[prevIndex]; skipNextPush.current = true; applyState(state); setHistoryIndex(prevIndex); } }; const redo = () => { if (historyIndex < history.length - 1) { const nextIndex = historyIndex + 1; const state = history[nextIndex]; skipNextPush.current = true; applyState(state); setHistoryIndex(nextIndex); } }; const applyState = (state) => { if (image.src !== state.imageSrc) { const newImg = new Image(); newImg.onload = () => setImage(newImg); newImg.src = state.imageSrc; } setAdjustments({ ...state.adjustments }); setActiveFilter(state.activeFilter); setBaseRotation(state.baseRotation); setFineRotation(state.fineRotation); setFlipH(state.flipH); }; const resetAdjustments = () => { setAdjustments({ brightness: 0, contrast: 0, saturation: 0, warmth: 0, tint: 0, highlights: 0, shadows: 0, whitePoint: 0, blackPoint: 0, skinTone: 0, blueTone: 0, pop: 0, vignette: 0 }); setActiveFilter('Original'); }; const applyPixelAdjustments = useCallback(() => { if (!image || !displayCanvasRef.current) return; const canvas = displayCanvasRef.current; const ctx = canvas.getContext('2d', { willReadFrequently: true }); const rad = (baseRotation + fineRotation) * Math.PI / 180; const sin = Math.abs(Math.sin(rad)); const cos = Math.abs(Math.cos(rad)); canvas.width = Math.round(image.width * cos + image.height * sin); canvas.height = Math.round(image.width * sin + image.height * cos); ctx.save(); ctx.translate(canvas.width / 2, canvas.height / 2); ctx.rotate(rad); if (flipH) ctx.scale(-1, 1); ctx.translate(-image.width / 2, -image.height / 2); const filters = { Vivid: 'saturate(1.6) contrast(1.1)', Onyx: 'grayscale(1) contrast(1.2)', Desert: 'sepia(0.5) saturate(1.2) hue-rotate(-15deg)', Metro: 'grayscale(0.3) contrast(1.1) brightness(0.9)', Playa: 'sepia(0.2) saturate(1.4) hue-rotate(-5deg)' }; ctx.filter = filters[activeFilter] || 'none'; ctx.drawImage(image, 0, 0); ctx.filter = 'none'; ctx.restore(); const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height); const data = imageData.data; const b = adjustments.brightness * 2.55; const c = (259 * (adjustments.contrast + 255)) / (255 * (259 - adjustments.contrast)); const s = (adjustments.saturation + 100) / 100; const w = adjustments.warmth * 0.4; const t = adjustments.tint * 0.4; const hp = adjustments.highlights * 0.3; const sh = adjustments.shadows * 0.3; const wp = adjustments.whitePoint * 0.5; const bp = adjustments.blackPoint * 0.5; const pop = (adjustments.pop / 100) + 1; const skinTone = adjustments.skinTone * 0.5; const blueTone = adjustments.blueTone * 0.5; const centerX = canvas.width / 2; const centerY = canvas.height / 2; const maxDist = Math.sqrt(centerX**2 + centerY**2); for (let i = 0; i < data.length; i += 4) { let r = data[i], g = data[i+1], b_px = data[i+2]; r += b + wp + bp; g += b + wp + bp; b_px += b + wp + bp; r = c * (r - 128) + 128; g = c * (g - 128) + 128; b_px = c * (b_px - 128) + 128; const gray = 0.2989 * r + 0.5870 * g + 0.1140 * b_px; r = gray + (s * pop) * (r - gray); g = gray + (s * pop) * (g - gray); b_px = gray + (s * pop) * (b_px - gray); r += w - t; g += t; b_px -= w; const luma = gray / 255; const h_weight = Math.max(0, (luma - 0.6) * 2.5); const s_weight = Math.max(0, (0.4 - luma) * 2.5); r += (hp * h_weight) + (sh * s_weight); g += (hp * h_weight) + (sh * s_weight); b_px += (hp * h_weight) + (sh * s_weight); if (r > g && r > b_px) r += skinTone; if (b_px > r && b_px > g) b_px += blueTone; if (adjustments.vignette !== 0) { const x = (i / 4) % canvas.width; const y = Math.floor((i / 4) / canvas.width); const dist = Math.sqrt((x - centerX)**2 + (y - centerY)**2) / maxDist; const v = 1 - (dist * (adjustments.vignette / 100)); r *= v; g *= v; b_px *= v; } data[i] = r; data[i+1] = g; data[i+2] = b_px; } ctx.putImageData(imageData, 0, 0); setCanvasSize({ width: canvas.width, height: canvas.height }); }, [image, adjustments, activeFilter, baseRotation, fineRotation, flipH]); useEffect(() => { applyPixelAdjustments(); }, [applyPixelAdjustments]); const handleInteractionMove = (e) => { if (!isDraggingImage && !isResizingCrop) return; let dx = 0, dy = 0; if (isResizingCrop && displayCanvasRef.current) { dx = ((e.clientX - dragStart.x) / zoom / displayCanvasRef.current.offsetWidth) * 100; dy = ((e.clientY - dragStart.y) / zoom / displayCanvasRef.current.offsetHeight) * 100; } if (isResizingCrop === 'move') { setCropBox(prev => ({ ...prev, x: Math.max(0, Math.min(100 - prev.w, prev.x + dx)), y: Math.max(0, Math.min(100 - prev.h, prev.y + dy)) })); } else if (isResizingCrop) { setCropBox(prev => { let { x, y, w, h } = { ...prev }; const ratioObj = RATIOS.find(r => r.label === activeRatio); let ratio = ratioObj?.value; const canvas = displayCanvasRef.current; if (ratio === 'original' && canvas) ratio = canvas.width / canvas.height; if (isResizingCrop.includes('e')) w = Math.max(5, Math.min(100 - x, w + dx)); if (isResizingCrop.includes('w')) { const oldX = x; x = Math.max(0, Math.min(x + w - 5, x + dx)); w += (oldX - x); } if (isResizingCrop.includes('s')) h = Math.max(5, Math.min(100 - y, h + dy)); if (isResizingCrop.includes('n')) { const oldY = y; y = Math.max(0, Math.min(y + h - 5, y + dy)); h += (oldY - y); } if (ratio && canvas) { const imgRatio = canvas.width / canvas.height; w = h * ratio / imgRatio; if (w + x > 100) { w = 100 - x; h = w / ratio * imgRatio; } } return { x, y, w, h }; }); } else if (isDraggingImage) { setPan(prev => ({ x: prev.x + (e.clientX - dragStart.x), y: prev.y + (e.clientY - dragStart.y) })); } setDragStart({ x: e.clientX, y: e.clientY }); }; const handleCanvasClick = (e) => { if (!isPickingColor || !displayCanvasRef.current) return; const canvas = displayCanvasRef.current; const rect = canvas.getBoundingClientRect(); const x = Math.round(((e.clientX - rect.left) / rect.width) * canvas.width); const y = Math.round(((e.clientY - rect.top) / rect.height) * canvas.height); const ctx = canvas.getContext('2d'); const pixel = ctx.getImageData(x, y, 1, 1).data; setTargetColor({ r: pixel[0], g: pixel[1], b: pixel[2] }); setIsPickingColor(false); runBackgroundColorEraser({ r: pixel[0], g: pixel[1], b: pixel[2] }); }; const runBackgroundColorEraser = async (color) => { if (!image) return; setIsMagicRunning(true); try { const { removeBackground } = await import('https://esm.sh/@imgly/background-removal@1.4.5'); const subjectBlob = await removeBackground(image.src); const subjectImg = new Image(); subjectImg.src = URL.createObjectURL(subjectBlob); await new Promise(res => subjectImg.onload = res); const canvas = document.createElement('canvas'); canvas.width = image.width; canvas.height = image.height; const ctx = canvas.getContext('2d'); ctx.drawImage(image, 0, 0); const originalData = ctx.getImageData(0, 0, canvas.width, canvas.height); ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.drawImage(subjectImg, 0, 0, canvas.width, canvas.height); const subjectData = ctx.getImageData(0, 0, canvas.width, canvas.height); const resultData = ctx.createImageData(canvas.width, canvas.height); const tolerance = 40; for (let i = 0; i < originalData.data.length; i += 4) { const isSubject = subjectData.data[i + 3] > 10; const r = originalData.data[i], g = originalData.data[i+1], b = originalData.data[i+2]; const colorDist = Math.sqrt((r - color.r) ** 2 + (g - color.g) ** 2 + (b - color.b) ** 2); if (!isSubject && colorDist < tolerance) { resultData.data[i] = 0; resultData.data[i+1] = 0; resultData.data[i+2] = 0; resultData.data[i+3] = 0; } else { resultData.data[i] = originalData.data[i]; resultData.data[i+1] = originalData.data[i+1]; resultData.data[i+2] = originalData.data[i+2]; resultData.data[i+3] = originalData.data[i+3]; } } ctx.putImageData(resultData, 0, 0); const finalUrl = canvas.toDataURL(); const newImg = new Image(); newImg.onload = () => { setImage(newImg); resetAdjustments(); setIsMagicRunning(false); pushToHistory({ imageSrc: finalUrl, adjustments: { brightness: 0, contrast: 0, saturation: 0, warmth: 0, tint: 0, highlights: 0, shadows: 0, whitePoint: 0, blackPoint: 0, skinTone: 0, blueTone: 0, pop: 0, vignette: 0 }, activeFilter: 'Original', baseRotation: 0, fineRotation: 0, flipH: false }); }; newImg.src = finalUrl; } catch (err) { console.error(err); setIsMagicRunning(false); } }; const handleObjectRemoval = () => { alert("Please use the 'Crop' tool to select the area you want to clean, then click 'Apply'. For full object removal, selecting a specific object with a brush is required in pro versions."); }; const handleRatioSelect = (label) => { setActiveRatio(label); const canvas = displayCanvasRef.current; if (!canvas) return; setCropBox(() => { const ratioObj = RATIOS.find(r => r.label === label); let ratio = ratioObj?.value; if (ratio === 'original') ratio = canvas.width / canvas.height; let w, h, x, y; if (ratio) { const imgRatio = canvas.width / canvas.height; w = 100; h = (w / ratio) * imgRatio; if (h > 100) { h = 100; w = (h * ratio) / imgRatio; } x = (100 - w) / 2; y = (100 - h) / 2; } else { x = 10; y = 10; w = 80; h = 80; } return { x, y, w, h }; }); }; const handleApplyCrop = () => { const canvas = displayCanvasRef.current; const sourceX = (cropBox.x / 100) * canvas.width; const sourceY = (cropBox.y / 100) * canvas.height; const sourceW = (cropBox.w / 100) * canvas.width; const sourceH = (cropBox.h / 100) * canvas.height; const tmp = document.createElement('canvas'); tmp.width = sourceW; tmp.height = sourceH; tmp.getContext('2d').drawImage(canvas, sourceX, sourceY, sourceW, sourceH, 0, 0, sourceW, sourceH); const newImgData = tmp.toDataURL(); const newImg = new Image(); newImg.onload = () => { setImage(newImg); setCropBox({ x: 10, y: 10, w: 80, h: 80 }); setPan({ x: 0, y: 0 }); setZoom(1); setBaseRotation(0); setFineRotation(0); resetAdjustments(); pushToHistory({ imageSrc: newImgData, adjustments: { brightness: 0, contrast: 0, saturation: 0, warmth: 0, tint: 0, highlights: 0, shadows: 0, whitePoint: 0, blackPoint: 0, skinTone: 0, blueTone: 0, pop: 0, vignette: 0 }, activeFilter: 'Original', baseRotation: 0, fineRotation: 0, flipH: false }); }; newImg.src = newImgData; }; const handleSave = () => { const canvas = displayCanvasRef.current; if (!canvas) return; const saveCanvas = document.createElement('canvas'); saveCanvas.width = canvas.width * saveScale; saveCanvas.height = canvas.height * saveScale; const ctx = saveCanvas.getContext('2d'); ctx.drawImage(canvas, 0, 0, saveCanvas.width, saveCanvas.height); const link = document.createElement('a'); link.download = `lumina_edit_${Date.now()}.png`; link.href = saveCanvas.toDataURL('image/png'); link.click(); }; const handleBackgroundRemoval = async () => { if (!image) return; setIsMagicRunning(true); try { const { removeBackground } = await import('https://esm.sh/@imgly/background-removal@1.4.5'); const blob = await removeBackground(image.src); const url = URL.createObjectURL(blob); const newImg = new Image(); newImg.onload = () => { setImage(newImg); resetAdjustments(); setIsMagicRunning(false); pushToHistory({ imageSrc: url, adjustments: { brightness: 0, contrast: 0, saturation: 0, warmth: 0, tint: 0, highlights: 0, shadows: 0, whitePoint: 0, blackPoint: 0, skinTone: 0, blueTone: 0, pop: 0, vignette: 0 }, activeFilter: 'Original', baseRotation: 0, fineRotation: 0, flipH: false }); }; newImg.src = url; } catch (err) { console.error(err); setIsMagicRunning(false); } }; const handleDragEnter = (e) => { e.preventDefault(); e.stopPropagation(); if (e.dataTransfer.types && e.dataTransfer.types.includes('Files')) { dragCounter.current++; setIsDraggingFile(true); } }; const handleDragLeave = (e) => { e.preventDefault(); e.stopPropagation(); if (e.dataTransfer.types && e.dataTransfer.types.includes('Files')) { dragCounter.current--; if (dragCounter.current <= 0) { setIsDraggingFile(false); dragCounter.current = 0; } } }; const handleDrop = (e) => { e.preventDefault(); e.stopPropagation(); setIsDraggingFile(false); dragCounter.current = 0; if (e.dataTransfer.files && e.dataTransfer.files.length > 0) { processFile(e.dataTransfer.files[0]); } }; const handleResetView = () => { setPan({ x: 0, y: 0 }); setZoom(1); }; // New Tool Drag logic const handleToolsMouseDown = (e) => { isDown.current = true; toolsRef.current.classList.add('active'); startX.current = e.pageX - toolsRef.current.offsetLeft; scrollLeft.current = toolsRef.current.scrollLeft; }; const handleToolsMouseLeave = () => { isDown.current = false; toolsRef.current.classList.remove('active'); }; const handleToolsMouseUp = () => { isDown.current = false; toolsRef.current.classList.remove('active'); }; const handleToolsMouseMove = (e) => { if (!isDown.current) return; e.preventDefault(); const x = e.pageX - toolsRef.current.offsetLeft; const walk = (x - startX.current) * 2; // Speed multiplier toolsRef.current.scrollLeft = scrollLeft.current - walk; }; return (

e.preventDefault()} onDragLeave={handleDragLeave} onDrop={handleDrop} > {isDraggingFile && (

Drop to Start

)} {isPickingColor && (

Click on the background color you want to erase

)}

setActiveTab('adjust')} icon={} label="Edit" /> setActiveTab('filters')} icon={} label="Filters" /> setActiveTab('crop')} icon={} label="Crop" /> setActiveTab('layers')} icon={} label="Tools" /> setActiveTab('save')} icon={} label="Save" />

{setIsResizingCrop(null); setIsDraggingImage(false);}}>

Lumina Studio

{image && (

)}

Import Photo processFile(e.target.files[0])} accept="image/*,.svg" />

{ if (image) { const zoomDelta = e.deltaY * -0.001; setZoom(z => Math.max(0.1, Math.min(5, z + zoomDelta))); } }} > {!image ? (

Drop or Import

) : ( <>

Lumina Studio

Aspect Ratio

Pro Magic Tools

Export Settings