popov/gogo2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

languade detection and translation implemented - not working very well

Browse Source
This commit is contained in:
Dobromir Popov
2024-06-10 01:40:52 +03:00
parent d28f73cd7e
commit aac600ebaf
2 changed files with 65 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
web/client.html
View File

@ -3,11 +3,9 @@
<head>
<title>Real-time Speech-to-Text</title>
<meta name="viewport"
content="width=device-width, initial-scale=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Add the Tailwind CSS library -->
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css">
</head>
<body class="bg-gray-100">
@ -15,56 +13,48 @@
<h1 class="text-2xl font-bold mb-4 text-center">Rt STT</h1>
<div class="flex justify-center items-center mb-4">
<label class="toggle flex items-center">
<input type="checkbox"
id="autosend"
class="mr-2">
<input type="checkbox" id="autosend" class="mr-2">
<span class="slider"></span>
<span class="ml-2">Continuous</span>
</label>
<select id="input-devices"
class="ml-4">
<select id="input-devices" class="ml-4">
<option value="default">Default</option>
</select>
<select id="language-select">
<option value="auto">Auto</option>
<option value="en">English</option>
<option value="bg">Български</option>
<option value="fr">Français</option>
</select>
<select id="task-select">
<option value="transcribe">Transcribe</option>
<option value="translate">Translate</option>
</select>
<label class="toggle flex items-center ml-4">
<input type="checkbox"
id="store-recordings"
class="mr-2">
<input type="checkbox" id="store-recordings" class="mr-2">
<span class="slider"></span>
<span class="ml-2">Store Recordings</span>
</div>
<div class="flex justify-center items-center mb-4">
<span id="record-actions">
<button id="record-button"
disabled
<button id="record-button" disabled
class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded mr-4">
Start Recording</button>
<button id="record-button-speakers"
disabled
<button id="record-button-speakers" disabled
class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded mr-4">
Stream from speakers</button>
</span>
</div>
<div class="flex justify-center items-center mb-4">
<div id="connection-status"
style="margin-right: 5px;"></div>
<div id="connection-status" style="margin-right: 5px;"></div>
</div>
<div class="flex justify-center items-center mb-4">
<div id="info"></div>
</div>
<div id="status-recording"
class="flex justify-center items-center mb-4">
<div id="status-recording" class="flex justify-center items-center mb-4">
</div>
<div class="relative rounded-lg border border-gray-300 shadow-sm">
<textarea id="transcription"
class="block w-full h-48 p-4 resize-none"
<textarea id="transcription" class="block w-full h-48 p-4 resize-none"
placeholder="Whisper something into the microphone..."></textarea>
<button id="copyButton"
class="absolute top-0 right-0 px-4 py-2 text-sm font-medium text-gray-700 bg-gray-200 hover:bg-gray-300 rounded-bl-lg focus:outline-none"
@ -72,8 +62,7 @@ disabled
Copy
</button>
</div>
<canvas id="canvas"
class="w-full"></canvas>
<canvas id="canvas" class="w-full"></canvas>
<script>
let sessionId;
@ -274,15 +263,29 @@ disabled
if (json.hasOwnProperty("language")) {
languageSelect.value = json.language;
}
if (json.hasOwnProperty("languageDetected")) {
languageSelect.value = json.language;
statusRecording.innerHTML = "Detected language: " + json.languageDetected;
}
if (json.hasOwnProperty("taskSelect")) {
taskSelect.value = json.taskSelect;
}
//storerecordings checkbox
if (json.hasOwnProperty("storeRecordings")) {
storeRecordings.checked = json.storeRecordings;
}
if (json.hasOwnProperty("text")) {
transcription.value += "\r\n" + json.text;
}
if (json.hasOwnProperty("queueCounter")) {
let latency = Date.now() - serverTime;
console.log("Received message from server: " + event.data + " (latency: " + latency + "ms)");
info.innerHTML = "latency: " + latency + "ms; server queue: " + queue + " requests";
}
return;
} catch (e) {
//not json