template.html

<!-- Include Label Studio stylesheet -->
<link href="https://unpkg.com/label-studio@1.0.1/build/static/css/main.css" rel="stylesheet">

<!-- Create the Label Studio container -->
<div id="label-studio"></div>

<!-- Include the Label Studio library -->
<script src="https://unpkg.com/label-studio@1.0.1/build/static/js/main.js"></script>

<script src="https://cdn.jsdelivr.net/npm/ipfs-http-client/dist/index.min.js"></script>

<!-- Initialize Label Studio -->
<script>
  const ipfs = window.IpfsHttpClient.create({ host: 'ipfs.effect.ai', port: 443, protocol: 'https' })
  var labelStudio = new LabelStudio('label-studio', {
    config: `
<View>
    <Header value="Please draw bounding boxes around each line of text and label it with its contained text."/>
  <Image name="image" value="$ocr" zoom="true" zoomControl="true"/>

  <Rectangle name="bbox" toName="image" strokeWidth="3"/>

  <TextArea name="transcription" toName="image" editable="true" perRegion="true" required="true" maxSubmissions="1" rows="5" placeholder="Recognized Text" displayMode="region-list"/>
</View>
    `,


    interfaces: [
      "panel",
      "update",
      "submit",
      "controls",
      "side-column",
      "annotations:menu"
    ],

    user: {
      pk: 1,
      firstName: "James",
      lastName: "Dean"
    },

    task: {
      annotations: JSON.parse(${annotations|raw}),
      predictions: [],
      id: ${id},
      data: {
        ocr: "${image}"
      }
    },


    onSubmitAnnotation: function(ann) {
      alert('Please update existing annotation, instead of creating a new one');
    },
    onUpdateAnnotation: async function(LS, ann) {

    },
    onLabelStudioLoad: function(LS) {
      var c = LS.annotationStore.addAnnotation({
        userGenerate: true
      });
      LS.annotationStore.selectAnnotation(c.id);
    }
  });
 const submitResults = async function () {
      let LS = labelStudio;
     // let res = LS.annotationStore.annotations.filter(a => a.id == ann.id)[0].serializeAnnotation();
      let res = LS.annotationStore.annotations[0].serializeAnnotation();
      try {
          const hash = await ipfs.add(JSON.stringify({"result": res}));
          console.log('uploading cid', hash);

          parent.postMessage({'task': 'submit', 'values':  hash.path}, '*');
        } catch (error) {
          console.error('Failed to upload to IPFS', error)
        }
  };
</script>
<button onclick="submitResults()">Submit</button>