File size: 1,760 Bytes
4602745 5f81dfe 4602745 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 | /**
* TranscriptDisplay.jsx
* Shows the live and final transcription output.
*
* During streaming:
* - `stable` text is rendered normally
* - `unstable` text is rendered dimmed/italic (LocalAgreement-2 unconfirmed prefix)
*
* Props:
* stable {string} – confirmed transcript text
* unstable {string} – pending / unconfirmed suffix
* loading {bool} – show a spinner while waiting for the first token
* mode {string} – 'webgpu' | 'server'
*/
export default function TranscriptDisplay({ stable, unstable, loading, mode }) {
const isEmpty = !stable && !unstable && !loading;
return (
<div className="transcript-display">
<div className="transcript-header">
<span className="transcript-title">Transcript</span>
</div>
<div className="transcript-body transcript-output" aria-live="polite" aria-label="Transcription output">
{loading && !stable && !unstable && (
<span className="transcript-loading">
<span className="spinner" aria-hidden="true" />
Waiting for first token…
</span>
)}
{isEmpty && !loading && (
<span className="transcript-placeholder">
Transcription will appear here after you submit audio.
</span>
)}
{/* Stable (confirmed) text */}
{stable && <span className="transcript-stable">{stable}</span>}
{/* Unstable (unconfirmed) text – LocalAgreement-2 pending prefix */}
{unstable && (
<span
className="transcript-unstable"
title="Partial hypothesis – not yet confirmed by LocalAgreement-2"
>
{unstable}
</span>
)}
</div>
</div>
);
}
|