From a0c046791e66fafa64202b9d9727090947b93ce2 Mon Sep 17 00:00:00 2001
From: Miguel Nobre <mnobre24@gmail.com>
Date: Fri, 14 Nov 2025 12:55:57 -0500
Subject: [PATCH 01/13] template changes

---
 assets/templates/halloween.html               |  86 +++++++
 assets/templates/music-transcriber.html       |  16 +-
 assets/templates/sentence-creation.html       |  50 ++++-
 .../templates/verify-music-transcriber.html   | 211 ++++++++++++++++++
 4 files changed, 350 insertions(+), 13 deletions(-)
 create mode 100644 assets/templates/halloween.html
 create mode 100644 assets/templates/verify-music-transcriber.html

diff --git a/assets/templates/halloween.html b/assets/templates/halloween.html
new file mode 100644
index 00000000..f0fa5a4b
--- /dev/null
+++ b/assets/templates/halloween.html
@@ -0,0 +1,86 @@
+<div id="app" style="text-align: center">
+  <h1>Effect AI - Happy Halloween!!</h1>
+  <hr />
+
+  <div class="mx-auto" style="max-width: 80%">
+    <!-- Image display -->
+    <img
+      @load="loading = false"
+      id="image"
+      ref="image"
+      :src="imageSource"
+      style="max-width: 400px; height: auto; margin: 0 auto; display: block"
+    />
+
+    <div v-if="loading" class="mt-3">Loading image...</div>
+
+    <hr />
+
+    <!-- Submit button -->
+    <button
+      @click.prevent="uploadAndSubmit"
+      class="button is-success is-large mt-4"
+      :class="{'is-loading': btnLoading}"
+    >
+      Claim your treat!
+    </button>
+  </div>
+
+  <!-- Styles -->
+  <link
+    rel="stylesheet"
+    href="https://unpkg.com/bulma@0.9.4/css/bulma.min.css"
+  />
+  <link href="https://app.effect.network/force-defaults.css" rel="stylesheet" />
+
+  <!-- Vue app -->
+  <script type="module">
+    import { createApp } from "https://unpkg.com/vue@3/dist/vue.esm-browser.js";
+
+    createApp({
+      data() {
+        return {
+          title: "Effect AI - Happy Halloween",
+          imageSource: "${image_url}", // this gets replaced dynamically
+          loading: true,
+          btnLoading: false,
+          instructions: `
+            <div>
+              <p><strong>Happy Halloween!!</strong></p>
+            </div>
+          `,
+        };
+      },
+      mounted() {
+        // Send task instructions to the parent frame
+        window.top.postMessage(
+          {
+            type: "task-instructions",
+            instructions: this.instructions,
+          },
+          "*"
+        );
+      },
+      methods: {
+        async uploadAndSubmit() {
+          this.btnLoading = true;
+          try {
+            parent.postMessage(
+              {
+                task: "submit",
+                values: {
+                  taskTitle: this.title,
+                  image: this.imageSource,
+                },
+              },
+              "*"
+            );
+          } catch (error) {
+            console.error("Error submitting task:", error);
+          }
+          this.btnLoading = false;
+        },
+      },
+    }).mount("#app");
+  </script>
+</div>
diff --git a/assets/templates/music-transcriber.html b/assets/templates/music-transcriber.html
index 8855c98c..4b16aad9 100644
--- a/assets/templates/music-transcriber.html
+++ b/assets/templates/music-transcriber.html
@@ -103,9 +103,19 @@ <h2>Validate Lyrics - Music Transcription</h2>
                     </p>
 
                     <p>
-                        <strong>Note:</strong> If the lyrics are inaudible or muffled and you can't 
-                        make out what is being said for a part of or the entire region, please input 
-                        <strong>[inaudible]</strong> for that portion.
+                        <strong>Note:</strong> 
+                        <ul>
+                            <li>
+                                If the lyrics are inaudible or muffled and you can't 
+                                make out what is being said for a part of or the entire region, please input 
+                                <strong>[inaudible]</strong> for that portion.
+                            </li>
+                            <li>
+                                If there is only music playing 
+                                with no sung or spoken words in a portion, please input <strong>[music]</strong> 
+                                for that portion.
+                            </li>
+                        </ul>
                     </p>
 
                     <h3>1. Instructions</h3>
diff --git a/assets/templates/sentence-creation.html b/assets/templates/sentence-creation.html
index 7df5a493..d449c3eb 100644
--- a/assets/templates/sentence-creation.html
+++ b/assets/templates/sentence-creation.html
@@ -1,3 +1,4 @@
+<meta charset="UTF-8">
 <div id="app" style="text-align: center">
     <h1>Effect AI - Sentence Creator</h1>
   
@@ -12,7 +13,8 @@ <h1>Effect AI - Sentence Creator</h1>
           class="textarea"
           placeholder="Enter your sentence here"
           type="text" 
-          v-model="tmpSentence"
+          v-model="sentence"
+          @keydown.enter.prevent
         >
         </textarea>
       </div>
@@ -20,8 +22,13 @@ <h1>Effect AI - Sentence Creator</h1>
     <p class="is-size-7 mb-2">By clicking this button, you accept that the sentence contributed here will be added to a publicly available cc-0 licensed dataset.</p>
 
     <p style="color: red;"
-    :class="{'is-hidden mb-3': !notComplete}">
-      Task incomplete - Please complete all sections of the task
+    :class="{'is-hidden mb-3': !tooLong}">
+      Sentence is too long - Sentence should be no longer than 15 words
+    </p>
+
+    <p style="color: red;"
+    :class="{'is-hidden mb-3': !tooShort}">
+      Sentence is too short - Sentence should be longer than 4 words
     </p>
 
     <button
@@ -45,9 +52,10 @@ <h1>Effect AI - Sentence Creator</h1>
       data() {
         return {
           title: "Effect AI Sentence Creator",
-          tmpSentence: "",
+          sentence: "",
           btnLoading: false,
-          notComplete: false,
+          tooShort: false,
+          tooLong: false,
           instructions: `
           <div>
             <h2>Create a sentence - Common Voice</h2>
@@ -176,19 +184,39 @@ <h3>4. Example Starter Topics for Sentences</h3>
       );
       },
       methods: {
+        sanitize(text) {
+          text = text
+          .replace(/\r\n/g, '\n')      // normalize Windows newlines
+          .replace(/[ \t]+$/gm, '')    // remove trailing spaces per line
+          .replace(/\n{2,}/g, '\n')    // collapse multiple blank lines
+          .trim();  
+
+          return text
+        },
         async uploadAndSubmit() {
           this.btnLoading = true;
-          if(this.tmpSentence == ""){
-            this.notComplete = true
-          }
-          else
+
+          const cleanSentence = this.sanitize(this.sentence).trim();
+          const wordCount = cleanSentence.split(/\s+/).length;
+
+          this.tooShort = false;
+          this.tooLong = false;
+
+          if (cleanSentence === "") {
+            this.notComplete = true;
+          } else if (wordCount < 5) {
+            this.tooShort = true;
+          } else if (wordCount > 15) {
+            this.tooLong = true;
+          } 
+          else {
             try {
               parent.postMessage(
                 {
                   task: "submit",
                   values: {
                     taskTitle: this.title,
-                    answer: this.tmpSentence,
+                    answer: cleanSentence,
                   },
                 },
                 "*"
@@ -196,6 +224,8 @@ <h3>4. Example Starter Topics for Sentences</h3>
             } catch (error) {
               console.error("Failed to upload to IPFS", error);
             }
+          }
+
           this.btnLoading = false;
         },
       },
diff --git a/assets/templates/verify-music-transcriber.html b/assets/templates/verify-music-transcriber.html
new file mode 100644
index 00000000..61250a69
--- /dev/null
+++ b/assets/templates/verify-music-transcriber.html
@@ -0,0 +1,211 @@
+<div id="app" style="text-align: center">
+  <h1 class="title is-3">Effect AI - Lyric Verification</h1>
+  <p class="subtitle is-6">Listen to the full song and verify all transcribed lyrics</p>
+
+  <hr />
+
+  <div class="mx-auto" style="max-width: 80%">
+    <div class="box">
+      <!-- Loading indicator -->
+      <div v-if="loading" class="has-text-centered mb-2">
+        Loading audio...
+        <progress class="progress is-primary" max="100" :value="loadProgress"></progress>
+      </div>
+      <div id="waveform" v-show="!loading"></div>
+    </div>
+
+    <!-- Playback Info -->
+    <div v-show="!loading" class="my-3">
+      <p>Current Playback: {{ formatTime(currentTime) }}</p>
+    </div>
+
+    <!-- Controls -->
+    <div class="flex items-center justify-between w-full" v-show="!loading">
+      <div class="flex justify-between mb-3">
+        <button @click="playFull" class="button is-primary mx-2">▶ Play / Pause</button>
+        <button @click="stopPlayback" class="button is-light mx-2">⏹ Stop</button>
+      </div>
+
+      <div class="flex items-center">
+        <p class="mb-1">Speed:</p>
+        <button @click="changePlaySpeed(0.75)" class="button mx-1">0.75x</button>
+        <button @click="changePlaySpeed(1)" class="button mx-1">1x</button>
+        <button @click="changePlaySpeed(1.25)" class="button mx-1">1.25x</button>
+      </div>
+    </div>
+
+    <hr v-show="!loading" />
+
+    <!-- All Lyrics Verification List -->
+    <div v-show="!loading" class="mt-4">
+      <h2 class="title is-5 mb-3">Full Lyrics Verification</h2>
+
+      <div
+        v-for="(seg, index) in parsedSegments"
+        :key="index"
+        class="p-3 mb-2 has-text-left box"
+        :class="{'has-background-link-light': isActiveSegment(seg)}"
+        style="cursor: pointer"
+        @click="jumpTo(seg)"
+      >
+        <div class="is-flex is-justify-content-space-between is-align-items-center">
+          <p>
+            <strong>{{Number(seg.start).toFixed(2)}} → {{Number(seg.end).toFixed(2)}}</strong>
+          </p>
+          <span v-if="isActiveSegment(seg)" class="tag is-link">Now Playing</span>
+        </div>
+
+        <textarea
+          v-model="seg.lyrics"
+          class="textarea mt-2"
+          rows="2"
+          placeholder="Edit or confirm this lyric section..."
+        ></textarea>
+      </div>
+    </div>
+
+    <button
+      @click.prevent="uploadAndSubmit"
+      class="button is-success is-large mt-4"
+      :class="{'is-loading': btnLoading}"
+    >
+      Submit Verified Lyrics
+    </button>
+  </div>
+
+  <link
+    rel="stylesheet"
+    href="https://unpkg.com/bulma@0.9.4/css/bulma.min.css"
+  />
+  <link href="https://app.effect.network/force-defaults.css" rel="stylesheet" />
+
+  <script type="module">
+    import { createApp } from "https://unpkg.com/vue@3/dist/vue.esm-browser.js";
+    import WaveSurfer from "https://unpkg.com/wavesurfer.js@7/dist/wavesurfer.esm.js";
+    import RegionsPlugin from "https://unpkg.com/wavesurfer.js@7/dist/plugins/regions.esm.js";
+
+    createApp({
+      data() {
+        return {
+          title: "Effect AI - Lyric Verification",
+          songSource: "${song_url}",
+          jobID: "${jobID}",
+        //   rawSegments: "[{\"start\":0,\"end\":6.5,\"lyrics\":\"I'm walking in the rain\"},{\"start\":6.5,\"end\":12.3,\"lyrics\":\"Love is all we need\"},{\"start\":12.3,\"end\":19.3,\"lyrics\":\"Hey there maam\"},{\"start\":19.3,\"end\":25,\"lyrics\":\"Can you feel it\"},{\"start\":25,\"end\":31,\"lyrics\":\"Can you feel the love\"}]",
+          rawSegments: "${segments}",
+          parsedSegments: [],
+          wavesurfer: null,
+          currentTime: 0,
+          currentSegment: null,
+          loadProgress: 0,
+          loading: true,
+          btnLoading: false,
+          playbackRate: 1,
+        };
+      },
+      mounted() {
+        this.parsedSegments = JSON.parse(this.rawSegments);
+        console.log("Parsed segments:", this.parsedSegments);
+        console.log("First segment:", this.parsedSegments[0]);
+        const regions = RegionsPlugin.create();
+
+        this.wavesurfer = WaveSurfer.create({
+          container: "#waveform",
+          waveColor: "#ddd",
+          progressColor: "#4f46e5",
+          height: 100,
+          url: this.songSource,
+          plugins: [regions],
+        });
+
+        this.wavesurfer.on("loading", (percent) => (this.loadProgress = percent));
+        this.wavesurfer.on("ready", () => {
+          this.loading = false;
+
+          // Add regions for each SRT section
+          this.parsedSegments.forEach((seg, i) => {
+            regions.addRegion({
+              id: "seg-" + i,
+              start: seg.start,
+              end: seg.end,
+              color: "rgba(79, 70, 229, 0.15)",
+              drag: false,
+              resize: false,
+            });
+          });
+        });
+
+        // Track playback to highlight active lyric section
+        this.wavesurfer.on("audioprocess", (time) => {
+          this.currentTime = time;
+          const active = this.parsedSegments.find(
+            (seg) => time >= seg.start && time <= seg.end
+          );
+          if (active) this.currentSegment = active;
+          else this.currentSegment = null;
+        });
+      },
+      methods: {
+        playFull() {
+          if (this.wavesurfer) this.wavesurfer.playPause();
+        },
+        stopPlayback() {
+          if (this.wavesurfer) {
+            this.wavesurfer.pause();
+            this.wavesurfer.seekTo(0);
+          }
+        },
+        changePlaySpeed(rate) {
+          this.playbackRate = rate;
+          this.wavesurfer.setPlaybackRate(rate, true);
+        },
+        jumpTo(seg) {
+          if (this.wavesurfer) {
+            const position = seg.start / this.wavesurfer.getDuration();
+            this.wavesurfer.seekTo(position);
+            this.wavesurfer.play();
+          }
+        },
+        formatTime(seconds) {
+          console.log(seconds)
+          if (!seconds && seconds !== 0) return "--:--";
+          const m = Math.floor(seconds / 60);
+          const s = Math.floor(seconds % 60)
+            .toString()
+            .padStart(2, "0");
+          return `${m}:${s}`;
+        },
+        isActiveSegment(seg) {
+          return this.currentSegment === seg;
+        },
+        async uploadAndSubmit() {
+          this.btnLoading = true;
+          try {
+            const verifiedSegments = this.parsedSegments.map((seg) => ({
+              start: seg.start,
+              end: seg.end,
+              lyrics: seg.lyrics.trim(),
+            }));
+
+            parent.postMessage(
+              {
+                task: "submit",
+                values: {
+                  taskTitle: this.title,
+                  answer: {
+                    jobID: this.jobID,
+                    song: this.songSource,
+                    verifiedLyrics: verifiedSegments,
+                  },
+                },
+              },
+              "*"
+            );
+          } catch (err) {
+            console.error("Submit failed", err);
+          }
+          this.btnLoading = false;
+        },
+      },
+    }).mount("#app");
+  </script>
+</div>

From 59fb43c974521c61caa87edb084d5e9c1954e2ed Mon Sep 17 00:00:00 2001
From: Miguel Nobre <mnobre24@gmail.com>
Date: Mon, 15 Dec 2025 13:18:45 -0500
Subject: [PATCH 02/13] added new template for lyric transcription task

---
 .../templates/verify-music-transcriber.html   | 491 ++++++++++++++----
 1 file changed, 387 insertions(+), 104 deletions(-)

diff --git a/assets/templates/verify-music-transcriber.html b/assets/templates/verify-music-transcriber.html
index 61250a69..f145ae82 100644
--- a/assets/templates/verify-music-transcriber.html
+++ b/assets/templates/verify-music-transcriber.html
@@ -6,7 +6,6 @@ <h1 class="title is-3">Effect AI - Lyric Verification</h1>
 
   <div class="mx-auto" style="max-width: 80%">
     <div class="box">
-      <!-- Loading indicator -->
       <div v-if="loading" class="has-text-centered mb-2">
         Loading audio...
         <progress class="progress is-primary" max="100" :value="loadProgress"></progress>
@@ -14,45 +13,112 @@ <h1 class="title is-3">Effect AI - Lyric Verification</h1>
       <div id="waveform" v-show="!loading"></div>
     </div>
 
-    <!-- Playback Info -->
-    <div v-show="!loading" class="my-3">
-      <p>Current Playback: {{ formatTime(currentTime) }}</p>
-    </div>
-
-    <!-- Controls -->
-    <div class="flex items-center justify-between w-full" v-show="!loading">
-      <div class="flex justify-between mb-3">
-        <button @click="playFull" class="button is-primary mx-2">▶ Play / Pause</button>
-        <button @click="stopPlayback" class="button is-light mx-2">⏹ Stop</button>
-      </div>
-
-      <div class="flex items-center">
-        <p class="mb-1">Speed:</p>
-        <button @click="changePlaySpeed(0.75)" class="button mx-1">0.75x</button>
-        <button @click="changePlaySpeed(1)" class="button mx-1">1x</button>
-        <button @click="changePlaySpeed(1.25)" class="button mx-1">1.25x</button>
-      </div>
-    </div>
-
-    <hr v-show="!loading" />
-
-    <!-- All Lyrics Verification List -->
     <div v-show="!loading" class="mt-4">
-      <h2 class="title is-5 mb-3">Full Lyrics Verification</h2>
 
       <div
         v-for="(seg, index) in parsedSegments"
         :key="index"
-        class="p-3 mb-2 has-text-left box"
+        class="p-3 mb-3 has-text-left box"
         :class="{'has-background-link-light': isActiveSegment(seg)}"
-        style="cursor: pointer"
-        @click="jumpTo(seg)"
+        style="cursor: default"
       >
-        <div class="is-flex is-justify-content-space-between is-align-items-center">
-          <p>
-            <strong>{{Number(seg.start).toFixed(2)}} → {{Number(seg.end).toFixed(2)}}</strong>
-          </p>
-          <span v-if="isActiveSegment(seg)" class="tag is-link">Now Playing</span>
+
+        <div class="is-flex is-justify-content-space-between is-align-items-center mb-2" style="gap: 10px;">
+          <div class="is-flex is-align-items-center" style="gap: 8px;">
+            <input
+              type="number"
+              step="0.01"
+              class="input is-small"
+              style="width: 95px"
+              v-model.number="seg.start"
+              @change="onTimestampChange(seg, index)"
+              @dblclick="snapStart(seg)"
+              title="Double click to set start to current playhead"
+            />
+
+            <span>→</span>
+
+            <input
+              type="number"
+              step="0.01"
+              class="input is-small"
+              style="width: 95px"
+              v-model.number="seg.end"
+              @change="onTimestampChange(seg, index)"
+              @dblclick="snapEnd(seg)"
+              title="Double click to set end to current playhead"
+            />
+            
+          <span>
+            Current Playback:
+            {{ formatSecondsMs(
+                seg.currentPlayTime !== undefined
+                ? seg.currentPlayTime
+                : (isActiveSegment(seg) ? currentTime : seg.start)
+            ) }}
+          </span>
+
+          </div>
+
+
+          <div class="is-flex is-align-items-center" style="gap: 8px;">
+
+            <div v-if="isActiveSegment(seg)" class="tag is-link">Now Playing</div>
+
+            <button
+              class="button is-small is-success is-light"
+              @click="playRegion(index)"
+              :title="'Play only this region'"
+            >
+              ▶ Play Region
+            </button>
+
+            <button
+              class="button is-small is-link is-light"
+              @click="playFull"
+              title="Play full song from the current position"
+            >
+              ▶ / ❚❚ Full Song
+            </button>
+
+            <button @click="changePlaySpeed(0.75)" class="button is-small">0.75x</button>
+            <button @click="changePlaySpeed(1)" class="button is-small">1x</button>
+            <button @click="changePlaySpeed(1.25)" class="button is-small">1.25x</button>
+
+          </div>
+        </div>
+
+        <div v-if="seg.warnings && seg.warnings.length" class="mb-2">
+          <div v-for="(w, wi) in seg.warnings" :key="wi" class="notification is-warning is-light py-2">
+            {{ w }}
+          </div>
+        </div>
+
+        <div class="mb-2">
+          <div style="display:flex; align-items:center; gap:8px;">
+            <div style="flex:1; height:8px; background:#eee; border-radius:4px; position:relative; overflow:hidden; cursor:pointer"
+                 @click="seekToSegmentPosition(index, $event)">
+
+              <div 
+                :style="{ width: segmentProgress(seg) + '%', 
+                height: '100%', 
+                position: 'absolute', 
+                left: 0, 
+                top: 0, 
+                background: 'rgba(79,70,229,0.65)' }">
+              </div>
+            </div>
+
+            <div style="min-width:70px; text-align:right; font-size:0.9rem;">
+              <span>
+                {{ formatSecondsMs(
+                    seg.currentPlayTime !== undefined
+                      ? seg.currentPlayTime
+                      : (isActiveSegment(seg) ? currentTime : seg.start)
+                  ) }}
+              </span>
+            </div>
+          </div>
         </div>
 
         <textarea
@@ -64,7 +130,12 @@ <h2 class="title is-5 mb-3">Full Lyrics Verification</h2>
       </div>
     </div>
 
+    <p style="color: red;" :class="{ 'is-hidden mb-3': !hasAnyWarnings() }">
+      Task incomplete - Please resolve all warnings before submitting.
+    </p>
+
     <button
+      v-show="!loading"
       @click.prevent="uploadAndSubmit"
       class="button is-success is-large mt-4"
       :class="{'is-loading': btnLoading}"
@@ -73,11 +144,8 @@ <h2 class="title is-5 mb-3">Full Lyrics Verification</h2>
     </button>
   </div>
 
-  <link
-    rel="stylesheet"
-    href="https://unpkg.com/bulma@0.9.4/css/bulma.min.css"
-  />
-  <link href="https://app.effect.network/force-defaults.css" rel="stylesheet" />
+  <link rel="stylesheet" href="https://unpkg.com/bulma@0.9.4/css/bulma.min.css"/>
+  <link href="https://app.effect.network/force-defaults.css" rel="stylesheet"/>
 
   <script type="module">
     import { createApp } from "https://unpkg.com/vue@3/dist/vue.esm-browser.js";
@@ -87,26 +155,122 @@ <h2 class="title is-5 mb-3">Full Lyrics Verification</h2>
     createApp({
       data() {
         return {
-          title: "Effect AI - Lyric Verification",
           songSource: "${song_url}",
           jobID: "${jobID}",
-        //   rawSegments: "[{\"start\":0,\"end\":6.5,\"lyrics\":\"I'm walking in the rain\"},{\"start\":6.5,\"end\":12.3,\"lyrics\":\"Love is all we need\"},{\"start\":12.3,\"end\":19.3,\"lyrics\":\"Hey there maam\"},{\"start\":19.3,\"end\":25,\"lyrics\":\"Can you feel it\"},{\"start\":25,\"end\":31,\"lyrics\":\"Can you feel the love\"}]",
           rawSegments: "${segments}",
+          title: "Effect AI - Lyric Verification",
           parsedSegments: [],
           wavesurfer: null,
+          regionsPlugin: null,
           currentTime: 0,
           currentSegment: null,
           loadProgress: 0,
           loading: true,
           btnLoading: false,
           playbackRate: 1,
+          playingIndex: null,
+          minSegmentDuration: 0.12,
+          instructions: `
+            <div>
+                <h2>Lyric Timestamp Verification</h2>
+                <p>
+                    In this task, you will listen to a song and verify the timing and text for each lyric segment.
+                    Each line has its own card with start and end times, a mini player, and editable lyrics.
+                    Your goal is to make sure every line starts and ends at the correct moment and the text
+                    accurately matches what the singer says.
+                </p>
+
+                <h3>1. Understanding the Controls</h3>
+                <p>Here is what each button and control does in the interface:</p>
+
+                <h4>Each Lyric Card</h4>
+                <ul>
+                    <li><strong>Start Time:</strong> The moment the singer begins the lyric. You can type or adjust this value.</li>
+                    <li><strong>End Time:</strong> The moment the singer finishes the lyric. Must always be after the start time.</li>
+                    <li><strong>"Play Region" Button:</strong> Plays only this lyric segment for fine tuning. Stops at the end time of the given segment.</li>
+                    <li><strong>"Full Song" Button:</strong> Allows you to play/pause the entire song (not just the region).</li>
+                    <li><strong>Mini Scrubber Bar:</strong> Lets you scrub within just this lyric segment.</li>
+                    <li><strong>Warning Area:</strong> Pop-up warnings will show problems such as overlapping segments or invalid timings.</li>
+                </ul>
+
+                <p>
+                    You cannot submit the task until all warnings are resolved. 
+                    Warnings include end times before start times or overlapping with the next segment.
+                </p>
+
+                <h3>2. Adjusting the Timings</h3>
+                <p>
+                    Listen carefully and make sure each lyric card's start and end times match the actual audio.
+                    Use the mini players to preview just that line. Fix timing issues until all warnings disappear.
+                    Aim for accuracy within about <strong>0.2 seconds</strong> of the given phrase.
+                </p>
+
+                <ul>
+                    <li>Start time should be when the singer begins the line.</li>
+                    <li>End time should be when the singer finishes the line.</li>
+                    <li>End time must always be after the start time.</li>
+                    <li>Segments must not overlap with each other.</li>
+                </ul>
+
+                <h3>3. Correcting the Lyrics</h3>
+                <p>
+                    Edit the lyric text so it matches what the singer actually says. 
+                    Fix spelling mistakes, missing words, or incorrect words. 
+                    Do not add punctuation unless the singer clearly ends a phrase.
+                </p>
+
+                <ul>
+                    <li>Write exactly what you hear, not what you assume.</li>
+                    <li>Keep spelling accurate and clean.</li>
+                    <li>Do not rewrite stylistic pronunciation.</li>
+                    <li>If a word/part of a phrase is unclear, replace that section of the segment with <strong>[Inaudible]</strong></li>
+                </ul>
+
+                <h3>4. What to Avoid</h3>
+                <ul>
+                    <li>Do not allow timing conflicts or overlapping segments.</li>
+                    <li>Do not set end times before start times.</li>
+                    <li>Do not add words that are not sung.</li>
+                    <li>Do not alter the meaning of the lyrics.</li>
+                    <li>Do not add punctuation that is not reflected in the audio.</li>
+                </ul>
+
+                <h3>5. Final Check</h3>
+                <ul>
+                    <li>Make sure every segment has accurate timing.</li>
+                    <li>Ensure all warnings have been cleared.</li>
+                    <li>Confirm all lyrics are correctly written.</li>
+                    <li>Use the mini players to double check your adjustments.</li>
+                </ul>
+
+                <h3>6. Submitting Your Work</h3>
+                <p>
+                    When all segments are correct and no warnings remain, the Submit button will become available. 
+                    Submit the task to complete it.
+                </p>
+            </div>
+            `
+
         };
       },
+
       mounted() {
-        this.parsedSegments = JSON.parse(this.rawSegments);
-        console.log("Parsed segments:", this.parsedSegments);
-        console.log("First segment:", this.parsedSegments[0]);
-        const regions = RegionsPlugin.create();
+
+        window.top.postMessage(
+          {
+            type: 'task-instructions',
+            instructions: this.instructions
+          },
+        "*"
+        );
+
+        this.parsedSegments = JSON.parse(this.rawSegments).map((s) => ({
+          ...s,
+          warnings: [],
+          currentPlayTime: undefined
+        }));
+
+        this.regionsPlugin = RegionsPlugin.create();
 
         this.wavesurfer = WaveSurfer.create({
           container: "#waveform",
@@ -114,98 +278,217 @@ <h2 class="title is-5 mb-3">Full Lyrics Verification</h2>
           progressColor: "#4f46e5",
           height: 100,
           url: this.songSource,
-          plugins: [regions],
+          plugins: [this.regionsPlugin]
         });
 
-        this.wavesurfer.on("loading", (percent) => (this.loadProgress = percent));
+        this.wavesurfer.on("loading", (p) => (this.loadProgress = p));
         this.wavesurfer.on("ready", () => {
           this.loading = false;
-
-          // Add regions for each SRT section
-          this.parsedSegments.forEach((seg, i) => {
-            regions.addRegion({
-              id: "seg-" + i,
-              start: seg.start,
-              end: seg.end,
-              color: "rgba(79, 70, 229, 0.15)",
-              drag: false,
-              resize: false,
-            });
-          });
+          this.refreshRegions();
         });
 
-        // Track playback to highlight active lyric section
         this.wavesurfer.on("audioprocess", (time) => {
           this.currentTime = time;
-          const active = this.parsedSegments.find(
-            (seg) => time >= seg.start && time <= seg.end
-          );
-          if (active) this.currentSegment = active;
-          else this.currentSegment = null;
+
+          const active = this.parsedSegments.find((seg) => time >= seg.start && time <= seg.end) || null;
+          this.currentSegment = active;
+
+          this.parsedSegments.forEach((seg) => {
+            if (time >= seg.start && time <= seg.end) seg.currentPlayTime = time;
+            else seg.currentPlayTime = undefined;
+          });
+
+          if (this.playingIndex !== null) {
+            const seg = this.parsedSegments[this.playingIndex];
+            if (seg && time >= seg.end) {
+              this.wavesurfer.pause();
+              this.playingIndex = null;
+            }
+          }
+        });
+
+        this.wavesurfer.on("finish", () => {
+          this.currentTime = this.wavesurfer.getDuration();
+          this.playingIndex = null;
         });
       },
+
       methods: {
+        hasAnyWarnings() {
+          return this.parsedSegments.some(seg => seg.warnings && seg.warnings.length > 0);
+        },
+
         playFull() {
           if (this.wavesurfer) this.wavesurfer.playPause();
         },
+
         stopPlayback() {
           if (this.wavesurfer) {
             this.wavesurfer.pause();
             this.wavesurfer.seekTo(0);
+            this.playingIndex = null;
           }
         },
+
         changePlaySpeed(rate) {
           this.playbackRate = rate;
-          this.wavesurfer.setPlaybackRate(rate, true);
+          if (this.wavesurfer) this.wavesurfer.setPlaybackRate(rate, true);
         },
-        jumpTo(seg) {
-          if (this.wavesurfer) {
-            const position = seg.start / this.wavesurfer.getDuration();
-            this.wavesurfer.seekTo(position);
-            this.wavesurfer.play();
+
+        playRegion(index) {
+          const seg = this.parsedSegments[index];
+          if (!seg || !this.wavesurfer) return;
+
+          const pct = seg.start / this.wavesurfer.getDuration();
+          this.wavesurfer.seekTo(pct);
+          this.playingIndex = index;
+          this.wavesurfer.play();
+        },
+
+        seekToSegmentPosition(index, event) {
+          const seg = this.parsedSegments[index];
+          if (!seg || !this.wavesurfer) return;
+
+          const rect = event.currentTarget.getBoundingClientRect();
+          const pct = Math.max(0, Math.min(1, (event.clientX - rect.left) / rect.width));
+
+          const targetTime = seg.start + pct * Math.max(this.minSegmentDuration, seg.end - seg.start);
+          this.wavesurfer.seekTo(targetTime / this.wavesurfer.getDuration());
+          this.playingIndex = null;
+        },
+
+        segmentProgress(seg) {
+          const segDuration = Math.max(this.minSegmentDuration, seg.end - seg.start);
+          const t = seg.currentPlayTime !== undefined ? seg.currentPlayTime :
+            (this.isActiveSegment(seg) ? this.currentTime : seg.start);
+          const clamped = Math.max(seg.start, Math.min(seg.end, t));
+          return ((clamped - seg.start) / segDuration) * 100;
+        },
+
+        onTimestampChange(seg, index) {
+          seg.start = Number(Number(seg.start).toFixed(2));
+          seg.end = Number(Number(seg.end).toFixed(2));
+
+          const dur = this.wavesurfer ? this.wavesurfer.getDuration() : Infinity;
+
+          seg.warnings = [];
+
+          if (seg.start < 0) seg.start = 0;
+          if (seg.end > dur) seg.end = Number(dur.toFixed(2));
+
+          if (seg.end <= seg.start) {
+            seg.warnings.push("End time must be after start.");
           }
+
+          this.checkOverlaps();
+          this.refreshRegions();
         },
-        formatTime(seconds) {
-          console.log(seconds)
-          if (!seconds && seconds !== 0) return "--:--";
-          const m = Math.floor(seconds / 60);
-          const s = Math.floor(seconds % 60)
-            .toString()
-            .padStart(2, "0");
-          return `${m}:${s}`;
+
+        checkOverlaps() {
+          this.parsedSegments.forEach((s) => {
+            s.warnings = s.warnings.filter(w => !w.includes("Overlap"));
+          });
+
+          for (let i = 0; i < this.parsedSegments.length; i++) {
+            const s = this.parsedSegments[i];
+            const prev = this.parsedSegments[i - 1];
+            const next = this.parsedSegments[i + 1];
+
+            if (prev && s.start < prev.end) {
+              s.warnings.push("Overlap detected with previous segment.");
+            }
+            if (next && s.end > next.start) {
+              s.warnings.push("Overlap detected with next segment.");
+            }
+          }
         },
-        isActiveSegment(seg) {
-          return this.currentSegment === seg;
+
+
+        refreshRegions() {
+          if (!this.regionsPlugin || !this.wavesurfer) return;
+          const regions = this.wavesurfer.getActivePlugins().regions;
+          regions.clearRegions();
+
+          this.parsedSegments.forEach((seg, i) => {
+            regions.addRegion({
+              id: "seg-" + i,
+              start: Number(seg.start),
+              end: Number(seg.end),
+              color: "rgba(79, 70, 229, 0.12)",
+              drag: false,
+              resize: false
+            });
+          });
         },
+
+        snapStart(seg) {
+          seg.start = Number(this.currentTime.toFixed(2));
+          if (seg.end <= seg.start) seg.end = Number((seg.start + this.minSegmentDuration).toFixed(2));
+          this.checkOverlaps();
+          this.refreshRegions();
+        },
+
+        snapEnd(seg) {
+          seg.end = Number(this.currentTime.toFixed(2));
+          if (seg.end <= seg.start)
+            seg.end = Number((seg.start + this.minSegmentDuration).toFixed(2));
+          this.checkOverlaps();
+          this.refreshRegions();
+        },
+
         async uploadAndSubmit() {
+
+          if (this.hasAnyWarnings()) {
+            return;
+          }
+
           this.btnLoading = true;
+
           try {
-            const verifiedSegments = this.parsedSegments.map((seg) => ({
-              start: seg.start,
-              end: seg.end,
-              lyrics: seg.lyrics.trim(),
-            }));
-
-            parent.postMessage(
-              {
-                task: "submit",
-                values: {
-                  taskTitle: this.title,
-                  answer: {
-                    jobID: this.jobID,
-                    song: this.songSource,
-                    verifiedLyrics: verifiedSegments,
-                  },
-                },
-              },
-              "*"
-            );
-          } catch (err) {
-            console.error("Submit failed", err);
+            const dur = this.wavesurfer ? this.wavesurfer.getDuration() : Infinity;
+
+            const verifiedSegments = this.parsedSegments.map((seg) => {
+              return {
+                start: Number(seg.start.toFixed(2)),
+                end: Number(
+                  Math.min(seg.end, dur).toFixed(2)
+                ),
+                lyrics: (seg.lyrics || "").trim()
+              };
+            });
+
+            parent.postMessage({
+              task: "submit",
+              values: {
+                taskTitle: this.title,
+                answer: {
+                  jobID: this.jobID,
+                  song: this.songSource,
+                  verifiedLyrics: verifiedSegments
+                }
+              }
+            }, "*");
+
+          } finally {
+            this.btnLoading = false;
           }
-          this.btnLoading = false;
         },
-      },
+
+        formatTime(seconds) {
+          if (seconds === undefined || seconds === null || isNaN(seconds)) return "--:--";
+          const m = Math.floor(seconds / 60);
+          const s = Math.floor(seconds % 60).toString().padStart(2, "0");
+          return `${m}:${s}`;
+        },
+        formatSecondsMs(seconds) {
+          if (seconds === undefined || seconds === null || isNaN(seconds)) return "--.--";
+          return seconds.toFixed(2); // exactly ss.ms
+        },
+
+        isActiveSegment(seg) {
+          return this.currentSegment === seg;
+        }
+      }
     }).mount("#app");
   </script>
 </div>

From 9cb7f5f9f987e6aeb9b57ae3267ef1d6147f74f6 Mon Sep 17 00:00:00 2001
From: Miguel Nobre <mnobre24@gmail.com>
Date: Sun, 28 Dec 2025 23:34:30 -0500
Subject: [PATCH 03/13] phase 5 template changes + additions

---
 .../music-transcriber-DEPRECATED.html}        |   0
 .../templates/{ => Audius}/track-tagger.html  |   0
 .../verify-music-transcriber.html             | 137 +++++----
 .../record-sentence-azure.html                | 256 ++++++++++++++++
 .../verify-recording-azure.html               | 275 ++++++++++++++++++
 .../animal-attributes.html                    |   0
 .../bayc-metadata-2.html                      |   0
 .../bayc-metadata.html                        |   0
 .../count-animals.html                        |   0
 assets/templates/{ => Misc}/halloween.html    |   0
 .../{ => Misc}/text-highlighting.html         |   0
 .../sentence-creation/record-sentence.html}   |  75 ++++-
 .../sentence-creation}/sentence-creation.html |  53 ++--
 .../verify-sentence-recording.html}           |   6 +-
 .../sentence-creation}/verify-sentence.html   |  34 +--
 .../question-creation.html                    | 210 +++++++++++++
 .../record-question.html                      | 235 +++++++++++++++
 .../verify-question-recording.html            | 254 ++++++++++++++++
 .../verify-question.html                      | 162 +++++++++++
 assets/templates/question-creation.html       | 120 --------
 20 files changed, 1575 insertions(+), 242 deletions(-)
 rename assets/templates/{music-transcriber.html => Audius/music-transcriber-DEPRECATED.html} (100%)
 rename assets/templates/{ => Audius}/track-tagger.html (100%)
 rename assets/templates/{ => Audius}/verify-music-transcriber.html (85%)
 create mode 100644 assets/templates/Azure Cognitive Speech/record-sentence-azure.html
 create mode 100644 assets/templates/Azure Cognitive Speech/verify-recording-azure.html
 rename assets/templates/{ => Image Classification}/animal-attributes.html (100%)
 rename assets/templates/{ => Image Classification}/bayc-metadata-2.html (100%)
 rename assets/templates/{ => Image Classification}/bayc-metadata.html (100%)
 rename assets/templates/{ => Image Classification}/count-animals.html (100%)
 rename assets/templates/{ => Misc}/halloween.html (100%)
 rename assets/templates/{ => Misc}/text-highlighting.html (100%)
 rename assets/templates/{record.html => Mozilla/sentence-creation/record-sentence.html} (61%)
 rename assets/templates/{ => Mozilla/sentence-creation}/sentence-creation.html (76%)
 rename assets/templates/{verify-recording.html => Mozilla/sentence-creation/verify-sentence-recording.html} (95%)
 rename assets/templates/{ => Mozilla/sentence-creation}/verify-sentence.html (72%)
 create mode 100644 assets/templates/Mozilla/spontaneous-questions/question-creation.html
 create mode 100644 assets/templates/Mozilla/spontaneous-questions/record-question.html
 create mode 100644 assets/templates/Mozilla/spontaneous-questions/verify-question-recording.html
 create mode 100644 assets/templates/Mozilla/spontaneous-questions/verify-question.html
 delete mode 100644 assets/templates/question-creation.html

diff --git a/assets/templates/music-transcriber.html b/assets/templates/Audius/music-transcriber-DEPRECATED.html
similarity index 100%
rename from assets/templates/music-transcriber.html
rename to assets/templates/Audius/music-transcriber-DEPRECATED.html
diff --git a/assets/templates/track-tagger.html b/assets/templates/Audius/track-tagger.html
similarity index 100%
rename from assets/templates/track-tagger.html
rename to assets/templates/Audius/track-tagger.html
diff --git a/assets/templates/verify-music-transcriber.html b/assets/templates/Audius/verify-music-transcriber.html
similarity index 85%
rename from assets/templates/verify-music-transcriber.html
rename to assets/templates/Audius/verify-music-transcriber.html
index f145ae82..5e59697b 100644
--- a/assets/templates/verify-music-transcriber.html
+++ b/assets/templates/Audius/verify-music-transcriber.html
@@ -1,3 +1,20 @@
+<link rel="stylesheet" href="https://unpkg.com/bulma@0.9.4/css/bulma.min.css"/>
+<link href="https://app.effect.network/force-defaults.css" rel="stylesheet"/>
+
+<style> 
+  @media (max-width: 1080px) {
+    .mobile-card {
+      flex-direction: column-reverse !important;
+    }
+  }
+
+  @media (max-width: 700px) {
+    .mobile-card2 {
+      flex-direction: column-reverse !important;
+    }
+  }
+</style>
+
 <div id="app" style="text-align: center">
   <h1 class="title is-3">Effect AI - Lyric Verification</h1>
   <p class="subtitle is-6">Listen to the full song and verify all transcribed lyrics</p>
@@ -23,67 +40,74 @@ <h1 class="title is-3">Effect AI - Lyric Verification</h1>
         style="cursor: default"
       >
 
-        <div class="is-flex is-justify-content-space-between is-align-items-center mb-2" style="gap: 10px;">
-          <div class="is-flex is-align-items-center" style="gap: 8px;">
-            <input
-              type="number"
-              step="0.01"
-              class="input is-small"
-              style="width: 95px"
-              v-model.number="seg.start"
-              @change="onTimestampChange(seg, index)"
-              @dblclick="snapStart(seg)"
-              title="Double click to set start to current playhead"
-            />
-
-            <span>→</span>
-
-            <input
-              type="number"
-              step="0.01"
-              class="input is-small"
-              style="width: 95px"
-              v-model.number="seg.end"
-              @change="onTimestampChange(seg, index)"
-              @dblclick="snapEnd(seg)"
-              title="Double click to set end to current playhead"
-            />
-            
-          <span>
-            Current Playback:
-            {{ formatSecondsMs(
-                seg.currentPlayTime !== undefined
-                ? seg.currentPlayTime
-                : (isActiveSegment(seg) ? currentTime : seg.start)
-            ) }}
-          </span>
+        <div class="mobile-card is-flex is-justify-content-space-between is-align-items-center mb-2" style="gap: 30px;">
+          <div class="mobile-card2 is-flex is-align-items-center" style="gap: 8px;">
+            <div>
+              <input
+                type="number"
+                step="0.01"
+                class="input is-small"
+                style="width: 95px"
+                v-model.number="seg.start"
+                @change="onTimestampChange(seg, index)"
+                @dblclick="snapStart(seg)"
+                title="Double click to set start to current playhead"
+              />
+
+              <span class="mx-1">→</span>
+
+              <input
+                type="number"
+                step="0.01"
+                class="input is-small"
+                style="width: 95px"
+                v-model.number="seg.end"
+                @change="onTimestampChange(seg, index)"
+                @dblclick="snapEnd(seg)"
+                title="Double click to set end to current playhead"
+              />
+            </div>
+
+            <span>
+              Current Playback:
+              {{ formatSecondsMs(
+                  seg.currentPlayTime !== undefined
+                  ? seg.currentPlayTime
+                  : (isActiveSegment(seg) ? currentTime : seg.start)
+              ) }}
+            </span>
 
           </div>
 
 
-          <div class="is-flex is-align-items-center" style="gap: 8px;">
+          <div class="mobile-card2 is-flex is-align-items-center" style="gap: 8px;">
 
             <div v-if="isActiveSegment(seg)" class="tag is-link">Now Playing</div>
 
-            <button
-              class="button is-small is-success is-light"
-              @click="playRegion(index)"
-              :title="'Play only this region'"
-            >
-              ▶ Play Region
-            </button>
-
-            <button
-              class="button is-small is-link is-light"
-              @click="playFull"
-              title="Play full song from the current position"
-            >
-              ▶ / ❚❚ Full Song
-            </button>
-
-            <button @click="changePlaySpeed(0.75)" class="button is-small">0.75x</button>
-            <button @click="changePlaySpeed(1)" class="button is-small">1x</button>
-            <button @click="changePlaySpeed(1.25)" class="button is-small">1.25x</button>
+            <div class="is-flex">
+              <button
+                class="button is-small is-success is-light mx-1"
+                @click="playRegion(index)"
+                :title="'Play only this region'"
+              >
+                ▶ Play Region
+              </button>
+
+              <button
+                class="button is-small is-link is-light mx-1"
+                @click="playFull"
+                title="Play full song from the current position"
+              >
+                ▶ / ❚❚ Full Song
+              </button>
+            </div>
+
+            <div>
+              <button @click="changePlaySpeed(0.75)" class="button is-small mx-1">0.75x</button>
+              <button @click="changePlaySpeed(1)" class="button is-small mx-1">1x</button>
+              <button @click="changePlaySpeed(1.25)" class="button is-small mx-1">1.25x</button>
+            </div>
+            
 
           </div>
         </div>
@@ -144,8 +168,9 @@ <h1 class="title is-3">Effect AI - Lyric Verification</h1>
     </button>
   </div>
 
-  <link rel="stylesheet" href="https://unpkg.com/bulma@0.9.4/css/bulma.min.css"/>
-  <link href="https://app.effect.network/force-defaults.css" rel="stylesheet"/>
+
+
+
 
   <script type="module">
     import { createApp } from "https://unpkg.com/vue@3/dist/vue.esm-browser.js";
diff --git a/assets/templates/Azure Cognitive Speech/record-sentence-azure.html b/assets/templates/Azure Cognitive Speech/record-sentence-azure.html
new file mode 100644
index 00000000..4061d4ff
--- /dev/null
+++ b/assets/templates/Azure Cognitive Speech/record-sentence-azure.html	
@@ -0,0 +1,256 @@
+<div id="app" style="text-align: center">
+  <h1>Azure Cognitive Speech - Sentence Reader</h1>
+  <hr />
+
+  <div class="mx-auto" style="max-width: 80%">
+    <p class="mb-5">Click <b>Record</b> then read the sentence aloud</p>
+
+    <div class="box">
+      <p class="is-size-4 has-text-weight-semibold" v-cloak>{{ sentence }}</p>
+    </div>
+
+    <!-- WaveSurfer container -->
+    <div id="waveform" class="mb-4"></div>
+
+    <div class="container mb-5">
+      <button v-if="!isRecording" @click.prevent="startRecording" class="button is-medium mx-2">Record</button>
+      <button v-else @click.prevent="stopRecording" class="button is-danger is-medium mx-2">Stop</button>
+      <button v-if="audioUrl" @click.prevent="playRecorded" class="button is-link is-medium mx-2">Replay</button>
+    </div>
+
+    <p class="is-size-7 mb-2">
+      By clicking this button, you accept that the sentence contributed here will be added to a publicly available cc-0 licensed dataset.
+    </p>
+
+    <p style="color: red;" :class="{'is-hidden mb-3': !notComplete}">
+      Task incomplete - Please complete all sections of the task
+    </p>
+
+    <p style="color: red;" :class="{'is-hidden mb-3': !fileTooBig}">
+      File size too large. Please stop recording once you've finished reading the sentence.
+    </p>
+
+    <button @click.prevent="uploadAndSubmit" class="button is-success is-large" :class="{'is-loading': btnLoading}">
+      Submit
+    </button>
+  </div>
+</div>
+
+<link rel="stylesheet" href="https://unpkg.com/bulma@0.9.4/css/bulma.min.css" />
+
+<script type="module">
+  
+import { createApp } from "https://unpkg.com/vue@3/dist/vue.esm-browser.js";
+import WaveSurfer from "https://unpkg.com/wavesurfer.js@7/dist/wavesurfer.esm.js";
+import RecordPlugin from "https://unpkg.com/wavesurfer.js@7/dist/plugins/record.esm.js";
+
+createApp({
+  data() {
+    return {
+      title: "Azure Cognitive Speech - Sentence Reader",
+      sentence: "${sentence}",
+      sentence_type: "${sentence_type}",
+      language: "${language}",
+      wavesurfer: null,
+      recordPlugin: null,
+      isRecording: false,
+      audioBlob: null,
+      audioUrl: "",
+      ipfsCID: "",
+      ipfsHOST: "ipfs.effect.ai",
+      notComplete: false,
+      btnLoading: false,
+      fileTooBig: false,
+      instructions: `
+        <div>
+          <h2>Record a Sentence</h2>
+          <p>
+            In this task, you will record yourself reading a single sentence shown on the screen.
+            The goal is to collect clear, natural speech that accurately reflects the written text
+            and can be used to train and evaluate speech models.
+          </p>
+
+          <h3>1. Instructions</h3>
+          <p>
+            Your job is to read the sentence out loud exactly as it appears. These recordings will
+            be used in a speech dataset, so accuracy, clarity, and consistency are important.
+          </p>
+
+          <h4>Recording Guidelines</h4>
+          <ul>
+            <li>Read the sentence exactly as written, word for word.</li>
+            <li><strong>DO NOT</strong> leave long pauses between the beginning and end of the sentence.</li>
+            <li><strong>DO NOT</strong> add, remove, or change any words.</li>
+            <li>Speak clearly at a natural, conversational pace.</li>
+            <li>Use normal intonation as if you were speaking to another person.</li>
+            <li>Record in a quiet environment when possible.</li>
+            <li>Keep the recording under 15 seconds. Most sentences should take under 10 seconds.</li>
+          </ul>
+
+          <h4>Abbreviations and Spelled Letters</h4>
+          <ul>
+            <li>
+              If the sentence contains letters separated by spaces, say each letter out loud.
+            </li>
+            <li>
+              Example: “N Y C” should be spoken as “N” “Y” “C”.
+            </li>
+            <li>
+              Do not turn letter sequences into a word unless the sentence clearly spells a word
+              letter by letter.
+            </li>
+          </ul>
+
+          <h4>What NOT to Do</h4>
+          <ul>
+            <li>Do not paraphrase or correct the sentence.</li>
+            <li>Do not repeat the sentence unless asked to.</li>
+            <li>Do not add commentary, filler words, or extra sounds.</li>
+            <li>Do not whisper, shout, or speak unnaturally.</li>
+            <li>Do not record with loud background speech, music, or television.</li>
+          </ul>
+
+          <h3>2. Examples</h3>
+
+          <p><strong>✅ Good Recordings</strong></p>
+          <ul>
+            <li>Clear voice, steady pace, no background speech.</li>
+            <li>All words and letters spoken exactly as shown.</li>
+            <li>Natural pronunciation and rhythm.</li>
+          </ul>
+
+          <p><strong>❌ Bad Recordings</strong></p>
+          <ul>
+            <li>Skipping words or changing phrasing.</li>
+            <li>Reading abbreviations as a word instead of individual letters.</li>
+            <li>Audio that is too quiet, distorted, or clipped.</li>
+            <li>Background voices that interfere with the sentence.</li>
+          </ul>
+
+          <h3>3. Tips for Success</h3>
+          <ul>
+            <li>Read the sentence silently once before recording.</li>
+            <li>Take a short breath before you start speaking.</li>
+            <li>If you make a mistake, re record the sentence.</li>
+            <li>Focus on accuracy over speed.</li>
+          </ul>
+
+          <p>
+            When you are satisfied with your recording, submit it and move on to the next task.
+            Thank you for contributing to this speech dataset.
+          </p>
+        </div>
+        `
+    };
+  },  
+  mounted() {
+
+    window.top.postMessage({ type: "task-instructions", instructions: this.instructions }, "*");
+
+    this.recordPlugin = RecordPlugin.create();
+
+    this.wavesurfer = WaveSurfer.create({
+      container: "#waveform",
+      waveColor: "#ddd",
+      progressColor: "#0000FF",
+      cursorWidth: 0,
+      height: 100,
+      interact: false,
+      plugins: [this.recordPlugin],
+    });
+
+    this.recordPlugin.on("record-start", () => {
+      this.isRecording = true;
+      this.audioBlob = null;
+      this.audioUrl = "";
+    });
+
+    this.recordPlugin.on("record-end", (blob) => {
+      this.audioBlob = blob;
+      this.audioUrl = URL.createObjectURL(blob);
+      this.wavesurfer.load(this.audioUrl);
+      this.isRecording = false;
+    });
+
+  },
+  methods: {
+    checkSize(){
+      const file = new File([this.audioBlob], "recording.wav", { type: "audio/wav" });
+      const fileSize = (file.size / 1024).toFixed(2);
+
+      if (fileSize > 200){
+        this.fileTooBig = true
+      }
+      else
+        this.fileTooBig = false
+    },
+    async startRecording() {
+      try {
+        await this.recordPlugin.startRecording();
+      } catch (err) {
+        console.error("startRecording failed:", err);
+        this.isRecording = false;
+      }
+    },
+
+    stopRecording() {
+      try {
+        this.recordPlugin.stopRecording();
+      } catch (err) {
+        console.error("stopRecording failed:", err);
+      }
+    },
+
+    playRecorded() {
+      if (!this.audioUrl) return;
+      this.wavesurfer.playPause();
+    },
+
+    async uploadAndSubmit() {
+      this.btnLoading = true;
+      if (!this.audioBlob) {
+        this.notComplete = true;
+        this.btnLoading = false;
+        return;
+      }
+
+      this.checkSize()
+      if (this.fileTooBig) {
+        this.btnLoading = false;
+        return;
+      }
+
+      try{
+        const file = new File([this.audioBlob], "recording.wav", { type: "audio/wav" });
+        const formData = new FormData();
+        formData.append("path", file);
+
+        // Replace IPFS upload endpoint
+        const response = await fetch("https://" + this.ipfsHOST + "/api/v0/add?pin=true", {
+          method: "POST",
+          body: formData,
+        });
+
+        if (!response.ok) throw new Error("Upload failed");
+        const result = await response.json();
+        this.ipfsCID = result.Hash || result.cid || result.id;
+        parent.postMessage({
+          task: "submit",
+          values: {
+            taskTitle: this.title,
+            sentence: this.sentence,
+            sentence_type: this.sentence_type,
+            language: this.language,
+            recording: "https://" + this.ipfsHOST + "/ipfs/" + this.ipfsCID
+          }
+        }, "*");
+      } catch (err) {
+        console.error("Failed to upload", err);
+      } finally {
+        this.btnLoading = false;
+      }
+    }
+  }
+}).mount("#app");
+</script>
+
diff --git a/assets/templates/Azure Cognitive Speech/verify-recording-azure.html b/assets/templates/Azure Cognitive Speech/verify-recording-azure.html
new file mode 100644
index 00000000..7eb0dfdf
--- /dev/null
+++ b/assets/templates/Azure Cognitive Speech/verify-recording-azure.html	
@@ -0,0 +1,275 @@
+<div id="app" style="text-align: center">
+  <h1>Azure Cognitive Speech - Recording Verification</h1>
+
+  <hr />
+
+  <div class="mx-auto" style="max-width: 80%">
+    <div class="box">
+      <p class="is-size-4 has-text-weight-semibold">{{ sentence }}</p>
+    </div>
+
+    <div class="mb-4">
+      <audio :src="recordingUrl" controls controlslist="nodownload" style="width: 25%;"></audio>
+    </div>
+
+    <hr />
+
+    <div class="mx-auto" style="text-align: center; max-width: 50%">
+      <h2 class="is-size-4 has-text-weight-semibold mb-5">Recording Metadata</h2>
+
+      <div v-for="field in metadataFields" :key="field.label" class="field mb-6">
+        <label class="label">{{ field.label }}</label>
+        <div class="buttons is-centered">
+          <button
+            v-for="option in field.options"
+            :key="option.value"
+            class="button"
+            :class="{ 'is-primary': field.model === option.value }"
+            @click="setFieldValue(field, option.value)"
+          >
+            {{ option.text }}
+          </button>
+        </div>
+      </div>
+    </div>
+
+    <p style="color: red;" v-if="isIncomplete">
+      Task incomplete - Please complete all sections of the task
+    </p>
+
+    <button
+      @click.prevent="uploadAndSubmit"
+      class="button is-success is-large"
+      :class="{ 'is-loading': btnLoading }"
+    >
+      Submit
+    </button>
+  </div>
+</div>
+
+<link rel="stylesheet" href="https://unpkg.com/bulma@0.9.4/css/bulma.min.css" />
+
+<script type="module">
+import { createApp, reactive } from "https://unpkg.com/vue@3/dist/vue.esm-browser.js";
+
+createApp({
+  data() {
+    const metadata = reactive({
+      voiceGender: "",
+      voiceClarity: "",
+      backgroundNoise: "",
+      speakingPace: "",
+      accent: "",
+      audioQuality: ""
+    });
+
+    return {
+      title: "Azure Cognitive Speech - Recording Metadata",
+      btnLoading: false,
+      author: "${submissionByPeer}",
+      sentence_type: JSON.parse("${result}").values.sentence_type,
+      language: JSON.parse("${result}").values.language,
+      sentence: JSON.parse("${result}").values.sentence,
+      recordingUrl: JSON.parse("${result}").values.recording,
+      isValidated: "",
+      metadata,
+      metadataFields: [
+        {
+          label: 'Does the recording clearly and correctly answer the question?',
+          key: 'isValidated',
+          model: "",
+          options: [
+            { text: 'Yes', value: 'Yes' },
+            { text: 'No', value: 'No' }
+          ]
+        },
+        {
+          label: 'Perceived voice gender',
+          key: 'voiceGender',
+          model: "",
+          options: [
+            { text: 'Male', value: 'male' },
+            { text: 'Female', value: 'female' },
+            { text: 'Cannot determine', value: 'unknown' }
+          ]
+        },
+        {
+          label: 'Is the voice clear and intelligible?',
+          key: 'voiceClarity',
+          model: "",
+          options: [
+            { text: 'Clear', value: 'clear' },
+            { text: 'Mostly clear', value: 'mostly_clear' },
+            { text: 'Unclear', value: 'unclear' }
+          ]
+        },
+        {
+          label: 'Background noise level',
+          key: 'backgroundNoise',
+          model: "",
+          options: [
+            { text: 'None', value: 'none' },
+            { text: 'Low', value: 'low' },
+            { text: 'Moderate', value: 'moderate' },
+            { text: 'High', value: 'high' }
+          ]
+        },
+        {
+          label: 'Speaking pace',
+          key: 'speakingPace',
+          model: "",
+          options: [
+            { text: 'Slow', value: 'slow' },
+            { text: 'Normal', value: 'normal' },
+            { text: 'Fast', value: 'fast' }
+          ]
+        },
+        {
+          label: 'Noticeable accent',
+          key: 'accent',
+          model: "",
+          options: [
+            { text: 'None', value: 'none' },
+            { text: 'Mild', value: 'mild' },
+            { text: 'Strong', value: 'strong' }
+          ]
+        },
+        {
+          label: 'Overall audio quality',
+          key: 'audioQuality',
+          model: "",
+          options: [
+            { text: 'Good', value: 'good' },
+            { text: 'Acceptable', value: 'acceptable' },
+            { text: 'Poor', value: 'poor' }
+          ]
+        }
+      ],
+      instructions: `
+        <div>
+          <h2>Verify + Add Metadata to a Recording</h2>
+          <p>
+            In this task, you will listen to a recorded sentence and verify that it matches the text shown on the screen.
+            Your feedback ensures that the speech dataset remains accurate, clear, and high quality.
+          </p>
+
+          <h3>1. Instructions</h3>
+          <p>
+            Your job is to carefully listen to the recording and determine whether it accurately represents the written sentence.
+            You will also assess audio quality and other aspects of the recording.
+          </p>
+
+          <h4>Verification Guidelines</h4>
+          <ul>
+            <li>The recording should match the sentence exactly, word for word.</li>
+            <li>Abbreviations and letter sequences must be read as shown (e.g., “N Y C” should be spoken “N” “Y” “C”).</li>
+            <li>Check that the voice is clear and intelligible.</li>
+            <li>Ensure there is minimal background noise that interferes with understanding.</li>
+            <li>Confirm that the speaker's pace is natural and consistent.</li>
+          </ul>
+
+          <h4>What to Look For</h4>
+          <ul>
+            <li>Correct pronunciation of all words and letters.</li>
+            <li>No missing words, repetitions, or added words.</li>
+            <li>Audio is free from clipping, distortion, or excessive noise.</li>
+            <li>Speaker's accent should be noted if it makes the sentence difficult to understand.</li>
+          </ul>
+
+          <h4>What NOT to Do</h4>
+          <ul>
+            <li>Do not assume words are correct if they are mispronounced.</li>
+            <li>Do not ignore background noise or poor audio quality.</li>
+            <li>Do not provide subjective opinions unrelated to the recording quality.</li>
+          </ul>
+
+          <h3>2. Examples</h3>
+
+          <p><strong>✅ Good Recordings</strong></p>
+          <ul>
+            <li>Every word matches the sentence exactly.</li>
+            <li>Voice is clear, natural, and easy to understand.</li>
+            <li>Minimal background noise, good audio quality.</li>
+          </ul>
+
+          <p><strong>❌ Bad Recordings</strong></p>
+          <ul>
+            <li>Words are skipped, added, or changed.</li>
+            <li>Abbreviations read incorrectly.</li>
+            <li>Recording is noisy, distorted, or hard to understand.</li>
+            <li>Pace is too fast or unnatural.</li>
+          </ul>
+
+          <h3>3. Tips for Success</h3>
+          <ul>
+            <li>Listen to the full recording before making a decision.</li>
+            <li>Pay close attention to letter sequences and abbreviations.</li>
+            <li>Use headphones for better audio clarity when possible.</li>
+            <li>If unsure, “Report and Skip” the recording to avoid mistakes.</li>
+            <li>Check all required metadata fields before submitting.</li>
+          </ul>
+
+          <p>
+            Your verification helps ensure the dataset is high quality and useful for training accurate AI models.
+          </p>
+        </div>
+        `
+    };
+  },
+  computed: {
+    isIncomplete() {
+      return (
+        this.isValidated === "" ||
+        Object.values(this.metadata).some(value => value === "")
+      );
+    }
+  },
+  mounted() {
+      window.top.postMessage(
+        {
+          type: "task-instructions",
+          instructions: this.instructions,
+        },
+        "*"
+      );
+    },
+  methods: {
+    setFieldValue(field, value) {
+      if (field.key === "isValidated") {
+        this.isValidated = value;
+      } else {
+        this.metadata[field.key] = value;
+      }
+      field.model = value;
+    },
+    uploadAndSubmit() {
+      this.btnLoading = true;
+      if (this.isIncomplete) {
+        this.btnLoading = false;
+        return;
+      }
+      try {
+        parent.postMessage(
+          {
+            task: "submit",
+            values: {
+              taskTitle: this.title,
+              author: this.author,
+              sentence: this.sentence,
+              sentence_type: this.sentence_type,
+              language: this.language,
+              recording: this.recordingUrl,
+              metadata: { ...this.metadata },
+              isValidated: this.isValidated,
+            },
+          },
+          "*"
+        );
+      } catch (error) {
+        console.error("Failed to submit", error);
+      }
+      this.btnLoading = false;
+    }
+  }
+}).mount("#app");
+</script>
diff --git a/assets/templates/animal-attributes.html b/assets/templates/Image Classification/animal-attributes.html
similarity index 100%
rename from assets/templates/animal-attributes.html
rename to assets/templates/Image Classification/animal-attributes.html
diff --git a/assets/templates/bayc-metadata-2.html b/assets/templates/Image Classification/bayc-metadata-2.html
similarity index 100%
rename from assets/templates/bayc-metadata-2.html
rename to assets/templates/Image Classification/bayc-metadata-2.html
diff --git a/assets/templates/bayc-metadata.html b/assets/templates/Image Classification/bayc-metadata.html
similarity index 100%
rename from assets/templates/bayc-metadata.html
rename to assets/templates/Image Classification/bayc-metadata.html
diff --git a/assets/templates/count-animals.html b/assets/templates/Image Classification/count-animals.html
similarity index 100%
rename from assets/templates/count-animals.html
rename to assets/templates/Image Classification/count-animals.html
diff --git a/assets/templates/halloween.html b/assets/templates/Misc/halloween.html
similarity index 100%
rename from assets/templates/halloween.html
rename to assets/templates/Misc/halloween.html
diff --git a/assets/templates/text-highlighting.html b/assets/templates/Misc/text-highlighting.html
similarity index 100%
rename from assets/templates/text-highlighting.html
rename to assets/templates/Misc/text-highlighting.html
diff --git a/assets/templates/record.html b/assets/templates/Mozilla/sentence-creation/record-sentence.html
similarity index 61%
rename from assets/templates/record.html
rename to assets/templates/Mozilla/sentence-creation/record-sentence.html
index 96b8eb22..a8b84bd9 100644
--- a/assets/templates/record.html
+++ b/assets/templates/Mozilla/sentence-creation/record-sentence.html
@@ -61,19 +61,68 @@ <h1>Effect AI - Sentence Reader</h1>
       fileTooBig: false,
       instructions: `
         <div>
-          <p>Please follow these steps carefully to ensure your audio is useful and clear:</p>
-          <br>
-          <li><strong>Read the sentence exactly</strong> - Include every article and the correct plural form. Don't shorten or add words.</li>
-          <br>
-          <li><strong>Speak clearly and naturally</strong> - Don't trail off or adding extra phrases.</li>
-          <br>
-          <li><strong>Accent Forgiveness</strong> - Varied pronunciation is fine as long as the intended text is recognizable.</li>
-          <br>
-          <li><strong>Avoid too much background noise</strong> - Quiet ambient noise is OK, but distinct words from others interfere with accuracy.</li>
-          <br>
-          <li>If the recording is too quiet, noisy, or breaks up, please re-record until the full sentence is audible and matches the text.</li>
-          <br>
-          <li>Clip length should stay under ~15 seconds. Most sentences take under 10 seconds. Aim for brevity and clarity.</li>
+          <h2>Record a Sentence</h2>
+          <p>
+            In this task, you will record yourself reading a single sentence shown on the screen.
+            The goal is to collect clear, natural speech that accurately reflects the written text
+            and can be used to train and evaluate speech models.
+          </p>
+
+          <h3>1. Instructions</h3>
+          <p>
+            Your job is to read the sentence out loud exactly as it appears. These recordings will
+            be used in a speech dataset, so accuracy, clarity, and consistency are important.
+          </p>
+
+          <h4>Recording Guidelines</h4>
+          <ul>
+            <li>Read the sentence exactly as written, word for word.</li>
+            <li><strong>DO NOT</strong> leave long pauses between the beginning and end of the sentence.</li>
+            <li><strong>DO NOT</strong> add, remove, or change any words.</li>
+            <li>Speak clearly at a natural, conversational pace.</li>
+            <li>Use normal intonation as if you were speaking to another person.</li>
+            <li>Record in a quiet environment when possible.</li>
+            <li>Keep the recording under 15 seconds. Most sentences should take under 10 seconds.</li>
+          </ul>
+
+          <h4>What NOT to Do</h4>
+          <ul>
+            <li>Do not paraphrase or correct the sentence.</li>
+            <li>Do not repeat the sentence unless asked to.</li>
+            <li>Do not add commentary, filler words, or extra sounds.</li>
+            <li>Do not whisper, shout, or speak unnaturally.</li>
+            <li>Do not record with loud background speech, music, or television.</li>
+          </ul>
+
+          <h3>2. Examples</h3>
+
+          <p><strong>✅ Good Recordings</strong></p>
+          <ul>
+            <li>Clear voice, steady pace, no background speech.</li>
+            <li>All words and letters spoken exactly as shown.</li>
+            <li>Natural pronunciation and rhythm.</li>
+          </ul>
+
+          <p><strong>❌ Bad Recordings</strong></p>
+          <ul>
+            <li>Skipping words or changing phrasing.</li>
+            <li>Reading abbreviations as a word instead of individual letters.</li>
+            <li>Audio that is too quiet, distorted, or clipped.</li>
+            <li>Background voices that interfere with the sentence.</li>
+          </ul>
+
+          <h3>3. Tips for Success</h3>
+          <ul>
+            <li>Read the sentence silently once before recording.</li>
+            <li>Take a short breath before you start speaking.</li>
+            <li>If you make a mistake, re record the sentence.</li>
+            <li>Focus on accuracy over speed.</li>
+          </ul>
+
+          <p>
+            When you are satisfied with your recording, submit it and move on to the next task.
+            Thank you for contributing to this speech dataset.
+          </p>
         </div>`
     };
   },
diff --git a/assets/templates/sentence-creation.html b/assets/templates/Mozilla/sentence-creation/sentence-creation.html
similarity index 76%
rename from assets/templates/sentence-creation.html
rename to assets/templates/Mozilla/sentence-creation/sentence-creation.html
index d449c3eb..49b170f0 100644
--- a/assets/templates/sentence-creation.html
+++ b/assets/templates/Mozilla/sentence-creation/sentence-creation.html
@@ -4,7 +4,6 @@ <h1>Effect AI - Sentence Creator</h1>
   
     <hr />
   
-    <!-- Wrap the image or canvas element with a block element (container) -->
     <div class="mx-auto" style="max-width: 80%">
 
       <div class="container is-max-desktop">
@@ -124,47 +123,53 @@ <h3>4. Example Starter Topics for Sentences</h3>
 
             <ul>
               <li>
-                <strong>Food &amp; Drinks</strong> — meals, flavors, cooking, favorite snacks
-                (no name brands)<br />
-                <em>Example:</em> “I like fresh bread.”
+                <strong>Food &amp; Drinks</strong><br />
+                <em>Example:</em> “I enjoy warm bread with butter on quiet mornings.”
               </li>
+
               <li>
-                <strong>Weather &amp; Seasons</strong> — rain, sun, snow, temperature<br />
-                <em>Example:</em> “The sky is cloudy today.”
+                <strong>Weather &amp; Seasons</strong><br />
+                <em>Example:</em> “Dark clouds gathered as the air suddenly turned cooler.”
               </li>
+
               <li>
-                <strong>Animals &amp; Pets</strong> — dogs, birds, farm animals, wildlife<br />
-                <em>Example:</em> “My dog sleeps on the chair.”
+                <strong>Animals &amp; Pets</strong><br />
+                <em>Example:</em> “My dog waits by the door whenever I grab my jacket.”
               </li>
+
               <li>
-                <strong>Daily Routines</strong> — chores, habits, errands, morning or evening
-                activities<br />
-                <em>Example:</em> “I brush my teeth at night.”
+                <strong>Daily Routines</strong><br />
+                <em>Example:</em> “I check my calendar while drinking coffee every morning.”
               </li>
+
               <li>
-                <strong>Home &amp; Family</strong> — family members, house, rooms, common
-                activities<br />
-                <em>Example:</em> “My sister reads in the living room.”
+                <strong>Home &amp; Family</strong><br />
+                <em>Example:</em> “My brother cooks dinner while we talk about our day.”
               </li>
+
               <li>
-                <strong>Nature &amp; Outdoors</strong> — trees, flowers, parks, landscapes<br />
-                <em>Example:</em> “The forest is full of tall trees.”
+                <strong>Nature &amp; Outdoors</strong><br />
+                <em>Example:</em> “Leaves rustled softly as the wind moved through the park.”
               </li>
+
               <li>
-                <strong>Travel and Places</strong> — cities, transportation, landmarks, trips<br />
-                <em>Example:</em> “The bus stops near the library.”
+                <strong>Travel and Places</strong><br />
+                <em>Example:</em> “The train arrives early near the old stone bridge.”
               </li>
+
               <li>
-                <strong>School &amp; Learning</strong> — reading, writing, teachers, books<br />
-                <em>Example:</em> “The student writes in a notebook.”
+                <strong>School &amp; Learning</strong><br />
+                <em>Example:</em> “She studies quietly while taking notes from the textbook.”
               </li>
+
               <li>
-                <strong>Work &amp; Hobbies</strong> — jobs, crafts, games, sports<br />
-                <em>Example:</em> “I play guitar in the evening.”
+                <strong>Work &amp; Hobbies</strong><br />
+                <em>Example:</em> “I practice guitar chords after work to relax.”
               </li>
+
               <li>
-                <strong>Feelings &amp; Opinions</strong> — emotions, likes, dislikes<br />
-                <em>Example:</em> “I feel happy when I see my friends.”
+                <strong>Feelings &amp; Opinions</strong><br />
+                <em>Example:</em> “I feel proud when my hard work finally pays off.”
               </li>
             </ul>
           </div>
diff --git a/assets/templates/verify-recording.html b/assets/templates/Mozilla/sentence-creation/verify-sentence-recording.html
similarity index 95%
rename from assets/templates/verify-recording.html
rename to assets/templates/Mozilla/sentence-creation/verify-sentence-recording.html
index 022b4e77..de576fc7 100644
--- a/assets/templates/verify-recording.html
+++ b/assets/templates/Mozilla/sentence-creation/verify-sentence-recording.html
@@ -1,5 +1,5 @@
 <div id="app" style="text-align: center">
-  <h1>Effect AI - Recording Verification</h1>
+  <h1>Effect AI - Sentence Recording Verification</h1>
 
   <hr />
 
@@ -65,7 +65,7 @@ <h1>Effect AI - Recording Verification</h1>
   createApp({
     data() {
       return {
-        title: "Effect AI Recording Verifier",
+        title: "Effect AI Sentence Recording Verifier",
         btnLoading: false,
         author: "${submissionByPeer}",
         sentence: JSON.parse("${result}").values.sentence,
@@ -87,7 +87,7 @@ <h3>1. Instructions</h3>
               <li>Check that the spoken words match the displayed sentence exactly.</li>
               <li>Make sure the pronunciation is understandable and there are no skipped or extra words.</li>
               <li>Minor accent differences are acceptable as long as the sentence is correct and clear.</li>
-              <li>If the audio is cut off, too noisy, or missing words, mark it as <strong>No</strong>.</li>
+              <li>**If the audio is cut off, too noisy, or missing words, mark it as <strong>No</strong>.**</li>
             </ul>
 
             <h3>2. Mark as <strong>Yes</strong> if:</h3>
diff --git a/assets/templates/verify-sentence.html b/assets/templates/Mozilla/sentence-creation/verify-sentence.html
similarity index 72%
rename from assets/templates/verify-sentence.html
rename to assets/templates/Mozilla/sentence-creation/verify-sentence.html
index 1220c71a..4160f86a 100644
--- a/assets/templates/verify-sentence.html
+++ b/assets/templates/Mozilla/sentence-creation/verify-sentence.html
@@ -1,3 +1,4 @@
+<meta charset="UTF-8">
 <div id="app" style="text-align: center">
   <h1>Effect AI - Sentence Verification </h1>
 
@@ -95,17 +96,17 @@ <h4>Mark as INCORRECT if you see:</h4>
             <h3>2. Examples</h3>
             <p><strong>✅ Correct Sentences</strong></p>
             <ul>
-              <li>The sky is blue with light clouds.</li>
-              <li>My dog likes to nap in the sun.</li>
-              <li>People enjoy walking through the park.</li>
+              <li>I enjoy walking home when the weather feels calm.</li>
+              <li>She left her jacket on the chair by the door.</li>
+              <li>We usually talk quietly while eating dinner together.</li>
             </ul>
 
             <p><strong>❌ Incorrect Sentences</strong></p>
             <ul>
-              <li>Sky IS bLUE &amp; FULL OF $HINY CLOUDS!!! (wrong spelling, special characters)</li>
-              <li>The country has 331,449,281 people. (numbers not allowed)</li>
-              <li>The sun sets. The moon rises. (too short, not conversational)</li>
-              <li>Mi perro duerme en la silla. (foreign language)</li>
+              <li>THIS sentence has RANDOM capitalization and symbols!!! (unnatural formatting)</li>
+              <li>The town has 24500 residents living there. (numbers not allowed)</li>
+              <li>Walking home. Feeling tired. (fragmented and unnatural)</li>
+              <li>Je vais au parc ce matin. (foreign language)</li>
             </ul>
 
             <h3>3. Tips for Success</h3>
@@ -114,25 +115,6 @@ <h3>3. Tips for Success</h3>
               <li>If you have to read it twice to understand it, it's probably incorrect.</li>
               <li>Don't overthink it, use your common sense and trust your ear for natural English.</li>
             </ul>
-
-            <h3>4. Common Sentence Topics You'll See</h3>
-            <p>
-              Sentences often describe simple, everyday topics. You don't need to judge the topic,
-              just check that the sentence follows the rules and sounds natural.
-            </p>
-
-            <ul>
-              <li><strong>Food &amp; Drinks</strong> - “I like fresh bread.”</li>
-              <li><strong>Weather &amp; Seasons</strong> - “The sky is cloudy today.”</li>
-              <li><strong>Animals &amp; Pets</strong> - “My dog sleeps on the chair.”</li>
-              <li><strong>Daily Routines</strong> - “I brush my teeth at night.”</li>
-              <li><strong>Home &amp; Family</strong> - “My sister reads in the living room.”</li>
-              <li><strong>Nature &amp; Outdoors</strong> - “The forest is full of tall trees.”</li>
-              <li><strong>Travel and Places</strong> - “The bus stops near the library.”</li>
-              <li><strong>School &amp; Learning</strong> - “The student writes in a notebook.”</li>
-              <li><strong>Work &amp; Hobbies</strong> - “I play guitar in the evening.”</li>
-              <li><strong>Feelings &amp; Opinions</strong> - “I feel happy when I see my friends.”</li>
-            </ul>
           </div>
           `
       };
diff --git a/assets/templates/Mozilla/spontaneous-questions/question-creation.html b/assets/templates/Mozilla/spontaneous-questions/question-creation.html
new file mode 100644
index 00000000..16242abe
--- /dev/null
+++ b/assets/templates/Mozilla/spontaneous-questions/question-creation.html
@@ -0,0 +1,210 @@
+<meta charset="UTF-8">
+<div id="app" style="text-align: center">
+    <h1>Effect AI - Question Creator</h1>
+  
+    <hr />
+  
+    <div class="mx-auto" style="max-width: 80%">
+
+      <div class="container is-max-desktop">
+        <label class="label has-text-left">Question:</label>
+        <textarea
+          class="textarea"
+          placeholder="Enter your question here"
+          type="text" 
+          v-model="tmpQuestion"
+        >
+        </textarea>
+      </div>
+    
+    <p class="is-size-7 mb-2">By clicking this button, you accept that the question contributed here will be added to a publicly available cc-0 licensed dataset.</p>
+
+    <p style="color: red;"
+    :class="{'is-hidden mb-3': !tooLong}">
+      Question is too long - Question should be no longer than 15 words
+    </p>
+
+    <p style="color: red;"
+    :class="{'is-hidden mb-3': !tooShort}">
+      Question is too short - Question should be longer than 4 words
+    </p>
+
+    <p style="color: red;"
+    :class="{'is-hidden mb-3': !notComplete}">
+      Task incomplete - Please complete all sections of the task
+    </p>
+
+    <button
+      @click.prevent="uploadAndSubmit"
+      class="button is-success is-large"
+      :class="{'is-loading': btnLoading}"
+    >
+      Submit
+    </button>
+  </div>
+  
+  <!-- 📚 Load in resources: [Bulma, Effect Network Styling]  -->
+  <link rel="stylesheet" href="https://unpkg.com/bulma@0.9.4/css/bulma.min.css" />
+  <link href="https://app.effect.network/force-defaults.css" rel="stylesheet" />
+  
+  <script src="https://cdn.jsdelivr.net/npm/ipfs-http-client/dist/index.min.js"></script>
+  <script type="module">
+    import { createApp } from "https://unpkg.com/vue@3/dist/vue.esm-browser.js";
+  
+    createApp({
+      data() {
+        return {
+          title: "Effect AI Question Creator",
+          tmpQuestion: "",
+          btnLoading: false,
+          notComplete: false,
+          tooShort: false,
+          tooLong: false,
+          instructions: `
+          <div>
+            <h2>Create a Short Story Prompt</h2>
+            <p>
+              In this task, you will write short prompts that encourage people to record
+              brief personal stories. These stories should be natural, simple, and easy
+              to tell out loud in under 30 seconds.
+            </p>
+
+            <h3>1. Instructions</h3>
+            <p>
+              Your job is to write a single prompt that asks someone to share a short
+              personal experience or moment. The prompt should feel friendly and easy,
+              not deep or complicated.
+            </p>
+
+            <h4>Prompt Guidelines</h4>
+            <ul>
+              <li>Keep the prompt short and clear.</li>
+              <li>Ask about a small, everyday moment or feeling.</li>
+              <li>The story should be possible to tell in 30 seconds or less.</li>
+              <li>Use simple, conversational English.</li>
+              <li>Write as if you are speaking directly to one person.</li>
+            </ul>
+
+            <h4>What NOT to Include</h4>
+            <ul>
+              <li>Questions that require long explanations or life stories.</li>
+              <li>Multiple questions in one prompt.</li>
+              <li>Requests for names, locations, or identifying details.</li>
+              <li>Hypothetical or fictional scenarios.</li>
+              <li>Complex or abstract topics.</li>
+            </ul>
+
+            <h3>2. Examples</h3>
+            <p><strong>✅ Good Prompts</strong></p>
+            <ul>
+              <li>Tell a small moment today that made you smile.</li>
+              <li>Record how it felt to miss the bus this morning.</li>
+              <li>Describe a short conversation you remember from today.</li>
+              <li>Talk about something that briefly annoyed you today.</li>
+            </ul>
+
+            <p><strong>❌ Bad Prompts</strong></p>
+            <ul>
+              <li>Describe your childhood and how it shaped who you are. (too long)</li>
+              <li>What is your full daily routine from morning to night? (too broad)</li>
+              <li>Tell a fictional story about the future. (not personal)</li>
+              <li>Explain your opinion on modern society. (too abstract)</li>
+            </ul>
+
+            <h3>3. Tips for Success</h3>
+            <ul>
+              <li>Focus on moments, not summaries.</li>
+              <li>If the answer would take more than 30 seconds, simplify the prompt.</li>
+              <li>Imagine how someone would respond out loud.</li>
+              <li>Shorter and more specific prompts usually work best.</li>
+            </ul>
+
+            <h3>4. Example Prompt Themes</h3>
+            <ul>
+              <li>
+                <strong>Daily Moments</strong><br />
+                <em>Example:</em> “Share a small part of your morning routine.”
+              </li>
+
+              <li>
+                <strong>Emotions</strong><br />
+                <em>Example:</em> “Talk about something that made you feel calm today.”
+              </li>
+
+              <li>
+                <strong>Minor Challenges</strong><br />
+                <em>Example:</em> “Describe a small problem you dealt with today.”
+              </li>
+
+              <li>
+                <strong>Pleasant Surprises</strong><br />
+                <em>Example:</em> “Tell a quick story about something unexpectedly nice.”
+              </li>
+
+              <li>
+                <strong>Social Moments</strong><br />
+                <em>Example:</em> “Describe a brief interaction you had with someone today.”
+              </li>
+            </ul>
+          </div>
+        `
+        };
+      },
+      computed: {},
+      created() {},
+      mounted() {
+        window.top.postMessage(
+        {
+          type: 'task-instructions',
+          instructions: this.instructions
+        },
+        "*"
+      );
+      },
+      methods: {
+        sanitize(text) {
+          text = text
+          .replace(/\r\n/g, '\n')      // normalize Windows newlines
+          .replace(/[ \t]+$/gm, '')    // remove trailing spaces per line
+          .replace(/\n{2,}/g, '\n')    // collapse multiple blank lines
+          .trim();  
+
+          return text
+        },
+        async uploadAndSubmit() {
+          this.btnLoading = true;
+
+          const cleanQuestion = this.sanitize(this.tmpQuestion).trim();
+          const wordCount = cleanQuestion.split(/\s+/).length;
+
+          this.tooShort = false;
+          this.tooLong = false;
+
+          if(this.tmpQuestion == ""){
+            this.notComplete = true
+          } else if (wordCount < 5) {
+            this.tooShort = true;
+          } else if (wordCount > 15) {
+            this.tooLong = true;
+          } 
+          else
+            try {
+              parent.postMessage(
+                {
+                  task: "submit",
+                  values: {
+                    taskTitle: this.title,
+                    question: cleanQuestion,
+                  },
+                },
+                "*"
+              );
+            } catch (error) {
+              console.error("Failed to upload to IPFS", error);
+            }
+            this.btnLoading = false;
+          },
+        
+      },
+    }).mount("#app");
+  </script>
\ No newline at end of file
diff --git a/assets/templates/Mozilla/spontaneous-questions/record-question.html b/assets/templates/Mozilla/spontaneous-questions/record-question.html
new file mode 100644
index 00000000..565e930f
--- /dev/null
+++ b/assets/templates/Mozilla/spontaneous-questions/record-question.html
@@ -0,0 +1,235 @@
+<div id="app" style="text-align: center">
+  <h1>Effect AI - Question Answering</h1>
+  <hr />
+
+  <div class="mx-auto" style="max-width: 80%">
+    <p class="mb-5">Click <b>Record</b> then answer the question aloud</p>
+    <div class="box">
+      <p class="is-size-4 has-text-weight-semibold" v-cloak>{{ question }}</p>
+    </div>
+
+    <!-- WaveSurfer container -->
+    <div id="waveform" class="mb-4"></div>
+
+    <div class="container mb-5">
+      <button v-if="!isRecording" @click.prevent="startRecording" class="button is-medium mx-2">Record</button>
+      <button v-else @click.prevent="stopRecording" class="button is-danger is-medium mx-2">Stop</button>
+      <button v-if="audioUrl" @click.prevent="playRecorded" class="button is-link is-medium mx-2">Replay</button>
+    </div>
+
+    <p class="is-size-7 mb-2">
+      By clicking this button, you accept that the question contributed here will be added to a publicly available cc-0 licensed dataset.
+    </p>
+
+    <p style="color: red;" :class="{'is-hidden mb-3': !notComplete}">
+      Task incomplete - Please complete all sections of the task
+    </p>
+
+    <p style="color: red;" :class="{'is-hidden mb-3': !fileTooBig}">
+      File size too large. Please stop recording once you've finished answering the question.
+    </p>
+
+    <button @click.prevent="uploadAndSubmit" class="button is-success is-large" :class="{'is-loading': btnLoading}">
+      Submit
+    </button>
+  </div>
+</div>
+
+<link rel="stylesheet" href="https://unpkg.com/bulma@0.9.4/css/bulma.min.css" />
+
+<script type="module">
+  
+import { createApp } from "https://unpkg.com/vue@3/dist/vue.esm-browser.js";
+import WaveSurfer from "https://unpkg.com/wavesurfer.js@7/dist/wavesurfer.esm.js";
+import RecordPlugin from "https://unpkg.com/wavesurfer.js@7/dist/plugins/record.esm.js";
+
+createApp({
+  data() {
+    return {
+      title: "Effect AI Question Answering",
+      question: (JSON.parse("${result}")).values.question,
+      wavesurfer: null,
+      recordPlugin: null,
+      isRecording: false,
+      audioBlob: null,
+      audioUrl: "",
+      ipfsCID: "",
+      ipfsHOST: "ipfs.effect.ai",
+      notComplete: false,
+      btnLoading: false,
+      fileTooBig: false,
+      instructions: `
+        <div>
+          <h2>Answer a Question</h2>
+          <p>
+            In this task, you will record yourself answering a short question shown on the screen.
+            The goal is to collect natural spoken responses that are clear, personal, and brief.
+          </p>
+
+          <h3>1. Instructions</h3>
+          <p>
+            Your job is to answer the question out loud in your own words.
+            These recordings will be used in a speech dataset, so clarity and natural speech are important.
+          </p>
+
+          <h4>Recording Guidelines</h4>
+          <ul>
+            <li>Answer the question naturally, as if speaking to another person.</li>
+            <li>Keep your response short and focused.</li>
+            <li>Do not speak for too long. Try to stay under 30 seconds.</li>
+            <li>Speak clearly at a normal, conversational pace.</li>
+            <li>Use your own words. There is no single correct answer.</li>
+            <li>Record in a quiet environment when possible.</li>
+          </ul>
+
+          <h4>What NOT to Do</h4>
+          <ul>
+            <li>Do not read the question instead of answering it.</li>
+            <li>Do not give very long or detailed stories.</li>
+            <li>Do not include names, addresses, or other identifying information.</li>
+            <li>Do not add filler sounds for long periods.</li>
+            <li>Do not record with loud background noise, music, or voices.</li>
+          </ul>
+
+          <h3>2. Examples</h3>
+
+          <p><strong>✅ Good Answers</strong></p>
+          <ul>
+            <li>A short story that answers the question clearly.</li>
+            <li>Natural speech with a clear beginning and end.</li>
+            <li>Focused on one moment or feeling.</li>
+          </ul>
+
+          <p><strong>❌ Bad Answers</strong></p>
+          <ul>
+            <li>Very long stories that go off topic.</li>
+            <li>Silence or only a few unclear words.</li>
+            <li>Reading the question instead of answering it.</li>
+            <li>Sharing personal details like full names or contact information.</li>
+          </ul>
+
+          <h3>3. Tips for Success</h3>
+          <ul>
+            <li>Think briefly about your answer before recording.</li>
+            <li>Focus on a single moment or experience.</li>
+            <li>Stop recording once you have answered the question.</li>
+            <li>If you make a mistake, you can re-record.</li>
+          </ul>
+
+          <p>
+            When you are satisfied with your recording, submit it and continue to the next task.
+            Thank you for sharing your voice.
+          </p>
+        </div>
+        `
+    };
+  },
+  mounted() {
+
+    window.top.postMessage({ type: "task-instructions", instructions: this.instructions }, "*");
+
+    this.recordPlugin = RecordPlugin.create();
+
+    this.wavesurfer = WaveSurfer.create({
+      container: "#waveform",
+      waveColor: "#ddd",
+      progressColor: "#0000FF",
+      cursorWidth: 0,
+      height: 100,
+      interact: false,
+      plugins: [this.recordPlugin],
+    });
+
+    this.recordPlugin.on("record-start", () => {
+      this.isRecording = true;
+      this.audioBlob = null;
+      this.audioUrl = "";
+    });
+
+    this.recordPlugin.on("record-end", (blob) => {
+      this.audioBlob = blob;
+      this.audioUrl = URL.createObjectURL(blob);
+      this.wavesurfer.load(this.audioUrl);
+      this.isRecording = false;
+    });
+
+  },
+  methods: {
+    checkSize(){
+      const file = new File([this.audioBlob], "recording.wav", { type: "audio/wav" });
+      const fileSize = (file.size / 1024).toFixed(2);
+
+      if (fileSize > 200){
+        this.fileTooBig = true
+      }
+      else
+        this.fileTooBig = false
+    },
+    async startRecording() {
+      try {
+        await this.recordPlugin.startRecording();
+      } catch (err) {
+        console.error("startRecording failed:", err);
+        this.isRecording = false;
+      }
+    },
+
+    stopRecording() {
+      try {
+        this.recordPlugin.stopRecording();
+      } catch (err) {
+        console.error("stopRecording failed:", err);
+      }
+    },
+
+    playRecorded() {
+      if (!this.audioUrl) return;
+      this.wavesurfer.playPause();
+    },
+
+    async uploadAndSubmit() {
+      this.btnLoading = true;
+      if (!this.audioBlob) {
+        this.notComplete = true;
+        this.btnLoading = false;
+        return;
+      }
+
+      this.checkSize()
+      if (this.fileTooBig) {
+        this.btnLoading = false;
+        return;
+      }
+
+      try{
+        const file = new File([this.audioBlob], "recording.wav", { type: "audio/wav" });
+        const formData = new FormData();
+        formData.append("path", file);
+
+        // Replace IPFS upload endpoint
+        const response = await fetch("https://" + this.ipfsHOST + "/api/v0/add?pin=true", {
+          method: "POST",
+          body: formData,
+        });
+
+        if (!response.ok) throw new Error("Upload failed");
+        const result = await response.json();
+        this.ipfsCID = result.Hash || result.cid || result.id;
+        parent.postMessage({
+          task: "submit",
+          values: {
+            taskTitle: this.title,
+            question: this.question,
+            recording: "https://" + this.ipfsHOST + "/ipfs/" + this.ipfsCID
+          }
+        }, "*");
+      } catch (err) {
+        console.error("Failed to upload", err);
+      } finally {
+        this.btnLoading = false;
+      }
+    }
+  }
+}).mount("#app");
+</script>
+
diff --git a/assets/templates/Mozilla/spontaneous-questions/verify-question-recording.html b/assets/templates/Mozilla/spontaneous-questions/verify-question-recording.html
new file mode 100644
index 00000000..291e950f
--- /dev/null
+++ b/assets/templates/Mozilla/spontaneous-questions/verify-question-recording.html
@@ -0,0 +1,254 @@
+<div id="app" style="text-align: center">
+  <h1>Effect AI - Question Recording Verification</h1>
+
+  <hr />
+
+  <div class="mx-auto" style="max-width: 80%">
+    <div class="box">
+      <p class="is-size-4 has-text-weight-semibold">{{ question }}</p>
+    </div>
+
+    <div class="mb-4">
+      <audio :src="recordingUrl" controls controlslist="nodownload" style="width: 25%;"></audio>
+    </div>
+
+    <hr />
+
+    <div class="mx-auto" style="text-align: center; max-width: 50%">
+      <h2 class="is-size-4 has-text-weight-semibold mb-5">Recording Metadata</h2>
+
+      <div v-for="field in metadataFields" :key="field.label" class="field mb-6">
+        <label class="label">{{ field.label }}</label>
+        <div class="buttons is-centered">
+          <button
+            v-for="option in field.options"
+            :key="option.value"
+            class="button"
+            :class="{ 'is-primary': field.model === option.value }"
+            @click="setFieldValue(field, option.value)"
+          >
+            {{ option.text }}
+          </button>
+        </div>
+      </div>
+    </div>
+
+    <p style="color: red;" v-if="isIncomplete">
+      Task incomplete - Please complete all sections of the task
+    </p>
+
+    <button
+      @click.prevent="uploadAndSubmit"
+      class="button is-success is-large"
+      :class="{ 'is-loading': btnLoading }"
+    >
+      Submit
+    </button>
+  </div>
+</div>
+
+<link rel="stylesheet" href="https://unpkg.com/bulma@0.9.4/css/bulma.min.css" />
+
+<script type="module">
+import { createApp, reactive } from "https://unpkg.com/vue@3/dist/vue.esm-browser.js";
+
+createApp({
+  data() {
+    const metadata = reactive({
+      voiceGender: "",
+      voiceClarity: "",
+      backgroundNoise: "",
+      speakingPace: "",
+      accent: "",
+      audioQuality: ""
+    });
+
+    return {
+      title: "Effect AI - Question Recording Verification",
+      btnLoading: false,
+      author: "${submissionByPeer}",
+      question: JSON.parse("${result}").values.question,
+      recordingUrl: JSON.parse("${result}").values.recording,
+      isValidated: "",
+      metadata,
+      metadataFields: [
+        {
+          label: 'Does the recording clearly and correctly answer the question?',
+          key: 'isValidated',
+          model: "",
+          options: [
+            { text: 'Yes', value: 'Yes' },
+            { text: 'No', value: 'No' }
+          ]
+        },
+        {
+          label: 'Perceived voice gender',
+          key: 'voiceGender',
+          model: "",
+          options: [
+            { text: 'Male', value: 'male' },
+            { text: 'Female', value: 'female' },
+            { text: 'Cannot determine', value: 'unknown' }
+          ]
+        },
+        {
+          label: 'Is the voice clear and intelligible?',
+          key: 'voiceClarity',
+          model: "",
+          options: [
+            { text: 'Clear', value: 'clear' },
+            { text: 'Mostly clear', value: 'mostly_clear' },
+            { text: 'Unclear', value: 'unclear' }
+          ]
+        },
+        {
+          label: 'Background noise level',
+          key: 'backgroundNoise',
+          model: "",
+          options: [
+            { text: 'None', value: 'none' },
+            { text: 'Low', value: 'low' },
+            { text: 'Moderate', value: 'moderate' },
+            { text: 'High', value: 'high' }
+          ]
+        },
+        {
+          label: 'Speaking pace',
+          key: 'speakingPace',
+          model: "",
+          options: [
+            { text: 'Slow', value: 'slow' },
+            { text: 'Normal', value: 'normal' },
+            { text: 'Fast', value: 'fast' }
+          ]
+        },
+        {
+          label: 'Noticeable accent',
+          key: 'accent',
+          model: "",
+          options: [
+            { text: 'None', value: 'none' },
+            { text: 'Mild', value: 'mild' },
+            { text: 'Strong', value: 'strong' }
+          ]
+        },
+        {
+          label: 'Overall audio quality',
+          key: 'audioQuality',
+          model: "",
+          options: [
+            { text: 'Good', value: 'good' },
+            { text: 'Acceptable', value: 'acceptable' },
+            { text: 'Poor', value: 'poor' }
+          ]
+        }
+      ],
+      instructions: `
+        <div>
+            <h2>Verify a Recording Answering a Question</h2>
+            <p>
+              In this task, you will listen to short recordings made by other contributors.
+              Your goal is to decide whether the speaker clearly and appropriately answered
+              the question shown.
+            </p>
+
+            <h3>1. Instructions</h3>
+            <ul>
+              <li>Listen carefully to the entire recording.</li>
+              <li>Check that the recording actually answers the displayed question.</li>
+              <li>Make sure the response is clear, understandable, and spoken in natural English.</li>
+              <li>The answer should be brief and focused, not a long explanation.</li>
+              <li>If the audio is cut off, extremely noisy, or does not answer the question, mark it as <strong>No</strong>.</li>
+            </ul>
+
+            <h3>2. Mark as <strong>Yes</strong> if:</h3>
+            <ul>
+              <li>The recording clearly answers the question.</li>
+              <li>The response is easy to understand and spoken naturally.</li>
+              <li>The recording is complete and not cut off.</li>
+              <li>There is no distracting background noise.</li>
+              <li>The response stays reasonably short.</li>
+            </ul>
+
+            <h3>3. Mark as <strong>No</strong> if:</h3>
+            <ul>
+              <li>The speaker does not answer the question.</li>
+              <li>The response is unrelated or extremely vague.</li>
+              <li>The recording is too long or rambles without answering clearly.</li>
+              <li>The audio is too quiet, distorted, or partially missing.</li>
+              <li>There is heavy background noise or overlapping speech.</li>
+              <li>The recording contains personal or identifying information.</li>
+            </ul>
+
+            <h3>4. Mark as <strong>Skip</strong> if:</h3>
+            <ul>
+              <li>You are unsure whether the response adequately answers the question.</li>
+              <li>The audio fails to play or is corrupted.</li>
+            </ul>
+
+            <h3>5. Tips</h3>
+            <ul>
+              <li>Focus on whether the question is answered, not on perfect wording.</li>
+              <li>Minor accents or speech differences are acceptable if the response is clear.</li>
+              <li>Do not judge the content of the answer, only its clarity and relevance.</li>
+              <li>Use headphones if possible.</li>
+            </ul>
+          </div>
+        `
+    };
+  },
+  computed: {
+    isIncomplete() {
+      return (
+        this.isValidated === "" ||
+        Object.values(this.metadata).some(value => value === "")
+      );
+    }
+  },
+  mounted() {
+      window.top.postMessage(
+        {
+          type: "task-instructions",
+          instructions: this.instructions,
+        },
+        "*"
+      );
+    },
+  methods: {
+    setFieldValue(field, value) {
+      if (field.key === "isValidated") {
+        this.isValidated = value;
+      } else {
+        this.metadata[field.key] = value;
+      }
+      field.model = value;
+    },
+    uploadAndSubmit() {
+      this.btnLoading = true;
+      if (this.isIncomplete) {
+        this.btnLoading = false;
+        return;
+      }
+      try {
+        parent.postMessage(
+          {
+            task: "submit",
+            values: {
+              taskTitle: this.title,
+              author: this.author,
+              question: this.question,
+              recording: this.recordingUrl,
+              metadata: { ...this.metadata },
+              isValidated: this.isValidated,
+            },
+          },
+          "*"
+        );
+      } catch (error) {
+        console.error("Failed to submit", error);
+      }
+      this.btnLoading = false;
+    }
+  }
+}).mount("#app");
+</script>
diff --git a/assets/templates/Mozilla/spontaneous-questions/verify-question.html b/assets/templates/Mozilla/spontaneous-questions/verify-question.html
new file mode 100644
index 00000000..faa2685a
--- /dev/null
+++ b/assets/templates/Mozilla/spontaneous-questions/verify-question.html
@@ -0,0 +1,162 @@
+<meta charset="UTF-8">
+<div id="app" style="text-align: center">
+  <h1>Effect AI - Question Verification </h1>
+
+  <hr />
+
+  <div class="mx-auto" style="max-width: 80%">
+
+  <p class="mb-5">Is this a valid question?</p>
+  <div class="box">
+    <p class="is-size-4 has-text-weight-semibold">{{question}}</p>
+  </div>
+
+  <div class="mb-5">
+    <button class="button is-medium"
+    :class="{ 'is-success': this.isValidated == 'Yes' }"
+    @click="this.isValidated='Yes'">Yes</button>
+
+    <button class="button is-medium mx-3"
+    :class="{ 'is-dark': this.isValidated == 'Skip' }"
+    @click="this.isValidated='Skip'">Skip</button>
+
+    <button class="button is-medium"
+    :class="{ 'is-danger': this.isValidated == 'No' }"
+    @click="this.isValidated='No'">No</button>
+  </div>
+
+  <p style="color: red;"
+  :class="{'is-hidden mb-3': !notComplete}">
+    Task incomplete - Please complete all sections of the task
+  </p>
+
+  <button
+    @click.prevent="uploadAndSubmit"
+    class="button is-success is-large"
+    :class="{'is-loading': btnLoading}"
+  >
+    Submit
+  </button>
+</div>
+
+<!-- 📚 Load in resources: [Bulma, Effect Network Styling]  -->
+<link rel="stylesheet" href="https://unpkg.com/bulma@0.9.4/css/bulma.min.css" />
+<link href="https://app.effect.network/force-defaults.css" rel="stylesheet" />
+
+<script src="https://cdn.jsdelivr.net/npm/ipfs-http-client/dist/index.min.js"></script>
+<script type="module">
+  import { createApp } from "https://unpkg.com/vue@3/dist/vue.esm-browser.js";
+  
+
+  createApp({
+    data() {
+      return {
+        title: "Effect AI Question Verifier",
+        btnLoading: false,
+        author: "${submissionByPeer}", 
+        // incoming result - {"timestamp": "", "submissionByPeer": "", "taskId": "", "result": "JSON_STRING"}
+        question: (JSON.parse("${result}")).values.question, 
+        isValidated: "",
+        loading: true,
+        notComplete: false,
+        instructions: `
+          <div>
+            <h2>Verify a Question - Common Voice</h2>
+            <p>
+              In this task, you will review short, simple questions written by other contributors.
+              Your goal is to decide whether each question is clear, natural, and suitable for collecting short spoken responses.
+            </p>
+
+            <h3>1. Instructions</h3>
+            <p>
+              Carefully read each question and decide whether it follows the guidelines below.
+              Mark <strong>“Yes”</strong> if the question is acceptable, <strong>“No”</strong> if it is not.
+              If you are unsure, you may <strong>Skip</strong> the question.
+            </p>
+
+            <h4>Question Verification Guidelines</h4>
+            <ul>
+              <li>The question should be clear and easy to understand.</li>
+              <li>It should be possible to answer naturally in a short spoken response.</li>
+              <li>The question must use correct grammar, spelling, and punctuation.</li>
+              <li>It should sound natural and conversational.</li>
+              <li>Casual English is fine, but phrasing should not be confusing.</li>
+            </ul>
+
+            <h4>Mark as INCORRECT if you see:</h4>
+            <ul>
+              <li>Grammar or spelling mistakes that make the question unclear.</li>
+              <li>Foreign words or non English text.</li>
+              <li>Overly complex, abstract, or technical language.</li>
+              <li>Personal or identifying information requests.</li>
+              <li>Questions that feel unnatural, incomplete, or hard to answer.</li>
+              <li>Statements or sentences that are not actually questions.</li>
+            </ul>
+
+            <h3>2. Examples</h3>
+            <p><strong>✅ Correct Questions</strong></p>
+            <ul>
+              <li>What is a small moment today that made you smile?</li>
+              <li>How did you feel when you woke up this morning?</li>
+              <li>Can you describe a short conversation you had today?</li>
+            </ul>
+
+            <p><strong>❌ Incorrect Questions</strong></p>
+            <ul>
+              <li>Tell me everything about your childhood. (too broad)</li>
+              <li>THIS question has RANDOM capitalization!!! (unnatural formatting)</li>
+              <li>The town has many people living there. (not a question)</li>
+              <li>Je vais au parc ce matin. (foreign language)</li>
+              <li>Why is existence meaningful in modern society? (too abstract)</li>
+            </ul>
+
+            <h3>3. Tips for Success</h3>
+            <ul>
+              <li>Read the question out loud and see if it sounds natural.</li>
+              <li>If the question feels awkward or confusing, mark it as incorrect.</li>
+              <li>If answering it would take a long time, it is probably not suitable.</li>
+              <li>Trust your instincts and do not overthink small details.</li>
+            </ul>
+          </div>
+          `
+      };
+    },
+    computed: {},
+    created() {},
+    mounted() {
+      window.top.postMessage(
+        {
+          type: 'task-instructions',
+          instructions: this.instructions
+        },
+        "*"
+      );
+    },
+    methods: {
+      async uploadAndSubmit() {
+        this.btnLoading = true;
+        if(this.isValidated == ""){
+            this.notComplete = true
+          }
+        else
+          try {
+            parent.postMessage(
+              {
+                task: "submit",
+                values: {
+                  taskTitle: this.title,
+                  author: this.author,
+                  question: this.question,
+                  isValidated: this.isValidated
+                },
+              },
+              "*"
+            );
+          } catch (error) {
+            console.error("Failed to upload to IPFS", error);
+          }
+        this.btnLoading = false;
+      },
+    },
+  }).mount("#app");
+</script>
diff --git a/assets/templates/question-creation.html b/assets/templates/question-creation.html
deleted file mode 100644
index c8d64f04..00000000
--- a/assets/templates/question-creation.html
+++ /dev/null
@@ -1,120 +0,0 @@
-<div id="app" style="text-align: center">
-    <h1>Effect AI - Question Creator</h1>
-  
-    <hr />
-  
-    <!-- Wrap the image or canvas element with a block element (container) -->
-    <div class="mx-auto" style="max-width: 80%">
-
-      <div class="container is-max-desktop">
-        <label class="label has-text-left">Question:</label>
-        <textarea
-          class="textarea"
-          placeholder="Enter your question here"
-          type="text" 
-          v-model="tmpQuestion"
-        >
-        </textarea>
-      </div>
-
-      <div class="container is-max-desktop box">
-        <label class="label">What questions can I add?</label>
-        <div class="has-text-left">
-          <label class="label">DO:</label>
-          <li>Use correct spelling and grammar</li>
-          <li>Choose simple questions that are easy for anyone to understand, regardless of culture or context</li>
-          <li>Make sure they can be answered in just a couple of sentences</li>
-          <br>
-          <label class="label">DO NOT:</label>
-          <li>Solicit personally identifying information (like names or financial information)</li>
-          <li>Express or solicit prejudiced or offensive sentiments</li>
-          <li>Ask sensitive questions</li>
-        </div>
-      </div>
-    
-    <p class="is-size-7 mb-2">By clicking this button, you accept that the sentence contributed here will be added to a publicly available cc-0 licensed dataset.</p>
-
-    <p style="color: red;"
-    :class="{'is-hidden mb-3': !notComplete}">
-      Task incomplete - Please complete all sections of the task
-    </p>
-
-    <button
-      @click.prevent="uploadAndSubmit"
-      class="button is-success is-large"
-      :class="{'is-loading': btnLoading}"
-    >
-      Submit
-    </button>
-  </div>
-  
-  <!-- 📚 Load in resources: [Bulma, Effect Network Styling]  -->
-  <link rel="stylesheet" href="https://unpkg.com/bulma@0.9.4/css/bulma.min.css" />
-  <link href="https://app.effect.network/force-defaults.css" rel="stylesheet" />
-  
-  <script src="https://cdn.jsdelivr.net/npm/ipfs-http-client/dist/index.min.js"></script>
-  <script type="module">
-    import { createApp } from "https://unpkg.com/vue@3/dist/vue.esm-browser.js";
-  
-    createApp({
-      data() {
-        return {
-          title: "Effect AI Question Creator",
-          tmpQuestion: "",
-          btnLoading: false,
-          notComplete: false,
-          instructions: `
-          <div class="">
-            <h2 class="text-lg">What questions can I add?</h2>
-            <br>
-            <p><strong>DO</strong></p>
-            <li>Use correct spelling and grammar</li>
-            <li>Choose simple questions that are easy for anyone to understand, regardless of culture or context</li>
-            <li>Make sure they can be answered in just a couple of sentences</li>
-            <br>
-            <p><strong>DO NOT</strong></p>
-            <li>Solicit personally identifying information (like names or financial information)</li>
-            <li>Express or solicit prejudiced or offensive sentiments</li>
-            <li>Ask sensitive questions</li>
-          </div>
-        `
-        };
-      },
-      computed: {},
-      created() {},
-      mounted() {
-        window.top.postMessage(
-        {
-          type: 'task-instructions',
-          instructions: this.instructions
-        },
-        "*"
-      );
-      },
-      methods: {
-        async uploadAndSubmit() {
-          this.btnLoading = true;
-          if(this.tmpQuestion == ""){
-            this.notComplete = true
-          }
-          else
-            try {
-              parent.postMessage(
-                {
-                  task: "submit",
-                  values: {
-                    taskTitle: this.title,
-                    answer: this.tmpQuestion,
-                  },
-                },
-                "*"
-              );
-            } catch (error) {
-              console.error("Failed to upload to IPFS", error);
-            }
-            this.btnLoading = false;
-          },
-        
-      },
-    }).mount("#app");
-  </script>
\ No newline at end of file

From 3deed52443a3bf30bb587f730271de2dac72ed99 Mon Sep 17 00:00:00 2001
From: Miguel Nobre <mnobre24@gmail.com>
Date: Sun, 4 Jan 2026 20:54:54 -0500
Subject: [PATCH 04/13] minor template change

---
 .../Azure Cognitive Speech/verify-recording-azure.html          | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/assets/templates/Azure Cognitive Speech/verify-recording-azure.html b/assets/templates/Azure Cognitive Speech/verify-recording-azure.html
index 7eb0dfdf..d6e2e191 100644
--- a/assets/templates/Azure Cognitive Speech/verify-recording-azure.html	
+++ b/assets/templates/Azure Cognitive Speech/verify-recording-azure.html	
@@ -75,7 +75,7 @@ <h2 class="is-size-4 has-text-weight-semibold mb-5">Recording Metadata</h2>
       metadata,
       metadataFields: [
         {
-          label: 'Does the recording clearly and correctly answer the question?',
+          label: 'Does the recording clearly and correctly match the sentence?',
           key: 'isValidated',
           model: "",
           options: [

From 5fd24fc85b72ccd251ce36e4c434c71ee4b24ec0 Mon Sep 17 00:00:00 2001
From: Miguel Nobre <mnobre24@gmail.com>
Date: Tue, 6 Jan 2026 15:33:55 -0500
Subject: [PATCH 05/13] Small changes to spontaneous questions templates

---
 ...ion-creation.html => prompt-creation.html} |  28 +-
 ...uestion.html => record-prompt-answer.html} |  32 +--
 .../verify-answer-recording.html              | 245 +++++++++++++++++
 ...erify-question.html => verify-prompt.html} |  50 ++--
 .../verify-question-recording.html            | 254 ------------------
 5 files changed, 300 insertions(+), 309 deletions(-)
 rename assets/templates/Mozilla/spontaneous-questions/{question-creation.html => prompt-creation.html} (86%)
 rename assets/templates/Mozilla/spontaneous-questions/{record-question.html => record-prompt-answer.html} (84%)
 create mode 100644 assets/templates/Mozilla/spontaneous-questions/verify-answer-recording.html
 rename assets/templates/Mozilla/spontaneous-questions/{verify-question.html => verify-prompt.html} (68%)
 delete mode 100644 assets/templates/Mozilla/spontaneous-questions/verify-question-recording.html

diff --git a/assets/templates/Mozilla/spontaneous-questions/question-creation.html b/assets/templates/Mozilla/spontaneous-questions/prompt-creation.html
similarity index 86%
rename from assets/templates/Mozilla/spontaneous-questions/question-creation.html
rename to assets/templates/Mozilla/spontaneous-questions/prompt-creation.html
index 16242abe..fb20971c 100644
--- a/assets/templates/Mozilla/spontaneous-questions/question-creation.html
+++ b/assets/templates/Mozilla/spontaneous-questions/prompt-creation.html
@@ -1,32 +1,32 @@
 <meta charset="UTF-8">
 <div id="app" style="text-align: center">
-    <h1>Effect AI - Question Creator</h1>
+    <h1>Effect AI - Prompt Creator</h1>
   
     <hr />
   
     <div class="mx-auto" style="max-width: 80%">
 
       <div class="container is-max-desktop">
-        <label class="label has-text-left">Question:</label>
+        <label class="label has-text-left">Prompt:</label>
         <textarea
           class="textarea"
-          placeholder="Enter your question here"
+          placeholder="Enter your prompt here"
           type="text" 
-          v-model="tmpQuestion"
+          v-model="tmpPrompt"
         >
         </textarea>
       </div>
     
-    <p class="is-size-7 mb-2">By clicking this button, you accept that the question contributed here will be added to a publicly available cc-0 licensed dataset.</p>
+    <p class="is-size-7 mb-2">By clicking this button, you accept that the prompt contributed here will be added to a publicly available cc-0 licensed dataset.</p>
 
     <p style="color: red;"
     :class="{'is-hidden mb-3': !tooLong}">
-      Question is too long - Question should be no longer than 15 words
+      Prompt is too long - Prompt should be no longer than 15 words
     </p>
 
     <p style="color: red;"
     :class="{'is-hidden mb-3': !tooShort}">
-      Question is too short - Question should be longer than 4 words
+      Prompt is too short - Prompt should be longer than 4 words
     </p>
 
     <p style="color: red;"
@@ -54,8 +54,8 @@ <h1>Effect AI - Question Creator</h1>
     createApp({
       data() {
         return {
-          title: "Effect AI Question Creator",
-          tmpQuestion: "",
+          title: "Effect AI Prompt Creator",
+          tmpPrompt: "",
           btnLoading: false,
           notComplete: false,
           tooShort: false,
@@ -87,7 +87,7 @@ <h4>Prompt Guidelines</h4>
 
             <h4>What NOT to Include</h4>
             <ul>
-              <li>Questions that require long explanations or life stories.</li>
+              <li>Prompts that require long explanations or life stories.</li>
               <li>Multiple questions in one prompt.</li>
               <li>Requests for names, locations, or identifying details.</li>
               <li>Hypothetical or fictional scenarios.</li>
@@ -174,13 +174,13 @@ <h3>4. Example Prompt Themes</h3>
         async uploadAndSubmit() {
           this.btnLoading = true;
 
-          const cleanQuestion = this.sanitize(this.tmpQuestion).trim();
-          const wordCount = cleanQuestion.split(/\s+/).length;
+          const cleanPrompt = this.sanitize(this.tmpPrompt).trim();
+          const wordCount = cleanPrompt.split(/\s+/).length;
 
           this.tooShort = false;
           this.tooLong = false;
 
-          if(this.tmpQuestion == ""){
+          if(this.tmpPrompt == ""){
             this.notComplete = true
           } else if (wordCount < 5) {
             this.tooShort = true;
@@ -194,7 +194,7 @@ <h3>4. Example Prompt Themes</h3>
                   task: "submit",
                   values: {
                     taskTitle: this.title,
-                    question: cleanQuestion,
+                    prompt: cleanPrompt,
                   },
                 },
                 "*"
diff --git a/assets/templates/Mozilla/spontaneous-questions/record-question.html b/assets/templates/Mozilla/spontaneous-questions/record-prompt-answer.html
similarity index 84%
rename from assets/templates/Mozilla/spontaneous-questions/record-question.html
rename to assets/templates/Mozilla/spontaneous-questions/record-prompt-answer.html
index 565e930f..10638cb4 100644
--- a/assets/templates/Mozilla/spontaneous-questions/record-question.html
+++ b/assets/templates/Mozilla/spontaneous-questions/record-prompt-answer.html
@@ -1,11 +1,11 @@
 <div id="app" style="text-align: center">
-  <h1>Effect AI - Question Answering</h1>
+  <h1>Effect AI - Prompt Answering</h1>
   <hr />
 
   <div class="mx-auto" style="max-width: 80%">
-    <p class="mb-5">Click <b>Record</b> then answer the question aloud</p>
+    <p class="mb-5">Click <b>Record</b> then answer the prompt aloud</p>
     <div class="box">
-      <p class="is-size-4 has-text-weight-semibold" v-cloak>{{ question }}</p>
+      <p class="is-size-4 has-text-weight-semibold" v-cloak>{{ prompt }}</p>
     </div>
 
     <!-- WaveSurfer container -->
@@ -18,7 +18,7 @@ <h1>Effect AI - Question Answering</h1>
     </div>
 
     <p class="is-size-7 mb-2">
-      By clicking this button, you accept that the question contributed here will be added to a publicly available cc-0 licensed dataset.
+      By clicking this button, you accept that the recording contributed here will be added to a publicly available cc-0 licensed dataset.
     </p>
 
     <p style="color: red;" :class="{'is-hidden mb-3': !notComplete}">
@@ -26,7 +26,7 @@ <h1>Effect AI - Question Answering</h1>
     </p>
 
     <p style="color: red;" :class="{'is-hidden mb-3': !fileTooBig}">
-      File size too large. Please stop recording once you've finished answering the question.
+      File size too large. Please stop recording once you've finished answering the prompt.
     </p>
 
     <button @click.prevent="uploadAndSubmit" class="button is-success is-large" :class="{'is-loading': btnLoading}">
@@ -46,8 +46,8 @@ <h1>Effect AI - Question Answering</h1>
 createApp({
   data() {
     return {
-      title: "Effect AI Question Answering",
-      question: (JSON.parse("${result}")).values.question,
+      title: "Effect AI Prompt Answering",
+      prompt: (JSON.parse("${result}")).values.prompt,
       wavesurfer: null,
       recordPlugin: null,
       isRecording: false,
@@ -60,21 +60,21 @@ <h1>Effect AI - Question Answering</h1>
       fileTooBig: false,
       instructions: `
         <div>
-          <h2>Answer a Question</h2>
+          <h2>Answer a Prompt</h2>
           <p>
-            In this task, you will record yourself answering a short question shown on the screen.
+            In this task, you will record yourself answering a short prompt shown on the screen.
             The goal is to collect natural spoken responses that are clear, personal, and brief.
           </p>
 
           <h3>1. Instructions</h3>
           <p>
-            Your job is to answer the question out loud in your own words.
+            Your job is to answer the prompt out loud in your own words.
             These recordings will be used in a speech dataset, so clarity and natural speech are important.
           </p>
 
           <h4>Recording Guidelines</h4>
           <ul>
-            <li>Answer the question naturally, as if speaking to another person.</li>
+            <li>Answer the prompt naturally, as if speaking to another person.</li>
             <li>Keep your response short and focused.</li>
             <li>Do not speak for too long. Try to stay under 30 seconds.</li>
             <li>Speak clearly at a normal, conversational pace.</li>
@@ -84,7 +84,7 @@ <h4>Recording Guidelines</h4>
 
           <h4>What NOT to Do</h4>
           <ul>
-            <li>Do not read the question instead of answering it.</li>
+            <li>Do not read the prompt instead of answering it.</li>
             <li>Do not give very long or detailed stories.</li>
             <li>Do not include names, addresses, or other identifying information.</li>
             <li>Do not add filler sounds for long periods.</li>
@@ -95,7 +95,7 @@ <h3>2. Examples</h3>
 
           <p><strong>✅ Good Answers</strong></p>
           <ul>
-            <li>A short story that answers the question clearly.</li>
+            <li>A short story that answers the prompt clearly.</li>
             <li>Natural speech with a clear beginning and end.</li>
             <li>Focused on one moment or feeling.</li>
           </ul>
@@ -104,7 +104,7 @@ <h3>2. Examples</h3>
           <ul>
             <li>Very long stories that go off topic.</li>
             <li>Silence or only a few unclear words.</li>
-            <li>Reading the question instead of answering it.</li>
+            <li>Reading the prompt instead of answering it.</li>
             <li>Sharing personal details like full names or contact information.</li>
           </ul>
 
@@ -112,7 +112,7 @@ <h3>3. Tips for Success</h3>
           <ul>
             <li>Think briefly about your answer before recording.</li>
             <li>Focus on a single moment or experience.</li>
-            <li>Stop recording once you have answered the question.</li>
+            <li>Stop recording once you have answered the prompt.</li>
             <li>If you make a mistake, you can re-record.</li>
           </ul>
 
@@ -219,7 +219,7 @@ <h3>3. Tips for Success</h3>
           task: "submit",
           values: {
             taskTitle: this.title,
-            question: this.question,
+            prompt: this.prompt,
             recording: "https://" + this.ipfsHOST + "/ipfs/" + this.ipfsCID
           }
         }, "*");
diff --git a/assets/templates/Mozilla/spontaneous-questions/verify-answer-recording.html b/assets/templates/Mozilla/spontaneous-questions/verify-answer-recording.html
new file mode 100644
index 00000000..293eb059
--- /dev/null
+++ b/assets/templates/Mozilla/spontaneous-questions/verify-answer-recording.html
@@ -0,0 +1,245 @@
+<div id="app" style="text-align: center">
+  <h1>Effect AI - Prompt Recording Verification</h1>
+
+  <hr />
+
+  <div class="mx-auto" style="max-width: 80%">
+    <div class="box">
+      <p class="is-size-4 has-text-weight-semibold">{{ prompt }}</p>
+    </div>
+
+    <div class="mb-4">
+      <audio
+        :src="recordingUrl"
+        controls
+        controlslist="nodownload"
+        style="width: 25%;"
+      ></audio>
+    </div>
+
+    <hr />
+
+    <div class="mx-auto" style="text-align: center; max-width: 50%">
+      <h2 class="is-size-4 has-text-weight-semibold mb-5">
+        Recording Metadata
+      </h2>
+
+      <!-- First question always visible -->
+      <div class="field mb-6">
+        <label class="label">{{ metadataFields[0].label }}</label>
+        <div class="buttons is-centered">
+          <button
+            v-for="option in metadataFields[0].options"
+            :key="option.value"
+            class="button"
+            :class="{ 'is-primary': metadataFields[0].model === option.value }"
+            @click="setFieldValue(metadataFields[0], option.value)"
+          >
+            {{ option.text }}
+          </button>
+        </div>
+      </div>
+
+      <!-- Remaining questions only if Yes -->
+      <div
+        v-if="isValidated === 'Yes'"
+        v-for="field in metadataFields.slice(1)"
+        :key="field.label"
+        class="field mb-6"
+      >
+        <label class="label">{{ field.label }}</label>
+        <div class="buttons is-centered">
+          <button
+            v-for="option in field.options"
+            :key="option.value"
+            class="button"
+            :class="{ 'is-primary': field.model === option.value }"
+            @click="setFieldValue(field, option.value)"
+          >
+            {{ option.text }}
+          </button>
+        </div>
+      </div>
+    </div>
+
+    <p style="color: red;" v-if="isIncomplete">
+      Task incomplete - Please complete all required sections
+    </p>
+
+    <button
+      @click.prevent="uploadAndSubmit"
+      class="button is-success is-large"
+      :class="{ 'is-loading': btnLoading }"
+    >
+      Submit
+    </button>
+  </div>
+</div>
+
+<link
+  rel="stylesheet"
+  href="https://unpkg.com/bulma@0.9.4/css/bulma.min.css"
+/>
+
+<script type="module">
+import { createApp, reactive } from "https://unpkg.com/vue@3/dist/vue.esm-browser.js";
+
+createApp({
+  data() {
+    const metadata = reactive({
+      voiceGender: "",
+      voiceClarity: "",
+      backgroundNoise: "",
+      speakingPace: "",
+      accent: "",
+      audioQuality: ""
+    });
+
+    return {
+      title: "Effect AI - Prompt Recording Verification",
+      btnLoading: false,
+      author: "${submissionByPeer}",
+      prompt: JSON.parse("${result}").values.prompt,
+      recordingUrl: JSON.parse("${result}").values.recording,
+      isValidated: "",
+      metadata,
+      metadataFields: [
+        {
+          label: "Does the recording clearly and correctly answer the prompt?",
+          key: "isValidated",
+          model: "",
+          options: [
+            { text: "Yes", value: "Yes" },
+            { text: "No", value: "No" }
+          ]
+        },
+        {
+          label: "Perceived voice gender",
+          key: "voiceGender",
+          model: "",
+          options: [
+            { text: "Male", value: "male" },
+            { text: "Female", value: "female" },
+            { text: "Cannot determine", value: "unknown" }
+          ]
+        },
+        {
+          label: "Is the voice clear and intelligible?",
+          key: "voiceClarity",
+          model: "",
+          options: [
+            { text: "Clear", value: "clear" },
+            { text: "Mostly clear", value: "mostly_clear" },
+            { text: "Unclear", value: "unclear" }
+          ]
+        },
+        {
+          label: "Background noise level",
+          key: "backgroundNoise",
+          model: "",
+          options: [
+            { text: "None", value: "none" },
+            { text: "Low", value: "low" },
+            { text: "Moderate", value: "moderate" },
+            { text: "High", value: "high" }
+          ]
+        },
+        {
+          label: "Speaking pace",
+          key: "speakingPace",
+          model: "",
+          options: [
+            { text: "Slow", value: "slow" },
+            { text: "Normal", value: "normal" },
+            { text: "Fast", value: "fast" }
+          ]
+        },
+        {
+          label: "Noticeable accent",
+          key: "accent",
+          model: "",
+          options: [
+            { text: "None", value: "none" },
+            { text: "Mild", value: "mild" },
+            { text: "Strong", value: "strong" }
+          ]
+        },
+        {
+          label: "Overall audio quality",
+          key: "audioQuality",
+          model: "",
+          options: [
+            { text: "Good", value: "good" },
+            { text: "Acceptable", value: "acceptable" },
+            { text: "Poor", value: "poor" }
+          ]
+        }
+      ],
+      instructions: `
+        <div>
+          <h2>Verify Response to Prompt</h2>
+          <p>
+            Listen to the recording and decide whether the speaker clearly
+            answers the displayed prompt.
+          </p>
+        </div>
+      `
+    };
+  },
+  computed: {
+    isIncomplete() {
+      if (this.isValidated === "") return true;
+      if (this.isValidated === "No") return false;
+      return Object.values(this.metadata).some(value => value === "");
+    }
+  },
+  mounted() {
+    window.top.postMessage(
+      {
+        type: "task-instructions",
+        instructions: this.instructions
+      },
+      "*"
+    );
+  },
+  methods: {
+    setFieldValue(field, value) {
+      if (field.key === "isValidated") {
+        this.isValidated = value;
+      } else {
+        this.metadata[field.key] = value;
+      }
+      field.model = value;
+    },
+    uploadAndSubmit() {
+      this.btnLoading = true;
+
+      if (this.isIncomplete) {
+        this.btnLoading = false;
+        return;
+      }
+
+      try {
+        parent.postMessage(
+          {
+            task: "submit",
+            values: {
+              taskTitle: this.title,
+              author: this.author,
+              prompt: this.prompt,
+              recording: this.recordingUrl,
+              metadata: { ...this.metadata },
+              isValidated: this.isValidated
+            }
+          },
+          "*"
+        );
+      } catch (error) {
+        console.error("Failed to submit", error);
+      }
+
+      this.btnLoading = false;
+    }
+  }
+}).mount("#app");
+</script>
diff --git a/assets/templates/Mozilla/spontaneous-questions/verify-question.html b/assets/templates/Mozilla/spontaneous-questions/verify-prompt.html
similarity index 68%
rename from assets/templates/Mozilla/spontaneous-questions/verify-question.html
rename to assets/templates/Mozilla/spontaneous-questions/verify-prompt.html
index faa2685a..20d508dd 100644
--- a/assets/templates/Mozilla/spontaneous-questions/verify-question.html
+++ b/assets/templates/Mozilla/spontaneous-questions/verify-prompt.html
@@ -1,14 +1,14 @@
 <meta charset="UTF-8">
 <div id="app" style="text-align: center">
-  <h1>Effect AI - Question Verification </h1>
+  <h1>Effect AI - Prompt Verification </h1>
 
   <hr />
 
   <div class="mx-auto" style="max-width: 80%">
 
-  <p class="mb-5">Is this a valid question?</p>
+  <p class="mb-5">Is this a valid prompt?</p>
   <div class="box">
-    <p class="is-size-4 has-text-weight-semibold">{{question}}</p>
+    <p class="is-size-4 has-text-weight-semibold">{{prompt}}</p>
   </div>
 
   <div class="mb-5">
@@ -51,69 +51,69 @@ <h1>Effect AI - Question Verification </h1>
   createApp({
     data() {
       return {
-        title: "Effect AI Question Verifier",
+        title: "Effect AI Prompt Verifier",
         btnLoading: false,
         author: "${submissionByPeer}", 
         // incoming result - {"timestamp": "", "submissionByPeer": "", "taskId": "", "result": "JSON_STRING"}
-        question: (JSON.parse("${result}")).values.question, 
+        prompt: (JSON.parse("${result}")).values.prompt, 
         isValidated: "",
         loading: true,
         notComplete: false,
         instructions: `
           <div>
-            <h2>Verify a Question - Common Voice</h2>
+            <h2>Verify a Prompt</h2>
             <p>
-              In this task, you will review short, simple questions written by other contributors.
-              Your goal is to decide whether each question is clear, natural, and suitable for collecting short spoken responses.
+              In this task, you will review short, simple prompts written by other contributors.
+              Your goal is to decide whether each prompt is clear, natural, and suitable for collecting short spoken responses.
             </p>
 
             <h3>1. Instructions</h3>
             <p>
-              Carefully read each question and decide whether it follows the guidelines below.
-              Mark <strong>“Yes”</strong> if the question is acceptable, <strong>“No”</strong> if it is not.
-              If you are unsure, you may <strong>Skip</strong> the question.
+              Carefully read each prompt and decide whether it follows the guidelines below.
+              Mark <strong>“Yes”</strong> if the prompt is acceptable, <strong>“No”</strong> if it is not.
+              If you are unsure, you may <strong>Skip</strong> the prompt.
             </p>
 
-            <h4>Question Verification Guidelines</h4>
+            <h4>Prompt Verification Guidelines</h4>
             <ul>
-              <li>The question should be clear and easy to understand.</li>
+              <li>The prompt should be clear and easy to understand.</li>
               <li>It should be possible to answer naturally in a short spoken response.</li>
-              <li>The question must use correct grammar, spelling, and punctuation.</li>
+              <li>The prompt must use correct grammar, spelling, and punctuation.</li>
               <li>It should sound natural and conversational.</li>
               <li>Casual English is fine, but phrasing should not be confusing.</li>
             </ul>
 
             <h4>Mark as INCORRECT if you see:</h4>
             <ul>
-              <li>Grammar or spelling mistakes that make the question unclear.</li>
+              <li>Grammar or spelling mistakes that make the prompt unclear.</li>
               <li>Foreign words or non English text.</li>
               <li>Overly complex, abstract, or technical language.</li>
               <li>Personal or identifying information requests.</li>
-              <li>Questions that feel unnatural, incomplete, or hard to answer.</li>
-              <li>Statements or sentences that are not actually questions.</li>
+              <li>Prompts that feel unnatural, incomplete, or hard to answer.</li>
+              <li>Statements or sentences that are not actually prompts.</li>
             </ul>
 
             <h3>2. Examples</h3>
-            <p><strong>✅ Correct Questions</strong></p>
+            <p><strong>✅ Correct Prompts</strong></p>
             <ul>
-              <li>What is a small moment today that made you smile?</li>
+              <li>Tell a small moment today that made you smile.</li>
               <li>How did you feel when you woke up this morning?</li>
               <li>Can you describe a short conversation you had today?</li>
             </ul>
 
-            <p><strong>❌ Incorrect Questions</strong></p>
+            <p><strong>❌ Incorrect Prompts</strong></p>
             <ul>
               <li>Tell me everything about your childhood. (too broad)</li>
-              <li>THIS question has RANDOM capitalization!!! (unnatural formatting)</li>
-              <li>The town has many people living there. (not a question)</li>
+              <li>THIS prompt has RANDOM capitalization!!! (unnatural formatting)</li>
+              <li>The town has many people living there. (this is a statement)</li>
               <li>Je vais au parc ce matin. (foreign language)</li>
               <li>Why is existence meaningful in modern society? (too abstract)</li>
             </ul>
 
             <h3>3. Tips for Success</h3>
             <ul>
-              <li>Read the question out loud and see if it sounds natural.</li>
-              <li>If the question feels awkward or confusing, mark it as incorrect.</li>
+              <li>Read the prompt out loud and see if it sounds natural.</li>
+              <li>If the prompt feels awkward or confusing, mark it as incorrect.</li>
               <li>If answering it would take a long time, it is probably not suitable.</li>
               <li>Trust your instincts and do not overthink small details.</li>
             </ul>
@@ -146,7 +146,7 @@ <h3>3. Tips for Success</h3>
                 values: {
                   taskTitle: this.title,
                   author: this.author,
-                  question: this.question,
+                  prompt: this.prompt,
                   isValidated: this.isValidated
                 },
               },
diff --git a/assets/templates/Mozilla/spontaneous-questions/verify-question-recording.html b/assets/templates/Mozilla/spontaneous-questions/verify-question-recording.html
deleted file mode 100644
index 291e950f..00000000
--- a/assets/templates/Mozilla/spontaneous-questions/verify-question-recording.html
+++ /dev/null
@@ -1,254 +0,0 @@
-<div id="app" style="text-align: center">
-  <h1>Effect AI - Question Recording Verification</h1>
-
-  <hr />
-
-  <div class="mx-auto" style="max-width: 80%">
-    <div class="box">
-      <p class="is-size-4 has-text-weight-semibold">{{ question }}</p>
-    </div>
-
-    <div class="mb-4">
-      <audio :src="recordingUrl" controls controlslist="nodownload" style="width: 25%;"></audio>
-    </div>
-
-    <hr />
-
-    <div class="mx-auto" style="text-align: center; max-width: 50%">
-      <h2 class="is-size-4 has-text-weight-semibold mb-5">Recording Metadata</h2>
-
-      <div v-for="field in metadataFields" :key="field.label" class="field mb-6">
-        <label class="label">{{ field.label }}</label>
-        <div class="buttons is-centered">
-          <button
-            v-for="option in field.options"
-            :key="option.value"
-            class="button"
-            :class="{ 'is-primary': field.model === option.value }"
-            @click="setFieldValue(field, option.value)"
-          >
-            {{ option.text }}
-          </button>
-        </div>
-      </div>
-    </div>
-
-    <p style="color: red;" v-if="isIncomplete">
-      Task incomplete - Please complete all sections of the task
-    </p>
-
-    <button
-      @click.prevent="uploadAndSubmit"
-      class="button is-success is-large"
-      :class="{ 'is-loading': btnLoading }"
-    >
-      Submit
-    </button>
-  </div>
-</div>
-
-<link rel="stylesheet" href="https://unpkg.com/bulma@0.9.4/css/bulma.min.css" />
-
-<script type="module">
-import { createApp, reactive } from "https://unpkg.com/vue@3/dist/vue.esm-browser.js";
-
-createApp({
-  data() {
-    const metadata = reactive({
-      voiceGender: "",
-      voiceClarity: "",
-      backgroundNoise: "",
-      speakingPace: "",
-      accent: "",
-      audioQuality: ""
-    });
-
-    return {
-      title: "Effect AI - Question Recording Verification",
-      btnLoading: false,
-      author: "${submissionByPeer}",
-      question: JSON.parse("${result}").values.question,
-      recordingUrl: JSON.parse("${result}").values.recording,
-      isValidated: "",
-      metadata,
-      metadataFields: [
-        {
-          label: 'Does the recording clearly and correctly answer the question?',
-          key: 'isValidated',
-          model: "",
-          options: [
-            { text: 'Yes', value: 'Yes' },
-            { text: 'No', value: 'No' }
-          ]
-        },
-        {
-          label: 'Perceived voice gender',
-          key: 'voiceGender',
-          model: "",
-          options: [
-            { text: 'Male', value: 'male' },
-            { text: 'Female', value: 'female' },
-            { text: 'Cannot determine', value: 'unknown' }
-          ]
-        },
-        {
-          label: 'Is the voice clear and intelligible?',
-          key: 'voiceClarity',
-          model: "",
-          options: [
-            { text: 'Clear', value: 'clear' },
-            { text: 'Mostly clear', value: 'mostly_clear' },
-            { text: 'Unclear', value: 'unclear' }
-          ]
-        },
-        {
-          label: 'Background noise level',
-          key: 'backgroundNoise',
-          model: "",
-          options: [
-            { text: 'None', value: 'none' },
-            { text: 'Low', value: 'low' },
-            { text: 'Moderate', value: 'moderate' },
-            { text: 'High', value: 'high' }
-          ]
-        },
-        {
-          label: 'Speaking pace',
-          key: 'speakingPace',
-          model: "",
-          options: [
-            { text: 'Slow', value: 'slow' },
-            { text: 'Normal', value: 'normal' },
-            { text: 'Fast', value: 'fast' }
-          ]
-        },
-        {
-          label: 'Noticeable accent',
-          key: 'accent',
-          model: "",
-          options: [
-            { text: 'None', value: 'none' },
-            { text: 'Mild', value: 'mild' },
-            { text: 'Strong', value: 'strong' }
-          ]
-        },
-        {
-          label: 'Overall audio quality',
-          key: 'audioQuality',
-          model: "",
-          options: [
-            { text: 'Good', value: 'good' },
-            { text: 'Acceptable', value: 'acceptable' },
-            { text: 'Poor', value: 'poor' }
-          ]
-        }
-      ],
-      instructions: `
-        <div>
-            <h2>Verify a Recording Answering a Question</h2>
-            <p>
-              In this task, you will listen to short recordings made by other contributors.
-              Your goal is to decide whether the speaker clearly and appropriately answered
-              the question shown.
-            </p>
-
-            <h3>1. Instructions</h3>
-            <ul>
-              <li>Listen carefully to the entire recording.</li>
-              <li>Check that the recording actually answers the displayed question.</li>
-              <li>Make sure the response is clear, understandable, and spoken in natural English.</li>
-              <li>The answer should be brief and focused, not a long explanation.</li>
-              <li>If the audio is cut off, extremely noisy, or does not answer the question, mark it as <strong>No</strong>.</li>
-            </ul>
-
-            <h3>2. Mark as <strong>Yes</strong> if:</h3>
-            <ul>
-              <li>The recording clearly answers the question.</li>
-              <li>The response is easy to understand and spoken naturally.</li>
-              <li>The recording is complete and not cut off.</li>
-              <li>There is no distracting background noise.</li>
-              <li>The response stays reasonably short.</li>
-            </ul>
-
-            <h3>3. Mark as <strong>No</strong> if:</h3>
-            <ul>
-              <li>The speaker does not answer the question.</li>
-              <li>The response is unrelated or extremely vague.</li>
-              <li>The recording is too long or rambles without answering clearly.</li>
-              <li>The audio is too quiet, distorted, or partially missing.</li>
-              <li>There is heavy background noise or overlapping speech.</li>
-              <li>The recording contains personal or identifying information.</li>
-            </ul>
-
-            <h3>4. Mark as <strong>Skip</strong> if:</h3>
-            <ul>
-              <li>You are unsure whether the response adequately answers the question.</li>
-              <li>The audio fails to play or is corrupted.</li>
-            </ul>
-
-            <h3>5. Tips</h3>
-            <ul>
-              <li>Focus on whether the question is answered, not on perfect wording.</li>
-              <li>Minor accents or speech differences are acceptable if the response is clear.</li>
-              <li>Do not judge the content of the answer, only its clarity and relevance.</li>
-              <li>Use headphones if possible.</li>
-            </ul>
-          </div>
-        `
-    };
-  },
-  computed: {
-    isIncomplete() {
-      return (
-        this.isValidated === "" ||
-        Object.values(this.metadata).some(value => value === "")
-      );
-    }
-  },
-  mounted() {
-      window.top.postMessage(
-        {
-          type: "task-instructions",
-          instructions: this.instructions,
-        },
-        "*"
-      );
-    },
-  methods: {
-    setFieldValue(field, value) {
-      if (field.key === "isValidated") {
-        this.isValidated = value;
-      } else {
-        this.metadata[field.key] = value;
-      }
-      field.model = value;
-    },
-    uploadAndSubmit() {
-      this.btnLoading = true;
-      if (this.isIncomplete) {
-        this.btnLoading = false;
-        return;
-      }
-      try {
-        parent.postMessage(
-          {
-            task: "submit",
-            values: {
-              taskTitle: this.title,
-              author: this.author,
-              question: this.question,
-              recording: this.recordingUrl,
-              metadata: { ...this.metadata },
-              isValidated: this.isValidated,
-            },
-          },
-          "*"
-        );
-      } catch (error) {
-        console.error("Failed to submit", error);
-      }
-      this.btnLoading = false;
-    }
-  }
-}).mount("#app");
-</script>

From 4731f742c06d152e62b7a28e7b911da25c6330e3 Mon Sep 17 00:00:00 2001
From: Miguel Nobre <mnobre24@gmail.com>
Date: Fri, 9 Jan 2026 17:27:56 -0500
Subject: [PATCH 06/13] fix: small template fix

---
 .../verify-answer-recording.html              | 47 +++++++++++++++++--
 1 file changed, 44 insertions(+), 3 deletions(-)

diff --git a/assets/templates/Mozilla/spontaneous-questions/verify-answer-recording.html b/assets/templates/Mozilla/spontaneous-questions/verify-answer-recording.html
index 293eb059..4377ca8d 100644
--- a/assets/templates/Mozilla/spontaneous-questions/verify-answer-recording.html
+++ b/assets/templates/Mozilla/spontaneous-questions/verify-answer-recording.html
@@ -92,7 +92,7 @@ <h2 class="is-size-4 has-text-weight-semibold mb-5">
       backgroundNoise: "",
       speakingPace: "",
       accent: "",
-      audioQuality: ""
+      audioQuality: "",
     });
 
     return {
@@ -179,9 +179,50 @@ <h2 class="is-size-4 has-text-weight-semibold mb-5">
         <div>
           <h2>Verify Response to Prompt</h2>
           <p>
-            Listen to the recording and decide whether the speaker clearly
-            answers the displayed prompt.
+            In this task, you will listen to short recordings made by other contributors.
+            Your goal is to decide whether the speaker clearly and appropriately answers
+            the prompt shown.
           </p>
+
+          <h3>1. Instructions</h3>
+          <ul>
+            <li>Listen carefully to the entire recording.</li>
+            <li>Check that the speaker actually responds to the displayed prompt.</li>
+            <li>The response should be understandable, relevant, and spoken clearly.</li>
+            <li>Minor accent or phrasing differences are acceptable if the prompt is answered.</li>
+            <li><strong>If the audio is cut off, extremely noisy, or does not answer the prompt, mark it as Yes = No.</strong></li>
+          </ul>
+
+          <h3>2. Mark as <strong>Yes</strong> if:</h3>
+          <ul>
+            <li>The recording clearly answers the prompt.</li>
+            <li>The response is relevant and not off topic.</li>
+            <li>The speaker is easy to understand.</li>
+            <li>The recording is complete and not cut off.</li>
+          </ul>
+
+          <h3>3. Mark as <strong>No</strong> if:</h3>
+          <ul>
+            <li>The speaker does not answer the prompt.</li>
+            <li>The response is unrelated, extremely vague, or nonsensical.</li>
+            <li>The recording is incomplete or abruptly cut off.</li>
+            <li>The audio is too quiet, distorted, or overwhelmed by background noise.</li>
+            <li>The recording contains personal or identifying information.</li>
+          </ul>
+
+          <h3>4. Mark as <strong>Skip</strong> if:</h3>
+          <ul>
+            <li>You are unsure whether the response adequately answers the prompt.</li>
+            <li>The audio fails to play or is corrupted.</li>
+          </ul>
+
+          <h3>5. Tips</h3>
+          <ul>
+            <li>Focus on whether the prompt is answered, not on perfect wording.</li>
+            <li>Do not judge the opinion or content of the response, only its clarity and relevance.</li>
+            <li>Minor speech differences are acceptable if the response is understandable.</li>
+            <li>Use headphones if possible.</li>
+          </ul>
         </div>
       `
     };

From cb316a4bbfed7dc7ab9ae429f46fbdd94cc1c060 Mon Sep 17 00:00:00 2001
From: Miguel Nobre <mnobre24@gmail.com>
Date: Thu, 15 Jan 2026 12:05:37 -0500
Subject: [PATCH 07/13] tempalte changes and fixes

---
 .../lyric-transcriber.html}                   |   0
 .../verify-music-transcriber.html             |   0
 .../Audius/lyric-transcriber-noWaveform.html  | 352 ++++++++++++++++
 assets/templates/Audius/song-transcriber.html | 398 ++++++++++++++++++
 4 files changed, 750 insertions(+)
 rename assets/templates/Audius/{music-transcriber-DEPRECATED.html => Depricated/lyric-transcriber.html} (100%)
 rename assets/templates/Audius/{ => Depricated}/verify-music-transcriber.html (100%)
 create mode 100644 assets/templates/Audius/lyric-transcriber-noWaveform.html
 create mode 100644 assets/templates/Audius/song-transcriber.html

diff --git a/assets/templates/Audius/music-transcriber-DEPRECATED.html b/assets/templates/Audius/Depricated/lyric-transcriber.html
similarity index 100%
rename from assets/templates/Audius/music-transcriber-DEPRECATED.html
rename to assets/templates/Audius/Depricated/lyric-transcriber.html
diff --git a/assets/templates/Audius/verify-music-transcriber.html b/assets/templates/Audius/Depricated/verify-music-transcriber.html
similarity index 100%
rename from assets/templates/Audius/verify-music-transcriber.html
rename to assets/templates/Audius/Depricated/verify-music-transcriber.html
diff --git a/assets/templates/Audius/lyric-transcriber-noWaveform.html b/assets/templates/Audius/lyric-transcriber-noWaveform.html
new file mode 100644
index 00000000..bcdc5bb4
--- /dev/null
+++ b/assets/templates/Audius/lyric-transcriber-noWaveform.html
@@ -0,0 +1,352 @@
+<div id="app" style="text-align: center">
+    <h1 class="title is-3">Effect AI - Music Transcriber</h1>
+    <p class="subtitle is-6">Listen carefully and correct the lyrics below</p>
+    
+    <hr />
+
+    <div class="mx-auto" style="max-width: 80%">
+        <div class="">
+            <div id="waveform" v-show="!loading" style="height:0; overflow:hidden;"></div>
+        </div>
+
+        <div class="flex items-center justify-between w-full">
+            <div class="flex justify-between mb-3">
+                <button 
+                    @click="playRegion" 
+                    :disabled="!canPlayRegion"
+                    class="button mx-2"
+                    :class="{'is-link': canPlayRegion, 'is-light': !canPlayRegion}"
+                >
+                    {{ canPlayRegion ? '▶ Play Region' : 'Loading...' }}
+                </button>
+            </div>
+
+            <div class="flex items-center">
+                <p class="mb-1">Playback Speed: </p>
+                <button @click="changePlaySpeed(0.25)" class="button mx-2">0.25x</button>
+                <button @click="changePlaySpeed(0.5)" class="button mx-2">0.5x</button>
+                <button @click="changePlaySpeed(0.75)" class="button mx-2">0.75x</button>
+                <button @click="changePlaySpeed(1)" class="button mx-2">1x</button>
+            </div>
+        </div>
+        
+        <hr />
+
+        <!-- <div>
+            <button @click="isOpen = !isOpen" class="button">
+                {{ isOpen ? 'Hide Advanced Controls' : 'Show Advanced Controls' }}
+            </button>
+
+            <div v-show="isOpen" class="mt-2 p-3 border rounded bg-gray-50">
+                <button @click="resetEQ()" class="button is-warning mb-1">Reset EQ</button>
+                <div id="eqSliders"></div>
+            </div>
+        </div> -->
+
+        <hr />
+
+        <div class="container">
+            <label class="label">Transcribed Lyrics</label>
+            <textarea
+                v-model="lyrics"
+                class="textarea"
+                rows="2"
+                placeholder="Edit the AI transcription here..."
+            ></textarea>
+        </div>
+
+        <button
+            @click.prevent="uploadAndSubmit"
+            class="button is-success is-large mt-4"
+            :class="{'is-loading': btnLoading}"
+        >
+            Submit
+        </button>
+    </div>
+
+    <!-- Hidden audio for early playback -->
+    <audio ref="preloadAudio" :src="songSource" preload="auto"></audio>
+</div>
+
+<link rel="stylesheet" href="https://unpkg.com/bulma@0.9.4/css/bulma.min.css" />
+<link href="https://app.effect.network/force-defaults.css" rel="stylesheet" />
+
+<script type="module">
+import { createApp } from "https://unpkg.com/vue@3/dist/vue.esm-browser.js"
+import WaveSurfer from "https://unpkg.com/wavesurfer.js@7/dist/wavesurfer.esm.js"
+import RegionsPlugin from "https://unpkg.com/wavesurfer.js@7/dist/plugins/regions.esm.js"
+
+createApp({
+    data() {
+        return {
+            title: "Effect AI - Music Transcriber",
+            btnLoading: false,
+            isOpen: false,
+            songSource: "${song_url}",
+            lyrics: "${lyrics}",
+            allowedStart: parseFloat("${start}"),
+            allowedEnd: parseFloat("${end}"),
+            jobID: "${jobID}",
+            sliders: [],
+            filters: [],
+            replaySpeed: 1,
+            wavesurfer: null,
+            allowedRegion: null,
+            activeRegion: null,
+            loading: true,
+            loadProgress: 0,
+            isWaveformReady: false,
+            preloadAudio: null,
+            canPlayRegion: false, // controls if region button is enabled
+            instructions: `
+                <div>
+                    <h2>Validate Lyrics - Music Transcription</h2>
+                    <p>
+                        In this task, you'll be listening to a short music clip and reviewing an
+                        AI-generated rough transcription of its lyrics. Your job is to carefully
+                        compare what you hear with the provided text and correct any mistakes so
+                        that the final lyrics are accurate and easy to read.
+                    </p>
+
+                    <p>
+                        <strong>Note:</strong> 
+                        <ul>
+                            <li>
+                                If the lyrics are inaudible or muffled and you can't 
+                                make out what is being said for a part of or the entire region, please input 
+                                <strong>[inaudible]</strong> for that portion.
+                            </li>
+                            <li>
+                                If there is only music playing 
+                                with no sung or spoken words in a portion, please input <strong>[music]</strong> 
+                                for that portion.
+                            </li>
+                        </ul>
+                    </p>
+
+                    <h3>1. Instructions</h3>
+                    <p>
+                        Listen to the audio clip closely and check the transcription provided.
+                        Fix any errors in words, grammar, or phrasing so that the lyrics
+                        accurately reflect what is being sung. If the AI text is already correct,
+                        simply confirm it without changes.
+                    </p>
+
+                    <h4>Correction Guidelines</h4>
+                    <ul>
+                        <li>Write what you clearly hear in the audio, not what you assume.</li>
+                        <li>Keep spelling, grammar, and capitalization correct.</li>
+                        <li>Make sure the lyrics flow naturally as actual song lines.</li>
+                        <li>If the artist clearly pronounces a stylized word (e.g., "'cause" instead of "because"), keep it as is.</li>
+                        <li>Use plain English words only (no invented or nonsense text).</li>
+                        <li>If a word is unclear, mark it with <em>[inaudible]</em>.</li>
+                    </ul>
+
+                    <h4>What NOT to Include</h4>
+                    <ul>
+                        <li>Do not add extra words that aren't in the song.</li>
+                        <li>Do not “correct” artistic or stylistic choices in pronunciation.</li>
+                        <li>Do not change the meaning of the lyrics.</li>
+                        <li>Do not include numbers, emojis, or special characters.</li>
+                        <li>Do not include personal information (like names, emails, or addresses).</li>
+                    </ul>
+
+                    <h3>2. Examples</h3>
+                    <p><strong>✅ Corrected Lyrics</strong></p>
+                    <ul>
+                        <li>AI wrote: "I'm wal king in the rayn"<br/>
+                            Correction: "I'm walking in the rain"</li>
+                        <li>AI wrote: "Love is all wee need"<br/>
+                            Correction: "Love is all we need"</li>
+                        <li>AI wrote: "Because I love you"<br/>
+                            Artist sings: "'Cause I love you"<br/>
+                            Correction: "'Cause I love you"</li>
+                    </ul>
+
+                    <p><strong>❌ Incorrect Corrections</strong></p>
+                    <ul>
+                        <li>Changing words to make them rhyme if they weren't sung that way.</li>
+                        <li>“Correcting” stylized words like "'cause" → "because" when the audio clearly says "'cause."</li>
+                        <li>Adding guesses for missing words instead of marking <em>[inaudible]</em>.</li>
+                        <li>Leaving obvious spelling errors (e.g., "rayn").</li>
+                    </ul>
+
+                    <h3>3. Tips for Success</h3>
+                    <ul>
+                        <li>Play the audio more than once if you're unsure of a word.</li>
+                        <li>Trust your ears - don't rely only on the AI text.</li>
+                        <li>Keep corrections simple and focused on accuracy.</li>
+                    </ul>
+                </div>`
+        }
+    },
+    mounted() {
+
+        window.top.postMessage(
+            {
+            type: 'task-instructions',
+            instructions: this.instructions
+            },
+            "*"
+        );
+
+        this.preloadAudio = this.$refs.preloadAudio
+
+        this.preloadAudio.oncanplay = () => {
+            this.canPlayRegion = true // enable region button for preloaded audio
+        }
+
+        const eqBands = [125, 250, 500, 1000, 2000, 4000, 8000]
+        const regions = RegionsPlugin.create()
+
+        regions.on("region-clicked", (region, e) => {
+            e.stopPropagation()
+            this.playRegion()
+        })
+
+        this.wavesurfer = WaveSurfer.create({
+            container: "#waveform",
+            waveColor: "#ddd",
+            progressColor: "#4f46e5",
+            height: 80,
+            url: this.songSource,
+            plugins: [regions],
+        })
+
+        this.wavesurfer.on("loading", (percent) => {
+            this.loadProgress = percent
+        })
+
+        this.wavesurfer.on("ready", () => {
+            this.loading = false
+            this.isWaveformReady = true
+
+            // Stop any preloaded audio if still playing
+            if (!this.preloadAudio.paused) this.preloadAudio.pause()
+
+            const duration = this.wavesurfer.getDuration()
+            const regionStart = Math.max(0, this.allowedStart - 1)   // 1 second before
+            const regionEnd = Math.min(duration, this.allowedEnd + 1) // 1 second after
+
+            this.allowedRegion = this.wavesurfer.addRegion({
+                start: regionStart,
+                end: regionEnd,
+                color: "rgba(255, 0, 0, 0.3)",
+                drag: false,
+                resize: false,
+            })
+
+            this.canPlayRegion = true // now region button controls WaveSurfer
+        })
+
+        this.wavesurfer.on("audioprocess", () => {
+            if (this.activeRegion) {
+                const currentTime = this.wavesurfer.getCurrentTime()
+                if (currentTime >= this.activeRegion.end) {
+                    this.wavesurfer.pause()
+                    const position = this.activeRegion.start / this.wavesurfer.getDuration()
+                    this.wavesurfer.seekTo(position)
+                    this.activeRegion = null
+                }
+            }
+        })
+
+        const container = document.createElement('p')
+        this.sliders = eqBands.map(() => {
+            const slider = document.createElement('input')
+            slider.type = 'range'
+            slider.orient = 'vertical'
+            slider.style.appearance = 'slider-vertical'
+            slider.style.width = '8%'
+            slider.min = -40
+            slider.max = 20
+            slider.value = 0
+            slider.step = 0.1
+            container.appendChild(slider)
+            return slider
+        })
+        document.getElementById('eqSliders').appendChild(container)
+    },
+    methods: {
+        resetEQ() {
+            if (this.filters?.length && this.sliders?.length) {
+                this.filters.forEach(f => f.gain.value = 0)
+                this.sliders.forEach(s => s.value = 0)
+            }
+        },
+        changePlaySpeed(speed){
+            if (this.isWaveformReady) {
+                this.wavesurfer.setPlaybackRate(speed, true)
+            } else if (this.preloadAudio) {
+                this.preloadAudio.playbackRate = speed
+            }
+        },
+        playRegion() {
+            if (!this.canPlayRegion) return
+
+            // stop both sources first
+            if (!this.preloadAudio.paused) this.preloadAudio.pause()
+            if (this.isWaveformReady && this.wavesurfer.isPlaying()) this.wavesurfer.pause()
+
+            if (this.isWaveformReady && this.allowedRegion) {
+                this.activeRegion = this.allowedRegion
+                const position = this.allowedRegion.start / this.wavesurfer.getDuration()
+                this.wavesurfer.seekTo(position)
+                this.wavesurfer.play()
+            } else if (this.preloadAudio) {
+                this.preloadAudio.currentTime = this.allowedStart
+                this.preloadAudio.play()
+                const stopAt = this.allowedEnd
+                this.preloadAudio.ontimeupdate = () => {
+                    if (this.preloadAudio.currentTime >= stopAt) {
+                        this.preloadAudio.pause()
+                        this.preloadAudio.ontimeupdate = null
+                    }
+                }
+            }
+        },
+        playFull() {
+            if (this.isWaveformReady) {
+                if (!this.wavesurfer.isPlaying()) {
+                    if (!this.preloadAudio.paused) this.preloadAudio.pause()
+                    this.wavesurfer.play()
+                } else {
+                    this.wavesurfer.pause()
+                }
+            } else if (this.preloadAudio) {
+                if (this.preloadAudio.paused) {
+                    this.preloadAudio.play()
+                } else {
+                    this.preloadAudio.pause()
+                }
+            }
+        },
+        async uploadAndSubmit() {
+            this.btnLoading = true
+            if (!this.lyrics.trim()) {
+                this.btnLoading = false
+                return
+            }
+            try {
+                parent.postMessage({
+                    task: "submit",
+                    values: {
+                        taskTitle: this.title,
+                        answer: {
+                            jobID: this.jobID,
+                            song: this.songSource,
+                            allowedStart: this.allowedStart,
+                            allowedEnd: this.allowedEnd,
+                            aiLyrics: "${lyrics}",
+                            verifiedLyrics: this.lyrics,
+                        },
+                    },
+                }, "*")
+            } catch (error) {
+                console.error("Failed to upload", error)
+            }
+            this.btnLoading = false
+        },
+    },
+}).mount("#app")
+</script>
diff --git a/assets/templates/Audius/song-transcriber.html b/assets/templates/Audius/song-transcriber.html
new file mode 100644
index 00000000..6cde65a8
--- /dev/null
+++ b/assets/templates/Audius/song-transcriber.html
@@ -0,0 +1,398 @@
+<link rel="stylesheet" href="https://unpkg.com/bulma@0.9.4/css/bulma.min.css"/>
+<link href="https://app.effect.network/force-defaults.css" rel="stylesheet"/>
+
+<style> 
+  @media (max-width: 1080px) {
+    .mobile-card {
+      flex-direction: column-reverse !important;
+    }
+  }
+
+  @media (max-width: 700px) {
+    .mobile-card2 {
+      flex-direction: column-reverse !important;
+    }
+  }
+
+  .insert-divider {
+    display: flex;
+    justify-content: center;
+    margin: 6px 0 12px;
+  }
+</style>
+
+<div id="app" style="text-align: center">
+  <h1 class="title is-3">Effect AI - Lyric Verification</h1>
+  <p class="subtitle is-6">Listen to the full song and verify all transcribed lyrics</p>
+
+  <hr />
+
+  <div class="mx-auto" style="max-width: 80%">
+    <div class="box">
+      <div v-if="loading" class="has-text-centered mb-2">
+        Loading audio...
+        <progress class="progress is-primary" max="100" :value="loadProgress"></progress>
+      </div>
+      <div id="waveform" v-show="!loading"></div>
+    </div>
+
+    <div v-show="!loading" class="mt-4">
+
+      <template v-for="(seg, index) in parsedSegments" :key="index">
+
+        <div
+          class="p-3 mb-2 has-text-left box"
+          :class="{'has-background-link-light': isActiveSegment(seg)}"
+        >
+
+          <div class="mobile-card is-flex is-justify-content-space-between is-align-items-center mb-2" style="gap: 30px;">
+            <div class="mobile-card2 is-flex is-align-items-center" style="gap: 8px;">
+              <div>
+                <input
+                  type="number"
+                  step="0.01"
+                  class="input is-small"
+                  style="width: 95px"
+                  v-model.number="seg.start"
+                  @change="onTimestampChange(seg, index)"
+                  @dblclick="snapStart(seg)"
+                />
+
+                <span class="mx-1">→</span>
+
+                <input
+                  type="number"
+                  step="0.01"
+                  class="input is-small"
+                  style="width: 95px"
+                  v-model.number="seg.end"
+                  @change="onTimestampChange(seg, index)"
+                  @dblclick="snapEnd(seg)"
+                />
+              </div>
+
+              <span>
+                Current Playback:
+                {{ formatSecondsMs(
+                  seg.currentPlayTime !== undefined
+                    ? seg.currentPlayTime
+                    : (isActiveSegment(seg) ? currentTime : seg.start)
+                ) }}
+              </span>
+            </div>
+
+            <div class="mobile-card2 is-flex is-align-items-center" style="gap: 8px;">
+
+              <div v-if="isActiveSegment(seg)" class="tag is-link">Now Playing</div>
+
+              <button
+                v-if="isActiveSegment(seg)"
+                class="button is-small is-link is-light"
+                @click="playFull"
+              >
+                ▶ / ❚❚
+              </button>
+
+              <button
+                class="button is-small is-success is-light"
+                @click="playRegion(index)"
+              >
+                ▶ Play Region
+              </button>
+
+              <div>
+                <button @click="changePlaySpeed(0.5)" class="button is-small mx-1">0.5x</button>
+                <button @click="changePlaySpeed(1)" class="button is-small mx-1">1x</button>
+                <button @click="changePlaySpeed(2)" class="button is-small mx-1">2x</button>
+              </div>
+
+            </div>
+          </div>
+
+          <div v-if="seg.warnings && seg.warnings.length" class="mb-2">
+            <div v-for="(w, wi) in seg.warnings" :key="wi" class="notification is-warning is-light py-2">
+              {{ w }}
+            </div>
+          </div>
+
+          <div class="mb-2">
+            <div style="display:flex; align-items:center; gap:8px;">
+              <div
+                style="flex:1; height:8px; background:#eee; border-radius:4px; position:relative; overflow:hidden; cursor:pointer"
+                @click="seekToSegmentPosition(index, $event)"
+              >
+                <div
+                  :style="{
+                    width: segmentProgress(seg) + '%',
+                    height: '100%',
+                    position: 'absolute',
+                    left: 0,
+                    top: 0,
+                    background: 'rgba(79,70,229,0.65)'
+                  }"
+                ></div>
+              </div>
+
+              <div style="min-width:70px; text-align:right; font-size:0.9rem;">
+                {{ formatSecondsMs(
+                  seg.currentPlayTime !== undefined
+                    ? seg.currentPlayTime
+                    : (isActiveSegment(seg) ? currentTime : seg.start)
+                ) }}
+              </div>
+            </div>
+          </div>
+
+          <textarea
+            v-model="seg.lyrics"
+            class="textarea mt-2"
+            rows="2"
+            placeholder="Edit or confirm this lyric section..."
+          ></textarea>
+        </div>
+
+        <div
+          v-if="index < parsedSegments.length - 1"
+          class="insert-divider"
+        >
+          <button
+            class="button is-small is-light"
+            title="Insert lyric section here"
+            @click="insertSegmentAfter(index)"
+          >
+            ＋
+          </button>
+        </div>
+
+      </template>
+    </div>
+
+    <p style="color: red;" :class="{ 'is-hidden mb-3': !hasAnyWarnings() }">
+      Task incomplete - Please resolve all warnings before submitting.
+    </p>
+
+    <button
+      v-show="!loading"
+      @click.prevent="uploadAndSubmit"
+      class="button is-success is-large mt-4"
+      :class="{'is-loading': btnLoading}"
+    >
+      Submit Verified Lyrics
+    </button>
+  </div>
+
+  <script type="module">
+    import { createApp } from "https://unpkg.com/vue@3/dist/vue.esm-browser.js";
+    import WaveSurfer from "https://unpkg.com/wavesurfer.js@7/dist/wavesurfer.esm.js";
+    import RegionsPlugin from "https://unpkg.com/wavesurfer.js@7/dist/plugins/regions.esm.js";
+
+    createApp({
+      data() {
+        return {
+          songSource: "${song_url}",
+          jobID: "${jobID}",
+          rawSegments: "${segments}",
+          title: "Effect AI - Lyric Verification",
+          parsedSegments: [],
+          wavesurfer: null,
+          regionsPlugin: null,
+          currentTime: 0,
+          currentSegment: null,
+          loadProgress: 0,
+          loading: true,
+          btnLoading: false,
+          playbackRate: 1,
+          playingIndex: null,
+          minSegmentDuration: 0.12
+        };
+      },
+
+      mounted() {
+        this.parsedSegments = JSON.parse(this.rawSegments).map(s => ({
+          ...s,
+          warnings: [],
+          currentPlayTime: undefined
+        }));
+
+        this.regionsPlugin = RegionsPlugin.create();
+
+        this.wavesurfer = WaveSurfer.create({
+          container: "#waveform",
+          waveColor: "#ddd",
+          progressColor: "#4f46e5",
+          height: 100,
+          url: this.songSource,
+          plugins: [this.regionsPlugin]
+        });
+
+        this.wavesurfer.on("loading", p => this.loadProgress = p);
+
+        this.wavesurfer.on("ready", () => {
+          this.loading = false;
+          this.refreshRegions();
+        });
+
+        this.wavesurfer.on("audioprocess", time => {
+          this.currentTime = time;
+
+          this.currentSegment =
+            this.parsedSegments.find(s => time >= s.start && time <= s.end) || null;
+
+          this.parsedSegments.forEach(seg => {
+            seg.currentPlayTime =
+              time >= seg.start && time <= seg.end ? time : undefined;
+          });
+
+          if (this.playingIndex !== null) {
+            const seg = this.parsedSegments[this.playingIndex];
+            if (seg && time >= seg.end) {
+              this.wavesurfer.pause();
+              this.playingIndex = null;
+            }
+          }
+        });
+      },
+
+      methods: {
+        insertSegmentAfter(index) {
+          const cur = this.parsedSegments[index];
+          const next = this.parsedSegments[index + 1];
+
+          let start;
+          if (next && next.start - cur.end >= this.minSegmentDuration * 2) {
+            start = (cur.end + next.start) / 2;
+          } else {
+            start = cur.end + 0.05;
+          }
+
+          const end = start + this.minSegmentDuration;
+
+          this.parsedSegments.splice(index + 1, 0, {
+            start: Number(start.toFixed(2)),
+            end: Number(end.toFixed(2)),
+            lyrics: "",
+            warnings: [],
+            currentPlayTime: undefined
+          });
+
+          this.checkOverlaps();
+          this.refreshRegions();
+        },
+
+        playFull() {
+          this.wavesurfer.playPause();
+        },
+
+        changePlaySpeed(rate) {
+          this.playbackRate = rate;
+          this.wavesurfer.setPlaybackRate(rate, true);
+        },
+
+        playRegion(index) {
+          const seg = this.parsedSegments[index];
+          const pct = seg.start / this.wavesurfer.getDuration();
+          this.wavesurfer.seekTo(pct);
+          this.playingIndex = index;
+          this.wavesurfer.play();
+        },
+
+        hasAnyWarnings() {
+          return this.parsedSegments.some(s => s.warnings.length);
+        },
+
+        refreshRegions() {
+          const regions = this.wavesurfer.getActivePlugins().regions;
+          regions.clearRegions();
+
+          this.parsedSegments.forEach((seg, i) => {
+            regions.addRegion({
+              id: "seg-" + i,
+              start: seg.start,
+              end: seg.end,
+              color: "rgba(79,70,229,0.12)",
+              drag: false,
+              resize: false
+            });
+          });
+        },
+
+        checkOverlaps() {
+          this.parsedSegments.forEach(s => {
+            s.warnings = s.warnings.filter(w => !w.includes("Overlap"));
+          });
+
+          for (let i = 0; i < this.parsedSegments.length - 1; i++) {
+            if (this.parsedSegments[i].end > this.parsedSegments[i + 1].start) {
+              this.parsedSegments[i].warnings.push("Overlap detected with next segment.");
+              this.parsedSegments[i + 1].warnings.push("Overlap detected with previous segment.");
+            }
+          }
+        },
+
+        segmentProgress(seg) {
+          const dur = Math.max(this.minSegmentDuration, seg.end - seg.start);
+          const t = seg.currentPlayTime ?? seg.start;
+          return ((Math.min(seg.end, Math.max(seg.start, t)) - seg.start) / dur) * 100;
+        },
+
+        seekToSegmentPosition(index, event) {
+          const seg = this.parsedSegments[index];
+          const rect = event.currentTarget.getBoundingClientRect();
+          const pct = (event.clientX - rect.left) / rect.width;
+          const target = seg.start + pct * (seg.end - seg.start);
+          this.wavesurfer.seekTo(target / this.wavesurfer.getDuration());
+          this.playingIndex = null;
+        },
+
+        onTimestampChange(seg) {
+          seg.warnings = [];
+          if (seg.end <= seg.start) seg.warnings.push("End time must be after start.");
+          this.checkOverlaps();
+          this.refreshRegions();
+        },
+
+        snapStart(seg) {
+          seg.start = Number(this.currentTime.toFixed(2));
+          if (seg.end <= seg.start) seg.end = seg.start + this.minSegmentDuration;
+          this.checkOverlaps();
+          this.refreshRegions();
+        },
+
+        snapEnd(seg) {
+          seg.end = Number(this.currentTime.toFixed(2));
+          if (seg.end <= seg.start) seg.end = seg.start + this.minSegmentDuration;
+          this.checkOverlaps();
+          this.refreshRegions();
+        },
+
+        formatSecondsMs(v) {
+          return v === undefined ? "--.--" : v.toFixed(2);
+        },
+
+        isActiveSegment(seg) {
+          return this.currentSegment === seg;
+        },
+
+        uploadAndSubmit() {
+          if (this.hasAnyWarnings()) return;
+
+          parent.postMessage({
+            task: "submit",
+            values: {
+              taskTitle: this.title,
+              answer: {
+                jobID: this.jobID,
+                song: this.songSource,
+                verifiedLyrics: this.parsedSegments.map(s => ({
+                  start: Number(s.start.toFixed(2)),
+                  end: Number(s.end.toFixed(2)),
+                  lyrics: (s.lyrics || "").trim()
+                }))
+              }
+            }
+          }, "*");
+        }
+      }
+    }).mount("#app");
+  </script>
+</div>

From 01528a9802ceb113d9554fa5fb676fa39d32de14 Mon Sep 17 00:00:00 2001
From: Miguel Nobre <mnobre24@gmail.com>
Date: Wed, 28 Jan 2026 12:06:33 -0500
Subject: [PATCH 08/13] song validation task rework

---
 .../{ => Depricated}/song-transcriber.html    |   0
 assets/templates/Audius/song-validation.html  | 949 ++++++++++++++++++
 2 files changed, 949 insertions(+)
 rename assets/templates/Audius/{ => Depricated}/song-transcriber.html (100%)
 create mode 100644 assets/templates/Audius/song-validation.html

diff --git a/assets/templates/Audius/song-transcriber.html b/assets/templates/Audius/Depricated/song-transcriber.html
similarity index 100%
rename from assets/templates/Audius/song-transcriber.html
rename to assets/templates/Audius/Depricated/song-transcriber.html
diff --git a/assets/templates/Audius/song-validation.html b/assets/templates/Audius/song-validation.html
new file mode 100644
index 00000000..31cb8b25
--- /dev/null
+++ b/assets/templates/Audius/song-validation.html
@@ -0,0 +1,949 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8" />
+  <title>Effect AI - Lyric Verification</title>
+
+  <link rel="stylesheet" href="https://unpkg.com/bulma@0.9.4/css/bulma.min.css" />
+
+  <style>
+    .lyrics-text {
+      font-size: 1.25rem;
+      line-height: 1.6;
+    }
+
+    textarea.lyrics-text {
+      resize: none;
+      overflow: hidden;
+      min-height: 3.5em;
+    }
+
+    .segment-card {
+      cursor: pointer;
+    }
+
+    .segment-card.is-active {
+      border: 2px solid #3273dc !important;
+    }
+
+    .segment-card.has-warnings {
+      border: 2px solid #f14668;
+      background-color: #feecf0;
+    }
+
+    .segment-card.has-gap-warning {
+      border: 2px solid #ffdd57;
+      background-color: #fffbeb;
+    }
+
+    .warning-tag {
+      font-size: 0.75rem;
+      margin-bottom: 0.5rem;
+    }
+
+    .time-label {
+      font-size: 0.75rem;
+      font-weight: 600;
+      color: #363636;
+      margin-bottom: 0.25rem;
+    }
+
+    .segment-times input {
+      width: 70px;
+      font-size: 1rem;
+    }
+
+    .current-time {
+      font-family: monospace;
+      font-size: 1.1rem;
+      font-weight: bold;
+      color: #3273dc;
+    }
+
+    .segment-controls {
+      display: flex;
+      align-items: flex-start;
+      gap: 12px;
+      flex-wrap: wrap;
+    }
+
+    .time-inputs-group {
+      display: flex;
+      align-items: flex-start;
+      gap: 12px;
+      flex: 1;
+    }
+
+    .time-input-wrapper {
+      display: flex;
+      flex-direction: column;
+    }
+
+    .current-time-wrapper {
+      display: flex;
+      flex-direction: column;
+    }
+
+    .delete-btn {
+      min-width: 36px;
+      height: 36px;
+      font-size: 1.2rem;
+      font-weight: bold;
+      margin-left: auto;
+    }
+
+    .desktop-layout {
+      display: flex;
+      align-items: flex-start;
+      gap: 12px;
+    }
+
+    .mobile-layout {
+      display: none;
+    }
+
+    @media (max-width: 768px) {
+      .lyrics-text {
+        font-size: 1rem;
+      }
+
+      textarea.lyrics-text {
+        min-height: 6em;
+      }
+
+      .segment-times input {
+        width: 80px;
+        font-size: 0.95rem;
+      }
+
+      .current-time {
+        font-size: 0.95rem;
+      }
+
+      .desktop-layout {
+        display: none;
+      }
+
+      .mobile-layout {
+        display: flex;
+        flex-direction: column;
+        gap: 12px;
+      }
+
+      .mobile-timestamps {
+        display: flex;
+        gap: 12px;
+        width: 100%;
+      }
+
+      .mobile-current-time {
+        width: 100%;
+      }
+
+      .mobile-delete {
+        width: 100%;
+      }
+
+      .button.is-small {
+        font-size: 0.75rem;
+      }
+
+      .warning-tag {
+        font-size: 0.65rem;
+      }
+
+      .delete-btn {
+        height: 40px;
+        font-size: 1.1rem;
+        width: 100%;
+        margin-left: 0;
+      }
+
+      .mobile-stack {
+        flex-direction: column !important;
+        align-items: stretch !important;
+        gap: 10px !important;
+      }
+
+      .mobile-full-width {
+        width: 100% !important;
+      }
+    }
+  </style>
+</head>
+
+<body>
+<div id="app" class="section">
+  <div class="container">
+
+    <h1 class="title is-4">{{ title }}</h1>
+
+    <!-- Loading -->
+    <div v-if="loading" class="box has-text-centered mb-3">
+      Loading audio…
+      <progress class="progress is-primary" max="100" :value="loadProgress"></progress>
+    </div>
+
+    <!-- Waveform -->
+    <div id="waveform" v-show="!loading" class="mb-4"></div>
+
+    <!-- Live lyrics panel -->
+    <div class="box mb-5" v-show="!loading">
+      <div class="columns is-mobile is-vcentered mb-3 mobile-stack">
+        <div class="column is-narrow mobile-full-width">
+          <button class="button is-link is-light mobile-full-width" @click="toggleLivePlay">
+            {{ isPlaying ? "⏸ Pause" : "▶ Play" }}
+          </button>
+        </div>
+
+        <div class="column is-narrow mobile-full-width">
+          <button
+            class="button is-primary is-light mobile-full-width"
+            :class="{ 'is-small': isMobile }"
+            @click="addSection"
+          >
+            ➕ Add Section
+          </button>
+        </div>
+
+        <div class="column is-narrow mobile-full-width" style="display: flex; gap: 8px;">
+          <button class="button is-light is-small" @click="prevSegment" style="flex: 1;">
+            ⟵ Prev
+          </button>
+          <button class="button is-light is-small" @click="nextSegment" style="flex: 1;">
+            Next ⟶
+          </button>
+        </div>
+
+        <div class="column mobile-full-width">
+          <span class="current-time">Current: {{ formatTime(currentTime) }}</span>
+        </div>
+      </div>
+
+      <div class="columns is-mobile mb-3">
+        <div class="column">
+          <div class="time-label">Start</div>
+          <input class="input" type="number" step="0.01" v-model.number="liveStart" />
+        </div>
+
+        <div class="column">
+          <div class="time-label">End</div>
+          <input class="input" type="number" step="0.01" v-model.number="liveEnd" />
+        </div>
+      </div>
+
+      <textarea
+        class="textarea lyrics-text"
+        rows="2"
+        v-model="liveLyrics"
+        placeholder="Edit current lyrics"
+        @input="autoResize($event)"
+      ></textarea>
+    </div>
+
+    <!-- Segment cards -->
+    <div
+      v-show="!loading"
+      v-for="(seg, i) in segments"
+      :key="i"
+      class="card mb-4 segment-card"
+      :class="{ 
+        'is-active': i === currentIndex, 
+        'has-warnings': seg.hasOverlap,
+        'has-gap-warning': seg.hasGap && !seg.hasOverlap
+      }"
+      @click="playSegmentDirect(i)"
+    >
+      <div class="card-content">
+
+        <!-- Warning tags -->
+        <div v-if="seg.warnings && seg.warnings.length > 0" class="mb-3">
+          <span 
+            v-for="(warning, wi) in seg.warnings" 
+            :key="wi" 
+            class="tag is-danger is-light warning-tag mr-2"
+          >
+            ⚠️ {{ warning }}
+          </span>
+        </div>
+
+        <!-- Desktop Layout -->
+        <div class="desktop-layout mb-2">
+          <!-- Play button -->
+          <button class="button is-small is-link" @click.stop="toggleSegmentPlay(i)">
+            {{ isPlaying && currentIndex === i ? "⏸" : "▶" }}
+          </button>
+
+          <!-- Time inputs group -->
+          <div class="time-inputs-group">
+            <div class="time-input-wrapper">
+              <div class="time-label">Start</div>
+              <input 
+                class="input is-small"
+                type="number" 
+                step="0.01" 
+                v-model.number="seg.start"
+                @input="onSegmentEdit"
+                style="width: 80px;"
+              />
+            </div>
+
+            <div class="time-input-wrapper">
+              <div class="time-label">End</div>
+              <input 
+                class="input is-small"
+                type="number" 
+                step="0.01" 
+                v-model.number="seg.end"
+                @input="onSegmentEdit"
+                style="width: 80px;"
+              />
+            </div>
+            
+            <div class="current-time-wrapper">
+              <div class="time-label">Current</div>
+              <span class="current-time">{{ formatTime(currentTime) }}</span>
+            </div>
+          </div>
+
+          <!-- Delete button -->
+          <button 
+            class="button is-small is-danger is-light delete-btn" 
+            @click.stop="deleteSegment(i)"
+            title="Delete this segment"
+          >
+            ✕
+          </button>
+        </div>
+
+        <!-- Mobile Layout -->
+        <div class="mobile-layout mb-2">
+          <!-- Play button -->
+          <button class="button is-small is-link" @click.stop="toggleSegmentPlay(i)" style="width: 100%;">
+            {{ isPlaying && currentIndex === i ? "⏸ Pause" : "▶ Play" }}
+          </button>
+
+          <!-- Start/End timestamps -->
+          <div class="mobile-timestamps">
+            <div class="time-input-wrapper" style="flex: 1;">
+              <div class="time-label">Start</div>
+              <input 
+                class="input is-small"
+                type="number" 
+                step="0.01" 
+                v-model.number="seg.start"
+                @input="onSegmentEdit"
+                style="width: 100%;"
+              />
+            </div>
+
+            <div class="time-input-wrapper" style="flex: 1;">
+              <div class="time-label">End</div>
+              <input 
+                class="input is-small"
+                type="number" 
+                step="0.01" 
+                v-model.number="seg.end"
+                @input="onSegmentEdit"
+                style="width: 100%;"
+              />
+            </div>
+          </div>
+
+          <!-- Current time -->
+          <div class="mobile-current-time">
+            <div class="time-label">Current</div>
+            <span class="current-time">{{ formatTime(currentTime) }}</span>
+          </div>
+        </div>
+
+        <textarea
+          class="textarea lyrics-text"
+          rows="2"
+          v-model="seg.lyrics"
+          @focus="currentIndex = i"
+          @input="autoResize($event); onSegmentEdit()"
+        ></textarea>
+
+        <!-- Mobile delete button (appears after textarea) -->
+        <div class="mobile-layout mt-2">
+          <button 
+            class="button is-small is-danger is-light delete-btn" 
+            @click.stop="deleteSegment(i)"
+            title="Delete this segment"
+          >
+            ✕ Delete Segment
+          </button>
+        </div>
+
+      </div>
+    </div>
+
+    <!-- Submit Section -->
+    <div class="has-text-centered mt-5" v-show="!loading">
+      <p v-if="hasRedWarnings()" class="has-text-danger mb-3">
+        ⚠️ Please resolve all overlap warnings before submitting
+      </p>
+      
+      <div class="field mb-4">
+        <label class="checkbox" style="font-size: 1.1rem;">
+          <input type="checkbox" v-model="confirmationChecked" class="mr-2">
+          I confirm I have checked the whole song and validated all lyrics
+        </label>
+      </div>
+      
+      <button
+        @click.prevent="uploadAndSubmit"
+        class="button is-success is-large"
+        :class="{'is-loading': btnLoading}"
+        :disabled="!canSubmit()"
+      >
+        Submit Verified Lyrics
+      </button>
+    </div>
+
+  </div>
+</div>
+
+<script type="module">
+import { createApp } from "https://unpkg.com/vue@3/dist/vue.esm-browser.js";
+import WaveSurfer from "https://unpkg.com/wavesurfer.js@7/dist/wavesurfer.esm.js";
+
+createApp({
+  data() {
+    return {
+      title: "Effect AI - Lyric Verification",
+      songSource: "${song_url}",
+      rawSegments: "${segments}",
+      jobID: "${jobID}",
+
+      segments: [],
+      currentIndex: -1,
+      isPlaying: false,
+
+      wavesurfer: null,
+      regionsPlugin: null,
+      loading: true,
+      loadProgress: 0,
+      btnLoading: false,
+
+      liveStart: null,
+      liveEnd: null,
+      liveLyrics: "",
+      isMobile: window.innerWidth <= 768,
+      currentTime: 0,
+      gapThreshold: 0.5, // seconds - gaps larger than this will be flagged
+      confirmationChecked: false,
+      instructions: `
+        <div>
+        <h2>Verify and Correct Song Lyrics with Timestamps</h2>
+
+        <p>
+            In this task, you will listen to a full song and verify that the provided lyric segments are accurate,
+            complete, and correctly aligned with the audio. The lyrics and timestamps shown 
+            <strong>may contain errors, gaps, or misalignments</strong>. Your work ensures the final output matches 
+            the song as closely as possible.
+        </p>
+
+        <h3>1. Your Objective</h3>
+        <p>
+            Review each lyric segment by listening to the song and comparing it to what you hear. You must:
+        </p>
+        <ul>
+            <li>Correct any incorrect, misspelled, or missing lyrics</li>
+            <li>Adjust timestamps so they align with when lyrics are actually sung</li>
+            <li>Add new segments for any missing sections of the song</li>
+            <li>Remove segments that are incorrect or unnecessary</li>
+            <li>Resolve all warnings before submitting</li>
+        </ul>
+
+        <h3>2. How to Use the Interface</h3>
+
+        <h4>Playing and Navigating</h4>
+        <ul>
+            <li>Use the <strong>Play/Pause</strong> button in the top panel to control playback</li>
+            <li>Click on any segment card to jump to that section of the song</li>
+            <li>Use <strong>Prev/Next</strong> buttons to move between segments</li>
+            <li>The waveform shows visual markers for each segment (blue = good, yellow = gap, red = overlap)</li>
+            <li>The currently playing segment is highlighted with a <strong>blue border</strong></li>
+        </ul>
+
+        <h4>Editing Segments</h4>
+        <ul>
+            <li><strong>Start/End times:</strong> Adjust these numbers to match when the lyrics are sung. You can type directly or use the up/down arrows</li>
+            <li><strong>Lyrics text:</strong> Edit the text to match exactly what you hear in the song</li>
+            <li><strong>Current time:</strong> Shows where you are in the song playback - use this to help set accurate timestamps</li>
+            <li>The top panel shows the currently selected segment for quick editing</li>
+        </ul>
+
+        <h4>Adding New Segments</h4>
+        <ul>
+            <li>Click <strong>"+ Add Section"</strong> to create a new lyric segment at the current playback position</li>
+            <li>The new segment will automatically appear in the correct chronological position</li>
+            <li>Set the start/end times and enter the lyrics for that section</li>
+        </ul>
+
+        <h4>Deleting Segments</h4>
+        <ul>
+            <li>Click the <strong>✕</strong> button on any segment to remove it</li>
+            <li>Only delete segments that are clearly wrong or duplicate</li>
+        </ul>
+
+        <h3>3. Understanding Warnings</h3>
+
+        <h4>⚠️ Empty lyrics - please add text</h4>
+        <p>This segment has no lyrics entered. Either add the lyrics or delete the segment if it's not needed.</p>
+
+        <h4>⚠️ Gap of X.XXs before next segment (Yellow highlight)</h4>
+        <p>
+            There is a time gap between this segment and the next one. If lyrics are being sung during this gap, 
+            add a new segment. If the song is instrumental or silent during this time, you can ignore this warning.
+        </p>
+
+        <h4>⚠️ Overlaps with next/previous segment (Red highlight)</h4>
+        <p>
+            This segment's timestamps overlap with another segment. Adjust the start/end times so segments 
+            don't overlap - each moment in the song should belong to only one segment.
+        </p>
+
+        <h4>⚠️ End time must be after start time</h4>
+        <p>The end timestamp is before or equal to the start timestamp. Fix the timestamps so end comes after start.</p>
+
+        <h3>4. Lyric Guidelines</h3>
+
+        <h4>What to Include</h4>
+        <ul>
+            <li>Write exactly what you hear - don't guess or assume</li>
+            <li>Keep artistic pronunciation (e.g., "'cause" not "because" if that's what's sung)</li>
+            <li>Use proper spelling, grammar, and capitalization</li>
+            <li>Include repeated words/phrases if they're actually sung</li>
+        </ul>
+
+        <h4>Special Cases</h4>
+        <ul>
+            <li><strong>[inaudible]</strong> - Use this if lyrics are muffled or unclear and you can't make out the words</li>
+            <li><strong>[music]</strong> or leave empty - Use for instrumental sections with no vocals</li>
+            <li>Background vocals can be included in parentheses if clearly audible: "(oh yeah)"</li>
+        </ul>
+
+        <h4>What NOT to Do</h4>
+        <ul>
+            <li>Don't add words that aren't actually sung</li>
+            <li>Don't "correct" intentional stylistic choices in pronunciation</li>
+            <li>Don't include emojis, special characters, or personal information</li>
+            <li>Don't leave obvious spelling errors from the AI transcription</li>
+        </ul>
+
+        <h3>5. Quality Checklist Before Submitting</h3>
+        <ul>
+            <li>✓ I've listened to the entire song</li>
+            <li>✓ All lyrics accurately match what is sung</li>
+            <li>✓ Timestamps are reasonably aligned (within ~0.5 seconds)</li>
+            <li>✓ No large gaps in coverage unless the song is instrumental</li>
+            <li>✓ All warning messages are resolved or confirmed as acceptable</li>
+            <li>✓ No overlapping segments</li>
+            <li>✓ No empty lyric fields (unless intentionally marking instrumental sections)</li>
+        </ul>
+
+        <h3>6. Tips for Success</h3>
+        <ul>
+            <li>Listen to each segment multiple times if needed - accuracy matters more than speed</li>
+            <li>Use the visual waveform to spot gaps and overlaps quickly</li>
+            <li>Start from the beginning and work through systematically</li>
+            <li>Pay attention to the color coding: yellow = gaps to review, red = overlaps to fix</li>
+            <li>The current time display helps you set precise timestamps</li>
+        </ul>
+
+        <p>
+            <strong>Your careful work helps create high-quality lyric datasets.</strong> 
+            Take your time to ensure accuracy - it's okay if some sections have no vocals, 
+            but all sung lyrics should be captured and correctly timestamped.
+        </p>
+
+        <p>Thank you for your attention to detail!</p>
+        </div>
+        `
+    };
+  },
+
+  async mounted() {
+
+    window.top.postMessage(
+      {
+        type: 'task-instructions',
+        instructions: this.instructions
+      },
+    "*"
+    );
+
+    this.segments = JSON.parse(this.rawSegments).map(seg => ({
+      start: Number(seg.start),
+      end: Number(seg.end),
+      lyrics: seg.lyrics || "",
+      warnings: [],
+      hasOverlap: false,
+      hasGap: false
+    })) || [];
+
+    // Initialize live panel with first segment if available
+    if (this.segments.length > 0) {
+      this.currentIndex = 0;
+      const firstSeg = this.segments[0];
+      this.liveStart = firstSeg.start;
+      this.liveEnd = firstSeg.end;
+      this.liveLyrics = firstSeg.lyrics;
+    }
+
+    // Import RegionsPlugin
+    let RegionsPlugin = null;
+    try {
+      const module = await import("https://unpkg.com/wavesurfer.js@7/dist/plugins/regions.esm.js");
+      RegionsPlugin = module.default;
+    } catch (e) {
+      console.warn("RegionsPlugin not available:", e);
+    }
+
+    this.regionsPlugin = RegionsPlugin ? RegionsPlugin.create() : null;
+
+    this.wavesurfer = WaveSurfer.create({
+      container: "#waveform",
+      waveColor: "#ddd",
+      progressColor: "#4f46e5",
+      height: 90,
+      url: this.songSource,
+      plugins: this.regionsPlugin ? [this.regionsPlugin] : []
+    });
+
+    this.wavesurfer.on("loading", p => this.loadProgress = p);
+
+    this.wavesurfer.on("ready", () => {
+      this.loading = false;
+      this.validateAllSegments();
+      this.refreshRegions();
+    });
+
+    this.wavesurfer.on("audioprocess", time => {
+      this.currentTime = time;
+      const idx = this.segments.findIndex(
+        s => time >= s.start && time < s.end
+      );
+      if (idx !== -1) this.currentIndex = idx;
+      this.isPlaying = this.wavesurfer.isPlaying();
+    });
+
+    this.wavesurfer.on("timeupdate", time => {
+      this.currentTime = time;
+    });
+
+    window.addEventListener("resize", () => {
+      this.isMobile = window.innerWidth <= 768;
+    });
+  },
+
+  methods: {
+    autoResize(e) {
+      e.target.style.height = "auto";
+      e.target.style.height = e.target.scrollHeight + "px";
+    },
+
+    formatTime(seconds) {
+      if (seconds === undefined || isNaN(seconds)) return "--.--";
+      return seconds.toFixed(2);
+    },
+
+    toggleLivePlay() {
+      if (this.wavesurfer.isPlaying()) {
+        this.wavesurfer.pause();
+        this.isPlaying = false;
+      } else {
+        if (this.currentIndex !== -1) {
+          this.wavesurfer.seekTo(
+            this.segments[this.currentIndex].start /
+            this.wavesurfer.getDuration()
+          );
+        }
+        this.wavesurfer.play();
+        this.isPlaying = true;
+      }
+    },
+
+    toggleSegmentPlay(index) {
+      if (this.currentIndex === index && this.wavesurfer.isPlaying()) {
+        this.wavesurfer.pause();
+        this.isPlaying = false;
+        return;
+      }
+      this.playSegmentDirect(index);
+    },
+
+    playSegmentDirect(index) {
+      const seg = this.segments[index];
+      this.wavesurfer.seekTo(seg.start / this.wavesurfer.getDuration());
+      this.wavesurfer.play();
+      this.currentIndex = index;
+      this.isPlaying = true;
+    },
+
+    prevSegment() {
+      if (this.currentIndex > 0) {
+        this.playSegmentDirect(this.currentIndex - 1);
+      }
+    },
+
+    nextSegment() {
+      if (this.currentIndex < this.segments.length - 1) {
+        this.playSegmentDirect(this.currentIndex + 1);
+      }
+    },
+
+    addSection() {
+      const t = this.wavesurfer.getCurrentTime();
+      const newSegment = { start: t, end: t + 2, lyrics: "", warnings: [], hasOverlap: false, hasGap: false };
+      
+      // Find the correct position to insert based on start time
+      let insertIndex = this.segments.findIndex(seg => seg.start > t);
+      
+      if (insertIndex === -1) {
+        // If no segment starts after current time, add to end
+        this.segments.push(newSegment);
+        insertIndex = this.segments.length - 1;
+      } else {
+        // Insert before the segment that starts after current time
+        this.segments.splice(insertIndex, 0, newSegment);
+        // Update currentIndex if needed
+        if (this.currentIndex >= insertIndex) {
+          this.currentIndex++;
+        }
+      }
+      
+      this.validateAllSegments();
+      this.refreshRegions();
+      
+      // Set the newly added segment as current
+      this.currentIndex = insertIndex;
+      
+      // Scroll to the newly added segment after DOM update
+      this.$nextTick(() => {
+        const cards = document.querySelectorAll('.segment-card');
+        if (cards[insertIndex]) {
+          cards[insertIndex].scrollIntoView({ behavior: 'smooth', block: 'center' });
+          // Focus on the textarea
+          const textarea = cards[insertIndex].querySelector('textarea');
+          if (textarea) {
+            setTimeout(() => textarea.focus(), 300);
+          }
+        }
+      });
+    },
+
+    deleteSegment(index) {
+      this.segments.splice(index, 1);
+      if (this.currentIndex === index) {
+        this.currentIndex = -1;
+      } else if (this.currentIndex > index) {
+        this.currentIndex--;
+      }
+      this.validateAllSegments();
+      this.refreshRegions();
+    },
+
+    validateAllSegments() {
+      // Clear all warnings first
+      this.segments.forEach(seg => {
+        seg.warnings = [];
+        seg.hasOverlap = false;
+        seg.hasGap = false;
+      });
+
+      // Sort segments by start time for validation
+      const sorted = [...this.segments].sort((a, b) => a.start - b.start);
+
+      sorted.forEach((seg, i) => {
+        const originalIndex = this.segments.indexOf(seg);
+
+        // Check for empty lyrics
+        if (!seg.lyrics || seg.lyrics.trim() === "") {
+          seg.warnings.push("Empty lyrics - please add text");
+        }
+
+        // Check for invalid time range
+        if (seg.end <= seg.start) {
+          seg.warnings.push("End time must be after start time");
+        }
+
+        // Check for overlap with next segment
+        if (i < sorted.length - 1) {
+          const nextSeg = sorted[i + 1];
+          const segEnd = Number(seg.end);
+          const nextStart = Number(nextSeg.start);
+          
+          if (!isNaN(segEnd) && !isNaN(nextStart) && segEnd > nextStart) {
+            seg.warnings.push("Overlaps with next segment");
+            seg.hasOverlap = true;
+            const nextOriginalIndex = this.segments.indexOf(nextSeg);
+            if (!nextSeg.warnings.includes("Overlaps with previous segment")) {
+              nextSeg.warnings.push("Overlaps with previous segment");
+              nextSeg.hasOverlap = true;
+            }
+          }
+
+          // Check for gaps between segments
+          const gap = Number(nextSeg.start) - Number(seg.end);
+          if (!isNaN(gap) && gap > this.gapThreshold) {
+            // seg.warnings.push(`Gap of ${gap.toFixed(2)}s before next segment`);
+            seg.warnings.push(`Gap before next segment`);
+            seg.hasGap = true;
+          }
+        }
+      });
+    },
+
+    refreshRegions() {
+      if (!this.regionsPlugin) return;
+
+      // Clear existing regions
+      this.regionsPlugin.clearRegions();
+
+      // Sort segments by start time
+      const sorted = [...this.segments].sort((a, b) => a.start - b.start);
+
+      sorted.forEach((seg, i) => {
+        // Determine color based on warnings
+        let color = 'rgba(50, 115, 220, 0.15)'; // blue - no warnings
+        if (seg.hasOverlap) {
+          color = 'rgba(241, 70, 104, 0.3)'; // red - overlap
+        } else if (seg.hasGap) {
+          color = 'rgba(255, 221, 87, 0.3)'; // yellow - gap
+        }
+
+        // Add region for the segment
+        this.regionsPlugin.addRegion({
+          id: `segment-${i}`,
+          start: seg.start,
+          end: seg.end,
+          color: color,
+          drag: false,
+          resize: false
+        });
+
+        // Add visual gap indicator if there's a gap to the next segment
+        if (i < sorted.length - 1) {
+          const nextSeg = sorted[i + 1];
+          const gap = nextSeg.start - seg.end;
+          
+          if (gap > this.gapThreshold) {
+            // Add yellow region for the gap
+            this.regionsPlugin.addRegion({
+              id: `gap-${i}`,
+              start: seg.end,
+              end: nextSeg.start,
+              color: 'rgba(255, 221, 87, 0.5)', // yellow for gap
+              drag: false,
+              resize: false
+            });
+          } else if (seg.end > nextSeg.start) {
+            // Add red region for overlap
+            this.regionsPlugin.addRegion({
+              id: `overlap-${i}`,
+              start: nextSeg.start,
+              end: seg.end,
+              color: 'rgba(241, 70, 104, 0.6)', // red for overlap
+              drag: false,
+              resize: false
+            });
+          }
+        }
+      });
+    },
+
+    onSegmentEdit() {
+      this.validateAllSegments();
+      this.refreshRegions();
+    },
+
+    hasAnyWarnings() {
+      return this.segments.some(seg => 
+        seg.warnings && seg.warnings.length > 0
+      );
+    },
+
+    hasRedWarnings() {
+      return this.segments.some(seg => seg.hasOverlap);
+    },
+
+    canSubmit() {
+      return this.confirmationChecked && !this.hasRedWarnings();
+    },
+
+    async uploadAndSubmit() {
+      if (!this.confirmationChecked) {
+        alert("Please confirm that you have checked the whole song and validated all lyrics.");
+        return;
+      }
+
+      if (this.hasRedWarnings()) {
+        alert("Please resolve all overlap warnings (red highlights) before submitting.");
+        return;
+      }
+
+      this.btnLoading = true;
+
+      try {
+        parent.postMessage({
+          task: "submit",
+          values: {
+            taskTitle: this.title,
+            answer: {
+              jobID: this.jobID,
+              song: this.songSource,
+              verifiedLyrics: this.segments.map(seg => ({
+                start: Number(seg.start.toFixed(2)),
+                end: Number(seg.end.toFixed(2)),
+                lyrics: (seg.lyrics || "").trim()
+              }))
+            }
+          }
+        }, "*");
+      } catch (error) {
+        console.error("Failed to submit:", error);
+        alert("Submission failed. Please try again.");
+      }
+
+      this.btnLoading = false;
+    }
+  },
+
+  watch: {
+    currentIndex(idx) {
+      if (idx === -1) return;
+      const seg = this.segments[idx];
+      this.liveStart = seg.start;
+      this.liveEnd = seg.end;
+      this.liveLyrics = seg.lyrics;
+    },
+
+    liveStart(v) {
+      if (this.currentIndex !== -1) {
+        this.segments[this.currentIndex].start = v;
+        this.onSegmentEdit();
+      }
+    },
+
+    liveEnd(v) {
+      if (this.currentIndex !== -1) {
+        this.segments[this.currentIndex].end = v;
+        this.onSegmentEdit();
+      }
+    },
+
+    liveLyrics(v) {
+      if (this.currentIndex !== -1) {
+        this.segments[this.currentIndex].lyrics = v;
+        this.onSegmentEdit();
+      }
+    }
+  }
+}).mount("#app");
+</script>
+</body>
+</html>
\ No newline at end of file

From 54d16baeb21317878ea64331d644c0221139dee1 Mon Sep 17 00:00:00 2001
From: Miguel Nobre <mnobre24@gmail.com>
Date: Wed, 25 Feb 2026 22:35:35 -0500
Subject: [PATCH 09/13] changes to track-tagger task

---
 assets/templates/Audius/track-tagger.html | 254 ++++++++++++++++------
 1 file changed, 188 insertions(+), 66 deletions(-)

diff --git a/assets/templates/Audius/track-tagger.html b/assets/templates/Audius/track-tagger.html
index 8afe21d2..7e295a2a 100644
--- a/assets/templates/Audius/track-tagger.html
+++ b/assets/templates/Audius/track-tagger.html
@@ -1,90 +1,202 @@
-<div id="app" style="text-align: center">
-  <h1>Effect AI - Track Tagger</h1>
+<style>
+  #app {
+    max-width: 800px;
+    margin: 0 auto;
+    padding: 1rem;
+    text-align: center;
+  }
+  .tag-section {
+    margin-bottom: 2rem;
+  }
+  .tag-section h2 {
+    margin-bottom: 1rem;
+  }
+  .radio-group {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+    justify-content: center;
+  }
+  .radio-option input[type="radio"] {
+    position: absolute;
+    opacity: 0;
+  }
+  .radio-option label {
+    display: inline-block;
+    padding: 0.5rem 1rem;
+    background: #f5f5f5;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+    cursor: pointer;
+  }
+  .radio-option input[type="radio"]:checked + label {
+    background: #4a90e2;
+    color: white;
+    border-color: #4a90e2;
+  }
+  .other-input {
+    margin-top: 0.5rem;
+  }
+  audio {
+    width: 100%;
+    max-width: 600px;
+    margin: 1rem 0;
+  }
+</style>
 
-  <hr />
+  <div id="app">
+    <h1>Effect AI - Track Tagger</h1>
 
-  <div class="mx-auto" style="max-width: 80%">
     <audio ref="songPlayer" controls>
       <source :src="songSource" type="audio/mp3" />
     </audio>
 
-    <hr />
-
-    <p style="color: red;" :class="{'is-hidden mb-3': !notComplete}">
+    <p v-if="notComplete" style="color: red;">
       Task incomplete - Please complete all sections of the task
     </p>
 
-    <div>
-      <h2 class="is-size-4 has-text-weight-semibold mb-3">Genre:</h2>
-      <div class="checkboxes">
-        <label class="radio mx-2"><input type="radio" name="genre" value="Electronic" v-model="selectedGenre" /> Electronic</label>
-        <label class="radio mx-2"><input type="radio" name="genre" value="Rock" v-model="selectedGenre" /> Rock</label>
-        <label class="radio mx-2"><input type="radio" name="genre" value="Metal" v-model="selectedGenre" /> Metal</label>
-        <label class="radio mx-2"><input type="radio" name="genre" value="Alternative" v-model="selectedGenre" /> Alternative</label>
-        <label class="radio mx-2"><input type="radio" name="genre" value="Hip-Hop/Rap" v-model="selectedGenre" /> Hip-Hop/Rap</label>
-        <label class="radio mx-2"><input type="radio" name="genre" value="Punk" v-model="selectedGenre" /> Punk</label>
-        <label class="radio mx-2"><input type="radio" name="genre" value="Folk" v-model="selectedGenre" /> Folk</label>
-        <label class="radio mx-2"><input type="radio" name="genre" value="Classical" v-model="selectedGenre" /> Classical</label>
-        <label class="radio mx-2"><input type="radio" name="genre" value="Other" v-model="selectedGenre" /> Other</label>
-        <div v-if="selectedGenre === 'Other'" class="is-flex is-justify-content-center mt-2">
-          <input type="text" class="input column is-10-mobile is-6-tablet is-4-desktop" placeholder="Enter genre" v-model="selectedGenreOther" />
+    <div class="tag-section">
+      <h2>🎵 Genre</h2>
+      <div class="radio-group">
+        <div class="radio-option">
+          <input type="radio" id="genre-electronic" name="genre" value="Electronic" v-model="selectedGenre" />
+          <label for="genre-electronic">Electronic</label>
+        </div>
+        <div class="radio-option">
+          <input type="radio" id="genre-rock" name="genre" value="Rock" v-model="selectedGenre" />
+          <label for="genre-rock">Rock</label>
+        </div>
+        <div class="radio-option">
+          <input type="radio" id="genre-metal" name="genre" value="Metal" v-model="selectedGenre" />
+          <label for="genre-metal">Metal</label>
+        </div>
+        <div class="radio-option">
+          <input type="radio" id="genre-alternative" name="genre" value="Alternative" v-model="selectedGenre" />
+          <label for="genre-alternative">Alternative</label>
+        </div>
+        <div class="radio-option">
+          <input type="radio" id="genre-hiphop" name="genre" value="Hip-Hop/Rap" v-model="selectedGenre" />
+          <label for="genre-hiphop">Hip-Hop/Rap</label>
+        </div>
+        <div class="radio-option">
+          <input type="radio" id="genre-punk" name="genre" value="Punk" v-model="selectedGenre" />
+          <label for="genre-punk">Punk</label>
+        </div>
+        <div class="radio-option">
+          <input type="radio" id="genre-folk" name="genre" value="Folk" v-model="selectedGenre" />
+          <label for="genre-folk">Folk</label>
+        </div>
+        <div class="radio-option">
+          <input type="radio" id="genre-classical" name="genre" value="Classical" v-model="selectedGenre" />
+          <label for="genre-classical">Classical</label>
+        </div>
+        <div class="radio-option">
+          <input type="radio" id="genre-other" name="genre" value="Other" v-model="selectedGenre" />
+          <label for="genre-other">Other</label>
         </div>
       </div>
+      <div v-if="selectedGenre === 'Other'" class="other-input">
+        <input type="text" class="input" placeholder="Enter genre" v-model="selectedGenreOther" />
+      </div>
     </div>
 
-    <hr />
-
-    <div>
-      <h2 class="is-size-4 has-text-weight-semibold mb-3">Mood:</h2>
-      <div class="checkboxes">
-        <label class="radio mx-2"><input type="radio" name="mood" value="Happy" v-model="selectedMood"/> Happy</label>
-        <label class="radio mx-2"><input type="radio" name="mood" value="Sad" v-model="selectedMood"/> Sad</label>
-        <label class="radio mx-2"><input type="radio" name="mood" value="Aggressive" v-model="selectedMood"/> Aggressive</label>
-        <label class="radio mx-2"><input type="radio" name="mood" value="Chill" v-model="selectedMood"/> Chill</label>
-        <label class="radio mx-2"><input type="radio" name="mood" value="Uplifting" v-model="selectedMood"/> Uplifting</label>
-        <label class="radio mx-2"><input type="radio" name="mood" value="Dark" v-model="selectedMood"/> Dark</label>
+    <div class="tag-section">
+      <h2>🎙️ Vocal Presence</h2>
+      <div class="radio-group">
+        <div class="radio-option">
+          <input type="radio" id="vocals-instrumental" name="vocals" value="Instrumental" v-model="selectedVocals"/>
+          <label for="vocals-instrumental">Instrumental</label>
+        </div>
+        <div class="radio-option">
+          <input type="radio" id="vocals-single" name="vocals" value="Vocal (Single)" v-model="selectedVocals"/>
+          <label for="vocals-single">Vocal (Single)</label>
+        </div>
+        <div class="radio-option">
+          <input type="radio" id="vocals-multiple" name="vocals" value="Vocal (Multiple)" v-model="selectedVocals"/>
+          <label for="vocals-multiple">Vocal (Multiple)</label>
+        </div>
       </div>
     </div>
 
-    <hr />
-
-    <div>
-      <h2 class="is-size-4 has-text-weight-semibold mb-3">Energy Level:</h2>
-      <div>
-        <label class="radio mx-2"><input type="radio" name="energy" value="Low" v-model="selectedEnergy"/> Low</label>
-        <label class="radio mx-2"><input type="radio" name="energy" value="Medium" v-model="selectedEnergy"/> Medium</label>
-        <label class="radio mx-2"><input type="radio" name="energy" value="High" v-model="selectedEnergy"/> High</label>
+    <div class="tag-section">
+      <h2>🎤 Lyric Clarity</h2>
+      <div class="radio-group">
+        <div class="radio-option">
+          <input type="radio" id="clarity-very-clear" name="clarity" value="Very Clear" v-model="selectedClarity"/>
+          <label for="clarity-very-clear">Very Clear</label>
+        </div>
+        <div class="radio-option">
+          <input type="radio" id="clarity-clear" name="clarity" value="Clear" v-model="selectedClarity"/>
+          <label for="clarity-clear">Clear</label>
+        </div>
+        <div class="radio-option">
+          <input type="radio" id="clarity-somewhat" name="clarity" value="Somewhat Clear" v-model="selectedClarity"/>
+          <label for="clarity-somewhat">Somewhat Clear</label>
+        </div>
+        <div class="radio-option">
+          <input type="radio" id="clarity-unclear" name="clarity" value="Unclear" v-model="selectedClarity"/>
+          <label for="clarity-unclear">Unclear</label>
+        </div>
+        <div class="radio-option">
+          <input type="radio" id="clarity-instrumental" name="clarity" value="Instrumental" v-model="selectedClarity"/>
+          <label for="clarity-instrumental">Instrumental</label>
+        </div>
       </div>
     </div>
 
-    <hr />
-
-    <div>
-      <h2 class="is-size-4 has-text-weight-semibold mb-3">Danceability:</h2>
-      <div>
-        <label class="radio mx-2"><input type="radio" name="dance" value="Not Danceable" v-model="selectedDance"/> Not Danceable</label>
-        <label class="radio mx-2"><input type="radio" name="dance" value="Somewhat Danceable" v-model="selectedDance"/> Somewhat Danceable</label>
-        <label class="radio mx-2"><input type="radio" name="dance" value="Very Danceable" v-model="selectedDance"/> Very Danceable</label>
+    <div class="tag-section">
+      <h2>💭 How it makes you feel</h2>
+      <div class="radio-group">
+        <div class="radio-option">
+          <input type="radio" id="mood-happy" name="mood" value="Happy" v-model="selectedMood"/>
+          <label for="mood-happy">Happy</label>
+        </div>
+        <div class="radio-option">
+          <input type="radio" id="mood-sad" name="mood" value="Sad" v-model="selectedMood"/>
+          <label for="mood-sad">Sad</label>
+        </div>
+        <div class="radio-option">
+          <input type="radio" id="mood-aggressive" name="mood" value="Aggressive" v-model="selectedMood"/>
+          <label for="mood-aggressive">Aggressive</label>
+        </div>
+        <div class="radio-option">
+          <input type="radio" id="mood-chill" name="mood" value="Chill" v-model="selectedMood"/>
+          <label for="mood-chill">Chill</label>
+        </div>
+        <div class="radio-option">
+          <input type="radio" id="mood-uplifting" name="mood" value="Uplifting" v-model="selectedMood"/>
+          <label for="mood-uplifting">Uplifting</label>
+        </div>
+        <div class="radio-option">
+          <input type="radio" id="mood-dark" name="mood" value="Dark" v-model="selectedMood"/>
+          <label for="mood-dark">Dark</label>
+        </div>
       </div>
     </div>
 
-    <hr />
-
-    <div>
-      <h2 class="is-size-4 has-text-weight-semibold mb-3">Vocal Presence:</h2>
-      <div>
-        <label class="radio mx-2"><input type="radio" name="vocals" value="Instrumental" v-model="selectedVocals"/> Instrumental</label>
-        <label class="radio mx-2"><input type="radio" name="vocals" value="Vocal (Single)" v-model="selectedVocals"/> Vocal (Single)</label>
-        <label class="radio mx-2"><input type="radio" name="vocals" value="Vocal (Multiple)" v-model="selectedVocals"/> Vocal (Multiple)</label>
+    <div class="tag-section">
+      <h2>💃 Danceability</h2>
+      <div class="radio-group">
+        <div class="radio-option">
+          <input type="radio" id="dance-not" name="dance" value="Not Danceable" v-model="selectedDance"/>
+          <label for="dance-not">Not Danceable</label>
+        </div>
+        <div class="radio-option">
+          <input type="radio" id="dance-somewhat" name="dance" value="Somewhat Danceable" v-model="selectedDance"/>
+          <label for="dance-somewhat">Somewhat Danceable</label>
+        </div>
+        <div class="radio-option">
+          <input type="radio" id="dance-very" name="dance" value="Very Danceable" v-model="selectedDance"/>
+          <label for="dance-very">Very Danceable</label>
+        </div>
       </div>
     </div>
 
-    <hr />
-
     <button
       @click.prevent="uploadAndSubmit"
       class="button is-success is-large"
       :class="{'is-loading': btnLoading}"
+      :disabled="btnLoading"
     >
       Submit
     </button>
@@ -111,21 +223,31 @@ <h2 class="is-size-4 has-text-weight-semibold mb-3">Vocal Presence:</h2>
           notComplete: false,
           selectedGenre: "",
           selectedMood: "",
-          selectedEnergy: "",
+          selectedClarity: "",
           selectedDance: "",
           selectedVocals: "",
           selectedGenreOther: "",
           instructions: `
           <div class="">
-            <h2 class="text-lg">*NOTE*</h2>
+            <h2 class="text-lg">Song Tagging Instructions</h2>
             <p>
-              Songs may take a few seconds to load. If the song does not load in a reasonable amount of time, please report the task using the report button.
+              Listen to the track and tag it with appropriate attributes. Your input helps improve music discovery and organization.
             </p>
             <br><hr><br>
-            <li>Listen to at least a few seconds of the song before answering the questions.</li>
+            <h3>Guidelines:</h3>
+            <li><strong>Genre:</strong> Select the primary genre of the track. If it doesn't fit standard genres, choose "Other" and specify.</li>
+            <li><strong>How it makes you feel:</strong> Choose the emotion or mood that best describes how the track makes you feel.</li>
+            <li><strong>Lyric Clarity:</strong> Rate how clear and understandable the lyrics are. Choose "Instrumental" if there are no vocals.</li>
+            <li><strong>Danceability:</strong> Assess how suitable the track is for dancing based on rhythm and tempo.</li>
+            <li><strong>Vocal Presence:</strong> Indicate if the track is instrumental or has single/multiple vocalists.</li>
+            <br><hr><br>
+            <h3>Important Notes:</h3>
+            <li>Songs may take a few seconds to load. If the song does not load in a reasonable amount of time, please report the task.</li>
+            <li>Listen to at least 30 seconds of the song before answering the questions.</li>
             <li>Try to be accurate — guess only if you genuinely can't tell.</li>
             <li>Use headphones or a quiet environment for the best experience.</li>
-            <li>If the song abruptly cuts off, is silent, or sounds corrupted, report it.</li>
+            <li>If the song abruptly cuts off, is silent, or sounds corrupted, please report it.</li>
+            <li>All fields are required before you can submit.</li>
           </div>`
         };
       },
@@ -144,7 +266,7 @@ <h2 class="text-lg">*NOTE*</h2>
       methods: {
         async uploadAndSubmit() {
           this.btnLoading = true;
-          const fields = [this.selectedGenre, this.selectedMood, this.selectedEnergy, this.selectedDance, this.selectedVocals];
+          const fields = [this.selectedGenre, this.selectedMood, this.selectedClarity, this.selectedDance, this.selectedVocals];
           if (fields.some(field => field === "")) {
             this.notComplete = true
           }
@@ -159,11 +281,11 @@ <h2 class="text-lg">*NOTE*</h2>
                       song: this.songSource,
                       genre: this.selectedGenre,
                       mood: this.selectedMood,
-                      energy: this.selectedEnergy,
+                      clarity: this.selectedClarity,
                       dance: this.selectedDance,
                       vocals: this.selectedVocals,
                     }
-                    
+
                   },
                 },
                 "*",

From cf6339c0f02e77e4e76dc37d0e723a3f5b4150e4 Mon Sep 17 00:00:00 2001
From: Miguel Nobre <mnobre24@gmail.com>
Date: Wed, 11 Mar 2026 10:55:24 -0400
Subject: [PATCH 10/13] fixing regex bug

---
 apps/task-poster/src/fetcher.ts | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/apps/task-poster/src/fetcher.ts b/apps/task-poster/src/fetcher.ts
index 89aac7a1..588d4beb 100644
--- a/apps/task-poster/src/fetcher.ts
+++ b/apps/task-poster/src/fetcher.ts
@@ -436,7 +436,14 @@ export const getTasks = async (fetcher: Fetcher, csv: string) => {
       const iterator = db.iterate<boolean>(["fetcher", sId, sFId, "done", {}], undefined, true);
 
       // the high water mark
-      const regex = new RegExp(fetcher.pipelineFilterRegex as string);
+      let regex: RegExp | null = null;
+      if (fetcher.pipelineFilterRegex) {
+        try {
+          regex = new RegExp(fetcher.pipelineFilterRegex as string);
+        } catch (e) {
+          console.error("Invalid pipelineFilterRegex, skipping filter:", fetcher.pipelineFilterRegex);
+        }
+      }
 
       let dataQueue: any[] = [];
       for await (const taskId of iterator) {
@@ -450,7 +457,7 @@ export const getTasks = async (fetcher: Fetcher, csv: string) => {
 	}
 
 	// regex filter
-	if (!task.result || regex.test(task.result) || task.result == "<TASK REPORTED AND SKIPPED>") {
+	if (!task.result || (regex && regex.test(task.result)) || task.result == "<TASK REPORTED AND SKIPPED>") {
 	  continue;
 	}
 

From 9feff61239fdc85844be98a0187730f25d27f664 Mon Sep 17 00:00:00 2001
From: Miguel Nobre <mnobre24@gmail.com>
Date: Mon, 16 Mar 2026 10:55:20 -0400
Subject: [PATCH 11/13] adding new template

---
 .../verify-sentence-nonpipeline.html          | 146 ++++++++++++++++++
 1 file changed, 146 insertions(+)
 create mode 100644 assets/templates/Mozilla/sentence-creation/verify-sentence-nonpipeline.html

diff --git a/assets/templates/Mozilla/sentence-creation/verify-sentence-nonpipeline.html b/assets/templates/Mozilla/sentence-creation/verify-sentence-nonpipeline.html
new file mode 100644
index 00000000..205e8fac
--- /dev/null
+++ b/assets/templates/Mozilla/sentence-creation/verify-sentence-nonpipeline.html
@@ -0,0 +1,146 @@
+<meta charset="UTF-8">
+<div id="app" style="text-align: center">
+  <h1>Effect AI - Sentence Verification </h1>
+
+  <hr />
+
+  <div class="mx-auto" style="max-width: 80%">
+
+  <p class="mb-5">Is a linguistically correct sentence?</p>
+  <div class="box">
+    <p class="is-size-4 has-text-weight-semibold">{{sentence}}</p>
+  </div>
+
+  <div class="mb-5">
+    <button class="button is-medium"
+    :class="{ 'is-success': this.isValidated == 'Yes' }"
+    @click="this.isValidated='Yes'">Yes</button>
+
+    <button class="button is-medium mx-3"
+    :class="{ 'is-dark': this.isValidated == 'Skip' }"
+    @click="this.isValidated='Skip'">Skip</button>
+
+    <button class="button is-medium"
+    :class="{ 'is-danger': this.isValidated == 'No' }"
+    @click="this.isValidated='No'">No</button>
+  </div>
+
+  <p style="color: red;"
+  :class="{'is-hidden mb-3': !notComplete}">
+    Task incomplete - Please complete all sections of the task
+  </p>
+
+  <button
+    @click.prevent="uploadAndSubmit"
+    class="button is-success is-large"
+    :class="{'is-loading': btnLoading}"
+  >
+    Submit
+  </button>
+</div>
+
+<!-- 📚 Load in resources: [Bulma, Effect Network Styling]  -->
+<link rel="stylesheet" href="https://unpkg.com/bulma@0.9.4/css/bulma.min.css" />
+<link href="https://app.effect.network/force-defaults.css" rel="stylesheet" />
+
+<script src="https://cdn.jsdelivr.net/npm/ipfs-http-client/dist/index.min.js"></script>
+<script type="module">
+  import { createApp } from "https://unpkg.com/vue@3/dist/vue.esm-browser.js";
+  
+
+  createApp({
+    data() {
+      return {
+        title: "Effect AI Sentence Verifier",
+        btnLoading: false,
+        author: "${submissionByPeer}", 
+        // incoming result - {"timestamp": "", "submissionByPeer": "", "taskId": "", "result": "JSON_STRING"}
+        sentence: "${sentence}",
+        isValidated: "",
+        loading: true,
+        notComplete: false,
+instructions: `
+          <div>
+            <h2>Verify a Sentence</h2>
+            <p>
+              In this task, you'll review short sentences extracted from TV dialogue scripts.
+              Your goal is to decide whether each sentence is clear, readable, and suitable for use in training AI speech models.
+            </p>
+
+            <h3>1. Instructions</h3>
+            <p>
+              Your job is to carefully read each sentence and decide whether it sounds like something a person would naturally say out loud.
+              You should mark a sentence as <strong>"Yes"</strong> if it follows the rules below, or <strong>"No"</strong> if it does not. If 
+              you are unsure, you may <strong>Skip</strong> it.
+            </p>
+
+            <h4>Sentence Verification Guidelines</h4>
+            <ul>
+              <li>The sentence should be fewer than 15 words.</li>
+              <li>It must be a complete thought that makes sense on its own.</li>
+              <li>It should sound natural when read aloud, like real spoken English.</li>
+              <li>Casual or emotional language is fine, these are from dramatic dialogue.</li>
+              <li>Character names (e.g. "I love you, Ryan.") are acceptable.</li>
+            </ul>
+
+            <h4>Mark as INCORRECT if you see:</h4>
+            <ul>
+              <li>Numbers or special characters (e.g. $, %, @, #, 123).</li>
+              <li>Foreign letters or words not in English.</li>
+              <li>The sentence appears cut off, garbled, or incomplete (e.g. "I didn't come here to talk me?").</li>
+              <li>Stage directions or sound cues that were not properly removed (e.g. "(Music-plays)", "[Door slams]").</li>
+              <li>The sentence is too short or vague to make sense on its own (e.g. "That is." or "Yeah.").</li>
+              <li>Overly technical or unnatural language that doesn't sound like real speech.</li>
+              <li>Real-world personal information such as addresses, phone numbers, or emails.</li>
+            </ul>
+
+            <h3>2. Tips for Success</h3>
+            <ul>
+              <li>Read the sentence out loud, it should sound natural and easy to say.</li>
+              <li>If the sentence feels incomplete or confusing, mark it as incorrect.</li>
+              <li>Don't penalize sentences just because they sound dramatic or emotional. This is expected from this type of dialogue.</li>
+              <li>Don't overthink it, use your common sense and trust your ear for natural English.</li>
+            </ul>
+          </div>
+          `
+      };
+    },
+    computed: {},
+    created() {},
+    mounted() {
+      window.top.postMessage(
+        {
+          type: 'task-instructions',
+          instructions: this.instructions
+        },
+        "*"
+      );
+    },
+    methods: {
+      async uploadAndSubmit() {
+        this.btnLoading = true;
+        if(this.isValidated == ""){
+            this.notComplete = true
+          }
+        else
+          try {
+            parent.postMessage(
+              {
+                task: "submit",
+                values: {
+                  taskTitle: this.title,
+                  author: this.author,
+                  sentence: this.sentence,
+                  isValidated: this.isValidated
+                },
+              },
+              "*"
+            );
+          } catch (error) {
+            console.error("Failed to upload to IPFS", error);
+          }
+        this.btnLoading = false;
+      },
+    },
+  }).mount("#app");
+</script>

From eeb3b0da2288ed0665fb4de39a87679274401e9e Mon Sep 17 00:00:00 2001
From: Miguel Nobre <mnobre24@gmail.com>
Date: Mon, 23 Mar 2026 16:56:31 -0400
Subject: [PATCH 12/13] adding image annotation task + taskposter template
 preview fix

---
 apps/task-poster/src/templates.ts             |   22 +-
 apps/worker-app/app/pages/index.vue           |    2 +-
 .../bounding-box-labeler.html                 | 1050 +++++++++++++++++
 3 files changed, 1064 insertions(+), 10 deletions(-)
 create mode 100644 assets/templates/Image Annotation/bounding-box-labeler.html

diff --git a/apps/task-poster/src/templates.ts b/apps/task-poster/src/templates.ts
index 68ea2d89..7c269e49 100644
--- a/apps/task-poster/src/templates.ts
+++ b/apps/task-poster/src/templates.ts
@@ -73,11 +73,16 @@ const findTemplateFields = (html: string) => {
   const re = /\$\{([^}]+)\}/g;
   const matches: string[][] = [];
   let m;
-  do {
-    const m = re.exec(html);
-    if (m) matches.push(m.slice(0, 3));
-  } while (m);
-  return matches;
+  while ((m = re.exec(html))) {
+    matches.push(m.slice(0, 2));
+  }
+  // Deduplicate by field name
+  const seen = new Set<string>();
+  return matches.filter(([_, name]) => {
+    if (seen.has(name)) return false;
+    seen.add(name);
+    return true;
+  });
 };
 
 const form = (msg = "", values: Record<string, string> = {}): string => `
@@ -117,12 +122,11 @@ ${fields.map(
 <label for="f${name}">${name}</label>
 <input
   ${values[name] ? `value="${escapeHTML(values[name])}" ` : ""}
-  id="f${name}" name="${name}" type="text"></input>
+  id="f${name}" name="${name}" type="text">`,
+).join("")}
 <textarea style="display: none;" name="html">${escapeHTML(html)}</textarea>
 <button type="submit">Preview</button>
 </form>
-`,
-)}
 `;
 
 const templatePreviewFrame = async (
@@ -317,7 +321,7 @@ export const addTemplateRoutes = (app: Express): void => {
   width="100%"
   srcdoc="${escapeHTML(renderedTemplate)}"></iframe>
 
-${templateDataForm(escapeHTML(html), fields, req.body)}`);
+${templateDataForm(html, fields, req.body)}`);
   });
 
   app.post("/t/:id", requireAuth, async (req, res) => {
diff --git a/apps/worker-app/app/pages/index.vue b/apps/worker-app/app/pages/index.vue
index fd45c2ae..ffc59b66 100644
--- a/apps/worker-app/app/pages/index.vue
+++ b/apps/worker-app/app/pages/index.vue
@@ -144,4 +144,4 @@ function prevPage() {
 #dashboard {
   background: black !important;
 }
-</style>
+</style>
\ No newline at end of file
diff --git a/assets/templates/Image Annotation/bounding-box-labeler.html b/assets/templates/Image Annotation/bounding-box-labeler.html
new file mode 100644
index 00000000..8cbb4928
--- /dev/null
+++ b/assets/templates/Image Annotation/bounding-box-labeler.html	
@@ -0,0 +1,1050 @@
+<style>
+  .canvas-container {
+    position: relative;
+    display: inline-block;
+    cursor: crosshair;
+    user-select: none;
+    touch-action: none;
+    max-width: 100%;
+    overflow: hidden;
+  }
+  .canvas-container canvas {
+    display: block;
+  }
+  .bbox-list-item {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0.5rem 0.75rem;
+    border: 1px solid #dbdbdb;
+    border-radius: 4px;
+    margin-bottom: 0.5rem;
+  }
+  .bbox-color-dot {
+    width: 14px;
+    height: 14px;
+    border-radius: 50%;
+    display: inline-block;
+    margin-right: 0.5rem;
+    flex-shrink: 0;
+  }
+  .label-selector {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 0.75rem;
+    padding: 0.5rem 1rem;
+    background: #f5f5f5;
+    border-radius: 6px;
+    margin-bottom: 1rem;
+    justify-content: center;
+  }
+  .label-checklist-item {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.35rem 0.25rem;
+    border-radius: 4px;
+  }
+  .label-checklist-item:active {
+    background: #f0f0f0;
+  }
+  .label-checklist-item .icon {
+    font-size: 1.1rem;
+  }
+  .canvas-controls {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: center;
+    gap: 0.75rem;
+    margin-bottom: 0.75rem;
+  }
+  .size-control {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+  .size-control input[type="range"] {
+    width: 180px;
+  }
+  .quick-actions {
+    display: flex;
+    gap: 0.5rem;
+    justify-content: center;
+    margin-top: 0.5rem;
+  }
+  @media (max-width: 768px) {
+    .label-selector {
+      flex-direction: column;
+      gap: 0.5rem;
+    }
+    .size-control input[type="range"] {
+      width: 120px;
+    }
+    .bbox-list-item {
+      font-size: 0.85rem;
+    }
+    .label-checklist-item {
+      padding: 0.5rem 0.25rem;
+      font-size: 0.95rem;
+    }
+  }
+</style>
+
+<div id="app" style="text-align: center">
+  <h1 class="title is-3">Effect AI - Bounding Box Labeler</h1>
+  <p class="subtitle is-6">Draw bounding boxes around objects in the image</p>
+
+  <hr />
+
+  <div class="mx-auto" style="max-width: 95%">
+
+    <!-- Active label selector -->
+    <div class="label-selector">
+      <strong>Drawing label:</strong>
+      <div class="select">
+        <select v-model="activeLabel">
+          <option v-for="label in labels" :key="label" :value="label">{{ label }}</option>
+        </select>
+      </div>
+      <span class="bbox-color-dot" :style="{ background: labelColor(activeLabel) }"></span>
+    </div>
+
+    <p class="help mb-3" v-if="!isMobile">Select a label, then click and drag to draw. <strong>Shift+scroll</strong> to zoom. <strong>Ctrl+click</strong> a box to delete it.</p>
+    <p class="help mb-3" v-else>Select a label, then tap and drag to draw. <strong>Pinch</strong> to zoom, <strong>two fingers</strong> to pan.</p>
+
+    <!-- Canvas controls -->
+    <div class="canvas-controls" v-if="!loading && !loadError">
+      <div class="size-control">
+        <small>Zoom:</small>
+        <input type="range" min="100" max="500" step="10" v-model.number="zoomSlider" @input="onZoomSlider" />
+        <small>{{ zoomSlider }}%</small>
+      </div>
+      <label class="checkbox">
+        <input type="checkbox" v-model="hideBoxes" @change="redraw" />
+        Hide boxes
+      </label>
+      <button class="button is-small" @click="resetView" title="Reset zoom and pan">Reset view</button>
+    </div>
+
+    <!-- Quick actions -->
+    <div class="quick-actions" v-if="!loading && !loadError && boxes.length > 0">
+      <button class="button is-small is-danger is-outlined" @click="undoLastBox">
+        Undo last box
+      </button>
+    </div>
+
+    <!-- Loading indicator -->
+    <div v-if="loading" class="mb-3">
+      <div class="is-size-5 mb-2">Loading image...</div>
+      <progress v-if="!loadTimedOut" class="progress is-small is-info" style="max-width: 300px; margin: 0 auto;"></progress>
+      <div v-if="loadTimedOut" class="notification is-warning" style="max-width: 500px; margin: 0 auto;">
+        <p class="mb-3">The image could not be loaded. You may skip this task.</p>
+        <button class="button is-warning" @click="skipTask">Skip Task</button>
+      </div>
+    </div>
+
+    <!-- Load error -->
+    <div v-if="loadError && !loading" class="notification is-danger" style="max-width: 500px; margin: 0 auto;">
+      <p class="mb-3">Failed to load image. You may skip this task.</p>
+      <button class="button is-danger is-outlined" @click="skipTask">Skip Task</button>
+    </div>
+
+    <!-- Canvas area -->
+    <div class="canvas-container"
+      v-show="!loading && !loadError"
+      @mousedown="onMouseDown"
+      @mousemove="onMouseMove"
+      @mouseup="onMouseUp"
+      @mouseleave="onMouseLeave"
+      @wheel="onWheel"
+      @touchstart.prevent="onTouchStart"
+      @touchmove.prevent="onTouchMove"
+      @touchend.prevent="onTouchEnd"
+      @touchcancel.prevent="cancelDraw"
+    >
+      <canvas ref="canvas"></canvas>
+    </div>
+
+    <hr />
+
+    <!-- Label checklist -->
+    <div class="mx-auto has-text-left" style="max-width: 600px">
+      <h2 class="title is-5">Labels Checklist</h2>
+      <div class="label-checklist-item" v-for="label in labels" :key="label"
+           @click="activeLabel = label" style="cursor: pointer;">
+        <span class="icon" v-if="boxCountFor(label) > 0" style="color: #48c774;">&#10003;</span>
+        <span class="icon" v-else style="color: #dbdbdb;">&#9675;</span>
+        <span class="bbox-color-dot" :style="{ background: labelColor(label) }"></span>
+        <span :class="{ 'has-text-weight-semibold': activeLabel === label }">{{ label }}</span>
+        <span class="tag is-light ml-1" v-if="boxCountFor(label) > 0">{{ boxCountFor(label) }} box<span v-if="boxCountFor(label) > 1">es</span></span>
+        <span class="tag is-info is-light ml-1" v-if="activeLabel === label">selected</span>
+        <button class="button is-small ml-auto"
+          :class="visibleLabels[label] === false ? 'is-light' : 'is-info is-outlined'"
+          @click.stop="toggleLabelVisibility(label)"
+          :title="visibleLabels[label] === false ? 'Show boxes for ' + label : 'Hide boxes for ' + label">
+          {{ visibleLabels[label] === false ? 'Show' : 'Hide' }}
+        </button>
+      </div>
+    </div>
+
+    <hr />
+
+    <!-- Bounding box list -->
+    <div class="mx-auto has-text-left" style="max-width: 600px" v-if="boxes.length > 0">
+      <h2 class="title is-5">Drawn Boxes ({{ boxes.length }})</h2>
+      <div class="bbox-list-item" v-for="(box, idx) in boxes" :key="idx">
+        <div style="display: flex; align-items: center;">
+          <span class="bbox-color-dot" :style="{ background: box.color }"></span>
+          <span class="has-text-weight-semibold">{{ box.label }}</span>
+        </div>
+        <button class="delete" @click="removeBox(idx)" title="Remove this box"></button>
+      </div>
+    </div>
+
+    <div v-if="boxes.length === 0" class="has-text-grey mt-3 mb-3">
+      No bounding boxes drawn yet. Select a label and draw on the image.
+    </div>
+
+    <hr />
+
+    <!-- Validation -->
+    <p style="color: red;" :class="{'is-hidden mb-3': !notComplete}">
+      Task incomplete &ndash; Every label must have at least one bounding box
+    </p>
+    <p style="color: red;" :class="{'is-hidden mb-3': missingLabels.length === 0 || !notComplete}">
+      Missing: {{ missingLabels.join(', ') }}
+    </p>
+
+    <!-- Submit -->
+    <button
+      @click.prevent="uploadAndSubmit"
+      class="button is-success is-large mt-4"
+      :class="{'is-loading': btnLoading}"
+    >
+      Submit
+    </button>
+  </div>
+
+  <!-- Resources -->
+  <link rel="stylesheet" href="https://unpkg.com/bulma@0.9.4/css/bulma.min.css" />
+  <link href="https://app.effect.network/force-defaults.css" rel="stylesheet" />
+
+  <script type="module">
+    import { createApp } from "https://unpkg.com/vue@3/dist/vue.esm-browser.js";
+
+    const BOX_COLORS = [
+      "#e6194b", "#3cb44b", "#4363d8", "#f58231", "#911eb4",
+      "#42d4f4", "#f032e6", "#bfef45", "#fabed4", "#469990",
+      "#dcbeff", "#9A6324", "#800000", "#aaffc3", "#808000",
+      "#000075", "#a9a9a9"
+    ];
+
+    const HANDLE_RADIUS = 8;
+
+    createApp({
+      data() {
+        return {
+          title: "Bounding Box Labeler",
+          imageUrl: "${url}",
+          rawLabels: "${labels}",
+          inputId: "${id}",
+          inputSource: "${source}",
+          inputWidth: "${width}",
+          inputHeight: "${height}",
+
+          btnLoading: false,
+          notComplete: false,
+          loading: true,
+          loadError: false,
+          loadTimedOut: false,
+          loadTimer: null,
+          isMobile: false,
+
+          // Labels
+          labels: [],
+          activeLabel: "",
+          labelColorMap: {},
+
+          // Boxes
+          boxes: [],
+
+          // Drawing state
+          isDrawing: false,
+          drawStartImg: null,
+          drawCurrentImg: null,
+
+          // Resizing state
+          isResizing: false,
+          resizeBoxIdx: -1,
+          resizeHandle: null, // "tl", "tr", "bl", "br"
+          selectedBoxIdx: -1,
+
+          // Viewport: image coordinates visible at canvas center
+          viewCenterX: 0,
+          viewCenterY: 0,
+          viewZoom: 1, // 1 = image fits canvas
+          baseScale: 1,
+
+          // Canvas
+          img: null,
+          canvasW: 0,
+          canvasH: 0,
+          hideBoxes: false,
+          zoomSlider: 100,
+          visibleLabels: {}, // label -> true/false for filter
+
+          // Touch tracking
+          lastTouchDist: 0,
+          lastTouchMid: null,
+          touchMode: null, // "draw", "pinch", null
+          pinchStartZoom: 1,
+          pinchStartCenter: null,
+          touchStartPos: null, // for tap vs drag detection
+
+          instructions: `<div>
+            <h2>Bounding Box Labeler</h2>
+            <p>In this task you will draw bounding boxes around specific objects in an image.</p>
+
+            <h3>1. Instructions</h3>
+            <ul>
+              <li>You are given a list of <strong>labels</strong> to find in the image.</li>
+              <li>Select a label from the dropdown (or tap a label in the checklist), then <strong>click/tap and drag</strong> on the image to draw a rectangle around that object.</li>
+              <li>You must draw <strong>at least one box for every label</strong> in the list.</li>
+              <li>You may draw <strong>multiple boxes</strong> for the same label if there are multiple instances.</li>
+              <li>Draw <strong>tight</strong> boxes that closely fit each object &mdash; avoid large empty margins.</li>
+              <li><strong>Zoom in</strong> for precision: use the slider, <strong>Shift+scroll</strong> (desktop), or pinch gesture (mobile).</li>
+              <li><strong>Pan</strong> when zoomed in: hold Shift+drag (desktop) or two-finger drag (mobile).</li>
+              <li>After drawing a box, you can <strong>tap/click it</strong> to select it, then <strong>drag its corner handles</strong> to resize.</li>
+              <li>Remove a box: click &times; in the box list, use <strong>Ctrl+click</strong> on it (desktop), or tap <strong>Undo last box</strong>.</li>
+              <li>Use <strong>Hide boxes</strong> to see the image clearly when it gets crowded.</li>
+              <li>If the image fails to load, click <strong>Skip Task</strong>.</li>
+            </ul>
+
+            <h3>2. Examples</h3>
+            <p><strong>Good annotations:</strong></p>
+            <ul>
+              <li>Box tightly fits the object with minimal background.</li>
+              <li>Every label has at least one bounding box.</li>
+            </ul>
+            <p><strong>Bad annotations:</strong></p>
+            <ul>
+              <li>Box much larger than the object.</li>
+              <li>Object partially cut off by the box.</li>
+              <li>Missing labels.</li>
+            </ul>
+
+            <h3>3. Tips</h3>
+            <ul>
+              <li><strong>Zoom in first</strong>, then draw &mdash; much more accurate on mobile.</li>
+              <li>Use <strong>Undo last box</strong> for quick corrections.</li>
+              <li>Drag corner handles to adjust a box after drawing it.</li>
+              <li>Check the Labels Checklist before submitting.</li>
+            </ul>
+          </div>`
+        };
+      },
+      computed: {
+        missingLabels() {
+          return this.labels.filter(l => this.boxCountFor(l) === 0);
+        }
+      },
+      mounted() {
+        this.isMobile = "ontouchstart" in window || navigator.maxTouchPoints > 0;
+
+        this.labels = this.rawLabels.split("|").map(l => l.trim()).filter(l => l.length > 0);
+        this.labels.forEach((label, i) => {
+          this.labelColorMap[label] = BOX_COLORS[i % BOX_COLORS.length];
+        });
+        if (this.labels.length > 0) this.activeLabel = this.labels[0];
+
+        // All labels visible by default
+        this.labels.forEach(l => { this.visibleLabels[l] = true; });
+
+        // Listen for mouseup outside the canvas so dragging past edges still finishes the box
+        this._onDocMouseUp = (e) => {
+          if (this.isDrawing || this._isPanning || this.isResizing) {
+            this.onMouseUp(e);
+          }
+        };
+        document.addEventListener("mouseup", this._onDocMouseUp);
+
+        window.top.postMessage(
+          { type: "task-instructions", instructions: this.instructions },
+          "*"
+        );
+        this.loadImage();
+      },
+      beforeUnmount() {
+        if (this.loadTimer) clearTimeout(this.loadTimer);
+        document.removeEventListener("mouseup", this._onDocMouseUp);
+      },
+      methods: {
+        labelColor(label) {
+          return this.labelColorMap[label] || "#a9a9a9";
+        },
+        boxCountFor(label) {
+          return this.boxes.filter(b => b.label === label).length;
+        },
+
+        toggleLabelVisibility(label) {
+          this.visibleLabels[label] = this.visibleLabels[label] === false ? true : false;
+          this.redraw();
+        },
+
+        // ── Image loading ──
+        loadImage() {
+          this.img = new Image();
+          this.loadTimer = setTimeout(() => {
+            if (this.loading) this.loadTimedOut = true;
+          }, 12000);
+          this.img.onload = () => {
+            clearTimeout(this.loadTimer);
+            this.loading = false;
+            this.loadTimedOut = false;
+            this.initCanvas();
+          };
+          this.img.onerror = () => {
+            clearTimeout(this.loadTimer);
+            this.loading = false;
+            this.loadError = true;
+          };
+          this.img.src = this.imageUrl;
+        },
+        skipTask() {
+          try {
+            parent.postMessage({
+              task: "submit",
+              values: {
+                taskTitle: this.title,
+                answer: {
+                  id: this.inputId, source: this.inputSource,
+                  image_url: this.imageUrl, skipped: true, reason: "image_load_failed"
+                }
+              }
+            }, "*");
+          } catch (e) { console.error("Skip failed:", e); }
+        },
+
+        // ── Canvas / viewport ──
+        initCanvas() {
+          const canvas = this.$refs.canvas;
+          const container = canvas.parentElement.parentElement;
+          this.canvasW = container.clientWidth;
+          this.canvasH = Math.min(
+            Math.round(this.canvasW * (this.img.naturalHeight / this.img.naturalWidth)),
+            Math.round(window.innerHeight * 0.75)
+          );
+          canvas.width = this.canvasW;
+          canvas.height = this.canvasH;
+
+          // baseScale fits the full image into the canvas
+          this.baseScale = Math.min(
+            this.canvasW / this.img.naturalWidth,
+            this.canvasH / this.img.naturalHeight
+          );
+          this.viewZoom = 1;
+          this.viewCenterX = this.img.naturalWidth / 2;
+          this.viewCenterY = this.img.naturalHeight / 2;
+          this.zoomSlider = 100;
+          this.redraw();
+        },
+
+        // Convert image coords → canvas pixel coords
+        imgToCanvas(ix, iy) {
+          const s = this.baseScale * this.viewZoom;
+          return {
+            x: (ix - this.viewCenterX) * s + this.canvasW / 2,
+            y: (iy - this.viewCenterY) * s + this.canvasH / 2
+          };
+        },
+        // Convert canvas pixel coords → image coords
+        canvasToImg(cx, cy) {
+          const s = this.baseScale * this.viewZoom;
+          return {
+            x: (cx - this.canvasW / 2) / s + this.viewCenterX,
+            y: (cy - this.canvasH / 2) / s + this.viewCenterY
+          };
+        },
+
+        clampView() {
+          // Allow panning but keep at least some image visible
+          const imgW = this.img.naturalWidth;
+          const imgH = this.img.naturalHeight;
+          this.viewCenterX = Math.max(-imgW * 0.25, Math.min(imgW * 1.25, this.viewCenterX));
+          this.viewCenterY = Math.max(-imgH * 0.25, Math.min(imgH * 1.25, this.viewCenterY));
+          this.viewZoom = Math.max(1, Math.min(5, this.viewZoom));
+        },
+
+        resetView() {
+          this.viewZoom = 1;
+          this.viewCenterX = this.img.naturalWidth / 2;
+          this.viewCenterY = this.img.naturalHeight / 2;
+          this.zoomSlider = 100;
+          this.redraw();
+        },
+
+        onZoomSlider() {
+          this.viewZoom = this.zoomSlider / 100;
+          this.clampView();
+          this.redraw();
+        },
+
+        // ── Drawing ──
+        redraw() {
+          const canvas = this.$refs.canvas;
+          if (!canvas) return;
+          const ctx = canvas.getContext("2d");
+          const s = this.baseScale * this.viewZoom;
+
+          ctx.clearRect(0, 0, this.canvasW, this.canvasH);
+
+          // Draw image through viewport
+          const tl = this.imgToCanvas(0, 0);
+          ctx.drawImage(this.img, tl.x, tl.y,
+            this.img.naturalWidth * s, this.img.naturalHeight * s);
+
+          // Draw existing boxes (unless hidden)
+          if (!this.hideBoxes) {
+            for (let i = 0; i < this.boxes.length; i++) {
+              const box = this.boxes[i];
+              // Skip boxes whose label is filtered out
+              if (this.visibleLabels[box.label] === false) continue;
+              const p1 = this.imgToCanvas(box.x_min, box.y_min);
+              const p2 = this.imgToCanvas(box.x_max, box.y_max);
+              const w = p2.x - p1.x;
+              const h = p2.y - p1.y;
+              this.drawBox(ctx, p1.x, p1.y, w, h, box.color, box.label,
+                i === this.selectedBoxIdx);
+            }
+          }
+
+          // Always draw in-progress box (even when hiding existing boxes)
+          if (this.isDrawing && this.drawStartImg && this.drawCurrentImg) {
+            const p1 = this.imgToCanvas(
+              Math.min(this.drawStartImg.x, this.drawCurrentImg.x),
+              Math.min(this.drawStartImg.y, this.drawCurrentImg.y)
+            );
+            const p2 = this.imgToCanvas(
+              Math.max(this.drawStartImg.x, this.drawCurrentImg.x),
+              Math.max(this.drawStartImg.y, this.drawCurrentImg.y)
+            );
+            const color = this.labelColor(this.activeLabel);
+            this.drawBox(ctx, p1.x, p1.y, p2.x - p1.x, p2.y - p1.y, color, null, false);
+          }
+        },
+
+        drawBox(ctx, x, y, w, h, color, label, selected) {
+          ctx.strokeStyle = color;
+          ctx.lineWidth = selected ? 3 : 2;
+          ctx.strokeRect(x, y, w, h);
+
+          ctx.fillStyle = color + "22";
+          ctx.fillRect(x, y, w, h);
+
+          if (label) {
+            ctx.font = "bold 13px sans-serif";
+            const textW = ctx.measureText(label).width + 8;
+            const textH = 20;
+            const labelY = y > textH ? y - textH : y;
+            ctx.fillStyle = color;
+            ctx.fillRect(x, labelY, textW, textH);
+            ctx.fillStyle = "#ffffff";
+            ctx.fillText(label, x + 4, labelY + 14);
+          }
+
+          // Draw corner handles if selected
+          if (selected) {
+            const corners = [
+              { x: x, y: y },
+              { x: x + w, y: y },
+              { x: x, y: y + h },
+              { x: x + w, y: y + h }
+            ];
+            for (const c of corners) {
+              ctx.fillStyle = "#ffffff";
+              ctx.strokeStyle = color;
+              ctx.lineWidth = 2;
+              ctx.beginPath();
+              ctx.arc(c.x, c.y, HANDLE_RADIUS, 0, Math.PI * 2);
+              ctx.fill();
+              ctx.stroke();
+            }
+          }
+        },
+
+        // Clamp image coordinates to image bounds
+        clampToImage(imgPos) {
+          return {
+            x: Math.max(0, Math.min(this.img.naturalWidth, imgPos.x)),
+            y: Math.max(0, Math.min(this.img.naturalHeight, imgPos.y))
+          };
+        },
+
+        // ── Hit testing ──
+        getCanvasXY(event) {
+          const canvas = this.$refs.canvas;
+          const rect = canvas.getBoundingClientRect();
+          return {
+            x: event.clientX - rect.left,
+            y: event.clientY - rect.top
+          };
+        },
+
+        findBoxAt(imgPos) {
+          for (let i = this.boxes.length - 1; i >= 0; i--) {
+            const b = this.boxes[i];
+            if (imgPos.x >= b.x_min && imgPos.x <= b.x_max &&
+                imgPos.y >= b.y_min && imgPos.y <= b.y_max) {
+              return i;
+            }
+          }
+          return -1;
+        },
+
+        // Check if canvas pos is near a corner handle of the selected box
+        findHandle(canvasPos) {
+          if (this.selectedBoxIdx < 0) return null;
+          const box = this.boxes[this.selectedBoxIdx];
+          if (!box) return null;
+
+          const corners = [
+            { handle: "tl", ix: box.x_min, iy: box.y_min },
+            { handle: "tr", ix: box.x_max, iy: box.y_min },
+            { handle: "bl", ix: box.x_min, iy: box.y_max },
+            { handle: "br", ix: box.x_max, iy: box.y_max }
+          ];
+
+          const hitR = HANDLE_RADIUS + 6; // generous hit target
+          for (const c of corners) {
+            const cp = this.imgToCanvas(c.ix, c.iy);
+            const dx = canvasPos.x - cp.x;
+            const dy = canvasPos.y - cp.y;
+            if (dx * dx + dy * dy <= hitR * hitR) return c.handle;
+          }
+          return null;
+        },
+
+        // ── Mouse events ──
+        onMouseDown(event) {
+          const canvasPos = this.getCanvasXY(event);
+          const imgPos = this.clampToImage(this.canvasToImg(canvasPos.x, canvasPos.y));
+          this._mouseDownPos = canvasPos;
+
+          // Ctrl+click to delete
+          if (event.ctrlKey || event.metaKey) {
+            const idx = this.findBoxAt(imgPos);
+            if (idx >= 0) { this.boxes.splice(idx, 1); this.selectedBoxIdx = -1; this.redraw(); }
+            return;
+          }
+
+          // Shift+drag to pan
+          if (event.shiftKey) {
+            this._panStart = canvasPos;
+            this._panStartCenter = { x: this.viewCenterX, y: this.viewCenterY };
+            this._isPanning = true;
+            return;
+          }
+
+          // Check for handle drag on selected box
+          const handle = this.findHandle(canvasPos);
+          if (handle) {
+            this.isResizing = true;
+            this.resizeHandle = handle;
+            this.resizeBoxIdx = this.selectedBoxIdx;
+            return;
+          }
+
+          // Always start drawing — selection only happens on click-release (no drag)
+          this.isDrawing = true;
+          this.drawStartImg = imgPos;
+          this.drawCurrentImg = imgPos;
+        },
+
+        onMouseMove(event) {
+          const canvasPos = this.getCanvasXY(event);
+          const imgPos = this.clampToImage(this.canvasToImg(canvasPos.x, canvasPos.y));
+
+          if (this._isPanning) {
+            const s = this.baseScale * this.viewZoom;
+            this.viewCenterX = this._panStartCenter.x - (canvasPos.x - this._panStart.x) / s;
+            this.viewCenterY = this._panStartCenter.y - (canvasPos.y - this._panStart.y) / s;
+            this.clampView();
+            this.redraw();
+            return;
+          }
+
+          if (this.isResizing) {
+            const clamped = imgPos;
+            const box = this.boxes[this.resizeBoxIdx];
+            if (!box) return;
+            if (this.resizeHandle === "tl") { box.x_min = +clamped.x.toFixed(4); box.y_min = +clamped.y.toFixed(4); }
+            else if (this.resizeHandle === "tr") { box.x_max = +clamped.x.toFixed(4); box.y_min = +clamped.y.toFixed(4); }
+            else if (this.resizeHandle === "bl") { box.x_min = +clamped.x.toFixed(4); box.y_max = +clamped.y.toFixed(4); }
+            else if (this.resizeHandle === "br") { box.x_max = +clamped.x.toFixed(4); box.y_max = +clamped.y.toFixed(4); }
+            this.redraw();
+            return;
+          }
+
+          if (this.isDrawing) {
+            this.drawCurrentImg = imgPos;
+            this.redraw();
+            return;
+          }
+
+          // Update cursor
+          const canvas = this.$refs.canvas;
+          const handle = this.findHandle(canvasPos);
+          if (handle) {
+            canvas.style.cursor = (handle === "tl" || handle === "br") ? "nwse-resize" : "nesw-resize";
+          } else if (event.shiftKey) {
+            canvas.style.cursor = "grab";
+          } else {
+            canvas.style.cursor = "crosshair";
+          }
+        },
+
+        onMouseUp(event) {
+          if (this._isPanning) {
+            this._isPanning = false;
+            return;
+          }
+
+          if (this.isResizing) {
+            const box = this.boxes[this.resizeBoxIdx];
+            if (box) this.normalizeBox(box);
+            this.isResizing = false;
+            this.resizeHandle = null;
+            this.redraw();
+            return;
+          }
+
+          if (this.isDrawing) {
+            const canvasPos = this.getCanvasXY(event);
+            const imgPos = this.clampToImage(this.canvasToImg(canvasPos.x, canvasPos.y));
+
+            // Detect click (no drag) — treat as box selection
+            const dx = canvasPos.x - (this._mouseDownPos?.x || 0);
+            const dy = canvasPos.y - (this._mouseDownPos?.y || 0);
+            if (Math.abs(dx) < 5 && Math.abs(dy) < 5) {
+              this.isDrawing = false;
+              this.drawStartImg = null;
+              this.drawCurrentImg = null;
+              const clickedIdx = this.findBoxAt(imgPos);
+              if (clickedIdx >= 0) {
+                this.selectedBoxIdx = clickedIdx;
+              } else {
+                this.selectedBoxIdx = -1;
+              }
+              this.redraw();
+              return;
+            }
+
+            this.finishBox(imgPos);
+          }
+        },
+
+        // ── Mouse wheel zoom (requires Shift key) ──
+        onWheel(event) {
+          if (!event.shiftKey) return; // allow normal page scroll
+          event.preventDefault();
+
+          const canvasPos = this.getCanvasXY(event);
+          const imgBefore = this.canvasToImg(canvasPos.x, canvasPos.y);
+
+          const factor = event.deltaY < 0 ? 1.15 : 1 / 1.15;
+          this.viewZoom = Math.max(1, Math.min(5, this.viewZoom * factor));
+
+          // Zoom toward cursor position
+          const imgAfter = this.canvasToImg(canvasPos.x, canvasPos.y);
+          this.viewCenterX += imgBefore.x - imgAfter.x;
+          this.viewCenterY += imgBefore.y - imgAfter.y;
+          this.clampView();
+          this.zoomSlider = Math.round(this.viewZoom * 100);
+          this.redraw();
+        },
+
+        // ── Touch events ──
+        onTouchStart(event) {
+          if (event.touches.length === 2) {
+            this.touchMode = "pinch";
+            this.isDrawing = false;
+            this.drawStartImg = null;
+            this.drawCurrentImg = null;
+
+            const t1 = event.touches[0], t2 = event.touches[1];
+            this.lastTouchDist = Math.hypot(t2.clientX - t1.clientX, t2.clientY - t1.clientY);
+            this.lastTouchMid = {
+              x: (t1.clientX + t2.clientX) / 2,
+              y: (t1.clientY + t2.clientY) / 2
+            };
+            this.pinchStartZoom = this.viewZoom;
+            this.pinchStartCenter = { x: this.viewCenterX, y: this.viewCenterY };
+            return;
+          }
+
+          if (event.touches.length === 1) {
+            const canvasPos = this.getCanvasXY(event.touches[0]);
+            const imgPos = this.clampToImage(this.canvasToImg(canvasPos.x, canvasPos.y));
+
+            // Save start position for tap-vs-drag detection
+            this.touchStartPos = canvasPos;
+
+            // Check for handle drag on selected box
+            const handle = this.findHandle(canvasPos);
+            if (handle) {
+              this.touchMode = "resize";
+              this.isResizing = true;
+              this.resizeHandle = handle;
+              this.resizeBoxIdx = this.selectedBoxIdx;
+              return;
+            }
+
+            // Always start drawing — selection only happens on tap (no drag)
+            this.touchMode = "draw";
+            this.isDrawing = true;
+            this.drawStartImg = imgPos;
+            this.drawCurrentImg = imgPos;
+          }
+        },
+
+        onTouchMove(event) {
+          if (this.touchMode === "pinch" && event.touches.length === 2) {
+            const t1 = event.touches[0], t2 = event.touches[1];
+            const dist = Math.hypot(t2.clientX - t1.clientX, t2.clientY - t1.clientY);
+            const mid = {
+              x: (t1.clientX + t2.clientX) / 2,
+              y: (t1.clientY + t2.clientY) / 2
+            };
+
+            const zoomFactor = dist / this.lastTouchDist;
+            this.viewZoom = Math.max(1, Math.min(5, this.pinchStartZoom * zoomFactor));
+
+            const canvas = this.$refs.canvas;
+            const rect = canvas.getBoundingClientRect();
+            const s = this.baseScale * this.viewZoom;
+            const midCanvas = { x: mid.x - rect.left, y: mid.y - rect.top };
+            const startMidCanvas = {
+              x: this.lastTouchMid.x - rect.left,
+              y: this.lastTouchMid.y - rect.top
+            };
+            this.viewCenterX = this.pinchStartCenter.x - (midCanvas.x - startMidCanvas.x) / s;
+            this.viewCenterY = this.pinchStartCenter.y - (midCanvas.y - startMidCanvas.y) / s;
+
+            this.clampView();
+            this.zoomSlider = Math.round(this.viewZoom * 100);
+            this.redraw();
+            return;
+          }
+
+          if (this.touchMode === "resize" && event.touches.length === 1) {
+            const canvasPos = this.getCanvasXY(event.touches[0]);
+            const imgPos = this.clampToImage(this.canvasToImg(canvasPos.x, canvasPos.y));
+            const box = this.boxes[this.resizeBoxIdx];
+            if (!box) return;
+            if (this.resizeHandle === "tl") { box.x_min = +imgPos.x.toFixed(4); box.y_min = +imgPos.y.toFixed(4); }
+            else if (this.resizeHandle === "tr") { box.x_max = +imgPos.x.toFixed(4); box.y_min = +imgPos.y.toFixed(4); }
+            else if (this.resizeHandle === "bl") { box.x_min = +imgPos.x.toFixed(4); box.y_max = +imgPos.y.toFixed(4); }
+            else if (this.resizeHandle === "br") { box.x_max = +imgPos.x.toFixed(4); box.y_max = +imgPos.y.toFixed(4); }
+            this.redraw();
+            return;
+          }
+
+          if (this.touchMode === "draw" && event.touches.length === 1) {
+            const canvasPos = this.getCanvasXY(event.touches[0]);
+            this.drawCurrentImg = this.clampToImage(this.canvasToImg(canvasPos.x, canvasPos.y));
+            this.redraw();
+            return;
+          }
+
+          // If a second finger arrives during draw, switch to pinch
+          if (this.touchMode === "draw" && event.touches.length === 2) {
+            this.isDrawing = false;
+            this.drawStartImg = null;
+            this.drawCurrentImg = null;
+            this.touchMode = "pinch";
+
+            const t1 = event.touches[0], t2 = event.touches[1];
+            this.lastTouchDist = Math.hypot(t2.clientX - t1.clientX, t2.clientY - t1.clientY);
+            this.lastTouchMid = {
+              x: (t1.clientX + t2.clientX) / 2,
+              y: (t1.clientY + t2.clientY) / 2
+            };
+            this.pinchStartZoom = this.viewZoom;
+            this.pinchStartCenter = { x: this.viewCenterX, y: this.viewCenterY };
+            this.redraw();
+          }
+        },
+
+        onTouchEnd(event) {
+          if (this.touchMode === "resize") {
+            const box = this.boxes[this.resizeBoxIdx];
+            if (box) this.normalizeBox(box);
+            this.isResizing = false;
+            this.resizeHandle = null;
+            this.touchMode = null;
+            this.redraw();
+            return;
+          }
+
+          if (this.touchMode === "draw" && this.isDrawing) {
+            // Detect tap (no drag) — treat as box selection instead
+            if (this.touchStartPos && this.drawCurrentImg) {
+              const endCanvas = this.imgToCanvas(this.drawCurrentImg.x, this.drawCurrentImg.y);
+              const dx = endCanvas.x - this.touchStartPos.x;
+              const dy = endCanvas.y - this.touchStartPos.y;
+              if (Math.abs(dx) < 10 && Math.abs(dy) < 10) {
+                this.isDrawing = false;
+                this.drawStartImg = null;
+                this.drawCurrentImg = null;
+                const clickedIdx = this.findBoxAt(this.clampToImage(
+                  this.canvasToImg(this.touchStartPos.x, this.touchStartPos.y)));
+                if (clickedIdx >= 0) {
+                  this.selectedBoxIdx = clickedIdx;
+                } else {
+                  this.selectedBoxIdx = -1;
+                }
+                this.touchMode = null;
+                this.touchStartPos = null;
+                this.redraw();
+                return;
+              }
+            }
+
+            this.finishBox(this.drawCurrentImg);
+            this.touchMode = null;
+            this.touchStartPos = null;
+            return;
+          }
+
+          if (event.touches.length === 0) {
+            this.touchMode = null;
+            this.touchStartPos = null;
+          }
+        },
+
+        // Normalize a box so min < max after resize
+        normalizeBox(box) {
+          const xMin = Math.min(box.x_min, box.x_max);
+          const xMax = Math.max(box.x_min, box.x_max);
+          const yMin = Math.min(box.y_min, box.y_max);
+          const yMax = Math.max(box.y_min, box.y_max);
+          box.x_min = +xMin.toFixed(4); box.x_max = +xMax.toFixed(4);
+          box.y_min = +yMin.toFixed(4); box.y_max = +yMax.toFixed(4);
+        },
+
+        // ── Shared box creation ──
+        finishBox(imgEndPos) {
+          this.isDrawing = false;
+          if (!imgEndPos || !this.drawStartImg) {
+            this.drawStartImg = null;
+            this.drawCurrentImg = null;
+            this.redraw();
+            return;
+          }
+
+          // Clamp to image bounds
+          const start = this.clampToImage(this.drawStartImg);
+          const end = this.clampToImage(imgEndPos);
+
+          const x_min = Math.min(start.x, end.x);
+          const y_min = Math.min(start.y, end.y);
+          const x_max = Math.max(start.x, end.x);
+          const y_max = Math.max(start.y, end.y);
+
+          // Ignore tiny boxes (in image pixels)
+          if ((x_max - x_min) < 3 || (y_max - y_min) < 3) {
+            this.drawStartImg = null;
+            this.drawCurrentImg = null;
+            this.redraw();
+            return;
+          }
+
+          const color = this.labelColor(this.activeLabel);
+          this.boxes.push({
+            x_min: +x_min.toFixed(4), y_min: +y_min.toFixed(4),
+            x_max: +x_max.toFixed(4), y_max: +y_max.toFixed(4),
+            label: this.activeLabel, color
+          });
+
+          this.notComplete = false;
+          this.selectedBoxIdx = this.boxes.length - 1;
+          this.drawStartImg = null;
+          this.drawCurrentImg = null;
+          this.redraw();
+        },
+
+        onMouseLeave(event) {
+          // Don't cancel — let the user finish the box outside the canvas.
+          // Just update the drawing position clamped to image bounds.
+          if (this.isDrawing) {
+            const canvasPos = this.getCanvasXY(event);
+            this.drawCurrentImg = this.clampToImage(this.canvasToImg(canvasPos.x, canvasPos.y));
+            this.redraw();
+          }
+        },
+
+        cancelDraw() {
+          if (this.isDrawing) {
+            this.isDrawing = false;
+            this.drawStartImg = null;
+            this.drawCurrentImg = null;
+            this.redraw();
+          }
+        },
+
+        undoLastBox() {
+          if (this.boxes.length > 0) {
+            this.boxes.pop();
+            this.selectedBoxIdx = -1;
+            this.redraw();
+          }
+        },
+
+        removeBox(idx) {
+          this.boxes.splice(idx, 1);
+          if (this.selectedBoxIdx === idx) this.selectedBoxIdx = -1;
+          else if (this.selectedBoxIdx > idx) this.selectedBoxIdx--;
+          this.redraw();
+        },
+
+        // ── Submit ──
+        async uploadAndSubmit() {
+          this.btnLoading = true;
+
+          if (this.missingLabels.length > 0) {
+            this.notComplete = true;
+            this.btnLoading = false;
+            return;
+          }
+
+          const imgW = this.img.naturalWidth;
+          const imgH = this.img.naturalHeight;
+          const annotations = this.boxes.map(b => ({
+            label: b.label,
+            bbox: [b.x_min, b.y_min, b.x_max, b.y_max]
+          }));
+
+          try {
+            parent.postMessage({
+              task: "submit",
+              values: {
+                taskTitle: this.title,
+                answer: {
+                  id: this.inputId, source: this.inputSource,
+                  image_url: this.imageUrl,
+                  image_width: imgW, image_height: imgH,
+                  annotations
+                }
+              }
+            }, "*");
+          } catch (error) {
+            console.error("Submit failed:", error);
+          }
+          this.btnLoading = false;
+        }
+      }
+    }).mount("#app");
+  </script>
+</div>

From d7e333b55fc54168cfeec1bd4e60d15d90b97a61 Mon Sep 17 00:00:00 2001
From: Miguel Nobre <mnobre24@gmail.com>
Date: Mon, 23 Mar 2026 17:07:15 -0400
Subject: [PATCH 13/13] template name change

---
 .../{lyric-transcriber-noWaveform.html => lyric-transcriber.html} | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename assets/templates/Audius/{lyric-transcriber-noWaveform.html => lyric-transcriber.html} (100%)

diff --git a/assets/templates/Audius/lyric-transcriber-noWaveform.html b/assets/templates/Audius/lyric-transcriber.html
similarity index 100%
rename from assets/templates/Audius/lyric-transcriber-noWaveform.html
rename to assets/templates/Audius/lyric-transcriber.html