restructure to root, add tuner from jms
This commit is contained in:
vadimwit
@@ -1,40 +0,0 @@
|
||||
const { app, BrowserWindow } = require('electron')
|
||||
const path = require('path')
|
||||
|
||||
const isDev = !app.isPackaged
|
||||
|
||||
function createWindow() {
|
||||
const win = new BrowserWindow({
|
||||
width: 1280,
|
||||
height: 900,
|
||||
minWidth: 900,
|
||||
minHeight: 600,
|
||||
title: 'WhatTheFlat',
|
||||
webPreferences: {
|
||||
preload: path.join(__dirname, 'preload.cjs'),
|
||||
contextIsolation: true,
|
||||
nodeIntegration: false,
|
||||
},
|
||||
})
|
||||
|
||||
if (isDev) {
|
||||
// Dev: load from Vite dev server
|
||||
win.loadURL('http://localhost:5173')
|
||||
win.webContents.openDevTools()
|
||||
} else {
|
||||
// Production: load built files from disk
|
||||
win.loadFile(path.join(__dirname, '../dist/index.html'))
|
||||
}
|
||||
}
|
||||
|
||||
app.whenReady().then(() => {
|
||||
createWindow()
|
||||
|
||||
app.on('activate', () => {
|
||||
if (BrowserWindow.getAllWindows().length === 0) createWindow()
|
||||
})
|
||||
})
|
||||
|
||||
app.on('window-all-closed', () => {
|
||||
if (process.platform !== 'darwin') app.quit()
|
||||
})
|
||||
@@ -1,8 +0,0 @@
|
||||
// Preload runs in a privileged context before the renderer.
|
||||
// Expose only what the app actually needs from Node/Electron here.
|
||||
// Currently the app is pure browser JS so nothing needs exposing.
|
||||
const { contextBridge } = require('electron')
|
||||
|
||||
contextBridge.exposeInMainWorld('electronAPI', {
|
||||
platform: process.platform,
|
||||
})
|
||||
@@ -1,12 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>WhatTheFlat</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="/src/main.jsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
Generated
-7080
File diff suppressed because it is too large
Load Diff
@@ -1,62 +0,0 @@
|
||||
{
|
||||
"name": "whattheflat",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"type": "module",
|
||||
"main": "electron/main.cjs",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "vite build",
|
||||
"preview": "vite preview",
|
||||
"electron:dev": "concurrently -k \"vite\" \"wait-on http://localhost:5173 && electron .\"",
|
||||
"electron:build": "vite build && electron-builder",
|
||||
"electron:build:win": "vite build && electron-builder --win",
|
||||
"electron:build:mac": "vite build && electron-builder --mac",
|
||||
"electron:build:linux": "vite build && electron-builder --linux"
|
||||
},
|
||||
"dependencies": {
|
||||
"pitchy": "^4.1.0",
|
||||
"react": "^18.3.1",
|
||||
"react-dom": "^18.3.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/react": "^18.3.1",
|
||||
"@types/react-dom": "^18.3.1",
|
||||
"@vitejs/plugin-react": "^4.3.1",
|
||||
"autoprefixer": "^10.4.20",
|
||||
"concurrently": "^9.2.1",
|
||||
"electron": "^40.7.0",
|
||||
"electron-builder": "^26.8.1",
|
||||
"postcss": "^8.4.47",
|
||||
"tailwindcss": "^3.4.14",
|
||||
"vite": "^5.4.10",
|
||||
"wait-on": "^9.0.4"
|
||||
},
|
||||
"build": {
|
||||
"appId": "com.whattheflat.app",
|
||||
"productName": "WhatTheFlat",
|
||||
"files": [
|
||||
"dist/**/*",
|
||||
"electron/**/*"
|
||||
],
|
||||
"directories": {
|
||||
"buildResources": "assets"
|
||||
},
|
||||
"win": {
|
||||
"target": "nsis",
|
||||
"icon": "assets/icon.ico"
|
||||
},
|
||||
"mac": {
|
||||
"target": "dmg",
|
||||
"icon": "assets/icon.icns"
|
||||
},
|
||||
"linux": {
|
||||
"target": "AppImage",
|
||||
"icon": "assets/icon.png"
|
||||
},
|
||||
"nsis": {
|
||||
"oneClick": false,
|
||||
"allowToChangeInstallationDirectory": true
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,6 +0,0 @@
|
||||
export default {
|
||||
plugins: {
|
||||
tailwindcss: {},
|
||||
autoprefixer: {},
|
||||
},
|
||||
}
|
||||
@@ -1,284 +0,0 @@
|
||||
import { useState, useCallback, useRef, useEffect } from 'react'
|
||||
import AudioCapture from './components/AudioCapture'
|
||||
import ProgressionBanner from './components/ProgressionBanner'
|
||||
import KeyDisplay from './components/KeyDisplay'
|
||||
import ChordDisplay from './components/ChordDisplay'
|
||||
import SafeNotes from './components/SafeNotes'
|
||||
import Fretboard from './components/Fretboard'
|
||||
import ProgressionSuggestions from './components/ProgressionSuggestions'
|
||||
import { NOTES, detectKey, detectTopKeys, matchChordFromChroma, detectRepeatingProgression } from './lib/theory'
|
||||
|
||||
// Key detection tuning
|
||||
const NOTE_HISTORY_SIZE = 80
|
||||
const KEY_VOTE_WINDOW = 12
|
||||
const KEY_VOTE_THRESHOLD = 9 // out of 12 — very stable
|
||||
|
||||
// Chord detection tuning
|
||||
const CHROMA_SMOOTH = 12 // frames to average (~200ms at 60fps)
|
||||
const CHORD_VOTE_THRESHOLD = 3 // consecutive identical detections required
|
||||
|
||||
export default function App() {
|
||||
// ── Listening state ──────────────────────────────────────────────────────
|
||||
const [isListening, setIsListening] = useState(false)
|
||||
|
||||
// ── App mode ─────────────────────────────────────────────────────────────
|
||||
const [appMode, setAppMode] = useState('beginner') // 'beginner' | 'advanced'
|
||||
|
||||
// ── Key: auto-detected + optional lock ───────────────────────────────────
|
||||
const [keyInfo, setKeyInfo] = useState(null) // auto-detected
|
||||
const [lockedKey, setLockedKey] = useState(null) // { root, mode } or null
|
||||
const [lockRoot, setLockRoot] = useState('A')
|
||||
const [lockMode, setLockMode] = useState('minor')
|
||||
|
||||
// Effective key used by all components
|
||||
const effectiveKey = lockedKey ?? keyInfo
|
||||
// Beginner + locked key = only match the 7 diatonic chords (simpler, fewer false positives)
|
||||
// Advanced + locked key = allow borrowed/chromatic chords like D7 in Am
|
||||
const isStrictMode = appMode === 'beginner' && lockedKey !== null
|
||||
|
||||
// ── Chord state ───────────────────────────────────────────────────────────
|
||||
const [chordHistory, setChordHistory] = useState([])
|
||||
const [detectedProgression, setDetectedProgression] = useState(null)
|
||||
|
||||
// ── Top key candidates (shown as quick-lock chips) ────────────────────────
|
||||
const [topKeyCandidates, setTopKeyCandidates] = useState([])
|
||||
|
||||
// ── Internal refs ─────────────────────────────────────────────────────────
|
||||
const noteHistoryRef = useRef([])
|
||||
const keyVotesRef = useRef([])
|
||||
const effectiveKeyRef = useRef(null) // mirror for use inside callbacks
|
||||
const chromaRingRef = useRef(
|
||||
Array.from({ length: CHROMA_SMOOTH }, () => new Float32Array(12))
|
||||
)
|
||||
const chromaIdxRef = useRef(0)
|
||||
const chordVotesRef = useRef([])
|
||||
|
||||
// Keep ref in sync
|
||||
useEffect(() => { effectiveKeyRef.current = effectiveKey }, [effectiveKey])
|
||||
|
||||
// ── Detect progression whenever chord history changes ─────────────────────
|
||||
useEffect(() => {
|
||||
setDetectedProgression(detectRepeatingProgression(chordHistory))
|
||||
}, [chordHistory])
|
||||
|
||||
// ── Key lock handlers ─────────────────────────────────────────────────────
|
||||
function applyLock() {
|
||||
const info = { root: lockRoot, mode: lockMode, confidence: 1 }
|
||||
setLockedKey(info)
|
||||
effectiveKeyRef.current = info
|
||||
chordVotesRef.current = []
|
||||
setChordHistory([])
|
||||
setDetectedProgression(null)
|
||||
}
|
||||
|
||||
function quickLock({ root, mode, confidence }) {
|
||||
const info = { root, mode, confidence }
|
||||
setLockedKey(info)
|
||||
effectiveKeyRef.current = info
|
||||
chordVotesRef.current = []
|
||||
setChordHistory([])
|
||||
setDetectedProgression(null)
|
||||
}
|
||||
|
||||
function removeLock() {
|
||||
setLockedKey(null)
|
||||
effectiveKeyRef.current = keyInfo
|
||||
}
|
||||
|
||||
// ── Note handler: drives key detection (pitch-based) ──────────────────────
|
||||
const handleNote = useCallback(({ pitchClass }) => {
|
||||
const history = noteHistoryRef.current
|
||||
history.push(pitchClass)
|
||||
if (history.length > NOTE_HISTORY_SIZE) history.shift()
|
||||
if (history.length < 10) return
|
||||
if (history.length % 5 !== 0) return
|
||||
|
||||
const result = detectKey(history)
|
||||
setTopKeyCandidates(detectTopKeys(history))
|
||||
if (result.confidence < 0.5) return
|
||||
|
||||
const votes = keyVotesRef.current
|
||||
votes.push(`${result.root}_${result.mode}`)
|
||||
if (votes.length > KEY_VOTE_WINDOW) votes.shift()
|
||||
|
||||
const counts = {}
|
||||
for (const v of votes) counts[v] = (counts[v] || 0) + 1
|
||||
const [winner, count] = Object.entries(counts).sort((a, b) => b[1] - a[1])[0]
|
||||
|
||||
if (count >= KEY_VOTE_THRESHOLD) {
|
||||
const [root, mode] = winner.split('_')
|
||||
setKeyInfo(prev => {
|
||||
if (prev?.root === root && prev?.mode === mode) {
|
||||
return { root, mode, confidence: result.confidence }
|
||||
}
|
||||
// Key changed — reset chord votes but keep history visible
|
||||
if (!lockedKey) {
|
||||
chordVotesRef.current = []
|
||||
}
|
||||
return { root, mode, confidence: result.confidence }
|
||||
})
|
||||
}
|
||||
}, [lockedKey])
|
||||
|
||||
// ── Chroma handler: drives chord detection ────────────────────────────────
|
||||
const handleChroma = useCallback((chroma, bassPC) => {
|
||||
const ring = chromaRingRef.current
|
||||
ring[chromaIdxRef.current % CHROMA_SMOOTH] = chroma
|
||||
chromaIdxRef.current++
|
||||
if (chromaIdxRef.current % CHROMA_SMOOTH !== 0) return
|
||||
|
||||
const key = effectiveKeyRef.current
|
||||
if (!key) return
|
||||
|
||||
// Average ring buffer
|
||||
const avg = new Float32Array(12)
|
||||
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
|
||||
|
||||
const chord = matchChordFromChroma(avg, key, bassPC, isStrictMode)
|
||||
if (!chord) {
|
||||
// Ambiguous moment (transition, silence) — reset streak, history is untouched
|
||||
chordVotesRef.current = []
|
||||
return
|
||||
}
|
||||
|
||||
const votes = chordVotesRef.current
|
||||
votes.push(chord)
|
||||
if (votes.length > CHORD_VOTE_THRESHOLD) votes.shift()
|
||||
|
||||
// All last N detections must agree — one wrong reading resets the streak
|
||||
if (votes.length >= CHORD_VOTE_THRESHOLD && votes.every(v => v === votes[0])) {
|
||||
const winner = votes[0]
|
||||
setChordHistory(prev => {
|
||||
if (prev[prev.length - 1] === winner) return prev
|
||||
return [...prev.slice(-30), winner]
|
||||
})
|
||||
}
|
||||
}, [isStrictMode])
|
||||
|
||||
const currentChord = chordHistory[chordHistory.length - 1]
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-surface text-white p-4 md:p-6">
|
||||
|
||||
{/* ── Header ── */}
|
||||
<header className="mb-4 flex items-center justify-between">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-accent">
|
||||
WhatTheFlat <span className="text-gray-600">♭?</span>
|
||||
</h1>
|
||||
<p className="text-xs text-gray-600 mt-0.5">Real-time key detection for real humans</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => setIsListening(l => !l)}
|
||||
className={`px-5 py-2.5 rounded-full font-semibold text-sm transition-all ${
|
||||
isListening
|
||||
? 'bg-red-600 hover:bg-red-700 text-white'
|
||||
: 'bg-accent hover:bg-purple-600 text-white'
|
||||
}`}
|
||||
>
|
||||
{isListening ? 'Stop' : 'Start Listening'}
|
||||
</button>
|
||||
</header>
|
||||
|
||||
{/* ── Controls bar ── */}
|
||||
<div className="mb-4 flex flex-wrap gap-3 items-center p-3 bg-panel border border-border rounded-xl">
|
||||
{/* Mode toggle */}
|
||||
<div className="flex bg-surface border border-border rounded-full p-0.5 text-sm">
|
||||
{['beginner', 'advanced'].map(m => (
|
||||
<button
|
||||
key={m}
|
||||
onClick={() => setAppMode(m)}
|
||||
className={`px-4 py-1 rounded-full capitalize transition-all ${
|
||||
appMode === m ? 'bg-accent text-white' : 'text-gray-400 hover:text-gray-200'
|
||||
}`}
|
||||
>
|
||||
{m}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Key lock */}
|
||||
{lockedKey ? (
|
||||
<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">
|
||||
🔒 {lockedKey.root} {lockedKey.mode}
|
||||
</span>
|
||||
<button
|
||||
onClick={removeLock}
|
||||
className="text-xs text-gray-500 hover:text-gray-300 underline"
|
||||
>
|
||||
unlock
|
||||
</button>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex flex-wrap gap-2 items-center">
|
||||
{/* Top 3 detected key candidates — click to lock */}
|
||||
{topKeyCandidates.map((k, i) => (
|
||||
<button
|
||||
key={i}
|
||||
onClick={() => quickLock(k)}
|
||||
className={`px-3 py-1 rounded-full text-sm font-semibold border transition-all ${
|
||||
i === 0
|
||||
? 'border-accent text-accent hover:bg-accent/10'
|
||||
: 'border-border text-gray-400 hover:border-gray-400 hover:text-gray-200'
|
||||
}`}
|
||||
>
|
||||
{k.root} {k.mode === 'major' ? 'maj' : 'min'} · {Math.round(k.confidence * 100)}%
|
||||
</button>
|
||||
))}
|
||||
{topKeyCandidates.length > 0 && (
|
||||
<span className="text-gray-600 text-xs">or</span>
|
||||
)}
|
||||
{/* Manual override */}
|
||||
<select
|
||||
value={lockRoot}
|
||||
onChange={e => setLockRoot(e.target.value)}
|
||||
className="bg-surface border border-border rounded-lg px-2 py-1 text-sm text-gray-300"
|
||||
>
|
||||
{NOTES.map(n => <option key={n}>{n}</option>)}
|
||||
</select>
|
||||
<select
|
||||
value={lockMode}
|
||||
onChange={e => setLockMode(e.target.value)}
|
||||
className="bg-surface border border-border rounded-lg px-2 py-1 text-sm text-gray-300"
|
||||
>
|
||||
<option value="major">Major</option>
|
||||
<option value="minor">Minor</option>
|
||||
</select>
|
||||
<button
|
||||
onClick={applyLock}
|
||||
className="px-3 py-1 bg-border hover:bg-accent/20 border border-border hover:border-accent text-sm rounded-lg transition-all"
|
||||
>
|
||||
Lock
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<AudioCapture onNote={handleNote} onChroma={handleChroma} isListening={isListening} />
|
||||
|
||||
{/* ── Progression banner — full width ── */}
|
||||
<ProgressionBanner
|
||||
chordHistory={chordHistory}
|
||||
keyInfo={effectiveKey}
|
||||
detectedProgression={detectedProgression}
|
||||
/>
|
||||
|
||||
{/* ── Main grid ── */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<KeyDisplay keyInfo={effectiveKey} locked={!!lockedKey} />
|
||||
<ChordDisplay history={chordHistory} />
|
||||
<SafeNotes keyInfo={effectiveKey} currentChord={currentChord} />
|
||||
<ProgressionSuggestions keyInfo={effectiveKey} />
|
||||
<div className="md:col-span-2">
|
||||
<Fretboard
|
||||
keyInfo={effectiveKey}
|
||||
currentChord={currentChord}
|
||||
pentatonicOnly={appMode === 'beginner'}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -1,166 +0,0 @@
|
||||
import { useEffect, useRef, useCallback } from 'react'
|
||||
import { PitchDetector } from 'pitchy'
|
||||
import { NOTES } from '../lib/theory'
|
||||
|
||||
// ─── Why two analysers? ───────────────────────────────────────────────────────
|
||||
//
|
||||
// The Web Audio FFT has linearly-spaced bins: bin width = sampleRate / fftSize.
|
||||
//
|
||||
// fftSize 4096 → ~10.8 Hz/bin (default we were using)
|
||||
// fftSize 16384 → ~2.7 Hz/bin (multi-rate chord analyser)
|
||||
//
|
||||
// On the low guitar strings the gap between adjacent semitones is only ~5-6 Hz.
|
||||
// At 10.8 Hz/bin we literally cannot separate A2 (110 Hz) from A#2 (116 Hz).
|
||||
// That is the single biggest source of wrong chord notes on the low strings.
|
||||
//
|
||||
// Solution: run a second, larger analyser just for chord/chroma detection.
|
||||
// The pitch analyser stays small (4096) so pitchy has a 90ms window — fast
|
||||
// enough for responsive pitch detection. The chord analyser uses 16384 (~370ms
|
||||
// window) — slower to respond but with 2.7 Hz bins that can cleanly separate
|
||||
// every semitone across the guitar's entire range.
|
||||
//
|
||||
// This is an approximation of the Constant-Q Transform (CQT) your friend
|
||||
// mentioned: CQT achieves log-spaced bins mathematically; we approximate it
|
||||
// by simply using a much larger FFT window.
|
||||
// ─────────────────────────────────────────────────────────────────────────────
|
||||
|
||||
const PITCH_FFT = 4096 // ~90ms window — good temporal resolution for pitch
|
||||
const CHORD_FFT = 16384 // ~370ms window — 2.7 Hz/bin, separates low semitones
|
||||
const MIN_CLARITY = 0.80
|
||||
const MIN_VOLUME = 0.01
|
||||
const NOISE_FLOOR = -65 // dB
|
||||
|
||||
// ─── Harmonic summation chroma ────────────────────────────────────────────────
|
||||
// Each FFT bin votes back toward lower fundamentals that could have generated
|
||||
// it as an overtone. This undoes the harmonic contamination that makes minor
|
||||
// chords look like major ones (the 5th harmonic of the root lands on the major
|
||||
// 3rd, which is NOT in the minor chord).
|
||||
const HARMONIC_WEIGHTS = [1.0, 0.5, 0.33, 0.25, 0.2] // h = 1…5
|
||||
|
||||
function computeChroma(freqData, sampleRate, fftSize) {
|
||||
const chroma = new Float32Array(12)
|
||||
const binHz = sampleRate / fftSize
|
||||
const N = freqData.length
|
||||
|
||||
for (let bin = 2; bin < N; bin++) {
|
||||
const freq = bin * binHz
|
||||
if (freq < 80 || freq > 4000) continue
|
||||
const db = freqData[bin]
|
||||
if (db < NOISE_FLOOR) continue
|
||||
|
||||
const amp = Math.sqrt(Math.pow(10, db / 10)) // amplitude, not power
|
||||
|
||||
for (let h = 1; h <= HARMONIC_WEIGHTS.length; h++) {
|
||||
const fundamental = freq / h
|
||||
if (fundamental < 40 || fundamental > 2000) continue
|
||||
const midi = 12 * Math.log2(fundamental / 440) + 69
|
||||
const pc = ((Math.round(midi) % 12) + 12) % 12
|
||||
chroma[pc] += amp * HARMONIC_WEIGHTS[h - 1]
|
||||
}
|
||||
}
|
||||
|
||||
for (let i = 0; i < 12; i++) chroma[i] = Math.log1p(chroma[i])
|
||||
const max = Math.max(...chroma)
|
||||
if (max > 0) for (let i = 0; i < 12; i++) chroma[i] /= max
|
||||
return chroma
|
||||
}
|
||||
|
||||
function detectBassPC(freqData, sampleRate, fftSize) {
|
||||
const binHz = sampleRate / fftSize
|
||||
let maxPower = 0, bestMidi = -1
|
||||
for (let bin = 2; bin < freqData.length; bin++) {
|
||||
const freq = bin * binHz
|
||||
if (freq < 40 || freq > 350) continue
|
||||
const db = freqData[bin]
|
||||
if (db < NOISE_FLOOR) continue
|
||||
const power = Math.pow(10, db / 10)
|
||||
if (power > maxPower) {
|
||||
maxPower = power
|
||||
bestMidi = Math.round(12 * Math.log2(freq / 440) + 69)
|
||||
}
|
||||
}
|
||||
if (bestMidi < 0) return null
|
||||
return ((bestMidi % 12) + 12) % 12
|
||||
}
|
||||
|
||||
export default function AudioCapture({ onNote, onChroma, isListening }) {
|
||||
const audioCtxRef = useRef(null)
|
||||
const pitchAnalyser = useRef(null)
|
||||
const chordAnalyser = useRef(null)
|
||||
const timeBufRef = useRef(null)
|
||||
const freqBufRef = useRef(null)
|
||||
const detectorRef = useRef(null)
|
||||
const rafRef = useRef(null)
|
||||
const streamRef = useRef(null)
|
||||
|
||||
const stop = useCallback(() => {
|
||||
if (rafRef.current) cancelAnimationFrame(rafRef.current)
|
||||
if (streamRef.current) streamRef.current.getTracks().forEach(t => t.stop())
|
||||
if (audioCtxRef.current) audioCtxRef.current.close()
|
||||
audioCtxRef.current = null
|
||||
}, [])
|
||||
|
||||
const start = useCallback(async () => {
|
||||
stop()
|
||||
const stream = await navigator.mediaDevices.getUserMedia({ audio: true })
|
||||
streamRef.current = stream
|
||||
|
||||
const ctx = new AudioContext()
|
||||
audioCtxRef.current = ctx
|
||||
const source = ctx.createMediaStreamSource(stream)
|
||||
|
||||
// Small analyser — pitch detection needs fast time-domain data
|
||||
const pa = ctx.createAnalyser()
|
||||
pa.fftSize = PITCH_FFT
|
||||
pa.smoothingTimeConstant = 0.0 // no smoothing: pitchy needs clean waveform
|
||||
pitchAnalyser.current = pa
|
||||
source.connect(pa)
|
||||
timeBufRef.current = new Float32Array(pa.fftSize)
|
||||
detectorRef.current = PitchDetector.forFloat32Array(pa.fftSize)
|
||||
|
||||
// Large analyser — chord detection needs fine frequency resolution
|
||||
const ca = ctx.createAnalyser()
|
||||
ca.fftSize = CHORD_FFT
|
||||
ca.smoothingTimeConstant = 0.65 // smooth over time for stable chord reading
|
||||
chordAnalyser.current = ca
|
||||
source.connect(ca)
|
||||
freqBufRef.current = new Float32Array(ca.frequencyBinCount)
|
||||
|
||||
function tick() {
|
||||
const timeBuf = timeBufRef.current
|
||||
pa.getFloatTimeDomainData(timeBuf)
|
||||
|
||||
const rms = Math.sqrt(timeBuf.reduce((s, v) => s + v * v, 0) / timeBuf.length)
|
||||
if (rms >= MIN_VOLUME) {
|
||||
// Pitch via McLeod (autocorrelation) — unaffected by FFT bin size
|
||||
const [freq, clarity] = detectorRef.current.findPitch(timeBuf, ctx.sampleRate)
|
||||
if (clarity >= MIN_CLARITY && freq > 60 && freq < 4200) {
|
||||
const midi = Math.round(12 * Math.log2(freq / 440) + 69)
|
||||
const pitchClass = ((midi % 12) + 12) % 12
|
||||
onNote({ noteName: NOTES[pitchClass], pitchClass, freq, midi, clarity })
|
||||
}
|
||||
|
||||
// Chord chroma from the high-resolution FFT
|
||||
if (onChroma) {
|
||||
const freqBuf = freqBufRef.current
|
||||
ca.getFloatFrequencyData(freqBuf)
|
||||
onChroma(
|
||||
computeChroma(freqBuf, ctx.sampleRate, ca.fftSize),
|
||||
detectBassPC(freqBuf, ctx.sampleRate, ca.fftSize)
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
rafRef.current = requestAnimationFrame(tick)
|
||||
}
|
||||
tick()
|
||||
}, [onNote, onChroma, stop])
|
||||
|
||||
useEffect(() => {
|
||||
if (isListening) start().catch(console.error)
|
||||
else stop()
|
||||
return stop
|
||||
}, [isListening, start, stop])
|
||||
|
||||
return null
|
||||
}
|
||||
@@ -1,89 +0,0 @@
|
||||
import { useState, useRef, useEffect } from 'react'
|
||||
|
||||
export default function ChatAssistant({ keyInfo, currentChord }) {
|
||||
const [messages, setMessages] = useState([])
|
||||
const [input, setInput] = useState('')
|
||||
const [loading, setLoading] = useState(false)
|
||||
const bottomRef = useRef(null)
|
||||
|
||||
useEffect(() => {
|
||||
bottomRef.current?.scrollIntoView({ behavior: 'smooth' })
|
||||
}, [messages])
|
||||
|
||||
async function send(e) {
|
||||
e.preventDefault()
|
||||
if (!input.trim() || loading) return
|
||||
|
||||
const userMsg = { role: 'user', content: input.trim() }
|
||||
const next = [...messages, userMsg]
|
||||
setMessages(next)
|
||||
setInput('')
|
||||
setLoading(true)
|
||||
|
||||
try {
|
||||
const context = {}
|
||||
if (keyInfo?.root) context.key = `${keyInfo.root} ${keyInfo.mode}`
|
||||
if (currentChord) context.chord = currentChord
|
||||
|
||||
const res = await fetch('/api/chat', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ messages: next, context }),
|
||||
})
|
||||
const data = await res.json()
|
||||
setMessages(prev => [...prev, { role: 'assistant', content: data.reply }])
|
||||
} catch (err) {
|
||||
setMessages(prev => [...prev, {
|
||||
role: 'assistant',
|
||||
content: 'Could not reach the AI assistant. Is the backend running?',
|
||||
}])
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="bg-panel border border-border rounded-2xl p-6 flex flex-col h-80">
|
||||
<p className="text-sm text-gray-500 uppercase tracking-widest mb-3">Theory Assistant</p>
|
||||
<div className="flex-1 overflow-y-auto space-y-3 pr-1">
|
||||
{messages.length === 0 && (
|
||||
<p className="text-gray-600 text-sm">Ask anything: "What lick works over this chord?" or "Why does the IV sound so resolved?"</p>
|
||||
)}
|
||||
{messages.map((m, i) => (
|
||||
<div key={i} className={`text-sm ${m.role === 'user' ? 'text-right' : 'text-left'}`}>
|
||||
<span className={`inline-block px-3 py-2 rounded-xl max-w-[85%] ${
|
||||
m.role === 'user'
|
||||
? 'bg-accent text-white'
|
||||
: 'bg-border text-gray-200'
|
||||
}`}>
|
||||
{m.content}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
{loading && (
|
||||
<div className="text-left">
|
||||
<span className="inline-block px-3 py-2 rounded-xl bg-border text-gray-400 text-sm animate-pulse">
|
||||
Thinking…
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
<div ref={bottomRef} />
|
||||
</div>
|
||||
<form onSubmit={send} className="mt-3 flex gap-2">
|
||||
<input
|
||||
className="flex-1 bg-surface border border-border rounded-lg px-3 py-2 text-sm outline-none focus:border-accent"
|
||||
placeholder="Ask about music theory…"
|
||||
value={input}
|
||||
onChange={e => setInput(e.target.value)}
|
||||
/>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={loading || !input.trim()}
|
||||
className="px-4 py-2 bg-accent text-white rounded-lg text-sm font-medium disabled:opacity-40"
|
||||
>
|
||||
Send
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -1,25 +0,0 @@
|
||||
export default function ChordDisplay({ history }) {
|
||||
const current = history[history.length - 1]
|
||||
const past = history.slice(-8, -1)
|
||||
|
||||
return (
|
||||
<div className="bg-panel border border-border rounded-2xl p-6">
|
||||
<p className="text-sm text-gray-500 uppercase tracking-widest mb-3">Chord</p>
|
||||
<p className="text-5xl font-bold text-amber-400">
|
||||
{current ?? '—'}
|
||||
</p>
|
||||
{past.length > 0 && (
|
||||
<div className="mt-4 flex gap-2 flex-wrap">
|
||||
{past.map((chord, i) => (
|
||||
<span
|
||||
key={i}
|
||||
className="text-sm px-2 py-1 bg-border rounded text-gray-400"
|
||||
>
|
||||
{chord}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -1,154 +0,0 @@
|
||||
import { getPentatonicScale, getFullScale, getChordTones, NOTES } from '../lib/theory'
|
||||
|
||||
// Standard tuning: pitch classes of open strings, high-E first (top of diagram)
|
||||
const STRINGS = [
|
||||
{ label: 'e', root: 4 }, // high E
|
||||
{ label: 'B', root: 11 },
|
||||
{ label: 'G', root: 7 },
|
||||
{ label: 'D', root: 2 },
|
||||
{ label: 'A', root: 9 },
|
||||
{ label: 'E', root: 4 }, // low E
|
||||
]
|
||||
|
||||
const NUM_FRETS = 13 // frets 0 (open) through 12
|
||||
const FRET_MARKERS = [3, 5, 7, 9]
|
||||
const DOUBLE_MARKER = 12
|
||||
|
||||
// Layout constants
|
||||
const NUT_X = 40 // x of the nut line
|
||||
const OPEN_X = 18 // x of open-string dot centres
|
||||
const FRET_W = 52 // pixels per fret
|
||||
const STRING_H = 28 // pixels between strings
|
||||
const PAD_T = 28 // top padding (fret numbers)
|
||||
const PAD_B = 18 // bottom padding (fret marker dots)
|
||||
const BOARD_W = NUT_X + (NUM_FRETS - 1) * FRET_W + 10
|
||||
const BOARD_H = PAD_T + 5 * STRING_H + PAD_B
|
||||
const DOT_R = 10
|
||||
|
||||
// x centre of a fretted note (fret >= 1)
|
||||
const fretX = f => NUT_X + (f - 0.5) * FRET_W
|
||||
// y centre of string si (0 = high e, 5 = low E)
|
||||
const stringY = si => PAD_T + si * STRING_H
|
||||
|
||||
function noteColor(isChordTone, isPenta, isScale) {
|
||||
if (isChordTone) return { fill: '#f59e0b', text: '#000' } // amber
|
||||
if (isPenta) return { fill: '#a855f7', text: '#fff' } // purple
|
||||
if (isScale) return { fill: '#374151', text: '#d1d5db' } // grey
|
||||
return null
|
||||
}
|
||||
|
||||
export default function Fretboard({ keyInfo, currentChord, pentatonicOnly = false }) {
|
||||
const { root, mode } = keyInfo ?? {}
|
||||
|
||||
if (!root) return null
|
||||
|
||||
const pentaSet = new Set(getPentatonicScale(root, mode).map(n => NOTES.indexOf(n)))
|
||||
const scaleSet = pentatonicOnly
|
||||
? pentaSet
|
||||
: new Set(getFullScale(root, mode).map(n => NOTES.indexOf(n)))
|
||||
const chordSet = currentChord
|
||||
? new Set(getChordTones(currentChord).map(n => NOTES.indexOf(n)))
|
||||
: new Set()
|
||||
|
||||
return (
|
||||
<div className="bg-panel border border-border rounded-2xl p-6">
|
||||
<p className="text-sm text-gray-500 uppercase tracking-widest mb-4">
|
||||
Fretboard — {root} {mode}
|
||||
{currentChord && <span className="text-amber-400 ml-2">/ {currentChord}</span>}
|
||||
</p>
|
||||
|
||||
<div className="overflow-x-auto">
|
||||
<svg
|
||||
width={BOARD_W}
|
||||
height={BOARD_H}
|
||||
style={{ display: 'block', minWidth: BOARD_W }}
|
||||
>
|
||||
{/* Fretboard background */}
|
||||
<rect x={NUT_X} y={PAD_T - 6} width={BOARD_W - NUT_X - 4} height={5 * STRING_H + 12}
|
||||
fill="#1a120b" rx={2} />
|
||||
|
||||
{/* Fret position marker dots (between strings 2–3 and 3–4) */}
|
||||
{FRET_MARKERS.map(f => (
|
||||
<circle key={f}
|
||||
cx={fretX(f)} cy={PAD_T + 2.5 * STRING_H}
|
||||
r={5} fill="#3a2a1a" />
|
||||
))}
|
||||
{/* Double dot at 12 */}
|
||||
<circle cx={fretX(DOUBLE_MARKER)} cy={PAD_T + 1.5 * STRING_H} r={5} fill="#3a2a1a" />
|
||||
<circle cx={fretX(DOUBLE_MARKER)} cy={PAD_T + 3.5 * STRING_H} r={5} fill="#3a2a1a" />
|
||||
|
||||
{/* Fret lines (1–12) */}
|
||||
{Array.from({ length: NUM_FRETS - 1 }, (_, i) => i + 1).map(f => (
|
||||
<line key={f}
|
||||
x1={NUT_X + f * FRET_W} y1={PAD_T - 6}
|
||||
x2={NUT_X + f * FRET_W} y2={PAD_T + 5 * STRING_H + 6}
|
||||
stroke={f === DOUBLE_MARKER ? '#888' : '#4a3a2a'}
|
||||
strokeWidth={f === DOUBLE_MARKER ? 2 : 1} />
|
||||
))}
|
||||
|
||||
{/* Nut */}
|
||||
<line x1={NUT_X} y1={PAD_T - 6} x2={NUT_X} y2={PAD_T + 5 * STRING_H + 6}
|
||||
stroke="#c0b090" strokeWidth={4} />
|
||||
|
||||
{/* Strings */}
|
||||
{STRINGS.map((_, si) => (
|
||||
<line key={si}
|
||||
x1={OPEN_X - DOT_R - 2} y1={stringY(si)}
|
||||
x2={BOARD_W - 8} y2={stringY(si)}
|
||||
stroke="#9ca3af"
|
||||
strokeWidth={si < 2 ? 1 : si < 4 ? 1.5 : 2} />
|
||||
))}
|
||||
|
||||
{/* Fret numbers */}
|
||||
{[3, 5, 7, 9, 12].map(f => (
|
||||
<text key={f}
|
||||
x={fretX(f)} y={PAD_T - 10}
|
||||
textAnchor="middle" fontSize={10} fill="#6b7280"
|
||||
>{f}</text>
|
||||
))}
|
||||
|
||||
{/* String labels */}
|
||||
{STRINGS.map((s, si) => (
|
||||
<text key={si}
|
||||
x={6} y={stringY(si) + 4}
|
||||
textAnchor="middle" fontSize={10} fill="#6b7280"
|
||||
>{s.label}</text>
|
||||
))}
|
||||
|
||||
{/* Note dots */}
|
||||
{STRINGS.flatMap((str, si) =>
|
||||
Array.from({ length: NUM_FRETS }, (_, fi) => {
|
||||
const pc = (str.root + fi) % 12
|
||||
const color = noteColor(chordSet.has(pc), pentaSet.has(pc), scaleSet.has(pc))
|
||||
if (!color) return null
|
||||
|
||||
const cx = fi === 0 ? OPEN_X : fretX(fi)
|
||||
const cy = stringY(si)
|
||||
|
||||
return (
|
||||
<g key={`${si}-${fi}`}>
|
||||
<circle cx={cx} cy={cy} r={DOT_R} fill={color.fill} />
|
||||
<text
|
||||
x={cx} y={cy + 4}
|
||||
textAnchor="middle"
|
||||
fontSize={9}
|
||||
fontWeight="600"
|
||||
fill={color.text}
|
||||
>
|
||||
{NOTES[pc]}
|
||||
</text>
|
||||
</g>
|
||||
)
|
||||
})
|
||||
)}
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div className="mt-3 flex gap-5 text-xs text-gray-500">
|
||||
<span><span className="text-amber-400">●</span> Chord tone</span>
|
||||
<span><span className="text-accent">●</span> Pentatonic</span>
|
||||
<span><span className="text-gray-500">●</span> Scale</span>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -1,33 +0,0 @@
|
||||
export default function KeyDisplay({ keyInfo, locked = false }) {
|
||||
const { root, mode, confidence } = keyInfo ?? {}
|
||||
const pct = confidence ? Math.round(confidence * 100) : 0
|
||||
|
||||
return (
|
||||
<div className="bg-panel border border-border rounded-2xl p-6 text-center">
|
||||
<p className="text-sm text-gray-500 uppercase tracking-widest mb-1">
|
||||
{locked ? '🔒 Key (locked)' : 'Detected Key'}
|
||||
</p>
|
||||
{root ? (
|
||||
<>
|
||||
<p className="text-6xl font-bold text-accent leading-none">
|
||||
{root}
|
||||
<span className="text-3xl text-gray-400 ml-2">{mode}</span>
|
||||
</p>
|
||||
{!locked && (
|
||||
<div className="mt-3 flex items-center justify-center gap-2">
|
||||
<div className="h-1.5 w-32 bg-border rounded-full overflow-hidden">
|
||||
<div
|
||||
className="h-full bg-accent rounded-full transition-all duration-500"
|
||||
style={{ width: `${pct}%` }}
|
||||
/>
|
||||
</div>
|
||||
<span className="text-xs text-gray-500">{pct}% confident</span>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
) : (
|
||||
<p className="text-2xl text-gray-600 mt-2">Listening…</p>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -1,122 +0,0 @@
|
||||
import { useRef, useEffect } from 'react'
|
||||
import { toRomanNumeral } from '../lib/theory'
|
||||
|
||||
const HISTORY_SHOWN = 8 // ~2 bars at 4 chords/bar
|
||||
|
||||
function findLoopPosition(chordHistory, progression) {
|
||||
if (!progression?.length || !chordHistory.length) return -1
|
||||
const last = chordHistory[chordHistory.length - 1]
|
||||
for (let p = progression.length - 1; p >= 0; p--) {
|
||||
if (progression[p] !== last) continue
|
||||
let match = true
|
||||
for (let i = 1; i < Math.min(p + 1, chordHistory.length); i++) {
|
||||
if (progression[p - i] !== chordHistory[chordHistory.length - 1 - i]) { match = false; break }
|
||||
}
|
||||
if (match) return p
|
||||
}
|
||||
return progression.indexOf(last)
|
||||
}
|
||||
|
||||
export default function ProgressionBanner({ chordHistory, keyInfo, detectedProgression }) {
|
||||
const { root, mode } = keyInfo ?? {}
|
||||
|
||||
// Newest chord is the last entry; we show the most recent HISTORY_SHOWN
|
||||
const visible = chordHistory.slice(-HISTORY_SHOWN)
|
||||
const current = visible[visible.length - 1]
|
||||
|
||||
// Animate the current chord slot when it changes
|
||||
const currentRef = useRef(null)
|
||||
const prevChord = useRef(null)
|
||||
useEffect(() => {
|
||||
if (current && current !== prevChord.current && currentRef.current) {
|
||||
currentRef.current.animate(
|
||||
[{ opacity: 0, transform: 'scale(0.85)' },
|
||||
{ opacity: 1, transform: 'scale(1)' }],
|
||||
{ duration: 200, easing: 'ease-out', fill: 'forwards' }
|
||||
)
|
||||
prevChord.current = current
|
||||
}
|
||||
}, [current])
|
||||
|
||||
const loopPos = findLoopPosition(chordHistory, detectedProgression)
|
||||
|
||||
if (!chordHistory.length) {
|
||||
return (
|
||||
<div className="bg-panel border border-border rounded-2xl p-5 mb-4 flex items-center justify-center h-28">
|
||||
<p className="text-gray-600">Start listening to detect chords…</p>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="bg-panel border border-border rounded-2xl p-5 mb-4">
|
||||
|
||||
{/* ── Chord history strip: all HISTORY_SHOWN chords at consistent size ── */}
|
||||
<div className="flex items-stretch gap-1 overflow-x-auto pb-1">
|
||||
{visible.map((chord, i) => {
|
||||
const isCurrent = i === visible.length - 1
|
||||
const age = visible.length - 1 - i // 0 = current, higher = older
|
||||
const opacity = Math.max(0.2, 1 - age * 0.1) // fade but stay readable
|
||||
const rn = root ? toRomanNumeral(chord, root, mode) : ''
|
||||
|
||||
return (
|
||||
<div
|
||||
key={i}
|
||||
ref={isCurrent ? currentRef : null}
|
||||
style={{ opacity }}
|
||||
className={`
|
||||
flex flex-col items-center justify-end shrink-0 px-3 py-2 rounded-xl
|
||||
transition-colors duration-200
|
||||
${isCurrent
|
||||
? 'bg-accent/10 border border-accent/40 ring-1 ring-accent/20'
|
||||
: 'border border-transparent'}
|
||||
`}
|
||||
>
|
||||
<span className={`font-black leading-none tracking-tight ${
|
||||
isCurrent ? 'text-5xl text-accent' : 'text-3xl text-gray-200'
|
||||
}`}>
|
||||
{chord}
|
||||
</span>
|
||||
<span className={`text-xs font-semibold mt-1 ${
|
||||
isCurrent ? 'text-amber-400' : 'text-gray-500'
|
||||
}`}>
|
||||
{rn || '\u00A0'}
|
||||
</span>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
|
||||
{/* ── Detected loop ── */}
|
||||
{detectedProgression && (
|
||||
<div className="mt-4 pt-3 border-t border-border">
|
||||
<p className="text-xs text-gray-500 uppercase tracking-widest mb-2">♻ Detected loop</p>
|
||||
<div className="flex gap-2 flex-wrap">
|
||||
{detectedProgression.map((chord, i) => {
|
||||
const isActive = i === loopPos
|
||||
const rn = root ? toRomanNumeral(chord, root, mode) : chord
|
||||
return (
|
||||
<div
|
||||
key={i}
|
||||
className={`flex flex-col items-center px-4 py-2 rounded-xl border transition-all duration-200 ${
|
||||
isActive
|
||||
? 'bg-accent/20 border-accent shadow-[0_0_14px_rgba(168,85,247,0.35)]'
|
||||
: 'bg-border border-border'
|
||||
}`}
|
||||
>
|
||||
<span className={`text-2xl font-bold leading-none ${isActive ? 'text-accent' : 'text-gray-200'}`}>
|
||||
{chord}
|
||||
</span>
|
||||
<span className={`text-xs mt-1 font-semibold ${isActive ? 'text-amber-400' : 'text-gray-500'}`}>
|
||||
{rn}
|
||||
</span>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
<span className="self-center text-gray-600 text-sm pl-1">→ loop</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -1,32 +0,0 @@
|
||||
import { getSuggestedProgressions } from '../lib/theory'
|
||||
|
||||
export default function ProgressionSuggestions({ keyInfo }) {
|
||||
const { root, mode } = keyInfo ?? {}
|
||||
|
||||
if (!root) return null
|
||||
|
||||
const progressions = getSuggestedProgressions(root, mode)
|
||||
|
||||
return (
|
||||
<div className="bg-panel border border-border rounded-2xl p-6">
|
||||
<p className="text-sm text-gray-500 uppercase tracking-widest mb-4">
|
||||
Progressions in {root} {mode}
|
||||
</p>
|
||||
<div className="space-y-3">
|
||||
{progressions.map(prog => (
|
||||
<div key={prog.genre} className="flex items-center gap-3">
|
||||
<span className="text-xs text-gray-500 w-10 shrink-0">{prog.genre}</span>
|
||||
<div className="flex gap-2 flex-wrap">
|
||||
{prog.chords.map((chord, i) => (
|
||||
<span key={i} className="px-3 py-1 bg-border rounded text-sm font-medium">
|
||||
{chord}
|
||||
<span className="ml-1 text-gray-600 text-xs">({prog.rn[i]})</span>
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -1,46 +0,0 @@
|
||||
import { getPentatonicScale, getFullScale, getChordTones } from '../lib/theory'
|
||||
|
||||
const ALL_NOTES = ['C', 'C#', 'D', 'D#', 'E', 'F', 'F#', 'G', 'G#', 'A', 'A#', 'B']
|
||||
|
||||
export default function SafeNotes({ keyInfo, currentChord }) {
|
||||
const { root, mode } = keyInfo ?? {}
|
||||
|
||||
if (!root) return null
|
||||
|
||||
const penta = getPentatonicScale(root, mode)
|
||||
const full = getFullScale(root, mode)
|
||||
const chordTones = currentChord ? getChordTones(currentChord) : []
|
||||
|
||||
return (
|
||||
<div className="bg-panel border border-border rounded-2xl p-6">
|
||||
<p className="text-sm text-gray-500 uppercase tracking-widest mb-4">Safe Notes</p>
|
||||
<div className="flex gap-2 flex-wrap">
|
||||
{ALL_NOTES.map(note => {
|
||||
const isChordTone = chordTones.includes(note)
|
||||
const isPenta = penta.includes(note)
|
||||
const isScale = full.includes(note)
|
||||
|
||||
let cls = 'px-3 py-2 rounded-lg text-sm font-semibold border transition-all '
|
||||
if (isChordTone) {
|
||||
cls += 'bg-accent text-white border-accent scale-105'
|
||||
} else if (isPenta) {
|
||||
cls += 'bg-accent/20 text-accent border-accent/40'
|
||||
} else if (isScale) {
|
||||
cls += 'bg-border text-gray-300 border-border'
|
||||
} else {
|
||||
cls += 'bg-transparent text-gray-700 border-transparent'
|
||||
}
|
||||
|
||||
return (
|
||||
<span key={note} className={cls}>{note}</span>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
<div className="mt-3 flex gap-4 text-xs text-gray-500">
|
||||
<span><span className="text-accent">■</span> Chord tone</span>
|
||||
<span><span className="text-accent/60">■</span> Pentatonic</span>
|
||||
<span><span className="text-gray-500">■</span> Scale</span>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -1,9 +0,0 @@
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
body {
|
||||
background-color: #0f0f0f;
|
||||
color: #f5f5f5;
|
||||
font-family: system-ui, -apple-system, sans-serif;
|
||||
}
|
||||
@@ -1,391 +0,0 @@
|
||||
// ─── Constants ───────────────────────────────────────────────────────────────
|
||||
|
||||
export const NOTES = ['C','C#','D','D#','E','F','F#','G','G#','A','A#','B']
|
||||
export const NOTES_FLAT = ['C','Db','D','Eb','E','F','Gb','G','Ab','A','Bb','B']
|
||||
|
||||
// Semitone intervals for each scale mode
|
||||
export const SCALES = {
|
||||
major: [0, 2, 4, 5, 7, 9, 11],
|
||||
minor: [0, 2, 3, 5, 7, 8, 10],
|
||||
dorian: [0, 2, 3, 5, 7, 9, 10],
|
||||
phrygian: [0, 1, 3, 5, 7, 8, 10],
|
||||
lydian: [0, 2, 4, 6, 7, 9, 11],
|
||||
mixolydian: [0, 2, 4, 5, 7, 9, 10],
|
||||
pentatonic_major: [0, 2, 4, 7, 9],
|
||||
pentatonic_minor: [0, 3, 5, 7, 10],
|
||||
blues: [0, 3, 5, 6, 7, 10],
|
||||
diminished: [0, 2, 3, 5, 6, 8, 9, 11],
|
||||
whole_tone: [0, 2, 4, 6, 8, 10],
|
||||
}
|
||||
|
||||
// Human-readable scale labels
|
||||
export const SCALE_LABELS = {
|
||||
major: 'Major',
|
||||
minor: 'Natural Minor',
|
||||
dorian: 'Dorian',
|
||||
phrygian: 'Phrygian',
|
||||
lydian: 'Lydian',
|
||||
mixolydian: 'Mixolydian',
|
||||
pentatonic_major: 'Major Pentatonic',
|
||||
pentatonic_minor: 'Minor Pentatonic',
|
||||
blues: 'Blues',
|
||||
diminished: 'Diminished',
|
||||
whole_tone: 'Whole Tone',
|
||||
}
|
||||
|
||||
// Krumhansl-Schmuckler key profiles (major/minor only — used for key detection)
|
||||
const KS_MAJOR = [6.35, 2.23, 3.48, 2.33, 4.38, 4.09, 2.52, 5.19, 2.39, 3.66, 2.29, 2.88]
|
||||
const KS_MINOR = [6.33, 2.68, 3.52, 5.38, 2.60, 3.53, 2.54, 4.75, 3.98, 2.69, 3.34, 3.17]
|
||||
|
||||
// Chord type definitions: intervals (semitones from root) and display suffix
|
||||
export const CHORD_TYPES = {
|
||||
maj: { intervals: [0, 4, 7], suffix: '' },
|
||||
min: { intervals: [0, 3, 7], suffix: 'm' },
|
||||
dom7: { intervals: [0, 4, 7, 10], suffix: '7' },
|
||||
maj7: { intervals: [0, 4, 7, 11], suffix: 'maj7' },
|
||||
min7: { intervals: [0, 3, 7, 10], suffix: 'm7' },
|
||||
dim: { intervals: [0, 3, 6], suffix: 'dim' },
|
||||
dim7: { intervals: [0, 3, 6, 9], suffix: 'dim7' },
|
||||
half_dim: { intervals: [0, 3, 6, 10], suffix: 'm7b5' },
|
||||
aug: { intervals: [0, 4, 8], suffix: 'aug' },
|
||||
sus4: { intervals: [0, 5, 7], suffix: 'sus4' },
|
||||
sus2: { intervals: [0, 2, 7], suffix: 'sus2' },
|
||||
maj6: { intervals: [0, 4, 7, 9], suffix: '6' },
|
||||
min6: { intervals: [0, 3, 7, 9], suffix: 'm6' },
|
||||
add9: { intervals: [0, 2, 4, 7], suffix: 'add9' },
|
||||
}
|
||||
|
||||
// Chord types considered during real-time chroma matching
|
||||
const MATCH_CHORD_TYPES = [
|
||||
'maj', 'min', 'dom7', 'min7', 'dim', 'half_dim', 'aug', 'sus4', 'add9',
|
||||
]
|
||||
|
||||
// Minimum score for a chord match to be reported
|
||||
const CHORD_MATCH_MIN_SCORE = 0.42
|
||||
// Minimum margin over second-best for a match to be considered unambiguous
|
||||
const CHORD_MATCH_MIN_MARGIN = 0.04
|
||||
|
||||
// Chord quality for each scale degree in major and minor
|
||||
const DEGREE_QUALITIES = {
|
||||
major: ['', 'm', 'm', '', '', 'm', 'dim'],
|
||||
minor: ['m', 'dim', '', 'm', 'm', '', '' ],
|
||||
}
|
||||
|
||||
const ROMAN_NUMERALS = ['I', 'II', 'III', 'IV', 'V', 'VI', 'VII']
|
||||
|
||||
// Common chord progressions by genre, expressed as semitone offsets from the root
|
||||
const PROGRESSIONS = {
|
||||
pop: { name: 'Pop', rn: ['I', 'V', 'vi', 'IV'], degrees: [0, 7, 9, 5] },
|
||||
blues: { name: 'Blues', rn: ['I', 'IV', 'V'], degrees: [0, 5, 7] },
|
||||
folk: { name: 'Folk', rn: ['I', 'IV', 'I', 'V'], degrees: [0, 5, 0, 7] },
|
||||
jazz: { name: 'Jazz', rn: ['ii', 'V', 'I'], degrees: [2, 7, 0] },
|
||||
rock: { name: 'Rock', rn: ['I', 'bVII', 'IV', 'I'], degrees: [0, 10, 5, 0] },
|
||||
'50s': { name: "'50s", rn: ['I', 'vi', 'IV', 'V'], degrees: [0, 9, 5, 7] },
|
||||
flamen: { name: 'Flamenco', rn: ['i', 'bVII', 'bVI', 'V'], degrees: [0, 10, 8, 7] },
|
||||
}
|
||||
|
||||
// ─── Internal helpers ────────────────────────────────────────────────────────
|
||||
|
||||
function noteName(semitone, preferFlat = false) {
|
||||
const pc = ((semitone % 12) + 12) % 12
|
||||
return preferFlat ? NOTES_FLAT[pc] : NOTES[pc]
|
||||
}
|
||||
|
||||
function pearsonCorrelation(a, b) {
|
||||
const n = a.length
|
||||
const meanA = a.reduce((s, v) => s + v, 0) / n
|
||||
const meanB = b.reduce((s, v) => s + v, 0) / n
|
||||
let num = 0, denA = 0, denB = 0
|
||||
for (let i = 0; i < n; i++) {
|
||||
const da = a[i] - meanA
|
||||
const db = b[i] - meanB
|
||||
num += da * db
|
||||
denA += da * da
|
||||
denB += db * db
|
||||
}
|
||||
return num / Math.sqrt(denA * denB + 1e-10)
|
||||
}
|
||||
|
||||
// Accepts both sharp (C#) and flat (Db) spellings
|
||||
function noteIndex(note) {
|
||||
const idx = NOTES.indexOf(note)
|
||||
if (idx !== -1) return idx
|
||||
return NOTES_FLAT.indexOf(note)
|
||||
}
|
||||
|
||||
// ─── Key Detection ───────────────────────────────────────────────────────────
|
||||
|
||||
/**
|
||||
* detectTopKeys(noteHistory, n) → top N key candidates sorted by confidence.
|
||||
* Each entry: { root, mode, confidence }
|
||||
*/
|
||||
export function detectTopKeys(noteHistory, n = 3) {
|
||||
if (!noteHistory || noteHistory.length < 8) return []
|
||||
|
||||
const freq = new Array(12).fill(0)
|
||||
for (const note of noteHistory) freq[((note % 12) + 12) % 12]++
|
||||
|
||||
const candidates = []
|
||||
for (let root = 0; root < 12; root++) {
|
||||
const rotated = Array.from({ length: 12 }, (_, i) => freq[(i + root) % 12])
|
||||
const scoreMaj = pearsonCorrelation(rotated, KS_MAJOR)
|
||||
const scoreMin = pearsonCorrelation(rotated, KS_MINOR)
|
||||
candidates.push({ root: noteName(root), mode: 'major', score: scoreMaj,
|
||||
confidence: Math.max(0, Math.min(1, (scoreMaj + 1) / 2)) })
|
||||
candidates.push({ root: noteName(root), mode: 'minor', score: scoreMin,
|
||||
confidence: Math.max(0, Math.min(1, (scoreMin + 1) / 2)) })
|
||||
}
|
||||
|
||||
return candidates.sort((a, b) => b.score - a.score).slice(0, n)
|
||||
.map(({ root, mode, confidence }) => ({ root, mode, confidence }))
|
||||
}
|
||||
|
||||
/**
|
||||
* detectKey(noteHistory) → { root, mode, confidence }
|
||||
* Uses Krumhansl-Schmuckler: correlates pitch-class histogram with key profiles.
|
||||
* noteHistory: array of MIDI note numbers or pitch-class integers (0–11)
|
||||
*/
|
||||
export function detectKey(noteHistory) {
|
||||
if (!noteHistory || noteHistory.length < 4) {
|
||||
return { root: 'C', mode: 'major', confidence: 0 }
|
||||
}
|
||||
|
||||
const freq = new Array(12).fill(0)
|
||||
for (const note of noteHistory) {
|
||||
freq[((note % 12) + 12) % 12]++
|
||||
}
|
||||
|
||||
let best = { root: 0, mode: 'major', score: -Infinity }
|
||||
|
||||
for (let root = 0; root < 12; root++) {
|
||||
const rotated = Array.from({ length: 12 }, (_, i) => freq[(i + root) % 12])
|
||||
const scoreMaj = pearsonCorrelation(rotated, KS_MAJOR)
|
||||
const scoreMin = pearsonCorrelation(rotated, KS_MINOR)
|
||||
if (scoreMaj > best.score) best = { root, mode: 'major', score: scoreMaj }
|
||||
if (scoreMin > best.score) best = { root, mode: 'minor', score: scoreMin }
|
||||
}
|
||||
|
||||
const confidence = Math.max(0, Math.min(1, (best.score + 1) / 2))
|
||||
return { root: noteName(best.root), mode: best.mode, confidence }
|
||||
}
|
||||
|
||||
// ─── Scale helpers ───────────────────────────────────────────────────────────
|
||||
|
||||
export function getScale(root, mode) {
|
||||
const rootIdx = noteIndex(root)
|
||||
if (rootIdx === -1) return []
|
||||
return (SCALES[mode] ?? SCALES.major).map(i => noteName(rootIdx + i))
|
||||
}
|
||||
|
||||
// Legacy aliases
|
||||
export const getFullScale = (root, mode) => getScale(root, mode)
|
||||
export const getPentatonicScale = (root, mode) =>
|
||||
getScale(root, mode === 'minor' ? 'pentatonic_minor' : 'pentatonic_major')
|
||||
|
||||
/**
|
||||
* Returns all scale modes that contain every note in playedNotes.
|
||||
* Useful for suggesting compatible scales from a detected chord or melody.
|
||||
*/
|
||||
export function getCompatibleScales(playedNotes, root) {
|
||||
const played = new Set(playedNotes)
|
||||
return Object.entries(SCALES)
|
||||
.map(([mode]) => ({ mode, label: SCALE_LABELS[mode] ?? mode, notes: getScale(root, mode) }))
|
||||
.filter(({ notes }) => [...played].every(n => notes.includes(n)))
|
||||
}
|
||||
|
||||
// ─── Chord helpers ───────────────────────────────────────────────────────────
|
||||
|
||||
export function getChordTones(chordName) {
|
||||
const match = chordName.match(/^([A-G][b#]?)(.*)$/)
|
||||
if (!match) return []
|
||||
const root = noteIndex(match[1])
|
||||
const suffix = match[2] ?? ''
|
||||
const type = Object.values(CHORD_TYPES).find(t => t.suffix === suffix) ?? CHORD_TYPES.maj
|
||||
return type.intervals.map(i => noteName(root + i))
|
||||
}
|
||||
|
||||
export function getChordsInKey(root, mode) {
|
||||
const rootIdx = noteIndex(root)
|
||||
if (rootIdx === -1) return []
|
||||
const scale = SCALES[mode] ?? SCALES.major
|
||||
const qualities = DEGREE_QUALITIES[mode] ?? DEGREE_QUALITIES.major
|
||||
return scale.map((degree, i) => noteName(rootIdx + degree) + qualities[i])
|
||||
}
|
||||
|
||||
// ─── Progression suggestions ─────────────────────────────────────────────────
|
||||
|
||||
export function getSuggestedProgressions(root, mode) {
|
||||
const rootIdx = noteIndex(root)
|
||||
if (rootIdx === -1) return []
|
||||
const scale = SCALES[mode] ?? SCALES.major
|
||||
const qualities = DEGREE_QUALITIES[mode] ?? DEGREE_QUALITIES.major
|
||||
|
||||
return Object.values(PROGRESSIONS).map(prog => {
|
||||
const chords = prog.degrees.map(semitones => {
|
||||
const noteIdx = (rootIdx + semitones) % 12
|
||||
const degreeIdx = scale.indexOf(semitones)
|
||||
// Chromatic degrees (e.g. bVII in rock) default to major triad
|
||||
const quality = degreeIdx >= 0 ? qualities[degreeIdx] : ''
|
||||
return noteName(noteIdx) + quality
|
||||
})
|
||||
return { genre: prog.name, rn: prog.rn, chords }
|
||||
})
|
||||
}
|
||||
|
||||
// ─── Chroma-based chord matching ─────────────────────────────────────────────
|
||||
|
||||
/**
|
||||
* matchChordFromChroma(chroma, keyInfo, bassPC?, strictDiatonic?, minScore?, minMargin?)
|
||||
* chroma: Float32Array[12], normalised 0–1 energy per pitch class.
|
||||
* Returns null when no unambiguous winner is found (transition/silence).
|
||||
*/
|
||||
export function matchChordFromChroma(
|
||||
chroma,
|
||||
keyInfo,
|
||||
bassPC = null,
|
||||
strictDiatonic = false,
|
||||
minScore = CHORD_MATCH_MIN_SCORE,
|
||||
minMargin = CHORD_MATCH_MIN_MARGIN,
|
||||
) {
|
||||
if (!keyInfo?.root) return null
|
||||
|
||||
const diatonicSet = new Set(getChordsInKey(keyInfo.root, keyInfo.mode))
|
||||
|
||||
let best = { name: null, score: -Infinity }
|
||||
let secondScore = -Infinity
|
||||
|
||||
for (let r = 0; r < 12; r++) {
|
||||
for (const typeKey of MATCH_CHORD_TYPES) {
|
||||
const type = CHORD_TYPES[typeKey]
|
||||
const chordName = noteName(r) + type.suffix
|
||||
|
||||
if (strictDiatonic && !diatonicSet.has(chordName)) continue
|
||||
|
||||
const tones = new Set(type.intervals.map(i => (r + i) % 12))
|
||||
|
||||
let inEnergy = 0, outEnergy = 0
|
||||
for (let pc = 0; pc < 12; pc++) {
|
||||
if (pc === r) {
|
||||
inEnergy += chroma[pc] * 2 // root carries strongest identity signal
|
||||
} else if (tones.has(pc)) {
|
||||
inEnergy += chroma[pc]
|
||||
} else {
|
||||
outEnergy += chroma[pc]
|
||||
}
|
||||
}
|
||||
|
||||
if (inEnergy + outEnergy < 0.05) continue
|
||||
|
||||
const coverageScore = inEnergy / (inEnergy + outEnergy * 0.5)
|
||||
const bassBonus = bassPC !== null && r === bassPC ? 0.15 : 0
|
||||
const diatonicBonus = diatonicSet.has(chordName) ? 0.15 : 0
|
||||
|
||||
const finalScore = coverageScore + bassBonus + diatonicBonus
|
||||
|
||||
if (finalScore > best.score) {
|
||||
secondScore = best.score
|
||||
best = { name: chordName, score: finalScore }
|
||||
} else if (finalScore > secondScore) {
|
||||
secondScore = finalScore
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return (best.score >= minScore && best.score - secondScore >= minMargin)
|
||||
? best.name
|
||||
: null
|
||||
}
|
||||
|
||||
// ─── Roman numeral notation ───────────────────────────────────────────────────
|
||||
|
||||
/**
|
||||
* Converts a chord name to its Roman numeral relative to a key.
|
||||
* Chromatic (borrowed) chords get a flat prefix, e.g. Bb in C major → ♭VII.
|
||||
*/
|
||||
export function toRomanNumeral(chordName, keyRoot, keyMode) {
|
||||
if (!chordName || !keyRoot) return '?'
|
||||
|
||||
const match = chordName.match(/^([A-G][b#]?)(.*)$/)
|
||||
if (!match) return '?'
|
||||
const [, root, quality] = match
|
||||
|
||||
const chordRootIdx = noteIndex(root)
|
||||
const keyRootIdx = noteIndex(keyRoot)
|
||||
if (chordRootIdx < 0 || keyRootIdx < 0) return '?'
|
||||
|
||||
const semitones = ((chordRootIdx - keyRootIdx) + 12) % 12
|
||||
const scale = SCALES[keyMode] ?? SCALES.major
|
||||
const degreeIdx = scale.indexOf(semitones)
|
||||
|
||||
let rn
|
||||
if (degreeIdx >= 0) {
|
||||
rn = ROMAN_NUMERALS[degreeIdx]
|
||||
} else {
|
||||
// Chromatic chord: flat the nearest diatonic degree above it
|
||||
const nearestAbove = scale.findIndex(d => d > semitones)
|
||||
const refDegree = nearestAbove >= 0 ? nearestAbove : 0
|
||||
rn = '♭' + ROMAN_NUMERALS[refDegree]
|
||||
}
|
||||
|
||||
const isMinorQuality = /^m(?!aj)/.test(quality) || quality === 'dim' || quality === 'm7b5'
|
||||
return isMinorQuality ? rn.toLowerCase() : rn
|
||||
}
|
||||
|
||||
// ─── Repeating progression detection ─────────────────────────────────────────
|
||||
|
||||
/**
|
||||
* detectRepeatingProgression(history) → chord[] or null
|
||||
* Returns the most-recently-completed repeating pattern (length 2–6).
|
||||
* Uses non-overlapping match counting to avoid over-counting.
|
||||
*/
|
||||
export function detectRepeatingProgression(history) {
|
||||
if (!history || history.length < 4) return null
|
||||
|
||||
const window = history.slice(-20)
|
||||
let best = null, bestScore = 0
|
||||
|
||||
for (let len = 2; len <= 6; len++) {
|
||||
if (len * 2 > window.length) break
|
||||
|
||||
const candidate = window.slice(-len)
|
||||
let reps = 0, i = 0
|
||||
|
||||
while (i <= window.length - len) {
|
||||
if (candidate.every((c, j) => c === window[i + j])) {
|
||||
reps++
|
||||
i += len // skip past match — non-overlapping
|
||||
} else {
|
||||
i++
|
||||
}
|
||||
}
|
||||
|
||||
const score = reps * len
|
||||
if (reps >= 2 && score > bestScore) {
|
||||
bestScore = score
|
||||
best = candidate
|
||||
}
|
||||
}
|
||||
|
||||
return best
|
||||
}
|
||||
|
||||
// ─── Utilities ───────────────────────────────────────────────────────────────
|
||||
|
||||
export function intervalName(semitones) {
|
||||
const names = [
|
||||
'Unison', 'Minor 2nd', 'Major 2nd', 'Minor 3rd', 'Major 3rd',
|
||||
'Perfect 4th', 'Tritone', 'Perfect 5th', 'Minor 6th',
|
||||
'Major 6th', 'Minor 7th', 'Major 7th',
|
||||
]
|
||||
return names[((semitones % 12) + 12) % 12] ?? 'Unknown'
|
||||
}
|
||||
|
||||
export function transposeChord(chordName, semitones) {
|
||||
const match = chordName.match(/^([A-G][b#]?)(.*)$/)
|
||||
if (!match) return chordName
|
||||
return noteName(noteIndex(match[1]) + semitones) + match[2]
|
||||
}
|
||||
|
||||
export function transposeProgression(chords, semitones) {
|
||||
return chords.map(c => transposeChord(c, semitones))
|
||||
}
|
||||
@@ -1,10 +0,0 @@
|
||||
import React from 'react'
|
||||
import ReactDOM from 'react-dom/client'
|
||||
import App from './App.jsx'
|
||||
import './index.css'
|
||||
|
||||
ReactDOM.createRoot(document.getElementById('root')).render(
|
||||
<React.StrictMode>
|
||||
<App />
|
||||
</React.StrictMode>,
|
||||
)
|
||||
@@ -1,16 +0,0 @@
|
||||
/** @type {import('tailwindcss').Config} */
|
||||
export default {
|
||||
content: ['./index.html', './src/**/*.{js,jsx}'],
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
surface: '#0f0f0f',
|
||||
panel: '#1a1a1a',
|
||||
border: '#2a2a2a',
|
||||
accent: '#a855f7',
|
||||
amber: '#f59e0b',
|
||||
},
|
||||
},
|
||||
},
|
||||
plugins: [],
|
||||
}
|
||||
@@ -1,13 +0,0 @@
|
||||
import { defineConfig } from 'vite'
|
||||
import react from '@vitejs/plugin-react'
|
||||
|
||||
export default defineConfig({
|
||||
plugins: [react()],
|
||||
base: './', // relative paths so Electron can load files from disk
|
||||
server: {
|
||||
port: 5173,
|
||||
},
|
||||
build: {
|
||||
outDir: 'dist',
|
||||
},
|
||||
})
|
||||
Reference in New Issue
Block a user