The Taskframe Class: Custom label formats - Taskframe/taskframe-python GitHub Wiki

Taskframe supports specifying custom label schemas to adapt to any annotation project.

To do that, the platform relies on a well established web standard: JSON Schema. You simply provide the json schema of the expected label, and Taskframe will generate the corresponding annotation form in the Worker UI.

There are actually 2 parameters to look at:

  • json_schema: describes the data structure you wish to collect.
  • ui_schema: a object used to customize how you want to display the annotation form

The idea is similar to the separation between HTML and CSS: one is semantic, the other is visual.

For image_annotation, you also have global_json_schema and global_ui_schema that apply to image-level label, while json_schema and ui_schema apply to each region (bounding_box, polygon, etc.)

JSON Schema

If you are not familiar with the JSON Schema format, we will cover the basics here, but for further details you may check out this tutorial.

The most important attribute is type, which may be of values:

Single fields

The simplest JSON schema contain a single field given their type. Possible type values are: string, number, integer, boolean, null, object, array.

Here a are a few examples of basic single fields JSON schemas:

{"type" : "number"}
{"type" : "string"}
{"type" : "boolean"}

Enum

By Specifying the enum property, you may limit possible choices, the form UI will then convert to a Select widget:

{
    "type" : "string",
    "enum": ["cat", "dog"]
}

You may also use enumNames to specify custom labels to the enum values:

{
    "type" : "number",
    "enum": [1, 2],
    "enumNames": ["cat", "dog"]
}

Objects fields

The type object let you create objects with multiple fields, that need to be specified under properties:

{
    "type": "object",
    "properties": {
        "category": {"type": "string"},
        "age": {"type": "number"}
    }
}

The required property lets you specify which properties are required.

{
    "type": "object",
    "properties": {
        "category": {"type": "string"},
        "age": {"type": "number"}
    },
    "required": ["age"]
}

The order of properties can be specified in the uiSchema:

{
  "ui:order": ["age", "*"]
};

Array fields

The type array let you create a list of objects that neeed to be specified under items. Items may be single fields or objects as defined above:

{
    "type": "array",
    "items": {
        "type" : "object",
        "properties": {
            "category": {"type": "string"},
            "age": {"type": "number"}
        }
    }
}

The UI Schema must be specified under the items property.

uiSchema

The uiSchema lets you customize the look-and-feel of the form.

The uiSchema object follows the tree structure of the form field hierarchy, and defines how each property should be rendered.

ui:title

Changes the display title of the field

ui:help

Changes the help text

ui:placeholder

Changes the placeholder

ui:disabled

Disables the field. This may be useful to display read-only data, when used along Tasks' initial_label.

ui:order

To define the order of properties of an object field

ui:widget

Customizes the Widget rendered for each field. By default, it will use generic HTML inputs depending on the field type, but richer widgets are also available.

Below is the list of possible ui:widget values:

Basic ui widgets:

  • radio
  • select
  • textarea
  • password
  • color
  • hidden

Advanced ui widgets:

  • switch: for boolean fields
  • html: for read-only string fields, to be used with Tasks initial_label)
  • rating: for number fields, display a 0 to 5 stars picker
  • date: for string fields, a date picker