1 | <template>
|
---|
2 | <!-- Contains the file input, transcribe button and transcription progress indicator -->
|
---|
3 | <div class="audio-file-picker">
|
---|
4 | <div class="input-bar">
|
---|
5 | <div class="text-input-sl" style="cursor: pointer;" @click="openFilePicker">
|
---|
6 | <span class="text-placeholder material-icons" v-if="!anyFiles"></span> <!-- attach_file -->
|
---|
7 | <span class="text-placeholder" v-if="!anyFiles">{{ translations.get("AudioUpload_SelectFileText") }}</span>
|
---|
8 | <span v-if="anyFiles">{{ getFileNameList }}</span>
|
---|
9 | </div>
|
---|
10 |
|
---|
11 | <input ref="audioFileInput" type="file" @input="onFilesChanged"
|
---|
12 | accept="audio/wav" multiple :disabled="isTranscribing" />
|
---|
13 |
|
---|
14 | <button class="btn-primary" type="submit" :disabled="!anyFiles || isTranscribing" @click="doTranscription">
|
---|
15 | <span class="material-icons"></span> <!-- history_edu -->
|
---|
16 | <span>{{ translations.get("AudioUpload_TranscribeFiles") }}</span>
|
---|
17 | </button>
|
---|
18 | </div>
|
---|
19 |
|
---|
20 | <progress v-if="isTranscribing" class="indeterminateLoadingBar" />
|
---|
21 |
|
---|
22 | <ul class="list-view" v-if="failures.size > 0">
|
---|
23 | <li v-for="[id, failure] in failures" :key="failure.id" class="list-view__item transcription-error-container">
|
---|
24 | <div>
|
---|
25 | {{ translations.get("AudioUpload_TranscriptionFailed_Message") }} <i v-if="failure.fileName">{{ failure.fileName }}</i><br />
|
---|
26 | <span v-if="failure.message">{{ translations.get("AudioUpload_TranscriptionFailed_Reason") }}: {{ failure.message }}</span>
|
---|
27 | </div>
|
---|
28 |
|
---|
29 | <button class="btn-fab theme-flat" @click="dismissFailure(id)">
|
---|
30 | <span class="material-icons"></span> <!-- clear -->
|
---|
31 | </button>
|
---|
32 | </li>
|
---|
33 | </ul>
|
---|
34 | </div>
|
---|
35 | </template>
|
---|
36 |
|
---|
37 | <!-- Add "scoped" attribute to limit CSS to this component only -->
|
---|
38 | <style scoped lang="scss">
|
---|
39 | .audio-file-picker {
|
---|
40 | display: flex;
|
---|
41 | gap: 0.5em;
|
---|
42 | flex-direction: column;
|
---|
43 |
|
---|
44 | input {
|
---|
45 | display: none;
|
---|
46 | }
|
---|
47 |
|
---|
48 | .text-container {
|
---|
49 | cursor: pointer;
|
---|
50 | }
|
---|
51 | }
|
---|
52 |
|
---|
53 | .input-bar {
|
---|
54 | display: grid;
|
---|
55 | align-items: stretch;
|
---|
56 | gap: 0.5em;
|
---|
57 | grid-template-columns: 1fr auto;
|
---|
58 | }
|
---|
59 |
|
---|
60 | .transcription-error-container {
|
---|
61 | display: grid;
|
---|
62 | gap: 0.5em;
|
---|
63 | grid-template-columns: 1fr auto;
|
---|
64 | align-items: center;
|
---|
65 |
|
---|
66 | border-left: 3px solid red;
|
---|
67 | }
|
---|
68 | </style>
|
---|
69 |
|
---|
70 | <script>
|
---|
71 | import { mapState } from "vuex";
|
---|
72 | import TranscribeService from "../js/TranscribeModule";
|
---|
73 | import Util from "../js/Util";
|
---|
74 | import { TranscriptionViewModel } from "../main"
|
---|
75 |
|
---|
76 | class TranscriptionViewFailure {
|
---|
77 | /**
|
---|
78 | * @param {String} fileName The name of the file for which this failure occured.
|
---|
79 | * @param {String} message The reason for this failure.
|
---|
80 | */
|
---|
81 | constructor(fileName, message) {
|
---|
82 | /** @type {String} The UUID of this failure. */
|
---|
83 | this.id = Util.generateUuid();
|
---|
84 |
|
---|
85 | /** @type {String | null} The name of the file for which this failure occured. */
|
---|
86 | this.fileName = fileName;
|
---|
87 |
|
---|
88 | /** @type {String} The reason for the failure. */
|
---|
89 | this.message = message;
|
---|
90 | }
|
---|
91 | }
|
---|
92 |
|
---|
93 | const transcribeService = new TranscribeService();
|
---|
94 |
|
---|
95 | export default {
|
---|
96 | name: "AudioUpload",
|
---|
97 | data() {
|
---|
98 | return {
|
---|
99 | /** @type {File[]} */
|
---|
100 | files: [],
|
---|
101 | /** @type {Map<String, TranscriptionViewFailure>} */
|
---|
102 | failures: new Map(),
|
---|
103 | canTranscribe: false,
|
---|
104 | isTranscribing: false
|
---|
105 | }
|
---|
106 | },
|
---|
107 | computed: mapState({
|
---|
108 | translations: state => state.translations,
|
---|
109 | anyFiles() {
|
---|
110 | return this.files?.length > 0;
|
---|
111 | },
|
---|
112 | getFileNameList() {
|
---|
113 | let fileNameList = "";
|
---|
114 |
|
---|
115 | for (const file of this.files) {
|
---|
116 | fileNameList += file.name + ", ";
|
---|
117 | }
|
---|
118 |
|
---|
119 | return fileNameList.slice(0, fileNameList.length - 2);
|
---|
120 | }
|
---|
121 | }),
|
---|
122 | emits: [ "newTranscription" ],
|
---|
123 | methods: {
|
---|
124 | openFilePicker() {
|
---|
125 | this.$refs.audioFileInput.click();
|
---|
126 | },
|
---|
127 | onFilesChanged() {
|
---|
128 | this.files = [];
|
---|
129 | const files = this.$refs.audioFileInput.files;
|
---|
130 |
|
---|
131 | if (files?.length !== undefined && files?.length > 0) {
|
---|
132 | for (const file of files) {
|
---|
133 | this.files.push(file);
|
---|
134 | }
|
---|
135 | }
|
---|
136 | },
|
---|
137 | async doTranscription() {
|
---|
138 | this.isTranscribing = true;
|
---|
139 |
|
---|
140 | await getTranscriptions(this.files, this.$store, this);
|
---|
141 |
|
---|
142 | this.files = []; // Clear the file list, as there is no reason the user would want to transcribe the same file multiple times over
|
---|
143 | this.isTranscribing = false;
|
---|
144 | // TODO: Push files to queue. If currently transcribing, good to go; it'll pull off it.
|
---|
145 | // Else call getTranscriptions();
|
---|
146 | // Then, we don't have to worry about preventing the user from transcribing multiple items.
|
---|
147 | },
|
---|
148 | /**
|
---|
149 | * Dismisses a failure
|
---|
150 | * @param {String} id The UUID of the failure.
|
---|
151 | */
|
---|
152 | dismissFailure(id) {
|
---|
153 | this.failures.delete(id);
|
---|
154 | }
|
---|
155 | }
|
---|
156 | }
|
---|
157 |
|
---|
158 | /**
|
---|
159 | * Gets the transcription of each submitted audio file.
|
---|
160 | *
|
---|
161 | * @param {File[]} files The files to transcribe.
|
---|
162 | */
|
---|
163 | async function getTranscriptions(files, store, vm) {
|
---|
164 | await Util.delay(200); // TODO: Remove - UI testing purposes only
|
---|
165 |
|
---|
166 | try {
|
---|
167 | for await (const batch of transcribeService.batchTranscribeFiles(files)) {
|
---|
168 | for (const t of batch) {
|
---|
169 | if (!t.success) {
|
---|
170 | const failure = new TranscriptionViewFailure(t.file_name, t.log);
|
---|
171 | vm.failures.set(failure.id, failure);
|
---|
172 | }
|
---|
173 | else {
|
---|
174 | const f = files.find(f => f.name === t.file_name);
|
---|
175 | if (f === undefined) {
|
---|
176 | throw new Error("File name mismatch");
|
---|
177 | }
|
---|
178 |
|
---|
179 | // TODO: Hash file name and size instead. Good indicator that the user has uploaded a duplicate.
|
---|
180 | const tvm = new TranscriptionViewModel(t, f);
|
---|
181 | store.commit("transcriptionAdd", tvm);
|
---|
182 | // let model = new TranscriptionViewModel(t, f);
|
---|
183 | // model.words = getTranscriptionWords(t);
|
---|
184 |
|
---|
185 | // TranscriptionsListVM.transcriptions.set(model.id, model);
|
---|
186 | }
|
---|
187 | }
|
---|
188 | }
|
---|
189 | }
|
---|
190 | catch (e) {
|
---|
191 | console.error("Failed to transcribe files");
|
---|
192 | console.error(e);
|
---|
193 |
|
---|
194 | const failure = new TranscriptionViewFailure(e.fileName, e.message);
|
---|
195 | vm.failures.set(failure.id, failure);
|
---|
196 | }
|
---|
197 | }
|
---|
198 | </script>
|
---|