Skip to content

Latest commit

 

History

History
138 lines (105 loc) · 4.54 KB

README.md

File metadata and controls

138 lines (105 loc) · 4.54 KB
Raw

Label Studio Frontend · GitHub build GitHub release · ☀️

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