testing new gradio UI

gradio_test.py

@@ -536,11 +536,11 @@ class NeuroNestApp:
         return stats
 
 ########################################
-# GRADIO INTERFACE
+# ENHANCED GRADIO INTERFACE
 ########################################
 
 def create_gradio_interface():
-    """Create the Gradio interface"""
+    """Create the enhanced Gradio interface with improved layout"""
 
     app = NeuroNestApp()
     oneformer_ok, blackspot_ok = app.initialize()
@@ -557,7 +557,7 @@ def create_gradio_interface():
     ):
         """Wrapper function for Gradio interface"""
         if image_path is None:
-            return None, None, None, "Please upload an image"
+            return None, None, None, "### ⚠️ Please upload an image to begin analysis"
 
         results = app.analyze_image(
             image_path=image_path,
@@ -568,7 +568,7 @@ def create_gradio_interface():
         )
 
         if "error" in results:
-            return None, None, None, f"Error: {results['error']}"
+            return None, None, None, f"### ❌ Error: {results['error']}"
 
         seg_output = results['segmentation']['visualization'] if results['segmentation'] else None
         blackspot_output = results['blackspot']['visualization'] if results['blackspot'] else None
@@ -595,158 +595,660 @@ def create_gradio_interface():
         return seg_output, blackspot_output, contrast_output, report
 
     def generate_comprehensive_report(results: Dict, contrast_report: str, blackspot_report: str) -> str:
-        """Generate comprehensive analysis report"""
-        report = ["# 🧠 NeuroNest Analysis Report\n"]
-        report.append(f"*Generated: {time.strftime('%Y-%m-%d %H:%M:%S')}*\n")
+        """Generate comprehensive analysis report with enhanced formatting"""
+        report = []
+        
+        # Header with timestamp
+        report.append("# 🧠 NeuroNest Environmental Safety Analysis Report")
+        report.append(f"*Generated: {time.strftime('%Y-%m-%d %H:%M:%S')}*")
+        report.append("---\n")
+
+        # Quick Summary Box
+        report.append("## 📊 Executive Summary")
+        
+        # Determine overall safety status
+        has_critical = False
+        has_issues = False
+        
+        if results['blackspot'] and results['statistics']['blackspot']['coverage_percentage'] > 0:
+            has_issues = True
+            if results['statistics']['blackspot']['coverage_percentage'] > 5:
+                has_critical = True
+        
+        if results['contrast'] and results['statistics']['contrast']['critical_issues'] > 0:
+            has_critical = True
+            has_issues = True
+        elif results['contrast'] and results['statistics']['contrast']['low_contrast_pairs'] > 0:
+            has_issues = True
+        
+        # Safety Status Box
+        if has_critical:
+            report.append("""
+<div style='background-color: #fef2f2; border: 2px solid #dc2626; padding: 15px; border-radius: 8px; margin: 10px 0;'>
+<h3 style='color: #dc2626; margin: 0;'>🚨 CRITICAL SAFETY ISSUES DETECTED</h3>
+<p style='margin: 5px 0 0 0;'><em>Immediate modifications required for Alzheimer's/dementia care safety</em></p>
+</div>
+            """)
+        elif has_issues:
+            report.append("""
+<div style='background-color: #fffbeb; border: 2px solid #f59e0b; padding: 15px; border-radius: 8px; margin: 10px 0;'>
+<h3 style='color: #f59e0b; margin: 0;'>⚠️ SAFETY CONCERNS IDENTIFIED</h3>
+<p style='margin: 5px 0 0 0;'><em>Several areas need improvement for optimal cognitive accessibility</em></p>
+</div>
+            """)
+        else:
+            report.append("""
+<div style='background-color: #f0fdf4; border: 2px solid #22c55e; padding: 15px; border-radius: 8px; margin: 10px 0;'>
+<h3 style='color: #22c55e; margin: 0;'>✅ ENVIRONMENT PASSES SAFETY ASSESSMENT</h3>
+<p style='margin: 5px 0 0 0;'><em>This space meets recommended standards for cognitive accessibility</em></p>
+</div>
+            """)
+        
+        report.append("\n---\n")
 
+        # Object Detection Results
         if results['segmentation']:
             stats = results['statistics'].get('segmentation', {})
-            report.append("## 🎯 Object Segmentation")
-            report.append(f"- **Classes detected:** {stats.get('num_classes', 'N/A')}")
-            report.append(f"- **Resolution:** {stats.get('image_size', 'N/A')}")
+            report.append("## 🎯 Object Detection Results")
+            report.append(f"""
+<div style='background-color: #f3f4f6; padding: 15px; border-radius: 8px;'>
+<strong>Total Objects Identified:</strong> {stats.get('num_classes', 'N/A')}<br>
+<strong>Image Resolution:</strong> {stats.get('image_size', 'N/A')}<br>
+<em style='color: #6b7280;'>Successfully identified floors, walls, furniture, and other room elements</em>
+</div>
+            """)
             report.append("")
 
-        report.append("## ⚫ Blackspot Analysis")
-        report.append(blackspot_report)
+        # Blackspot Analysis Section
+        report.append("## ⚫ Floor Blackspot Analysis")
+        if results['blackspot'] and results['statistics']['blackspot']['coverage_percentage'] > 0:
+            report.append("### 🔍 Detection Results:")
+            report.append(f"""
+<div style='background-color: #1f2937; color: white; padding: 15px; border-radius: 8px; font-family: monospace;'>
+{blackspot_report}
+</div>
+            """)
+            
+            # Severity assessment with visual indicators
+            coverage = results['statistics']['blackspot']['coverage_percentage']
+            if coverage > 10:
+                severity_color = "#dc2626"
+                severity_text = "SEVERE"
+                severity_desc = "Large dark areas detected - High fall risk"
+                severity_icon = "⛔"
+            elif coverage > 5:
+                severity_color = "#ef4444"
+                severity_text = "HIGH RISK"
+                severity_desc = "Significant dark areas present"
+                severity_icon = "🔴"
+            elif coverage > 2:
+                severity_color = "#f59e0b"
+                severity_text = "MODERATE"
+                severity_desc = "Some dark areas that may cause confusion"
+                severity_icon = "🟡"
+            else:
+                severity_color = "#22c55e"
+                severity_text = "LOW"
+                severity_desc = "Minor dark areas detected"
+                severity_icon = "🟢"
+            
+            report.append(f"""
+<div style='background-color: {severity_color}22; border-left: 4px solid {severity_color}; padding: 10px; margin: 10px 0;'>
+<strong style='color: {severity_color};'>{severity_icon} {severity_text}:</strong> {severity_desc}
+</div>
+            """)
+        else:
+            report.append("""
+<div style='background-color: #f0fdf4; padding: 15px; border-radius: 8px;'>
+✅ <strong>No hazardous blackspots detected on floor surfaces</strong>
+</div>
+            """)
         report.append("")
 
+        # Contrast Analysis Section
         report.append("## 🎨 Universal Contrast Analysis")
-        report.append(contrast_report)
+        if results['contrast'] and results['statistics']['contrast']['low_contrast_pairs'] > 0:
+            cs = results['statistics']['contrast']
+            
+            # Summary table with better styling
+            report.append("### 📈 Analysis Summary:")
+            report.append("""
+<table style='width: 100%; border-collapse: collapse; margin: 10px 0;'>
+<thead style='background-color: #f3f4f6;'>
+<tr>
+<th style='padding: 10px; text-align: left; border-bottom: 2px solid #e5e7eb;'>Severity Level</th>
+<th style='padding: 10px; text-align: center; border-bottom: 2px solid #e5e7eb;'>Count</th>
+<th style='padding: 10px; text-align: left; border-bottom: 2px solid #e5e7eb;'>Impact</th>
+</tr>
+</thead>
+<tbody>
+            """)
+            
+            report.append(f"""
+<tr style='background-color: #fef2f2;'>
+<td style='padding: 10px; border-bottom: 1px solid #e5e7eb;'><strong>🔴 Critical</strong></td>
+<td style='padding: 10px; text-align: center; border-bottom: 1px solid #e5e7eb;'><strong>{cs['critical_issues']}</strong></td>
+<td style='padding: 10px; border-bottom: 1px solid #e5e7eb;'>Immediate safety hazard</td>
+</tr>
+<tr style='background-color: #fffbeb;'>
+<td style='padding: 10px; border-bottom: 1px solid #e5e7eb;'><strong>🟠 High</strong></td>
+<td style='padding: 10px; text-align: center; border-bottom: 1px solid #e5e7eb;'><strong>{cs['high_priority_issues']}</strong></td>
+<td style='padding: 10px; border-bottom: 1px solid #e5e7eb;'>Significant navigation risk</td>
+</tr>
+<tr style='background-color: #fefce8;'>
+<td style='padding: 10px; border-bottom: 1px solid #e5e7eb;'><strong>🟡 Medium</strong></td>
+<td style='padding: 10px; text-align: center; border-bottom: 1px solid #e5e7eb;'><strong>{cs['medium_priority_issues']}</strong></td>
+<td style='padding: 10px; border-bottom: 1px solid #e5e7eb;'>Potential confusion</td>
+</tr>
+</tbody>
+</table>
+            """)
+            
+            # Detailed issues
+            report.append("### 🔎 Detailed Findings:")
+            report.append("""
+<div style='background-color: #f9fafb; border: 1px solid #e5e7eb; padding: 15px; border-radius: 8px; font-family: monospace; font-size: 0.9em;'>
+<pre style='margin: 0; white-space: pre-wrap;'>""" + contrast_report + """</pre>
+</div>
+            """)
+        else:
+            report.append("""
+<div style='background-color: #f0fdf4; padding: 15px; border-radius: 8px;'>
+✅ <strong>All adjacent objects have sufficient contrast</strong><br>
+<em style='color: #6b7280;'>Environment meets WCAG 2.1 accessibility guidelines</em>
+</div>
+            """)
         report.append("")
 
-        report.append("## 📋 Recommendations for Alzheimer's Care")
-
-        has_issues = False
-
+        # Recommendations Section
+        report.append("## 💡 Actionable Recommendations")
+        
+        recommendations = []
+        
         if results['blackspot'] and results['statistics']['blackspot']['coverage_percentage'] > 0:
-            has_issues = True
-            report.append("\n### Blackspot Mitigation:")
-            report.append("- Replace dark flooring materials with lighter alternatives")
-            report.append("- Install additional lighting in affected areas")
-            report.append("- Use light-colored rugs or runners to cover dark spots")
-            report.append("- Add contrasting tape or markers around blackspot perimeters")
-
-        if results['contrast'] and results['statistics']['contrast']['low_contrast_pairs'] > 0:
-            has_issues = True
-            report.append("\n### Contrast Improvements:")
-            
-            # Get specific recommendations based on issue types
-            contrast_issues = results['contrast']['issues']
-            critical_issues = [i for i in contrast_issues if i['severity'] == 'critical']
-            high_issues = [i for i in contrast_issues if i['severity'] == 'high']
-            
-            if critical_issues:
-                report.append("\n**CRITICAL - Immediate attention required:**")
-                for issue in critical_issues[:3]:
-                    cat1, cat2 = issue['categories']
-                    report.append(f"- {cat1.title()} ↔ {cat2.title()}: Increase contrast to 7:1 minimum")
-            
-            if high_issues:
-                report.append("\n**HIGH PRIORITY:**")
-                for issue in high_issues[:3]:
-                    cat1, cat2 = issue['categories']
-                    report.append(f"- {cat1.title()} ↔ {cat2.title()}: Increase contrast to 4.5:1 minimum")
-            
-            report.append("\n**General recommendations:**")
-            report.append("- Paint furniture in colors that contrast with floors/walls")
-            report.append("- Add colored tape or markers to furniture edges")
-            report.append("- Install LED strip lighting under furniture edges")
-            report.append("- Use contrasting placemats, cushions, or covers")
-
-        if not has_issues:
-            report.append("\n✅ **Excellent!** This environment appears well-optimized for individuals with Alzheimer's.")
-            report.append("No significant visual hazards detected.")
-
+            recommendations.append({
+                'priority': 'HIGH',
+                'category': 'Blackspot Mitigation',
+                'icon': '💡',
+                'actions': [
+                    "Install brighter LED lighting (3000+ lumens) in affected areas",
+                    "Replace dark flooring with light-colored alternatives (beige, light gray)",
+                    "Add light-colored area rugs or runners over dark spots",
+                    "Install motion-activated pathway lighting at floor level"
+                ]
+            })
+        
+        if results['contrast']:
+            critical_count = results['statistics']['contrast']['critical_issues']
+            high_count = results['statistics']['contrast']['high_priority_issues']
+            
+            if critical_count > 0:
+                recommendations.append({
+                    'priority': 'CRITICAL',
+                    'category': 'Critical Contrast Improvements',
+                    'icon': '🚨',
+                    'actions': [
+                        "Paint doors in colors that contrast strongly with walls (e.g., dark blue doors on light walls)",
+                        "Add high-contrast tape or strips to stair edges",
+                        "Install contrasting baseboards between floors and walls",
+                        "Use furniture colors that contrast with both floor and wall colors"
+                    ]
+                })
+            
+            if high_count > 0:
+                recommendations.append({
+                    'priority': 'HIGH',
+                    'category': 'High Priority Contrast Fixes',
+                    'icon': '⚠️',
+                    'actions': [
+                        "Replace similar-colored furniture with contrasting alternatives",
+                        "Add colorful cushions or throws to distinguish seating",
+                        "Install LED strip lighting under furniture edges",
+                        "Use contrasting placemats and table runners"
+                    ]
+                })
+        
+        if recommendations:
+            # Sort by priority
+            priority_order = {'CRITICAL': 0, 'HIGH': 1, 'MEDIUM': 2}
+            recommendations.sort(key=lambda x: priority_order.get(x['priority'], 3))
+            
+            for rec in recommendations:
+                if rec['priority'] == 'CRITICAL':
+                    bg_color = "#fef2f2"
+                    border_color = "#dc2626"
+                    timeline = "IMMEDIATE ACTION REQUIRED"
+                elif rec['priority'] == 'HIGH':
+                    bg_color = "#fffbeb"
+                    border_color = "#f59e0b"
+                    timeline = "Address Within 1 Week"
+                else:
+                    bg_color = "#f0f9ff"
+                    border_color = "#3b82f6"
+                    timeline = "Address Within 1 Month"
+                
+                report.append(f"""
+<div style='background-color: {bg_color}; border-left: 4px solid {border_color}; padding: 15px; margin: 15px 0; border-radius: 4px;'>
+<h3 style='margin: 0 0 10px 0; color: {border_color};'>{rec['icon']} {rec['category']}</h3>
+<p style='margin: 0 0 10px 0; font-style: italic; color: #6b7280;'>{timeline}</p>
+<ul style='margin: 0; padding-left: 20px;'>
+                """)
+                
+                for action in rec['actions']:
+                    report.append(f"<li style='margin: 5px 0;'>{action}</li>")
+                
+                report.append("""
+</ul>
+</div>
+                """)
+        else:
+            report.append("""
+<div style='background-color: #f0fdf4; padding: 20px; border-radius: 8px; text-align: center;'>
+<h3 style='color: #22c55e; margin: 0;'>✅ No immediate actions required</h3>
+<p style='margin: 10px 0 0 0;'>This environment is well-optimized for individuals with Alzheimer's or dementia.</p>
+</div>
+            """)
+        
+        # Footer
+        report.append("""
+---
+<div style='text-align: center; color: #6b7280; margin-top: 30px; font-size: 0.9em;'>
+<em>Report generated by NeuroNest v2.0 - Texas State University</em>
+</div>
+        """)
+        
         return "\n".join(report)
 
-    title = "🧠 NeuroNest: AI-Powered Environment Safety Analysis"
-    description = """
-    **Advanced visual analysis for Alzheimer's and dementia care environments. Texas State CS && Interior Design Dept. - Abheek Pradhan, Dr. Nadim Adi, Dr. Greg Lakomski**
-
-    This system provides:
-    - **Object Segmentation**: Identifies all room elements (floors, walls, furniture)
-    - **Floor-Only Blackspot Detection**: Locates dangerous dark areas on walking surfaces
-    - **Universal Contrast Analysis**: Evaluates visibility between ALL adjacent objects
-
-    *Following WCAG 2.1 guidelines for visual accessibility*
+    # Custom CSS for enhanced styling
+    css = """
+    .gradio-container {
+        font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+        max-width: 1400px !important;
+        margin: 0 auto;
+    }
+    .main-header {
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        color: white;
+        padding: 2rem;
+        border-radius: 12px;
+        margin-bottom: 2rem;
+        text-align: center;
+    }
+    .main-header h1 {
+        margin: 0 0 0.5rem 0;
+        font-size: 2.5rem;
+        font-weight: 700;
+    }
+    .main-header p {
+        margin: 0;
+        opacity: 0.9;
+        font-size: 1.1rem;
+    }
+    .control-panel {
+        background-color: #f9fafb;
+        border: 1px solid #e5e7eb;
+        border-radius: 12px;
+        padding: 1.5rem;
+        margin-bottom: 1.5rem;
+    }
+    .info-box {
+        background-color: #eff6ff;
+        border: 1px solid #3b82f6;
+        border-radius: 8px;
+        padding: 1rem;
+        margin: 1rem 0;
+    }
+    .warning-box {
+        background-color: #fef3c7;
+        border: 1px solid #f59e0b;
+        border-radius: 8px;
+        padding: 1rem;
+        margin: 1rem 0;
+    }
+    .button-primary {
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
+        color: white !important;
+        font-size: 1.2rem !important;
+        font-weight: 600 !important;
+        padding: 14px 28px !important;
+        border-radius: 8px !important;
+        border: none !important;
+        cursor: pointer !important;
+        transition: transform 0.2s !important;
+    }
+    .button-primary:hover {
+        transform: translateY(-2px) !important;
+        box-shadow: 0 10px 20px rgba(0,0,0,0.1) !important;
+    }
+    .result-section {
+        margin-top: 2rem;
+    }
+    .markdown-text {
+        font-size: 1.05rem;
+        line-height: 1.7;
+        color: #1f2937;
+    }
+    .analysis-report {
+        background-color: #ffffff;
+        border: 1px solid #e5e7eb;
+        border-radius: 12px;
+        padding: 2rem;
+        margin-top: 1.5rem;
+        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+    }
     """
 
-    with gr.Blocks() as interface:
-        gr.Markdown(f"# {title}")
-        gr.Markdown(description)
+    with gr.Blocks(css=css, title="NeuroNest - Environmental Safety Analysis", theme=gr.themes.Soft()) as interface:
+        # Enhanced Header
+        gr.HTML("""
+        <div class="main-header">
+            <h1>🧠 NeuroNest: AI-Powered Environment Safety Analysis</h1>
+            <p>Advanced visual analysis for Alzheimer's and dementia care environments</p>
+            <p style="font-size: 0.9rem; margin-top: 0.5rem;">Texas State CS & Interior Design Dept. • Abheek Pradhan, Dr. Nadim Adi, Dr. Greg Lakomski</p>
+        </div>
+        """)
+        
+        # Quick Start Guide
+        with gr.Row():
+            gr.HTML("""
+            <div class="info-box" style="width: 100%;">
+                <h3 style="margin-top: 0;">🚀 Quick Start Guide</h3>
+                <ol style="margin: 10px 0;">
+                    <li><strong>Upload</strong> a well-lit photo of the room</li>
+                    <li><strong>Adjust</strong> detection settings if needed (optional)</li>
+                    <li><strong>Click</strong> "Analyze Environment" button</li>
+                    <li><strong>Review</strong> the visual results and detailed report below</li>
+                </ol>
+                <p style="margin-bottom: 0;"><em>The analysis identifies safety hazards and provides actionable recommendations for creating dementia-friendly spaces.</em></p>
+            </div>
+            """)
 
-        # Information about model availability
+        # System status notification
         if not blackspot_ok:
-            gr.Markdown("""
-            ⚠️ **Note:** Blackspot detection model not available. 
-            To enable blackspot detection, upload the model to HuggingFace or ensure it's in the local directory.
+            gr.HTML("""
+            <div class="warning-box">
+                <strong>⚠️ Limited Functionality:</strong> Blackspot detection model not available. 
+                Upload the model to HuggingFace or place in local directory to enable floor hazard detection.
+            </div>
             """)
 
-        # Top row: toggles and sliders
-        with gr.Row():
-            enable_blackspot = gr.Checkbox(
-                value=blackspot_ok,
-                label="Enable Floor Blackspot Detection",
-                interactive=blackspot_ok
-            )
-            blackspot_threshold = gr.Slider(
-                minimum=0.1,
-                maximum=0.9,
-                value=0.5,
-                step=0.05,
-                label="Blackspot Sensitivity",
-                visible=blackspot_ok
-            )
-            enable_contrast = gr.Checkbox(
-                value=True,
-                label="Enable Universal Contrast Analysis"
-            )
-            contrast_threshold = gr.Slider(
-                minimum=3.0,
-                maximum=7.0,
-                value=4.5,
-                step=0.1,
-                label="WCAG Contrast Threshold"
-            )
+        # Analysis Controls Section
+        with gr.Group():
+            gr.Markdown("## 🎛️ Analysis Settings")
+            
+            with gr.Row():
+                with gr.Column(scale=1):
+                    gr.HTML("""
+                    <div class="control-panel">
+                        <h4 style="margin-top: 0;">🔍 Detection Options</h4>
+                    """)
+                    
+                    enable_blackspot = gr.Checkbox(
+                        value=blackspot_ok,
+                        label="Enable Floor Blackspot Detection",
+                        info="Identifies dark areas on floors that may appear as holes to people with dementia",
+                        interactive=blackspot_ok,
+                        elem_classes="checkbox-custom"
+                    )
+                    
+                    blackspot_threshold = gr.Slider(
+                        minimum=0.1,
+                        maximum=0.9,
+                        value=0.5,
+                        step=0.05,
+                        label="Detection Sensitivity",
+                        info="Lower values detect lighter shadows • Higher values detect only very dark areas",
+                        visible=blackspot_ok,
+                        elem_classes="slider-custom"
+                    )
+                    
+                    gr.HTML("</div>")
+                
+                with gr.Column(scale=1):
+                    gr.HTML("""
+                    <div class="control-panel">
+                        <h4 style="margin-top: 0;">🎨 Contrast Analysis</h4>
+                    """)
+                    
+                    enable_contrast = gr.Checkbox(
+                        value=True,
+                        label="Enable Universal Contrast Analysis",
+                        info="Evaluates visibility between all adjacent objects (walls, floors, furniture)",
+                        elem_classes="checkbox-custom"
+                    )
+                    
+                    contrast_threshold = gr.Slider(
+                        minimum=3.0,
+                        maximum=7.0,
+                        value=4.5,
+                        step=0.1,
+                        label="WCAG Contrast Threshold",
+                        info="4.5:1 = Standard accessibility • 7:1 = Enhanced for critical areas",
+                        elem_classes="slider-custom"
+                    )
+                    
+                    gr.HTML("</div>")
 
-        # Next row: image upload and analyze button
-        with gr.Row():
-            with gr.Column():
-                image_input = gr.Image(
-                    label="📸 Upload Room Image",
-                    type="filepath",
-                    height=300
-                )
-            with gr.Column():
-                analyze_button = gr.Button(
-                    "🔍 Analyze Environment",
-                    variant="primary"
-                )
-
-        # Next row: segmented, blackspot, and contrast images side by side
-        with gr.Row():
-            seg_display = gr.Image(
-                label="🎯 Segmented Objects",
-                height=250,
-                interactive=False
-            )
-            blackspot_display = gr.Image(
-                label="⚫ Blackspot Detection",
-                height=250,
-                interactive=False,
-                visible=blackspot_ok
-            )
-            contrast_display = gr.Image(
-                label="🎨 Contrast Analysis",
-                height=250,
-                interactive=False
+        # Image Upload Section
+        with gr.Group():
+            gr.Markdown("## 📸 Room Image Upload")
+            
+            with gr.Row():
+                with gr.Column(scale=2):
+                    image_input = gr.Image(
+                        label="Upload Room Photo",
+                        type="filepath",
+                        height=400,
+                        elem_classes="image-upload"
+                    )
+                    
+                    analyze_button = gr.Button(
+                        "🔍 Analyze Environment",
+                        variant="primary",
+                        size="lg",
+                        elem_classes="button-primary"
+                    )
+                
+                with gr.Column(scale=1):
+                    gr.HTML("""
+                    <div class="info-box">
+                        <h4 style="margin-top: 0;">📷 Photo Guidelines</h4>
+                        <ul style="margin: 10px 0;">
+                            <li>Stand in corner for wide view</li>
+                            <li>Include floor, walls & furniture</li>
+                            <li>Turn on all room lights</li>
+                            <li>Avoid shadows and glare</li>
+                            <li>Use horizontal orientation</li>
+                        </ul>
+                        <p style="margin-bottom: 0;"><strong>Best:</strong> Daytime photos with natural light</p>
+                    </div>
+                    """)
+
+        # Results Section
+        with gr.Group():
+            gr.Markdown("## 🔬 Visual Analysis Results")
+            
+            gr.HTML("""
+            <p style="color: #6b7280; margin-bottom: 1rem;">
+            Hover over images for details • Colors indicate: 🟢 Safe • 🟡 Caution • 🔴 Hazard
+            </p>
+            """)
+            
+            with gr.Row():
+                with gr.Column():
+                    seg_display = gr.Image(
+                        label="🎯 Object Segmentation",
+                        height=300,
+                        interactive=False,
+                        elem_classes="result-image"
+                    )
+                    gr.HTML("""
+                    <p style="text-align: center; color: #6b7280; font-size: 0.9rem; margin-top: 0.5rem;">
+                    Identifies all room elements
+                    </p>
+                    """)
+                
+                with gr.Column():
+                    blackspot_display = gr.Image(
+                        label="⚫ Floor Blackspot Detection",
+                        height=300,
+                        interactive=False,
+                        visible=blackspot_ok,
+                        elem_classes="result-image"
+                    )
+                    if blackspot_ok:
+                        gr.HTML("""
+                        <p style="text-align: center; color: #6b7280; font-size: 0.9rem; margin-top: 0.5rem;">
+                        Red = Hazardous dark areas
+                        </p>
+                        """)
+                
+                with gr.Column():
+                    contrast_display = gr.Image(
+                        label="🎨 Contrast Analysis",
+                        height=300,
+                        interactive=False,
+                        elem_classes="result-image"
+                    )
+                    gr.HTML("""
+                    <p style="text-align: center; color: #6b7280; font-size: 0.9rem; margin-top: 0.5rem;">
+                    Colored borders = Low contrast
+                    </p>
+                    """)
+
+        # Detailed Report Section
+        with gr.Group():
+            gr.Markdown("## 📊 Comprehensive Safety Report")
+            
+            analysis_report = gr.Markdown(
+                value="""
+                <div style='text-align: center; padding: 3rem; color: #6b7280;'>
+                    <p style='font-size: 1.2rem;'>📤 Upload an image and click 'Analyze Environment' to generate your safety report</p>
+                    <p>The report will include detailed findings and personalized recommendations</p>
+                </div>
+                """,
+                elem_classes="analysis-report markdown-text"
             )
 
-        # Bottom: analysis report always visible
-        analysis_report = gr.Markdown(
-            value="Upload an image and click 'Analyze Environment' to begin."
-        )
+        # Detailed Guide (Collapsible)
+        with gr.Accordion("📚 Detailed User Guide & Best Practices", open=False):
+            gr.Markdown("""
+            ## 🎯 Understanding the Analysis
+            
+            ### What Each Analysis Does:
+            
+            **1. Object Segmentation** 🎯
+            - Identifies all elements in the room (floors, walls, furniture, etc.)
+            - Creates a foundation map for other analyses
+            - Helps understand spatial relationships
+            
+            **2. Floor Blackspot Detection** ⚫
+            - Finds dark areas on walking surfaces only
+            - Ignores shadows on walls or furniture
+            - Critical for preventing falls in dementia patients
+            
+            **3. Universal Contrast Analysis** 🎨
+            - Examines color differences between ALL adjacent objects
+            - Not just floor-to-furniture, but everything touching
+            - Ensures clear visual boundaries throughout the space
+            
+            ### 📊 Interpreting Results:
+            
+            **Severity Levels:**
+            - **🔴 Critical**: Immediate safety hazard - fix within 24 hours
+            - **🟠 High**: Significant risk - address within 1 week  
+            - **🟡 Medium**: Potential confusion - fix within 1 month
+            - **🟢 Low/Safe**: Acceptable for most individuals
+            
+            **WCAG Contrast Ratios:**
+            - **3:1** - Minimum for large text/graphics
+            - **4.5:1** - Standard for normal text (recommended)
+            - **7:1** - Enhanced for critical areas like stairs
+            
+            ### 💡 Common Issues & Solutions:
+            
+            **Low Contrast Problems:**
+            - White walls + beige furniture → Add colorful cushions
+            - Similar floor/wall colors → Install contrasting baseboards
+            - Invisible door frames → Paint doors in contrasting colors
+            
+            **Blackspot Hazards:**
+            - Dark rugs on light floors → Replace with light colors
+            - Shadows from poor lighting → Add floor-level LED strips
+            - Dark flooring materials → Install light-colored overlays
+            
+            ### 🏠 Room-Specific Tips:
+            
+            **Living Room:**
+            - Ensure sofa contrasts with floor AND wall
+            - Coffee tables need defined edges
+            - Pathways should be clearly visible
+            
+            **Bedroom:**
+            - Bed frame must contrast with floor
+            - Night path to bathroom needs good visibility
+            - Nightstands should stand out from walls
+            
+            **Bathroom:**
+            - Critical contrast between floor and fixtures
+            - Non-slip surfaces in contrasting colors
+            - Grab bars in colors that pop against walls
+            
+            ### 📸 Taking Better Photos:
+            
+            1. **Lighting**: Turn on ALL lights, open curtains
+            2. **Angle**: Stand in corner, capture whole room
+            3. **Height**: Hold camera at eye level
+            4. **Multiple**: Take several angles if needed
+            5. **Quality**: Higher resolution = better analysis
+            
+            ### ⚠️ Special Considerations:
+            
+            - Patterns can be confusing - solid colors work better
+            - Glossy surfaces may create false shadows
+            - Consider time of day - shadows change
+            - Test changes with actual lighting conditions
+            """)
 
+        # Resource Links
+        with gr.Row():
+            gr.HTML("""
+            <div style='background-color: #f3f4f6; padding: 20px; border-radius: 12px; margin-top: 2rem;'>
+                <h4 style='margin-top: 0;'>📚 Additional Resources</h4>
+                <div style='display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px;'>
+                    <div>
+                        <strong>🔗 WCAG Guidelines</strong><br>
+                        <a href='https://www.w3.org/WAI/WCAG21/quickref/' target='_blank'>Web Accessibility Standards</a>
+                    </div>
+                    <div>
+                        <strong>🏠 Dementia Design</strong><br>
+                        <a href='https://www.alzheimers.org.uk/get-support/making-your-home-dementia-friendly' target='_blank'>Home Modification Guide</a>
+                    </div>
+                    <div>
+                        <strong>💡 Lighting Tips</strong><br>
+                        <a href='https://www.dementia.org.au/resources/good-design' target='_blank'>Illumination Best Practices</a>
+                    </div>
+                    <div>
+                        <strong>🎨 Color Contrast</strong><br>
+                        <a href='https://webaim.org/resources/contrastchecker/' target='_blank'>Online Contrast Checker</a>
+                    </div>
+                </div>
+            </div>
+            """)
+
+        # Footer
+        gr.HTML("""
+        <div style='text-align: center; color: #6b7280; margin-top: 3rem; padding: 2rem; border-top: 1px solid #e5e7eb;'>
+            <p><strong>NeuroNest v2.0</strong> • Enhanced AI-Powered Environmental Safety Analysis</p>
+            <p style='font-size: 0.9rem;'>Creating safer spaces for cognitive health through computer vision and AI</p>
+            <p style='font-size: 0.85rem; margin-top: 1rem;'>
+                © 2024 Texas State University • Computer Science & Interior Design Departments<br>
+                For research collaboration: neuronest@txstate.edu
+            </p>
+        </div>
+        """)
+
+        # Event handlers
         analyze_button.click(
             fn=analyze_wrapper,
             inputs=[
@@ -764,12 +1266,6 @@ def create_gradio_interface():
             ]
         )
 
-        gr.Markdown("""
-            ---
-            **NeuroNest** v2.0 - Enhanced with floor-only blackspot detection and universal contrast analysis  
-            *Creating safer environments for cognitive health through AI*
-            """)
-
     return interface
 
 ########################################