---
|
type: playground
|
order: 201
|
meta_title: Data Labeling & Annotation Tool Interactive Demo
|
meta_description: Label Studio interactive demo and playground for data labeling and annotation for machine learning and data science projects.
|
---
|
<script src="https://code.jquery.com/jquery-3.7.0.min.js" integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g=" crossorigin="anonymous"></script>
|
<style>
|
.page-type-playground .content-grid {
|
display: block;
|
}
|
.page-type-playground .container {
|
max-width: 110rem;
|
padding: 1em 2.5rem;
|
}
|
.page-type-playground .content-footer {
|
max-width: 1030px;
|
margin: 4em auto;
|
}
|
|
@media (max-width: 1100px) {
|
.page-type-playground .content-footer {
|
padding-left: 1em;
|
padding-right: 1em;
|
}
|
.page-type-playground .container {
|
padding: 1em;
|
}
|
}
|
.content {
|
max-width: none !important;
|
margin-left: 0 !important;
|
padding: 1em 0 0 0;
|
}
|
|
.validation {
|
margin-top: 1em;
|
margin-left: 1em;
|
color: red;
|
text-transform: capitalize;
|
}
|
|
.CodeMirror {
|
min-height: 500px !important;
|
}
|
|
h1 {
|
margin-bottom: 0.5em !important;
|
}
|
|
h3 {
|
margin: 1em 0 !important;
|
font-weight: normal;
|
width: unset;
|
height: unset;
|
}
|
|
iframe {
|
border: 0;
|
margin: 0 !important;
|
padding: 0 !important;
|
}
|
|
#render-editor {
|
width: 100%;
|
}
|
|
#editor-wrap {
|
padding: 0;
|
margin: 0;
|
display: none;
|
}
|
|
.preview {
|
padding: 5px;
|
overflow: auto;
|
white-space: pre;
|
}
|
|
.editor-row {
|
display: flex;
|
margin: 0 auto 1.5em;
|
width: 100% !important;
|
max-width: 110rem;
|
}
|
|
.intro-wrapper{
|
background: white;
|
border: 1px solid var(--color-gray-300);
|
border-radius: .75rem;
|
padding: 1.5rem;
|
max-width: 110rem;
|
margin: 0 auto 1.5rem;
|
}
|
|
.data-row {
|
display: flex;
|
max-width: 110rem;
|
margin: 0 auto;
|
background: white;
|
border: 1px solid var(--color-gray-300);
|
border-radius: .75rem;
|
padding: 1.5rem;
|
}
|
|
.preview-col {
|
width: 60%;
|
flex: 1;
|
background: white;
|
border: 1px solid var(--color-gray-300);
|
border-radius: .75rem;
|
padding: 1.5rem;
|
}
|
|
.editor-area {
|
border: 1px solid rgba(34,36,38,.15);
|
border-radius: .5rem;
|
overflow: hidden;
|
}
|
|
.config-col p{
|
margin: .75rem 0 0 0;
|
color: var(--color-gray-600);
|
}
|
|
.config-col {
|
margin-right: 1.5em;
|
width: 40%;
|
background: white;
|
border: 1px solid var(--color-gray-300);
|
border-radius: .75rem;
|
padding: 1.5rem;
|
}
|
|
.config-wrapper{
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
margin-bottom: 1rem;
|
}
|
|
.config-wrapper h4{
|
margin-top: 0;
|
margin-bottom: 0;
|
}
|
|
.input-col {
|
width: 49%;
|
padding-right: 2%;
|
}
|
|
.output-col {
|
width: 49%;
|
}
|
.hidden {
|
display: none !important;
|
}
|
|
h4 {
|
margin-bottom: 1rem;
|
margin-top: 0 !important;
|
}
|
|
/* hide title "basic template configs" */
|
#basic-templates>.title {
|
display: none;
|
}
|
#adv-templates>.title {
|
margin-bottom: 1em;
|
cursor: pointer;
|
}
|
#adv-templates>.content {
|
display: none
|
}
|
|
.message, .accordion {
|
margin-top: .5rem;
|
}
|
.grid {
|
display: -webkit-box;
|
display: -ms-flexbox;
|
display: flex;
|
-webkit-box-orient: horizontal;
|
-webkit-box-direction: normal;
|
-ms-flex-direction: row;
|
flex-direction: row;
|
-ms-flex-wrap: wrap;
|
flex-wrap: wrap;
|
-webkit-box-align: stretch;
|
-ms-flex-align: stretch;
|
align-items: stretch;
|
padding: 0;
|
}
|
|
.loading{
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
}
|
|
.loading img{
|
border: none;
|
}
|
|
.column {
|
width: 20% !important;
|
}
|
.use-template {
|
font-weight: normal!important;
|
margin-bottom: .5rem;
|
display: block;
|
}
|
|
@font-face {
|
font-family: 'Icons';
|
src: url("/fonts/icons.eot");
|
src: url("/fonts/icons.eot?#iefix") format('embedded-opentype'), url("/fonts/icons.woff2") format('woff2'), url("/fonts/icons.woff") format('woff'), url("/fonts/icons.ttf") format('truetype'), url("/fonts/icons.svg#icons") format('svg');
|
font-style: normal;
|
font-weight: normal;
|
font-variant: normal;
|
text-decoration: inherit;
|
text-transform: none;
|
}
|
i.icon {
|
opacity: 0.75;
|
display: inline-block;
|
margin: 0 0 0 0;
|
width: 1.18em;
|
height: 1em;
|
font-family: 'Icons';
|
font-style: normal;
|
font-weight: normal;
|
text-decoration: inherit;
|
text-align: center;
|
speak: none;
|
-moz-osx-font-smoothing: grayscale;
|
-webkit-font-smoothing: antialiased;
|
-webkit-backface-visibility: hidden;
|
backface-visibility: hidden;
|
}
|
|
i.icon + .ui{
|
margin-top: .75rem;
|
}
|
|
i.icon:before {
|
background: none !important;
|
}
|
i.icon.sound:before {
|
content: "\f025";
|
}
|
i.icon.image:before {
|
content: "\f03e";
|
}
|
i.icon.code:before {
|
content: "\f121";
|
}
|
i.icon.font:before {
|
content: "\f031";
|
}
|
i.icon.video:before {
|
content: "\f03d";
|
}
|
i.icon.share:before {
|
content: "\f064"
|
}
|
i.icon.copy.outline:before {
|
content: "\f0c5"
|
}
|
i.icon.archive:before {
|
content: "\f187";
|
}
|
i.icon.eye:before {
|
content: "\f06e";
|
}
|
i.icon.bullseye:before {
|
content: "\f140";
|
}
|
i.icon.vector.square:before {
|
content: "\f5cb";
|
}
|
i.icon.wave.square:before {
|
content: "\f83e"
|
}
|
i.icon.dropdown:before {
|
content: "\f0da";
|
}
|
i.icon.dropdown.active:before {
|
content: "\f0d7";
|
}
|
|
.share-buttons {
|
float:right;
|
margin: 0 0 0 1em;
|
}
|
.share-buttons i {
|
cursor: pointer;
|
|
color: var(--color-orange-400);
|
transition: 0.25s;
|
}
|
.share-buttons i:hover {
|
opacity: 1 !important;
|
transition: 0.25s;
|
}
|
|
.intro {
|
text-align: left;
|
}
|
|
@media screen and (max-width: 900px) {
|
.sidebar {
|
display: flex;
|
}
|
}
|
@media only screen and (max-width: 767.98px) {
|
.intro {
|
padding-left: 0;
|
}
|
.grid {
|
width: auto;
|
margin-left: 0 !important;
|
margin-right: 0 !important;
|
}
|
.column {
|
width: 100% !important;
|
margin: 0 0 !important;
|
-webkit-box-shadow: none !important;
|
box-shadow: none !important;
|
padding: 1rem 1rem !important;
|
}
|
|
.editor-row {
|
flex-direction: column;
|
max-width: 1300px;
|
}
|
.data-row {
|
flex-direction: column;
|
}
|
.preview-col {
|
width: 100%;
|
}
|
.config-col {
|
width: 100%;
|
}
|
.input-col, .output-col {
|
width: 100%;
|
}
|
|
}
|
|
.playground-cta {
|
background-color: var(--color-gray-100);
|
border: 1px var(--color-gray-300) solid;
|
padding: 2em;
|
border-radius: .75rem;
|
max-width: 1030px;
|
margin: 3em auto -1em auto;
|
display: flex;
|
align-items: center;
|
flex-direction: column;
|
position: relative;
|
text-align: center;
|
overflow: hidden;
|
}
|
|
.playground-cta > svg {
|
position: absolute;
|
right: 0;
|
bottom: 0;
|
}
|
|
.playground-cta .Heading {
|
margin: 0;
|
}
|
|
.playground-cta-button-group {
|
margin-top: 0.9em;
|
display: flex;
|
gap: 1em;
|
flex-wrap: wrap;
|
justify-content: center;
|
z-index: 2;
|
}
|
|
.page-tier-enterprise .Secondary:not(:hover) {
|
background-color: #fff;
|
}
|
|
.playground-app {
|
border: 1px var(--color-gray-300) solid;
|
border-radius: .75rem;
|
}
|
</style>
|
|
<!-- html -->
|
<div class="intro-wrapper">
|
<div class="intro">
|
<h4>Choose annotation template</h4>
|
</div>
|
|
<%- include('template_titles') %>
|
</div>
|
|
<iframe class="playground-app" id="label-studio-playground" width="100%" height="100%"></iframe>
|
|
<div class="playground-cta">
|
<h2 class="Heading Large">Want to put these templates into practice?</h2>
|
<div class="playground-cta-button-group">
|
<a href="https://labelstud.io/guide/install.html" class="Button Secondary">Install Open Source</a>
|
<a href="https://humansignal.com/pricing" class="Button">Compare Versions</a>
|
</div>
|
<svg width="67" height="68" viewBox="0 0 67 68" fill="none" xmlns="http://www.w3.org/2000/svg">
|
<rect x="22.4653" y="45.0219" width="22.2281" height="22.2281" fill="#FF7557"/>
|
<rect x="22.4653" y="22.7938" width="22.2281" height="22.2281" fill="#FFA663"/>
|
<rect x="44.6936" y="0.565613" width="22.2281" height="22.2281" fill="#E37BD3"/>
|
<rect x="44.6936" y="22.7938" width="22.2281" height="22.2281" fill="#FF7557"/>
|
<rect x="0.237305" y="22.7938" width="22.2281" height="22.2281" fill="#E37BD3"/>
|
</svg>
|
</div>
|
|
|
<!-- Hidden template codes -->
|
<empty>
|
<%- include('template_start') %>
|
<%- include('template_codes') %>
|
</empty>
|
|
|
|
|
<script>
|
// if localhost, use local playground
|
function getLabelStudioPlaygroundUrl() {
|
if (window.location.hostname === "localhost") {
|
return "http://localhost:4200/";
|
}
|
if (window.location.hostname === "labelstud.io") {
|
return "https://labelstud.io/playground-app/";
|
}
|
// This is for preview deployments
|
return "https://label-studio-playground.netlify.app/";
|
}
|
|
function normalizeNewlines(text) {
|
return text.replace(/(\r\n|\r)/gm, "\n");
|
}
|
|
function encodeConfig(text) {
|
return encodeURIComponent(normalizeNewlines(text));
|
}
|
|
function getStartingConfigValue() {
|
const urlParams = new URLSearchParams(window.location.search);
|
const config = urlParams.get('config');
|
if (config) {
|
return encodeConfig(config);
|
}
|
const startTemplate = document.getElementById('start-template');
|
return encodeConfig(startTemplate.innerHTML);
|
}
|
|
const labelStudioPlaygroundUrl = getLabelStudioPlaygroundUrl();
|
const labelStudioPlayground = document.getElementById('label-studio-playground');
|
labelStudioPlayground.src = labelStudioPlaygroundUrl + '?config=' + getStartingConfigValue();
|
|
/*!
|
* JavaScript Cookie v2.2.0
|
* https://github.com/js-cookie/js-cookie
|
*
|
* Copyright 2006, 2015 Klaus Hartl & Fagner Brack
|
* Released under the MIT license
|
*/
|
;(function (factory) {
|
var registeredInModuleLoader = false;
|
if (typeof define === 'function' && define.amd) {
|
define(factory);
|
registeredInModuleLoader = true;
|
}
|
if (typeof exports === 'object') {
|
module.exports = factory();
|
registeredInModuleLoader = true;
|
}
|
if (!registeredInModuleLoader) {
|
var OldCookies = window.Cookies;
|
var api = window.Cookies = factory();
|
api.noConflict = function () {
|
window.Cookies = OldCookies;
|
return api;
|
};
|
}
|
}(function () {
|
function extend () {
|
var i = 0;
|
var result = {};
|
for (; i < arguments.length; i++) {
|
var attributes = arguments[ i ];
|
for (var key in attributes) {
|
result[key] = attributes[key];
|
}
|
}
|
return result;
|
}
|
|
function init (converter) {
|
function api (key, value, attributes) {
|
var result;
|
if (typeof document === 'undefined') {
|
return;
|
}
|
|
// Write
|
|
if (arguments.length > 1) {
|
attributes = extend({
|
path: '/'
|
}, api.defaults, attributes);
|
|
if (typeof attributes.expires === 'number') {
|
var expires = new Date();
|
expires.setMilliseconds(expires.getMilliseconds() + attributes.expires * 864e+5);
|
attributes.expires = expires;
|
}
|
|
// We're using "expires" because "max-age" is not supported by IE
|
attributes.expires = attributes.expires ? attributes.expires.toUTCString() : '';
|
|
try {
|
result = JSON.stringify(value);
|
if (/^[\{\[]/.test(result)) {
|
value = result;
|
}
|
} catch (e) {}
|
|
if (!converter.write) {
|
value = encodeURIComponent(String(value))
|
.replace(/%(23|24|26|2B|3A|3C|3E|3D|2F|3F|40|5B|5D|5E|60|7B|7D|7C)/g, decodeURIComponent);
|
} else {
|
value = converter.write(value, key);
|
}
|
|
key = encodeURIComponent(String(key));
|
key = key.replace(/%(23|24|26|2B|5E|60|7C)/g, decodeURIComponent);
|
key = key.replace(/[\(\)]/g, escape);
|
|
var stringifiedAttributes = '';
|
|
for (var attributeName in attributes) {
|
if (!attributes[attributeName]) {
|
continue;
|
}
|
stringifiedAttributes += '; ' + attributeName;
|
if (attributes[attributeName] === true) {
|
continue;
|
}
|
stringifiedAttributes += '=' + attributes[attributeName];
|
}
|
return (document.cookie = key + '=' + value + stringifiedAttributes);
|
}
|
|
// Read
|
|
if (!key) {
|
result = {};
|
}
|
|
// To prevent the for loop in the first place assign an empty array
|
// in case there are no cookies at all. Also prevents odd result when
|
// calling "get()"
|
var cookies = document.cookie ? document.cookie.split('; ') : [];
|
var rdecode = /(%[0-9A-Z]{2})+/g;
|
var i = 0;
|
|
for (; i < cookies.length; i++) {
|
var parts = cookies[i].split('=');
|
var cookie = parts.slice(1).join('=');
|
|
if (!this.json && cookie.charAt(0) === '"') {
|
cookie = cookie.slice(1, -1);
|
}
|
|
try {
|
var name = parts[0].replace(rdecode, decodeURIComponent);
|
cookie = converter.read ?
|
converter.read(cookie, name) : converter(cookie, name) ||
|
cookie.replace(rdecode, decodeURIComponent);
|
|
if (this.json) {
|
try {
|
cookie = JSON.parse(cookie);
|
} catch (e) {}
|
}
|
|
if (key === name) {
|
result = cookie;
|
break;
|
}
|
|
if (!key) {
|
result[name] = cookie;
|
}
|
} catch (e) {}
|
}
|
|
return result;
|
}
|
|
api.set = api;
|
api.get = function (key, default_value) {
|
var value = api.call(api, key);
|
return value === undefined ? default_value: value;
|
};
|
api.getJSON = function () {
|
return api.apply({
|
json: true
|
}, [].slice.call(arguments));
|
};
|
api.defaults = {};
|
|
api.remove = function (key, attributes) {
|
api(key, '', extend(attributes, {
|
expires: -1
|
}));
|
};
|
|
api.withConverter = init;
|
|
return api;
|
}
|
|
return init(function () {});
|
}));
|
|
function uuidv4() {
|
return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
|
var r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8);
|
return v.toString(16);
|
});
|
}
|
|
var confirm_already_shown = true;
|
var edit_count = 0;
|
var current_template_name = 'start';
|
var current_template_category = 'start';
|
var page_hash = uuidv4();
|
var user_hash = Cookies.get('user_hash');
|
if (user_hash === "null" || !user_hash) {
|
user_hash = uuidv4();
|
Cookies.set('user_hash', user_hash);
|
}
|
var lookup = {};
|
|
$.ajax({
|
url: 'https://extreme-ip-lookup.com/json/',
|
success: function(o) { lookup = o },
|
async: false
|
});
|
|
$(function () {
|
|
function addTemplateConfig($el) {
|
var template_pk = $el.data('value');
|
var value = $('[data-template-pk="' + template_pk + '"]').html();
|
|
// extract readme from config
|
var starter = '<!-- readme', terminator = '-->';
|
var start = value.indexOf(starter);
|
if (start >= 0) {
|
var body_length = value.indexOf(terminator, start) - start - starter.length;
|
var readme = value.substr(start + starter.length, body_length);
|
|
// find first XML tag (<View> as usual) and start from it
|
value = value.slice(value.indexOf('<', start + starter.length + body_length + terminator.length))
|
}
|
|
try {
|
labelStudioPlayground.src = labelStudioPlaygroundUrl + '?config=' + encodeConfig(value);
|
} catch (e) {
|
console.error('Error encoding template config', e);
|
}
|
}
|
|
$('.use-template').on('click', function () {
|
var $el = $(this);
|
edit_count = 0;
|
current_template_name = $el.text();
|
current_template_category = $($el.parent().parent().find('i')[0]).attr('title');
|
|
addTemplateConfig($el);
|
|
return false;
|
});
|
});
|
</script>
|
