Spaces:

srivatsavdamaraju
/

L.U.C.I

Running

App Files Files Community

srivatsavdamaraju commited on Sep 9, 2024

Commit

2681cfd

verified ·

1 Parent(s): aacab0e

Update index.html

Browse files

Files changed (1) hide show

index.html +187 -18

index.html CHANGED Viewed

@@ -1,19 +1,188 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
 </html>

+<!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>Speech Tools</h1>
+            </div>
+            <!-- Text to Speech Converter -->
+            <div class="interaction-container">
+                <h3>Convert Speech to Text and Play Audio</h3>
+                <p class="error-para"></p>
+                <button class="btn" id="convertBtn" disabled>Play Converted Sound</button>
+            </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>API 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.gvp_bot_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>