Build Backend and Start Page for projects installed at npm

[myucel8108]

I'm currently working on a project using only vue3 and installing @heartexlabs/label_studio1.4.0 at npm. When I compared the other screens here, I was wondering if it's normal for label_studio to not have a screen to create a project, which is the first screen, without basic backend construction, or if there's anything I don't know.
The first page that comes up when you start your current project is.

After clicking the submit button or update button, what I want is to build my own Beckend and store the image, label, label type, creation time, label coordinate value, metadata, etc. and when the image is retrieved from the server, the labels are stamped as they are.

Also, the values that come out during submit or update are as follows

I'm not good at English, but thank you for watching.
The code is as follows.

{
<script>
import LabelStudio from "@heartexlabs/label-studio"
import { ref, onMounted } from "vue"
import Modal from "./modal.vue"

export default {
  components: {
    Modal,
  },
  setup() {
    const isModalVisible = ref(false);
    const labelStudio = ref(null);
    const task = ref({
      id: 1,
      data: {
        image:
          "https://htx-misc.s3.amazonaws.com/opensource/label-studio/examples/images/nick-owuor-astro-nic-visuals-wDifg5xc9Z4-unsplash.jpg",
      },
      annotations: [],
      predictions: [],
    });
    let labelCount = ref(1);
    let saveData = ref(null);
    const imageUrl = ref("");
    const imageInput = ref(null);
    const interfaces = [
      "basic",
      "panel",
      "update",
      "submit",
      "predictions",
      "skip",
      "controls",
      "topbar",
      "instruction",
      "side-column",
      "auto-annotation",
      "annotations:menu",
      "edit-history",
    ];

    const config = ref(`
    
      
      
      
    
    `);

    const createLabelStudioInstance = () => {
      if (labelStudio.value) {
        labelStudio.value.destroy(); // 이전에 생성된 인스턴스를 파괴
      }
      labelStudio.value = new LabelStudio("label-studio", {
        config: config.value,
        task: task.value,
        interfaces: interfaces,
      });

      labelStudio.value.on("labelStudioLoad", (LS) => {
        const c = LS.annotationStore.addAnnotation({
          userGenerate: true,
        });
        LS.annotationStore.selectAnnotation(c.id);
      });

      labelStudio.value.on("updateAnnotation", (LS, annotation) => {
        console.log(annotation.serializeAnnotation());
      });

      labelStudio.value.on("deleteAnnotation", (LS, annotation) => {
        console.log(annotation.serializeAnnotation());
      });

      labelStudio.value.on("nextTask", (LS) => {
        console.log("Next task button clicked");
      });

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

      labelStudio.value.on("regionFinishedDrawing", (region, list) => {
        console.log("finish drawing", { region, list });
      });
    };

    onMounted(() => {
      // 초기에 LabelStudio 인스턴스 생성
      createLabelStudioInstance();
    });

    const openModal = () => {
      isModalVisible.value = true;
    };

    const closeModal = () => {
      isModalVisible.value = false;
    };

    const modalSubmitted = (value) => {
      const insertIndex = config.value.indexOf("");
      if (insertIndex !== -1) {
        // 찾은 위치에 새로운 내용을 추가합니다
        config.value =
          config.value.slice(0, insertIndex) +
          `<${value.selectedLabel} name="labels${labelCount.value}" toName="image"  strokeWidth="3" opacity="0.9" >
        
        ` +
          config.value.slice(insertIndex);
        labelCount.value++;
        createLabelStudioInstance();
      }
    };

    const openImageInput = () => {
      // 이미지 선택 input을 클릭
      if (imageInput.value) {
        imageInput.value.click();
      }
    };

    const imageChange = (event) => {
      const file = event.target.files[0];

      if (file) {
        // FileReader를 사용하여 이미지를 미리보기할 수 있습니다.
        const reader = new FileReader();

        reader.onload = () => {
          const dataUrl = reader.result;

          // task 객체의 data 속성의 image에 Data URL을 할당합니다.
          task.value.data.image = dataUrl;
          createLabelStudioInstance();
        };

        reader.readAsDataURL(file);
      }
    };

    return {
      isModalVisible,
      openModal,
      closeModal,
      modalSubmitted,
      openImageInput,
      imageChange,
      imageUrl,
      imageInput,
    };
  },
};
</script>
<style>
@import "@heartexlabs/label-studio/build/static/css/main.css";
</style>
}