Appendix: complete code for all projects

  1. Project 1. Does the image contain a certain object?
  2. Project 2. Select an object in the image
  3. Project 3. Are the bounding boxes correct?

Project 1. Does the image contain a certain object?

Specifications:

Input:
{   "image": {     "type": "url",     "hidden": false,     "required": true   } }
Copied to clipboard
Output:
{   "result": {     "type": "string",     "hidden": false,     "required": true   } }
Copied to clipboard
Input:
{   "image": {     "type": "url",     "hidden": false,     "required": true   } }
Copied to clipboard
Output:
{   "result": {     "type": "string",     "hidden": false,     "required": true   } }
Copied to clipboard

HTML:

{{img src=image width="100%" height="400px"}} <div>Is there a  <b>traffic sign</b> in the picture?<div>
<div> {{field type="radio" name="result" value="OK" label="Да" hotkey="1"}}
{{field type="radio" name="result" value="BAD" label="Нет" hotkey="2"}}
{{field type="radio" name="result" value="404" label="Ошибка загрузки" hotkey="3"}}</div>
Copied to clipboard

JavaScript:

exports.Task = extend(TolokaHandlebarsTask, function(options) {
    TolokaHandlebarsTask.call(this, options);
}, {
    onRender: function() {
        // DOM element for task is formed (available via #getDOMElement())
    },
    onDestroy: function() {
        // Task is completed. Global resources can be released (if used)
    }
});

function extend(ParentClass, constructorFunction, prototypeHash) {
    constructorFunction = constructorFunction || function() {};
    prototypeHash = prototypeHash || {};
    if (ParentClass) {
        constructorFunction.prototype = Object.create(ParentClass.prototype);
    }
    for (var i in prototypeHash) {
        constructorFunction.prototype[i] = prototypeHash[i];
    }
    return constructorFunction;
}
Copied to clipboard

Project 2. Select an object in the image

Specifications:

Input:

{   "image": {     "type": "url",     "hidden": false,     "required": true   } }
Copied to clipboard

Output:

{   "result": {     "type": "string",     "hidden": false,     "required": true   } }
Copied to clipboard

Input:

{   "image": {     "type": "url",     "hidden": false,     "required": true   } }
Copied to clipboard

Output:

{   "result": {     "type": "string",     "hidden": false,     "required": true   } }
Copied to clipboard

HTML:

{{field type="image-annotation" name="result" src=image}}
Copied to clipboard

JavaScript:

  1. Connect the $TOLOKA_ASSETS/js/image-annotation.js library (click in the Task interface block on the project page).

  2. exports.Task = extend(TolokaHandlebarsTask, function (options) {
      TolokaHandlebarsTask.call(this, options);
    }, {
      onRender: function() {
        // DOM element for task is formed (available via #getDOMElement())
      },
      onDestroy: function() {
        // Task is completed. Global resources can be released (if used)
      }
    });
    
    function extend(ParentClass, constructorFunction, prototypeHash) {
      constructorFunction = constructorFunction || function () {};
      prototypeHash = prototypeHash || {};
      if (ParentClass) {
        constructorFunction.prototype = Object.create(ParentClass.prototype);
      }
      for (var i in prototypeHash) {
        constructorFunction.prototype[i] = prototypeHash[i];
      }
      return constructorFunction;
    }
    
    Copied to clipboard

CSS:

.image-annotation-editor__shape-polygon {
display: none;
}
.image-annotation-editor__annotation-layer {
height: max-content;
}
Copied to clipboard

Project 3. Are the bounding boxes correct?

Specifications:

Input:

{   "image": {     "type": "url",     "hidden": false,     "required": true   },   "selection": {     "type": "json",     "hidden": false,     "required": false   },   "assignment_id": {     "type": "string",     "hidden": true,     "required": true   } }
Copied to clipboard

Output:

{   "result": {     "type": "string",     "hidden": false,     "required": true   } }
Copied to clipboard

Input:

{   "image": {     "type": "url",     "hidden": false,     "required": true   },   "selection": {     "type": "json",     "hidden": false,     "required": false   },   "assignment_id": {     "type": "string",     "hidden": true,     "required": true   } }
Copied to clipboard

Output:

{   "result": {     "type": "string",     "hidden": false,     "required": true   } }
Copied to clipboard

HTML:

{{field type="image-annotation" name="object" annotations=selection}}
 {{field type="radio" name="result" value="OK" label="Верно" hotkey="1"}}
  {{field type="radio" name="result" value="BAD" label="Неверно" hotkey="2"}}
Copied to clipboard

JavaScript:

exports.Task = extend(TolokaHandlebarsTask, function(options) {
    TolokaHandlebarsTask.call(this, options);
}, {
    onRender: function() {
        // DOM element for task is formed (available via #getDOMElement())
    },
    onDestroy: function() {
        // Task is completed. Global resources can be released (if used)
    }
});

function extend(ParentClass, constructorFunction, prototypeHash) {
    constructorFunction = constructorFunction || function() {};
    prototypeHash = prototypeHash || {};
    if (ParentClass) {
        constructorFunction.prototype = Object.create(ParentClass.prototype);
    }
    for (var i in prototypeHash) {
        constructorFunction.prototype[i] = prototypeHash[i];
    }
    return constructorFunction;
}
Copied to clipboard
CSS:
/* disable polygon-editor controls */
.image-annotation-editor__shape-polygon {
  display: none;
}
.image-annotation-editor__annotation-layer {
  height: max-content;
}
Copied to clipboard