Update src/streamlit_app.py

src/streamlit_app.py

@@ -37,50 +37,53 @@ def display_status_and_action(text):
         st.warning(warning)
         st.markdown(text_input)
         # 오른쪽 정렬을 위한 컬럼 설정
-        col1, col2, col3 = st.columns([6, 1, 1])  # 비율 조정
+def render_voice_button_and_play_audio(tts_text):
+    # 텍스트를 음성으로 변환
+    cleaned_text = re.sub(r'[\x00-\x1F]+', '', tts_text).replace("*", "")
+    tts = gTTS(text=cleaned_text, lang='ko')
+    mp3_fp = BytesIO()
+    tts.write_to_fp(mp3_fp)
+    mp3_fp.seek(0)
+    audio_bytes = mp3_fp.read()
+    b64_audio = base64.b64encode(audio_bytes).decode()
 
-        with col3:
-            # 사용자 인터랙션 감지를 위한 폼 구성
-            with st.form(key="voice_form"):
-                button_html = """
-                <style>
-                .icon-button {
-                    background-color: transparent;
-                    border: none;
-                    cursor: pointer;
-                    font-size: 24px;
-                }
-                </style>
-                <button class="icon-button" type="submit">🎤</button>
-                """
-                st.markdown(button_html, unsafe_allow_html=True)
-                submitted = st.form_submit_button("🎤 (invisible)", use_container_width=True)  # 내부적으로 submit만 감지용
-        
-            if submitted:
-                # 텍스트 to 음성 처리
-                text_input = warning +" " +text_input
-                cleaned_text = re.sub(r'[\x00-\x1F]+', '', text_input).replace("*", "").replace("⚠️", "")
-                tts = gTTS(text=cleaned_text, lang='ko')
-            
-                # 메모리에 저장
-                mp3_fp = BytesIO()
-                tts.write_to_fp(mp3_fp)
-                
-                # 오디오 스트림 재설정 후 재생
-                mp3_fp.seek(0)
-                # base64 인코딩
-                import base64
-                audio_bytes = mp3_fp.read()
-                b64_audio = base64.b64encode(audio_bytes).decode()
+    # HTML 오디오 플레이어 전체 폭으로 삽입
+    audio_html = f"""
+        <audio controls style="width: 100%;">
+            <source src="data:audio/mp3;base64,{b64_audio}" type="audio/mp3">
+        </audio>
+    """
+    st.markdown(audio_html, unsafe_allow_html=True)
 
-                # HTML 오디오 플레이어 (전체 너비)
-                audio_html = f"""
-                    <audio controls style="width: 100%;">
-                        <source src="data:audio/mp3;base64,{b64_audio}" type="audio/mp3">
-                        브라우저가 오디오를 지원하지 않습니다.
-                    </audio>
-                """
-                st.markdown(audio_html, unsafe_allow_html=True)
+    # 버튼 렌더링
+    col1, col2, col3 = st.columns([6, 1, 1])
+    with col3:
+        button_html = """
+        <style>
+        .icon-button {
+            background-color: transparent;
+            border: none;
+            cursor: pointer;
+            font-size: 28px;
+            padding: 0;
+            margin: 0;
+        }
+        </style>
+        <form action="#" method="post">
+            <button class="icon-button" name="play_audio" type="submit">🎤</button>
+        </form>
+        """
+        st.markdown(button_html, unsafe_allow_html=True)
+    
+    # 버튼이 클릭됐는지 감지 (세션 상태로)
+    if st.session_state.get("audio_played") is None:
+        st.session_state.audio_played = False
+    
+    # 버튼 클릭을 감지 (Streamlit은 form submit 감지를 못하므로 우회 방법 필요 시 JS 이용)
+    # 임시로 아래에서 조건적으로 재생만 허용
+    if st.query_params.get("play") == "true" or st.session_state.audio_played:
+        render_voice_button_and_play_audio(warning + " " + text_input)
+        st.session_state.audio_played = False
 
 # 상태 및 조치 출력
 display_status_and_action(selected_text)