Spaces:

lsb
/

ambient-obliqueness

Running

App Files Files Community

lsb commited on 18 days ago

Commit

e00f083

verified ·

1 Parent(s): 198307d

Update index.html

Browse files

Files changed (1) hide show

index.html +116 -22

index.html CHANGED Viewed

@@ -1,29 +1,123 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-    <meta charset="UTF-8" />
-    <link rel="stylesheet" href="style.css" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Transformers.js - Object Detection</title>
 </head>
 <body>
-    <h1>Object Detection w/ 🤗 Transformers.js</h1>
-    <label id="container" for="upload">
-        <svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
-            <path fill="#000"
-                d="M3.5 24.3a3 3 0 0 1-1.9-.8c-.5-.5-.8-1.2-.8-1.9V2.9c0-.7.3-1.3.8-1.9.6-.5 1.2-.7 2-.7h18.6c.7 0 1.3.2 1.9.7.5.6.7 1.2.7 2v18.6c0 .7-.2 1.4-.7 1.9a3 3 0 0 1-2 .8H3.6Zm0-2.7h18.7V2.9H3.5v18.7Zm2.7-2.7h13.3c.3 0 .5 0 .6-.3v-.7l-3.7-5a.6.6 0 0 0-.6-.2c-.2 0-.4 0-.5.3l-3.5 4.6-2.4-3.3a.6.6 0 0 0-.6-.3c-.2 0-.4.1-.5.3l-2.7 3.6c-.1.2-.2.4 0 .7.1.2.3.3.6.3Z">
-            </path>
-        </svg>
-        Click to upload image
-        <label id="example">(or try example)</label>
-    </label>
-    <label id="status">Loading model...</label>
-    <input id="upload" type="file" accept="image/*" />
-    <script src="index.js" type="module"></script>
-</body>
 </html>

 <!DOCTYPE html>
 <html lang="en">
 <head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Nearest Sentence Finder</title>
+  <script src="https://cdn.jsdelivr.net/npm/@xenova/transformers"></script>
+  <style>
+    body {
+      font-family: Arial, sans-serif;
+      text-align: center;
+      margin-top: 50px;
+    }
+    #nearestSentence {
+      font-size: 1.5em;
+      color: #333;
+    }
+  </style>
 </head>
 <body>
+  <h1>Nearest Sentence Finder</h1>
+  <p>Sentence closest to the spoken words:</p>
+  <div id="nearestSentence">Loading...</div>
+  <script>
+    // Check for browser support
+    const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
+    if (!SpeechRecognition) {
+      alert("Your browser does not support the Web Speech API. Please use a compatible browser.");
+    } else {
+      const recognition = new SpeechRecognition();
+      recognition.continuous = true;
+      recognition.interimResults = false;
+      recognition.lang = 'en-US';
+      let wordBuffer = [];
+      const bufferDuration = 30 * 1000; // 30 seconds
+      const nearestSentenceElement = document.getElementById('nearestSentence');
+      // Predefined sentences
+      const sampleSentences = ['person', 'man', 'woman', 'camera', 'tv'];
+      let sampleEmbeddings = [];
+      let pipeline;
+      // Load the pipeline and compute embeddings for sample sentences
+      async function initializePipeline() {
+        pipeline = await transformers.pipeline('feature-extraction', 'Xenova/all-MiniLM-L6-v2');
+        sampleEmbeddings = await Promise.all(
+          sampleSentences.map(sentence => pipeline(sentence).then(embedding => embedding[0]))
+        );
+        nearestSentenceElement.textContent = 'Model loaded. Start speaking!';
+      }
+      // Compute Euclidean distance
+      function euclideanDistance(vec1, vec2) {
+        return Math.sqrt(vec1.reduce((sum, val, i) => sum + Math.pow(val - vec2[i], 2), 0));
+      }
+      // Find the nearest sentence
+      function findNearestSentence(transcriptEmbedding) {
+        let nearestSentence = '';
+        let minDistance = Infinity;
+        sampleEmbeddings.forEach((embedding, index) => {
+          const distance = euclideanDistance(transcriptEmbedding, embedding);
+          if (distance < minDistance) {
+            minDistance = distance;
+            nearestSentence = sampleSentences[index];
+          }
+        });
+        return nearestSentence;
+      }
+      // Start speech recognition
+      recognition.start();
+      recognition.onresult = async (event) => {
+        const transcript = Array.from(event.results)
+          .map(result => result[0].transcript)
+          .join(' ');
+        const timestamp = Date.now();
+        console.log({transcript, timestamp})
+        // Add transcript to the buffer with timestamps
+        wordBuffer.push({ transcript, timestamp });
+        // Remove transcripts older than 30 seconds
+        wordBuffer = wordBuffer.filter(item => timestamp - item.timestamp <= bufferDuration);
+        // Combine all transcripts in the buffer
+        const combinedTranscript = wordBuffer.map(item => item.transcript).join(' ');
+        console.log({combinedTranscript})
+        // Compute embedding for the combined transcript
+        if (pipeline) {
+          const transcriptEmbedding = await pipeline(combinedTranscript).then(embedding => embedding[0]);
+          // Find and display the nearest sentence
+          const nearestSentence = findNearestSentence(transcriptEmbedding);
+          nearestSentenceElement.textContent = nearestSentence;
+        }
+      };
+      recognition.onerror = (event) => {
+        console.error('Speech recognition error:', event.error);
+        if (event.error === 'not-allowed' || event.error === 'service-not-allowed') {
+          alert('Microphone access is blocked. Please allow microphone access and reload the page.');
+        }
+      };
+      recognition.onend = () => {
+        console.warn('Speech recognition stopped. Restarting...');
+        recognition.start(); // Restart recognition if it stops
+      };
+      // Initialize the pipeline
+      initializePipeline();
+    }
+  </script>
+</body>
 </html>