Skip to content
This repository was archived by the owner on Aug 15, 2019. It is now read-only.

Commit f4a39f4

Browse files
cghawthornedsmilkov
cghawthorne
authored and
dsmilkov
committed
Add Performance RNN web demo (#171)
* performance_rnn * fixes * add decoding * adding piano to perf_rnn samples also plays indefinitely * Incorperated front-end into demo * added logo and text * Added js file to fix website frontend * cleaning up * more cleanup * fix * cleanup * lint * conditioned performance rnn * add presets, resetting, performance tweaks * fix * allow unconditioned performance * GCS-hosted files * performance improvements from smilkov * performance_rnn * fixes * add decoding * adding piano to perf_rnn samples also plays indefinitely * Incorperated front-end into demo * added logo and text * Added js file to fix website frontend * cleaning up * more cleanup * fix * cleanup * lint * conditioned performance rnn * add presets, resetting, performance tweaks * fix * allow unconditioned performance * GCS-hosted files * performance improvements from smilkov * ui tweaks * ssl * change to async gpu download * improve piano dom: don't re-add dom elements * analytics * update steps_per_gen to 10 and sync with deeplearnjs/master which gets the newest version * fix bug with outdated setTimeout() from previous loop * ui tweaks * ui tweak
1 parent 4abcff8 commit f4a39f4

File tree

6 files changed

+896
-0
lines changed

6 files changed

+896
-0
lines changed

‎.vscode/settings.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,9 @@
1616
"[json]": {
1717
"editor.formatOnSave": false
1818
},
19+
"[html]": {
20+
"editor.formatOnSave": false
21+
},
1922
"editor.formatOnSave": true,
2023
"clang-format.style": "Google",
2124
"files.insertFinalNewline": true,

‎demos/performance_rnn/images/magenta-logo-bottom-text2.png‎

102 KB
Loading

‎demos/performance_rnn/index.html‎

Lines changed: 306 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,306 @@
1+
<html>
2+
<head>
3+
<title>performance_rnn</title>
4+
<style type="text/css">
5+
#container,
6+
body {
7+
width: 100%;
8+
height: 100%;
9+
position: absolute;
10+
top: 0;
11+
left: 0;
12+
margin: 0;
13+
background-color: #fff;
14+
font-family: Lato, sans-serif;
15+
color: #7f7f7f;
16+
}
17+
#container #keyboard,
18+
body #keyboard {
19+
position: absolute;
20+
left: 0px;
21+
height: 20px;
22+
top: 50%;
23+
right: 0px;
24+
bottom: 0px;
25+
z-index: 10;
26+
display: block;
27+
height: auto;
28+
margin-right: auto;
29+
margin-left: auto;
30+
-webkit-transform: translate(0px, -50%);
31+
/*-ms-transform: translate(0px, -50%);*/
32+
transform: translate(0px, -50%);
33+
position: absolute;
34+
bottom: -70px;
35+
left: 0;
36+
height: 100px
37+
}
38+
#container #glow,
39+
#container #roll,
40+
body #glow,
41+
body #roll {
42+
display: none;
43+
width: 100%;
44+
height: calc(100% - 130px);
45+
position: absolute;
46+
top: 0;
47+
left: 0
48+
}
49+
#container #bottom,
50+
body #bottom {
51+
width: 100%;
52+
height: 30px;
53+
bottom: 0;
54+
left: 0;
55+
position: absolute;
56+
background-color: #222;
57+
box-shadow: inset 0 12px 30px -5px rgba(0, 0, 0, .75)
58+
}
59+
#container.focus {
60+
-webkit-filter: none;
61+
filter: none;
62+
opacity: 1
63+
}
64+
#keyboard {
65+
width: calc(100% - 20px);
66+
}
67+
#keyboard,
68+
#keyboard .key {
69+
position: absolute;
70+
-webkit-user-select: none;
71+
-moz-user-select: none;
72+
-ms-user-select: none;
73+
user-select: none
74+
}
75+
#keyboard .key {
76+
height: calc(100% - 2 * 2px);
77+
width: 10px;
78+
left: 0;
79+
top: 0
80+
}
81+
#keyboard .key.black {
82+
z-index: 1;
83+
height: 50%
84+
}
85+
#keyboard .key.black .fill {
86+
background-color: #7f7f7f;
87+
88+
width: calc(100% - 8px);
89+
left: 4px
90+
}
91+
#keyboard .key.white {
92+
z-index: 0
93+
}
94+
#keyboard .key.white .fill {
95+
background-color: #e5e5e5
96+
}
97+
#keyboard .key .fill {
98+
border: 2px solid #d7d7d7;
99+
position: absolute;
100+
top: 0;
101+
left: 0;
102+
width: 100%;
103+
height: 100%;
104+
pointer-events: none;
105+
transition: background-color 0.6s;
106+
}
107+
#keyboard .key .fill.active {
108+
background-color: #fff;
109+
transition: background-color 0s;
110+
}
111+
#keyboard .key .highlight.ai {
112+
background-color: #fff
113+
}
114+
115+
116+
#status {
117+
position: absolute;
118+
left: 0px;
119+
height: 20px;
120+
top: 50%;
121+
right: 0px;
122+
bottom: 0px;
123+
z-index: 10;
124+
display: block;
125+
height: auto;
126+
margin-right: auto;
127+
margin-left: auto;
128+
-webkit-transform: translate(0px, -50%);
129+
/*-ms-transform: translate(0px, -50%);*/
130+
transform: translate(0px, -50%);
131+
font-size: 30px;
132+
text-align: center;
133+
}
134+
135+
.hidden {
136+
visibility: hidden;
137+
138+
}
139+
.image {
140+
position: absolute;
141+
left: 0px;
142+
bottom: 0px;
143+
margin-top: 40px;
144+
margin-bottom: 40px;
145+
margin-left: 40px;
146+
}
147+
148+
.text-block {
149+
position: absolute;
150+
right: 40px;
151+
bottom: 40px;
152+
width: 450px;
153+
font-size: 15px;
154+
line-height: 25px;
155+
}
156+
157+
.header {
158+
font-size: 50px;
159+
position: absolute;
160+
width: 100%;
161+
text-align: center;
162+
margin-top: 20px;
163+
font-weight: bold;
164+
}
165+
166+
.link {
167+
color: #6fc9c6;
168+
}
169+
170+
#controls {
171+
position: absolute;
172+
width: 100%;
173+
text-align: center;
174+
margin-top: 100px;
175+
}
176+
177+
.control {
178+
display: inline-block;
179+
vertical-align: middle;
180+
}
181+
182+
.control .pitch {
183+
width: 3em;
184+
}
185+
186+
#conditioning-controls {
187+
display: inline-block;
188+
}
189+
190+
#conditioning-controls.inactive{
191+
opacity: .2;
192+
}
193+
194+
</style>
195+
</head>
196+
<body>
197+
<div id="status">Loading...</div>
198+
<div id="container"></div>
199+
<div class="header">Performance RNN</div>
200+
<div id="controls" class="hidden">
201+
<div class="control" style="margin-right: 20px;">
202+
Conditioning<br />
203+
<input type="radio" name="conditioning" id="conditioning-on" checked>
204+
On<br />
205+
<input type="radio" name="conditioning" id="conditioning-off">
206+
Off
207+
</div>
208+
<div id="conditioning-controls">
209+
<div class="control" style="margin-right: 20px;">
210+
Note Density<br/>
211+
<input type="range" min="0" max="6" value="2" id="note-density"><br />
212+
<span id="note-density-display"></span>
213+
</div>
214+
<div class="control">
215+
Pitch Histogram<br/>
216+
<div class="control">
217+
<input class="pitch" id="pitch-c" type="number" min="0" value="2">
218+
<br/>
219+
C
220+
</div>
221+
<div class="control">
222+
<input class="pitch" id="pitch-cs" type="number" min="0" value="0">
223+
<br/>
224+
C#
225+
</div>
226+
<div class="control">
227+
<input class="pitch" id="pitch-d" type="number" min="0" value="1">
228+
<br/>
229+
D
230+
</div>
231+
<div class="control">
232+
<input class="pitch" id="pitch-ds" type="number" min="0" value="0">
233+
<br/>
234+
D#
235+
</div>
236+
<div class="control">
237+
<input class="pitch" id="pitch-e" type="number" min="0" value="1">
238+
<br/>
239+
E
240+
</div>
241+
<div class="control">
242+
<input class="pitch" id="pitch-f" type="number" min="0" value="1">
243+
<br/>
244+
F
245+
</div>
246+
<div class="control">
247+
<input class="pitch" id="pitch-fs" type="number" min="0" value="0">
248+
<br/>
249+
F#
250+
</div>
251+
<div class="control">
252+
<input class="pitch" id="pitch-g" type="number" min="0" value="1">
253+
<br/>
254+
G
255+
</div>
256+
<div class="control">
257+
<input class="pitch" id="pitch-gs" type="number" min="0" value="0">
258+
<br/>
259+
G#
260+
</div>
261+
<div class="control">
262+
<input class="pitch" id="pitch-a" type="number" min="0" value="1">
263+
<br/>
264+
A
265+
</div>
266+
<div class="control">
267+
<input class="pitch" id="pitch-as" type="number" min="0" value="0">
268+
<br/>
269+
A#
270+
</div>
271+
<div class="control">
272+
<input class="pitch" id="pitch-b" type="number" min="0" value="1">
273+
<br/>
274+
B
275+
</div>
276+
<br />
277+
<input type="button" value="C Major" id="c-major">
278+
<input type="button" value="F Major" id="f-major">
279+
<input type="button" value="D Minor" id="d-minor">
280+
<input type="button" value="Whole Tone" id="whole-tone">
281+
<input type="button" value="Pentatonic" id="pentatonic">
282+
<input type="button" value="Preset 1" id="preset-1">
283+
<input type="button" value="Preset 2" id="preset-2">
284+
<br />
285+
<br />
286+
<input type="button" value="Save Preset 1" id="save-1">
287+
<input type="button" value="Save Preset 2" id="save-2">
288+
</div>
289+
</div>
290+
<div class="control" style="margin-right: 20px;">
291+
<input type="button" value="Reset RNN" id="reset-rnn">
292+
</div>
293+
</div>
294+
<div class="text-block"><a href="https://magenta.tensorflow.org/performance-rnn">Performance RNN</a> was trained in TensorFlow on MIDI from piano performances. It was then ported to run in the browser using only Javascript in the <a href="https://deeplearnjs.org/">deeplearn.js</a> environment.</div>
295+
<a href="https://magenta.tensorflow.org/"><img class="image" sizes="128px" src="images/magenta-logo-bottom-text2.png" srcset="images/magenta-logo-bottom-text2.png 500w, images/magenta-logo-bottom-text2.png 640w" width="128"></a>
296+
<script src="bundle.js"></script>
297+
<script>
298+
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
299+
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
300+
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
301+
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
302+
ga('create', 'UA-46457317-8', 'auto');
303+
ga('send', 'pageview');
304+
</script>
305+
</body>
306+
</html>

0 commit comments

Comments
 (0)