Spaces:
Runtime error
Runtime error
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <meta name="description" content="" /> | |
| <link rel="icon" href="./favicon.png" /> | |
| <link rel="preconnect" href="https://fonts.googleapis.com" /> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> | |
| <link href="https://fonts.googleapis.com/css2?family=Italiana&family=Lato&display=swap" rel="stylesheet" /> | |
| <link rel="stylesheet" href="./style.css" /> | |
| <link href="https://fonts.googleapis.com/css2?family=Italiana&family=Lato&display=swap" rel="stylesheet" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1" /> | |
| <meta http-equiv="content-security-policy" content=""> | |
| <link rel="stylesheet" href="/_app/assets/pages/index.svelte-de534b64.css"> | |
| <link rel="modulepreload" href="/_app/start-c175317f.js"> | |
| <link rel="modulepreload" href="/_app/chunks/index-bc271058.js"> | |
| <link rel="modulepreload" href="/_app/chunks/index-a16eaf24.js"> | |
| <link rel="modulepreload" href="/_app/layout.svelte-b226a993.js"> | |
| <link rel="modulepreload" href="/_app/pages/index.svelte-8e87fac9.js"> | |
| </head> | |
| <body> | |
| <div> | |
| <main class="svelte-1m4hhxp"><h1 class="svelte-1m4hhxp">Composer</h1> | |
| <p class="svelte-1m4hhxp">A hundred thousand songs used to train. One AI model. Infinite compositions.</p> | |
| <section id="options" class="svelte-1m4hhxp"><fieldset class="svelte-1r9pswz"><legend class="svelte-1r9pswz">Synthesizer</legend> | |
| <div class="grid svelte-1r9pswz"><label data-selected="false" class="svelte-1r9pswz"><div class="svelte-1r9pswz"><img src="piano.svg" alt="Piano" class="svelte-1r9pswz"></div> | |
| <input type="radio" value="piano" class="svelte-1r9pswz"> | |
| </label><label data-selected="false" class="svelte-1r9pswz"><div class="svelte-1r9pswz"><img src="chamber.svg" alt="Chamber Music" class="svelte-1r9pswz"></div> | |
| <input type="radio" value="chamber" class="svelte-1r9pswz"> | |
| </label><label data-selected="false" class="svelte-1r9pswz"><div class="svelte-1r9pswz"><img src="rock_and_metal.svg" alt="Rock and Metal" class="svelte-1r9pswz"></div> | |
| <input type="radio" value="rock_and_metal" class="svelte-1r9pswz"> | |
| </label><label data-selected="true" class="svelte-1r9pswz"><div class="svelte-1r9pswz"><img src="synth.svg" alt="Synthesizer" class="svelte-1r9pswz"></div> | |
| <input type="radio" value="synth" class="svelte-1r9pswz" checked> | |
| </label><label data-selected="false" class="svelte-1r9pswz"><div class="svelte-1r9pswz"><img src="church.svg" alt="Church" class="svelte-1r9pswz"></div> | |
| <input type="radio" value="church" class="svelte-1r9pswz"> | |
| </label><label data-selected="false" class="svelte-1r9pswz"><div class="svelte-1r9pswz"><img src="timpani_strings_harp.svg" alt="Timpani, Contrabass, Harp" class="svelte-1r9pswz"></div> | |
| <input type="radio" value="timpani_strings_harp" class="svelte-1r9pswz"> | |
| </label><label data-selected="false" class="svelte-1r9pswz"><div class="svelte-1r9pswz"><img src="country.svg" alt="Country" class="svelte-1r9pswz"></div> | |
| <input type="radio" value="country" class="svelte-1r9pswz"> | |
| </label></div> | |
| </fieldset> | |
| <div><fieldset class="svelte-1cq0vc2"><legend class="svelte-1cq0vc2">Note density</legend> | |
| <div class="options svelte-1m848u0"><label data-selected="false" class="svelte-1m848u0">Low | |
| <input type="radio" value="Low" class="svelte-1m848u0"> | |
| </label><label data-selected="true" class="svelte-1m848u0">Medium | |
| <input type="radio" value="Medium" class="svelte-1m848u0" checked> | |
| </label><label data-selected="false" class="svelte-1m848u0">High | |
| <input type="radio" value="High" class="svelte-1m848u0"> | |
| </label> | |
| <input type="radio" checked class="svelte-1m848u0"> | |
| </div></fieldset> | |
| </div> | |
| <div><fieldset class="svelte-nlqy14"><legend class="svelte-nlqy14">Temperature</legend> | |
| <div class="options svelte-1m848u0"><label data-selected="false" class="svelte-1m848u0">Low | |
| <input type="radio" value="Low" class="svelte-1m848u0"> | |
| </label><label data-selected="true" class="svelte-1m848u0">Medium | |
| <input type="radio" value="Medium" class="svelte-1m848u0" checked> | |
| </label><label data-selected="false" class="svelte-1m848u0">High | |
| <input type="radio" value="High" class="svelte-1m848u0"> | |
| </label><label data-selected="false" class="svelte-1m848u0">Very High | |
| <input type="radio" value="Very High" class="svelte-1m848u0"> | |
| </label> | |
| <input type="radio" checked class="svelte-1m848u0"> | |
| </div></fieldset> | |
| </div></section> | |
| <button class="svelte-aq73nm">Compose ✨</button> | |
| <audio controls src="download.wav" class="svelte-1e9isw9"></audio> | |
| <section class="svelte-1tzlz20"><h2>Visualised notes</h2> | |
| <img src="compose.png" alt="MIDI notes of composition" class="svelte-1tzlz20"> | |
| </section> | |
| <section class="svelte-1sitrxx"><h2>Tokenized notes</h2> | |
| <p>PIECE_START TRACK_START INST=DRUMS DENSITY=6 BAR_START NOTE_ON=35 NOTE_ON=42 TIME_DELTA=1 NOTE_OFF=35 NOTE_OFF=42 | |
| TIME_DELTA=1 NOTE_ON=42 TIME_DELTA=1 NOTE_OFF=42 TIME_DELTA=1 NOTE_ON=38 NOTE_ON=42 TIME_DELTA=1 NOTE_OFF=38 | |
| NOTE_OFF=42 TIME_DELTA=1 NOTE_ON=35 NOTE_ON=42 TIME_DELTA=1 NOTE_OFF=35 NOTE_OFF=42 TIME_DELTA=1 NOTE_ON=35 | |
| NOTE_ON=42 TIME_DELTA=1 NOTE_OFF=35 NOTE_OFF=42 TIME_DELTA=1 NOTE_ON=42 TIME_DELTA=1 NOTE_OFF=42 TIME_DELTA=1 | |
| NOTE_ON=38 NOTE_ON=42 TIME_DELTA=1 NOTE_OFF=38 NOTE_OFF=42 TIME_DELTA=1 NOTE_ON=35 NOTE_ON=42 TIME_DELTA=1 | |
| NOTE_OFF=35 NOTE_OFF=42 BAR_END BAR_START NOTE_ON=35 NOTE_ON=42 TIME_DELTA=1 NOTE_OFF=35 NOTE_OFF=42 TIME_DELTA=1 | |
| NOTE_ON=42 TIME_DELTA=1 NOTE_OFF=42 TIME_DELTA=1 NOTE_ON=38 NOTE_ON=42 TIME_DELTA=1 NOTE_OFF=38 NOTE_OFF=42 | |
| TIME_DELTA=1 NOTE_ON=35 NOTE_ON=42 TIME_DELTA=1 NOTE_OFF=35 NOTE_OFF=42 TIME_DELTA=1 NOTE_ON=35 NOTE_ON=42 | |
| TIME_DELTA=1 NOTE_OFF=35 NOTE_OFF=42 TIME_DELTA=1 NOTE_ON=42 TIME_DELTA=1 NOTE_OFF=42 TIME_DELTA=1 NOTE_ON=38 | |
| NOTE_ON=42 TIME_DELTA=1 NOTE_OFF=38 NOTE_OFF=42 TIME_DELTA=1 NOTE_ON=35 NOTE_ON=42 TIME_DELTA=1 NOTE_OFF=35 | |
| NOTE_OFF=42 BAR_END BAR_START NOTE_ON=35 NOTE_ON=42 TIME_DELTA=1 NOTE_OFF=35 NOTE_OFF=42 TIME_DELTA=1 NOTE_ON=42 | |
| TIME_DELTA=1 NOTE_OFF=42 TIME_DELTA=1 NOTE_ON=38 NOTE_ON=42 TIME_DELTA=1 NOTE_OFF=38 NOTE_OFF=42 TIME_DELTA=1 | |
| NOTE_ON=35 NOTE_ON=42 TIME_DELTA=1 NOTE_OFF=35 NOTE_OFF=42 TIME_DELTA=1 NOTE_ON=35 NOTE_ON=42 TIME_DELTA=1 | |
| NOTE_OFF=35 NOTE_OFF=42 TIME_DELTA=1 NOTE_ON=42 TIME_DELTA=1 NOTE_OFF=42 | |
| </p> | |
| </section> | |
| </main> | |
| <script type="module" data-hydrate="ebdsx2"> | |
| import { start } from "/_app/start-c175317f.js"; | |
| start({ | |
| target: document.querySelector('[data-hydrate="ebdsx2"]').parentNode, | |
| paths: {"base":"","assets":""}, | |
| session: {}, | |
| route: true, | |
| spa: false, | |
| trailing_slash: "never", | |
| hydrate: { | |
| status: 200, | |
| error: null, | |
| nodes: [ | |
| import("/_app/layout.svelte-b226a993.js"), | |
| import("/_app/pages/index.svelte-8e87fac9.js") | |
| ], | |
| params: {}, | |
| routeId: "" | |
| } | |
| }); | |
| </script></div> | |
| </body> | |
| </html> | |