Changeset 35262
- Timestamp:
- 2021-08-06T16:26:41+12:00 (3 years ago)
- Location:
- main/trunk/model-interfaces-dev/atea
- Files:
-
- 3 edited
-
js/asr/asr-controller.js (modified) (5 diffs)
-
style/asr.css (modified) (5 diffs)
-
transform/pages/asr.xsl (modified) (2 diffs)
Legend:
- Unmodified
- Added
- Removed
-
main/trunk/model-interfaces-dev/atea/js/asr/asr-controller.js
r35261 r35262 79 79 insertError(t.file_name, t.log); 80 80 } 81 else { 81 else { 82 82 insertTranscription(t); 83 83 } … … 87 87 catch (e) 88 88 { 89 console.error("Failed to transcribe files: " + e); 89 console.error("Failed to transcribe files"); 90 console.error(e); 90 91 insertError("all", e.statusMessage); 91 92 } … … 111 112 112 113 /** @type {HTMLTemplateElement} */ 113 const transcriptionTemplate= document.getElementById("transcriptionTemplate");114 const TRANSCRIPTION_TEMPLATE = document.getElementById("transcriptionTemplate"); 114 115 115 116 /** … … 122 123 { 123 124 // Insert a new transcription row 124 const clone = transcriptionTemplate.content.firstElementChild.cloneNode(true); 125 126 /** @type {HTMLSpanElement[]} */ 127 const spans = clone.querySelectorAll("span"); 128 spans[0].textContent = transcription.file_name; 129 spans[1].textContent = transcription.transcription; 130 131 // Get the scroll button 132 /** @type {HTMLButtonElement} */ 133 const scrollButton = clone.querySelector("button"); 125 /** @type {HTMLLIElement} */ 126 const clone = TRANSCRIPTION_TEMPLATE.content.firstElementChild.cloneNode(true); 127 128 // TODO: Give all children of the node the fileName data item. 129 clone.dataset.fileName = transcription.file_name; 130 131 const fileNameElement = clone.querySelector(".transcription__file-name"); 132 fileNameElement.textContent = transcription.file_name; 133 134 // Hook up the remove button 135 /** @type {HTMLButtonElement[]} */ 136 const removeButton = clone.querySelectorAll("transcription__remove-button"); 137 removeButton.forEach 138 ( 139 button => 140 { 141 button.onclick = function() { 142 143 } 144 } 145 ); 134 146 135 147 // Get the metadata list and template 136 148 /** @type {HTMLUListElement} */ 137 const metadataList = clone.querySelector("#metadataList"); 138 139 scrollButton.onclick = function() { 140 metadataList.scrollLeft = 200; 141 } 149 const metadataList = clone.querySelector(".metadata-list"); 142 150 143 151 // Prepare the audio slider 144 152 loadAudioFile(transcription.file_name); 153 145 154 /** @type {HTMLInputElement} */ 146 155 const audioSlider = clone.querySelector(".audio-slider"); … … 264 273 }); 265 274 }); 266 267 function get -
main/trunk/model-interfaces-dev/atea/style/asr.css
r35261 r35262 1 :root { 2 --primary-bg-color: #21bbc0; 3 --primary-bg-shadow-color: #0a2e4d; 4 --primary-bg-shadow-blur: 2px; 5 --primary-bg-shadow-active-blur: 4px; 6 7 --primary-fg-color: black; 8 9 --error-bg-color: #fa5757; 10 --error-fg-color: black; 11 --error-shadow-color: #331212; 12 13 --paper-color: #FCFCFC; 14 --paper-shadow-color: #444; 15 } 16 17 body { 18 background-color: var(--paper-color); 19 } 20 21 #gs_content { 22 padding: 0; 23 background-color: var(--paper-color); 24 } 25 26 #gs_banner { 27 margin-bottom: 1em; 28 border-radius: 0 0 0.5em 0.5em; 29 } 30 31 .paper { 32 background-color: var(--paper-color); 33 padding: 1em; 34 border-radius: 0.5em; 35 box-shadow: 0 0 6px 0 var(--paper-shadow-color); 36 } 37 38 .paper-inset { 39 background-color: var(--paper-color); 40 padding: 1em; 41 border-radius: 0.5em; 42 box-shadow: 0 0 3px 0 var(--paper-shadow-color) inset; 43 } 44 45 .divider { 46 margin: 1em 2em; 47 height: 1px; 48 background-color: #AAA; 49 border: none; 50 } 51 52 /* Buttons */ 53 54 .btn-fab { 55 background-color: var(--primary-bg-color); 56 color: var(--primary-fg-color); 57 border: none; 58 box-shadow: 0 0 var(--primary-bg-shadow-blur) 0 var(--primary-bg-shadow-color); 59 60 font-size: 48px; 61 border-radius: 50%; 62 padding: 0.2em; 63 64 -webkit-transition-duration: 0.2s; 65 transition-duration: 0.2s; 66 } 67 68 .btn-fab:hover { 69 box-shadow: 0 0 var(--primary-bg-shadow-active-blur) 0 var(--primary-bg-shadow-color); 70 } 71 72 .btn-fab-small { 73 font-size: 24px; 74 } 75 1 76 .asr-hidden { 2 77 display: none; 3 78 } 4 79 5 .transcription-list { 6 padding: 0; 7 } 8 9 .transcription-list-item { 80 /* Transcriptions */ 81 82 .transcription__list { 83 padding: 0; 10 84 list-style-type: none; 11 border: 1px solid black; 12 border-radius: 5px; 13 margin-bottom: 5px; 14 padding: 1em;15 } 16 17 .transcription -list-item:last-child {85 } 86 87 .transcription__container { 88 margin-bottom: 1em; 89 } 90 91 .transcription__container:last-child { 18 92 margin-bottom: 0; 19 93 } 20 94 21 .transcription-list-item .spaced-block, .error-list-item .spaced-block { 22 margin-bottom: 8px; 23 } 24 25 .transcription-list-item .spaced-block:last-child, .error-list-item .spaced-block:last-child { 26 margin-bottom: 0; 95 .transcription__header { 96 display: flex; 97 width: 100%; 98 justify-content: space-between; 99 align-items: center; 100 margin-bottom: 0.5em; 101 } 102 103 .transcription__file-name { 104 margin: 0; 105 margin: 0 1em 0 1em; 106 font-weight: bold; 107 } 108 109 .transcription__remove-button { 110 --primary-bg-color: var(--error-bg-color); 111 --primary-fg-color: var(--error-fg-color); 112 --primary-bg-shadow-color: var(--error-shadow-color); 113 114 order: 100; 27 115 } 28 116 … … 36 124 } 37 125 126 .error-list-item .spaced-block { 127 margin-bottom: 8px; 128 } 129 130 .error-list-item .spaced-block:last-child { 131 margin-bottom: 0; 132 } 133 38 134 .metadata-list { 39 135 font-size: 16px; … … 104 200 padding: 8px; 105 201 margin: 0; 202 display: flex; 203 align-items: center; 106 204 } 107 205 … … 155 253 .audio-slider__play-button { 156 254 vertical-align: middle; 157 background-color: #21bbc0;255 background-color: var(--primary-bg-color); 158 256 border: none; 159 257 border-radius: 16px; … … 166 264 } 167 265 168 #transcriptionAudio {169 width: 100%;170 }171 172 266 .audio-slider__play-button:hover { 173 267 box-shadow: 0px 0px 4px 0px #0a2e4d; -
main/trunk/model-interfaces-dev/atea/transform/pages/asr.xsl
r35261 r35262 39 39 <xsl:template name="audio-upload"> 40 40 <link href="interfaces/{$interface_name}/style/asr.css" rel="stylesheet" type="text/css" /> 41 42 <div> 43 <form onSubmit=" doAudioUpload(); return false;" enctype="multipart/form-data"> 44 <label for="fileUpload">Audio File:</label> 45 <input id="fileUpload" type="file" accept="audio/wav" multiple="multiple" /> 46 <button id="btnFileUpload" type="submit" disabled="disabled">Transcribe</button> 47 </form> 48 </div> 41 <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" /> 49 42 50 <div class="audio-slider__container"> 51 <button type="button" class="audio-slider__play-button"> 52 <img src="interfaces/{$interface_name}/assets/play_arrow_black_18dp.svg" /> 53 </button> 54 <input type="range" min="0" value="0" class="audio-slider__range" /> 55 <span class="audio-slider__value">1:23</span> 56 </div> 57 58 <div id="prgFileUploadContainer" class="asr-hidden"> 59 <label for="prgFileUpload">Processing:</label> 60 <progress id="prgFileUpload" /> 61 </div> 62 63 <div id="transcriptionsDisplayContainer"> 64 <audio id="transcriptionAudio" controls="controls"> 65 <source id="transcriptionAudioSource" /> 66 </audio> 67 68 <ul id="transcriptionsList" class="transcription-list"></ul> 69 70 <template id="transcriptionTemplate"> 71 <li class="transcription-list-item"> 72 <div> 73 <button class="close-button"></button> 74 <div class="spaced-block"> 75 <b>File: </b><span></span> 76 </div> 77 <div class="spaced-block"> 78 <b>Transcription: </b><span></span> 43 <div class="paper"> 44 <div> 45 <form onSubmit="doAudioUpload(); return false;" enctype="multipart/form-data"> 46 <input id="fileUpload" type="file" accept="audio/wav" multiple="multiple" /> 47 <button id="btnFileUpload" type="submit" disabled="disabled">Transcribe</button> 48 </form> 49 </div> 50 51 <div class="audio-slider__container"> 52 <button type="button" class="btn-fab btn-fab-small"> 53 <span class="material-icons"></span> 54 </button> 55 <input type="range" min="0" value="0" class="audio-slider__range" /> 56 <span class="audio-slider__value">1:23</span> 57 </div> 58 59 <div id="prgFileUploadContainer" class="asr-hidden"> 60 <label for="prgFileUpload">Processing:</label> 61 <progress id="prgFileUpload" /> 62 </div> 63 64 <div id="transcriptionsDisplayContainer"> 65 <audio id="transcriptionAudio"> 66 <source id="transcriptionAudioSource" /> 67 </audio> 68 69 <ul id="transcriptionsList" class="transcription__list"></ul> 70 71 <template id="transcriptionTemplate"> 72 <li class="transcription__container"> 73 <div class="transcription__header"> 74 <button class="btn-fab transcription__play-button" type="button"> 75 <span class="material-icons"></span> 76 </button> 77 <button class="btn-fab transcription__remove-button" type="button"> 78 <span class="material-icons"></span> 79 </button> 80 <p class="transcription__file-name"></p> 79 81 </div> 80 82 <details> 81 83 <summary>Character Information</summary> 82 <button>Scroll Left</button>83 84 <div class="metadata-list-container"> 84 <ul id="metadataList"class="metadata-list"></ul>85 <ul class="metadata-list"></ul> 85 86 </div> 86 87 <div class="audio-slider-container"> … … 88 89 </div> 89 90 </details> 90 </div> 91 </li> 92 </template> 93 94 <template id="errorTemplate"> 95 <li class="error-list-item"> 96 <div> 91 <hr class="divider" /> 92 </li> 93 </template> 94 95 <template id="errorTemplate"> 96 <li class="error-list-item"> 97 <div> 98 <div class="spaced-block"> 99 <b>Transcription Failed: </b><span></span> 100 </div> 101 <div class="spaced-block"> 102 <b>File: </b><span></span> 103 </div> 104 </div> 105 </li> 106 </template> 107 108 <template id="metadataTemplate"> 109 <!-- <li class="metadata-list-item tooltip-parent tooltip"> 97 110 <div class="spaced-block"> 98 < b>Transcription Failed: </b><span></span>111 <p></p> 99 112 </div> 100 113 <div class="spaced-block"> 101 <b >File: </b><span></span>114 <button type="button"><img src="interfaces/{$interface_name}/assets/play_arrow_black_18dp.svg" /></button> 102 115 </div> 103 </div> 104 </li> 105 </template> 106 107 <template id="metadataTemplate"> 108 <!-- <li class="metadata-list-item tooltip-parent tooltip"> 109 <div class="spaced-block"> 110 <p></p> 111 </div> 112 <div class="spaced-block"> 113 <button type="button"><img src="interfaces/{$interface_name}/assets/play_arrow_black_18dp.svg" /></button> 114 </div> 115 <div class="tooltip-wrapper"> 116 <span class="tooltip">0.02</span> 117 </div> 118 </li> --> 119 <li class="metadata-list-item"> 120 <div class="spaced-block"> 121 <p></p> 122 </div> 123 <div class="spaced-block"> 124 <button type="button"><img src="interfaces/{$interface_name}/assets/play_arrow_black_18dp.svg" /></button> 125 </div> 126 </li> 127 </template> 116 <div class="tooltip-wrapper"> 117 <span class="tooltip">0.02</span> 118 </div> 119 </li> --> 120 <li class="metadata-list-item"> 121 <div class="spaced-block"> 122 <p></p> 123 </div> 124 <div class="spaced-block"> 125 <button type="button"><img src="interfaces/{$interface_name}/assets/play_arrow_black_18dp.svg" /></button> 126 </div> 127 </li> 128 </template> 129 </div> 128 130 </div> 129 131
Note:
See TracChangeset
for help on using the changeset viewer.
