Changeset 35301

Timestamp:

2021-08-17T11:08:33+12:00 (3 years ago)

Author:

davidb

Message:

Fix incorrect audio being loaded when duplicate filenames are present

Location:

main/trunk/model-interfaces-dev/atea

Files:

• js/asr/TranscribeModule.js (modified) (2 diffs)
• js/asr/asr-controller.js (modified) (10 diffs)
• transform/pages/asr.xsl (modified) (6 diffs)

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

@@ -50 +50 @@
      * @param {Number | undefined} statusCode The HTTP status code of the error.
      * @param {String | undefined} message The status message.
-     * @param {String | null} file The file on which the transcription failed.
-     */
-    constructor(message = undefined, file = null, statusCode = -1)
+     * @param {String | null} fileName The file on which the transcription failed.
+     */
+    constructor(message = undefined, fileName = null, statusCode = -1)
     {
         super(message);
-        //this.message = message;
-
-        this.file = file;
+
+        /** @type {String | null} The name of the file that the transcription error occured on. */
+        this.fileName = fileName;
+
+        /** @type {Number | undefined} The status code returned by the API when the erro was generated. */
         this.statusCode = statusCode;
     }
@@ -85 +87 @@
      * A maximum of 5 MiB before chunking.
      * 
-     * @param {FileList} files The files to upload
+     * @param {FileList | File[]} files The files to upload
      * @returns {AsyncGenerator<TranscriptionModel[]>} The transcribed audio files.
      * @throws {TranscriptionError} When the transcription request fails to complete.

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

@@ -14 +14 @@
 const TRANSCRIPTION_AUDIO_SOURCE_ELEMENT = document.getElementById("transcriptionAudioSource");
 
-let cachedAudioFileList = new Map();
+class TranscriptionViewModel {
+    /**
+     * Initialises a new instance of the {@link TranscriptionViewModel} class.
+     * 
+     * @param {TranscriptionModel} transcription
+     * @param {File} file The file from which the transcription was generated.
+     */
+    constructor(transcription, file) {
+        /** @type {String} The UUID of this transcription. */
+        this.id = UUID.generate();
+
+        /** @type {String} The transcription. */
+        this.transcription = transcription.transcription;
+
+        /** @type {String} The name of the file from which the transcription was generated. */
+        this.fileName = transcription.file_name;
+
+        /** @type {TranscriptionMetadata[]} The transcription metadata. */
+        this.metadata = transcription.metadata;
+
+        /** @type {File} The file from which the transcription was generated. */
+        this.file = file;
+    }
+}
+
 var transcribeService = new TranscribeService();
 
@@ -93 +117 @@
 
                 if (audioFileInput.files?.length != undefined && audioFileInput.files?.length > 0) {
-                    this.files = audioFileInput?.files
+                    
+                    for (const f of audioFileInput.files) {
+                        this.files.push(f);
+                    }
                 }
                 else {
@@ -103 +130 @@
                 // Else call getTranscriptions();
                 // Then, we don't have to worry about preventing the user from transcribing multiple items.
-                await getTranscriptions();
+                await getTranscriptions(this.files);
             }
         }
@@ -110 +137 @@
 const AudioUploadVM = AudioUploadComponent.mount("#audioUploadContainer");
 
-/**
- * @typedef TranscriptionViewModel
- * @property {String} id
- * @property {String} transcription
- * @property {String} fileName
- * @property {TranscriptionMetadata} metadata
- * @property {File} file
- */
-
 // @ts-ignore
 const TranscriptionsListComponent = Vue.createApp(
@@ -125 +143 @@
     {
         return {
-            /** @type {Map<String, TranscriptionModel>} */
+            /** @type {Map<String, TranscriptionViewModel>} */
             transcriptions: new Map(),
             /** @type {Map<String, TranscriptionError>} */
             failures: new Map(),
             showCharDisplay: false,
-            showWordList: 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;
+            showWordList: false,
+            /** @type {{id: String, url: String} | null} Gets the ID of the transcription for which the audio is currently loaded */
+            currentlyLoadedAudio: null
         }
     },
     methods:
     {
-        playAudioFile(fileName, startTime = 0) // TODO: Convert to ID
+        playAudioFile(transcriptionId, startTime = 0) // TODO: Convert to ID
         {
             if (startTime < 0)
@@ -169 +169 @@
             }
             
-            console.log("Starting at " + startTime + " seconds");
-            loadAudioFile(fileName);
-            this.currentAudioTime = startTime;
+            this.currentlyLoadedAudio = loadTranscriptionAudio(transcriptionId, this.currentlyLoadedAudio);
+
             TRANSCRIPTION_AUDIO_ELEMENT.currentTime = startTime;
             TRANSCRIPTION_AUDIO_ELEMENT.play();
@@ -267 +266 @@
 /**
  * Gets the transcription of each submitted audio file.
+ * 
+ * @param {File[]} files The files to transcribe.
  */
-async function getTranscriptions()
+async function getTranscriptions(files)
 {
     AudioUploadVM.isTranscribing = true;
-
-    /** @type {FileList} */
-    const files = AudioUploadVM.files;
     
-    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) {
-        cachedAudioFileList.set(file.name, file)
-    }
+    // await delay(200); // TODO: Remove - UI testing purposes only
     
     // Transcribe each audio file in batches.
@@ -293 +286 @@
                 }
                 else {
-                    TranscriptionsListVM.transcriptions.set(UUID.generate(), t);
+                    let f = files.find(f => f.name == t.file_name);
+                    if (f == undefined)
+                        throw new Error("File name mismatch");
+
+                    let model = new TranscriptionViewModel(t, f);
+
+                    TranscriptionsListVM.transcriptions.set(model.id, model);
                 }
             }
@@ -302 +301 @@
         console.error("Failed to transcribe files");
         console.error(e);
-        TranscriptionsListVM.failures.push(e);
+        TranscriptionsListVM.failures.set(UUID.generate(), e);
     }
     
@@ -371 +370 @@
 /**
  * Loads an audio file.
- * @param {String} requestedAudioFile The name of the requested audio file.
+ * @param {String} transcriptionId The name of the requested audio file.
+ * @param {{id: String, url: String} | null} current The currently loaded audio.
+ * @returns {{id: String, url: String}} If a new audio file was loaded, a new audio tracking object, else the current one.
  */
-function loadAudioFile(requestedAudioFile)
-{
-    const currentAudioFile = TRANSCRIPTION_AUDIO_SOURCE_ELEMENT.dataset.fileName;
-
-    // Load the appropiate audio if necessary.
-    if (currentAudioFile != requestedAudioFile)
-    {
-        // If an audio file is already loaded we can revoke it.
-        if (currentAudioFile) {
-            URL.revokeObjectURL(currentAudioFile);
-        }
-
-        const urlObject = URL.createObjectURL(cachedAudioFileList.get(requestedAudioFile));
+function loadTranscriptionAudio(transcriptionId, current)
+{
+    if (current == null || current.id != transcriptionId)
+    {
+        // TODO: Need to profile on some larger tracks; this may not be worth it? Better to cache a URL object instead?
+        if (current != null) {
+            URL.revokeObjectURL(current.url);
+        }
+
+        const urlObject = URL.createObjectURL(TranscriptionsListVM.transcriptions.get(transcriptionId).file);
         TRANSCRIPTION_AUDIO_SOURCE_ELEMENT.src = urlObject;
-        TRANSCRIPTION_AUDIO_SOURCE_ELEMENT.dataset.fileName = requestedAudioFile;
         TRANSCRIPTION_AUDIO_ELEMENT.load();
-    }
+
+        return { id: transcriptionId, url: urlObject };
+    }
+
+    return current;
 }
 

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

@@ -84 +84 @@
                         <div class="transcription__error-container card">
                             <div>
-                                Failed to transcribe <i v-if="value.file">{{ value.file }}</i><br/>
+                                Failed to transcribe <i v-if="value.file">{{ value.fileName }}</i><br/>
                                 <span v-if="value.message">Reason: {{ value.message }}</span>
                             </div>
@@ -95 +95 @@
 
                     <!-- Displays each transcription --> 
-                    <li v-for="transcription in getTranscriptions">
+                    <li v-for="[id, transcription] in transcriptions">
                         <div class="transcription__container card">
                             <!-- Header containing info and actions for the transcription -->
@@ -101 +101 @@
                                 <span>File: {{ transcription.fileName }}</span>
 
-                                <button class="theme-error" v-on:click="removeTranscription(transcription.id)" type="button">
+                                <button class="theme-error" v-on:click="removeTranscription(id)" type="button">
                                     <span class="material-icons">delete</span>
                                     <span>Remove</span>
@@ -113 +113 @@
                             <div class="transcription__word-list" v-if="showWordList">
                                 <div class="transcription__word-list__controls">
-                                    <button class="btn-fab" v-on:click="playAudioFile(transcription.fileName)" type="button">
+                                    <button class="btn-fab" v-on:click="playAudioFile(id)" type="button">
                                         <span class="material-icons">play_arrow</span>
                                     </button>
@@ -123 +123 @@
                                     <li v-if="!showCharDisplay">
                                         <span v-for="word in getWords(transcription.id)" class="transcription__word"
-                                              v-on:click="playAudioFile(transcription.fileName, word.startTime)">
+                                              v-on:click="playAudioFile(id, word.startTime)">
                                             {{ word.word }}
                                         </span>
@@ -129 +129 @@
                                     <li v-if="showCharDisplay">
                                         <span v-for="char in getChars(transcription.id)" class="transcription__word"
-                                              v-on:click="playAudioFile(transcription.fileName, char.startTime)">
+                                              v-on:click="playAudioFile(id, char.startTime)">
                                             {{ char.char }}
                                         </span>