Changeset 35723 for main

Timestamp:

2021-11-08T15:51:51+13:00 (2 years ago)

Author:

cstephen

Message:

Add support for file macronisation

Location:

main/trunk/model-interfaces-dev/atea/macron-restoration/src

Files:

• App.vue (modified) (3 diffs)
• components/AudioUpload.vue (deleted)
• components/DirectInput.vue (modified) (6 diffs)
• components/FileInput.vue (modified) (2 diffs)
• components/FileUpload.vue (added)
• components/TabBar.vue (added)
• js/MacronRestorationModule.js (modified) (6 diffs)
• main.js (modified) (3 diffs)
• styles/_material.scss (modified) (4 diffs)

main/trunk/model-interfaces-dev/atea/macron-restoration/src/App.vue

@@ -12 +12 @@
 
     <div class="paper content">
-        <DirectInput />
+        <tab-bar :tabs="tabs" v-model="selectedTab" />
+        <hr class="divider" />
+
+        <div class="inner-content" v-if="selectedTab === 'direct'">
+            <direct-input />
+        </div>
+        <div class="inner-content" v-if="selectedTab === 'file'">
+            <file-input />
+        </div>
     </div>
-
-    <!-- <ul id="transcription-list" class="list-view content">
-        <transition-group name="transcription-list">
-            <li class="list-item transcription-list-item" v-for="[id, transcription] in transcriptions" :key="id">
-                <TranscriptionItem :transcription="transcription" />
-            </li>
-        </transition-group>
-    </ul> -->
 </template>
 
@@ -55 +55 @@
 
 .content {
+    padding: 0;
     margin: 1em;
+}
+
+.inner-content {
+    padding: 1em;
 }
 
@@ -79 +84 @@
 import { mapState } from "vuex";
 import DirectInput from "./components/DirectInput.vue"
+import FileInput from "./components/FileInput.vue"
+import TabBar from "./components/TabBar.vue"
 
 export default {
     name: "App",
     components: {
-        DirectInput
+        DirectInput,
+        FileInput,
+        TabBar
     },
-    computed: mapState({
-        translations: state => state.translations
-    })
+    data() {
+        return {
+            selectedTab: "direct"
+        }
+    },
+    computed: {
+        tabs() {
+            return [
+                { label: this.translations.get("DirectInput"), value: "direct" },
+                { label: this.translations.get("FileInput"), value: "file" }
+            ]
+        },
+        ...mapState({
+            translations: state => state.translations
+        })
+    }
 }
 </script>

main/trunk/model-interfaces-dev/atea/macron-restoration/src/components/DirectInput.vue

@@ -3 +3 @@
     <textarea class="text-input input-area" @input="onTextInput"
         v-model="input" :placeholder="translations.get('DirectInput_InputPlaceholder')" />
+
     <div class="text-container">
-        {{ output }}
+        <span v-if="errorState" class="material-icons mdi-m error-text">error</span>
+        <span v-if="errorState" class="error-text">Something went wrong! Please try modifying your input text.</span>
+
+        <!-- eslint-disable-next-line vue/require-v-for-key -->
+        <span v-for="word in validRestored" :class="{ 'highlight': word.macronised && this.showMacronisedWords }">{{ word.w }}&nbsp;</span>
     </div>
 
-    <button class="btn-primary right-column" :disabled="!canDownload" @click="downloadAsText">Download</button>
+    <div class="flex">
+        <input type="checkbox" id="i-preserve-existing-macrons" v-model="preserveExistingMacrons" />
+        <label for="i-preserve-existing-macrons">{{ translations.get('DirectInput_PreserveExistingMacrons') }}</label>
+    </div>
+
+    <div class="flex">
+        <input type="checkbox" id="i-show-macronised-words" v-model="showMacronisedWords" />
+        <label for="i-show-macronised-words">{{ translations.get('DirectInput_ShowMacronisedWords') }}</label>
+    </div>
+
+    <button class="btn-primary right-column" :disabled="!canDownload" @click="downloadAsText">{{ translations.get('DirectInput_Download') }}</button>
 </div>
 </template>
@@ -15 +30 @@
     display: grid;
     grid-template-columns: 1fr 1fr;
-    grid-template-rows: auto auto;
+    grid-template-rows: 1fr auto auto;
     gap: 1em;
 }
@@ -25 +40 @@
 }
 
+.flex {
+    display: flex;
+    align-items: center;
+    gap: 0.5em;
+}
+
 .right-column {
     grid-column: 2;
+}
+
+.highlight {
+    background-color: var(--highlighted-word-bg);
+}
+
+.error-text {
+    color: rgb(185, 3, 3);
 }
 </style>
@@ -33 +62 @@
 import { mapState } from "vuex";
 import { saveAs } from "file-saver"
+import { log } from "../js/Util"
 import MacronRestorationModule from "../js/MacronRestorationModule"
 
@@ -41 +71 @@
     data() {
         return {
-            input: "",
-            output: "",
+            preserveExistingMacrons: true,
+            showMacronisedWords: false,
             transcribeTimeout: null,
-            waitingOnTranscribe: false
+            waitingOnTranscribe: false,
+            errorState: false
         }
     },
     computed: {
         canDownload() {
-            return this.output.length > 0 && !this.waitingOnTranscribe;
+            return this.restored !== null && !this.waitingOnTranscribe;
+        },
+        input: {
+            get() {
+                return this.$store.state.directInput;
+            },
+            set(newValue) {
+                this.$store.commit("setDirectInput", newValue);
+            }
+        },
+        restored: {
+            get() {
+                return this.$store.state.directOutput;
+            },
+            set(newValue) {
+                this.$store.commit("setDirectOutput", newValue);
+            }
+        },
+        validRestored() {
+            return this.restored.filter(w => w.w !== "");
         },
         ...mapState({
@@ -75 +125 @@
         },
         async updateMacronisedText() {
-            // TODO: Handle error
-            const response = await macroniser.directMacronisation(this.input);
-            this.output = response.fragment2;
-            this.waitingOnTranscribe = false;
+            this.errorState = false;
+
+            try {
+                this.restored = await macroniser.directMacronisation(this.input, this.preserveExistingMacrons);
+                this.waitingOnTranscribe = false;
+            }
+            catch (ex) {
+                this.errorState = true;
+                log(ex, "warn");
+            }
         },
         downloadAsText() {
-            const blob = new Blob([ this.output ], { type: "text/plain;charset=utf-8" });
-            saveAs(blob, "output.txt");
+            const blob = new Blob([ this.restored ], { type: "text/plain;charset=utf-8" });
+            saveAs(blob, "restored.txt");
         }
     }

main/trunk/model-interfaces-dev/atea/macron-restoration/src/components/FileInput.vue

@@ -1 +1 @@
 <template>
-    <div class="card">
-        <!-- Header containing info and actions for the transcription -->
-        <div class="transcription__header">
-            <button class="btn-fab" v-on:click="toggleAudio" type="button" :title="translations.get('TranscriptionItem_PlayButtonTooltip')">
-                <span class="material-icons mdi-l play-button" v-if="!isPlaying">play_arrow</span>
-                <span class="material-icons mdi-l play-button" v-if="isPlaying">pause</span>
-            </button>
+<file-upload />
 
-            <span>{{ translations.get("TranscriptionItem_FileName") }}: {{ transcription.fileName }}</span>
+<div class="file-info-list">
+    <div v-for="(fileInfo, index) in fileInfos" :key="fileInfo.id">
+        <div class="info-container">
+            <span class="material-icons mdi-override" v-if="fileInfo.fileType === '.txt'">description</span>
+            <img class="icon-l" src="resources/word_icon.ico" v-if="fileInfo.fileType === '.docx'" />
 
-            <div style="position: relative;">
-                <button class="btn-primary" @mouseover="showDownloadOptions = true" @mouseout="showDownloadOptions = false" type="button">
-                    <span class="material-icons">download</span>
-                    <span>{{ translations.get("TranscriptionItem_Download") }}</span>
-                </button>
+            {{ fileInfo.fileName }}
 
-                <div class="download-popup card" :class="{ 'download-popup-show': showDownloadOptions }"
-                     @mouseover="showDownloadOptions = true" @mouseout="showDownloadOptions = false">
-                    <button @click="downloadAsText" type="button" class="btn-primary theme-flat">
-                        <span class="material-icons">text_snippet</span>
-                        <span>{{ translations.get("TranscriptionItem_DownloadAsText") }}</span>
-                    </button>
-
-                    <button @click="downloadAsJson" type="button" class="btn-primary theme-flat">
-                        <span class="material-icons">integration_instructions</span>
-                        <span>{{ translations.get("TranscriptionItem_DownloadAsJson") }}</span>
-                    </button>
-
-                    <button @click="downloadAsWebvtt" type="button" class="btn-primary theme-flat">
-                        <span class="material-icons">subtitles</span>
-                        <span>{{ translations.get("TranscriptionItem_DownloadAsWebvtt") }}</span>
-                    </button>
-                </div>
-            </div>
-
-            <button class="btn-primary theme-error" @click="remove" type="button">
-                <span class="material-icons">delete</span>
-                <span>{{ translations.get("TranscriptionItem_Remove") }}</span>
+            <button @click="download(fileInfo)" type="button" class="btn-primary theme-flat">
+                <span class="material-icons">download</span>
+                <span>{{ translations.get("FileInput_Download") }}</span>
             </button>
         </div>
 
-        <div class="editor-controls">
-            <audio-time-bar v-model.number="currentPlaybackTime" :audio-length="audioLength" :isDisabled="playbackState.id != transcription.id" />
-        </div>
+        <hr class="divider-s" v-if="index !== fileInfos.length - 1" />
+    </div>
+</div>
 
-        <hr />
+<form ref="formDownload" method="post" target="_blank">
+    <input ref="inputFilePath" type="hidden" name="filepath" />
+    <input ref="inputFileName" type="hidden" name="filename" />
+</form>
 
-        <div class="editor-controls">
-            <TranscriptionItemEditor ref="editor" :transcription="transcription" style="margin-bottom: 1em" :enableEditing="enableEditing" />
-            <toggle-button v-model="enableEditing" :title="translations.get('TranscriptionItemEditor_ToggleEditTooltip')">
-                <span class="material-icons">edit</span>
-            </toggle-button>
-        </div>
-    </div>
 </template>
 
 <style scoped lang="scss">
-.transcription__header {
+.info-container {
     display: grid;
-    gap: 0.5em 0.5em;
-    grid-template-columns: auto 1fr auto auto;
+    grid-template-columns: auto 1fr auto;
     align-items: center;
+
+    gap: 0.5em;
+    padding: 0.5em;
+    transition-duration: var(--transition-duration);
+
+    &:hover {
+        background-color: #DDD;
+    }
 }
 
-.download-popup {
-    display: flex;
-    flex-direction: column;
-    align-items: stretch;
-
-    position: absolute;
-    top: 97%;
-    z-index: 2;
-
-    padding: 2px;
-    margin: 0;
-    width: 14em;
-
-    transition-duration: var(--transition-duration);
-    visibility: hidden;
-    opacity: 0;
+.file-info-list {
+    border: 1px solid #BBB;
+    margin-top: 1em;
 }
 
-.download-popup-show {
-    visibility: visible;
-    opacity: 1;
+.mdi-override {
+    @extend .mdi-l;
+
+    color: var(--bg-color);
 }
 
-.editor-controls {
-    display: grid;
-    align-items: flex-start;
-    grid-template-columns: 1fr auto;
-    margin: 0.5em 0 0.3em 0;
-    gap: 1em;
-}
-
-.rotate-180 {
-    transform: rotate(180deg);
+.icon-l {
+    height: 36px;
 }
 </style>
@@ -102 +60 @@
 <script>
 import { mapState } from "vuex";
-import { saveAs } from "file-saver"
-import { TranscriptionViewModel } from "../main";
-import AudioPlayback from "../js/AudioPlaybackModule"
-import Util from "../js/Util"
-import AudioTimeBar from "./AudioTimeBar.vue"
-import TranscriptionItemEditor from "./TranscriptionItemEditor.vue"
+import MacronRestorationService from "../js/MacronRestorationModule"
+import FileUpload from "./FileUpload.vue"
+
+const macronRestorer = new MacronRestorationService();
 
 export default {
-    name: "TranscriptionItem",
+    name: "FileInput",
     components: {
-        AudioTimeBar,
-        TranscriptionItemEditor
-    },
-    props: {
-        transcription: TranscriptionViewModel
-    },
-    data() {
-        return {
-            enableEditing: false,
-            showDownloadOptions: false
-        }
+        FileUpload
     },
     computed: {
-        currentPlaybackTime: {
-            get() {
-                return this.$store.getters.transcriptionPlaybackTime(this.transcription.id);
-            },
-            set(value) {
-                this.$store.commit("playbackStateSetTime", { id: this.transcription.id, time: value });
-            }
-        },
-        audioLength() {
-            return this.$store.getters.transcriptionPlaybackLength(this.transcription.id);
-        },
-        isPlaying() {
-            return this.playbackState.isPlaying && this.playbackState.id === this.transcription.id;
-        },
         ...mapState({
             translations: state => state.translations,
-            playbackState: state => state.playbackState
+            fileInfos: state => state.macronisedFileInfos
         })
     },
     methods: {
-        async toggleAudio() {
-            this.isPlaying ? AudioPlayback.pause() : await AudioPlayback.play(this.transcription.id, -1);
-        },
-        remove() {
-            this.$store.commit("rawTranscriptionRemove", this.transcription.id);
-        },
-        downloadAsText() {
-            const fileName = buildDownloadableFileName(this.transcription.fileName, "txt");
-
-            const blob = new Blob([ this.$refs.editor.words.map(w => w.word).join(" ") ], { type: "text/plain;charset=utf-8" });
-            saveAs(blob, fileName);
-        },
-        downloadAsJson() {
-            const fileName = buildDownloadableFileName(this.transcription.fileName, "json");
-            const toDownload = (({ fileName, transcription }) => ({ fileName, transcription }))(this.transcription);
-            toDownload.words = this.$refs.editor.words.map(w => (({ word, startTime, endTime }) => ({ word, startTime, endTime }))(w));
-
-            const blob = new Blob([ JSON.stringify(toDownload, null, 4) ], { type: "application/json;charset=utf-8" });
-            saveAs(blob, fileName);
-        },
-        downloadAsWebvtt() {
-            const fileName = buildDownloadableFileName(this.transcription.fileName, "vtt");
-            const toDownload = buildWebvttFileContents(this.transcription, this.$refs.editor);
-
-            const blob = new Blob([ toDownload ], { type: "text/vtt;charset=utf-8" });
-            saveAs(blob, fileName);
+        download(fileInfo) {
+            this.$refs.inputFilePath.value = fileInfo.filePath;
+            this.$refs.inputFileName.value = fileInfo.fileName;
+            this.$refs.formDownload.submit();
         }
+    },
+    mounted() {
+        this.$refs.formDownload.setAttribute("action", macronRestorer.queryUrl + "Download");
     }
 }
-
-/**
- * Builds a file name for a download.
- * @param {String} transcriptionFileName The name of the transcription that will be downloaded.
- * @param {String} extension The file extension of the download. Do not include a period.
- * @returns {String} The file name.
- */
-function buildDownloadableFileName(transcriptionFileName, extension) {
-    const extensionIndex = transcriptionFileName.lastIndexOf(".");
-    let fileName = transcriptionFileName.slice(0, extensionIndex);
-    fileName += "_transcription." + extension;
-
-    return fileName;
-}
-
-/**
- * Builds a WebVTT file of the given transcription
- * @param {TranscriptionViewModel} transcription The transcription.
- * @returns {String} The WebVTT content.
- */
-function buildWebvttFileContents(transcription, editor) {
-    let contents = "WEBVTT Transcription of " + transcription.fileName + "\n\n";
-
-    for (const word of editor.words) {
-        const startTime = Util.formatSecondsTimeString(word.startTime, true);
-        const endTime = Util.formatSecondsTimeString(word.endTime, true);
-
-        contents += startTime + " --> " + endTime + "\n";
-        contents += "- " + word.word + "\n\n";
-    }
-
-    return contents;
-}
 </script>

main/trunk/model-interfaces-dev/atea/macron-restoration/src/js/MacronRestorationModule.js

@@ -33 +33 @@
         /** @type {String} The URL to which query POST requests should be made. */
         if (process.env.NODE_ENV !== "production") {
-            this.queryUrl = "//localhost:8383/macron-restoration/jsp/servlet/DirectInput";
+            this.queryUrl = "//localhost:8383/macron-restoration/jsp/servlet/";
         }
         else {
-            this.queryUrl = "/macron-restoration/jsp/servlet/DirectInput";
+            this.queryUrl = "/macron-restoration/jsp/servlet/";
         }
     }
@@ -43 +43 @@
      * Performs a request to the macron restoration API to restore the given input text.
      * @param {String} input The input text to macronise
-     * @returns The JSON response from the macron restoration API.
+     * @returns {Promise<{ w: String, macronised?: Boolean }>} The JSON response from the macron restoration API.
      */
-    async directMacronisation(input) {
-        const that = this;
+    async directMacronisation(input, preserveExistingMacrons) {
+        const queryUrl = this.queryUrl + "DirectInput";
 
         try {
             const response = await fetch(
-                that.queryUrl,
+                queryUrl,
                 {
                     method: "POST",
@@ -56 +56 @@
                         "Content-Type": "application/x-www-form-urlencoded"
                     },
-                    body: `o=json&fragment=${input}`
+                    body: `o=json&fragment=${input}&preserveExistingMacrons=${preserveExistingMacrons}`
                 }
             );
@@ -74 +74 @@
 
     /**
-     * Performs chunked queries to transcribe the given audio files, returning the data in iterations.
-     * Data is chunked according to which ever occurs first:
-     * A maximum of three files per request, or;
-     * A maximum of 5 MiB before chunking.
+     * Performs a query to macronise the given file.
      *
-     * @param {FileList | File[]} files The files to upload
-     * @returns {AsyncGenerator<TranscriptionModel[]>} The transcribed audio files.
-     * @throws {TranscriptionError} When the transcription request fails to complete.
+     * @param {File} file The file to macronise.
+     * @param {Boolean} preserveExistingMacrons Indicates if existing macrons on the file should be preserved.
+     * @returns {Promise<{ fileName: String, filePath: String, fileType: String }>} Information about the macronised file.
+     * @throws {MacronRestorationError} When the macronisation request fails to complete.
      */
-    async* batchFileMacronisation(files) {
-        let filesToSubmit = [];
-        let fileCounter = 0;
-        let byteCounter = 0;
-
-        for (const file of files) {
-            if (fileCounter === this.MAX_BATCH_COUNT || byteCounter > this.BATCH_BYTE_LIMIT) { // 5 MiB
-                yield await this.fileMacronisation(filesToSubmit);
-                filesToSubmit = [];
-                byteCounter = 0;
-                fileCounter = 0;
-            }
-
-            filesToSubmit[fileCounter++] = file;
-            byteCounter += file.size;
-        }
-
-        if (filesToSubmit.length > 0) {
-            yield await this.fileMacronisation(filesToSubmit);
-        }
-    }
-
-    /**
-     * Performs a query to transcribe the given audio files.
-     *
-     * @param {File[]} files The files to upload.
-     * @returns {Promise<TranscriptionModel[]>} The transcribed audio file.
-     * @throws {TranscriptionError} When the transcription request fails to complete.
-     */
-    async fileMacronisation(files) {
-        if (process.env.NODE_ENV !== "production" || files.some(file => file.name === "akl_mi_pk_0002_offline.wav")) {
-            return await this.fileMacronisationTest(files);
-        }
-        else {
-            return await this.fileMacronisationActual(files);
-        }
-    }
-
-    async fileMacronisationTest(files) {
-        const objects = [];
-
-        for (const file of files) {
-            const object = JSON.parse(this.TEST_JSON);
-            object.file_name = file.name;
-            objects.push(object);
-        }
-
-        return objects;
-    }
-
-    /**
-     * Performs a query to transcribe the given audio files.
-     *
-     * @param {FileList | File[]} files The files to upload.
-     * @returns {Promise<TranscriptionModel[]>} The transcribed audio file.
-     * @throws {TranscriptionError} When the transcription request fails to complete.
-     */
-    async fileMacronisationActual(files) {
-        const that = this;
+    async fileMacronisation(file, preserveExistingMacrons) {
+        const queryUrl = this.queryUrl + "FileUpload";
         const formData = new FormData();
 
-        let audioFileKeys = "";
-        for (let i = 0; i < files.length; i++) {
-            const f = files[i];
-            const key = "audioFile" + i;
-
-            formData.append(key, f, f.name);
-            audioFileKeys += key + "|";
-        }
-        formData.append("audioFileKeys", audioFileKeys);
+        formData.append("o", "json");
+        formData.append("preserveExistingMacrons", preserveExistingMacrons);
+        formData.append(file.name, file, file.name);
 
         try {
             const response = await fetch(
-                that.queryUrl,
+                queryUrl,
                 {
                     method: "POST",
@@ -164 +99 @@
 
             if (!response.ok) {
-                log(`Transcription API failed with status ${response.status} and message ${response.statusText}`, "error")
-                throw new MacronRestorationError(response.statusText, undefined, response.status);
+                log(`Macronisation API failed with status ${response.status} and message ${response.statusText}`, "error")
+                throw new MacronRestorationError(response.statusText, file.Name, response.status);
             }
 
@@ -171 +106 @@
         }
         catch (e) {
-            log(`Transcription failed with reason ${e}`, "error");
-            throw new MacronRestorationError(undefined, "Unknown");
+            log(`Macronisation failed with reason ${e}`, "error");
+            throw new MacronRestorationError("Unknown", file.Name, "Unknown");
         }
     }

main/trunk/model-interfaces-dev/atea/macron-restoration/src/main.js

@@ -1 +1 @@
 import { createApp } from "vue";
 import { createStore } from "vuex"
-// import AudioPlayback from "./js/AudioPlaybackModule";
+import Util from "./js/Util"
 import App from "./App.vue";
 import ToggleButton from "./components/ToggleButton.vue"
-
-// export class TranscriptionExistsError extends Error {
-//     constructor(message = "", ...args) {
-//         super(message, ...args);
-//     }
-// }
 
 const store = createStore({
@@ -15 +9 @@
         return {
             /** @type {Map<String, String>} */
-            translations: new Map()
+            translations: new Map(),
+            macronisedFileInfos: [],
+            directInput: null,
+            directOutput: []
         }
     },
@@ -21 +18 @@
         setTranslations(state, translations) {
             state.translations = translations;
+        },
+        pushFileInfo(state, fileInfo) {
+            state.macronisedFileInfos.push({
+                id: Util.generateUuid(),
+                ...fileInfo
+            });
+        },
+        setDirectInput(state, input) {
+            state.directInput = input;
+        },
+        setDirectOutput(state, output) {
+            state.directOutput = output;
         }
     }
-    // getters: {
-    //     hasTranscriptionOfFile: (state) => (file) => {
-    //         const id = TranscriptionViewModel.getId(file);
-    //         return state.rawTranscriptions.has(id);
-    //     },
-    // }
 });
 

main/trunk/model-interfaces-dev/atea/macron-restoration/src/styles/_material.scss

@@ -64 +64 @@
 }
 
+.divider-s {
+    @extend .divider;
+    margin: 0 2rem;
+}
+
 /* Buttons */
 
@@ -108 +113 @@
 .text-container {
     display: flex;
-    align-items: flex-start;
     flex-wrap: wrap;
 
@@ -129 +133 @@
     border-radius: var(--border-radius) var(--border-radius) 0 0;
     border: none;
-    border-bottom: 1px solid #AAA;
+    border-bottom: 2px solid #999;
     outline: none;
     cursor: text;
@@ -163 +167 @@
     @extend .text-input;
 
+    align-items: center;
     overflow-x: auto;
     overflow-y: hidden;