Tags.md

Editor Tags

Editor configuration is based on XML-like tags. Tags can be divided into three categories:

• Visual tags used for visual only elements (non-interactive), examples: View, Header.
• Control tags used to label the objects, examples: Labels, Choices, Rating, TextArea.
• Object tags used to show elements that can be labeled: Image, Text, Audio, AudioPlus.

The name attribute is mandatory for all control and object tags. Also, each control tag should have toName attribute that should match the name parameter in the object element. For example:

<View>
  <Labels name="lbl" toName="txt">
    <Label value="Label 1"></Label>
    <Label value="Label 2"></Label>
  </Labels>
  <Text name="txt" value="$value"></Text>
</View>

Note that in the case above Labels tags is used to label Text tag. There could be multiple control, and object tags in the same configuration and names are used to connect them.

Here is an example of two-column labeling interface with multiple control and object elements:

<View style="display: flex;">
 <View style="flex: 50%">
  <Header value="Choose:"></Header>
  <Text name="txt-1" value="$value"></Text>
  <Choices name="chc" toName="txt-1">
    <Choice value="Choice 1"></Choice>
    <Choice value="Choice 2"></Choice>
  </Choices>
 </View> 
 <View style="flex: 50%; margin-left: 1em">
  <Header value="Enter your question and rate text:"></Header>
  <Text name="txt-2" value="$value"></Text>
  <Rating name="rating" toName="txt-2"></Rating>
  <TextArea name="question" ></TextArea>
 </View>
</View>

Table of Contents

• Choice
• Choices
• Label
• Labels
• List
• Polygon
• PolygonLabels
• Ranker
• Rating
• Rectangle
• RectangleLabels
• TextArea
• Audio
• AudioPlus
• Image
• Text
• Header
• Table
• View

Choice

Choice tag represents a single choice

Parameters

• value [string] label value
• selected [boolean]? If this label should be preselected
• alias [string]? label alias
• hotkey [string]? hokey

Examples

<View>
  <Choices name="gender" toName="txt-1" choice="single">
    <Choice alias="M" value="Male"></Choice>
    <Choice alias="F" value="Female"></Choice>
  </Choices>
  <Text name="txt-1" value="John went to see Marry"></Text>
</View>

Choices

Choices tag, create a group of choices, radio, or checkboxes. Shall be used for a single or multi-class classification.

Parameters

• name [string] of the group
• toName [string] name of the elements that you want to label
• choice (single | single-radio | multiple) single or multi-class (optional, default single)
• showInline [boolean] show items in the same visual line

Examples

<View>
  <Choices name="gender" toName="txt-1" choice="single-radio">
    <Choice alias="M" value="Male"></Choice>
    <Choice alias="F" value="Female"></Choice>
  </Choices>
  <Text name="txt-1" value="John went to see Marry"></Text>
</View>

Label

Label tag represents a single label

Parameters

• value [string] A value of the label
• selected [boolean] If this label should be preselected
• alias [string] Label alias
• hotkey [string] Hotkey
• showalias [boolean] Show alias inside label text
• aliasstyle [string] Alias CSS style default=opacity: 0.6
• size [string] Size of text in the label
• background [string] The background color of active label
• selectedColor [string] Color of text in an active label

Examples

<View>
  <Labels name="type" toName="txt-1">
    <Label alias="B" value="Brand"></Label>
    <Label alias="P" value="Product"></Label>
  </Labels>
  <Text name="txt-1" value="$text"></Text>
</View>

Labels

Labels tag, create a group of labels

Parameters

• name [string] name of the element
• toName [string] name of the element that you want to label
• choice (single | multiple) configure if you can select just one or multiple labels (optional, default single)

Examples

<View>
  <Labels name="type" toName="txt-1">
    <Label alias="B" value="Brand"></Label>
    <Label alias="P" value="Product"></Label>
  </Labels>
  <Text name="txt-1" value="$text"></Text>
</View>

List

List element, used for ranking results. Great choice for recomendation systems.

Parameters

• elementValue [string] lookup key for child object
• elementTag ([Text] | [Image] | [Audio]) element used to render children
• value [string] list value
• name [string] of group
• sortedHighlightColor [string]? color
• axis [string]? axis used for drag-n-drop
• lockAxis [string]? lock axis

Examples

<View>
 <HyperText value="$markup"></HyperText>
 <List name="ranker" value="$replies" elementValue="$text" elementTag="Text" ranked="true" sortedHighlightColor="#fcfff5"></List>
</View>

Polygon

Polygon tag Polygon is used to add polygons to an image

Parameters

• name [string] name of tag
• toname [string] name of image to label
• opacity [number] opacity of polygon (optional, default 0.6)
• fillColor [string]? rectangle fill color, default is transparent
• strokeColor [string]? stroke color
• strokeWidth [number] width of stroke (optional, default 1)
• pointSize (small | medium | large) size of polygon handle points (optional, default medium)
• pointStyle (rectangle | circle) style of points (optional, default rectangle)

Examples

<View>
  <Polygon name="rect-1" toName="img-1" value="Add Rectangle"></Polygon>
  <Image name="img-1" value="$img"></Image>
</View>

PolygonLabels

PolygonLabels tag, create labeled polygons

Parameters

• name [string] name of tag
• toname [string] name of image to label
• opacity [number] opacity of polygon (optional, default 0.6)
• fillColor [string]? rectangle fill color, default is transparent
• strokeColor [string]? stroke color
• strokeWidth [number] width of stroke (optional, default 1)
• pointSize (small | medium | large) size of polygon handle points (optional, default medium)
• pointStyle (rectangle | circle) style of points (optional, default rectangle)

Examples

<View>
  <Image name="image" value="$image"></Image>
  <PolygonLabels name="lables" toName="image">
    <Label value="Car"></Label>
    <Label value="Sign"></Label>
  </PolygonLabels>
</View>

Ranker

Ranker tag, used to ranking models

Parameters

• name [string] of group
• axis (y | x) axis direction (optional, default y)
• sortedHighlightColor [string] sorted color

Examples

<View>
  <Ranker name="ranker" value="$items"></Ranker>
</View>

Rating

Rating tag

Parameters

• name [string] of the element
• toName [string] name of the element that you want to label
• maxRating integer maxmium rating value (optional, default 5)
• size [string] one of: mini tiny small large huge massive (optional, default large)
• icon [string] one of: star heart (optional, default star)
• hotkey [string]? hokey

Examples

<View>
  <Text name="txt" value="$text"></Text>
  <Rating name="rating" toName="txt" maxRating="10"></Rating>
</View>

Rectangle

Rectangle tag Rectangle is used to add rectangle (BBox) to an image

Parameters

• name [string] name of the element
• toname [string] name of the image to label
• opacity float opacity of rectangle (optional, default 0.6)
• fillColor [string]? rectangle fill color, default is transparent
• strokeColor [string]? stroke color
• strokeWidth [number] width of the stroke (optional, default 1)
• canRotate [boolean] show or hide rotation handle (optional, default true)

Examples

<View>
  <Rectangle name="rect-1" toName="img-1"></Rectangle>
  <Image name="img-1" value="$img"></Image>
</View>

RectangleLabels

RectangleLabels tag creates labeled rectangles

Parameters

• name [string] name of the element
• toname [string] name of the image to label
• opacity float opacity of rectangle (optional, default 0.6)
• fillColor [string]? rectangle fill color, default is transparent
• strokeColor [string]? stroke color
• strokeWidth [number] width of stroke (optional, default 1)
• canRotate [boolean] show or hide rotation handle (optional, default true)

Examples

<View>
  <RectangleLabels name="labels" toName="image">
    <Label value="Person"></Label>
    <Label value="Animal"></Label>
  </RectangleLabels>
  <Image name="image" value="$image"></Image>
</View>

TextArea

TextArea tag shows the textarea for user input

Parameters

• name [string] name of the element
• toName [string] name of the element that you want to label if any
• value [string]
• label [string]? label text
• placeholder [string]? placeholder text
• maxSubmissions [string]? maximum number of submissions

Examples

<View>
  <TextArea name="ta"></TextArea>
</View>

Audio

Audio tag plays a simple audio file

Parameters

• name [string] of the element
• value [string] of the element
• hotkey [string] hotkey used to play/pause audio

Examples

<View>
  <Audio name="audio" value="$audio"></Audio>
</View>

<!-- Audio classification -->
<View>
  <Audio name="audio" value="$audio"></Audio>
  <Choices name="ch" toName="audio">
    <Choice value="Positive"></Choice>
    <Choice value="Negative"></Choice>
  </Choices>
</View>

<!-- Audio transcription -->
<View>
  <Audio name="audio" value="$audio"></Audio>
  <TextArea name="ta" toName="audio"></TextArea>
</View>

AudioPlus

AudioPlus tag plays audio and shows its wave

Parameters

• name [string] of the element
• value [string] of the element
• hasZoom [boolean] speficy if audio has zoom functionality
• regionBG [string] region color
• selectedRegionBG [string] selected region background

Examples

<View>
 <Labels name="lbl-1" toName="audio-1"><Label value="Hello"></Label><Label value="World"></Label></Labels>
 <Rating name="rate-1" toName="audio-1"></Rating>
 <AudioPlus name="audio-1" value="$audio"></AudioPlus>
</View>

Image

Image tag shows an image on the page

Parameters

• name [string] name of the element
• value [string] value
• width [string] image width (optional, default 100%)
• maxWidth [string] image maximum width (optional, default 750px)

Examples

<View>
  <Image value="$url"></Image>
</View>

<View>
  <Image value="https://imgflip.com/s/meme/Leonardo-Dicaprio-Cheers.jpg" width="100%" maxWidth="750px"></Image>
</View>

Text

Text tag shows a text that can be labeled

Parameters

• name [string] of the element
• value [string] of the element
• selelectWithoutLabel [boolean] controls if text can be selected without any labels selected

Examples

<Text name="text-1" value="$text"></Text>

Header

Header tag, show header

Parameters

• size [string] Size of header
• value [string] Text of header
• underline [boolean] Underline of header

Examples

<Header name="text-1" value="$text"></Header>

TagAttrs

HyperText element. Render html inside

Parameters

• name [string]
• value [string]

Examples

<View>
 <HyperText value="<p>Hey</p>"></HyperText>
<View>

Table

Table tag, show object keys and values in a table

Parameters

• value [string]

Examples

<Table name="text-1" value="$text"></Table>

View

View element. It's analogous to div element in html and can be used to visual configure display of blocks

Parameters

• display (block | inline)
• backgroundColor hexColor background color
• style style css style string

Examples

<View style="display: flex;">
 <View style="flex: 50%">
  <Header value="Facts:"></Header>
  <Text name="text" value="$fact"></Text>
 </View>
 <View style="flex: 50%; margin-left: 1em">
  <Header value="Enter your question:"></Header>
  <TextArea name="question" ></TextArea>
 </View>
</View>