Template Builder in Toloka: Accelerate Projects from All Angles

To launch a project in Toloka, requesters write instructions and create a task interface using code. This isn't easy — at the bare minimum, the requester needs to be familiar with JavaScript, CSS, and HTML, while complex projects may require solid programming skills. To make it easier and faster to launch projects in Toloka, we developed a new tool called Template Builder.

You don't need any programming skills to design projects here. Template Builder is a convenient interface editor in JSON format with everything you need, including auto-completion with hints, preset code snippets, and real-time preview so that you can immediately see what your task interface looks like.

How does it accelerate projects?

Easier to use. You can take multiple ready-made components and put them together. The editor shows pop-up hints to help you find the right component or figure out what to write in a particular place.

Unified design. Historically, each project has its own interface and there is no continuity with other projects or the design of the Toloka platform. Performers spend extra time reading the instructions and getting used to the interface before they can get the hang of each task. This slows down the labeling process and makes things more difficult. Template Builder solves this problem by introducing a common style for all projects, where everything is familiar to performers from the start.

Templates load faster. Template Builder caches components in stages. This means that if a performer loaded a component in one task, it's uploaded from the cache in the next one. Tasks load faster, which ultimately speeds up data labeling.

Mobile-friendly by default. If you're running projects for the mobile app, you don't need to adapt the code. This also speeds up data labeling because tasks can be assigned both to users of the Toloka web version and the mobile app.

How does it work?

To get started with Template Builder, start creating a new project in Toloka. Select an empty template and click Template Builder (beta) on the project creation page.

The Template Builder interface has four vertical panels:

1. Configuration: The task interface editor in JSON format. It supports auto-complete with hints and preset code snippets.
2. Example of input data: The editor for input data in JSON format. The input data specification is automatically generated using the data in this field.
3. Preview: This mode shows what the task will look like.
4. Submitted data: Sample JSON output. This panel appears when you click Send in the preview. To hide it, click Close Panel at the bottom.

You can use shortcuts. To view all the available commands and shortcuts, press F1.

Putting theory into practice

To practice, try creating a task interface for comparing two photos. Template Builder has a ready-to-use component for this.

1. Delete the view property value in the configuration editor, position the cursor there, and press Tab:

2. Select layout.side-by-side.
3. On the Preview panel, you'll see the sample task for comparing two products.
4. Go to the Example of input data panel to configure the input data.
5. Paste the sample input data there (links to the left and right images). They will be used in the next steps.
6. Go back to the Configuration panel (where you added layout.side-by-side).
7. In the url properties, delete the links (along with the double quotes) and press Tab. Select the data.input component in the list that opens. This way you can get values from the sample input data.

8. For the data.input objects, replace the path property value with the image field names: image_a and image_b:

9. Change the question text in the photo selection component to "Which photo do you like best?".
10. The task is ready. Try completing it in the preview window. To view the result, click Send.

Give Template Builder a try and find out how easy it is to launch new projects in Toloka.