Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <title>Web DAW – AI Music Idea Helper (Transformers.js Demo)</title> | |
| <meta name="viewport" content="width=device-width,initial-scale=1" /> | |
| <link rel="stylesheet" href="style.css" /> | |
| </head> | |
| <body> | |
| <header class="app-header"> | |
| <div class="logo-title"> | |
| <div class="logo-dot"></div> | |
| <div> | |
| <h1>Web DAW – AI Music Idea Helper</h1> | |
| <p class="subtitle"> | |
| Browser-based multi-track sketchpad with AI-powered composition ideas (Transformers.js) | |
| </p> | |
| </div> | |
| </div> | |
| <nav class="header-links"> | |
| <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" rel="noopener"> | |
| Built with anycoder | |
| </a> | |
| <a href="https://huggingface.co/docs/transformers.js/index" target="_blank" rel="noopener"> | |
| transformers.js docs | |
| </a> | |
| </nav> | |
| </header> | |
| <main class="app-main"> | |
| <section class="left-panel"> | |
| <section class="ai-panel card"> | |
| <h2>AI Song Starter</h2> | |
| <p class="help-text"> | |
| Use a local Transformers.js model (running entirely in your browser) to generate text prompts | |
| like chord ideas, drum patterns, or arrangement suggestions. Paste the results into your | |
| tracks and tweak them. | |
| </p> | |
| <div class="field"> | |
| <label for="ai-genre">Genre / Style</label> | |
| <input id="ai-genre" type="text" placeholder="lofi hip hop, drill, EDM, pop, trap..." /> | |
| </div> | |
| <div class="field"> | |
| <label for="ai-mood">Mood / Vibe</label> | |
| <input id="ai-mood" type="text" placeholder="chill, dark, uplifting, emotional, aggressive..." /> | |
| </div> | |
| <div class="field"> | |
| <label for="ai-task">What do you want?</label> | |
| <select id="ai-task"> | |
| <option value="chords">Chord progression idea</option> | |
| <option value="drums">Drum pattern idea</option> | |
| <option value="melody">Melody / hook idea</option> | |
| <option value="arrangement">Arrangement suggestion (A/B sections)</option> | |
| <option value="mix">Mixing suggestions</option> | |
| </select> | |
| </div> | |
| <button id="generate-idea-btn" class="primary-btn" disabled> | |
| Load model… | |
| </button> | |
| <div id="model-status" class="status status-loading"> | |
| Loading Transformers.js in a Web Worker… | |
| </div> | |
| <div id="model-progress" class="progress-container hidden"> | |
| <div class="progress-label"> | |
| Model download: | |
| <span id="model-progress-text">0%</span> | |
| </div> | |
| <div class="progress-bar"> | |
| <div id="model-progress-bar-inner"></div> | |
| </div> | |
| </div> | |
| <div id="ai-error" class="status status-error hidden"></div> | |
| <label for="ai-output">AI Output (editable)</label> | |
| <textarea id="ai-output" rows="7" placeholder="AI suggestions will appear here. You can edit and copy them into your tracks."></textarea> | |
| <div class="ai-quick-examples"> | |
| <span>Quick examples:</span> | |
| <button class="chip" data-example="lofi hip hop|chill|chords">Lofi chords</button> | |
| <button class="chip" data-example="trap|dark|drums">Trap drums</button> | |
| <button class="chip" data-example="house|uplifting|arrangement">House arrangement</button> | |
| </div> | |
| </section> | |
| <section class="project-panel card"> | |
| <h2>Project Notes & Export</h2> | |
| <div class="field"> | |
| <label for="project-title">Project title</label> | |
| <input id="project-title" type="text" placeholder="My Web3 Beat v1" /> | |
| </div> | |
| <div class="field"> | |
| <label for="project-bpm">Tempo (BPM)</label> | |
| <input id="project-bpm" type="number" min="60" max="200" value="90" /> | |
| </div> | |
| <div class="field"> | |
| <label for="project-key">Key</label> | |
| <input id="project-key" type="text" placeholder="C minor, F# dorian…" /> | |
| </div> | |
| <button id="export-json-btn" class="secondary-btn">Export sketch as JSON</button> | |
| <p class="small-text"> | |
| This demo exports a JSON snapshot of the sequencer state (timeline, grid, and notes), | |
| representing how a real cloud sync API might serialize projects. | |
| </p> | |
| <a id="download-link" class="hidden"></a> | |
| </section> | |
| </section> | |
| <section class="daw-panel card"> | |
| <div class="daw-header"> | |
| <h2>Sequencer & Step Grid</h2> | |
| <div class="transport"> | |
| <button id="play-btn" class="icon-btn">▶</button> | |
| <button id="stop-btn" class="icon-btn">■</button> | |
| <label class="checkbox-inline"> | |
| <input type="checkbox" id="metronome-toggle" checked /> | |
| Metronome | |
| </label> | |
| </div> | |
| </div> | |
| <div class="timeline-meta"> | |
| <div>Bars: <span id="bars-count">4</span></div> | |
| <div>Resolution: 16th notes</div> | |
| <div>Grid snap: On</div> | |
| </div> | |
| <div class="tracks-container"> | |
| <div class="tracks-sidebar"> | |
| <div class="track-strip" data-track="0"> | |
| <div class="track-header"> | |
| <div class="track-name">Kick</div> | |
| <div class="track-controls"> | |
| <button class="mute-btn" data-track="0">M</button> | |
| <button class="solo-btn" data-track="0">S</button> | |
| </div> | |
| </div> | |
| <div class="track-faders"> | |
| <label>Vol</label> | |
| <input type="range" min="0" max="1" step="0.01" value="0.9" data-type="gain" data-track="0" /> | |
| </div> | |
| </div> | |
| <div class="track-strip" data-track="1"> | |
| <div class="track-header"> | |
| <div class="track-name">Snare</div> | |
| <div class="track-controls"> | |
| <button class="mute-btn" data-track="1">M</button> | |
| <button class="solo-btn" data-track="1">S</button> | |
| </div> | |
| </div> | |
| <div class="track-faders"> | |
| <label>Vol</label> | |
| <input type="range" min="0" max="1" step="0.01" value="0.8" data-type="gain" data-track="1" /> | |
| </div> | |
| </div> | |
| <div class="track-strip" data-track="2"> | |
| <div class="track-header"> | |
| <div class="track-name">Hi-hat</div> | |
| <div class="track-controls"> | |
| <button class="mute-btn" data-track="2">M</button> | |
| <button class="solo-btn" data-track="2">S</button> | |
| </div> | |
| </div> | |
| <div class="track-faders"> | |
| <label>Vol</label> | |
| <input type="range" min="0" max="1" step="0.01" value="0.7" data-type="gain" data-track="2" /> | |
| </div> | |
| </div> | |
| <div class="track-strip" data-track="3"> | |
| <div class="track-header"> | |
| <div class="track-name">Bass (AI idea)</div> | |
| <div class="track-controls"> | |
| <button class="mute-btn" data-track="3">M</button> | |
| <button class="solo-btn" data-track="3">S</button> | |
| </div> | |
| </div> | |
| <div class="track-faders"> | |
| <label>Vol</label> | |
| <input type="range" min="0" max="1" step="0.01" value="0.8" data-type="gain" data-track="3" /> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="grid-and-editors"> | |
| <!-- Step sequencer grid --> | |
| <div class="step-grid-container"> | |
| <div class="step-grid-header"> | |
| <div class="label">Step Sequencer (16-step loop)</div> | |
| <button id="clear-grid-btn" class="secondary-btn small">Clear</button> | |
| </div> | |
| <div id="step-grid" class="step-grid"></div> | |
| </div> | |
| <!-- Simple "piano roll" for melody track (bar-based, very simplified) --> | |
| <div class="piano-roll-container"> | |
| <div class="piano-roll-header"> | |
| <div class="label">Melody Sketch (text based)</div> | |
| </div> | |
| <textarea id="melody-notes" rows="4" | |
| placeholder="Use this area to convert AI chord/melody ideas into a structure, e.g.: | |
| Bar 1: Cmin - Gmin | |
| Bar 2: Ebmaj - Fmin | |
| Bar 3: Abmaj - Gmin | |
| Bar 4: turnaround…" | |
| ></textarea> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="footer-hint"> | |
| This is a focused demo: Web Audio is used for a simple 4‑track drum loop engine, | |
| while Transformers.js (via Web Worker) powers AI text suggestions for chords, drums, | |
| and mix tips – matching the “AI-powered creativity” section of the spec. | |
| In a full app, this engine would be extended into the multi-track DAW, cloud, | |
| and collaboration architecture you described. | |
| </div> | |
| </section> | |
| </main> | |
| <script src="index.js" type="module"></script> | |
| </body> | |
| </html> |