Update app.py

app.py

@@ -4,13 +4,18 @@ import base64
 from PIL import Image
 import io
 import os
+import time
 
-# Initialize OpenAI client with environment variable for API key
+# Initialize OpenAI client
 client = OpenAI(
     base_url="https://openrouter.ai/api/v1",
     api_key='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'
 )
 
+def capture_image():
+    # This will trigger the camera capture in the frontend
+    return None
+
 def analyze_image(image, prompt):
     if image is None:
         return "Please capture or upload an image first."
@@ -47,66 +52,122 @@ def analyze_image(image, prompt):
     except Exception as e:
         return f"Error: {str(e)}"
 
-# Custom CSS for mobile optimization
 css = """
-#camera-input {width: 100% !important;}
-#camera-preview {max-width: 100%; margin: 0 auto;}
-@media (max-width: 768px) {
-    #col-left {padding: 10px !important;}
-    #col-right {padding: 10px !important;}
+#camera-container {
+    position: relative;
+    width: 100%;
+    margin: 0 auto;
+}
+#camera-input {
+    width: 100% !important;
+    min-height: 300px;
+}
+#capture-btn {
+    position: absolute;
+    bottom: 20px;
+    left: 50%;
+    transform: translateX(-50%);
+    z-index: 100;
+    background: white;
+    border-radius: 50%;
+    width: 60px;
+    height: 60px;
+    border: 3px solid #4a6cf7;
+    cursor: pointer;
+}
+#capture-btn:active {
+    transform: translateX(-50%) scale(0.95);
+}
+.mobile-controls {
+    display: flex;
+    gap: 10px;
+    margin-top: 10px;
+    justify-content: center;
+}
+@media (min-width: 768px) {
+    #camera-container {
+        max-width: 500px;
+    }
 }
 """
 
-with gr.Blocks(css=css, title="DaltonVision") as demo:
+with gr.Blocks(css=css, title="DaltonVision Camera") as demo:
     gr.Markdown("""
-    # 📸 DaltonVision - Camera Analysis
-    ### Capture, Upload & Analyze Images with AI
+    # 📸 DaltonVision - Camera Mode
+    ### Take pictures directly in the app for analysis
     """)
     
-    with gr.Row(equal_height=True):
-        with gr.Column(elem_id="col-left"):
-            # Camera component with larger preview
-            camera = gr.Image(
-                sources=["webcam", "upload"],
-                type="pil",
-                label="Take a picture or upload",
-                elem_id="camera-input",
-                interactive=True,
-                height=400
-            )
-            
-            prompt = gr.Textbox(
-                label="What would you like to know?",
-                placeholder="Describe this image...",
-                lines=3
-            )
-            
-            submit_btn = gr.Button("Analyze", variant="primary")
+    with gr.Column():
+        with gr.Row():
+            with gr.Column(elem_id="camera-container"):
+                # Camera component
+                camera = gr.Image(
+                    sources=["webcam"],
+                    type="pil",
+                    label="Camera Preview",
+                    elem_id="camera-input",
+                    interactive=False,
+                    mirror_webcam=False
+                )
+                
+                # Hidden button that triggers capture
+                capture_trigger = gr.Button("Capture", visible=False)
+                
+                # Custom capture button
+                with gr.Row(elem_classes="mobile-controls"):
+                    gr.HTML("""
+                    <div id="capture-btn" onclick="document.querySelector('#capture-btn-hidden').click()"></div>
+                    """)
+                    capture_btn = gr.Button("Capture Photo", elem_id="capture-btn-hidden", visible=False)
+                    
+                    flip_btn = gr.Button("🔄 Flip Camera")
+                    reset_btn = gr.Button("❌ Reset")
+                
+                # Upload fallback
+                upload = gr.UploadButton("📁 Upload Instead", file_types=["image"])
             
-            gr.Examples(
-                examples=[
-                    ["What's written in this document?"],
-                    ["Describe this scene in detail"],
-                    ["Extract all text from this image"]
-                ],
-                inputs=[prompt],
-                label="Try these prompts:"
-            )
+        prompt = gr.Textbox(
+            label="Ask about the image",
+            placeholder="What would you like to know about this image?",
+            lines=3
+        )
+        
+        submit_btn = gr.Button("Analyze Image", variant="primary")
         
-        with gr.Column(elem_id="col-right"):
-            output = gr.Textbox(
-                label="Analysis Results",
-                interactive=False,
-                lines=15,
-                show_copy_button=True
-            )
+        output = gr.Textbox(
+            label="Analysis Results",
+            interactive=False,
+            lines=10,
+            show_copy_button=True
+        )
+    
+    # Event handlers
+    capture_btn.click(
+        capture_image,
+        outputs=camera
+    )
+    
+    flip_btn.click(
+        None,
+        _js="() => { document.querySelector('video').style.transform = document.querySelector('video').style.transform === 'scaleX(-1)' ? 'scaleX(1)' : 'scaleX(-1)'; }"
+    )
+    
+    reset_btn.click(
+        lambda: (None, ""),
+        outputs=[camera, output]
+    )
+    
+    upload.upload(
+        lambda file: Image.open(file.name),
+        inputs=upload,
+        outputs=camera
+    )
     
     submit_btn.click(
-        fn=analyze_image,
+        analyze_image,
         inputs=[camera, prompt],
         outputs=output
     )
 
-# For Hugging Face Spaces deployment
 if __name__ == "__main__":
-    demo.launch(show_api=False)
+    demo.launch()