Kamtera commited on
Commit
eb5fb7a
1 Parent(s): 62f49fe

Update app.py

Browse files
Files changed (1) hide show
  1. app.py +91 -2
app.py CHANGED
@@ -7,7 +7,96 @@ import speech_recognition as sr
7
 
8
  html_seeker='''
9
  <html> <head> <meta charset="utf-8" /> <title>Gentle</title> <style> html, body { margin: 0; padding: 0; min-width: 900px; } #header { position: fixed; top: 0; left: 0; height: 50px; min-width: 900px; line-height: 50px; width: 100%; background-color: #999; box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.5); font-family: Helvetica, sans-serif; } #header, #header a { color: white; } .home { margin: 0; font-weight: bold; text-transform: lowercase; width: 100px; } h4.home { margin: 0; background: #666; padding-left: 25px; padding-right: 30px; margin-right: 20px; float: left; text-decoration: none; } .home:hover a { background: #555; } #audio { margin-top: 9px; width: 500px; display: inline-block; } #transcript { margin: 0 15px; margin-bottom: 5em; white-space: pre-wrap; line-height: 2em; max-width: 600px; color: #999; clear: both; margin-top: 75px; /*direction: rtl;*/ } .success { color: black; } .success:hover { text-decoration: underline; } .active { color: magenta; background-color: yellow; } #preloader { visibility: hidden; } </style> </head> <body> <div id="header"> <h4 class="home">Model name</h4>'''
10
- html_seeker1='''</div> </div> <div id="transcript" dir="auto"></div> <script> var $a = document.getElementById("audio"); window.onkeydown = function(ev) { if(ev.keyCode == 32) { ev.preventDefault(); $a.pause(); } } var $trans = document.getElementById("transcript"); var wds = []; var cur_wd; function highlight_word() { var t = $a.currentTime; // XXX: O(N); use binary search var hits = wds.filter(function(x) { return (t - x['timestamp']['0']) > 0.01 && (x['timestamp']['1'] - t) > 0.01; }, wds); var next_wd = hits[hits.length - 1]; if(cur_wd != next_wd) { var active = document.querySelectorAll('.active'); for(var i = 0; i < active.length; i++) { active[i].classList.remove('active'); } if(next_wd && next_wd.$div) { next_wd.$div.classList.add('active'); //render_phones(next_wd); } } cur_wd = next_wd; //highlight_phone(t); window.requestAnimationFrame(highlight_word); } window.requestAnimationFrame(highlight_word); $trans.innerHTML = "Loading..."; function render(ret) { wds = ret['chunks'] || []; transcript = ret['text']; $trans.innerHTML = ''; var currentOffset = 0; wds.forEach(function(wd) { var $wd = document.createElement('span'); var txt = wd['text']; var $wdText = document.createTextNode(txt); $wd.appendChild($wdText); wd.$div = $wd; $wd.className = 'success'; $wd.onclick = function() { console.log(wd['timestamp']['0']); $a.currentTime = wd['timestamp']['0']; $a.play(); }; $trans.appendChild($wd); $trans.appendChild(document.createTextNode(' ')); }); } function update() { if(INLINE_JSON) { // We want this to work from file:/// domains, so we provide a // mechanism for inlining the alignment data. render(INLINE_JSON); } } var INLINE_JSON='''
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
11
  html_seeker2=''';update();
12
  </script>'''
13
 
@@ -71,7 +160,7 @@ with gr.Blocks() as demo:
71
  inputs_model_fa =gr.inputs.Radio(label="Language", choices=["ghofrani/common8","SLPL/Sharif-wav2vec2","voidful/wav2vec2-xlsr-multilingual-56"])
72
  output_transcribe1_fa = gr.Textbox(label="Transcribed text:")
73
  output_transcribe1_fa1 = gr.Textbox(label="Transcribed text with timestamps:")
74
- output_transcribe1_fa2 =gradio.HTML("")
75
  transcribe_audio1_fa= gr.Button("Submit")
76
  with gr.Tab("google"):
77
  gr.Markdown("set your speech language")
 
7
 
8
  html_seeker='''
9
  <html> <head> <meta charset="utf-8" /> <title>Gentle</title> <style> html, body { margin: 0; padding: 0; min-width: 900px; } #header { position: fixed; top: 0; left: 0; height: 50px; min-width: 900px; line-height: 50px; width: 100%; background-color: #999; box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.5); font-family: Helvetica, sans-serif; } #header, #header a { color: white; } .home { margin: 0; font-weight: bold; text-transform: lowercase; width: 100px; } h4.home { margin: 0; background: #666; padding-left: 25px; padding-right: 30px; margin-right: 20px; float: left; text-decoration: none; } .home:hover a { background: #555; } #audio { margin-top: 9px; width: 500px; display: inline-block; } #transcript { margin: 0 15px; margin-bottom: 5em; white-space: pre-wrap; line-height: 2em; max-width: 600px; color: #999; clear: both; margin-top: 75px; /*direction: rtl;*/ } .success { color: black; } .success:hover { text-decoration: underline; } .active { color: magenta; background-color: yellow; } #preloader { visibility: hidden; } </style> </head> <body> <div id="header"> <h4 class="home">Model name</h4>'''
10
+ html_seeker1='''</div>
11
+ </div>
12
+
13
+
14
+ <div id="transcript" dir="auto"></div>
15
+
16
+
17
+ <script>
18
+
19
+ var $a = document.querySelector("audio");
20
+ window.onkeydown = function(ev) {
21
+ if(ev.keyCode == 32) {
22
+ ev.preventDefault();
23
+ $a.pause();
24
+ }
25
+ }
26
+ var $trans = document.getElementById("transcript");
27
+ var wds = [];
28
+ var cur_wd;
29
+
30
+ function highlight_word() {
31
+ var t = $a.currentTime;
32
+ // XXX: O(N); use binary search
33
+ var hits = wds.filter(function(x) {
34
+ return (t - x['timestamp']['0']) > 0.01 && (x['timestamp']['1'] - t) > 0.01;
35
+ }, wds);
36
+ var next_wd = hits[hits.length - 1];
37
+
38
+ if(cur_wd != next_wd) {
39
+ var active = document.querySelectorAll('.active');
40
+ for(var i = 0; i < active.length; i++) {
41
+ active[i].classList.remove('active');
42
+ }
43
+ if(next_wd && next_wd.$div) {
44
+ next_wd.$div.classList.add('active');
45
+ //render_phones(next_wd);
46
+ }
47
+ }
48
+ cur_wd = next_wd;
49
+ //highlight_phone(t);
50
+
51
+ window.requestAnimationFrame(highlight_word);
52
+ }
53
+ window.requestAnimationFrame(highlight_word);
54
+
55
+ $trans.innerHTML = "Loading...";
56
+
57
+ function render(ret) {
58
+ wds = ret['chunks'] || [];
59
+ transcript = ret['text'];
60
+
61
+ $trans.innerHTML = '';
62
+
63
+ var currentOffset = 0;
64
+
65
+ wds.forEach(function(wd) {
66
+
67
+
68
+ var $wd = document.createElement('span');
69
+ var txt = wd['text'];
70
+ var $wdText = document.createTextNode(txt);
71
+ $wd.appendChild($wdText);
72
+ wd.$div = $wd;
73
+ $wd.className = 'success';
74
+
75
+ $wd.onclick = function() {
76
+ console.log(wd['timestamp']['0']);
77
+ $a.currentTime = wd['timestamp']['0'];
78
+ $a.play();
79
+ };
80
+ $trans.appendChild($wd);
81
+ $trans.appendChild(document.createTextNode(' '));
82
+ });
83
+
84
+
85
+ }
86
+
87
+
88
+
89
+
90
+
91
+ function update() {
92
+ if(INLINE_JSON) {
93
+ // We want this to work from file:/// domains, so we provide a
94
+ // mechanism for inlining the alignment data.
95
+ render(INLINE_JSON);
96
+ }
97
+ }
98
+
99
+ var INLINE_JSON='''
100
  html_seeker2=''';update();
101
  </script>'''
102
 
 
160
  inputs_model_fa =gr.inputs.Radio(label="Language", choices=["ghofrani/common8","SLPL/Sharif-wav2vec2","voidful/wav2vec2-xlsr-multilingual-56"])
161
  output_transcribe1_fa = gr.Textbox(label="Transcribed text:")
162
  output_transcribe1_fa1 = gr.Textbox(label="Transcribed text with timestamps:")
163
+ output_transcribe1_fa2 =gr.HTML("")
164
  transcribe_audio1_fa= gr.Button("Submit")
165
  with gr.Tab("google"):
166
  gr.Markdown("set your speech language")