File size: 6,708 Bytes
b450589
 
ca5bd83
 
 
49ece12
ca5bd83
 
 
49ece12
ca5bd83
 
282844c
ca5bd83
075b025
 
 
 
 
 
ca5bd83
 
 
b450589
 
3deaf02
075b025
3deaf02
 
 
a8ab240
 
3deaf02
 
 
075b025
ca5bd83
075b025
ca5bd83
075b025
ca5bd83
075b025
ca5bd83
075b025
ca5bd83
075b025
ca5bd83
075b025
ca5bd83
075b025
 
ca5bd83
 
3deaf02
 
 
ca5bd83
3deaf02
ca5bd83
3deaf02
ca5bd83
 
 
 
3deaf02
 
 
ca5bd83
3deaf02
ca5bd83
3deaf02
ca5bd83
3deaf02
ca5bd83
 
 
 
075b025
3deaf02
 
 
ca5bd83
b450589
 
075b025
 
b450589
075b025
 
b450589
 
 
 
 
 
 
 
075b025
 
b450589
 
 
 
 
 
ca5bd83
b450589
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
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="description" content="" />
    <link rel="icon" href="https://hf.space/embed/ai-guru/composer/static/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="https://hf.space/embed/ai-guru/composer/static/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" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/4.3.2/iframeResizer.contentWindow.min.js"></script>
    <meta http-equiv="content-security-policy" content="">
	<link rel="stylesheet" href="https://hf.space/embed/ai-guru/composer/static/_app/assets/pages/index.svelte-10d60411.css">
	<link rel="modulepreload" href="https://hf.space/embed/ai-guru/composer/static/_app/start-5e34eb6b.js">
	<link rel="modulepreload" href="https://hf.space/embed/ai-guru/composer/static/_app/chunks/index-f8f7cfca.js">
	<link rel="modulepreload" href="https://hf.space/embed/ai-guru/composer/static/_app/chunks/index-7a30815e.js">
	<link rel="modulepreload" href="https://hf.space/embed/ai-guru/composer/static/_app/layout.svelte-3942c837.js">
	<link rel="modulepreload" href="https://hf.space/embed/ai-guru/composer/static/_app/pages/index.svelte-b34d5edf.js">
  </head>
  <body>
    <div>


<main class="svelte-1rfjlkw"><h1 class="svelte-1rfjlkw">Composer</h1>
  <p class="heading svelte-1rfjlkw">Trained on fifteen thousand songs. 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" rel="noopener" target="_blank">Ron Au</a> and
    <a href="https://twitter.com/DrTBehrens" rel="noopener" target="_blank">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="static/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="static/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="static/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="static/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="static/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="static/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="static/country.svg" alt="Country" class="svelte-1r9pswz"></div>
        <input type="radio" value="country" class="svelte-1r9pswz">
      </label><label data-selected="false" class="svelte-1r9pswz"><div class="svelte-1r9pswz"><img src="static/reggae.svg" alt="Reggae-esque" class="svelte-1r9pswz"></div>
        <input type="radio" value="reggae" 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="static/wand.svg" alt="Magic wand" class="svelte-18w38ow">
</button>
  
  
</main>


		<script type="module" data-hydrate="o4uw90">
		import { start } from "https://hf.space/embed/ai-guru/composer/static/_app/start-5e34eb6b.js";
		start({
			target: document.querySelector('[data-hydrate="o4uw90"]').parentNode,
			paths: {"base":"/static","assets":"/static"},
			session: {},
			route: true,
			spa: false,
			trailing_slash: "never",
			hydrate: {
				status: 200,
				error: null,
				nodes: [
					import("https://hf.space/embed/ai-guru/composer/static/_app/layout.svelte-3942c837.js"),
						import("https://hf.space/embed/ai-guru/composer/static/_app/pages/index.svelte-b34d5edf.js")
				],
				params: {},
				routeId: ""
			}
		});
	</script></div>
  </body>
</html>