diff --git a/.eslintrc.cjs b/.eslintrc.cjs new file mode 100644 index 0000000..340174b --- /dev/null +++ b/.eslintrc.cjs @@ -0,0 +1,5 @@ +/** @type {import("eslint").Linter.Config} */ +module.exports = { + ...require("@remotion/eslint-config"), + ignorePatterns: ["dist/**", "node_modules/**", "docs/**"], +}; diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index 8a46e73..18610a4 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -33,6 +33,31 @@ jobs: - name: Build run: npm run build + test: + runs-on: ubuntu-latest + needs: build + steps: + - uses: actions/checkout@v4 + - uses: actions/setup-node@v4 + with: + node-version: 20 + cache: npm + - run: npm ci + - run: npm test + - run: npm run validate:docs + + studio-smoke: + runs-on: ubuntu-latest + needs: build + steps: + - uses: actions/checkout@v4 + - uses: actions/setup-node@v4 + with: + node-version: 20 + cache: npm + - run: npm ci + - run: npx remotion compositions + lint: runs-on: ubuntu-latest @@ -50,7 +75,8 @@ jobs: run: npm ci - name: Lint - run: npx eslint src --ext .ts,.tsx || true + continue-on-error: true + run: npm run lint pages: runs-on: ubuntu-latest diff --git a/AGENTS.md b/AGENTS.md new file mode 100644 index 0000000..169001d --- /dev/null +++ b/AGENTS.md @@ -0,0 +1,56 @@ +# Cursor Cloud / agent instructions + +## Update script (VM startup) + +```bash +npm install +``` + +## Develop + +```bash +npm install +npm run build +npm start +``` + +Remotion Studio loads **14** demo compositions from `src/studio/`. + +## Preview server + +```bash +npm run build +npm run preview:web +``` + +Open http://localhost:3456 — upload **audio** (uses `POST /api/process` + STT env keys) or **caption JSON**. + +## Tests & checks + +```bash +npm test +npx tsc --noEmit +npx remotion compositions +npm run validate:docs +``` + +## Environment variables + +| Variable | Purpose | +|----------|---------| +| `GROQ_API_KEY` | Groq Whisper STT | +| `OPENAI_API_KEY` | OpenAI Whisper + `captioneer translate` | +| `DEEPGRAM_API_KEY` | Deepgram STT | +| `ASSEMBLYAI_API_KEY` | AssemblyAI STT | + +Local whisper: `captioneer process audio.mp4 --provider local` (requires whisper.cpp setup). + +## Design (docs & preview UI) + +Marketing and preview surfaces use a neutral zinc palette with a single blue accent (`#3b82f6`). Shared tokens live in `docs/theme.css`; the preview server inlines matching CSS variables. Avoid purple/gold gradients and emoji-heavy headings in new UI. + +## Architecture + +See [docs/PROJECT_PLAN.md](docs/PROJECT_PLAN.md). + +Node-only imports: `remotion-captioneer/node` (STT, export, translate). diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index d14475d..94fa20e 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -23,15 +23,23 @@ npm start ## Project Structure +See [docs/PROJECT_PLAN.md](docs/PROJECT_PLAN.md) for how surfaces connect. + ``` src/ -├── components/ # Caption style components -├── types.ts # TypeScript type definitions -├── utils.ts # Timing/frame utilities -├── whisper.ts # Whisper.cpp integration -├── cli.ts # CLI tool -├── Root.tsx # Remotion compositions -└── index.ts # Public exports +├── components/ # 14 caption style components + AnimatedCaptions +├── caption-styles.ts # CAPTION_STYLES (single list) +├── demo/captions.ts # Shared demo CaptionData +├── providers/ # Cloud STT providers + registry +├── sync/ # Audio analysis + hooks +├── templates/ # Template builder + renderer +├── layouts/ # Layout primitives +├── presets/ # Style presets +├── cli.ts # CLI (captioneer) +├── preview-server.ts # Browser preview (captioneer preview) +├── remotion-entry.tsx# Remotion registerRoot entry +├── Root.tsx # Studio demo compositions (all styles) +└── index.ts # npm package exports ``` ## Adding a New Caption Style @@ -40,9 +48,10 @@ src/ 2. It receives `captions: CaptionData` and renders animated words 3. Use `useCurrentFrame()` + `useVideoConfig()` to get timing 4. Export it from `src/components/index.ts` -5. Add it to the `styleMap` in `AnimatedCaptions.tsx` -6. Add a demo composition in `Root.tsx` -7. Update the README +5. Add it to `CaptionStyle` in `types.ts` and `CAPTION_STYLES` in `caption-styles.ts` +6. Add it to the `styleMap` in `AnimatedCaptions.tsx` +7. Studio picks it up automatically via `Root.tsx` (no manual composition per style) +8. Update preview-server ` @@ -203,6 +240,7 @@ const HTML_TEMPLATE = ` + @@ -211,17 +249,17 @@ const HTML_TEMPLATE = ` - + +
-
🎙️
- Drop audio file or click to upload -

MP3, WAV, M4A, MP4, OGG

- +

Drop audio or caption JSON

+

MP3, WAV, M4A, MP4, or caption JSON

+
@@ -238,8 +276,8 @@ const HTML_TEMPLATE = `

Upload

Stats

@@ -280,6 +318,23 @@ const HTML_TEMPLATE = ` let captions = null; let currentStyle = 'word-highlight'; let animFrame = null; + const PRESET_LIST = __PRESETS_JSON__; + const STUDIO_MAP = __STUDIO_MAP__; + let presetIdx = 0; + let activeAccent = '#e4e4e7'; + + document.getElementById('presets-btn').addEventListener('click', () => { + const keys = Object.keys(PRESET_LIST); + if (!keys.length) return; + presetIdx = (presetIdx + 1) % keys.length; + const p = PRESET_LIST[keys[presetIdx]]; + activeAccent = p.highlightColor || '#e4e4e7'; + currentStyle = p.style || currentStyle; + styleSelect.value = currentStyle; + document.getElementById('stat-style').textContent = keys[presetIdx]; + document.getElementById('presets-btn').textContent = p.name || keys[presetIdx]; + renderCaptions(); + }); // Upload handlers [uploadZone, sidebarUpload].forEach(zone => { @@ -287,11 +342,11 @@ const HTML_TEMPLATE = ` const input = zone.querySelector('input[type=file]') || fileInput; input.click(); }); - zone.addEventListener('dragover', e => { e.preventDefault(); zone.style.borderColor = '#FFD700'; }); - zone.addEventListener('dragleave', () => { zone.style.borderColor = '#333'; }); + zone.addEventListener('dragover', e => { e.preventDefault(); zone.style.borderColor = '#3b82f6'; }); + zone.addEventListener('dragleave', () => { zone.style.borderColor = ''; }); zone.addEventListener('drop', e => { e.preventDefault(); - zone.style.borderColor = '#333'; + zone.style.borderColor = ''; if (e.dataTransfer.files.length) processFile(e.dataTransfer.files[0]); }); }); @@ -302,12 +357,45 @@ const HTML_TEMPLATE = ` async function processFile(file) { document.getElementById('json-output').textContent = 'Processing...'; - // Create object URL for playback - const url = URL.createObjectURL(file); - audioPlayer.src = url; + const isJson = + file.name.toLowerCase().endsWith('.json') || + file.type === 'application/json'; - // Generate demo captions (in real usage, this calls the API) - captions = generateDemoCaptions(file.name); + if (isJson) { + try { + const text = await file.text(); + captions = JSON.parse(text); + if (!captions || !Array.isArray(captions.segments)) { + throw new Error('Expected { segments: [...] }'); + } + audioPlayer.removeAttribute('src'); + } catch (err) { + document.getElementById('json-output').textContent = + 'Invalid caption JSON. Check file format.'; + return; + } + } else { + const url = URL.createObjectURL(file); + audioPlayer.src = url; + document.getElementById('json-output').textContent = 'Transcribing via STT (set API keys or use local whisper)...'; + try { + const res = await fetch('/api/process', { + method: 'POST', + headers: { + 'X-Filename': file.name, + 'Content-Type': file.type || 'application/octet-stream' + }, + body: file + }); + const data = await res.json(); + if (!res.ok) throw new Error(data.error || res.statusText); + captions = data; + } catch (err) { + document.getElementById('json-output').textContent = + 'Transcribe failed: ' + (err.message || err) + ' — using demo timings.'; + captions = generateDemoCaptions(file.name); + } + } // Update UI uploadZone.style.display = 'none'; @@ -348,6 +436,9 @@ const HTML_TEMPLATE = ` styleSelect.addEventListener('change', e => { currentStyle = e.target.value; document.getElementById('stat-style').textContent = currentStyle; + const studio = document.getElementById('studio-link'); + studio.style.display = 'inline-block'; + studio.href = 'http://localhost:3000/' + (STUDIO_MAP[currentStyle] || 'WordHighlightDemo'); renderCaptions(); }); @@ -418,6 +509,13 @@ const HTML_TEMPLATE = ` const isPast = currentTimeMs > end; span.className = 'word ' + (isActive ? 'word-active' : isPast ? 'word-past' : 'word-inactive'); + if (isActive) { + span.style.color = activeAccent; + span.style.textShadow = '0 0 20px ' + activeAccent + '80'; + } else { + span.style.color = ''; + span.style.textShadow = ''; + } if (isActive && currentStyle === 'bounce') { span.style.animation = 'none'; @@ -439,18 +537,95 @@ const HTML_TEMPLATE = ` `; +const STUDIO_COMPOSITION_MAP = Object.fromEntries( + CAPTION_STYLES.map((s) => [s, styleToCompositionId(s as CaptionStyle)]) +) as Record; + +function buildPresetPayload(): Record< + string, + { name: string; style: string; highlightColor: string } +> { + const out: Record = + {}; + for (const [key, p] of Object.entries(presets)) { + out[key] = { + name: p.name, + style: p.style, + highlightColor: p.highlightColor, + }; + } + return out; +} + +function buildHtml(): string { + const presetJson = JSON.stringify(buildPresetPayload()); + const studioMap = JSON.stringify(STUDIO_COMPOSITION_MAP); + return HTML_TEMPLATE.replace("__PRESETS_JSON__", presetJson).replace( + "__STUDIO_MAP__", + studioMap + ); +} + +async function readRequestBody(req: IncomingMessage): Promise { + const chunks: Buffer[] = []; + for await (const chunk of req) { + chunks.push(typeof chunk === "string" ? Buffer.from(chunk) : chunk); + } + return Buffer.concat(chunks); +} + +async function handleProcess(req: IncomingMessage, res: ServerResponse): Promise { + try { + const body = await readRequestBody(req); + const filename = + (typeof req.headers["x-filename"] === "string" + ? req.headers["x-filename"] + : "upload.bin") || "upload.bin"; + const tmpPath = join(tmpdir(), `captioneer-${Date.now()}-${basename(filename)}`); + await writeFile(tmpPath, body); + try { + const captions = await transcribeMediaFile(tmpPath, { + onProgress: (m) => console.log(` ${m}`), + }); + res.writeHead(200, { "Content-Type": "application/json" }); + res.end(JSON.stringify(captions)); + } finally { + await unlink(tmpPath).catch(() => undefined); + } + } catch (e: unknown) { + console.error("Preview /api/process failed:", e); + res.writeHead(500, { "Content-Type": "application/json" }); + res.end(JSON.stringify({ error: "Transcription failed" })); + } +} + /** * Start the preview server */ export function startPreviewServer(port: number = PORT): void { - const server = createServer((req: IncomingMessage, res: ServerResponse) => { + const html = buildHtml(); + + const server = createServer((req, res) => { + const url = req.url?.split("?")[0] ?? "/"; + + if (req.method === "POST" && url === "/api/process") { + void handleProcess(req, res); + return; + } + + if (req.method === "GET" && url === "/api/presets") { + res.writeHead(200, { "Content-Type": "application/json" }); + res.end(JSON.stringify(buildPresetPayload())); + return; + } + res.writeHead(200, { "Content-Type": "text/html" }); - res.end(HTML_TEMPLATE); + res.end(html); }); server.listen(port, () => { - console.log(`\n🎬 Captioneer Preview Server`); + console.log(`\nCaptioneer preview server`); console.log(` Local: http://localhost:${port}\n`); - console.log(` Upload audio to preview captions in real-time.\n`); + console.log(` Upload audio (STT) or caption JSON. POST /api/process for transcription.\n`); }); } diff --git a/src/providers/index.ts b/src/providers/index.ts index d1f96f3..4d9eaed 100644 --- a/src/providers/index.ts +++ b/src/providers/index.ts @@ -9,6 +9,7 @@ export { OpenAIProvider } from "./openai.js"; export { GroqProvider } from "./groq.js"; export { DeepgramProvider } from "./deepgram.js"; export { AssemblyAIProvider } from "./assemblyai.js"; +export { LocalWhisperProvider } from "./local.js"; export { createProvider, diff --git a/src/providers/local.ts b/src/providers/local.ts new file mode 100644 index 0000000..3d1b26c --- /dev/null +++ b/src/providers/local.ts @@ -0,0 +1,25 @@ +/** + * Local Whisper.cpp STT provider + */ + +import type { CaptionData } from "../types.js"; +import type { STTProvider, STTProviderOptions } from "./base.js"; +import { processAudio } from "../whisper.js"; + +export class LocalWhisperProvider implements STTProvider { + readonly name = "local" as const; + + isReady(): boolean { + return true; + } + + async transcribe( + audioPath: string, + options?: STTProviderOptions + ): Promise { + return processAudio(audioPath, { + model: options?.model as any, + language: options?.language, + }); + } +} diff --git a/src/providers/registry.ts b/src/providers/registry.ts index 2f89f42..55ca240 100644 --- a/src/providers/registry.ts +++ b/src/providers/registry.ts @@ -14,6 +14,7 @@ import { OpenAIProvider } from "./openai.js"; import { GroqProvider } from "./groq.js"; import { DeepgramProvider } from "./deepgram.js"; import { AssemblyAIProvider } from "./assemblyai.js"; +import { LocalWhisperProvider } from "./local.js"; export type { STTProvider, STTProviderOptions, ProviderName, ProviderConfig } from "./base.js"; export { OpenAIProvider } from "./openai.js"; @@ -30,9 +31,7 @@ export function createProvider( ): STTProvider { switch (name) { case "local": - throw new Error( - "Local whisper provider should be used via processAudio() from whisper.ts" - ); + return new LocalWhisperProvider(); case "openai": return new OpenAIProvider(apiKey); case "groq": @@ -76,7 +75,7 @@ export function listProviders(): Array<{ const providers: Array<{ name: ProviderName; provider: STTProvider; models: string[] }> = [ { name: "local", - provider: { name: "local", transcribe: async () => ({ segments: [], language: "", durationMs: 0 }), isReady: () => true }, + provider: new LocalWhisperProvider(), models: ["tiny", "base", "small", "medium", "large"], }, { diff --git a/src/scaffold.ts b/src/scaffold.ts index 6f351f2..8a0af03 100644 --- a/src/scaffold.ts +++ b/src/scaffold.ts @@ -148,11 +148,7 @@ import captions from "./captions.json"; * {...applyPreset("podcast-bold")} */ export const CaptionedVideo = () => ( - + {/* Uncomment to add audio: @@ -196,7 +192,36 @@ export const RemotionRoot = () => ( ` ); - // Index entry point + // Remotion Studio entry (registerRoot) + writeFileSync( + join(projectDir, "src", "remotion-entry.tsx"), + `import { registerRoot } from "remotion"; +import { RemotionRoot } from "./Root"; + +registerRoot(RemotionRoot); +` + ); + + writeFileSync( + join(projectDir, "remotion.config.ts"), + `import type { WebpackConfiguration } from "@remotion/bundler"; +import { Config } from "@remotion/cli/config"; + +Config.overrideWebpackConfig((current: WebpackConfiguration) => ({ + ...current, + resolve: { + ...current.resolve, + extensionAlias: { + ".js": [".ts", ".tsx", ".js"], + }, + }, +})); + +Config.setEntryPoint("src/remotion-entry.tsx"); +` + ); + + // Library re-exports for your app code writeFileSync( join(projectDir, "src", "index.ts"), `export { RemotionRoot } from "./Root"; diff --git a/src/studio/CaptionShowcase.tsx b/src/studio/CaptionShowcase.tsx new file mode 100644 index 0000000..5be5b5a --- /dev/null +++ b/src/studio/CaptionShowcase.tsx @@ -0,0 +1,56 @@ +/** + * CaptionShowcase — Showcases a caption style over a dark background + */ + +import React from "react"; +import { AbsoluteFill, Audio } from "remotion"; +import type { CaptionData, CaptionStyle } from "../types.js"; +import { AnimatedCaptions } from "../components/AnimatedCaptions.js"; + +interface CaptionShowcaseProps { + captions: CaptionData; + style: CaptionStyle; + audioSrc?: string; +} + +const STYLE_HIGHLIGHT: Partial> = { + karaoke: "#f87171", + typewriter: "#34d399", + bounce: "#f472b6", +}; + +export const CaptionShowcase: React.FC = ({ + captions, + style, + audioSrc, +}) => { + const highlight = STYLE_HIGHLIGHT[style] ?? "#e4e4e7"; + + return ( + + {audioSrc && + ); +}; diff --git a/src/studio/Root.tsx b/src/studio/Root.tsx new file mode 100644 index 0000000..58b41f2 --- /dev/null +++ b/src/studio/Root.tsx @@ -0,0 +1,41 @@ +/** + * Remotion Root — registers all caption style demo compositions + */ + +import React from "react"; +import { Composition } from "remotion"; +import { CaptionShowcase } from "./CaptionShowcase.js"; +import { CAPTION_STYLES, styleToCompositionId } from "../caption-styles.js"; +import { demoCaptions } from "./demo/captions.js"; +import type { CaptionStyle } from "../types.js"; + +const DEMO_FPS = 30; +const DEMO_DURATION_FRAMES = 240; +const DEMO_WIDTH = 1920; +const DEMO_HEIGHT = 1080; + +function createStyleDemo(style: CaptionStyle): React.FC> { + const Demo: React.FC> = (props) => ( + + ); + Demo.displayName = styleToCompositionId(style); + return Demo; +} + +export const RemotionRoot: React.FC = () => { + return ( + <> + {CAPTION_STYLES.map((style) => ( + + ))} + + ); +}; diff --git a/src/studio/demo/captions.ts b/src/studio/demo/captions.ts new file mode 100644 index 0000000..91a6fb1 --- /dev/null +++ b/src/studio/demo/captions.ts @@ -0,0 +1,43 @@ +import type { CaptionData } from "../../types.js"; + +/** Shared demo caption data for Remotion Studio and examples. */ +export const demoCaptions: CaptionData = { + language: "en", + durationMs: 8000, + segments: [ + { + text: "Hello world this is awesome", + startMs: 0, + endMs: 3000, + words: [ + { word: "Hello", startMs: 0, endMs: 600, confidence: 0.98 }, + { word: "world", startMs: 600, endMs: 1200, confidence: 0.95 }, + { word: "this", startMs: 1200, endMs: 1800, confidence: 0.97 }, + { word: "is", startMs: 1800, endMs: 2400, confidence: 0.99 }, + { word: "awesome", startMs: 2400, endMs: 3000, confidence: 0.96 }, + ], + }, + { + text: "Remotion captions are beautiful", + startMs: 3200, + endMs: 6500, + words: [ + { word: "Remotion", startMs: 3200, endMs: 4000, confidence: 0.98 }, + { word: "captions", startMs: 4000, endMs: 4800, confidence: 0.95 }, + { word: "are", startMs: 4800, endMs: 5300, confidence: 0.97 }, + { word: "beautiful", startMs: 5300, endMs: 6500, confidence: 0.96 }, + ], + }, + { + text: "Let's build something amazing", + startMs: 6800, + endMs: 8000, + words: [ + { word: "Let's", startMs: 6800, endMs: 7200, confidence: 0.94 }, + { word: "build", startMs: 7200, endMs: 7500, confidence: 0.98 }, + { word: "something", startMs: 7500, endMs: 7800, confidence: 0.96 }, + { word: "amazing", startMs: 7800, endMs: 8000, confidence: 0.99 }, + ], + }, + ], +}; diff --git a/src/remotion-entry.tsx b/src/studio/remotion-entry.tsx similarity index 100% rename from src/remotion-entry.tsx rename to src/studio/remotion-entry.tsx diff --git a/src/transcribe-media.ts b/src/transcribe-media.ts new file mode 100644 index 0000000..8a4df15 --- /dev/null +++ b/src/transcribe-media.ts @@ -0,0 +1,93 @@ +/** + * Shared speech-to-text entry for CLI and preview server. + */ + +import { basename, extname, resolve } from "path"; +import type { CaptionData } from "./types.js"; +import type { ProviderName } from "./providers/base.js"; +import { loadConfig } from "./config.js"; +import { createProvider } from "./providers/registry.js"; + +export type TranscribeMediaOptions = { + provider?: ProviderName | string; + model?: string; + apiKey?: string; + language?: string; + whisperPath?: string; + modelPath?: string; + onProgress?: (message: string) => void; +}; + +function detectDefaultProvider(): ProviderName | null { + if (process.env.GROQ_API_KEY) return "groq"; + if (process.env.OPENAI_API_KEY) return "openai"; + if (process.env.DEEPGRAM_API_KEY) return "deepgram"; + if (process.env.ASSEMBLYAI_API_KEY) return "assemblyai"; + return null; +} + +function getApiKeyForProvider(provider: string): string | undefined { + const envMap: Record = { + openai: "OPENAI_API_KEY", + groq: "GROQ_API_KEY", + deepgram: "DEEPGRAM_API_KEY", + assemblyai: "ASSEMBLYAI_API_KEY", + }; + return process.env[envMap[provider]]; +} + +/** + * Transcribe an audio/video file to CaptionData (same logic as `captioneer process`). + */ +export async function transcribeMediaFile( + audioPath: string, + options: TranscribeMediaOptions = {} +): Promise { + const resolved = resolve(audioPath); + const config = await loadConfig(); + + const providerName = + (options.provider as ProviderName | undefined) ?? + config?.defaultProvider ?? + detectDefaultProvider(); + + if (!providerName) { + throw new Error( + "No STT provider available. Set OPENAI_API_KEY, GROQ_API_KEY, DEEPGRAM_API_KEY, or ASSEMBLYAI_API_KEY, or use provider local." + ); + } + + options.onProgress?.(`Using provider: ${providerName}`); + + if (providerName === "local") { + const { processAudio } = await import("./whisper.js"); + return processAudio(resolved, { + model: (options.model as any) ?? config?.defaultModel ?? "base", + language: options.language ?? config?.defaultLanguage, + whisperPath: options.whisperPath ?? config?.whisperPath, + modelPath: options.modelPath ?? config?.modelPath, + }); + } + + const apiKey = options.apiKey ?? getApiKeyForProvider(providerName); + const provider = createProvider(providerName, apiKey); + + if (!provider.isReady()) { + throw new Error( + `${providerName} API key not set. Use --api-key or set ${providerName.toUpperCase()}_API_KEY` + ); + } + + return provider.transcribe(resolved, { + model: options.model, + language: options.language, + }); +} + +/** @deprecated Use `transcribeMediaFile` — alias for docs compatibility */ +export const transcribeWithWhisper = transcribeMediaFile; + +export function defaultCaptionOutputPath(audioPath: string, cwd = process.cwd()): string { + const resolved = resolve(audioPath); + return resolve(cwd, `${basename(resolved, extname(resolved))}-captions.json`); +} diff --git a/src/translate.test.ts b/src/translate.test.ts new file mode 100644 index 0000000..d8c174b --- /dev/null +++ b/src/translate.test.ts @@ -0,0 +1,34 @@ +import { describe, expect, it } from "vitest"; +import { + assertValidTargetLanguageTag, + assertCaptionDataShape, +} from "./translate.js"; + +describe("translate validation", () => { + it("accepts valid BCP-47 tags", () => { + expect(assertValidTargetLanguageTag("es")).toBe("es"); + expect(assertValidTargetLanguageTag("zh-Hans")).toBe("zh-Hans"); + }); + + it("rejects injection in language tag", () => { + expect(() => + assertValidTargetLanguageTag('es"\nignore previous') + ).toThrow(/Invalid target language/); + }); + + it("assertCaptionDataShape", () => { + const data = assertCaptionDataShape({ + language: "en", + durationMs: 1000, + segments: [ + { + text: "hi", + startMs: 0, + endMs: 500, + words: [{ word: "hi", startMs: 0, endMs: 500, confidence: 1 }], + }, + ], + }); + expect(data.segments).toHaveLength(1); + }); +}); diff --git a/src/translate.ts b/src/translate.ts index 8c50474..a99fda2 100644 --- a/src/translate.ts +++ b/src/translate.ts @@ -14,6 +14,10 @@ export type TranslateCaptionsOptions = { model?: string; /** OpenAI request timeout in ms (default 120_000) */ timeoutMs?: number; + /** Set `language` on returned CaptionData (default true) */ + updateLanguage?: boolean; + /** Progress callback for batched translation */ + onProgress?: (message: string) => void; }; /** Segments per OpenAI request to avoid huge prompts and truncated JSON. */ @@ -211,8 +215,13 @@ export async function translateCaptionData( })); const translatedLists: string[][] = []; + const totalBatches = Math.ceil(input.length / SEGMENT_BATCH_SIZE) || 1; for (let i = 0; i < input.length; i += SEGMENT_BATCH_SIZE) { const batch = input.slice(i, i + SEGMENT_BATCH_SIZE); + const batchNum = Math.floor(i / SEGMENT_BATCH_SIZE) + 1; + opts.onProgress?.( + `Translating batch ${batchNum}/${totalBatches} (${batch.length} segments)...` + ); const batchOut = await translateWordListsBatch( batch, safeTargetLanguage, @@ -245,5 +254,11 @@ export async function translateCaptionData( return { ...seg, text, words }; }); - return { ...captionData, segments }; + const updateLanguage = opts.updateLanguage !== false; + + return { + ...captionData, + language: updateLanguage ? safeTargetLanguage : captionData.language, + segments, + }; } diff --git a/src/types.ts b/src/types.ts index 2c4b78b..b825955 100644 --- a/src/types.ts +++ b/src/types.ts @@ -71,6 +71,8 @@ export interface CaptionComponentProps { position?: "top" | "center" | "bottom"; maxWidth?: number; wordsPerLine?: number; + /** Use {@link smartWrap} instead of fixed-size chunks when `wordsPerLine` is set */ + useSmartWrap?: boolean; /** Text direction for RTL scripts (e.g. Arabic, Hebrew). */ textDirection?: "ltr" | "rtl" | "auto"; } diff --git a/src/utils.test.ts b/src/utils.test.ts new file mode 100644 index 0000000..6763011 --- /dev/null +++ b/src/utils.test.ts @@ -0,0 +1,38 @@ +import { describe, expect, it } from "vitest"; +import { + getSegmentDisplayLines, + groupWordsIntoLines, + msToFrame, + frameToMs, +} from "./utils.js"; +import type { CaptionSegment } from "./types.js"; + +const segment: CaptionSegment = { + text: "one two three four", + startMs: 0, + endMs: 4000, + words: [ + { word: "one", startMs: 0, endMs: 1000, confidence: 1 }, + { word: "two", startMs: 1000, endMs: 2000, confidence: 1 }, + { word: "three", startMs: 2000, endMs: 3000, confidence: 1 }, + { word: "four", startMs: 3000, endMs: 4000, confidence: 1 }, + ], +}; + +describe("utils", () => { + it("groupWordsIntoLines", () => { + const lines = groupWordsIntoLines(segment.words, 2); + expect(lines).toHaveLength(2); + expect(lines[0]).toHaveLength(2); + }); + + it("getSegmentDisplayLines with wordsPerLine", () => { + const lines = getSegmentDisplayLines(segment, { wordsPerLine: 2 }); + expect(lines).toHaveLength(2); + }); + + it("msToFrame / frameToMs", () => { + expect(msToFrame(1000, 30)).toBe(30); + expect(frameToMs(30, 30)).toBe(1000); + }); +}); diff --git a/src/utils.ts b/src/utils.ts index 0919d34..2ad5917 100644 --- a/src/utils.ts +++ b/src/utils.ts @@ -56,6 +56,24 @@ export function getWordProgress( return (currentTimeMs - word.startMs) / (word.endMs - word.startMs); } +/** + * Lines to render for a segment (smart wrap or fixed words-per-line). + */ +export function getSegmentDisplayLines( + segment: CaptionSegment, + options?: { wordsPerLine?: number; useSmartWrap?: boolean } +): Word[][] { + if (options?.useSmartWrap) { + return smartWrap(segment.words, { + maxWordsPerLine: options.wordsPerLine ?? 6, + }); + } + if (options?.wordsPerLine && options.wordsPerLine > 0) { + return groupWordsIntoLines(segment.words, options.wordsPerLine); + } + return [segment.words]; +} + /** * Group words into lines based on wordsPerLine */ diff --git a/src/whisper.ts b/src/whisper.ts index fdec71d..944276f 100644 --- a/src/whisper.ts +++ b/src/whisper.ts @@ -2,7 +2,7 @@ * Whisper integration — converts audio to word-level timestamped captions */ -import { execSync } from "child_process"; +import { execFileSync, execSync } from "child_process"; import { existsSync, mkdirSync, readFileSync, writeFileSync } from "fs"; import { join, resolve, basename, extname } from "path"; import type { CaptionData, CaptionSegment, Word, WhisperOptions } from "./types.js"; @@ -146,15 +146,32 @@ export async function processAudio( const baseName = basename(resolvedAudio, extname(resolvedAudio)); const jsonOutput = join(outputDir, `${baseName}.json`); - const langFlag = options.language ? `-l ${options.language}` : ""; + const whisperArgs = [ + "-m", + modelPath, + "-f", + resolvedAudio, + "-oj", + outputDir, + "-of", + baseName, + "--output-csv", + "false", + "--output-srt", + "false", + "--output-txt", + "false", + "--word-thold", + "0.5", + ]; + if (options.language) { + whisperArgs.push("-l", options.language); + } console.log(`🎙️ Transcribing: ${basename(resolvedAudio)}...`); try { - execSync( - `"${mainBinary}" -m "${modelPath}" -f "${resolvedAudio}" -oj "${outputDir}" -of "${baseName}" --output-csv false --output-srt false --output-txt false --word-thold 0.5 ${langFlag}`, - { stdio: "inherit" } - ); + execFileSync(mainBinary, whisperArgs, { stdio: "inherit" }); } catch (error) { throw new Error("Whisper transcription failed"); } diff --git a/tsconfig.json b/tsconfig.json index fd0a26d..b9c9a06 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -17,5 +17,5 @@ "lib": ["ES2022", "DOM"] }, "include": ["src/**/*"], - "exclude": ["node_modules", "dist", "example"] + "exclude": ["node_modules", "dist", "examples"] } diff --git a/vitest.config.ts b/vitest.config.ts new file mode 100644 index 0000000..c1433e6 --- /dev/null +++ b/vitest.config.ts @@ -0,0 +1,8 @@ +import { defineConfig } from "vitest/config"; + +export default defineConfig({ + test: { + environment: "node", + include: ["src/**/*.test.ts"], + }, +});