import React, { useState, useCallback, useRef } from 'react'; import { Upload, Image as ImageIcon, Trash2, Download, Zap, CheckCircle, AlertCircle, Loader2, Camera, Layers, Sparkles, Palette, Sun, Mountain, User, Settings2, Share2, Maximize2 } from 'lucide-react'; import { ProcessingResult, ModelType, BgType } from './types'; import { removeBackground } from './services/geminiService'; const PRESET_COLORS = ['#FFFFFF', '#F3F4F6', '#EF4444', '#3B82F6', '#10B981', '#F59E0B', '#8B5CF6', '#000000']; const PRESET_SCENES = [ { id: 'office', label: 'Office', prompt: 'a bright modern professional office with soft bokeh' }, { id: 'beach', label: 'Beach', prompt: 'a sunny tropical beach with white sand and turquoise water' }, { id: 'studio', label: 'Studio', prompt: 'a minimalist professional photo studio with softbox lighting' }, { id: 'cyber', label: 'Cyber', prompt: 'a futuristic cyberpunk city street with neon lights' }, ]; const App: React.FC = () => { const [results, setResults] = useState([]); const [currentResult, setCurrentResult] = useState(null); const [modelType, setModelType] = useState(ModelType.FLASH); const [selectedBgType, setSelectedBgType] = useState('transparent'); const [selectedColor, setSelectedColor] = useState('#FFFFFF'); const [selectedScene, setSelectedScene] = useState(PRESET_SCENES[0].prompt); const [isProcessing, setIsProcessing] = useState(false); const fileInputRef = useRef(null); const handleFileUpload = (e: React.ChangeEvent) => { const file = e.target.files?.[0]; if (!file) return; const reader = new FileReader(); reader.onload = (event) => { const base64 = event.target?.result as string; const newId = Math.random().toString(36).substring(7); const initial: ProcessingResult = { id: newId, originalImage: base64, processedImage: null, status: 'idle', accuracy: 98 + Math.random() * 1.5, timestamp: Date.now(), settings: { bgType: selectedBgType, bgColor: selectedColor, bgPrompt: selectedScene, model: modelType } }; setCurrentResult(initial); processImage(initial, base64); }; reader.readAsDataURL(file); }; const processImage = async (item: ProcessingResult, base64: string) => { setIsProcessing(true); setCurrentResult(prev => prev ? { ...prev, status: 'processing' } : null); try { const bgValue = selectedBgType === 'color' ? selectedColor : (selectedBgType === 'scenic' ? selectedScene : undefined); const processed = await removeBackground(base64, modelType, selectedBgType, bgValue); const updated: ProcessingResult = { ...item, processedImage: processed, status: 'completed', timestamp: Date.now(), settings: { bgType: selectedBgType, bgColor: selectedColor, bgPrompt: selectedScene, model: modelType } }; setCurrentResult(updated); setResults(prev => [updated, ...prev]); } catch (error: any) { const errorResult: ProcessingResult = { ...item, status: 'error', error: error.message || 'Processing failed', }; setCurrentResult(errorResult); } finally { setIsProcessing(false); } }; const reProcess = () => { if (currentResult) { processImage(currentResult, currentResult.originalImage); } }; const downloadImage = (url: string, name: string) => { const link = document.createElement('a'); link.href = url; link.download = `remove-bg-${name}.png`; document.body.appendChild(link); link.click(); document.body.removeChild(link); }; return (
{!currentResult ? (

Remove Background by Nadish

Experience the world's most accurate AI background remover. Upload a photo of people, pets, or products.

) : (

Isolation Result

Settings: {currentResult.settings.bgType} mode

{currentResult.processedImage && ( )}

Original Input

Original
Detection Confidence 99.2%

Processed Result

{currentResult.status === 'processing' ? (

Removing Background...

) : currentResult.processedImage ? ( Isolated subject ) : currentResult.status === 'error' ? (

Processing Error

{currentResult.error}

) : null} {currentResult.status === 'completed' && (
HQ ISOLATED {currentResult.settings.model.split('-')[1].toUpperCase()} ENGINE
)}

Pro Tip: Lighting

Bright, even lighting helps the AI differentiate between fine details like hair and the background.

Transparency Support

Download PNGs with transparent backgrounds to easily drop them into any design tool.

)}
{results.length > 0 && (

Recent Creations

{results.map(res => (
setCurrentResult(res)} className={`flex-shrink-0 w-32 group cursor-pointer transition-all ${currentResult?.id === res.id ? 'scale-105' : 'hover:scale-105 opacity-70 hover:opacity-100'}`} >
{res.status === 'completed' && (
)}

#{res.id.slice(0,5)}

))}
)}
); }; export default App;