composer / templates /index.html
Ron Au
feat(ui): Turn visualisation into audio controls
3deaf02
raw
history blame
5.72 kB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="description" content="" />
<link rel="icon" href="./wand.svg" />
<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-32be1fd5.css">
<link rel="modulepreload" href="/_app/start-2d5ecfbd.js">
<link rel="modulepreload" href="/_app/chunks/index-f8f7cfca.js">
<link rel="modulepreload" href="/_app/chunks/index-7a30815e.js">
<link rel="modulepreload" href="/_app/layout.svelte-3942c837.js">
<link rel="modulepreload" href="/_app/pages/index.svelte-f287d908.js">
</head>
<body>
<div>
<main class="svelte-1rfjlkw"><h1 class="svelte-1rfjlkw">Composer</h1>
<p class="heading svelte-1rfjlkw">A hundred thousand songs used to train. One AI model. Infinite compositions.</p>
<p class="svelte-1rfjlkw">This space contains a deep neural network model that can compose music. You can use it to generate music in
different styles, 4 bars at a time.
</p>
<p class="svelte-1rfjlkw">Developed by <a href="https://twitter.com/ronvoluted">Ron Au</a> and
<a href="https://twitter.com/DrTBehrens">Tristan Behrens</a>.
</p>
<p class="svelte-1rfjlkw">Have fun! And always feel free to send us some feedback and share your compositions!</p>
<section id="options" class="svelte-1rfjlkw"><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-1ikh8be"><legend class="svelte-1ikh8be">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-1ikh8be"><legend class="svelte-1ikh8be">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-18w38ow">Compose <img src="wand.svg" alt="Magic wand" class="svelte-18w38ow">
</button>
</main>
<script type="module" data-hydrate="1ijlo04">
import { start } from "/_app/start-2d5ecfbd.js";
start({
target: document.querySelector('[data-hydrate="1ijlo04"]').parentNode,
paths: {"base":"","assets":""},
session: {},
route: true,
spa: false,
trailing_slash: "never",
hydrate: {
status: 200,
error: null,
nodes: [
import("/_app/layout.svelte-3942c837.js"),
import("/_app/pages/index.svelte-f287d908.js")
],
params: {},
routeId: ""
}
});
</script></div>
</body>
</html>