Spaces:

JayeshC137
/

russian-voice-baburu

Sleeping

App Files Files Community

JayeshC137 commited on Apr 10

Commit

61f8a71

verified ·

1 Parent(s): 0ca4575

Upload voice_chat.html

Browse files

Files changed (1) hide show

templates/voice_chat.html +373 -0

templates/voice_chat.html ADDED Viewed

	@@ -0,0 +1,373 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Бабуру | Voice Chat Interface</title>
+    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
+    <style>
+        body {
+            font-family: 'Arial', sans-serif;
+            background-color: #f5f5f5;
+        }
+        .chat-container {
+            max-width: 800px;
+            margin: 50px auto;
+            border-radius: 10px;
+            overflow: hidden;
+            box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
+        }
+        .chat-header {
+            background: linear-gradient(135deg, #6e48aa 0%, #9d50bb 100%);
+            color: white;
+            padding: 15px 20px;
+            font-weight: bold;
+            font-size: 1.2em;
+        }
+        .chat-messages {
+            height: 400px;
+            overflow-y: auto;
+            padding: 15px;
+            background-color: white;
+        }
+        .message {
+            margin-bottom: 15px;
+            padding: 10px 15px;
+            border-radius: 20px;
+            max-width: 80%;
+            position: relative;
+        }
+        .user-message {
+            background-color: #e3f2fd;
+            color: #333;
+            margin-left: auto;
+            border-bottom-right-radius: 5px;
+        }
+        .bot-message {
+            background-color: #f3e5f5;
+            color: #333;
+            margin-right: auto;
+            border-bottom-left-radius: 5px;
+        }
+        .translation {
+            font-size: 0.85em;
+            margin-top: 5px;
+            font-style: italic;
+            color: #666;
+        }
+        .button-container {
+            display: flex;
+            justify-content: center;
+            gap: 10px;
+            padding: 15px;
+            background-color: white;
+            border-top: 1px solid #eee;
+        }
+        .button {
+            background-color: #9d50bb;
+            color: white;
+            border: none;
+            border-radius: 20px;
+            padding: 10px 20px;
+            cursor: pointer;
+            transition: background-color 0.3s;
+            font-size: 1.1em;
+        }
+        .button:hover {
+            background-color: #6e48aa;
+        }
+        .button:disabled {
+            background-color: #cccccc;
+            cursor: not-allowed;
+        }
+        .record-button {
+            background-color: #e74c3c;
+        }
+        .record-button.recording {
+            animation: pulse 1.5s infinite;
+        }
+        @keyframes pulse {
+            0% { background-color: #e74c3c; }
+            50% { background-color: #c0392b; }
+            100% { background-color: #e74c3c; }
+        }
+        .loading {
+            display: none;
+            text-align: center;
+            padding: 10px;
+            color: #666;
+        }
+        .loading span {
+            display: inline-block;
+            animation: dots 1.4s infinite;
+        }
+        @keyframes dots {
+            0%, 20% { transform: translateY(0); }
+            40% { transform: translateY(-5px); }
+            60% { transform: translateY(0); }
+        }
+        .clown-icon {
+            font-size: 1.5em;
+            margin-right: 10px;
+        }
+        .audio-player {
+            width: 100%;
+            margin-top: 5px;
+        }
+        .status-indicator {
+            text-align: center;
+            color: #666;
+            font-style: italic;
+            margin-top: 5px;
+            min-height: 20px;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <div class="chat-container">
+            <div class="chat-header d-flex justify-content-between align-items-center">
+                <div>
+                    <span class="clown-icon">🤡</span> Бабуру | Voice Chat Interface
+                </div>
+            </div>
+            <div class="chat-messages" id="chat-messages">
+                <!-- Messages will be added here -->
+            </div>
+            <div class="loading" id="loading">
+                <span>●</span><span>●</span><span>●</span>
+            </div>
+            <div class="button-container">
+                <button id="record-button" class="button record-button">
+                    <i class="fa fa-microphone"></i> Speak to Baburu
+                </button>
+            </div>
+            <div class="status-indicator" id="status-indicator"></div>
+        </div>
+        <div class="mt-3 text-center">
+            <small class="text-muted">For best results, use Chrome and allow microphone access</small>
+        </div>
+    </div>
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            // DOM elements
+            const chatMessages = document.getElementById('chat-messages');
+            const loading = document.getElementById('loading');
+            const recordButton = document.getElementById('record-button');
+            const statusIndicator = document.getElementById('status-indicator');
+            // Speech recognition variables
+            let recognition;
+            let isListening = false;
+            let recognitionTimeout;
+            // Initialize with welcome message
+            initGreeting();
+            // Button event listeners
+            recordButton.addEventListener('click', toggleSpeechRecognition);
+            // Initialize Web Speech API
+            setupWebSpeechAPI();
+            function initGreeting() {
+                // Add initial greeting
+                fetch('/api/call', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({})
+                })
+                .then(response => response.json())
+                .then(data => {
+                    addBotMessage(data.response, data.translated_response, data.audio_url);
+                })
+                .catch(error => console.error('Error:', error));
+            }
+            function setupWebSpeechAPI() {
+                // Check if Web Speech API is supported
+                if (!('webkitSpeechRecognition' in window) && !('SpeechRecognition' in window)) {
+                    statusIndicator.textContent = 'Speech recognition is not supported in your browser. Try using Chrome.';
+                    recordButton.disabled = true;
+                    return;
+                }
+                // Create speech recognition object
+                const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
+                recognition = new SpeechRecognition();
+                // Configure recognition
+                recognition.continuous = false;
+                recognition.interimResults = false;
+                recognition.lang = 'ru-RU'; // Default to Russian
+                // Set up event handlers
+                recognition.onstart = function() {
+                    statusIndicator.textContent = 'Listening... Speak now in Russian or English';
+                    recordButton.classList.add('recording');
+                    recordButton.textContent = 'Stop Listening';
+                    isListening = true;
+                };
+                recognition.onresult = function(event) {
+                    // Get the transcript
+                    const transcript = event.results[0][0].transcript;
+                    const confidence = event.results[0][0].confidence;
+                    // Log for debugging
+                    console.log(`Recognized: "${transcript}" (Confidence: ${(confidence * 100).toFixed(1)}%)`);
+                    // Add user message
+                    const userMessage = addMessage(transcript, 'user');
+                    // Process the message
+                    processUserInput(transcript);
+                };
+                recognition.onerror = function(event) {
+                    console.error('Speech recognition error', event.error);
+                    statusIndicator.textContent = `Error: ${event.error}. Try again.`;
+                    recordButton.classList.remove('recording');
+                    recordButton.textContent = 'Speak to Baburu';
+                    isListening = false;
+                    clearTimeout(recognitionTimeout);
+                };
+                recognition.onend = function() {
+                    if (isListening && !recognition.result) {
+                        statusIndicator.textContent = 'No speech detected. Try again.';
+                    }
+                    recordButton.classList.remove('recording');
+                    recordButton.textContent = 'Speak to Baburu';
+                    isListening = false;
+                    clearTimeout(recognitionTimeout);
+                };
+            }
+            function toggleSpeechRecognition() {
+                if (!isListening) {
+                    // Start listening
+                    try {
+                        // Try to detect language automatically first with English fallback
+                        const detectedLang = navigator.language || 'en-US';
+                        // Check if it's a Russian locale
+                        if (detectedLang.startsWith('ru')) {
+                            recognition.lang = 'ru-RU';
+                        } else {
+                            // Default to English if not Russian
+                            recognition.lang = 'en-US';
+                        }
+                        recognition.start();
+                        console.log(`Started recognition in ${recognition.lang} mode`);
+                        // Auto-stop after 10 seconds in case of no response
+                        recognitionTimeout = setTimeout(() => {
+                            if (isListening) {
+                                recognition.stop();
+                                statusIndicator.textContent = 'Listening timed out after 10 seconds';
+                            }
+                        }, 10000);
+                    } catch (error) {
+                        console.error('Error starting speech recognition:', error);
+                        statusIndicator.textContent = `Error: ${error.message}. Try again.`;
+                    }
+                } else {
+                    // Stop listening
+                    try {
+                        recognition.stop();
+                        statusIndicator.textContent = 'Stopped listening';
+                    } catch (error) {
+                        console.error('Error stopping speech recognition:', error);
+                    }
+                }
+            }
+            function processUserInput(text) {
+                // Show loading indicator
+                loading.style.display = 'block';
+                statusIndicator.textContent = 'Getting response from Baburu...';
+                // Send message to server
+                fetch('/api/chat', {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json'
+                    },
+                    body: JSON.stringify({ message: text })
+                })
+                .then(response => response.json())
+                .then(data => {
+                    // Hide loading indicator
+                    loading.style.display = 'none';
+                    statusIndicator.textContent = '';
+                    // Add bot response to chat
+                    addBotMessage(data.response, data.translated_response, data.audio_url);
+                })
+                .catch(error => {
+                    console.error('Error:', error);
+                    loading.style.display = 'none';
+                    statusIndicator.textContent = 'Error getting response';
+                    addBotMessage('Sorry, an error occurred. Please try again.', '', null);
+                });
+            }
+            function addMessage(text, sender, translation = '') {
+                const messageDiv = document.createElement('div');
+                messageDiv.className = `message ${sender}-message`;
+                messageDiv.textContent = text;
+                if (translation) {
+                    const translationDiv = document.createElement('div');
+                    translationDiv.className = 'translation';
+                    translationDiv.textContent = translation;
+                    messageDiv.appendChild(translationDiv);
+                }
+                chatMessages.appendChild(messageDiv);
+                chatMessages.scrollTop = chatMessages.scrollHeight;
+                return messageDiv;
+            }
+            function addBotMessage(text, translation = '', audioUrl = null) {
+                const messageDiv = addMessage(text, 'bot', translation);
+                // Add audio player if available
+                if (audioUrl) {
+                    const audioElement = document.createElement('audio');
+                    audioElement.className = 'audio-player';
+                    audioElement.controls = true;
+                    audioElement.autoplay = true; // Automatically play audio
+                    const sourceElement = document.createElement('source');
+                    sourceElement.src = audioUrl;
+                    sourceElement.type = 'audio/mpeg';
+                    // Add event listener for when the audio loads
+                    audioElement.oncanplaythrough = function() {
+                        audioElement.play().catch(e => {
+                            console.error('Auto-play failed:', e);
+                            statusIndicator.textContent = 'Click the audio player to hear Baburu';
+                        });
+                    };
+                    audioElement.appendChild(sourceElement);
+                    messageDiv.appendChild(audioElement);
+                }
+                return messageDiv;
+            }
+        });
+    </script>
+</body>
+</html>