Update main_app.py

main_app.py

@@ -1,123 +1,429 @@
-import streamlit as st
-import os
-import vosk
-import pyaudio
-import threading
-import queue
-import json
-
-# --- UI Setup ---
-st.set_page_config(page_title="DHWANI", layout="wide")
-st.markdown(
-    """
-    <style>
-    body, .stApp { background-color: #e3f0ff !important; }
-    </style>
-    """, unsafe_allow_html=True
-)
-st.markdown(
-    """
-    <h1 style="text-align:center; color:#1a237e;" id="main-title">DHWANI</h1>
-    <div style="text-align:center; color:#1a237e;" id="subtitle">
-        Real-time speech-to-text transcription for Indic languages (Offline)
-    </div>
-    """, unsafe_allow_html=True
-)
-
-# --- Language Selection ---
-LANGUAGES = {
-    "Hindi": "vosk-model-small-hi-0.22",
-    "Telugu": "vosk-model-small-te-0.4",
-    "Tamil": "vosk-model-small-ta-0.4",
-    "Bengali": "vosk-model-small-bn-0.22",
-    "Gujarati": "vosk-model-small-gu-0.4",
-    "Kannada": "vosk-model-small-kn-0.22",
-    "Malayalam": "vosk-model-small-ml-0.22",
-    "Marathi": "vosk-model-small-mr-0.22",
-    "Punjabi": "vosk-model-small-pa-0.22",
-    "Urdu": "vosk-model-small-ur-0.22",
-    "English (India)": "vosk-model-small-en-in-0.4"
-}
-selected_lang = st.selectbox("Select Language you want to record:", list(LANGUAGES.keys()), index=0)
-model_name = LANGUAGES[selected_lang]
-model_path = os.path.join("models", model_name)  # You must download and place models in ./models/
-
-# --- App State ---
-if "recording" not in st.session_state:
-    st.session_state.recording = False
-if "transcript" not in st.session_state:
-    st.session_state.transcript = ""
-
-# --- Helper Functions ---
-def recognize_audio(q, model_path, transcript_callback):
-    vosk.SetLogLevel(-1)
-    if not os.path.exists(model_path):
-        q.put("ERROR: Model not found. Download and place it in the 'models' folder.")
-        return
-    model = vosk.Model(model_path)
-    recognizer = vosk.KaldiRecognizer(model, 16000)
-    mic = pyaudio.PyAudio()
-    stream = mic.open(format=pyaudio.paInt16, channels=1, rate=16000, input=True, frames_per_buffer=4000)
-    stream.start_stream()
-    try:
-        while st.session_state.recording:
-            data = stream.read(4000, exception_on_overflow=False)
-            if recognizer.AcceptWaveform(data):
-                result = recognizer.Result()
-                text = json.loads(result)["text"]
-                if text.strip():
-                    transcript_callback(text)
-    except Exception as e:
-        q.put(f"ERROR: {str(e)}")
-    finally:
-        stream.stop_stream()
-        stream.close()
-        mic.terminate()
-
-def start_recording():
-    st.session_state.recording = True
-    q = queue.Queue()
-    def update_transcript(text):
-        st.session_state.transcript += text + " "
-    thread = threading.Thread(target=recognize_audio, args=(q, model_path, update_transcript), daemon=True)
-    thread.start()
-    st.session_state.thread = thread
-
-def stop_recording():
-    st.session_state.recording = False
-
-def clear_text():
-    st.session_state.transcript = ""
-
-def print_transcript():
-    st.write("Printing is not supported in Streamlit directly. Please copy the text below and print from your editor:")
-
-# --- Controls ---
-col1, col2, col3 = st.columns([1,1,1])
-with col1:
-    if not st.session_state.recording:
-        if st.button("🎤 Start Recording"):
-            start_recording()
-    else:
-        if st.button("🛑 Stop Recording"):
-            stop_recording()
-with col2:
-    st.button("Clear Text", on_click=clear_text)
-with col3:
-    st.button("🖨 Print", on_click=print_transcript)
-
-# --- Status and Transcript Display ---
-if st.session_state.recording:
-    st.info("🎙 Listening... Speak now!")
-else:
-    st.warning("Click the microphone to start recording")
-
-st.text_area("Your transcribed text will appear here...", value=st.session_state.transcript, height=200)
-
-# --- Instructions for Models ---
-st.markdown("""
-**Note:**  
-- Download Vosk models for your chosen language from [alphacephei.com/vosk/models](https://alphacephei.com/vosk/models)  
-- Place them in a `models` folder in your app directory, e.g. `models/vosk-model-small-hi-0.22` for Hindi.
-""")
-
+import streamlit as st
+import streamlit.components.v1 as components
+
+def main():
+    st.set_page_config(
+        page_title="DHWANI",
+        layout="wide"
+    )
+
+    # Inject pastel blue background for the whole page (including behind header)
+    st.markdown(
+        """
+        <style>
+        body, .stApp {
+            background-color: #e3f0ff !important;
+        }
+        </style>
+        """,
+        unsafe_allow_html=True
+    )
+
+    # Centered, navy blue headings
+    st.markdown(
+        """
+        <h1 style="text-align:center; color:#1a237e;" id="main-title">DHWANI</h1>
+        <div style="text-align:center; color:#1a237e;" id="subtitle">
+            Real-time speech-to-text transcription for Indic languages
+        </div>
+        """,
+        unsafe_allow_html=True
+    )
+
+    # Language selection with black text
+    st.markdown(
+        """
+        <style>
+        .stSelectbox > label {
+            color: blue !important;
+        }
+        </style>
+        """,
+        unsafe_allow_html=True
+    )
+    
+    languages = {
+        "Hindi": "hi-IN",
+        "Telugu": "te-IN",
+        "Tamil": "ta-IN",
+        "Bengali": "bn-IN",
+        "Gujarati": "gu-IN",
+        "Kannada": "kn-IN",
+        "Malayalam": "ml-IN",
+        "Marathi": "mr-IN",
+        "Punjabi": "pa-IN",
+        "Urdu": "ur-IN",
+        "English (India)": "en-IN"
+    }
+
+    selected_lang = st.selectbox("Select Language you want to record:", list(languages.keys()), index=0)
+    lang_code = languages[selected_lang]
+
+    html_code = f"""
+    <!DOCTYPE html>
+    <html>
+    <head>
+        <style>
+            :root {{
+                --pastel-blue: #e3f0ff;
+                --navy-blue: #1a237e;
+                --white: #fff;
+                --black: #000;
+            }}
+            body {{
+                font-family: Arial, sans-serif;
+                margin: 0;
+                padding: 0;
+                background: var(--pastel-blue) !important;
+                color: var(--navy-blue);
+                transition: background 0.2s, color 0.2s;
+            }}
+            .container {{
+                max-width: 800px;
+                margin: 0 auto;
+                padding: 20px;
+            }}
+            #main-title, #subtitle {{
+                text-align: center;
+                color: var(--navy-blue);
+                transition: color 0.2s;
+            }}
+            .mic-button {{
+                background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+                border: none;
+                border-radius: 50%;
+                width: 80px;
+                height: 80px;
+                color: white;
+                font-size: 24px;
+                cursor: pointer;
+                transition: all 0.3s ease;
+                box-shadow: 0 4px 15px rgba(0,0,0,0.2);
+                margin: 20px 0;
+            }}
+            .mic-button:hover {{
+                transform: scale(1.05);
+                box-shadow: 0 6px 20px rgba(0,0,0,0.3);
+            }}
+            .mic-button.recording {{
+                background: linear-gradient(135deg, #ff6b6b 0%, #ee5a52 100%);
+                animation: pulse 1.5s infinite;
+            }}
+            @keyframes pulse {{
+                0% {{
+                    box-shadow: 0 0 0 0 rgba(255, 107, 107, 0.7);
+                }}
+                70% {{
+                    box-shadow: 0 0 0 10px rgba(255, 107, 107, 0);
+                }}
+                100% {{
+                    box-shadow: 0 0 0 0 rgba(255, 107, 107, 0);
+                }}
+            }}
+            .transcription-box {{
+                width: 100%;
+                min-height: 200px;
+                padding: 15px;
+                border: 2px solid #e0e0e0;
+                border-radius: 10px;
+                font-size: 16px;
+                line-height: 1.5;
+                resize: vertical;
+                margin-top: 20px;
+                background: #f9f9f9;
+                color: var(--navy-blue);
+                text-align: left;
+                transition: background 0.2s, color 0.2s;
+            }}
+            .status {{
+                padding: 10px;
+                border-radius: 5px;
+                margin: 10px 0;
+                font-weight: bold;
+            }}
+            .status.listening {{
+                background-color: #d4edda;
+                color: #155724;
+                border: 1px solid #c3e6cb;
+            }}
+            .status.stopped {{
+                background-color: #f8d7da;
+                color: #721c24;
+                border: 1px solid #f5c6cb;
+            }}
+            .status.error {{
+                background-color: #fff3cd;
+                color: #856404;
+                border: 1px solid #ffeaa7;
+            }}
+            .controls {{
+                display: flex;
+                align-items: center;
+                gap: 20px;
+                margin: 20px 0;
+            }}
+            .clear-btn {{
+                background: #6c757d;
+                color: white;
+                border: none;
+                padding: 10px 20px;
+                border-radius: 5px;
+                cursor: pointer;
+                transition: background 0.3s ease;
+            }}
+            .clear-btn:hover {{
+                background: #545b62;
+            }}
+            .print-btn {{
+                background: #28a745;
+                color: white;
+                border: none;
+                padding: 10px 20px;
+                border-radius: 5px;
+                cursor: pointer;
+                transition: background 0.3s ease;
+            }}
+            .print-btn:hover {{
+                background: #218838;
+            }}
+            @media (prefers-color-scheme: dark) {{
+                body {{
+                    background: var(--pastel-blue) !important;
+                    color: var(--white);
+                }}
+                #main-title, #subtitle {{
+                    color: var(--white);
+                }}
+                .transcription-box {{
+                    background: #222;
+                    color: var(--white);
+                    border-color: #444;
+                }}
+            }}
+        </style>
+    </head>
+    <body>
+        <div class="container">
+            <div class="controls">
+                <button id="micButton" class="mic-button" onclick="toggleRecording()">
+                    🎤
+                </button>
+                <button id="clearButton" class="clear-btn" onclick="clearTranscription()">
+                    Clear Text
+                </button>
+                <button id="printButton" class="print-btn" onclick="printTranscription()">
+                    🖨 Print
+                </button>
+            </div>
+            <div id="status" class="status stopped">
+                Click the microphone to start recording
+            </div>
+            <textarea id="transcription" class="transcription-box" 
+                     placeholder="Your transcribed text will appear here..."></textarea>
+        </div>
+        <script>
+            let recognition = null;
+            let isRecording = false;
+            let finalTranscript = ''; // <-- Moved to global scope
+            const micButton = document.getElementById('micButton');
+            const statusDiv = document.getElementById('status');
+            const transcriptionArea = document.getElementById('transcription');
+            
+            if ('webkitSpeechRecognition' in window || 'SpeechRecognition' in window) {{
+                const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
+                recognition = new SpeechRecognition();
+                recognition.continuous = true;
+                recognition.interimResults = true;
+                recognition.lang = '{lang_code}';
+                recognition.onresult = function(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 + ' ';
+                        }} else {{
+                            interimTranscript += transcript;
+                        }}
+                    }}
+                    transcriptionArea.value = finalTranscript + interimTranscript;
+                    transcriptionArea.scrollTop = transcriptionArea.scrollHeight;
+                }};
+                recognition.onstart = function() {{
+                    statusDiv.textContent = '🎙 Listening... Speak now!';
+                    statusDiv.className = 'status listening';
+                }};
+                recognition.onend = function() {{
+                    if (isRecording) {{
+                        recognition.start();
+                    }} else {{
+                        statusDiv.textContent = '🛑 Recording stopped';
+                        statusDiv.className = 'status stopped';
+                        micButton.classList.remove('recording');
+                    }}
+                }};
+                recognition.onerror = function(event) {{
+                    console.error('Speech recognition error:', event.error);
+                    let errorMessage = 'Error occurred: ';
+                    switch(event.error) {{
+                        case 'no-speech':
+                            errorMessage += 'No speech detected. Try speaking louder.';
+                            break;
+                        case 'audio-capture':
+                            errorMessage += 'Microphone not accessible.';
+                            break;
+                        case 'not-allowed':
+                            errorMessage += 'Microphone permission denied.';
+                            break;
+                        case 'network':
+                            errorMessage += 'Network error occurred.';
+                            break;
+                        default:
+                            errorMessage += event.error;
+                    }}
+                    statusDiv.textContent = errorMessage;
+                    statusDiv.className = 'status error';
+                    isRecording = false;
+                    micButton.classList.remove('recording');
+                }};
+            }} else {{
+                statusDiv.textContent = '❌ Speech recognition not supported in this browser';
+                statusDiv.className = 'status error';
+                micButton.disabled = true;
+            }}
+            function toggleRecording() {{
+                if (!recognition) return;
+                if (isRecording) {{
+                    isRecording = false;
+                    recognition.stop();
+                    micButton.classList.remove('recording');
+                    statusDiv.textContent = '🛑 Stopping...';
+                    statusDiv.className = 'status stopped';
+                }} else {{
+                    isRecording = true;
+                    micButton.classList.add('recording');
+                    try {{
+                        recognition.start();
+                    }} catch (error) {{
+                        console.error('Error starting recognition:', error);
+                        isRecording = false;
+                        micButton.classList.remove('recording');
+                    }}
+                }}
+            }}
+            function clearTranscription() {{
+                transcriptionArea.value = '';
+                finalTranscript = ''; // <-- This now resets the transcript for new recordings
+            }}
+            function printTranscription() {{
+                const transcriptionText = transcriptionArea.value;
+                if (!transcriptionText.trim()) {{
+                    alert('No text to print. Please transcribe some speech first.');
+                    return;
+                }}
+                
+                const printWindow = window.open('', '_blank');
+                const currentDate = new Date().toLocaleDateString();
+                const currentTime = new Date().toLocaleTimeString();
+                
+                printWindow.document.write(`
+                    <!DOCTYPE html>
+                    <html>
+                    <head>
+                        <title>DHWANI Transcription</title>
+                        <style>
+                            body {{
+                                font-family: Arial, sans-serif;
+                                line-height: 1.6;
+                                margin: 40px;
+                                color: #333;
+                            }}
+                            .header {{
+                                text-align: center;
+                                margin-bottom: 30px;
+                                border-bottom: 2px solid #1a237e;
+                                padding-bottom: 20px;
+                            }}
+                            .header h1 {{
+                                color: #1a237e;
+                                margin: 0;
+                                font-size: 28px;
+                            }}
+                            .header p {{
+                                margin: 5px 0;
+                                color: #666;
+                            }}
+                            .transcription {{
+                                background: #f9f9f9;
+                                padding: 20px;
+                                border-radius: 8px;
+                                border-left: 4px solid #1a237e;
+                                font-size: 16px;
+                                line-height: 1.8;
+                                white-space: pre-wrap;
+                                word-wrap: break-word;
+                            }}
+                            .footer {{
+                                margin-top: 30px;
+                                text-align: center;
+                                font-size: 12px;
+                                color: #888;
+                                border-top: 1px solid #ddd;
+                                padding-top: 20px;
+                            }}
+                            @media print {{
+                                body {{ margin: 20px; }}
+                                .header {{ page-break-after: avoid; }}
+                            }}
+                        </style>
+                    </head>
+                    <body>
+                        <div class="header">
+                            <h1>DHWANI</h1>
+                            <p>Speech-to-Text Transcription</p>
+                            <p>Date: ${{currentDate}} | Time: ${{currentTime}}</p>
+                        </div>
+                        <div class="transcription">
+                            ${{transcriptionText}}
+                        </div>
+                        <div class="footer">
+                            <p>Generated by DHWANI - Real-time speech-to-text transcription for Indic languages</p>
+                        </div>
+                    </body>
+                    </html>
+                `);
+                
+                printWindow.document.close();
+                printWindow.focus();
+                
+                // Wait a moment for the content to load, then trigger print dialog
+                setTimeout(() => {{
+                    printWindow.print();
+                }}, 500);
+            }}
+            function changeLanguage(langCode) {{
+                if (recognition) {{
+                    recognition.lang = langCode;
+                    if (isRecording) {{
+                        recognition.stop();
+                        setTimeout(() => {{
+                            if (isRecording) {{
+                                recognition.start();
+                            }}
+                        }}, 100);
+                    }}
+                }}
+            }}
+            window.addEventListener('message', function(event) {{
+                if (event.data.type === 'language-change') {{
+                    changeLanguage(event.data.langCode);
+                }}
+            }});
+        </script>
+    </body>
+    </html>
+    """
+
+    components.html(html_code, height=500, scrolling=False)
+
+if __name__ == "__main__":
+    main()