Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Speech Tools with Video Background</title> | |
| <style> | |
| body { | |
| margin: 0; | |
| background-color: black; | |
| overflow: hidden; /* Prevents scrollbars */ | |
| height: 100vh; | |
| position: relative; /* Positioning context for absolute elements */ | |
| color: #0A74DA; /* Radium Blue color for text */ | |
| font-family: Arial, sans-serif; /* Font style */ | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| flex-direction: column; /* Stack content vertically */ | |
| } | |
| video { | |
| position: fixed; /* Fixed position for video */ | |
| top: 50%; | |
| left: 50%; | |
| transform: translate(-50%, -50%); /* Center the video */ | |
| width: 100%; | |
| height: auto; | |
| z-index: -1; /* Sends video behind other content */ | |
| } | |
| .text-overlay { | |
| position: absolute; /* Absolute positioning for text */ | |
| bottom: 200px; /* Distance from the bottom of the viewport */ | |
| left: 50%; | |
| transform: translateX(-50%); /* Center text horizontally */ | |
| font-size: 24px; /* Size of the text */ | |
| padding: 10px; /* Padding around the text */ | |
| text-align: center; /* Center text horizontally */ | |
| z-index: 1; /* Ensure text is above the video */ | |
| color: #0A74DA; /* Match text color to the body color */ | |
| } | |
| .container { | |
| max-width: 600px; | |
| margin: auto; | |
| position: relative; | |
| z-index: 2; /* Ensure container is above the video */ | |
| } | |
| button { | |
| margin-top: 10px; | |
| } | |
| select { | |
| margin-top: 10px; | |
| } | |
| .error-para { | |
| color: red; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <video id="background-video" autoplay muted loop> | |
| <source src="videos/original-b507b736387559b36766da23936f214d.mp4" type="video/mp4"> | |
| Your browser does not support the video tag. | |
| </video> | |
| <div class="text-overlay"> | |
| </div> | |
| <div class="container"> | |
| <div class="app-container"> | |
| <div class="headings-container"> | |
| <h1> mobius rover ('S.A.N.J.A.Y)</h1> | |
| </div> | |
| <!-- Text to Speech Converter --> | |
| <div class="interaction-container"> | |
| <h3></h3> | |
| <p class="error-para"></p> | |
| </div> | |
| <!-- Speech Recognition --> | |
| <div> | |
| <label for="language-select">Select Language:</label> | |
| <select id="language-select"> | |
| <option value="en-US">English</option> | |
| <option value="hi-IN">Hindi</option> | |
| <option value="te-IN">Telugu</option> | |
| </select> | |
| <button onclick="startContinuousRecognition()">Start Continuous Recognition</button> | |
| <div> | |
| <h3>Recognition Result:</h3> | |
| <p id="result"></p> | |
| </div> | |
| <div class="api-response" id="api-response"> | |
| <h3>Bot Response:</h3> | |
| <pre id="api-response-content"></pre> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Text to Speech | |
| let speechSynth = window.speechSynthesis; | |
| let isPlaying = false; | |
| let lastText = ''; // Track last spoken text | |
| function convertTextToSpeech(text) { | |
| if (!isPlaying && text.trim().length && text !== lastText) { | |
| const utterance = new SpeechSynthesisUtterance(text); | |
| const languageCode = document.getElementById('language-select').value; | |
| utterance.lang = languageCode; | |
| utterance.onstart = () => { isPlaying = true; }; | |
| utterance.onend = () => { | |
| isPlaying = false; | |
| lastText = text; // Update last spoken text | |
| }; | |
| speechSynth.speak(utterance); | |
| } | |
| } | |
| // Speech Recognition | |
| let recognition = null; | |
| const wakeWord = 'lucy'; | |
| function startContinuousRecognition() { | |
| if (recognition) { | |
| recognition.stop(); | |
| } | |
| recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)(); | |
| const languageCode = document.getElementById('language-select').value; | |
| recognition.lang = languageCode; | |
| recognition.continuous = true; | |
| recognition.interimResults = false; | |
| recognition.maxAlternatives = 1; | |
| recognition.onresult = function(event) { | |
| const result = event.results[0][0].transcript.toLowerCase(); | |
| document.getElementById('result').innerText = result; | |
| if (result.includes(wakeWord)) { | |
| document.getElementById('result').innerText = 'Wake word detected. Listening...'; | |
| } else { | |
| fetchApiResponse(result); // Fetch API response with recognized text | |
| } | |
| }; | |
| recognition.onerror = function(event) { | |
| console.error('Speech recognition error:', event.error); | |
| }; | |
| recognition.onend = function() { | |
| // Optional: Uncomment the next line if you want to restart recognition after it stops | |
| // recognition.start(); | |
| }; | |
| recognition.start(); | |
| } | |
| function fetchApiResponse(query) { | |
| const apiUrl = `https://srivatsavdamaraju2-l-u-c-i.hf.space/ask/${encodeURIComponent(query)}`; | |
| fetch(apiUrl) | |
| .then(response => response.json()) | |
| .then(data => { | |
| const apiResponseText = data.response; // Extract the relevant text | |
| document.getElementById('api-response-content').textContent = JSON.stringify(data, null, 2); | |
| convertTextToSpeech(apiResponseText); // Use the API response text for TTS | |
| }) | |
| .catch(error => { | |
| console.error('Error fetching API response:', error); | |
| }); | |
| } | |
| // Load voices for text-to-speech | |
| window.speechSynthesis.onvoiceschanged = function() { | |
| const voices = window.speechSynthesis.getVoices(); | |
| // Optionally, you can set a default voice here | |
| }; | |
| // Stop TTS on page unload | |
| window.addEventListener('beforeunload', function() { | |
| if (speechSynth.speaking) { | |
| speechSynth.cancel(); // Stop all ongoing speech synthesis | |
| } | |
| }); | |
| </script> | |
| </body> | |
| </html> | |