updated the UI code ✅✅

mediSync/app.py

@@ -3,391 +3,6 @@ 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)
-
-
-# class MediSyncApp:
-#     """
-#     Main application class for the MediSync multi-modal medical analysis system.
-#     """
-
-#     def __init__(self):
-#         """Initialize the application and load models."""
-#         self.logger = logging.getLogger(__name__)
-#         self.logger.info("Initializing MediSync application")
-
-#         # Initialize models with None for lazy loading
-#         self.fusion_model = None
-#         self.image_model = None
-#         self.text_model = None
-
-#     def load_models(self):
-#         """
-#         Load models if not already loaded.
-
-#         Returns:
-#             bool: True if models loaded successfully, False otherwise
-#         """
-#         try:
-#             if self.fusion_model is None:
-#                 self.logger.info("Loading models...")
-#                 self.fusion_model = MultimodalFusion()
-#                 self.image_model = self.fusion_model.image_analyzer
-#                 self.text_model = self.fusion_model.text_analyzer
-#                 self.logger.info("Models loaded successfully")
-#             return True
-
-#         except Exception as e:
-#             self.logger.error(f"Error loading models: {e}")
-#             return False
-
-#     def analyze_image(self, image):
-#         """
-#         Analyze a medical image.
-
-#         Args:
-#             image: Image file uploaded through Gradio
-
-#         Returns:
-#             tuple: (image, image_results_html, plot_as_html)
-#         """
-#         try:
-#             # Ensure models are loaded
-#             if not self.load_models() or self.image_model is None:
-#                 return image, "Error: Models not loaded properly.", None
-
-#             # Save uploaded image to a temporary file
-#             temp_dir = tempfile.mkdtemp()
-#             temp_path = os.path.join(temp_dir, "upload.png")
-
-#             if isinstance(image, str):
-#                 # Copy the file if it's a path
-#                 from shutil import copyfile
-
-#                 copyfile(image, temp_path)
-#             else:
-#                 # Save if it's a Gradio UploadButton image
-#                 image.save(temp_path)
-
-#             # Run image analysis
-#             self.logger.info(f"Analyzing image: {temp_path}")
-#             results = self.image_model.analyze(temp_path)
-
-#             # Create visualization
-#             fig = plot_image_prediction(
-#                 image,
-#                 results.get("predictions", []),
-#                 f"Primary Finding: {results.get('primary_finding', 'Unknown')}",
-#             )
-
-#             # Convert to HTML for display
-#             plot_html = self.fig_to_html(fig)
-
-#             # Format results as HTML
-#             html_result = f"""
-#             <h2>X-ray Analysis Results</h2>
-#             <p><strong>Primary Finding:</strong> {results.get("primary_finding", "Unknown")}</p>
-#             <p><strong>Confidence:</strong> {results.get("confidence", 0):.1%}</p>
-#             <p><strong>Abnormality Detected:</strong> {"Yes" if results.get("has_abnormality", False) else "No"}</p>
-            
-#             <h3>Top Predictions:</h3>
-#             <ul>
-#             """
-
-#             # Add top 5 predictions
-#             for label, prob in results.get("predictions", [])[:5]:
-#                 html_result += f"<li>{label}: {prob:.1%}</li>"
-
-#             html_result += "</ul>"
-
-#             # Add explanation
-#             explanation = self.image_model.get_explanation(results)
-#             html_result += f"<h3>Analysis Explanation:</h3><p>{explanation}</p>"
-
-#             return image, html_result, plot_html
-
-#         except Exception as e:
-#             self.logger.error(f"Error in image analysis: {e}")
-#             return image, f"Error analyzing image: {str(e)}", None
-
-#     def analyze_text(self, text):
-#         """
-#         Analyze a medical report text.
-
-#         Args:
-#             text: Report text input through Gradio
-
-#         Returns:
-#             tuple: (text, text_results_html, entities_plot_html)
-#         """
-#         try:
-#             # Ensure models are loaded
-#             if not self.load_models() or self.text_model is None:
-#                 return text, "Error: Models not loaded properly.", None
-
-#             # Check for empty text
-#             if not text or len(text.strip()) < 10:
-#                 return (
-#                     text,
-#                     "Error: Please enter a valid medical report text (at least 10 characters).",
-#                     None,
-#                 )
-
-#             # Normalize text
-#             normalized_text = normalize_report_text(text)
-
-#             # Run text analysis
-#             self.logger.info("Analyzing medical report text")
-#             results = self.text_model.analyze(normalized_text)
-
-#             # Get entities and create visualization
-#             entities = results.get("entities", {})
-#             fig = plot_report_entities(normalized_text, entities)
-
-#             # Convert to HTML for display
-#             entities_plot_html = self.fig_to_html(fig)
-
-#             # Format results as HTML
-#             html_result = f"""
-#             <h2>Medical Report Analysis Results</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>
-#             <p><strong>Confidence:</strong> {results.get("severity", {}).get("confidence", 0):.1%}</p>
-            
-#             <h3>Key Findings:</h3>
-#             <ul>
-#             """
-
-#             # Add findings
-#             findings = results.get("findings", [])
-#             if findings:
-#                 for finding in findings:
-#                     html_result += f"<li>{finding}</li>"
-#             else:
-#                 html_result += "<li>No specific findings detailed.</li>"
-
-#             html_result += "</ul>"
-
-#             # Add entities
-#             html_result += "<h3>Extracted Medical Entities:</h3>"
-
-#             for category, items in entities.items():
-#                 if items:
-#                     html_result += f"<p><strong>{category.capitalize()}:</strong> {', '.join(items)}</p>"
-
-#             # Add follow-up recommendations
-#             html_result += "<h3>Follow-up Recommendations:</h3><ul>"
-#             followups = results.get("followup_recommendations", [])
-
-#             if followups:
-#                 for rec in followups:
-#                     html_result += f"<li>{rec}</li>"
-#             else:
-#                 html_result += "<li>No specific follow-up recommendations.</li>"
-
-#             html_result += "</ul>"
-
-#             return text, html_result, entities_plot_html
-
-#         except Exception as e:
-#             self.logger.error(f"Error in text analysis: {e}")
-#             return text, f"Error analyzing text: {str(e)}", None
-
-#     def analyze_multimodal(self, image, text):
-#         """
-#         Perform multimodal analysis of image and text.
-
-#         Args:
-#             image: Image file uploaded through Gradio
-#             text: Report text input through Gradio
-
-#         Returns:
-#             tuple: (results_html, multimodal_plot_html)
-#         """
-#         try:
-#             # Ensure models are loaded
-#             if not self.load_models() or self.fusion_model is None:
-#                 return "Error: Models not loaded properly.", None
-
-#             # Check for empty inputs
-#             if image is None:
-#                 return "Error: Please upload an X-ray image for analysis.", None
-
-#             if not text or len(text.strip()) < 10:
-#                 return (
-#                     "Error: Please enter a valid medical report text (at least 10 characters).",
-#                     None,
-#                 )
-
-#             # Save uploaded image to a temporary file
-#             temp_dir = tempfile.mkdtemp()
-#             temp_path = os.path.join(temp_dir, "upload.png")
-
-#             if isinstance(image, str):
-#                 # Copy the file if it's a path
-#                 from shutil import copyfile
-
-#                 copyfile(image, temp_path)
-#             else:
-#                 # Save if it's a Gradio UploadButton image
-#                 image.save(temp_path)
-
-#             # Normalize text
-#             normalized_text = normalize_report_text(text)
-
-#             # Run multimodal analysis
-#             self.logger.info("Performing multimodal analysis")
-#             results = self.fusion_model.analyze(temp_path, normalized_text)
-
-#             # Create visualization
-#             fig = plot_multimodal_results(results, image, text)
-
-#             # Convert to HTML for display
-#             plot_html = self.fig_to_html(fig)
-
-#             # Generate explanation
-#             explanation = self.fusion_model.get_explanation(results)
-
-#             # Format results as HTML
-#             html_result = f"""
-#             <h2>Multimodal Medical Analysis Results</h2>
-            
-#             <h3>Overview</h3>
-#             <p><strong>Primary Finding:</strong> {results.get("primary_finding", "Unknown")}</p>
-#             <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>
-#             <p><strong>Agreement Score:</strong> {results.get("agreement_score", 0):.0%}</p>
-            
-#             <h3>Detailed Findings</h3>
-#             <ul>
-#             """
-
-#             # Add findings
-#             findings = results.get("findings", [])
-#             if findings:
-#                 for finding in findings:
-#                     html_result += f"<li>{finding}</li>"
-#             else:
-#                 html_result += "<li>No specific findings detailed.</li>"
-
-#             html_result += "</ul>"
-
-#             # Add follow-up recommendations
-#             html_result += "<h3>Recommended Follow-up</h3><ul>"
-#             followups = results.get("followup_recommendations", [])
-
-#             if followups:
-#                 for rec in followups:
-#                     html_result += f"<li>{rec}</li>"
-#             else:
-#                 html_result += (
-#                     "<li>No specific follow-up recommendations provided.</li>"
-#                 )
-
-#             html_result += "</ul>"
-
-#             # Add confidence note
-#             confidence = results.get("severity", {}).get("confidence", 0)
-#             html_result += f"""
-#             <p><em>Note: This analysis has a confidence level of {confidence:.0%}. 
-#             Please consult with healthcare professionals for official diagnosis.</em></p>
-#             """
-
-#             return html_result, plot_html
-
-#         except Exception as e:
-#             self.logger.error(f"Error in multimodal analysis: {e}")
-#             return f"Error in multimodal analysis: {str(e)}", None
-
-#     def enhance_image(self, image):
-#         """
-#         Enhance X-ray image contrast.
-
-#         Args:
-#             image: Image file uploaded through Gradio
-
-#         Returns:
-#             PIL.Image: Enhanced image
-#         """
-#         try:
-#             if image is None:
-#                 return None
-
-#             # Save uploaded image to a temporary file
-#             temp_dir = tempfile.mkdtemp()
-#             temp_path = os.path.join(temp_dir, "upload.png")
-
-#             if isinstance(image, str):
-#                 # Copy the file if it's a path
-#                 from shutil import copyfile
-
-#                 copyfile(image, temp_path)
-#             else:
-#                 # Save if it's a Gradio UploadButton image
-#                 image.save(temp_path)
-
-#             # Enhance image
-#             self.logger.info(f"Enhancing image: {temp_path}")
-#             output_path = os.path.join(temp_dir, "enhanced.png")
-#             enhance_xray_image(temp_path, output_path)
-
-#             # Load enhanced image
-#             enhanced = Image.open(output_path)
-#             return enhanced
-
-#         except Exception as e:
-#             self.logger.error(f"Error enhancing image: {e}")
-#             return image  # Return original image on error
-
-#     def fig_to_html(self, fig):
-#         """Convert matplotlib figure to HTML for display in Gradio."""
-#         try:
-#             import base64
-#             import io
-
-#             buf = io.BytesIO()
-#             fig.savefig(buf, format="png", bbox_inches="tight")
-#             buf.seek(0)
-#             img_str = base64.b64encode(buf.read()).decode("utf-8")
-#             plt.close(fig)
-
-#             return f'<img src="data:image/png;base64,{img_str}" alt="Analysis Plot">'
-
-#         except Exception as e:
-#             self.logger.error(f"Error converting figure to HTML: {e}")
-#             return "<p>Error displaying visualization.</p>"
-import logging
-import os
-import sys
-import tempfile
-from pathlib import Path
 import requests
 import gradio as gr
 import matplotlib.pyplot as plt
@@ -503,7 +118,10 @@ class MediSyncApp:
 
             html_result = f"""
             <div class="medisync-card medisync-card-bg medisync-force-text">
-                <h2 class="medisync-title medisync-blue">X-ray Analysis Results</h2>
+                <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>
+                </h2>
                 <p><strong>Primary Finding:</strong> {results.get("primary_finding", "Unknown")}</p>
                 <p><strong>Confidence:</strong> {results.get("confidence", 0):.1%}</p>
                 <p><strong>Abnormality Detected:</strong> {"Yes" if results.get("has_abnormality", False) else "No"}</p>
@@ -550,7 +168,10 @@ class MediSyncApp:
             entities_plot_html = self.fig_to_html(fig)
             html_result = f"""
             <div class="medisync-card medisync-card-bg medisync-force-text">
-                <h2 class="medisync-title medisync-green">Text Analysis Results</h2>
+                <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>
+                </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>
                 <p><strong>Confidence:</strong> {results.get("severity", {}).get("confidence", 0):.1%}</p>
@@ -617,7 +238,10 @@ class MediSyncApp:
             explanation = self.fusion_model.get_explanation(results)
             html_result = f"""
             <div class="medisync-card medisync-card-bg medisync-force-text">
-                <h2 class="medisync-title medisync-purple">Multimodal Analysis Results</h2>
+                <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>
+                </h2>
                 <h3>Overview</h3>
                 <p><strong>Primary Finding:</strong> {results.get("primary_finding", "Unknown")}</p>
                 <p><strong>Severity Level:</strong> {results.get("severity", {}).get("level", "Unknown")}</p>
@@ -772,8 +396,14 @@ def create_interface():
             color: var(--body-text-color, #222);
         }
         .medisync-title {
-            font-weight: 700;
+            font-weight: 900;
+            font-size: 1.45em;
             margin-bottom: 0.7em;
+            letter-spacing: 1px;
+            text-shadow: 0 2px 8px #00bfae33, 0 1px 0 #fff;
+            display: flex;
+            align-items: center;
+            gap: 10px;
         }
         .medisync-blue { color: #00bfae; }
         .medisync-green { color: #28a745; }
@@ -810,6 +440,7 @@ def create_interface():
         /* Responsive tweaks */
         @media (max-width: 900px) {
             .medisync-card { padding: 16px 8px 12px 8px; }
+            .medisync-title { font-size: 1.1em; }
         }
         /* Ensure text is visible in dark mode */
         html[data-theme="dark"] .medisync-card-bg,
@@ -819,6 +450,7 @@ def create_interface():
         }
         html[data-theme="dark"] .medisync-title {
             color: #00bfae !important;
+            text-shadow: 0 2px 8px #00bfae33, 0 1px 0 #23272f;
         }
         html[data-theme="dark"] .medisync-blue { color: #00bfae !important; }
         html[data-theme="dark"] .medisync-green { color: #00e676 !important; }
@@ -837,17 +469,19 @@ 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 */
+        /* End consultation status output force text color and background for visibility */
         #end_consultation_status, #end_consultation_status * {
             color: var(--body-text-color, #222) !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.08rem !important;
-            font-weight: 500 !important;
+            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;
@@ -871,18 +505,22 @@ def create_interface():
     ) as interface:
         gr.Markdown(
             """
-            <div style="display: flex; align-items: center; gap: 16px; margin-bottom: 0.5em;">
-                <img src="https://cdn.jsdelivr.net/gh/saqib-ali-buriro/medivance-assets/medivance_logo.png" alt="Medivance Logo" style="height: 38px; border-radius: 8px; background: #fff; box-shadow: 0 2px 8px 0 rgba(26,115,232,0.10);">
-                <span style="font-size: 2.1rem; font-weight: 700; color: #00bfae;">MediSync</span>
+            <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;">
+                </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.18rem; margin-bottom: 1.2em;">
+            <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>
-            <div style="font-size: 1.05rem; margin-bottom: 1.2em;">
+            <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>
             </div>
             <div style="margin-bottom: 1.2em;">
-                <ul style="font-size: 1.01rem; color: var(--body-text-color, #222);">
+                <ul style="font-size: 1.04rem; color: var(--body-text-color, #222);">
                     <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>
@@ -988,7 +626,10 @@ def create_interface():
             gr.Markdown(
                 """
                 <div class="medisync-card medisync-card-bg medisync-force-text">
-                <h2 class="medisync-title medisync-blue">About MediSync</h2>
+                <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>
+                </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.
                 </p>
@@ -1033,15 +674,16 @@ def create_interface():
         )
 
         def handle_end_consultation(appointment_id):
+            # Always force text color and background for visibility
             if not appointment_id or appointment_id.strip() == "":
-                return "<div class='medisync-force-text' style='color: #dc3545; padding: 10px; background-color: #ffe6e6; border-radius: 5px;'>Please enter your appointment ID first.</div>"
+                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>"
             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; padding: 15px; background-color: #e6ffe6; border-radius: 5px; margin: 10px 0;">
+                <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);">✔️ {result['message']}</p>
                     <p style="color: var(--body-text-color, #222);">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;">
@@ -1056,7 +698,7 @@ def create_interface():
             else:
                 if "Cannot connect to Flask app" in result['message']:
                     html_response = f"""
-                    <div class='medisync-force-text' style='color: #ff9800; padding: 15px; background-color: #fff3cd; border-radius: 5px; margin: 10px 0;">
+                    <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>
@@ -1084,7 +726,7 @@ def create_interface():
                     """
                 else:
                     html_response = f"""
-                    <div class='medisync-force-text' style='color: #dc3545; padding: 15px; background-color: #ffe6e6; border-radius: 5px; margin: 10px 0;">
+                    <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>