report.html

{% if score < 0.5 %}
  {% set tcls = 'text-danger' %}
{% elif score < 0.7 %}
  {% set tcls = 'text-warning' %}
{% elif score >= 0.7 %}
  {% set tcls = 'text-success' %}
{% end %}

<div class="container-fluid">
  <div class="row">
    <div class="h3 text-center">
      Your model scored <span class="{{ tcls }}">{{ '{:.2%}'.format(score) }}</span>
    </div>
  </div>
  <div class="row">
    <div id="modelchart"></div>
  </div>
</div>

{% if spec %}
<script>
  {% import json %}
  {% try %}
    {% set specs = json.loads(spec) %}
    {% autoescape None %}
    {% from tornado.escape import json_decode %}
    var spec = {{ spec }}
    var view = new vega.View(vega.parse(vegaLite.compile(spec).spec))
        .renderer('svg')
        .initialize('#modelchart')
        .hover()
        .run()
  {% except (json.JSONDecodeError, TypeError) %}
    $('#modelchart').html('<img src="chart.png"/>')
  {% end %}

</script>
{% end %}