Hugging Face's logo

Spaces:
awacke1
/
RescuerOfStolenBikes
Running

App Files Community
3
awacke1 commited on
Commit
460cd22
•
1 Parent(s): 0778bdd

Update app.py

Browse files
Files changed (1) hide show
  1. app.py +76 -120
app.py CHANGED
@@ -667,148 +667,104 @@ def main():
667
  transcript_container = st.empty()
668
 
669
  # Modify the JavaScript to use Streamlit's component communication
 
670
  speech_recognition_html = """
671
  <!DOCTYPE html>
672
  <html>
673
  <head>
674
- <title>Continuous Speech Demo</title>
675
- <style>
676
- /* Previous styles remain the same */
677
- </style>
678
  </head>
679
  <body>
680
- <div class="controls">
681
- <button id="start">Start Listening</button>
682
- <button id="stop" disabled>Stop Listening</button>
683
- <button id="clear">Clear Text</button>
 
684
  </div>
685
- <div id="status">Ready</div>
686
- <div id="output"></div>
687
-
688
- <!-- Add a hidden form for communication -->
689
- <form id="form">
690
- <input type="hidden" id="transcript" name="transcript" value="">
691
- </form>
692
-
693
  <script>
694
- if (!('webkitSpeechRecognition' in window)) {
695
- alert('Speech recognition not supported');
696
- } else {
697
- const recognition = new webkitSpeechRecognition();
698
- const startButton = document.getElementById('start');
699
- const stopButton = document.getElementById('stop');
700
- const clearButton = document.getElementById('clear');
701
- const status = document.getElementById('status');
702
- const output = document.getElementById('output');
703
- const transcriptInput = document.getElementById('transcript');
704
- let fullTranscript = '';
705
-
706
- recognition.continuous = true;
707
- recognition.interimResults = true;
708
-
709
- function updateTranscript(text) {
710
- // Update hidden input
711
- transcriptInput.value = text;
712
 
713
- // Send to Streamlit
714
- window.parent.postMessage({
715
- type: 'streamlit:setComponentValue',
716
- value: text
717
- }, '*');
718
- }
719
-
720
- startButton.onclick = () => {
721
- try {
722
- recognition.start();
723
- status.textContent = 'Listening...';
724
- startButton.disabled = true;
725
- stopButton.disabled = false;
726
- } catch (e) {
727
- status.textContent = 'Error: ' + e.message;
728
- }
729
- };
730
-
731
- stopButton.onclick = () => {
732
- recognition.stop();
733
- status.textContent = 'Stopped';
734
- startButton.disabled = false;
735
- stopButton.disabled = true;
736
- };
737
-
738
- clearButton.onclick = () => {
739
- fullTranscript = '';
740
- output.textContent = '';
741
- updateTranscript('');
742
- };
743
-
744
- recognition.onresult = (event) => {
745
- let interimTranscript = '';
746
- let finalTranscript = '';
747
-
748
- for (let i = event.resultIndex; i < event.results.length; i++) {
749
- const transcript = event.results[i][0].transcript;
750
- if (event.results[i].isFinal) {
751
- finalTranscript += transcript + '\\n';
752
- } else {
753
- interimTranscript += transcript;
754
  }
755
- }
756
-
757
- if (finalTranscript) {
758
- fullTranscript += finalTranscript;
759
- updateTranscript(fullTranscript);
760
- }
761
-
762
- output.textContent = fullTranscript + (interimTranscript ? '... ' + interimTranscript : '');
763
- output.scrollTop = output.scrollHeight;
764
- };
765
-
766
- recognition.onend = () => {
767
- if (!stopButton.disabled) {
768
- try {
769
  recognition.start();
770
- } catch (e) {
771
- status.textContent = 'Error restarting: ' + e.message;
772
- startButton.disabled = false;
773
- stopButton.disabled = true;
774
  }
775
- }
776
- };
777
-
778
- // Auto-start on load
779
- window.addEventListener('load', () => {
780
- setTimeout(() => {
781
- startButton.click();
782
- }, 1000);
783
- });
784
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
785
  </script>
 
 
 
786
  </body>
787
  </html>
788
  """
789
 
790
- # Create component with callback
791
- component_value = components.html(
792
- speech_recognition_html,
793
- height=400,
794
- scrolling=True
795
- )
796
 
797
- # Check for new transcript data in component value
798
- if component_value is not None:
799
- st.session_state.voice_transcript = component_value
800
-
801
- # Display current transcript
802
- st.text_area(
803
- "Current Transcript:",
804
- value=st.session_state.voice_transcript,
805
- height=150,
806
- key="transcript_display"
807
- )
808
 
809
  # Add a refresh button
810
- if st.button("Refresh Transcript"):
811
  st.rerun()
 
 
 
 
 
 
 
 
812
 
813
 
814
 
 
667
  transcript_container = st.empty()
668
 
669
  # Modify the JavaScript to use Streamlit's component communication
670
+ # Create a simpler HTML component that just updates a value we can read
671
  speech_recognition_html = """
672
  <!DOCTYPE html>
673
  <html>
674
  <head>
675
+ <title>Speech Recognition</title>
 
 
 
676
  </head>
677
  <body>
678
+ <div>
679
+ <button id="startButton">Start</button>
680
+ <button id="stopButton" disabled>Stop</button>
681
+ <div id="status">Click Start to begin</div>
682
+ <div id="output"></div>
683
  </div>
684
+
 
 
 
 
 
 
 
685
  <script>
686
+ let recognition;
687
+ let transcript = '';
688
+
689
+ function initSpeechRecognition() {
690
+ if ('webkitSpeechRecognition' in window) {
691
+ recognition = new webkitSpeechRecognition();
692
+ recognition.continuous = true;
693
+ recognition.interimResults = true;
 
 
 
 
 
 
 
 
 
 
694
 
695
+ recognition.onresult = (event) => {
696
+ let interimTranscript = '';
697
+ let finalTranscript = '';
698
+
699
+ for (let i = event.resultIndex; i < event.results.length; i++) {
700
+ const result = event.results[i][0].transcript;
701
+ if (event.results[i].isFinal) {
702
+ finalTranscript += result;
703
+ } else {
704
+ interimTranscript += result;
705
+ }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
706
  }
707
+
708
+ if (finalTranscript) {
709
+ transcript += finalTranscript + ' ';
710
+ document.getElementById('output').innerText = transcript;
711
+ // Set this as the return value for Streamlit
712
+ document.getElementById('streamlit-data').value = transcript;
713
+ }
714
+ };
715
+
716
+ recognition.onend = () => {
717
+ if (!document.getElementById('stopButton').disabled) {
 
 
 
718
  recognition.start();
 
 
 
 
719
  }
720
+ };
721
+ }
 
 
 
 
 
 
 
722
  }
723
+
724
+ document.getElementById('startButton').onclick = () => {
725
+ recognition.start();
726
+ document.getElementById('startButton').disabled = true;
727
+ document.getElementById('stopButton').disabled = false;
728
+ document.getElementById('status').innerText = 'Listening...';
729
+ };
730
+
731
+ document.getElementById('stopButton').onclick = () => {
732
+ recognition.stop();
733
+ document.getElementById('startButton').disabled = false;
734
+ document.getElementById('stopButton').disabled = true;
735
+ document.getElementById('status').innerText = 'Stopped';
736
+ };
737
+
738
+ // Initialize on load
739
+ window.onload = () => {
740
+ initSpeechRecognition();
741
+ };
742
  </script>
743
+
744
+ <!-- Hidden input for Streamlit to read -->
745
+ <input type="hidden" id="streamlit-data" value="">
746
  </body>
747
  </html>
748
  """
749
 
750
+
751
+ # Display the component
752
+ components.html(speech_recognition_html, height=400)
 
 
 
753
 
754
+ # Add a placeholder for the transcript
755
+ transcript_placeholder = st.empty()
 
 
 
 
 
 
 
 
 
756
 
757
  # Add a refresh button
758
+ if st.button("Update Transcript"):
759
  st.rerun()
760
+
761
+ # Display the current transcript from session state
762
+ if 'voice_transcript' in st.session_state:
763
+ transcript_placeholder.text_area(
764
+ "Transcript:",
765
+ value=st.session_state.voice_transcript,
766
+ height=150
767
+ )
768
 
769
 
770