Update app.py

app.py

@@ -31,35 +31,25 @@ from urllib.parse import quote
 from xml.etree import ElementTree as ET
 from openai import OpenAI
 
-# Page Configuration
+# 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 = '🚲🏆'
+
 st.set_page_config(
-    page_title="🚲BikeAI🏆 Claude and GPT Multi-Agent Research AI",
-    page_icon="🚲🏆",
+    page_title=title,
+    page_icon=icons,
     layout="wide",
     initial_sidebar_state="auto",
     menu_items={
-        'Get Help': 'https://huggingface.co/awacke1',
-        'Report a bug': 'https://huggingface.co/spaces/awacke1',
-        'About': "🚲BikeAI🏆 Claude and GPT Multi-Agent Research AI"
+        'Get Help': helpURL,
+        'Report a bug': bugURL,
+        'About': title
     }
 )
 
-# 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()
 
@@ -151,6 +141,58 @@ 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):
@@ -705,103 +747,165 @@ def main():
 
 if __name__ == "__main__":
     main()
-# Speech Recognition HTML
+
+# Speech Recognition HTML Component
 speech_recognition_html = """
 <!DOCTYPE html>
 <html>
 <head>
-    <title>Speech Recognition</title>
+    <title>Continuous Speech Demo</title>
     <style>
-        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; }
+        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>
-    <h1>🎤 Continuous Speech Recognition</h1>
-    <div>
-        <button id="start">Start</button>
-        <button id="stop" disabled>Stop</button>
-        <button id="clear">Clear</button>
+    <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>
 
     <script>
-        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;
+        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;
                 }
-            }
-            output.textContent = finalTranscript + interimTranscript;
-            window.parent.postMessage({ type: 'final_transcript', text: finalTranscript }, '*');
-        };
+            };
+
+            // 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: fullTranscript
+                        }, '*');
+                    }
+                    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;
+                }
+            };
+        }
     </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')
@@ -993,7 +1097,34 @@ def main():
                     
                     elif data.get('type') == 'clear_transcript':
                         st.session_state.last_voice_input = ""
-                        st.experimental_rerun()
+                        st.rerun()
+
+                
+                
+                # HTML Component
+                speech_recognition_html = """
+                <!DOCTYPE html>
+                <html>
+                <body>
+                    <!-- Your full speech recognition HTML here -->
+                </body>
+                </html>
+                """
+                
+                # Add a placeholder for the transcript
+                if "transcript" not in st.session_state:
+                    st.session_state.transcript = ""
+                
+                def update_transcript(message):
+                    """Update transcript in session state."""
+                    if message and message.get("type") == "final_transcript":
+                        st.session_state.transcript += message.get("text", "")
+                
+                # Embed the HTML
+                st.components.v1.html(speech_recognition_html, height=400)
+                
+                # Display the transcript
+                st.markdown(f"### Transcript:\n{st.session_state.transcript}")
                         
             except Exception as e:
                 st.error(f"Error processing voice input: {e}")