update 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,57 +67,46 @@ def create_theme():
 def get_header_html() -> str:
     """Get HTML for application header."""
     return """
-    <div class="header">
-        <div style="display: flex; align-items: center; gap: 16px; margin-bottom: 8px;">
-            <h1 style="margin:0; background: linear-gradient(135deg, #e11d48, #be185d); 
-                       -webkit-background-clip: text; -webkit-text-fill-color: transparent; 
-                       background-clip: text;">
-                MelanoScope AI
-            </h1>
-            <span class="badge" style="background: #f1f5f9; color: #334155; font-weight: 600;">
-                Research Project
-            </span>
-            <span class="badge" style="background: #dcfce7; color: #166534; font-weight: 600;">
-                Live Demo
-            </span>
-        </div>
+    <div class="project-header">
+        <h1 style="margin: 0; color: #1e293b; font-size: 28px;">
+            🔬 MelanoScope AI
+            <span class="research-badge">Research Project</span>
+            <span class="demo-badge">Live Demo</span>
+        </h1>
         
-        <p style="font-size: 18px; color: #475569; margin: 8px 0; font-weight: 500;">
-            <strong>Advanced CNN-based Dermatoscopic Image Classification System</strong>
-        </p>
+        <h2 style="margin: 12px 0 8px 0; color: #475569; font-size: 18px; font-weight: 500;">
+            Advanced CNN-based Dermatoscopic Image Classification System
+        </h2>
         
-        <div style="background: linear-gradient(135deg, #f8fafc, #f1f5f9); 
-                    padding: 16px; border-radius: 12px; border-left: 4px solid #e11d48; 
-                    margin: 12px 0;">
-            <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); 
-                        gap: 12px; font-size: 14px; color: #64748b;">
-                <div>📋 <strong>Research Institution:</strong> Universidad Central de Venezuela</div>
-                <div>🔬 <strong>Domain:</strong> Computer Vision in Medical Diagnostics</div>
-                <div>🎯 <strong>Achievement:</strong> 94% Classification Accuracy</div>
-                <div>⚡ <strong>Architecture:</strong> NFNet + ONNX Runtime Optimization</div>
-            </div>
-        </div>
+        <p style="margin: 16px 0; color: #64748b; font-size: 14px; line-height: 1.6;">
+            <strong>📋 Institution:</strong> Universidad Central de Venezuela &nbsp;•&nbsp;
+            <strong>🔬 Domain:</strong> Computer Vision in Medical Diagnostics &nbsp;•&nbsp;
+            <strong>🎯 Achievement:</strong> 94% Classification Accuracy &nbsp;•&nbsp;
+            <strong>⚡ Architecture:</strong> NFNet + ONNX Runtime
+        </p>
         
-        <p style="margin-top: 12px; color: #64748b; font-size: 14px; line-height: 1.6;">
+        <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 system demonstrates production-ready 
-            AI deployment capabilities with sub-second latency and clinical-grade accuracy.
-            <br><br>
-            <em style="color: #dc2626; font-weight: 500;">⚠️ Research prototype • Not for clinical diagnosis • Educational purposes only</em>
+            AI deployment with sub-second latency and clinical-grade accuracy.
+        </p>
+        
+        <p style="margin: 8px 0 0 0; color: #dc2626; font-size: 13px; font-weight: 500;">
+            ⚠️ Research prototype • Not for clinical diagnosis • Educational purposes only
         </p>
     </div>
     """
 
-
 def get_footer_html() -> str:
     """Get HTML for application footer."""
     from ..config.settings import AppConfig
     
     return f"""
-    <div class='footer' style="background: #f8fafc; padding: 20px; border-radius: 12px; margin-top: 24px;">
-        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px; text-align: left;">
+    <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>
+            <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>
@@ -97,27 +115,27 @@ def get_footer_html() -> str:
                 </p>
             </div>
             
-            <div>
-                <h4 style="color: #1e293b; margin: 0 0 8px 0; font-size: 14px;">⚙️ Technical Implementation</h4>
+            <div style="min-width: 200px;">
+                <h4 style="color: #1e293b; margin: 0 0 8px 0; font-size: 14px;">⚙️ Technical Stack</h4>
                 <p style="margin: 0; font-size: 12px; color: #64748b; line-height: 1.4;">
-                    <strong>Model:</strong> NFNet-L0 (99.8M→3.2M parameters)<br>
-                    <strong>Optimization:</strong> ONNX Runtime + Quantization<br>
+                    <strong>Model:</strong> NFNet-L0 (3.2M parameters)<br>
+                    <strong>Optimization:</strong> ONNX Runtime<br>
                     <strong>Deployment:</strong> Gradio + HuggingFace Spaces
                 </p>
             </div>
             
-            <div>
-                <h4 style="color: #1e293b; margin: 0 0 8px 0; font-size: 14px;">📊 Performance Metrics</h4>
+            <div style="min-width: 200px;">
+                <h4 style="color: #1e293b; margin: 0 0 8px 0; font-size: 14px;">📊 Performance</h4>
                 <p style="margin: 0; font-size: 12px; color: #64748b; line-height: 1.4;">
-                    <strong>Accuracy:</strong> 94% on validation set<br>
-                    <strong>Latency:</strong> <50ms inference time<br>
+                    <strong>Accuracy:</strong> 94% validation<br>
+                    <strong>Latency:</strong> <50ms inference<br>
                     <strong>Efficiency:</strong> 99.8% parameter reduction
                 </p>
             </div>
             
         </div>
         
-        <div style="border-top: 1px solid #e2e8f0; margin-top: 16px; padding-top: 12px; text-align: center;">
+        <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
@@ -126,12 +144,13 @@ def get_footer_html() -> str:
     </div>
     """
 
-
 def get_model_info_html() -> str:
     """Get HTML for model information."""
     from ..config.settings import AppConfig
     return (
-        "- Architecture: CNN exported to ONNX format<br>"
-        "- Training: Dermatoscopic dataset (see documentation)<br>"
-        f"- Note: {AppConfig.MEDICAL_DISCLAIMER}"
+        "- <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>"
+        f"<em style='color: #dc2626;'>{AppConfig.MEDICAL_DISCLAIMER}</em>"
     )