Archived
First commit of local Closed Caption App
This commit is contained in:
@@ -0,0 +1,444 @@
|
||||
let socket;
|
||||
let mediaRecorder;
|
||||
let audioChunks = [];
|
||||
let isRecording = false;
|
||||
let displayWindowOpen = false;
|
||||
let currentTimeout;
|
||||
|
||||
// Store current settings
|
||||
let displaySettings = {
|
||||
textColor: '#ffffff',
|
||||
bgColor: '#000000',
|
||||
fontFamily: 'Arial, sans-serif',
|
||||
fontSize: '32px',
|
||||
duration: 5,
|
||||
googleFont: null
|
||||
};
|
||||
|
||||
// Wait for DOM to be fully loaded
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
// Initialize socket connection
|
||||
try {
|
||||
socket = io('http://localhost:3000');
|
||||
|
||||
socket.on('connect', () => {
|
||||
console.log('Connected to server');
|
||||
});
|
||||
|
||||
socket.on('connect_error', (error) => {
|
||||
console.error('Socket connection error:', error);
|
||||
});
|
||||
} catch (error) {
|
||||
console.error('Failed to initialize socket:', error);
|
||||
}
|
||||
|
||||
const startBtn = document.getElementById('start-btn');
|
||||
const stopBtn = document.getElementById('stop-btn');
|
||||
const backendSelect = document.getElementById('backend-select');
|
||||
const durationInput = document.getElementById('duration-input');
|
||||
const colorInput = document.getElementById('color-input');
|
||||
const bgColorInput = document.getElementById('bg-color-input');
|
||||
const fontSelect = document.getElementById('font-select');
|
||||
const fontSizeInput = document.getElementById('font-size-input');
|
||||
const fontSizeDisplay = document.getElementById('font-size-display');
|
||||
const transcriptionText = document.getElementById('transcription-text');
|
||||
const transcriptionDisplay = document.getElementById('transcription-display');
|
||||
const toggleDisplayBtn = document.getElementById('toggle-display-btn');
|
||||
const googleFontLink = document.getElementById('google-font-link');
|
||||
const audioLevelFill = document.getElementById('audio-level-fill');
|
||||
const audioLevelText = document.getElementById('audio-level-text');
|
||||
const queueStatus = document.getElementById('queue-status');
|
||||
const chunkSizeSelect = document.getElementById('chunk-size-select');
|
||||
const settingsBtn = document.getElementById('settings-btn');
|
||||
|
||||
// Load available backends
|
||||
async function loadBackends() {
|
||||
try {
|
||||
const response = await fetch('http://localhost:3000/api/backends');
|
||||
const data = await response.json();
|
||||
|
||||
backendSelect.innerHTML = '';
|
||||
data.backends.forEach(backend => {
|
||||
const option = document.createElement('option');
|
||||
option.value = backend.id;
|
||||
option.textContent = backend.name + (backend.available ? '' : ' (Unavailable)');
|
||||
option.disabled = !backend.available;
|
||||
backendSelect.appendChild(option);
|
||||
});
|
||||
|
||||
backendSelect.value = data.current;
|
||||
} catch (error) {
|
||||
console.error('Failed to load backends:', error);
|
||||
}
|
||||
}
|
||||
|
||||
// Initialize
|
||||
loadBackends();
|
||||
loadAppSettings();
|
||||
|
||||
// Update queue status periodically
|
||||
async function updateQueueStatus() {
|
||||
try {
|
||||
const response = await fetch('http://localhost:3000/api/queue-status');
|
||||
const status = await response.json();
|
||||
queueStatus.textContent = `Queue: ${status.queueLength}, Running: ${status.runningJobs}`;
|
||||
} catch (error) {
|
||||
// Silently fail - not critical
|
||||
}
|
||||
}
|
||||
|
||||
setInterval(updateQueueStatus, 2000); // Update every 2 seconds
|
||||
|
||||
// Save app setting
|
||||
async function saveAppSetting(key, value) {
|
||||
try {
|
||||
await fetch('http://localhost:3000/api/settings', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ [key]: value })
|
||||
});
|
||||
} catch (error) {
|
||||
console.warn('Could not save app setting:', key, error);
|
||||
}
|
||||
}
|
||||
|
||||
// Load app settings
|
||||
async function loadAppSettings() {
|
||||
try {
|
||||
const response = await fetch('http://localhost:3000/api/settings');
|
||||
const settings = await response.json();
|
||||
|
||||
// Apply settings to UI elements
|
||||
if (settings.selectedBackend) {
|
||||
backendSelect.value = settings.selectedBackend;
|
||||
}
|
||||
if (settings.textDuration) {
|
||||
durationInput.value = settings.textDuration;
|
||||
}
|
||||
if (settings.textColor) {
|
||||
colorInput.value = settings.textColor;
|
||||
}
|
||||
if (settings.backgroundColor) {
|
||||
bgColorInput.value = settings.backgroundColor;
|
||||
}
|
||||
if (settings.fontFamily) {
|
||||
fontSelect.value = settings.fontFamily;
|
||||
}
|
||||
if (settings.fontSize) {
|
||||
fontSizeInput.value = settings.fontSize;
|
||||
fontSizeDisplay.textContent = settings.fontSize + 'px';
|
||||
}
|
||||
if (settings.chunkSize) {
|
||||
chunkSizeSelect.value = settings.chunkSize;
|
||||
}
|
||||
|
||||
// Update display settings
|
||||
updateDisplaySettings();
|
||||
|
||||
console.log('App settings loaded');
|
||||
} catch (error) {
|
||||
console.warn('Could not load app settings, using defaults:', error);
|
||||
}
|
||||
}
|
||||
|
||||
// Update display settings and notify display window
|
||||
function updateDisplaySettings() {
|
||||
displaySettings = {
|
||||
textColor: colorInput.value,
|
||||
bgColor: bgColorInput.value,
|
||||
fontFamily: fontSelect.value,
|
||||
fontSize: fontSizeInput.value + 'px',
|
||||
duration: parseInt(durationInput.value),
|
||||
googleFont: fontSelect.options[fontSelect.selectedIndex].getAttribute('data-google')
|
||||
};
|
||||
|
||||
// Apply to local display
|
||||
transcriptionText.style.color = displaySettings.textColor;
|
||||
transcriptionText.style.fontSize = displaySettings.fontSize;
|
||||
transcriptionText.style.fontFamily = displaySettings.fontFamily;
|
||||
transcriptionDisplay.style.backgroundColor = displaySettings.bgColor;
|
||||
|
||||
// Update Google Font link
|
||||
if (displaySettings.googleFont) {
|
||||
googleFontLink.href = `https://fonts.googleapis.com/css2?family=${displaySettings.googleFont}&display=swap`;
|
||||
}
|
||||
|
||||
// Send to display window
|
||||
if (window.electronAPI) {
|
||||
window.electronAPI.updateDisplaySettings(displaySettings);
|
||||
}
|
||||
}
|
||||
|
||||
// Font selection handling with auto-save
|
||||
fontSelect.addEventListener('change', () => {
|
||||
updateDisplaySettings();
|
||||
saveAppSetting('fontFamily', fontSelect.value);
|
||||
const selectedOption = fontSelect.options[fontSelect.selectedIndex];
|
||||
const googleFont = selectedOption.getAttribute('data-google');
|
||||
saveAppSetting('googleFont', googleFont);
|
||||
});
|
||||
|
||||
colorInput.addEventListener('change', () => {
|
||||
updateDisplaySettings();
|
||||
saveAppSetting('textColor', colorInput.value);
|
||||
});
|
||||
|
||||
bgColorInput.addEventListener('change', () => {
|
||||
updateDisplaySettings();
|
||||
saveAppSetting('backgroundColor', bgColorInput.value);
|
||||
});
|
||||
|
||||
durationInput.addEventListener('change', () => {
|
||||
updateDisplaySettings();
|
||||
saveAppSetting('textDuration', parseInt(durationInput.value));
|
||||
});
|
||||
|
||||
fontSizeInput.addEventListener('input', (e) => {
|
||||
fontSizeDisplay.textContent = e.target.value + 'px';
|
||||
updateDisplaySettings();
|
||||
saveAppSetting('fontSize', parseInt(e.target.value));
|
||||
});
|
||||
|
||||
chunkSizeSelect.addEventListener('change', () => {
|
||||
saveAppSetting('chunkSize', parseInt(chunkSizeSelect.value));
|
||||
});
|
||||
|
||||
// Backend selection
|
||||
backendSelect.addEventListener('change', async (e) => {
|
||||
try {
|
||||
await fetch('http://localhost:3000/api/backend', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ backend: e.target.value })
|
||||
});
|
||||
|
||||
// Save to settings
|
||||
saveAppSetting('selectedBackend', e.target.value);
|
||||
} catch (error) {
|
||||
console.error('Failed to switch backend:', error);
|
||||
}
|
||||
});
|
||||
|
||||
// Display window toggle
|
||||
toggleDisplayBtn.addEventListener('click', async () => {
|
||||
if (window.electronAPI) {
|
||||
displayWindowOpen = await window.electronAPI.toggleDisplayWindow();
|
||||
toggleDisplayBtn.textContent = displayWindowOpen ? 'Close Display Window' : 'Open Display Window';
|
||||
|
||||
// Send current settings to the new window
|
||||
if (displayWindowOpen) {
|
||||
setTimeout(() => {
|
||||
window.electronAPI.updateDisplaySettings(displaySettings);
|
||||
}, 500);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Listen for display window close event
|
||||
if (window.electronAPI) {
|
||||
window.electronAPI.onDisplayWindowClosed(() => {
|
||||
displayWindowOpen = false;
|
||||
toggleDisplayBtn.textContent = 'Open Display Window';
|
||||
});
|
||||
}
|
||||
|
||||
// Socket event listeners
|
||||
if (socket) {
|
||||
socket.on('transcription', (data) => {
|
||||
displayTranscription(data.text);
|
||||
|
||||
// Also send to display window via IPC
|
||||
if (window.electronAPI && displayWindowOpen) {
|
||||
window.electronAPI.sendTranscription(data);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function displayTranscription(text) {
|
||||
transcriptionText.textContent = text;
|
||||
transcriptionText.classList.remove('fade-out');
|
||||
|
||||
if (currentTimeout) {
|
||||
clearTimeout(currentTimeout);
|
||||
}
|
||||
|
||||
const duration = displaySettings.duration * 1000;
|
||||
currentTimeout = setTimeout(() => {
|
||||
transcriptionText.classList.add('fade-out');
|
||||
setTimeout(() => {
|
||||
transcriptionText.textContent = '';
|
||||
}, 300);
|
||||
}, duration);
|
||||
}
|
||||
|
||||
// Audio level monitoring
|
||||
let audioContext;
|
||||
let analyser;
|
||||
let microphone;
|
||||
let dataArray;
|
||||
let audioLevelInterval;
|
||||
|
||||
function startAudioLevelMonitoring(stream) {
|
||||
audioContext = new (window.AudioContext || window.webkitAudioContext)();
|
||||
analyser = audioContext.createAnalyser();
|
||||
microphone = audioContext.createMediaStreamSource(stream);
|
||||
|
||||
// Configure analyser for better responsiveness
|
||||
analyser.fftSize = 512;
|
||||
analyser.smoothingTimeConstant = 0.3;
|
||||
analyser.minDecibels = -90;
|
||||
analyser.maxDecibels = -10;
|
||||
|
||||
const bufferLength = analyser.frequencyBinCount;
|
||||
dataArray = new Uint8Array(bufferLength);
|
||||
|
||||
microphone.connect(analyser);
|
||||
|
||||
function updateAudioLevel() {
|
||||
if (!isRecording) return;
|
||||
|
||||
analyser.getByteTimeDomainData(dataArray);
|
||||
|
||||
// Calculate RMS of time domain data (more accurate for level detection)
|
||||
let sum = 0;
|
||||
for (let i = 0; i < bufferLength; i++) {
|
||||
const sample = (dataArray[i] - 128) / 128; // Convert to -1 to 1 range
|
||||
sum += sample * sample;
|
||||
}
|
||||
const rms = Math.sqrt(sum / bufferLength);
|
||||
|
||||
// Apply some smoothing and scaling
|
||||
const level = Math.min(rms * 10, 1); // Scale up and cap at 1
|
||||
|
||||
// Update UI
|
||||
const percentage = Math.round(level * 100);
|
||||
audioLevelFill.style.width = `${percentage}%`;
|
||||
audioLevelText.textContent = `${percentage}%`;
|
||||
|
||||
// Store current level for threshold checking
|
||||
window.currentAudioLevel = level;
|
||||
}
|
||||
|
||||
// Update at 60fps for smooth animation
|
||||
audioLevelInterval = setInterval(updateAudioLevel, 16);
|
||||
}
|
||||
|
||||
// Audio recording
|
||||
async function startRecording() {
|
||||
try {
|
||||
const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
|
||||
|
||||
// Start audio level monitoring
|
||||
startAudioLevelMonitoring(stream);
|
||||
|
||||
const options = { mimeType: 'audio/webm' };
|
||||
if (!MediaRecorder.isTypeSupported(options.mimeType)) {
|
||||
options.mimeType = 'audio/ogg';
|
||||
if (!MediaRecorder.isTypeSupported(options.mimeType)) {
|
||||
options.mimeType = '';
|
||||
}
|
||||
}
|
||||
|
||||
mediaRecorder = new MediaRecorder(stream, options);
|
||||
|
||||
mediaRecorder.ondataavailable = (event) => {
|
||||
if (event.data.size > 0) {
|
||||
audioChunks.push(event.data);
|
||||
}
|
||||
};
|
||||
|
||||
mediaRecorder.onstop = async () => {
|
||||
const audioBlob = new Blob(audioChunks, { type: 'audio/webm' });
|
||||
audioChunks = [];
|
||||
await sendAudioForTranscription(audioBlob);
|
||||
};
|
||||
|
||||
mediaRecorder.start();
|
||||
isRecording = true;
|
||||
|
||||
// Auto-stop and restart recording based on selected chunk size
|
||||
const chunkSize = parseInt(chunkSizeSelect.value);
|
||||
const recordingInterval = setInterval(() => {
|
||||
if (isRecording && mediaRecorder.state === 'recording') {
|
||||
mediaRecorder.stop();
|
||||
setTimeout(() => {
|
||||
if (isRecording) {
|
||||
audioChunks = [];
|
||||
mediaRecorder.start();
|
||||
}
|
||||
}, 100);
|
||||
} else if (!isRecording) {
|
||||
clearInterval(recordingInterval);
|
||||
}
|
||||
}, chunkSize);
|
||||
|
||||
startBtn.disabled = true;
|
||||
stopBtn.disabled = false;
|
||||
} catch (error) {
|
||||
console.error('Error starting recording:', error);
|
||||
alert('Failed to start recording. Please check microphone permissions.');
|
||||
}
|
||||
}
|
||||
|
||||
function stopRecording() {
|
||||
if (mediaRecorder && mediaRecorder.state !== 'inactive') {
|
||||
mediaRecorder.stop();
|
||||
mediaRecorder.stream.getTracks().forEach(track => track.stop());
|
||||
}
|
||||
isRecording = false;
|
||||
startBtn.disabled = false;
|
||||
stopBtn.disabled = true;
|
||||
|
||||
// Stop audio level monitoring
|
||||
if (audioLevelInterval) {
|
||||
clearInterval(audioLevelInterval);
|
||||
audioLevelInterval = null;
|
||||
}
|
||||
if (audioContext) {
|
||||
audioContext.close();
|
||||
audioContext = null;
|
||||
}
|
||||
|
||||
// Reset audio level display
|
||||
audioLevelFill.style.width = '0%';
|
||||
audioLevelText.textContent = '0%';
|
||||
}
|
||||
|
||||
async function sendAudioForTranscription(audioBlob) {
|
||||
const formData = new FormData();
|
||||
formData.append('audio', audioBlob, 'audio.webm');
|
||||
|
||||
try {
|
||||
const response = await fetch('http://localhost:3000/api/transcribe', {
|
||||
method: 'POST',
|
||||
body: formData
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
const error = await response.json();
|
||||
console.error('Transcription error:', error);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to send audio:', error);
|
||||
}
|
||||
}
|
||||
|
||||
// Event listeners
|
||||
startBtn.addEventListener('click', () => {
|
||||
console.log('Start button clicked');
|
||||
startRecording();
|
||||
});
|
||||
|
||||
stopBtn.addEventListener('click', () => {
|
||||
console.log('Stop button clicked');
|
||||
stopRecording();
|
||||
});
|
||||
|
||||
// Initial settings application
|
||||
updateDisplaySettings();
|
||||
|
||||
// Settings button
|
||||
settingsBtn.addEventListener('click', () => {
|
||||
window.location.href = 'settings.html';
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user