eprec 1.0.1 → 1.2.0

package/README.md

@@ -13,45 +13,115 @@
 [![MIT License][license-badge]][license]
 <!-- prettier-ignore-end -->
 
-## Installation
+## Overview
+
+A Bun-based CLI that processes recorded course videos by splitting chapter
+markers into separate files, trimming silence at the start/end, and optionally
+removing spoken "Jarvis" command windows via transcript timestamps refined with
+audio-based silence detection.
+
+## Requirements
 
-To install dependencies:
+- **Bun** - runtime and package manager
+- **ffmpeg + ffprobe** - must be available on PATH
+- **whisper-cli** _(optional)_ - from
+  [whisper.cpp](https://github.com/ggerganov/whisper.cpp), required for
+  transcription
+  - Pass `--whisper-binary-path` if not on PATH
+  - Model file auto-downloads to `.cache/whispercpp/ggml-small.en.bin`
+- **Silero VAD model** - auto-downloads to `.cache/silero-vad.onnx` on first use
+
+## Installation
 
 ```bash
 bun install
 ```
 
-To run:
+## Quick Start
 
 ```bash
-bun run index.ts
+bun process-course-video.ts "/path/to/input.mp4" "/path/to/output" \
+  --enable-transcription \
+  --keep-intermediates \
+  --write-logs
 ```
 
-## Whisper.cpp transcription (optional)
+## Web UI (experimental)
 
-Install the local whisper.cpp CLI (Homebrew):
+Start the Remix-powered UI shell with the CLI:
 
 ```bash
-brew install whisper-cpp
+bun cli.ts app start
+```
+
+Then open `http://127.0.0.1:3000`. Use `--port` or `--host` to override the
+defaults.
+
+## CLI Options
+
+| Option                   | Alias | Description                             | Default     |
+| ------------------------ | ----- | --------------------------------------- | ----------- |
+| `input`                  |       | Input video file (mp4/mkv)              | _required_  |
+| `outputDir`              |       | Output directory                        | `output`    |
+| `--min-chapter-seconds`  | `-m`  | Skip chapters shorter than this         | `15`        |
+| `--dry-run`              | `-d`  | Don't write files or run ffmpeg         | `false`     |
+| `--keep-intermediates`   | `-k`  | Keep `.tmp` files for debugging         | `false`     |
+| `--write-logs`           | `-l`  | Write log files for skips/fallbacks     | `false`     |
+| `--enable-transcription` |       | Run whisper.cpp for command detection   | `false`     |
+| `--whisper-model-path`   |       | Path to whisper.cpp model file          | auto-cached |
+| `--whisper-language`     |       | Language for whisper                    | `en`        |
+| `--whisper-binary-path`  |       | Path to `whisper-cli` binary            | system PATH |
+| `--chapter`              | `-c`  | Filter to specific chapters (see below) | all         |
+
+## Chapter Selection
+
+The `--chapter` flag supports flexible selection:
+
+- Single: `--chapter 4`
+- Range: `--chapter 4-6`
+- Open range: `--chapter 4-*` (chapter 4 to end)
+- Multiple: `--chapter 4,6,9-12`
+
+Chapter numbers are 1-based by default.
+
+## Output Structure
+
+Final files are written to the output directory with names like:
+
+```
+chapter-01-intro.mp4
+chapter-02-getting-started.mp4
+chapter-03-custom-title.mp4
 ```
 
-The default small English model is downloaded on first use and cached at
-`.cache/whispercpp/ggml-small.en.bin`. Replace that file (or pass
-`--whisper-model-path`) to use a different model.
+When `--keep-intermediates` is enabled, intermediate files go to `output/.tmp/`:
+
+| File Pattern          | Description                                      |
+| --------------------- | ------------------------------------------------ |
+| `*-raw.mp4`           | Raw chapter clip with initial padding removed    |
+| `*-normalized.mp4`    | Audio normalized (highpass + denoise + loudnorm) |
+| `*-transcribe.wav`    | Audio extracted for whisper                      |
+| `*-transcribe.json`   | Whisper JSON output                              |
+| `*-transcribe.txt`    | Whisper text output                              |
+| `*-splice-*.mp4`      | Segments before/after command windows            |
+| `*-spliced.mp4`       | Concatenated output after command removal        |
+| `*.log`               | Per-chapter skip/fallback logs                   |
+| `process-summary.log` | Overall processing summary                       |
+
+## Voice Commands
+
+Commands are spoken in the format: `jarvis <command> ... thanks`
 
-Enable transcription with `--enable-transcription` when running
-`process-course-video.ts` to skip chapters that include "jarvis bad take" or
-"bad take jarvis". If the CLI isn't on your PATH, pass `--whisper-binary-path`
-with the full path to `whisper-cli`.
+| Command                                 | Effect                  |
+| --------------------------------------- | ----------------------- |
+| `jarvis bad take thanks`                | Skip the entire chapter |
+| `jarvis filename my-custom-name thanks` | Rename output file      |
 
-Customize skip phrases by repeating `--whisper-skip-phrase` (do not use
-comma-separated values because phrases may include commas).
+The command window (from "jarvis" to "thanks") is removed from the final video.
 
-Manual test checklist:
+## More Details
 
-- Run with `--enable-transcription` and confirm whisper.cpp runs locally.
-- Verify a chapter containing the phrase is skipped and logged.
-- Verify a normal chapter still renders and writes output.
+Implementation notes and pipeline details live in `docs/README.md`.
 
 This project was created using `bun init` in bun v1.3.1. [Bun](https://bun.com)
 is a fast all-in-one JavaScript runtime.

package/app/assets/styles.css

@@ -0,0 +1,592 @@
+:root {
+	color-scheme: light;
+}
+
+* {
+	box-sizing: border-box;
+}
+
+body {
+	margin: 0;
+	font-family:
+		'Inter',
+		'Segoe UI',
+		system-ui,
+		-apple-system,
+		sans-serif;
+	background: #f8fafc;
+	color: #0f172a;
+}
+
+h1,
+h2,
+h3,
+p {
+	margin: 0;
+}
+
+.app-shell {
+	max-width: 960px;
+	margin: 0 auto;
+	padding: 48px 24px 72px;
+}
+
+.app-header {
+	display: flex;
+	flex-direction: column;
+	gap: 12px;
+	margin-bottom: 32px;
+}
+
+.app-kicker {
+	font-size: 12px;
+	letter-spacing: 0.16em;
+	text-transform: uppercase;
+	color: #64748b;
+	font-weight: 600;
+}
+
+.app-title {
+	font-size: 32px;
+	font-weight: 700;
+}
+
+.app-subtitle {
+	font-size: 16px;
+	color: #475569;
+	line-height: 1.6;
+	max-width: 640px;
+}
+
+.app-grid {
+	display: grid;
+	gap: 16px;
+	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+}
+
+.app-card {
+	background: #ffffff;
+	border-radius: 16px;
+	border: 1px solid #e2e8f0;
+	padding: 20px;
+	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
+	display: flex;
+	flex-direction: column;
+	gap: 12px;
+}
+
+.app-list {
+	margin: 0;
+	padding-left: 18px;
+	color: #334155;
+	line-height: 1.6;
+}
+
+.app-muted {
+	color: #64748b;
+	line-height: 1.5;
+}
+
+.status-pill {
+	display: inline-flex;
+	align-items: center;
+	gap: 6px;
+	padding: 4px 12px;
+	border-radius: 999px;
+	background: #e0f2fe;
+	color: #0369a1;
+	font-size: 12px;
+	font-weight: 600;
+	width: fit-content;
+}
+
+.counter-button {
+	display: inline-flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: 12px;
+	padding: 10px 14px;
+	border: none;
+	border-radius: 10px;
+	background: #0ea5e9;
+	color: #ffffff;
+	font-size: 14px;
+	font-weight: 600;
+	cursor: pointer;
+	transition:
+		transform 0.15s ease,
+		background 0.15s ease;
+}
+
+.counter-button:hover {
+	background: #0284c7;
+}
+
+.counter-button:disabled {
+	cursor: not-allowed;
+	opacity: 0.6;
+}
+
+.counter-button:active {
+	transform: translateY(1px);
+}
+
+.counter-value {
+	font-weight: 700;
+}
+
+.app-card--full {
+	width: 100%;
+}
+
+.summary-grid {
+	display: grid;
+	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+	gap: 16px;
+	margin-top: 8px;
+}
+
+.summary-item {
+	display: flex;
+	flex-direction: column;
+	gap: 4px;
+}
+
+.summary-label {
+	font-size: 12px;
+	font-weight: 600;
+	text-transform: uppercase;
+	letter-spacing: 0.08em;
+	color: #94a3b8;
+}
+
+.summary-value {
+	font-size: 16px;
+	font-weight: 600;
+	color: #0f172a;
+}
+
+.summary-subtext {
+	font-size: 13px;
+	color: #64748b;
+	line-height: 1.4;
+}
+
+.timeline-card {
+	gap: 20px;
+}
+
+.timeline-header {
+	display: flex;
+	align-items: flex-start;
+	justify-content: space-between;
+	gap: 16px;
+	flex-wrap: wrap;
+}
+
+.timeline-layout {
+	display: grid;
+	grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
+	gap: 20px;
+}
+
+.timeline-preview {
+	display: flex;
+	flex-direction: column;
+	gap: 12px;
+}
+
+.timeline-video {
+	display: flex;
+	flex-direction: column;
+	gap: 10px;
+	padding: 12px;
+	border-radius: 16px;
+	border: 1px solid #e2e8f0;
+	background: #ffffff;
+}
+
+.timeline-video-header {
+	display: flex;
+	align-items: flex-start;
+	justify-content: space-between;
+	gap: 12px;
+}
+
+.timeline-video-player {
+	width: 100%;
+	border-radius: 12px;
+	background: #0f172a;
+	aspect-ratio: 16 / 9;
+}
+
+.timeline-video-meta {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	font-size: 12px;
+	color: #64748b;
+}
+
+.timeline-track {
+	position: relative;
+	height: 72px;
+	border-radius: 16px;
+	border: 1px solid #e2e8f0;
+	background: linear-gradient(
+		90deg,
+		rgba(226, 232, 240, 0.7) 0%,
+		rgba(226, 232, 240, 0.7) 2%,
+		transparent 2%,
+		transparent 20%
+	);
+	background-size: 20% 100%;
+	overflow: hidden;
+}
+
+.timeline-track--skeleton {
+	min-height: 72px;
+	background: linear-gradient(90deg, #f8fafc 0%, #e2e8f0 45%, #f8fafc 90%);
+	background-size: 200% 100%;
+	animation: shimmer 1.8s infinite;
+}
+
+.timeline-range {
+	position: absolute;
+	top: 14px;
+	height: 44px;
+	border-radius: 10px;
+	border: 1px solid #fca5a5;
+	background: #fee2e2;
+	cursor: pointer;
+	left: var(--range-left);
+	width: var(--range-width);
+	transition: transform 0.15s ease, box-shadow 0.15s ease;
+}
+
+.timeline-range--manual {
+	background: #fef3c7;
+	border-color: #fbbf24;
+}
+
+.timeline-range--command {
+	background: #fee2e2;
+	border-color: #fca5a5;
+}
+
+.timeline-range.is-selected {
+	box-shadow: 0 0 0 2px rgba(14, 165, 233, 0.6);
+	transform: translateY(-1px);
+}
+
+.timeline-playhead {
+	position: absolute;
+	top: 0;
+	bottom: 0;
+	width: 2px;
+	left: var(--playhead);
+	background: #0ea5e9;
+	box-shadow: 0 0 0 1px rgba(14, 165, 233, 0.4);
+}
+
+.timeline-scale {
+	display: flex;
+	justify-content: space-between;
+	font-size: 12px;
+	color: #64748b;
+}
+
+.timeline-controls {
+	display: grid;
+	grid-template-columns: auto 1fr auto auto;
+	gap: 12px;
+	align-items: center;
+}
+
+.timeline-slider {
+	width: 100%;
+}
+
+.control-label {
+	display: flex;
+	flex-direction: column;
+	font-size: 12px;
+	gap: 4px;
+	color: #64748b;
+	font-weight: 600;
+}
+
+.control-value {
+	font-size: 14px;
+	color: #0f172a;
+}
+
+.panel-header {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: 12px;
+	margin-bottom: 8px;
+}
+
+.panel-grid {
+	display: grid;
+	grid-template-columns: repeat(2, minmax(0, 1fr));
+	gap: 12px;
+	margin-bottom: 12px;
+}
+
+.input-label {
+	display: flex;
+	flex-direction: column;
+	gap: 6px;
+	font-size: 12px;
+	font-weight: 600;
+	color: #475569;
+}
+
+.input-label--full {
+	grid-column: 1 / -1;
+}
+
+.text-input {
+	border: 1px solid #cbd5f5;
+	border-radius: 10px;
+	padding: 8px 10px;
+	font-size: 14px;
+	font-family: inherit;
+}
+
+.text-input--compact {
+	padding: 6px 8px;
+}
+
+.button {
+	border: 1px solid #cbd5f5;
+	background: #ffffff;
+	color: #0f172a;
+	border-radius: 10px;
+	padding: 8px 12px;
+	font-size: 13px;
+	font-weight: 600;
+	cursor: pointer;
+	transition: background 0.15s ease, color 0.15s ease;
+}
+
+.button--primary {
+	background: #0ea5e9;
+	color: #ffffff;
+	border-color: #0284c7;
+}
+
+.button--danger {
+	background: #fef2f2;
+	border-color: #fecaca;
+	color: #b91c1c;
+}
+
+.button--ghost {
+	background: #f8fafc;
+	border-color: #e2e8f0;
+	color: #475569;
+}
+
+.button:disabled {
+	cursor: not-allowed;
+	opacity: 0.6;
+}
+
+.cut-list {
+	list-style: none;
+	padding: 0;
+	margin: 0;
+	display: flex;
+	flex-direction: column;
+	gap: 10px;
+}
+
+.cut-row {
+	display: flex;
+	align-items: center;
+	gap: 12px;
+	justify-content: space-between;
+	border: 1px solid #e2e8f0;
+	border-radius: 12px;
+	padding: 8px 12px;
+	background: #f8fafc;
+}
+
+.cut-row.is-selected {
+	border-color: #38bdf8;
+	background: #e0f2fe;
+}
+
+.cut-select {
+	background: transparent;
+	border: none;
+	text-align: left;
+	cursor: pointer;
+	display: flex;
+	flex-direction: column;
+	gap: 4px;
+	font-size: 13px;
+	color: #0f172a;
+	flex: 1;
+}
+
+.cut-time {
+	font-weight: 600;
+}
+
+.cut-reason {
+	color: #64748b;
+}
+
+.app-grid--two {
+	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
+}
+
+.chapter-list,
+.command-list {
+	display: flex;
+	flex-direction: column;
+	gap: 12px;
+}
+
+.chapter-row,
+.command-row {
+	border: 1px solid #e2e8f0;
+	border-radius: 14px;
+	padding: 12px;
+	background: #f8fafc;
+	display: flex;
+	flex-direction: column;
+	gap: 10px;
+}
+
+.chapter-header,
+.command-header {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: 12px;
+}
+
+.chapter-time {
+	font-size: 12px;
+	color: #64748b;
+}
+
+.command-meta {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: 12px;
+}
+
+.command-time {
+	font-size: 12px;
+	color: #64748b;
+}
+
+.status-pill--success {
+	background: #dcfce7;
+	color: #166534;
+}
+
+.status-pill--warning {
+	background: #fef3c7;
+	color: #92400e;
+}
+
+.status-pill--danger {
+	background: #fee2e2;
+	color: #b91c1c;
+}
+
+.status-pill--info {
+	background: #e0f2fe;
+	color: #0369a1;
+}
+
+.transcript-card {
+	gap: 16px;
+}
+
+.transcript-header {
+	display: flex;
+	align-items: flex-start;
+	justify-content: space-between;
+	gap: 16px;
+	flex-wrap: wrap;
+}
+
+.transcript-preview {
+	display: flex;
+	flex-direction: column;
+	gap: 4px;
+	max-width: 320px;
+}
+
+.transcript-results {
+	list-style: none;
+	margin: 0;
+	padding: 0;
+	display: grid;
+	gap: 8px;
+}
+
+.transcript-result {
+	width: 100%;
+	border: 1px solid #e2e8f0;
+	border-radius: 10px;
+	padding: 8px 10px;
+	background: #ffffff;
+	display: grid;
+	grid-template-columns: auto 1fr;
+	gap: 10px;
+	text-align: left;
+	cursor: pointer;
+}
+
+.transcript-time {
+	font-weight: 600;
+	color: #0f172a;
+}
+
+.transcript-snippet {
+	color: #64748b;
+}
+
+.transcript-empty {
+	margin-top: 4px;
+}
+
+.command-preview {
+	background: #0f172a;
+	color: #e2e8f0;
+	border-radius: 12px;
+	padding: 16px;
+	font-size: 13px;
+	line-height: 1.5;
+	overflow-x: auto;
+}
+
+@keyframes shimmer {
+	0% {
+		background-position: 0% 50%;
+	}
+	100% {
+		background-position: 200% 50%;
+	}
+}
+
+@media (max-width: 900px) {
+	.timeline-layout {
+		grid-template-columns: 1fr;
+	}
+
+	.timeline-controls {
+		grid-template-columns: 1fr;
+	}
+}

package/app/client/app.tsx

@@ -0,0 +1,7 @@
+import { EditingWorkspace } from './editing-workspace.tsx'
+
+export function App() {
+	return () => (
+		<EditingWorkspace />
+	)
+}