WIP

app.py

@@ -6,32 +6,42 @@ import base64
 from PIL import Image
 import io
 
+# Add custom CSS for mobile responsiveness
+css = '''
+.row {
+    width: 90%;
+    margin: auto;
+}
+'''
+
 def process_image_stream(question):
     return "This is a test response"
 
-# Create Gradio interface
-demo = gr.Interface(
-    fn=process_image_stream,
-    inputs=[
-        gr.Textbox(
+# Create Gradio interface with mobile-friendly settings
+demo = gr.Blocks(css=css, theme="soft") # Using Blocks instead of Interface for more flexibility
+
+with demo:
+    with gr.Row(elem_classes="row"):
+        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
-        ),
-    ],
-    outputs=gr.Textbox(
-        label="Response", 
-        interactive=False,
-        scale=1,  # Makes the textbox responsive
-        min_width=300  # Minimum width on mobile
-    ),
-    title="Nexa Omni Vision",
-    theme="soft",  # Using a mobile-friendly theme
-    css=".gradio-container {max-width: 800px; margin: auto}",  # Responsive container
-    allow_flagging="never"  # Removes flagging button for cleaner mobile view
-)
+        )
+    
+    with gr.Row(elem_classes="row"):
+        response = gr.Textbox(
+            label="Response", 
+            interactive=False,
+            scale=1,
+            min_width=300
+        )
+    
+    question.submit(fn=process_image_stream, inputs=question, outputs=response)
 
 if __name__ == "__main__":
     demo.queue().launch(server_name="0.0.0.0", server_port=7860)