حذف خلفيات الصور باحترافية

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];
    if (file) {
      const reader = new FileReader();
      reader.onloadend = () => {
        setImage(reader.result);
        // Simulate background removal by setting a white background
        setProcessedImage(reader.result);
      };
      reader.readAsDataURL(file);
    }
  };

  return (
    <div className="min-h-screen bg-gray-100 flex flex-col items-center justify-center p-4">
      <h1 className="text-4xl font-bold mb-8 text-gray-800">Professional Background Remover</h1>
      <div className="bg-white p-6 rounded-lg shadow-lg w-full max-w-md">
        <label className="block mb-4">
          <span className="sr-only">Choose image</span>
          <input type="file" onChange={handleImageUpload} className="block w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-sm file:font-semibold file:bg-blue-50 file:text-blue-700 hover:file:bg-blue-100" />
        </label>
        {image && (
          <div className="mt-4">
            <h2 className="text-xl font-semibold mb-2 text-gray-700">Original Image</h2>
            <img src={image} alt="Original" className="w-full rounded-lg shadow-sm" />
          </div>
        )}
        {processedImage && (
          <div className="mt-4">
            <h2 className="text-xl font-semibold mb-2 text-gray-700">Processed Image</h2>
            <img src={processedImage} alt="Processed" className="w-full rounded-lg shadow-sm bg-white" />
          </div>
        )}
      </div>
      <footer className="mt-8 text-sm text-gray-600">© 2025 Background Remover</footer>
    </div>
  );
};

export default App;