Spaces:
Running
Running
File size: 5,736 Bytes
187bf9a 014c4ac 187bf9a 014c4ac 187bf9a 9eca51b 187bf9a 9eca51b 187bf9a 9eca51b 187bf9a 9eca51b 187bf9a 9eca51b 187bf9a 9eca51b 187bf9a bfc1297 187bf9a 9eca51b 187bf9a | 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 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 | <!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Theme Lab</title>
<link rel="stylesheet" href="/static/styles.css" />
</head>
<body>
<div class="app-shell">
<aside class="sidebar">
<div class="brand-row">
<div>
<h1>Theme Lab</h1>
<p id="statsLine">Loading corpus...</p>
</div>
<button id="healthButton" class="icon-button" title="Check backend">i</button>
</div>
<form id="searchForm" class="search-panel">
<label>
<span>Search</span>
<input id="searchInput" type="search" placeholder="composer, title, motif..." autocomplete="off" />
</label>
<div class="field-row">
<label>
<span>Composer</span>
<input id="composerInput" type="search" placeholder="Bach" list="composerSuggestions" autocomplete="off" />
<datalist id="composerSuggestions"></datalist>
</label>
<label>
<span>Key</span>
<select id="keyFilter">
<option value="">Any</option>
<option>C</option>
<option>G</option>
<option>D</option>
<option>A</option>
<option>E</option>
<option>F</option>
<option>Bb</option>
<option>Eb</option>
<option>Ab</option>
</select>
</label>
</div>
<div class="toolbar">
<button type="submit">Search</button>
<button id="clearSearch" type="button" class="secondary">Clear</button>
</div>
</form>
<div id="themeList" class="theme-list" aria-live="polite"></div>
<div class="pager">
<button id="prevPage" class="secondary">Prev</button>
<span id="pageLabel">0-0</span>
<button id="nextPage" class="secondary">Next</button>
</div>
</aside>
<main class="workspace">
<section class="detail-pane">
<div class="section-header">
<div>
<h2 id="detailTitle">Select a theme</h2>
<p id="detailMeta">Catalog, score, playback, and exports.</p>
</div>
<div class="toolbar">
<button id="playTheme" disabled>Play</button>
<button id="stopPlayback" class="secondary">Stop</button>
</div>
</div>
<div class="playback-row">
<label>
<span>Output</span>
<select id="midiOutputSelect">
<option value="">Browser audio</option>
</select>
</label>
<button id="refreshMidiOutputs" type="button" class="secondary">Scan MIDI</button>
</div>
<div class="score-surface">
<img id="scoreImage" alt="" />
<div id="emptyScore" class="empty-state">No score selected</div>
</div>
<div class="export-row" id="themeExports"></div>
<div id="themeDescription" class="description"></div>
</section>
<section class="generator-pane">
<div class="section-header">
<div>
<h2>Generate</h2>
<p id="generatorStatus">Ready</p>
</div>
<div class="toolbar">
<button id="generateButton">Generate</button>
</div>
</div>
<form id="generateForm" class="generator-grid">
<label>
<span>Engine</span>
<select id="engineSelect">
<option value="markov">Variable order</option>
<option value="transformer">Transformer</option>
</select>
</label>
<label class="generator-param common-param">
<span>Samples</span>
<input id="samplesInput" type="number" min="1" max="12" value="2" />
</label>
<label class="generator-param common-param">
<span>Length</span>
<input id="lengthInput" type="number" min="4" max="64" value="24" />
</label>
<label class="generator-param common-param">
<span>Key</span>
<select id="generateKey">
<option>C</option>
<option>G</option>
<option>D</option>
<option>A</option>
<option>F</option>
<option>Bb</option>
<option>Eb</option>
<option>Ab</option>
</select>
</label>
<label class="generator-param common-param">
<span>Seed</span>
<input id="seedInput" type="number" min="0" value="42" />
</label>
<label class="generator-param common-param">
<span>Endpoint</span>
<input id="endpointInput" type="number" min="0" max="5" step="0.1" value="1.0" />
</label>
<label class="generator-param markov-param">
<span>Order</span>
<input id="orderInput" type="number" min="1" max="3" value="3" />
</label>
<label class="generator-param transformer-param">
<span>Transformer steps</span>
<input id="stepsInput" type="number" min="10" max="1000" value="80" />
</label>
</form>
<div id="generatedList" class="generated-list"></div>
</section>
</main>
</div>
<script src="/static/app.js"></script>
</body>
</html>
|