CINXE.COM

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Demos</title> <meta name="description" content="A list of apps powered by Magenta models including fun toys, creative applications, research notebooks, and professional-grade tools that will benefit a wide...">  <meta property="og:image" content="https://magenta.tensorflow.org/assets/demos/demogrid.png"> <meta property="og:title" content="Demos"> <meta property="og:description" content="A list of apps powered by Magenta models including fun toys, creative applications, research notebooks, and professional-grade tools that will benefit a wide..."> <meta property="og:url" content="https://magenta.tensorflow.org/demos/"> <meta property="og:site_name" content="Magenta">  <meta name="twitter:card" content="summary"> <meta name="twitter:title" content="Demos"> <meta name="twitter:description" content="A list of apps powered by Magenta models including fun toys, creative applications, research notebooks, and professional-grade tools that will benefit a wide..."> <meta name="twitter:image" content="https://magenta.tensorflow.org/assets/demos/demogrid.png"> <link rel="stylesheet" href="/css/main.css"> <link rel="canonical" href="https://magenta.tensorflow.org/demos/"> <link rel="alternate" type="application/rss+xml" title="Magenta" href="https://magenta.tensorflow.org/feed.xml"> <link href="https://fonts.googleapis.com/css?family=Google+Sans:+400,500,700" media="all" rel="stylesheet"> <script src="//www.google.com/js/gweb/analytics/autotrack.js"></script> <script> new gweb.analytics.AutoTrack({ profile: 'UA-80107903-1' }); </script> </head> <body> <div class="scrim" onclick="document.body.classList.toggle('drawer-opened', false)"></div> <header> <div class="top-bar background"> <div class="top-bar-content"> <div class="logo"> <a href="/"><img src="/assets/magenta-logo.png" height="70" alt="magenta logo"></a> </div> <nav> <button class="menu-button" onclick="document.body.classList.toggle('drawer-opened', true)" aria-label="open nav menu"> <svg viewBox="0 0 18 15"> <path fill="#424242" d="M18,1.484c0,0.82-0.665,1.484-1.484,1.484H1.484C0.665,2.969,0,2.304,0,1.484l0,0C0,0.665,0.665,0,1.484,0 h15.031C17.335,0,18,0.665,18,1.484L18,1.484z"/> <path fill="#424242" d="M18,7.516C18,8.335,17.335,9,16.516,9H1.484C0.665,9,0,8.335,0,7.516l0,0c0-0.82,0.665-1.484,1.484-1.484 h15.031C17.335,6.031,18,6.696,18,7.516L18,7.516z"/> <path fill="#424242" d="M18,13.516C18,14.335,17.335,15,16.516,15H1.484C0.665,15,0,14.335,0,13.516l0,0 c0-0.82,0.665-1.484,1.484-1.484h15.031C17.335,12.031,18,12.696,18,13.516L18,13.516z"/> </svg> </button> <div class="links"> <a href="/get-started">Get Started</a> <a href="/studio">Studio</a> <a href="/ddsp-vst">DDSP-VST</a> <a href="/demos">Demos</a> <a href="/blog">Blog</a> <a href="/research">Research</a> <a href="/talks">Talks</a> <a href="/community">Community</a> </div> </nav> </div> </div> </header> <div class="drawer"> <div class="drawer-content"> <a href="/get-started">Get Started</a> <a href="/studio">Studio</a> <a href="/ddsp-vst">DDSP-VST</a> <a href="/demos">Demos</a> <a href="/blog">Blog</a> <a href="/research">Research</a> <a href="/talks">Talks</a> <a href="/community">Community</a> </div> </div> <div class="main"> <section class="white"> <div class="content single"> <h1>Demos</h1> <p>A primary goal of the Magenta project is to demonstrate that machine learning can be used to enable and enhance the creative potential of all people. </p> <p>The demos and apps listed on this page illustrate the work of many people--<i>both inside and outside of Google</i>--to build fun toys, creative applications, research notebooks, and professional-grade tools that will benefit a wide range of users. </p> </div> </section> <section class="grey"> <div class="content single"> <h2 class="section-title">Collections</h2> <div class="card-wrapper collections"> <a href="/demos/web/"> <div class="card"> <div class="image short"> <video autoplay loop muted playsinline alt="screen capture of a web demo"> <source src="/assets/music_vae/beat-blender.mp4" type="video/mp4"> </video> <div class="overlay"> <p>Web demos built with Magenta.js</p> </div> </div> <div class="title">Magenta.js</div> </div> </a> <a href="/demos/community/"> <div class="card"> <div class="image short"> <img src="/assets/connecting_with_magenta_js/teropa.gif" alt="screenshot of community built apps"> <div class="overlay"> <p>Community contributions using Magenta models</p> </div> </div> <div class="title">Community contributions</div> </div> </a> <a href="/demos/colab/"> <div class="card"> <div class="image short"> <img src="/assets/colab/musicvae.png" alt="screenshot of a colab"> <div class="overlay"> <p>Colab notebooks to interact with Magenta Python</p> </div> </div> <div class="title">Colab Notebooks</div> </div> </a> <a href="/demos/native/"> <div class="card"> <div class="image short"> <video autoplay loop muted playsinline alt="screen capture of a MaxForLive Device"> <source src="/assets/demos/nsynth_max.mp4" type="video/mp4"> </video> <div class="overlay"> <p>Native applications</p> </div> </div> <div class="title">Native applications</div> </div> </a> <a href="/demos/hardware/"> <div class="card"> <div class="image short"> <video autoplay loop muted playsinline alt="screen capture of the nsynth super"> <source src="/assets/demos/nsynth_super.mp4" type="video/mp4"> </video> <div class="overlay"> <p>Applications using specialized hardware</p> </div> </div> <div class="title">Hardware</div> </div> </a> </div> </div> </section> <section class="white"> <div class="content single"> <h2 class="section-title">Featured</h2> <div class="card-wrapper"> <div class="card"> <div class="image"> <video autoplay loop muted playsinline alt="overview of Listen to Transformer"> <source src="/assets/listen-to-transformer/spin.mp4" type="video/mp4"> </video> <div class="overlay"> <a href=https://g.co/magenta/listen>play</a> <a href=/listen-to-transformer>read blog</a> <a href=https://github.com/magenta/listen-to-transformer>see code</a> </div> </div> <div class="title">Listen to Transformer</div> <div class="author"> <a class="inverted" href=https://meowni.ca/>Monica Dinculescu</a> <a class="inverted" href="https://github.com/notwaldorf" alt="github logo"><span class="icon icon--github"><svg viewBox="0 0 16 16"><path d="M7.999,0.431c-4.285,0-7.76,3.474-7.76,7.761 c0,3.428,2.223,6.337,5.307,7.363c0.388,0.071,0.53-0.168,0.53-0.374c0-0.184-0.007-0.672-0.01-1.32 c-2.159,0.469-2.614-1.04-2.614-1.04c-0.353-0.896-0.862-1.135-0.862-1.135c-0.705-0.481,0.053-0.472,0.053-0.472 c0.779,0.055,1.189,0.8,1.189,0.8c0.692,1.186,1.816,0.843,2.258,0.645c0.071-0.502,0.271-0.843,0.493-1.037 C4.86,11.425,3.049,10.76,3.049,7.786c0-0.847,0.302-1.54,0.799-2.082C3.768,5.507,3.501,4.718,3.924,3.65 c0,0,0.652-0.209,2.134,0.796C6.677,4.273,7.34,4.187,8,4.184c0.659,0.003,1.323,0.089,1.943,0.261 c1.482-1.004,2.132-0.796,2.132-0.796c0.423,1.068,0.157,1.857,0.077,2.054c0.497,0.542,0.798,1.235,0.798,2.082 c0,2.981-1.814,3.637-3.543,3.829c0.279,0.24,0.527,0.713,0.527,1.437c0,1.037-0.01,1.874-0.01,2.129 c0,0.208,0.14,0.449,0.534,0.373c3.081-1.028,5.302-3.935,5.302-7.362C15.76,3.906,12.285,0.431,7.999,0.431z"/></svg> </span><span class="username">notwaldorf</span></a> <a class="inverted" href="https://twitter.com/notwaldorf" alt="twitter logo"><span class="icon icon--twitter"><svg viewBox="0 0 16 16"><path d="M15.969,3.058c-0.586,0.26-1.217,0.436-1.878,0.515c0.675-0.405,1.194-1.045,1.438-1.809c-0.632,0.375-1.332,0.647-2.076,0.793c-0.596-0.636-1.446-1.033-2.387-1.033c-1.806,0-3.27,1.464-3.27,3.27 c0,0.256,0.029,0.506,0.085,0.745C5.163,5.404,2.753,4.102,1.14,2.124C0.859,2.607,0.698,3.168,0.698,3.767 c0,1.134,0.577,2.135,1.455,2.722C1.616,6.472,1.112,6.325,0.671,6.08c0,0.014,0,0.027,0,0.041c0,1.584,1.127,2.906,2.623,3.206 C3.02,9.402,2.731,9.442,2.433,9.442c-0.211,0-0.416-0.021-0.615-0.059c0.416,1.299,1.624,2.245,3.055,2.271 c-1.119,0.877-2.529,1.4-4.061,1.4c-0.264,0-0.524-0.015-0.78-0.046c1.447,0.928,3.166,1.469,5.013,1.469 c6.015,0,9.304-4.983,9.304-9.304c0-0.142-0.003-0.283-0.009-0.423C14.976,4.29,15.531,3.714,15.969,3.058z"/></svg> </span><span class="username">notwaldorf</span></a> </div> <div class="tagline"><p>An app to make it easier to explore and curate samples from a piano transformer.</p> </div> </div> <div class="card"> <div class="image"> <video autoplay loop muted playsinline alt="overview of DrumBot"> <source src="/assets/drumbot/drumbot.mp4" type="video/mp4"> </video> <div class="overlay"> <a href=https://drumbot.glitch.me>play</a> <a href=/drumbot>read blog</a> <a href=https://github.com/magenta/drumbot>see code</a> </div> </div> <div class="title">DrumBot</div> <div class="author"> <a class="inverted" href=https://meowni.ca/>Monica Dinculescu</a> <a class="inverted" href="https://github.com/notwaldorf" alt="github logo"><span class="icon icon--github"><svg viewBox="0 0 16 16"><path d="M7.999,0.431c-4.285,0-7.76,3.474-7.76,7.761 c0,3.428,2.223,6.337,5.307,7.363c0.388,0.071,0.53-0.168,0.53-0.374c0-0.184-0.007-0.672-0.01-1.32 c-2.159,0.469-2.614-1.04-2.614-1.04c-0.353-0.896-0.862-1.135-0.862-1.135c-0.705-0.481,0.053-0.472,0.053-0.472 c0.779,0.055,1.189,0.8,1.189,0.8c0.692,1.186,1.816,0.843,2.258,0.645c0.071-0.502,0.271-0.843,0.493-1.037 C4.86,11.425,3.049,10.76,3.049,7.786c0-0.847,0.302-1.54,0.799-2.082C3.768,5.507,3.501,4.718,3.924,3.65 c0,0,0.652-0.209,2.134,0.796C6.677,4.273,7.34,4.187,8,4.184c0.659,0.003,1.323,0.089,1.943,0.261 c1.482-1.004,2.132-0.796,2.132-0.796c0.423,1.068,0.157,1.857,0.077,2.054c0.497,0.542,0.798,1.235,0.798,2.082 c0,2.981-1.814,3.637-3.543,3.829c0.279,0.24,0.527,0.713,0.527,1.437c0,1.037-0.01,1.874-0.01,2.129 c0,0.208,0.14,0.449,0.534,0.373c3.081-1.028,5.302-3.935,5.302-7.362C15.76,3.906,12.285,0.431,7.999,0.431z"/></svg> </span><span class="username">notwaldorf</span></a> <a class="inverted" href="https://twitter.com/notwaldorf" alt="twitter logo"><span class="icon icon--twitter"><svg viewBox="0 0 16 16"><path d="M15.969,3.058c-0.586,0.26-1.217,0.436-1.878,0.515c0.675-0.405,1.194-1.045,1.438-1.809c-0.632,0.375-1.332,0.647-2.076,0.793c-0.596-0.636-1.446-1.033-2.387-1.033c-1.806,0-3.27,1.464-3.27,3.27 c0,0.256,0.029,0.506,0.085,0.745C5.163,5.404,2.753,4.102,1.14,2.124C0.859,2.607,0.698,3.168,0.698,3.767 c0,1.134,0.577,2.135,1.455,2.722C1.616,6.472,1.112,6.325,0.671,6.08c0,0.014,0,0.027,0,0.041c0,1.584,1.127,2.906,2.623,3.206 C3.02,9.402,2.731,9.442,2.433,9.442c-0.211,0-0.416-0.021-0.615-0.059c0.416,1.299,1.624,2.245,3.055,2.271 c-1.119,0.877-2.529,1.4-4.061,1.4c-0.264,0-0.524-0.015-0.78-0.046c1.447,0.928,3.166,1.469,5.013,1.469 c6.015,0,9.304-4.983,9.304-9.304c0-0.142-0.003-0.283-0.009-0.423C14.976,4.29,15.531,3.714,15.969,3.058z"/></svg> </span><span class="username">notwaldorf</span></a> </div> <div class="tagline"><p>Play real-time music with a machine learning drummer that drums based on your melody.</p> </div> </div> <div class="card"> <div class="image"> <video autoplay loop muted playsinline alt="overview of Fruit Genie"> <source src="/assets/demos/fruit_genie.mp4" type="video/mp4"> </video> <div class="overlay"> <a href=https://g.co/magenta/fruitgenie>read blog</a> <a href=https://github.com/Deeplocal/fruit-genie>see code</a> </div> </div> <div class="title">Fruit Genie</div> <div class="author"> Mike Derrick <a class="inverted" href="https://github.com/mikederrick" alt="github logo"><span class="icon icon--github"><svg viewBox="0 0 16 16"><path d="M7.999,0.431c-4.285,0-7.76,3.474-7.76,7.761 c0,3.428,2.223,6.337,5.307,7.363c0.388,0.071,0.53-0.168,0.53-0.374c0-0.184-0.007-0.672-0.01-1.32 c-2.159,0.469-2.614-1.04-2.614-1.04c-0.353-0.896-0.862-1.135-0.862-1.135c-0.705-0.481,0.053-0.472,0.053-0.472 c0.779,0.055,1.189,0.8,1.189,0.8c0.692,1.186,1.816,0.843,2.258,0.645c0.071-0.502,0.271-0.843,0.493-1.037 C4.86,11.425,3.049,10.76,3.049,7.786c0-0.847,0.302-1.54,0.799-2.082C3.768,5.507,3.501,4.718,3.924,3.65 c0,0,0.652-0.209,2.134,0.796C6.677,4.273,7.34,4.187,8,4.184c0.659,0.003,1.323,0.089,1.943,0.261 c1.482-1.004,2.132-0.796,2.132-0.796c0.423,1.068,0.157,1.857,0.077,2.054c0.497,0.542,0.798,1.235,0.798,2.082 c0,2.981-1.814,3.637-3.543,3.829c0.279,0.24,0.527,0.713,0.527,1.437c0,1.037-0.01,1.874-0.01,2.129 c0,0.208,0.14,0.449,0.534,0.373c3.081-1.028,5.302-3.935,5.302-7.362C15.76,3.906,12.285,0.431,7.999,0.431z"/></svg> </span><span class="username">mikederrick</span></a> <br/> Nico Paris <a class="inverted" href="https://github.com/nico-paris" alt="github logo"><span class="icon icon--github"><svg viewBox="0 0 16 16"><path d="M7.999,0.431c-4.285,0-7.76,3.474-7.76,7.761 c0,3.428,2.223,6.337,5.307,7.363c0.388,0.071,0.53-0.168,0.53-0.374c0-0.184-0.007-0.672-0.01-1.32 c-2.159,0.469-2.614-1.04-2.614-1.04c-0.353-0.896-0.862-1.135-0.862-1.135c-0.705-0.481,0.053-0.472,0.053-0.472 c0.779,0.055,1.189,0.8,1.189,0.8c0.692,1.186,1.816,0.843,2.258,0.645c0.071-0.502,0.271-0.843,0.493-1.037 C4.86,11.425,3.049,10.76,3.049,7.786c0-0.847,0.302-1.54,0.799-2.082C3.768,5.507,3.501,4.718,3.924,3.65 c0,0,0.652-0.209,2.134,0.796C6.677,4.273,7.34,4.187,8,4.184c0.659,0.003,1.323,0.089,1.943,0.261 c1.482-1.004,2.132-0.796,2.132-0.796c0.423,1.068,0.157,1.857,0.077,2.054c0.497,0.542,0.798,1.235,0.798,2.082 c0,2.981-1.814,3.637-3.543,3.829c0.279,0.24,0.527,0.713,0.527,1.437c0,1.037-0.01,1.874-0.01,2.129 c0,0.208,0.14,0.449,0.534,0.373c3.081-1.028,5.302-3.935,5.302-7.362C15.76,3.906,12.285,0.431,7.999,0.431z"/></svg> </span><span class="username">nico-paris</span></a> <br/> Matthew Pegula <a class="inverted" href="https://github.com/pegula" alt="github logo"><span class="icon icon--github"><svg viewBox="0 0 16 16"><path d="M7.999,0.431c-4.285,0-7.76,3.474-7.76,7.761 c0,3.428,2.223,6.337,5.307,7.363c0.388,0.071,0.53-0.168,0.53-0.374c0-0.184-0.007-0.672-0.01-1.32 c-2.159,0.469-2.614-1.04-2.614-1.04c-0.353-0.896-0.862-1.135-0.862-1.135c-0.705-0.481,0.053-0.472,0.053-0.472 c0.779,0.055,1.189,0.8,1.189,0.8c0.692,1.186,1.816,0.843,2.258,0.645c0.071-0.502,0.271-0.843,0.493-1.037 C4.86,11.425,3.049,10.76,3.049,7.786c0-0.847,0.302-1.54,0.799-2.082C3.768,5.507,3.501,4.718,3.924,3.65 c0,0,0.652-0.209,2.134,0.796C6.677,4.273,7.34,4.187,8,4.184c0.659,0.003,1.323,0.089,1.943,0.261 c1.482-1.004,2.132-0.796,2.132-0.796c0.423,1.068,0.157,1.857,0.077,2.054c0.497,0.542,0.798,1.235,0.798,2.082 c0,2.981-1.814,3.637-3.543,3.829c0.279,0.24,0.527,0.713,0.527,1.437c0,1.037-0.01,1.874-0.01,2.129 c0,0.208,0.14,0.449,0.534,0.373c3.081-1.028,5.302-3.935,5.302-7.362C15.76,3.906,12.285,0.431,7.999,0.431z"/></svg> </span><span class="username">pegula</span></a> <a class="inverted" href="https://twitter.com/pegula" alt="twitter logo"><span class="icon icon--twitter"><svg viewBox="0 0 16 16"><path d="M15.969,3.058c-0.586,0.26-1.217,0.436-1.878,0.515c0.675-0.405,1.194-1.045,1.438-1.809c-0.632,0.375-1.332,0.647-2.076,0.793c-0.596-0.636-1.446-1.033-2.387-1.033c-1.806,0-3.27,1.464-3.27,3.27 c0,0.256,0.029,0.506,0.085,0.745C5.163,5.404,2.753,4.102,1.14,2.124C0.859,2.607,0.698,3.168,0.698,3.767 c0,1.134,0.577,2.135,1.455,2.722C1.616,6.472,1.112,6.325,0.671,6.08c0,0.014,0,0.027,0,0.041c0,1.584,1.127,2.906,2.623,3.206 C3.02,9.402,2.731,9.442,2.433,9.442c-0.211,0-0.416-0.021-0.615-0.059c0.416,1.299,1.624,2.245,3.055,2.271 c-1.119,0.877-2.529,1.4-4.061,1.4c-0.264,0-0.524-0.015-0.78-0.046c1.447,0.928,3.166,1.469,5.013,1.469 c6.015,0,9.304-4.983,9.304-9.304c0-0.142-0.003-0.283-0.009-0.423C14.976,4.29,15.531,3.714,15.969,3.058z"/></svg> </span><span class="username">pegula</span></a> </div> <div class="tagline"><p>A real-time intelligent musical instrument which combines Magenta’s <a href="/pianogenie">Piano Genie</a> model with a physical interface consisting of fruit (or whatever else you can dream up)! Developed in partnership with The Flaming Lips for their performance at Google I/O 2019.</p> </div> </div> <div class="card"> <div class="image"> <video autoplay loop muted playsinline alt="overview of MidiMe"> <source src="/assets/midime/midime.mp4" type="video/mp4"> </video> <div class="overlay"> <a href=https://midi-me.glitch.me>play</a> <a href=/midi-me>read blog</a> <a href=https://glitch.com/edit/#!/midi-me>see code</a> </div> </div> <div class="title">MidiMe</div> <div class="author"> <a class="inverted" href=https://meowni.ca/>Monica Dinculescu</a> <a class="inverted" href="https://github.com/notwaldorf" alt="github logo"><span class="icon icon--github"><svg viewBox="0 0 16 16"><path d="M7.999,0.431c-4.285,0-7.76,3.474-7.76,7.761 c0,3.428,2.223,6.337,5.307,7.363c0.388,0.071,0.53-0.168,0.53-0.374c0-0.184-0.007-0.672-0.01-1.32 c-2.159,0.469-2.614-1.04-2.614-1.04c-0.353-0.896-0.862-1.135-0.862-1.135c-0.705-0.481,0.053-0.472,0.053-0.472 c0.779,0.055,1.189,0.8,1.189,0.8c0.692,1.186,1.816,0.843,2.258,0.645c0.071-0.502,0.271-0.843,0.493-1.037 C4.86,11.425,3.049,10.76,3.049,7.786c0-0.847,0.302-1.54,0.799-2.082C3.768,5.507,3.501,4.718,3.924,3.65 c0,0,0.652-0.209,2.134,0.796C6.677,4.273,7.34,4.187,8,4.184c0.659,0.003,1.323,0.089,1.943,0.261 c1.482-1.004,2.132-0.796,2.132-0.796c0.423,1.068,0.157,1.857,0.077,2.054c0.497,0.542,0.798,1.235,0.798,2.082 c0,2.981-1.814,3.637-3.543,3.829c0.279,0.24,0.527,0.713,0.527,1.437c0,1.037-0.01,1.874-0.01,2.129 c0,0.208,0.14,0.449,0.534,0.373c3.081-1.028,5.302-3.935,5.302-7.362C15.76,3.906,12.285,0.431,7.999,0.431z"/></svg> </span><span class="username">notwaldorf</span></a> <a class="inverted" href="https://twitter.com/notwaldorf" alt="twitter logo"><span class="icon icon--twitter"><svg viewBox="0 0 16 16"><path d="M15.969,3.058c-0.586,0.26-1.217,0.436-1.878,0.515c0.675-0.405,1.194-1.045,1.438-1.809c-0.632,0.375-1.332,0.647-2.076,0.793c-0.596-0.636-1.446-1.033-2.387-1.033c-1.806,0-3.27,1.464-3.27,3.27 c0,0.256,0.029,0.506,0.085,0.745C5.163,5.404,2.753,4.102,1.14,2.124C0.859,2.607,0.698,3.168,0.698,3.767 c0,1.134,0.577,2.135,1.455,2.722C1.616,6.472,1.112,6.325,0.671,6.08c0,0.014,0,0.027,0,0.041c0,1.584,1.127,2.906,2.623,3.206 C3.02,9.402,2.731,9.442,2.433,9.442c-0.211,0-0.416-0.021-0.615-0.059c0.416,1.299,1.624,2.245,3.055,2.271 c-1.119,0.877-2.529,1.4-4.061,1.4c-0.264,0-0.524-0.015-0.78-0.046c1.447,0.928,3.166,1.469,5.013,1.469 c6.015,0,9.304-4.983,9.304-9.304c0-0.142-0.003-0.283-0.009-0.423C14.976,4.29,15.531,3.714,15.969,3.058z"/></svg> </span><span class="username">notwaldorf</span></a> </div> <div class="tagline"><p>MidiMe is a machine learning experiment to train a small model to sound like you. All the training happens directly in the browser using TensorFlow.js – no servers or backends here!</p> </div> </div> <div class="card"> <div class="image"> <video autoplay loop muted playsinline alt="overview of Magenta Studio"> <source src="/assets/studio/hero.mp4" type="video/mp4"> </video> <div class="overlay"> <a href=/studio>play</a> <a href=/studio-announce>read blog</a> <a href=https://github.com/tensorflow/magenta-studio>see code</a> </div> </div> <div class="title">Magenta Studio</div> <div class="author"> <a class="inverted" href=http://yotammann.info>Yotam Mann</a> <a class="inverted" href="https://github.com/tambien" alt="github logo"><span class="icon icon--github"><svg viewBox="0 0 16 16"><path d="M7.999,0.431c-4.285,0-7.76,3.474-7.76,7.761 c0,3.428,2.223,6.337,5.307,7.363c0.388,0.071,0.53-0.168,0.53-0.374c0-0.184-0.007-0.672-0.01-1.32 c-2.159,0.469-2.614-1.04-2.614-1.04c-0.353-0.896-0.862-1.135-0.862-1.135c-0.705-0.481,0.053-0.472,0.053-0.472 c0.779,0.055,1.189,0.8,1.189,0.8c0.692,1.186,1.816,0.843,2.258,0.645c0.071-0.502,0.271-0.843,0.493-1.037 C4.86,11.425,3.049,10.76,3.049,7.786c0-0.847,0.302-1.54,0.799-2.082C3.768,5.507,3.501,4.718,3.924,3.65 c0,0,0.652-0.209,2.134,0.796C6.677,4.273,7.34,4.187,8,4.184c0.659,0.003,1.323,0.089,1.943,0.261 c1.482-1.004,2.132-0.796,2.132-0.796c0.423,1.068,0.157,1.857,0.077,2.054c0.497,0.542,0.798,1.235,0.798,2.082 c0,2.981-1.814,3.637-3.543,3.829c0.279,0.24,0.527,0.713,0.527,1.437c0,1.037-0.01,1.874-0.01,2.129 c0,0.208,0.14,0.449,0.534,0.373c3.081-1.028,5.302-3.935,5.302-7.362C15.76,3.906,12.285,0.431,7.999,0.431z"/></svg> </span><span class="username">tambien</span></a> <a class="inverted" href="https://twitter.com/yotammann" alt="twitter logo"><span class="icon icon--twitter"><svg viewBox="0 0 16 16"><path d="M15.969,3.058c-0.586,0.26-1.217,0.436-1.878,0.515c0.675-0.405,1.194-1.045,1.438-1.809c-0.632,0.375-1.332,0.647-2.076,0.793c-0.596-0.636-1.446-1.033-2.387-1.033c-1.806,0-3.27,1.464-3.27,3.27 c0,0.256,0.029,0.506,0.085,0.745C5.163,5.404,2.753,4.102,1.14,2.124C0.859,2.607,0.698,3.168,0.698,3.767 c0,1.134,0.577,2.135,1.455,2.722C1.616,6.472,1.112,6.325,0.671,6.08c0,0.014,0,0.027,0,0.041c0,1.584,1.127,2.906,2.623,3.206 C3.02,9.402,2.731,9.442,2.433,9.442c-0.211,0-0.416-0.021-0.615-0.059c0.416,1.299,1.624,2.245,3.055,2.271 c-1.119,0.877-2.529,1.4-4.061,1.4c-0.264,0-0.524-0.015-0.78-0.046c1.447,0.928,3.166,1.469,5.013,1.469 c6.015,0,9.304-4.983,9.304-9.304c0-0.142-0.003-0.283-0.009-0.423C14.976,4.29,15.531,3.714,15.969,3.058z"/></svg> </span><span class="username">yotammann</span></a> </div> <div class="tagline"><p>Magenta Studio is a collection of music plugins for <a href="https://www.ableton.com">Ableton Live</a> built on Magenta’s open source tools and models. It can also be downloaded as standalone, native apps with no additional dependencies.</p> </div> </div> <div class="card"> <div class="image"> <video autoplay loop muted playsinline alt="overview of Runn"> <source src="/assets/demos/runn.mp4" type="video/mp4"> </video> <div class="overlay"> <a href=https://vibertthio.com/runn>play</a> <a href=http://bit.ly/2MEx1n0>read blog</a> <a href=https://github.com/vibertthio/runn>see code</a> </div> </div> <div class="title">Runn</div> <div class="author"> <a class="inverted" href=https://vibertthio.com>Vibert Thio</a> <span class="icon icon--community" title="Community Contributor (Non-Google)" alt="community icon"><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="106.667px" height="100px" viewBox="-4.167 0 106.667 100" enable-background="new -4.167 0 106.667 100" xml:space="preserve"> <path d="M77.083,7.99c6.074,0,10.998,4.923,10.998,10.997c0,6.074-4.923,10.998-10.998,10.998c-6.069,0-10.993-4.923-10.993-10.998 C66.09,12.913,71.014,7.99,77.083,7.99z"/> <path d="M21.379,7.99c6.074,0,10.997,4.923,10.997,10.997c0,6.074-4.923,10.998-10.997,10.998c-6.074,0-10.997-4.923-10.997-10.998 C10.382,12.913,15.305,7.99,21.379,7.99z"/> <path d="M50.975,19.433c8.096,0,14.658,6.563,14.658,14.66c0,8.1-6.563,14.663-14.658,14.663c-8.101,0-14.663-6.563-14.663-14.663 C36.312,25.996,42.874,19.433,50.975,19.433z"/> <path d="M89.657,33.813H68.695c0.003,0.097,0.016,0.19,0.016,0.287c0,5.912-2.902,11.134-7.35,14.358h5.477 c7.087,0,12.831,5.128,12.831,11.454v8.826h20.015V43.839C99.684,38.3,95.195,33.813,89.657,33.813z"/> <path d="M76.775,91.369V62.557c0-6.324-5.129-11.457-11.455-11.457H35.646c-6.326,0-11.454,5.133-11.454,11.457v28.813H76.775z"/> <path d="M33.232,34.094c0-0.095,0.013-0.187,0.014-0.282H9.709c-5.536,0-10.026,4.488-10.026,10.027v24.897h21.073v-8.863 c0-6.325,5.745-11.454,12.832-11.454h6.952C36.117,45.193,33.232,39.987,33.232,34.094z"/> </svg> </span> <a class="inverted" href="https://github.com/vibertthio" alt="github logo"><span class="icon icon--github"><svg viewBox="0 0 16 16"><path d="M7.999,0.431c-4.285,0-7.76,3.474-7.76,7.761 c0,3.428,2.223,6.337,5.307,7.363c0.388,0.071,0.53-0.168,0.53-0.374c0-0.184-0.007-0.672-0.01-1.32 c-2.159,0.469-2.614-1.04-2.614-1.04c-0.353-0.896-0.862-1.135-0.862-1.135c-0.705-0.481,0.053-0.472,0.053-0.472 c0.779,0.055,1.189,0.8,1.189,0.8c0.692,1.186,1.816,0.843,2.258,0.645c0.071-0.502,0.271-0.843,0.493-1.037 C4.86,11.425,3.049,10.76,3.049,7.786c0-0.847,0.302-1.54,0.799-2.082C3.768,5.507,3.501,4.718,3.924,3.65 c0,0,0.652-0.209,2.134,0.796C6.677,4.273,7.34,4.187,8,4.184c0.659,0.003,1.323,0.089,1.943,0.261 c1.482-1.004,2.132-0.796,2.132-0.796c0.423,1.068,0.157,1.857,0.077,2.054c0.497,0.542,0.798,1.235,0.798,2.082 c0,2.981-1.814,3.637-3.543,3.829c0.279,0.24,0.527,0.713,0.527,1.437c0,1.037-0.01,1.874-0.01,2.129 c0,0.208,0.14,0.449,0.534,0.373c3.081-1.028,5.302-3.935,5.302-7.362C15.76,3.906,12.285,0.431,7.999,0.431z"/></svg> </span><span class="username">vibertthio</span></a> <a class="inverted" href="https://twitter.com/vibertthio" alt="twitter logo"><span class="icon icon--twitter"><svg viewBox="0 0 16 16"><path d="M15.969,3.058c-0.586,0.26-1.217,0.436-1.878,0.515c0.675-0.405,1.194-1.045,1.438-1.809c-0.632,0.375-1.332,0.647-2.076,0.793c-0.596-0.636-1.446-1.033-2.387-1.033c-1.806,0-3.27,1.464-3.27,3.27 c0,0.256,0.029,0.506,0.085,0.745C5.163,5.404,2.753,4.102,1.14,2.124C0.859,2.607,0.698,3.168,0.698,3.767 c0,1.134,0.577,2.135,1.455,2.722C1.616,6.472,1.112,6.325,0.671,6.08c0,0.014,0,0.027,0,0.041c0,1.584,1.127,2.906,2.623,3.206 C3.02,9.402,2.731,9.442,2.433,9.442c-0.211,0-0.416-0.021-0.615-0.059c0.416,1.299,1.624,2.245,3.055,2.271 c-1.119,0.877-2.529,1.4-4.061,1.4c-0.264,0-0.524-0.015-0.78-0.046c1.447,0.928,3.166,1.469,5.013,1.469 c6.015,0,9.304-4.983,9.304-9.304c0-0.142-0.003-0.283-0.009-0.423C14.976,4.29,15.531,3.714,15.969,3.058z"/></svg> </span><span class="username">vibertthio</span></a> </div> <div class="tagline"><p>RUNN = 🏃Run + 🤖RNN. A side-scrolling game where the player has to finish the level to listen to the full song. Each level is generated realtime with a MusicRNN model.</p> </div> </div> <div class="card"> <div class="image"> <video autoplay loop muted playsinline alt="overview of GANHarp"> <source src="/assets/demos/ganharp.mp4" type="video/mp4"> </video> <div class="overlay"> <a href=https://ganharp.ctpt.co/>play</a> </div> </div> <div class="title">GANHarp</div> <div class="author"> <a class="inverted" href=https://teropa.info>Tero Parviainen</a> <span class="icon icon--community" title="Community Contributor (Non-Google)" alt="community icon"><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="106.667px" height="100px" viewBox="-4.167 0 106.667 100" enable-background="new -4.167 0 106.667 100" xml:space="preserve"> <path d="M77.083,7.99c6.074,0,10.998,4.923,10.998,10.997c0,6.074-4.923,10.998-10.998,10.998c-6.069,0-10.993-4.923-10.993-10.998 C66.09,12.913,71.014,7.99,77.083,7.99z"/> <path d="M21.379,7.99c6.074,0,10.997,4.923,10.997,10.997c0,6.074-4.923,10.998-10.997,10.998c-6.074,0-10.997-4.923-10.997-10.998 C10.382,12.913,15.305,7.99,21.379,7.99z"/> <path d="M50.975,19.433c8.096,0,14.658,6.563,14.658,14.66c0,8.1-6.563,14.663-14.658,14.663c-8.101,0-14.663-6.563-14.663-14.663 C36.312,25.996,42.874,19.433,50.975,19.433z"/> <path d="M89.657,33.813H68.695c0.003,0.097,0.016,0.19,0.016,0.287c0,5.912-2.902,11.134-7.35,14.358h5.477 c7.087,0,12.831,5.128,12.831,11.454v8.826h20.015V43.839C99.684,38.3,95.195,33.813,89.657,33.813z"/> <path d="M76.775,91.369V62.557c0-6.324-5.129-11.457-11.455-11.457H35.646c-6.326,0-11.454,5.133-11.454,11.457v28.813H76.775z"/> <path d="M33.232,34.094c0-0.095,0.013-0.187,0.014-0.282H9.709c-5.536,0-10.026,4.488-10.026,10.027v24.897h21.073v-8.863 c0-6.325,5.745-11.454,12.832-11.454h6.952C36.117,45.193,33.232,39.987,33.232,34.094z"/> </svg> </span> <a class="inverted" href="https://github.com/teropa" alt="github logo"><span class="icon icon--github"><svg viewBox="0 0 16 16"><path d="M7.999,0.431c-4.285,0-7.76,3.474-7.76,7.761 c0,3.428,2.223,6.337,5.307,7.363c0.388,0.071,0.53-0.168,0.53-0.374c0-0.184-0.007-0.672-0.01-1.32 c-2.159,0.469-2.614-1.04-2.614-1.04c-0.353-0.896-0.862-1.135-0.862-1.135c-0.705-0.481,0.053-0.472,0.053-0.472 c0.779,0.055,1.189,0.8,1.189,0.8c0.692,1.186,1.816,0.843,2.258,0.645c0.071-0.502,0.271-0.843,0.493-1.037 C4.86,11.425,3.049,10.76,3.049,7.786c0-0.847,0.302-1.54,0.799-2.082C3.768,5.507,3.501,4.718,3.924,3.65 c0,0,0.652-0.209,2.134,0.796C6.677,4.273,7.34,4.187,8,4.184c0.659,0.003,1.323,0.089,1.943,0.261 c1.482-1.004,2.132-0.796,2.132-0.796c0.423,1.068,0.157,1.857,0.077,2.054c0.497,0.542,0.798,1.235,0.798,2.082 c0,2.981-1.814,3.637-3.543,3.829c0.279,0.24,0.527,0.713,0.527,1.437c0,1.037-0.01,1.874-0.01,2.129 c0,0.208,0.14,0.449,0.534,0.373c3.081-1.028,5.302-3.935,5.302-7.362C15.76,3.906,12.285,0.431,7.999,0.431z"/></svg> </span><span class="username">teropa</span></a> <a class="inverted" href="https://twitter.com/teropa" alt="twitter logo"><span class="icon icon--twitter"><svg viewBox="0 0 16 16"><path d="M15.969,3.058c-0.586,0.26-1.217,0.436-1.878,0.515c0.675-0.405,1.194-1.045,1.438-1.809c-0.632,0.375-1.332,0.647-2.076,0.793c-0.596-0.636-1.446-1.033-2.387-1.033c-1.806,0-3.27,1.464-3.27,3.27 c0,0.256,0.029,0.506,0.085,0.745C5.163,5.404,2.753,4.102,1.14,2.124C0.859,2.607,0.698,3.168,0.698,3.767 c0,1.134,0.577,2.135,1.455,2.722C1.616,6.472,1.112,6.325,0.671,6.08c0,0.014,0,0.027,0,0.041c0,1.584,1.127,2.906,2.623,3.206 C3.02,9.402,2.731,9.442,2.433,9.442c-0.211,0-0.416-0.021-0.615-0.059c0.416,1.299,1.624,2.245,3.055,2.271 c-1.119,0.877-2.529,1.4-4.061,1.4c-0.264,0-0.524-0.015-0.78-0.046c1.447,0.928,3.166,1.469,5.013,1.469 c6.015,0,9.304-4.983,9.304-9.304c0-0.142-0.003-0.283-0.009-0.423C14.976,4.29,15.531,3.714,15.969,3.058z"/></svg> </span><span class="username">teropa</span></a> <br/> <a class="inverted" href=https://ctpt.co/>Samuel Diggins</a> <span class="icon icon--community" title="Community Contributor (Non-Google)" alt="community icon"><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="106.667px" height="100px" viewBox="-4.167 0 106.667 100" enable-background="new -4.167 0 106.667 100" xml:space="preserve"> <path d="M77.083,7.99c6.074,0,10.998,4.923,10.998,10.997c0,6.074-4.923,10.998-10.998,10.998c-6.069,0-10.993-4.923-10.993-10.998 C66.09,12.913,71.014,7.99,77.083,7.99z"/> <path d="M21.379,7.99c6.074,0,10.997,4.923,10.997,10.997c0,6.074-4.923,10.998-10.997,10.998c-6.074,0-10.997-4.923-10.997-10.998 C10.382,12.913,15.305,7.99,21.379,7.99z"/> <path d="M50.975,19.433c8.096,0,14.658,6.563,14.658,14.66c0,8.1-6.563,14.663-14.658,14.663c-8.101,0-14.663-6.563-14.663-14.663 C36.312,25.996,42.874,19.433,50.975,19.433z"/> <path d="M89.657,33.813H68.695c0.003,0.097,0.016,0.19,0.016,0.287c0,5.912-2.902,11.134-7.35,14.358h5.477 c7.087,0,12.831,5.128,12.831,11.454v8.826h20.015V43.839C99.684,38.3,95.195,33.813,89.657,33.813z"/> <path d="M76.775,91.369V62.557c0-6.324-5.129-11.457-11.455-11.457H35.646c-6.326,0-11.454,5.133-11.454,11.457v28.813H76.775z"/> <path d="M33.232,34.094c0-0.095,0.013-0.187,0.014-0.282H9.709c-5.536,0-10.026,4.488-10.026,10.027v24.897h21.073v-8.863 c0-6.325,5.745-11.454,12.832-11.454h6.952C36.117,45.193,33.232,39.987,33.232,34.094z"/> </svg> </span> <a class="inverted" href="https://twitter.com/samueldiggins" alt="twitter logo"><span class="icon icon--twitter"><svg viewBox="0 0 16 16"><path d="M15.969,3.058c-0.586,0.26-1.217,0.436-1.878,0.515c0.675-0.405,1.194-1.045,1.438-1.809c-0.632,0.375-1.332,0.647-2.076,0.793c-0.596-0.636-1.446-1.033-2.387-1.033c-1.806,0-3.27,1.464-3.27,3.27 c0,0.256,0.029,0.506,0.085,0.745C5.163,5.404,2.753,4.102,1.14,2.124C0.859,2.607,0.698,3.168,0.698,3.767 c0,1.134,0.577,2.135,1.455,2.722C1.616,6.472,1.112,6.325,0.671,6.08c0,0.014,0,0.027,0,0.041c0,1.584,1.127,2.906,2.623,3.206 C3.02,9.402,2.731,9.442,2.433,9.442c-0.211,0-0.416-0.021-0.615-0.059c0.416,1.299,1.624,2.245,3.055,2.271 c-1.119,0.877-2.529,1.4-4.061,1.4c-0.264,0-0.524-0.015-0.78-0.046c1.447,0.928,3.166,1.469,5.013,1.469 c6.015,0,9.304-4.983,9.304-9.304c0-0.142-0.003-0.283-0.009-0.423C14.976,4.29,15.531,3.714,15.969,3.058z"/></svg> </span><span class="username">samueldiggins</span></a> </div> <div class="tagline"><p>GANHarp is an experimental musical instrument based on AI-generated sounds. It uses <a href="/js">Magenta.js</a> and the <a href="/gansynth">GANSynth</a> model to generate continuously morphing waveform interpolations, and lets you play them with your computer or MIDI keyboard.</p> </div> </div> <div class="card"> <div class="image"> <video autoplay loop muted playsinline alt="overview of Magic Sketchpad"> <source src="/assets/demos/magic_sketchpad.mp4" type="video/mp4"> </video> <div class="overlay"> <a href=https://magic-sketchpad.glitch.me/>play</a> <a href=https://glitch.com/edit/#!/magic-sketchpad>see code</a> </div> </div> <div class="title">Magic Sketchpad</div> <div class="author"> <a class="inverted" href=https://meowni.ca/>Monica Dinculescu</a> <a class="inverted" href="https://github.com/notwaldorf" alt="github logo"><span class="icon icon--github"><svg viewBox="0 0 16 16"><path d="M7.999,0.431c-4.285,0-7.76,3.474-7.76,7.761 c0,3.428,2.223,6.337,5.307,7.363c0.388,0.071,0.53-0.168,0.53-0.374c0-0.184-0.007-0.672-0.01-1.32 c-2.159,0.469-2.614-1.04-2.614-1.04c-0.353-0.896-0.862-1.135-0.862-1.135c-0.705-0.481,0.053-0.472,0.053-0.472 c0.779,0.055,1.189,0.8,1.189,0.8c0.692,1.186,1.816,0.843,2.258,0.645c0.071-0.502,0.271-0.843,0.493-1.037 C4.86,11.425,3.049,10.76,3.049,7.786c0-0.847,0.302-1.54,0.799-2.082C3.768,5.507,3.501,4.718,3.924,3.65 c0,0,0.652-0.209,2.134,0.796C6.677,4.273,7.34,4.187,8,4.184c0.659,0.003,1.323,0.089,1.943,0.261 c1.482-1.004,2.132-0.796,2.132-0.796c0.423,1.068,0.157,1.857,0.077,2.054c0.497,0.542,0.798,1.235,0.798,2.082 c0,2.981-1.814,3.637-3.543,3.829c0.279,0.24,0.527,0.713,0.527,1.437c0,1.037-0.01,1.874-0.01,2.129 c0,0.208,0.14,0.449,0.534,0.373c3.081-1.028,5.302-3.935,5.302-7.362C15.76,3.906,12.285,0.431,7.999,0.431z"/></svg> </span><span class="username">notwaldorf</span></a> <a class="inverted" href="https://twitter.com/notwaldorf" alt="twitter logo"><span class="icon icon--twitter"><svg viewBox="0 0 16 16"><path d="M15.969,3.058c-0.586,0.26-1.217,0.436-1.878,0.515c0.675-0.405,1.194-1.045,1.438-1.809c-0.632,0.375-1.332,0.647-2.076,0.793c-0.596-0.636-1.446-1.033-2.387-1.033c-1.806,0-3.27,1.464-3.27,3.27 c0,0.256,0.029,0.506,0.085,0.745C5.163,5.404,2.753,4.102,1.14,2.124C0.859,2.607,0.698,3.168,0.698,3.767 c0,1.134,0.577,2.135,1.455,2.722C1.616,6.472,1.112,6.325,0.671,6.08c0,0.014,0,0.027,0,0.041c0,1.584,1.127,2.906,2.623,3.206 C3.02,9.402,2.731,9.442,2.433,9.442c-0.211,0-0.416-0.021-0.615-0.059c0.416,1.299,1.624,2.245,3.055,2.271 c-1.119,0.877-2.529,1.4-4.061,1.4c-0.264,0-0.524-0.015-0.78-0.046c1.447,0.928,3.166,1.469,5.013,1.469 c6.015,0,9.304-4.983,9.304-9.304c0-0.142-0.003-0.283-0.009-0.423C14.976,4.29,15.531,3.714,15.969,3.058z"/></svg> </span><span class="username">notwaldorf</span></a> </div> <div class="tagline"><p>Every time you start drawing a doodle, Sketch RNN tries to finish it and match the category you’ve selected.</p> </div> </div> <div class="card"> <div class="image"> <video autoplay loop muted playsinline alt="overview of Piano Genie"> <source src="/assets/demos/piano_genie.mp4" type="video/mp4"> </video> <div class="overlay"> <a href=https://goo.gl/magenta/piano-genie>play</a> <a href=/pianogenie>read blog</a> <a href=https://glitch.com/edit/#!/piano-genie>see code</a> </div> </div> <div class="title">Piano Genie</div> <div class="author"> <a class="inverted" href=https://meowni.ca/>Monica Dinculescu</a> <a class="inverted" href="https://github.com/notwaldorf" alt="github logo"><span class="icon icon--github"><svg viewBox="0 0 16 16"><path d="M7.999,0.431c-4.285,0-7.76,3.474-7.76,7.761 c0,3.428,2.223,6.337,5.307,7.363c0.388,0.071,0.53-0.168,0.53-0.374c0-0.184-0.007-0.672-0.01-1.32 c-2.159,0.469-2.614-1.04-2.614-1.04c-0.353-0.896-0.862-1.135-0.862-1.135c-0.705-0.481,0.053-0.472,0.053-0.472 c0.779,0.055,1.189,0.8,1.189,0.8c0.692,1.186,1.816,0.843,2.258,0.645c0.071-0.502,0.271-0.843,0.493-1.037 C4.86,11.425,3.049,10.76,3.049,7.786c0-0.847,0.302-1.54,0.799-2.082C3.768,5.507,3.501,4.718,3.924,3.65 c0,0,0.652-0.209,2.134,0.796C6.677,4.273,7.34,4.187,8,4.184c0.659,0.003,1.323,0.089,1.943,0.261 c1.482-1.004,2.132-0.796,2.132-0.796c0.423,1.068,0.157,1.857,0.077,2.054c0.497,0.542,0.798,1.235,0.798,2.082 c0,2.981-1.814,3.637-3.543,3.829c0.279,0.24,0.527,0.713,0.527,1.437c0,1.037-0.01,1.874-0.01,2.129 c0,0.208,0.14,0.449,0.534,0.373c3.081-1.028,5.302-3.935,5.302-7.362C15.76,3.906,12.285,0.431,7.999,0.431z"/></svg> </span><span class="username">notwaldorf</span></a> <a class="inverted" href="https://twitter.com/notwaldorf" alt="twitter logo"><span class="icon icon--twitter"><svg viewBox="0 0 16 16"><path d="M15.969,3.058c-0.586,0.26-1.217,0.436-1.878,0.515c0.675-0.405,1.194-1.045,1.438-1.809c-0.632,0.375-1.332,0.647-2.076,0.793c-0.596-0.636-1.446-1.033-2.387-1.033c-1.806,0-3.27,1.464-3.27,3.27 c0,0.256,0.029,0.506,0.085,0.745C5.163,5.404,2.753,4.102,1.14,2.124C0.859,2.607,0.698,3.168,0.698,3.767 c0,1.134,0.577,2.135,1.455,2.722C1.616,6.472,1.112,6.325,0.671,6.08c0,0.014,0,0.027,0,0.041c0,1.584,1.127,2.906,2.623,3.206 C3.02,9.402,2.731,9.442,2.433,9.442c-0.211,0-0.416-0.021-0.615-0.059c0.416,1.299,1.624,2.245,3.055,2.271 c-1.119,0.877-2.529,1.4-4.061,1.4c-0.264,0-0.524-0.015-0.78-0.046c1.447,0.928,3.166,1.469,5.013,1.469 c6.015,0,9.304-4.983,9.304-9.304c0-0.142-0.003-0.283-0.009-0.423C14.976,4.29,15.531,3.714,15.969,3.058z"/></svg> </span><span class="username">notwaldorf</span></a> <br/> <a class="inverted" href=https://chrisdonahue.github.io/>Chris Donahue</a> <a class="inverted" href="https://github.com/chrisdonahue" alt="github logo"><span class="icon icon--github"><svg viewBox="0 0 16 16"><path d="M7.999,0.431c-4.285,0-7.76,3.474-7.76,7.761 c0,3.428,2.223,6.337,5.307,7.363c0.388,0.071,0.53-0.168,0.53-0.374c0-0.184-0.007-0.672-0.01-1.32 c-2.159,0.469-2.614-1.04-2.614-1.04c-0.353-0.896-0.862-1.135-0.862-1.135c-0.705-0.481,0.053-0.472,0.053-0.472 c0.779,0.055,1.189,0.8,1.189,0.8c0.692,1.186,1.816,0.843,2.258,0.645c0.071-0.502,0.271-0.843,0.493-1.037 C4.86,11.425,3.049,10.76,3.049,7.786c0-0.847,0.302-1.54,0.799-2.082C3.768,5.507,3.501,4.718,3.924,3.65 c0,0,0.652-0.209,2.134,0.796C6.677,4.273,7.34,4.187,8,4.184c0.659,0.003,1.323,0.089,1.943,0.261 c1.482-1.004,2.132-0.796,2.132-0.796c0.423,1.068,0.157,1.857,0.077,2.054c0.497,0.542,0.798,1.235,0.798,2.082 c0,2.981-1.814,3.637-3.543,3.829c0.279,0.24,0.527,0.713,0.527,1.437c0,1.037-0.01,1.874-0.01,2.129 c0,0.208,0.14,0.449,0.534,0.373c3.081-1.028,5.302-3.935,5.302-7.362C15.76,3.906,12.285,0.431,7.999,0.431z"/></svg> </span><span class="username">chrisdonahue</span></a> <a class="inverted" href="https://twitter.com/chrisdonahuey" alt="twitter logo"><span class="icon icon--twitter"><svg viewBox="0 0 16 16"><path d="M15.969,3.058c-0.586,0.26-1.217,0.436-1.878,0.515c0.675-0.405,1.194-1.045,1.438-1.809c-0.632,0.375-1.332,0.647-2.076,0.793c-0.596-0.636-1.446-1.033-2.387-1.033c-1.806,0-3.27,1.464-3.27,3.27 c0,0.256,0.029,0.506,0.085,0.745C5.163,5.404,2.753,4.102,1.14,2.124C0.859,2.607,0.698,3.168,0.698,3.767 c0,1.134,0.577,2.135,1.455,2.722C1.616,6.472,1.112,6.325,0.671,6.08c0,0.014,0,0.027,0,0.041c0,1.584,1.127,2.906,2.623,3.206 C3.02,9.402,2.731,9.442,2.433,9.442c-0.211,0-0.416-0.021-0.615-0.059c0.416,1.299,1.624,2.245,3.055,2.271 c-1.119,0.877-2.529,1.4-4.061,1.4c-0.264,0-0.524-0.015-0.78-0.046c1.447,0.928,3.166,1.469,5.013,1.469 c6.015,0,9.304-4.983,9.304-9.304c0-0.142-0.003-0.283-0.009-0.423C14.976,4.29,15.531,3.714,15.969,3.058z"/></svg> </span><span class="username">chrisdonahuey</span></a> </div> <div class="tagline"><p>Have some fun pretending you’re a piano virtuoso using machine learning.</p> </div> </div> <div class="card"> <div class="image"> <video autoplay loop muted playsinline alt="overview of Piano Scribe"> <source src="/assets/demos/piano_scribe.mp4" type="video/mp4"> </video> <div class="overlay"> <a href=https://goo.gl/magenta/piano-scribe>play</a> <a href=/oaf-js>read blog</a> <a href=https://glitch.com/edit/#!/piano-scribe>see code</a> </div> </div> <div class="title">Piano Scribe</div> <div class="author"> </div> <div class="tagline"><p>Converts raw audio to MIDI using <a href="/onsets-frames">Onsets and Frames</a>, a neural network trained for polyphonic piano transcription.</p> </div> </div> <div class="card"> <div class="image"> <video autoplay loop muted playsinline alt="overview of NSynth Super"> <source src="/assets/demos/nsynth_super.mp4" type="video/mp4"> </video> <div class="overlay"> <a href=https://g.co/nsynthsuper>read blog</a> <a href=https://github.com/googlecreativelab/open-nsynth-super>see code</a> </div> </div> <div class="title">NSynth Super</div> <div class="author"> <a class="inverted" href=https://github.com/googlecreativelab>Google Creative Lab</a> </div> <div class="tagline"><p><a href="https://g.co/nsynthsuper">NSynth Super</a> is an experimental physical interface for the <a href="/nsynth">NSynth</a> model, which uses deep neural networks to generate sounds at the level of individual samples.</p> </div> </div> <div class="card"> <div class="image"> <video autoplay loop muted playsinline alt="overview of The Incredible Musical Spinners From Latent Space"> <source src="/assets/demos/latent_spinners.mp4" type="video/mp4"> </video> <div class="overlay"> <a href=https://incredible-spinners.glitch.me/>play</a> <a href=/blog/2018/05/03/connecting-with-magenta-js>read blog</a> <a href=https://glitch.com/edit/#!/incredible-spinners>see code</a> </div> </div> <div class="title">The Incredible Musical Spinners From Latent Space</div> <div class="author"> <a class="inverted" href=https://teropa.info>Tero Parviainen</a> <span class="icon icon--community" title="Community Contributor (Non-Google)" alt="community icon"><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="106.667px" height="100px" viewBox="-4.167 0 106.667 100" enable-background="new -4.167 0 106.667 100" xml:space="preserve"> <path d="M77.083,7.99c6.074,0,10.998,4.923,10.998,10.997c0,6.074-4.923,10.998-10.998,10.998c-6.069,0-10.993-4.923-10.993-10.998 C66.09,12.913,71.014,7.99,77.083,7.99z"/> <path d="M21.379,7.99c6.074,0,10.997,4.923,10.997,10.997c0,6.074-4.923,10.998-10.997,10.998c-6.074,0-10.997-4.923-10.997-10.998 C10.382,12.913,15.305,7.99,21.379,7.99z"/> <path d="M50.975,19.433c8.096,0,14.658,6.563,14.658,14.66c0,8.1-6.563,14.663-14.658,14.663c-8.101,0-14.663-6.563-14.663-14.663 C36.312,25.996,42.874,19.433,50.975,19.433z"/> <path d="M89.657,33.813H68.695c0.003,0.097,0.016,0.19,0.016,0.287c0,5.912-2.902,11.134-7.35,14.358h5.477 c7.087,0,12.831,5.128,12.831,11.454v8.826h20.015V43.839C99.684,38.3,95.195,33.813,89.657,33.813z"/> <path d="M76.775,91.369V62.557c0-6.324-5.129-11.457-11.455-11.457H35.646c-6.326,0-11.454,5.133-11.454,11.457v28.813H76.775z"/> <path d="M33.232,34.094c0-0.095,0.013-0.187,0.014-0.282H9.709c-5.536,0-10.026,4.488-10.026,10.027v24.897h21.073v-8.863 c0-6.325,5.745-11.454,12.832-11.454h6.952C36.117,45.193,33.232,39.987,33.232,34.094z"/> </svg> </span> <a class="inverted" href="https://github.com/teropa" alt="github logo"><span class="icon icon--github"><svg viewBox="0 0 16 16"><path d="M7.999,0.431c-4.285,0-7.76,3.474-7.76,7.761 c0,3.428,2.223,6.337,5.307,7.363c0.388,0.071,0.53-0.168,0.53-0.374c0-0.184-0.007-0.672-0.01-1.32 c-2.159,0.469-2.614-1.04-2.614-1.04c-0.353-0.896-0.862-1.135-0.862-1.135c-0.705-0.481,0.053-0.472,0.053-0.472 c0.779,0.055,1.189,0.8,1.189,0.8c0.692,1.186,1.816,0.843,2.258,0.645c0.071-0.502,0.271-0.843,0.493-1.037 C4.86,11.425,3.049,10.76,3.049,7.786c0-0.847,0.302-1.54,0.799-2.082C3.768,5.507,3.501,4.718,3.924,3.65 c0,0,0.652-0.209,2.134,0.796C6.677,4.273,7.34,4.187,8,4.184c0.659,0.003,1.323,0.089,1.943,0.261 c1.482-1.004,2.132-0.796,2.132-0.796c0.423,1.068,0.157,1.857,0.077,2.054c0.497,0.542,0.798,1.235,0.798,2.082 c0,2.981-1.814,3.637-3.543,3.829c0.279,0.24,0.527,0.713,0.527,1.437c0,1.037-0.01,1.874-0.01,2.129 c0,0.208,0.14,0.449,0.534,0.373c3.081-1.028,5.302-3.935,5.302-7.362C15.76,3.906,12.285,0.431,7.999,0.431z"/></svg> </span><span class="username">teropa</span></a> <a class="inverted" href="https://twitter.com/teropa" alt="twitter logo"><span class="icon icon--twitter"><svg viewBox="0 0 16 16"><path d="M15.969,3.058c-0.586,0.26-1.217,0.436-1.878,0.515c0.675-0.405,1.194-1.045,1.438-1.809c-0.632,0.375-1.332,0.647-2.076,0.793c-0.596-0.636-1.446-1.033-2.387-1.033c-1.806,0-3.27,1.464-3.27,3.27 c0,0.256,0.029,0.506,0.085,0.745C5.163,5.404,2.753,4.102,1.14,2.124C0.859,2.607,0.698,3.168,0.698,3.767 c0,1.134,0.577,2.135,1.455,2.722C1.616,6.472,1.112,6.325,0.671,6.08c0,0.014,0,0.027,0,0.041c0,1.584,1.127,2.906,2.623,3.206 C3.02,9.402,2.731,9.442,2.433,9.442c-0.211,0-0.416-0.021-0.615-0.059c0.416,1.299,1.624,2.245,3.055,2.271 c-1.119,0.877-2.529,1.4-4.061,1.4c-0.264,0-0.524-0.015-0.78-0.046c1.447,0.928,3.166,1.469,5.013,1.469 c6.015,0,9.304-4.983,9.304-9.304c0-0.142-0.003-0.283-0.009-0.423C14.976,4.29,15.531,3.714,15.969,3.058z"/></svg> </span><span class="username">teropa</span></a> </div> <div class="tagline"><p>An “AI-powered interactive music experience” that presents a playable 7x7 grid of musical measures. Powered by the chord-conditioned <a href="/multitrack">Multitrack MusicVAE</a> and <a href="/js">Magenta.js</a>.</p> </div> </div> <div class="card"> <div class="image"> <img src="/assets/demos/tenori_off.gif" alt="overview of Tenori-off"> <div class="overlay"> <a href=https://tenori-off.glitch.me/>play</a> <a href=https://glitch.com/edit/#!/tenori-off>see code</a> </div> </div> <div class="title">Tenori-off</div> <div class="author"> <a class="inverted" href=https://meowni.ca/>Monica Dinculescu</a> <a class="inverted" href="https://github.com/notwaldorf" alt="github logo"><span class="icon icon--github"><svg viewBox="0 0 16 16"><path d="M7.999,0.431c-4.285,0-7.76,3.474-7.76,7.761 c0,3.428,2.223,6.337,5.307,7.363c0.388,0.071,0.53-0.168,0.53-0.374c0-0.184-0.007-0.672-0.01-1.32 c-2.159,0.469-2.614-1.04-2.614-1.04c-0.353-0.896-0.862-1.135-0.862-1.135c-0.705-0.481,0.053-0.472,0.053-0.472 c0.779,0.055,1.189,0.8,1.189,0.8c0.692,1.186,1.816,0.843,2.258,0.645c0.071-0.502,0.271-0.843,0.493-1.037 C4.86,11.425,3.049,10.76,3.049,7.786c0-0.847,0.302-1.54,0.799-2.082C3.768,5.507,3.501,4.718,3.924,3.65 c0,0,0.652-0.209,2.134,0.796C6.677,4.273,7.34,4.187,8,4.184c0.659,0.003,1.323,0.089,1.943,0.261 c1.482-1.004,2.132-0.796,2.132-0.796c0.423,1.068,0.157,1.857,0.077,2.054c0.497,0.542,0.798,1.235,0.798,2.082 c0,2.981-1.814,3.637-3.543,3.829c0.279,0.24,0.527,0.713,0.527,1.437c0,1.037-0.01,1.874-0.01,2.129 c0,0.208,0.14,0.449,0.534,0.373c3.081-1.028,5.302-3.935,5.302-7.362C15.76,3.906,12.285,0.431,7.999,0.431z"/></svg> </span><span class="username">notwaldorf</span></a> <a class="inverted" href="https://twitter.com/notwaldorf" alt="twitter logo"><span class="icon icon--twitter"><svg viewBox="0 0 16 16"><path d="M15.969,3.058c-0.586,0.26-1.217,0.436-1.878,0.515c0.675-0.405,1.194-1.045,1.438-1.809c-0.632,0.375-1.332,0.647-2.076,0.793c-0.596-0.636-1.446-1.033-2.387-1.033c-1.806,0-3.27,1.464-3.27,3.27 c0,0.256,0.029,0.506,0.085,0.745C5.163,5.404,2.753,4.102,1.14,2.124C0.859,2.607,0.698,3.168,0.698,3.767 c0,1.134,0.577,2.135,1.455,2.722C1.616,6.472,1.112,6.325,0.671,6.08c0,0.014,0,0.027,0,0.041c0,1.584,1.127,2.906,2.623,3.206 C3.02,9.402,2.731,9.442,2.433,9.442c-0.211,0-0.416-0.021-0.615-0.059c0.416,1.299,1.624,2.245,3.055,2.271 c-1.119,0.877-2.529,1.4-4.061,1.4c-0.264,0-0.524-0.015-0.78-0.046c1.447,0.928,3.166,1.469,5.013,1.469 c6.015,0,9.304-4.983,9.304-9.304c0-0.142-0.003-0.283-0.009-0.423C14.976,4.29,15.531,3.714,15.969,3.058z"/></svg> </span><span class="username">notwaldorf</span></a> </div> <div class="tagline"><p>A creative take on a rare electronic sequencer. Uses the <a href="/js">Magenta.js</a> to generate drum patterns when you hit the “Improvise” button.</p> </div> </div> <div class="card"> <div class="image"> <img src="/assets/demos/neural_drum_machine.gif" alt="overview of Neural Drum Machine"> <div class="overlay"> <a href=https://codepen.io/teropa/full/RMGxOQ/>play</a> <a href=/blog/2018/05/03/connecting-with-magenta-js#a-drum-machine>read blog</a> <a href=https://codepen.io/teropa/pen/RMGxOQ>see code</a> </div> </div> <div class="title">Neural Drum Machine</div> <div class="author"> <a class="inverted" href=https://teropa.info>Tero Parviainen</a> <span class="icon icon--community" title="Community Contributor (Non-Google)" alt="community icon"><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="106.667px" height="100px" viewBox="-4.167 0 106.667 100" enable-background="new -4.167 0 106.667 100" xml:space="preserve"> <path d="M77.083,7.99c6.074,0,10.998,4.923,10.998,10.997c0,6.074-4.923,10.998-10.998,10.998c-6.069,0-10.993-4.923-10.993-10.998 C66.09,12.913,71.014,7.99,77.083,7.99z"/> <path d="M21.379,7.99c6.074,0,10.997,4.923,10.997,10.997c0,6.074-4.923,10.998-10.997,10.998c-6.074,0-10.997-4.923-10.997-10.998 C10.382,12.913,15.305,7.99,21.379,7.99z"/> <path d="M50.975,19.433c8.096,0,14.658,6.563,14.658,14.66c0,8.1-6.563,14.663-14.658,14.663c-8.101,0-14.663-6.563-14.663-14.663 C36.312,25.996,42.874,19.433,50.975,19.433z"/> <path d="M89.657,33.813H68.695c0.003,0.097,0.016,0.19,0.016,0.287c0,5.912-2.902,11.134-7.35,14.358h5.477 c7.087,0,12.831,5.128,12.831,11.454v8.826h20.015V43.839C99.684,38.3,95.195,33.813,89.657,33.813z"/> <path d="M76.775,91.369V62.557c0-6.324-5.129-11.457-11.455-11.457H35.646c-6.326,0-11.454,5.133-11.454,11.457v28.813H76.775z"/> <path d="M33.232,34.094c0-0.095,0.013-0.187,0.014-0.282H9.709c-5.536,0-10.026,4.488-10.026,10.027v24.897h21.073v-8.863 c0-6.325,5.745-11.454,12.832-11.454h6.952C36.117,45.193,33.232,39.987,33.232,34.094z"/> </svg> </span> <a class="inverted" href="https://github.com/teropa" alt="github logo"><span class="icon icon--github"><svg viewBox="0 0 16 16"><path d="M7.999,0.431c-4.285,0-7.76,3.474-7.76,7.761 c0,3.428,2.223,6.337,5.307,7.363c0.388,0.071,0.53-0.168,0.53-0.374c0-0.184-0.007-0.672-0.01-1.32 c-2.159,0.469-2.614-1.04-2.614-1.04c-0.353-0.896-0.862-1.135-0.862-1.135c-0.705-0.481,0.053-0.472,0.053-0.472 c0.779,0.055,1.189,0.8,1.189,0.8c0.692,1.186,1.816,0.843,2.258,0.645c0.071-0.502,0.271-0.843,0.493-1.037 C4.86,11.425,3.049,10.76,3.049,7.786c0-0.847,0.302-1.54,0.799-2.082C3.768,5.507,3.501,4.718,3.924,3.65 c0,0,0.652-0.209,2.134,0.796C6.677,4.273,7.34,4.187,8,4.184c0.659,0.003,1.323,0.089,1.943,0.261 c1.482-1.004,2.132-0.796,2.132-0.796c0.423,1.068,0.157,1.857,0.077,2.054c0.497,0.542,0.798,1.235,0.798,2.082 c0,2.981-1.814,3.637-3.543,3.829c0.279,0.24,0.527,0.713,0.527,1.437c0,1.037-0.01,1.874-0.01,2.129 c0,0.208,0.14,0.449,0.534,0.373c3.081-1.028,5.302-3.935,5.302-7.362C15.76,3.906,12.285,0.431,7.999,0.431z"/></svg> </span><span class="username">teropa</span></a> <a class="inverted" href="https://twitter.com/teropa" alt="twitter logo"><span class="icon icon--twitter"><svg viewBox="0 0 16 16"><path d="M15.969,3.058c-0.586,0.26-1.217,0.436-1.878,0.515c0.675-0.405,1.194-1.045,1.438-1.809c-0.632,0.375-1.332,0.647-2.076,0.793c-0.596-0.636-1.446-1.033-2.387-1.033c-1.806,0-3.27,1.464-3.27,3.27 c0,0.256,0.029,0.506,0.085,0.745C5.163,5.404,2.753,4.102,1.14,2.124C0.859,2.607,0.698,3.168,0.698,3.767 c0,1.134,0.577,2.135,1.455,2.722C1.616,6.472,1.112,6.325,0.671,6.08c0,0.014,0,0.027,0,0.041c0,1.584,1.127,2.906,2.623,3.206 C3.02,9.402,2.731,9.442,2.433,9.442c-0.211,0-0.416-0.021-0.615-0.059c0.416,1.299,1.624,2.245,3.055,2.271 c-1.119,0.877-2.529,1.4-4.061,1.4c-0.264,0-0.524-0.015-0.78-0.046c1.447,0.928,3.166,1.469,5.013,1.469 c6.015,0,9.304-4.983,9.304-9.304c0-0.142-0.003-0.283-0.009-0.423C14.976,4.29,15.531,3.714,15.969,3.058z"/></svg> </span><span class="username">teropa</span></a> </div> <div class="tagline"><p>An experimental drum machine powered by <a href="/js">Magenta.js</a> using the <a href="https://goo.gl/magenta/drumsrnn">DrumsRNN</a> and <a href="/music-vae">MusicVAE</a> models.</p> </div> </div> <div class="card"> <div class="image"> <video autoplay loop muted playsinline alt="overview of Beat Blender"> <source src="/assets/music_vae/beat-blender.mp4" type="video/mp4"> </video> <div class="overlay"> <a href=https://g.co/beatblender>play</a> <a href=/music-vae>read blog</a> <a href=https://github.com/googlecreativelab/beat-blender>see code</a> </div> </div> <div class="title">Beat Blender</div> <div class="author"> <a class="inverted" href=http://www.torinblankensmith.com/>Torin Blankensmith</a> <a class="inverted" href="https://github.com/torinmb" alt="github logo"><span class="icon icon--github"><svg viewBox="0 0 16 16"><path d="M7.999,0.431c-4.285,0-7.76,3.474-7.76,7.761 c0,3.428,2.223,6.337,5.307,7.363c0.388,0.071,0.53-0.168,0.53-0.374c0-0.184-0.007-0.672-0.01-1.32 c-2.159,0.469-2.614-1.04-2.614-1.04c-0.353-0.896-0.862-1.135-0.862-1.135c-0.705-0.481,0.053-0.472,0.053-0.472 c0.779,0.055,1.189,0.8,1.189,0.8c0.692,1.186,1.816,0.843,2.258,0.645c0.071-0.502,0.271-0.843,0.493-1.037 C4.86,11.425,3.049,10.76,3.049,7.786c0-0.847,0.302-1.54,0.799-2.082C3.768,5.507,3.501,4.718,3.924,3.65 c0,0,0.652-0.209,2.134,0.796C6.677,4.273,7.34,4.187,8,4.184c0.659,0.003,1.323,0.089,1.943,0.261 c1.482-1.004,2.132-0.796,2.132-0.796c0.423,1.068,0.157,1.857,0.077,2.054c0.497,0.542,0.798,1.235,0.798,2.082 c0,2.981-1.814,3.637-3.543,3.829c0.279,0.24,0.527,0.713,0.527,1.437c0,1.037-0.01,1.874-0.01,2.129 c0,0.208,0.14,0.449,0.534,0.373c3.081-1.028,5.302-3.935,5.302-7.362C15.76,3.906,12.285,0.431,7.999,0.431z"/></svg> </span><span class="username">torinmb</span></a> <a class="inverted" href="https://twitter.com/tBlankensmith" alt="twitter logo"><span class="icon icon--twitter"><svg viewBox="0 0 16 16"><path d="M15.969,3.058c-0.586,0.26-1.217,0.436-1.878,0.515c0.675-0.405,1.194-1.045,1.438-1.809c-0.632,0.375-1.332,0.647-2.076,0.793c-0.596-0.636-1.446-1.033-2.387-1.033c-1.806,0-3.27,1.464-3.27,3.27 c0,0.256,0.029,0.506,0.085,0.745C5.163,5.404,2.753,4.102,1.14,2.124C0.859,2.607,0.698,3.168,0.698,3.767 c0,1.134,0.577,2.135,1.455,2.722C1.616,6.472,1.112,6.325,0.671,6.08c0,0.014,0,0.027,0,0.041c0,1.584,1.127,2.906,2.623,3.206 C3.02,9.402,2.731,9.442,2.433,9.442c-0.211,0-0.416-0.021-0.615-0.059c0.416,1.299,1.624,2.245,3.055,2.271 c-1.119,0.877-2.529,1.4-4.061,1.4c-0.264,0-0.524-0.015-0.78-0.046c1.447,0.928,3.166,1.469,5.013,1.469 c6.015,0,9.304-4.983,9.304-9.304c0-0.142-0.003-0.283-0.009-0.423C14.976,4.29,15.531,3.714,15.969,3.058z"/></svg> </span><span class="username">tBlankensmith</span></a> <br/> <a class="inverted" href=http://haptic-data.com>Kyle Phillips</a> <a class="inverted" href="https://github.com/hapticdata" alt="github logo"><span class="icon icon--github"><svg viewBox="0 0 16 16"><path d="M7.999,0.431c-4.285,0-7.76,3.474-7.76,7.761 c0,3.428,2.223,6.337,5.307,7.363c0.388,0.071,0.53-0.168,0.53-0.374c0-0.184-0.007-0.672-0.01-1.32 c-2.159,0.469-2.614-1.04-2.614-1.04c-0.353-0.896-0.862-1.135-0.862-1.135c-0.705-0.481,0.053-0.472,0.053-0.472 c0.779,0.055,1.189,0.8,1.189,0.8c0.692,1.186,1.816,0.843,2.258,0.645c0.071-0.502,0.271-0.843,0.493-1.037 C4.86,11.425,3.049,10.76,3.049,7.786c0-0.847,0.302-1.54,0.799-2.082C3.768,5.507,3.501,4.718,3.924,3.65 c0,0,0.652-0.209,2.134,0.796C6.677,4.273,7.34,4.187,8,4.184c0.659,0.003,1.323,0.089,1.943,0.261 c1.482-1.004,2.132-0.796,2.132-0.796c0.423,1.068,0.157,1.857,0.077,2.054c0.497,0.542,0.798,1.235,0.798,2.082 c0,2.981-1.814,3.637-3.543,3.829c0.279,0.24,0.527,0.713,0.527,1.437c0,1.037-0.01,1.874-0.01,2.129 c0,0.208,0.14,0.449,0.534,0.373c3.081-1.028,5.302-3.935,5.302-7.362C15.76,3.906,12.285,0.431,7.999,0.431z"/></svg> </span><span class="username">hapticdata</span></a> <a class="inverted" href="https://twitter.com/hapticdata" alt="twitter logo"><span class="icon icon--twitter"><svg viewBox="0 0 16 16"><path d="M15.969,3.058c-0.586,0.26-1.217,0.436-1.878,0.515c0.675-0.405,1.194-1.045,1.438-1.809c-0.632,0.375-1.332,0.647-2.076,0.793c-0.596-0.636-1.446-1.033-2.387-1.033c-1.806,0-3.27,1.464-3.27,3.27 c0,0.256,0.029,0.506,0.085,0.745C5.163,5.404,2.753,4.102,1.14,2.124C0.859,2.607,0.698,3.168,0.698,3.767 c0,1.134,0.577,2.135,1.455,2.722C1.616,6.472,1.112,6.325,0.671,6.08c0,0.014,0,0.027,0,0.041c0,1.584,1.127,2.906,2.623,3.206 C3.02,9.402,2.731,9.442,2.433,9.442c-0.211,0-0.416-0.021-0.615-0.059c0.416,1.299,1.624,2.245,3.055,2.271 c-1.119,0.877-2.529,1.4-4.061,1.4c-0.264,0-0.524-0.015-0.78-0.046c1.447,0.928,3.166,1.469,5.013,1.469 c6.015,0,9.304-4.983,9.304-9.304c0-0.142-0.003-0.283-0.009-0.423C14.976,4.29,15.531,3.714,15.969,3.058z"/></svg> </span><span class="username">hapticdata</span></a> </div> <div class="tagline"><p>Generate two dimensional palettes of drum beats and draw paths through the latent space to create evolving beats. Built by Google Creative Lab using <a href="/music-vae">MusicVAE</a>.</p> </div> </div> <div class="card"> <div class="image"> <video autoplay loop muted playsinline alt="overview of Latent Loops"> <source src="/assets/composing_palettes/latent_loops_grey.mp4" type="video/mp4"> </video> <div class="overlay"> <a href=https://goo.gl/magenta/latent-loops>play</a> <a href=/music-vae>read blog</a> </div> </div> <div class="title">Latent Loops</div> <div class="author"> <a class="inverted" href=http://catherinemccurry.com>Catherine McCurry</a> <a class="inverted" href="https://github.com/currycurry" alt="github logo"><span class="icon icon--github"><svg viewBox="0 0 16 16"><path d="M7.999,0.431c-4.285,0-7.76,3.474-7.76,7.761 c0,3.428,2.223,6.337,5.307,7.363c0.388,0.071,0.53-0.168,0.53-0.374c0-0.184-0.007-0.672-0.01-1.32 c-2.159,0.469-2.614-1.04-2.614-1.04c-0.353-0.896-0.862-1.135-0.862-1.135c-0.705-0.481,0.053-0.472,0.053-0.472 c0.779,0.055,1.189,0.8,1.189,0.8c0.692,1.186,1.816,0.843,2.258,0.645c0.071-0.502,0.271-0.843,0.493-1.037 C4.86,11.425,3.049,10.76,3.049,7.786c0-0.847,0.302-1.54,0.799-2.082C3.768,5.507,3.501,4.718,3.924,3.65 c0,0,0.652-0.209,2.134,0.796C6.677,4.273,7.34,4.187,8,4.184c0.659,0.003,1.323,0.089,1.943,0.261 c1.482-1.004,2.132-0.796,2.132-0.796c0.423,1.068,0.157,1.857,0.077,2.054c0.497,0.542,0.798,1.235,0.798,2.082 c0,2.981-1.814,3.637-3.543,3.829c0.279,0.24,0.527,0.713,0.527,1.437c0,1.037-0.01,1.874-0.01,2.129 c0,0.208,0.14,0.449,0.534,0.373c3.081-1.028,5.302-3.935,5.302-7.362C15.76,3.906,12.285,0.431,7.999,0.431z"/></svg> </span><span class="username">currycurry</span></a> <a class="inverted" href="https://twitter.com/axlsetback" alt="twitter logo"><span class="icon icon--twitter"><svg viewBox="0 0 16 16"><path d="M15.969,3.058c-0.586,0.26-1.217,0.436-1.878,0.515c0.675-0.405,1.194-1.045,1.438-1.809c-0.632,0.375-1.332,0.647-2.076,0.793c-0.596-0.636-1.446-1.033-2.387-1.033c-1.806,0-3.27,1.464-3.27,3.27 c0,0.256,0.029,0.506,0.085,0.745C5.163,5.404,2.753,4.102,1.14,2.124C0.859,2.607,0.698,3.168,0.698,3.767 c0,1.134,0.577,2.135,1.455,2.722C1.616,6.472,1.112,6.325,0.671,6.08c0,0.014,0,0.027,0,0.041c0,1.584,1.127,2.906,2.623,3.206 C3.02,9.402,2.731,9.442,2.433,9.442c-0.211,0-0.416-0.021-0.615-0.059c0.416,1.299,1.624,2.245,3.055,2.271 c-1.119,0.877-2.529,1.4-4.061,1.4c-0.264,0-0.524-0.015-0.78-0.046c1.447,0.928,3.166,1.469,5.013,1.469 c6.015,0,9.304-4.983,9.304-9.304c0-0.142-0.003-0.283-0.009-0.423C14.976,4.29,15.531,3.714,15.969,3.058z"/></svg> </span><span class="username">axlsetback</span></a> <br/> Zach Schwartz <a class="inverted" href="https://github.com/zischwartz" alt="github logo"><span class="icon icon--github"><svg viewBox="0 0 16 16"><path d="M7.999,0.431c-4.285,0-7.76,3.474-7.76,7.761 c0,3.428,2.223,6.337,5.307,7.363c0.388,0.071,0.53-0.168,0.53-0.374c0-0.184-0.007-0.672-0.01-1.32 c-2.159,0.469-2.614-1.04-2.614-1.04c-0.353-0.896-0.862-1.135-0.862-1.135c-0.705-0.481,0.053-0.472,0.053-0.472 c0.779,0.055,1.189,0.8,1.189,0.8c0.692,1.186,1.816,0.843,2.258,0.645c0.071-0.502,0.271-0.843,0.493-1.037 C4.86,11.425,3.049,10.76,3.049,7.786c0-0.847,0.302-1.54,0.799-2.082C3.768,5.507,3.501,4.718,3.924,3.65 c0,0,0.652-0.209,2.134,0.796C6.677,4.273,7.34,4.187,8,4.184c0.659,0.003,1.323,0.089,1.943,0.261 c1.482-1.004,2.132-0.796,2.132-0.796c0.423,1.068,0.157,1.857,0.077,2.054c0.497,0.542,0.798,1.235,0.798,2.082 c0,2.981-1.814,3.637-3.543,3.829c0.279,0.24,0.527,0.713,0.527,1.437c0,1.037-0.01,1.874-0.01,2.129 c0,0.208,0.14,0.449,0.534,0.373c3.081-1.028,5.302-3.935,5.302-7.362C15.76,3.906,12.285,0.431,7.999,0.431z"/></svg> </span><span class="username">zischwartz</span></a> <br/> Harold Cooper <a class="inverted" href="https://github.com/hrldcpr" alt="github logo"><span class="icon icon--github"><svg viewBox="0 0 16 16"><path d="M7.999,0.431c-4.285,0-7.76,3.474-7.76,7.761 c0,3.428,2.223,6.337,5.307,7.363c0.388,0.071,0.53-0.168,0.53-0.374c0-0.184-0.007-0.672-0.01-1.32 c-2.159,0.469-2.614-1.04-2.614-1.04c-0.353-0.896-0.862-1.135-0.862-1.135c-0.705-0.481,0.053-0.472,0.053-0.472 c0.779,0.055,1.189,0.8,1.189,0.8c0.692,1.186,1.816,0.843,2.258,0.645c0.071-0.502,0.271-0.843,0.493-1.037 C4.86,11.425,3.049,10.76,3.049,7.786c0-0.847,0.302-1.54,0.799-2.082C3.768,5.507,3.501,4.718,3.924,3.65 c0,0,0.652-0.209,2.134,0.796C6.677,4.273,7.34,4.187,8,4.184c0.659,0.003,1.323,0.089,1.943,0.261 c1.482-1.004,2.132-0.796,2.132-0.796c0.423,1.068,0.157,1.857,0.077,2.054c0.497,0.542,0.798,1.235,0.798,2.082 c0,2.981-1.814,3.637-3.543,3.829c0.279,0.24,0.527,0.713,0.527,1.437c0,1.037-0.01,1.874-0.01,2.129 c0,0.208,0.14,0.449,0.534,0.373c3.081-1.028,5.302-3.935,5.302-7.362C15.76,3.906,12.285,0.431,7.999,0.431z"/></svg> </span><span class="username">hrldcpr</span></a> </div> <div class="tagline"><p>Sketch melodies on a matrix tuned to different scales, explore a palette of generated melodic loops, and sequence longer compositions using them. Built by Google’s Pie Shop using <a href="/music-vae">MusicVAE</a>.</p> </div> </div> </div> </div> </section> </div> <footer> <div class="footer-content"> <div class="logo"> <a href="https://ai.google/" target="_blank" rel="noopener" title="Google AI"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 157.2 40.88"><defs><style>.cls-1{fill:none;}.cls-2{fill:#80868b;}.cls-3{fill:#80868b;}.cls-4{fill:#80868b;}.cls-5{fill:#80868b;}.cls-6{fill:#80868b;}</style></defs><g id="Running_copy" data-name="Running copy"><path class="cls-1" d="M82.91,16.35A4.8,4.8,0,0,0,79.29,18a5.66,5.66,0,0,0-1.49,4,5.53,5.53,0,0,0,1.49,3.94,4.78,4.78,0,0,0,3.62,1.58,4.47,4.47,0,0,0,3.49-1.58A5.7,5.7,0,0,0,87.81,22a5.84,5.84,0,0,0-1.41-4A4.48,4.48,0,0,0,82.91,16.35Z"></path><path class="cls-1" d="M42.8,16.35a4.92,4.92,0,0,0-3.66,1.57,5.49,5.49,0,0,0-1.51,4,5.52,5.52,0,0,0,1.52,4,5,5,0,0,0,7.3,0,5.48,5.48,0,0,0,1.53-4,5.49,5.49,0,0,0-1.51-4A4.93,4.93,0,0,0,42.8,16.35Z"></path><path class="cls-1" d="M62.89,16.35a4.93,4.93,0,0,0-3.67,1.57,5.53,5.53,0,0,0-1.51,4,5.48,5.48,0,0,0,1.53,4,5,5,0,0,0,7.3,0,5.48,5.48,0,0,0,1.53-4,5.49,5.49,0,0,0-1.51-4A4.93,4.93,0,0,0,62.89,16.35Z"></path><path class="cls-1" d="M111,16.82a4.15,4.15,0,0,0-2.12-.54,4.79,4.79,0,0,0-3.32,1.46,4.9,4.9,0,0,0-1.47,3.9l8.2-3.41A2.82,2.82,0,0,0,111,16.82Z"></path><rect class="cls-2" x="94.13" y="3.56" width="4.03" height="26.97"></rect><path class="cls-3" d="M42.8,12.74a9,9,0,0,0-6.53,2.62,8.83,8.83,0,0,0-2.68,6.55,8.84,8.84,0,0,0,2.68,6.56,9.46,9.46,0,0,0,13.07,0A8.83,8.83,0,0,0,52,21.91a8.82,8.82,0,0,0-2.67-6.55A9,9,0,0,0,42.8,12.74Zm3.65,13.15a5,5,0,0,1-7.3,0,5.52,5.52,0,0,1-1.52-4,5.49,5.49,0,0,1,1.51-4,5.06,5.06,0,0,1,7.33,0,5.49,5.49,0,0,1,1.51,4A5.48,5.48,0,0,1,46.45,25.89Z"></path><path class="cls-4" d="M18.89,15.55v3.9h9.32a8.27,8.27,0,0,1-2.12,4.9,9.76,9.76,0,0,1-7.2,2.85,9.75,9.75,0,0,1-7.24-3,10.07,10.07,0,0,1-3-7.33,10.07,10.07,0,0,1,3-7.33,9.75,9.75,0,0,1,7.24-3,9.89,9.89,0,0,1,7,2.78l2.75-2.74a13.63,13.63,0,0,0-9.77-3.93A14.07,14.07,0,0,0,8.71,6.78,13.58,13.58,0,0,0,4.44,16.84,13.56,13.56,0,0,0,8.71,26.9a14.07,14.07,0,0,0,10.18,4.19,13.12,13.12,0,0,0,9.94-4q3.38-3.36,3.37-9.1a12.59,12.59,0,0,0-.2-2.44Z"></path><path class="cls-4" d="M87.53,14.79h-.14a5.64,5.64,0,0,0-2-1.46,6.66,6.66,0,0,0-2.83-.59,8.37,8.37,0,0,0-6.15,2.69A9,9,0,0,0,73.77,22a8.86,8.86,0,0,0,2.64,6.46,8.36,8.36,0,0,0,6.15,2.68A5.87,5.87,0,0,0,87.39,29h.14v1.32a5.63,5.63,0,0,1-1.3,4,4.69,4.69,0,0,1-3.6,1.39,4.34,4.34,0,0,1-2.88-1A5.94,5.94,0,0,1,78,32.44L74.5,33.9a9.43,9.43,0,0,0,3,3.79,8.07,8.07,0,0,0,5.14,1.64,8.61,8.61,0,0,0,6.27-2.39c1.64-1.58,2.45-4,2.45-7.17V13.3H87.53ZM86.4,25.89a4.47,4.47,0,0,1-3.49,1.58,4.78,4.78,0,0,1-3.62-1.58A5.53,5.53,0,0,1,77.8,22a5.66,5.66,0,0,1,1.49-4,4.8,4.8,0,0,1,3.62-1.6A4.48,4.48,0,0,1,86.4,18a5.84,5.84,0,0,1,1.41,4A5.7,5.7,0,0,1,86.4,25.89Z"></path><path class="cls-5" d="M62.89,12.74a9,9,0,0,0-6.53,2.62,8.79,8.79,0,0,0-2.68,6.55,8.8,8.8,0,0,0,2.68,6.56,9.45,9.45,0,0,0,13.06,0,8.8,8.8,0,0,0,2.68-6.56,8.79,8.79,0,0,0-2.68-6.55A9,9,0,0,0,62.89,12.74Zm3.65,13.15a5,5,0,0,1-7.3,0,5.48,5.48,0,0,1-1.53-4,5.53,5.53,0,0,1,1.51-4,5.07,5.07,0,0,1,7.34,0,5.49,5.49,0,0,1,1.51,4A5.48,5.48,0,0,1,66.54,25.89Z"></path><path class="cls-3" d="M109.22,27.47a4.68,4.68,0,0,1-4.45-2.78L117,19.62l-.42-1a11,11,0,0,0-.91-1.81,10.64,10.64,0,0,0-1.49-1.86,7.14,7.14,0,0,0-2.36-1.56,7.73,7.73,0,0,0-3.1-.61,8.27,8.27,0,0,0-6.13,2.57,9.05,9.05,0,0,0-2.52,6.6,8.93,8.93,0,0,0,2.61,6.54,8.74,8.74,0,0,0,6.5,2.64,8.43,8.43,0,0,0,4.69-1.25,10.13,10.13,0,0,0,3-2.82l-3.13-2.08A5.26,5.26,0,0,1,109.22,27.47Zm-3.64-9.73a4.79,4.79,0,0,1,3.32-1.46,4.15,4.15,0,0,1,2.12.54,2.82,2.82,0,0,1,1.29,1.41l-8.2,3.41A4.9,4.9,0,0,1,105.58,17.74Z"></path><path class="cls-6" d="M127.47,30.54h-3.55l9.39-24.9h3.62l9.39,24.9h-3.55l-2.4-6.75H129.9Zm7.58-21L131,20.8h8.28L135.19,9.57Z"></path><path class="cls-6" d="M152.44,30.54h-3.2V5.64h3.2Z"></path></g></svg> </a> </div> <ul> <li> <a href="https://twitter.com/search?q=%23madewithmagenta" target="_blank" rel="noopener"> Twitter </a> </li> <li> <a href="/blog" target="_blank" rel="noopener"> Blog </a> </li> <li> <a href="https://github.com/tensorflow/magenta" target="_blank" rel="noopener"> GitHub </a> </li> <li> <a href="https://www.google.com/policies/privacy/" target="_blank" rel="noopener"> Privacy </a> </li> <li> <a href="https://www.google.com/policies/terms/" target="_blank" rel="noopener"> Terms </a> </li> </ul> </div> </footer> </body> <script src="/js/main.js"></script> </html>