JavaScript SDK

This documentation describes Heartex platform version 1.0.0, which is no longer supported. For information about the machine learning SDK in Label Studio Enterprise Edition, the equivalent of Heartex platform version 2.0.x, see Write your own ML backend.

The following options are recognized when initializing the HeartexSDK instance.

Setup

<link href="https://app.heartex.ai/static/sdk/htx-v1.0.0.css" rel="stylesheet" />
<script src="https://app.heartex.ai/static/sdk/htx-v1.0.0.js"></script>

Initialization

var Htx = new HeartexSDK({
    elid: "label-studio",
    token: $TOKEN,
    user: $USERID,
    project: $PROJECTID,
    usePrediction: true
});
      
Htx.labelTask($TASKID, { addInitialWhenEmpty: true });

Options

SDK can be configured in many ways, including what UI elements are shown to the user, messages for specific actions, validation of the input and others. There are several required params: token, user, project or config

token

Type data: string

Annotator authentication token, you can use API to fetch one or create a new collaborator

elid

Default: label-studio

Type data: string

DOM Element ID used for rendering the editor

task

Type data: number

Heartex Task ID to work on. When provided initialization function calls labelTask.

user

Type data: number

User ID

project

Type data: number

Project ID associated with the task

config

Type data: string

Project label config, if you don’t provide that there is an extra request to fetch that from the server.

mode

Default: explore

Type data: string

Available modes are: explore or stream. If you set the mode to stream then after submitting the task, it automatically calls labelNextTask.

usePrediciton

Default: false

Type data: boolean

Load and show prediction of the model if it’s available

interfaces

Default: null

Type data: array

Collection of UI elements to show:

[
    "completions:add-new",
    "completions:delete",
    "completions:menu",
    "controls",
    "panel",
    "predictions:menu",
    "side-column",
    "skip",
    "submit"
    "update",
]

• completions:add-new - show add new completions button
• completions:delete - show delete current completion button
• completions:menu - show completions menu
• controls - enable panel with controls (submit, update, skip)
• panel - navigation panel of current task with buttons: undo, redo and reset
• predictions:menu - show predictions menu
• side-column - enable panel with entities
• skip - show button of skip current task
• submit - show button of submit or update current completion
• update - show button of update current task after submitting

Callbacks

Callbacks can be useful when you need to capture the actions being performed inside the editor, for example when the task gets submitted.

onSubmitCompletion

Type data: function

Called when a button submit is pressed. The studio is the underlying state tree, completion is the value of current completion.

Example

onSubmitCompletion: function(studio, completion) {
  console.log(result)
}

onUpdateCompletion

Type data: function

Called when a button update is pressed. The studio is the underlying state tree, completion is the value of current completion.

Example

onUpdateCompletion: function(studio, completion) {
  console.log(result)
}

onDeleteCompletion

Type data: function

Called when a button delete is pressed. The studio is the underlying state tree, completion is the value of current completion.

Example

onDeleteCompletion: function(studio, completion) {
  console.log(result)
}

onEntityCreate

Type data: function

Called when a new region gets labeled, for example a new bbox is created. region is the object that got created.

Example

onEntityCreate: function(region) {
  console.log(region)
}

onEntityDelete

Type data: function

Called when an existing region got deleted. region is the object itself.

Example

onEntityDelete: function(region) {
  console.log(region)
}

onSkipTask

Type data: function

Called when a button skip is pressed.

onTaskLoad

Type data: function

Called when the task is done loading through the API.

onLabelStudioLoad

Type data: function

Called when the editor is done loading is pressed.

Methods

loadProject( projectID, [ callback ] )

• Arguments:

  • {number} projectID
  • {function} [ callback ]

• Returns: null

• Usage:

Load project by id. Calling this method will update the labeling config and re-initialize the state. If you pass the project inside options, it will call this method during initialization.

labelTask( taskID, [ options ] )

• Arguments:

  • {number} taskID
  • {Object} [ { addInitialWhenEmpty: bool, usePrediction: bool } ]

• Returns: null

• Usage:

Load task by id and show labeling interface to label it. If you set addInitialWhenEmpty to true it will also add an empty completion if there is none returned by the task. If usePrediction is true it will show prediction as pre-labeling.

In most cases you want to set addInitialWhenEmpty to true

labelNextTask( [ options ] )

• Arguments:

  • {Object} [ { usePrediction: bool } ]

• Returns: null

• Usage:

Load next task available for labeling. If you want to enable pre-labeling pass usePredction as true.

fetchTask( taskID )

• Arguments:

  • {number} taskID

• Returns: Promise

• Usage:

Fetch task data by id.

showTask ( task, { addInitial: bool, addInitialWhenEmpty: bool, usePrediction: bool } )

• Arguments:

  • {Object} task
  • {Object} options

• Returns: null

• Usage:

Show task. You can use this method with the fetchTask above.

getCurrentResults ()

• Arguments: null

• Returns: null

• Usage:

Get serialized results of the current completion.

setMode ( mode )

• Arguments:

  • {string} mode

• Returns: null

• Usage:

Set labeling mode, read more about the mode here.