Приложение: полный код всех проектов

  1. Проект 1. Содержит ли изображение определенный объект?
  2. Проект 2. Выделить объект на изображении
  3. Проект 3. Верно ли выделены объекты на изображении?

Проект 1. Содержит ли изображение определенный объект?

Спецификации:

Входные данные:
{
  "image": {
    "type": "url",
    "hidden": false,
    "required": true
  }
}
Выходные данные:
{
  "result": {
    "type": "string",
    "hidden": false,
    "required": true
  }
}

Блок HTML:

{{img src=image width="100%" height="400px"}}
<div>Есть ли на картинке <b>дорожный знак</b>?<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>

Блок 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;
}

Проект 2. Выделить объект на изображении

Спецификации:

Входные данные:

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

Выходные данные:

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

Блок HTML:

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

Блок JavaScript:

  1. Подключите библиотеку $TOLOKA_ASSETS/js/image-annotation.js (нажмите в блоке Интерфейс задания на странице проекта).

  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;
    }
    

Блок CSS:

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

Проект 3. Верно ли выделены объекты на изображении?

Спецификации:

Входные данные:

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

Выходные данные:

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

Блок 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"}}

Блок 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;
}
Блок CSS:
/* disable polygon-editor controls */
.image-annotation-editor__shape-polygon {
  display: none;
}
.image-annotation-editor__annotation-layer {
  height: max-content;
}