label-studio

Data Labeling Tool that is backend agnostic and can be embedded into your applications

Usage no npm install needed!

<script type="module">
  import labelStudio from 'https://cdn.skypack.dev/label-studio';
</script>

README

Label Studio Frontend · GitHub build GitHub release · :sunny:

WebsiteDocsTwitterJoin Slack Community


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 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/label-studio@1.0.1/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/label-studio@1.0.1/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",
      "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 git@github.com: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 :office:

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