AnnYee/semi-conductor
0
1<!--2Copyright 2019 Google LLC3 4Licensed to the Apache Software Foundation (ASF) under one5or more contributor license agreements. See the NOTICE file6distributed with this work for additional information7regarding copyright ownership. The ASF licenses this file8to you under the Apache License, Version 2.0 (the9"License"); you may not use this file except in compliance10with the License. You may obtain a copy of the License at11 12 http://www.apache.org/licenses/LICENSE-2.013 14Unless required by applicable law or agreed to in writing,15software distributed under the License is distributed on an16"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY17KIND, either express or implied. See the License for the18specific language governing permissions and limitations19under the License.20-->21 22<!doctype html>23 24<html lang="en">25<head>26 <meta charset="utf-8">27 <meta name="viewport" content="width=device-width, initial-scale=1.0">28 29 <!--30 _____ ______ __ __ _____ _____ ____ _ _ _____ _ _ _____ _______ ____ _____ 31 / ____| ____| \/ |_ _| / ____/ __ \| \ | | __ \| | | |/ ____|__ __/ __ \| __ \ 32 | (___ | |__ | \ / | | |______| | | | | | \| | | | | | | | | | | | | | | |__) |33 \___ \| __| | |\/| | | |______| | | | | | . ` | | | | | | | | | | | | | | _ / 34 ____) | |____| | | |_| |_ | |___| |__| | |\ | |__| | |__| | |____ | | | |__| | | \ \ 35 |_____/|______|_| |_|_____| \_____\____/|_| \_|_____/ \____/ \_____| |_| \____/|_| \_\ 36 37 Made in Australia. Beware of danger noodles ---========(:)-<38 -->39 40 <!-- Standard meta tags -->41 <title>Semi-Conductor</title>42 <meta name="description" content="">43 <meta name="author" content="Google Creative Lab">44 45 <!-- Schema.org markup for Google+ (goodnight, sweet prince) -->46 <meta itemprop="name" content="Semi-Conductor">47 <meta itemprop="description" content="An AI experiment to conduct an orchestra inside your web browser.">48 <meta itemprop="image" content="https://semiconductor.withgoogle.com/static/share_image.jpg">49 50 <!-- Twitter card data -->51 <meta name="twitter:card" content="summary_large_image">52 <meta name="twitter:site" content="@google">53 <meta name="twitter:title" content="Semi-Conductor">54 <meta name="twitter:description" content="An AI experiment to conduct an orchestra inside your web browser.">55 <meta name="twitter:creator" content="@google">56 <meta name="twitter:image:src" content="https://semiconductor.withgoogle.com/static/share_image.jpg">57 58 <!-- Open Graph data -->59 <meta property="og:title" content="Semi-Conductor" />60 <meta property="og:type" content="website" />61 <meta property="og:url" content="https://semiconductor.withgoogle.com" />62 <meta property="og:image" content="http://semiconductor.withgoogle.com/static/share_image.jpg" />63 <meta property="og:image:secure_url" content="https://semiconductor.withgoogle.com/static/share_image.jpg" />64 <meta property="og:description" content="An AI experiment to conduct an orchestra inside your web browser." />65 66 <!-- Favicons, fonts, stylesheets & scripts -->67 <link rel="icon" type="image/png" href="assets/favicon-32x32.png" sizes="32x32" />68 <link rel="icon" type="image/png" href="assets/favicon-16x16.png" sizes="16x16" />69 <link href="https://fonts.googleapis.com/css?family=Poppins:400" rel="stylesheet">70 <link rel="stylesheet" href="styles/main.scss">71 <script src="scripts/main.js" defer></script>72</head>73 74<!-- Hey nice, there's a bit of room down here for the body -->75<body>76 <div class="page-error">77 <div class="error-container">78 <img src="assets/error.svg" alt="A broken treble clef sign" />79 <h2 class="error-title">We're in treble.</h2>80 <p class="error-text">Something went wrong and I don't know what it is. Maybe you could just... sing along?</p>81 </div>82 </div>83 84 <div class="dot-bg">85 <div class="start-bg-fade"></div>86 <div class="start-bg"></div>87 </div>88 89 <!-- INFO PAGE -->90 <section class="page-info">91 <div class="info-content-outer">92 <div class="info-content">93 <h1>How It Works</h1>94 <p>Semi-Conductor is an experiment that lets you conduct your own95 orchestra through your browser. You can move your arms to change96 the tempo, volume, and instrumentation of a piece of music.</p>97 <p>It uses Tensorflow.js, a machine learning library that works98 in the browser, to map out your movements through your webcam.99 An algorithm plays along to the score as you conduct, using hundreds100 of tiny audio files from live recorded instruments.</p>101 <p>Find more information about PoseNet102 <a href="https://medium.com/tensorflow/real-time-human-pose-estimation-in-the-browser-with-tensorflow-js-7dd0bc881cd5" target="_blank">103 on the TensorFlow blog</a>.</p>104 <p>105 <p>Built by Rupert Parry, Melissa Lu, Haylie Craig and Samantha106 Cordingley from Google Creative Lab, Sydney.</p>107 <p><button class="button-info-close">Back</button></p>108 </div>109 </div>110 </section>111 112 <!-- FINISH PAGE -->113 <section class="page-finish">114 <div class="roses-container"></div>115 <div class="finish-content-outer">116 <div class="finish-content">117 <p class="finish-text">Bravo!</p>118 <button class="button-restart button-large">119 Play Again120 </button>121 </div>122 </div>123 </section> 124 125 <!-- START PAGE -->126 <section class="page-start">127 <div class="start-content">128 <h1 class="start-logo">129 <img src="assets/logo.gif" alt="Semi-Conductor" class="start-logo-image">130 </h1>131 <h2 class="start-subtitle">Conduct an AI orchestra through your browser</h2>132 <div class="start-button-container">133 <button class="button-large progress start-button" disabled>134 Loading...135 </button>136 </div>137 </div>138 139 <footer class="start-footer">140 <img src="assets/footer-intro.svg"141 class="start-footer-image"142 alt="This is an A.I. Experiment. Made with some friends from Google.">143 </footer>144 </section>145 146 <!-- TUTORIAL PAGE -->147 <section class="page-tutorial">148 <section class="tutorial-part tutorial-part-1">149 <div class="card tutorial-part-content">150 <div class="tutorial-text">151 Make the orchestra play by moving your arms.152 <br>The faster you go, the faster they go.153 </div>154 <div class="tutorial-image">155 <img src="assets/tutorial-conducting.gif">156 </div>157 <div class="tutorial-controls">158 <button class="button-large tutorial-next">Next</button>159 </div>160 </div>161 </section>162 <section class="tutorial-part tutorial-part-2">163 <div class="card tutorial-part-content">164 <div class="tutorial-text">165 Move up and down to play louder and softer166 </div>167 <div class="tutorial-image">168 <img src="assets/tutorial-volume.gif">169 </div>170 <div class="tutorial-controls">171 <button class="button-large tutorial-next">Next</button>172 </div>173 </div>174 </section>175 <section class="tutorial-part tutorial-part-3">176 <div class="card tutorial-part-content">177 <div class="tutorial-text">178 Move from side-to-side to control which sections play179 </div>180 <div class="tutorial-image">181 <img src="assets/tutorial-sections.gif">182 </div>183 <div class="tutorial-controls">184 <button class="button-large tutorial-end">Let's go</button>185 </div>186 </div>187 </section>188 </section>189 190 <!-- MAIN PAGE -->191 <section class="page-main">192 <nav class="main-topbar">193 <div class="main-topbar-buttons">194 <button class="button-restart">195 <img src="assets/icon-restart.svg" alt="Restart">196 </button>197 <button class="button-info">198 <img src="assets/icon-info.svg" alt="Info">199 </button>200 </div>201 <div class="timebar">202 <div class="song-title song-progress progress"></div>203 </div>204 <h1><img class="main-topbar-logo" src="assets/logo.gif"></h1>205 </nav>206 207 <div class="orchestra-container">208 <div class="tempo-meter-container">209 <div class="tempo-meter-container-inner">210 <div class="tempo-icon-container">211 <div class="tempo-icon">212 <img src="assets/metronome.svg">213 <div class="tempo-icon-label">TEMPO</div>214 </div>215 216 </div>217 <div class="tempo-meter-clipping-box">218 <div class="tempo-meter"></div>219 <div class="tempo-meter-background"></div>220 </div>221 </div>222 </div>223 224 <div class="orchestra">225 226 </div>227 </div>228 229 <div class="video-outer">230 <div class="video-container">231 <div class="video-label top">LOUDER</div>232 <div class="video-label left">HIGH STRINGS</div>233 <div class="video-label bottom">SOFTER</div>234 <div class="video-label right">LOW STRINGS</div>235 236 <div class="video-border">237 <div class="calibration-overlay">238 <img src="assets/calibration-overlay.png">239 </div>240 <div class="conducting-overlay"></div>241 <div class="countdown-overlay">242 <p class="countdown-text"></p>243 </div>244 </div>245 </div>246 <div class="instructions">247 <p>Fit your body in frame, Maestro. This is a one person experiment.</p>248 </div>249 </div>250 </section>251 <!-- Google Analytics -->252 <script>253 (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){254 (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),255 m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)256 })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');257 258 ga('create', 'UA-129142084-1', 'auto');259 ga('set', 'referrer', document.referrer.split('?')[0]);260 ga('send', 'pageview');261 </script>262 <!-- End Google Analytics -->263</body>264</html>