source: main/trunk/model-interfaces-dev/atea/transform/pages/asr.xsl@ 35355

Last change on this file since 35355 was 35355, checked in by cstephen, 3 years ago

Add korero-maori-asr
File size: 10.7 KB
Line 
1<?xml version="1.0" encoding="UTF-8"?>
2<xsl:stylesheet version="1.0"
3 xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
4 xmlns:java="http://xml.apache.org/xslt/java"
5 xmlns:util="xalan://org.greenstone.gsdl3.util.XSLTUtil"
6 xmlns:gsf="http://www.greenstone.org/greenstone3/schema/ConfigFormat"
7 xmlns:gslib="http://www.greenstone.org/skinning"
8 xmlns:v-bind="http://vuejs.org"
9 xmlns:v-on="http://vuejs.org"
10 extension-element-prefixes="java util"
11 exclude-result-prefixes="java util">
12
13 <!-- use the 'main' layout -->
14 <xsl:import href="layouts/main.xsl"/>
15
16 <xsl:variable name="groupPath"><xsl:value-of select="/page/pageRequest/paramList/param[@name='group']/@value"/></xsl:variable>
17 <!-- set page title -->
18 <xsl:template name="pageTitle"><gslib:collectionName/></xsl:template>
19
20 <!-- set page breadcrumbs -->
21 <xsl:template name="breadcrumbs"><gslib:siteLink/><gslib:rightArrow/>
22 <xsl:if test="$groupPath != ''">
23 <xsl:for-each select="/page/pageResponse/pathList/group">
24 <xsl:sort data-type="number" select="@position" />
25 <a>
26 <xsl:attribute name="href"><gslib:groupHref path="{@path}"/></xsl:attribute>
27 <xsl:attribute name="title"><gslib:groupName path="{@path}"/></xsl:attribute>
28 <gslib:groupName path="{@path}" />
29 </a>
30 <gslib:rightArrow/>
31 </xsl:for-each>
32 </xsl:if>
33 </xsl:template>
34
35 <!-- the page content -->
36 <xsl:template match="/page">
37 <xsl:call-template name="audio-transcription" />
38 </xsl:template>
39
40 <!-- Template for processing audio file uploads -->
41 <xsl:template name="audio-transcription">
42 <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
43 <link href="interfaces/{$interface_name}/style/asr.css" rel="stylesheet" type="text/css" />
44
45 <section id="audio-transcription-container">
46 <!-- Used to calculate the character size of our monospace font -->
47 <span class="monospace-font-sizer">ngā tama a rangi</span>
48
49 <!-- Contains the file input, transcribe button and transcription progress indicator -->
50 <div id="audioUploadContainer" class="audio-file-picker">
51 <!-- <button type="button" v-on:click="openFilePicker">
52 <span class="material-icons">&#xE2C6;</span> file_upload
53 <span>Upload Audio Files</span>
54 </button>-->
55
56 <div class="text-input-sl" style="cursor: pointer;" v-on:click="openFilePicker">
57 <span class="text-placeholder material-icons" v-if="!anyFiles">&#xe226;</span> <!-- attach_file -->
58 <span class="text-placeholder" v-if="!anyFiles">Select file/s...</span>
59 <span v-if="anyFiles">{{ getFileNameList }}</span>
60 </div>
61
62 <input id="audioFileInput" type="file" v-on:input="onFilesChanged"
63 accept="audio/wav" multiple="multiple" v-bind:disabled="isTranscribing" />
64
65 <button style="float: right;" type="submit"
66 v-bind:disabled="!anyFiles || isTranscribing" v-on:click="doTranscription">
67 <span class="material-icons">&#xEA3E;</span> <!-- history_edu -->
68 <span>Transcribe</span>
69 </button>
70
71 <progress v-if="isTranscribing" class="indeterminateLoadingBar" />
72 </div>
73
74 <!-- Contains the audio element and transcription list -->
75 <div id="transcriptionsDisplayContainer">
76
77 <audio id="transcriptionAudio">
78 <source id="transcriptionAudioSource" />
79 </audio>
80
81 <ul class="transcription__list">
82 <!-- Displays any failed transcriptions -->
83 <li v-for="[id, failure] in failures">
84 <xsl:attribute name="v-bind:class">
85 <xsl:text disable-output-escaping="yes">{ 'transform-slideout-up': failure.isDeleted }</xsl:text>
86 </xsl:attribute>
87
88 <div class="transcription__error-container card">
89 <div>
90 Failed to transcribe <i v-if="failure.file">{{ failure.fileName }}</i><br/>
91 <span v-if="failure.message">Reason: {{ failure.message }}</span>
92 </div>
93
94 <button class="btn-fab theme-flat" v-on:click="removeFailure(id)">
95 <span class="material-icons">&#xE14C;</span> <!-- clear -->
96 </button>
97 </div>
98 </li>
99
100 <!-- Displays each transcription -->
101 <li v-for="[id, transcription] in transcriptions">
102 <xsl:attribute name="v-bind:class">
103 <xsl:text disable-output-escaping="yes">{ 'transform-slideout-up': transcription.isDeleted }</xsl:text>
104 </xsl:attribute>
105
106 <div class="transcription__container card">
107 <!-- Header containing info and actions for the transcription -->
108 <div class="transcription__header">
109 <span>File: {{ transcription.fileName }}</span>
110
111 <button class="theme-error" v-on:click="removeTranscription(id)" type="button">
112 <span class="material-icons">delete</span>
113 <span>Remove</span>
114 </button>
115 </div>
116
117 <div class="text-container body0">
118 {{ transcription.transcription }}
119 </div>
120
121 <div class="transcription__details-container" v-if="transcription.isExpanded">
122 <div class="transcription__details__controls">
123 <button class="btn-fab" v-on:click="playAudioFile(id, -1)" type="button">
124 <span class="material-icons">play_arrow</span>
125 </button>
126
127 <label for="displayMode">Display Mode:</label>
128 <select id="displayMode" v-model="displayMode">
129 <option value="words">Words</option>
130 <option value="chars">Characters</option>
131 <option value="editor">Editor</option>
132 </select>
133
134 <!-- <input type="checkbox" v-model="showCharDisplay" title="Show characters" />
135
136 <input type="checkbox" v-model="enableTextEditing" title="Enable text editing" /> -->
137 </div>
138
139 <ul class="transcription__details__word-list">
140 <li v-if="displayMode == 'words'" v-for="word in transcription.words" class="transcription__word-container"
141 v-on:click="playAudioFile(id, word.startTime)">
142 <xsl:attribute name="v-bind:class">
143 <xsl:text disable-output-escaping="yes">{ 'transcription__word-highlight-applied': word.shouldHighlight }</xsl:text>
144 </xsl:attribute>
145
146 <span class="transcription__word-highlight">{{ word.word }}</span>
147 <span>&#x00A0;</span> <!-- nbsp -->
148 </li>
149 <li v-if="displayMode == 'chars'" class="transcription__word-container" v-on:click="playAudioFile(id, char.startTime)"
150 v-for="char in getChars(id)">
151 <span class="transcription__word-highlight">
152 {{ char.char }}
153 </span>
154 </li>
155 <li v-if="displayMode == 'editor'" v-for="(word, index) in transcription.words" class="transcription__word-container">
156 <!-- <span class="transcription__word" v-on:input="onEditorWordInput($event, word.word)" contenteditable="true" v-text="word.word" /> -->
157 <input type="text" v-bind:size="word.word.length == 1 ? 1 : word.word.length - 1" v-model="word.word"
158 class="transcription__word" v-on:input="onEditorWordInput($event, index, id)" />
159 <span>&#x00A0;</span> <!-- nbsp -->
160 </li>
161 </ul>
162 </div>
163
164 <hr />
165
166 <button type="button" class="theme-flat" v-on:click="transcription.isExpanded = !transcription.isExpanded">
167 <span class="material-icons">
168 <xsl:attribute name="v-bind:class">
169 <xsl:text disable-output-escaping="yes">{ 'transform-rotate180': transcription.isExpanded }</xsl:text>
170 </xsl:attribute>
171
172 expand_more
173 </span>
174 <span>Playback and Edit</span>
175 </button>
176 </div>
177 </li>
178 </ul>
179 </div>
180
181 <!-- <div class="audio-slider__container">
182 <button type="button" class="btn-fab">
183 <span class="material-icons mdi-xl">&#xE037;</span>
184 </button>
185 <input type="range" min="0" value="0" class="audio-slider__range" />
186 <span class="audio-slider__value">1:23</span>
187 </div> -->
188 </section>
189
190 <!-- TODO: Switch to production version for release builds -->
191 <!-- <gsf:script src="https://unpkg.com/vue@next"></gsf:script> -->
192 <gsf:script src="interfaces/{$interface_name}/js/asr/Vue.js"></gsf:script>
193 <gsf:script src="interfaces/{$interface_name}/js/asr/asr-controller.js" type="module"></gsf:script>
194 </xsl:template>
195
196</xsl:stylesheet>
Note: See TracBrowser for help on using the repository browser.