Spaces:
Runtime error
Runtime error
Update app.py
Browse files
app.py
CHANGED
@@ -26,7 +26,8 @@ def handle_transcription(username):
|
|
26 |
@app.route('/')
|
27 |
def home():
|
28 |
html_content = """
|
29 |
-
<html lang="en"
|
|
|
30 |
<meta charset="UTF-8">
|
31 |
<title>Speech to Text</title>
|
32 |
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
|
@@ -35,32 +36,29 @@ def home():
|
|
35 |
<h1>Speech Recognition</h1>
|
36 |
<button id="start">Start Listening</button>
|
37 |
<button id="stop">Stop Listening</button>
|
38 |
-
|
39 |
-
|
40 |
-
|
41 |
-
|
42 |
<div id="transcription" style="border: 1px solid #ccc; padding: 10px; margin-top: 5px; min-height: 50px;"></div>
|
43 |
<script>
|
44 |
-
// Check for browser support
|
45 |
window.SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
|
46 |
if (!window.SpeechRecognition) {
|
47 |
alert("Your browser does not support Speech Recognition. Try Google Chrome.");
|
48 |
}
|
49 |
let recognition = new window.SpeechRecognition();
|
50 |
-
recognition.continuous = true;
|
51 |
-
recognition.interimResults = true;
|
52 |
let liveOutput = document.getElementById('transcription');
|
53 |
let lastTranscription = '';
|
54 |
let intervalId = null;
|
|
|
55 |
recognition.onresult = (event) => {
|
56 |
let currentTranscription = '';
|
57 |
-
// Concatenate all the transcriptions
|
58 |
for (const result of event.results) {
|
59 |
currentTranscription += result[0].transcript;
|
60 |
}
|
61 |
liveOutput.textContent = currentTranscription;
|
62 |
-
|
63 |
-
// Check if there's a new transcription
|
64 |
if (lastTranscription !== currentTranscription) {
|
65 |
lastTranscription = currentTranscription;
|
66 |
console.log(currentTranscription);
|
@@ -69,13 +67,16 @@ def home():
|
|
69 |
recognition.onerror = (event) => {
|
70 |
console.error('Speech recognition error', event.error);
|
71 |
};
|
72 |
-
|
73 |
-
|
|
|
|
|
|
|
74 |
$.ajax({
|
75 |
-
url: 'https://johnpaulbin-api-test-stt.hf.space/' + username,
|
76 |
type: 'POST',
|
77 |
contentType: 'application/json',
|
78 |
-
data: JSON.stringify({ transcription:
|
79 |
success: function(response) {
|
80 |
console.log('Transcription sent', response);
|
81 |
},
|
@@ -84,25 +85,24 @@ def home():
|
|
84 |
}
|
85 |
});
|
86 |
}
|
87 |
-
|
88 |
-
|
89 |
-
|
90 |
-
|
91 |
-
|
92 |
-
}
|
93 |
-
|
94 |
-
// Start and stop functions
|
95 |
document.getElementById('start').addEventListener('click', () => {
|
96 |
-
|
97 |
-
|
98 |
-
setInterval(clearTranscription, 3500); // Clear transcription every 2 seconds
|
99 |
});
|
100 |
document.getElementById('stop').addEventListener('click', () => {
|
101 |
recognition.stop();
|
102 |
clearInterval(intervalId);
|
|
|
103 |
});
|
104 |
</script>
|
105 |
-
</body
|
|
|
|
|
106 |
"""
|
107 |
return Response(html_content, mimetype='text/html')
|
108 |
|
|
|
26 |
@app.route('/')
|
27 |
def home():
|
28 |
html_content = """
|
29 |
+
<html lang="en">
|
30 |
+
<head>
|
31 |
<meta charset="UTF-8">
|
32 |
<title>Speech to Text</title>
|
33 |
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
|
|
|
36 |
<h1>Speech Recognition</h1>
|
37 |
<button id="start">Start Listening</button>
|
38 |
<button id="stop">Stop Listening</button>
|
39 |
+
<div>
|
40 |
+
<label for="username">Username:</label>
|
41 |
+
<input type="text" id="username" placeholder="Enter your username">
|
42 |
+
</div>
|
43 |
<div id="transcription" style="border: 1px solid #ccc; padding: 10px; margin-top: 5px; min-height: 50px;"></div>
|
44 |
<script>
|
|
|
45 |
window.SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
|
46 |
if (!window.SpeechRecognition) {
|
47 |
alert("Your browser does not support Speech Recognition. Try Google Chrome.");
|
48 |
}
|
49 |
let recognition = new window.SpeechRecognition();
|
50 |
+
recognition.continuous = true;
|
51 |
+
recognition.interimResults = true;
|
52 |
let liveOutput = document.getElementById('transcription');
|
53 |
let lastTranscription = '';
|
54 |
let intervalId = null;
|
55 |
+
let delimiterId = null;
|
56 |
recognition.onresult = (event) => {
|
57 |
let currentTranscription = '';
|
|
|
58 |
for (const result of event.results) {
|
59 |
currentTranscription += result[0].transcript;
|
60 |
}
|
61 |
liveOutput.textContent = currentTranscription;
|
|
|
|
|
62 |
if (lastTranscription !== currentTranscription) {
|
63 |
lastTranscription = currentTranscription;
|
64 |
console.log(currentTranscription);
|
|
|
67 |
recognition.onerror = (event) => {
|
68 |
console.error('Speech recognition error', event.error);
|
69 |
};
|
70 |
+
|
71 |
+
function sendTranscriptionToServer() {
|
72 |
+
let username = document.getElementById('username').value;
|
73 |
+
// Extract the latest entry after the last delimiter
|
74 |
+
let latestEntry = lastTranscription.substring(lastTranscription.lastIndexOf('DELIMIN') + 7);
|
75 |
$.ajax({
|
76 |
+
url: 'https://johnpaulbin-api-test-stt.hf.space/' + username,
|
77 |
type: 'POST',
|
78 |
contentType: 'application/json',
|
79 |
+
data: JSON.stringify({ transcription: latestEntry }),
|
80 |
success: function(response) {
|
81 |
console.log('Transcription sent', response);
|
82 |
},
|
|
|
85 |
}
|
86 |
});
|
87 |
}
|
88 |
+
|
89 |
+
function appendDelimiter() {
|
90 |
+
lastTranscription += 'DELIMIN';
|
91 |
+
}
|
92 |
+
|
|
|
|
|
|
|
93 |
document.getElementById('start').addEventListener('click', () => {
|
94 |
+
intervalId = setInterval(sendTranscriptionToServer, 350);
|
95 |
+
delimiterId = setInterval(appendDelimiter, 3500);
|
|
|
96 |
});
|
97 |
document.getElementById('stop').addEventListener('click', () => {
|
98 |
recognition.stop();
|
99 |
clearInterval(intervalId);
|
100 |
+
clearInterval(delimiterId);
|
101 |
});
|
102 |
</script>
|
103 |
+
</body>
|
104 |
+
</html>
|
105 |
+
|
106 |
"""
|
107 |
return Response(html_content, mimetype='text/html')
|
108 |
|