Changeset 35284

Timestamp:

2021-08-11T16:24:17+12:00 (3 years ago)

Author:

davidb

Message:

Convert error templating to Vue

Location:

main/trunk/model-interfaces-dev/atea

Files:

• README.md (modified) (1 diff)
• js/asr/TranscribeModule.js (added)
• js/asr/TranscribeService.js (deleted)
• js/asr/asr-controller.js (modified) (8 diffs)
• style/asr.scss (modified) (5 diffs)
• transform/pages/asr.xsl (modified) (5 diffs)

main/trunk/model-interfaces-dev/atea/README.md

@@ -19 +19 @@
     npx grunt watch
     ```
+
+# ASR Development TODO
+
+- Play audio at certain words, based on timestamps returned by tuhituhi API
+- Corrections interface
+- WebVTT download option
+- Add transcription loading indicator
+- Make transcriptions fully load in on a separate page, with the normal entry providing an arrow link to expand it on the new page?
+- Ask user for confirmation before removing a transcription

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

@@ -4 +4 @@
  */
 
+import { TranscribeService, TranscriptionError, TranscriptionModel } from "./TranscribeModule.js";
+
 /** @type {HTMLAudioElement} */
 // @ts-ignore
@@ -20 +22 @@
 const TRANSCRIPTION_TEMPLATE = document.getElementById("transcriptionTemplate");
 
-/** @type {HTMLTemplateElement} */
-// @ts-ignore
-const ERROR_TEMPLATE = document.getElementById("errorTemplate");
-
 let cachedAudioFileList = new Map();
-
-/**
-* @callback loadScriptCallback
-* @param {Event} ev The event
-* @returns {void}
-*/
 
 // Get the size of each character in our monospace font
@@ -37 +29 @@
 {
     const monoCharSizeTestElement = document.querySelector(".monospace-font-size");
-    if (monoCharSizeTestElement == null || monoCharSizeTestElement.textContent == null) {
+    if (monoCharSizeTestElement == null || monoCharSizeTestElement.textContent == null)
+    {
         MONOSPACE_CHAR_SIZE = 8; // Slightly over-estimated guess for size 16 font.
         return;
@@ -45 +38 @@
 });
 
-/**
-* Loads a remote script.
-* Found at https://stackoverflow.com/questions/950087/how-do-i-include-a-javascript-file-in-another-javascript-file
-* 
-* @param {string} url The URL from which to load the script.
-*/
-function loadScript(url, callback = () => {})
-{
-    var body = document.body;
-
-    var script = document.createElement('script');
-    script.type = 'text/javascript';
-    script.src = url;
-    
-    script.addEventListener("load", callback);
-
-    body.appendChild(script);
-}
-
-var transcribeService;// = new TranscribeService();
-loadScript("./interfaces/atea/js/asr/TranscribeService.js", () => {
-    transcribeService = new TranscribeService();
-});
+var transcribeService = new TranscribeService();
 
 // @ts-ignore
 const AudioUploadComponent = Vue.createApp(
-{
-    data()
-    {
-        return {
-            files: undefined,
-            canTranscribe: false,
-            isTranscribing: false
-        }
-    },
-    methods:
-    {
-        openFilePicker() {
-            document.getElementById("audioFileInput")?.click();
+    {
+        data()
+        {
+            return {
+                files: undefined,
+                canTranscribe: false,
+                isTranscribing: false
+            }
         },
-        onFilesChanged()
-        {
-            /** @type {HTMLInputElement} */
-            // @ts-ignore | Object could be null
-            const audioFileInput = document.getElementById("audioFileInput");
-
-            if (audioFileInput.files?.length != undefined && audioFileInput.files?.length > 0) {
-                this.canTranscribe = true;
-                this.files = audioFileInput?.files
-            }
-            else {
-                this.canTranscribe = false;
-                this.files = undefined;
-            }
-        },
-        async doTranscription() {
-            await getTranscriptions();
-        }
-    }
-});
+        methods:
+        {
+            openFilePicker() {
+                document.getElementById("audioFileInput")?.click();
+            },
+            onFilesChanged()
+            {
+                /** @type {HTMLInputElement} */
+                // @ts-ignore | Object could be null
+                const audioFileInput = document.getElementById("audioFileInput");
+
+                if (audioFileInput.files?.length != undefined && audioFileInput.files?.length > 0) {
+                    this.canTranscribe = true;
+                    this.files = audioFileInput?.files
+                }
+                else {
+                    this.canTranscribe = false;
+                    this.files = undefined;
+                }
+            },
+            async doTranscription() {
+                // TODO: Push files to queue. If currently transcribing, good to go; it'll pull off it.
+                // Else call getTranscriptions();
+                // Then, we don't have to worry about preventing the user from transcribing multiple items.
+                await getTranscriptions();
+            }
+        }
+    }
+);
 const AudioUploadVM = AudioUploadComponent.mount("#audioUploadContainer");
+
+const TranscriptionsListComponent = Vue.createApp(
+    {
+        data()
+        {
+            return {
+                /** @type {TranscriptionModel[]} */
+                transcriptions: [],
+                /** @type {TranscriptionError[]} */
+                failures: []
+            }
+        }
+    }
+)
+const TranscriptionsListVM = TranscriptionsListComponent.mount("#transcriptionsDisplayContainer");
 
 /**
@@ -133 +123 @@
 async function getTranscriptions()
 {
+    AudioUploadVM.isTranscribing = true;
+
     /** @type {FileList} */
     const files = AudioUploadVM.files;
     
-    AudioUploadVM.isTranscribing = true;
-    await delay(1000); // TODO: Remove - UI testing purposes only
+    await delay(500); // TODO: Remove - UI testing purposes only
     // Cache the file list so that we can playback audio in the future
     for (const file of files) {
@@ -151 +142 @@
             {
                 if (!t.success) {
-                    insertError(t.file_name, t.log);
+                    TranscriptionsListVM.failures.push(new TranscriptionError(t.log, t.file_name));
                 }
-                else {  
-                    insertTranscription(t);
+                else {
+                    TranscriptionsListVM.transcriptions.push(t);
                 }
             }
@@ -163 +154 @@
         console.error("Failed to transcribe files");
         console.error(e);
-        insertError("all", e.statusMessage);
+        TranscriptionsListVM.failures.push(e);
     }
     
     AudioUploadVM.isTranscribing = false;
-}
-
-/**
- * Removes any transcriptions from the UI list.
- */
-function clearTranscriptions()
-{
-    cachedAudioFileList = new Map();
-    while (TRANSCRIPTIONS_LIST.lastChild) {
-        TRANSCRIPTIONS_LIST.removeChild(TRANSCRIPTIONS_LIST.lastChild);
-    }
 }
 
@@ -324 +304 @@
     }
 }
-
-/**
-* Inserts a transcription error into the DOM.
-* 
-* @param {String} fileName The file for which an error occured.
-* @param {String | null} statusMessage An informative error message to display.
-*/
-function insertError(fileName, statusMessage)
-{
-    /** @type {HTMLLIElement} */
-    // @ts-ignore
-    const clone = ERROR_TEMPLATE.content.firstElementChild.cloneNode(true);
-
-    /** @type {NodeListOf<HTMLSpanElement>} */
-    const spans = clone.querySelectorAll("span");
-    spans[0].textContent = statusMessage;
-    spans[1].textContent = fileName;
-    
-    TRANSCRIPTIONS_LIST.appendChild(clone);
-}

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

@@ -92 +92 @@
     margin: 0 1px 3px 1px; /* Keeps space around the box shadow */
 
-    -webkit-transition-duration: 0.2s;
-    transition-duration: 0.2s;
+    -webkit-transition-duration: 0.15s;
+    transition-duration: 0.15s;
 
     span {
@@ -144 +144 @@
 
 /* === End theme definitions === */
+
+/* === Start theme application === */
+
+button {
+    @extend .btn-primary;
+}
+
+/* === End theme application === */
 
 body {
@@ -172 +180 @@
 }
 
-#btnBeginTranscription {
-    float: right;
-}
 
 /* Transcriptions */
@@ -184 +189 @@
 
 .transcription__container {
-    margin-bottom: 1em;
+    padding: 0.5em;
+
+    -webkit-transition-duration: 0.15s;
+    transition-duration: 0.15s;
 
     &:last-child {
         margin-bottom: 0;
+    }
+
+    &:hover {
+        background-color: #EEE;
     }
 }
@@ -211 +223 @@
 }
 
-.error-list-item {
-    list-style-type: none;
-    background-color: rgba(255, 0, 0, 0.329);
-    border: 1px solid rgba(255, 0, 0, 0.651);
-    border-radius: 5px;
-    margin-bottom: 5px;
-    padding: 1em;
-}
-
-.error-list-item .spaced-block {
-    margin-bottom: 8px;
-
-    &:last-child {
-        margin-bottom: 0;
-    }    
+.transcription__error-container {
+    @extend .transcription__container;
+
+    background-color: rgba(255, 0, 0, 0.226);
+    
+    &:hover {
+        background-color: rgba(255, 0, 0, 0.226);
+    }
 }
 

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

@@ -48 +48 @@
         <link href="interfaces/{$interface_name}/style/asr.css" rel="stylesheet" type="text/css" />
 
-        <span class="monospace-font-size">ngā tama a rangi |</span>
+        <section id="audio-transcription-container" class="paper">
+            <!-- Used to calculate the character size of our monospace font -->
+            <span class="monospace-font-size">ngā tama a rangi</span>
 
-        <section id="audio-transcription-container" class="paper">
             <!-- Contains the file input, transcribe button and transcription progress indicator -->
             <div id="audioUploadContainer">
-                <button class="btn-primary" type="button" v-on:click="openFilePicker">
+                <button type="button" v-on:click="openFilePicker"
+                        v-bind:disabled="isTranscribing">
                     <span class="material-icons">&#xE2C6;</span> <!-- file_upload -->
                     <span>Upload Audio Files</span>
@@ -61 +63 @@
                        accept="audio/wav" multiple="multiple" v-bind:disabled="isTranscribing" />
 
-                <button id="btnBeginTranscription" class="btn-primary" type="submit"
+                <button style="float: right;" type="submit"
                         v-bind:disabled="!canTranscribe" v-on:click="doTranscription">
                     <span class="material-icons">&#xEA3E;</span> <!-- history_edu -->
@@ -70 +72 @@
             </div>
     
-            <!-- <div class="audio-slider__container">
-                <button type="button" class="btn-fab">
-                    <span class="material-icons mdi-xl">&#xE037;</span>
-                </button>
-                <input type="range" min="0" value="0" class="audio-slider__range" />
-                <span class="audio-slider__value">1:23</span>
-            </div> -->
-    
             <!-- Contains the audio element and transcription list -->
             <div id="transcriptionsDisplayContainer">
@@ -84 +78 @@
                     <source id="transcriptionAudioSource" />
                 </audio>
+
+                <ul class="transcription__list">
+                    <li v-for="transcription in transcriptions" class="transcription__container">
+                        {{ transcription.transcription }}
+                    </li>
+                    <li v-for="failure in failures" class="transcription__error-container">
+                        Failed to transcribe <i v-if="failure.file">{{ failure.file }}</i><br/>
+                        <span v-if="failure.message">Reason:    {{ failure.message }}</span>
+                    </li>
+                </ul>
+
+                <ul class="transcription__list">
+                    
+                </ul>
     
-                <ul id="transcriptionsList" class="transcription__list"></ul>
+                <!-- <ul id="transcriptionsList" class="transcription__list"></ul> -->
     
                 <template id="transcriptionTemplate">
@@ -117 +125 @@
                     </li>
                 </template>
-    
-                <template id="errorTemplate">
-                    <li class="error-list-item">
-                        <div>
-                            <div class="spaced-block">
-                                <b>Transcription Failed: </b><span></span>
-                            </div>
-                            <div class="spaced-block">
-                                <b>File: </b><span></span>
-                            </div>
-                        </div>
-                    </li>
-                </template>
             </div>
+
+            <!-- <div class="audio-slider__container">
+                <button type="button" class="btn-fab">
+                    <span class="material-icons mdi-xl">&#xE037;</span>
+                </button>
+                <input type="range" min="0" value="0" class="audio-slider__range" />
+                <span class="audio-slider__value">1:23</span>
+            </div> -->
         </section>
         
         <!-- TODO: Switch to production version for release builds -->
         <gsf:script src="https://unpkg.com/vue@next"></gsf:script>
-        <gsf:script src="interfaces/{$interface_name}/js/asr/asr-controller.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>