Spaces:
Running on Zero
Running on Zero
File size: 4,332 Bytes
4bada97 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 | <section class="msv-root" data-state="idle" aria-label="MuScriptor transcription result">
<header class="msv-topbar">
<div class="msv-heading">
<p class="msv-eyebrow">
<span class="msv-status-dot" aria-hidden="true"></span>
<span data-field="state-label">Ready for audio</span>
</p>
<h2 class="msv-title" data-field="audio-name">Your transcription</h2>
<p class="msv-subtitle" data-field="status">Upload a recording to reveal its notes and instruments.</p>
</div>
<div class="msv-actions" aria-label="Playback and download controls">
<button class="msv-button" type="button" data-action="play" aria-label="Play transcription" title="Play transcription" disabled>
<svg viewBox="0 0 20 20" aria-hidden="true">
<path d="M6.8 4.7 15 10l-8.2 5.3V4.7Z"></path>
</svg>
</button>
<button class="msv-button" type="button" data-action="stop" aria-label="Stop playback" title="Stop playback" disabled>
<svg viewBox="0 0 20 20" aria-hidden="true">
<rect x="5.5" y="5.5" width="9" height="9" rx="1"></rect>
</svg>
</button>
<a class="msv-download" data-action="download-full" aria-label="Download full MIDI" aria-disabled="true" tabindex="-1">
<svg viewBox="0 0 20 20" aria-hidden="true">
<path d="M10 3.5v9m0 0 3.2-3.2M10 12.5 6.8 9.3M4.5 15.7h11"></path>
</svg>
<span>Full MIDI</span>
</a>
</div>
</header>
<div class="msv-progress-wrap" data-region="progress" hidden>
<div class="msv-progress-meta">
<span class="msv-progress-copy" data-field="progress-copy">Preparing inference…</span>
<span class="msv-progress-value" data-field="progress-value">0%</span>
</div>
<div class="msv-progress-track" role="progressbar" aria-label="Transcription progress" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0">
<div class="msv-progress-bar" data-field="progress-bar"></div>
</div>
</div>
<div class="msv-stats" aria-label="Transcription statistics">
<div class="msv-stat">
<span class="msv-stat-label">Duration</span>
<span class="msv-stat-value" data-field="duration">—</span>
</div>
<div class="msv-stat">
<span class="msv-stat-label">Notes</span>
<span class="msv-stat-value" data-field="note-count">—</span>
</div>
<div class="msv-stat">
<span class="msv-stat-label">Tracks</span>
<span class="msv-stat-value" data-field="track-count">—</span>
</div>
<div class="msv-stat">
<span class="msv-stat-label">Elapsed</span>
<span class="msv-stat-value" data-field="elapsed">—</span>
</div>
</div>
<div class="msv-roll-shell">
<div class="msv-roll-labelbar">
<span class="msv-roll-label">Piano roll</span>
<span class="msv-roll-hint">Scroll horizontally to explore</span>
</div>
<div class="msv-roll-scroll" data-region="roll-scroll" tabindex="0" aria-label="Scrollable piano roll">
<div class="msv-roll-stage" data-region="roll-stage">
<canvas class="msv-roll-canvas" data-canvas="notes" role="img" aria-label="Color-coded transcription piano roll"></canvas>
<canvas class="msv-cursor-canvas" data-canvas="cursor" aria-hidden="true"></canvas>
</div>
<div class="msv-empty" data-region="empty">
<div class="msv-empty-inner">
<div class="msv-empty-icon" aria-hidden="true">
<svg viewBox="0 0 24 24">
<path d="M5 15.5V8.7m3 9.1V5.6m3 11.1V9.2m3 7.8V3.8m3 12.4V7.4m3 7.3v-4.1"></path>
</svg>
</div>
<p class="msv-empty-title" data-field="empty-title">A score will appear here</p>
<p class="msv-empty-copy" data-field="empty-copy">MuScriptor separates notes into individual, color-coded instrument tracks.</p>
</div>
</div>
</div>
</div>
<div class="msv-section-heading">
<h3>Instrument tracks</h3>
<span class="msv-track-count" data-field="track-summary">No tracks yet</span>
</div>
<div class="msv-track-list" data-region="tracks" aria-label="Instrument tracks">
<div class="msv-track-empty">Tracks will appear after transcription.</div>
</div>
<p class="msv-sr-only" data-region="announcer" role="status" aria-live="polite"></p>
</section>
|