Impaczus/motif
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Implement complete search results + dual player UI

Browse Source 
Backend Enhancements:
- Add ParsedMIDIInfo with track analysis and quality issues
- New /api/midi/parse endpoint for MIDI metadata extraction
- Enhanced MIDIService with parseMIDI method

MIDI Preview Player:
- Complete MIDIPlayer class with polyphonic playback
- Basic oscillator mapping (bass=square, mid=triangle, high=sine)
- Lookahead scheduling with proper cleanup
- Automatic stopping when MIDI ends

New UI Flow:
1. Search → Results table with metadata
2. Select MIDI → Shows parsed info (duration, tracks, tempo)
3. Dual transport: Preview Original vs Generate Motif
4. Try Next Result button for easy A/B testing

Search Results Table:
- Title, source, confidence bar, duration, track count
- Quality issues display (short duration, few notes, etc.)
- Auto-select best result, manual selection available
- Visual confidence bars and issue warnings

This makes the project feel "real" - you can now:
- See exactly what MIDI was found
- Verify it's the right song via preview
- Compare original vs procedural synthesis
- Easily try different results

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
b1rdmania
2025-12-17 21:04:29 +00:00
parent 2d4c748d4c
commit 177e8fbed3
8 changed files with 731 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+121 -4
View File
@@ -42,6 +42,13 @@
opacity: 0.5;
cursor: not-allowed;
}
button.primary {
background: #00ff88;
color: #000;
}
button.primary:hover {
background: #00cc6a;
}
#status {
margin: 20px 0;
padding: 10px;
@@ -57,6 +64,74 @@
margin: 0 10px;
font-family: inherit;
}
.results-section {
margin: 30px 0;
display: none;
}
.results-section.visible {
display: block;
}
.results-table {
width: 100%;
border-collapse: collapse;
margin: 20px 0;
}
.results-table th,
.results-table td {
padding: 8px 12px;
text-align: left;
border-bottom: 1px solid #333;
}
.results-table th {
background: #222;
color: #00ff88;
}
.results-table tr:hover {
background: #1a1a1a;
}
.results-table tr.selected {
background: #2a2a2a;
}
.confidence-bar {
width: 60px;
height: 4px;
background: #333;
border-radius: 2px;
overflow: hidden;
}
.confidence-fill {
height: 100%;
background: linear-gradient(90deg, #ff4444, #ffaa44, #00ff88);
transition: width 0.2s;
}
.player-section {
margin: 30px 0;
display: none;
}
.player-section.visible {
display: block;
}
.player-controls {
display: flex;
gap: 20px;
margin: 20px 0;
}
.player-info {
background: #1a1a1a;
padding: 15px;
margin: 15px 0;
border-left: 3px solid #555;
}
.issues {
color: #ffaa44;
font-size: 0.9em;
}
</style>
</head>
<body>
@@ -66,12 +141,54 @@
<div class="controls">
<input type="text" id="songInput" placeholder="Enter song name..." />
<button id="generateBtn">Generate</button>
<button id="playBtn" disabled>Play</button>
<button id="stopBtn" disabled>Stop</button>
<button id="searchBtn">Search</button>
</div>
<div id="status">Ready. Enter a song name to begin synthesis.</div>
<div id="status">Ready. Enter a song name to search for MIDI files.</div>
<div id="resultsSection" class="results-section">
<h3>Search Results</h3>
<table id="resultsTable" class="results-table">
<thead>
<tr>
<th>Title</th>
<th>Source</th>
<th>Confidence</th>
<th>Duration</th>
<th>Tracks</th>
<th>Issues</th>
<th></th>
</tr>
</thead>
<tbody id="resultsBody">
</tbody>
</table>
</div>
<div id="playerSection" class="player-section">
<div id="selectedInfo" class="player-info">
<h4 id="selectedTitle">No MIDI selected</h4>
<p id="selectedMeta">Select a MIDI file from search results to enable playback</p>
</div>
<div class="player-controls">
<div>
<h4>MIDI Preview</h4>
<p>Plays original MIDI as-is</p>
<button id="previewBtn" disabled>Play Original</button>
<button id="previewStopBtn" disabled>Stop</button>
</div>
<div>
<h4>Motif Generation</h4>
<p>Procedural synthesis from structure</p>
<button id="motifBtn" disabled>Generate & Play</button>
<button id="motifStopBtn" disabled>Stop</button>
</div>
</div>
<button id="nextResultBtn" disabled>Try Next Result</button>
</div>
</div>
<script type="module" src="/src/main.ts"></script>