Redesign STT comparison to side-by-side table layout

- Initialize Git LFS for audio file tracking
- Replace vertical model cards with horizontal comparison table
- Display ground truth alongside models in single row per transcript
- Add sticky header with model names and color coding
- Implement active row highlighting during audio playback
- Add auto-scroll to follow current segment
- Improve mobile responsiveness with horizontal scroll
- Simplify comparison by synchronizing all transcripts to ground truth timeline

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

.gitattributes

@@ -34,3 +34,4 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
 *.mp3 filter=lfs diff=lfs merge=lfs -text
+*.wav filter=lfs diff=lfs merge=lfs -text

index.html

@@ -12,8 +12,8 @@
 				<div>
 					<h1>Speech-to-Text Comparison</h1>
 					<p>
-						Play the sample podcast and compare how each transcription model handled it.
-						The ground-truth reference stays on top in green so you can quickly gauge accuracy.
+						Play the sample podcast and compare how each transcription model handled it side-by-side.
+						Each row shows all transcripts for the same time segment.
 					</p>
 				</div>
 				<div class="audio-shell">
@@ -22,14 +22,12 @@
 				</div>
 			</section>
 			<section class="transcripts">
-				<div id="reference-track" aria-live="polite"></div>
-				<div class="models-grid" id="models-grid" aria-live="polite"></div>
+				<div class="comparison-table" id="comparison-table" aria-live="polite"></div>
 			</section>
 		</main>
 		<script src="transcripts.js"></script>
 		<script type="module">
-			const referenceTrackEl = document.getElementById("reference-track");
-			const modelsGridEl = document.getElementById("models-grid");
+			const comparisonTableEl = document.getElementById("comparison-table");
 			const audioElem = document.getElementById("audio");
 			const waveformCanvas = document.getElementById("waveform");
 			const transcriptSources = window.TRANSCRIPTS || {};
@@ -38,8 +36,7 @@
 					id: "truth",
 					label: "Ground Truth",
 					file: "data/ground-truth/truth_1.srt",
-					accent: "#00b894",
-					emphasis: true
+					accent: "#00b894"
 				},
 				{
 					id: "assembly",
@@ -67,7 +64,8 @@
 				}
 			];
 
-			const segmentNodes = [];
+			const segmentRows = [];
+			let allTranscripts = {};
 
 			function parseTimestamp(value) {
 				const [time, millisecondPart] = value.split(",");
@@ -90,16 +88,6 @@
 					.filter(Boolean);
 			}
 
-			function createSegmentElement(segment, accent) {
-				const segmentEl = document.createElement("div");
-				segmentEl.className = "segment";
-				segmentEl.dataset.start = segment.start;
-				segmentEl.dataset.end = segment.end;
-				segmentEl.innerHTML = `<span class="segment-time">${formatTime(segment.start)}</span><p>${segment.content}</p>`;
-				segmentEl.style.setProperty("--accent", accent);
-				return segmentEl;
-			}
-
 			function formatTime(seconds) {
 				const minutes = Math.floor(seconds / 60)
 					.toString()
@@ -126,54 +114,98 @@
 				return (await response.text()).replace(/^\ufeff/, "");
 			}
 
-			async function loadTrack(track) {
-				let transcriptText = getTranscriptText(track);
-				if (!transcriptText) {
-					try {
-						transcriptText = await fetchTranscript(track);
-					} catch (error) {
-						renderFallbackCard(track, error.message);
-						throw error;
-					}
-				}
-				const transcript = parseSrt(transcriptText);
+			async function loadAllTranscripts() {
+				const results = {};
+				await Promise.all(
+					tracks.map(async (track) => {
+						try {
+							let transcriptText = getTranscriptText(track);
+							if (!transcriptText) {
+								transcriptText = await fetchTranscript(track);
+							}
+							results[track.id] = {
+								segments: parseSrt(transcriptText),
+								track: track
+							};
+						} catch (error) {
+							console.error(`Failed to load ${track.label}:`, error);
+							results[track.id] = {
+								segments: [],
+								track: track,
+								error: true
+							};
+						}
+					})
+				);
+				return results;
+			}
 
-				const trackEl = document.createElement("article");
-				trackEl.className = "track";
-				if (track.emphasis) {
-					trackEl.classList.add("track--emphasis");
-				}
-				trackEl.style.setProperty("--accent", track.accent);
+			function findSegmentForTime(segments, time) {
+				return segments.find(seg => time >= seg.start && time < seg.end);
+			}
 
-				trackEl.innerHTML = `
-					<header>
-						<h2>${track.label}</h2>
-						<span class="badge">Segments: ${transcript.length}</span>
-					</header>
+			function renderComparisonTable() {
+				// Create header row
+				const header = document.createElement("div");
+				header.className = "comparison-header";
+				header.innerHTML = `
+					<div class="time-column">Time</div>
+					${tracks.map(track => `<div class="model-column" style="--accent: ${track.accent}">${track.label}</div>`).join("")}
 				`;
+				comparisonTableEl.appendChild(header);
 
-				const contentEl = document.createElement("div");
-				contentEl.className = "track-body";
-				transcript.forEach((segment) => {
-					const segmentEl = createSegmentElement(segment, track.accent);
-					contentEl.appendChild(segmentEl);
-					segmentNodes.push(segmentEl);
-				});
+				// Use ground truth as the base timeline
+				const groundTruthSegments = allTranscripts.truth?.segments || [];
 
-				trackEl.appendChild(contentEl);
-				if (track.emphasis) {
-					referenceTrackEl.appendChild(trackEl);
-				} else {
-					modelsGridEl.appendChild(trackEl);
-				}
+				groundTruthSegments.forEach((truthSegment, index) => {
+					const row = document.createElement("div");
+					row.className = "comparison-row";
+					row.dataset.start = truthSegment.start;
+					row.dataset.end = truthSegment.end;
+
+					// Time column
+					const timeCell = document.createElement("div");
+					timeCell.className = "time-cell";
+					timeCell.textContent = formatTime(truthSegment.start);
+					row.appendChild(timeCell);
+
+					// Add cells for each model
+					tracks.forEach(track => {
+						const cell = document.createElement("div");
+						cell.className = "transcript-cell";
+						cell.style.setProperty("--accent", track.accent);
+
+						const transcript = allTranscripts[track.id];
+						if (transcript?.error) {
+							cell.innerHTML = '<em class="error-text">Error loading</em>';
+						} else {
+							// Find the segment that overlaps with this ground truth time
+							const segment = findSegmentForTime(
+								transcript?.segments || [],
+								truthSegment.start
+							);
+							cell.textContent = segment?.content || "—";
+						}
+
+						row.appendChild(cell);
+					});
+
+					comparisonTableEl.appendChild(row);
+					segmentRows.push(row);
+				});
 			}
 
 			function updateActiveSegments(time) {
-				segmentNodes.forEach((node) => {
-					const start = Number(node.dataset.start);
-					const end = Number(node.dataset.end);
-					const isActive = time >= start && time <= end;
-					node.classList.toggle("is-active", isActive);
+				segmentRows.forEach((row) => {
+					const start = Number(row.dataset.start);
+					const end = Number(row.dataset.end);
+					const isActive = time >= start && time < end;
+					row.classList.toggle("is-active", isActive);
+
+					// Auto-scroll to active row
+					if (isActive) {
+						row.scrollIntoView({ behavior: "smooth", block: "center" });
+					}
 				});
 			}
 
@@ -212,35 +244,11 @@
 			}
 
 			async function bootstrap() {
-				await Promise.all(
-					tracks.map(async (track) => {
-						try {
-							await loadTrack(track);
-						} catch (error) {
-							console.error(error);
-						}
-					})
-				);
+				allTranscripts = await loadAllTranscripts();
+				renderComparisonTable();
 				void drawWaveform();
 			}
 
-			function renderFallbackCard(track, message) {
-				const card = document.createElement("article");
-				card.className = "track track--error";
-				card.innerHTML = `
-					<header>
-						<h2>${track.label}</h2>
-						<span class="badge badge--error">Unavailable</span>
-					</header>
-					<p class="track-error">${message}</p>
-				`;
-				if (track.emphasis) {
-					referenceTrackEl.appendChild(card);
-				} else {
-					modelsGridEl.appendChild(card);
-				}
-			}
-
 			audioElem.addEventListener("timeupdate", () => updateActiveSegments(audioElem.currentTime));
 			window.addEventListener("resize", () => drawWaveform());
 

style.css

@@ -72,118 +72,96 @@ audio {
 	gap: 1.75rem;
 }
 
-#reference-track {
-	display: grid;
-}
-
-.models-grid {
-	display: grid;
-	gap: 1.25rem;
-}
-
-.track {
+.comparison-table {
 	background: #ffffff;
 	border-radius: 20px;
-	padding: 1.25rem;
 	box-shadow: 0 20px 40px rgba(15, 23, 42, 0.07);
 	border: 1px solid rgba(31, 41, 55, 0.08);
+	overflow: hidden;
 }
 
-.track--error {
-	border: 1px dashed rgba(239, 68, 68, 0.6);
-	background: rgba(254, 242, 242, 0.9);
-	box-shadow: none;
+.comparison-header {
+	display: grid;
+	grid-template-columns: 80px repeat(5, 1fr);
+	gap: 1px;
+	background: rgba(15, 23, 42, 0.05);
+	font-weight: 600;
+	font-size: 0.9rem;
+	position: sticky;
+	top: 0;
+	z-index: 10;
+}
+
+.time-column,
+.model-column {
+	padding: 0.85rem 1rem;
+	background: #ffffff;
 }
 
-.track--emphasis {
-	border: 2px solid #00b894;
-	box-shadow: 0 25px 45px rgba(0, 184, 148, 0.15);
+.time-column {
+	font-family: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
+	color: rgba(55, 65, 81, 0.9);
 }
 
-.track header {
-	display: flex;
-	flex-wrap: wrap;
-	align-items: center;
-	justify-content: space-between;
-	gap: 0.75rem;
-	margin-bottom: 1rem;
+.model-column {
+	color: var(--accent, #1f2937);
+	text-align: left;
+	border-left: 3px solid var(--accent);
 }
 
-.track h2 {
-	font-size: 1.25rem;
-	margin: 0;
+.comparison-row {
+	display: grid;
+	grid-template-columns: 80px repeat(5, 1fr);
+	gap: 1px;
+	background: rgba(15, 23, 42, 0.03);
+	transition: background 0.25s ease, transform 0.25s ease;
 }
 
-.badge {
-	background: rgba(31, 41, 55, 0.05);
-	color: #1f2937;
-	padding: 0.2rem 0.75rem;
-	border-radius: 999px;
-	font-size: 0.85rem;
+.comparison-row:hover {
+	background: rgba(15, 23, 42, 0.06);
 }
 
-.badge--error {
-	background: rgba(239, 68, 68, 0.15);
-	color: #b91c1c;
+.time-cell,
+.transcript-cell {
+	padding: 1rem;
+	background: #ffffff;
+	font-size: 0.9rem;
+	line-height: 1.6;
+	color: #1f2937;
 }
 
-.track-error {
-	margin: 0;
-	color: #b91c1c;
+.time-cell {
+	font-family: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
+	font-size: 0.85rem;
+	color: rgba(55, 65, 81, 0.9);
 	font-weight: 500;
+	display: flex;
+	align-items: center;
 }
 
-.track-body {
-	display: grid;
-	gap: 0.5rem;
-	max-height: 300px;
-	overflow: auto;
-	scrollbar-width: thin;
-}
-
-.track-body::-webkit-scrollbar {
-	width: 6px;
-}
-
-.track-body::-webkit-scrollbar-thumb {
-	background: rgba(31, 41, 55, 0.25);
-	border-radius: 999px;
-}
-
-.segment {
-	padding: 0.85rem 1rem;
-	border-radius: 14px;
-	background: rgba(15, 23, 42, 0.03);
-	border: 1px solid rgba(0, 0, 0, 0.04);
-	transition: background 0.25s ease, transform 0.25s ease, border 0.25s ease;
+.transcript-cell {
+	border-left: 3px solid transparent;
 }
 
-.segment p {
-	margin-top: 0.35rem;
-	margin-bottom: 0;
-	color: #111827;
+.comparison-row.is-active {
+	background: linear-gradient(90deg, rgba(64, 112, 244, 0.08), rgba(64, 112, 244, 0.03));
+	transform: scale(1.01);
+	box-shadow: 0 4px 12px rgba(64, 112, 244, 0.12);
 }
 
-.segment-time {
-	display: inline-flex;
-	align-items: center;
-	gap: 0.35rem;
-	font-family: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
-	font-size: 0.85rem;
-	color: rgba(55, 65, 81, 0.9);
+.comparison-row.is-active .transcript-cell {
+	border-left-color: var(--accent);
+	font-weight: 500;
 }
 
-.segment.is-active {
-	background: rgba(64, 112, 244, 0.08);
-	border-color: var(--accent, rgba(64, 112, 244, 0.5));
-	box-shadow: 0 10px 20px rgba(64, 112, 244, 0.15);
-	transform: translateY(-2px);
+.comparison-row.is-active .time-cell {
+	color: #4070f4;
+	font-weight: 700;
 }
 
-.track--emphasis .segment.is-active {
-	background: rgba(0, 184, 148, 0.1);
-	box-shadow: 0 12px 24px rgba(0, 184, 148, 0.2);
-	border-color: rgba(0, 184, 148, 0.6);
+.error-text {
+	color: #b91c1c;
+	font-style: italic;
 }
 
 @media (min-width: 720px) {
@@ -192,7 +170,35 @@ audio {
 		align-items: center;
 	}
 
-	.models-grid {
-		grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+	.comparison-table {
+		max-height: 70vh;
+		overflow-y: auto;
+		scrollbar-width: thin;
+	}
+
+	.comparison-table::-webkit-scrollbar {
+		width: 8px;
+	}
+
+	.comparison-table::-webkit-scrollbar-thumb {
+		background: rgba(31, 41, 55, 0.25);
+		border-radius: 999px;
+	}
+}
+
+@media (max-width: 719px) {
+	.comparison-header,
+	.comparison-row {
+		grid-template-columns: 60px repeat(5, minmax(120px, 1fr));
+		font-size: 0.85rem;
+	}
+
+	.time-cell,
+	.transcript-cell {
+		padding: 0.75rem 0.5rem;
+	}
+
+	.comparison-table {
+		overflow-x: auto;
 	}
 }