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

/**
 * @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 = "#audioFileUpload";

/**
* 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 TRANSCRIPTION_AUDIO_ELEMENT = document.getElementById("transcriptionAudio");

/** @type {HTMLSourceElement} */
const TRANSCRIPTION_AUDIO_SOURCE_ELEMENT = 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");
        console.error(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 TRANSCRIPTIONS_LIST = document.getElementById("transcriptionsList");

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

/** @type {HTMLTemplateElement} */
const TRANSCRIPTION_TEMPLATE = 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)
{
    // Create a new transcription row
    /** @type {HTMLLIElement} */
    const clone = TRANSCRIPTION_TEMPLATE.content.firstElementChild.cloneNode(true);

    const textElement = clone.querySelector(".transcription__text");
    textElement.textContent = transcription.transcription;
    const fileNameElement = clone.querySelector(".transcription__file-name");
    fileNameElement.textContent = transcription.file_name;

    // Hook up the remove button
    /** @type {HTMLButtonElement} */
    const removeButton = clone.querySelector(".transcription__remove-button");
    removeButton.onclick = onDeleteTranscription;

    loadAudioFile(transcription.file_name);
    
    // Prepare the audio slider
    /** @type {HTMLInputElement} */
    const audioSlider = clone.querySelector(".audio-slider");
    audioSlider.max = TRANSCRIPTION_AUDIO_ELEMENT.duration;
    audioSlider.step = 0.01;

    // Get the metadata list
    /** @type {HTMLUListElement} */
    const metadataList = clone.querySelector(".metadata-list");
    
    // Insert metadata rows
    for (const metadata of transcription.metadata) {
        metadataList.appendChild(buildMetadataNode(metadata));
    }

    // Set the filename data property on every element in the clone's DOM node
    recurseAddData(clone, "file-name", transcription.file_name);
    
    TRANSCRIPTIONS_LIST.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)
{
    const metadataClone = metadataTemplate.content.firstElementChild.cloneNode(true);

    /** @type {HTMLParagraphElement} */
    const p = metadataClone.querySelector("p");
    
    /** @type {HTMLButtonElement} */
    const button = metadataClone.querySelector("button");

    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;
        loadAudioFile(requestedAudioFile);

        TRANSCRIPTION_AUDIO_ELEMENT.currentTime = metadata.start_time;
        TRANSCRIPTION_AUDIO_ELEMENT.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;
}

/**
 * Loads an audio file.
 * @param {String} requestedAudioFile The name of the requested audio file.
 */
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));
        TRANSCRIPTION_AUDIO_SOURCE_ELEMENT.src = urlObject;
        TRANSCRIPTION_AUDIO_SOURCE_ELEMENT.dataset.fileName = requestedAudioFile;
        TRANSCRIPTION_AUDIO_ELEMENT.load();
    }
}

/**
 * Removes a transcription from the DOM.
 * 
 * @param {MouseEvent} ev The mouse click event.
 */
function onDeleteTranscription(ev)
{
    const fileName = ev.target.dataset.fileName;
    const child = document.querySelector(`.transcription__container[data-file-name='${fileName}']`);

    TRANSCRIPTIONS_LIST.removeChild(child);
    cachedAudioFileList.delete(fileName);
}

/**
 * Recurses through the entire tree of a parent and adds the given data attribute.
 * 
 * @param {HTMLElement} parent The parent node.
 * @param {String} dataElementname The name of the data element. Must use hyphen notation, rather than camel case.
 * @param {String} value The value of the data element.
 */
function recurseAddData(parent, dataElementName, value)
{
    parent.setAttribute("data-" + dataElementName, value);

    for (const child of parent.children) {
        recurseAddData(child, dataElementName, value);
    }
}

/** @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;
    
    TRANSCRIPTIONS_LIST.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) {
        $("#btnBeginTranscription").prop("disabled", true);
    }
    else {
        $("#btnBeginTranscription").prop("disabled", false);
    }
});

$('.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)
    });
});