Label Studio Frontend

Label Studio is an open-source, configurable data annotation tool. :v:

Frontend, as its name suggests, is the frontend library developed using React and mobx-state-tree, distributed as an NPM package. You can include it in your applications and provide data annotation support to your users. It can be granularly customized and extended.

Install

npm install globalbridge-lsf-custom

Usage

With Webpack

import LabelStudio from 'globalbridge-lsf-custom';
import 'globalbridge-lsf-custom/build/static/css/main.css';

With UNPKG.com

<!-- Include Label Studio stylesheet -->
<link href="https://unpkg.com/[email protected]/build/static/css/" rel="stylesheet">

<!-- Create the Label Studio container -->
<div id="label-studio"></div>

<!-- Include the Label Studio library -->
<script src="https://unpkg.com/[email protected]/build/static/js/"></script>

Initialization

<!-- Initialize Label Studio -->
<script>
  var labelStudio = new LabelStudio('label-studio', {
    config: `
      &lt;View>
        &lt;Image name="img" value="$image">&lt;/Image>
        &lt;RectangleLabels name="tag" toName="img">
          &lt;Label value="Hello">&lt;/Label>
          &lt;Label value="World">&lt;/Label>
        &lt;/RectangleLabels>
      &lt;/View>
    `,

    interfaces: [
      "panel",
      "update",
      "submit",
      "controls",
      "side-column",
      "annotations:menu",
      "annotations:add-new",
      "annotations:delete",
      "predictions:menu",
    ],

    user: {
      pk: 1,
      firstName: "James",
      lastName: "Dean"
    },

    task: {
      annotations: [],
      predictions: [],
      id: 1,
      data: {
        image: "https://htx-misc.s3.amazonaws.com/opensource/label-studio/examples/images/nick-owuor-astro-nic-visuals-wDifg5xc9Z4-unsplash.jpg"
      }
    },

    onLabelStudioLoad: function(LS) {
      var c = LS.annotationStore.addAnnotation({
        userGenerate: true
      });
      LS.annotationStore.selectAnnotation(c.id);
    }
  });
</script>

License

This software is licensed under the Apache 2.0 LICENSE © Heartex. 2020