import gradio as gr
import websockets
import asyncio
import json
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 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
        )
    
    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)