update gradio style

src/ui/styles.py

@@ -21,35 +21,6 @@ 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():
@@ -67,42 +38,35 @@ def create_theme():
 def get_header_html() -> str:
     """Get HTML for application header."""
     return """
-    <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 class="header">
+        <h1 style="margin:0;">🔬 MelanoScope AI</h1>
+        <span class="badge">UCV Thesis Research</span>
+        <span class="badge">Production Ready</span>
     </div>
+    
+    <h3 style="color: #475569; margin: 8px 0;">NFNet-L0 Convolutional Neural Network for Dermatoscopic Image Classification</h3>
+    
+    <p style="color: #64748b; margin: 12px 0; font-size: 14px;">
+        <strong>🎓 Institution:</strong> Universidad Central de Venezuela • 
+        <strong>🧠 Architecture:</strong> NFNet-L0 + Weight Standardization • 
+        <strong>🎯 Validation Accuracy:</strong> 96.17% (0.961718) • 
+        <strong>⚡ Optimization:</strong> ONNX Runtime
+    </p>
+    
+    <p style="color: #64748b; margin: 12px 0; font-size: 14px;">
+        <strong>📊 F1-Score:</strong> 0.96 • 
+        <strong>🔍 Specificity:</strong> 1.0 (Perfect) • 
+        <strong>💾 Model Size:</strong> 24.1M parameters • 
+        <strong>🚀 Inference:</strong> Sub-second latency
+    </p>
+    
+    <p style="color: #374151; margin: 12px 0;">
+        <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 Cross Entropy Loss optimization, Adam optimizer fine-tuning, and data augmentation strategies.
+    </p>
+    
+    <p style="color: #dc2626; font-size: 13px; font-weight: 500;">
+        ⚠️ UCV Research Prototype • Not for clinical diagnosis • Educational purposes only
+    </p>
     """
 
 def get_footer_html() -> str:
@@ -110,45 +74,31 @@ def get_footer_html() -> str:
     from ..config.settings import AppConfig
     
     return f"""
-    <div style="background: #f8fafc; padding: 20px; border-radius: 12px; margin-top: 24px; text-align: center;">
+    <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>
         
-        <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>
+        <p style="margin: 0 0 8px 0; font-size: 13px; color: #64748b;">
+            <strong>Institution:</strong> {AppConfig.INSTITUTION} | 
+            <strong>Thesis Advisor:</strong> Dra. Margarita Oliver Lull | 
+            <strong>Research Focus:</strong> CNN Architecture Optimization
+        </p>
+        
+        <p style="margin: 0 0 8px 0; font-size: 13px; color: #64748b;">
+            <strong>Architecture:</strong> NFNet-L0 (24.1M params) | 
+            <strong>Dataset:</strong> ISIC + Clinical Images (22,618 total) | 
+            <strong>Optimization:</strong> Weight Standardization + Adam
+        </p>
+        
+        <p style="margin: 0 0 8px 0; font-size: 13px; color: #64748b;">
+            <strong>Performance:</strong> Precision 96.0%, Recall 96.0%, F1-Score 0.96, Specificity 1.0 | 
+            <strong>Loss:</strong> Cross Entropy 0.122597 (final)
+        </p>
+        
+        <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 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>
     """