Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" /> | |
| <title>MuScriptor — Multi-Instrument AMT</title> | |
| <meta name="description" content="MuScriptor multi-instrument music transcription. Drag in an audio file, get back MIDI, MusicXML, and a piano roll." /> | |
| <link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Ctext y='26' font-size='28'%3E%F0%9F%8E%B5%3C/text%3E%3C/svg%3E" /> | |
| <link rel="stylesheet" href="./style.css" /> | |
| </head> | |
| <body> | |
| <header class="topbar"> | |
| <h1><span aria-hidden="true">🎵</span> MuScriptor</h1> | |
| <p class="tagline">Multi-instrument audio → MIDI · MusicXML · piano roll</p> | |
| </header> | |
| <main> | |
| <section class="card" id="config-card"> | |
| <h2>1. Backend</h2> | |
| <p class="hint"> | |
| Point this UI at the HF Space that runs the Gradio app | |
| (<code>kajica2/muscriptor-amt-space</code>). | |
| Defaults to the standard HF Spaces subdomain. | |
| </p> | |
| <label for="space-url">Space URL</label> | |
| <input id="space-url" type="url" spellcheck="false" autocomplete="off" | |
| value="https://kajica2-muscriptor-amt-space.hf.space" /> | |
| <div class="row"> | |
| <button id="check-backend" class="ghost" type="button">Check backend</button> | |
| <span id="backend-status" class="status muted">not checked</span> | |
| </div> | |
| </section> | |
| <section class="card" id="input-card"> | |
| <h2>2. Audio</h2> | |
| <p class="hint">Drop a WAV / MP3 / FLAC, pick a sample, or record from the mic.</p> | |
| <label for="audio-file">Upload</label> | |
| <input id="audio-file" type="file" accept="audio/*" /> | |
| <div class="samples"> | |
| <span class="samples-label">Samples:</span> | |
| <button type="button" class="sample" data-sample="samples/melody.wav">melody.wav</button> | |
| <button type="button" class="sample" data-sample="samples/rich.wav">rich.wav</button> | |
| <button type="button" class="sample" data-sample="samples/test.wav">test.wav</button> | |
| </div> | |
| <details> | |
| <summary>Advanced options</summary> | |
| <div class="grid-2"> | |
| <div> | |
| <label for="model-size">Model size</label> | |
| <select id="model-size"> | |
| <option value="small" selected>small (CPU friendly)</option> | |
| <option value="medium">medium (needs GPU)</option> | |
| <option value="large">large (GPU only)</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label for="instruments">Instruments</label> | |
| <select id="instruments" multiple size="6"> | |
| <option value="all" selected>all (default)</option> | |
| <option value="piano">piano</option> | |
| <option value="drums">drums</option> | |
| <option value="bass">bass</option> | |
| <option value="guitar">guitar</option> | |
| <option value="vocals">vocals</option> | |
| <option value="other">other</option> | |
| </select> | |
| <p class="micro">Hold ⌘/Ctrl to select multiple. Pick "all" alone for unfiltered.</p> | |
| </div> | |
| </div> | |
| </details> | |
| <div class="row"> | |
| <button id="play-audio" class="ghost" type="button" disabled>▶ Play audio</button> | |
| <button id="transcribe" class="primary" type="button" disabled>Transcribe</button> | |
| <span id="audio-name" class="status muted">no audio loaded</span> | |
| </div> | |
| </section> | |
| <section class="card" id="output-card"> | |
| <h2>3. Result</h2> | |
| <div id="status-line" class="status muted">no transcription yet</div> | |
| <div class="result-grid"> | |
| <div class="result"> | |
| <h3>Piano roll</h3> | |
| <img id="roll" alt="Piano roll will appear here" /> | |
| </div> | |
| <div class="result"> | |
| <h3>Run summary</h3> | |
| <pre id="summary" class="code">(empty)</pre> | |
| </div> | |
| <div class="result"> | |
| <h3>MIDI</h3> | |
| <p id="midi-info" class="muted">(empty)</p> | |
| <audio id="midi-audio" controls></audio> | |
| <a id="midi-download" class="btn-link" download="muscriptor.mid" hidden>Download .mid</a> | |
| </div> | |
| <div class="result"> | |
| <h3>MusicXML</h3> | |
| <p id="musicxml-info" class="muted">(empty)</p> | |
| <a id="musicxml-download" class="btn-link" download="muscriptor.musicxml" hidden>Download .musicxml</a> | |
| </div> | |
| </div> | |
| </section> | |
| <section class="card" id="logs-card"> | |
| <details> | |
| <summary>Event log</summary> | |
| <pre id="log" class="code">(no events yet)</pre> | |
| </details> | |
| </section> | |
| </main> | |
| <footer> | |
| <p> | |
| Code: MIT · | |
| Weights: <a href="https://huggingface.co/MuScriptor/muscriptor-medium">CC BY-NC 4.0</a> · | |
| <a href="https://github.com/muscriptor/muscriptor">muscriptor on GitHub</a> | |
| </p> | |
| </footer> | |
| <script type="module" src="./app.js"></script> | |
| </body> | |
| </html> | |