Update app.py

app.py

@@ -1,4 +1,5 @@
 import streamlit as st
+import streamlit.components.v1 as components
 import anthropic
 import openai
 import base64
@@ -13,7 +14,6 @@ import pytz
 import random
 import re
 import requests
-import streamlit.components.v1 as components
 import textract
 import time
 import zipfile
@@ -31,6 +31,7 @@ from xml.etree import ElementTree as ET
 from openai import OpenAI
 import extra_streamlit_components as stx
 from streamlit.runtime.scriptrunner import get_script_run_ctx
+import extra_streamlit_components as stx
 
 
 # 1. 🚲BikeAI🏆 Configuration and Setup
@@ -52,6 +53,146 @@ st.set_page_config(
     }
 )
 
+
+
+def create_speech_component():
+    """Create speech recognition component using postMessage for 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>
+            let currentTranscript = '';
+            const debug = document.getElementById('debug');
+            
+            function sendTranscriptUpdate() {
+                // Send transcript to parent (Streamlit)
+                window.parent.postMessage({
+                    type: 'transcript_update',
+                    data: currentTranscript
+                }, '*');
+                debug.textContent = `Last update: ${new Date().toLocaleTimeString()} - Length: ${currentTranscript.length}`;
+            }
+            
+            // Set up periodic updates
+            setInterval(sendTranscriptUpdate, 3000);  // Send update every 3 seconds
+            
+            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');
+            
+            recognition.continuous = true;
+            recognition.interimResults = true;
+            
+            startButton.onclick = () => {
+                recognition.start();
+                status.textContent = '🎤 Listening...';
+                startButton.disabled = true;
+                stopButton.disabled = false;
+            };
+            
+            stopButton.onclick = () => {
+                recognition.stop();
+                status.textContent = 'Stopped';
+                startButton.disabled = false;
+                stopButton.disabled = true;
+                sendTranscriptUpdate();  // Send final update when stopped
+            };
+            
+            clearButton.onclick = () => {
+                currentTranscript = '';
+                output.textContent = '';
+                sendTranscriptUpdate();  // Send empty 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 + ' ';
+                        currentTranscript += transcript + ' ';
+                    } else {
+                        interimTranscript += transcript;
+                    }
+                }
+                
+                output.textContent = currentTranscript + (interimTranscript ? '... ' + interimTranscript : '');
+                output.scrollTop = output.scrollHeight;
+                
+                if (finalTranscript) {
+                    sendTranscriptUpdate();  // Send update when we have final transcript
+                }
+            };
+            
+            recognition.onend = () => {
+                if (!stopButton.disabled) {
+                    recognition.start();
+                }
+            };
+            
+            // Auto-start on load
+            window.addEventListener('load', () => {
+                setTimeout(() => startButton.click(), 1000);
+            });
+        </script>
+    </div>
+    """
+    
+    # Return both the component value
+    return components.html(
+        speech_recognition_html,
+        height=400,
+    )
+
+def integrate_speech_component():
+    """Integrate speech component with session state management."""
+    if "voice_transcript" not in st.session_state:
+        st.session_state.voice_transcript = ""
+    if "last_update" not in st.session_state:
+        st.session_state.last_update = time.time()
+    
+    # Create placeholders for display
+    transcript_container = st.empty()
+    status_container = st.empty()
+    
+    # Create component
+    component_val = create_speech_component()
+    
+    # Display current transcript
+    current_transcript = st.session_state.voice_transcript
+    transcript_container.text_area(
+        "Voice Transcript:", 
+        value=current_transcript,
+        height=100,
+        key=f"transcript_display_{int(time.time())}"
+    )
+    
+    # Show status
+    status_container.text(
+        f"Last updated: {datetime.fromtimestamp(st.session_state.last_update).strftime('%H:%M:%S')}"
+    )
+    
+    return current_transcript
+    
+
+    
+    
+
+
 # 2. 🚲BikeAI🏆 Load environment variables and initialize clients
 load_dotenv()
 
@@ -863,117 +1004,48 @@ def get_media_html(media_path, media_type="video", width="100%"):
 def set_transcript(text):
     """Set transcript in session state."""
     st.session_state.voice_transcript = text
-
 def main():
     st.sidebar.markdown("### 🚲BikeAI🏆 Claude and GPT Multi-Agent Research AI")
     
-    # Main navigation
     tab_main = st.radio("Choose Action:", 
-                        ["🎤 Voice Input 💬 Chat", "📸 Media Gallery", "🔍 Search ArXiv", "📝 File Editor"],
-                        horizontal=True)
+                      ["🎤 Voice Input", "💬 Chat", "📸 Media Gallery", "🔍 Search ArXiv", "📝 File Editor"],
+                      horizontal=True)
     
-    if tab_main == "🎤 Voice Input 💬 Chat":
+    if tab_main == "🎤 Voice Input":
         st.subheader("Voice Recognition")
         
-        # Initialize session state for the transcript
-        if 'voice_transcript' not in st.session_state:
-            st.session_state.voice_transcript = ""
-        
-        # Display speech recognition component and capture returned value
-        transcript = st.components.v1.html(speech_recognition_html, height=400)
-        
-        # Update session state if there's new data
-        if transcript is not None and transcript != "":
-            st.session_state.voice_transcript = transcript
-        
-
-        # Model Selection
-        model_choice = st.sidebar.radio(
-            "Choose AI Model:",
-            ["GPT+Claude+Arxiv", "GPT-4o", "Claude-3"]
-        )
-                            
-        # Display Chat History
-        st.subheader("Chat History 📜")
-        tab1, tab2 = st.tabs(["Claude History", "GPT-4o History"])
-        
-        with tab1:
-            for chat in st.session_state.chat_history:
-                st.text_area("You:", chat["user"], height=100)
-                st.text_area("Claude:", chat["claude"], height=200)
-                st.markdown(chat["claude"])
-        
-        with tab2:
-            for message in st.session_state.messages:
-                with st.chat_message(message["role"]):
-                    st.markdown(message["content"])
-
-        
-        # Chat Interface
-        user_input = st.text_area("Message:", height=100)
-        
-        if st.button("Send 📨"):
-            if user_input:
-                if model_choice == "GPT-4o":
-                    gpt_response = process_with_gpt(user_input)
-                elif model_choice == "Claude-3":
-                    claude_response = process_with_claude(user_input)
-                else:  # Both
-                    col1, col2, col3 = st.columns(3)
-                    with col2:
-                        st.subheader("Claude-3.5 Sonnet:")
-                        try:
-                            claude_response = process_with_claude(user_input)
-                        except:
-                            st.write('Claude 3.5 Sonnet out of tokens.')
-                    with col1:
-                        st.subheader("GPT-4o Omni:")
-                        try:
-                            gpt_response = process_with_gpt(user_input)  
-                        except:
-                            st.write('GPT 4o out of tokens')
-                    with col3:
-                        st.subheader("Arxiv and Mistral Research:")
+        try:
+            # Initialize speech component
+            current_transcript = integrate_speech_component()
+            
+            # Show last update time
+            st.text(f"Last updated: {datetime.fromtimestamp(st.session_state.last_update).strftime('%H:%M:%S')}")
+            
+            # Process buttons if we have a transcript
+            if current_transcript:
+                col1, col2, col3 = st.columns(3)
+                
+                with col1:
+                    if st.button("Process with GPT"):
+                        with st.spinner("Processing with GPT..."):
+                            response = process_with_gpt(current_transcript)
+                            st.markdown(response)
+                
+                with col2:
+                    if st.button("Process with Claude"):
+                        with st.spinner("Processing with Claude..."):
+                            response = process_with_claude(current_transcript)
+                            st.markdown(response)
+                
+                with col3:
+                    if st.button("Search ArXiv"):
                         with st.spinner("Searching ArXiv..."):
-                            #results = search_arxiv(user_input)
-                            results = perform_ai_lookup(user_input)
-                            
+                            results = perform_ai_lookup(current_transcript)
                             st.markdown(results)
-                            
-        # Display Chat History
-        st.subheader("Chat History 📜")
-        tab1, tab2 = st.tabs(["Claude History", "GPT-4o History"])
         
-        with tab1:
-            for chat in st.session_state.chat_history:
-                st.text_area("You:", chat["user"], height=100)
-                st.text_area("Claude:", chat["claude"], height=200)
-                st.markdown(chat["claude"])
-        
-        with tab2:
-            for message in st.session_state.messages:
-                with st.chat_message(message["role"]):
-                    st.markdown(message["content"])
-    
-    elif tab_main == "📸 Media Gallery":
-        create_media_gallery()
-    
-    elif tab_main == "🔍 Search ArXiv":
-        query = st.text_input("Enter your research query:")
-        if query:
-            with st.spinner("Searching ArXiv..."):
-                results = search_arxiv(query)
-                st.markdown(results)
-    
-    elif tab_main == "📝 File Editor":
-        if hasattr(st.session_state, 'current_file'):
-            st.subheader(f"Editing: {st.session_state.current_file}")
-            new_content = st.text_area("Content:", st.session_state.file_content, height=300)
-            if st.button("Save Changes"):
-                with open(st.session_state.current_file, 'w', encoding='utf-8') as file:
-                    file.write(new_content)
-                st.success("File updated successfully!")
-    
+        except Exception as e:
+            st.error(f"Error in voice input: {str(e)}")
+            
 
     # Always show file manager in sidebar
     display_file_manager()