ui updates

2 files changed, 56 insertions, 28 deletions

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>
 
@@ -164,13 +174,9 @@ 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,