move fetch functionality into fileviweer

9 files changed, 139 insertions, 67 deletions

diff --git a/app/client/auth/auth.gate.js b/app/client/auth/auth.gate.js
index 076ec54..40f244f 100644
--- a/app/client/auth/auth.gate.js
+++ b/app/client/auth/auth.gate.js
@@ -46,34 +46,36 @@ class AuthRouter extends Component {
 
 class AuthGate extends Component {
   render(){
-    if (true && !this.props.auth.initialized) {
+    const { auth, env, actions } = this.props
+    if (env.production && !auth.initialized) {
       console.log('loading auth')
       return <div className='loading'>Loading</div>
     }
-    if (true || this.props.auth.isAuthenticated) {
-      console.log('authenticated...')
-      if (this.props.auth.returnTo) {
-        let { returnTo } = this.props.auth
+    if (env.development || auth.isAuthenticated) {
+      if (auth.returnTo) {
+        let { returnTo } = auth
         if (!returnTo || returnTo.match(/(login|logout|signup)/i)) {
           returnTo = '/'
         }
         console.log('history.push', returnTo)
-        this.props.actions.setReturnTo(null)
+        actions.setReturnTo(null)
         history.push(returnTo)
         return <div>Launching app</div>
       }
-      console.log('rendering as normal')
       return <div>{this.props.children}</div>
     }
     return <AuthRouter {...this.props} />
   }
   componentDidMount(){
-    this.props.actions.checkin()
+    if (this.props.env.production) {
+      this.props.actions.checkin()
+    }
   }
 }
 
 const mapStateToProps = (state) => ({
-  auth: state.auth
+  env: state.system.env,
+  auth: state.auth,
 });
 
 const mapDispatchToProps = (dispatch) => ({
diff --git a/app/client/auth/auth.reducer.js b/app/client/auth/auth.reducer.js
index a56f94a..80b1ec5 100644
--- a/app/client/auth/auth.reducer.js
+++ b/app/client/auth/auth.reducer.js
@@ -11,7 +11,6 @@ const authInitialState = {
 }
 
 const auth = (state = authInitialState, action) => {
-  console.log(action)
   switch(action.type) {
     case types.auth.set_token:
       return {
diff --git a/app/client/common/browser.component.js b/app/client/common/browser.component.js
index 50b31cf..19cd0f6 100644
--- a/app/client/common/browser.component.js
+++ b/app/client/common/browser.component.js
@@ -11,19 +11,23 @@ class Browser extends Component {
   state = {
     dir: '/',
     files: [],
+    file: null,
     loading: true
   }
+
   componentDidMount() {
     this.fetch(this.state.dir)
   }
+
   handlePick(file) {
     console.log(file)
     if (file.dir) {
       this.fetch([this.state.dir, file.name].join('/').replace('//','/'))
     } else {
-      this.fetchFile([this.state.dir, file.name].join('/').replace('//','/'))
+      this.setState({ file: { ...file, path: this.state.dir } })
     }
   }
+
   fetch(dir) {
     console.log('fetch', dir)
     const { tool: module } = this.props.app
@@ -33,15 +37,7 @@ class Browser extends Component {
       this.setState({ dir, files, loading: false })
     })
   }
-  fetchFile(fn) {
-    console.log('fetch file', fn)
-    const { tool: module } = this.props.app
-    this.setState({ file: null, loadingFile: true })
-    actions.socket.read_file({ module, fn }).then(file => {
-      console.log(file)
-      this.setState({ file, loadingFile: false })
-    })
-  }
+
   render() {
     const { app } = this.props
     const {
@@ -68,7 +64,7 @@ class Browser extends Component {
           }}
           onClickParent={e => {
             console.log('navigate up')
-            this.fetch(this.state.dir.split('/').slice(0, -1).join('/') || '/')
+            this.fetch(dir.split('/').slice(0, -1).join('/') || '/')
           }}
         />
         {loadingFile && <Loading />}
diff --git a/app/client/common/fileViewer.component.js b/app/client/common/fileViewer.component.js
index bc71f20..72aebd4 100644
--- a/app/client/common/fileViewer.component.js
+++ b/app/client/common/fileViewer.component.js
@@ -1,4 +1,7 @@
 import { h, Component } from 'preact'
+import { connect } from 'react-redux'
+
+import actions from '../actions'
 
 const image_types = {
   'jpg': 'image/jpeg',
@@ -18,33 +21,69 @@ const video_types = {
   'mp4': 'video/mp4',
 }
 
-export default function FileViewer({ file }) {
-  const {
-    error,
-    name, path,
-    date, size,
-    buf,
-  } = file
-  if (error) {
-    return <div className='fileViewer'>{error}</div>
+class FileViewer extends Component {
+  state = {
+    loading: true,
+    buffer: {}
   }
-  if (!buf) {
-    return <div className='fileViewer'>File empty</div>
+
+  fetch() {
+    const { file } = this.props
+    const fn = [file.path, file.name].join('/').replace('//','/')
+    console.log('fetch file', fn)
+    const { tool: module } = this.props.app
+    this.setState({ buffer: null, loading: true })
+    actions.socket.read_file({ module, fn }).then(buffer => {
+      console.log(buffer)
+      this.setState({ buffer, loading: false })
+    })
   }
-  const ext = name.split('.').slice(-1)[0].toLowerCase()
-  let tag;
-  if (ext in image_types) {
-    tag = <img src={getURLFor(buf, image_types[ext])} />
-  } else if (ext in audio_types) {
-    tag = <audio src={getURLFor(buf, audio_types[ext])} controls autoplay />
-  } else if (ext in video_types) {
-    tag = <video src={getURLFor(buf, audio_types[ext])} controls autoplay />
-  } else {
-    tag = <div className='text'>{ab2str(buf)}</div>
+
+  componentDidMount(){
+    this.fetch()
+  }
+
+  componentDidUpdate(nextProps){
+    if (this.props.file !== nextProps.file) {
+      this.fetch()
+    }
+  }
+
+  render() {
+    const { loading, buffer } = this.state
+    if (loading) {
+      return <div className='fileViewer'>Loading...</div>
+    }
+    const {
+      error,
+      name, path,
+      date, size,
+      buf,
+    } = buffer
+    if (error) {
+      return <div className='fileViewer'>{error}</div>
+    }
+    if (!name) {
+      return <div className='fileViewer'></div>
+    }
+    if (!buf) {
+      return <div className='fileViewer'>File empty</div>
+    }
+    const ext = name.split('.').slice(-1)[0].toLowerCase()
+    let tag;
+    if (ext in image_types) {
+      tag = <img src={getURLFor(buf, image_types[ext])} />
+    } else if (ext in audio_types) {
+      tag = <audio src={getURLFor(buf, audio_types[ext])} controls autoplay />
+    } else if (ext in video_types) {
+      tag = <video src={getURLFor(buf, audio_types[ext])} controls autoplay />
+    } else {
+      tag = <div className='text'>{ab2str(buf)}</div>
+    }
+    return (
+      <div className='fileViewer'>{tag}</div>
+    )
   }
-  return (
-    <div className='fileViewer'>{tag}</div>
-  )
 }
 
 const getURLFor = (buf, type) => {
@@ -55,3 +94,9 @@ const getURLFor = (buf, type) => {
 }
 
 const ab2str = buf => String.fromCharCode.apply(null, new Uint8Array(buf))
+
+const mapStateToProps = state => ({
+  app: state.system.app,
+})
+
+export default connect(mapStateToProps)(FileViewer)
diff --git a/app/client/index.jsx b/app/client/index.jsx
index cda528c..4e0c38d 100644
--- a/app/client/index.jsx
+++ b/app/client/index.jsx
@@ -30,13 +30,10 @@ const app = (
     <Auth.Gate>
       <BrowserRouter>
         <div className='everybody'>
-          <Route path='/' children={(props) => <div>{console.log(props.location.pathname)}</div>} />
           <Route exact path='/system' component={System} />
           <Route exact path='/dashboard' component={Dashboard} />
           <Route exact path='/browse' component={Browser} />
           <Route exact path='/logout' component={Auth.Logout} />
-          <Route exact path='/login' component={() => { <Redirect to='/' /> }} />
-          <Route exact path='/signup' component={() => { <Redirect to='/' /> }} />
           {module_list}
           <Route exact path='/' component={Dashboard} />
           <Route path='/' component={Header} />
@@ -46,5 +43,9 @@ const app = (
     </Auth.Gate>
   </Provider>
 )
+/*
+          <Route exact path='/login' component={() => { <Redirect to='/' /> }} />
+          <Route exact path='/signup' component={() => { <Redirect to='/' /> }} />
+*/
 
 render(app, document.getElementById('container'))
diff --git a/app/client/modules/pix2pixhd/pix2pixhd.actions.js b/app/client/modules/pix2pixhd/pix2pixhd.actions.js
index a17eeab..2c72f06 100644
--- a/app/client/modules/pix2pixhd/pix2pixhd.actions.js
+++ b/app/client/modules/pix2pixhd/pix2pixhd.actions.js
@@ -205,7 +205,7 @@ export const list_epochs = (checkpoint_name) => (dispatch) => {
 export const count_dataset = (checkpoint_name) => (dispatch) => {
   const module = pix2pixhdModule.name
   util.allProgress([
-    actions.socket.count_directory({ module, dir: 'sequences/' + checkpoint_name + '/' }),
+    actions.socket.list_directory({ module, dir: 'sequences/' + checkpoint_name + '/' }),
     actions.socket.count_directory({ module, dir: 'datasets/' + checkpoint_name + '/train_A/' }),
   ], (percent, i, n) => {
     console.log('pix2pixhd load progress', i, n)
@@ -215,12 +215,14 @@ export const count_dataset = (checkpoint_name) => (dispatch) => {
       data: { module: 'pix2pixhd' },
     })
   }).then(res => {
-    const [sequenceCount, datasetCount] = res //, datasets, results, output, datasetUsage, lossReport] = res
+    const [sequence, datasetCount] = res //, datasets, results, output, datasetUsage, lossReport] = res
+    const sequenceCount = sequence.length
     console.log(sequenceCount, datasetCount)
     dispatch({
       type: types.pix2pixhd.load_dataset_count,
       data: {
         name: checkpoint_name,
+        sequence,
         sequenceCount,
         datasetCount,
       }
diff --git a/app/client/modules/pix2pixhd/views/pix2pixhd.train.js b/app/client/modules/pix2pixhd/views/pix2pixhd.train.js
index 957b068..ae46fdb 100644
--- a/app/client/modules/pix2pixhd/views/pix2pixhd.train.js
+++ b/app/client/modules/pix2pixhd/views/pix2pixhd.train.js
@@ -19,6 +19,7 @@ import NewDatasetForm from '../../../dataset/dataset.new'
 import UploadStatus from '../../../dataset/upload.status'
 
 import DatasetComponent from '../../../dataset/dataset.component'
+import SequenceEditor from './sequence.editor'
 
 import pix2pixhdModule from '../pix2pixhd.module'
 
@@ -34,7 +35,7 @@ class Pix2PixHDTrain extends Component {
       augment_make: 20,
     }
   }
-  componentWillMount(){
+  componentDidMount(){
     const id = this.props.match.params.id || localStorage.getItem('pix2pixhd.last_id')
     console.log('load dataset:', id)
     const { match, pix2pixhd, actions } = this.props
@@ -47,9 +48,14 @@ class Pix2PixHDTrain extends Component {
     } else {
       this.props.history.push('/pix2pixhd/new/')
     }
+    const dataset = localStorage.getItem('pix2pixhd.last_dataset')
+    if (dataset) {
+      this.setState({ checkpoint_name: dataset })
+    }
   }
   componentDidUpdate(prevProps, prevState){
     if (prevState.checkpoint_name !== this.state.checkpoint_name) {
+      localStorage.setItem('pix2pixhd.last_dataset', this.state.checkpoint_name)
       this.setState({ epoch: 'latest' })
       this.props.actions.list_epochs(this.state.checkpoint_name)
       this.props.actions.count_dataset(this.state.checkpoint_name)
@@ -114,6 +120,19 @@ class Pix2PixHDTrain extends Component {
                 value={this.state.epoch}
               />
             </Group>
+          </div>
+        </div>
+        <div>
+          <Group title='Sequence Editor'>
+            <SequenceEditor
+              module={pix2pixhdModule}
+              dataset={this.state.checkpoint_name}
+              checkpoint={this.props.pix2pixhd.checkpoint}
+            />
+          </Group>
+        </div>
+        <div className='columns'>
+          <div className='column'>
             <Group title='Augmentation Grid'>
               <AugmentationGrid
                 checkpoint={this.props.pix2pixhd.checkpoint}
@@ -132,7 +151,7 @@ class Pix2PixHDTrain extends Component {
                     this.props.remote.augment_task(this.state.checkpoint_name, {
                       ...this.state,
                       augment_take: 10,
-                      augment_make: 150,
+                      augment_make: 149,
                       no_symlinks: true,
                       mov: true,
                       folder_id: this.props.pix2pixhd.data.resultsFolder.id
diff --git a/app/client/modules/pix2pixhd/views/sequence.editor.js b/app/client/modules/pix2pixhd/views/sequence.editor.js
index 9693805..a749df9 100644
--- a/app/client/modules/pix2pixhd/views/sequence.editor.js
+++ b/app/client/modules/pix2pixhd/views/sequence.editor.js
@@ -3,9 +3,9 @@ import { bindActionCreators } from 'redux'
 import { connect } from 'react-redux'
 import { Route, Link } from 'react-router-dom'
 
-import { Loading, FileList, FileViewer } from '../../common'
+import { Loading, FileList, FileViewer } from '../../../common'
 
-import actions from '../actions'
+import actions from '../../../actions'
 
 class SequenceEditor extends Component {
   state = {
@@ -14,7 +14,12 @@ class SequenceEditor extends Component {
     loading: true
   }
   componentDidMount() {
-    this.fetch(this.state.dir)
+    this.fetch(this.props.dataset)
+  }
+  componentDidUpdate(prevProps) {
+    if (this.props.dataset !== prevProps.dataset) {
+      this.fetch(this.props.dataset)
+    }
   }
   handlePick(file) {
     console.log(file)
@@ -26,22 +31,13 @@ class SequenceEditor extends Component {
   }
   fetch(dir) {
     console.log('fetch', dir)
-    const { tool: module } = this.props.app
+    const { name: module } = this.props.module.name
     this.setState({ dir, file: null, loading: true })
     actions.socket.list_directory({ module, dir }).then(files => {
       console.log(files)
       this.setState({ dir, files, loading: false })
     })
   }
-  fetchFile(fn) {
-    console.log('fetch file', fn)
-    const { tool: module } = this.props.app
-    this.setState({ file: null, loadingFile: true })
-    actions.socket.read_file({ module, fn }).then(file => {
-      console.log(file)
-      this.setState({ file, loadingFile: false })
-    })
-  }
   render() {
     const { app } = this.props
     const {
@@ -49,6 +45,13 @@ class SequenceEditor extends Component {
       loadingFile, file,
     } = this.state
     console.log(this.props, this.state)
+    return (
+      <div className='sequenceEditor'>
+        <div className='timeline'>
+          <div className='selection'></div>
+        </div>
+      </div>
+    )
     // return (
     //   <div className='app browser'>
     //     <h1>{dir}{dir[dir.length-1] !== '/' && '/'}</h1>
diff --git a/app/client/system/system.reducer.js b/app/client/system/system.reducer.js
index 387b454..5f9e4ac 100644
--- a/app/client/system/system.reducer.js
+++ b/app/client/system/system.reducer.js
@@ -9,8 +9,13 @@ const systemInitialState = {
   site: {
     name: 'loading',
   },
+  env: {
+    env: process.env.NODE_ENV,
+    production: process.env.NODE_ENV === 'production',
+    development: process.env.NODE_ENV !== 'production',
+  },
   app: {
-    tool: localStorage.getItem('system.last_tool') || 'pix2pix',
+    tool: localStorage.getItem('system.last_tool') || 'pix2pixhd',
   },
   server: {
     connected: false,
@@ -43,7 +48,7 @@ const systemInitialState = {
   stderr: "",
 }
 
-const modules = ['pix2pix','samplernn','pix2wav'].reduce((a,b) => (a[b]=b,a),{})
+const modules = ['pix2pix','pix2pixhd','pix2wav','samplernn','morph'].reduce((a,b) => (a[b]=b,a),{})
 
 const systemReducer = (state = systemInitialState, action) => {
   // console.log(action.type)