Update app.py

app.py

@@ -1,4 +1,4 @@
-import streamlit as st 
+import streamlit as st
 from openai import OpenAI
 import time
 import os
@@ -97,6 +97,26 @@ with clear_col:
 thread_id = get_or_create_thread_id()
 display_chat_history()
 
+if "mute_voice" not in st.session_state:
+    st.session_state["mute_voice"] = False
+
+def synthesize_and_play(text, mute):
+    if not mute:
+        # Only call OpenAI TTS if unmuted
+        with st.spinner("Synthesizing voice with GPT-4o..."):
+            speech_response = client.audio.speech.create(
+                model="tts-1", # 'tts-1' or 'tts-1-hd'
+                voice="nova",  # or "alloy", "echo", "fable", etc.
+                input=text,
+                response_format="mp3"
+            )
+            audio_path = f"output_{user_id}.mp3"
+            with open(audio_path, "wb") as f:
+                f.write(speech_response.content)
+            st.audio(audio_path, format="audio/mp3", autoplay=True)
+            # Optionally remove the file after play to save disk
+            # os.remove(audio_path)
+
 if user_input:
     # Send user message to OpenAI thread
     client.beta.threads.messages.create(thread_id=thread_id, role="user", content=user_input)
@@ -115,48 +135,20 @@ if user_input:
     assistant_message = latest_response.content[0].text.value
     save_message("assistant", assistant_message)
 
-    # Prepare the message for JavaScript safely
-    safe_message = assistant_message.replace("\\", "\\\\").replace("`", "\\`").replace("\n", "\\n").replace("'", "\\'")
-
-    # 👇 Voice controls (auto-speak enabled)
-    st.components.v1.html(f"""
-    <div id="voice-controls" style="margin: 10px 0;">
-        <button id="speak-btn" style="margin-right:10px;">🔊 Speak</button>
-        <button id="mute-btn">🔇 Mute</button>
-    </div>
-    <script>
-    var utterance;
-    var isSpeaking = false;
-    var synth = window.speechSynthesis;
-    var text = `{safe_message}`;
-    var voices = [];
-    function getFemaleVoice() {{
-        voices = synth.getVoices();
-        let female = voices.find(v => (v.name && v.name.toLowerCase().includes("female")) || (v.lang && v.lang.startsWith("en") && v.gender !== "male"));
-        // Fallback: any en female, then any en, then first
-        return female || voices.find(v => v.lang && v.lang.startsWith('en') && v.name && v.name.toLowerCase().includes('female')) || voices.find(v => v.lang && v.lang.startsWith('en')) || voices[0];
-    }}
-    function speakText() {{
-        if (isSpeaking) return;
-        utterance = new SpeechSynthesisUtterance(text);
-        utterance.voice = getFemaleVoice();
-        utterance.rate = 1;
-        utterance.pitch = 1.1;
-        synth.speak(utterance);
-        isSpeaking = true;
-        utterance.onend = function() {{ isSpeaking = false; }};
-    }}
-    document.getElementById('speak-btn').onclick = function() {{
-        speakText();
-    }};
-    document.getElementById('mute-btn').onclick = function() {{
-        synth.cancel();
-        isSpeaking = false;
-    }};
-    // Auto-speak on load
-    setTimeout(speakText, 500);
-    </script>
-    """, height=80)
-
+    # 👇 Voice controls (auto-speak enabled, can mute)
+    col1, col2 = st.columns([1, 1])
+    with col1:
+        if st.button("🔊 Play Voice", key="unmute"):
+            st.session_state["mute_voice"] = False
+            synthesize_and_play(assistant_message, False)
+    with col2:
+        if st.button("🔇 Mute Voice", key="mute"):
+            st.session_state["mute_voice"] = True
+            st.info("Voice output muted for this and future messages.")
+
+    # Play voice unless muted
+    synthesize_and_play(assistant_message, st.session_state["mute_voice"])
+
+    # Force Streamlit to rerun so chat refreshes and you get a new prompt
     time.sleep(0.5)
     st.rerun()