logofirst
logofirst GitHub

Frontend reference

Label Studio Frontend (LSF) includes a number of UI options and callbacks that you can use when implementing the frontend with a custom labeling backend, or when customizing the Label Studio interface.

Updates to LSF in version 1.0.0

LSF version 1.0.0 is not compatible with earlier versions of Label Studio. If you use LSF with a custom backend, you must make changes to the API callbacks that you use as follows:

Callback in 0.9.1 and earlier Renamed callback in 1.0.0
onSubmitCompletion onSubmitAnnotation
onUpdateCompletion onUpdateAnnotation
onDeleteCompletion onDeleteAnnotation

If you rely on specific formatting of Label Studio completed tasks, Label Studio’s annotation format has also been updated.

Implement the Label Studio Frontend

var labelStudio = new LabelStudio('editor', options);

The following options are recognized when initializing a Label Studio instance version 1.0.0.

Options

config

Default: null

Type data: string

XML configuration of task. List of formats to allow in the editor.

interfaces

Default: null

Type data: array

Collection of UI elements to show:

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

messages

Default: null

Type data: object

Messaging used for different actions

{
  DONE: "Done!",
  NO_COMP_LEFT: "No more annotations",
  NO_NEXT_TASK: "No more data available for labeling",
  NO_ACCESS: "You don't have access to this task"
}

description

Default: No description

Type data: string

Description of the current task.

task

Task data

Default: null

Type data: object

{
  id: 1,
  load: false
  },
  data: {
    text: "Labeling text..."
  },
  annotations: [],
  predictions: [],
}

id

Type data: integer

Default: null

data

annotations

Type data: array

Array of annotations. See the annotation documentation for more information.

predictions

Type data: array

Array of predictions. Similar structure as completions or annotations. See the annotation documentation and guidance for importing predicted labels for more information.

user

User data

Type data: object

{
  pk: 1,
  firstName: "Stanley",
  lastName: "Kubrick"
}

pk

Type data: number

firstName

Type data: string

lastName

Type data: string

Callbacks

Callbacks can be used to execute actions based on user interaction with the interface. For example, label-studio server uses callbacks to communicate with an API. Pass them along with other options when initiating the instance.

onSubmitAnnotation

Type data: function

Called when the submit button is pressed. ls is label studio instance, annotation is the value of the current annotation.

Example

onSubmitAnnotation: function(ls, annotation) {
  console.log(annotation)
}

onUpdateAnnotation

Type data: function

Called when the update button is pressed. ls is label studio instance, annotation is the value of the current annotation.

Example

onUpdateAnnotation: function(ls, annotation) {
  console.log(result)
}

onDeleteAnnotation

Type data: function

Called when the delete button is pressed. ls is label studio instance, annotation is value of current annotation.

Example

onDeleteAnnotation: function(ls, annotation) {
  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 was created.

Example

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

onEntityDelete

Type data: function

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

Example

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

onSkipTask

Type data: function

Called when the skip button is pressed. ls is label studio instance.

Example

onSkipTask: function(ls) {
  console.log(result)
}

onLabelStudioLoad

Type data: function

Called when Label Studio has fully loaded and is ready for labeling. ls is the label studio instance

Example

onLabelStudioLoad: function(ls) {
  console.log(result)
}