Spaces:

awacke1
/

RescuerOfStolenBikes

Sleeping

App Files Files Community

awacke1 commited on Dec 1, 2024

Commit

100d7d9

verified ·

1 Parent(s): 0761993

Update app.py

Browse files

Files changed (1) hide show

app.py +106 -142

app.py CHANGED Viewed

@@ -58,182 +58,146 @@ st.set_page_config(
 def get_cookie_manager():
     """Create and return a cookie manager."""
     return stx.CookieManager()
 def create_speech_component():
-    """Create speech recognition component with timer-based updates."""
     speech_recognition_html = """
-    <!DOCTYPE html>
-    <html>
-    <head>
-        <title>Continuous Speech Demo</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;
-            }
-            .listening {
-                color: green;
-                font-weight: bold;
-            }
-        </style>
-    </head>
-    <body>
         <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>
-        <div id="debug"></div>
         <script>
-            let lastTranscript = '';
-            let updateInterval;
-            function checkAndUpdateTranscript() {
-                const currentTranscript = document.getElementById('output').textContent;
-                if (currentTranscript !== lastTranscript) {
-                    lastTranscript = currentTranscript;
-                    window.parent.postMessage({
-                        type: 'streamlit:setComponentValue',
-                        data: currentTranscript
-                    }, '*');
-                    // Debug output
-                    document.getElementById('debug').textContent =
-                        'Last update: ' + new Date().toLocaleTimeString();
                 }
             }
-            if (!('webkitSpeechRecognition' in window)) {
-                alert('Speech recognition not supported');
-            } else {
-                const recognition = new webkitSpeechRecognition();
-                const startButton = document.getElementById('start');
-                const stopButton = document.getElementById('stop');
-                const clearButton = document.getElementById('clear');
-                const status = document.getElementById('status');
-                const output = document.getElementById('output');
-                let fullTranscript = '';
-                recognition.continuous = true;
-                recognition.interimResults = true;
-                startButton.onclick = () => {
                     recognition.start();
-                    status.textContent = '🎤 Listening...';
-                    status.className = 'listening';
-                    startButton.disabled = true;
-                    stopButton.disabled = false;
-                    // Start periodic updates
-                    updateInterval = setInterval(checkAndUpdateTranscript, 500);
-                };
-                stopButton.onclick = () => {
-                    recognition.stop();
-                    status.textContent = 'Stopped';
-                    status.className = '';
                     startButton.disabled = false;
                     stopButton.disabled = true;
-                    // Stop periodic updates
-                    clearInterval(updateInterval);
-                };
-                clearButton.onclick = () => {
-                    fullTranscript = '';
-                    output.textContent = '';
-                    window.parent.postMessage({
-                        type: 'streamlit:setComponentValue',
-                        data: ''
-                    }, '*');
-                };
-                recognition.onresult = (event) => {
-                    let interimTranscript = '';
-                    let finalTranscript = '';
-                    for (let i = event.resultIndex; i < event.results.length; i++) {
-                        const transcript = event.results[i][0].transcript;
-                        if (event.results[i].isFinal) {
-                            finalTranscript += transcript + '\\n';
-                            fullTranscript += transcript + '\\n';
-                        } else {
-                            interimTranscript += transcript;
-                        }
-                    }
-                    output.textContent = fullTranscript + (interimTranscript ? '... ' + interimTranscript : '');
-                    output.scrollTop = output.scrollHeight;
-                };
-                recognition.onend = () => {
-                    if (!stopButton.disabled) {
-                        recognition.start();
-                    }
-                };
-                // Auto-start on load
-                window.addEventListener('load', () => {
-                    setTimeout(() => {
-                        startButton.click();
-                    }, 1000);
-                });
             }
         </script>
-    </body>
-    </html>
     """
-    # Return both the component value and height
-    return components.html(
         speech_recognition_html,
-        height=400,
     )
 def integrate_speech_component():
-    """Integrate speech component with proper value handling."""
     if "voice_transcript" not in st.session_state:
         st.session_state.voice_transcript = ""
     try:
-        # Create the component and get its value
-        component = create_speech_component()
         # Update session state if we have valid data
-        if isinstance(component, str) and component.strip():
-            st.session_state.voice_transcript = component
-            st.text(f"Transcript updated: {len(component)} characters")
     except Exception as e:
-        st.error(f"Error in speech component: {str(e)}")
     return st.session_state.voice_transcript

 def get_cookie_manager():
     """Create and return a cookie manager."""
     return stx.CookieManager()
 def create_speech_component():
+    """Create speech recognition component with reliable Streamlit communication."""
     speech_recognition_html = """
+    <div style="padding: 20px;">
         <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" style="margin: 10px 0; padding: 10px; background: #e8f5e9;">Ready</div>
+        <div id="output" style="white-space: pre-wrap; padding: 15px; background: #f5f5f5; min-height: 100px; max-height: 400px; overflow-y: auto;"></div>
+        <div id="debug" style="margin-top: 10px; color: #666;"></div>
         <script>
+            // Initialize Streamlit component communication
+            const Streamlit = window.Streamlit || {};
+            // Set up base recognition
+            const recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();
+            const startButton = document.getElementById('start');
+            const stopButton = document.getElementById('stop');
+            const clearButton = document.getElementById('clear');
+            const status = document.getElementById('status');
+            const output = document.getElementById('output');
+            const debug = document.getElementById('debug');
+            let fullTranscript = '';
+            recognition.continuous = true;
+            recognition.interimResults = true;
+            function updateStreamlit(text) {
+                if (window.Streamlit) {
+                    window.Streamlit.setComponentValue(text);
+                    debug.textContent = `Last update: ${new Date().toLocaleTimeString()} - Length: ${text.length}`;
                 }
             }
+            startButton.onclick = () => {
+                recognition.start();
+                status.textContent = '🎤 Listening...';
+                startButton.disabled = true;
+                stopButton.disabled = false;
+                debug.textContent = 'Started listening...';
+            };
+            stopButton.onclick = () => {
+                recognition.stop();
+                status.textContent = 'Stopped';
+                startButton.disabled = false;
+                stopButton.disabled = true;
+                updateStreamlit(fullTranscript);
+                debug.textContent = 'Stopped listening...';
+            };
+            clearButton.onclick = () => {
+                fullTranscript = '';
+                output.textContent = '';
+                updateStreamlit('');
+                debug.textContent = 'Cleared transcript...';
+            };
+            recognition.onresult = (event) => {
+                let interimTranscript = '';
+                let finalTranscript = '';
+                for (let i = event.resultIndex; i < event.results.length; i++) {
+                    const transcript = event.results[i][0].transcript;
+                    if (event.results[i].isFinal) {
+                        finalTranscript += transcript + ' ';
+                        fullTranscript += transcript + ' ';
+                        updateStreamlit(fullTranscript);
+                    } else {
+                        interimTranscript += transcript;
+                    }
+                }
+                output.textContent = fullTranscript + (interimTranscript ? '... ' + interimTranscript : '');
+                output.scrollTop = output.scrollHeight;
+            };
+            recognition.onend = () => {
+                if (!stopButton.disabled) {
                     recognition.start();
+                    debug.textContent = 'Restarted recognition...';
+                }
+            };
+            recognition.onerror = (event) => {
+                debug.textContent = `Error: ${event.error} at ${new Date().toLocaleTimeString()}`;
+                if (event.error === 'not-allowed') {
                     startButton.disabled = false;
                     stopButton.disabled = true;
+                }
+            };
+            // Auto-start after component is ready
+            if (window.Streamlit) {
+                window.Streamlit.setComponentReady();
+                setTimeout(() => startButton.click(), 1000);
             }
         </script>
+    </div>
     """
+    # Create the component
+    component_value = components.html(
         speech_recognition_html,
+        height=400
     )
+    return component_value
 def integrate_speech_component():
+    """Integrate speech component with proper state management."""
     if "voice_transcript" not in st.session_state:
         st.session_state.voice_transcript = ""
+    # Display debug container
+    debug_container = st.empty()
     try:
+        # Get value from component
+        value = create_speech_component()
         # Update session state if we have valid data
+        if value and isinstance(value, str):
+            st.session_state.voice_transcript = value
+            debug_container.text(f"Debug: Received transcript of length {len(value)}")
+            return value
     except Exception as e:
+        st.error(f"Component error: {str(e)}")
     return st.session_state.voice_transcript