diff --git a/static/src/Main.js b/static/src/Main.js index 85b934c..e0f1923 100644 --- a/static/src/Main.js +++ b/static/src/Main.js @@ -38,6 +38,7 @@ splash.on('about', () => { about.on('close', () => { if (!splash.loaded || splash.isOpen()){ splash.show() + keyboard._active = true } else { keyboard.activate() @@ -54,6 +55,7 @@ about.on('open', () => { const idleTimeout = new IdleTimeout( () => { keyboard.deactivate(); + about.close(); splash.show(); keyboard._active = true; }, diff --git a/static/src/interface/About.js b/static/src/interface/About.js index 32b5dc9..e4cbbc7 100644 --- a/static/src/interface/About.js +++ b/static/src/interface/About.js @@ -23,12 +23,28 @@ const tfLink = 'https://www.tensorflow.org/' const toneLink = 'https://github.com/Tonejs/Tone.js' const sourceCode = 'https://github.com/googlecreativelab/aiexperiments-ai-duet' -const blurbCopy = `Built by Yotam Mann with friends on the Magenta and Creative Lab teams at Google. - It uses TensorFlow, - Tone.js and tools - from the Magenta project. - The open-source code is available here. - Click the keyboard, use your computer keys, or even plug in a MIDI keyboard.` +const germanAboutCopy = `AI Duet nutzt maschinelles Lernen, um zu entscheiden, + wie es auf die Noten reagiert, die du spielst. Dafür wurde + das neuronale Netz mit einer Vielzahl an Melodien trainiert. + das neuronale Netz mit einer Vielzahl an Melodien trainiert. + Noten and Takten. Regeln dafür, wie Noten oder Akkorde + verarbeitet werden sollen, wurden dem System nicht gegeben.` + +const englishAboutCopy = `AI Duet uses machine learning in order to decide on + how it responds to the notes you play. To do so, + a neural network was trained with lots of melodies. + Over time, the system learned about relationships + between notes and timing. No rules predefine how + notes or chords should be treated.` + + +const germanMadeByCopy = `Programmierung und Konzept: Yotam Mann und Google’s + Creative Lab. Neuronales Netz: Google’s Magenta project. + Der gesamte Quellcode ist Open Source: g.co/aiexperiments` + +const englishMadeByCopy = `Programming and Concept: Yotam Mann and Google’s + Creative Lab. Neural net: Google’s Magenta project. + All the code is open source: g.co/aiexperiments` export class About extends events.EventEmitter{ constructor(container){ @@ -59,13 +75,13 @@ export class About extends events.EventEmitter{ const title = document.createElement('div') title.id = 'title' title.textContent = 'A.I. Duet' - // content.appendChild(title) + content.appendChild(title) const video = document.createElement('div') video.id = 'video' - //vid YT0k99hCY5I + //vid YT0k99hCY5I video.innerHTML = `` - content.appendChild(video) + // content.appendChild(video) this._ytplayer = null @@ -84,21 +100,38 @@ export class About extends events.EventEmitter{ }) }) - const blurb = document.createElement('div') - blurb.id = 'blurb' - content.appendChild(blurb) - blurb.innerHTML = blurbCopy + const germanAbout = document.createElement('div') + germanAbout.id = 'germanAbout' + content.appendChild(germanAbout) + germanAbout.innerHTML = germanAboutCopy + + const englishAbout = document.createElement('div') + englishAbout.id = 'englishAbout' + content.appendChild(englishAbout) + englishAbout.innerHTML = englishAboutCopy + + const germanMadeBy = document.createElement('div') + germanMadeBy.id = 'germanMadeBy' + content.appendChild(germanMadeBy) + germanMadeBy.innerHTML = germanMadeByCopy + + const englishMadeBy = document.createElement('div') + englishMadeBy.id = 'englishMadeBy' + content.appendChild(englishMadeBy) + englishMadeBy.innerHTML = englishMadeByCopy } + + close(){ this._toggleButton.classList.remove('close') this._toggleButton.classList.add('open') this._container.classList.remove('visible') - if (this._ytplayer && this._ytplayer.stopVideo){ - this._ytplayer.stopVideo() - } + // if (this._ytplayer && this._ytplayer.stopVideo){ + // this._ytplayer.stopVideo() + // } this.emit('close') if (window.ga){ ga('send', 'event', 'AI-Duet', 'Click', 'About - Close') @@ -108,25 +141,25 @@ export class About extends events.EventEmitter{ this._toggleButton.classList.add('close') this._toggleButton.classList.remove('open') - this._playButton.classList.add('visible') + // this._playButton.classList.add('visible') this._container.classList.add('visible') this.emit('open') if (window.ga){ ga('send', 'event', 'AI-Duet', 'Click', 'About - Open') } - if (play){ - this._playVideo() - } + // if (play){ + // this._playVideo() + // } } // waits until the player is ready to play the video, // otherwise goes back into waiting loop - _playVideo(retries=0){ - if (this._ytplayer && this._ytplayer.playVideo){ - this._ytplayer.playVideo() - } else if (retries < 10 && this.isOpen()){ - setTimeout(() => this._playVideo(retries+1), 200); - } - } + // _playVideo(retries=0){ + // if (this._ytplayer && this._ytplayer.playVideo){ + // this._ytplayer.playVideo() + // } else if (retries < 10 && this.isOpen()){ + // setTimeout(() => this._playVideo(retries+1), 200); + // } + // } isOpen(){ return this._container.classList.contains('visible') } diff --git a/static/src/interface/Splash.js b/static/src/interface/Splash.js index 2327fea..665f862 100644 --- a/static/src/interface/Splash.js +++ b/static/src/interface/Splash.js @@ -63,6 +63,14 @@ class Splash extends events.EventEmitter{ howItWorks.innerHTML = 'This experiment lets you play a duet with the computer.
Just play some notes, and the computer will respond to your melody.' germanHowItWorks.innerHTML = 'In diesem Experiment kannst du ein Duett mit dem Computer spielen.
Spiele einfach ein paar Noten und der Computer reagiert auf deine Melodie.' + const aboutPageLink = document.createElement('div') + aboutPageLink.id = 'aboutPageLink' + titleContainer.appendChild(aboutPageLink) + aboutPageLink.textContent = 'How it works' + aboutPageLink.addEventListener('click', () => { + this.emit('about') + }) + const badges = document.createElement('div') badges.id = 'badges' splash.appendChild(badges) diff --git a/static/style/about.css b/static/style/about.css index e774a00..feed9b4 100644 --- a/static/style/about.css +++ b/static/style/about.css @@ -91,7 +91,7 @@ font-family: $font-family; font-size: 40px; line-height: 30px; - margin: 20px 0px 30px 0px; + margin: 130px 0px 50px 0px; position: relative; } @@ -143,17 +143,38 @@ } } - #blurb { - + #germanAbout { position: relative; text-transform: none; margin-top: 50px; - font-size: 14px; + font-size: 18px; line-height: 25px; + } - a { - color: $orange; - } + #englishAbout { + position: relative; + text-transform: none; + margin-top: 10px; + font-size: 18px; + line-height: 25px; + font-style: italic; + } + + #germanMadeBy { + position: relative; + text-transform: none; + margin-top: 50px; + font-size: 18px; + line-height: 25px; + } + + #englishMadeBy { + position: relative; + text-transform: none; + margin-top: 10px; + font-size: 18px; + line-height: 25px; + font-style: italic; } } diff --git a/static/style/splash.css b/static/style/splash.css index 4d06aa2..1fb0937 100644 --- a/static/style/splash.css +++ b/static/style/splash.css @@ -94,6 +94,35 @@ $topMargin: 35px; font-style: italic; } + #aboutPageLink { + $size : 20px; + $margin: 30px; + + margin-top: $topMargin; + color: $orange; + width: auto; + display: inline-block; + margin-left: $margin; + + /*&:before {*/ + /*position: absolute;*/ + /*width: $size;*/ + /*height: $size;*/ + /*margin-left: -$margin;*/ + /*margin-top: $size / 4;*/ + /*content : '';*/ + /*background-image: url(../images/yellow_play_triangle.svg);*/ + /*}*/ + + cursor: pointer; + + transition: transform 0.1s; + + &:hover { + transform: scale(1.1); + } + } + $loaderWidth: 398px; $loaderHeight: 118px;