Text segmentation editor

Note. The task interface configuration guide describes the features of the HTML/JS/CSS editor. You can also try creating a task interface in Template Builder.

To add the editor, use the Recognition of named entities (NER) template. If you want to add the editor to another template, see the instructions below in the If you use another template section.

Performers can mark up text using the editor in the Toloka web version and in the app. The web version is more convenient, especially if you have a large list of categories or a long text. Markup from a mobile phone is different. You put the text in the editor, and the performer selects individual words and entire phrases, and then marks them with tags.

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.

Figure 1. Example of working in the editor

Tip.

Think about decomposing the task. The more tags, the more complex the instruction and the response review process.

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).

Tip.

To add a new tag, uncomment a tagsData array element in curved brackets.

To delete a tag, delete it or comment it out.

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.

Note. Don't change the input and output field names, otherwise the editor won't work.

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:

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

Note. If you don't choose a color, the selected word is marked with the first tag from the list.

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.

Tip.

Add the User agent type (=browser) and Device type (=personal computer) filters . This way only those performers who use web browsers will have access to the text markup tasks.

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

In the Task interface block on the project editing page, click
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
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.
In the HTML block, add the {{textAnnotationInterface input tagsData}} component.

Add the following code in the JS block:

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

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

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

Click Preview and view the result.

Contact support