From 28eda92b20df45e5bcc0ce9d5cac7656ddc55dd9 Mon Sep 17 00:00:00 2001
From: Jules Laplace <julescarbon@gmail.com>
Date: Sat, 11 Jan 2020 14:37:02 +0100
Subject: ui updates

---
 app/client/index.jsx                               |  2 +-
 app/client/live/live.reducer.js                    |  8 +++-
 app/client/live/player.js                          | 11 ++---
 .../modules/biggan/views/biggan.encodingList.js    | 53 ++++++++++++++++------
 app/client/modules/biggan/views/biggan.live.js     | 31 +++++++------
 5 files changed, 69 insertions(+), 36 deletions(-)

(limited to 'app')

diff --git a/app/client/index.jsx b/app/client/index.jsx
index 4e0c38d..cf2616d 100644
--- a/app/client/index.jsx
+++ b/app/client/index.jsx
@@ -29,7 +29,7 @@ const app = (
   <Provider store={store}>
     <Auth.Gate>
       <BrowserRouter>
-        <div className='everybody'>
+        <div>
           <Route exact path='/system' component={System} />
           <Route exact path='/dashboard' component={Dashboard} />
           <Route exact path='/browse' component={Browser} />
diff --git a/app/client/live/live.reducer.js b/app/client/live/live.reducer.js
index 2abb527..1d437e0 100644
--- a/app/client/live/live.reducer.js
+++ b/app/client/live/live.reducer.js
@@ -10,6 +10,7 @@ const liveInitialState = {
     sequence_playing: true, sequence_step: 1,
     recurse_roll: 0, rotate: 0, scale: 0, process_frac: 0.5,
     view_mode: 'b',
+    encoding_stored_mix_n: 0,
   },
   all_checkpoints: [],
   checkpoints: [],
@@ -115,7 +116,12 @@ const liveReducer = (state = liveInitialState, action) => {
           const new_opt = action.data.data.trim().split('\n').reduce((a,b) => {
             if (b.indexOf('set_opt') === 0) {
               const terms = b.split(' ')
-              a[terms[1]] = terms[2]
+              let key = terms[1]
+              let value = parseFloat(terms[2])
+              if (isNaN(value)) {
+                value = terms[2]
+              }
+              a[key] = value
             }
             return a
           }, {})
diff --git a/app/client/live/player.js b/app/client/live/player.js
index 483bbf1..78f5c24 100644
--- a/app/client/live/player.js
+++ b/app/client/live/player.js
@@ -3,7 +3,7 @@ import Whammy from './whammy'
 import types from '../types'
 import * as pix2wav from '../audio/pix2wav'
 
-let fps = 0, last_frame
+let fps = 0
 let recording = false, saving = false, synthesizing = false
 let videoWriter
 
@@ -42,6 +42,10 @@ export function saveFrame(){
 }
 
 export function onFrame (data) {
+  store.dispatch({
+    type: types.player.current_frame,
+    meta: data.meta,
+  })
   const blob = new Blob([data.frame], { type: 'image/jpg' })
   const url = URL.createObjectURL(blob)
   const img = new Image ()
@@ -49,7 +53,6 @@ export function onFrame (data) {
   if (! canvas) return console.error('no canvas for frame')
   img.onload = () => {
     img.onload = null
-    last_frame = data.meta
     URL.revokeObjectURL(url)
     const ctx = canvas.getContext('2d-lodpi')
     ctx.drawImage(img, 0, 0, canvas.width, canvas.height)
@@ -100,10 +103,6 @@ export function startWatchingFPS(){
       type: types.player.set_fps,
       fps: fps,
     })
-    store.dispatch({
-      type: types.player.current_frame,
-      meta: last_frame,
-    })
     fps = 0
   }, 1000)
 }
diff --git a/app/client/modules/biggan/views/biggan.encodingList.js b/app/client/modules/biggan/views/biggan.encodingList.js
index 710752e..8ebf05b 100644
--- a/app/client/modules/biggan/views/biggan.encodingList.js
+++ b/app/client/modules/biggan/views/biggan.encodingList.js
@@ -3,7 +3,7 @@ import { bindActionCreators } from 'redux'
 import { connect } from 'react-redux'
 
 import {
-  Loading, Group, Slider
+  Loading, Group, Slider, Button
 } from '../../../common/'
 
 import actions from '../../../actions'
@@ -11,6 +11,10 @@ import * as bigganTasks from '../biggan.tasks'
 import * as bigganActions from '../biggan.actions'
 
 class BigGANEncodingList extends Component {
+  state = {
+    file_id: 0,
+  }
+
   componentDidMount() {
     if (!this.props.biggan.encodings) {
       this.props.actions.biggan.load_encodings()
@@ -18,31 +22,46 @@ class BigGANEncodingList extends Component {
   }
 
   render() {
+    const { file_id } = this.state
+    const { opt } = this.props
     const { encodings } = this.props.biggan
     if (!encodings) {
       return <div>Loading encodings...</div>
     }
     return (
       <div>
+        <div className="spacer">
+          {this.props.last_message}
+        </div>
         <Group title={"Stored image"}>
-          <Slider live
-            name='encoding_mix_speed'
-            title={"Load Speed"}
-            min={0.0001} max={10} type='float'
-          />
           <Slider live
             name='encoding_stored_speed'
-            title={"Next Image Speed"}
-            min={0.0001} max={10} type='float'
+            title={"Load speed"}
+            min={1} max={250} type='int'
           />
           <Slider live
-            name='encoding_mix_n'
-            title={"Latent mix"}
+            name='encoding_stored_n'
+            title={"Image mix"}
             min={0} max={1} type='float'
           />
+        </Group>
+        <Group title={"Latent to Image Transition"}>
+          <Button
+            title={"Toggle"}
+            onClick={() => file_id && actions.live.send_command('switch', 'encoding_stored_mix')}
+          >{file_id
+            ? opt.encoding_stored_mix_n < 0.5
+               ? "To Image"
+               : "Back to Latent"
+            : "Not loaded"}</Button>
           <Slider live
-            name='encoding_stored_n'
-            title={"Encoding mix"}
+            name='encoding_stored_mix_speed'
+            title={"Transition speed"}
+            min={1} max={250} type='int'
+          />
+          <Slider live
+            name='encoding_stored_mix_n'
+            title={"Transition mix"}
             min={0} max={1} type='float'
           />
         </Group>
@@ -55,9 +74,12 @@ class BigGANEncodingList extends Component {
                   <img
                     key={file.id}
                     src={file.url}
-                    onClick={() => actions.live.send_command('setEncoding', JSON.stringify({
-                      id: file.id,
-                    }))}
+                    onClick={() => {
+                      actions.live.send_command('setEncoding', JSON.stringify({
+                        id: file.id,
+                      }))
+                      this.setState({ file_id: file.id })
+                    }}
                   />
                 ))}
               </div>
@@ -71,6 +93,7 @@ class BigGANEncodingList extends Component {
 }
 
 const mapStateToProps = state => ({
+  last_message: state.live.last_message,
   opt: state.live.opt,
   frame: state.live.frame,
   biggan: state.module.biggan,
diff --git a/app/client/modules/biggan/views/biggan.live.js b/app/client/modules/biggan/views/biggan.live.js
index 8d4a234..4410968 100644
--- a/app/client/modules/biggan/views/biggan.live.js
+++ b/app/client/modules/biggan/views/biggan.live.js
@@ -15,6 +15,7 @@ import * as bigganTasks from '../biggan.tasks'
 import * as bigganActions from '../biggan.actions'
 import BigGANCategoryList from './biggan.categoryList.js'
 import BigGANEncodingList from './biggan.encodingList.js'
+import { frameTimestamp } from '../../../util'
 
 class BigGANLive extends Component {
   constructor(props) {
@@ -32,7 +33,7 @@ class BigGANLive extends Component {
     this.props.actions.queue.stop_task('gpu')
   }
   render() {
-    const { biggan, actions } = this.props
+    const { biggan, actions, frame } = this.props
     // console.log(actions)
     // if (biggan.loading) {
     //   return <Loading progress={biggan.progress} />
@@ -44,9 +45,18 @@ class BigGANLive extends Component {
             <Player width={512} height={512} square fullscreen={this.props.fullscreen} />
           </div>
           <div className='params column audioParams'>
-            <Group>
+            <div className='spacer'>
+              {frame.i ?
+                <div className='param'>
+                  <span>Frame #{frame.i}</span>
+                  {frameTimestamp(frame.i)}
+                </div>
+                : <div className='param'><span>Not playing</span></div>
+              }
+            </div>
+
+            <Group title="Player">
               {this.renderRestartButton()}
-              <p class='last_message'>{this.props.last_message}</p>
             </Group>
 
             <Group title={"Latent"}>
@@ -57,7 +67,7 @@ class BigGANLive extends Component {
               <Slider live
                 name='latent_speed'
                 title={"Update Speed"}
-                min={0.0001} max={10} type='float'
+                min={1} max={250} type='int'
               />
               <Slider live
                 name='truncation'
@@ -79,7 +89,7 @@ class BigGANLive extends Component {
               <Slider live
                 name='label_speed'
                 title={"Mix Speed"}
-                min={0.0001} max={10} type='float'
+                min={1} max={250} type='int'
               />
             </Group>
 
@@ -87,7 +97,7 @@ class BigGANLive extends Component {
               <Slider live
                 name='orbit_speed'
                 title={"Orbit speed"}
-                min={-4} max={4} type='float'
+                min={-250} max={250} type='int'
               />
               <Slider live
                 name='orbit_radius'
@@ -101,7 +111,7 @@ class BigGANLive extends Component {
               <Slider live
                 name='orbit_noise_speed'
                 title={"Shuffle Speed"}
-                min={0} max={4} type='float'
+                min={1} max={250} type='int'
               />
             </Group>
 
@@ -163,14 +173,10 @@ class BigGANLive extends Component {
     // }
     return (
       <div>
-        <Button
-          title={i18n.gpu.processing}
-          onClick={this.togglePlaying}
-        >{i18n.gpu.stop}</Button>
         <Button
           title={i18n.gpu.busy}
           onClick={() => this.interrupt()}
-        >{i18n.gpu.interrupt}</Button>
+        >{i18n.gpu.stop}</Button>
       </div>
     )
   }
@@ -178,7 +184,6 @@ class BigGANLive extends Component {
 
 
 const mapStateToProps = state => ({
-  last_message: state.live.last_message,
   fullscreen: state.live.fullscreen,
   opt: state.live.opt,
   frame: state.live.frame,
-- 
cgit v1.2.3-70-g09d2