Label Studio Frontend · · ☀️

Website • Docs • Twitter • Join Slack Community

Label Studio is an open-source, configurable data annotation tool. ✌️

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 label-studio

Usage

With Webpack

import LabelStudio from 'label-studio';
import 'label-studio/build/static/css/main.css';

Width UNPKG.com

<!-- Include Label Studio stylesheet -->
<link href="https://unpkg.com/[email protected]/build/static/css/main.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/main.js"></script>

Initialization

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

Development

1. Clone the repository

   git clone [email protected]:heartexlabs/label-studio-frontend.git
   # or: git clone https://github.com/heartexlabs/label-studio-frontend.git
   cd label-studio-frontend

2. Install required dependencies

   npm install

3. Start the development server

   npm run start

4. Check different ways to initiate the development server config & task data in src/env/development.js, changing the data variable is a good place to start.

5. After you make changes and ready to use it in production, you need to create a production build

   npm run build-bundle

   Now you have one .js file and one .css file in the build/static/ directory

Label Studio for Teams, Startups, and Enterprises 🏢

Label Studio for Teams is our enterprise edition (cloud & on-prem), that includes a data manager, high-quality baseline models, active learning, collaborators support, and more. Please visit the website to learn more.

Ecosystem

Project	Description
label-studio	Server part, distributed as a pip package
label-studio-frontend	Frontend part, written in JavaScript and React, can be embedded into your application
label-studio-converter	Encode labels into the format of your favorite machine learning library
label-studio-transformers	Transformers library connected and configured for use with label studio

License

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