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

// The controller for asr.xsl
// @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";

/**
 * The name of the button that triggers the audio upload
 */
const FILE_UPLOAD_BUTTON_NAME = "#btnFileUpload";

/**
 * @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.
 * @param {loadScriptCallback} callback Callback performed when the script has been loaded.
 */
function loadScript(url, callback = () => {})
{
    // Append the script to the body element
    var body = document.body;
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = url;
    
    script.onload = callback;

    body.appendChild(script);
}

loadScript("./interfaces/atea/js/asr/TranscribeService.js");

async function doAudioUpload()
{
    const files = $(FILE_UPLOAD_INPUT_NAME)[0].files;
    const transcribeService = new TranscribeService();

    $(FILE_UPLOAD_PROGRESS_CONTAINER_NAME).removeClass("asr-hidden");

    // Remove old transcriptions
    const transcriptionsList = document.querySelector("#transcriptionsList");
    if (transcriptionsList == null)
    {
        console.error("Cannot find transcriptions list");
        return;
    }

    while (transcriptionsList.lastChild) {
        transcriptionsList.removeChild(transcriptionsList.lastChild);
    }

    try
    {
        for await (const transcriptionBundle of transcribeService.chunkTranscribeFiles(files))
        {
            for (const t of transcriptionBundle)
            {
                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);
    }

    $(FILE_UPLOAD_PROGRESS_CONTAINER_NAME).addClass("asr-hidden");
}

// Adapted from https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template
const transcriptionTemplate = document.querySelector('#transcriptionTemplate');
const metadataTemplate = document.querySelector("#metadataTemplate");

/**
 * Inserts a transcription object into the DOM.
 * 
 * @param {TranscriptionModel} transcription The transcription to insert.
 */
function insertTranscription(transcription)
{
    // Get the transcription list and template
    let list = document.querySelector("#transcriptionsList");

    // Insert a new transcription row
    let clone = transcriptionTemplate.content.firstElementChild.cloneNode(true);
    let spans = clone.querySelectorAll("span");
    spans[0].textContent = transcription.file_name;
    spans[1].textContent = transcription.transcription;

    // Get the metadata list and template
    let metadataList = clone.querySelector("#metadataList");

    if (metadataList == null || metadataTemplate == null)
    {
        console.error("Could not find metadata list and/or template.");
        return;
    }

    // Insert metadata rows
    for (let metadata of transcription.metadata)
    {
        let metadataClone = metadataTemplate.content.firstElementChild.cloneNode(true);
        let metadataSpans = metadataClone.querySelectorAll("td");
    
        metadataSpans[0].textContent = metadata.char;
        metadataSpans[1].textContent = metadata.start_time;

        metadataList.appendChild(metadataClone);
    }

    list.appendChild(clone);
}

const errorTemplate = document.querySelector("#errorTemplate");

/**
 * Inserts a transcription error into the DOM.
 * 
 * @param {String} fileName 
 * @param {String | undefined} statusMessage
 */
function insertError(fileName, statusMessage)
{
    // 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 = statusMessage;
    spans[1].textContent = fileName;

    list.appendChild(clone);
}

$(FILE_UPLOAD_INPUT_NAME).on("input", toggleUploadButtonState);

function toggleUploadButtonState(e)
{
    if (e.target.files.length <= 0) {
        $(FILE_UPLOAD_BUTTON_NAME).prop("disabled", true);
    }
    else {
        $(FILE_UPLOAD_BUTTON_NAME).prop("disabled", false);
    }
}