ben/AndyTranscribe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Show the live transcript as one flowing row of confidence chips.

Browse Source 
Drop per-segment cards and plain text so only colored word chips wrap in a single container while transcription runs.
This commit is contained in:
ben
2026-08-13 16:45:40 +02:00
parent 3a9cf50529
commit 500a88a8c1
3 changed files with 43 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/views/livewire/recordings/show.blade.php
+16 -60
View File
@@ -181,7 +181,7 @@
<div
class="mt-4 whitespace-pre-wrap text-sm leading-relaxed text-zinc-800 dark:text-zinc-100"
x-show="status.transcript && !whisper.segments.length"
x-show="status.transcript && !whisperWords.length"
x-text="status.transcript"
></div>
@@ -229,7 +229,7 @@
<div x-show="!status.is_active && status.has_transcript" x-cloak>
<p
class="mt-4 whitespace-pre-wrap text-sm leading-relaxed text-zinc-800 dark:text-zinc-100"
x-show="!whisper.segments.length"
x-show="!whisperWords.length"
x-text="status.transcript"
></p>
<flux:text
@@ -243,8 +243,8 @@
</div>
<div
class="mt-4 space-y-4"
x-show="whisper.language || whisper.segments.length || whisper.logprobs.length"
class="mt-4 space-y-3"
x-show="whisper.language || whisperWords.length"
>
<div
class="flex flex-wrap gap-2 text-xs text-zinc-600 dark:text-zinc-400"
@@ -260,62 +260,18 @@
</span>
</div>
<template x-for="(segment, index) in whisper.segments" :key="segmentDomKey(segment, index)">
<div class="rounded-lg border border-zinc-200 p-3 dark:border-zinc-700">
<div class="flex flex-wrap items-baseline justify-between gap-2 text-xs text-zinc-500 dark:text-zinc-400">
<span class="tabular-nums">
<span x-text="formatClock(segment.start)"></span>
–
<span x-text="formatClock(segment.end)"></span>
</span>
<span x-show="segment.avg_logprob != null">
avg logprob
<span class="font-medium text-zinc-700 dark:text-zinc-200" x-text="Number(segment.avg_logprob).toFixed(3)"></span>
</span>
</div>
<p class="mt-2 text-sm leading-relaxed text-zinc-800 dark:text-zinc-100" x-text="segment.text"></p>
<div class="mt-2 flex flex-wrap gap-1" x-show="segment.words && segment.words.length">
<template x-for="(word, wordIndex) in (segment.words || [])" :key="wordIndex">
<button
type="button"
class="rounded px-1.5 py-0.5 text-xs tabular-nums"
:class="wordConfidenceClass(word.probability)"
:title="(word.start != null ? formatClock(word.start) : '') + (word.probability != null ? (' · ' + Math.round(word.probability * 100) + '%') : '')"
@click="seekTo(word.start)"
x-text="word.word"
></button>
</template>
</div>
<details class="mt-2 text-xs text-zinc-500 dark:text-zinc-400" x-show="segment.tokens && segment.tokens.length">
<summary class="cursor-pointer select-none">Tokens</summary>
<p class="mt-1 break-all font-mono" x-text="(segment.tokens || []).join(' ')"></p>
</details>
<p class="mt-1 text-xs text-zinc-500 dark:text-zinc-400" x-show="segment.no_speech_prob != null">
no-speech
<span class="font-medium" x-text="Number(segment.no_speech_prob).toFixed(3)"></span>
<span x-show="segment.compression_ratio != null">
· compression
<span class="font-medium" x-text="Number(segment.compression_ratio).toFixed(2)"></span>
</span>
</p>
</div>
</template>
<details class="text-xs text-zinc-500 dark:text-zinc-400" x-show="whisper.logprobs.length">
<summary class="cursor-pointer select-none">Token logprobs</summary>
<ul class="mt-2 space-y-1 font-mono">
<template x-for="(row, index) in whisper.logprobs" :key="index">
<li>
<span x-text="row.token || '—'"></span>
<span x-show="row.logprob != null" x-text="' ' + Number(row.logprob).toFixed(3)"></span>
</li>
</template>
</ul>
</details>
<div class="flex flex-wrap gap-1" x-show="whisperWords.length">
<template x-for="word in whisperWords" :key="word.key">
<button
type="button"
class="rounded px-1.5 py-0.5 text-xs tabular-nums"
:class="wordConfidenceClass(word.probability)"
:title="(word.start != null ? formatClock(word.start) : '') + (word.probability != null ? (' · ' + Math.round(word.probability * 100) + '%') : '')"
@click="seekTo(word.start)"
x-text="word.word"
></button>
</template>
</div>
</div>
<flux:text