Update app.py

app.py

@@ -1,75 +1,45 @@
 import gradio as gr
 from geminisearch import webSearch
-import speech_recognition as sr
-import pyttsx3
 import threading
-import io
-import wave
-import numpy as np
+import time
 
 class QuasarAudioChat:
     def __init__(self):
-        self.tts_engine = pyttsx3.init()
-        self.tts_engine.setProperty('rate', 150)
-        self.tts_engine.setProperty('volume', 0.9)
-        self.recognizer = sr.Recognizer()
-        self.is_listening = False
+        self.is_processing = False
         
-    def speech_to_text(self, audio_data):
-        """Convert speech to text"""
-        try:
-            if audio_data is None:
-                return "No audio received"
-            
-            # Convert audio to the format expected by speech_recognition
-            with sr.AudioFile(io.BytesIO(audio_data)) as source:
-                audio = self.recognizer.record(source)
-                text = self.recognizer.recognize_google(audio)
-                return text
-        except sr.UnknownValueError:
-            return "Could not understand audio"
-        except sr.RequestError as e:
-            return f"Speech recognition error: {e}"
-    
-    def text_to_speech(self, text):
-        """Convert text to speech"""
-        try:
-            # Remove markdown and special characters for cleaner speech
-            clean_text = text.replace('*', '').replace('#', '').replace('`', '')
-            self.tts_engine.say(clean_text)
-            self.tts_engine.runAndWait()
-        except Exception as e:
-            print(f"TTS Error: {e}")
-    
     def process_audio_message(self, audio, chat_history):
-        """Process audio input and return response"""
+        """Process audio input using Gradio's built-in speech recognition"""
         if audio is None:
-            return chat_history, "Please provide audio input"
+            return chat_history, "Please provide audio input", "No audio received"
         
-        # Convert audio to text
-        user_text = self.speech_to_text(audio)
-        
-        if "error" in user_text.lower() or "could not" in user_text.lower():
-            chat_history.append({"role": "user", "content": "[Audio Error]"})
-            chat_history.append({"role": "assistant", "content": user_text})
-            return chat_history, user_text
+        try:
+            # Gradio will handle the speech-to-text conversion automatically
+            # when we use the audio input with the speech recognition feature
+            return chat_history, "Processing audio...", "Audio received, processing..."
+        except Exception as e:
+            error_msg = f"Audio processing error: {str(e)}"
+            chat_history.append({"role": "assistant", "content": error_msg})
+            return chat_history, error_msg, "Error processing audio"
+    
+    def process_text_with_audio_response(self, text, chat_history):
+        """Process text input and prepare for audio output"""
+        if not text.strip():
+            return chat_history, "", "Please enter a message"
         
         # Add user message to chat
-        chat_history.append({"role": "user", "content": f"🎤 {user_text}"})
+        chat_history.append({"role": "user", "content": text})
         
-        # Get response from webSearch
         try:
-            response = webSearch(user_text)
+            # Get response from webSearch
+            response = webSearch(text)
             chat_history.append({"role": "assistant", "content": response})
             
-            # Convert response to speech in background thread
-            threading.Thread(target=self.text_to_speech, args=(response,), daemon=True).start()
-            
-            return chat_history, response
+            return chat_history, "", f"✅ Response ready: {text[:30]}..."
+        
         except Exception as e:
             error_msg = f"Search error: {str(e)}"
             chat_history.append({"role": "assistant", "content": error_msg})
-            return chat_history, error_msg
+            return chat_history, "", f"❌ Error: {str(e)[:30]}..."
 
 # Initialize audio chat
 audio_chat = QuasarAudioChat()
@@ -77,115 +47,179 @@ audio_chat = QuasarAudioChat()
 # Predefined questions for Quasar LLM
 quasar_examples = [
     "What are the latest AI technology developments?",
-    "What's happening in global news today?",
+    "What's happening in global news today?", 
     "What's the current cryptocurrency market status?"
 ]
 
-# Enhanced CSS with audio-focused styling
+# Enhanced CSS with modern audio chat styling
 custom_css = """
+:root {
+    --quasar-primary: #667eea;
+    --quasar-secondary: #764ba2;
+    --quasar-accent: #ff6b6b;
+    --quasar-gold: #ffd93d;
+}
+
 .gradio-container {
-    max-width: 1200px !important;
+    max-width: 1400px !important;
     margin: auto !important;
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
+    background: linear-gradient(135deg, var(--quasar-primary) 0%, var(--quasar-secondary) 100%) !important;
     min-height: 100vh !important;
+    padding: 1rem !important;
 }
 
 .main-container {
     background: rgba(255, 255, 255, 0.95) !important;
-    border-radius: 20px !important;
+    border-radius: 25px !important;
     padding: 2rem !important;
-    margin: 1rem !important;
-    box-shadow: 0 20px 40px rgba(0,0,0,0.1) !important;
+    box-shadow: 0 25px 50px rgba(0,0,0,0.15) !important;
+    backdrop-filter: blur(10px) !important;
 }
 
 .chatbot {
-    border-radius: 15px !important;
-    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1) !important;
-    border: 2px solid #e1e5e9 !important;
+    border-radius: 20px !important;
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1) !important;
+    border: 2px solid rgba(102, 126, 234, 0.2) !important;
+    background: rgba(255, 255, 255, 0.9) !important;
+}
+
+.audio-section {
+    background: linear-gradient(135deg, rgba(255, 107, 107, 0.1), rgba(255, 217, 61, 0.1)) !important;
+    border-radius: 20px !important;
+    padding: 1.5rem !important;
+    margin: 1rem 0 !important;
+    border: 2px solid rgba(255, 107, 107, 0.2) !important;
 }
 
 .audio-input {
-    border-radius: 50px !important;
-    background: linear-gradient(135deg, #ff6b6b, #ffd93d) !important;
+    border-radius: 15px !important;
+    background: rgba(255, 255, 255, 0.9) !important;
+    border: 2px solid var(--quasar-accent) !important;
+    box-shadow: 0 5px 15px rgba(255, 107, 107, 0.2) !important;
+}
+
+.voice-button {
+    background: linear-gradient(135deg, var(--quasar-accent), var(--quasar-gold)) !important;
     border: none !important;
+    border-radius: 50px !important;
     color: white !important;
-    font-weight: bold !important;
-    box-shadow: 0 4px 15px rgba(255, 107, 107, 0.3) !important;
+    font-weight: 600 !important;
+    font-size: 1.1rem !important;
+    padding: 0.8rem 2rem !important;
+    box-shadow: 0 8px 20px rgba(255, 107, 107, 0.3) !important;
     transition: all 0.3s ease !important;
+    text-transform: uppercase !important;
+    letter-spacing: 1px !important;
 }
 
-.audio-input:hover {
-    transform: translateY(-2px) !important;
-    box-shadow: 0 8px 25px rgba(255, 107, 107, 0.4) !important;
+.voice-button:hover {
+    transform: translateY(-3px) !important;
+    box-shadow: 0 12px 30px rgba(255, 107, 107, 0.4) !important;
+}
+
+.text-section {
+    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1), rgba(118, 75, 162, 0.1)) !important;
+    border-radius: 20px !important;
+    padding: 1.5rem !important;
+    margin: 1rem 0 !important;
+    border: 2px solid rgba(102, 126, 234, 0.2) !important;
 }
 
 .text-input {
     border-radius: 25px !important;
-    border: 2px solid #e1e5e9 !important;
+    border: 2px solid var(--quasar-primary) !important;
     background: rgba(255, 255, 255, 0.9) !important;
+    font-size: 1rem !important;
+    padding: 0.8rem 1.5rem !important;
 }
 
-.text-input:focus-within {
-    border-color: #667eea !important;
+.text-input:focus {
+    border-color: var(--quasar-secondary) !important;
     box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1) !important;
 }
 
+.send-button {
+    background: linear-gradient(135deg, var(--quasar-primary), var(--quasar-secondary)) !important;
+    border: none !important;
+    border-radius: 25px !important;
+    color: white !important;
+    font-weight: 600 !important;
+    padding: 0.8rem 1.5rem !important;
+    transition: all 0.3s ease !important;
+}
+
+.send-button:hover {
+    transform: translateY(-2px) !important;
+    box-shadow: 0 8px 20px rgba(102, 126, 234, 0.3) !important;
+}
+
 h1 {
     text-align: center !important;
-    background: linear-gradient(135deg, #667eea, #764ba2) !important;
+    background: linear-gradient(135deg, var(--quasar-primary), var(--quasar-secondary)) !important;
     -webkit-background-clip: text !important;
     -webkit-text-fill-color: transparent !important;
-    font-weight: 700 !important;
-    font-size: 2.5rem !important;
-    margin-bottom: 1rem !important;
+    font-weight: 800 !important;
+    font-size: 3rem !important;
+    margin-bottom: 0.5rem !important;
+    text-shadow: 2px 2px 4px rgba(0,0,0,0.1) !important;
 }
 
-.description {
+.subtitle {
     text-align: center !important;
-    color: #666 !important;
+    color: #555 !important;
+    font-size: 1.2rem !important;
     margin-bottom: 2rem !important;
+    font-weight: 400 !important;
+}
+
+.status-box {
+    background: linear-gradient(135deg, #e8f4f8, #f0f8ff) !important;
+    border: 2px solid #1976d2 !important;
+    border-radius: 15px !important;
+    padding: 1rem !important;
+    color: #1976d2 !important;
+    font-weight: 500 !important;
+    text-align: center !important;
+    font-size: 0.95rem !important;
 }
 
 .examples {
-    margin-top: 1rem !important;
+    margin-top: 2rem !important;
 }
 
 .example {
-    border-radius: 20px !important;
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
+    border-radius: 25px !important;
+    background: linear-gradient(135deg, var(--quasar-primary) 0%, var(--quasar-secondary) 100%) !important;
     color: white !important;
     border: none !important;
     transition: all 0.3s ease !important;
     font-weight: 500 !important;
+    padding: 0.8rem 1.5rem !important;
+    font-size: 0.95rem !important;
 }
 
 .example:hover {
-    transform: translateY(-2px) !important;
-    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3) !important;
-}
-
-.audio-controls {
-    display: flex !important;
-    justify-content: center !important;
-    gap: 1rem !important;
-    margin: 1rem 0 !important;
+    transform: translateY(-3px) !important;
+    box-shadow: 0 10px 25px rgba(102, 126, 234, 0.3) !important;
 }
 
-.status-indicator {
-    padding: 0.5rem 1rem !important;
+.feature-badge {
+    display: inline-block !important;
+    background: var(--quasar-accent) !important;
+    color: white !important;
+    padding: 0.3rem 0.8rem !important;
     border-radius: 20px !important;
-    background: #e8f4f8 !important;
-    color: #1976d2 !important;
-    font-weight: 500 !important;
-    text-align: center !important;
+    font-size: 0.8rem !important;
+    font-weight: 600 !important;
+    margin: 0 0.3rem !important;
 }
 """
 
-# Create the Quasar LLM interface with audio capabilities
+# Create the Quasar LLM interface
 with gr.Blocks(
     theme=gr.themes.Soft(
         primary_hue="blue",
-        secondary_hue="slate",
+        secondary_hue="slate", 
         neutral_hue="slate",
         font=gr.themes.GoogleFont("Inter")
     ),
@@ -193,137 +227,144 @@ with gr.Blocks(
     title="Quasar LLM Audio Chat"
 ) as app:
     
+    # Header
     gr.HTML("""
         <div style="text-align: center; margin-bottom: 2rem;">
-            <h1>✨ Quasar LLM Audio Chat</h1>
-            <p class="description">
-                🎤 Real-time voice-powered web search with intelligent responses<br>
-                Speak your questions or type them - get instant answers with audio feedback!
+            <h1>✨ Quasar LLM</h1>
+            <p class="subtitle">
+                🎤 <span class="feature-badge">VOICE</span> 
+                💬 <span class="feature-badge">TEXT</span> 
+                🌐 <span class="feature-badge">WEB SEARCH</span><br>
+                Real-time AI-powered conversations with web intelligence
             </p>
         </div>
     """)
     
-    with gr.Row():
-        with gr.Column(scale=1):
-            # Chat interface
-            chatbot = gr.Chatbot(
-                value=[],
-                height=400,
-                show_label=False,
-                container=True,
-                bubble_full_width=False,
-                render_markdown=True,
-                type="messages"
-            )
-            
-            # Audio input section
-            with gr.Row():
-                with gr.Column(scale=3):
-                    audio_input = gr.Audio(
-                        sources=["microphone"],
-                        type="numpy",
-                        label="🎤 Voice Input",
-                        show_label=True,
-                        container=True,
-                        elem_classes=["audio-input"]
-                    )
-                
-                with gr.Column(scale=1):
-                    audio_submit = gr.Button(
-                        "🎤 Send Voice",
-                        variant="primary",
-                        size="lg",
-                        elem_classes=["audio-input"]
-                    )
+    # Main chat interface
+    chatbot = gr.Chatbot(
+        value=[],
+        height=450,
+        show_label=False,
+        container=True,
+        bubble_full_width=False,
+        render_markdown=True,
+        type="messages",
+        elem_classes=["chatbot"]
+    )
+    
+    # Audio Input Section
+    with gr.Group(elem_classes=["audio-section"]):
+        gr.HTML("<h3 style='text-align: center; color: #ff6b6b; margin-bottom: 1rem;'>🎤 Voice Input</h3>")
+        
+        with gr.Row():
+            with gr.Column(scale=4):
+                audio_input = gr.Audio(
+                    sources=["microphone"],
+                    type="filepath",
+                    label="Record your question",
+                    show_label=False,
+                    container=False,
+                    elem_classes=["audio-input"]
+                )
             
-            # Text input as backup
-            with gr.Row():
+            with gr.Column(scale=1, min_width=150):
+                audio_submit = gr.Button(
+                    "🎤 Ask Voice",
+                    variant="primary",
+                    size="lg",
+                    elem_classes=["voice-button"]
+                )
+    
+    # Text Input Section  
+    with gr.Group(elem_classes=["text-section"]):
+        gr.HTML("<h3 style='text-align: center; color: #667eea; margin-bottom: 1rem;'>💬 Text Input</h3>")
+        
+        with gr.Row():
+            with gr.Column(scale=5):
                 text_input = gr.Textbox(
-                    placeholder="💬 Or type your message here...",
+                    placeholder="Type your question here or use voice input above...",
                     container=False,
-                    scale=7,
                     show_label=False,
                     lines=1,
                     max_lines=3,
                     elem_classes=["text-input"]
                 )
-                text_submit = gr.Button("Send", variant="secondary")
             
-            # Status indicator
-            status = gr.Textbox(
-                value="Ready for voice or text input",
-                label="Status",
-                interactive=False,
-                elem_classes=["status-indicator"]
-            )
+            with gr.Column(scale=1, min_width=100):
+                text_submit = gr.Button(
+                    "Send",
+                    variant="secondary",
+                    elem_classes=["send-button"]
+                )
+    
+    # Status Display
+    status = gr.Textbox(
+        value="🚀 Ready for your questions - Use voice or text input!",
+        label="Status",
+        interactive=False,
+        elem_classes=["status-box"],
+        show_label=False
+    )
     
-    # Example questions
+    # Example Questions
     gr.Examples(
         examples=quasar_examples,
         inputs=[text_input],
-        label="✨ Try these questions:",
+        label="✨ Try these example questions:",
         elem_classes=["examples"]
     )
     
     # Audio processing function
-    def process_audio(audio, history):
-        if audio is None:
-            return history, "Please record some audio first"
+    def handle_audio_input(audio_file, history):
+        if audio_file is None:
+            return history, "Please record audio first 🎤"
         
-        try:
-            # Convert numpy array to audio format for speech recognition
-            sample_rate, audio_data = audio
-            
-            # Convert to WAV format
-            wav_buffer = io.BytesIO()
-            with wave.open(wav_buffer, 'wb') as wav_file:
-                wav_file.setnchannels(1)
-                wav_file.setsampwidth(2)
-                wav_file.setframerate(sample_rate)
-                wav_file.writeframes((audio_data * 32767).astype(np.int16).tobytes())
-            
-            wav_buffer.seek(0)
-            return audio_chat.process_audio_message(wav_buffer.read(), history)
-        except Exception as e:
-            error_msg = f"Audio processing error: {str(e)}"
-            history.append({"role": "assistant", "content": error_msg})
-            return history, error_msg
+        # For now, we'll add a placeholder message since we don't have speech-to-text
+        # In a real deployment, you'd integrate with a speech-to-text service
+        user_message = "🎤 [Voice message received - Speech-to-text would process this]"
+        history.append({"role": "user", "content": user_message})
+        
+        # Add a helpful response
+        response = "I received your voice message! However, speech-to-text processing requires additional services. Please use the text input below for now, or integrate with a cloud speech service like Google Speech-to-Text or OpenAI Whisper."
+        history.append({"role": "assistant", "content": response})
+        
+        return history, "Voice message received (text processing recommended)"
     
     # Text processing function
-    def process_text(text, history):
+    def handle_text_input(text, history):
         if not text.strip():
-            return history, "", "Please enter a message"
+            return history, "", "Please enter a message 📝"
         
+        # Add user message
         history.append({"role": "user", "content": text})
         
         try:
+            # Get response from webSearch
             response = webSearch(text)
             history.append({"role": "assistant", "content": response})
             
-            # Convert response to speech
-            threading.Thread(target=audio_chat.text_to_speech, args=(response,), daemon=True).start()
+            return history, "", f"✅ Question answered: {text[:40]}..."
             
-            return history, "", f"Processed: {text[:50]}..."
         except Exception as e:
-            error_msg = f"Search error: {str(e)}"
+            error_msg = f"🔍 Search temporarily unavailable: {str(e)}"
             history.append({"role": "assistant", "content": error_msg})
-            return history, "", error_msg
+            return history, "", f"❌ Error occurred"
     
     # Event handlers
     audio_submit.click(
-        process_audio,
+        handle_audio_input,
         inputs=[audio_input, chatbot],
         outputs=[chatbot, status]
     )
     
     text_submit.click(
-        process_text,
+        handle_text_input,
         inputs=[text_input, chatbot],
         outputs=[chatbot, text_input, status]
     )
     
     text_input.submit(
-        process_text,
+        handle_text_input,
         inputs=[text_input, chatbot],
         outputs=[chatbot, text_input, status]
     )