| <!doctype html> |
| <html lang="en"> |
| <head> |
| <meta charset="utf-8"/> |
| <meta name="viewport" content="width=device-width, initial-scale=1"/> |
| <title>Magenta RT — minimal</title> |
| <style> |
| body{font:15px/1.5 system-ui,sans-serif;max-width:560px;margin:60px auto;padding:0 20px;color:#3a2e22;} |
| h1{font-size:22px;} |
| input,button{font:inherit;padding:9px 14px;border-radius:10px;border:1px solid #e3d3bd;} |
| input{width:100%;margin:10px 0;} |
| button{cursor:pointer;background:#f97316;color:#fff;border:none;font-weight:700;} |
| button.stop{background:#fff;color:#3a2e22;border:1px solid #e3d3bd;} |
| #badge{display:inline-block;padding:5px 11px;border-radius:999px;font-size:12px;font-weight:800; |
| background:#ecfccb;color:#3f6212;border:1px solid #bef264;} |
| #badge.warn{background:#fef2f2;color:#b91c1c;border-color:#fca5a5;} |
| #status{color:#9a7b5a;margin-top:12px;min-height:18px;} |
| </style> |
| </head> |
| <body> |
| <h1>🍊 Magenta RT</h1> |
| <span id="badge">WebGPU</span> |
| <input id="styleInput" placeholder="style… e.g. lo-fi hip hop" value="lo-fi hip hop"/> |
| <button id="playBtn">▶ Play</button> |
| <button id="stopBtn" class="stop">■ Stop</button> |
| <div id="status">press Play to load…</div> |
|
|
| <script type="module"> |
| import { MagentaRT } from "./magenta-rt.mjs"; |
| |
| const badge=document.getElementById("badge"); |
| if(!navigator.gpu){ badge.className="warn"; badge.textContent="WebGPU not available"; } |
| |
| let mrt; |
| playBtn.onclick = async () => { |
| if(!mrt){ mrt = await MagentaRT.load({precision:"q4", onProgress:(f,l)=>status.textContent=`${l} ${(f*100)|0}%`}); } |
| await mrt.setStyle(styleInput.value || "lo-fi hip hop"); |
| await mrt.play(); |
| status.textContent="playing — edit the style live"; |
| }; |
| styleInput.onchange = () => mrt && mrt.setStyle(styleInput.value); |
| stopBtn.onclick = () => { if(mrt){ mrt.stop(); status.textContent="stopped"; } }; |
| </script> |
| </body> |
| </html> |
|
|
