update gradio style

src/ui/styles.py

@@ -21,6 +21,35 @@ def get_custom_css() -> str:
     .gradio-container { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; }
     .gr-button { transition: all 0.2s ease; }
     .gr-button:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); }
+    
+    /* Professional header styling */
+    .project-header { 
+        background: linear-gradient(135deg, #f8fafc, #f1f5f9); 
+        padding: 20px; 
+        border-radius: 12px; 
+        border-left: 4px solid #e11d48; 
+        margin-bottom: 20px;
+    }
+    .research-badge {
+        display: inline-block;
+        background: #dcfce7;
+        color: #166534;
+        padding: 4px 12px;
+        border-radius: 20px;
+        font-size: 12px;
+        font-weight: 600;
+        margin-left: 12px;
+    }
+    .demo-badge {
+        display: inline-block;
+        background: #fef3c7;
+        color: #92400e;
+        padding: 4px 12px;
+        border-radius: 20px;
+        font-size: 12px;
+        font-weight: 600;
+        margin-left: 8px;
+    }
     """
 
 def create_theme():
@@ -38,27 +67,42 @@ def create_theme():
 def get_header_html() -> str:
     """Get HTML for application header."""
     return """
-    <div class="header">
-        <h1 style="margin:0;">🔬 MelanoScope AI</h1>
-        <span class="badge">Research Project</span>
-        <span class="badge">Live Demo</span>
+    <div class="project-header">
+        <h1 style="margin: 0; color: #1e293b; font-size: 28px;">
+            🔬 MelanoScope AI
+            <span class="research-badge">UCV Thesis Research</span>
+            <span class="demo-badge">Production Ready</span>
+        </h1>
+        
+        <h2 style="margin: 12px 0 8px 0; color: #475569; font-size: 18px; font-weight: 500;">
+            NFNet-L0 Convolutional Neural Network for Dermatoscopic Image Classification
+        </h2>
+        
+        <p style="margin: 16px 0; color: #64748b; font-size: 14px; line-height: 1.6;">
+            <strong>🎓 Institution:</strong> Universidad Central de Venezuela &nbsp;•&nbsp;
+            <strong>🧠 Architecture:</strong> NFNet-L0 + Weight Standardization &nbsp;•&nbsp;
+            <strong>🎯 Validation Accuracy:</strong> 96.17% (0.961718) &nbsp;•&nbsp;
+            <strong>⚡ Optimization:</strong> ONNX Runtime Deployment
+        </p>
+        
+        <p style="margin: 16px 0; color: #64748b; font-size: 14px; line-height: 1.6;">
+            <strong>📊 F1-Score:</strong> 0.96 &nbsp;•&nbsp;
+            <strong>🔍 Specificity:</strong> 1.0 (Perfect) &nbsp;•&nbsp;
+            <strong>💾 Model Size:</strong> 24.1M parameters &nbsp;•&nbsp;
+            <strong>🚀 Inference:</strong> Sub-second latency
+        </p>
+        
+        <p style="margin: 16px 0 8px 0; color: #374151; font-size: 14px; line-height: 1.6;">
+            <strong>Upload a dermatoscopic image</strong> to experience real-time CNN inference with 
+            comprehensive medical information retrieval. This research prototype demonstrates 
+            advanced deep learning techniques including <em>Cross Entropy Loss optimization</em>, 
+            <em>Adam optimizer fine-tuning</em>, and <em>data augmentation strategies</em>.
+        </p>
+        
+        <p style="margin: 8px 0 0 0; color: #dc2626; font-size: 13px; font-weight: 500;">
+            ⚠️ UCV Research Prototype • Not for clinical diagnosis • Educational purposes only
+        </p>
     </div>
-    <h3 style="color: #475569; margin: 8px 0;">Advanced CNN-based Dermatoscopic Image Classification System</h3>
-    
-    <p style="color: #64748b; margin: 12px 0; font-size: 14px;">
-        <strong>🎓 Research Institution:</strong> Universidad Central de Venezuela &nbsp;|&nbsp; 
-        <strong>🔬 Domain:</strong> Computer Vision in Medical Diagnostics &nbsp;|&nbsp; 
-        <strong>🎯 Achievement:</strong> 94% Classification Accuracy
-    </p>
-    
-    <p style="color: #374151; margin: 12px 0;">
-        Upload a dermatoscopic image to experience real-time CNN inference with comprehensive medical information retrieval. 
-        This system demonstrates production-ready AI deployment with sub-second latency and clinical-grade accuracy.
-    </p>
-    
-    <p style="color: #dc2626; font-size: 13px; font-weight: 500; margin: 8px 0;">
-        ⚠️ Research prototype • Not for clinical diagnosis • Educational purposes only
-    </p>
     """
 
 def get_footer_html() -> str:
@@ -66,21 +110,45 @@ def get_footer_html() -> str:
     from ..config.settings import AppConfig
     
     return f"""
-    <div style="text-align: center; padding: 20px; background: #f8fafc; border-radius: 8px; margin-top: 20px;">
-        <p style="margin: 0 0 8px 0; color: #1e293b; font-weight: 600;">🎓 Academic Research Project</p>
-        <p style="margin: 0 0 8px 0; font-size: 13px; color: #64748b;">
-            <strong>Institution:</strong> {AppConfig.INSTITUTION} &nbsp;|&nbsp; 
-            <strong>Focus:</strong> Deep Learning in Medical Imaging &nbsp;|&nbsp; 
-            <strong>Thesis:</strong> CNN Architecture Optimization
-        </p>
-        <p style="margin: 0 0 8px 0; font-size: 13px; color: #64748b;">
-            <strong>Technical:</strong> NFNet-L0 → ONNX (3.2M params) &nbsp;|&nbsp; 
-            <strong>Performance:</strong> 94% accuracy, <50ms latency &nbsp;|&nbsp; 
-            <strong>Stack:</strong> Gradio + HuggingFace Spaces
-        </p>
-        <p style="margin: 0; font-size: 11px; color: #94a3b8;">
-            Model v{AppConfig.VERSION} • Updated {AppConfig.LAST_UPDATE} • Research & Development by Daniel Cavadia
-        </p>
+    <div style="background: #f8fafc; padding: 20px; border-radius: 12px; margin-top: 24px; text-align: center;">
+        
+        <div style="display: flex; justify-content: space-around; flex-wrap: wrap; gap: 20px; margin-bottom: 16px;">
+            
+            <div style="min-width: 200px;">
+                <h4 style="color: #1e293b; margin: 0 0 8px 0; font-size: 14px;">🎓 Academic Research</h4>
+                <p style="margin: 0; font-size: 12px; color: #64748b; line-height: 1.4;">
+                    <strong>Institution:</strong> {AppConfig.INSTITUTION}<br>
+                    <strong>Thesis Advisor:</strong> Dra. Margarita Oliver Lull<br>
+                    <strong>Research Focus:</strong> CNN Architecture Optimization
+                </p>
+            </div>
+            
+            <div style="min-width: 200px;">
+                <h4 style="color: #1e293b; margin: 0 0 8px 0; font-size: 14px;">⚙️ Technical Implementation</h4>
+                <p style="margin: 0; font-size: 12px; color: #64748b; line-height: 1.4;">
+                    <strong>Architecture:</strong> NFNet-L0 (24.1M params)<br>
+                    <strong>Optimization:</strong> Weight Standardization + Adam<br>
+                    <strong>Dataset:</strong> ISIC + Clinical Images (22,618 total)
+                </p>
+            </div>
+            
+            <div style="min-width: 200px;">
+                <h4 style="color: #1e293b; margin: 0 0 8px 0; font-size: 14px;">📊 Performance Metrics</h4>
+                <p style="margin: 0; font-size: 12px; color: #64748b; line-height: 1.4;">
+                    <strong>Precision:</strong> 96.0% &nbsp;•&nbsp; <strong>Recall:</strong> 96.0%<br>
+                    <strong>F1-Score:</strong> 0.96 &nbsp;•&nbsp; <strong>Specificity:</strong> 1.0<br>
+                    <strong>Cross Entropy Loss:</strong> 0.122597 (final)
+                </p>
+            </div>
+            
+        </div>
+        
+        <div style="border-top: 1px solid #e2e8f0; padding-top: 12px;">
+            <p style="margin: 0; font-size: 11px; color: #94a3b8;">
+                Model Version: {AppConfig.VERSION} • Last Updated: {AppConfig.LAST_UPDATE} • 
+                Research & Development by Daniel Cavadia • TEG UCV 2025
+            </p>
+        </div>
     </div>
     """
 
@@ -88,9 +156,11 @@ def get_model_info_html() -> str:
     """Get HTML for model information."""
     from ..config.settings import AppConfig
     return (
-        "- <strong>Architecture:</strong> NFNet CNN exported to ONNX format<br>"
-        "- <strong>Training:</strong> Dermatoscopic dataset with data augmentation<br>"
-        "- <strong>Optimization:</strong> Model quantization and runtime acceleration<br>"
-        "- <strong>Deployment:</strong> Production-ready inference pipeline<br><br>"
+        "- <strong>Base Architecture:</strong> NFNet-L0 pre-trained on ImageNet-1k<br>"
+        "- <strong>Training Strategy:</strong> Fine-tuning with frozen layers + adaptive unfreezing<br>"
+        "- <strong>Data Augmentation:</strong> Rotations, lighting adjustments, geometric distortions<br>"
+        "- <strong>Loss Function:</strong> Cross Entropy Loss Flat with Adam optimizer<br>"
+        "- <strong>Validation Protocol:</strong> Stratified train/validation split with confusion matrix analysis<br>"
+        "- <strong>Export Format:</strong> ONNX (Open Neural Network Exchange) for production deployment<br><br>"
         f"<em style='color: #dc2626;'>{AppConfig.MEDICAL_DISCLAIMER}</em>"
     )