tensorflow · dsmilkov · Oct 4, 2017 · Aug 12, 2017 · Aug 14, 2017 · Aug 14, 2017
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -16,6 +16,9 @@
   "[json]": {
     "editor.formatOnSave": false
   },
+  "[html]": {
+    "editor.formatOnSave": false
+  },
   "editor.formatOnSave": true,
   "clang-format.style": "Google",
   "files.insertFinalNewline": true,

diff --git a/demos/performance_rnn/images/magenta-logo-bottom-text2.png b/demos/performance_rnn/images/magenta-logo-bottom-text2.png
diff --git a/demos/performance_rnn/index.html b/demos/performance_rnn/index.html
@@ -0,0 +1,306 @@
+<html>
+<head>
+  <title>performance_rnn</title>
+  <style type="text/css">
+  #container,
+  body {
+      width: 100%;
+      height: 100%;
+      position: absolute;
+      top: 0;
+      left: 0;
+      margin: 0;
+      background-color: #fff;
+      font-family: Lato, sans-serif;
+      color: #7f7f7f;
+  }
+  #container #keyboard,
+  body #keyboard {
+    position: absolute;
+    left: 0px;
+    height: 20px;
+    top: 50%;
+    right: 0px;
+    bottom: 0px;
+    z-index: 10;
+    display: block;
+    height: auto;
+    margin-right: auto;
+    margin-left: auto;
+    -webkit-transform: translate(0px, -50%);
+    /*-ms-transform: translate(0px, -50%);*/
+    transform: translate(0px, -50%);
+      position: absolute;
+      bottom: -70px;
+      left: 0;
+      height: 100px
+  }
+  #container #glow,
+  #container #roll,
+  body #glow,
+  body #roll {
+    display: none;
+      width: 100%;
+      height: calc(100% - 130px);
+      position: absolute;
+      top: 0;
+      left: 0
+  }
+  #container #bottom,
+  body #bottom {
+      width: 100%;
+      height: 30px;
+      bottom: 0;
+      left: 0;
+      position: absolute;
+      background-color: #222;
+      box-shadow: inset 0 12px 30px -5px rgba(0, 0, 0, .75)
+  }
+  #container.focus {
+      -webkit-filter: none;
+      filter: none;
+      opacity: 1
+  }
+  #keyboard {
+      width: calc(100% - 20px);
+  }
+  #keyboard,
+  #keyboard .key {
+      position: absolute;
+      -webkit-user-select: none;
+      -moz-user-select: none;
+      -ms-user-select: none;
+      user-select: none
+  }
+  #keyboard .key {
+      height: calc(100% - 2 * 2px);
+      width: 10px;
+      left: 0;
+      top: 0
+  }
+  #keyboard .key.black {
+      z-index: 1;
+      height: 50%
+  }
+  #keyboard .key.black .fill {
+      background-color: #7f7f7f;
+
+      width: calc(100% - 8px);
+      left: 4px
+  }
+  #keyboard .key.white {
+      z-index: 0
+  }
+  #keyboard .key.white .fill {
+      background-color: #e5e5e5
+  }
+  #keyboard .key .fill {
+      border: 2px solid #d7d7d7;
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      pointer-events: none;
+      transition: background-color 0.6s;
+  }
+  #keyboard .key .fill.active {
+      background-color: #fff;
+      transition: background-color 0s;
+  }
+  #keyboard .key .highlight.ai {
+      background-color: #fff
+  }
+
+
+  #status {
+    position: absolute;
+    left: 0px;
+    height: 20px;
+    top: 50%;
+    right: 0px;
+    bottom: 0px;
+    z-index: 10;
+    display: block;
+    height: auto;
+    margin-right: auto;
+    margin-left: auto;
+    -webkit-transform: translate(0px, -50%);
+    /*-ms-transform: translate(0px, -50%);*/
+    transform: translate(0px, -50%);
+    font-size: 30px;
+    text-align: center;
+  }
+
+  .hidden {
+    visibility: hidden;
+
+  }
+  .image {
+    position: absolute;
+    left: 0px;
+    bottom: 0px;
+    margin-top: 40px;
+    margin-bottom: 40px;
+    margin-left: 40px;
+  }
+
+  .text-block {
+    position: absolute;
+    right: 40px;
+    bottom: 40px;
+    width: 450px;
+    font-size: 15px;
+    line-height: 25px;
+  }
+
+  .header {
+    font-size: 50px;
+    position: absolute;
+    width: 100%;
+    text-align: center;
+    margin-top: 20px;
+    font-weight: bold;
+  }
+
+  .link {
+    color: #6fc9c6;
+  }
+
+  #controls {
+    position: absolute;
+    width: 100%;
+    text-align: center;
+    margin-top: 100px;
+  }
+
+  .control {
+    display: inline-block;
+    vertical-align: middle;
+  }
+
+  .control .pitch {
+    width: 3em;
+  }
+
+  #conditioning-controls {
+    display: inline-block;
+  }
+
+  #conditioning-controls.inactive{
+    opacity: .2;
+  }
+
+  </style>
+</head>
+<body>
+  <div id="status">Loading...</div>
+  <div id="container"></div>
+  <div class="header">Performance RNN</div>
+  <div id="controls" class="hidden">
+    <div class="control" style="margin-right: 20px;">
+      Conditioning<br />
+      <input type="radio" name="conditioning" id="conditioning-on" checked>
+      On<br />
+      <input type="radio" name="conditioning" id="conditioning-off">
+      Off
+    </div>
+    <div id="conditioning-controls">
+      <div class="control" style="margin-right: 20px;">
+        Note Density<br/>
+        <input type="range" min="0" max="6" value="2" id="note-density"><br />
+        <span id="note-density-display"></span>
+      </div>
+      <div class="control">
+        Pitch Histogram<br/>
+        <div class="control">
+          <input class="pitch" id="pitch-c" type="number" min="0" value="2">
+          <br/>
+          C
+        </div>
+        <div class="control">
+          <input class="pitch" id="pitch-cs" type="number" min="0" value="0">
+          <br/>
+          C#
+        </div>
+        <div class="control">
+          <input class="pitch" id="pitch-d" type="number" min="0" value="1">
+          <br/>
+          D
+        </div>
+        <div class="control">
+          <input class="pitch" id="pitch-ds" type="number" min="0" value="0">
+          <br/>
+          D#
+        </div>
+        <div class="control">
+          <input class="pitch" id="pitch-e" type="number" min="0" value="1">
+          <br/>
+          E
+        </div>
+        <div class="control">
+          <input class="pitch" id="pitch-f" type="number" min="0" value="1">
+          <br/>
+          F
+        </div>
+        <div class="control">
+          <input class="pitch" id="pitch-fs" type="number" min="0" value="0">
+          <br/>
+          F#
+        </div>
+        <div class="control">
+          <input class="pitch" id="pitch-g" type="number" min="0" value="1">
+          <br/>
+          G
+        </div>
+        <div class="control">
+          <input class="pitch" id="pitch-gs" type="number" min="0" value="0">
+          <br/>
+          G#
+        </div>
+        <div class="control">
+          <input class="pitch" id="pitch-a" type="number" min="0" value="1">
+          <br/>
+          A
+        </div>
+        <div class="control">
+          <input class="pitch" id="pitch-as" type="number" min="0" value="0">
+          <br/>
+          A#
+        </div>
+        <div class="control">
+          <input class="pitch" id="pitch-b" type="number" min="0" value="1">
+          <br/>
+          B
+        </div>
+        <br />
+        <input type="button" value="C Major" id="c-major">
+        <input type="button" value="F Major" id="f-major">
+        <input type="button" value="D Minor" id="d-minor">
+        <input type="button" value="Whole Tone" id="whole-tone">
+        <input type="button" value="Pentatonic" id="pentatonic">
+        <input type="button" value="Preset 1" id="preset-1">
+        <input type="button" value="Preset 2" id="preset-2">
+        <br />
+        <br />
+        <input type="button" value="Save Preset 1" id="save-1">
+        <input type="button" value="Save Preset 2" id="save-2">
+      </div>
+    </div>
+    <div class="control" style="margin-right: 20px;">
+      <input type="button" value="Reset RNN" id="reset-rnn">
+    </div>
+  </div>
+  <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>
+  <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>
+  <script src="bundle.js"></script>
+  <script>
+(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
+ga('create', 'UA-46457317-8', 'auto');
+ga('send', 'pageview');
+  </script>
+</body>
+</html>