ui/layout.py

import gradio as gr

def create_ui():
    """
    Creates the main UI layout for the Gradio app using custom CSS classes.
    """
    with gr.Column(elem_classes=["app-container"]):
        
        # Header Section
        gr.Markdown("# 💸 Family Bill Assistant", elem_classes=["header-title"])
        gr.Markdown("Upload your grocery or medical bills to get them categorized and explained in simple Hindi/English.", elem_classes=["header-subtitle"])
        
        # Main Layout
        with gr.Row():
            
            # Left Panel: Inputs
            with gr.Column(scale=1):
                image_input = gr.Image(type="filepath", label="Upload Bill Image", elem_classes=["input-box"])
                audio_input = gr.Audio(type="filepath", label="Or Send a Voice Note", elem_classes=["input-box"])
                submit_btn = gr.Button("Analyze Bill", elem_classes=["submit-btn"])
            
            # Right Panel: Output/Chat Agent
            with gr.Column(scale=2):
                chatbot = gr.Chatbot(label="Agent", elem_classes=["chat-window"], height=500)
                msg_input = gr.Textbox(label="Ask a question", placeholder="e.g. How much did I spend on junk food?", elem_classes=["chat-input"])

    # Return the components so app.py can bind events to them
    return image_input, audio_input, submit_btn, chatbot, msg_input