Move TTS server status from frontend to admin dashboard
- Removed TTS server status popup from main frontend interface - Commented out checkTtsServer() function and all its calls - Removed TTS configuration UI elements from index.html - Added comprehensive TTS server monitoring to admin dashboard: - Configuration status (URL, API key) - Server health monitoring - Available voices display - Usage statistics and performance metrics - Real-time status updates - Enhanced system health check to include TTS server - Created dedicated /api/tts/status endpoint for detailed info The TTS functionality remains fully operational for users, but status monitoring is now exclusive to the admin dashboard for cleaner UX. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -3,9 +3,9 @@ import {
|
||||
TranscriptionResponse,
|
||||
TranslationResponse,
|
||||
TTSResponse,
|
||||
TTSServerStatus,
|
||||
TTSConfigUpdate,
|
||||
TTSConfigResponse,
|
||||
// TTSServerStatus, // Moved to admin dashboard
|
||||
// TTSConfigUpdate, // Moved to admin dashboard
|
||||
// TTSConfigResponse, // Moved to admin dashboard
|
||||
TranslationRequest,
|
||||
TTSRequest,
|
||||
PushPublicKeyResponse,
|
||||
@@ -143,11 +143,12 @@ function initApp(): void {
|
||||
const progressContainer = document.getElementById('progressContainer') as HTMLDivElement;
|
||||
const progressBar = document.getElementById('progressBar') as HTMLDivElement;
|
||||
const audioPlayer = document.getElementById('audioPlayer') as HTMLAudioElement;
|
||||
const ttsServerAlert = document.getElementById('ttsServerAlert') as HTMLDivElement;
|
||||
const ttsServerMessage = document.getElementById('ttsServerMessage') as HTMLSpanElement;
|
||||
const ttsServerUrl = document.getElementById('ttsServerUrl') as HTMLInputElement;
|
||||
const ttsApiKey = document.getElementById('ttsApiKey') as HTMLInputElement;
|
||||
const updateTtsServer = document.getElementById('updateTtsServer') as HTMLButtonElement;
|
||||
// TTS server UI elements - moved to admin dashboard
|
||||
// const ttsServerAlert = document.getElementById('ttsServerAlert') as HTMLDivElement;
|
||||
// const ttsServerMessage = document.getElementById('ttsServerMessage') as HTMLSpanElement;
|
||||
// const ttsServerUrl = document.getElementById('ttsServerUrl') as HTMLInputElement;
|
||||
// const ttsApiKey = document.getElementById('ttsApiKey') as HTMLInputElement;
|
||||
// const updateTtsServer = document.getElementById('updateTtsServer') as HTMLButtonElement;
|
||||
const loadingOverlay = document.getElementById('loadingOverlay') as HTMLDivElement;
|
||||
const loadingText = document.getElementById('loadingText') as HTMLParagraphElement;
|
||||
|
||||
@@ -157,7 +158,7 @@ function initApp(): void {
|
||||
let currentAudioHandler: AudioBlobHandler | null = null;
|
||||
let currentSourceText: string = '';
|
||||
let currentTranslationText: string = '';
|
||||
let currentTtsServerUrl: string = '';
|
||||
// let currentTtsServerUrl: string = ''; // Moved to admin dashboard
|
||||
|
||||
// Performance monitoring
|
||||
const performanceMonitor = PerformanceMonitor.getInstance();
|
||||
@@ -167,7 +168,8 @@ function initApp(): void {
|
||||
let multiSpeakerEnabled = false;
|
||||
|
||||
// Check TTS server status on page load
|
||||
checkTtsServer();
|
||||
// Moved to admin dashboard - commenting out user-facing TTS status check
|
||||
// checkTtsServer();
|
||||
|
||||
// Check for saved translations in IndexedDB
|
||||
loadSavedTranslations();
|
||||
@@ -293,7 +295,7 @@ function initApp(): void {
|
||||
<div class="conversation-entry">
|
||||
<div class="conversation-speaker">
|
||||
<span class="conversation-speaker-avatar" style="background-color: ${entry.speakerColor}">
|
||||
${entry.speakerName.substr(0, 2).toUpperCase()}
|
||||
${entry.speakerName.substring(0, 2).toUpperCase()}
|
||||
</span>
|
||||
<span style="color: ${entry.speakerColor}">${entry.speakerName}</span>
|
||||
<span class="conversation-time">${new Date(entry.timestamp).toLocaleTimeString()}</span>
|
||||
@@ -314,6 +316,8 @@ function initApp(): void {
|
||||
}
|
||||
|
||||
// Update TTS server URL and API key
|
||||
// Moved to admin dashboard - commenting out user-facing TTS configuration update
|
||||
/*
|
||||
updateTtsServer.addEventListener('click', function() {
|
||||
const newUrl = ttsServerUrl.value.trim();
|
||||
const newApiKey = ttsApiKey.value.trim();
|
||||
@@ -359,7 +363,8 @@ function initApp(): void {
|
||||
// Save URL to localStorage but not the API key for security
|
||||
if (newUrl) localStorage.setItem('ttsServerUrl', newUrl);
|
||||
// Check TTS server with new configuration
|
||||
checkTtsServer();
|
||||
// Moved to admin dashboard - commenting out user-facing TTS status check
|
||||
// checkTtsServer();
|
||||
} else {
|
||||
alert('Failed to update TTS configuration: ' + data.error);
|
||||
}
|
||||
@@ -369,6 +374,7 @@ function initApp(): void {
|
||||
alert('Failed to update TTS configuration. See console for details.');
|
||||
});
|
||||
});
|
||||
*/
|
||||
|
||||
// Make sure target language is different from source
|
||||
if (targetLanguage.options[0].value === sourceLanguage.value) {
|
||||
@@ -1093,15 +1099,16 @@ function initApp(): void {
|
||||
statusIndicator.textContent = 'TTS failed';
|
||||
|
||||
// Show TTS server alert with error message
|
||||
ttsServerAlert.classList.remove('d-none');
|
||||
ttsServerAlert.classList.remove('alert-success');
|
||||
ttsServerAlert.classList.add('alert-warning');
|
||||
ttsServerMessage.textContent = data.error || 'TTS failed';
|
||||
// Moved to admin dashboard - commenting out user-facing TTS server alert
|
||||
// ttsServerAlert.classList.remove('d-none');
|
||||
// ttsServerAlert.classList.remove('alert-success');
|
||||
// ttsServerAlert.classList.add('alert-warning');
|
||||
// ttsServerMessage.textContent = data.error || 'TTS failed';
|
||||
|
||||
alert('Failed to play audio: ' + data.error);
|
||||
|
||||
// Check TTS server status again
|
||||
checkTtsServer();
|
||||
// checkTtsServer();
|
||||
}
|
||||
} catch (error: any) {
|
||||
hideProgress();
|
||||
@@ -1115,10 +1122,11 @@ function initApp(): void {
|
||||
connectionUI.showTemporaryMessage('Audio generation queued for when connection returns', 'warning');
|
||||
|
||||
// Show TTS server alert
|
||||
ttsServerAlert.classList.remove('d-none');
|
||||
ttsServerAlert.classList.remove('alert-success');
|
||||
ttsServerAlert.classList.add('alert-warning');
|
||||
ttsServerMessage.textContent = 'Connection error - request queued';
|
||||
// Moved to admin dashboard - commenting out user-facing TTS server alert
|
||||
// ttsServerAlert.classList.remove('d-none');
|
||||
// ttsServerAlert.classList.remove('alert-success');
|
||||
// ttsServerAlert.classList.add('alert-warning');
|
||||
// ttsServerMessage.textContent = 'Connection error - request queued';
|
||||
} else if (!navigator.onLine) {
|
||||
statusIndicator.textContent = 'Offline - audio generation unavailable';
|
||||
alert('Audio generation requires an internet connection.');
|
||||
@@ -1126,10 +1134,11 @@ function initApp(): void {
|
||||
statusIndicator.textContent = 'TTS failed';
|
||||
|
||||
// Show TTS server alert
|
||||
ttsServerAlert.classList.remove('d-none');
|
||||
ttsServerAlert.classList.remove('alert-success');
|
||||
ttsServerAlert.classList.add('alert-warning');
|
||||
ttsServerMessage.textContent = 'Failed to connect to TTS server';
|
||||
// Moved to admin dashboard - commenting out user-facing TTS server alert
|
||||
// ttsServerAlert.classList.remove('d-none');
|
||||
// ttsServerAlert.classList.remove('alert-success');
|
||||
// ttsServerAlert.classList.add('alert-warning');
|
||||
// ttsServerMessage.textContent = 'Failed to connect to TTS server';
|
||||
}
|
||||
}
|
||||
};
|
||||
@@ -1161,6 +1170,8 @@ function initApp(): void {
|
||||
});
|
||||
|
||||
// Function to check TTS server status
|
||||
// Moved to admin dashboard - commenting out user-facing TTS status check function
|
||||
/*
|
||||
function checkTtsServer(): void {
|
||||
fetch('/check_tts_server')
|
||||
.then(response => response.json() as Promise<TTSServerStatus>)
|
||||
@@ -1201,6 +1212,7 @@ function initApp(): void {
|
||||
ttsServerMessage.textContent = 'Failed to check TTS server status.';
|
||||
});
|
||||
}
|
||||
*/
|
||||
|
||||
// Progress indicator functions
|
||||
function showProgress(): void {
|
||||
@@ -1331,7 +1343,8 @@ function initApp(): void {
|
||||
queue.clearStuckRequests();
|
||||
|
||||
// Re-check TTS server
|
||||
checkTtsServer();
|
||||
// Moved to admin dashboard - commenting out user-facing TTS status check
|
||||
// checkTtsServer();
|
||||
|
||||
// Try to reload service worker if available
|
||||
if ('serviceWorker' in navigator) {
|
||||
|
||||
Reference in New Issue
Block a user