Update app.py

app.py

@@ -314,6 +314,50 @@ def follow_up_question(question, bird_name):
     except Exception as e:
         return f"Error fetching information: {str(e)}"
 
+# Function to add custom JavaScript for camera switching
+def create_camera_switch_js():
+    return """
+    function switchCamera() {
+        // Get all video elements
+        const videoElements = document.querySelectorAll('video');
+        
+        if (videoElements.length > 0) {
+            const video = videoElements[0];
+            
+            // Stop all tracks on the current stream
+            if (video.srcObject) {
+                const tracks = video.srcObject.getTracks();
+                tracks.forEach(track => track.stop());
+            }
+            
+            // Try to determine current camera type
+            let usingFrontCamera = true;
+            if (window.currentCamera === 'environment') {
+                usingFrontCamera = false;
+            }
+            
+            // Set the new camera type
+            const facingMode = usingFrontCamera ? 'environment' : 'user';
+            window.currentCamera = facingMode;
+            
+            // Request new video stream with the different camera
+            navigator.mediaDevices.getUserMedia({
+                video: { facingMode: facingMode }
+            })
+            .then(function(stream) {
+                video.srcObject = stream;
+                // Play the video
+                video.play();
+            })
+            .catch(function(err) {
+                console.error('Error accessing the camera: ' + err);
+            });
+        } else {
+            console.warn('No video elements found.');
+        }
+    }
+    """
+
 # Create the Gradio interface
 with gr.Blocks(theme=gr.themes.Soft()) as app:
     gr.Markdown("# Bird Species Identification for Researchers")
@@ -321,8 +365,9 @@ with gr.Blocks(theme=gr.themes.Soft()) as app:
     
     # Store the current bird for context
     current_bird = gr.State("")
-    # Store the current camera facing mode
-    camera_mode = gr.State("environment")
+    
+    # Add custom JavaScript for camera switching
+    app.load(None, None, None, _js=create_camera_switch_js())
     
     # Main identification section
     with gr.Row():
@@ -330,8 +375,7 @@ with gr.Blocks(theme=gr.themes.Soft()) as app:
             input_image = gr.Image(
                 type="pil", 
                 label="Upload Bird Image",
-                sources=["upload", "webcam"],
-                webcam_options={"facingMode": "environment"}  # Default to back camera
+                source="webcam",  # Enable webcam
             )
             camera_toggle = gr.Button("Switch Camera")
             submit_btn = gr.Button("Identify Bird", variant="primary")
@@ -390,11 +434,6 @@ with gr.Blocks(theme=gr.themes.Soft()) as app:
     def clear_conversation_history():
         return ""
     
-    def toggle_camera_mode(current_mode):
-        # Switch between "user" (front) and "environment" (back) camera
-        new_mode = "user" if current_mode == "environment" else "environment"
-        return new_mode
-    
     submit_btn.click(
         process_image,
         inputs=[input_image],
@@ -415,38 +454,8 @@ with gr.Blocks(theme=gr.themes.Soft()) as app:
         outputs=[conversation_history]
     )
     
-    # Handle camera toggle with both backend and frontend logic
-    camera_toggle.click(
-        toggle_camera_mode,
-        inputs=[camera_mode],
-        outputs=[camera_mode],
-        _js="""
-        function(mode) {
-            // Get the webcam element
-            const webcamEl = document.querySelector('.webcam video');
-            if (webcamEl) {
-                // Determine new facing mode (opposite of current)
-                const newFacingMode = mode === "environment" ? "user" : "environment";
-                
-                // Stop current stream
-                if (webcamEl.srcObject) {
-                    webcamEl.srcObject.getTracks().forEach(track => track.stop());
-                }
-                
-                // Start new stream with different camera
-                navigator.mediaDevices.getUserMedia({
-                    video: { facingMode: newFacingMode }
-                }).then(stream => {
-                    webcamEl.srcObject = stream;
-                }).catch(err => {
-                    console.error('Error switching camera:', err);
-                });
-            }
-            // Return the new mode to update the state
-            return newFacingMode;
-        }
-        """
-    )
+    # Call the JavaScript function when the camera toggle button is clicked
+    camera_toggle.click(None, None, None, _js="switchCamera")
 
 # Launch the app
 app.launch(share=True)