updated the UI code ✅✅

mediSync/app.py

@@ -7,47 +7,6 @@ import requests
 import gradio as gr
 import matplotlib.pyplot as plt
 from PIL import Image
-import logging
-import os
-import sys
-import tempfile
-from pathlib import Path
-
-import gradio as gr
-import matplotlib.pyplot as plt
-from PIL import Image
-
-# Add parent directory to path
-parent_dir = os.path.dirname(os.path.abspath(__file__))
-sys.path.append(parent_dir)
-
-# Import our modules
-from models.multimodal_fusion import MultimodalFusion
-from utils.preprocessing import enhance_xray_image, normalize_report_text
-from utils.visualization import (
-    plot_image_prediction,
-    plot_multimodal_results,
-    plot_report_entities,
-)
-# Set up logging
-logging.basicConfig(
-    level=logging.INFO,
-    format="%(asctime)s - %(name)s - %(levelname)s - %(message)s",
-    handlers=[logging.StreamHandler(), logging.FileHandler("mediSync.log")],
-)
-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:
@@ -527,6 +486,26 @@ def create_interface():
         #end_consultation_status button:active, #end_consultation_status button:focus {
             outline: 2px solid #00bfae !important;
         }
+        #end_consultation_status .btn-green {
+            background-color: #00bfae !important;
+            color: #fff !important;
+        }
+        #end_consultation_status .btn-purple {
+            background-color: #6c63ff !important;
+            color: #fff !important;
+        }
+        #end_consultation_status .btn-dark {
+            background-color: #23272f !important;
+            color: #fff !important;
+        }
+        #end_consultation_status .btn-orange {
+            background-color: #ff9800 !important;
+            color: #fff !important;
+        }
+        #end_consultation_status .btn-red {
+            background-color: #dc3545 !important;
+            color: #fff !important;
+        }
         """
     ) as interface:
         gr.Markdown(
@@ -555,7 +534,6 @@ def create_interface():
         )
 
         with gr.Row():
-            # The value will be set by JS, so leave it empty here
             appointment_id_input = gr.Textbox(
                 label="Appointment ID",
                 placeholder="Enter your appointment ID here...",
@@ -697,12 +675,12 @@ def create_interface():
                     <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: 10px 20px; border: none; border-radius: 5px; cursor: pointer; margin-top: 10px;">
+                    <button class="btn-green" onclick="window.open('{doctors_urls['local']}', '_blank')"
+                            style="margin-top: 10px;">
                         Return to Doctors Page (Local)
                     </button>
-                    <button onclick="window.open('{doctors_urls['production']}', '_blank')" 
-                            style="background-color: #6c63ff; color: white; padding: 10px 20px; border: none; border-radius: 5px; cursor: pointer; margin-top: 10px; margin-left: 10px;">
+                    <button class="btn-purple" onclick="window.open('{doctors_urls['production']}', '_blank')"
+                            style="margin-top: 10px; margin-left: 10px;">
                         Return to Doctors Page (Production)
                     </button>
                 </div>
@@ -721,16 +699,13 @@ def create_interface():
                             <li>Manually complete the appointment using the appointment ID</li>
                         </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: 10px 20px; border: none; border-radius: 5px; cursor: pointer; margin-right: 10px;">
+                            <button class="btn-green" onclick="window.open('http://127.0.0.1:600/complete_appointment_manual?appointment_id={appointment_id.strip()}', '_blank')" style="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: 10px 20px; border: none; border-radius: 5px; cursor: pointer; margin-right: 10px;">
+                            <button class="btn-purple" onclick="window.open('http://127.0.0.1:600/doctors', '_blank')" style="margin-right: 10px;">
                                 Return to Doctors Page
                             </button>
-                            <button onclick="navigator.clipboard.writeText('{appointment_id.strip()}')" 
-                                    style="background-color: #23272f; color: white; padding: 10px 20px; border: none; border-radius: 5px; cursor: pointer;">
+                            <button class="btn-dark" onclick="navigator.clipboard.writeText('{appointment_id.strip()}')">
                                 Copy Appointment ID
                             </button>
                         </div>
@@ -752,10 +727,15 @@ def create_interface():
             outputs=[end_consultation_status]
         )
 
-        # JavaScript for appointment ID auto-population (improved for Gradio 4.x and all browsers)
+        # JavaScript for appointment ID auto-population (as in working_hugging_face_code.py)
         gr.HTML("""
         <script>
-        // Try to robustly set the appointment ID textbox value, supporting Gradio 3.x/4.x and shadow DOM
+        function getUrlParameter(name) {
+            name = name.replace(/[[]/, '\\[').replace(/[\]]/, '\\]');
+            var regex = new RegExp('[\\?&]' + name + '=([^&#]*)');
+            var results = regex.exec(window.location.search);
+            return results === null ? '' : decodeURIComponent(results[1].replace(/\\+/g, ' '));
+        }
         function setAppointmentIdValue(val) {
             // Try by ID (Gradio 3.x and some 4.x)
             var input = document.getElementById('appointment_id_input');
@@ -793,29 +773,18 @@ def create_interface():
             }
             return false;
         }
-
-        function getUrlParameter(name) {
-            name = name.replace(/[[]/, '\\[').replace(/[\]]/, '\\]');
-            var regex = new RegExp('[\\?&]' + name + '=([^&#]*)');
-            var results = regex.exec(window.location.search);
-            return results === null ? '' : decodeURIComponent(results[1].replace(/\\+/g, ' '));
-        }
-
         function tryPopulateAppointmentId() {
             var appointmentId = getUrlParameter('appointment_id');
             if (appointmentId) {
                 setAppointmentIdValue(appointmentId);
             }
         }
-
-        // Try on DOMContentLoaded, on load, and after a delay to ensure Gradio is ready
         document.addEventListener('DOMContentLoaded', function() {
             setTimeout(tryPopulateAppointmentId, 400);
         });
         window.addEventListener('load', function() {
             setTimeout(tryPopulateAppointmentId, 1000);
         });
-        // Also try again after 2 seconds in case Gradio loads slowly
         setTimeout(tryPopulateAppointmentId, 2000);
         </script>
         """)
@@ -823,4 +792,4 @@ def create_interface():
     interface.launch()
 
 if __name__ == "__main__":
-    create_interface()
+    create_interface()