Spaces:

awacke1
/

CodeCompetitionClaudeVsGPT

Running

App Files Files Community

awacke1 commited on Dec 19, 2024

Commit

30a0d44

verified ·

1 Parent(s): e72faab

Update mycomponent/index.html

Browse files

Files changed (1) hide show

mycomponent/index.html +118 -97

mycomponent/index.html CHANGED Viewed

@@ -1,72 +1,57 @@
-<!DOCTYPE html>
 <html>
 <head>
-    <title>Speech Recognition Component</title>
     <style>
         body {
-            font-family: system-ui, -apple-system, sans-serif;
-            padding: 1rem;
             max-width: 800px;
             margin: 0 auto;
-            background: #f8f9fa;
-        }
-        .container {
-            background: white;
-            padding: 1.5rem;
-            border-radius: 8px;
-            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
         }
         button {
-            padding: 0.5rem 1rem;
-            margin: 0.5rem;
-            font-size: 1rem;
-            border: none;
-            border-radius: 4px;
-            cursor: pointer;
-            transition: all 0.2s;
         }
-        button:disabled {
-            opacity: 0.5;
-            cursor: not-allowed;
-        }
-        #start { background: #28a745; color: white; }
-        #stop { background: #dc3545; color: white; }
-        #clear { background: #6c757d; color: white; }
-        #status {
-            margin: 1rem 0;
-            padding: 0.75rem;
             border-radius: 4px;
-            background: #e9ecef;
         }
         #output {
             white-space: pre-wrap;
-            padding: 1rem;
-            background: #f8f9fa;
             border-radius: 4px;
-            border: 1px solid #dee2e6;
-            margin: 1rem 0;
             min-height: 100px;
             max-height: 400px;
             overflow-y: auto;
         }
     </style>
 </head>
 <body>
-    <div class="container">
-        <input id="myinput" type="hidden" value="" />
-        <div class="controls">
-            <button id="start">Start Listening</button>
-            <button id="stop" disabled>Stop Listening</button>
-            <button id="clear">Clear Text</button>
-        </div>
-        <div id="status">Ready to start speech recognition...</div>
-        <div id="output"></div>
-    </div>
     <script>
-        // Check for speech recognition support
         if (!('webkitSpeechRecognition' in window)) {
-            document.getElementById('status').textContent = 'Speech recognition not supported in this browser';
         } else {
             const recognition = new webkitSpeechRecognition();
             const startButton = document.getElementById('start');
@@ -81,7 +66,7 @@
             recognition.continuous = true;
             recognition.interimResults = true;
-            // Start recognition handler
             const startRecognition = () => {
                 try {
                     recognition.start();
@@ -90,7 +75,7 @@
                     stopButton.disabled = false;
                 } catch (e) {
                     console.error(e);
-                    status.textContent = 'Error starting recognition: ' + e.message;
                 }
             };
@@ -99,26 +84,23 @@
                 setTimeout(startRecognition, 1000);
             });
-            // Button handlers
             startButton.onclick = startRecognition;
             stopButton.onclick = () => {
                 recognition.stop();
-                status.textContent = 'Stopped listening';
-                startButton.disabled = false;
                 stopButton.disabled = true;
             };
             clearButton.onclick = () => {
                 fullTranscript = '';
                 output.textContent = '';
-                sendDataToPython({
-                    value: '',
-                    dataType: 'json'
-                });
             };
-            // Recognition result handler
             recognition.onresult = (event) => {
                 let interimTranscript = '';
                 let finalTranscript = '';
@@ -135,28 +117,29 @@
                 if (finalTranscript || (Date.now() - lastUpdateTime > 5000)) {
                     if (finalTranscript) {
                         fullTranscript += finalTranscript;
                     }
                     lastUpdateTime = Date.now();
-                }
                 output.textContent = fullTranscript + (interimTranscript ? '... ' + interimTranscript : '');
                 output.scrollTop = output.scrollHeight;
-                // Send to Streamlit
-                sendDataToPython({
-                    value: fullTranscript,
-                    dataType: 'json'
-                });
             };
-            // Auto-restart recognition
             recognition.onend = () => {
                 if (!stopButton.disabled) {
                     try {
                         recognition.start();
                         console.log('Restarted recognition');
                     } catch (e) {
-                        console.error('Failed to restart:', e);
                         status.textContent = 'Error restarting: ' + e.message;
                         startButton.disabled = false;
                         stopButton.disabled = true;
@@ -167,49 +150,87 @@
             recognition.onerror = (event) => {
                 console.error('Recognition error:', event.error);
                 status.textContent = 'Error: ' + event.error;
-                if (event.error === 'not-allowed') {
                     startButton.disabled = false;
                     stopButton.disabled = true;
                 }
             };
         }
-        // Streamlit Component Functions
-        function sendMessageToStreamlitClient(type, data) {
-            var outData = Object.assign({
-                isStreamlitMessage: true,
-                type: type,
-            }, data);
-            window.parent.postMessage(outData, "*");
-        }
-        function init() {
-            sendMessageToStreamlitClient("streamlit:componentReady", {apiVersion: 1});
-        }
-        function setFrameHeight(height) {
-            sendMessageToStreamlitClient("streamlit:setFrameHeight", {height: height});
-        }
-        function sendDataToPython(data) {
-            sendMessageToStreamlitClient("streamlit:setComponentValue", data);
-        }
-        // Setup event listeners
-        window.addEventListener("message", (event) => {
-            if (event.data.type !== "streamlit:render") return;
-            // Handle any incoming data from Python if needed
-        });
-        // Initialize
-        init();
-        // Set frame height
-        window.addEventListener("load", () => {
-            setTimeout(() => {
-                setFrameHeight(document.documentElement.clientHeight);
-            }, 0);
         });
     </script>
-</body>
-</html>

 <html>
 <head>
+    <title>Continuous Speech ASR</title>
     <style>
         body {
+            font-family: sans-serif;
+            padding: 20px;
             max-width: 800px;
             margin: 0 auto;
         }
         button {
+            padding: 10px 20px;
+            margin: 10px 5px;
+            font-size: 16px;
         }
+        #status {
+            margin: 10px 0;
+            padding: 10px;
+            background: #e8f5e9;
             border-radius: 4px;
         }
         #output {
             white-space: pre-wrap;
+            padding: 15px;
+            background: #f5f5f5;
             border-radius: 4px;
+            margin: 10px 0;
             min-height: 100px;
             max-height: 400px;
             overflow-y: auto;
         }
+        .controls {
+            margin: 10px 0;
+        }
     </style>
 </head>
 <body>
+    <!-- Set up your HTML here -->
+    <input id="myinput" value="" />
+    <div class="controls">
+        <button id="start">Start Listening</button>
+        <button id="stop" disabled>Stop Listening</button>
+        <button id="clear">Clear Text</button>
+    </div>
+    <div id="status">Ready</div>
+    <div id="output"></div>
+    <!-- Add the hidden input here -->
+    <input type="hidden" id="streamlit-data" value="">
     <script>
         if (!('webkitSpeechRecognition' in window)) {
+            alert('Speech recognition not supported');
         } else {
             const recognition = new webkitSpeechRecognition();
             const startButton = document.getElementById('start');
             recognition.continuous = true;
             recognition.interimResults = true;
+            // Function to start recognition
             const startRecognition = () => {
                 try {
                     recognition.start();
                     stopButton.disabled = false;
                 } catch (e) {
                     console.error(e);
+                    status.textContent = 'Error: ' + e.message;
                 }
             };
                 setTimeout(startRecognition, 1000);
             });
             startButton.onclick = startRecognition;
             stopButton.onclick = () => {
                 recognition.stop();
+                status.textContent = 'Stopped';
+                startButton.disabled = false;
                 stopButton.disabled = true;
             };
             clearButton.onclick = () => {
                 fullTranscript = '';
                 output.textContent = '';
+                window.parent.postMessage({
+                    type: 'clear_transcript',
+                }, '*');
             };
             recognition.onresult = (event) => {
                 let interimTranscript = '';
                 let finalTranscript = '';
                 if (finalTranscript || (Date.now() - lastUpdateTime > 5000)) {
                     if (finalTranscript) {
                         fullTranscript += finalTranscript;
+                        // Update the hidden input value
+                        document.getElementById('streamlit-data').value = fullTranscript;
                     }
                     lastUpdateTime = Date.now();
+                }
                 output.textContent = fullTranscript + (interimTranscript ? '... ' + interimTranscript : '');
                 output.scrollTop = output.scrollHeight;
+                document.getElementById('streamlit-data').value = fullTranscript;
+                sendDataToPython({value: fullTranscript,dataType: "json",});
             };
             recognition.onend = () => {
                 if (!stopButton.disabled) {
                     try {
                         recognition.start();
                         console.log('Restarted recognition');
                     } catch (e) {
+                        console.error('Failed to restart recognition:', e);
                         status.textContent = 'Error restarting: ' + e.message;
                         startButton.disabled = false;
                         stopButton.disabled = true;
             recognition.onerror = (event) => {
                 console.error('Recognition error:', event.error);
                 status.textContent = 'Error: ' + event.error;
+                if (event.error === 'not-allowed' || event.error === 'service-not-allowed') {
                     startButton.disabled = false;
                     stopButton.disabled = true;
                 }
             };
         }
+      // ----------------------------------------------------
+      // Just copy/paste these functions as-is:
+      function sendMessageToStreamlitClient(type, data) {
+        var outData = Object.assign({
+          isStreamlitMessage: true,
+          type: type,
+        }, data);
+        window.parent.postMessage(outData, "*");
+      }
+      function init() {
+        sendMessageToStreamlitClient("streamlit:componentReady", {apiVersion: 1});
+      }
+      function setFrameHeight(height) {
+        sendMessageToStreamlitClient("streamlit:setFrameHeight", {height: height});
+      }
+      // The `data` argument can be any JSON-serializable value.
+      function sendDataToPython(data) {
+        sendMessageToStreamlitClient("streamlit:setComponentValue", data);
+      }
+      // ----------------------------------------------------
+      // Now modify this part of the code to fit your needs:
+      var myInput = document.getElementById("myinput");
+      var myOutput = document.getElementById("output");
+      // data is any JSON-serializable value you sent from Python,
+      // and it's already deserialized for you.
+      function onDataFromPython(event) {
+        if (event.data.type !== "streamlit:render") return;
+        myInput.value = event.data.args.my_input_value;  // Access values sent from Python here!
+      }
+      myInput.addEventListener("change", function() {
+        sendDataToPython({
+          value: myInput.value,
+          dataType: "json",
         });
+      })
+      myOutput.addEventListener("change", function() {
+        sendDataToPython({
+          value: myOutput.value,
+          dataType: "json",
+        });
+      })
+      // Hook things up!
+      window.addEventListener("message", onDataFromPython);
+      init();
+      // Hack to autoset the iframe height.
+      window.addEventListener("load", function() {
+        window.setTimeout(function() {
+          setFrameHeight(document.documentElement.clientHeight)
+        }, 0);
+      });
+      // Optionally, if the automatic height computation fails you, give this component a height manually
+      // by commenting out below:
+      //setFrameHeight(200);
     </script>
+  </body>
+</html>