updated code UI ✅✅

mediSync/app.py

@@ -8,51 +8,7 @@ import gradio as gr
 import matplotlib.pyplot as plt
 from PIL import Image
 
-# # Import configuration for end consultation logic
-# try:
-#     from .config import get_flask_urls, get_doctors_page_urls, TIMEOUT_SETTINGS
-# except ImportError:
-#     def get_flask_urls():
-#         return [
-#             "http://127.0.0.1:600/complete_appointment",
-#             "http://localhost:600/complete_appointment",
-#             "https://your-flask-app-domain.com/complete_appointment",
-#             "http://your-flask-app-ip:600/complete_appointment"
-#         ]
-#     def get_doctors_page_urls():
-#         return {
-#             "local": "http://127.0.0.1:600/doctors",
-#             "production": "https://your-flask-app-domain.com/doctors"
-#         }
-#     TIMEOUT_SETTINGS = {"connection_timeout": 5, "request_timeout": 10}
-
-# Add parent directory to path
-parent_dir = os.path.dirname(os.path.abspath(__file__))
-sys.path.append(parent_dir)
-
-# Import our modules for model and utility logic
-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__)
-
-# Ensure sample data directory exists
-os.makedirs(os.path.join(parent_dir, "data", "sample"), exist_ok=True)
-
- 
-
-# Import configuration
+# Import configuration for end consultation logic
 try:
     from .config import get_flask_urls, get_doctors_page_urls, TIMEOUT_SETTINGS
 except ImportError:
@@ -70,9 +26,20 @@ except ImportError:
         }
     TIMEOUT_SETTINGS = {"connection_timeout": 5, "request_timeout": 10}
 
+# Add parent directory to path
 parent_dir = os.path.dirname(os.path.abspath(__file__))
 sys.path.append(parent_dir)
 
+# Import our modules for model and utility logic
+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",
@@ -80,224 +47,277 @@ logging.basicConfig(
 )
 logger = logging.getLogger(__name__)
 
+# Ensure sample data directory exists
+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")
-        self._temp_files = []
         self.fusion_model = None
         self.image_model = None
         self.text_model = None
 
-    def __del__(self):
-        self.cleanup_temp_files()
-
-    def cleanup_temp_files(self):
-        for temp_file in self._temp_files:
-            try:
-                if os.path.exists(temp_file):
-                    os.remove(temp_file)
-                    self.logger.debug(f"Cleaned up temporary file: {temp_file}")
-            except Exception as e:
-                self.logger.warning(f"Failed to clean up temporary file {temp_file}: {e}")
-        self._temp_files = []
-
     def load_models(self):
-        if self.fusion_model is not None:
-            return True
+        """
+        Load models if not already loaded.
+
+        Returns:
+            bool: True if models loaded successfully, False otherwise
+        """
         try:
-            self.logger.info("Loading models...")
-            self.logger.info("Models loaded successfully (mock implementation)")
+            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 enhance_image(self, image):
-        if image is None:
-            return None
-        try:
-            enhanced_image = image
-            self.logger.info("Image enhanced successfully")
-            return enhanced_image
-        except Exception as e:
-            self.logger.error(f"Error enhancing image: {e}")
-            return image
-
     def analyze_image(self, image):
-        if image is None:
-            return None, "Please upload an image first.", None
-        if not self.load_models():
-            return image, "Error: Models not loaded properly.", None
+        """
+        Analyze a medical image.
+
+        Args:
+            image: Image file uploaded through Gradio
+
+        Returns:
+            tuple: (image, image_results_html, plot_as_html)
+        """
         try:
-            self.logger.info("Analyzing image")
-            results = {
-                "primary_finding": "Normal chest X-ray",
-                "confidence": 0.85,
-                "has_abnormality": False,
-                "predictions": [
-                    ("Normal", 0.85),
-                    ("Pneumonia", 0.10),
-                    ("Cardiomegaly", 0.05)
-                ]
-            }
-            fig = self.plot_image_prediction(
+            if image is None:
+                return None, "Please upload an image first.", None
+            if not self.load_models() or self.image_model is None:
+                return image, "Error: Models not loaded properly.", None
+
+            temp_dir = tempfile.mkdtemp()
+            temp_path = os.path.join(temp_dir, "upload.png")
+            if isinstance(image, str):
+                from shutil import copyfile
+                copyfile(image, temp_path)
+            else:
+                image.save(temp_path)
+
+            self.logger.info(f"Analyzing image: {temp_path}")
+            results = self.image_model.analyze(temp_path)
+
+            fig = plot_image_prediction(
                 image,
                 results.get("predictions", []),
-                f"Primary Finding: {results.get('primary_finding', 'Unknown')}"
+                f"Primary Finding: {results.get('primary_finding', 'Unknown')}",
             )
             plot_html = self.fig_to_html(fig)
-            plt.close(fig)
-            html_result = self.format_image_results(results)
+
+            html_result = f"""
+            <div class="medisync-card medisync-card-bg medisync-force-text">
+                <h2 class="medisync-title medisync-blue">
+                    <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>
+                <p><strong>Abnormality Detected:</strong> {"Yes" if results.get("has_abnormality", False) else "No"}</p>
+                <h3>Top Predictions:</h3>
+                <ul>
+            """
+            for label, prob in results.get("predictions", [])[:5]:
+                html_result += f"<li>{label}: {prob:.1%}</li>"
+            html_result += "</ul>"
+            explanation = self.image_model.get_explanation(results)
+            html_result += f"<h3>Analysis Explanation:</h3><p>{explanation}</p>"
+            html_result += "</div>"
             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):
-        if not text or text.strip() == "":
-            return "", "Please enter medical report text.", None
-        if not self.load_models():
-            return text, "Error: Models not loaded properly.", None
+        """
+        Analyze a medical report text.
+
+        Args:
+            text: Report text input through Gradio
+
+        Returns:
+            tuple: (text, text_results_html, entities_plot_html)
+        """
         try:
-            self.logger.info("Analyzing text")
-            results = {
-                "entities": [
-                    {"text": "chest X-ray", "type": "PROCEDURE", "confidence": 0.95},
-                    {"text": "55-year-old male", "type": "PATIENT", "confidence": 0.90},
-                    {"text": "cough and fever", "type": "SYMPTOM", "confidence": 0.88}
-                ],
-                "sentiment": "neutral",
-                "key_findings": ["Normal heart size", "Clear lungs", "8mm nodular opacity"]
-            }
-            html_result = self.format_text_results(results)
-            plot_html = self.create_entity_visualization(results["entities"])
-            return text, html_result, plot_html
+            if not text or text.strip() == "":
+                return "", "Please enter medical report text.", None
+            if not self.load_models() or self.text_model is None:
+                return text, "Error: Models not loaded properly.", None
+            if not text or len(text.strip()) < 10:
+                return (
+                    text,
+                    "Error: Please enter a valid medical report text (at least 10 characters).",
+                    None,
+                )
+            normalized_text = normalize_report_text(text)
+            self.logger.info("Analyzing medical report text")
+            results = self.text_model.analyze(normalized_text)
+            entities = results.get("entities", {})
+            fig = plot_report_entities(normalized_text, entities)
+            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">
+                    <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>
+                <p><strong>Confidence:</strong> {results.get("severity", {}).get("confidence", 0):.1%}</p>
+                <h3>Key Findings:</h3>
+                <ul>
+            """
+            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>"
+            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>"
+            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></div>"
+            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):
-        if image is None and (not text or text.strip() == ""):
-            return "Please provide either an image or text for analysis.", None
-        if not self.load_models():
-            return "Error: Models not loaded properly.", None
+        """
+        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:
+            if not self.load_models() or self.fusion_model is None:
+                return "Error: Models not loaded properly.", None
+            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,
+                )
+            temp_dir = tempfile.mkdtemp()
+            temp_path = os.path.join(temp_dir, "upload.png")
+            if isinstance(image, str):
+                from shutil import copyfile
+                copyfile(image, temp_path)
+            else:
+                image.save(temp_path)
+            normalized_text = normalize_report_text(text)
             self.logger.info("Performing multimodal analysis")
-            results = {
-                "combined_finding": "Normal chest X-ray with minor findings",
-                "confidence": 0.92,
-                "image_contribution": "Normal cardiac silhouette and clear lung fields",
-                "text_contribution": "Clinical history supports normal findings",
-                "recommendations": [
-                    "Follow-up CT for the 8mm nodular opacity",
-                    "Monitor for any changes in symptoms"
-                ]
-            }
-            html_result = self.format_multimodal_results(results)
-            plot_html = self.create_multimodal_visualization(results)
+            results = self.fusion_model.analyze(temp_path, normalized_text)
+            fig = plot_multimodal_results(results, image, text)
+            plot_html = self.fig_to_html(fig)
+            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">
+                    <b>Multimodal Analysis Results</b>
+                </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>
+            """
+            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>"
+            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>"
+            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>
+                <h3>Analysis Explanation:</h3>
+                <p>{explanation}</p>
+            </div>
+            """
             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 format_image_results(self, results):
-        html_result = f"""
-        <div class="medisync-card medisync-card-bg">
-            <h2 class="medisync-title medisync-blue">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>
-        """
-        for label, prob in results.get("predictions", [])[:5]:
-            html_result += f"<li>{label}: {prob:.1%}</li>"
-        html_result += "</ul></div>"
-        return html_result
-
-    def format_text_results(self, results):
-        html_result = f"""
-        <div class="medisync-card medisync-card-bg">
-            <h2 class="medisync-title medisync-green">Text Analysis Results</h2>
-            <p><strong>Sentiment:</strong> {results.get("sentiment", "Unknown").title()}</p>
-            <h3>Key Findings:</h3>
-            <ul>
+    def enhance_image(self, image):
         """
-        for finding in results.get("key_findings", []):
-            html_result += f"<li>{finding}</li>"
-        html_result += "</ul>"
-        html_result += "<h3>Extracted Entities:</h3><ul>"
-        for entity in results.get("entities", [])[:5]:
-            html_result += f"<li><strong>{entity['text']}</strong> ({entity['type']}) - {entity['confidence']:.1%}</li>"
-        html_result += "</ul></div>"
-        return html_result
-
-    def format_multimodal_results(self, results):
-        html_result = f"""
-        <div class="medisync-card medisync-card-bg">
-            <h2 class="medisync-title medisync-purple">Multimodal Analysis Results</h2>
-            <p><strong>Combined Finding:</strong> {results.get("combined_finding", "Unknown")}</p>
-            <p><strong>Overall Confidence:</strong> {results.get("confidence", 0):.1%}</p>
-            <h3>Image Contribution:</h3>
-            <p>{results.get("image_contribution", "No image analysis available")}</p>
-            <h3>Text Contribution:</h3>
-            <p>{results.get("text_contribution", "No text analysis available")}</p>
-            <h3>Recommendations:</h3>
-            <ul>
+        Enhance X-ray image contrast.
+
+        Args:
+            image: Image file uploaded through Gradio
+
+        Returns:
+            PIL.Image: Enhanced image
         """
-        for rec in results.get("recommendations", []):
-            html_result += f"<li>{rec}</li>"
-        html_result += "</ul></div>"
-        return html_result
-
-    def plot_image_prediction(self, image, predictions, title):
-        fig, ax = plt.subplots(figsize=(10, 6))
-        ax.imshow(image)
-        ax.set_title(title, fontsize=14, fontweight='bold', color='#007bff')
-        ax.axis('off')
-        return fig
-
-    def create_entity_visualization(self, entities):
-        if not entities:
-            return "<p>No entities found in text.</p>"
-        fig, ax = plt.subplots(figsize=(10, 6))
-        entity_types = {}
-        for entity in entities:
-            entity_type = entity['type']
-            if entity_type not in entity_types:
-                entity_types[entity_type] = 0
-            entity_types[entity_type] += 1
-        if entity_types:
-            ax.bar(entity_types.keys(), entity_types.values(), color='#00bfae')
-            ax.set_title('Entity Types Found in Text', fontsize=14, fontweight='bold', color='#00bfae')
-            ax.set_ylabel('Count', color='#00bfae')
-            plt.xticks(rotation=45, color='#222')
-            plt.yticks(color='#222')
-        return self.fig_to_html(fig)
-
-    def create_multimodal_visualization(self, results):
-        fig, (ax1, ax2) = plt.subplots(1, 2, figsize=(15, 6))
-        confidence = results.get("confidence", 0)
-        ax1.pie([confidence, 1-confidence], labels=['Confidence', 'Uncertainty'],
-                colors=['#00bfae', '#ff7675'], autopct='%1.1f%%', textprops={'color': '#222'})
-        ax1.set_title('Analysis Confidence', fontweight='bold', color='#00bfae')
-        recommendations = results.get("recommendations", [])
-        ax2.bar(['Recommendations'], [len(recommendations)], color='#6c63ff')
-        ax2.set_title('Number of Recommendations', fontweight='bold', color='#6c63ff')
-        ax2.set_ylabel('Count', color='#6c63ff')
-        plt.tight_layout()
-        return self.fig_to_html(fig)
+        try:
+            if image is None:
+                return None
+            temp_dir = tempfile.mkdtemp()
+            temp_path = os.path.join(temp_dir, "upload.png")
+            if isinstance(image, str):
+                from shutil import copyfile
+                copyfile(image, temp_path)
+            else:
+                image.save(temp_path)
+            self.logger.info(f"Enhancing image: {temp_path}")
+            output_path = os.path.join(temp_dir, "enhanced.png")
+            enhance_xray_image(temp_path, output_path)
+            enhanced = Image.open(output_path)
+            return enhanced
+        except Exception as e:
+            self.logger.error(f"Error enhancing image: {e}")
+            return image
 
     def fig_to_html(self, fig):
-        import io
-        import base64
-        buf = io.BytesIO()
-        fig.savefig(buf, format='png', bbox_inches='tight', dpi=100, facecolor=fig.get_facecolor())
-        buf.seek(0)
-        img_str = base64.b64encode(buf.read()).decode()
-        buf.close()
-        return f'<img src="data:image/png;base64,{img_str}" style="max-width: 100%; height: auto; background: transparent;"/>'
+        """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", dpi=100, facecolor=fig.get_facecolor())
+            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}" style="max-width: 100%; height: auto; background: transparent;"/>'
+        except Exception as e:
+            self.logger.error(f"Error converting figure to HTML: {e}")
+            return "<p>Error displaying visualization.</p>"
 
 def complete_appointment(appointment_id):
     try:
@@ -332,6 +352,7 @@ def complete_appointment(appointment_id):
         return {"status": "error", "message": f"Error: {str(e)}"}
 
 def create_interface():
+    import urllib.parse
     app = MediSyncApp()
     example_report = """
     CHEST X-RAY EXAMINATION
@@ -357,7 +378,7 @@ def create_interface():
 
     with gr.Blocks(
         title="MediSync: Multi-Modal Medical Analysis System",
-        theme=gr.themes.Default(),  # Use Default for HuggingFace dark/light support
+        theme=gr.themes.Default(),
         css="""
         /* Modern neumorphic card style for all result containers */
         .medisync-card {
@@ -373,8 +394,12 @@ 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;
+            /* Remove display:flex and gap for simple bold text */
         }
         .medisync-blue { color: #00bfae; }
         .medisync-green { color: #28a745; }
@@ -389,7 +414,10 @@ def create_interface():
         .gr-button, .end-consultation-btn {
             border-radius: 8px !important;
             font-weight: 600 !important;
-            font-size: 1.08rem !important;
+            font-size: 1rem !important;
+            padding: 8px 18px !important;
+            min-width: 120px !important;
+            min-height: 38px !important;
             transition: background 0.2s, color 0.2s;
         }
         .end-consultation-btn {
@@ -397,6 +425,10 @@ def create_interface():
             border: none !important;
             color: #fff !important;
             box-shadow: 0 2px 8px 0 rgba(220,53,69,0.10);
+            font-size: 1.05rem !important;
+            padding: 10px 24px !important;
+            min-width: 160px !important;
+            min-height: 40px !important;
         }
         .end-consultation-btn:hover {
             background: linear-gradient(90deg, #c82333 60%, #ff7675 100%) !important;
@@ -404,14 +436,17 @@ 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 {
+        html[data-theme="dark"] .medisync-card-bg,
+        html[data-theme="dark"] .medisync-card-bg.medisync-force-text {
             background: #23272f !important;
             color: #f8fafc !important;
         }
         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; }
@@ -423,22 +458,72 @@ def create_interface():
         html[data-theme="dark"] label, html[data-theme="dark"] .gr-label, html[data-theme="dark"] .gr-text, html[data-theme="dark"] .gr-html, html[data-theme="dark"] .gr-markdown {
             color: #f8fafc !important;
         }
+        /* Force all text in medisync-card and status outputs to be visible in all themes */
+        .medisync-force-text, .medisync-force-text * {
+            color: var(--body-text-color, #222) !important;
+        }
+        html[data-theme="dark"] .medisync-force-text, html[data-theme="dark"] .medisync-force-text * {
+            color: #f8fafc !important;
+        }
+        /* End consultation status output: remove color and theme, keep text black and simple */
+        #end_consultation_status, #end_consultation_status * {
+            color: #000 !important;
+            background: #fff !important;
+            font-size: 1.12rem !important;
+            font-weight: 600 !important;
+        }
+        /* Style the buttons inside the end consultation status popup */
+        #end_consultation_status button {
+            font-size: 1rem !important;
+            font-weight: 600 !important;
+            border-radius: 6px !important;
+            padding: 8px 18px !important;
+            margin-top: 8px !important;
+            margin-bottom: 4px !important;
+            min-width: 120px !important;
+            min-height: 36px !important;
+            box-shadow: 0 1.5px 4px 0 rgba(0,191,174,0.08);
+        }
+        #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(
             """
-            <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="margin-bottom: 0.5em;">
+                <span style="font-size: 2.4rem; font-weight: bold; letter-spacing: 1.5px;">
+                    <b>MediSync</b>
+                </span>
             </div>
-            <div style="font-size: 1.18rem; margin-bottom: 1.2em;">
-                <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.05rem; 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 style="font-size: 1.09rem; margin-bottom: 1.2em;">
+                <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.01rem; 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>
@@ -448,24 +533,14 @@ def create_interface():
             """,
             elem_id="medisync-header"
         )
-
+        
+        # --- BRUTAL FIX: Always set appointment id from URL using JS, forcibly, and keep it in sync ---
         with gr.Row():
-            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]
-            except:
-                default_appointment_id = ""
             appointment_id_input = gr.Textbox(
                 label="Appointment ID",
                 placeholder="Enter your appointment ID here...",
                 info="This will be automatically populated if you came from the doctors page",
-                value=default_appointment_id,
+                value="",
                 elem_id="appointment_id_input"
             )
 
@@ -473,7 +548,7 @@ def create_interface():
             with gr.Row():
                 with gr.Column():
                     multi_img_input = gr.Image(label="Upload X-ray Image", type="pil", elem_id="multi_img_input")
-                    multi_img_enhance = gr.Button("Enhance Image", icon="✨")
+                    multi_img_enhance = gr.Button("Enhance Image")
                     multi_text_input = gr.Textbox(
                         label="Enter Medical Report Text",
                         placeholder="Enter the radiologist's report text here...",
@@ -481,7 +556,7 @@ def create_interface():
                         value=example_report if sample_image_path is None else None,
                         elem_id="multi_text_input"
                     )
-                    multi_analyze_btn = gr.Button("Analyze Image & Text", variant="primary", icon="🔎")
+                    multi_analyze_btn = gr.Button("Analyze Image & Text", variant="primary")
                 with gr.Column():
                     multi_results = gr.HTML(label="Analysis Results", elem_id="multi_results")
                     multi_plot = gr.HTML(label="Visualization", elem_id="multi_plot")
@@ -496,8 +571,8 @@ def create_interface():
             with gr.Row():
                 with gr.Column():
                     img_input = gr.Image(label="Upload X-ray Image", type="pil", elem_id="img_input")
-                    img_enhance = gr.Button("Enhance Image", icon="✨")
-                    img_analyze_btn = gr.Button("Analyze Image", variant="primary", icon="🔎")
+                    img_enhance = gr.Button("Enhance Image")
+                    img_analyze_btn = gr.Button("Analyze Image", variant="primary")
                 with gr.Column():
                     img_output = gr.Image(label="Processed Image", elem_id="img_output")
                     img_results = gr.HTML(label="Analysis Results", elem_id="img_results")
@@ -519,7 +594,7 @@ def create_interface():
                         value=example_report,
                         elem_id="text_input"
                     )
-                    text_analyze_btn = gr.Button("Analyze Text", variant="primary", icon="🔎")
+                    text_analyze_btn = gr.Button("Analyze Text", variant="primary")
                 with gr.Column():
                     text_output = gr.Textbox(label="Processed Text", elem_id="text_output")
                     text_results = gr.HTML(label="Analysis Results", elem_id="text_results")
@@ -536,16 +611,17 @@ def create_interface():
                     "End Consultation",
                     variant="stop",
                     size="lg",
-                    elem_classes=["end-consultation-btn"],
-                    icon="🛑"
+                    elem_classes=["end-consultation-btn"]
                 )
                 end_consultation_status = gr.HTML(label="Status", elem_id="end_consultation_status")
 
         with gr.Tab("ℹ️ About"):
             gr.Markdown(
                 """
-                <div class="medisync-card medisync-card-bg">
-                <h2 class="medisync-title medisync-blue">About MediSync</h2>
+                <div class="medisync-card medisync-card-bg medisync-force-text">
+                <h2 class="medisync-title medisync-blue">
+                    <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.
                 </p>
@@ -590,22 +666,23 @@ def create_interface():
         )
 
         def handle_end_consultation(appointment_id):
+            # 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: #dc3545; 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 style='color: #28a745; padding: 15px; background-color: #e6ffe6; border-radius: 5px; margin: 10px 0;'>
-                    <h3>✅ Consultation Completed Successfully!</h3>
-                    <p>{result['message']}</p>
+                <div style='color: #000; background: #fff; padding: 15px; border-radius: 5px; margin: 10px 0;'>
+                    <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>
@@ -613,8 +690,8 @@ def create_interface():
             else:
                 if "Cannot connect to Flask app" in result['message']:
                     html_response = f"""
-                    <div style='color: #ff9800; padding: 15px; background-color: #fff3cd; border-radius: 5px; margin: 10px 0;'>
-                        <h3>⚠️ Consultation Ready to Complete</h3>
+                    <div style='color: #000; background: #fff; padding: 15px; border-radius: 5px; margin: 10px 0;'>
+                        <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>
@@ -624,16 +701,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>
@@ -641,8 +715,8 @@ def create_interface():
                     """
                 else:
                     html_response = f"""
-                    <div style='color: #dc3545; padding: 15px; background-color: #ffe6e6; border-radius: 5px; margin: 10px 0;'>
-                        <h3>❌ Error Completing Consultation</h3>
+                    <div style='color: #000; background: #fff; padding: 15px; border-radius: 5px; margin: 10px 0;'>
+                        <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>
@@ -655,38 +729,36 @@ def create_interface():
             outputs=[end_consultation_status]
         )
 
-        # JavaScript for appointment ID auto-population
+        # --- BRUTAL JS: forcibly set the appointment id textbox from URL param, every 500ms, forever ---
         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() {
+        function setAppointmentIdBrutal() {
             var appointmentId = getUrlParameter('appointment_id');
-            if (appointmentId) {
-                var input = document.getElementById('appointment_id_input');
-                if (input) {
-                    input.value = appointmentId;
-                    var event = new Event('input', { bubbles: true });
-                    input.dispatchEvent(event);
-                }
+            var input = document.getElementById('appointment_id_input');
+            if (input && appointmentId && input.value !== appointmentId) {
+                input.value = appointmentId;
+                // For Gradio >=3.41, fire input event and change event
+                var event = new Event('input', { bubbles: true });
+                input.dispatchEvent(event);
+                var event2 = new Event('change', { bubbles: true });
+                input.dispatchEvent(event2);
             }
         }
-        document.addEventListener('DOMContentLoaded', function() {
-            setTimeout(populateAppointmentId, 800);
-        });
-        window.addEventListener('load', function() {
-            setTimeout(populateAppointmentId, 1200);
-        });
+        // Run every 500ms, forever, to brutally force the value
+        setInterval(setAppointmentIdBrutal, 500);
+        // Also run immediately on load
+        window.addEventListener('DOMContentLoaded', setAppointmentIdBrutal);
+        window.addEventListener('load', setAppointmentIdBrutal);
         </script>
         """)
 
     interface.launch()
 
 if __name__ == "__main__":
-    create_interface()
-
-# Some tests on this code 
+    create_interface()