From 26b80e09cd64d5bb5b40bc7872aff397d9cc80ea Mon Sep 17 00:00:00 2001
From: Jules Laplace <julescarbon@gmail.com>
Date: Wed, 6 Jun 2018 22:45:25 +0200
Subject: play frames

---
 app/client/modules/pix2pix/index.js                |  6 +--
 app/client/modules/pix2pix/views/pix2pix.live.js   | 46 +++++++++++++++++++---
 .../modules/pix2wav/views/spectrogram.upload.js    | 33 ++++++++++++----
 3 files changed, 68 insertions(+), 17 deletions(-)

(limited to 'app/client/modules')

diff --git a/app/client/modules/pix2pix/index.js b/app/client/modules/pix2pix/index.js
index 076fef9..f3a4050 100644
--- a/app/client/modules/pix2pix/index.js
+++ b/app/client/modules/pix2pix/index.js
@@ -12,8 +12,8 @@ function router () {
   return (
     <section>
       <Route exact path='/pix2pix/new/' component={Pix2PixNew} />
-      <Route exact path='/pix2pix/datasets/' component={Pix2PixShow} />
-      <Route exact path='/pix2pix/datasets/:id/' component={Pix2PixShow} />
+      <Route exact path='/pix2pix/sequences/' component={Pix2PixShow} />
+      <Route exact path='/pix2pix/sequences/:id/' component={Pix2PixShow} />
       <Route exact path='/pix2pix/live/' component={Pix2PixLive} />
     </section>
   )
@@ -22,7 +22,7 @@ function router () {
 function links(){
   return (
     <span>
-      <span><Link to="/pix2pix/datasets/">datasets</Link></span>
+      <span><Link to="/pix2pix/sequences/">sequences</Link></span>
       <span>train</span>
       <span>process</span>
       <span><Link to="/pix2pix/live/">live</Link></span>
diff --git a/app/client/modules/pix2pix/views/pix2pix.live.js b/app/client/modules/pix2pix/views/pix2pix.live.js
index eebb364..76b6727 100644
--- a/app/client/modules/pix2pix/views/pix2pix.live.js
+++ b/app/client/modules/pix2pix/views/pix2pix.live.js
@@ -44,6 +44,12 @@ class Pix2PixLive extends Component {
     const frame = Math.floor(percentage * (parseInt(this.props.frame.sequence_len) || 1) + 1)
     this.props.actions.seek(frame)
   }
+  start(){
+    //
+  }
+  kill(){
+    //
+  }
   togglePlaying(){
     if (this.props.opt.processing) {
       this.props.actions.pause()
@@ -99,12 +105,7 @@ class Pix2PixLive extends Component {
                 value={(this.props.frame.sequence_i || 0) / (this.props.frame.sequence_len || 1)}
                 onChange={this.seek}
               />
-              <Button
-                title={'Processing: ' + (this.props.opt.processing ? 'yes' : 'no')}
-                onClick={this.togglePlaying}
-              >
-                {this.props.opt.processing ? 'Pause' : 'Restart'}
-              </Button>
+              {this.renderRestartButton()}
               <Button
                 title={
                   this.props.opt.savingVideo
@@ -234,6 +235,38 @@ class Pix2PixLive extends Component {
       </div>
     )
   }
+  renderRestartButton(){
+    if (this.props.runner.gpu.status === 'IDLE') {
+      return (
+        <Button
+          title={'GPU Idle'}
+          onClick={this.start}
+        >Start</Button>
+      )
+    }
+    if (this.props.runner.gpu.task.module !== 'pix2pix') {
+      return (
+        <Button
+          title={'GPU Busy'}
+          onClick={this.kill}
+        >Kill</Button>
+      )
+    }
+    if (! this.props.opt.processing) {
+      return (
+        <Button
+          title={'Not processing'}
+          onClick={this.togglePlaying}
+        >Restart</Button>
+      )
+    }
+    return (
+      <Button
+        title={'Processing'}
+        onClick={this.togglePlaying}
+      >Restart</Button>
+    )
+  }
 }
 function timeInSeconds(n){
   return (n / 10).toFixed(1) + ' s.'
@@ -244,6 +277,7 @@ const mapStateToProps = state => ({
   checkpoints: state.live.checkpoints,
   epochs: state.live.epochs,
   sequences: state.live.sequences,
+  runner: state.system.runner,
 })
 
 const mapDispatchToProps = (dispatch, ownProps) => ({
diff --git a/app/client/modules/pix2wav/views/spectrogram.upload.js b/app/client/modules/pix2wav/views/spectrogram.upload.js
index efbfca7..111a2a7 100644
--- a/app/client/modules/pix2wav/views/spectrogram.upload.js
+++ b/app/client/modules/pix2wav/views/spectrogram.upload.js
@@ -14,6 +14,7 @@ import {
 
 import * as datasetActions from '../../../dataset/dataset.actions'
 import * as wav2pixActions from '../../../audio/wav2pix'
+import * as pix2wavPlayer from '../../../audio/pix2wav'
 
 import pix2wavModule from '../pix2wav.module'
 
@@ -30,6 +31,7 @@ class SpectrogramUpload extends Component {
       frames: [],
       frame_start: 0,
       max: 1000,
+      preview_count: 8*4,
       frame_step: wav2pixActions.FRAME_STEP,
     }
     const audioElement = document.createElement('audio')
@@ -59,8 +61,8 @@ class SpectrogramUpload extends Component {
     this.audioElement.src = URL.createObjectURL(file)
   }
   rebuildFrames(){
-    const { file, pcm, frame_step, frame_start } = this.state
-    this.props.wav2pix.renderFrames(pcm || file, { frame_start, frame_step })
+    const { file, pcm, frame_step, frame_start, preview_count } = this.state
+    this.props.wav2pix.renderFrames(pcm || file, { frame_start, frame_step, max: preview_count })
     .then(data => {
       console.log('got frames', data.frames.length)
       this.setState({
@@ -83,6 +85,12 @@ class SpectrogramUpload extends Component {
       )
     })
   }
+  playFrame(i){
+    return () => {
+      const frame = this.state.frames[i]
+      pix2wavPlayer.play(frame)
+    }
+  }
   render(){
     // loading={pix2wav.loading}
     // progress={pix2wav.progress}
@@ -90,7 +98,11 @@ class SpectrogramUpload extends Component {
     // module={pix2wavModule}
     // data={pix2wav.data}
     // folder={folder}
-    const { file, frames } = this.state
+    const { file, frames, preview_count } = this.state
+    const canvases = []
+    for (let i = 0, _len = preview_count; i < _len; i++) {
+      canvases.push(<canvas key={i} onClick={this.playFrame(i)} />)
+    }
     return (
       <div className='row'>
         <div className='col spectrogramBuilder'>
@@ -107,12 +119,14 @@ class SpectrogramUpload extends Component {
             {file && this.renderMetadata(file)}
           </Group>
         </div>
-        <div ref={(c) => { this.canvases = c }} className='thumbs' id='pix2wav_canvases' />
+        <div ref={(c) => { this.canvases = c }} className='thumbs' id='pix2wav_canvases'>
+          {canvases}
+        </div>
       </div>
     )
   }
   renderMetadata(file){
-    const { duration } = this.state
+    const { duration, preview_count } = this.state
     const size = util.hush_size(file.size)
     const total_frame_count = Math.floor((duration * 44100 - wav2pixActions.FRAME_LENGTH) / this.state.frame_step)
     const frame_size = Math.round(wav2pixActions.FRAME_LENGTH / 44100 * 1000) + ' ms.'
@@ -185,9 +199,12 @@ class SpectrogramUpload extends Component {
     )
   }
   componentDidUpdate(){
-    this.canvases.innerHTML = ''
-    const canvases = (this.state.frames || []).map(c => {
-      this.canvases.append(c.canvas)
+    (this.state.frames || []).map((frame, i) => {
+      const canvas = this.canvases.children[i]
+      const ctx = canvas.getContext('2d-lodpi')
+      canvas.width = frame.canvas.width
+      canvas.height = frame.canvas.height
+      ctx.drawImage(frame.canvas, 0, 0)
     })
   }
 }
-- 
cgit v1.2.3-70-g09d2