Label Studio frontend embed for object detection. Try to save the code below as an HTML page and open it up in your browser.

label_studio_rectangle.html

<!-- 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('label-studio', {
    config: `
      <View>
        <Image name="img" value="$image" zoom="true"></Image>
        <RectangleLabels name="tag" toName="img">
          <Label value="Car"></Label>
          <Label value="Plane" background="#aa00ff"></Label>  
        </RectangleLabels>
      </View>
    `,

    interfaces: [ "update","controls", "side-column","completions:menu", "completions:add-new","completions:delete" ],

    task: {
      data: { image: "https://go.heartex.net/static/samples/kittens.jpg" }
    },
    
    onLabelStudioLoad: function(LS) {
      var c = LS.completionStore.addCompletion({ userGenerate: true });
      LS.completionStore.selectCompletion(c.id);
    },
      
    onSubmitCompletion: function(LS, C) {
        console.log(JSON.stringify(C.serializeCompletion()));
        alert("Submit button pressed");
    },
      
    onUpdateCompletion: function (LS, C) {
        console.log(JSON.stringify(C.serializeCompletion()));
        alert("Update button pressed");
    },
  });
</script>