set menu dropdown from url. make pix2pix views

6 files changed, 319 insertions, 8 deletions

diff --git a/app/client/modules/pix2pix/index.js b/app/client/modules/pix2pix/index.js
index f60cf36..ffe5f6b 100644
--- a/app/client/modules/pix2pix/index.js
+++ b/app/client/modules/pix2pix/index.js
@@ -1,11 +1,16 @@
 import { h, Component } from 'preact'
 import { Route, Link } from 'react-router-dom'
 
-import Pix2PixLive from './pix2pix.live'
+import Pix2PixNew from './views/pix2pix.new'
+import Pix2PixShow from './views/pix2pix.show'
+import Pix2PixLive from './views/pix2pix.live'
 
 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/live/' component={Pix2PixLive} />
     </section>
   )
diff --git a/app/client/modules/pix2pix/pix2pix.actions.js b/app/client/modules/pix2pix/pix2pix.actions.js
new file mode 100644
index 0000000..5d53136
--- /dev/null
+++ b/app/client/modules/pix2pix/pix2pix.actions.js
@@ -0,0 +1,122 @@
+import uuidv1 from 'uuid/v1'
+
+import socket from '../../socket'
+import types from '../../types'
+
+import * as datasetLoader from '../../dataset/dataset.loader'
+
+import actions from '../../actions'
+
+import { allProgress } from '../../util'
+
+export const load_directories = (id) => (dispatch) => {
+  const module = 'samplernn'
+  allProgress([
+    datasetLoader.load(module),
+    actions.task.index({ module }),
+    // actions.socket.list_directory({ module, dir: 'datasets' }),
+    // actions.socket.list_directory({ module, dir: 'results' }),
+    // actions.socket.list_directory({ module, dir: 'output' }),
+    // actions.socket.disk_usage({ module, dir: 'datasets' }),
+  ], (percent, i, n) => {
+    dispatch({ type: types.app.load_progress, progress: { i, n }})
+  }).then(res => {
+    // console.log(res)
+    const [datasetApiReport, tasks] = res //, datasets, results, output, datasetUsage, lossReport] = res
+
+    const {
+      folderLookup,
+      fileLookup,
+      datasetLookup,
+      folders,
+      files,
+      unsortedFolder,
+    } = datasetApiReport
+    // console.log(datasetUsage)
+
+    // // also show the various flat audio files we have, in the input area..
+    // const flatDatasets = datasets.filter(s => s.name.match(/(wav|aiff?|flac|mp3)$/) && !s.dir)
+    // const builtDatasets = datasets.filter(s => s.dir)
+    // builtDatasets.forEach(dir => {
+    //   const dataset = datasetLoader.getDataset(module, datasetLookup, dir.name)
+    //   dataset.isBuilt = true
+    // })
+
+    // flatDatasets.forEach(file => {
+    //   file.uuid = uuidv1()
+    //   fileLookup[file.uuid] = file
+    //   const name = file.name.split('.')[0]
+    //   const dataset = datasetLoader.getDataset(module, datasetLookup, name, unsortedFolder, file.date)
+    //   file.persisted = false
+    //   dataset.input.push(file.uuid)
+    // })
+
+    // // exp:coccokit_3-frame_sizes:8,2-n_rnn:2-dataset:coccokit_3
+    // const checkpoints = results.filter(s => s.dir).map(s => {
+    //   const checkpoint = s.name
+    //     .split('-')
+    //     .map(s => s.split(':'))
+    //     .filter(b => b.length && b[1])
+    //     .reduce((a,b) => (a[b[0]] = b[1]) && a, {})
+    //   checkpoint.name = checkpoint.name || checkpoint.dataset || checkpoint.exp
+    //   checkpoint.date = s.date
+    //   checkpoint.dir = s
+    //   checkpoint.persisted = false
+    //   const dataset = datasetLoader.getDataset(module, datasetLookup, checkpoint.name, unsortedFolder, checkpoint.date)
+    //   const loss = lossReport[checkpoint.name]
+    //   if (loss) {
+    //     dataset.epoch = checkpoint.epoch = loss.length
+    //     checkpoint.training_loss = loss
+    //   }
+    //   dataset.checkpoints.push(checkpoint)
+    //   return checkpoint
+    // })
+
+    // output.map(file => {
+    //   file.uuid = uuidv1()
+    //   fileLookup[file.uuid] = file
+    //   const pair = file.name.split('.')[0].split('-')
+    //   const dataset = datasetLoader.getDataset(module, datasetLookup, pair[0], unsortedFolder, file.date)
+    //   file.persisted = false
+    //   file.epoch = parseInt(file.epoch || pair[1].replace(/^\D+/, '')) || 0
+    //   dataset.epoch = Math.max(file.epoch, dataset.epoch || 0)
+    //   // here check if the file exists in dataset, if so just check that it's persisted
+    //   const found = dataset.output.some(file_id => {
+    //     // if (f.name === 
+    //     if (fileLookup[file_id].name === file.name) {
+    //       fileLookup[file_id].persisted = true
+    //       return true
+    //     }
+    //     return false
+    //   })
+    //   if (! found) {
+    //     dataset.output.push(file.uuid)
+    //   }
+    // })
+
+    dispatch({
+      type: types.dataset.load,
+      data: {
+        module,
+        folderLookup,
+        fileLookup,
+        datasetLookup,
+        folders, files,
+        checkpoints,
+        output,
+      },
+    })
+    if (id) {
+      console.log('folder id', id)
+      dispatch({
+        type: types.pix2pix.set_folder,
+        folder_id: id,
+      })
+    }
+  }).catch(e => {
+    console.error(e)
+  })
+}
+
+export const set_folder = (folder) => { types.pix2pix.set_folder, folder }
+
diff --git a/app/client/modules/pix2pix/pix2pix.tasks.js b/app/client/modules/pix2pix/pix2pix.tasks.js
new file mode 100644
index 0000000..eaecca8
--- /dev/null
+++ b/app/client/modules/pix2pix/pix2pix.tasks.js
@@ -0,0 +1,53 @@
+import uuidv1 from 'uuid/v1'
+
+import socket from '../../socket'
+import types from '../../types'
+
+import actions from '../../actions'
+
+// export const train_task = (dataset, folder_id, epochs=1) => dispatch => {
+//   const task = {
+//     module: 'samplernn',
+//     activity: 'train',
+//     dataset: dataset.name,
+//     epochs: epochs,
+//     opt: {
+//       folder_id: folder_id,
+//       sample_length: 44100 * 5,
+//       n_samples: 6,
+//       keep_old_checkpoints: false,
+//     }
+//   }
+//   console.log(task)
+//   return actions.queue.add_task(task)
+// }
+// export const fetch_task = (url, file_id, dataset) => dispatch => {
+//   if (! url) return console.log('input file inaccessible (no url)')
+//   const task = {
+//     module: 'samplernn',
+//     activity: 'fetch',
+//     dataset: dataset,
+//     opt: {
+//       url,
+//       file_id,
+//       dataset,
+//     }
+//   }
+//   return actions.queue.add_task(task)
+// }
+// export const log_task = (dataset) => dispatch => {
+//   const task = {
+//     module: 'samplernn',
+//     activity: 'log',
+//     dataset: dataset.name,
+//   }
+//   return actions.queue.add_task(task)
+// }
+// export const clear_cache_task = (dataset) => dispatch => {
+//   const task = {
+//     module: 'samplernn',
+//     activity: 'clear_cache',
+//     dataset: dataset.name,
+//   }
+//   return actions.queue.add_task(task)
+// }
\ No newline at end of file
diff --git a/app/client/modules/pix2pix/pix2pix.live.js b/app/client/modules/pix2pix/views/pix2pix.live.js
index bb6c730..fc6bc9b 100644
--- a/app/client/modules/pix2pix/pix2pix.live.js
+++ b/app/client/modules/pix2pix/views/pix2pix.live.js
@@ -2,15 +2,15 @@ import { h, Component } from 'preact'
 import { bindActionCreators } from 'redux'
 import { connect } from 'react-redux'
 
-import Player from '../../common/player.component'
-import ParamGroup from '../../common/paramGroup.component'
-import Slider from '../../common/slider.component'
-import Select from '../../common/select.component'
-import Button from '../../common/button.component'
+import Player from '../../../common/player.component'
+import ParamGroup from '../../../common/paramGroup.component'
+import Slider from '../../../common/slider.component'
+import Select from '../../../common/select.component'
+import Button from '../../../common/button.component'
 
-import { startRecording, stopRecording, saveFrame } from '../../live/player'
+import { startRecording, stopRecording, saveFrame } from '../../../live/player'
 
-import * as liveActions from '../../live/live.actions'
+import * as liveActions from '../../../live/live.actions'
 
 class Pix2PixLive extends Component {
   constructor(props){
diff --git a/app/client/modules/pix2pix/views/pix2pix.new.js b/app/client/modules/pix2pix/views/pix2pix.new.js
new file mode 100644
index 0000000..173777c
--- /dev/null
+++ b/app/client/modules/pix2pix/views/pix2pix.new.js
@@ -0,0 +1,16 @@
+import { h, Component } from 'preact'
+import { bindActionCreators } from 'redux'
+import { connect } from 'react-redux'
+import * as util from '../../../util'
+
+import NewDatasetForm from '../../../dataset/dataset.new'
+
+import pix2pixModule from '../pix2pix.module'
+
+export default function Pix2PixNew ({ history }) {
+  return (
+    <div class='app pix2pix'>
+      <NewDatasetForm module={pix2pixModule} history={history} />
+    </div>
+  )
+}
diff --git a/app/client/modules/pix2pix/views/pix2pix.show.js b/app/client/modules/pix2pix/views/pix2pix.show.js
new file mode 100644
index 0000000..b4cdc50
--- /dev/null
+++ b/app/client/modules/pix2pix/views/pix2pix.show.js
@@ -0,0 +1,115 @@
+import { h, Component } from 'preact'
+import { bindActionCreators } from 'redux'
+import { connect } from 'react-redux'
+import * as util from '../../../util'
+
+import * as pix2pixActions from '../pix2pix.actions'
+import * as pix2pixTasks from '../pix2pix.tasks'
+
+import Loading from '../../../common/loading.component'
+import DatasetForm from '../../../dataset/dataset.form'
+import NewDatasetForm from '../../../dataset/dataset.new'
+import UploadStatus from '../../../dataset/upload.status'
+import { FileList, FileRow } from '../../../common/fileList.component'
+
+import DatasetComponent from '../../../dataset/dataset.component'
+
+import pix2pixModule from '../pix2pix.module'
+
+class Pix2pixShow extends Component {
+  constructor(props){
+    super(props)
+    this.datasetActions = this.datasetActions.bind(this)
+  }
+  componentWillMount(){
+    const id = this.props.match.params.id || localStorage.getItem('pix2pix.last_id')
+    console.log('load dataset:', id)
+    const { match, pix2pix, actions } = this.props
+    if (id === 'new') return
+    if (id) {
+      if (parseInt(id)) localStorage.setItem('pix2pix.last_id', id)
+      if (! pix2pix.folder || pix2pix.folder.id !== id) {
+        actions.load_directories(id)
+      }
+    }
+  }
+  render(){
+    const { pix2pix, match, history } = this.props
+    const { folderLookup } = (pix2pix.data || {})
+    const folder = (folderLookup || {})[pix2pix.folder_id] || {}
+    return (
+      <div className='app pix2pix'>
+        <div class='heading'>
+          <div class='spaced'>
+            <h1>{folder ? folder.name : <Loading />}</h1>
+            <UploadStatus />
+          </div>
+        </div>
+        {folder && folder.name && folder.name !== 'unsorted' &&
+          <DatasetForm
+            title='Add Files'
+            module={pix2pixModule}
+            folder={folder}
+            canUpload canAddURL
+          />
+        }
+        <DatasetComponent
+          loading={pix2pix.loading}
+          progress={pix2pix.progress}
+          id={pix2pix.folder_id}
+          module={pix2pixModule}
+          data={pix2pix.data}
+          folder={folder}
+          history={history}
+          onPickFile={(file, e) => {
+            e.preventDefault()
+            e.stopPropagation()
+            console.log('picked a file', file)
+          }}
+          datasetActions={this.datasetActions}
+        />
+      </div>
+    )
+  }
+  datasetActions(dataset, isFetching=false, isProcessing=false){
+    const { pix2pix, remote } = this.props
+    const input = pix2pix.data.fileLookup[dataset.input[0]]
+    if (! input) return null
+    if (input.name && input.name.match(/(gif|jpe?g|png)$/i)) return null
+    return (
+      <div>
+        <div class={'actions'}>
+          <span class='link' onClick={() => remote.train_task(dataset, pix2pix.folder_id, 1)}>train</span>
+          <span class='link' onClick={() => remote.train_task(dataset, pix2pix.folder_id, 2)}>2x</span>
+          <span class='link' onClick={() => remote.train_task(dataset, pix2pix.folder_id, 4)}>4x</span>
+          <span class='link' onClick={() => remote.train_task(dataset, pix2pix.folder_id, 6)}>6x</span>
+          <span class='link' onClick={() => remote.train_task(dataset, pix2pix.folder_id, 18)}>18x</span>
+        </div>
+        {dataset.isBuilt
+        ? <div class='subtext'>
+            {'fetched '}
+            <span class='link' onClick={() => remote.clear_cache_task(dataset)}>rm</span>
+          </div>
+        : isFetching
+        ? <div class='subtext'>
+            {'fetching'}
+          </div>
+        : <div class='subtext'>
+            <span class='link' onClick={() => remote.fetch_task(input.url, input.id, dataset.name)}>fetch</span>
+          </div>
+        }
+      </div>
+    )
+  }
+}
+
+const mapStateToProps = state => ({
+  pix2pix: state.module.pix2pix,
+})
+
+const mapDispatchToProps = (dispatch, ownProps) => ({
+  actions: bindActionCreators(pix2pixActions, dispatch),
+  remote: bindActionCreators(pix2pixTasks, dispatch),
+})
+
+export default connect(mapStateToProps, mapDispatchToProps)(Pix2pixShow)