commit

index.html

@@ -15,19 +15,45 @@
 						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>
+					<p class="hero-meta">The active row follows the audio so you can quickly inspect what every model heard.</p>
 				</div>
 				<div class="audio-shell">
 					<audio id="audio" controls preload="auto" src="data/audio/podcast.mp3"></audio>
 					<canvas id="waveform" role="img" aria-label="Audio waveform preview"></canvas>
 				</div>
 			</section>
+
+			<section class="insights">
+				<div>
+					<h2>Model snapshots</h2>
+					<p class="section-subtitle">WER and coverage come from the loaded SRT files compared against the ground truth.</p>
+				</div>
+				<div class="insight-grid" id="model-insights" aria-live="polite" aria-busy="true"></div>
+			</section>
+
 			<section class="transcripts">
+				<header class="transcripts-toolbar">
+					<div class="search-group">
+						<label for="segment-search">Search segments</label>
+						<div class="search-input">
+							<input id="segment-search" type="search" placeholder="Find a topic, word, or phrase..." aria-describedby="match-count" />
+							<button id="clear-search" type="button" aria-label="Clear search">Clear</button>
+						</div>
+					</div>
+					<div class="match-count" id="match-count" role="status" aria-live="polite">Loading segments...</div>
+				</header>
+				<div class="model-legend" id="model-legend" 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 comparisonTableEl = document.getElementById("comparison-table");
+			const insightsEl = document.getElementById("model-insights");
+			const legendEl = document.getElementById("model-legend");
+			const matchCountEl = document.getElementById("match-count");
+			const searchInput = document.getElementById("segment-search");
+			const clearSearchBtn = document.getElementById("clear-search");
 			const audioElem = document.getElementById("audio");
 			const waveformCanvas = document.getElementById("waveform");
 			const transcriptSources = window.TRANSCRIPTS || {};
@@ -67,6 +93,16 @@
 			const segmentRows = [];
 			let allTranscripts = {};
 
+			renderLegend();
+
+			searchInput?.addEventListener("input", (event) => filterRows(event.target.value));
+			clearSearchBtn?.addEventListener("click", () => {
+				if (!searchInput) return;
+				searchInput.value = "";
+				filterRows("");
+				searchInput.focus();
+			});
+
 			function parseTimestamp(value) {
 				const [time, millisecondPart] = value.split(",");
 				const [hours, minutes, seconds] = time.split(":").map(Number);
@@ -141,58 +177,274 @@
 			}
 
 			function findSegmentForTime(segments, time) {
-				return segments.find(seg => time >= seg.start && time < seg.end);
+				return segments.find((seg) => time >= seg.start && time < seg.end);
+			}
+
+			function escapeHtml(value = "") {
+				return value.replace(/[&<>"']/g, (char) => {
+					switch (char) {
+						case "&":
+							return "&amp;";
+						case "<":
+							return "&lt;";
+						case ">":
+							return "&gt;";
+						case '"':
+							return "&quot;";
+						case "'":
+							return "&#39;";
+						default:
+							return char;
+					}
+				});
+			}
+
+			function tokenizeText(text = "") {
+				return text
+					.replace(/\s+/g, " ")
+					.trim()
+					.split(" ")
+					.filter(Boolean);
+			}
+
+			function tokenizeSegments(segments = []) {
+				return tokenizeText(segments.map((segment) => segment.content).join(" "));
+			}
+
+			function buildLcsMatrix(referenceTokens, candidateTokens) {
+				const rows = referenceTokens.length + 1;
+				const cols = candidateTokens.length + 1;
+				const matrix = Array.from({ length: rows }, () => new Array(cols).fill(0));
+				for (let i = 1; i < rows; i += 1) {
+					for (let j = 1; j < cols; j += 1) {
+						if (referenceTokens[i - 1] === candidateTokens[j - 1]) {
+							matrix[i][j] = matrix[i - 1][j - 1] + 1;
+						} else {
+							matrix[i][j] = Math.max(matrix[i - 1][j], matrix[i][j - 1]);
+						}
+					}
+				}
+				return matrix;
+			}
+
+			function diffWords(reference, candidate) {
+				const referenceTokens = tokenizeText(reference).map((token) => token.toLowerCase());
+				const candidateTokens = tokenizeText(candidate);
+				const candidateLower = candidateTokens.map((token) => token.toLowerCase());
+				if (!candidateTokens.length) {
+					return [];
+				}
+				const matrix = buildLcsMatrix(referenceTokens, candidateLower);
+				const output = [];
+				let i = referenceTokens.length;
+				let j = candidateLower.length;
+				while (i > 0 && j > 0) {
+					if (referenceTokens[i - 1] === candidateLower[j - 1]) {
+						output.unshift({ text: candidateTokens[j - 1], match: true });
+						i -= 1;
+						j -= 1;
+					} else if (matrix[i - 1][j] >= matrix[i][j - 1]) {
+						i -= 1;
+					} else {
+						output.unshift({ text: candidateTokens[j - 1], match: false });
+						j -= 1;
+					}
+				}
+				while (j > 0) {
+					output.unshift({ text: candidateTokens[j - 1], match: false });
+					j -= 1;
+				}
+				return output;
+			}
+
+			function renderDiffTokens(tokens) {
+				if (!tokens.length) {
+					return '<span class="muted-text">No transcript</span>';
+				}
+				return tokens
+					.map((token) => {
+						if (token.match) {
+							return escapeHtml(token.text);
+						}
+						return `<span class="diff-token">${escapeHtml(token.text)}</span>`;
+					})
+					.join(" ");
+			}
+
+			function levenshteinDistance(referenceTokens, candidateTokens) {
+				const rows = referenceTokens.length + 1;
+				const cols = candidateTokens.length + 1;
+				const matrix = Array.from({ length: rows }, () => new Array(cols).fill(0));
+				for (let i = 0; i < rows; i += 1) {
+					matrix[i][0] = i;
+				}
+				for (let j = 0; j < cols; j += 1) {
+					matrix[0][j] = j;
+				}
+				for (let i = 1; i < rows; i += 1) {
+					for (let j = 1; j < cols; j += 1) {
+						const cost = referenceTokens[i - 1].toLowerCase() === candidateTokens[j - 1].toLowerCase() ? 0 : 1;
+						matrix[i][j] = Math.min(
+							matrix[i - 1][j] + 1,
+							matrix[i][j - 1] + 1,
+							matrix[i - 1][j - 1] + cost
+						);
+					}
+				}
+				return matrix[referenceTokens.length][candidateTokens.length];
+			}
+
+			function computeModelInsights() {
+				const truthSegments = allTranscripts.truth?.segments || [];
+				const truthTokens = tokenizeSegments(truthSegments);
+				const truthTokenCount = truthTokens.length || 1;
+				const truthSegmentCount = truthSegments.length || 1;
+
+				return tracks
+					.filter((track) => track.id !== "truth")
+					.map((track) => {
+						const transcript = allTranscripts[track.id];
+						const candidateSegments = transcript?.segments || [];
+						const candidateTokens = tokenizeSegments(candidateSegments);
+						const distance = levenshteinDistance(truthTokens, candidateTokens);
+						const wer = distance / truthTokenCount;
+						const wordMatch = Math.max(0, 1 - wer);
+						const coverage = Math.min(1, candidateSegments.length / truthSegmentCount);
+						const avgWords =
+							candidateSegments.length > 0 ? Math.round(candidateTokens.length / candidateSegments.length) : 0;
+						return {
+							track,
+							wer: wer * 100,
+							wordMatch: wordMatch * 100,
+							coverage: coverage * 100,
+							segments: candidateSegments.length,
+							avgWords
+						};
+					});
+			}
+
+			function renderModelInsights() {
+				if (!insightsEl) return;
+				insightsEl.removeAttribute("aria-busy");
+				if (!allTranscripts.truth?.segments?.length) {
+					insightsEl.innerHTML = '<p class="match-count">Ground truth transcript was not found.</p>';
+					return;
+				}
+				const stats = computeModelInsights();
+				insightsEl.innerHTML = stats
+					.map(
+						(stat) => `
+						<article class="insight-card" style="--accent: ${stat.track.accent}">
+							<h3>${stat.track.label}</h3>
+							<div>
+								<div class="metric-value">${stat.wordMatch.toFixed(1)}%</div>
+								<div class="metric-label">Word Match</div>
+							</div>
+							<div class="insight-meta">
+								<span>WER ${stat.wer.toFixed(1)}%</span>
+								<span>${stat.segments} segments</span>
+							</div>
+							<div class="insight-meta">
+								<span>Coverage ${Math.round(stat.coverage)}%</span>
+								<span>${stat.avgWords || 0} words/segment</span>
+							</div>
+						</article>
+					`
+					)
+					.join("");
+			}
+
+			function renderLegend() {
+				if (!legendEl) return;
+				legendEl.innerHTML = tracks
+					.map((track) => `<span style="--accent: ${track.accent}"><i></i>${track.label}</span>`)
+					.join("");
 			}
 
 			function renderComparisonTable() {
-				// Create header row
+				comparisonTableEl.innerHTML = "";
+				segmentRows.length = 0;
+
 				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("")}
+					${tracks.map((track) => `<div class="model-column" style="--accent: ${track.accent}">${track.label}</div>`).join("")}
 				`;
 				comparisonTableEl.appendChild(header);
 
-				// Use ground truth as the base timeline
 				const groundTruthSegments = allTranscripts.truth?.segments || [];
 
-				groundTruthSegments.forEach((truthSegment, index) => {
+				groundTruthSegments.forEach((truthSegment) => {
 					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 rowTextParts = [truthSegment.content || ""];
+
+					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>';
+							rowTextParts.push("");
 						} else {
-							// Find the segment that overlaps with this ground truth time
-							const segment = findSegmentForTime(
-								transcript?.segments || [],
-								truthSegment.start
-							);
-							cell.textContent = segment?.content || "—";
+							const segment = findSegmentForTime(transcript?.segments || [], truthSegment.start);
+							rowTextParts.push(segment?.content || "");
+							if (track.id === "truth") {
+								cell.innerHTML = `<p class="transcript-text">${escapeHtml(truthSegment.content)}</p>`;
+							} else {
+								const diffTokens = diffWords(truthSegment.content || "", segment?.content || "");
+								cell.innerHTML = renderDiffTokens(diffTokens);
+							}
 						}
 
 						row.appendChild(cell);
 					});
 
+					row.dataset.rowText = rowTextParts.join(" ").toLowerCase();
 					comparisonTableEl.appendChild(row);
 					segmentRows.push(row);
 				});
+
+				filterRows(searchInput?.value || "");
+			}
+
+			function updateMatchCount(matches, query) {
+				if (!matchCountEl) return;
+				const total = segmentRows.length;
+				if (!total) {
+					matchCountEl.textContent = "No segments loaded.";
+					return;
+				}
+				if (!query) {
+					matchCountEl.textContent = `Showing all ${total} segments`;
+				} else {
+					matchCountEl.textContent = `Showing ${matches}/${total} segments for "${query}"`;
+				}
+			}
+
+			function filterRows(rawQuery) {
+				const normalized = rawQuery.trim().toLowerCase();
+				let matches = 0;
+				segmentRows.forEach((row) => {
+					const rowText = row.dataset.rowText || "";
+					const isMatch = !normalized || rowText.includes(normalized);
+					row.classList.toggle("is-hidden", !isMatch);
+					if (isMatch) {
+						matches += 1;
+					}
+				});
+				updateMatchCount(matches, normalized ? rawQuery : "");
 			}
 
 			function updateActiveSegments(time) {
@@ -201,8 +453,6 @@
 					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" });
 					}
@@ -223,15 +473,15 @@
 				const ctx = canvas.getContext("2d");
 				ctx.scale(dpr, dpr);
 				ctx.clearRect(0, 0, canvas.clientWidth, canvas.clientHeight);
-				const sliceWidth = Math.floor(rawData.length / canvas.clientWidth);
+				const sliceWidth = Math.max(1, Math.floor(rawData.length / Math.max(1, canvas.clientWidth)));
 				const halfHeight = canvas.clientHeight / 2;
 				ctx.lineWidth = 1.25;
 				ctx.strokeStyle = "#1f2937";
 				ctx.beginPath();
-				for (let i = 0; i < canvas.clientWidth; i++) {
+				for (let i = 0; i < canvas.clientWidth; i += 1) {
 					const sliceStart = i * sliceWidth;
 					let sum = 0;
-					for (let j = 0; j < sliceWidth; j++) {
+					for (let j = 0; j < sliceWidth; j += 1) {
 						sum += Math.abs(rawData[sliceStart + j] || 0);
 					}
 					const amplitude = sum / sliceWidth;
@@ -246,6 +496,7 @@
 			async function bootstrap() {
 				allTranscripts = await loadAllTranscripts();
 				renderComparisonTable();
+				renderModelInsights();
 				void drawWaveform();
 			}
 

style.css

@@ -46,6 +46,12 @@ p {
 	box-shadow: 0 25px 60px rgba(15, 23, 42, 0.08);
 }
 
+.hero-meta {
+	margin-top: 0.75rem;
+	font-size: 0.95rem;
+	color: #6b7280;
+}
+
 .audio-shell {
 	background: rgba(15, 23, 42, 0.9);
 	border-radius: 18px;
@@ -72,6 +78,142 @@ audio {
 	gap: 1.75rem;
 }
 
+.insights {
+	display: grid;
+	gap: 1rem;
+	padding: 1.5rem;
+	border-radius: 24px;
+	background: rgba(255, 255, 255, 0.9);
+	box-shadow: 0 30px 60px rgba(15, 23, 42, 0.08);
+	border: 1px solid rgba(15, 23, 42, 0.08);
+}
+
+.section-subtitle {
+	margin: 0;
+	color: #6b7280;
+	font-size: 0.95rem;
+}
+
+.insight-grid {
+	display: grid;
+	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+	gap: 1rem;
+}
+
+.insight-card {
+	padding: 1rem;
+	border-radius: 18px;
+	background: #fff;
+	box-shadow: inset 0 0 0 1px rgba(31, 41, 55, 0.08);
+	display: grid;
+	gap: 0.75rem;
+}
+
+.insight-card::before {
+	content: "";
+	width: 32px;
+	height: 4px;
+	border-radius: 999px;
+	background: var(--accent, #4070f4);
+	display: block;
+}
+
+.metric-value {
+	font-size: 1.75rem;
+	font-weight: 700;
+	color: #0f172a;
+}
+
+.metric-label {
+	font-size: 0.85rem;
+	color: #6b7280;
+	text-transform: uppercase;
+	letter-spacing: 0.04em;
+}
+
+.insight-meta {
+	display: flex;
+	justify-content: space-between;
+	font-size: 0.85rem;
+	color: #4b5563;
+}
+
+.transcripts-toolbar {
+	display: flex;
+	flex-wrap: wrap;
+	justify-content: space-between;
+	gap: 1rem;
+	align-items: flex-end;
+}
+
+.search-group label {
+	display: block;
+	font-size: 0.85rem;
+	text-transform: uppercase;
+	letter-spacing: 0.04em;
+	color: #6b7280;
+	margin-bottom: 0.35rem;
+}
+
+.search-input {
+	display: flex;
+	border-radius: 12px;
+	background: #fff;
+	box-shadow: inset 0 0 0 1px rgba(31, 41, 55, 0.12);
+	overflow: hidden;
+}
+
+.search-input input {
+	flex: 1;
+	padding: 0.75rem 1rem;
+	border: none;
+	font-size: 1rem;
+	outline: none;
+	min-width: 220px;
+}
+
+.search-input button {
+	border: none;
+	background: rgba(31, 41, 55, 0.08);
+	padding: 0 1rem;
+	cursor: pointer;
+	font-weight: 600;
+	color: #1f2937;
+	transition: background 0.2s ease;
+}
+
+.search-input button:hover {
+	background: rgba(31, 41, 55, 0.16);
+}
+
+.match-count {
+	font-size: 0.9rem;
+	color: #4b5563;
+}
+
+.model-legend {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 0.75rem 1.5rem;
+	font-size: 0.9rem;
+	color: #4b5563;
+}
+
+.model-legend span {
+	display: inline-flex;
+	align-items: center;
+	gap: 0.4rem;
+}
+
+.model-legend i {
+	width: 12px;
+	height: 12px;
+	border-radius: 50%;
+	display: inline-block;
+	background: var(--accent, #1f2937);
+	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5);
+}
+
 .comparison-table {
 	background: #ffffff;
 	border-radius: 20px;
@@ -143,6 +285,32 @@ audio {
 	border-left: 3px solid transparent;
 }
 
+.transcript-text {
+	margin: 0;
+}
+
+.diff-token {
+	display: inline-flex;
+	align-items: center;
+	background: rgba(255, 107, 107, 0.12);
+	border-radius: 6px;
+	padding: 0.05rem 0.35rem;
+	margin: 0 0.15rem;
+	font-weight: 600;
+	color: #b91c1c;
+}
+
+.muted-text {
+	color: #9ca3af;
+	font-style: italic;
+}
+
+.insight-card h3 {
+	margin: 0;
+	font-size: 1rem;
+	color: #1f2937;
+}
+
 .comparison-row.is-active {
 	background: linear-gradient(90deg, rgba(64, 112, 244, 0.08), rgba(64, 112, 244, 0.03));
 	transform: scale(1.01);
@@ -164,6 +332,10 @@ audio {
 	font-style: italic;
 }
 
+.comparison-row.is-hidden {
+	display: none;
+}
+
 @media (min-width: 720px) {
 	.hero {
 		grid-template-columns: 1.1fr 0.9fr;
@@ -198,6 +370,10 @@ audio {
 		padding: 0.75rem 0.5rem;
 	}
 
+	.search-input input {
+		min-width: 160px;
+	}
+
 	.comparison-table {
 		overflow-x: auto;
 	}