Open surya9teja opened 1 year ago
If remove labelStudio.on
the error is no longer showing but my webpage shows empty white space
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
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
I think the easiest way is to create your own CSS rules
btw you can use chrome plugins to enable dark theme for any websites.
Can I ask you about the version of the plugin, I would like to know how to upgrade the plugin version
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?
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
@LiShouHai there are plenty of different plugins: e.g. https://chrome.google.com/webstore/detail/dark-mode/dmghijelimhndkbmpgbldicpogfkceaj/related?hl=en
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
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