Toloka documentation

Text recognition from an image (OCR)

For this type of project, you can use the Text recognition from an image (OCR) preset.

This preset is used for interpreting information from a photo.

Take a look at the example: the labeling interface includes an image, a response field, and a checkbox for reporting on problems with an image.

Note that validation and task layout are already configured in this Template Builder sample code.

Components used in the example
  • view.list: Displays data in a list.

  • view.image: Adds an image.

    Show code
    {
      "type": "view.image",
      "noBorder": true,
      "rotatable": true,
      "url": {
        "type": "data.input",
        "path": "image"
      }
    }
    
  • view.text: Displays a block with text.

    If you need formatted text, use the view.markdown component.

    Show code
    {
      "type": "view.text",
      "label": "Category",
      "content": {
        "type": "data.input",
        "path": "category"
      }
    }
    
  • A combination of helper.if and condition.equals: Displays the response field when the checkbox is not selected.

    Show code
    {
      "type": "helper.if",
      "condition": {
        "type": "condition.equals",
        "data": {
          "type": "data.output",
          "path": "not_found"
        },
        "to": false
      },
      "then": {
        "type": "view.list",
        "items": [
          {
            "type": "field.text",
            "label": "Business name",
            "placeholder": "Enter text",
            "data": {
              "type": "data.output",
              "path": "output"
            },
            "validation": {
              "type": "condition.required"
            }
          }
        ]
      }
    }
    
  • field.text: Adds a field for entering a short text.

    Use the conditions.required component inside the validation property to check that a Toloker filled in the text field.

    Show code
    {
      "type": "field.text",
      "label": "Business name",
      "placeholder": "Enter text",
        "data": {
          "type": "data.output",
          "path": "output"
        }
      "validation": {
        "type": "condition.required"
      }
    }
    
  • field.checkbox: Adds a checkbox.

    Show code
    {
      "type": "field.checkbox",
      "preserveFalse": true,
      "label": "No business",
      "hint": "There is no business in the photo, the photo is of bad quality, the name is not fully visible, the photo didn't load",
        "data": {
          "type": "data.output",
          "path": "not_found"
        }
    }
    
  • plugin.toloka: Customizes the task layout.

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

If this template doesn't meet your needs, see other examples in the Images section.

Add a description

To add a detailed description to the task, use the label property of the view.image component.

Show code
{
  "type": "view.image",
  "label": "Look at the photo and find the business name",
  "noBorder": true,
  "rotatable": true,
  "url": {
    "type": "data.input",
    "path": "image"
  }
}

Add a clarifying question

To ask Tolokers to clarify their choice if they selected the No business checkbox, add the helper.if component which contains field.radio-group.

Show code
{
  "type": "helper.if",
  "condition": {
    "type": "condition.equals",
    "data": {
      "type": "data.output",
      "path": "not_found"
     },
    "to": true
  },
  "then": {
    "type": "field.radio-group",
    "label": "To clarify your choice, select one of the options:",
    "options": [
      {
        "label": "There is no business in the photo",
        "value": "no_business"
      },
      {
        "label": "The photo is of bad quality",
        "value": "bad_quality"
      },
      {
        "label": "The name is not fully visible",
        "value": "not_fully_visible"
      },
      {
        "label": "Loading error",
        "value": "error"
      }
    ],
    "data": {
      "type": "data.output",
      "path": "option"
    },
    "validation": {
      "type": "condition.required",
      "hint": "Select one option"
    }
  }
}

Add a layout

To enhance Toloker's experience, you can highlight different types of data with colors using view.alert. You can place it in the view.list along with the other components.

In this example, the text is highlighted with a blue border.

Show code
  {
    "type": "view.alert",
    "theme": "info",
    "content": {
      "type": "view.text",
      "content": "Look at the photo and find the business name"
    }
  }

Add a field for comments

To let Tolokers leave comments about the task or their response, add a text field using field.textarea.

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

Add keyboard shortcuts

Add keyboard shortcuts to rotate and zoom in images in the plugin.hotkeys configuration.

Show code
{
  "type": "plugin.hotkeys",
  "l": {
    "type": "action.rotate",
    "view": {
      "$ref": "view.items.0"
    },
    "payload": "left"
  },
  "r": {
    "type": "action.rotate",
    "view": {
      "$ref": "view.items.0"
    },
    "payload": "right"
  },
  "q": {
    "type": "action.open-close",
    "view": {
      "$ref": "view.items.0"
    }
  }
}