source: main/trunk/model-interfaces-dev/atea/korero-maori-asr/src/components/AudioUpload.vue@ 35407

<template>
    <!-- Contains the file input, transcribe button and transcription progress indicator -->
    <div class="audio-file-picker">
        <div class="input-bar">
            <!-- <button type="button" v-on:click="openFilePicker">
                <span class="material-icons">&#xE2C6;</span> file_upload
                <span>Upload Audio Files</span>
            </button>-->

            <div class="text-input-sl" style="cursor: pointer;" @click="openFilePicker">
                <span class="text-placeholder material-icons" v-if="!anyFiles">&#xe226;</span> <!-- attach_file -->
                <span class="text-placeholder" v-if="!anyFiles">{{ translations.get("AudioUpload_SelectFileText") }}</span>
                <span v-if="anyFiles">{{ getFileNameList }}</span>
            </div>

            <input ref="audioFileInput" type="file" @input="onFilesChanged"
                accept="audio/wav" multiple :disabled="isTranscribing" />

            <button type="submit" :disabled="!anyFiles || isTranscribing" @click="doTranscription">
                <span class="material-icons">&#xEA3E;</span> <!-- history_edu -->
                <span>{{ translations.get("AudioUpload_TranscribeFiles") }}</span>
            </button>
        </div>

        <progress v-if="isTranscribing" class="indeterminateLoadingBar" />

        <ul class="list-view" v-if="failures.size > 0">
            <li v-for="[id, failure] in failures" :key="failure.id" class="list-view__item transcription-error-container">
                <div>
                    {{ translations.get("AudioUpload_TranscriptionFailed_Message") }} <i v-if="failure.fileName">{{ failure.fileName }}</i><br />
                    <span v-if="failure.message">{{ translations.get("AudioUpload_TranscriptionFailed_Reason") }}: {{ failure.message }}</span>
                </div>

                <button class="btn-fab theme-flat" @click="dismissFailure(id)">
                    <span class="material-icons">&#xE14C;</span> <!-- clear -->
                </button>
            </li>
        </ul>
    </div>
</template>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.audio-file-picker {
    display: flex;
    gap: 0.5em;
    flex-direction: column;

    input {
        display: none;
    }

    .text-container {
        cursor: pointer;
    }
}

.input-bar {
    display: grid;
    align-items: stretch;
    gap: 0.5em;
    grid-template-columns: 1fr auto;
}

.transcription-error-container {
    display: grid;
    gap: 0.5em;
    grid-template-columns: 1fr auto;
    align-items: center;

    border-left: 3px solid red;
}
</style>

<script>
import { mapState } from "vuex";
import TranscribeService from "../js/TranscribeModule";
import Util from "../js/Util";
import { TranscriptionViewModel } from "../main"

class TranscriptionViewFailure {
    /**
     * @param {String} fileName The name of the file for which this failure occured.
     * @param {String} message The reason for this failure.
     */
    constructor(fileName, message) {
        /** @type {String} The UUID of this failure. */
        this.id = Util.generateUuid();

        /** @type {String | null} The name of the file for which this failure occured. */
        this.fileName = fileName;

        /** @type {String} The reason for the failure. */
        this.message = message;
    }
}

const transcribeService = new TranscribeService();

export default {
    name: "AudioUpload",
    data() {
        return {
            /** @type {File[]} */
            files: [],
            /** @type {Map<String, TranscriptionViewFailure>} */
            failures: new Map(),
            canTranscribe: false,
            isTranscribing: false
        }
    },
    computed: mapState({
        translations: state => state.translations,
        anyFiles() {
            return this.files?.length > 0;
        },
        getFileNameList() {
            let fileNameList = "";

            for (const file of this.files) {
                fileNameList += file.name + ", ";
            }

            return fileNameList.slice(0, fileNameList.length - 2);
        }
    }),
    emits: [ "newTranscription" ],
    methods: {
        openFilePicker() {
            this.$refs.audioFileInput.click();
        },
        onFilesChanged() {
            this.files = [];
            const files = this.$refs.audioFileInput.files;

            if (files?.length !== undefined && files?.length > 0) {
                for (const file of files) {
                    this.files.push(file);
                }
            }
        },
        async doTranscription() {
            this.isTranscribing = true;

            await getTranscriptions(this.files, this.$store, this);

            this.files = []; // Clear the file list, as there is no reason the user would want to transcribe the same file multiple times over
            this.isTranscribing = false;
            // TODO: Push files to queue. If currently transcribing, good to go; it'll pull off it.
            // Else call getTranscriptions();
            // Then, we don't have to worry about preventing the user from transcribing multiple items.
        },
        /**
         * Dismisses a failure
         * @param {String} id The UUID of the failure.
         */
        dismissFailure(id) {
            this.failures.delete(id);
        }
    }
}

/**
 * Gets the transcription of each submitted audio file.
 *
 * @param {File[]} files The files to transcribe.
 */
async function getTranscriptions(files, store, vm) {
    await Util.delay(200); // TODO: Remove - UI testing purposes only

    try {
        for await (const batch of transcribeService.batchTranscribeFiles(files)) {
            for (const t of batch) {
                if (!t.success) {
                    const failure = new TranscriptionViewFailure(t.file_name, t.log);
                    vm.failures.set(failure.id, failure);
                }
                else {
                    const f = files.find(f => f.name === t.file_name);
                    if (f === undefined) {
                        throw new Error("File name mismatch");
                    }

                    // TODO: Hash file name and size instead. Good indicator that the user has uploaded a duplicate.
                    const tvm = new TranscriptionViewModel(t, f);
                    store.commit("transcriptionAdd", tvm);
                    // let model = new TranscriptionViewModel(t, f);
                    // model.words = getTranscriptionWords(t);

                    // TranscriptionsListVM.transcriptions.set(model.id, model);
                }
            }
        }
    }
    catch (e) {
        console.error("Failed to transcribe files");
        console.error(e);

        const failure = new TranscriptionViewFailure(e.fileName, e.message);
        vm.failures.set(failure.id, failure);
    }
}
</script>