fix: resolve transcript clickability, real-time highlighting, and summary persistence

- Fixed transcript clickability by implementing proper cross-iframe communication
- Addressed real-time highlighting with correct time synchronization
- Ensured summary persistence using dedicated placeholder and state management

src/streamlit_app.py

@@ -80,6 +80,195 @@ with tab2:
 with tab3:
     st.subheader("Transcription & Summary")
     
+    # Initialize audio player
+    if st.session_state.audio_path and not st.session_state.audio_base64:
+        with open(st.session_state.audio_path, "rb") as f:
+            audio_bytes = f.read()
+        st.session_state.audio_base64 = base64.b64encode(audio_bytes).decode('utf-8')
+    
+    if st.session_state.audio_base64:
+        # Audio player with time update handler
+        audio_html = f"""
+        <audio id="audioPlayer" controls ontimeupdate="updateTime(this)">
+            <source src="data:audio/mp3;base64,{st.session_state.audio_base64}" type="audio/mp3">
+        </audio>
+        <script>
+            function seekAudio(time) {{
+                const player = document.getElementById('audioPlayer');
+                player.currentTime = time;
+                player.play();
+            }}
+            
+            function updateTime(audio) {{
+                const time = audio.currentTime;
+                window.parent.postMessage({{
+                    type: "currentTimeUpdate",
+                    time: time
+                }}, "*");
+            }}
+            
+            ///////////////////////////////////////////////////////////////////
+            // FIX 1: Handle transcript clicks globally
+            ///////////////////////////////////////////////////////////////////
+            window.addEventListener('message', (event) => {{
+                if (event.data.type === 'seekToTime') {{
+                    seekAudio(event.data.time);
+                }}
+            }});
+        </script>
+        """
+        st.markdown(audio_html, unsafe_allow_html=True)
+    
+    status_placeholder = st.empty()
+    transcript_placeholder = st.empty()
+    summary_placeholder = st.empty()  # Dedicated placeholder for persistent summary
+
+    # FIX 3: Persistent summary display using dedicated placeholder
+    if st.session_state.get('summary'):
+        with summary_placeholder.container():
+            st.markdown("### Summary")
+            st.markdown(st.session_state.summary)
+
+    # Function to generate transcript HTML
+    def generate_transcript_html(utterances, current_time):
+        if not utterances:
+            return ""
+        
+        # Ensure current_time is a float
+        current_time = float(current_time) if current_time is not None else 0.0
+        
+        html = """
+        <div id="transcript-container">
+        """
+        
+        for start, end, text in utterances:
+            if start < 0 or end < 0:
+                html += f'<div class="utterance">{text}</div>'
+                continue
+                
+            is_current = start <= current_time < end
+            html += f"""
+            <div class="utterance {'current-utterance' if is_current else ''}" 
+                 onclick="parent.postMessage({{type: 'seekToTime', time: {start}}}, '*')">
+                <b>[{time.strftime('%M:%S', time.gmtime(start))}-{time.strftime('%M:%S', time.gmtime(end))}]</b> {text}
+            </div>
+            """
+        html += "</div>"
+        return html
+
+    # Add CSS globally
+    st.markdown("""
+    <style>
+    .utterance {
+        padding: 8px;
+        margin: 4px 0;
+        border-radius: 4px;
+        cursor: pointer;
+        transition: background 0.2s;
+    }
+    .utterance:hover { background-color: #f0f0f0; }
+    .current-utterance {
+        background-color: #ffebee;
+        border-left: 3px solid #f44336;
+        font-weight: 500;
+    }
+    </style>
+    """, unsafe_allow_html=True)
+
+    if st.button("🎙️ Transcribe", key="transcribe_button_tab3"):
+        if st.session_state.audio_path:
+            status_placeholder.text("Transcribing...")
+            st.session_state.utterances = []
+            st.session_state.transcript = ""
+            
+            # Initialize transcript display
+            transcript_placeholder.empty()
+            transcript_display = st.empty()
+            
+            # Process ASR output
+            for current_utt, all_utts in transcribe_file(
+                st.session_state.audio_path, vad_threshold, model_names[model_name]
+            ):
+                st.session_state.utterances = all_utts
+                
+                # Build plain text transcript
+                st.session_state.transcript = "\n".join(
+                    f"[{start:.1f}-{end:.1f}] {text}" 
+                    for start, end, text in all_utts
+                )
+                
+                # Update transcript display
+                html = generate_transcript_html(
+                    all_utts, 
+                    st.session_state.get('current_time', 0.0)
+                )
+                transcript_display.empty()
+                with transcript_display:
+                    st.components.v1.html(html, height=500, scrolling=True)
+            
+            # Final update after transcription
+            html = generate_transcript_html(
+                st.session_state.utterances, 
+                st.session_state.get('current_time', 0.0)
+            )
+            transcript_placeholder.empty()
+            with transcript_placeholder:
+                st.components.v1.html(html, height=500, scrolling=True)
+            transcript_display.empty()
+            
+            status_placeholder.empty()
+
+    # Time update handling
+    current_time_js = """
+    <script>
+    // Listen for time updates from audio player
+    window.addEventListener('message', (event) => {
+        if (event.data.type === 'currentTimeUpdate') {
+            Streamlit.setComponentValue(event.data.time);
+        }
+    });
+    </script>
+    """
+    
+    # Create component and get its value
+    current_time_component = st.components.v1.html(
+        current_time_js, 
+        height=0,
+    )
+    
+    # FIX 2: Update highlighting when time changes
+    if isinstance(current_time_component, (int, float)):
+        st.session_state.current_time = current_time_component
+        if "utterances" in st.session_state and st.session_state.utterances:
+            html = generate_transcript_html(
+                st.session_state.utterances, 
+                st.session_state.current_time
+            )
+            transcript_placeholder.empty()
+            with transcript_placeholder:
+                st.components.v1.html(html, height=500, scrolling=True)
+    
+    if st.button("📝 Summarize", key="summarize_button_tab3"):
+        if st.session_state.transcript:
+            status_placeholder.text("Summarizing...")
+            live_summary_placeholder = st.empty()
+            st.session_state.summary = ""
+            
+            for accumulated_summary in summarize_transcript(
+                st.session_state.transcript, llm_model, prompt_input
+            ):
+                st.session_state.summary = accumulated_summary
+                live_summary_placeholder.markdown(accumulated_summary)
+            
+            # FIX 3: Update persistent summary instead of removing
+            with summary_placeholder.container():
+                st.markdown("### Summary")
+                st.markdown(st.session_state.summary)
+                
+            live_summary_placeholder.empty()
+            status_placeholder.empty()
+    st.subheader("Transcription & Summary")
+    
     # Initialize audio player (unchanged)
     if st.session_state.audio_path and not st.session_state.audio_base64:
         with open(st.session_state.audio_path, "rb") as f: