Changeset 35545 for main/trunk

Timestamp:

2021-10-01T15:55:02+13:00 (3 years ago)

Author:

cstephen

Message:

Show word timestamps in the WordTimingSelector component. Improve word generation algorithm and make them a computed property of the TranscriptionItem component.

Location:

main/trunk/model-interfaces-dev/atea/korero-maori-asr/src/components

Files:

• TranscriptionItemEditor.vue (modified) (10 diffs)
• WordTimingSelector.vue (modified) (3 diffs)

main/trunk/model-interfaces-dev/atea/korero-maori-asr/src/components/TranscriptionItemEditor.vue

@@ -130 +130 @@
         return {
             enableEditing: false,
-            words: [],
             lastHighlightedWordIndex: 0,
             selectedIndex: 0
@@ -136 +135 @@
     },
     computed: {
+        /**
+         * Gets the words in a transcription.
+         * @param {TranscriptionViewModel} transcription The transcription.
+         * @returns {Word[]}
+         */
+        words() {
+            const metadata = this.transcription.metadata;
+
+            if (metadata.length === 0) {
+                return;
+            }
+
+            /** @type {Word[]} */
+            const words = [];
+
+            let currentWord = "";
+            let currStartTime = metadata[0].start_time;
+
+            for (let i = 0; i < metadata.length; i++) {
+                const mChar = metadata[i];
+
+                if (mChar.char === " ") {
+                    words.push(new Word(currentWord, currStartTime, mChar.start_time));
+                    currentWord = "";
+
+                    if (i + 1 < metadata.length) {
+                        currStartTime = metadata[i + 1].start_time;
+                    }
+                    else {
+                        break;
+                    }
+                }
+                else {
+                    currentWord += mChar.char;
+                }
+            }
+
+            // Push the last word, as most transcriptions will not end in a space (hence breaking the above algorithm)
+            if (currentWord.length > 0) {
+                const newWord = new Word(currentWord, currStartTime, metadata[metadata.length - 1].start_time)
+                words.push(newWord);
+            }
+
+            return words;
+        },
         currentPlaybackTime: {
             get() {
@@ -164 +208 @@
     },
     methods: {
+
         async playAudio(startTime) {
             await AudioPlayback.play(this.transcription.id, startTime);
         },
+
         getSurroundingWords(index) {
             const BUFFER = 2; // The number of words to take on each side
@@ -182 +228 @@
             return this.words.slice(min, max);
         },
+
         /**
          * Invoked when the value of a word changes.
@@ -326 +373 @@
             }
         },
+
         mergeWordForward(word, index) {
             if (this.words.length < 2) {
@@ -337 +385 @@
             this.setFocus(index, false);
         },
+
         mergeWordBackward(word, index) {
             if (this.words.length < 2) {
@@ -348 +397 @@
             this.setFocus(index, true);
         },
+
         onEditorFocus(index) {
             if (this.currentPlaybackTime < this.words[index].startTime || this.currentPlaybackTime > this.words[index].endTime) {
@@ -356 +406 @@
             this.selectedIndex = index;
         },
+
         onEditorFocusOut(index) {
             // Remove empty words when they lose focus
@@ -395 +446 @@
             }
         }
+
     },
     watch: {
@@ -419 +471 @@
             }
         }
-    },
-    beforeMount() {
-        this.words = getWords(this.transcription);
     }
 }
-
-/**
- * Gets the words in a transcription.
- * @param {TranscriptionViewModel} transcription The transcription.
- * @returns {Word[]}
- */
-export function getWords(transcription) {
-    /** @type {Word[]} */
-    const words = [];
-
-    let lastWord = "";
-    let currStartTime = 0;
-
-    for (const metadata of transcription.metadata) {
-        if (metadata.char === " ") {
-            words.push(new Word(lastWord, currStartTime, metadata.start_time));
-
-            lastWord = "";
-            currStartTime = metadata.start_time;
-        }
-        else {
-            lastWord += metadata.char;
-        }
-    }
-
-    // Push the last word, as most transcriptions will not end in a space (hence breaking the above algorithm)
-    if (lastWord.length > 0) {
-        const newWord = new Word(lastWord, currStartTime, transcription.metadata[transcription.metadata.length - 1].start_time)
-        words.push(newWord);
-    }
-
-    return words;
-}
 </script>

main/trunk/model-interfaces-dev/atea/korero-maori-asr/src/components/WordTimingSelector.vue

@@ -9 +9 @@
         </div>
 
-        <span v-if="isMounted && !isProduction" class="material-icons mdi-m word-handle" :style="{ left: leftHandleLeft }"
-            @mousedown="canShiftMinValue = true">
-            first_page
-        </span>
-        <span v-if="isMounted && !isProduction" class="material-icons mdi-m word-handle" :style="{ left: rightHandleLeft }"
-            @mousedown="canShiftMaxValue = true">
-            last_page
-        </span>
+        <div class="word-attachment-container" :style="{ left: leftHandleLeft }">
+            <span>{{ wordStartTime }}</span>
+            <span v-if="isMounted && !isProduction" class="material-icons mdi-m word-handle" @mousedown="canShiftMinValue = true">
+                first_page
+            </span>
+        </div>
+
+        <div class="word-attachment-container" :style="{ left: rightHandleLeft }">
+            <span v-if="isMounted && !isProduction" class="material-icons mdi-m word-handle" @mousedown="canShiftMaxValue = true">
+                last_page
+            </span>
+            <span>{{ wordEndTime }}</span>
+        </div>
     </div>
 
@@ -51 +56 @@
 }
 
+.word-attachment-container {
+    position: absolute;
+    top: -105%;
+    display: flex;
+    align-items: center
+}
+
 .word-handle {
     @extend .theme-flat;
-
-    position: absolute;
-    top: -105%;
 
     color: var(--fg-color);
@@ -136 +145 @@
             return Util.formatSecondsTimeString(this.surroundingWords[this.surroundingWords.length - 1].endTime, false, 2);
         },
+        wordStartTime() {
+            return Util.formatSecondsTimeString(this.word.startTime, false, 2);
+        },
+        wordEndTime() {
+            return Util.formatSecondsTimeString(this.word.endTime, false, 2);
+        },
         leftHandleLeft() {
-            return `calc(${this.myWord.left}px - 1em)`;
+            return `calc(${this.myWord.left}px - 5.5em)`;
         },
         rightHandleLeft() {