Update app.py

app.py

@@ -21,17 +21,20 @@ def extract_text(image):
 # Gradio App
 def create_app():
     with gr.Blocks() as app:
-        gr.Markdown("## Webcam Image Capture with Rear Camera Selection and OCR")
+        gr.Markdown("## Webcam Capture with Front/Rear Camera Toggle and OCR")
 
-        # Video feed for capturing
+        # Camera functionality with front/rear toggle
         with gr.Row():
             gr.HTML("""
             <div style="text-align: center;">
                 <video id="video" autoplay playsinline style="width: 100%; max-width: 400px; border: 2px solid black; border-radius: 8px;"></video>
                 <br />
+                <select id="camera-select" style="margin: 10px; padding: 8px 16px;">
+                    <option value="user">Front Camera</option>
+                    <option value="environment">Rear Camera</option>
+                </select>
                 <button id="start-camera" style="margin: 10px; padding: 8px 16px;">Start Camera</button>
                 <button id="capture-image" style="margin: 10px; padding: 8px 16px;">Capture Image</button>
-                <select id="camera-select" style="margin: 10px; padding: 8px 16px;"></select>
                 <br />
                 <canvas id="canvas" style="display: none;"></canvas>
                 <img id="output" alt="Captured Image" style="margin-top: 20px; max-width: 100%; border: 2px solid black; border-radius: 8px;">
@@ -43,48 +46,34 @@ def create_app():
                 const startCamera = document.getElementById("start-camera");
                 const captureImage = document.getElementById("capture-image");
                 const cameraSelect = document.getElementById("camera-select");
-                
-                let stream;
 
-                // Populate camera options
-                async function getCameras() {
-                    const devices = await navigator.mediaDevices.enumerateDevices();
-                    const videoDevices = devices.filter(device => device.kind === "videoinput");
-                    cameraSelect.innerHTML = "";
-                    videoDevices.forEach((device, index) => {
-                        const option = document.createElement("option");
-                        option.value = device.deviceId;
-                        option.text = device.label || `Camera ${index + 1}`;
-                        cameraSelect.appendChild(option);
-                    });
-                }
+                let stream;
 
-                // Start camera
+                // Start the camera with the selected mode
                 startCamera.addEventListener("click", async () => {
                     if (stream) {
                         stream.getTracks().forEach(track => track.stop());
                     }
                     stream = await navigator.mediaDevices.getUserMedia({
-                        video: { deviceId: { exact: cameraSelect.value } }
+                        video: { facingMode: cameraSelect.value }
                     });
                     video.srcObject = stream;
                 });
 
-                // Capture image
+                // Capture image from video
                 captureImage.addEventListener("click", () => {
                     canvas.width = video.videoWidth;
                     canvas.height = video.videoHeight;
                     const ctx = canvas.getContext("2d");
                     ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
                     output.src = canvas.toDataURL("image/png");
+                    const capturedImageEvent = new Event("imageCaptured");
+                    output.dispatchEvent(capturedImageEvent);
                 });
-
-                // Populate cameras on load
-                window.addEventListener("load", getCameras);
             </script>
             """)
 
-        # Gradio components for OCR
+        # OCR Processing
         with gr.Row():
             gr.Markdown("### Extract Text from Captured Image")
             image_input = gr.Image(label="Captured Image", type="pil", interactive=False)