eprec 0.0.1 → 1.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Kent C. Dodds
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,45 +1,138 @@
-# eprec
+<div align="center">
+<h1>eprec</h1>
 
-## ⚠️ IMPORTANT NOTICE ⚠️
+<p>Tools for processing Epic Web course recordings</p>
+</div>
 
-**This package is created solely for the purpose of setting up OIDC (OpenID Connect) trusted publishing with npm.**
+---
 
-This is **NOT** a functional package and contains **NO** code or functionality beyond the OIDC setup configuration.
+<!-- prettier-ignore-start -->
+[![Build Status][build-badge]][build]
+[![version][version-badge]][package]
+[![downloads][downloads-badge]][npmtrends]
+[![MIT License][license-badge]][license]
+<!-- prettier-ignore-end -->
 
-## Purpose
+## Overview
 
-This package exists to:
-1. Configure OIDC trusted publishing for the package name `eprec`
-2. Enable secure, token-less publishing from CI/CD workflows
-3. Establish provenance for packages published under this name
+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.
 
-## What is OIDC Trusted Publishing?
+## Requirements
 
-OIDC trusted publishing allows package maintainers to publish packages directly from their CI/CD workflows without needing to manage npm access tokens. Instead, it uses OpenID Connect to establish trust between the CI/CD provider (like GitHub Actions) and npm.
+- **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
 
-## Setup Instructions
+## Installation
 
-To properly configure OIDC trusted publishing for this package:
+```bash
+bun install
+```
 
-1. Go to [npmjs.com](https://www.npmjs.com/) and navigate to your package settings
-2. Configure the trusted publisher (e.g., GitHub Actions)
-3. Specify the repository and workflow that should be allowed to publish
-4. Use the configured workflow to publish your actual package
+## Quick Start
 
-## DO NOT USE THIS PACKAGE
+```bash
+bun process-course-video.ts "/path/to/input.mp4" "/path/to/output" \
+  --enable-transcription \
+  --keep-intermediates \
+  --write-logs
+```
 
-This package is a placeholder for OIDC configuration only. It:
-- Contains no executable code
-- Provides no functionality
-- Should not be installed as a dependency
-- Exists only for administrative purposes
+## Web UI (experimental)
 
-## More Information
+Start the Remix-powered UI shell with the CLI:
 
-For more details about npm's trusted publishing feature, see:
-- [npm Trusted Publishing Documentation](https://docs.npmjs.com/generating-provenance-statements)
-- [GitHub Actions OIDC Documentation](https://docs.github.com/en/actions/deployment/security-hardening-your-deployments/about-security-hardening-with-openid-connect)
+```bash
+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
+```
+
+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`
+
+| Command                                 | Effect                  |
+| --------------------------------------- | ----------------------- |
+| `jarvis bad take thanks`                | Skip the entire chapter |
+| `jarvis filename my-custom-name thanks` | Rename output file      |
+
+The command window (from "jarvis" to "thanks") is removed from the final video.
+
+## More Details
+
+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.
 
-**Maintained for OIDC setup purposes only**
+<!-- prettier-ignore-start -->
+[build-badge]: https://img.shields.io/github/actions/workflow/status/epicweb-dev/eprec/validate.yml?branch=main&logo=github&style=flat-square
+[build]: https://github.com/epicweb-dev/eprec/actions?query=workflow%3Avalidate
+[version-badge]: https://img.shields.io/npm/v/eprec.svg?style=flat-square
+[package]: https://www.npmjs.com/package/eprec
+[downloads-badge]: https://img.shields.io/npm/dm/eprec.svg?style=flat-square
+[npmtrends]: https://www.npmtrends.com/eprec
+[license-badge]: https://img.shields.io/npm/l/eprec.svg?style=flat-square
+[license]: https://github.com/epicweb-dev/eprec/blob/main/LICENSE
+<!-- prettier-ignore-end -->

package/app/assets/styles.css

@@ -0,0 +1,129 @@
+: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;
+}

package/app/client/app.tsx

@@ -0,0 +1,37 @@
+import { Counter } from './counter.tsx'
+
+export function App() {
+	return () => (
+		<main class="app-shell">
+			<header class="app-header">
+				<span class="app-kicker">Eprec Studio</span>
+				<h1 class="app-title">Editing workspace</h1>
+				<p class="app-subtitle">
+					Prepare edits with the CLI, then review them here.
+				</p>
+			</header>
+			<div class="app-grid">
+				<section class="app-card">
+					<h2>Workflow</h2>
+					<ol class="app-list">
+						<li>Run a CLI edit command.</li>
+						<li>Open the workspace UI.</li>
+						<li>Review and refine the cut list.</li>
+					</ol>
+				</section>
+				<section class="app-card">
+					<h2>UI status</h2>
+					<p class="status-pill">Running locally</p>
+					<p class="app-muted">
+						Server-rendered shell with client-side edits.
+					</p>
+				</section>
+				<section class="app-card">
+					<h2>Interaction check</h2>
+					<p class="app-muted">Click the counter to verify interactivity.</p>
+					<Counter setup={{ initial: 0 }} />
+				</section>
+			</div>
+		</main>
+	)
+}

package/app/client/counter.tsx

@@ -0,0 +1,22 @@
+import type { Handle } from 'remix/component'
+
+type CounterSetup = { initial?: number }
+
+export function Counter(handle: Handle, props: { setup?: CounterSetup } = {}) {
+	let count = props.setup?.initial ?? 0
+	return () => (
+		<button
+			type="button"
+			class="counter-button"
+			on={{
+				click: () => {
+					count += 1
+					handle.update()
+				},
+			}}
+		>
+			<span>Click count</span>
+			<span class="counter-value">{count}</span>
+		</button>
+	)
+}

package/app/client/entry.tsx

@@ -0,0 +1,8 @@
+import { createRoot } from 'remix/component'
+import { App } from './app.tsx'
+
+const rootElement = document.getElementById('root')
+if (rootElement) {
+	rootElement.innerHTML = ''
+}
+createRoot(rootElement ?? document.body).render(<App />)

package/app/components/layout.tsx

@@ -0,0 +1,37 @@
+import { html, type SafeHtml } from 'remix/html-template'
+import { baseImportMap } from '../config/import-map.ts'
+
+export function Layout({
+	children,
+	title = 'Eprec Studio',
+	entryScript = '/app/client/entry.tsx',
+}: {
+	children?: SafeHtml
+	title?: string
+	entryScript?: string | false
+}) {
+	const importmap = { imports: baseImportMap }
+	const importmapJson = JSON.stringify(importmap)
+	const importmapScript = html.raw`<script type="importmap">${importmapJson}</script>`
+	const modulePreloads = Object.values(baseImportMap).map((value) => {
+		return html`<link rel="modulepreload" href="${value}" />`
+	})
+
+	return html`<html lang="en">
+		<head>
+			<meta charset="utf-8" />
+			<meta name="viewport" content="width=device-width, initial-scale=1" />
+			<title>${title}</title>
+			<link rel="stylesheet" href="/assets/styles.css" />
+			${importmapScript} ${modulePreloads}
+		</head>
+		<body>
+			<div id="root">${children ?? ''}</div>
+			${
+				entryScript
+					? html`<script type="module" src="${entryScript}"></script>`
+					: ''
+			}
+		</body>
+	</html>`
+}

package/app/config/env.ts

@@ -0,0 +1,31 @@
+type AppEnv = {
+	NODE_ENV: 'development' | 'production' | 'test'
+	PORT: number
+	HOST: string
+}
+
+const DEFAULT_PORT = 3000
+const DEFAULT_HOST = '127.0.0.1'
+
+function parseNodeEnv(value: string | undefined): AppEnv['NODE_ENV'] {
+	if (value === 'production' || value === 'test') {
+		return value
+	}
+	return 'development'
+}
+
+function parsePort(value: string | undefined): number {
+	const parsed = Number(value)
+	if (!Number.isFinite(parsed) || parsed <= 0) {
+		return DEFAULT_PORT
+	}
+	return Math.floor(parsed)
+}
+
+export function getEnv(): AppEnv {
+	return {
+		NODE_ENV: parseNodeEnv(process.env.NODE_ENV),
+		PORT: parsePort(process.env.PORT),
+		HOST: process.env.HOST?.trim() || DEFAULT_HOST,
+	}
+}

package/app/config/import-map.ts

@@ -0,0 +1,9 @@
+/**
+ * Base import map for client-side modules.
+ */
+export const baseImportMap = {
+	'remix/component': '/node_modules/remix/component',
+	'remix/component/jsx-runtime': '/node_modules/remix/component/jsx-runtime',
+	'remix/component/jsx-dev-runtime':
+		'/node_modules/remix/component/jsx-dev-runtime',
+} as const

package/app/config/init-env.ts

@@ -0,0 +1,3 @@
+if (!process.env.NODE_ENV) {
+	process.env.NODE_ENV = 'development'
+}

package/app/config/routes.ts

@@ -0,0 +1,5 @@
+import { route } from 'remix/fetch-router'
+
+export default route({
+	index: '/',
+})

package/app/helpers/render.ts

@@ -0,0 +1,6 @@
+import type { SafeHtml } from 'remix/html-template'
+import { createHtmlResponse } from 'remix/response/html'
+
+export function render(body: string | SafeHtml, init?: ResponseInit) {
+	return createHtmlResponse(body, init)
+}

package/app/router.tsx

@@ -0,0 +1,102 @@
+import path from 'node:path'
+import { createRouter, type Middleware } from 'remix/fetch-router'
+import { html } from 'remix/html-template'
+import { Layout } from './components/layout.tsx'
+import routes from './config/routes.ts'
+import { render } from './helpers/render.ts'
+import indexHandlers from './routes/index.tsx'
+
+const STATIC_CORS_HEADERS = {
+	'Access-Control-Allow-Origin': '*',
+	'Access-Control-Allow-Methods': 'GET, HEAD, OPTIONS',
+	'Access-Control-Allow-Headers': 'Accept, Content-Type',
+} as const
+
+function bunStaticFiles(
+	root: string,
+	options: { filter?: (pathname: string) => boolean; cacheControl?: string },
+): Middleware {
+	const absoluteRoot = path.resolve(root)
+	return async (context, next) => {
+		if (context.method === 'OPTIONS') {
+			const relativePath = context.url.pathname.replace(/^\/+/, '')
+			if (options.filter && !options.filter(relativePath)) {
+				return next()
+			}
+			const filePath = path.join(absoluteRoot, relativePath)
+			if (!filePath.startsWith(absoluteRoot + path.sep)) {
+				return next()
+			}
+			const file = Bun.file(filePath)
+			if (!(await file.exists())) {
+				return next()
+			}
+			return new Response(null, {
+				status: 204,
+				headers: {
+					...STATIC_CORS_HEADERS,
+					'Access-Control-Max-Age': '86400',
+				},
+			})
+		}
+
+		if (context.method !== 'GET' && context.method !== 'HEAD') {
+			return next()
+		}
+		const relativePath = context.url.pathname.replace(/^\/+/, '')
+		if (options.filter && !options.filter(relativePath)) {
+			return next()
+		}
+		const filePath = path.join(absoluteRoot, relativePath)
+		if (!filePath.startsWith(absoluteRoot + path.sep)) {
+			return next()
+		}
+		const file = Bun.file(filePath)
+		if (!(await file.exists())) {
+			return next()
+		}
+		return new Response(context.method === 'HEAD' ? null : file, {
+			headers: {
+				'Content-Type': file.type,
+				'Content-Length': String(file.size),
+				...(options.cacheControl
+					? { 'Cache-Control': options.cacheControl }
+					: {}),
+				...STATIC_CORS_HEADERS,
+			},
+		})
+	}
+}
+
+const cacheControl =
+	process.env.NODE_ENV === 'production'
+		? 'public, max-age=31536000, immutable'
+		: 'no-cache'
+
+export function createAppRouter(rootDir: string) {
+	const router = createRouter({
+		middleware: [
+			bunStaticFiles(path.join(rootDir, 'public'), { cacheControl }),
+			bunStaticFiles(path.join(rootDir, 'app'), {
+				filter: (pathname) => pathname.startsWith('assets/'),
+				cacheControl,
+			}),
+		],
+		defaultHandler() {
+			return render(
+				Layout({
+					title: 'Not Found',
+					entryScript: false,
+					children: html`<main class="app-shell">
+					<h1 class="app-title">404 - Not Found</h1>
+				</main>`,
+				}),
+				{ status: 404 },
+			)
+		},
+	})
+
+	router.map(routes.index, indexHandlers)
+
+	return router
+}

package/app/routes/index.tsx

@@ -0,0 +1,50 @@
+import { html } from 'remix/html-template'
+import { Layout } from '../components/layout.tsx'
+import { render } from '../helpers/render.ts'
+
+const indexHandler = {
+	middleware: [],
+	loader() {
+		return render(
+			Layout({
+				title: 'Eprec Studio',
+				children: html`<main class="app-shell">
+					<header class="app-header">
+						<span class="app-kicker">Eprec Studio</span>
+						<h1 class="app-title">Editing workspace</h1>
+						<p class="app-subtitle">
+							Prepare edits with the CLI, then review them here.
+						</p>
+					</header>
+					<div class="app-grid">
+						<section class="app-card">
+							<h2>Workflow</h2>
+							<ol class="app-list">
+								<li>Run a CLI edit command.</li>
+								<li>Open the workspace UI.</li>
+								<li>Review and refine the cut list.</li>
+							</ol>
+						</section>
+						<section class="app-card">
+							<h2>UI status</h2>
+							<p class="status-pill">UI booted</p>
+							<p class="app-muted">
+								Client-side components load after the first paint.
+							</p>
+						</section>
+						<section class="app-card">
+							<h2>Interaction check</h2>
+							<p class="app-muted">Client bundle loads after this page.</p>
+							<button class="counter-button" type="button" disabled>
+								<span>Click count</span>
+								<span class="counter-value">0</span>
+							</button>
+						</section>
+					</div>
+				</main>`,
+			}),
+		)
+	},
+}
+
+export default indexHandler