One-Click Background Removal

import React, { useState } from 'react';

const App = () => {
 const [image, setImage] = useState(null);
 const [processedImage, setProcessedImage] = useState(null);

 const handleImageUpload = (event) => {
 const file = event.target.files[0];
 const reader = new FileReader();
 reader.onloadend = () => {
 setImage(reader.result);
 };
 reader.readAsDataURL(file);
 };

 const removeBackground = () => {
 // Placeholder for background removal logic
 setProcessedImage(image);
 };

 return (
 <div className='min-h-screen bg-gray-900 text-white flex flex-col items-center justify-center p-4'>
 <div className='w-full max-w-4xl bg-gray-800 rounded-lg shadow-2xl p-6'>
 <h1 className='text-3xl font-bold mb-6 text-center'>Background Remover</h1>
 <div className='flex flex-col md:flex-row gap-6'>
 <div className='flex-1'>
 <h2 className='text-xl font-semibold mb-4'>Upload Image</h2>
 <div className='border-2 border-dashed border-gray-600 rounded-lg p-6 flex items-center justify-center'>
 <input type='file' onChange={handleImageUpload} className='hidden' id='imageUpload' />
 <label htmlFor='imageUpload' className='cursor-pointer bg-gray-700 px-4 py-2 rounded-lg hover:bg-gray-600'>Choose File</label>
 </div>
 {image && (
 <div className='mt-6'>
 <h3 className='text-lg font-semibold mb-2'>Uploaded Image</h3>
 <img src={image} alt='Uploaded' className='max-w-full h-auto rounded-lg' />
 </div>
 )}
 </div>
 <div className='flex-1'>
 <h2 className='text-xl font-semibold mb-4'>Processed Image</h2>
 <div className='border-2 border-dashed border-gray-600 rounded-lg p-6 flex items-center justify-center'>
 {processedImage ? (
 <img src={processedImage} alt='Processed' className='max-w-full h-auto rounded-lg' />
 ) : (
 <p className='text-gray-400'>No image processed yet</p>
 )}
 </div>
 {image && !processedImage && (
 <button onClick={removeBackground} className='mt-6 w-full bg-blue-600 px-4 py-2 rounded-lg hover:bg-blue-500'>Remove Background</button>
 )}
 </div>
 </div>
 </div>
 <footer className='mt-8 text-gray-400 text-sm'>
 © 2025 Background Remover. All rights reserved.
 </footer>
 </div>
 );
};

export default App;