Changeset 35294

Timestamp:

2021-08-16T09:51:56+12:00 (3 years ago)

Author:

davidb

Message:

Refactor transcription display list to use Vue

Location:

main/trunk/model-interfaces-dev/atea

Files:

• js/asr/asr-controller.js (modified) (10 diffs)
• style/asr.scss (modified) (1 diff)
• transform/pages/asr.xsl (modified) (4 diffs)

main/trunk/model-interfaces-dev/atea/js/asr/asr-controller.js

@@ -14 +14 @@
 const TRANSCRIPTION_AUDIO_SOURCE_ELEMENT = document.getElementById("transcriptionAudioSource");
 
-/** @type {HTMLUListElement} */
-// @ts-ignore
-const TRANSCRIPTIONS_LIST = document.getElementById("transcriptionsList");
-
-/** @type {HTMLTemplateElement} */
-// @ts-ignore
-const TRANSCRIPTION_TEMPLATE = document.getElementById("transcriptionTemplate");
-
 let cachedAudioFileList = new Map();
+var transcribeService = new TranscribeService();
+
+/**
+ * Fast UUID generator, RFC4122 version 4 compliant.
+ * @author Jeff Ward (jcward.com).
+ * @license MIT
+ * @link http://stackoverflow.com/questions/105034/how-to-create-a-guid-uuid-in-javascript/21963136#21963136
+ **/
+ var UUID = (function() {
+    var self = {};
+    var lut = []; for (var i=0; i<256; i++) { lut[i] = (i<16?'0':'')+(i).toString(16); }
+    self.generate = function() {
+      var d0 = Math.random()*0xffffffff|0;
+      var d1 = Math.random()*0xffffffff|0;
+      var d2 = Math.random()*0xffffffff|0;
+      var d3 = Math.random()*0xffffffff|0;
+      return lut[d0&0xff]+lut[d0>>8&0xff]+lut[d0>>16&0xff]+lut[d0>>24&0xff]+'-'+
+        lut[d1&0xff]+lut[d1>>8&0xff]+'-'+lut[d1>>16&0x0f|0x40]+lut[d1>>24&0xff]+'-'+
+        lut[d2&0x3f|0x80]+lut[d2>>8&0xff]+'-'+lut[d2>>16&0xff]+lut[d2>>24&0xff]+
+        lut[d3&0xff]+lut[d3>>8&0xff]+lut[d3>>16&0xff]+lut[d3>>24&0xff];
+    }
+    return self;
+  })();
+  // TODO: Hash file name and size instead. Good indicator that the user has uploaded a duplicate.
 
 // Get the size of each character in our monospace font
@@ -37 +53 @@
     MONOSPACE_CHAR_SIZE = monoCharSizeTestElement.clientWidth / monoCharSizeTestElement.textContent.length;
 });
-
-var transcribeService = new TranscribeService();
 
 // @ts-ignore
@@ -82 +96 @@
 const AudioUploadVM = AudioUploadComponent.mount("#audioUploadContainer");
 
+// @ts-ignore
 const TranscriptionsListComponent = Vue.createApp(
-    {
-        data()
-        {
-            return {
-                /** @type {TranscriptionModel[]} */
-                transcriptions: [],
-                /** @type {TranscriptionError[]} */
-                failures: []
-            }
+{
+    data()
+    {
+        return {
+            /** @type {Map<String, TranscriptionModel>} */
+            transcriptions: new Map(),
+            /** @type {TranscriptionError[]} */
+            failures: [], // TODO: Ability to remove failures
+            showCharDisplay: false
+        }
+    },
+    computed:
+    {
+        getTranscriptions()
+        {
+            let converted = [];
+
+            for (const [key, value] of this.transcriptions)
+            {
+                converted.push(
+                {
+                    id: key,
+                    transcription: value.transcription,
+                    fileName: value.file_name,
+                    metadata: value.metadata
+                });
+            }
+
+            return converted;
+        }
+    },
+    methods:
+    {
+        playAudioFile(fileName, startTime = 0) // TODO: Convert to ID
+        {
+            if (startTime < 0)
+            {
+                startTime = 0;
+                console.warn("Cannot start a audio playback at a time of less than zero.");
+            }
+
+            if (startTime >= TRANSCRIPTION_AUDIO_ELEMENT.duration)
+            {
+                console.warn("Cannot start a audio playback at a time longer than the audio duration.");
+                return;
+            }
+            
+            console.log("Starting at " + startTime + " seconds");
+            loadAudioFile(fileName);
+            TRANSCRIPTION_AUDIO_ELEMENT.currentTime = startTime;
+            TRANSCRIPTION_AUDIO_ELEMENT.play();
         },
-        methods:
-        {
-            playAudioFile(fileName) {
-                loadAudioFile(fileName);
-                // TODO: play audio element
-            },
-            // TODO: give transcriptions a unique ID
-            removeTranscription(id) {
-                
-            }
-        }
-    }
-)
+        removeTranscription(id) {
+            this.transcriptions.delete(id);
+            // TODO: delete cached audio file
+        },
+        getWords(transcriptionId)
+        {
+            /** @type {TranscriptionModel} */
+            const transcription = this.transcriptions.get(transcriptionId);
+            const words = [];
+
+            let lastWord = "";
+            let currStartTime = 0;
+
+            for (const metadata of transcription.metadata) 
+            {
+                if (metadata.char == ' ')
+                {
+                    lastWord += "\u00A0";
+                    words.push({ word: lastWord, startTime: currStartTime });
+
+                    lastWord = "";
+                    currStartTime = metadata.start_time;
+                }
+                else
+                {
+                    lastWord += metadata.char;
+                }
+            }
+
+            return words;
+            // console.log(this);
+            // console.log(this.$refs);
+            // let charsPerLine = Math.floor(this.$refs.wordListContainer.clientWidth / MONOSPACE_CHAR_SIZE);
+
+            // return getWidthNormalisedLines(transcription.transcription, charsPerLine);
+        },
+        getChars(transcriptionId)
+        {
+            /** @type {TranscriptionModel} */
+            const transcription = this.transcriptions.get(transcriptionId);
+            const chars = [];
+
+            for (const metadata of transcription.metadata)
+            {
+                if (metadata.char == ' ') {
+                    chars.push({ char: "\u00A0", startTime: metadata.start_time });
+                }
+                else {
+                    chars.push({ char: metadata.char, startTime: metadata.start_time });
+                }
+            }
+
+            return chars;
+        }
+    }
+});
 const TranscriptionsListVM = TranscriptionsListComponent.mount("#transcriptionsDisplayContainer");
 
@@ -111 +211 @@
  * When awaited, creates a delay for the given number of milliseconds.
  * 
- * @param {Number} delayInms The number of milliseconds to delay for.
+ * @param {Number} delayMilliseconds The number of milliseconds to delay for.
  * @returns A promise that will resolve when the delay has finished.
  */
-function delay(delayInms)
+function delay(delayMilliseconds)
 {
     return new Promise(
@@ -123 +223 @@
                     resolve(2);
                 },
-                delayInms
+                delayMilliseconds
             );
         }
@@ -139 +239 @@
     const files = AudioUploadVM.files;
     
-    await delay(500); // TODO: Remove - UI testing purposes only
+    await delay(200); // TODO: Remove - UI testing purposes only
+
     // Cache the file list so that we can playback audio in the future
     for (const file of files) {
@@ -156 +257 @@
                 }
                 else {
-                    TranscriptionsListVM.transcriptions.push(t);
+                    TranscriptionsListVM.transcriptions.set(UUID.generate(), t);
                 }
             }
@@ -172 +273 @@
 
 /**
-* Inserts a transcription object into the DOM.
-* Adapted from https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template
-* 
-* @param {TranscriptionModel} transcription The transcription to insert.
-*/
-function insertTranscription(transcription)
-{
-    // Create a new transcription row
-    /** @type {HTMLLIElement} */
-    // @ts-ignore
-    const clone = TRANSCRIPTION_TEMPLATE.content.firstElementChild.cloneNode(true);
-
-    // @ts-ignore
-    clone.querySelector(".transcription__text").textContent = transcription.transcription;
-    // @ts-ignore
-    clone.querySelector(".transcription__file-name").textContent = transcription.file_name;
-    
-    // Hook up the remove button
-    /** @type {HTMLButtonElement} */
-    // @ts-ignore
-    const removeButton = clone.querySelector(".transcription__remove-button");
-    removeButton.addEventListener("click", onDeleteTranscription);
-    
-    loadAudioFile(transcription.file_name);
-    
-    // Prepare the audio slider
-    /** @type {HTMLInputElement} */
-    // @ts-ignore
-    const audioSlider = clone.querySelector(".audio-slider");
-    audioSlider.max = TRANSCRIPTION_AUDIO_ELEMENT.duration.toString();
-    audioSlider.step = "0.01";
-    
-    // Set the filename data property on every element in the clone's DOM node
-    recurseAddData(clone, "file-name", transcription.file_name);
-
-    // Insert the entry. This could occur first (if you need to make calculations based off of the rendered element)
-    // But it is preferable to do it last in order to avoid multiple render passes.
-    TRANSCRIPTIONS_LIST.appendChild(clone);
-
-    const TranscriptionWordListComponent = Vue.createApp(
-    {
-        data()
-        {
-            return {
-                lines: []
-            }
-        }
-    });
-    const TranscriptionWordListVM = TranscriptionWordListComponent.mount("#transcriptionWordList");
-
-    transcription.transcription.replace('', "\u00A0"); // This helps with formatting, as whitespace is trimmed.
-
-    // Get the amount of space that we have to align words within
-    /** @type {HTMLDivElement} */
-    // @ts-ignore
-    const transcriptionTextList = clone.querySelector(".transcription__word-list");
-    const charsPerLine = Math.floor(transcriptionTextList.clientWidth / MONOSPACE_CHAR_SIZE);
-    
-    // Insert words with correct line alignment
-    const tText = transcription.transcription;
-
-    for (let i = 0; i < tText.length; i += 0)
+ * Splits a transcription into line objects that fit as many words per line as possible.
+ * 
+ * @param {String} transcription The transcription to generate lines from.
+ * @returns {{words: String[], chars: String[]}[]}
+ */
+function getWidthNormalisedLines(transcription, charsPerLine)
+{
+    /** @type {{words: String[], chars: String[]}[]} */
+    let lines = [];
+
+    if (charsPerLine < 1)
+    {
+        console.error("Attempted to normalise lines to zero or less characters per line.");
+        return lines;
+    }
+
+    for (let i = 0; i < transcription.length; i += 0)
     {
         /** @type {String} */
         let slice;
 
-        if (i + charsPerLine < tText.length)
-        {
-            slice = tText.slice(i, charsPerLine);
-
-            if (tText.charAt(i) != ' ' && tText.charAt(i + 1) != ' ') {
+        if (i + charsPerLine < transcription.length)
+        {
+            slice = transcription.slice(i, charsPerLine);
+
+            if (transcription.charAt(i) != ' ' && transcription.charAt(i + 1) != ' ')
+            {
                 let lastSpacePos = slice.lastIndexOf(' ');
                 let decrement = slice.length - lastSpacePos;
@@ -251 +308 @@
         else
         {
-            slice = tText.slice(i);
-        }
-
-        TranscriptionWordListVM.lines.push({ words: slice.split(' ') });
+            slice = transcription.slice(i);
+        }
+
+        /** @type {{words: String[], chars: String[]}} */
+        const convertedLine =
+        {
+            words: [],
+            chars: []
+        }
+
+        for (const word of slice.split(' ')) {
+            convertedLine.words.push(word + " ");
+        }
+
+        for (const char of slice) {
+            convertedLine.chars.push(char);
+        }
+
+        lines.push(convertedLine);
         i += charsPerLine;
     }
+
+    return lines;
 }
 
@@ -280 +354 @@
         TRANSCRIPTION_AUDIO_ELEMENT.load();
     }
-}
-
-/**
- * Removes a transcription from the DOM.
- * 
- * @param {MouseEvent} ev The mouse click event.
- */
-function onDeleteTranscription(ev)
-{
-    if (ev == null || ev.target == null) {
-        return;
-    }
-
-    const fileName = ev.target.dataset.fileName;
-    const child = document.querySelector(`.transcription__container[data-file-name='${fileName}']`);
-
-    TRANSCRIPTIONS_LIST.removeChild(child);
-    cachedAudioFileList.delete(fileName);
 }
 

main/trunk/model-interfaces-dev/atea/style/asr.scss

@@ -219 +219 @@
 }
 
+.transcription__word {
+    display: inline-block;
+    margin-top: 1em;
+
+    &:hover {
+        background-color: rgba(255, 255, 0, 0.315)
+    }
+}
+
 .transcription__error-container {
     @extend .transcription__container;

main/trunk/model-interfaces-dev/atea/transform/pages/asr.xsl

@@ -75 +75 @@
             <div id="transcriptionsDisplayContainer">
 
-                <audio id="transcriptionAudio">
+                <audio id="transcriptionAudio" v-on:timeupdate="">
                     <source id="transcriptionAudioSource" />
                 </audio>
@@ -86 +86 @@
                     </li>
 
-                    <li v-for="transcription in transcriptions" class="transcription__container">
+                    <li v-for="transcription in getTranscriptions" class="transcription__container">
                         <div class="transcription__header">
-                            <button class="btn-fab theme-flat" v-on:click="playAudioFile" type="button">
+                            <button class="btn-fab theme-flat" v-on:click="playAudioFile(transcription.fileName)" type="button">
                                 <span class="material-icons">&#xE037;</span> <!-- play_arrow -->
                             </button>
 
                             <p class="transcription__text">{{ transcription.transcription }}</p>
-                            <p class="body2 transcription__file-name">File: {{ transcription.file_name }}</p>
+                            <p class="body2 transcription__file-name">File: {{ transcription.fileName }}</p>
 
-                            <button class="btn-fab theme-error" v-on:click="removeTranscription" type="button">
+                            <button class="btn-fab theme-error" v-on:click="removeTranscription(transcription.id)" type="button">
                                 <span class="material-icons">&#xE872;</span> <!-- delete -->
                             </button>
                         </div>
 
-                        <gsf:div class="transcription__word-list" id="transcriptionWordList">
+                        <div class="transcription__word-list">
+                            <input type="checkbox" v-model="showCharDisplay" />
                             <ul class="transcription__list">
-                                <li v-for="line in lines" style="display: flex">
+                                <li v-if="!showCharDisplay">
+                                    <span v-for="word in getWords(transcription.id)"
+                                          class="transcription__word"
+                                          v-on:click="playAudioFile(transcription.fileName, word.startTime)">
+                                        {{ word.word }}
+                                    </span>
+                                </li>
+                                <li v-if="showCharDisplay">
+                                    <span v-for="char in getChars(transcription.id)"
+                                          class="transcription__word"
+                                          v-on:click="playAudioFile(transcription.fileName, char.startTime)">
+                                        {{ char.char }}
+                                    </span>
+                                </li>
+                                <!-- <li v-for="line in getLines(transcription.id)" style="display: flex">
                                     <span v-for="word in line.words" style="border: 1px solid blue">{{ word }}</span>
-                                </li>
+                                    <input type="range" min="0" max="100" />
+                                </li> -->
                             </ul>
-                        </gsf:div>
-                        
-                        <div class="audio-slider-container">
-                            <input type="range" min="0" value="0" class="audio-slider" />
                         </div>
 
@@ -115 +127 @@
                     </li>
                 </ul>
-    
-                <ul id="transcriptionsList" class="transcription__list"></ul>
-    
-                <template id="transcriptionTemplate">
-                    <li class="transcription__container">
-
-                        <div class="transcription__header">
-                            <button class="btn-fab transcription__play-button theme-flat" type="button">
-                                <span class="material-icons">&#xE037;</span> <!-- play_arrow -->
-                            </button>
-                            <button class="btn-fab transcription__remove-button theme-error" type="button">
-                                <span class="material-icons">&#xE872;</span> <!-- delete -->
-                            </button>
-                            <p class="transcription__text"></p>
-                            <p class="body2 transcription__file-name">test</p>
-                        </div>
-
-                        <gsf:div class="transcription__word-list" id="transcriptionWordList">
-                            <ul class="transcription__list">
-                                <li v-for="line in lines" style="display: flex">
-                                    <span v-for="word in line.words" style="border: 1px solid blue">{{ word }}</span>
-                                </li>
-                            </ul>
-                        </gsf:div>
-
-                        <hr class="divider" />
-
-                    </li>
-                </template>
             </div>
 
@@ -157 +140 @@
         <!-- TODO: Switch to production version for release builds -->
         <!-- <gsf:script src="https://unpkg.com/vue@next"></gsf:script> -->
-        <gsf:script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.global.js"></gsf:script>
+        <gsf:script src="interfaces/{$interface_name}/js/asr/Vue.js"></gsf:script>
         <gsf:script src="interfaces/{$interface_name}/js/asr/asr-controller.js" type="module"></gsf:script>
-        <!-- <script type="module" src="interfaces/{$interface_name}/js/asr/asr-controller.js">
-            <xsl:comment>Filler</xsl:comment>>
-        </script> -->
     </xsl:template>