whattheflat/JamBuddy
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

compact layout, instrument select near fretboard, collapsible tuner, chord sensitivity tuning

Browse Source
This commit is contained in:
vadimwit
2026-03-06 00:08:15 +00:00
parent d3a2840454
commit ca6b901bc8
5 changed files with 64 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/App.jsx
+46 -49
View File
@@ -17,15 +17,17 @@ const KEY_VOTE_THRESHOLD = 9 // out of 12
const CHORD_NOTE_BOOST = 3 // confirmed chord tones injected N× into note history const CHORD_NOTE_BOOST = 3 // confirmed chord tones injected N× into note history
// Chord detection tuning // Chord detection tuning
const CHROMA_SMOOTH = 12 // frames to average (~200ms at 60fps) const CHROMA_SMOOTH = 8 // frames to average — more responsive
const CHORD_VOTE_THRESHOLD = 3 // consecutive identical detections required const CHORD_VOTE_THRESHOLD = 2 // consecutive identical detections required
const CHORD_MIN_SCORE = 0.38 // lower = more chord types detected
export default function App() { export default function App() {
// ── Listening state ────────────────────────────────────────────────────── // ── Listening state ──────────────────────────────────────────────────────
const [isListening, setIsListening] = useState(false) const [isListening, setIsListening] = useState(false)
// ── Instrument view ─────────────────────────────────────────────────────── // ── Instrument view + tuner ───────────────────────────────────────────────
const [instrument, setInstrument] = useState('guitar') // 'guitar' | 'piano' const [instrument, setInstrument] = useState('guitar') // 'guitar' | 'piano'
const [showTuner, setShowTuner] = useState(false)
// ── Key: auto-detected + optional lock ─────────────────────────────────── // ── Key: auto-detected + optional lock ───────────────────────────────────
const [keyInfo, setKeyInfo] = useState(null) // auto-detected const [keyInfo, setKeyInfo] = useState(null) // auto-detected
@@ -168,7 +170,7 @@ export default function App() {
for (const frame of ring) for (let i = 0; i < 12; i++) avg[i] += frame[i] for (const frame of ring) for (let i = 0; i < 12; i++) avg[i] += frame[i]
for (let i = 0; i < 12; i++) avg[i] /= CHROMA_SMOOTH for (let i = 0; i < 12; i++) avg[i] /= CHROMA_SMOOTH
const chord = matchChordFromChroma(avg, key, bassPC, false) const chord = matchChordFromChroma(avg, key, bassPC, false, CHORD_MIN_SCORE)
if (!chord) { if (!chord) {
// Ambiguous moment (transition, silence) — reset streak, history is untouched // Ambiguous moment (transition, silence) — reset streak, history is untouched
chordVotesRef.current = [] chordVotesRef.current = []
@@ -203,26 +205,27 @@ export default function App() {
const currentChord = chordHistory[chordHistory.length - 1] const currentChord = chordHistory[chordHistory.length - 1]
return ( return (
<div className="min-h-screen bg-surface text-white p-4 md:p-6"> <div className="min-h-screen bg-surface text-white p-3">
{/* ── Header ── */} {/* ── Header ── */}
<header className="mb-4 flex items-center justify-between"> <header className="mb-2 flex items-center justify-between">
<div> <div>
<h1 className="text-2xl font-bold text-accent"> <h1 className="text-xl font-bold text-accent">
WhatTheFlat <span className="text-gray-600">&#9837;?</span> WhatTheFlat <span className="text-gray-600">&#9837;?</span>
</h1> </h1>
<p className="text-xs text-gray-600 mt-0.5">Real-time key detection for real humans</p> <p className="text-xs text-gray-600">Real-time key detection for live jams</p>
</div> </div>
<div className="flex gap-2"> <div className="flex gap-2">
<button <button
onClick={newSong} onClick={newSong}
className="px-4 py-2.5 rounded-full font-semibold text-sm border border-border text-gray-400 hover:text-gray-200 hover:border-gray-400 transition-all" className="px-3 py-2 rounded-full text-sm border border-border text-gray-500 hover:text-gray-300 hover:border-gray-400 transition-all leading-tight text-center"
> >
New Song <span className="block font-semibold">New Song</span>
<span className="block text-xs opacity-60">clear history</span>
</button> </button>
<button <button
onClick={() => setIsListening(l => !l)} onClick={() => setIsListening(l => !l)}
className={`px-5 py-2.5 rounded-full font-semibold text-sm transition-all ${ className={`px-5 py-2 rounded-full font-semibold text-sm transition-all ${
isListening isListening
? 'bg-red-600 hover:bg-red-700 text-white' ? 'bg-red-600 hover:bg-red-700 text-white'
: 'bg-accent hover:bg-purple-600 text-white' : 'bg-accent hover:bg-purple-600 text-white'
@@ -234,38 +237,18 @@ export default function App() {
</header> </header>
{/* ── Controls bar ── */} {/* ── Controls bar ── */}
<div className="mb-4 flex flex-wrap gap-3 items-center p-3 bg-panel border border-border rounded-xl"> <div className="mb-2 flex flex-wrap gap-2 items-center p-2 bg-panel border border-border rounded-xl">
{/* Instrument toggle */}
<div className="flex bg-surface border border-border rounded-full p-0.5 text-sm">
{['guitar', 'piano'].map(v => (
<button
key={v}
onClick={() => setInstrument(v)}
className={`px-4 py-1 rounded-full capitalize transition-all ${
instrument === v ? 'bg-accent text-white' : 'text-gray-400 hover:text-gray-200'
}`}
>
{v}
</button>
))}
</div>
{/* Key lock */}
{lockedKey ? ( {lockedKey ? (
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<span className="px-3 py-1 bg-accent/20 border border-accent text-accent rounded-full text-sm font-semibold"> <span className="px-3 py-1 bg-accent/20 border border-accent text-accent rounded-full text-sm font-semibold">
🔒 {lockedKey.root} {lockedKey.mode} 🔒 {lockedKey.root} {lockedKey.mode}
</span> </span>
<button <button onClick={removeLock} className="text-xs text-gray-500 hover:text-gray-300 underline">
onClick={removeLock}
className="text-xs text-gray-500 hover:text-gray-300 underline"
>
unlock unlock
</button> </button>
</div> </div>
) : ( ) : (
<div className="flex flex-wrap gap-2 items-center"> <div className="flex flex-wrap gap-2 items-center">
{/* Top 3 detected key candidates — click to lock */}
{topKeyCandidates.map((k, i) => ( {topKeyCandidates.map((k, i) => (
<button <button
key={i} key={i}
@@ -279,10 +262,7 @@ export default function App() {
{k.root} {k.mode === 'major' ? 'maj' : 'min'} · {Math.round(k.confidence * 100)}% {k.root} {k.mode === 'major' ? 'maj' : 'min'} · {Math.round(k.confidence * 100)}%
</button> </button>
))} ))}
{topKeyCandidates.length > 0 && ( {topKeyCandidates.length > 0 && <span className="text-gray-600 text-xs">or</span>}
<span className="text-gray-600 text-xs">or</span>
)}
{/* Manual override */}
<select <select
value={lockRoot} value={lockRoot}
onChange={e => setLockRoot(e.target.value)} onChange={e => setLockRoot(e.target.value)}
@@ -310,7 +290,7 @@ export default function App() {
<AudioCapture onNote={handleNote} onChroma={handleChroma} isListening={isListening} /> <AudioCapture onNote={handleNote} onChroma={handleChroma} isListening={isListening} />
{/* ── Progression banner — full width ── */} {/* ── Progression banner ── */}
<ProgressionBanner <ProgressionBanner
chordHistory={chordHistory} chordHistory={chordHistory}
keyInfo={effectiveKey} keyInfo={effectiveKey}
@@ -318,24 +298,41 @@ export default function App() {
/> />
{/* ── Main grid ── */} {/* ── Main grid ── */}
<div className="grid grid-cols-1 md:grid-cols-2 gap-4"> <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
<KeyDisplay keyInfo={effectiveKey} locked={!!lockedKey} /> <KeyDisplay keyInfo={effectiveKey} locked={!!lockedKey} />
<ChordDisplay history={chordHistory} /> <ChordDisplay history={chordHistory} />
<SafeNotes keyInfo={effectiveKey} currentChord={currentChord} /> <SafeNotes keyInfo={effectiveKey} currentChord={currentChord} />
<ProgressionSuggestions keyInfo={effectiveKey} /> <ProgressionSuggestions keyInfo={effectiveKey} />
{/* ── Instrument view — select in header ── */}
<div className="md:col-span-2"> <div className="md:col-span-2">
{instrument === 'guitar' ? ( <div className="flex items-center justify-between mb-1 px-1">
<Fretboard <span className="text-xs text-gray-500 uppercase tracking-widest">Instrument</span>
keyInfo={effectiveKey} <select
currentChord={currentChord} value={instrument}
pentatonicOnly={false} onChange={e => setInstrument(e.target.value)}
/> className="bg-surface border border-border rounded-lg px-2 py-1 text-sm text-gray-300"
) : ( >
<Piano keyInfo={effectiveKey} currentChord={currentChord} /> <option value="guitar">Guitar</option>
)} <option value="piano">Piano</option>
</select>
</div> </div>
{instrument === 'guitar'
? <Fretboard keyInfo={effectiveKey} currentChord={currentChord} pentatonicOnly={false} />
: <Piano keyInfo={effectiveKey} currentChord={currentChord} />
}
</div>
{/* ── Tuner — collapsible ── */}
<div className="md:col-span-2"> <div className="md:col-span-2">
<Tuner /> <button
onClick={() => setShowTuner(v => !v)}
className="w-full flex items-center justify-between px-4 py-2 bg-panel border border-border rounded-xl text-sm text-gray-400 hover:text-gray-200 hover:border-gray-500 transition-all"
>
<span>Tuner</span>
<span>{showTuner ? '▲' : '▼'}</span>
</button>
{showTuner && <div className="mt-2"><Tuner /></div>}
</div> </div>
</div> </div>
</div> </div>
src/components/ChordDisplay.jsx
+4 -4
View File
@@ -3,13 +3,13 @@ export default function ChordDisplay({ history }) {
const past = history.slice(-8, -1) const past = history.slice(-8, -1)
return ( return (
<div className="bg-panel border border-border rounded-2xl p-6"> <div className="bg-panel border border-border rounded-2xl p-4">
<p className="text-sm text-gray-500 uppercase tracking-widest mb-3">Chord</p> <p className="text-xs text-gray-500 uppercase tracking-widest mb-2">Chord</p>
<p className="text-5xl font-bold text-amber-400"> <p className="text-4xl font-bold text-amber-400">
{current ?? '—'} {current ?? '—'}
</p> </p>
{past.length > 0 && ( {past.length > 0 && (
<div className="mt-4 flex gap-2 flex-wrap"> <div className="mt-2 flex gap-2 flex-wrap">
{past.map((chord, i) => ( {past.map((chord, i) => (
<span <span
key={i} key={i}
src/components/KeyDisplay.jsx
+3 -3
View File
@@ -3,13 +3,13 @@ export default function KeyDisplay({ keyInfo, locked = false }) {
const pct = confidence ? Math.round(confidence * 100) : 0 const pct = confidence ? Math.round(confidence * 100) : 0
return ( return (
<div className="bg-panel border border-border rounded-2xl p-6 text-center"> <div className="bg-panel border border-border rounded-2xl p-4 text-center">
<p className="text-sm text-gray-500 uppercase tracking-widest mb-1"> <p className="text-xs text-gray-500 uppercase tracking-widest mb-1">
{locked ? '🔒 Key (locked)' : 'Detected Key'} {locked ? '🔒 Key (locked)' : 'Detected Key'}
</p> </p>
{root ? ( {root ? (
<> <>
<p className="text-6xl font-bold text-accent leading-none"> <p className="text-5xl font-bold text-accent leading-none">
{root} {root}
<span className="text-3xl text-gray-400 ml-2">{mode}</span> <span className="text-3xl text-gray-400 ml-2">{mode}</span>
</p> </p>
src/components/ProgressionSuggestions.jsx
+6 -6
View File
@@ -8,17 +8,17 @@ export default function ProgressionSuggestions({ keyInfo }) {
const progressions = getSuggestedProgressions(root, mode) const progressions = getSuggestedProgressions(root, mode)
return ( return (
<div className="bg-panel border border-border rounded-2xl p-6"> <div className="bg-panel border border-border rounded-2xl p-4">
<p className="text-sm text-gray-500 uppercase tracking-widest mb-4"> <p className="text-xs text-gray-500 uppercase tracking-widest mb-2">
Progressions in {root} {mode} Progressions in {root} {mode}
</p> </p>
<div className="space-y-3"> <div className="space-y-2">
{progressions.map(prog => ( {progressions.map(prog => (
<div key={prog.genre} className="flex items-center gap-3"> <div key={prog.genre} className="flex items-center gap-2">
<span className="text-xs text-gray-500 w-10 shrink-0">{prog.genre}</span> <span className="text-xs text-gray-500 w-10 shrink-0">{prog.genre}</span>
<div className="flex gap-2 flex-wrap"> <div className="flex gap-1.5 flex-wrap">
{prog.chords.map((chord, i) => ( {prog.chords.map((chord, i) => (
<span key={i} className="px-3 py-1 bg-border rounded text-sm font-medium"> <span key={i} className="px-2 py-0.5 bg-border rounded text-sm font-medium">
{chord} {chord}
<span className="ml-1 text-gray-600 text-xs">({prog.rn[i]})</span> <span className="ml-1 text-gray-600 text-xs">({prog.rn[i]})</span>
</span> </span>
src/components/SafeNotes.jsx
+5 -5
View File
@@ -12,15 +12,15 @@ export default function SafeNotes({ keyInfo, currentChord }) {
const chordTones = currentChord ? getChordTones(currentChord) : [] const chordTones = currentChord ? getChordTones(currentChord) : []
return ( return (
<div className="bg-panel border border-border rounded-2xl p-6"> <div className="bg-panel border border-border rounded-2xl p-4">
<p className="text-sm text-gray-500 uppercase tracking-widest mb-4">Safe Notes</p> <p className="text-xs text-gray-500 uppercase tracking-widest mb-2">Safe Notes</p>
<div className="flex gap-2 flex-wrap"> <div className="flex gap-1.5 flex-wrap">
{ALL_NOTES.map(note => { {ALL_NOTES.map(note => {
const isChordTone = chordTones.includes(note) const isChordTone = chordTones.includes(note)
const isPenta = penta.includes(note) const isPenta = penta.includes(note)
const isScale = full.includes(note) const isScale = full.includes(note)
let cls = 'px-3 py-2 rounded-lg text-sm font-semibold border transition-all ' let cls = 'px-2.5 py-1.5 rounded-lg text-sm font-semibold border transition-all '
if (isChordTone) { if (isChordTone) {
cls += 'bg-accent text-white border-accent scale-105' cls += 'bg-accent text-white border-accent scale-105'
} else if (isPenta) { } else if (isPenta) {
@@ -36,7 +36,7 @@ export default function SafeNotes({ keyInfo, currentChord }) {
) )
})} })}
</div> </div>
<div className="mt-3 flex gap-4 text-xs text-gray-500"> <div className="mt-2 flex gap-4 text-xs text-gray-500">
<span><span className="text-accent">■</span> Chord tone</span> <span><span className="text-accent">■</span> Chord tone</span>
<span><span className="text-accent/60">■</span> Pentatonic</span> <span><span className="text-accent/60">■</span> Pentatonic</span>
<span><span className="text-gray-500">■</span> Scale</span> <span><span className="text-gray-500">■</span> Scale</span>