Update app.py

app.py

@@ -31,25 +31,35 @@ from urllib.parse import quote
 from xml.etree import ElementTree as ET
 from openai import OpenAI
 
-# 1. Configuration and Setup
-Site_Name = '🚲BikeAI🏆 Claude and GPT Multi-Agent Research AI'
-title = "🚲BikeAI🏆 Claude and GPT Multi-Agent Research AI"
-helpURL = 'https://huggingface.co/awacke1'
-bugURL = 'https://huggingface.co/spaces/awacke1'
-icons = '🚲🏆'
-
+# Page Configuration
 st.set_page_config(
-    page_title=title,
-    page_icon=icons,
+    page_title="🚲BikeAI🏆 Claude and GPT Multi-Agent Research AI",
+    page_icon="🚲🏆",
     layout="wide",
     initial_sidebar_state="auto",
     menu_items={
-        'Get Help': helpURL,
-        'Report a bug': bugURL,
-        'About': title
+        'Get Help': 'https://huggingface.co/awacke1',
+        'Report a bug': 'https://huggingface.co/spaces/awacke1',
+        'About': "🚲BikeAI🏆 Claude and GPT Multi-Agent Research AI"
     }
 )
 
+# Initialize Session States
+if 'transcript' not in st.session_state:
+    st.session_state.transcript = ""
+if "messages" not in st.session_state:
+    st.session_state.messages = []
+if "chat_history" not in st.session_state:
+    st.session_state.chat_history = []
+
+
+# Function to Process Voice Input
+def process_transcript(transcript):
+    if transcript:
+        st.session_state.transcript += transcript
+        st.markdown(f"### Updated Transcript:\n{st.session_state.transcript}")
+
+
 # 2. Load environment variables and initialize clients
 load_dotenv()
 
@@ -141,58 +151,6 @@ st.markdown("""
 """, unsafe_allow_html=True)
 
 
-# Bike Collections
-bike_collections = {
-    "Celestial Collection 🌌": {
-        "Eclipse Vaulter": {
-            "prompt": """Cinematic shot of a sleek black mountain bike silhouetted against a total solar eclipse. 
-                     The corona creates an ethereal halo effect, with lens flares accentuating key points of the frame.
-                     Dynamic composition shows the bike mid-leap, with stardust particles trailing behind.
-                     Camera angle: Low angle, wide shot
-                     Lighting: Dramatic rim lighting from eclipse
-                     Color palette: Deep purples, cosmic blues, corona gold""",
-            "emoji": "🌑"
-        },
-        "Starlight Leaper": {
-            "prompt": """A black bike performing an epic leap under a vast Milky Way galaxy.
-                     Shimmering stars blanket the sky while the bike's wheels leave a trail of stardust.
-                     Camera angle: Wide-angle upward shot
-                     Lighting: Natural starlight with subtle rim lighting
-                     Color palette: Deep blues, silver highlights, cosmic purples""",
-            "emoji": "✨"
-        },
-        "Moonlit Hopper": {
-            "prompt": """A sleek black bike mid-hop over a moonlit meadow,
-                     the full moon illuminating the misty surroundings. Fireflies dance around the bike,
-                     and soft shadows create a serene yet dynamic atmosphere.
-                     Camera angle: Side profile with slight low angle
-                     Lighting: Soft moonlight with atmospheric fog
-                     Color palette: Silver blues, soft whites, deep shadows""",
-            "emoji": "🌙"
-        }
-    },
-    "Nature-Inspired Collection 🌲": {
-        "Shadow Grasshopper": {
-            "prompt": """A black bike jumping between forest paths,
-                     with dappled sunlight streaming through the canopy. Shadows dance on the bike's frame
-                     as it soars above mossy logs.
-                     Camera angle: Through-the-trees tracking shot
-                     Lighting: Natural forest lighting with sun rays
-                     Color palette: Forest greens, golden sunlight, deep shadows""",
-            "emoji": "🦗"
-        },
-        "Onyx Leapfrog": {
-            "prompt": """A bike with obsidian-black finish jumping over a sparkling creek,
-                     the reflection on the water broken into ripples by the leap. The surrounding forest
-                     is vibrant with greens and browns.
-                     Camera angle: Low angle from water level
-                     Lighting: Golden hour side lighting
-                     Color palette: Deep blacks, water blues, forest greens""",
-            "emoji": "🐸"
-        }
-    }
-}
-
 
 # Helper Functions
 def generate_filename(prompt, file_type):
@@ -747,165 +705,103 @@ def main():
 
 if __name__ == "__main__":
     main()
-
-# Speech Recognition HTML Component
+# Speech Recognition HTML
 speech_recognition_html = """
 <!DOCTYPE html>
 <html>
 <head>
-    <title>Continuous Speech Demo</title>
+    <title>Speech Recognition</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;
-        }
+        body { font-family: Arial, sans-serif; padding: 20px; }
+        #output { padding: 10px; background: #f1f1f1; margin-top: 10px; border-radius: 5px; }
+        button { margin: 5px; padding: 10px 15px; font-size: 14px; }
     </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>
+    <h1>🎤 Continuous Speech Recognition</h1>
+    <div>
+        <button id="start">Start</button>
+        <button id="stop" disabled>Stop</button>
+        <button id="clear">Clear</button>
     </div>
-    <div id="status">Ready</div>
     <div id="output"></div>
 
     <script>
-        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 = '';
-            let lastUpdateTime = Date.now();
-
-            // Configure recognition
-            recognition.continuous = true;
-            recognition.interimResults = true;
-
-            // Function to start recognition
-            const startRecognition = () => {
-                try {
-                    recognition.start();
-                    status.textContent = 'Listening...';
-                    startButton.disabled = true;
-                    stopButton.disabled = false;
-                } catch (e) {
-                    console.error(e);
-                    status.textContent = 'Error: ' + e.message;
+        const recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();
+        recognition.continuous = true;
+        recognition.interimResults = true;
+
+        let finalTranscript = '';
+        const startButton = document.getElementById('start');
+        const stopButton = document.getElementById('stop');
+        const clearButton = document.getElementById('clear');
+        const output = document.getElementById('output');
+
+        startButton.onclick = () => {
+            recognition.start();
+            startButton.disabled = true;
+            stopButton.disabled = false;
+        };
+
+        stopButton.onclick = () => {
+            recognition.stop();
+            startButton.disabled = false;
+            stopButton.disabled = true;
+        };
+
+        clearButton.onclick = () => {
+            finalTranscript = '';
+            output.textContent = '';
+            window.parent.postMessage({ type: 'clear_transcript' }, '*');
+        };
+
+        recognition.onresult = (event) => {
+            let interimTranscript = '';
+            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';
+                } else {
+                    interimTranscript += transcript;
                 }
-            };
-
-            // Auto-start on load
-            window.addEventListener('load', () => {
-                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 = '';
-
-                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';
-                    } else {
-                        interimTranscript += transcript;
-                    }
-                }
-
-                if (finalTranscript || (Date.now() - lastUpdateTime > 5000)) {
-                    if (finalTranscript) {
-                        fullTranscript += finalTranscript;
-                        // Send to Streamlit
-                        window.parent.postMessage({
-                            type: 'final_transcript',
-                            text: finalTranscript
-                        }, '*');
-                    }
-                    lastUpdateTime = Date.now();
-                }
-
-                output.textContent = fullTranscript + (interimTranscript ? '... ' + interimTranscript : '');
-                output.scrollTop = output.scrollHeight;
-            };
-
-            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;
-                }
-            };
-        }
+            }
+            output.textContent = finalTranscript + interimTranscript;
+            window.parent.postMessage({ type: 'final_transcript', text: finalTranscript }, '*');
+        };
     </script>
 </body>
 </html>
 """
 
+# Embed Speech Recognition HTML
+st.components.v1.html(speech_recognition_html, height=400)
+
+# Listen for Transcript Updates
+if "last_message" in st.session_state:
+    try:
+        if st.session_state.last_message["type"] == "final_transcript":
+            process_transcript(st.session_state.last_message["text"])
+        elif st.session_state.last_message["type"] == "clear_transcript":
+            st.session_state.transcript = ""
+            st.experimental_rerun()
+    except KeyError:
+        pass
+
+# File Management Functions
+def generate_filename(prompt, file_type):
+    """Generate a unique filename."""
+    central = pytz.timezone('US/Central')
+    safe_date_time = datetime.now(central).strftime("%m%d_%H%M")
+    safe_prompt = re.sub(r'\W+', '_', prompt)[:90]
+    return f"{safe_date_time}_{safe_prompt}.{file_type}"
+
+def create_file(filename, content):
+    """Save content to a file."""
+    with open(filename, 'w', encoding='utf-8') as f:
+        f.write(content)
+
+
+        
 # Helper Functions
 def generate_filename(prompt, file_type):
     central = pytz.timezone('US/Central')