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