Hugging Face's logo

Spaces:
ai-guru
/
composer
Runtime error

App Files Community
7
composer
File size: 7,022 Bytes 
b450589
 
ca5bd83
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
b450589
 
ca5bd83
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
b450589
 
ca5bd83
 
b450589
ca5bd83
b450589
 
 
 
 
 
 
 
 
ca5bd83
 
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
109
110
111
112
113
114
115
116
 
<!DOCTYPE html>
<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>