51f67f0aeb
Users can now upload any audio file to generate a CTP tempo map:
BPM detection (lib/analysis/bpm-detect.ts):
- Runs entirely client-side via Web Audio API — audio is never uploaded
- Decodes any browser-supported format (MP3, WAV, AAC, OGG, FLAC, M4A)
- Energy envelope → onset strength → autocorrelation over 55–210 BPM range
- Returns BPM, normalised confidence score, duration, and optional half-time BPM
for songs where a double-time pulse is detected
AI CTP generation (lib/analysis/ai-ctp.ts):
- Calls Claude (claude-opus-4-6) with adaptive thinking + structured JSON output
- System prompt explains CTP rules and section layout conventions
- Claude uses knowledge of well-known songs to produce accurate section maps;
falls back to a sensible generic structure for unknown tracks
- Only BPM + duration + optional metadata is sent to the server (no audio data)
API route (app/api/analyze/route.ts):
- POST /api/analyze accepts { bpm, duration, title?, artist?, mbid?, contributed_by? }
- Validates input, calls generateCTPWithAI, runs CTP schema validation
- Returns { ctp, warnings } — warnings are surfaced in the UI rather than 500-ing
UI (components/TempoAnalyzer.tsx, app/(web)/analyze/page.tsx):
- Drag-and-drop or browse file upload
- Shows BPM, confidence, duration after detection
- Half-time toggle when double-time is detected
- Metadata form: title, artist, MusicBrainz ID, contributor name
(filename parsed into artist/title as a convenience default)
- AI generation with streaming-style progress states
- Sections review via TempoMapEditor
- Download .ctp.json or submit directly to the database
Also: added @anthropic-ai/sdk to package.json, ANTHROPIC_API_KEY to .env.example,
updated next.config.mjs serverComponentsExternalPackages, added Analyze nav link.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
52 lines
1.8 KiB
TypeScript
52 lines
1.8 KiB
TypeScript
import type { Metadata } from "next";
|
|
import "./globals.css";
|
|
|
|
export const metadata: Metadata = {
|
|
title: {
|
|
default: process.env.NEXT_PUBLIC_APP_NAME ?? "ClickTrack",
|
|
template: `%s | ${process.env.NEXT_PUBLIC_APP_NAME ?? "ClickTrack"}`,
|
|
},
|
|
description:
|
|
"Self-hosted click track generator for cover bands. Search songs, view community tempo maps, and download metronomic WAV files.",
|
|
};
|
|
|
|
export default function RootLayout({
|
|
children,
|
|
}: {
|
|
children: React.ReactNode;
|
|
}) {
|
|
return (
|
|
<html lang="en">
|
|
<body className="min-h-screen bg-zinc-950 text-zinc-100 antialiased">
|
|
<header className="border-b border-zinc-800 px-6 py-4">
|
|
<div className="mx-auto flex max-w-4xl items-center justify-between">
|
|
<a href="/" className="text-xl font-bold tracking-tight text-green-400">
|
|
{process.env.NEXT_PUBLIC_APP_NAME ?? "ClickTrack"}
|
|
</a>
|
|
<nav className="flex gap-6 text-sm text-zinc-400">
|
|
<a href="/" className="hover:text-zinc-100 transition-colors">
|
|
Search
|
|
</a>
|
|
<a href="/analyze" className="hover:text-zinc-100 transition-colors">
|
|
Analyze
|
|
</a>
|
|
<
|
|
href="https://github.com/your-org/clicktrack"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="hover:text-zinc-100 transition-colors"
|
|
>
|
|
GitHub
|
|
</a>
|
|
</nav>
|
|
</div>
|
|
</header>
|
|
<main className="mx-auto max-w-4xl px-6 py-10">{children}</main>
|
|
<footer className="border-t border-zinc-800 px-6 py-6 text-center text-xs text-zinc-600">
|
|
ClickTrack — open source, self-hosted. Tempo data from the community registry.
|
|
</footer>
|
|
</body>
|
|
</html>
|
|
);
|
|
}
|