Skip to content

feat:Transcription percentage progress bar and time stamp

Prabhukumari Vanga requested to merge transcription_percentage into main

🚀 Feature: Live Transcription Progress + Timestamp Enhancement 📌 What does this MR do?

This MR enhances the streaming ASR transcription experience by introducing:

Real-time transcription progress percentage Dynamic status messages (Listening → Understanding → Generating → Finalizing → Complete) Timestamp display for transcription output Improved streaming text updates (no flicker / smarter updates) Proper final result locking to avoid UI inconsistencies 🎯 Why is this needed?

Previously:

No progress visibility (user only saw loading) No stage indication (confusing UX) No timestamp for recordings UI flickering due to repeated updates Transcription sometimes stuck in “Listening” state

Now:

Users can clearly see what stage the ASR is in Progress bar gives real-time feedback Timestamp improves traceability of recordings Smooth UI updates enhance user experience Reliable completion detection ensures accurate final output 🧠 Key Changes 🔹 Streaming Logic Improvements Added smart text update mechanism (updates only when better text is received) Prevented redundant UI re-renders Introduced isFinalLocked to stop updates after completion 🔹 Progress Bar Enhancements Integrated dynamic progress calculation Added fallback progress when backend percentage is unavailable Mapped progress to stages: 🎤 Listening 🧠 Understanding speech ️ Generating text ️ Finalizing Complete 🔹 Timestamp Feature Added formatted timestamp (DD Month YYYY, HH:MM AM/PM) Displayed in both live and final transcription UI 🔹 Final Detection Fix Fixed duplicate conditions Ensured proper completion trigger Stopped streaming interval on completion 🧪 How to Test Start recording audio Speak continuously for a few seconds Observe: Progress bar increasing Status messages updating Live transcription appearing smoothly Stop recording Verify: Final result is shown Timestamp is displayed Progress shows 100% Complete 📸 Before vs After

Before

No progress percentage Static “Processing…” message No timestamp UI flickering

After

Dynamic progress bar with % Stage-based messages Timestamp added Smooth real-time transcription

Checklist Feature implemented UI tested manually No breaking changes Cleaned duplicate logic Works with existing streaming API

Merge request reports

Loading