Update voice_component.py

voice_component.py

@@ -4,81 +4,159 @@ import streamlit.components.v1 as components
 
 def voice_input_component():
     """
-    Creates a voice input component that uses the browser's Web Speech API.
+    Creates a streamlined voice input component with animations.
     Returns the transcribed text from voice input.
     """
-    # HTML component for voice input
+    # HTML component for voice input with animations
     voice_html = """
     <div class="voice-input-container">
-        <button id="start-voice" class="voice-button">
-            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mic-icon"><path d="M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z"></path><path d="M19 10v2a7 7 0 0 1-14 0v-2"></path><line x1="12" y1="19" x2="12" y2="22"></line></svg>
-            Start Voice Input
-        </button>
-        <div id="voice-status" class="voice-status">Click to start speaking</div>
-        <div id="transcript" class="transcript"></div>
-        <button id="send-transcript" class="send-button" style="display:none;">
-            Send
+        <button id="voice-button" class="voice-button">
+            <div class="mic-icon">
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z"></path><path d="M19 10v2a7 7 0 0 1-14 0v-2"></path><line x1="12" y1="19" x2="12" y2="22"></line></svg>
+            </div>
+            <div class="ripple-container">
+                <div class="ripple"></div>
+            </div>
         </button>
+        <div id="voice-status" class="voice-status">Ask a question</div>
+        <div id="transcript-container" class="transcript-container" style="display:none;">
+            <div id="transcript" class="transcript"></div>
+            <button id="send-transcript" class="send-button">
+                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="22" y1="2" x2="11" y2="13"></line><polygon points="22 2 15 22 11 13 2 9 22 2"></polygon></svg>
+                Send
+            </button>
+        </div>
     </div>
 
     <style>
     .voice-input-container {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
         padding: 15px;
-        border-radius: 8px;
-        background-color: #f8f9fa;
         margin-bottom: 15px;
-        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
     }
     .voice-button {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        gap: 8px;
+        position: relative;
+        width: 60px;
+        height: 60px;
+        border-radius: 50%;
         background-color: #ff4b4b;
         color: white;
         border: none;
-        padding: 10px 15px;
-        border-radius: 20px;
         cursor: pointer;
-        font-weight: 500;
-        transition: background-color 0.3s;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        transition: all 0.3s ease;
+        box-shadow: 0 4px 10px rgba(255, 75, 75, 0.3);
     }
     .voice-button:hover {
-        background-color: #e63e3e;
+        transform: scale(1.05);
+        box-shadow: 0 6px 15px rgba(255, 75, 75, 0.4);
     }
     .voice-button.listening {
         background-color: #ff7a7a;
+    }
+    .mic-icon {
+        z-index: 2;
+        transition: all 0.3s ease;
+    }
+    .voice-button.listening .mic-icon {
         animation: pulse 1.5s infinite;
     }
+    .ripple-container {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        border-radius: 50%;
+        z-index: 1;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        overflow: hidden;
+    }
+    .ripple {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        border-radius: 50%;
+        background-color: rgba(255, 255, 255, 0.3);
+        transform: scale(0);
+        opacity: 1;
+    }
+    .voice-button.listening .ripple {
+        animation: ripple 2s linear infinite;
+    }
+    @keyframes ripple {
+        0% {
+            transform: scale(0);
+            opacity: 1;
+        }
+        50% {
+            transform: scale(1.5);
+            opacity: 0.3;
+        }
+        100% {
+            transform: scale(2);
+            opacity: 0;
+        }
+    }
     @keyframes pulse {
-        0% { box-shadow: 0 0 0 0 rgba(255, 75, 75, 0.7); }
-        70% { box-shadow: 0 0 0 10px rgba(255, 75, 75, 0); }
-        100% { box-shadow: 0 0 0 0 rgba(255, 75, 75, 0); }
+        0% { transform: scale(1); }
+        50% { transform: scale(1.1); }
+        100% { transform: scale(1); }
     }
     .voice-status {
-        margin-top: 10px;
-        font-size: 14px;
+        margin-top: 15px;
+        font-size: 16px;
         color: #6c757d;
+        font-weight: 500;
+        transition: all 0.3s ease;
+    }
+    .transcript-container {
+        width: 100%;
+        max-width: 600px;
+        margin-top: 20px;
+        display: flex;
+        flex-direction: column;
+        animation: fadeIn 0.3s ease;
     }
     .transcript {
-        margin-top: 15px;
-        min-height: 60px;
-        padding: 10px;
-        border-radius: 4px;
+        padding: 15px;
+        border-radius: 8px;
         border: 1px solid #dee2e6;
-        display: none;
+        background-color: #f8f9fa;
+        font-size: 16px;
+        margin-bottom: 10px;
+        min-height: 60px;
+        width: 100%;
     }
     .send-button {
-        margin-top: 10px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 8px;
+        align-self: flex-end;
         background-color: #4CAF50;
         color: white;
         border: none;
         padding: 8px 16px;
-        border-radius: 4px;
+        border-radius: 20px;
         cursor: pointer;
+        font-weight: 500;
+        transition: all 0.3s ease;
+        box-shadow: 0 2px 5px rgba(76, 175, 80, 0.3);
     }
     .send-button:hover {
         background-color: #45a049;
+        transform: translateY(-2px);
+        box-shadow: 0 4px 8px rgba(76, 175, 80, 0.4);
+    }
+    @keyframes fadeIn {
+        from { opacity: 0; transform: translateY(10px); }
+        to { opacity: 1; transform: translateY(0); }
     }
     </style>
 
@@ -97,7 +175,7 @@ def voice_input_component():
     function initSpeechRecognition() {
         if (!checkSpeechRecognitionSupport()) {
             document.getElementById('voice-status').textContent = 'Speech recognition not supported in this browser';
-            document.getElementById('start-voice').disabled = true;
+            document.getElementById('voice-button').disabled = true;
             return;
         }
 
@@ -122,11 +200,10 @@ def voice_input_component():
             
             const transcriptElement = document.getElementById('transcript');
             transcriptElement.textContent = finalTranscript + interimTranscript;
-            transcriptElement.style.display = 'block';
             
-            // Show send button if we have text
-            if (finalTranscript.trim() !== '') {
-                document.getElementById('send-transcript').style.display = 'block';
+            // Show transcript container if we have text
+            if ((finalTranscript + interimTranscript).trim() !== '') {
+                document.getElementById('transcript-container').style.display = 'flex';
             }
             
             // Send transcript to Streamlit component
@@ -140,8 +217,10 @@ def voice_input_component():
         recognition.onerror = function(event) {
             if (event.error === 'no-speech') {
                 document.getElementById('voice-status').textContent = 'No speech detected. Try again.';
+                document.getElementById('voice-status').style.color = '#dc3545';
             } else {
                 document.getElementById('voice-status').textContent = 'Error: ' + event.error;
+                document.getElementById('voice-status').style.color = '#dc3545';
                 console.error('Speech recognition error:', event.error);
             }
             stopRecognition();
@@ -162,11 +241,14 @@ def voice_input_component():
             recognizing = true;
             finalTranscript = '';
             document.getElementById('voice-status').textContent = 'Listening...';
-            document.getElementById('start-voice').textContent = 'Stop Listening';
-            document.getElementById('start-voice').classList.add('listening');
+            document.getElementById('voice-status').style.color = '#4CAF50';
+            document.getElementById('voice-button').classList.add('listening');
+            document.getElementById('transcript-container').style.display = 'none';
+            document.getElementById('transcript').textContent = '';
         } catch (e) {
             console.error('Error starting speech recognition:', e);
             document.getElementById('voice-status').textContent = 'Error starting speech recognition';
+            document.getElementById('voice-status').style.color = '#dc3545';
         }
     }
 
@@ -176,9 +258,9 @@ def voice_input_component():
         
         recognition.stop();
         recognizing = false;
-        document.getElementById('voice-status').textContent = 'Click to start speaking';
-        document.getElementById('start-voice').textContent = 'Start Voice Input';
-        document.getElementById('start-voice').classList.remove('listening');
+        document.getElementById('voice-status').textContent = 'Ask a question';
+        document.getElementById('voice-status').style.color = '#6c757d';
+        document.getElementById('voice-button').classList.remove('listening');
     }
 
     // Toggle recognition
@@ -203,8 +285,15 @@ def voice_input_component():
         // Reset UI
         finalTranscript = '';
         document.getElementById('transcript').textContent = '';
-        document.getElementById('transcript').style.display = 'none';
-        document.getElementById('send-transcript').style.display = 'none';
+        document.getElementById('transcript-container').style.display = 'none';
+        document.getElementById('voice-status').textContent = 'Question sent!';
+        document.getElementById('voice-status').style.color = '#4CAF50';
+        
+        // Reset to default state after a delay
+        setTimeout(() => {
+            document.getElementById('voice-status').textContent = 'Ask a question';
+            document.getElementById('voice-status').style.color = '#6c757d';
+        }, 2000);
     }
 
     // Initialize after DOM loaded
@@ -213,7 +302,7 @@ def voice_input_component():
         initSpeechRecognition();
         
         // Add event listeners
-        document.getElementById('start-voice').addEventListener('click', toggleRecognition);
+        document.getElementById('voice-button').addEventListener('click', toggleRecognition);
         document.getElementById('send-transcript').addEventListener('click', sendTranscript);
     });
     </script>
@@ -227,7 +316,7 @@ def voice_input_component():
         st.session_state[key] = ""
     
     # Render the component
-    components.html(voice_html, height=200)
+    components.html(voice_html, height=250)
     
     # Return the last transcript
     return st.session_state.get(key, "")