Spaces:
Sleeping
Sleeping
| <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> | |