Vue

<script setup lang="ts">
import { onBeforeUnmount, onMounted, ref } from "vue";
import { createJsonTransport, mountForm, type MountedForm } from "mlform";

const host = ref<HTMLElement | null>(null);
let mounted: MountedForm | null = null;

onMounted(() => {
  if (!host.value) return;

  mounted = mountForm(host.value, {
    transport: createJsonTransport({ endpoint: "/api/predict" }),
    schema: {
      fields: [{ id: "prompt", kind: "text", label: "Prompt", required: true }],
      reports: [{ id: "prediction", kind: "classifier", label: "Prediction" }],
    },
  });
});

onBeforeUnmount(() => mounted?.unmount());
</script>

<template>
  <div ref="host" />
</template>