src/ui/styles.py

"""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 """

    <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.9617) • 

        <strong>⚡ Optimization:</strong> ONNX Runtime

    </p>

    

    <p style="color: #64748b; margin: 12px 0; font-size: 14px;">

        <strong>📊 F1-Score:</strong> 0.9608 • 

        <strong>🎯 Precision:</strong> 86.67% • 

        <strong>📈 Recall:</strong> 96.03% • 

        <strong>💾 Model Size:</strong> 24.1M parameters

    </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:
    """Get HTML for application footer."""
    from ..config.settings import AppConfig
    
    return f"""<center>



---



**🎓 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*



</center>"""

def get_model_info_html() -> str:
    """Get HTML for model information."""
    from ..config.settings import AppConfig
    return (
        "- <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>"
    )