updated UI code ✅✅

mediSync/app.py

@@ -29,16 +29,6 @@ from utils.visualization import (
     plot_multimodal_results,
     plot_report_entities,
 )
-import logging
-import os
-import sys
-import tempfile
-from pathlib import Path
-import requests
-import gradio as gr
-import matplotlib.pyplot as plt
-from PIL import Image
-
 # Set up logging
 logging.basicConfig(
     level=logging.INFO,
@@ -49,6 +39,15 @@ logger = logging.getLogger(__name__)
 
 # Create temporary directory for sample data if it doesn't exist
 os.makedirs(os.path.join(parent_dir, "data", "sample"), exist_ok=True)
+import logging
+import os
+import sys
+import tempfile
+from pathlib import Path
+import requests
+import gradio as gr
+import matplotlib.pyplot as plt
+from PIL import Image
 
 # Import configuration for end consultation logic
 try:
@@ -559,12 +558,9 @@ def create_interface():
             import urllib.parse
             try:
                 url_params = {}
-                if hasattr(gr, 'get_current_url'):
-                    current_url = gr.get_current_url()
-                    if current_url:
-                        parsed = urllib.parse.urlparse(current_url)
-                        url_params = urllib.parse.parse_qs(parsed.query)
-                default_appointment_id = url_params.get('appointment_id', [''])[0]
+                # Use window.location.search if available, fallback to gradio's get_current_url
+                # This logic is for server-side, so we will use a placeholder and rely on JS for actual population
+                default_appointment_id = ""
             except:
                 default_appointment_id = ""
             appointment_id_input = gr.Textbox(
@@ -697,7 +693,7 @@ def create_interface():
         )
 
         def handle_end_consultation(appointment_id):
-            # Output status: keep text black, simple, no color or theme
+            # Output status: styled with color for buttons and clear status box, as per template
             if not appointment_id or appointment_id.strip() == "":
                 return "<div style='color: #000; background: #fff; padding: 10px; border-radius: 5px;'>Please enter your appointment ID first.</div>"
             result = complete_appointment(appointment_id.strip())
@@ -705,15 +701,15 @@ def create_interface():
                 doctors_urls = get_doctors_page_urls()
                 html_response = f"""
                 <div style='color: #000; background: #fff; padding: 15px; border-radius: 5px; margin: 10px 0;'>
-                    <h3 style="color: #000;">✅ Consultation Completed Successfully!</h3>
-                    <p>✔️ {result['message']}</p>
+                    <h3 style="color: #28a745;">✅ Consultation Completed Successfully!</h3>
+                    <p style="color: #28a745;">✔️ {result['message']}</p>
                     <p>Your appointment has been marked as completed.</p>
                     <button onclick="window.open('{doctors_urls['local']}', '_blank')" 
-                            style="background-color: #00bfae; color: white; padding: 8px 18px; border: none; border-radius: 6px; cursor: pointer; margin-top: 10px;">
+                            style="background-color: #00bfae; color: white; padding: 10px 20px; border: none; border-radius: 5px; cursor: pointer; margin-top: 10px;">
                         Return to Doctors Page (Local)
                     </button>
                     <button onclick="window.open('{doctors_urls['production']}', '_blank')" 
-                            style="background-color: #6c63ff; color: white; padding: 8px 18px; border: none; border-radius: 6px; cursor: pointer; margin-top: 10px; margin-left: 10px;">
+                            style="background-color: #6c63ff; color: white; padding: 10px 20px; border: none; border-radius: 5px; cursor: pointer; margin-top: 10px; margin-left: 10px;">
                         Return to Doctors Page (Production)
                     </button>
                 </div>
@@ -722,7 +718,7 @@ def create_interface():
                 if "Cannot connect to Flask app" in result['message']:
                     html_response = f"""
                     <div style='color: #000; background: #fff; padding: 15px; border-radius: 5px; margin: 10px 0;'>
-                        <h3 style="color: #000;">⚠️ Consultation Ready to Complete</h3>
+                        <h3 style="color: #ff9800;">⚠️ Consultation Ready to Complete</h3>
                         <p>Your consultation analysis is complete! However, we cannot automatically mark your appointment as completed because the Flask app is not accessible from this environment.</p>
                         <p><strong>Appointment ID:</strong> {appointment_id.strip()}</p>
                         <p><strong>Next Steps:</strong></p>
@@ -733,15 +729,15 @@ def create_interface():
                         </ol>
                         <div style="margin-top: 15px;">
                             <button onclick="window.open('http://127.0.0.1:600/complete_appointment_manual?appointment_id={appointment_id.strip()}', '_blank')" 
-                                    style="background-color: #00bfae; color: white; padding: 8px 18px; border: none; border-radius: 6px; cursor: pointer; margin-right: 10px;">
+                                    style="background-color: #00bfae; color: white; padding: 10px 20px; border: none; border-radius: 5px; cursor: pointer; margin-right: 10px;">
                                 Complete Appointment
                             </button>
                             <button onclick="window.open('http://127.0.0.1:600/doctors', '_blank')" 
-                                    style="background-color: #6c63ff; color: white; padding: 8px 18px; border: none; border-radius: 6px; cursor: pointer; margin-right: 10px;">
+                                    style="background-color: #6c63ff; color: white; padding: 10px 20px; border: none; border-radius: 5px; cursor: pointer; margin-right: 10px;">
                                 Return to Doctors Page
                             </button>
                             <button onclick="navigator.clipboard.writeText('{appointment_id.strip()}')" 
-                                    style="background-color: #23272f; color: white; padding: 8px 18px; border: none; border-radius: 6px; cursor: pointer;">
+                                    style="background-color: #23272f; color: white; padding: 10px 20px; border: none; border-radius: 5px; cursor: pointer;">
                                 Copy Appointment ID
                             </button>
                         </div>
@@ -750,7 +746,7 @@ def create_interface():
                 else:
                     html_response = f"""
                     <div style='color: #000; background: #fff; padding: 15px; border-radius: 5px; margin: 10px 0;'>
-                        <h3 style="color: #000;">❌ Error Completing Consultation</h3>
+                        <h3 style="color: #dc3545;">❌ Error Completing Consultation</h3>
                         <p>{result['message']}</p>
                         <p>Please try again or contact support if the problem persists.</p>
                     </div>
@@ -763,13 +759,13 @@ def create_interface():
             outputs=[end_consultation_status]
         )
 
-        # JavaScript for appointment ID auto-population
+        # JavaScript for appointment ID auto-population (reference template logic)
         gr.HTML("""
         <script>
         function getUrlParameter(name) {
             name = name.replace(/[[]/, '\\[').replace(/[\]]/, '\\]');
             var regex = new RegExp('[\\?&]' + name + '=([^&#]*)');
-            var results = regex.exec(location.search);
+            var results = regex.exec(window.location.search);
             return results === null ? '' : decodeURIComponent(results[1].replace(/\\+/g, ' '));
         }
         function populateAppointmentId() {