doccano/app/server/templates/demo/demo_text_classification.html

{% extends "annotation/annotation_base.html" %}
{% load static %}
{% block annotation-area %}
<div class="card">
  <header class="card-header">
    <div class="card-header-title" style="padding:1.5rem;background-color:royalblue;">
      <div class="field is-grouped is-grouped-multiline">
        <div class="control" v-for="(label, item) in labels">
          <div class="tags has-addons">
            <a class="tag is-medium" v-bind:style="{ color: label.text_color, backgroundColor: label.background_color }" v-on:click="addLabel(label)"
              v-shortkey.once="[ label.shortcut ]" @shortkey="addLabel(label)">
              [[ label.text ]]
            </a>
            <span class="tag is-medium">[[ label.shortcut ]]</span>
          </div>
        </div>
      </div>
    </div>
  </header>

  <div class="card-content">
    <div class="field is-grouped is-grouped-multiline">
      <div class="control" v-for="(annotation, index) in annotations[pageNumber]">
        <div class="tags has-addons">
          <span class="tag is-medium" v-bind:style="{ color: id2label[annotation.label].text_color, 'background-color': id2label[annotation.label].background_color }">
            [[ id2label[annotation.label].text ]]
            <button class="delete is-small" v-on:click="removeLabel(annotation)"></button>
          </span>
        </div>
      </div>
    </div>
    <hr style="margin: 0.8rem 0;">
    <div class="content" v-if="docs[pageNumber]">
      [[ docs[pageNumber].text ]]
    </div>
  </div>
</div>
{% endblock %}
{% block footer %}
<script src="{% static 'bundle/demo_text_classification.js' %}"></script>
{% endblock %}