updated UI code ✅✅

mediSync/app.py

@@ -29,6 +29,15 @@ 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(
@@ -41,7 +50,6 @@ 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 configuration for end consultation logic
 try:
     from .config import get_flask_urls, get_doctors_page_urls, TIMEOUT_SETTINGS
@@ -153,8 +161,7 @@ class MediSyncApp:
             html_result = f"""
             <div class="medisync-card medisync-card-bg medisync-force-text">
                 <h2 class="medisync-title medisync-blue">
-                    <img src="https://cdn.jsdelivr.net/gh/saqib-ali-buriro/medivance-assets/xray_icon.png" alt="X-ray" style="height:32px;vertical-align:middle;margin-right:10px;">
-                    <span style="font-size:1.45em; font-weight:900; letter-spacing:1px; text-shadow:0 2px 8px #00bfae33;">X-ray Analysis Results</span>
+                    <b>X-ray Analysis Results</b>
                 </h2>
                 <p><strong>Primary Finding:</strong> {results.get("primary_finding", "Unknown")}</p>
                 <p><strong>Confidence:</strong> {results.get("confidence", 0):.1%}</p>
@@ -203,8 +210,7 @@ class MediSyncApp:
             html_result = f"""
             <div class="medisync-card medisync-card-bg medisync-force-text">
                 <h2 class="medisync-title medisync-green">
-                    <img src="https://cdn.jsdelivr.net/gh/saqib-ali-buriro/medivance-assets/report_icon.png" alt="Report" style="height:32px;vertical-align:middle;margin-right:10px;">
-                    <span style="font-size:1.45em; font-weight:900; letter-spacing:1px; text-shadow:0 2px 8px #28a74533;">Text Analysis Results</span>
+                    <b>Text Analysis Results</b>
                 </h2>
                 <p><strong>Severity Level:</strong> {results.get("severity", {}).get("level", "Unknown")}</p>
                 <p><strong>Severity Score:</strong> {results.get("severity", {}).get("score", 0)}/4</p>
@@ -273,8 +279,7 @@ class MediSyncApp:
             html_result = f"""
             <div class="medisync-card medisync-card-bg medisync-force-text">
                 <h2 class="medisync-title medisync-purple">
-                    <img src="https://cdn.jsdelivr.net/gh/saqib-ali-buriro/medivance-assets/multimodal_icon.png" alt="Multimodal" style="height:32px;vertical-align:middle;margin-right:10px;">
-                    <span style="font-size:1.45em; font-weight:900; letter-spacing:1px; text-shadow:0 2px 8px #6c63ff33;">Multimodal Analysis Results</span>
+                    <b>Multimodal Analysis Results</b>
                 </h2>
                 <h3>Overview</h3>
                 <p><strong>Primary Finding:</strong> {results.get("primary_finding", "Unknown")}</p>
@@ -435,9 +440,7 @@ def create_interface():
             margin-bottom: 0.7em;
             letter-spacing: 1px;
             text-shadow: 0 2px 8px #00bfae33, 0 1px 0 #fff;
-            display: flex;
-            align-items: center;
-            gap: 10px;
+            /* Remove display:flex and gap for simple bold text */
         }
         .medisync-blue { color: #00bfae; }
         .medisync-green { color: #28a745; }
@@ -503,23 +506,13 @@ def create_interface():
         html[data-theme="dark"] .medisync-force-text, html[data-theme="dark"] .medisync-force-text * {
             color: #f8fafc !important;
         }
-        /* End consultation status output force text color and background for visibility */
+        /* End consultation status output: remove color and theme, keep text black and simple */
         #end_consultation_status, #end_consultation_status * {
-            color: var(--body-text-color, #222) !important;
+            color: #000 !important;
             background: #fff !important;
-        }
-        html[data-theme="dark"] #end_consultation_status, html[data-theme="dark"] #end_consultation_status * {
-            color: #f8fafc !important;
-            background: #23272f !important;
-        }
-        /* Style for the popup/status after end consultation for visibility */
-        #end_consultation_status, #end_consultation_status * {
             font-size: 1.12rem !important;
             font-weight: 600 !important;
         }
-        html[data-theme="dark"] #end_consultation_status, html[data-theme="dark"] #end_consultation_status * {
-            color: #f8fafc !important;
-        }
         /* Style the buttons inside the end consultation status popup */
         #end_consultation_status button {
             font-size: 1rem !important;
@@ -539,22 +532,19 @@ def create_interface():
     ) as interface:
         gr.Markdown(
             """
-            <div style="display: flex; align-items: center; gap: 18px; margin-bottom: 0.5em;">
-                <img src="https://cdn.jsdelivr.net/gh/saqib-ali-buriro/medivance-assets/medivance_logo.png" alt="Medivance Logo" style="height: 48px; border-radius: 10px; background: #fff; box-shadow: 0 2px 8px 0 rgba(26,115,232,0.10);">
-                <span style="font-size: 2.4rem; font-weight: 900; color: #00bfae; letter-spacing: 1.5px; text-shadow: 0 2px 8px #00bfae33, 0 1px 0 #fff;">
-                    MediSync
-                    <img src="https://cdn.jsdelivr.net/gh/saqib-ali-buriro/medivance-assets/ai_heartbeat.png" alt="AI Heartbeat" style="height: 32px; vertical-align: middle; margin-left: 8px;">
+            <div style="margin-bottom: 0.5em;">
+                <span style="font-size: 2.4rem; font-weight: bold; letter-spacing: 1.5px;">
+                    <b>MediSync</b>
                 </span>
-                <img src="https://cdn.jsdelivr.net/gh/saqib-ali-buriro/medivance-assets/doctor_icon.png" alt="Doctor" style="height: 38px; border-radius: 8px; background: #fff; box-shadow: 0 2px 8px 0 rgba(26,115,232,0.10); margin-left: 8px;">
             </div>
-            <div style="font-size: 1.22rem; margin-bottom: 1.2em; font-weight: 600; color: #23272f;">
-                <span style="color: var(--body-text-color, #222);">AI-powered Multi-Modal Medical Analysis System</span>
+            <div style="font-size: 1.22rem; margin-bottom: 1.2em; font-weight: 600;">
+                <span>AI-powered Multi-Modal Medical Analysis System</span>
             </div>
             <div style="font-size: 1.09rem; margin-bottom: 1.2em;">
-                <span style="color: var(--body-text-color, #222);">Seamlessly analyze X-ray images and medical reports for comprehensive healthcare insights.</span>
+                <span>Seamlessly analyze X-ray images and medical reports for comprehensive healthcare insights.</span>
             </div>
             <div style="margin-bottom: 1.2em;">
-                <ul style="font-size: 1.04rem; color: var(--body-text-color, #222);">
+                <ul style="font-size: 1.04rem;">
                     <li>Upload a chest X-ray image</li>
                     <li>Enter the corresponding medical report text</li>
                     <li>Choose the analysis type: <b>Image</b>, <b>Text</b>, or <b>Multimodal</b></li>
@@ -661,8 +651,7 @@ def create_interface():
                 """
                 <div class="medisync-card medisync-card-bg medisync-force-text">
                 <h2 class="medisync-title medisync-blue">
-                    <img src="https://cdn.jsdelivr.net/gh/saqib-ali-buriro/medivance-assets/info_icon.png" alt="Info" style="height:32px;vertical-align:middle;margin-right:10px;">
-                    <span style="font-size:1.45em; font-weight:900; letter-spacing:1px; text-shadow:0 2px 8px #00bfae33;">About MediSync</span>
+                    <b>About MediSync</b>
                 </h2>
                 <p>
                 <b>MediSync</b> is an AI-powered healthcare solution that uses multi-modal analysis to provide comprehensive insights from medical images and reports.
@@ -708,17 +697,17 @@ def create_interface():
         )
 
         def handle_end_consultation(appointment_id):
-            # Always force text color and background for visibility
+            # Output status: keep text black, simple, no color or theme
             if not appointment_id or appointment_id.strip() == "":
-                return "<div class='medisync-force-text' style='color: #dc3545; background: #fff; padding: 10px; background-color: #ffe6e6; border-radius: 5px;'>Please enter your appointment ID first.</div>"
+                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())
             if result["status"] == "success":
                 doctors_urls = get_doctors_page_urls()
                 html_response = f"""
-                <div class='medisync-force-text' style='color: #28a745; background: #fff; padding: 15px; background-color: #e6ffe6; border-radius: 5px; margin: 10px 0;">
-                    <h3 style="color: #28a745;">✅ Consultation Completed Successfully!</h3>
-                    <p style="color: var(--body-text-color, #222);">✔️ {result['message']}</p>
-                    <p style="color: var(--body-text-color, #222);">Your appointment has been marked as completed.</p>
+                <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>
+                    <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;">
                         Return to Doctors Page (Local)
@@ -732,15 +721,15 @@ def create_interface():
             else:
                 if "Cannot connect to Flask app" in result['message']:
                     html_response = f"""
-                    <div class='medisync-force-text' style='color: #ff9800; background: #fff; padding: 15px; background-color: #fff3cd; border-radius: 5px; margin: 10px 0;">
-                        <h3 style="color: #ff9800;">⚠️ Consultation Ready to Complete</h3>
-                        <p style="color: var(--body-text-color, #222);">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 style="color: var(--body-text-color, #222);"><strong>Appointment ID:</strong> {appointment_id.strip()}</p>
-                        <p style="color: var(--body-text-color, #222);"><strong>Next Steps:</strong></p>
+                    <div style='color: #000; background: #fff; padding: 15px; border-radius: 5px; margin: 10px 0;'>
+                        <h3 style="color: #000;">⚠️ 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>
                         <ol>
-                            <li style="color: var(--body-text-color, #222);">Copy your appointment ID: <code>{appointment_id.strip()}</code></li>
-                            <li style="color: var(--body-text-color, #222);">Return to your Flask app (doctors page)</li>
-                            <li style="color: var(--body-text-color, #222);">Manually complete the appointment using the appointment ID</li>
+                            <li>Copy your appointment ID: <code>{appointment_id.strip()}</code></li>
+                            <li>Return to your Flask app (doctors page)</li>
+                            <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')" 
@@ -760,10 +749,10 @@ def create_interface():
                     """
                 else:
                     html_response = f"""
-                    <div class='medisync-force-text' style='color: #dc3545; background: #fff; padding: 15px; background-color: #ffe6e6; border-radius: 5px; margin: 10px 0;">
-                        <h3 style="color: #dc3545;">❌ Error Completing Consultation</h3>
-                        <p style="color: var(--body-text-color, #222);">{result['message']}</p>
-                        <p style="color: var(--body-text-color, #222);">Please try again or contact support if the problem persists.</p>
+                    <div style='color: #000; background: #fff; padding: 15px; border-radius: 5px; margin: 10px 0;'>
+                        <h3 style="color: #000;">❌ Error Completing Consultation</h3>
+                        <p>{result['message']}</p>
+                        <p>Please try again or contact support if the problem persists.</p>
                     </div>
                     """
             return html_response