Spaces:
Runtime error
Runtime error
Update app.py
Browse files
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>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 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 =
|
| 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")
|