"""UI styling and theming for MelanoScope AI."""
import logging
from ..config.settings import UIConfig
logger = logging.getLogger(__name__)
def get_custom_css() -> str:
"""Get custom CSS styles."""
return """
.header { display: flex; align-items: center; gap: 12px; }
.badge { font-size: 12px; padding: 4px 8px; border-radius: 12px;
background: #f1f5f9; color: #334155; }
.pred-card { font-size: 18px; }
.footer { font-size: 12px; color: #64748b; text-align: center; padding: 12px 0; }
button, .gradio-container .gr-box, .gradio-container .gr-panel {
border-radius: 10px !important;
}
.vega-embed .mark-rect, .vega-embed .mark-bar, .vega-embed .role-mark rect {
fill: #ef4444 !important;
}
.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); }
"""
def create_theme():
"""Create application theme."""
try:
import gradio as gr
return gr.themes.Soft(
primary_hue=UIConfig.THEME_PRIMARY_HUE,
secondary_hue=UIConfig.THEME_SECONDARY_HUE
)
except Exception as e:
logger.warning(f"Theme creation failed, using default: {e}")
return None
def get_header_html() -> str:
"""Get HTML for application header."""
return """
NFNet-L0 Convolutional Neural Network for Dermatoscopic Image Classification
🎓 Institution: Universidad Central de Venezuela •
🧠 Architecture: NFNet-L0 + Weight Standardization •
🎯 Validation Accuracy: 96.17% (0.9617) •
⚡ Optimization: ONNX Runtime
📊 F1-Score: 0.9608 •
🎯 Precision: 86.67% •
📈 Recall: 96.03% •
💾 Model Size: 24.1M parameters
Upload a dermatoscopic image 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.
⚠️ UCV Research Prototype • Not for clinical diagnosis • Educational purposes only
"""
def get_footer_html() -> str:
"""Get HTML for application footer."""
from ..config.settings import AppConfig
return f"""
---
**🎓 Academic Research Project**
**Institution:** {AppConfig.INSTITUTION}
**Advisor:** Dra. Margarita Oliver Lull
**Focus:** CNN Architecture Optimization
**Technical Stack:** NFNet-L0 (24.1M params) • Weight Standardization • Adam Optimizer
**Dataset:** ISIC + Clinical Images (22,618 total)
**Performance:** 96.17% Accuracy • F1-Score 0.9608 • Precision 86.67% • Recall 96.03%
---
*Model v{AppConfig.VERSION} • Updated {AppConfig.LAST_UPDATE} • Research by Daniel Cavadia • TEG UCV 2025*
"""
def get_model_info_html() -> str:
"""Get HTML for model information."""
from ..config.settings import AppConfig
return (
"- Base Architecture: NFNet-L0 pre-trained on ImageNet-1k
"
"- Training Strategy: Fine-tuning with frozen layers + adaptive unfreezing
"
"- Data Augmentation: Rotations, lighting adjustments, geometric distortions
"
"- Loss Function: Cross Entropy Loss Flat with Adam optimizer
"
"- Validation Protocol: Stratified train/validation split with confusion matrix analysis
"
"- Export Format: ONNX (Open Neural Network Exchange) for production deployment
"
f"{AppConfig.MEDICAL_DISCLAIMER}"
)