Using label-studio frontend with vue js 3

[surya9teja]

Hi everyone, I have been trying to implement label-studio frontend using vue js 3 With the help of documentation I installed and configured my annotation.vue npm install heartexlabs@label-studio

<template>
    <div>
        <div id="label-studio"></div>
    </div>
</template>
<script>
import LabelStudio from "label-studio";
import "label-studio/build/static/css/main.css";

export default {
    mounted() {
        const labelStudio = new LabelStudio("label-studio", {
            config: `
            <View>
                <Image name="img" value="$image"></Image>
                <RectangleLabels name="tag" toName="img">
                    <Label value="Hello"></Label>
                    <Label value="World"></Label>
                </RectangleLabels>
            </View>`,
            interfaces: [
                "panel",
                "update",
                "controls",
                "side-column",
                "annotations:menu",
                "annotations:add-new",
                "annotations:delete",
                "predictions:menu"
            ],
            user: {
                pk: 1,
                firstName: "James",
                lastName: "Dean"
            },
            task: {
                annotations: [],
                predictions: [],
                id: 1,
                data: {
                    image:
                        "https://htx-misc.s3.amazonaws.com/opensource/label-studio/examples/images/nick-owuor-astro-nic-visuals-wDifg5xc9Z4-unsplash.jpg"
                }
            }
        });
        labelStudio.on("labelStudioLoad", (LS) => {
            // Perform an action when Label Studio is loaded
            const c = LS.annotationStore.addAnnotation({
                userGenerate: true
            });
            LS.annotationStore.selectAnnotation(c.id);
        });

        labelStudio.on("submitAnnotation", (LS, annotation) => {
            // Retrieve an annotation in JSON format
            console.log(annotation.serializeAnnotation())
        });

        this.labelStudio = labelStudio;
    },
    methods: {
        onLabelStudioLoad(LS) {
            // Perform an action when Label Studio is loaded
            const c = LS.annotationStore.addAnnotation({
                userGenerate: true
            });
            LS.annotationStore.selectAnnotation(c.id);
        },
        onSubmitAnnotation(LS, annotation) {
            // Retrieve an annotation in JSON format
            console.log(annotation.serializeAnnotation());
        }
    }
};
</script>

But I am getting a console error

Uncaught (in promise) TypeError: labelStudio.on is not a function

If anyone knows How to implement label-studio frontend in vue js 3, please help me. Thanks

[surya9teja]

If remove labelStudio.on the error is no longer showing but my webpage shows empty white space

[alexandrebouillet]

Hi, I'm currently using labelstudio in my Vue 3 application. Here's my labelstudio component i'm using in my app:

<template>
  <div id="label-studio"></div>
</template>


<script>
import LabelStudio from "@heartexlabs/label-studio";
import {useUser} from "~/composables/user";

export default {
  props: {
    config: {
      type: String,
      required: true
    },
    interfaces: {
      type: Array,
      required: false,
      default: () => [
        "panel",
        "update",
        "submit",
        "controls",
        "infobar",
        "topbar",
        "side-column",
        "annotations:history",
        "annotations:tabs",
        "annotations:menu",
        "annotations:current",
        "edit-history",
      ]
    },
    task: {
      type: Object,
      required: true
    },
    onLabelStudioLoad: {
      type: Function,
      required: false,
      default: (ls) => {}
    },
    onSubmitAnnotation: {
      type: Function,
      required: false,
      default: (ls, annotation) => {}
    },
    onUpdateAnnotation: {
      type: Function,
      required: false,
      default: (ls, annotation) => {}
    },
  },
  data() {
    return {
      labelStudio: null,
    };
  },
  mounted() {
    const user = useUser();
    this.labelStudio = new LabelStudio('label-studio', {
      config: this.config,
      interfaces: this.interfaces,
      task: this.task ,
      user: {
        pk: 1,
        firstName: user.first_name,
        lastName: user.last_name,
      },
      onLabelStudioLoad: this.onLabelStudioLoad,
      onSubmitAnnotation: this.onSubmitAnnotation,
      onUpdateAnnotation: this.onUpdateAnnotation,
    })
  },
}
</script>


<style>
@import '@heartexlabs/label-studio/build/static/css/main.css';
</style>

I hope this snippet will help you

[surya9teja]

Thanks for sharing @alexandrebouillet , It helps a lot. Do you know how can we change the background colours of the interface? Something like dark theme

[alexandrebouillet]

I think the easiest way is to create your own CSS rules

[makseq]

btw you can use chrome plugins to enable dark theme for any websites.

[LiShouHai]

Can I ask you about the version of the plugin, I would like to know how to upgrade the plugin version

[surya9teja]

I think the easiest way is to create your own CSS rules

That's a lot more work than I thought Thanks for your help, Do you have any idea how to update the tasks with different images dynamically after creating LabelStudio as a child?

[surya9teja]

Can I ask you about the version of the plugin, I would like to know how to upgrade the plugin version

Its 1.4.0 and I am using NPM package to install into my project https://www.npmjs.com/package/@heartexlabs/label-studio

[makseq]

@LiShouHai there are plenty of different plugins: e.g. https://chrome.google.com/webstore/detail/dark-mode/dmghijelimhndkbmpgbldicpogfkceaj/related?hl=en