waylonflinn/Labelbox

Labelbox is the fastest way to annotate data to build and ship computer vision applications.

Labelbox

Labelbox is the fastest way to annotate data to build and ship artificial intelligence applications. This github repository is about building custom interfaces on the Labelbox platform.

Semantic Segmentation (brush & superpixels)

Bounding boxes, polygons, lines, points, nested classifications

Table of Contents

• Full Documentation
• Getting Started
• Creating Custom Labeling Interfaces
  • A Minimal Example
  • Labelbox Pluggable Interface Architecture
  • Using labeling-api.js
  • Hello World Example
  • Full Example
  • Full API Reference
  • Reference Interfaces
  • Local Development of Labeling Interfaces
  • Installing a Labeling Frontend in labelbox.com
• Export Converters
  • VOC
  • COCO
• Terms of use, privacy and content dispute policy

Full Documentation

Creating Custom Labeling Interfaces

You can create custom labeling interfaces to suit the needs of your labeling tasks. All of the pre-made labeling interfaces are open source.

A Minimal Example

<script src="https://api.labelbox.com/static/labeling-api.js"></script>
<div id="form"></div>
<script>
function label(label){
  Labelbox.setLabelForAsset(label).then(() => {
    Labelbox.fetchNextAssetToLabel();
  });
}

Labelbox.currentAsset().subscribe((asset) => {
  if (asset){
    drawItem(asset.data);
  }
})
function drawItem(dataToLabel){
  const labelForm = `
    <img src="${dataToLabel}" style="width: 300px;"></img>
    <div style="display: flex;">
      <button onclick="label('bad')">Bad Quality</button>
      <button onclick="label('good')">Good Quality</button>
    </div>
  `;
  document.querySelector('#form').innerHTML = labelForm;
}

</script>

Labelbox Pluggable Interface Architecture

Labelbox allows the use of custom labeling interfaces. Custom labeling interfaces minimally define a labeling ontology and optionally the look and feel of the labeling interface. A minimal labeling interface imports labeling-api.js and uses the fetch and submit functions to integrate with Labelbox. While Labelbox makes it simple to do basic labeling of images and text, there are a variety of other data types such as point clouds, maps, videos or medical DICOM imagery that require bespoke labeling interfaces. With this in mind, Labelbox is designed to facilitate the creation, installation, and maintenance of custom labeling frontends.

Using labeling-api.js

To develop a Labelbox frontend, import labeling-api.js and use the 2 APIs described below to fetch the next data and then submit the label against the data. Note that multiple data can be loaded in a single fetch if a row in the CSV file contains an array of data pointers.

Attach the Labelbox Client Side API

<script src="https://api.labelbox.com/static/labeling-api.js"></script>

Get a row to label

Labelbox.fetchNextAssetToLabel().then((dataToLabel) => {
  // ... draw to screen for user to view and label
});

Save the label for a row

Labelbox.setLabelForAsset(label); // labels the asset currently on the screen

Hello World Example

Try it in your browser
(The project must be setup first)

Full Example

<script src="https://api.labelbox.com/static/labeling-api.js"></script>
<div id="form"></div>
<script>
function label(label){
  Labelbox.setLabelForAsset(label).then(() => {
    Labelbox.fetchNextAssetToLabel();
  });
}

Labelbox.currentAsset().subscribe((asset) => {
  if (asset){
    drawItem(asset.data);
  }
})
function drawItem(dataToLabel){
  const labelForm = `
    <img src="${dataToLabel}" style="width: 300px;"></img>
    <div style="display: flex;">
      <button onclick="label('bad')">Bad Quality</button>
      <button onclick="label('good')">Good Quality</button>
    </div>
  `;
  document.querySelector('#form').innerHTML = labelForm;
}

</script>

Full API Reference

Reference Interfaces

Image/Video/Text classification interface source code

Local Development of Labeling Interfaces

Labeling interfaces are developed locally. Once the interface is ready to use, it is installed in Labelbox by pointing to a hosted version of the interface.

Run localhost server

1. Start the localhost server in a directory containing your labeling frontend files. For example, run the server inside custom-interfaces/hello-world to run the hello world labeling interface locally.

python -m SimpleHTTPServer

2. Open your browser and navigate to the localhost endpoint provided by the server.

3. Customize the labeling frontend by making changes to index.html. Restart the server and refresh the browser to see the updates.

Installing a Labeling Frontend in labelbox.com

When you are ready to use your custom labeling interface on Labelbox, upload your index.html file to a cloud service that exposes a URL for Labelbox to fetch the file. If you don't have a hosting service on-hand, you can quickly get setup with Now from Zeit.

Custom Interface Hosting Quickstart with Now

• Create an account at Zeit, download and install Now here: https://zeit.co/download

• With Now installed, navigate to the directory with your labeling interface (where your index.html is located) and launch Now in your terminal by typing now. The Now service will provide a link to your hosted labeling interface file.

• Within the Labeling Interface menu of the Settings tab of your Labelbox project, choose Custom and paste the link in the URL to labeling frontend field as shown in the video below.

Labelbox Export Converters

If you need to convert your project's labels to COCO or VOC format, export them in JSON and see the README in either the COCO or VOC export converter section for your next steps.

Terms of use, privacy and content dispute policy

Here is our terms of service, privacy and content dispute policy