Appendix: complete code for all projects
- Project 1. Does the image contain a certain object?
- Project 2. Select an object in the image
- Project 3. Are the bounding boxes correct?
Project 1. Does the image contain a certain object?
Specifications:
Input: | Output: |
Input: | Output: |
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="Yes" hotkey="1"}}
{{field type="radio" name="result" value="BAD" label="No" hotkey="2"}}
{{field type="radio" name="result" value="404" label="Loading error" 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;
}
Project 2. Select an object in the image
Specifications:
Input: | Output: |
Input: | Output: |
HTML:
{{field type="image-annotation" name="result" src=image}}
JavaScript:
Connect the $TOLOKA_ASSETS/js/image-annotation.js library (click
in the Task interface block on the project page).
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;
}
Project 3. Are the bounding boxes correct?
Specifications:
Input: | Output: |
Input: | Output: |
HTML:
{{field type="image-annotation" name="object" annotations=selection}}
{{field type="radio" name="result" value="OK" label="Correct" hotkey="1"}}
{{field type="radio" name="result" value="BAD" label="Incorrect" 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;
}