WIP

app.py

@@ -6,39 +6,48 @@ import base64
 from PIL import Image
 import io
 
-# Add custom CSS for mobile responsiveness
+# Updated CSS for better mobile responsiveness
 css = '''
+.container {
+    max-width: 100% !important;
+    padding: 1rem !important;
+}
+
 .row {
-    width: 90%;
-    margin: auto;
+    flex-direction: column !important;
+    gap: 1rem !important;
+    margin: 0 auto !important;
+    padding: 0.5rem !important;
+}
+
+/* Make textboxes full width on mobile */
+.input-box, .output-box {
+    width: 100% !important;
+    min-width: 100% !important;
 }
 '''
 
 def process_image_stream(question):
     return "This is a test response"
 
-# Create Gradio interface with mobile-friendly settings
-demo = gr.Blocks(css=css, theme="soft") # Using Blocks instead of Interface for more flexibility
+# Updated Gradio interface
+demo = gr.Blocks(css=css, theme="soft")
 
 with demo:
-    with gr.Row(elem_classes="row"):
+    with gr.Column():  # Changed from Row to Column for better mobile layout
         gr.Markdown("# Nexa Omni Vision")
-    
-    with gr.Row(elem_classes="row"):
+        
         question = gr.Textbox(
             label="Question", 
             placeholder="Ask a question about the image...",
             value="Describe this image",
-            scale=1,  # Makes the textbox responsive
-            min_width=300  # Minimum width on mobile
+            elem_classes="input-box"  # Added class for CSS targeting
         )
-    
-    with gr.Row(elem_classes="row"):
+        
         response = gr.Textbox(
             label="Response", 
             interactive=False,
-            scale=1,
-            min_width=300
+            elem_classes="output-box"  # Added class for CSS targeting
         )
     
     question.submit(fn=process_image_stream, inputs=question, outputs=response)