Label Studio and ML Model Integration in Vue 2 Application

Question

Now I know that I can add ML Models to each project in Lable Studio to assist me get Auto / Pre-Annotations for an image.

Now that I've created my own ML Model with an endpoint, it also works with Label Studio. I've constructed a Vue application where users can come and annotate specific images to help me train the model better, but I can't find a way to incorporate / connect the ML model with my embedded label studio tool, which I loaded from the npm module '"@heartexlabs/label-studio"'.

Any assistance is greatly appreciated.

This is my Vue Component that I'm using to integrate label studio into my application.

<template>
  <div id="ls-wrapper"></div>
</template>

<script>
import LabelStudio from "@heartexlabs/label-studio";
import "@heartexlabs/label-studio/build/static/css/main.css";

export default {
  name: "JAnnotation",

  props: {
    templateConfig: {
      type: String,
      default: `
      <View>
        <Header value="Select label and click the image to start"/>
        <Image name="image" value="$image" zoom="true"/>
        <PolygonLabels name="label" toName="image" strokeWidth="3" pointSize="small" opacity="0.9">
          <Label value="Normal" background="#b8ff9e"/>
          <Label value="Abnormal" background="#f20202"/>
        </PolygonLabels>
      </View>
      `,
    },
    interfaces: {
      type: Array,
      default: () => [
        "panel",
        "update",
        "submit",
        // "controls",
        "topbar",
        "instruction",
        "side-column",
        // "annotations:history",
        // "annotations:tabs",
        // "annotations:menu",
        // "annotations:current",
        // "annotations:add-new",
        // "annotations:delete",
        // "annotations:view-all",

        // "skip",
        // "infobar",
        "predictions:tabs",
        "predictions:menu",
        "auto-annotation",
        "edit-history",
      ],
    },
    user: {
      type: Object,
      default: () => ({ pk: 1, firstName: "FirstName", lastName: "LastName" }),
    },
    task: {
      type: Object,
      default: () => ({
        id: 1,
        data: {
          image:
            "dummy_image.jpg",
        },
      }),
    },
    annotations: {
      type: Array,
      default: () => [],
    },
    predictions: {
      type: Array,
      default: () => [],
    },
  },

  data() {
    return {
      labelStudioInstance: null,
    };
  },

  mounted() {
    this.labelStudioInstance = new LabelStudio("ls-wrapper", {
      config: this.templateConfig,
      interfaces: this.interfaces,
      user: this.user,
      task: {
        ...this.task,
        annotations: this.annotations,
        predictions: this.predictions,
      },
    });

    this.labelStudioInstance.on("labelStudioLoad", this.onLabelStudioLoad);
    this.labelStudioInstance.on("submitAnnotation", this.onSubmitAnnotation);
    this.labelStudioInstance.on("updateAnnotation", this.onUpdateAnnotation);
    this.labelStudioInstance.on("selectAnnotation", this.onSelectAnnotation);
    this.labelStudioInstance.on("deleteAnnotation", this.onDeleteAnnotation);
  },

  beforeDestroy() {
    this.labelStudioInstance.off("labelStudioLoad", this.onLabelStudioLoad);
    this.labelStudioInstance.off("submitAnnotation", this.onSubmitAnnotation);
    this.labelStudioInstance.off("updateAnnotation", this.onUpdateAnnotation);
    this.labelStudioInstance.off("selectAnnotation", this.onSelectAnnotation);
    this.labelStudioInstance.off("deleteAnnotation", this.onDeleteAnnotation);
    this.labelStudioInstance.destroy();
  },

  methods: {
    addAnnotation(labelStudioInstance) {
      const c = labelStudioInstance.annotationStore.addAnnotation({
        userGenerate: true,
      });
      labelStudioInstance.annotationStore.selectAnnotation(c.id);
    },
    onLabelStudioLoad(labelStudioInstance) {
      if (this.annotations.length === 0) {
        this.addAnnotation(labelStudioInstance);
      }
      this.$emit("label-studio-load", { labelStudioInstance });
    },
    onSubmitAnnotation(labelStudioInstance, annotation) {
      this.$emit("submit-annotation", {
        labelStudioInstance,
        annotation,
        result: annotation.serializeAnnotation(),
      });
    },
    onUpdateAnnotation(labelStudioInstance, annotation) {
      this.$emit("update-annotation", {
        labelStudioInstance,
        annotation,
        result: annotation.serializeAnnotation(),
      });
    },
    onSelectAnnotation(labelStudioInstance, annotation) {
      this.$emit("select-annotation", {
        labelStudioInstance,
        annotation,
      });
    },
    onDeleteAnnotation(labelStudioInstance, annotation) {
      if (labelStudioInstance.annotationStore.annotations.length === 1) {
        this.addAnnotation(labelStudioInstance);
      }
      this.$emit("delete-annotation", {
        labelStudioInstance,
        annotation,
      });
    },
  },
};
</script>