ui fixed

app.py

@@ -18,21 +18,92 @@ def process_invoice(file_bytes):
     json_data = generate_json_from_text(raw_text)
     return raw_text, json_data
 
+# Custom CSS with Tailwind CDN
+custom_css = """
+<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">
+body {
+    font-family: 'Inter', sans-serif;
+    background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
+}
+.gradio-container {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 2rem;
+}
+h1 {
+    font-size: 2.5rem;
+    font-weight: 700;
+    color: #1f2937;
+    text-align: center;
+    margin-bottom: 1rem;
+}
+h3 {
+    font-size: 1.25rem;
+    color: #4b5563;
+    text-align: center;
+    margin-bottom: 2rem;
+}
+.gr-button {
+    background-color: #2563eb;
+    color: white;
+    padding: 0.75rem 1.5rem;
+    border-radius: 0.5rem;
+    font-weight: 600;
+    transition: background-color 0.3s ease;
+}
+.gr-button:hover {
+    background-color: #1e40af;
+}
+.gr-textbox, .gr-json {
+    border-radius: 0.5rem;
+    border: 1px solid #d1d5db;
+    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+}
+.gr-file-upload {
+    border: 2px dashed #d1d5db;
+    border-radius: 0.5rem;
+    padding: 1rem;
+    background-color: white;
+}
+"""
 
+# Gradio UI
+with gr.Blocks(css=custom_css) as demo:
+    gr.Markdown(
+        """
+        # 🧾 Invoice Processing App
+        Upload an invoice image to extract **OCR text** and generate **structured JSON** output.
+        """,
+        elem_classes="text-center"
+    )
 
-### Gradio UI
-with gr.Blocks() as demo:
-    gr.Markdown("# 🧾 Invoice Processing App")
-    gr.Markdown("Upload an invoice image. The app extracts **OCR text** and generates **structured JSON**.")
-
-    with gr.Row():
-        input_file = gr.File(label="Upload Invoice Image", type="binary", file_types=[".png", ".jpg", ".jpeg"])
+    with gr.Row(variant="panel"):
+        with gr.Column(scale=1):
+            input_file = gr.File(
+                label="Upload Invoice Image",
+                type="binary",
+                file_types=[".png", ".jpg", ".jpeg"],
+                elem_classes="gr-file-upload"
+            )
+            process_btn = gr.Button(
+                "Process Invoice",
+                variant="primary",
+                elem_classes="gr-button mt-4 w-full"
+            )
     
-    with gr.Row():
-        raw_text_output = gr.Textbox(label="Extracted OCR Text", lines=10)
-        json_output = gr.JSON(label="Structured JSON")
-
-    process_btn = gr.Button("Process Invoice")
+    with gr.Row(variant="panel"):
+        with gr.Column(scale=1):
+            raw_text_output = gr.Textbox(
+                label="Extracted OCR Text",
+                lines=10,
+                placeholder="Extracted text will appear here...",
+                elem_classes="gr-textbox"
+            )
+        with gr.Column(scale=1):
+            json_output = gr.JSON(
+                label="Structured JSON",
+                elem_classes="gr-json"
+            )
 
     process_btn.click(
         process_invoice,
@@ -40,4 +111,4 @@ with gr.Blocks() as demo:
         outputs=[raw_text_output, json_output]
     )
 
-demo.launch()
+demo.launch()