templates/websocket_demo.html

{% extends "base.html" %}

{% block title %}{{ _('websocket.title', 'WebSocket Streaming Demo') }} - TTSFM{% endblock %}

{% block content %}
<div class="container mt-5">
    <div class="row">
        <div class="col-lg-10 mx-auto">
            <h1 class="text-center mb-4">
                <i class="fas fa-bolt text-warning"></i>
                {{ _('websocket.title', 'WebSocket Streaming Demo') }}
            </h1>
            
            <!-- Connection Status -->
            <div class="alert alert-info" id="connection-status">
                <i class="fas fa-plug me-2"></i>
                <span id="status-text">Connecting to WebSocket server...</span>
            </div>
            
            <!-- Input Form -->
            <div class="card shadow-sm mb-4">
                <div class="card-body">
                    <h5 class="card-title">{{ _('playground.generate_speech', 'Generate Speech') }}</h5>
                    
                    <form id="streaming-form">
                        <div class="mb-3">
                            <label for="text-input" class="form-label">
                                {{ _('playground.text_input', 'Text to Convert') }}
                            </label>
                            <textarea 
                                class="form-control" 
                                id="text-input" 
                                rows="4" 
                                maxlength="4096"
                                placeholder="{{ _('playground.text_placeholder', 'Enter your text here...') }}"
                            >Experience the future of text-to-speech with real-time WebSocket streaming! This innovative feature delivers audio chunks as they're generated, providing a more responsive and engaging user experience.</textarea>
                            <div class="form-text">
                                <i class="fas fa-info-circle me-1"></i>
                                Streaming will split text into chunks for real-time delivery
                            </div>
                        </div>
                        
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label for="voice-select" class="form-label">
                                    {{ _('playground.voice', 'Voice') }}
                                </label>
                                <select class="form-select" id="voice-select">
                                    <option value="alloy">Alloy</option>
                                    <option value="echo">Echo</option>
                                    <option value="fable">Fable</option>
                                    <option value="onyx">Onyx</option>
                                    <option value="nova">Nova</option>
                                    <option value="shimmer">Shimmer</option>
                                </select>
                            </div>
                            
                            <div class="col-md-6 mb-3">
                                <label for="format-select" class="form-label">
                                    {{ _('playground.format', 'Audio Format') }}
                                </label>
                                <select class="form-select" id="format-select">
                                    <option value="mp3">MP3</option>
                                    <option value="wav">WAV</option>
                                    <option value="opus">OPUS</option>
                                </select>
                            </div>
                        </div>
                        
                        <div class="d-grid gap-2 d-md-flex justify-content-md-end">
                            <button type="submit" class="btn btn-primary" id="stream-btn">
                                <i class="fas fa-bolt me-2"></i>
                                Start Streaming
                            </button>
                            <button type="button" class="btn btn-danger" id="cancel-btn" style="display: none;">
                                <i class="fas fa-stop me-2"></i>
                                Cancel
                            </button>
                        </div>
                    </form>
                </div>
            </div>
            
            <!-- Progress Section -->
            <div class="card shadow-sm mb-4" id="progress-section" style="display: none;">
                <div class="card-body">
                    <h5 class="card-title">Streaming Progress</h5>
                    
                    <div class="progress mb-3" style="height: 25px;">
                        <div 
                            class="progress-bar progress-bar-striped progress-bar-animated" 
                            id="progress-bar"
                            role="progressbar" 
                            style="width: 0%"
                        >
                            <span id="progress-text">0%</span>
                        </div>
                    </div>
                    
                    <div class="row text-center">
                        <div class="col-md-4">
                            <h6>Chunks Received</h6>
                            <p class="h4"><span id="chunks-received">0</span> / <span id="total-chunks">0</span></p>
                        </div>
                        <div class="col-md-4">
                            <h6>Data Transferred</h6>
                            <p class="h4" id="data-transferred">0 KB</p>
                        </div>
                        <div class="col-md-4">
                            <h6>Generation Time</h6>
                            <p class="h4" id="generation-time">0.0s</p>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Audio Chunks Display -->
            <div class="card shadow-sm mb-4" id="chunks-section" style="display: none;">
                <div class="card-body">
                    <h5 class="card-title">Audio Chunks</h5>
                    <div id="chunks-container" class="row g-2">
                        <!-- Chunks will be added here dynamically -->
                    </div>
                </div>
            </div>
            
            <!-- Final Audio Player -->
            <div class="card shadow-sm" id="audio-section" style="display: none;">
                <div class="card-body">
                    <h5 class="card-title">Generated Audio</h5>
                    <audio id="audio-player" controls class="w-100"></audio>
                    <div class="mt-2">
                        <button class="btn btn-success" id="download-btn">
                            <i class="fas fa-download me-2"></i>
                            Download Audio
                        </button>
                    </div>
                </div>
            </div>
            
            <!-- Info Section -->
            <div class="card shadow-sm mt-4">
                <div class="card-body">
                    <h5 class="card-title">
                        <i class="fas fa-info-circle text-info me-2"></i>
                        About WebSocket Streaming
                    </h5>
                    <p>
                        This demo showcases real-time audio streaming using WebSockets. Instead of waiting 
                        for the entire audio to be generated, you receive chunks as they're processed, 
                        providing immediate feedback and a more responsive experience.
                    </p>
                    <ul>
                        <li><strong>Lower Perceived Latency:</strong> Start receiving audio before generation completes</li>
                        <li><strong>Progress Tracking:</strong> Real-time updates on generation progress</li>
                        <li><strong>Cancellable:</strong> Stop generation mid-stream if needed</li>
                        <li><strong>Efficient:</strong> Stream chunks as they're ready, no waiting</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Include Socket.IO -->
<script src="https://cdn.socket.io/4.6.0/socket.io.min.js"></script>
<!-- Include our WebSocket client -->
<script src="{{ url_for('static', filename='js/websocket-tts.js') }}"></script>

<script>
// Initialize WebSocket client
let wsClient = null;
let currentRequestId = null;
let startTime = null;

// Initialize on page load
document.addEventListener('DOMContentLoaded', function() {
    // Create WebSocket client
    wsClient = new WebSocketTTSClient({
        debug: true,
        onConnect: () => {
            updateConnectionStatus('connected');
        },
        onDisconnect: () => {
            updateConnectionStatus('disconnected');
        },
        onError: (error) => {
            updateConnectionStatus('error');
            showError(`Connection error: ${error.message}`);
        }
    });
    
    // Form submission
    document.getElementById('streaming-form').addEventListener('submit', handleStreamingSubmit);
    
    // Cancel button
    document.getElementById('cancel-btn').addEventListener('click', handleCancel);
});

function updateConnectionStatus(status) {
    const statusEl = document.getElementById('connection-status');
    const statusText = document.getElementById('status-text');
    
    statusEl.className = 'alert';
    
    switch(status) {
        case 'connected':
            statusEl.classList.add('alert-success');
            statusText.innerHTML = '<i class="fas fa-check-circle me-2"></i>Connected to WebSocket server';
            break;
        case 'disconnected':
            statusEl.classList.add('alert-warning');
            statusText.innerHTML = '<i class="fas fa-exclamation-triangle me-2"></i>Disconnected from server';
            break;
        case 'error':
            statusEl.classList.add('alert-danger');
            statusText.innerHTML = '<i class="fas fa-times-circle me-2"></i>Connection error';
            break;
        default:
            statusEl.classList.add('alert-info');
            statusText.innerHTML = '<i class="fas fa-plug me-2"></i>Connecting...';
    }
}

async function handleStreamingSubmit(e) {
    e.preventDefault();
    
    if (!wsClient || !wsClient.isConnected()) {
        showError('WebSocket not connected. Please refresh the page.');
        return;
    }
    
    // Get form values
    const text = document.getElementById('text-input').value.trim();
    const voice = document.getElementById('voice-select').value;
    const format = document.getElementById('format-select').value;
    
    if (!text) {
        showError('Please enter some text to convert.');
        return;
    }
    
    // Reset UI
    resetUI();
    
    // Show progress section
    document.getElementById('progress-section').style.display = 'block';
    document.getElementById('chunks-section').style.display = 'block';
    document.getElementById('stream-btn').disabled = true;
    document.getElementById('cancel-btn').style.display = 'inline-block';
    
    startTime = Date.now();
    
    try {
        const result = await wsClient.generateSpeech(text, {
            voice: voice,
            format: format,
            chunkSize: 512, // Smaller chunks for more updates
            onStart: (data) => {
                currentRequestId = data.request_id;
                console.log('Stream started:', data);
            },
            onProgress: (progress) => {
                updateProgress(progress);
            },
            onChunk: (chunk) => {
                handleAudioChunk(chunk);
            },
            onComplete: (result) => {
                handleStreamComplete(result);
            },
            onError: (error) => {
                showError(`Streaming error: ${error.message}`);
            }
        });
        
        console.log('Streaming completed:', result);
        
    } catch (error) {
        showError(`Failed to generate speech: ${error.message}`);
        resetUI();
    }
}

function updateProgress(progress) {
    const progressBar = document.getElementById('progress-bar');
    const progressText = document.getElementById('progress-text');
    const chunksReceived = document.getElementById('chunks-received');
    const totalChunks = document.getElementById('total-chunks');
    const generationTime = document.getElementById('generation-time');
    
    progressBar.style.width = `${progress.progress}%`;
    progressText.textContent = `${progress.progress}%`;
    chunksReceived.textContent = progress.chunksCompleted;
    totalChunks.textContent = progress.totalChunks;
    
    if (startTime) {
        const elapsed = (Date.now() - startTime) / 1000;
        generationTime.textContent = `${elapsed.toFixed(1)}s`;
    }
}

function handleAudioChunk(chunk) {
    const container = document.getElementById('chunks-container');
    
    // Create chunk visualization
    const chunkEl = document.createElement('div');
    chunkEl.className = 'col-auto';
    chunkEl.innerHTML = `
        <div class="badge bg-primary p-2" title="Chunk ${chunk.chunkIndex + 1}">
            <i class="fas fa-music me-1"></i>
            ${chunk.chunkIndex + 1}
            <small class="d-block">${(chunk.audioData.byteLength / 1024).toFixed(1)}KB</small>
        </div>
    `;
    
    container.appendChild(chunkEl);
    
    // Update data transferred
    const currentData = parseFloat(document.getElementById('data-transferred').textContent);
    const newData = currentData + (chunk.audioData.byteLength / 1024);
    document.getElementById('data-transferred').textContent = `${newData.toFixed(1)} KB`;
}

function handleStreamComplete(result) {
    // Create blob from combined audio
    const blob = new Blob([result.audioData], { type: `audio/${result.format}` });
    const url = URL.createObjectURL(blob);
    
    // Set up audio player
    const audioPlayer = document.getElementById('audio-player');
    audioPlayer.src = url;
    
    // Show audio section
    document.getElementById('audio-section').style.display = 'block';
    
    // Set up download button
    document.getElementById('download-btn').onclick = () => {
        const a = document.createElement('a');
        a.href = url;
        a.download = `tts_stream_${Date.now()}.${result.format}`;
        a.click();
    };
    
    // Update final stats
    document.getElementById('generation-time').textContent = `${(result.generationTime / 1000).toFixed(2)}s`;
    
    // Reset buttons
    document.getElementById('stream-btn').disabled = false;
    document.getElementById('cancel-btn').style.display = 'none';
    
    // Update progress bar to success
    const progressBar = document.getElementById('progress-bar');
    progressBar.classList.remove('progress-bar-animated');
    progressBar.classList.add('bg-success');
}

function handleCancel() {
    if (currentRequestId) {
        wsClient.cancelStream(currentRequestId);
        showInfo('Stream cancelled');
        resetUI();
    }
}

function resetUI() {
    document.getElementById('progress-section').style.display = 'none';
    document.getElementById('chunks-section').style.display = 'none';
    document.getElementById('audio-section').style.display = 'none';
    document.getElementById('stream-btn').disabled = false;
    document.getElementById('cancel-btn').style.display = 'none';
    document.getElementById('chunks-container').innerHTML = '';
    document.getElementById('progress-bar').style.width = '0%';
    document.getElementById('progress-bar').className = 'progress-bar progress-bar-striped progress-bar-animated';
    document.getElementById('data-transferred').textContent = '0 KB';
    currentRequestId = null;
    startTime = null;
}

function showError(message) {
    console.error(message);
    // You could add a toast notification here
}

function showInfo(message) {
    console.info(message);
    // You could add a toast notification here
}
</script>
{% endblock %}