Update src/ui_components_original.py

src/ui_components_original.py

@@ -11,6 +11,28 @@ import html # Import the html module for escaping
 
 from .patient_history import PatientHistoryManager, ReportGenerator
 
+def pil_to_base64(pil_image):
+    """Convert PIL Image to base64 data URL"""
+    import io
+    import base64
+    from PIL import Image
+    
+    if pil_image is None:
+        return None
+        
+    try:
+        # Convert image to RGB if it's not already
+        if pil_image.mode != 'RGB':
+            pil_image = pil_image.convert('RGB')
+            
+        buffer = io.BytesIO()
+        pil_image.save(buffer, format='PNG')
+        img_str = base64.b64encode(buffer.getvalue()).decode()
+        return f"data:image/png;base64,{img_str}"
+    except Exception as e:
+        logging.error(f"Error converting PIL image to base64: {e}")
+        return None
+
 class UIComponents:
     def __init__(self, auth_manager, database_manager, wound_analyzer):
         self.auth_manager = auth_manager
@@ -117,7 +139,6 @@ class UIComponents:
             logging.error(f"Error getting organizations: {e}")
             return ["Default Hospital - Location"]
  
-    
     def get_custom_css(self):
         return """
 /* =================== ORIGINAL SMARTHEAL CSS =================== */
@@ -130,6 +151,7 @@ body, html {
     color: #1A202C !important;
     line-height: 1.6 !important;
 }
+
 /* Professional Header with Logo */
 .medical-header {
     background: linear-gradient(135deg, #3182ce 0%, #2c5aa0 100%) !important;
@@ -145,6 +167,7 @@ body, html {
     position: relative !important;
     overflow: hidden !important;
 }
+
 .medical-header::before {
     content: '' !important;
     position: absolute !important;
@@ -156,10 +179,12 @@ body, html {
     opacity: 0.1 !important;
     z-index: 1 !important;
 }
+
 .medical-header > * {
     position: relative !important;
     z-index: 2 !important;
 }
+
 .logo {
     width: 80px !important;
     height: 80px !important;
@@ -170,6 +195,7 @@ body, html {
     background: white !important;
     padding: 4px !important;
 }
+
 .medical-header h1 {
     font-size: 3.5rem !important;
     font-weight: 800 !important;
@@ -181,6 +207,7 @@ body, html {
     background-clip: text !important;
     filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.3)) !important;
 }
+
 .medical-header p {
     font-size: 1.3rem !important;
     margin: 8px 0 0 0 !important;
@@ -188,6 +215,7 @@ body, html {
     font-weight: 500 !important;
     text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.2) !important;
 }
+
 /* Enhanced Form Styling */
 .gr-form {
     background: linear-gradient(145deg, #ffffff 0%, #f8f9fa 100%) !important;
@@ -200,6 +228,7 @@ body, html {
     position: relative !important;
     overflow: hidden !important;
 }
+
 .gr-form::before {
     content: '' !important;
     position: absolute !important;
@@ -210,6 +239,7 @@ body, html {
     background: linear-gradient(90deg, #e53e3e 0%, #f56565 50%, #e53e3e 100%) !important;
     z-index: 1 !important;
 }
+
 /* Professional Input Fields */
 .gr-textbox, .gr-number {
     border-radius: 12px !important;
@@ -221,6 +251,7 @@ body, html {
     color: #1A202C !important;
     padding: 16px 20px !important;
 }
+
 .gr-textbox:focus,
 .gr-number:focus,
 .gr-textbox input:focus,
@@ -231,6 +262,7 @@ body, html {
     outline: none !important;
     transform: translateY(-1px) !important;
 }
+
 .gr-textbox input,
 .gr-number input {
     background: transparent !important;
@@ -241,6 +273,7 @@ body, html {
     width: 100% !important;
     padding: 0 !important;
 }
+
 .gr-textbox label,
 .gr-number label,
 .gr-dropdown label,
@@ -252,6 +285,7 @@ body, html {
     margin-bottom: 8px !important;
     display: block !important;
 }
+
 /* Enhanced Button Styling */
 button.gr-button,
 button.gr-button-primary {
@@ -271,6 +305,7 @@ button.gr-button-primary {
     text-transform: uppercase !important;
     cursor: pointer !important;
 }
+
 button.gr-button::before {
     content: '' !important;
     position: absolute !important;
@@ -281,20 +316,24 @@ button.gr-button::before {
     background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent) !important;
     transition: left 0.5s !important;
 }
+
 button.gr-button:hover::before {
     left: 100% !important;
 }
+
 button.gr-button:hover,
 button.gr-button-primary:hover {
     background: linear-gradient(135deg, #C53030 0%, #9C2A2A 100%) !important;
     box-shadow: 0 8px 32px rgba(229, 62, 62, 0.4) !important;
     transform: translateY(-3px) !important;
 }
+
 button.gr-button:active,
 button.gr-button-primary:active {
     transform: translateY(-1px) !important;
     box-shadow: 0 4px 16px rgba(229, 62, 62, 0.5) !important;
 }
+
 button.gr-button:disabled {
     background: #A0AEC0 !important;
     color: #718096 !important;
@@ -302,6 +341,7 @@ button.gr-button:disabled {
     box-shadow: none !important;
     transform: none !important;
 }
+
 /* Professional Status Messages */
 .status-success {
     background: linear-gradient(135deg, #F0FFF4 0%, #E6FFFA 100%) !important;
@@ -314,6 +354,7 @@ button.gr-button:disabled {
     box-shadow: 0 8px 24px rgba(56, 161, 105, 0.2) !important;
     backdrop-filter: blur(10px) !important;
 }
+
 .status-error {
     background: linear-gradient(135deg, #FFF5F5 0%, #FED7D7 100%) !important;
     border: 2px solid #E53E3E !important;
@@ -325,6 +366,7 @@ button.gr-button:disabled {
     box-shadow: 0 8px 24px rgba(229, 62, 62, 0.2) !important;
     backdrop-filter: blur(10px) !important;
 }
+
 .status-warning {
     background: linear-gradient(135deg, #FFFAF0 0%, #FEEBC8 100%) !important;
     border: 2px solid #DD6B20 !important;
@@ -336,6 +378,7 @@ button.gr-button:disabled {
     box-shadow: 0 8px 24px rgba(221, 107, 32, 0.2) !important;
     backdrop-filter: blur(10px) !important;
 }
+
 /* Professional Card Layout */
 .medical-card {
     background: linear-gradient(145deg, #FFFFFF 0%, #F7FAFC 100%) !important;
@@ -348,6 +391,7 @@ button.gr-button:disabled {
     position: relative !important;
     overflow: hidden !important;
 }
+
 .medical-card::before {
     content: '' !important;
     position: absolute !important;
@@ -357,6 +401,7 @@ button.gr-button:disabled {
     height: 4px !important;
     background: linear-gradient(90deg, #E53E3E 0%, #F56565 50%, #E53E3E 100%) !important;
 }
+
 .medical-card-title {
     font-size: 1.75rem !important;
     font-weight: 700 !important;
@@ -367,6 +412,7 @@ button.gr-button:disabled {
     text-align: center !important;
     position: relative !important;
 }
+
 .medical-card-title::after {
     content: '' !important;
     position: absolute !important;
@@ -378,6 +424,7 @@ button.gr-button:disabled {
     background: linear-gradient(90deg, transparent, #E53E3E, transparent) !important;
     border-radius: 2px !important;
 }
+
 /* Professional Dropdown Styling */
 .gr-dropdown {
     border-radius: 12px !important;
@@ -386,12 +433,14 @@ button.gr-button:disabled {
     transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05) !important;
 }
+
 .gr-dropdown:focus,
 .gr-dropdown select:focus {
     border-color: #E53E3E !important;
     box-shadow: 0 0 0 4px rgba(229, 62, 62, 0.1) !important;
     outline: none !important;
 }
+
 .gr-dropdown select {
     background: transparent !important;
     border: none !important;
@@ -400,11 +449,13 @@ button.gr-button:disabled {
     padding: 16px 20px !important;
     border-radius: 12px !important;
 }
+
 /* Radio button styling */
 .gr-radio input[type="radio"] {
     margin-right: 8px !important;
     transform: scale(1.2) !important;
 }
+
 .gr-radio label {
     display: flex !important;
     align-items: center !important;
@@ -414,6 +465,7 @@ button.gr-button:disabled {
     cursor: pointer !important;
     color: #1A202C !important;
 }
+
 /* Tab styling */
 .gr-tab {
     color: #1A202C !important;
@@ -422,12 +474,14 @@ button.gr-button:disabled {
     padding: 12px 20px !important;
     background-color: #F7FAFC !important;
 }
+
 .gr-tab.selected {
     color: #E53E3E !important;
     font-weight: 600 !important;
     border-bottom: 2px solid #E53E3E !important;
     background-color: #FFFFFF !important;
 }
+
 /* Image upload styling */
 .gr-image {
     border: 3px dashed #CBD5E0 !important;
@@ -435,10 +489,12 @@ button.gr-button:disabled {
     background-color: #F7FAFC !important;
     transition: all 0.2s ease !important;
 }
+
 .gr-image:hover {
     border-color: #E53E3E !important;
     background-color: #FFF5F5 !important;
 }
+
 /* Analyze button special styling */
 #analyze-btn {
     background: linear-gradient(135deg, #1B5CF3 0%, #1E3A8A 100%) !important;
@@ -452,11 +508,13 @@ button.gr-button:disabled {
     text-align: center !important;
     transition: all 0.2s ease-in-out !important;
 }
+
 #analyze-btn:hover {
     background: linear-gradient(135deg, #174ea6 0%, #123b82 100%) !important;
     box-shadow: 0 4px 14px rgba(27, 95, 193, 0.4) !important;
     transform: translateY(-2px) !important;
 }
+
 #analyze-btn:disabled {
     background: #A0AEC0 !important;
     color: #1A202C !important;
@@ -464,6 +522,42 @@ button.gr-button:disabled {
     box-shadow: none !important;
     transform: none !important;
 }
+
+/* Image gallery styling for better visualization */
+.image-gallery {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+    gap: 20px;
+    margin: 20px 0;
+}
+
+.image-item {
+    background: #f8f9fa;
+    border-radius: 12px;
+    padding: 15px;
+    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
+    text-align: center;
+}
+
+.image-item img {
+    max-width: 100%;
+    height: auto;
+    border-radius: 8px;
+    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
+}
+
+.image-item h4 {
+    margin: 15px 0 5px 0;
+    color: #2d3748;
+    font-weight: 600;
+}
+
+.image-item p {
+    margin: 0;
+    color: #666;
+    font-size: 0.9em;
+}
+
 /* Responsive design */
 @media (max-width: 768px) {
     .medical-header {
@@ -491,6 +585,10 @@ button.gr-button:disabled {
         padding: 14px 20px !important;
         font-size: 14px !important;
     }
+    
+    .image-gallery {
+        grid-template-columns: 1fr;
+    }
 }
 """
 
@@ -662,7 +760,7 @@ button.gr-button:disabled {
                                         value="Moist"
                                     )
                                     infection_signs = gr.Dropdown(
-                                        choices=["None", "Mild", "Moderate", "Severe"], 
+                                        choices=["None", "Mild", "Moderate", "Severe"],
                                         label="Signs of Infection",
                                         value="None"
                                     )
@@ -707,7 +805,7 @@ button.gr-button:disabled {
                                         lines=3
                                     )
                             
-                            analyze_btn = gr.Button("🔬 Analyze Wound", variant="primary", size="lg")
+                            analyze_btn = gr.Button("🔬 Analyze Wound", variant="primary", size="lg", elem_id="analyze-btn")
                             analysis_output = gr.HTML("")
                         
                         # PATIENT HISTORY TAB
@@ -726,8 +824,6 @@ button.gr-button:disabled {
                                     )
                                     search_patient_btn = gr.Button("🔍 Search Patient History", variant="secondary")
                                     specific_patient_output = gr.HTML("")
-                    
-                    # Interface already complete above - no additional tabs needed
             
             # Event handlers
             def handle_login(username, password):
@@ -805,99 +901,67 @@ button.gr-button:disabled {
                     </div>
                     """
                     
-                    # 1. Construct questionnaire dictionary
+                    # 1. Construct questionnaire dictionary for AIProcessor
                     questionnaire_data = {
                         'user_id': self.current_user.get('id'),
+                        'age': patient_age,
+                        'diabetic': 'Yes' if diabetic_status != 'Non-diabetic' else 'No',
+                        'allergies': allergies,
+                        'date_of_injury': 'Unknown',  # Not collected in this form
+                        'professional_care': 'Yes',  # Assumed since using professional interface
+                        'oozing_bleeding': 'None',  # Could be mapped from infection_signs
+                        'infection': 'Yes' if infection_signs != 'None' else 'No',
+                        'moisture': moisture_level,
+                        # Additional fields for comprehensive analysis
                         'patient_name': patient_name,
-                        'patient_age': patient_age,
                         'patient_gender': patient_gender,
                         'wound_location': wound_location,
                         'wound_duration': wound_duration,
                         'pain_level': pain_level,
-                        'moisture_level': moisture_level,
-                        'infection_signs': infection_signs,
-                        'diabetic_status': diabetic_status,
                         'previous_treatment': previous_treatment,
                         'medical_history': medical_history,
                         'medications': medications,
-                        'allergies': allergies,
                         'additional_notes': additional_notes
                     }
                     
-                    # 2. Save questionnaire in DB
+                    # 2. Save questionnaire in DB first
                     questionnaire_id = self.database_manager.save_questionnaire(questionnaire_data)
             
-                    # 3. Run AI analysis with uploaded image
+                    # 3. Run AI analysis using the AIProcessor class
                     try:
-                        # Log information about the wound image
-                        if hasattr(wound_image, 'name'):
-                            logging.info(f"Processing image: {wound_image.name}")
+                        logging.info(f"Starting AI analysis for image: {wound_image}")
                         
-                        # First try direct analysis with the file-like object
+                        # Use the AIProcessor analyze_wound method
                         analysis_result = self.wound_analyzer.analyze_wound(wound_image, questionnaire_data)
-                    except Exception as e:
-                        logging.error(f"AI analysis error (first attempt): {e}")
-                        try:
-                            # If that fails, try with PIL image
-                            from PIL import Image
-                            import io
-                            
-                            # Reset file pointer if possible
-                            if hasattr(wound_image, 'seek'):
-                                wound_image.seek(0)
-                            
-                            # Convert to PIL Image
-                            pil_image = Image.open(wound_image)
-                            analysis_result = self.wound_analyzer.analyze_wound(pil_image, questionnaire_data)
-                        except Exception as e2:
-                            logging.error(f"AI analysis error (second attempt): {e2}")
-                            # Return error information for display
-                            return f"""
-                            <div class='status-error' style='padding: 20px; background: #ffeeee; border-left: 5px solid #ff5555; margin: 20px 0;'>
-                                <h3>❌ Analysis Error</h3>
-                                <p>There was an error analyzing the wound image:</p>
-                                <pre style='background: #f5f5f5; padding: 10px; border-radius: 5px;'>{str(e)}\n{str(e2) if 'e2' in locals() else ''}</pre>
-                                <p>Please try again with a different image or contact support.</p>
-                            </div>
-                            """
-                    
-                    # 4. Save AI analysis result
-                    self.database_manager.save_analysis_result(questionnaire_id, analysis_result)
-                    
-                    # 5. Save wound image metadata
-                    if isinstance(wound_image, str):
-                        image_url = wound_image
-                    elif hasattr(wound_image, 'name'):
-                        image_url = wound_image.name
-                    else:
-                        image_url = 'unknown'
-            
-                    image_data = {
-                        'image_url': image_url,
-                        'filename': os.path.basename(image_url),
-                        'file_size': None,
-                        'width': None,
-                        'height': None
-                    }
-            
-                    # 6. Format analysis results with visualization
-                    formatted_analysis = self._format_analysis_results(analysis_result, image_url)
-                    
-                    # 7. Generate HTML professional report for complete analysis
-                    professional_report = self.report_generator.generate_analysis_report(
-                        questionnaire_data,
-                        analysis_result,
-                        image_data.get('image_url')
-                    )
+                        
+                        if not analysis_result.get('success', False):
+                            raise Exception(analysis_result.get('error', 'Analysis failed for unknown reason'))
+                        
+                        # 4. Save AI analysis result to database
+                        self.database_manager.save_analysis_result(questionnaire_id, analysis_result)
+                        
+                        # 5. Format comprehensive analysis results with all images
+                        formatted_analysis = self._format_comprehensive_analysis_results(
+                            analysis_result, wound_image, questionnaire_data
+                        )
+                        
+                        return formatted_analysis
             
-                    return formatted_analysis + professional_report
+                    except Exception as analysis_error:
+                        logging.error(f"AI analysis error: {analysis_error}")
+                        return f"""
+                        <div class='status-error' style='padding: 20px; background: #ffeeee; border-left: 5px solid #ff5555; margin: 20px 0;'>
+                            <h3>❌ Analysis Error</h3>
+                            <p>There was an error analyzing the wound image:</p>
+                            <pre style='background: #f5f5f5; padding: 10px; border-radius: 5px;'>{str(analysis_error)}</pre>
+                            <p>Please try again with a different image or contact support.</p>
+                        </div>
+                        """
             
                 except Exception as e:
-                    logging.error(f"Analysis error: {e}")
+                    logging.error(f"Analysis handler error: {e}")
                     return f"<div class='status-error'>❌ Analysis failed: {str(e)}</div>"
 
-
-            
             def handle_logout():
                 self.current_user = {}
                 return {
@@ -993,223 +1057,338 @@ button.gr-button:disabled {
                 inputs=[search_patient_name],
                 outputs=[specific_patient_output]
             )
+        
         return app   
-    def _format_analysis_results(self, analysis_result, image_url=None):
-        """Format analysis results for HTML display with base64 encoded images, always showing segmentation overlay."""
+    
+    def _format_comprehensive_analysis_results(self, analysis_result, image_url=None, questionnaire_data=None):
+        """Format comprehensive analysis results with all visualization images from AIProcessor."""
         try:
-            # Extract key results
-            summary = analysis_result.get('summary', 'Analysis completed')
-            wound_detection = analysis_result.get('wound_detection', {})
-            segmentation_result = analysis_result.get('segmentation_result', {})
-            risk_assessment = analysis_result.get('risk_assessment', {})
-            recommendations = analysis_result.get('recommendations', '')
-            comprehensive_report = analysis_result.get('comprehensive_report', '')
-
-            # Detection metrics
-            detection_confidence = 0.0
-            wound_type = "Unknown"
-            length_cm = breadth_cm = area_cm2 = 0
-
-            if wound_detection.get('status') == 'success' and wound_detection.get('detections'):
-                detections = wound_detection.get('detections', [])
-                if detections:
-                    detection_confidence = detections[0].get('detection_confidence', 0.0)
-                    wound_type = detections[0].get('wound_type', 'Unknown')
-                    length_cm = detections[0].get('length_cm', 0)
-                    breadth_cm = detections[0].get('breadth_cm', 0)
-                    area_cm2 = detections[0].get('surface_area_cm2', 0)
-
-            risk_level = risk_assessment.get('risk_level', 'Unknown')
-            risk_score = risk_assessment.get('risk_score', 0)
-            risk_factors = risk_assessment.get('risk_factors', [])
-
+            # Extract the core analysis results from AIProcessor
+            success = analysis_result.get('success', False)
+            if not success:
+                error_msg = analysis_result.get('error', 'Unknown error')
+                return f"<div class='status-error'>❌ Analysis failed: {error_msg}</div>"
+            
+            visual_analysis = analysis_result.get('visual_analysis', {})
+            report = analysis_result.get('report', '')
+            saved_image_path = analysis_result.get('saved_image_path', '')
+            
+            # Extract wound metrics
+            wound_type = visual_analysis.get('wound_type', 'Unknown')
+            length_cm = visual_analysis.get('length_cm', 0)
+            breadth_cm = visual_analysis.get('breadth_cm', 0)
+            area_cm2 = visual_analysis.get('surface_area_cm2', 0)
+            detection_confidence = visual_analysis.get('detection_confidence', 0)
+            
+            # Get image paths for visualizations
+            detection_image_path = visual_analysis.get('detection_image_path', '')
+            segmentation_image_path = visual_analysis.get('segmentation_image_path', '')
+            original_image_path = visual_analysis.get('original_image_path', '')
+            
+            # Convert images to base64 for embedding
+            original_image_base64 = None
+            detection_image_base64 = None
+            segmentation_image_base64 = None
+            
+            # Original uploaded image
+            if image_url and os.path.exists(image_url):
+                original_image_base64 = self.image_to_base64(image_url)
+            elif original_image_path and os.path.exists(original_image_path):
+                original_image_base64 = self.image_to_base64(original_image_path)
+            elif saved_image_path and os.path.exists(saved_image_path):
+                original_image_base64 = self.image_to_base64(saved_image_path)
+            
+            # Detection visualization
+            if detection_image_path and os.path.exists(detection_image_path):
+                detection_image_base64 = self.image_to_base64(detection_image_path)
+            
+            # Segmentation visualization  
+            if segmentation_image_path and os.path.exists(segmentation_image_path):
+                segmentation_image_base64 = self.image_to_base64(segmentation_image_path)
+            
+            # Generate risk assessment from questionnaire data
+            risk_assessment = self._generate_risk_assessment(questionnaire_data)
+            risk_level = risk_assessment['risk_level']
+            risk_score = risk_assessment['risk_score']
+            risk_factors = risk_assessment['risk_factors']
+            
             # Set risk class for styling
             risk_class = "low"
             if risk_level.lower() == "moderate":
                 risk_class = "moderate"
             elif risk_level.lower() == "high":
                 risk_class = "high"
-
+            
             # Format risk factors
             risk_factors_html = "<ul>" + "".join(f"<li>{factor}</li>" for factor in risk_factors) + "</ul>" if risk_factors else "<p>No specific risk factors identified.</p>"
-
-            # Format guideline recommendations
-            guideline_recommendations = analysis_result.get('guideline_recommendations', [])
-            recommendations_html = "<ul>" + "".join(f"<li>{rec}</li>" for rec in guideline_recommendations if rec and len(rec) > 10) + "</ul>" if guideline_recommendations else "<p>No specific recommendations available.</p>"
-
-            # --- Detection image ---
-            detection_image_base64 = None
-            if "overlay_path" in wound_detection and os.path.exists(wound_detection["overlay_path"]):
-                detection_image_base64 = self.image_to_base64(wound_detection["overlay_path"])
-            elif comprehensive_report:
-                detection_match = re.search(r"Detection Image: (.+?)(?:\n|$)", comprehensive_report)
-                if detection_match and detection_match.group(1) != "Not available" and os.path.exists(detection_match.group(1).strip()):
-                    detection_image_base64 = self.image_to_base64(detection_match.group(1).strip())
-
-            detection_image_html = ""
-            if detection_image_base64:
-                detection_image_html = f"""
-                <div class="image-visualization">
-                    <h3>Wound Detection Visualization</h3>
-                    <img src="{detection_image_base64}" alt="Wound Detection" style="max-width: 100%; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); margin: 10px 0;">
-                </div>
-                """
-
-            detection_html = f"""
-            <div class="section">
-                <h2>🔍 Wound Detection & Classification</h2>
-                {detection_image_html}
-                <div class="info-cards" style="display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 15px; margin: 20px 0;">
-                    <div class="info-card">
-                        <h3>Wound Type</h3>
-                        <p style="font-weight: 600; color: #3182ce;">{wound_type}</p>
+            
+            # Create image gallery
+            image_gallery_html = ""
+            if original_image_base64 or detection_image_base64 or segmentation_image_base64:
+                image_gallery_html = '<div class="image-gallery">'
+                
+                if original_image_base64:
+                    image_gallery_html += f'''
+                    <div class="image-item">
+                        <img src="{original_image_base64}" alt="Original Wound Image">
+                        <h4>📸 Original Wound Image</h4>
+                        <p>Uploaded image for analysis</p>
                     </div>
-                    <div class="info-card">
-                        <h3>Detection Confidence</h3>
-                        <p>{detection_confidence:.1%}</p>
+                    '''
+                
+                if detection_image_base64:
+                    image_gallery_html += f'''
+                    <div class="image-item">
+                        <img src="{detection_image_base64}" alt="Wound Detection">
+                        <h4>🎯 Wound Detection</h4>
+                        <p>AI-detected wound boundaries with {detection_confidence:.1%} confidence</p>
                     </div>
-                    <div class="info-card">
-                        <h3>Total Wounds Detected</h3>
-                        <p>{wound_detection.get('total_wounds', 0)}</p>
+                    '''
+                
+                if segmentation_image_base64:
+                    image_gallery_html += f'''
+                    <div class="image-item">
+                        <img src="{segmentation_image_base64}" alt="Wound Segmentation">
+                        <h4>📏 Wound Segmentation</h4>
+                        <p>Detailed wound area measurement and analysis</p>
                     </div>
-                </div>
-            </div>
-            """ if wound_detection.get('status') == 'success' else f"""
-            <div class="status-error">
-                <strong>Detection Status:</strong> Failed<br>
-                <strong>Reason:</strong> {wound_detection.get('message', 'Unknown error')}
-            </div>
-            """
-
-            # --- Segmentation overlay: prefer direct result! ---
-            segmentation_image_base64 = None
-            if "overlay_pil" in segmentation_result and isinstance(segmentation_result["overlay_pil"], Image.Image):
-                segmentation_image_base64 = pil_to_base64(segmentation_result["overlay_pil"])
-            elif "overlay_path" in segmentation_result and os.path.exists(segmentation_result["overlay_path"]):
-                segmentation_image_base64 = self.image_to_base64(segmentation_result["overlay_path"])
-            elif comprehensive_report:
-                segmentation_match = re.search(r"Segmentation Image: (.+?)(?:\n|$)", comprehensive_report)
-                if segmentation_match and segmentation_match.group(1) != "Not available" and os.path.exists(segmentation_match.group(1).strip()):
-                    segmentation_image_base64 = self.image_to_base64(segmentation_match.group(1).strip())
-
-            segmentation_image_html = ""
-            if segmentation_image_base64:
-                segmentation_image_html = f"""
-                <div class="image-visualization">
-                    <h3>Wound Segmentation Visualization</h3>
-                    <img src="{segmentation_image_base64}" alt="Wound Segmentation" style="max-width: 100%; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); margin: 10px 0;">
-                </div>
-                """
-
-            segmentation_html = f"""
-            <div class="section">
-                <h2>📏 Wound Measurements</h2>
-                {segmentation_image_html}
-                <div class="info-cards" style="display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 15px; margin: 20px 0;">
-                    <div class="info-card">
-                        <h3>Length</h3>
-                        <p style="font-weight: 600; color: #3182ce;">{length_cm:.2f} cm</p>
+                    '''
+                
+                image_gallery_html += '</div>'
+            
+            # Convert markdown report to HTML
+            report_html = ""
+            if report:
+                report_html = self.markdown_to_html(report)
+            
+            # Final comprehensive HTML output
+            html_output = f"""
+            <div style="max-width: 1200px; margin: 0 auto; background: white; border-radius: 16px; box-shadow: 0 8px 32px rgba(0,0,0,0.1); overflow: hidden;">
+                <div style="background: linear-gradient(135deg, #3182ce 0%, #2c5aa0 100%); color: white; padding: 40px; text-align: center;">
+                    <h1 style="margin: 0; font-size: 32px; font-weight: 700;">🔬 SmartHeal AI Comprehensive Analysis</h1>
+                    <p style="margin: 15px 0 0 0; opacity: 0.9; font-size: 18px;">Advanced Computer Vision & Medical AI Assessment</p>
+                    <div style="background: rgba(255,255,255,0.1); padding: 15px; border-radius: 8px; margin-top: 20px;">
+                        <p style="margin: 0; font-size: 16px;"><strong>Patient:</strong> {questionnaire_data.get('patient_name', 'Unknown')} | <strong>Analysis Date:</strong> {datetime.now().strftime('%Y-%m-%d %H:%M:%S')}</p>
                     </div>
-                    <div class="info-card">
-                        <h3>Width</h3>
-                        <p style="font-weight: 600; color: #3182ce;">{breadth_cm:.2f} cm</p>
+                </div>
+                
+                <div style="padding: 40px;">
+                    <div class="status-success" style="margin-bottom: 30px;">
+                        <strong>✅ Analysis Status:</strong> Analysis completed successfully with comprehensive wound assessment
                     </div>
-                    <div class="info-card">
-                        <h3>Surface Area</h3>
-                        <p style="font-weight: 600; color: #3182ce;">{area_cm2:.2f} cm²</p>
+                    
+                    <!-- Image Gallery Section -->
+                    <div style="margin-bottom: 40px;">
+                        <h2 style="color: #2d3748; font-size: 24px; margin-bottom: 20px; border-bottom: 2px solid #e53e3e; padding-bottom: 10px;">🖼️ Visual Analysis Gallery</h2>
+                        {image_gallery_html}
                     </div>
-                </div>
-            </div>
-            """ if segmentation_result.get('status') == 'success' else f"""
-            <div class="status-warning">
-                <strong>Segmentation Status:</strong> Failed<br>
-                <strong>Reason:</strong> {segmentation_result.get('message', 'Unknown error')}
-            </div>
-            """
-
-            # --- Main input image preview ---
-            image_visualization = ""
-            if image_url and os.path.exists(image_url):
-                image_base64 = self.image_to_base64(image_url)
-                if image_base64:
-                    image_visualization = f"""
-                    <div class="section">
-                        <h2>🖼️ Wound Image</h2>
-                        <div style="text-align: center; margin: 20px 0;">
-                            <img src="{image_base64}" alt="Wound Image" style="max-width: 100%; height: auto; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.15); margin-bottom: 10px;">
-                            <p style="margin-top: 10px; color: #666; font-size: 0.9em;">
-                                Analysis completed successfully
-                            </p>
+                    
+                    <!-- Wound Detection & Classification -->
+                    <div style="background: #f8f9fa; padding: 30px; border-radius: 12px; margin-bottom: 30px;">
+                        <h2 style="color: #2d3748; margin-top: 0;">🔍 Wound Detection & Classification</h2>
+                        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; margin: 20px 0;">
+                            <div style="background: white; padding: 20px; border-radius: 8px; text-align: center; box-shadow: 0 2px 8px rgba(0,0,0,0.1);">
+                                <h3 style="color: #3182ce; margin: 0 0 10px 0;">Wound Type</h3>
+                                <p style="font-weight: 600; font-size: 18px; color: #2d3748; margin: 0;">{wound_type}</p>
+                            </div>
+                            <div style="background: white; padding: 20px; border-radius: 8px; text-align: center; box-shadow: 0 2px 8px rgba(0,0,0,0.1);">
+                                <h3 style="color: #3182ce; margin: 0 0 10px 0;">Detection Confidence</h3>
+                                <p style="font-weight: 600; font-size: 18px; color: #2d3748; margin: 0;">{detection_confidence:.1%}</p>
+                            </div>
+                            <div style="background: white; padding: 20px; border-radius: 8px; text-align: center; box-shadow: 0 2px 8px rgba(0,0,0,0.1);">
+                                <h3 style="color: #3182ce; margin: 0 0 10px 0;">Location</h3>
+                                <p style="font-weight: 600; font-size: 18px; color: #2d3748; margin: 0;">{questionnaire_data.get('wound_location', 'Not specified')}</p>
+                            </div>
                         </div>
                     </div>
-                    """
-
-            # --- Comprehensive report as HTML ---
-            comprehensive_report_html = ""
-            if comprehensive_report:
-                report_without_images = re.sub(r'## Analysis Images.*?(?=##|$)', '', comprehensive_report, flags=re.DOTALL)
-                comprehensive_report_html = self.markdown_to_html(report_without_images)
-
-            # --- Final Output ---
-            html_output = f"""
-            <div style="max-width: 900px; margin: 0 auto; background: white; border-radius: 10px; box-shadow: 0 4px 20px rgba(0,0,0,0.1); overflow: hidden;">
-                <div style="background: linear-gradient(135deg, #3182ce 0%, #2c5aa0 100%); color: white; padding: 30px; text-align: center;">
-                    <h2 style="margin: 0; font-size: 28px; font-weight: 600;">🔬 SmartHeal AI Analysis Results</h2>
-                    <p style="margin: 10px 0 0 0; opacity: 0.9; font-size: 16px;">Advanced Computer Vision & Medical AI Assessment</p>
-                </div>
-                <div style="padding: 30px;">
-                    <div class="status-success" style="margin-bottom: 30px;">
-                        <strong>Analysis Summary:</strong> {summary}
+                    
+                    <!-- Wound Measurements -->
+                    <div style="background: #e7f5ff; padding: 30px; border-radius: 12px; margin-bottom: 30px;">
+                        <h2 style="color: #2d3748; margin-top: 0;">📏 Wound Measurements</h2>
+                        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 20px; margin: 20px 0;">
+                            <div style="background: white; padding: 20px; border-radius: 8px; text-align: center; box-shadow: 0 2px 8px rgba(0,0,0,0.1);">
+                                <h3 style="color: #e53e3e; margin: 0 0 10px 0;">Length</h3>
+                                <p style="font-weight: 700; font-size: 24px; color: #2d3748; margin: 0;">{length_cm:.2f} cm</p>
+                            </div>
+                            <div style="background: white; padding: 20px; border-radius: 8px; text-align: center; box-shadow: 0 2px 8px rgba(0,0,0,0.1);">
+                                <h3 style="color: #e53e3e; margin: 0 0 10px 0;">Width</h3>
+                                <p style="font-weight: 700; font-size: 24px; color: #2d3748; margin: 0;">{breadth_cm:.2f} cm</p>
+                            </div>
+                            <div style="background: white; padding: 20px; border-radius: 8px; text-align: center; box-shadow: 0 2px 8px rgba(0,0,0,0.1);">
+                                <h3 style="color: #e53e3e; margin: 0 0 10px 0;">Surface Area</h3>
+                                <p style="font-weight: 700; font-size: 24px; color: #2d3748; margin: 0;">{area_cm2:.2f} cm²</p>
+                            </div>
+                        </div>
                     </div>
-                    {image_visualization}
-                    {detection_html}
-                    {segmentation_html}
-                    <div class="section">
-                        <h2>⚠️ Risk Assessment</h2>
-                        <div style="display: flex; align-items: center; margin: 20px 0;">
+                    
+                    <!-- Risk Assessment -->
+                    <div style="background: #fff4e6; padding: 30px; border-radius: 12px; margin-bottom: 30px;">
+                        <h2 style="color: #2d3748; margin-top: 0;">⚠️ Risk Assessment</h2>
+                        <div style="display: flex; align-items: center; margin: 20px 0; flex-wrap: wrap;">
                             <div style="background: {'#d4edda' if risk_class == 'low' else '#fff3cd' if risk_class == 'moderate' else '#f8d7da'}; 
                                     color: {'#155724' if risk_class == 'low' else '#856404' if risk_class == 'moderate' else '#721c24'}; 
-                                    padding: 12px 24px; 
+                                    padding: 15px 30px; 
                                     border-radius: 30px; 
                                     font-weight: 700; 
-                                    font-size: 18px;
+                                    font-size: 20px;
                                     text-transform: uppercase;
                                     letter-spacing: 1px;
-                                    margin-right: 20px;">
+                                    margin-right: 20px;
+                                    margin-bottom: 10px;">
                                 {risk_level} RISK
                             </div>
-                            <div>
+                            <div style="font-size: 18px; color: #2d3748;">
                                 <strong>Risk Score:</strong> {risk_score}/10
                             </div>
                         </div>
-                        <div style="background: #f8f9fa; padding: 20px; border-radius: 8px; margin: 15px 0;">
-                            <h3 style="margin-top: 0;">Identified Risk Factors:</h3>
+                        <div style="background: white; padding: 25px; border-radius: 8px; margin: 15px 0; box-shadow: 0 2px 8px rgba(0,0,0,0.05);">
+                            <h3 style="margin-top: 0; color: #2d3748;">Identified Risk Factors:</h3>
                             {risk_factors_html}
                         </div>
                     </div>
-                    <div class="section">
-                        <h2>💡 Clinical Recommendations</h2>
-                        <div style="background: #e7f5ff; padding: 20px; border-radius: 8px; border-left: 4px solid #3182ce;">
-                            {recommendations_html}
-                        </div>
-                        <div style="background: #fff4e6; padding: 15px; border-radius: 8px; margin-top: 20px;">
-                            <p style="margin: 0; color: #e67700;">
-                                <strong>⚠️ Note:</strong> These recommendations are generated by AI and should be verified by healthcare professionals.
-                            </p>
+                    
+                    <!-- Patient Information Summary -->
+                    <div style="background: #f0f8f0; padding: 30px; border-radius: 12px; margin-bottom: 30px;">
+                        <h2 style="color: #2d3748; margin-top: 0;">👤 Patient Information Summary</h2>
+                        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 15px;">
+                            <div><strong>Age:</strong> {questionnaire_data.get('age', 'Not specified')} years</div>
+                            <div><strong>Gender:</strong> {questionnaire_data.get('patient_gender', 'Not specified')}</div>
+                            <div><strong>Diabetic Status:</strong> {questionnaire_data.get('diabetic', 'Unknown')}</div>
+                            <div><strong>Pain Level:</strong> {questionnaire_data.get('pain_level', 'Not assessed')}/10</div>
+                            <div><strong>Wound Duration:</strong> {questionnaire_data.get('wound_duration', 'Not specified')}</div>
+                            <div><strong>Moisture Level:</strong> {questionnaire_data.get('moisture', 'Not assessed')}</div>
                         </div>
+                        {f"<div style='margin-top: 20px;'><strong>Medical History:</strong> {questionnaire_data.get('medical_history', 'None provided')}</div>" if questionnaire_data.get('medical_history') else ""}
+                        {f"<div style='margin-top: 10px;'><strong>Current Medications:</strong> {questionnaire_data.get('medications', 'None listed')}</div>" if questionnaire_data.get('medications') else ""}
+                        {f"<div style='margin-top: 10px;'><strong>Known Allergies:</strong> {questionnaire_data.get('allergies', 'None listed')}</div>" if questionnaire_data.get('allergies') else ""}
+                    </div>
+                    
+                    <!-- AI Generated Report -->
+                    {f'<div style="background: #f8f9fa; padding: 30px; border-radius: 12px; margin-bottom: 30px;"><h2 style="color: #2d3748; margin-top: 0;">🤖 AI-Generated Clinical Report</h2><div style="background: white; padding: 25px; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.05);">{report_html}</div></div>' if report_html else ''}
+                    
+                    <!-- Important Disclaimers -->
+                    <div style="background: #fff5f5; border: 2px solid #feb2b2; padding: 25px; border-radius: 12px; margin: 30px 0;">
+                        <h3 style="color: #c53030; margin-top: 0;">⚠️ Important Medical Disclaimers</h3>
+                        <ul style="color: #742a2a; line-height: 1.6;">
+                            <li><strong>Not a Medical Diagnosis:</strong> This AI analysis is for informational purposes only and does not constitute medical advice, diagnosis, or treatment.</li>
+                            <li><strong>Professional Consultation Required:</strong> Always consult with qualified healthcare professionals for proper clinical assessment and treatment decisions.</li>
+                            <li><strong>Measurement Accuracy:</strong> All measurements are estimates based on computer vision algorithms and should be verified with clinical tools.</li>
+                            <li><strong>Risk Assessment Limitations:</strong> Risk factors are based on provided information and may not reflect the complete clinical picture.</li>
+                        </ul>
                     </div>
-                    {f'<div class="section"><h2>📋 Comprehensive Report</h2><div style="background: #f8f9fa; padding: 20px; border-radius: 8px;">{comprehensive_report_html}</div></div>' if comprehensive_report_html else ''}
-                    <hr style="border: 0; height: 1px; background: #e9ecef; margin: 30px 0;">
-                    <div style="text-align: center; padding: 20px 0;">
-                        <p style="color: #6c757d; font-style: italic;">
-                            Analysis completed by SmartHeal AI - Advanced Wound Care Assistant
+                    
+                    <!-- Footer -->
+                    <div style="text-align: center; padding: 30px 0; border-top: 2px solid #e2e8f0; margin-top: 30px;">
+                        <p style="color: #6c757d; font-style: italic; font-size: 16px; margin: 0;">
+                            🏥 Analysis completed by <strong>SmartHeal AI</strong> - Advanced Wound Care Assistant<br>
+                            <small>Report generated on {datetime.now().strftime('%B %d, %Y at %I:%M %p')}</small>
                         </p>
                     </div>
                 </div>
             </div>
             """
+            
             return html_output
 
         except Exception as e:
-            logging.error(f"Error formatting results: {e}")
-            return f"<div class='status-error'>❌ Error displaying results: {str(e)}</div>"
+            logging.error(f"Error formatting comprehensive results: {e}")
+            return f"<div class='status-error'>❌ Error displaying results: {str(e)}</div>"
+    
+    def _generate_risk_assessment(self, questionnaire_data):
+        """Generate risk assessment based on questionnaire data"""
+        if not questionnaire_data:
+            return {'risk_level': 'Unknown', 'risk_score': 0, 'risk_factors': []}
+        
+        risk_factors = []
+        risk_score = 0
+        
+        try:
+            # Age assessment
+            age = questionnaire_data.get('age', 0)
+            if isinstance(age, str):
+                try:
+                    age = int(age)
+                except ValueError:
+                    age = 0
+                    
+            if age > 65:
+                risk_factors.append("Advanced age (>65 years)")
+                risk_score += 2
+            elif age > 50:
+                risk_factors.append("Older adult (50-65 years)")
+                risk_score += 1
+            
+            # Diabetic status
+            diabetic_status = str(questionnaire_data.get('diabetic', '')).lower()
+            if 'yes' in diabetic_status:
+                risk_factors.append("Diabetes mellitus")
+                risk_score += 3
+            
+            # Infection signs
+            infection = str(questionnaire_data.get('infection', '')).lower()
+            if 'yes' in infection:
+                risk_factors.append("Signs of infection present")
+                risk_score += 3
+            
+            # Pain level
+            pain_level = questionnaire_data.get('pain_level', 0)
+            if isinstance(pain_level, str):
+                try:
+                    pain_level = float(pain_level)
+                except ValueError:
+                    pain_level = 0
+                    
+            if pain_level >= 7:
+                risk_factors.append("High pain level (≥7/10)")
+                risk_score += 2
+            elif pain_level >= 5:
+                risk_factors.append("Moderate pain level (5-6/10)")
+                risk_score += 1
+            
+            # Wound duration
+            duration = str(questionnaire_data.get('wound_duration', '')).lower()
+            if any(term in duration for term in ['month', 'months', 'year', 'years']):
+                risk_factors.append("Chronic wound (>4 weeks)")
+                risk_score += 3
+            
+            # Moisture level
+            moisture = str(questionnaire_data.get('moisture', '')).lower()
+            if any(term in moisture for term in ['wet', 'saturated']):
+                risk_factors.append("Excessive wound exudate")
+                risk_score += 1
+            
+            # Medical history analysis
+            medical_history = str(questionnaire_data.get('medical_history', '')).lower()
+            if any(term in medical_history for term in ['vascular', 'circulation', 'heart']):
+                risk_factors.append("Cardiovascular disease")
+                risk_score += 2
+            if any(term in medical_history for term in ['immune', 'cancer', 'steroid']):
+                risk_factors.append("Immune system compromise")
+                risk_score += 2
+            if any(term in medical_history for term in ['smoking', 'tobacco']):
+                risk_factors.append("Smoking history")
+                risk_score += 2
+            
+            # Determine risk level
+            if risk_score >= 8:
+                risk_level = "Very High"
+            elif risk_score >= 6:
+                risk_level = "High"
+            elif risk_score >= 3:
+                risk_level = "Moderate"
+            else:
+                risk_level = "Low"
+                
+            return {
+                'risk_score': risk_score,
+                'risk_level': risk_level,
+                'risk_factors': risk_factors
+            }
+            
+        except Exception as e:
+            logging.error(f"Risk assessment error: {e}")
+            return {
+                'risk_score': 0,
+                'risk_level': 'Unknown',
+                'risk_factors': ['Unable to assess risk due to data processing error']
+            }