Spaces:

srivatsavdamaraju
/

L.U.C.I

Running

App Files Files Community

srivatsavdamaraju commited on 21 days ago

Commit

ea69ea7

verified ·

1 Parent(s): 4965c2d

Update index.html

Browse files

Files changed (1) hide show

index.html +80 -22

index.html CHANGED Viewed

@@ -55,6 +55,14 @@
             color: red;
             text-align: center;
         }
     </style>
 </head>
 <body>
@@ -70,8 +78,13 @@
                     <h3>Recognition Result:</h3>
                     <p id="result"></p>
                 </div>
                 <div>
                     <button onclick="requestMicrophonePermission()">Start Listening</button>
                 </div>
             </div>
         </div>
@@ -80,20 +93,29 @@
     <script>
         let recognition = null;
         let silenceTimeout = null;
         async function query(data) {
-            const response = await fetch(
-                "https://srivatsavdamaraju-flowise.hf.space/api/v1/prediction/2875301a-c26f-4bd5-ab10-71fa13393541",
-                {
-                    method: "POST",
-                    headers: {
-                        "Content-Type": "application/json"
-                    },
-                    body: JSON.stringify(data)
-                }
-            );
-            const result = await response.json();
-            return result;
         }
         function displayStatus(message, isError = false) {
@@ -120,6 +142,13 @@
             return newRecognition;
         }
         function startCommandRecognition() {
             try {
                 if (recognition) {
@@ -130,25 +159,53 @@
                 if (!recognition) return;
                 displayStatus('Listening for command...');
                 recognition.onresult = async function(event) {
                     clearTimeout(silenceTimeout);
-                    const result = event.results[event.results.length - 1][0].transcript.toLowerCase();
-                    document.getElementById('result').innerText = result;
-                    silenceTimeout = setTimeout(async () => {
-                        const apiResponse = await query({"question": result});
-                        console.log(apiResponse);
-                    }, 2000);
                 };
                 recognition.onerror = function(event) {
                     displayStatus(`Recognition Error: ${event.error}`, true);
                 };
                 recognition.start();
             } catch (error) {
-                displayStatus('Failed to start command recognition', true);
             }
         }
@@ -164,8 +221,9 @@
         }
         window.onload = function() {
-            requestMicrophonePermission();
         };
     </script>
 </body>
-</html>

             color: red;
             text-align: center;
         }
+        .response-container {
+            margin-top: 20px;
+            background-color: rgba(10, 116, 218, 0.1);
+            padding: 10px;
+            border-radius: 5px;
+            max-height: 200px;
+            overflow-y: auto;
+        }
     </style>
 </head>
 <body>
                     <h3>Recognition Result:</h3>
                     <p id="result"></p>
                 </div>
+                <div class="response-container">
+                    <h3>API Response:</h3>
+                    <p id="api-response"></p>
+                </div>
                 <div>
                     <button onclick="requestMicrophonePermission()">Start Listening</button>
+                    <button onclick="stopListening()">Stop Listening</button>
                 </div>
             </div>
         </div>
     <script>
         let recognition = null;
         let silenceTimeout = null;
+        let isFinalResult = false;
         async function query(data) {
+            displayStatus("Sending to API...");
+            try {
+                const response = await fetch(
+                    "https://srivatsavdamaraju-flowise.hf.space/api/v1/prediction/2875301a-c26f-4bd5-ab10-71fa13393541",
+                    {
+                        method: "POST",
+                        headers: {
+                            "Content-Type": "application/json"
+                        },
+                        body: JSON.stringify(data)
+                    }
+                );
+                const result = await response.json();
+                document.getElementById('api-response').innerText = JSON.stringify(result, null, 2);
+                displayStatus("API response received");
+                return result;
+            } catch (error) {
+                displayStatus(`API Error: ${error.message}`, true);
+                return null;
+            }
         }
         function displayStatus(message, isError = false) {
             return newRecognition;
         }
+        function stopListening() {
+            if (recognition) {
+                recognition.stop();
+                displayStatus('Listening stopped');
+            }
+        }
         function startCommandRecognition() {
             try {
                 if (recognition) {
                 if (!recognition) return;
                 displayStatus('Listening for command...');
+                document.getElementById('result').innerText = '';
+                document.getElementById('api-response').innerText = '';
                 recognition.onresult = async function(event) {
                     clearTimeout(silenceTimeout);
+                    const lastResult = event.results[event.results.length - 1];
+                    const transcript = lastResult[0].transcript.trim();
+                    isFinalResult = lastResult.isFinal;
+                    document.getElementById('result').innerText = transcript;
+                    // If it's a final result or we've stopped getting input for a while, send to API
+                    if (isFinalResult) {
+                        await query({"question": transcript});
+                    } else {
+                        // Set a timeout for silence detection
+                        silenceTimeout = setTimeout(async () => {
+                            await query({"question": transcript});
+                        }, 2000);
+                    }
                 };
                 recognition.onerror = function(event) {
                     displayStatus(`Recognition Error: ${event.error}`, true);
                 };
+                recognition.onend = function() {
+                    // If recognition ended but we have a transcript that wasn't sent, send it now
+                    const transcript = document.getElementById('result').innerText;
+                    if (transcript && !isFinalResult) {
+                        query({"question": transcript});
+                    }
+                    displayStatus('Recognition ended');
+                };
+                recognition.onspeechend = function() {
+                    // When speech ends, send the final transcript to the API
+                    const transcript = document.getElementById('result').innerText;
+                    if (transcript) {
+                        query({"question": transcript});
+                    }
+                };
                 recognition.start();
             } catch (error) {
+                displayStatus(`Failed to start command recognition: ${error.message}`, true);
             }
         }
         }
         window.onload = function() {
+            // Don't request permission automatically - wait for user to click button
+            displayStatus('Ready - Click "Start Listening" to begin');
         };
     </script>
 </body>
+</html>