Release 0.6.0 (#277)

Release 0.6.0
Co-authored-by: Mikhail Maluyk <[email protected]>
Co-authored-by: nik <[email protected]>
Co-authored-by: Max <[email protected]>
Co-authored-by: Rhythm of vision <[email protected]>

README.md

@@ -4,7 +4,9 @@
 
 <br/>
 
- **Label Studio is a swiss army knife of data labeling and annotation tools :v:**
+> **NEW** Release 0.6.0: Nested & Per-Region Labeling, Filtering & Cueing the active labels, read the [release notes](https://labelstud.io/blog/release-060-nested-data-labeling.html).
+
+**Label Studio is a swiss army knife of data labeling and annotation tools :v:**
 
 Try it now in a **[running app](https://app.labelstud.io)** and check out the **[introductory post](https://towardsdatascience.com/introducing-label-studio-a-swiss-army-knife-of-data-labeling-140c1be92881#3907-fd502dc24c8d)**.
 

docs/source/blog/index.html

@@ -118,29 +118,29 @@
   <div class="grid">
 
     <!-- Transfer learning with PyTorch -->
+    <!-- <div class="column"> -->
+    <!--   <a href="/notebook/transfer-learning-tutorial.html"> -->
+    <!--     <div class="card"> -->
+    <!--       <div class="image-wrap"> -->
+    <!--         <div style="background-image: url(/images/release-050-views.png)" class="image"></div> -->
+    <!--       </div> -->
+    <!--       <div class="category">tutorial</div> -->
+    <!--       <div class="desc">31 Mar 2020, 5 min read</div> -->
+    <!--       <div class="title">Transfer learning with PyTorch</div> -->
+    <!--     </div> -->
+    <!--   </a> -->
+    <!-- </div> -->
+
+    <!-- Release 0.6.0 -->
     <div class="column">
-      <a href="/notebook/transfer-learning-tutorial.html">
-        <div class="card">
-          <div class="image-wrap">
-            <div style="background-image: url(/images/release-050-views.png)" class="image"></div>
-          </div>
-          <div class="category">tutorial</div>
-          <div class="desc">31 Mar 2020, 5 min read</div>
-          <div class="title">Transfer learning with PyTorch</div>
-        </div>
-      </a>
-    </div>
-
-    <!-- Release 0.5.0 -->
-    <div class="column">
-      <a href="/blog/release-050.html">
+      <a href="/blog/release-060-nested-data-labeling.html">
         <div class="card">
           <div class="image-wrap">
             <div style="background-image: url(/images/release-050-views.png)" class="image"></div>
           </div>
           <div class="category">release notes</div>
-          <div class="desc">9 Mar 2020, 5 min read</div>
-          <div class="title">Label Studio 0.5.0 Release</div>
+          <div class="desc">8 May 2020, 7 min read</div>
+          <div class="title">Label Studio 0.6.0 Release - Nested Data Labeling</div>
         </div>
       </a>
     </div>
@@ -159,6 +159,20 @@
 
     </div>
 
+        <!-- Release 0.5.0 -->
+    <div class="column">
+      <a href="/blog/release-050.html">
+        <div class="card">
+          <div class="image-wrap">
+            <div style="background-image: url(/images/release-050-views.png)" class="image"></div>
+          </div>
+          <div class="category">release notes</div>
+          <div class="desc">9 Mar 2020, 5 min read</div>
+          <div class="title">Label Studio 0.5.0 Release - Relations</div>
+        </div>
+      </a>
+    </div>
+
     <!-- Bert -->
     <div class="column">
       <a href="https://towardsdatascience.com/how-to-finetune-bert-to-classify-your-slack-chats-without-coding-3a7002936bcf">

docs/source/blog/release-060-nested-data-labeling.md

@@ -0,0 +1,82 @@
+---
+title: Label Studio Release Notes 0.6.0 - Nested Data Labeling
+type: blog
+order: 101
+---
+
+Two months in the baking, this release features the evolution of the labeling interface into supporting not only multiple data types and labeling scenarios, but also exploring the path of bringing additional dimensions into the labeling task. Along with that purely UI work a major update to the model assisted labeling.
+
+We've had a panel for the predictions for a while, the idea behind it is to provide a set of predictions possibly coming from different models to explore and adjust, and now there is a new models page to easier manage what is connected and used for generating those predictions.
+
+Here is more on the results of this update: 
+
+## Nested Labeling 
+
+Nested labeling enables you to specify multiple classification options that show up after you’ve selected a connected parent class:
+
+<br/>
+<img src="/images/release-060/nested_labeling.gif" class="gif-border" />
+<br/>
+
+It can match based on the selected Choice or Label value, and works with a `required` attribute too, smart selecting the region that you’ve not labeled. To try it out check [Choices](/tags/choices.html) documentation and look for the following attributes: `visibleWhen`, `whenTagName`, `whenLabelValue`, `whenChoiceValue`.
+
+## Per region labeling
+
+With per region labeling you can now provide additional attributes to the labeled regions. For example, when doing audio segmentation you can further classify the region. Per region is available for any data type and the following control tags: [Choices](/tags/choices.html), [TextArea](/tags/textarea.html), and [Rating](/tags/rating.html).
+
+<br/>
+<img src="/images/release-060/per-region.gif" class="gif-border" />
+
+It nicely integrates with the nested labeling, for example, you can provide multiple levels of classification for any particular region. 
+
+## Machine Learning Updates
+
+New ML page in UI, where you can specify URLs to connect ML backends, manually trigger model training, explore training statuses, and quickly check predictions by drag-n-dropping tasks.
+
+<br/>
+<img src="/images/release-060/model_page.png" class="gif-border" />
+
+
+### Multiple Backends
+
+Label Studio now supports multiple ML backends connected together. You can simultaneously get multiple predictions for each task and do comparative performance analysis for different models or different hyperparameters of a single model. It's possible to connect as many backends as you want by using `--ml-backend url1 url2 ...` command-line option or adding them via UI.
+
+### Connecting models
+
+Creating & connecting machine learning backend becomes way easier - simply define your model.py script with `.fit()` / `.predict()` methods and run ML backend with `label-studio-ml start --init --script=model.py`. Check quickstart and tutorials on how to connect sklearn and PyTorch models
+
+## Filtering
+
+When the number of labels or choices is big, looking for a particular one becomes tedious. New <Filter /> tag to the rescue. It works with any list of Labels / Choices, and is keyboard-driven. Here is an example of the interaction: 
+
+<br/> 
+<img src="/images/release-060/filtering.gif" class="gif-border" />
+
+Hitting `shift+f` puts focus, then hitting Enter key selects the first matching item.
+
+## Display Label Names
+
+Displaying labels on top of the labeled regions proved to be a useful feature if you’d like to do a verification of the labeling. Visually inspecting the regions takes smaller amounts of time than doing so through switching between regions.
+
+<br/>
+<img src="/images/release-060/show-labels.gif" class="gif-border" />
+
+### Models Scores 
+
+Along with the names of the labels you can provide a prediction score for specific regions. That score may either come from the data that you upload or from the model that you’ve connected. When it’s available you can **Sort by the score**, and quickly verify/adjust the labeling for the most “uncertain” regions. 
+
+## Keeping the label active
+
+If you label the same type of data it may be cumbersome to keep selecting the same label over and over again, now you can choose to keep the last label active and use it for new labeling. 
+
+<br/>
+<img src="/images/release-060/keep-label-active.gif" class="gif-border" />
+
+Don’t forget to unselect the region when you want to select a new label, otherwise, you’d change the label of the existing region.
+
+## Bug fixes & improvements
+
+* --host argument now available via command-line argument (thanks to [@hachreak](https://github.com/hachreak))
+* fixed upload with plain text tasks (thanks to [@gauthamsuresh09](https://github.com/gauthamsuresh09))
+* fixed one-click deploy on Google Cloud (thanks to [@iCorv](https://github.com/iCorv))
+* fixed URL paths for proxy safety (thanks to [ezavesky](https://github.com/ezavesky))

docs/themes/htx/layout/partials/google_analytics.ejs

@@ -7,4 +7,6 @@
 	ga('create', '<%= theme.google_analytics %>', 'auto');
 	ga('send', 'pageview');
 </script>
+
+<script> (function(){ window.ldfdr = window.ldfdr || {}; (function(d, s, ss, fs){ fs = d.getElementsByTagName(s)[0]; function ce(src){ var cs = d.createElement(s); cs.src = src; setTimeout(function(){fs.parentNode.insertBefore(cs,fs)}, 1); } ce(ss); })(document, 'script', 'https://sc.lfeeder.com/lftracker_v1_lYNOR8xWxQQaWQJZ.js'); })(); </script>
 <% } %>

docs/themes/htx/layout/partials/main_menu.ejs

@@ -8,7 +8,7 @@
 <!-- Github starts -->
 <div style="margin: 7px 0 0 7px !important;" class="github-button-wrap">
     <a class="github-button" href="https://github.com/heartexlabs/label-studio"
-       data-icon="octicon-star""
+       data-icon="octicon-star"
        data-size="large" data-show-count="true" aria-label="Star heartexlabs/label-studio on GitHub"></a>
 </div>
 

docs/themes/htx/source/css/_syntax.styl

@@ -1,3 +1,10 @@
+.small-block
+      height: 250px;
+      overflow: auto;
+
+.small-block > table
+  width: 100%;
+
 pre
   border-radius: $radius
   position: relative
@@ -88,7 +95,7 @@ pre code
     &-xml &-css,
     &-xml &-cdata
       opacity: 0.5
-
+  
   &.hljs
     &.html, &.js, &.bash, &.css
       &::before
@@ -106,7 +113,7 @@ pre code
 
     &.html::before
       content: "HTML"
-
+    
     &.js::before
       content: "JS"
 

docs/themes/htx/source/css/page.styl

@@ -22,6 +22,9 @@
   background-color: #AAA !important;
   border: 1px solid #999 !important;
 
+.gif-border
+  border: 1px solid #f1f1f1;
+
 #header
   box-shadow: 0 0 1px rgba(0,0,0,.25)
   transition: background-color .3s ease-in-out

label_studio/examples/adv_layouts_columns2/config.xml

@@ -0,0 +1,12 @@
+<!-- {"title": "Two columns", "category": "layouts", "complexity": "advanced"} -->
+<View style="display: flex;">
+  <View style="width: 150px; padding-left: 2em; margin-right: 2em; background: #f1f1f1; border-radius: 3px">
+    <Labels name="label" toName="text">
+      <Label value="Person" />
+      <Label value="Organization" />
+    </Labels>
+  </View>
+  <View>
+    <Text name="text" value="$text" />
+  </View>
+</View>

label_studio/examples/adv_layouts_columns3/config.xml

@@ -0,0 +1,20 @@
+<!-- {"title": "Three columns", "category": "layouts", "complexity": "advanced"} -->
+<View style="display: flex;">
+  <View style="width: 150px; padding: 0 1em; margin-right: 0.5em; background: #f1f1f1; border-radius: 3px">
+    <Labels name="label" toName="text">
+      <Label value="Person" />
+      <Label value="Organization" />
+    </Labels>
+  </View>
+  <View>
+    <Text name="text" value="$text" />
+  </View>
+  <View style="padding: 0 1em; margin-left: 0.5em; background: #f1f1f1; border-radius: 3px">
+    <Choices name="importance" toName="text">
+      <Header value="Text Importance" />
+      <Choice value="High" />
+      <Choice value="Medium" />
+      <Choice value="Low" />
+    </Choices>
+  </View>
+</View>

label_studio/examples/adv_layouts_long_text/config.xml

@@ -0,0 +1,14 @@
+<!-- {"title": "Long text with scrollbar", "category": "layouts", "complexity": "advanced"} -->
+<View style="display: flex;">
+  <View style="padding: 0em 1em; background: #f1f1f1; margin-right: 1em; border-radius: 3px">
+    <View style="position: sticky; top: 0">
+      <Labels name="label" toName="text">
+        <Label value="Person" />
+        <Label value="Organization" />
+      </Labels>
+    </View>
+  </View>
+  <View style="height: 300px; overflow: auto;">
+    <Text name="text" value="$longText" />
+  </View>
+</View>

label_studio/examples/adv_layouts_sticky_header/config.xml

@@ -0,0 +1,12 @@
+<!-- {"title": "Sticky header", "category": "layouts", "complexity": "advanced"} -->
+<View>
+  <View style="padding: 0 1em; margin: 1em 0; background: #f1f1f1; position: sticky; top: 0; border-radius: 3px">
+    <Labels name="label" toName="text" showInline="true">
+      <Label value="Person" />
+      <Label value="Organization" />
+    </Labels>
+  </View>
+  <View>
+    <Text name="text" value="$text" />
+  </View>
+</View>

label_studio/examples/adv_layouts_sticky_left_column/config.xml

@@ -0,0 +1,14 @@
+<!-- {"title": "Sticky left column", "category": "layouts", "complexity": "advanced"} -->
+<View style="display: flex;">
+  <View style="padding: 0em 1em; background: #f1f1f1; margin-right: 1em; border-radius: 3px">
+    <View style="position: sticky; top: 0">
+      <Labels name="label" toName="text">
+        <Label value="Person" />
+        <Label value="Organization" />
+      </Labels>
+    </View>
+  </View>
+  <View>
+    <Text name="text" value="$text" />
+  </View>
+</View>

label_studio/examples/adv_nested_2level/config.xml

@@ -0,0 +1,19 @@
+<!-- {"title": "Two level classification", "category": "nested", "complexity": "advanced"} -->
+<View>
+  <Text name="text" value="$text" />
+  <Choices name="sentiment" toName="text" showInLine="true">
+    <Choice value="Positive" />
+    <Choice value="Negative" />
+    <Choice value="Neutral" />
+  </Choices>
+  <Choices name="other-props" toName="text"
+  	   choice="single" showInLine="true"
+           visibleWhen="choice-selected"
+           whenTagName="sentiment">
+    <View style="width:100%">
+      <Header value="Other properties of the text" />
+    </View>
+    <Choice value="Descriptive" />
+    <Choice value="Emotional" />
+  </Choices>
+</View>

label_studio/examples/adv_nested_3level/config.xml

@@ -0,0 +1,35 @@
+<!-- {"title": "Three level classification", "category": "nested", "complexity": "advanced"} -->
+<View>
+  <Text name="text" value="$text" />
+
+  <Choices name="sentiment" toName="text" showInLine="true">
+    <Choice value="Positive" />
+    <Choice value="Negative" />
+    <Choice value="Neutral" />
+  </Choices>
+
+  <Choices name="other-props" toName="text"
+  	   choice="single" showInLine="true"
+           visibleWhen="choice-selected"
+           whenTagName="sentiment">
+    <View style="width: 100%">
+      <Header value="Other properties of the text" />
+    </View>
+    <Choice value="Descriptive" />
+    <Choice value="Emotional" />
+  </Choices>
+
+  <Choices name="emotion" toName="text"
+  	   choice="single" showInLine="true"
+           visibleWhen="choice-selected"
+           whenTagName="other-props"
+           whenChoiceValue="Emotional">
+    <View style="width: 100%">
+      <Header value="What emotion?" />
+    </View>
+    <Choice value="Sadness" />
+    <Choice value="Disgust" />
+    <Choice value="Fear" />
+    <Choice value="Surprise" />
+  </Choices>
+</View>

label_studio/examples/adv_nested_conditional/config.xml

@@ -0,0 +1,24 @@
+<!-- {"title": "Conditional classification", "category": "nested", "complexity": "advanced"} -->
+<!-- {"title": "Conditional classification", "category": "nested", "complexity": "advanced"} -->
+<View>
+  <Text name="text1" value="$text1" />
+  <Choices name="sentiment" toName="text1" showInLine="true">
+    <Choice value="Positive" />
+    <Choice value="Negative" />
+    <Choice value="Neutral" />
+  </Choices>
+  <View visibleWhen="choice-selected"
+        whenTagName="sentiment" whenChoiceValue="Positive">
+    <Header value="What about this text?" />
+    <Text name="text2" value="$text2" />
+  </View>
+  <Choices name="sentiment2" toName="text2"
+  	   choice="single" showInLine="true"
+           visibleWhen="choice-selected"
+           whenTagName="sentiment"
+           whenChoiceValue="Positive"> 
+    <Choice value="Positive" />
+    <Choice value="Negative" />
+    <Choice value="Neutral" />
+  </Choices>  
+</View>

label_studio/examples/adv_other_filter/config.xml

@@ -0,0 +1,13 @@
+<!-- {"title": "Filtering long labels list", "category": "other", "complexity": "advanced"} -->
+<View style="display: flex;">
+  <View style="width: 350px; padding-right: 1em; height: 400px; overflow-y: auto">
+    <Filter name="fl" toName="ner" hotkey="shift+f" minlength="1" />
+    <Labels name="ner" toName="text" showInline="false">
+      <Label value="Person" />
+      <Label value="Organization" />
+    </Labels>
+  </View>
+  <View style="height: 400px; overflow: auto">
+    <Text name="text" value="$text" />
+  </View>
+</View>