Table of Contents

labeling-api.js API reference

Labelbox.currentAsset

This function returns a stream of information about the currently viewed asset on the screen. It is important to have all your drawing logic behind this function so that Labelbox can tell your frontend which asset to render.

For example, if a user opens your interface from an existing label, this function would receive the data about that asset but also its label information.

Note: Labelbox.currentAsset().subscribe(...) will emit multiple times for the same asset. This is because multiple network requests are appending information onto this asset, such as asset.next & asset.previous.
const subscription = Labelbox.currentAsset().subscribe((asset) => {
// Asset can be undefined
if (!asset){
return;
}

console.log(asset.id); // The labelbox id for this asset
console.log(asset.data); // This is whatever data you imported into labelbox (E.X. your image url)
console.log(asset.label); // Undefined if the asset hasn't been labeled or whatever label you've submitted
console.log(asset.previous); // The previous assetId in the queue (see setLabelAsCurrentAsset)
console.log(asset.next); // The next assetId in the queu (see setLabelAsCurrentAsset)
console.log(asset.createdAt); // Datetime for when this asset was created
console.log(asset.createdBy); // Email for who created the label
console.log(asset.typeName); // Labelbox has Label Schemas to improve reporting. This can either be Any or Skip at the moment
})

// If you want to stop recieving updates.
// However, I would recommend having a single subscription for your entire application.
subscription.unsubscribe();
Using predictions

Model-assisted labels can be used to provide an initial starting point for labeling. The asset.labelTemplates field provides an array of all the Predictions that are available for the current asset, and the asset.labelTemplateId field provides the ID of the Prediction which was created by the project’s currently active prediction model (more details here).

Each entry of asset.labelTemplates has an id attribute which can be matched against asset.labelTemplateId to determine the correct prediction to show. Also, the asset.label field contains the data the labeling interface should use as a starting point for initializing the label. The exact schema of this data is dependent upon the labeling interface in use. For a custom interface, you will need to ensure that the format of the labels submitted when creating predictions conform to the schema expected by the custom labeling interface.

const subscription = Labelbox.currentAsset().subscribe((asset) => {
// Asset can be undefined
if (!asset){
return;
}

console.log(asset.labelTemplates); // A (nullable) array of the Predictions for this asset, if any exist
console.log(asset.labelTemplateId); // A (nullable) string id of the Prediction created by the project's active prediction model, if it exists
const labelTemplate = (asset.labelTemplates || []).find(
(template) => template.id === asset.labelTemplateId
); // Gets the Prediction created by the Project's active prediction model
console.log(labelTemplate.label); // The data to use for initializing the label
})

// If you want to stop recieving updates.
// However, I would recommend having a single subscription for your entire application.
subscription.unsubscribe();

Labelbox.enablePreloading

Labelbox automatically preloads a labeling queue. However, you can improve the loading speed of labels by giving Labelbox a function to run on each preloaded asset. The preloading function must return a promise.

The sample script below preloads images in the DOM before the user sees the asset. It is cached by the time the user reaches that asset.

const preloadFunction = (asset: Asset) => {
const loadImageInDom = (url: string) => {
return new Promise((resolve) => {
const img = document.createElement('img');
img.src = url;
img.onload = () => {
img.remove();
resolve();
};
img.style.display = 'none',
img.style.width = '0px',
img.style.height = '0px',
document.body.appendChild(img);
});
}
return loadImageInDom(asset.data);
}

Labelbox.enablePreloading({preloadFunction})

Labelbox.setLabelForAsset

This function takes a string (JSON.stringify(myJsonLabel) and will return a promise for when the label has been saved.

Labelbox.setLabelForAsset('good').then(() => console.log('Success!'));

Labelbox.fetchNextAsset

This function will set the currentAsset to be the next unlabeled asset. For example after submitting a label if you want to advance to the next unlabeled asset you can run this method and then Labelbox.currentAsset(** will emit the new asset as soon as its fetched.

function label(label){
Labelbox.setLabelForAsset(label).then(() => {
Labelbox.fetchNextAssetToLabel();
});
}

Labelbox.setLabelAsCurrentAsset

Labelbox will automatically emit currentAssets when a user performs some action, such as jumping through the review screen. However, if you would like to add a button to go back to a previous asset you can use this method.

function goBack(){
Labelbox.setLabelAsCurrentAsset(asset.previous)
}

Labelbox.skip

Labelbox.skip() is identical to setLabelForAsset(‘Skip’, ‘Skip’). The Label that will be seen in your export will be “Skip**

Labelbox.skip().then(() => console.log('Skipped!'))

Labelbox.getTemplateCustomization

If you decide you want your template to be customizable you can use this method to receive the customization. Customization always comes in as JSON, but may not be supported by your template. Make sure to add some error handling here.

// Your template is want customization JSON that looks like this...
{
"instructions":"Label This",
"tools": [{"name": "Tool one"}]
}

// You can use this function like so...

Labelbox.getTemplateCustomization().subscribe((customization) => {
if (customization.instructions && customization.tools) {
updateTemplateWithCustomization(customization);
}
})

It is worth noting that this customization will also be provided every time your template loads and not just when a user is configuring it.

Was this page helpful?

Create a custom interface

Contact