label-studio-frontend

Introduction to Label Studio Frontend

Label Studio Frontend is an open-source, highly configurable data annotation library crafted by Heartex. Designed as a frontend solution, it is developed using React and mobx-state-tree, allowing developers to seamlessly integrate robust data annotation features into their web applications. Modular and extendable, Label Studio Frontend is distributed as an NPM package, making it accessible and convenient for developers across various platforms.

Installation

To use Label Studio Frontend in a project, it's quite simple. Developers can install it via NPM using the command:

npm install @heartexlabs/label-studio

Usage

For seamless integration, Label Studio Frontend offers multiple usage options:

• With Webpack: Developers can import the library and its stylesheet directly into their projects using:

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

• Via UNPKG.com: Alternatively, developers can integrate the library using CDN links, incorporating both the stylesheet and JavaScript file directly into their HTML:

  <link href="https://unpkg.com/@heartexlabs/[email protected]/build/static/css/main.css" rel="stylesheet">
  
  <div id="label-studio"></div>
  
  <script src="https://unpkg.com/@heartexlabs/[email protected]/build/static/js/main.js"></script>
  

Initialization

Setting up Label Studio requires initializing it with important configurations, including views, interfaces, and task data. Below is an example of how it can be initialized:

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);
  }
});

Ecosystem and Integrations

Label Studio Frontend is part of a comprehensive ecosystem:

• Label Studio: The server-side counterpart, distributed as a Python package.
• Label Studio Converter: Converts labels into formats that can be used with various machine learning libraries.
• Label Studio Transformers: Integrates transformers for use within Label Studio.

Enterprise Edition

For teams, startups, and enterprises, Label Studio also offers a robust enterprise edition. This version includes advanced features such as data management tools, high-quality baseline models, active learning capabilities, and collaboration support. Interested users can learn more about these offerings through the Label Studio website.

Licensing

The software is distributed under the Apache 2.0 License, ensuring users can freely use, modify, and distribute it as needed. This aligns with Label Studio's mission to foster innovation in data annotation and machine learning applications.

Label Studio Frontend is a valuable resource for developers and organizations aiming to enhance their data annotation processes with a powerful, customizable solution.