Update app.py

app.py

@@ -7,21 +7,17 @@ import os
 
 # Process audio and transcribe
 def process_audio(audio_input):
-    # Initialize recognizer
-    recognizer = sr.Recognizer()
+    recognizer = sr.Recognizer()  # Correct usage of 'sr' as the module alias
 
-    # Handle Gradio audio input
     if isinstance(audio_input, tuple):  # Recorded audio (sample_rate, numpy_array)
-        sr, audio_data = audio_input
-        # Convert numpy array to WAV file using pydub
+        sample_rate, audio_data = audio_input  # Rename 'sr' to 'sample_rate'
         with tempfile.NamedTemporaryFile(suffix=".wav", delete=False) as temp_file:
-            AudioSegment(audio_data, sample_rate=sr, frame_rate=sr, channels=1).export(temp_file.name, format="wav")
+            AudioSegment(audio_data, sample_rate=sample_rate, frame_rate=sample_rate, channels=1).export(temp_file.name, format="wav")
             audio_file_path = temp_file.name
     else:  # Uploaded audio file
         audio_file_path = audio_input
 
-    # Transcribe audio
-    with sr.AudioFile(audio_file_path) as source:
+    with sr.AudioFile(audio_file_path) as source:  # Now 'sr' is correctly defined
         audio = recognizer.record(source)
         try:
             transcription = recognizer.recognize_google(audio)
@@ -58,6 +54,47 @@ def audio_transcriptor(audio_file, audio_record):
 
     return language, transcription, text_file
 
+# Custom HTML for styled transcription display
+transcription_html = """
+<div class="transcription-container" id="transcriptionContainer">
+    <h2>Transcription Results</h2>
+    <div class="language" id="languageOutput">Detected Language: Waiting...</div>
+    <div class="transcription" id="transcriptionOutput">Transcription: Waiting...</div>
+</div>
+
+<style>
+    .transcription-container {
+        max-width: 600px;
+        margin: 20px auto;
+        padding: 20px;
+        background: #16213e;
+        border-radius: 10px;
+        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
+        color: #fff;
+        text-align: center;
+    }
+    .language, .transcription {
+        margin: 10px 0;
+        padding: 10px;
+        background: #0f172a;
+        border-radius: 5px;
+    }
+</style>
+
+<script>
+    setInterval(() => {
+        const languageOutput = document.querySelector('div[label="Detected Language"] textarea');
+        const transcriptionOutput = document.querySelector('div[label="Transcription"] textarea');
+        if (languageOutput && languageOutput.value) {
+            document.getElementById('languageOutput').textContent = `Detected Language: ${languageOutput.value}`;
+        }
+        if (transcriptionOutput && transcriptionOutput.value) {
+            document.getElementById('transcriptionOutput').textContent = `Transcription: ${transcriptionOutput.value}`;
+        }
+    }, 1000);
+</script>
+"""
+
 # Gradio interface
 with gr.Blocks() as demo:
     gr.Markdown("# Audio Transcriptor")
@@ -72,6 +109,9 @@ with gr.Blocks() as demo:
         transcription_output = gr.Textbox(label="Transcription")
         text_file_output = gr.File(label="Download Transcription as Text File")
 
+    # Add styled HTML section
+    gr.HTML(transcription_html)
+
     with gr.Row():
         submit = gr.Button("Transcribe")
         clear = gr.Button("Clear")