Text segmentation editor

What can the editor do?

The template supports 10 colors for category tags. By default, 5 of them are enabled, and the first tag from the array is active. You can add more than 10 tags, but then the colors will repeat.

Description of tags in the template

Each tag has three parameters:

• tag_color — The color the text will be repainted.
• tag_name — The category to assign to the selected text.
• tag_hotkey — The button to press to make it faster.

Colors and keyboard shortcuts

• Blue — Q.
• Yellow — W.
• Green — E.
• Gray — T.
• Red — R.
• Brown — Y.
• Violet — U.
• Orange — I.
• Pink — A.
• Turquoise — S.

You can change the name of the tag and the assigned hotkey, but the color can't be changed — it is hardcoded in the editor JS library for the text highlighting.

The JS code with the tag description looks like this:

var tagsData = [
  {
    'tag_color': 'Blue',
    'tag_name': 'Name',
    'tag_hotkey': 'q'
  },
  {
    'tag_color': 'Yellow',
    'tag_name': 'Brand',
    'tag_hotkey': 'w'
  },
  {
    'tag_color': 'Green',
    'tag_name': 'Volume',
    'tag_hotkey': 'e'
  },
  {
    'tag_color': 'Red',
    'tag_name': 'Error',
    'tag_hotkey': 'r'
  }
];
Copied to clipboard

Some tags in the template are commented out. So by default you get an editor with five tags (as in the example).

How is the editor written?

The editor is embedded in the task interface using HTML:

{{textAnnotationInterface input tagsData}}
Copied to clipboard

The JS block describes the variables, methods, and functions that make the editor work. For example, this code shows an error message if no words are highlighted:

    validate: function(solution) {
        var errors = null;

        if (Object.keys(solution.output_values).length === 0 || Object.keys(solution.output_values.result).length === 0) {
            errors = this.addError('Select at least one word', '__TASK__', errors);
        }
Copied to clipboard

Input and output data

The editor output fields are marked as optional, but JS checks that at least one word is selected and it has a tag. So the performer can't send the task without markup.

The editor uses:

• The input field with the “line” type where the markup text is substituted.
• The result field in the JSON format. It passes information about the task result.
• The text_review_mode is auxiliary. It is needed to display tags in the task review mode.

When you mark up control and training tasks in the Toloka interface, select all the output data fields. Otherwise, the words marked with tags won't be displayed in it.

How do I work with the editor?

Use this information for the task instructions. Let the performers understand everything at once:

• If you select a phrase, it is marked with an active tag.
• If the text belongs to a different category, click the arrow in the frame of the selected word or phrase and select a new tag from the list.
• You can remove selection by clicking the cross in the upper-right corner.

Working on mobile devices

For mobile phone users, this is a new type of task, so explain to them how they should work with the project. Use this for your instructions:

1. Read the text and find the words and phrases from the instructions.
2. Tap the tag above the text.
3. Touch and hold to select a word or a phrase. If necessary, move the selection border.
4. To discard the selection without creating a tag, tap the area outside the text.
5. To add a tag, tap the unmarked area of the text.
6. To change the category (highlight color), tap the tag above the word in the frame. Choose the desired color from the drop-down list.
7. To delete a tag, tap the tag and the cross next to its name.

On touchscreen devices, you need to touch and hold to select the text, and then you can change the selection borders. You will see the tag for selected words after tapping the text (to remove the selection). This is necessary so that the user can select multiple words on such devices.

After the long tap, the context menu appears. This works only on touchscreen devices. You can't change this in Toloka projects.

If you use another template

In the Text segmentation template, the editor is already configured. When using other templates, you need to connect libraries and add code.

Learn more

1. In the Task interface block on the project editing page, click
2. In Libraries block, add:

   • JS https://yastat.net/s3/toloka/presets/TemplateVideoModeration/494c560d-0f4e-4e71-928f-5d9710522893.js
   • CSS https://yastat.net/s3/toloka/presets/TemplateVideoModeration/26a20e48-5dfb-4acc-abbf-a8ab7d91bf3f.css
3. In the Specification block, add the fields used by the editor:

   • Add the input field with the string type in the input data.
   • Add the result field with the json type and the text_review_mode with the JSON array type in the output data.
4. In the HTML block, add the {{textAnnotationInterface input tagsData}} component.
5. Add the following code in the JS block:

   1. Add tag descriptions.

      Example from the Text Segmentation template

      var tagsData = [
        {
          'tag_color': 'Blue',
          'tag_name': 'Name',
          'tag_hotkey': 'q'
        },
        {
          'tag_color': 'Yellow',
          'tag_name': 'Brand',
          'tag_hotkey': 'w'
        },
        {
          'tag_color': 'Green',
          'tag_name': 'Volume',
          'tag_hotkey': 'e'
        },
        {
          'tag_color': 'Red',
          'tag_name': 'Error',
          'tag_hotkey': 'r'
        }
      ];
      Copied to clipboard

   2. Complete the code in the getTemplateData, onRender, addError, validate handlers with the code from the Text segmentation template:

      exports.Task = extend(TolokaHandlebarsTask, function(options) {
          TolokaHandlebarsTask.call(this, options);
      }, {
          getTemplateData: function() {
              var data = TolokaHandlebarsTask.prototype.getTemplateData.apply(this, arguments);
              data.tagsData = updateTagsData(tagsData);
      
              return data;
          },
          onRender: function() {
              var tagsData = this.getTask().input_values.tagsData;
              createTextAnnotationInterface.call(this, tagsData);
          },
          addError: function(message, field, errors) {
              errors || (errors = {
                  task_id: this.getOptions().task.id,
                  errors: {}
              });
              errors.errors[field] = {
                  message: message
              };
      
              return errors;
          },
      
          validate: function(solution) {
              var errors = null;
      
              // If no words are selected, we show an error message.
      
              if (Object.keys(solution.output_values).length === 0 || Object.keys(solution.output_values.result).length === 0) {
                  errors = this.addError('Select at least one word', '__TASK__', errors);
              }
      
              return errors || TolokaHandlebarsTask.prototype.validate.call(this, solution);
          },
          onDestroy: function() {
              // The task is completed, you can release global resources (if you used them)
          }
      });
      Copied to clipboard

6. In the CSS block, add styles with the settings from the Text segmentation template:

   /* Task on the page */
   .task {
       display: block;
       max-width: 1200px;
       margin: 20px auto;
       font-size: 18px;
   }
   
   .task-suite {
       height: 100%;
   }
   
   /* Task display on mobile devices */
   @media screen and (max-width: 767px) {
       .task {
           border: none;
       }
   
       .task_focused {
           box-shadow: none;
           -webkit-box-shadow: none;
       }
   }
   Copied to clipboard

7. Click Preview and view the result.