Spaces:
Running
Running
File size: 6,986 Bytes
2681cfd a773d1a 2681cfd 7c9fd78 2681cfd a773d1a 2681cfd a773d1a 2681cfd a773d1a 2681cfd 359f2e0 2681cfd aacab0e |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 |
<!DOCTYPE html>
<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>
|