Fix transcription auto-save and segmentation form reset

app.py

@@ -96,7 +96,7 @@ def create_waveform_html(audio_data, segments=None):
         <div id="waveform" style="height: 200px; border: 1px solid #ddd;"></div>
         <div style="margin-top: 10px;">
             <button id="play-pause" style="margin-right: 5px; padding: 8px 15px; background: #00cc44; color: white; border: none; border-radius: 3px; cursor: pointer;">
-                ⏯️ Play/Pause
+                ▶️ Play/Pause
             </button>
             <button id="add-region" style="margin-right: 5px; padding: 8px 15px; background: #0066cc; color: white; border: none; border-radius: 3px; cursor: pointer;">
                 ➕ Add Region
@@ -128,7 +128,9 @@ def create_waveform_html(audio_data, segments=None):
             responsive: true,
             plugins: [
                 WaveSurfer.regions.create({{
-                    dragSelection: true,
+                    dragSelection: {{
+                        slop: 5
+                    }},
                     color: 'rgba(255, 75, 75, 0.3)'
                 }})
             ]
@@ -161,6 +163,40 @@ def create_waveform_html(audio_data, segments=None):
             updateRegionsList();
         }});
         
+        // Handle region creation via drag selection
+        wavesurfer.on('region-created', function(region) {{
+            // Check if this is a new region (not from loading existing segments)
+            const existingRegion = regions.find(r => r.id === region.id);
+            if (!existingRegion) {{
+                // Prompt for speaker ID
+                const speakerId = prompt("Enter speaker ID (e.g., SPK001):", "SPK" + (Object.keys(speakerColors).length + 1).toString().padStart(3, '0'));
+                
+                if (speakerId) {{
+                    // Get or assign color for this speaker
+                    if (!speakerColors[speakerId]) {{
+                        speakerColors[speakerId] = getColorForSpeaker(speakerId);
+                    }}
+                    
+                    // Update region color
+                    region.color = speakerColors[speakerId];
+                    region.updateRender();
+                    
+                    // Add to regions array
+                    regions.push({{
+                        id: region.id,
+                        start: region.start,
+                        end: region.end,
+                        speaker_id: speakerId
+                    }});
+                    
+                    updateRegionsList();
+                }} else {{
+                    // If user cancels, remove the region
+                    region.remove();
+                }}
+            }}
+        }});
+        
         // Add region function
         function addRegion(start, end, speaker_id) {{
             // Get or assign color for this speaker
@@ -205,7 +241,7 @@ def create_waveform_html(audio_data, segments=None):
                         </div>
                         <button onclick="removeRegion('${{region.id}}')" 
                                 style="background: #cc0000; color: white; border: none; border-radius: 3px; padding: 5px 8px; cursor: pointer;">
-                            ✕
+                            ❌
                         </button>
                     </div>
                 `;
@@ -430,49 +466,55 @@ def show_transcription_page():
     audio_html = create_audio_player_html(st.session_state.audio_file)
     st.components.v1.html(audio_html, height=120)
     
-    # Transcription area
+    # Transcription area with callback for auto-saving
     st.subheader("Transcript")
+    
+    def update_transcript():
+        """Callback function to update transcript in session state"""
+        st.session_state.transcript = st.session_state.transcript_input
+    
     transcript = st.text_area(
         "Write your transcription here:",
         value=st.session_state.transcript,
         height=300,
-        help="Check the guidelines below to help you transcribe accurately."
+        help="Check the guidelines below to help you transcribe accurately.",
+        key="transcript_input",
+        on_change=update_transcript
     )
-    st.session_state.transcript = transcript
     
     # Guidelines reminder
     with st.expander("📋 Transcription Guidelines"):
         st.markdown("""
         **Key Guidelines:**
-        - Transcribe exactly what is said 
-        - Use standard punctuation and capitalization (tip: Get punctuation from natural pauses in dialogue)
-        - Write numbers 1-10 as words, 11+ as digits
-        - Ignore unclear speech or marked as [unclear] or [inaudible]
-        - For multi-speaker: transcribe all audible speech without identifying speakers
+        - Transcribe EXACTLY what is said. No shortening or paraphrasing. (e.g saying "I do like" and "I'd like" are different) 
+        - Use standard punctuation and capitalization (tip: Get punctuation from natural pauses in dialogue).
+        - Write numbers as digits.
+        - Ignore unclear speech or marked as [unclear] or [inaudible].
+        - For multi-speaker: transcribe all audible speech without identifying speakers.
         """)
     
     # Action buttons
     col1, col2, col3 = st.columns(3)
     
     with col1:
-        if transcript.strip():
-            download_link = get_download_link(transcript, "transcript.txt", "💾 Download Transcript")
+        if st.session_state.transcript.strip():
+            download_link = get_download_link(st.session_state.transcript, "transcript.txt", "💾 Download Transcript")
             st.markdown(download_link, unsafe_allow_html=True)
         else:
             st.button("💾 Download Transcript", disabled=True)
     
     with col2:
-        if st.session_state.annotation_type == "multi_speaker" and transcript.strip():
+        if st.session_state.annotation_type == "multi_speaker" and st.session_state.transcript.strip():
             if st.button("🎯 Continue to Segmentation →"):
                 st.session_state.current_page = "segmentation"
                 st.rerun()
     
     with col3:
-        if st.session_state.annotation_type == "single_speaker" and transcript.strip():
+        if st.session_state.annotation_type == "single_speaker" and st.session_state.transcript.strip():
             if st.button("✅ Finish Annotation"):
                 st.balloons()
                 st.success("🎉 Single speaker annotation completed!")
-                download_link = get_download_link(transcript, "transcript.txt", "📥 Download Final Transcript")
+                download_link = get_download_link(st.session_state.transcript, "transcript.txt", "📥 Download Final Transcript")
                 st.markdown(download_link, unsafe_allow_html=True)
 
 def show_segmentation_page():
@@ -491,7 +533,7 @@ def show_segmentation_page():
     
     # Manual segment addition
     st.subheader("Manual Segment Addition")
-    st.info("After having segmented the wav using our wav surfer, you can manually add segments here. Don't hesitate to replay and pause for the best results.")
+    st.info("After having segmented the wav using our wav surfer, you can manually add segments here. Don't hesitate to replay and pause.")
     col1, col2, col3, col4 = st.columns(4)
     
     with col1:
@@ -632,3 +674,4 @@ def create_speaker_transcript(segments):
 
 if __name__ == "__main__":
     main()
+