| #!/usr/bin/env python3 |
| """ |
| Streamlit app with embedded WebSocket server for VoiceCal WebRTC |
| Single-service approach for HuggingFace Spaces compatibility |
| """ |
|
|
| import streamlit as st |
| import asyncio |
| import threading |
| import json |
| import sys |
| from datetime import datetime |
| import os |
|
|
| # Configure Streamlit page |
| st.set_page_config( |
| page_title="VoiceCal - Voice Assistant", |
| page_icon="🎤", |
| layout="wide" |
| ) |
|
|
| def main(): |
| st.title("🎤📅 VoiceCal - Voice-Enabled AI Assistant") |
| st.markdown("**WebRTC Voice Integration Following unmute.sh Pattern**") |
| |
| # Service status dashboard |
| col1, col2, col3 = st.columns(3) |
| |
| with col1: |
| st.metric("🎤 VoiceCal", "Online", "✅") |
| st.metric("📡 WebSocket", "Embedded", "🔧") |
| |
| with col2: |
| st.metric("🧠 STT Service", "Ready", "✅") |
| st.metric("🔊 TTS Service", "Ready", "✅") |
| |
| with col3: |
| st.metric("🌐 Connection", "Direct", "⚡") |
| st.metric("📱 Pattern", "unmute.sh", "🎯") |
| |
| # Connection Status |
| st.success("🎯 **STT Service Connected**: `wss://pgits-stt-gpu-service.hf.space/ws/stt`") |
| |
| # WebRTC Integration Section |
| st.markdown("---") |
| st.header("🌐 WebRTC Voice Interface") |
| |
| # Simplified WebRTC interface that connects directly to STT service |
| webrtc_html = """ |
| <div id="voice-interface" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); padding: 20px; border-radius: 10px; margin: 20px 0;"> |
| <h3 style="color: white; margin-top: 0;">🎤 Voice Interface (Direct STT Connection)</h3> |
| |
| <div style="display: flex; gap: 10px; margin: 20px 0;"> |
| <button id="start-recording" style="background: #ff4757; color: white; border: none; padding: 10px 20px; border-radius: 5px; cursor: pointer;"> |
| 🎙️ Start Recording |
| </button> |
| <button id="stop-recording" style="background: #2f3542; color: white; border: none; padding: 10px 20px; border-radius: 5px; cursor: pointer;" disabled> |
| ⏹️ Stop Recording |
| </button> |
| <button id="test-connection" style="background: #5352ed; color: white; border: none; padding: 10px 20px; border-radius: 5px; cursor: pointer;"> |
| 🔗 Test STT Connection |
| </button> |
| </div> |
| |
| <div id="status" style="background: rgba(0,0,0,0.2); padding: 10px; border-radius: 5px; color: white; font-family: monospace;"> |
| Status: Ready to connect to STT service... |
| </div> |
| |
| <div id="transcription" style="background: rgba(255,255,255,0.9); padding: 15px; border-radius: 5px; margin-top: 10px; min-height: 50px;"> |
| <strong>Transcription:</strong> <span id="transcription-text">Ready for voice input...</span> |
| </div> |
| </div> |
|
|
| <script> |
| // Direct STT WebSocket Connection (unmute.sh Pattern) |
| class VoiceCalDirectSTT { |
| constructor() { |
| this.sttWebSocket = null; |
| this.mediaRecorder = null; |
| this.audioChunks = []; |
| this.isRecording = false; |
| this.clientId = 'voicecal-' + Math.random().toString(36).substr(2, 9); |
| // Connect to standalone WebSocket STT service v1.0.0 |
| this.sttWebSocketUrl = 'wss://pgits-stt-gpu-service.hf.space/ws/stt'; |
| |
| this.setupEventListeners(); |
| } |
| |
| setupEventListeners() { |
| document.getElementById('start-recording').addEventListener('click', () => { |
| this.startRecording(); |
| }); |
| |
| document.getElementById('stop-recording').addEventListener('click', () => { |
| this.stopRecording(); |
| }); |
| |
| document.getElementById('test-connection').addEventListener('click', () => { |
| this.testSTTConnection(); |
| }); |
| } |
| |
| async testSTTConnection() { |
| this.updateStatus('🔗 Testing WebSocket STT service connection...'); |
| |
| try { |
| // Test WebSocket connection to standalone STT service v1.0.0 |
| const testSocket = new WebSocket(this.sttWebSocketUrl); |
| |
| testSocket.onopen = () => { |
| this.updateStatus('✅ STT WebSocket connection successful!'); |
| console.log('STT service WebSocket is ready'); |
| testSocket.close(); |
| }; |
| |
| testSocket.onerror = (error) => { |
| this.updateStatus('❌ STT WebSocket connection failed'); |
| console.error('STT WebSocket error:', error); |
| }; |
| |
| } catch (error) { |
| this.updateStatus('❌ Failed to test STT WebSocket connection'); |
| console.error('STT connection test error:', error); |
| } |
| } |
| |
| async connectToSTT() { |
| this.updateStatus('🔌 Connecting to STT service...'); |
| |
| try { |
| this.sttWebSocket = new WebSocket(this.sttWebSocketUrl); |
| |
| this.sttWebSocket.onopen = () => { |
| this.updateStatus('✅ Connected to STT service - Ready for audio'); |
| }; |
| |
| this.sttWebSocket.onmessage = (event) => { |
| const data = JSON.parse(event.data); |
| this.handleSTTResponse(data); |
| }; |
| |
| this.sttWebSocket.onclose = () => { |
| this.updateStatus('🔌 STT connection closed'); |
| }; |
| |
| this.sttWebSocket.onerror = (error) => { |
| this.updateStatus('❌ STT connection error'); |
| console.error('STT WebSocket error:', error); |
| }; |
| |
| return true; |
| } catch (error) { |
| this.updateStatus('❌ Failed to connect to STT service'); |
| console.error('STT connection failed:', error); |
| return false; |
| } |
| } |
| |
| handleSTTResponse(data) { |
| console.log('STT WebSocket Response:', data); |
| |
| switch(data.type) { |
| case 'stt_connection_confirmed': |
| this.updateStatus(`✅ ${data.service} v${data.version} connected - ${data.model} ready`); |
| break; |
| |
| case 'stt_transcription_complete': |
| this.updateTranscription(data.transcription); |
| const processingTime = data.timing?.processing_time || 'unknown'; |
| this.updateStatus(`✅ Transcription completed (${processingTime}s)`); |
| break; |
| |
| case 'stt_transcription_error': |
| this.updateStatus(`❌ Transcription error: ${data.error}`); |
| break; |
| |
| case 'pong': |
| console.log('STT service pong received'); |
| break; |
| |
| default: |
| console.log('Unknown STT response type:', data.type); |
| } |
| } |
| |
| async startRecording() { |
| // Connect to STT service first |
| const connected = await this.connectToSTT(); |
| if (!connected) { |
| return; |
| } |
| |
| try { |
| const stream = await navigator.mediaDevices.getUserMedia({ |
| audio: { |
| sampleRate: 16000, |
| channelCount: 1, |
| echoCancellation: true, |
| noiseSuppression: true |
| } |
| }); |
| |
| // unmute.sh pattern: WebM format with small chunks |
| this.mediaRecorder = new MediaRecorder(stream, { |
| mimeType: 'audio/webm;codecs=opus' |
| }); |
| |
| this.audioChunks = []; |
| |
| this.mediaRecorder.ondataavailable = (event) => { |
| if (event.data.size > 0) { |
| this.audioChunks.push(event.data); |
| } |
| }; |
| |
| this.mediaRecorder.onstop = () => { |
| this.processRecordedAudio(); |
| stream.getTracks().forEach(track => track.stop()); |
| }; |
| |
| // Start recording |
| this.mediaRecorder.start(); |
| this.isRecording = true; |
| |
| // Update UI |
| document.getElementById('start-recording').disabled = true; |
| document.getElementById('stop-recording').disabled = false; |
| this.updateStatus('🎙️ Recording audio - Speak now...'); |
| |
| } catch (error) { |
| console.error('Recording failed:', error); |
| this.updateStatus('❌ Microphone access failed'); |
| } |
| } |
| |
| stopRecording() { |
| if (this.mediaRecorder && this.isRecording) { |
| this.mediaRecorder.stop(); |
| this.isRecording = false; |
| |
| // Update UI |
| document.getElementById('start-recording').disabled = false; |
| document.getElementById('stop-recording').disabled = true; |
| this.updateStatus('⏹️ Recording stopped - Processing audio...'); |
| } |
| } |
| |
| async processRecordedAudio() { |
| if (this.audioChunks.length === 0) { |
| this.updateStatus('❌ No audio data recorded'); |
| return; |
| } |
| |
| try { |
| this.updateStatus('⚙️ Processing audio with WebSocket STT...'); |
| |
| // Combine all audio chunks (unmute.sh pattern) |
| const audioBlob = new Blob(this.audioChunks, { type: 'audio/webm' }); |
| |
| // Send to STT service via WebSocket |
| await this.sendAudioViaWebSocket(audioBlob); |
| |
| } catch (error) { |
| console.error('Audio processing failed:', error); |
| this.updateStatus('❌ Audio processing failed'); |
| } |
| } |
| |
| async sendAudioViaWebSocket(audioBlob) { |
| try { |
| if (!this.sttWebSocket || this.sttWebSocket.readyState !== WebSocket.OPEN) { |
| this.updateStatus('❌ WebSocket not connected'); |
| return; |
| } |
| |
| this.updateStatus('📤 Sending audio to STT via WebSocket...'); |
| |
| // Convert audio blob to base64 for WebSocket transmission |
| const arrayBuffer = await audioBlob.arrayBuffer(); |
| const base64Audio = btoa(String.fromCharCode(...new Uint8Array(arrayBuffer))); |
| |
| // Send audio data via WebSocket to standalone STT service v1.0.0 |
| this.sttWebSocket.send(JSON.stringify({ |
| type: "stt_audio_chunk", |
| audio_data: base64Audio, |
| language: "auto", |
| model_size: "base", |
| client_id: this.clientId |
| })); |
| |
| console.log('Audio sent via WebSocket:', base64Audio.length, 'bytes'); |
| |
| } catch (error) { |
| console.error('WebSocket audio transmission failed:', error); |
| this.updateStatus('❌ WebSocket transmission failed: ' + error.message); |
| } |
| } |
| |
| /* COMMENTED OUT: HTTP API fallback - focusing on WebSocket-only connectivity |
| async sendAudioToSTTAPI(audioBlob) { |
| try { |
| this.updateStatus('📤 Sending audio to STT via Gradio API...'); |
| |
| // Create FormData for Gradio API |
| const formData = new FormData(); |
| formData.append('data', audioBlob, 'audio.webm'); |
| |
| // Gradio API expects this format: data: ["auto", "base", true] |
| formData.append('data', JSON.stringify(["auto", "base", true])); |
| |
| // Send to Gradio API |
| const response = await fetch('https://pgits-stt-gpu-service.hf.space/api/predict', { |
| method: 'POST', |
| body: formData |
| }); |
| |
| if (response.ok) { |
| const result = await response.json(); |
| console.log('STT API Response:', result); |
| |
| // Extract transcription from Gradio response format |
| if (result && result.data && result.data.length > 1) { |
| const transcription = result.data[1]; // [status, transcription, timestamps] |
| if (transcription && transcription.trim()) { |
| this.updateTranscription(transcription); |
| this.updateStatus('✅ Transcription completed via Gradio API'); |
| } else { |
| this.updateStatus('⚠️ No transcription received'); |
| } |
| } else { |
| this.updateStatus('❌ Unexpected API response format'); |
| console.error('Unexpected response:', result); |
| } |
| } else { |
| throw new Error(`HTTP ${response.status}: ${response.statusText}`); |
| } |
| |
| } catch (error) { |
| console.error('STT API request failed:', error); |
| this.updateStatus('❌ STT API request failed: ' + error.message); |
| } |
| } |
| */ // END COMMENTED OUT HTTP API fallback |
| |
| updateStatus(message) { |
| document.getElementById('status').innerHTML = `Status: ${message}`; |
| } |
| |
| updateTranscription(text) { |
| document.getElementById('transcription-text').innerHTML = text; |
| } |
| } |
| |
| // Initialize when DOM is ready |
| if (document.readyState === 'loading') { |
| document.addEventListener('DOMContentLoaded', () => { |
| window.voiceCalDirectSTT = new VoiceCalDirectSTT(); |
| }); |
| } else { |
| window.voiceCalDirectSTT = new VoiceCalDirectSTT(); |
| } |
| </script> |
| """ |
| |
| # Render the WebRTC interface |
| st.components.v1.html(webrtc_html, height=500) |
| |
| # Technical Information |
| st.markdown("---") |
| st.header("🔧 Technical Details") |
| |
| col1, col2 = st.columns(2) |
| |
| with col1: |
| st.subheader("📡 WebSocket Connection") |
| st.code(""" |
| STT WebSocket: wss://pgits-stt-gpu-service.hf.space/ws/stt |
| Audio Format: WebM/Opus (16kHz, Mono) |
| Service: Standalone STT v1.0.0 |
| Pattern: unmute.sh methodology |
| Connection: Pure WebSocket (no fallbacks) |
| """) |
| |
| with col2: |
| st.subheader("🎯 Features") |
| st.write("✅ Pure WebSocket STT connection") |
| st.write("✅ WebRTC MediaRecorder integration") |
| st.write("✅ unmute.sh audio processing") |
| st.write("✅ Real-time voice transcription") |
| st.write("✅ Standalone STT service v1.0.0") |
| st.write("✅ No HTTP API fallbacks") |
| st.write("✅ Base64 audio transmission") |
| |
| # Connection Status |
| st.subheader("🔗 Service Status") |
| st.json({ |
| "stt_websocket": "wss://pgits-stt-gpu-service.hf.space/ws/stt", |
| "stt_service": "Standalone WebSocket STT v1.0.0", |
| "connection_type": "pure_websocket", |
| "audio_format": "WebM/Opus 16kHz", |
| "transmission": "Base64 encoded", |
| "pattern": "unmute.sh WebSocket methodology", |
| "fallbacks": "disabled", |
| "status": "Ready for WebSocket voice interaction" |
| }) |
| |
| # Footer |
| st.markdown("---") |
| st.markdown("🚀 **VoiceCal WebSocket STT** - Pure WebSocket WebRTC with standalone STT service v1.0.0") |
|
|
| if __name__ == "__main__": |
| main() |
