Text segmentation editor
- What can the editor do?
- Description of tags in the template
- How is the editor written?
- Input and output data
- How do I work with the editor?
- Working on mobile devices
- If you use another template
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.

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