Skip to content

Commit

Permalink
Rework template mechanics for transfer to playground. Update playgrou…
Browse files Browse the repository at this point in the history 
…nd templates
  • Loading branch information
@makseq
makseq committed Oct 27, 2020
1 parent a747855 commit 925c1b4
Show file tree
Hide file tree
Showing 11 changed files with 2,413 additions and 1,831 deletions.
643 changes: 643 additions & 0 deletions docs/source/playground/index.ejs
View file

Large diffs are not rendered by default.

1,774 changes: 0 additions & 1,774 deletions docs/source/playground/index.html
View file

This file was deleted.

1,445 changes: 1,445 additions & 0 deletions docs/source/playground/template_codes.ejs
View file

Large diffs are not rendered by default.

31 changes: 31 additions & 0 deletions docs/source/playground/template_start.ejs
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
<!-- Starting template -->
<script id="start-template" type="text"><View>
<!-- Image with Polygons -->
<View style="padding: 25px;
box-shadow: 2px 2px 8px #AAA">
<Header value="Label the image with polygons"/>
<Image name="img" value="$image"/>
<Text name="text1"
value="Select label, start to click on image"/>
<PolygonLabels name="tag" toName="img">
<Label value="Airbus" background="blue"/>
<Label value="Boeing" background="red"/>
</PolygonLabels>
</View>
<!-- Text with multi-choices -->
<View style="margin-top: 20px; padding: 25px;
box-shadow: 2px 2px 8px #AAA;">
<Header value="Classify the text"/>
<Text name="text2" value="$text"/>
<Choices name="" toName="img" choice="multiple">
<Choice alias="wisdom" value="Wisdom"/>
<Choice alias="long" value="Long"/>
</Choices>
</View>
</View>
</script>
211 changes: 211 additions & 0 deletions docs/source/playground/template_titles.ejs
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,211 @@
<%#
1 run label-studio start my_project,
2 go to /setup?template_mode=titles
3 copy page source code here
%>
<!-- ---------------------------------------------- --->
<!-- Templates titles --->
<!-- ---------------------------------------------- --->
<div class="ui accordion" id="basic-templates">
<div class="title">
<i class="dropdown icon"></i> Basic config examples
</div>
<div class="content" style="margin-top:-8px">
<!-- Templates categories -->
<div class="ui grid stackable" style="margin: 0 auto;">
<!-- Template basic: audio -->
<div class="three wide column category">
<i class="icon sound" title="Audio sources"></i>
<div class="ui item">
<a class="use-template no-go" href="#" data-value="48">Audio classification</a>
</div><div class="ui item">
<a class="use-template no-go" href="#" data-value="30">Emotion segmentation</a>
</div><div class="ui item">
<a class="use-template no-go" href="#" data-value="47">Speaker diarization</a>
</div><div class="ui item">
<a class="use-template no-go" href="#" data-value="32">Transcription per region</a>
</div><div class="ui item">
<a class="use-template no-go" href="#" data-value="15">Transcription whole audio</a>
</div>
</div>
<!-- Template basic: image -->
<div class="three wide column category">
<i class="icon image" title="Image sources"></i>
<div class="ui item">
<a class="use-template no-go" href="#" data-value="25">Image classification</a>
</div><div class="ui item">
<a class="use-template no-go" href="#" data-value="41">Bbox object detection</a>
</div><div class="ui item">
<a class="use-template no-go" href="#" data-value="9">Brush segmentation</a>
</div><div class="ui item">
<a class="use-template no-go" href="#" data-value="33">Circular object detector</a>
</div><div class="ui item">
<a class="use-template no-go" href="#" data-value="14">Keypoints and landmarks</a>
</div><div class="ui item">
<a class="use-template no-go" href="#" data-value="34">Polygon segmentation</a>
</div><div class="ui item">
<a class="use-template no-go" href="#" data-value="27">Multi-image classification</a>
</div>
</div>
<!-- Template basic: text -->
<div class="three wide column category">
<i class="icon font" title="Text sources"></i>
<div class="ui item">
<a class="use-template no-go" href="#" data-value="39">Text classification</a>
</div><div class="ui item">
<a class="use-template no-go" href="#" data-value="20">Multi classification</a>
</div><div class="ui item">
<a class="use-template no-go" href="#" data-value="10">Named entity recognition</a>
</div><div class="ui item">
<a class="use-template no-go" href="#" data-value="17">Text summarization</a>
</div><div class="ui item">
<a class="use-template no-go" href="#" data-value="50">Word alignment</a>
</div>
</div>
<!-- Template basic: html -->
<div class="three wide column category">
<i class="icon code" title="HTML sources"></i>
<div class="ui item">
<a class="use-template no-go" href="#" data-value="6">HTML classification</a>
</div><div class="ui item">
<a class="use-template no-go" href="#" data-value="46">HTML NER tagging</a>
</div><div class="ui item">
<a class="use-template no-go" href="#" data-value="43">Dialogs &amp; conversations</a>
</div><div class="ui item">
<a class="use-template no-go" href="#" data-value="1">Rate PDF</a>
</div><div class="ui item">
<a class="use-template no-go" href="#" data-value="4">Rate website</a>
</div><div class="ui item">
<a class="use-template no-go" href="#" data-value="13">Video classifier</a>
</div>
</div>
<!-- Template basic: time-series -->
<div class="three wide column category">
<i class="icon wave square" title="Time series"></i>
<div class="ui item">
<a class="use-template no-go" href="#" data-value="16">Time Series classification</a>
</div><div class="ui item">
<a class="use-template no-go" href="#" data-value="8">Import CSV</a>
</div><div class="ui item">
<a class="use-template no-go" href="#" data-value="2">Import JSON</a>
</div><div class="ui item">
<a class="use-template no-go" href="#" data-value="21">Segmentation extended</a>
</div><div class="ui item">
<a class="use-template no-go" href="#" data-value="23">Multi-step annotation</a>
</div>
</div>
</div>
</div>
</div>
<div class="ui accordion" id="adv-templates">
<div class="title">
<i class="dropdown icon"></i> Advanced config examples
</div>
<div class="content" style="margin-top:-8px">
<!-- Templates categories -->
<div class="ui grid stackable" style="margin: 0 auto;">
<!-- Template advanced: layouts -->
<div class="three wide column category">
<i class="icon eye" title="View layout examples"></i>
<div class="ui item">
<a class="use-template no-go" href="#" data-value="35">Filtering long labels list</a>
</div><div class="ui item">
<a class="use-template no-go" href="#" data-value="45">Long text with scrollbar</a>
</div><div class="ui item">
<a class="use-template no-go" href="#" data-value="40">Pretty choices</a>
</div><div class="ui item">
<a class="use-template no-go" href="#" data-value="3">Sticky header</a>
</div><div class="ui item">
<a class="use-template no-go" href="#" data-value="28">Sticky left column</a>
</div><div class="ui item">
<a class="use-template no-go" href="#" data-value="5">Three columns</a>
</div><div class="ui item">
<a class="use-template no-go" href="#" data-value="37">Two columns</a>
</div>
</div>
<!-- Template advanced: nested -->
<div class="three wide column category">
<i class="icon bullseye" title="Nested examples with conditional behavior"></i>
<div class="ui item">
<a class="use-template no-go" href="#" data-value="11">Conditional classification</a>
</div><div class="ui item">
<a class="use-template no-go" href="#" data-value="19">Three level classification</a>
</div><div class="ui item">
<a class="use-template no-go" href="#" data-value="44">Two level classification</a>
</div>
</div>
<!-- Template advanced: per-region -->
<div class="three wide column category">
<i class="icon vector square" title="Per region examples"></i>
<div class="ui item">
<a class="use-template no-go" href="#" data-value="29">Audio regions labeling</a>
</div><div class="ui item">
<a class="use-template no-go" href="#" data-value="38">Image bboxes labeling</a>
</div><div class="ui item">
<a class="use-template no-go" href="#" data-value="7">Text spans labeling</a>
</div>
</div>
<!-- Template advanced: other -->
<div class="three wide column category">
<i class="icon archive" title="Other sources"></i>
<div class="ui item">
<a class="use-template no-go" href="#" data-value="24">Image &amp; Audio &amp; Text</a>
</div><div class="ui item">
<a class="use-template no-go" href="#" data-value="26">Pairwise comparison</a>
</div><div class="ui item">
<a class="use-template no-go" href="#" data-value="22">Relations among entities</a>
</div><div class="ui item">
<a class="use-template no-go" href="#" data-value="42">Table with key-value</a>
</div><div class="ui item">
<a class="use-template no-go" href="#" data-value="18">Table with text fields</a>
</div><div class="ui item">
<a class="use-template no-go" href="#" data-value="49">Video timeline segmentation</a>
</div>
</div>
<!-- Template advanced: time-series -->
<div class="three wide column category">
<i class="icon wave square" title="Time series"></i>
<div class="ui item">
<a class="use-template no-go" href="#" data-value="31">Import CSV no time</a>
</div><div class="ui item">
<a class="use-template no-go" href="#" data-value="12">Import CSV headless</a>
</div><div class="ui item">
<a class="use-template no-go" href="#" data-value="0">Relations between channels</a>
</div><div class="ui item">
<a class="use-template no-go" href="#" data-value="36">Relations with text</a>
</div>
</div>
</div>
</div>
</div>
8 changes: 6 additions & 2 deletions docs/themes/htx/layout/partials/index.ejs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -476,8 +476,12 @@
<h3>Introducing version 0.8.0 - Time series is Everywhere!</h3>
<p>Label data from sensors, devices, and more.
<a href="/blog/release-080-time-series-labeling.html" class="underline">Read a note</a> in our blog.</p>
<a href="/blog/release-080-time-series-labeling.html"><img src="/images/release-080/time-series-labeling-with-multiple-channels.png" style="max-height:280px" /></a>
<div style="font-weight: lighter">Last version is 0.8.0</div>
<a href="/blog/release-080-time-series-labeling.html">
<img src="/images/release-080/time-series-labeling-with-multiple-channels.png"
style="max-height:280px; position:relative; top: 20px" />
<img src="/images/opossum/other/opossum_looking.svg" width="70px" style="position: relative; top: -20px">
</a>
<div style="font-weight: lighter; position: relative; top: -10px">Last version is 0.8.0</div>
</div>
</div>
</div>
Expand Down
6 changes: 3 additions & 3 deletions label_studio/examples/image_brushes/config.xml
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
<!-- {"title": "Brush segmentation", "category": "image", "complexity": "basic"} -->
<View>
<Image name="image" value="$image"></Image>
<Image name="image" value="$image"/>
<BrushLabels name="tag" toName="image">
<Label value="Planet" background="rgba(0, 0, 255, 0.7)"></Label>
<Label value="Moonwalker" background="rgba(255, 0, 0, 0.7)"></Label>
<Label value="Planet" background="rgba(0, 0, 255, 0.7)"/>
<Label value="Moonwalker" background="rgba(255, 0, 0, 0.7)"/>
</BrushLabels>
</View>
9 changes: 7 additions & 2 deletions label_studio/server.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -335,17 +335,22 @@ def setup_page():
else:
own_projects, shared_projects = {}, {}

# this is useful for the transfer to playground templates
template_mode = request.args.get('template_mode')
page = 'includes/setup_templates.html' if template_mode else 'setup.html'

templates = get_config_templates(g.project.config)
return flask.render_template(
'setup.html',
page,
config=g.project.config,
project=g.project,
label_config_full=g.project.label_config_full,
templates=templates,
input_values=input_values,
multi_session=input_args.command == 'start-multi-session',
own_projects=own_projects,
shared_projects=shared_projects
shared_projects=shared_projects,
template_mode=template_mode
)


Expand Down
39 changes: 3 additions & 36 deletions label_studio/templates/includes/setup_help.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -80,42 +80,9 @@
</div>
{% endif %}

<!-- Basic Templates -->
{% for complexity in templates %}
<div class="ui accordion" id="{{ 'basic-templates' if complexity == 'basic' else 'adv-templates' }}">
<div class="title">
<i class="dropdown icon"></i> {{complexity|capitalize}} config examples
</div>
<div class="content" style="margin-top:-8px">
<!-- Templates categories -->
<div class="ui grid stackable" style="margin: 0 auto;">
{% for category in templates[complexity] %}
<div class="three wide column category">
{% if category == 'audio' %} <i class="icon sound" title="Audio sources"></i> {% endif %}
{% if category == 'text' %} <i class="icon font" title="Text sources"></i> {% endif %}
{% if category == 'html' %} <i class="icon code" title="HTML sources"></i> {% endif %}
{% if category == 'image' %} <i class="icon image" title="Image sources"></i> {% endif %}
{% if category == 'other' %} <i class="icon archive" title="Other sources"></i> {% endif %}
{% if category == 'other2' %} <i class="icon archive" title="Yet more other sources"></i> {% endif %}
{% if category == 'time-series' %} <i class="icon wave square" title="Time series"></i> {% endif %}

{% if category == 'layouts' %} <i class="icon eye" title="View layout examples"></i> {% endif %}
{% if category == 'per-region' %} <i class="icon vector square" title="Per region examples"></i> {% endif %}
{% if category == 'nested' %} <i class="icon bullseye" title="Nested examples with conditional behavior"></i> {% endif %}

<!-- Template -->
{% for t in templates[complexity][category] %}
<div class="ui item">
<a class="use-template no-go" href="#" data-value="{{ t.pk }}">{{ t.title }}</a>
</div>
{% endfor %}
</div>
{% endfor %}
</div>
</div>
</div>
{% endfor %}

{% with template_mode="titles" %}
{% include 'includes/setup_templates.html' %}
{% endwith %}
</div>

<br/>
Expand Down
Loading

0 comments on commit 925c1b4

Please sign in to comment.