Skip to content
Data labeling react app that is backend agnostic and can be embedded into your applications — distributed as an NPM package
JavaScript CSS HTML
Branch: master
Clone or download
Latest commit 3f6a4b4 Feb 17, 2020
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
build creating a separate prod entry file to create production build with (#7) Jan 27, 2020
examples
images initial port to separate github repo of the frontend part of Label St… Jan 8, 2020
public branch for the release (#4) Jan 27, 2020
scripts Fixes build failure in the default npm run start flow (#10) Feb 17, 2020
src creating a separate prod entry file to create production build with (#7) Jan 27, 2020
.gitignore initial port to separate github repo of the frontend part of Label St… Jan 8, 2020
.npmignore initial port to separate github repo of the frontend part of Label St… Jan 8, 2020
.prettierignore initial port to separate github repo of the frontend part of Label St… Jan 8, 2020
.prettierrc initial port to separate github repo of the frontend part of Label St… Jan 8, 2020
.travis.yml
CHANGELOG.md initial port to separate github repo of the frontend part of Label St… Jan 8, 2020
CODE_OF_CONDUCT.md initial port to separate github repo of the frontend part of Label St… Jan 8, 2020
CONTRIBUTING.md initial port to separate github repo of the frontend part of Label St… Jan 8, 2020
LICENSE initial port to separate github repo of the frontend part of Label St… Jan 8, 2020
README.md Fix urls in README.md (#8) Feb 17, 2020
package-lock.json add string.prototype.matchall package Feb 10, 2020
package.json add string.prototype.matchall package Feb 10, 2020

README.md

Label Studio Frontend · GitHub Build Status GitHub release · ☀️

WebsiteDocsTwitterJoin 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

<!-- Include Label Studio stylesheet -->
<link href="https://unpkg.com/label-studio@0.4.0/build/static/css/main.14acfaa5.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@0.4.0/build/static/js/main.0249ea16.js"></script>

<!-- Initialize Label Studio -->
<script>
  var labelStudio = new LabelStudio('editor', {
    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",
      "completions:menu",
      "completions:add-new",
      "completions:delete",
      "predictions:menu",
    ],

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

    task: {
      completions: [],
      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.completionStore.addCompletion({
        userGenerate: true
      });
      LS.completionStore.selectCompletion(c.id);
    }
  });
</script>    

Development

  1. Clone the repository

    git clone git@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

You can’t perform that action at this time.