Spaces:
Running
Running
File size: 9,001 Bytes
ab30f71 fb2c7f1 ab30f71 fb2c7f1 ab30f71 fb2c7f1 ab30f71 fb2c7f1 ab30f71 fb2c7f1 ab30f71 fb2c7f1 ab30f71 fb2c7f1 ab30f71 fb2c7f1 ab30f71 fb2c7f1 ab30f71 fb2c7f1 ab30f71 fb2c7f1 ab30f71 fb2c7f1 ab30f71 fb2c7f1 ab30f71 fb2c7f1 ab30f71 fb2c7f1 ab30f71 fb2c7f1 ab30f71 fb2c7f1 ab30f71 fb2c7f1 ab30f71 fb2c7f1 ab30f71 fb2c7f1 ab30f71 fb2c7f1 ab30f71 fb2c7f1 ab30f71 fb2c7f1 |
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 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 |
<!doctype html>
<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> |