docs: DEV-2578: Documentation for Dynamic Labels (HumanSignal#2502)

* docs: DEV-2578: examples for dynamic labels * move Table to object tags * add missed params to tag docs * Add 5 new templates for Dynamic Labels ASR Hypotheses Inventory Tracking SERP Ranking Text-to-Image Generation Visual Genome * Fix small arrows in Browse Templates * remove tabs from config templates * Add Dynamic Labels to templates docs * Update asr_hypotheses.md * Update inventory_tracking.md * Update serp_ranking.md * Update text_to_image.md * Update visual_genome.md * Change templates structure * Fix sample data for templates * Add images to template pages in doc * Fixed images - recreate, 2x for retina, compression * Fix Inventory Tracking and Text-to-Image tpls - fix Inventory Tracking according to image - fix Text-to-Image category * Fixes after review; add missed value and html params * More detailed description for Inventory Tracking * Reorder and rephrase Inventory Tracking text * More detailed description for SERP Ranking template * Move templates to relevant existing categories * More info about children and allownested * Fix data in SERP Ranking in-app template * Fixes after review * Docs for Dynamic Choices with examples Co-authored-by: anithamuthu2022 <[email protected]> Co-authored-by: nik <[email protected]>
jotamotk · Jun 16, 2022 · f1df600 · f1df600
1 parent 40156c2
commit f1df600
Show file tree

Hide file tree

Showing 21 changed files with 594 additions and 26 deletions.
diff --git a/docs/source/tags/audio.md b/docs/source/tags/audio.md
@@ -1,7 +1,7 @@
 ---
 title: Audio
 type: tags
-order: 301
+order: 302
 meta_title: Audio Tag for Labeling Audio
 meta_description: Customize Label Studio to label audio data for machine learning and data science projects.
 ---
@@ -12,11 +12,13 @@ Use with the following data types: audio
 
 ### Parameters
 
-| Param | Type | Description |
-| --- | --- | --- |
-| name | <code>string</code> | Name of the element |
-| value | <code>string</code> | Data field containing path or a URL to the audio |
-| hotkey | <code>string</code> | Hotkey used to play or pause audio |
+| Param | Type | Default | Description |
+| --- | --- | --- | --- |
+| name | <code>string</code> |  | Name of the element |
+| value | <code>string</code> |  | Data field containing path or a URL to the audio |
+| hotkey | <code>string</code> |  | Hotkey used to play or pause audio |
+| [cursorwidth] | <code>string</code> | <code>1</code> | Audio pane cursor width. It is measured in pixels. |
+| [cursorcolor] | <code>string</code> | <code>&quot;#333&quot;</code> | Audio pane cursor color. The color should be specified in hex decimal string |
 
 ### Sample Results JSON
 

diff --git a/docs/source/tags/choices.md b/docs/source/tags/choices.md
@@ -8,7 +8,9 @@ meta_description: Customize Label Studio with multiple choice labels for machine
 
 Use the Choices tag to create a group of choices, with radio buttons or checkboxes. Can be used for single or multi-class classification. Use for advanced classification tasks where annotators can choose one or multiple answers.
 
-Use with the following data types: audio, image, HTML, paragraphs, text, time series, video
+Choices can have dynamic value to load labels from task. This task data should contain a list of options to create underlying <Choice>s. All the parameters from options will be transferred to corresponding tags.
+
+The Choices tag can be used with any data types.
 
 ### Parameters
 
@@ -25,6 +27,8 @@ Use with the following data types: audio, image, HTML, paragraphs, text, time se
 | [whenLabelValue] | <code>string</code> |  | Narrow down visibility by label value |
 | [whenChoiceValue] | <code>string</code> |  | Narrow down visibility by choice value |
 | [perRegion] | <code>boolean</code> |  | Use this tag to select a choice for a specific region instead of the entire task |
+| [value] | <code>string</code> |  | Task data field containing a list of dynamically loaded choices (see example below) |
+| [allowNested] | <code>boolean</code> |  | Allow to use `children` field in dynamic choices to nest them. Submitted result will contain array of arrays, every item is a list of values from topmost parent choice down to selected one. |
 
 ### Example
 ```html
@@ -39,3 +43,32 @@ Use with the following data types: audio, image, HTML, paragraphs, text, time se
   <Text name="txt-1" value="John went to see Mary" />
 </View>
 ```
+**Example** *(This config with dynamic labels)*  
+```html
+<View>
+  <Audio name="audio" value="$audio" />
+  <Choices name="transcription" toName="audio" value="$variants" />
+</View>
+<!-- {
+  "data": {
+    "variants": [
+      { "value": "Do or doughnut. There is no try." },
+      { "value": "Do or do not. There is no trial." },
+      { "value": "Do or do not. There is no try." },
+      { "value": "Duo do not. There is no try." }
+    ]
+  }
+} -->
+```
+**Example** *(is equivalent to this config)*  
+```html
+<View>
+  <Audio name="audio" value="$audio" />
+  <Choices name="transcription" toName="audio" value="$variants">
+    <Choice value="Do or doughnut. There is no try." />
+    <Choice value="Do or do not. There is no trial." />
+    <Choice value="Do or do not. There is no try." />
+    <Choice value="Duo do not. There is no try." />
+  </Choices>
+</View>
+```
diff --git a/docs/source/tags/hypertext.md b/docs/source/tags/hypertext.md
@@ -66,7 +66,7 @@ Use with the following data types: HTML
 ```html
 <View>
   <HyperText name="p1">
-  	<p>Some explanations <em>with style</em></p>
+    <p>Some explanations <em>with style</em></p>
   </HyperText>
 </View>
 ```
diff --git a/docs/source/tags/label.md b/docs/source/tags/label.md
@@ -24,6 +24,7 @@ Label tag represents a single label. Use with the Labels tag, including BrushLab
 | [background] | <code>string</code> | <code>&quot;#36B37E&quot;</code> | Background color of an active label in hexadecimal |
 | [selectedColor] | <code>string</code> | <code>&quot;#ffffff&quot;</code> | Color of text in an active label in hexadecimal |
 | [granularity] | <code>symbol</code> \| <code>word</code> |  | Set control based on symbol or word selection (only for Text) |
+| [html] | <code>string</code> |  | HTML code is used to display label button instead of raw text provided by `value` (should be properly escaped) |
 
 ### Example
 ```html

diff --git a/docs/source/tags/labels.md b/docs/source/tags/labels.md
@@ -6,9 +6,11 @@ meta_title: Labels Tag for Labeling Regions
 meta_description: Customize Label Studio by using the Labels tag to provide a set of labels for labeling regions in tasks for machine learning and data science projects.
 ---
 
-Use the Labels tag to create a set of labels that can be assigned to identified regions. Use with the Label tag to specify the values of labels to assign to regions.
+The Labels tag provides a set of labels for labeling regions in tasks for machine learning and data science projects. Use the Labels tag to create a set of labels that can be assigned to identified region and specify the values of labels to assign to regions.
 
-Use with the following data types: audio, text. Other data types have type-specific Labels tags.
+All types of Labels can have dynamic value to load labels from task. This task data should contain a list of options to create underlying <Label>s. All the parameters from options will be transferred to corresponding tags.
+
+The Labels tag can be used with audio and text data types. Other data types have type-specific Labels tags.
 
 ### Parameters
 
@@ -23,6 +25,7 @@ Use with the following data types: audio, text. Other data types have type-speci
 | [fillColor] | <code>string</code> |  | Rectangle fill color in hexadecimal |
 | [strokeColor] | <code>string</code> | <code>&quot;#f48a42&quot;</code> | Stroke color in hexadecimal |
 | [strokeWidth] | <code>number</code> | <code>1</code> | Width of the stroke |
+| [value] | <code>string</code> |  | Task data field containing a list of dynamically loaded labels (see example below) |
 
 ### Example
 ```html
@@ -35,3 +38,26 @@ Use with the following data types: audio, text. Other data types have type-speci
   <Text name="txt-1" value="$text" />
 </View>
 ```
+**Example** *(This part of config with dynamic labels)*  
+```html
+<Labels name="product" toName="shelf" value="$brands" />
+<!-- {
+  "data": {
+    "brands": [
+      { "value": "Big brand" },
+      { "value": "Another brand", "background": "orange" },
+      { "value": "Local brand" },
+      { "value": "Green brand", "alias": "Eco", showalias: true }
+    ]
+  }
+} -->
+```
+**Example** *(is equivalent to this config)*  
+```html
+<Labels name="product" toName="shelf">
+  <Label value="Big brand" />
+  <Label value="Another brand" background="orange" />
+  <Label value="Local brand" />
+  <Label value="Green brand" alias="Eco" showAlias="true" />
+</Labels>
+```
diff --git a/docs/source/tags/number.md b/docs/source/tags/number.md
@@ -19,11 +19,12 @@ Use with the following data types: audio, image, HTML, paragraphs, text, time se
 | [min] | <code>number</code> |  | Minimum number value |
 | [max] | <code>number</code> |  | Maximum number value |
 | [step] | <code>number</code> | <code>1</code> | Step for value increment/decrement |
-| [defaultValue] | <code>number</code> |  | Default number value |
-| hotkey | <code>string</code> |  | Hotkey for increasing number value |
+| [defaultValue] | <code>number</code> |  | Default number value; will be added automaticaly to result for required fields |
+| [hotkey] | <code>string</code> |  | Hotkey for increasing number value |
 | [required] | <code>boolean</code> | <code>false</code> | Whether to require number validation |
 | [requiredMessage] | <code>string</code> |  | Message to show if validation fails |
 | [perRegion] | <code>boolean</code> |  | Use this tag to classify specific regions instead of the whole object |
+| [slider] | <code>boolean</code> | <code>false</code> | Use slider look instead of input; use min and max to add your constraints |
 
 ### Example
 ```html

diff --git a/docs/source/tags/shortcut.md b/docs/source/tags/shortcut.md
@@ -12,11 +12,12 @@ Use with the following data types: audio, image, HTML, paragraphs, text, time se
 
 ### Parameters
 
-| Param | Type | Description |
-| --- | --- | --- |
-| value | <code>string</code> | The value of the shortcut |
-| [alias] | <code>string</code> | Shortcut alias |
-| [hotkey] | <code>string</code> | Hotkey |
+| Param | Type | Default | Description |
+| --- | --- | --- | --- |
+| value | <code>string</code> |  | The value of the shortcut |
+| [alias] | <code>string</code> |  | Shortcut alias |
+| [hotkey] | <code>string</code> |  | Hotkey |
+| [background] | <code>string</code> | <code>&quot;#333333&quot;</code> | Background color in hexadecimal |
 
 ### Example
 ```html

diff --git a/docs/source/tags/table.md b/docs/source/tags/table.md
@@ -1,7 +1,7 @@
 ---
 title: Table
 type: tags
-order: 506
+order: 306
 meta_title: Table Tag to Display Keys & Values in Tables
 meta_description: Customize Label Studio by displaying key-value pairs in tasks for machine learning and data science projects.
 ---
@@ -10,9 +10,10 @@ Use the Table tag to display object keys and values in a table.
 
 ### Parameters
 
-| Param | Type |
-| --- | --- |
-| value | <code>string</code> | 
+| Param | Type | Description |
+| --- | --- | --- |
+| value | <code>string</code> | Data field value containing JSON type for Table |
+| [valueType] | <code>string</code> | Value to define the data type in Table |
 
 ### Example
 

diff --git a/docs/source/tags/taxonomy.md b/docs/source/tags/taxonomy.md
@@ -20,6 +20,8 @@ Use with the following data types: audio, image, HTML, paragraphs, text, time se
 | [showFullPath] | <code>boolean</code> | <code>false</code> | Whether to show the full path of selected items |
 | [pathSeparator] | <code>string</code> | <code>&quot;/&quot;</code> | Separator to show in the full path |
 | [maxUsages] | <code>number</code> |  | Maximum number of times a choice can be selected per task |
+| [maxWidth] | <code>number</code> |  | Maximum width for dropdown |
+| [minWidth] | <code>number</code> |  | Minimum width for dropdown |
 | [required] | <code>boolean</code> | <code>false</code> | Whether taxonomy validation is required |
 | [requiredMessage] | <code>string</code> |  | Message to show if validation fails |
 | [placeholder=] | <code>string</code> |  | What to display as prompt on the input |

diff --git a/docs/source/tags/text.md b/docs/source/tags/text.md
@@ -1,7 +1,7 @@
 ---
 title: Text
 type: tags
-order: 307
+order: 308
 meta_title: Text Tags for Text Objects
 meta_description: Customize Label Studio with the Text tag to annotate text for NLP and NER machine learning and data science projects.
 ---

diff --git a/docs/source/tags/timeseries.md b/docs/source/tags/timeseries.md
@@ -1,7 +1,7 @@
 ---
 title: TimeSeries
 type: tags
-order: 308
+order: 309
 meta_title: Time Series Tags for Time Series Data
 meta_description: Customize Label Studio with the TimeSeries tag to annotate time series data for machine learning and data science projects.
 ---
@@ -25,6 +25,7 @@ Use with the following data types: time series
 | [timeDisplayFormat] | <code>string</code> |  | Format used to display temporal value. Can be a number or a date. If a temporal column is a date, use strftime to format it. If it's a number, use [d3 number](https://github.com/d3/d3-format#locale_format) formatting. |
 | [sep] | <code>string</code> | <code>&quot;,&quot;</code> | Separator for your CSV file. |
 | [overviewChannels] | <code>string</code> |  | Comma-separated list of channel names or indexes displayed in overview. |
+| [overviewWidth] | <code>string</code> | <code>&quot;25%&quot;</code> | Default width of overview window in percents |
 | [fixedScale] | <code>boolean</code> | <code>false</code> | Whether to scale y-axis to the maximum to fit all the values. If false, current view scales to fit only the displayed values. |
 
 ## Channel

diff --git a/docs/source/tags/video.md b/docs/source/tags/video.md
@@ -1,7 +1,7 @@
 ---
 title: Video
 type: tags
-order: 309
+order: 310
 meta_title: Video Tag for Video Labeling
 meta_description: Customize Label Studio with the Video tag for basic video annotation tasks for machine learning and data science projects.
 ---
@@ -16,9 +16,10 @@ Use with the following data types: video
 | --- | --- | --- | --- |
 | name | <code>string</code> |  | Name of the element |
 | value | <code>string</code> |  | URL of the video |
-| [frameRate] | <code>number</code> | <code>0.04</code> | frame rate in seconds; default 1/25s |
+| [frameRate] | <code>number</code> | <code>24</code> | videp frame rate per second; default is 24 |
 | [sync] | <code>string</code> |  | object name to sync with |
 | [muted] | <code>boolean</code> | <code>false</code> | muted video |
+| [height] | <code>number</code> | <code>600</code> | height of the video |
 
 ### Example
 ```html

diff --git a/docs/source/tags/view.md b/docs/source/tags/view.md
@@ -1,7 +1,7 @@
 ---
 title: View
 type: tags
-order: 507
+order: 506
 meta_title: View Tag for Defining How Blocks are Displayed
 meta_description: Customize how blocks are displayed on the labeling interface in Label Studio for machine learning and data science projects.
 ---

diff --git a/docs/source/templates/asr_hypotheses.md b/docs/source/templates/asr_hypotheses.md
@@ -0,0 +1,49 @@
+---
+title: ASR Hypotheses Selection
+type: templates
+category: Ranking and Scoring
+cat: ranking-and-scoring
+order: 551
+meta_title: Choose the most accurate Automatic Speech Recognition (ASR) hypotheses
+meta_description: 
+---
+
+When you work with automatic speech transcribers, you are provided with several transcription hypotheses. Now, you can select one of the variations from the list of transcription hypotheses.
+<br/>
+
+<img src="/images/templates/asr-hypotheses.png" alt="ASR Hypotheses Selection example" class="gif-border" width="552px" height="408px" />
+
+## Labeling Configuration
+
+```xml
+<View>
+  <Audio name="audio" value="$audio"/>
+  <Choices name="transcriptions" toName="audio" value="$transcriptions" selection="highlight"/>
+</View>
+```
+
+## Example data
+
+```json
+{
+  "data": {
+    "audio": "https://htx-pub.s3.amazonaws.com/datasets/audio/f2btrop6.0.wav",
+    "transcriptions": [{
+      "style": "padding-left: 5px; box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px; background-color: #FFFFFF",
+      "value": "potrostith points out that if school based clinics were established parental permission would be required for students to receive each service offered"
+    }, {
+      "style": "padding-left: 5px; box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px; background-color: #F8F8F8",
+      "value": "potrostith points out that if school-based clinics were established parental permission would be required for students to receive each service offered"
+    }, {
+      "style": "padding-left: 5px; box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px; background-color: #F5F5F5",
+      "value": "purporting points out that if school based clinics were established parental permission would be required for students to receive each service offered"
+    }, {
+      "style": "padding-left: 5px; box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px; background-color: #F0F0F0",
+      "value": "pork roasted points out that if school based clinics were establish parental permission would be required for students to receive each service offered"
+    }, {
+      "style": "padding-left: 5px; box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px; background-color: #E8E8E8",
+      "value": "purpose it points out that if school based clinics war establish parental permission would be required for students to receive each service offered"
+    }]
+  }
+}
+```