Changeset 35243

Timestamp:

2021-08-03T17:23:54+12:00 (3 years ago)

Author:

davidb

Message:

Implement ability to fetch and display transcriptions individually, and to show failed transcriptions.

Location:

main/trunk/model-interfaces-dev/atea

Files:

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

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

@@ +1 @@
+/**
+ * The transcription object returned from our transcription endpoint.
+ * 
+ * @typedef {Object} TranscriptionModel
+ * @property {String} transcription The transcription.
+ * @property {{char: String, start_time: Number}[]} metadata The character metadata.
+ * @property {String} file_name The name of the file that was transcribed.
+ */
+
 /**
  * A service that uploads audio files in a multipart request to the Korero Maori API Interface servlet, and interprets the result.
@@ -14 +23 @@
      * 
      * @param {FileList} files The files to upload.
-     * @returns {Promise<string>} A promise with an HTML response.
+     * @returns {Promise<TranscriptionModel>} A promise for an object representation of the JSON response.
      */
     async doFetchUpload(files)
@@ -42 +51 @@
 
         return response.json();
+    }
+
+    /**
+     * @callback TranscriptionPromiseCallback
+     * @param {Promise<Response>} promise A fetch promise containing an HTTP response.
+     * @param {String} filename The file that this transcription is for.
+     * @returns {void}
+     */
+
+    /**
+     * 
+     * @param {FileList} files The files to upload
+     * @param {TranscriptionPromiseCallback} callback A callback made with the fetch promise.
+     */
+    doIndividualFetchUpload(files, callback)
+    {
+        const that = this;
+        
+        for (let f of files)
+        {
+            const formData = new FormData();
+            formData.append("audioFile", f, f.name);
+            formData.append("audioFileKeys", "audioFile");
+
+            let promise = fetch
+            (
+                that.queryUrl, 
+                {
+                    method: "POST",
+                    body: formData
+                }
+            )
+            callback(promise, f.name);
+        }
     }
 

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

@@ -20 +20 @@
  * @param {Event} ev The event
  * @returns {void}
- */
-
-/**
- * The transcription object returned from our transcription endpoint.
- * 
- * @typedef {Object} TranscriptionModel
- * @property {String} transcription The transcription.
- * @property {{char: String, start_time: Number}[]} metadata The character metadata.
- * @property {String} file_name The name of the file that was transcribed.
  */
 
@@ -63 +54 @@
     $(FILE_UPLOAD_PROGRESS_CONTAINER_NAME).removeClass("asr-hidden");
 
-    transcribeService.doFetchUpload(files)
+    // Remove old transcriptions
+    const parent = document.querySelector("#transcriptionsList");
+    while (parent.lastChild) {
+        parent.removeChild(parent.lastChild);
+    }
+
+    transcribeService.doIndividualFetchUpload(files, (promise, fileName) => {
+        promise
         .then
         (
-            transcriptions => {
-                // Remove old transcriptions
-                const parent = document.querySelector("#transcriptionsList");
-                while (parent.lastChild) {
-                    parent.removeChild(parent.lastChild);
-                }
+            async response => 
+            {
+                /** @type {TranscriptionModel[]} */
+                const transcription = await response.json();
 
-                // Insert each new transcription
-                for (let t of transcriptions) {
+                // Note that there will only be one transcription here, however the proxy API always returns a list.
+                for (let t of transcription) {
+                    console.log("Inserting one transcription");
                     insertTranscription(t);
                 }
-            },
-            reason => {
-                console.log(reason)
             }
         )
-        .catch(error => console.log("Failed to upload audio files for transcription: " + error)) // TODO: display error to user
-        .finally(() => $(FILE_UPLOAD_PROGRESS_CONTAINER_NAME).addClass("asr-hidden"));
+        .catch
+        (
+            reason =>
+            {
+                insertError(fileName);
+                console.log(`Transcription for file ${fileName} failed with reason ${reason}`);
+            }
+        );
+    })
+
+    // transcribeService.doFetchUpload(files)
+    //     .then
+    //     (
+    //         transcriptions => {
+    //             // Insert each new transcription
+    //             for (let t of transcriptions) {
+    //                 insertTranscription(t);
+    //             }
+    //         },
+    //         reason => {
+    //             console.log(reason)
+    //         }
+    //     )
+    //     .catch(error => console.log("Failed to upload audio files for transcription: " + error)) // TODO: display error to user
+    //     .finally(() => $(FILE_UPLOAD_PROGRESS_CONTAINER_NAME).addClass("asr-hidden"));
     return false;
 }
@@ -90 +107 @@
 const transcriptionTemplate = document.querySelector('#transcriptionTemplate');
 const metadataTemplate = document.querySelector("#metadataTemplate");
+const errorTemplate = document.querySelector("#errorTemplate");
 
 /**
- * Inserts a transcription object into the DOM
+ * Inserts a transcription object into the DOM.
  * 
  * @param {TranscriptionModel} transcription The transcription to insert.
- * @returns {void}  
  */
 function insertTranscription(transcription)
@@ -135 +152 @@
 }
 
+/**
+ * Inserts a transcription error into the DOM.
+ * 
+ * @param {String} fileName 
+ */
+function insertError(fileName)
+{
+    // Get the transcription list and template
+    let list = document.querySelector("#transcriptionsList");
+
+    if (list == null || errorTemplate == null) {
+        console.error("Could not find transcription list and/or error template");
+        return;
+    }
+
+    // Insert a new transcription row
+    let clone = errorTemplate.content.firstElementChild.cloneNode(true);
+    let spans = clone.querySelectorAll("span");
+    spans[0].textContent = fileName;
+
+    list.appendChild(clone);
+}
+
 $(FILE_UPLOAD_INPUT_NAME).on("input", toggleUploadButtonState);
 

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

@@ -25 +25 @@
 .transcription-list-item .spaced-block:last-child {
   margin-bottom: 0;
+}
+
+.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;
 }
 

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

@@ -33 +33 @@
     <!-- the page content -->
     <xsl:template match="/page">
-  
-        <!-- <xsl:choose>
-            <xsl:when test="$this-element/displayItemList/displayItem[@name='icon']">
-              <img border="0">
-                <xsl:attribute name="src"><xsl:value-of select="$this-element/metadataList/metadata[@name='httpPath']"/>/images/<xsl:value-of select="$this-element/displayItemList/displayItem[@name='icon']"/></xsl:attribute>
-                <xsl:attribute name="alt">
-                  <xsl:value-of select="$this-element/displayItemList/displayItem[@name='name']"/>
-                </xsl:attribute>
-                <xsl:attribute name="title">
-                  <xsl:value-of select="util:getInterfaceText($interface_name, /page/@lang, 'aboutpage')"/>
-                </xsl:attribute>
-              </img>        
-            </xsl:when>      
-        </xsl:choose> -->
-        
         <xsl:call-template name="audio-upload"/>
     </xsl:template>
@@ -53 +38 @@
     <!-- Template for processing audio file uploads -->
     <xsl:template name="audio-upload">
-        <link rel="stylesheet" href="interfaces/{$interface_name}/style/asr.css" type="text/css"/>
+        <link rel="stylesheet" href="interfaces/{$interface_name}/style/asr.css" type="text/css" />
         
         <div>
@@ -70 +55 @@
         <div id="transcriptionsDisplayContainer">
             <ul id="transcriptionsList" class="transcription-list"></ul>
-            
+
             <template id="transcriptionTemplate">
                 <li class="transcription-list-item">
@@ -96 +81 @@
             </template>
 
+            <template id="errorTemplate">
+                <li class="error-list-item">
+                    <div>
+                        Transcription failed!<br />
+                        <b>File: </b><span></span>
+                    </div>
+                </li>
+            </template>
+
             <template id="metadataTemplate">
                 <tr>