Toloka documentation

Product search relevance

For this type of project, you can use the Product search relevance preset.

This preset helps you improve ecommerce search page results by rating how relevant products are to specific search queries.

Take a look at the example: the labeling interface includes an image, a box for the search query, and radio buttons for evaluating relevance. Note that validation and task layout are already configured in this example.

Components used in the example
  • layout.sidebar: Lets you place the main content block and an adjacent panel with controls on a page.

    Show code
    {
      "type": "layout.sidebar",
      "minWidth": 400,
      "content": {
        "type": "view.list",
        "size": "m",
        "direction": "vertical",
        "items": []
      },
      "controls": {
        "type": "view.list",
        "direction": "vertical",
        "items": []
      }
    }
    
  • view.image: Displays an image.

    Show code
    {
      "type": "view.image",
      "maxWidth": 350,
      "url": {
        "type": "data.input",
        "path": "imagepath"
      }
    }
    
  • view.markdown: A block for displaying text in Markdown.

    Show code
    {
      "type": "view.markdown",
      "label": "Product title:",
      "content": {
        "type": "data.input",
        "path": "title"
      }
    }
    
  • view.alert: The component creates a color block to highlight important information. You can use both plain text and other visual components inside it.

    Show code
    {
      "type": "view.alert",
      "theme": "info",
      "label": "Search query",
      "content": {
        "type": "view.text",
        "content": {
          "type": "data.input",
          "path": "query"
        }
      }
    }
    
  • view.action-button: A button that calls an action. When clicking the button, an action specified in the action property is called.

    Show code
    {
      "type": "view.action-button",
      "label": "Search query in Google",
      "action": {
        "type": "action.open-link",
        "payload": {
          "type": "data.input",
          "path": "search_url"
        }
      }
    }
    
  • view.divider: A horizontal delimiter. You can place extra elements in the center of the delimiter, like a popup hint and label.

    Show code
    {
      "type": "view.divider"
    }
    
  • field.radio-group: A component for selecting one value out of several options. It is designed as a group of circles arranged vertically. The minimum number of buttons is one. Any type of data can be returned.

    Show code
    {
      "type": "field.radio-group",
      "label": "Choose relevance class",
      "options": [
        {
          "label": "Relevant",
          "value": "relevant"
        },
        {
          "label": "Irrelevant",
          "value": "irrelevant"
        }
      ],
      "data": {
        "type": "data.output",
        "path": "result"
      },
      "validation": {
        "type": "condition.required"
      }
    }
    
  • condition.required: Checks if at least one option is selected.

    Show code
    {
      "type": "condition.required"
    }
    
  • plugin.toloka: Customizes the task layout.

    Show code
    {
      "type": "plugin.toloka",
      "layout": {
        "kind": "scroll",
        "taskWidth": 600
      }
    }
    

Note

You can add media files (audio files, videos, images) from your own server, Yandex Disk, or a cloud storage like Yandex Cloud, Google Cloud, or Amazon AWS.

If this preset doesn't meet your needs, see other examples in this section.

Add a response field

If you need comments from the Toloker, add a text field using field.textarea. In this example, additional validation is set up that requires you to enter text if one of two audio tracks is selected.

Show code
{
  "type": "field.textarea",
  "label": "Comments",
  "placeholder": "Enter text",
  "data": {
    "type": "data.output",
    "path": "comment"
  }
}