cjones/WhisperLive
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

firefox handle server messages: disconnect, wait

Browse Source
This commit is contained in:
makaveli10
2023-08-08 15:14:38 +05:30
parent f1df664f06
commit 4f88816d27
4 changed files with 157 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Audio-Transcription-Firefox/background.js
+49 -5
View File
@@ -1,7 +1,7 @@
browser.runtime.onMessage.addListener(function(request, sender, sendResponse) {
browser.runtime.onMessage.addListener(async function(request, sender, sendResponse) {
const { action, data } = request;
if (action === "transcript") {
browser.tabs.query({ active: true, currentWindow: true })
await browser.tabs.query({ active: true, currentWindow: true })
.then((tabs) => {
const tabId = tabs[0].id;
browser.tabs.sendMessage(tabId, { action: "show_transcript", data });
@@ -12,9 +12,53 @@ browser.runtime.onMessage.addListener(function(request, sender, sendResponse) {
}
if (action === "updateSelectedLanguage") {
const detectedLanguage = data;
if (detectedLanguage) {
browser.runtime.sendMessage({ action: "updateSelectedLanguage", detectedLanguage });
browser.storage.local.set({ selectedLanguage: detectedLanguage });
try {
await browser.storage.local.set({ selectedLanguage: detectedLanguage });
browser.tabs.query({ active: true, currentWindow: true }).then((tabs) => {
const tabId = tabs[0].id;
browser.tabs.sendMessage(tabId, { action: "updateSelectedLanguage", detectedLanguage });
});
} catch (error) {
console.error("Error updateSelectedLanguage:", error);
}
}
if (action === "toggleCaptureButtons") {
try {
await browser.storage.local.set({ capturingState: { isCapturing: false } });
browser.tabs.query({ active: true, currentWindow: true }).then((tabs) => {
const tabId = tabs[0].id;
browser.tabs.sendMessage(tabId, { action: "toggleCaptureButtons", data: false });
});
} catch (error) {
console.error("Error updating capturing state:", error);
}
try{
await browser.tabs.query({ active: true, currentWindow: true })
.then((tabs) => {
const tabId = tabs[0].id;
browser.tabs.sendMessage(tabId, { action: "stopCapture", data });
})
.catch((error) => {
console.error("Error retrieving active tab:", error);
});
} catch (error) {
console.error(error);
}
}
if (action === "showPopup") {
try{
await browser.tabs.query({ active: true, currentWindow: true })
.then((tabs) => {
const tabId = tabs[0].id;
browser.tabs.sendMessage(tabId, { action: "showWaitPopup", data });
})
.catch((error) => {
console.error(error);
});
} catch (error) {
console.error(error);
}
}
});
Audio-Transcription-Firefox/content.js
+92 -12
View File
@@ -18,6 +18,16 @@ function handlePlaybackStateChange(event) {
isPaused = event.target.paused;
}
function generateUUID() {
let dt = new Date().getTime();
const uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
const r = (dt + Math.random() * 16) % 16 | 0;
dt = Math.floor(dt / 16);
return (c === 'x' ? r : (r & 0x3 | 0x8)).toString(16);
});
return uuid;
}
/**
* Resamples the audio data to a target sample rate of 16kHz.
@@ -59,9 +69,12 @@ function startRecording(data) {
if (language === null && !data.useMultilingual) {
language = 'en';
}
const uuid = generateUUID();
socket.onopen = function(e) {
socket.send(
JSON.stringify({
uid: uuid,
multilingual: data.useMultilingual,
language: data.language,
task: data.task
@@ -70,25 +83,33 @@ function startRecording(data) {
};
let isServerReady = false;
socket.onmessage = (event) => {
if (!isServerReady){
socket.onmessage = async (event) => {
const data = JSON.parse(event.data);
if (data["uid"] !== uuid)
return;
if (data["status"] === "WAIT"){
await browser.runtime.sendMessage({ action: "showPopup", data: data["message"] })
return;
}
if (!isServerReady && data["message"] === "SERVER_READY"){
isServerReady = true;
return;
}
if (language === null ){
const data = JSON.parse(event.data);
language = data["language"];
browser.runtime.sendMessage({ action: "updateSelectedLanguage", data: language })
.catch(function(error) {
console.error("Error sending message:", error);
});
await browser.runtime.sendMessage({ action: "updateSelectedLanguage", data: language })
return
}
const data = event.data;;
browser.runtime.sendMessage({ action: "transcript", data })
if (data["message"] === "DISCONNECT"){
await browser.runtime.sendMessage({ action: "toggleCaptureButtons", data: false })
return
}
await browser.runtime.sendMessage({ action: "transcript", data: event.data })
.catch(function(error) {
console.error("Error sending message:", error);
});
@@ -110,9 +131,15 @@ function startRecording(data) {
const audioData16kHz = resampleTo16kHZ(inputData, audioContext.sampleRate);
audioDataCache.push(inputData);
// feed inputs and run
socket.send(audioData16kHz);
const base64AudioData = btoa(String.fromCharCode.apply(null, new Uint8Array(audioData16kHz.buffer)));
socket.send(
JSON.stringify({
"audio": base64AudioData
})
);
};
// Prevent page mute
@@ -127,6 +154,52 @@ var elem_text = null;
var segments = [];
var text_segments = [];
function initPopupElement() {
if (document.getElementById('popupElement')) {
return;
}
const popupContainer = document.createElement('div');
popupContainer.id = 'popupElement';
popupContainer.style.cssText = 'position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: white; color: black; padding: 16px; border-radius: 10px; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5); display: none; text-align: center;';
const popupText = document.createElement('span');
popupText.textContent = 'Default Text';
popupText.className = 'popupText';
popupText.style.fontSize = '24px';
popupContainer.appendChild(popupText);
const buttonContainer = document.createElement('div');
buttonContainer.style.marginTop = '8px';
const closePopupButton = document.createElement('button');
closePopupButton.textContent = 'Close';
closePopupButton.style.backgroundColor = '#65428A';
closePopupButton.style.color = 'white';
closePopupButton.style.border = 'none';
closePopupButton.style.padding = '8px 16px'; // Add padding for better click area
closePopupButton.style.cursor = 'pointer';
closePopupButton.addEventListener('click', async () => {
popupContainer.style.display = 'none';
await browser.runtime.sendMessage({ action: 'toggleCaptureButtons', data: false });
});
buttonContainer.appendChild(closePopupButton);
popupContainer.appendChild(buttonContainer);
document.body.appendChild(popupContainer);
}
function showPopup(customText) {
const popup = document.getElementById('popupElement');
const popupText = popup.querySelector('.popupText');
if (popup && popupText) {
popupText.textContent = customText || 'Default Text'; // Set default text if custom text is not provided
popup.style.display = 'block';
}
}
function init_element() {
if (document.getElementById('transcription')) {
return;
@@ -264,10 +337,17 @@ browser.runtime.onMessage.addListener((request, sender, sendResponse) => {
remove_element();
} else if (action === "showWaitPopup") {
initPopupElement();
showPopup(`Estimated wait time ~ ${Math.round(data)} minutes`);
} else if (action === "show_transcript"){
if (!isCapturing) return;
init_element();
message = JSON.parse(data);
message = message["segments"];
var text = '';
for (var i = 0; i < message.length; i++) {
Audio-Transcription-Firefox/popup.html
+2
View File
@@ -15,6 +15,8 @@
<input type="checkbox" id="useServerCheckbox">
<label for="useServerCheckbox">Use Collabora Whisper-Live Server</label>
</div>
<textarea id="waitTextBox" style="display: none;"></textarea>
<div class="checkbox-container">
<input type="checkbox" id="useMultilingualCheckbox">
<label for="useMultilingualCheckbox">Use Multilingual Model</label>
Audio-Transcription-Firefox/popup.js
+14 -2
View File
@@ -113,7 +113,9 @@ document.addEventListener("DOMContentLoaded", function() {
function toggleCaptureButtons(isCapturing) {
startButton.disabled = isCapturing;
stopButton.disabled = !isCapturing;
useServerCheckbox.disabled = isCapturing; // Disable checkbox if capturing
useServerCheckbox.disabled = isCapturing;
useMultilingualCheckbox.disabled = isCapturing;
startButton.classList.toggle("disabled", isCapturing);
stopButton.classList.toggle("disabled", !isCapturing);
}
@@ -152,7 +154,7 @@ document.addEventListener("DOMContentLoaded", function() {
browser.runtime.onMessage.addListener((request, sender, sendResponse) => {
if (request.action === "updateSelectedLanguage") {
const detectedLanguage = request.detectedLanguage;
const detectedLanguage = request.data;
if (detectedLanguage) {
languageDropdown.value = detectedLanguage;
@@ -161,4 +163,14 @@ document.addEventListener("DOMContentLoaded", function() {
}
}
});
browser.runtime.onMessage.addListener((request, sender, sendResponse) => {
if (request.action === "toggleCaptureButtons") {
toggleCaptureButtons(false);
browser.storage.local.set({ capturingState: { isCapturing: false } })
.catch(function(error) {
console.error("Error storing capturing state:", error);
});
}
});
});