From b777d0b6a6844b31aa916b0c8817871ad2899527 Mon Sep 17 00:00:00 2001
From: RianaAzad <20303033@iubat.edu>
Date: Sat, 8 Mar 2025 22:58:08 +0600
Subject: [PATCH] FEAT: implement camera component for taking realtime pictures

---
 package.json              |   2 +-
 src/App.tsx               | 236 +++++++++++++++++++++-----------------
 src/components/Camera.tsx | 133 +++++++++++++++++++++
 3 files changed, 267 insertions(+), 104 deletions(-)
 create mode 100644 src/components/Camera.tsx

diff --git a/package.json b/package.json
index cc5da19..f84ca3b 100644
--- a/package.json
+++ b/package.json
@@ -4,7 +4,7 @@
   "version": "0.0.0",
   "type": "module",
   "scripts": {
-    "dev": "vite",
+    "dev": "vite --host",
     "build": "vite build",
     "lint": "eslint .",
     "preview": "vite preview"
diff --git a/src/App.tsx b/src/App.tsx
index ffeb485..ee72d40 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -2,6 +2,7 @@ import React, { useState, useCallback, useEffect } from "react";
 import { useDropzone } from "react-dropzone";
 import { Images } from "./components/Images";
 import { processImages, initializeModel, getModelInfo } from "../lib/process";
+import { Camera } from "./components/Camera";
 
 interface AppError {
   message: string;
@@ -45,6 +46,7 @@ export default function App() {
   const [currentModel, setCurrentModel] = useState<'briaai/RMBG-1.4' | 'Xenova/modnet'>('briaai/RMBG-1.4');
   const [isModelSwitching, setIsModelSwitching] = useState(false);
   const [images, setImages] = useState<ImageFile[]>([]);
+  const [showCamera, setShowCamera] = useState(false);
 
   useEffect(() => {
     if (isMobileSafari() && !isRedirectPage()) {
@@ -180,6 +182,13 @@ export default function App() {
     },
   });
 
+  // Add this function to handle camera capture
+  const handleCameraCapture = async (capturedImage: Blob) => {
+    const file = new File([capturedImage], `camera-${Date.now()}.jpg`, { type: 'image/jpeg' });
+    onDrop([file]);
+    setShowCamera(false);
+  };
+
   // Remove the full screen error and loading states
 
   return (
@@ -216,116 +225,137 @@ export default function App() {
       </nav>
 
       <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pt-24 pb-8 flex-grow">
-        <div className={`grid ${images.length === 0 ? 'grid-cols-1 lg:grid-cols-2 gap-8' : 'grid-cols-1'}`}>
-          {images.length === 0 && (
-            <div className="flex flex-col justify-center space-y-6">
-              <div className="glass-card p-8">
-                <h2 className="text-4xl font-bold mb-6">
-                  <span className="gradient-text">Remove Background</span>
-                  <br />
-                  <span className="text-accent">In One Click</span>
-                </h2>
-                <p className="text-xl text-gray-300 mb-8">
-                  Transform your images instantly with AI-powered background removal
-                </p>
-                <ul className="space-y-4">
-                  {[
-                    '100% Free & Private',
-                    'Browser-based Processing',
-                    'Advanced Background Editing'
-                  ].map((feature, index) => (
-                    <li key={index} className="flex items-center gap-3 text-gray-300">
-                      <svg className="w-5 h-5 text-accent" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7" />
-                      </svg>
-                      {feature}
-                    </li>
-                  ))}
-                </ul>
+        {showCamera ? (
+          <Camera 
+            onCapture={handleCameraCapture} 
+            onClose={() => setShowCamera(false)} 
+          />
+        ) : (
+          <div className={`grid ${images.length === 0 ? 'grid-cols-1 lg:grid-cols-2 gap-8' : 'grid-cols-1'}`}>
+            {images.length === 0 && (
+              <div className="flex flex-col justify-center space-y-6">
+                <div className="glass-card p-8">
+                  <h2 className="text-4xl font-bold mb-6">
+                    <span className="gradient-text">Remove Background</span>
+                    <br />
+                    <span className="text-accent">In One Click</span>
+                  </h2>
+                  <p className="text-xl text-gray-300 mb-8">
+                    Transform your images instantly with AI-powered background removal
+                  </p>
+                  <ul className="space-y-4">
+                    {[
+                      '100% Free & Private',
+                      'Browser-based Processing',
+                      'Advanced Background Editing'
+                    ].map((feature, index) => (
+                      <li key={index} className="flex items-center gap-3 text-gray-300">
+                        <svg className="w-5 h-5 text-accent" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7" />
+                        </svg>
+                        {feature}
+                      </li>
+                    ))}
+                  </ul>
+                </div>
               </div>
-            </div>
-          )}
-          
-          <div className={images.length === 0 ? '' : 'w-full'}>
-            <div
-              {...getRootProps()}
-              className={`dropzone p-8 mb-8 rounded-xl text-center cursor-pointer
-                ${isDragAccept ? "border-green-500 bg-green-500/10" : ""}
-                ${isDragReject ? "border-red-500 bg-red-500/10" : ""}
-                ${isDragActive ? "border-accent bg-accent/10" : ""}
-                ${isLoading || isModelSwitching ? "cursor-not-allowed opacity-50" : ""}
-              `}
-            >
-              <input {...getInputProps()} className="hidden" disabled={isLoading || isModelSwitching} />
-              <div className="flex flex-col items-center gap-2">
-                {isLoading || isModelSwitching ? (
-                  <>
-                    <div className="inline-block animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-blue-600 mb-2"></div>
-                    <p className="text-lg text-gray-600">
-                      {isModelSwitching ? 'Switching models...' : 'Loading background removal model...'}
-                    </p>
-                  </>
-                ) : error ? (
-                  <>
-                    <svg className="w-12 h-12 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
-                    </svg>
-                    <p className="text-lg text-red-600 font-medium mb-2">{error.message}</p>
-                    {currentModel === 'Xenova/modnet' && (
-                      <button
-                        onClick={(e) => {
-                          e.stopPropagation();
-                          handleModelChange({ target: { value: 'briaai/RMBG-1.4' }} as any);
-                        }}
-                        className="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors"
-                      >
-                        Switch to Cross-browser Version
-                      </button>
+            )}
+            
+            <div className={images.length === 0 ? '' : 'w-full'}>
+              <div className="flex flex-col gap-4 mb-8">
+                <div
+                  {...getRootProps()}
+                  className={`dropzone p-8 rounded-xl text-center cursor-pointer
+                    ${isDragAccept ? "border-green-500 bg-green-500/10" : ""}
+                    ${isDragReject ? "border-red-500 bg-red-500/10" : ""}
+                    ${isDragActive ? "border-accent bg-accent/10" : ""}
+                    ${isLoading || isModelSwitching ? "cursor-not-allowed opacity-50" : ""}
+                  `}
+                >
+                  <input {...getInputProps()} className="hidden" disabled={isLoading || isModelSwitching} />
+                  <div className="flex flex-col items-center gap-2">
+                    {isLoading || isModelSwitching ? (
+                      <>
+                        <div className="inline-block animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-blue-600 mb-2"></div>
+                        <p className="text-lg text-gray-600">
+                          {isModelSwitching ? 'Switching models...' : 'Loading background removal model...'}
+                        </p>
+                      </>
+                    ) : error ? (
+                      <>
+                        <svg className="w-12 h-12 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
+                        </svg>
+                        <p className="text-lg text-red-600 font-medium mb-2">{error.message}</p>
+                        {currentModel === 'Xenova/modnet' && (
+                          <button
+                            onClick={(e) => {
+                              e.stopPropagation();
+                              handleModelChange({ target: { value: 'briaai/RMBG-1.4' }} as any);
+                            }}
+                            className="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors"
+                          >
+                            Switch to Cross-browser Version
+                          </button>
+                        )}
+                      </>
+                    ) : (
+                      <>
+                        <svg className="w-12 h-12 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" />
+                        </svg>
+                        <p className="text-lg text-gray-600">
+                          {isDragActive
+                            ? "Drop the images here..."
+                            : "Drag and drop images here"}
+                        </p>
+                        <p className="text-sm text-gray-500">or click to select files</p>
+                      </>
                     )}
-                  </>
-                ) : (
-                  <>
-                    <svg className="w-12 h-12 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" />
-                    </svg>
-                    <p className="text-lg text-gray-600">
-                      {isDragActive
-                        ? "Drop the images here..."
-                        : "Drag and drop images here"}
-                    </p>
-                    <p className="text-sm text-gray-500">or click to select files</p>
-                  </>
-                )}
+                  </div>
+                </div>
+
+                <button
+                  onClick={() => setShowCamera(true)}
+                  className="flex items-center justify-center gap-2 p-4 rounded-xl border-2 border-dashed border-gray-600 hover:border-accent transition-colors"
+                  disabled={isLoading || isModelSwitching}
+                >
+                  <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z" />
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M15 13a3 3 0 11-6 0 3 3 0 016 0z" />
+                  </svg>
+                  Take a Picture
+                </button>
               </div>
-            </div>
 
-            {images.length === 0 && (
-              <div className="glass-card p-6">
-                <h3 className="text-xl font-semibold text-gray-300 mb-6">Try with sample images:</h3>
-                <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
-                  {sampleImages.map((url, index) => (
-                    <button
-                      key={index}
-                      onClick={() => handleSampleImageClick(url)}
-                      className="gradient-border overflow-hidden rounded-xl hover:scale-105 transition-transform"
-                    >
-                      <img
-                        src={url}
-                        alt={`Sample ${index + 1}`}
-                        className="w-full aspect-square object-cover"
-                      />
-                    </button>
-                  ))}
+              {images.length === 0 && (
+                <div className="glass-card p-6">
+                  <h3 className="text-xl font-semibold text-gray-300 mb-6">Try with sample images:</h3>
+                  <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+                    {sampleImages.map((url, index) => (
+                      <button
+                        key={index}
+                        onClick={() => handleSampleImageClick(url)}
+                        className="gradient-border overflow-hidden rounded-xl hover:scale-105 transition-transform"
+                      >
+                        <img
+                          src={url}
+                          alt={`Sample ${index + 1}`}
+                          className="w-full aspect-square object-cover"
+                        />
+                      </button>
+                    ))}
+                  </div>
+                  <p className="text-sm text-gray-500 mt-4">
+                    All images are processed locally on your device and are not uploaded to any server.
+                  </p>
                 </div>
-                <p className="text-sm text-gray-500 mt-4">
-                  All images are processed locally on your device and are not uploaded to any server.
-                </p>
-              </div>
-            )}
+              )}
 
-            <Images images={images} onDelete={(id) => setImages(prev => prev.filter(img => img.id !== id))} />
+              <Images images={images} onDelete={(id) => setImages(prev => prev.filter(img => img.id !== id))} />
+            </div>
           </div>
-        </div>
+        )}
       </main>
 
       <footer className="mt-auto py-6 glass-nav">
diff --git a/src/components/Camera.tsx b/src/components/Camera.tsx
new file mode 100644
index 0000000..9fb17be
--- /dev/null
+++ b/src/components/Camera.tsx
@@ -0,0 +1,133 @@
+import React, { useRef, useEffect, useState } from 'react';
+
+interface CameraProps {
+  onCapture: (image: Blob) => void;
+  onClose: () => void;
+}
+
+export const Camera: React.FC<CameraProps> = ({ onCapture, onClose }) => {
+  const videoRef = useRef<HTMLVideoElement>(null);
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+  const [error, setError] = useState<string>('');
+  const [isFrontCamera, setIsFrontCamera] = useState(true);
+
+  useEffect(() => {
+    startCamera();
+    return () => {
+      stopCamera();
+    };
+  }, [isFrontCamera]);
+
+  const startCamera = async () => {
+    try {
+      const stream = await navigator.mediaDevices.getUserMedia({
+        video: {
+          facingMode: isFrontCamera ? 'user' : 'environment',
+          width: { ideal: 1920 },
+          height: { ideal: 1080 }
+        }
+      });
+      
+      if (videoRef.current) {
+        videoRef.current.srcObject = stream;
+      }
+    } catch (err) {
+      setError('Unable to access camera. Please make sure you have granted camera permissions.');
+      console.error('Camera error:', err);
+    }
+  };
+
+  const stopCamera = () => {
+    if (videoRef.current?.srcObject) {
+      const tracks = (videoRef.current.srcObject as MediaStream).getTracks();
+      tracks.forEach(track => track.stop());
+    }
+  };
+
+  const switchCamera = () => {
+    setIsFrontCamera(!isFrontCamera);
+  };
+
+  const captureImage = () => {
+    if (videoRef.current && canvasRef.current) {
+      const video = videoRef.current;
+      const canvas = canvasRef.current;
+      
+      // Set canvas size to match video dimensions
+      canvas.width = video.videoWidth;
+      canvas.height = video.videoHeight;
+      
+      // Draw the current video frame
+      const ctx = canvas.getContext('2d');
+      if (ctx) {
+        // Flip horizontally if using front camera
+        if (isFrontCamera) {
+          ctx.scale(-1, 1);
+          ctx.drawImage(video, -canvas.width, 0, canvas.width, canvas.height);
+          ctx.scale(-1, 1); // Reset transform
+        } else {
+          ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
+        }
+        
+        // Convert to blob and send to parent
+        canvas.toBlob((blob) => {
+          if (blob) {
+            onCapture(blob);
+          }
+        }, 'image/jpeg', 0.8);
+      }
+    }
+  };
+
+  return (
+    <div className="fixed inset-0 z-50 bg-black flex flex-col">
+      <div className="relative flex-grow">
+        {error ? (
+          <div className="flex items-center justify-center h-full">
+            <p className="text-red-500 text-center p-4">{error}</p>
+          </div>
+        ) : (
+          <video
+            ref={videoRef}
+            autoPlay
+            playsInline
+            muted
+            className={`w-full h-full object-cover ${isFrontCamera ? 'scale-x-[-1]' : ''}`}
+          />
+        )}
+      </div>
+
+      <div className="flex items-center justify-around p-4 bg-black/50">
+        <button
+          onClick={onClose}
+          className="p-3 rounded-full bg-red-500 text-white"
+          aria-label="Close camera"
+        >
+          <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M6 18L18 6M6 6l12 12" />
+          </svg>
+        </button>
+
+        <button
+          onClick={captureImage}
+          className="p-6 rounded-full bg-white"
+          aria-label="Take photo"
+        >
+          <div className="w-12 h-12 rounded-full border-4 border-black"></div>
+        </button>
+
+        <button
+          onClick={switchCamera}
+          className="p-3 rounded-full bg-gray-600 text-white"
+          aria-label="Switch camera"
+        >
+          <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
+          </svg>
+        </button>
+      </div>
+
+      <canvas ref={canvasRef} className="hidden" />
+    </div>
+  );
+}; 
\ No newline at end of file