إنشاء تطبيق إزالة خلفية الصور

import React, { useState } from 'react';
import './App.css';

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

  const handleImageUpload = (event) => {
    const file = event.target.files[0];
    if (file) {
      const reader = new FileReader();
      reader.onloadend = () => {
        setImage(reader.result);
        // Simulate background removal
        setTimeout(() => {
          setProcessedImage(reader.result);
        }, 2000);
      };
      reader.readAsDataURL(file);
    }
  };

  return (
    <div className='App bg-gray-100 min-h-screen p-8'>
      <header className='text-center mb-8'>
        <h1 className='text-4xl font-bold text-blue-600'>Professional Background Remover</h1>
        <p className='text-gray-700'>Upload an image to remove the background automatically.</p>
      </header>

      <div className='flex justify-center space-x-8'>
        <div className='w-1/2 bg-white p-6 rounded-lg shadow-lg'>
          <h2 className='text-2xl font-semibold text-gray-800 mb-4'>Original Image</h2>
          {image ? (
            <img src={image} alt='Original' className='w-full h-auto rounded' />
          ) : (
            <div className='flex items-center justify-center h-64 bg-gray-200 rounded'>
              <p className='text-gray-500'>Upload an image</p>
            </div>
          )}
          <input type='file' onChange={handleImageUpload} className='mt-4 w-full p-2 border rounded' />
        </div>

        <div className='w-1/2 bg-white p-6 rounded-lg shadow-lg'>
          <h2 className='text-2xl font-semibold text-gray-800 mb-4'>Processed Image</h2>
          {processedImage ? (
            <img src={processedImage} alt='Processed' className='w-full h-auto rounded' />
          ) : (
            <div className='flex items-center justify-center h-64 bg-gray-200 rounded'>
              <p className='text-gray-500'>Processed image will appear here</p>
            </div>
          )}
        </div>
      </div>

      <footer className='text-center mt-8 text-gray-600'>
        <p>© 2025 Professional Background Remover. All rights reserved.</p>
      </footer>
    </div>
  );
}

export default App;