Update app.py

app.py

@@ -1,6 +1,7 @@
 import streamlit as st
 import datetime
 import os
+import json
 
 # Initialize session state for transcript history if not exists
 if 'transcript_history' not in st.session_state:
@@ -59,6 +60,15 @@ html = """
     <div id="output"></div>
 
     <script>
+        // Function to serialize data for Streamlit
+        function sendToStreamlit(data) {
+            const serializedData = JSON.stringify(data);
+            window.parent.postMessage({
+                type: 'streamlit:setComponentValue',
+                value: serializedData
+            }, '*');
+        }
+
         if (!('webkitSpeechRecognition' in window)) {
             alert('Speech recognition not supported');
         } else {
@@ -71,22 +81,6 @@ html = """
             let fullTranscript = '';
             let lastUpdateTime = Date.now();
 
-            // Function to update Streamlit
-            function updateStreamlit(text, isFinal) {
-                // Create data object
-                const data = {
-                    text: text,
-                    isFinal: isFinal,
-                    timestamp: new Date().toISOString()
-                };
-
-                // Send to Streamlit using the Streamlit component API
-                window.parent.postMessage({
-                    type: 'streamlit:setComponentValue',
-                    value: data
-                }, '*');
-            }
-
             // Configure recognition
             recognition.continuous = true;
             recognition.interimResults = true;
@@ -113,7 +107,11 @@ html = """
             clearButton.onclick = () => {
                 fullTranscript = '';
                 output.textContent = '';
-                updateStreamlit('', true);  // Clear Streamlit display
+                sendToStreamlit({
+                    text: '',
+                    isFinal: true,
+                    timestamp: new Date().toISOString()
+                });
             };
 
             recognition.onresult = (event) => {
@@ -134,10 +132,18 @@ html = """
                 if (finalTranscript || (Date.now() - lastUpdateTime > 5000)) {
                     if (finalTranscript) {
                         fullTranscript += finalTranscript;
-                        updateStreamlit(finalTranscript, true);  // Send final transcript to Streamlit
+                        sendToStreamlit({
+                            text: finalTranscript,
+                            isFinal: true,
+                            timestamp: new Date().toISOString()
+                        });
                     } else if (interimTranscript) {
                         fullTranscript += interimTranscript + '\\n';
-                        updateStreamlit(interimTranscript, false);  // Send interim transcript to Streamlit
+                        sendToStreamlit({
+                            text: interimTranscript,
+                            isFinal: false,
+                            timestamp: new Date().toISOString()
+                        });
                     }
                     lastUpdateTime = Date.now();
                 }
@@ -150,7 +156,6 @@ html = """
             };
 
             recognition.onend = () => {
-                // Automatically restart if not manually stopped
                 if (!stopButton.disabled) {
                     try {
                         recognition.start();
@@ -168,7 +173,6 @@ html = """
                 console.error('Recognition error:', event.error);
                 status.textContent = 'Error: ' + event.error;
                 
-                // Only reset buttons if it's a fatal error
                 if (event.error === 'not-allowed' || event.error === 'service-not-allowed') {
                     startButton.disabled = false;
                     stopButton.disabled = true;
@@ -180,11 +184,6 @@ html = """
 </html>
 """
 
-# Create custom component
-def speech_recognition():
-    component_value = st.components.v1.html(html, height=600)
-    return component_value
-
 # Function to save transcript to file
 def save_transcript(text):
     if not os.path.exists('transcripts'):
@@ -199,24 +198,28 @@ def save_transcript(text):
 # Main app
 st.title("Speech Recognition with Transcript History")
 
-# Get the speech recognition component value
-result = speech_recognition()
+# Create custom component
+component_value = st.components.v1.html(html, height=600)
 
 # If we receive a new transcript
-if result:
-    transcript_data = result
-    
-    # Update the transcript history
-    if transcript_data.get('isFinal', False):
-        new_text = transcript_data.get('text', '')
-        st.session_state.transcript_history += new_text
-        
-        # Save to file
-        save_transcript(new_text)
+if component_value is not None:
+    try:
+        # Parse the JSON string
+        transcript_data = json.loads(component_value)
         
-        # Update the display
-        history_container.markdown(st.session_state.transcript_history)
-        text_area.text_area("Full Transcript", st.session_state.transcript_history, height=200)
+        # Update the transcript history if it's a final transcript
+        if transcript_data['isFinal']:
+            new_text = transcript_data['text']
+            st.session_state.transcript_history += new_text
+            
+            # Save to file
+            save_transcript(new_text)
+            
+            # Update the display
+            history_container.markdown(st.session_state.transcript_history)
+            text_area.text_area("Full Transcript", st.session_state.transcript_history, height=200)
+    except json.JSONDecodeError:
+        st.error("Error processing transcript data")
 
 # Add a download button for the full transcript
 if st.session_state.transcript_history: