Ignore:
Timestamp:
2021-08-11T17:04:46+12:00 (3 years ago)
Author:
davidb
Message:

Add Vue view for transcriptions

File:
1 edited

Legend:

Unmodified
Added
Removed

  • main/trunk/model-interfaces-dev/atea/transform/pages/asr.xsl

    r35284 r35285  
    8080
    8181                <ul class="transcription__list">
    82                     <li v-for="transcription in transcriptions" class="transcription__container">
    83                         {{ transcription.transcription }}
    84                     </li>
     82                    <!-- Displays any failed transcriptions -->
    8583                    <li v-for="failure in failures" class="transcription__error-container">
    8684                        Failed to transcribe <i v-if="failure.file">{{ failure.file }}</i><br/>
    87                         <span v-if="failure.message">Reason:    {{ failure.message }}</span>
     85                        <span v-if="failure.message">Reason: {{ failure.message }}</span>
     86                    </li>
     87
     88                    <li v-for="transcription in transcriptions" class="transcription__container">
     89                        <div class="transcription__header">
     90                            <button class="btn-fab theme-flat" v-on:click="playAudioFile" type="button">
     91                                <span class="material-icons">&#xE037;</span> <!-- play_arrow -->
     92                            </button>
     93
     94                            <p class="transcription__text">{{ transcription.transcription }}</p>
     95                            <p class="body2 transcription__file-name">File: {{ transcription.file_name }}</p>
     96
     97                            <button class="btn-fab theme-error" v-on:click="removeTranscription" type="button">
     98                                <span class="material-icons">&#xE872;</span> <!-- delete -->
     99                            </button>
     100                        </div>
     101
     102                        <gsf:div class="transcription__word-list" id="transcriptionWordList">
     103                            <ul class="transcription__list">
     104                                <li v-for="line in lines" style="display: flex">
     105                                    <span v-for="word in line.words" style="border: 1px solid blue">{{ word }}</span>
     106                                </li>
     107                            </ul>
     108                        </gsf:div>
     109                       
     110                        <div class="audio-slider-container">
     111                            <input type="range" min="0" value="0" class="audio-slider" />
     112                        </div>
     113
     114                        <hr class="divider" />
    88115                    </li>
    89116                </ul>
    90 
    91                 <ul class="transcription__list">
    92                    
    93                 </ul>
    94117   
    95                 <!-- <ul id="transcriptionsList" class="transcription__list"></ul> -->
     118                <ul id="transcriptionsList" class="transcription__list"></ul>
    96119   
    97120                <template id="transcriptionTemplate">
    … …  
    116139                            </ul>
    117140                        </gsf:div>
    118                        
    119                         <div class="audio-slider-container">
    120                             <input type="range" min="0" value="0" class="audio-slider" />
    121                         </div>
    122141
    123142                        <hr class="divider" />
    … …  
    137156       
    138157        <!-- TODO: Switch to production version for release builds -->
    139         <gsf:script src="https://unpkg.com/vue@next"></gsf:script>
     158        <!-- <gsf:script src="https://unpkg.com/vue@next"></gsf:script> -->
     159        <gsf:script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.global.js"></gsf:script>
    140160        <gsf:script src="interfaces/{$interface_name}/js/asr/asr-controller.js" type="module"></gsf:script>
    141161        <!-- <script type="module" src="interfaces/{$interface_name}/js/asr/asr-controller.js">
Note: See TracChangeset for help on using the changeset viewer.