utils.py

def get_rank_badge(rank):
    """Generate HTML for rank badge with appropriate styling"""
    badge_styles = {
        1: ("1st", "linear-gradient(145deg, #ffd700, #ffc400)", "#000"),
        2: ("2nd", "linear-gradient(145deg, #9ca3af, #787C7E)", "#fff"),
        3: ("3rd", "linear-gradient(145deg, #CD7F32, #b36a1d)", "#fff"),
    }

    if rank in badge_styles:
        label, gradient, text_color = badge_styles[rank]
        return f"""
            <div style="
                display: inline-flex;
                align-items: center;
                justify-content: center;
                min-width: 48px;
                padding: 4px 12px;
                background: {gradient};
                color: {text_color};
                border-radius: 6px;
                font-weight: 600;
                font-size: 0.9em;
                box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
            ">
                {label}
            </div>
        """
    return f"""
        <div style="
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 28px;
            color: #a1a1aa;
            font-weight: 500;
        ">
            {rank}
        </div>
    """


def get_type_badge(model_type):
    """Generate HTML for model type badge"""
    colors = {"Private": "#4F46E5", "Open source": "#16A34A"}
    bg_color = colors.get(model_type, "#4F46E5")
    return f"""
        <div style="
            display: inline-flex;
            align-items: center;
            padding: 4px 8px;
            background: {bg_color};
            color: white;
            border-radius: 4px;
            font-size: 0.85em;
            font-weight: 500;
        ">
            {model_type}
        </div>
    """


def get_score_bar(score):
    """Generate HTML for score bar"""
    width = score * 100
    return f"""
        <div style="display: flex; align-items: center; gap: 12px; width: 100%;">
            <div style="
                flex-grow: 1;
                height: 6px;
                background: rgba(255, 255, 255, 0.1);
                border-radius: 3px;
                overflow: hidden;
                max-width: 200px;
            ">
                <div style="
                    width: {width}%;
                    height: 100%;
                    background: #4F46E5;
                    border-radius: 3px;
                "></div>
            </div>
            <span style="
                font-family: 'SF Mono', monospace;
                font-weight: 600;
                color: #ffffff;
                min-width: 60px;
            ">{score:.3f}</span>
        </div>
    """