source: main/trunk/model-interfaces-dev/atea/js/asr/asr-controller.js@ 35259

/**
 * @file Controller logic for asr.xsl.
 * @author Carl Stephens
 */
// @ts-nocheck

/**
* The name of the file input that audio files can be uploaded to.
*/
const FILE_UPLOAD_INPUT_NAME = "#fileUpload";

/**
* The name of the container that holds the progress display for the audio upload.
*/
const FILE_UPLOAD_PROGRESS_CONTAINER_NAME = "#prgFileUploadContainer";

/**
* @callback loadScriptCallback
* @param {Event} ev The event
* @returns {void}
*/

/**
* 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.onload = callback;

    body.appendChild(script);
}

var transcribeService;
loadScript("./interfaces/atea/js/asr/TranscribeService.js", () => {
    transcribeService = new TranscribeService();
});

/** @type {HTMLAudioElement} */
const transcriptionAudioElement = document.getElementById("transcriptionAudio");

/** @type {HTMLSourceElement} */
const transcriptionAudioSourceElement = document.getElementById("transcriptionAudioSource");

let cachedAudioFileList = new Map();

async function doAudioUpload()
{
    /** @type {FileList} */
    const files = $(FILE_UPLOAD_INPUT_NAME)[0].files;
    
    // 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 batch of transcribeService.batchTranscribeFiles(files))
        {
            for (const t of batch)
            {
                if (!t.success) {
                    insertError(t.file_name, t.log);
                }
                else {
                    insertTranscription(t);
                }
            }
        }
    }
    catch (e)
    {
        console.error("Failed to transcribe files: " + e);
        insertError("all", e.statusMessage);
    }
    
    // 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);
}

/** @type {HTMLUListElement} */
const transcriptionsList = document.getElementById("transcriptionsList");

/**
 * Removes any transcriptions from the UI list.
 */
function clearTranscriptions()
{
    cachedAudioFileList = new Map();
    while (transcriptionsList.lastChild) {
        transcriptionsList.removeChild(transcriptionsList.lastChild);
    }
}

/** @type {HTMLTemplateElement} */
const transcriptionTemplate = document.getElementById("transcriptionTemplate");

/**
* 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)
{
    // Insert a new transcription row
    const clone = transcriptionTemplate.content.firstElementChild.cloneNode(true);

    /** @type {HTMLSpanElement[]} */
    const spans = clone.querySelectorAll("span");
    spans[0].textContent = transcription.file_name;
    spans[1].textContent = transcription.transcription;
    
    // Get the metadata list and template
    /** @type {HTMLUListElement} */
    const metadataList = clone.querySelector("#metadataList");
    
    // Insert metadata rows
    for (const metadata of transcription.metadata) {
        metadataList.appendChild(buildMetadataNode(metadata, transcription.file_name));
    }
    
    transcriptionsList.appendChild(clone);
}

/** @type {HTMLTemplateElement} */
const metadataTemplate = document.getElementById("metadataTemplate");

/**
 * Builds a metadata node.
 * 
 * @param {{char: string, confidence: number, start_time: number}} metadata The metadata used to create the node.
 * @param {String} fileName The file that this metadata was generated from.
 * @returns {Node} The constructed DOM node.
 */
function buildMetadataNode(metadata, fileName)
{
    const metadataClone = metadataTemplate.content.firstElementChild.cloneNode(true);

    /** @type {HTMLParagraphElement} */
    const p = metadataClone.querySelector("p");
    
    /** @type {HTMLButtonElement} */
    const button = metadataClone.querySelector("button");
    
    button.dataset.fileName = fileName;
    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();
    }
    
    if (metadata.char == ' ') {
        p.textContent = "\u00A0 " // This helps with formatting, as elements that only contain whitespace are collapsed.
    }
    else {
        p.textContent = metadata.char;
    }

    return metadataClone;
}

/** @type {HTMLTemplateElement} */
const errorTemplate = document.querySelector("#errorTemplate");

/**
* 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)
{
    const clone = errorTemplate.content.firstElementChild.cloneNode(true);

    /** @type {HTMLSpanElement[]} */
    const spans = clone.querySelectorAll("span");
    spans[0].textContent = statusMessage;
    spans[1].textContent = fileName;
    
    transcriptionsList.appendChild(clone);
}

// Ensure the transcribe button is disabled when there are no files selected.
$(FILE_UPLOAD_INPUT_NAME).on("input", e =>
{
    if (e.target.files.length <= 0) {
        $("#btnFileUpload").prop("disabled", true);
    }
    else {
        $("#btnFileUpload").prop("disabled", false);
    }
});

// whenever we hover over a menu item that has a submenu
$('.tooltip-parent').on('mouseover', function() {
    var $menuItem = $(this),
    $submenuWrapper = $('> .tooltip-wrapper', $menuItem);
    
    var menuItemPos = $menuItem.position();
    
    $submenuWrapper.css({
        top: menuItemPos.top,
        left: menuItemPos.left + Math.round($menuItem.outerWidth() * 0.75)
    });
});

// $(function() {
    
// });