Update app.py

app.py

@@ -158,63 +158,153 @@ def process_final_report(agent, file, chatbot_state: List[Dict[str, str]]) -> Tu
 
 def create_ui(agent):
     with gr.Blocks(css="""
-        html, body, .gradio-container {
-            height: 100vh;
-            background-color: #111827;
-            color: #e5e7eb;
+        :root {
+            --primary-color: #2563eb;
+            --secondary-color: #1e40af;
+            --bg-color: #f8fafc;
+            --text-color: #1e293b;
+            --user-bubble: #ffffff;
+            --bot-bubble: #f1f5f9;
+            --border-color: #e2e8f0;
+        }
+        body {
             font-family: 'Inter', sans-serif;
+            background-color: var(--bg-color);
+            color: var(--text-color);
         }
-        .message-avatar {
-            width: 38px;
-            height: 38px;
-            border-radius: 50%;
-            margin-right: 10px;
+        .gradio-container {
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 20px;
+            background-color: var(--bg-color);
         }
-        .chat-message {
+        .chat-container {
             display: flex;
+            flex-direction: column;
+            height: 80vh;
+            border: 1px solid var(--border-color);
+            border-radius: 12px;
+            overflow: hidden;
+            background-color: white;
+        }
+        .chat-header {
+            padding: 16px;
+            background-color: white;
+            border-bottom: 1px solid var(--border-color);
+            font-weight: 600;
+            font-size: 18px;
+        }
+        .chat-messages {
+            flex: 1;
+            padding: 16px;
+            overflow-y: auto;
+            background-color: var(--bg-color);
+        }
+        .message {
+            display: flex;
+            margin-bottom: 16px;
             align-items: flex-start;
-            margin-bottom: 1rem;
         }
-        .message-bubble {
-            background-color: #1f2937;
+        .message-avatar {
+            width: 36px;
+            height: 36px;
+            border-radius: 50%;
+            margin-right: 12px;
+            background-color: var(--primary-color);
+            color: white;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-weight: bold;
+        }
+        .message-content {
+            max-width: 80%;
+        }
+        .user-message .message-content {
+            margin-left: auto;
+            background-color: var(--user-bubble);
             padding: 12px 16px;
-            border-radius: 12px;
-            max-width: 90%;
+            border-radius: 18px 18px 0 18px;
+            box-shadow: 0 1px 2px rgba(0,0,0,0.1);
         }
-        .chat-input {
-            background-color: #1f2937;
-            border: 1px solid #374151;
-            border-radius: 8px;
-            color: #e5e7eb;
-            padding: 0.75rem 1rem;
+        .bot-message .message-content {
+            background-color: var(--bot-bubble);
+            padding: 12px 16px;
+            border-radius: 18px 18px 18px 0;
+            box-shadow: 0 1px 2px rgba(0,0,0,0.1);
+        }
+        .message-time {
+            font-size: 12px;
+            color: #64748b;
+            margin-top: 4px;
+        }
+        .chat-input-container {
+            padding: 16px;
+            background-color: white;
+            border-top: 1px solid var(--border-color);
         }
-        .gr-button.primary {
-            background: #2563eb;
+        .file-upload {
+            display: flex;
+            gap: 8px;
+            margin-bottom: 12px;
+        }
+        .upload-btn {
+            flex: 1;
+        }
+        .analyze-btn {
+            background-color: var(--primary-color);
             color: white;
+            border: none;
+            padding: 10px 16px;
             border-radius: 8px;
-            font-weight: 600;
+            cursor: pointer;
+            font-weight: 500;
+        }
+        .analyze-btn:hover {
+            background-color: var(--secondary-color);
         }
-        .gr-button.primary:hover {
-            background: #1e40af;
+        .report-download {
+            margin-top: 12px;
+            padding: 12px;
+            background-color: var(--bot-bubble);
+            border-radius: 8px;
+            display: none;
         }
     """) as demo:
-        gr.Markdown("""<h2 style='color:#60a5fa'>🩺 Patient History AI Assistant</h2><p>Upload a clinical Excel file and receive a structured diagnostic summary.</p>""")
-        with gr.Row():
-            with gr.Column(scale=3):
-                chatbot = gr.Chatbot(
-                    label="Clinical Assistant",
-                    height=700,
-                    type="messages",
-                    avatar_images=[
-                        "https://ui-avatars.com/api/?name=AI&background=2563eb&color=fff&size=128",
-                        "https://ui-avatars.com/api/?name=You&background=374151&color=fff&size=128"
-                    ]
+        with gr.Column(elem_classes="chat-container"):
+            gr.Markdown("""<div class="chat-header">Patient History AI Assistant</div>""")
+            
+            chatbot = gr.Chatbot(
+                elem_classes="chat-messages",
+                label=None,
+                show_label=False,
+                bubble_full_width=False,
+                avatar_images=[
+                    "https://ui-avatars.com/api/?name=AI&background=2563eb&color=fff&size=128",  # Bot avatar
+                    None  # User avatar (default)
+                ]
+            )
+            
+            with gr.Column(elem_classes="chat-input-container"):
+                with gr.Row(elem_classes="file-upload"):
+                    file_upload = gr.File(
+                        label="Upload Excel File",
+                        file_types=[".xlsx"],
+                        elem_classes="upload-btn",
+                        scale=4
+                    )
+                    analyze_btn = gr.Button(
+                        "Analyze",
+                        elem_classes="analyze-btn",
+                        scale=1
+                    )
+                
+                report_output = gr.File(
+                    label="Download Report",
+                    visible=False,
+                    interactive=False,
+                    elem_classes="report-download"
                 )
-            with gr.Column(scale=1):
-                with gr.Row():
-                    file_upload = gr.File(label="", file_types=[".xlsx"], elem_id="upload-btn")
-                    analyze_btn = gr.Button("🧠 Analyze", variant="primary")
-                report_output = gr.File(label="Download Report", visible=False, interactive=False)
 
         chatbot_state = gr.State(value=[])
 
@@ -222,7 +312,11 @@ def create_ui(agent):
             messages, report_path = process_final_report(agent, file, current_state)
             return messages, gr.update(visible=report_path is not None, value=report_path), messages
 
-        analyze_btn.click(fn=update_ui, inputs=[file_upload, chatbot_state], outputs=[chatbot, report_output, chatbot_state])
+        analyze_btn.click(
+            fn=update_ui,
+            inputs=[file_upload, chatbot_state],
+            outputs=[chatbot, report_output, chatbot_state]
+        )
 
     return demo
 
@@ -233,4 +327,4 @@ if __name__ == "__main__":
         demo.launch(server_name="0.0.0.0", server_port=7860, allowed_paths=["/data/hf_cache/reports"], share=False)
     except Exception as e:
         print(f"Error: {str(e)}")
-        sys.exit(1)
+        sys.exit(1)