Changeset 35259 for main/trunk/model-interfaces-dev

Timestamp:

2021-08-06T11:10:25+12:00 (3 years ago)

Author:

davidb

Message:

Implement support for switching between audio files

Location:

main/trunk/model-interfaces-dev/atea

Files:

• js/asr/TranscribeService.js (modified) (4 diffs)
• js/asr/asr-controller.js (modified) (7 diffs)
• transform/pages/asr.xsl (modified) (1 diff)

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

@@ +1 @@
+/**
+ * @file Defines components that are used to interact with the transcription proxy servlet.
+ * @author Carl Stephens
+ */
+
 /**
  * The transcription object returned from our transcription endpoint.
@@ -32 +37 @@
     constructor()
     {
-        /** @type {String} The URL to which query POST requests should be made */
-        this.queryUrl = "/gs3-koreromaori/transcribe/test";
+        /** @type {String} The URL to which query POST requests should be made. */
+        this.queryUrl = "/gs3-koreromaori/transcribe";
+
+        /** @type {Number} The maximum number of files which can be transcribed in one request to the API. */
         this.MAX_BATCH_COUNT = 3;
-        this.MAX_BATCH_SIZE = 5242880; // 5 MiB
+
+        /** @type {Number} The soft upper limit on how many bytes can be submitted in one request. */
+        this.BATCH_BYTE_LIMIT = 5242880; // 5 MiB
     }
 
@@ -55 +64 @@
         for (let file of files)
         {
-            if (fileCounter == this.MAX_BATCH_COUNT || byteCounter > this.MAX_BATCH_SIZE) // 5 MiB
+            if (fileCounter == this.MAX_BATCH_COUNT || byteCounter > this.BATCH_BYTE_LIMIT) // 5 MiB
             {
                 yield await this.transcribeFiles(filesToSubmit);
@@ -121 +130 @@
     }
 
-    // OBSOLETE. Kept for reference purposes. See doFetchUpload instead.
+    // OBSOLETE. Kept for reference purposes on XMLHttpRequest usage. See doFetchUpload instead.
     //
     // Based on https://stackoverflow.com/questions/2320069/jquery-ajax-file-upload

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

@@ -1 @@
-// The controller for asr.xsl
+/**
+ * @file Controller logic for asr.xsl.
+ * @author Carl Stephens
+ */
 // @ts-nocheck
 
@@ -48 +51 @@
 const transcriptionAudioSourceElement = document.getElementById("transcriptionAudioSource");
 
+let cachedAudioFileList = new Map();
+
 async function doAudioUpload()
 {
+    /** @type {FileList} */
     const files = $(FILE_UPLOAD_INPUT_NAME)[0].files;
     
-    transcriptionAudioSourceElement.src = URL.createObjectURL(files[0]);
-    transcriptionAudioElement.load();
-    
+    // Disable the file input while transcribing, and show the progress bar
     $(FILE_UPLOAD_INPUT_NAME).prop("disabled", true);
     $(FILE_UPLOAD_PROGRESS_CONTAINER_NAME).removeClass("asr-hidden");
     
     clearTranscriptions();
-    
+
+    // Cache the file list so that we can playback audio in the future
+    for (const file of files) {
+        cachedAudioFileList.set(file.name, file)
+    }
+    
+    // Transcribe each audio file in batches.
     try
     {
-        for await (const transcriptionBundle of transcribeService.batchTranscribeFiles(files))
+        for await (const batch of transcribeService.batchTranscribeFiles(files))
         {
-            for (const t of transcriptionBundle)
+            for (const t of batch)
             {
                 if (!t.success) {
@@ -81 +91 @@
     }
     
+    // Hide the progress bar and re-enable the file input.
     $(FILE_UPLOAD_PROGRESS_CONTAINER_NAME).addClass("asr-hidden");
     $(FILE_UPLOAD_INPUT_NAME).prop("disabled", false);
@@ -93 +104 @@
 function clearTranscriptions()
 {
+    cachedAudioFileList = new Map();
     while (transcriptionsList.lastChild) {
         transcriptionsList.removeChild(transcriptionsList.lastChild);
@@ -123 +135 @@
     // Insert metadata rows
     for (const metadata of transcription.metadata) {
-        metadataList.appendChild(buildMetadataNode(metadata));
+        metadataList.appendChild(buildMetadataNode(metadata, transcription.file_name));
     }
     
@@ -150 +162 @@
     
     button.dataset.fileName = fileName;
-    button.onclick = function()
+    button.onclick = function(e)
     {
+        // Have to traverse the event path, because the event target is the child element of the button.
+        const requestedAudioFile = e.composedPath().find((t) => t instanceof HTMLButtonElement).dataset.fileName;
+        const currentAudioFile = transcriptionAudioSourceElement.dataset.fileName;
+
+        // Load the appropiate audio if necessary.
+        if (currentAudioFile != requestedAudioFile)
+        {
+            if (currentAudioFile) {
+                URL.revokeObjectURL(currentAudioFile);
+            }
+
+            const urlObject = URL.createObjectURL(cachedAudioFileList.get(requestedAudioFile));
+            transcriptionAudioSourceElement.src = urlObject;
+            transcriptionAudioSourceElement.dataset.fileName = requestedAudioFile;
+            transcriptionAudioElement.load();
+        }
+
         transcriptionAudioElement.currentTime = metadata.start_time;
         transcriptionAudioElement.play();
@@ -173 +202 @@
 * 
 * @param {String} fileName The file for which an error occured.
-* @param {String | undefined} statusMessage An informative error message to display.
+* @param {String | null} statusMessage An informative error message to display.
 */
 function insertError(fileName, statusMessage)

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

@@ -54 +54 @@
 
         <div id="transcriptionsDisplayContainer">
-            <audio id="transcriptionAudio" controls="controls">
-                <source id="transcriptionAudioSource" src="" />
+            <audio id="transcriptionAudio">
+                <source id="transcriptionAudioSource" />
             </audio>