Custom UI

app.py

@@ -0,0 +1,26 @@
+import gradio as gr
+from ui.layout import create_ui
+
+# Load the custom CSS for the "Off-Brand" Badge
+try:
+    with open("ui/style.css", "r") as f:
+        custom_css = f.read()
+except FileNotFoundError:
+    custom_css = ""
+
+# Build the Gradio App with a modern theme and our custom CSS injected
+demo = gr.Blocks(
+    css=custom_css, 
+    theme=gr.themes.Default(
+        primary_hue="blue", 
+        neutral_hue="slate",
+        font=[gr.themes.GoogleFont("Inter"), "sans-serif"]
+    )
+)
+
+with demo:
+    # Initialize the UI layout from the ui folder
+    create_ui()
+
+if __name__ == "__main__":
+    demo.launch()

requirements.txt

@@ -0,0 +1,6 @@
+gradio>=4.0.0
+spaces
+torch
+transformers
+accelerate
+pillow

ui/layout.py

@@ -0,0 +1,27 @@
+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"])
+
+    # TODO: In Milestone 2 & 3, we will bind functions to the submit_btn and msg_input.

ui/style.css

@@ -0,0 +1,74 @@
+/* 
+ * Custom CSS for the "Off-Brand" Badge
+ * This overrides Gradio's default blocky styles to make it look like a premium React/MERN app.
+ */
+
+body {
+    background-color: #f8fafc; /* Tailwind slate-50 background */
+}
+
+.app-container {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 2rem;
+}
+
+.header-title {
+    text-align: center;
+    color: #0f172a;
+    font-size: 2.5rem !important;
+    font-weight: 800 !important;
+    margin-bottom: 0.5rem;
+}
+
+.header-subtitle {
+    text-align: center;
+    color: #64748b;
+    font-size: 1.1rem;
+    margin-bottom: 2rem;
+}
+
+/* Glassmorphism effect for the input boxes */
+.input-box {
+    background: rgba(255, 255, 255, 0.7) !important;
+    backdrop-filter: blur(10px);
+    border-radius: 16px !important;
+    border: 1px solid rgba(255, 255, 255, 0.5) !important;
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
+    transition: all 0.2s ease;
+}
+
+.input-box:hover {
+    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
+}
+
+/* Premium gradient submit button */
+.submit-btn {
+    background: linear-gradient(135deg, #3b82f6, #2563eb) !important;
+    color: white !important;
+    border: none !important;
+    border-radius: 12px !important;
+    padding: 12px !important;
+    font-weight: bold !important;
+    font-size: 1.1rem !important;
+    margin-top: 1rem;
+    box-shadow: 0 4px 14px 0 rgba(59, 130, 246, 0.39);
+    transition: transform 0.1s ease;
+}
+
+.submit-btn:hover {
+    transform: translateY(-2px);
+}
+
+/* Sleek chat window */
+.chat-window {
+    border-radius: 16px !important;
+    border: 1px solid #e2e8f0 !important;
+    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05);
+    background-color: white !important;
+}
+
+.chat-input {
+    border-radius: 12px !important;
+    border: 1px solid #cbd5e1 !important;
+}