result_template.html

<p>
    {% for token, label, tooltip in token_labels %}<span class="highlight-{{ label }}"{% if tooltip %} title="{{ tooltip }}"{% endif %}>{{ token }}</span>{% endfor %}
</p>

<style>
    .highlight-0 {
        background: transparent;
    }

    .highlight-1 {
        background: linear-gradient(90deg, transparent, rgba(255, 245, 235, 0.04), transparent);
    }

    .highlight-2 {
        background: linear-gradient(90deg, transparent, rgba(254, 235, 210, 0.08), transparent);
    }

    .highlight-3 {
        background: linear-gradient(90deg, transparent, rgba(253, 215, 175, 0.12), transparent);
    }

    .highlight-4 {
        background: linear-gradient(90deg, transparent, rgba(253, 190, 140, 0.16), transparent);
    }

    .highlight-5 {
        background: linear-gradient(90deg, transparent, rgba(253, 170, 110, 0.20), transparent);
    }

    .highlight-6 {
        background: linear-gradient(90deg, transparent, rgba(253, 155, 90, 0.24), transparent);
    }

    .highlight-7 {
        background: linear-gradient(90deg, transparent, rgba(253, 145, 75, 0.28), transparent);
    }

    .highlight-8 {
        background: linear-gradient(90deg, transparent, rgba(253, 135, 65, 0.32), transparent);
    }

    .highlight-9 {
        background: linear-gradient(90deg, transparent, rgba(253, 130, 55, 0.36), transparent);
    }

    .highlight-10 {
        background: linear-gradient(90deg, transparent, rgba(253, 141, 60, 0.38), transparent);
    }
</style>