Skip to content

Commit

Permalink
Docs: DEV-1511 — Add new playground templates + VAD template (HumanSi…
Browse files Browse the repository at this point in the history 
…gnal#2085)

* docs: Add new time series classification template

* docs: Add new website rating template

* docs: Add new HTML classification template

* docs: Add new multi-image classification template

* docs: Update website rating input data

* docs: update URL for multi-image classification

* docs: Add a voice activity detection template

in light of this article about VAD
https://thegradient.pub/one-voice-detector-to-rule-them-all/

* docs: Improve details on CORS

* docs: Update image for website rating

* docs: Add image for time series classification template

* docs: Update ts classification options for relevance

* docs: Add images for remaining classification templates
  • Loading branch information
@smoreface
smoreface authored Mar 11, 2022
1 parent aa87fc6 commit c437c19
Show file tree
Hide file tree
Showing 15 changed files with 530 additions and 0 deletions.
13 changes: 13 additions & 0 deletions docs/source/templates/gallery_asr.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -123,6 +123,19 @@
</a>
</div>


<div class="column">
<a href="/templates/voice_activity_detection.html">
<div class="card">
<div class="image-wrap">
<div class="image" style="background-image: url(/images/templates-misc/voice-activity-detection.png)"></div>
</div>
<div class="category">voice activity detection, VAD, signal quality detection</div>
<div class="title">Voice Activity Detection</div>
</div>
</a>
</div>

</div>
</div>

Expand Down
12 changes: 12 additions & 0 deletions docs/source/templates/gallery_cv.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -136,6 +136,18 @@
</a>
</div>

<div class="column">
<a href="/templates/multi-image_classification.html">
<div class="card">
<div class="image-wrap">
<div class="image" style="background-image: url(/images/templates-misc/multi-image-classification.png)"></div>
</div>
<div class="category">Image Classification</div>
<div class="title">Multi-Image Classification</div>
</div>
</a>
</div>


</div>
</div>
Expand Down
12 changes: 12 additions & 0 deletions docs/source/templates/gallery_data_parsing.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -75,6 +75,18 @@
</a>
</div>

<div class="column">
<a href="/templates/html_classification.html">
<div class="card">
<div class="image-wrap">
<div style="background-image: url(/images/templates-misc/html-classification.png); background-size:cover" class="image"></div>
</div>
<div class="category">classification, content moderation</div>
<div class="title">HTML Classification</div>
</div>
</a>
</div>

</div>
</div>

Expand Down
12 changes: 12 additions & 0 deletions docs/source/templates/gallery_rns.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -75,6 +75,18 @@
</a>
</div>

<div class="column">
<a href="/templates/website_rating.html">
<div class="card">
<div class="image-wrap">
<div style="background-image: url(/images/templates-misc/website-rating.png); background-size:cover" class="image"></div>
</div>
<div class="category">rating, HTML</div>
<div class="title">Website Rating</div>
</div>
</a>
</div>

</div>
</div>

Expand Down
12 changes: 12 additions & 0 deletions docs/source/templates/gallery_timeseries.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -87,6 +87,18 @@
</a>
</div>

<div class="column">
<a href="/templates/time_series_classification.html">
<div class="card">
<div class="image-wrap">
<div class="image" style="background-image: url(/images/templates-misc/time-series-classification.png)"></div>
</div>
<div class="category">Classification, time series</div>
<div class="title">Time Series Classification</div>
</div>
</a>
</div>

<div class="column">
<a href="/templates/time_series.html">
<div class="card">
Expand Down
73 changes: 73 additions & 0 deletions docs/source/templates/html_classification.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,73 @@
---
title: HTML Classification
type: templates
category: Structured Data Parsing
cat: structured-data-parsing
order: 605
meta_title: HTML Classification Data Labeling Template
meta_description: Template for classifying HTML documents with Label Studio for your machine learning and data science projects.
---

<img src="/images/templates-misc/html-classification.png" alt="" class="gif-border" width="552px" height="352px" />

For content moderation and other use cases where you want to classify HTML content, you can use this template.

## Interactive Template Preview

<div id="main-preview"></div>

## Labeling Configuration

```html
<View>
<Choices name="toxicity" toName="web_page" choice="multiple" showInline="true">
<Choice value="Toxic" background="red"/>
<Choice value="Severely Toxic" background="brown"/>
<Choice value="Obscene" background="green"/>
<Choice value="Threat" background="blue"/>
<Choice value="Insult" background="orange"/>
<Choice value="Hate" background="grey"/>
</Choices>

<View style="border: 1px solid #CCC;
border-radius: 10px;
padding: 5px">
<HyperText name="web_page" value="$text"/>
</View>
</View>
```

## About the labeling configuration

All labeling configurations must be wrapped in [View](/tags/view.html) tags.

The [Choices](/tags/choices.html) control tag specifies the options to use to classify the website content.
```xml
<Choices name="toxicity" toName="web_page" choice="multiple" showInline="true">
<Choice value="Toxic" background="red"/>
<Choice value="Severely Toxic" background="brown"/>
<Choice value="Obscene" background="green"/>
<Choice value="Threat" background="blue"/>
<Choice value="Insult" background="orange"/>
<Choice value="Hate" background="grey"/>
</Choices>
```
The `choice` parameter lets annotators select multiple choices, and the `showInline` parameter displays all the choices in a row. This template provides numerous content moderation choice values, but you can modify the template to provide different choices.

Styling on the [View](/tags/view.html) tag adds a border around the website content to make it clear to annotators what is website content:
```xml
<View style="border: 1px solid #CCC;
border-radius: 10px;
padding: 5px">
```

The [HyperText](/tags/hypertext.html) object tag displays the website content, specified in the `text` key of Label Studio JSON format or imported as plain text.
```xml
<HyperText name="web_page" value="$text"/>
```


## Related tags
- [Choices](/tags/choices.html)
- [HyperText](/tags/hypertext.html)
- [View](/tags/view.html)
127 changes: 127 additions & 0 deletions docs/source/templates/multi-image_classification.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,127 @@
---
title: Multi-Image Classification
type: templates
category: Computer Vision
cat: computer-vision
order: 111
meta_title: Multi-Image Classification Data Labeling Template
meta_description: Template for classifying multiple images at once with Label Studio for your machine learning and data science projects.
---

<img src="/images/templates-misc/multi-image-classification.png" alt="" class="gif-border" width="552px" height="389px" />

For data labeling cases when you want to classify multiple images at once, or if you want to ask multiple questions about multiple images, you can use this template.

## Interactive Template Preview

<div id="main-preview"></div>

## Labeling Configuration

```html
<View>
<Header value="Please select everything you see on the image" />

<View style="display: flex;">
<View style="width: 49%; margin-right: 1.99%">
<Image name="img-left" value="$image1"/>
<Choices name="class-left" toName="img-left" choice="multiple">
<Choice value="People" />
<Choice value="Trees" />
<Choice value="Animals" />
</Choices>
</View>

<View style="width: 49%;">
<Image name="img-right" value="$image2"/>
<Choices name="class-right" toName="img-right" choice="multiple">
<Choice value="Food" />
<Choice value="Cars" />
<Choice value="Buildings" />
</Choices>
</View>
</View>

<View>
<Header value="Which one is clearer to you?" />
<Choices name="comparison" toName="img-left" showInline="true">
<Choice value="Left" />
<Choice value="Right" />
</Choices>
</View>
</View>
```

## About the labeling configuration

All labeling configurations must be wrapped in [View](/tags/view.html) tags.

You can add a [header](/tags/header.html) to provide instructions to the annotator:
```xml
<Header value="Please select everything you see on the image" />
```

Styling with the [View](/tags/view.html) tag sets up the display to allow both images to show side by side:
```xml
<View style="display: flex;">
```
Then each image is wrapped in its own [View](/tags/view.html) tag to control the display:
```xml
<View style="width: 49%; margin-right: 1.99%">
```

Within that first [View](/tags/view.html) tag, the [Image](/tags/image.html) object tag specifies the image to display on the left:
```xml
<Image name="img-left" value="$image1"/>
```
The `value` parameter specifies a JSON key of `"image1"` in the Label Studio JSON task that must be imported with URLs to both images.

The [Choices](/tags/choices.html) control tag displays classification options that apply to the image on the left, specified with the `toName` parameter. The `choice` parameter indicates that annotators can select multiple choices:
```xml
<Choices name="class-left" toName="img-left" choice="multiple">
<Choice value="People" />
<Choice value="Trees" />
<Choice value="Animals" />
</Choices>
```

The [View](/tags/view.html) tag to display the image and relevant choices on the left is closed, then a new [View](/tags/view.html) tag styles the second image and choice selection to appear on the right:
```xml
<View style="width: 49%;">
```

Within this [View](/tags/view.html) tag, the [Image](/tags/image.html) object tag specifies the image to display on the right:
```xml
<Image name="img-right" value="$image2"/>
```
The `value` parameter specifies a JSON key of `"image2"` in the Label Studio JSON task that must be imported with URLs to both images.

The [Choices](/tags/choices.html) control tag displays classification options that apply to the image on the right, specified with the `toName` parameter:
```xml
<Choices name="class-right" toName="img-right" choice="multiple">
<Choice value="Food" />
<Choice value="Cars" />
<Choice value="Buildings" />
</Choices>
```

Close both [View](/tags/view.html) tags for the image and choice styling, and use a new View tag to separate the remaining overall classification options. You can add a [header](/tags/header.html) to provide instructions to the annotator, and use the Choices control tag to display choices about both images.
```xml
<View>
<Header value="Which one is clearer to you?" />
<Choices name="comparison" toName="img-left" showInline="true">
<Choice value="Left" />
<Choice value="Right" />
</Choices>
</View>
```
The Choices tag `toName` value references `img-left` so that all annotations are tied together in the results.

## Related tags
- [Header](/tags/header.html)
- [View](/tags/view.html)
- [Image](/tags/image.html)
- [Choices](/tags/choices.html)

## Related templates
- [Image Classification](image_classification.html)
80 changes: 80 additions & 0 deletions docs/source/templates/time_series_classification.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,80 @@
---
title: Time Series Classification
type: templates
category: Time Series Analysis
cat: time-series-analysis
order: 706
meta_title: Time Series Classification Data Labeling Template
meta_description: Template for classifying time series data with Label Studio for your machine learning and data science projects.
---

<img src="/images/templates-misc/time-series-classification.png" alt="" class="gif-border" width="552px" height="546px" />

If you need to train a machine learning model to classify time series data, create a dataset using this template. This template provides a way for annotators to classify the entire time series signal graph, and an option to classify specific parts of the graph as types of activity. You can combine these classification methods or use only one.

## Interactive Template Preview

<div id="main-preview"></div>

## Labeling Configuration

```html
<View>
<Header value="Time Series classification"
style="font-weight: normal"/>
<Choices name="pattern" toName="ts">
<Choice value="Accelerating"/>
<Choice value="Slowing"/>
</Choices>
<TimeSeriesLabels name="label" toName="ts">
<Label value="Run"/>
<Label value="Walk"/>
</TimeSeriesLabels>
<TimeSeries name="ts" value="$csv" valueType="url">
<Channel column="first_column"/>
</TimeSeries>
</View>
```

## About the labeling configuration

All labeling configurations must be wrapped in [View](/tags/view.html) tags.

You can add a [header](/tags/header.html) to provide instructions to the annotator:
```xml
<Header value="Time Series classification"
style="font-weight: normal"/>
```
The `style` parameter overrides the default styling of the header to show a normal font weight instead of bold.

The [Choices](/tags/choices.html) control tag lets annotators classify the entire time series graph:
```xml
<Choices name="pattern" toName="ts">
<Choice value="Accelerating"/>
<Choice value="Slowing"/>
</Choices>
```

The [TimeSeriesLabels](/tags/timeserieslabels.html) control tag lets annotators classify specific regions of the time series graph as specific activities:
```xml
<TimeSeriesLabels name="label" toName="ts">
<Label value="Run"/>
<Label value="Walk"/>
</TimeSeriesLabels>
```

The [TimeSeries](/tags/timeseries.html) object tag specifies the location of the time series data:
```xml
<TimeSeries name="ts" value="$csv" valueType="url">
<Channel column="first_column"/>
</TimeSeries>
```

## Related tags
- [Header](/tags/header.html)
- [Choices](/tags/choices.html)
- [TimeSeriesLabels](/tags/timeserieslabels.html)
- [TimeSeries](/tags/timeseries.html)

## Related templates
- [Time Series Labeling](time_series.html)
Loading

0 comments on commit c437c19

Please sign in to comment.