From a450fa75edb927b7568b8a3198f9209c6a4c7f79 Mon Sep 17 00:00:00 2001
From: Jules Laplace <julescarbon@gmail.com>
Date: Sun, 3 Jun 2018 14:46:18 +0200
Subject: adjusting the form, calling samplernn tasks

---
 app/client/common/audioPlayer.component.js         | 38 ++++++++++++++++++
 app/client/common/fileList.component.js            | 19 ++++++---
 app/client/dashboard/dashboardHeader.component.js  |  2 +-
 app/client/dataset/dataset.form.js                 | 24 +++++-------
 app/client/modules/samplernn/samplernn.actions.js  | 15 ++++++++
 app/client/modules/samplernn/samplernn.datasets.js | 45 ++++++++++++++--------
 app/client/modules/samplernn/samplernn.results.js  | 19 ++++-----
 app/client/queue/queue.actions.js                  |  2 -
 app/client/util/sort.js                            |  4 +-
 9 files changed, 116 insertions(+), 52 deletions(-)
 create mode 100644 app/client/common/audioPlayer.component.js

(limited to 'app/client')

diff --git a/app/client/common/audioPlayer.component.js b/app/client/common/audioPlayer.component.js
new file mode 100644
index 0000000..f10a505
--- /dev/null
+++ b/app/client/common/audioPlayer.component.js
@@ -0,0 +1,38 @@
+import { h, Component } from 'preact'
+import { connect } from 'react-redux'
+import { bindActionCreators } from 'redux'
+import * as liveActions from '../live/live.actions'
+
+const audio = document.createElement('audio')
+
+class AudioPlayer extends Component {
+  constructor(props){
+    super(props)
+    this.handleClick = this.handleClick.bind(this)
+  }
+  handleClick(e){
+    this.props.onClick && this.props.onClick()
+  }
+  render() {
+    const { player={} } = this.props
+    return (
+      <div className='audioPlayer'>
+        <span>{this.props.title}</span>
+        <button
+          onClick={this.handleClick}
+        >
+          {player.playing ? '>' : 'pause'}
+        </button>
+      </div>
+    )
+  }
+}
+
+const mapStateToProps = state => ({
+  player: state.audioPlayer,
+})
+
+const mapDispatchToProps = (dispatch, ownProps) => ({
+})
+
+export default connect(mapStateToProps, mapDispatchToProps)(AudioPlayer)
diff --git a/app/client/common/fileList.component.js b/app/client/common/fileList.component.js
index c16928f..f596c8d 100644
--- a/app/client/common/fileList.component.js
+++ b/app/client/common/fileList.component.js
@@ -30,13 +30,22 @@ export const FileList = props => {
         onClick
       />
     })
+  if (! (files && files.length)) {
+    return (
+      <div className={'rows ' + className}>
+        <div class='row heading'>
+          <h4 class='noFiles'>No files</h4>
+        </div>
+      </div>
+    )
+  }
   return (
     <div className={'rows ' + className}>
-      <div class='row heading'>
-        {(files && files.length)
-        ? (title && <h3>{title}</h3>)
-        : <h4>No files</h4>}
-      </div>
+      {title &&
+        <div class='row heading'>
+          <h3>{title}</h3>}
+        </div>
+      }
 
 	  	<div className={'rows ' + fileListClassName}>
 	  		{fileList}
diff --git a/app/client/dashboard/dashboardHeader.component.js b/app/client/dashboard/dashboardHeader.component.js
index 3d4d31f..508cbfa 100644
--- a/app/client/dashboard/dashboardHeader.component.js
+++ b/app/client/dashboard/dashboardHeader.component.js
@@ -16,7 +16,7 @@ class DashboardHeader extends Component {
     const { site } = this.props
     return (
 	    <div class='dashboardHeader heading'>
-	      <h3>{site.name}</h3>
+	      <h1>{site.name} cortex</h1>
         {this.renderGPUStatus()}
 	    </div>
     )
diff --git a/app/client/dataset/dataset.form.js b/app/client/dataset/dataset.form.js
index fd00518..dee0263 100644
--- a/app/client/dataset/dataset.form.js
+++ b/app/client/dataset/dataset.form.js
@@ -17,33 +17,27 @@ class DatasetForm extends Component {
   render(){
     const {
       loading, status, error,
-      module, folder,
+      module, folder, title='Dataset',
       canRename, canUpload, canAddURL
     } = this.props
     // sort files??
 
     if (!folder.id) {
       return (
-        <div className='dataset'>
-          <div className='params row'>
-            <div className='column'>
-              {canRename
-              ? this.renderFolderNameInput(folder.name)
-              : <h2>{folder.name}</h2>}
-            </div>
+        <div className='params row'>
+          <div className='column'>
+            {this.renderFolderNameInput(folder.name)}
           </div>
         </div>
       )
     }
     return (
-      <div className='params row'>
+      <div className='form params row'>
         <div className='col'>
-          <Group title={title || 'Dataset'}>
-            {canRename
-            ? this.renderFolderNameInput(folder.name)
-            : <Param title='Dataset name'>{folder.name}</Param>}
-            {folder.id && canUpload && this.renderUploadInput()}
-            {folder.id && canAddURL && this.renderURLInput()}
+          <Group>
+            {canRename && this.renderFolderNameInput(folder.name)}
+            {canUpload && this.renderUploadInput()}
+            {canAddURL && this.renderURLInput()}
           </Group>
         </div>
       </div>
diff --git a/app/client/modules/samplernn/samplernn.actions.js b/app/client/modules/samplernn/samplernn.actions.js
index e8f8251..25c9699 100644
--- a/app/client/modules/samplernn/samplernn.actions.js
+++ b/app/client/modules/samplernn/samplernn.actions.js
@@ -179,3 +179,18 @@ export const fetch_url = (url) => (dispatch) => {
     opt: { url }
   }, { preempt: true, watch: true })
 }
+
+export const train_task_now = (dataset) => (dispatch) => {
+  const task = {
+    module: 'samplernn',
+    activity: 'train',
+    dataset: dataset,
+    epochs: 6,
+    opt: {
+      sample_length: 44100 * 5,
+      n_samples: 6,
+      keep_old_checkpoints: false,
+    }
+  }
+  return actions.queue.start_task(task)
+}
\ No newline at end of file
diff --git a/app/client/modules/samplernn/samplernn.datasets.js b/app/client/modules/samplernn/samplernn.datasets.js
index f5f4a1d..dafed79 100644
--- a/app/client/modules/samplernn/samplernn.datasets.js
+++ b/app/client/modules/samplernn/samplernn.datasets.js
@@ -52,7 +52,35 @@ class SampleRNNDatasets extends Component {
   render(){
     const { samplernn } = this.props
     const folder = samplernn.folder
-    if (!folder.name) return
+    if (!folder || !folder.name) return
+    return (
+      <div className='app'>
+        <div class='heading'>
+          <h1>{folder.name}</h1>
+        </div>
+        {folder.name !== 'unsorted' &&
+          <DatasetForm title='Add Files' folder={folder} canUpload canAddURL />
+        }
+        {this.renderDataset()}
+      </div>
+    )
+  }
+  renderDataset(){
+    return (
+      <div class='rows params datasets'>
+        <div class='row dataset'>
+          <div class='col'>input</div>
+          <div class='col'></div>
+          <div class='col'>checkpoint</div>
+          <div class='col'>output</div>
+        </div>
+        {this.renderGroups()}
+      </div>
+    )
+  }
+  renderGroups(){
+    const { samplernn } = this.props
+    const folder = samplernn.folder
     const { mapFn, sortFn } = util.sort.orderByFn('date desc')
     const datasets = folder.datasets.map(mapFn).sort(sortFn).map(pair => {
       const dataset = pair[1]
@@ -92,20 +120,7 @@ class SampleRNNDatasets extends Component {
         </div>
       )
     })
-    return (
-      <div className='app'>
-        <DatasetForm folder={folder} canRename canUpload canAddURL />
-        <div class='rows params datasets'>
-          <div class='row dataset'>
-            <div class='col'>input</div>
-            <div class='col'></div>
-            <div class='col'>checkpoint</div>
-            <div class='col'>output</div>
-          </div>
-          {datasets}
-        </div>
-      </div>
-    )
+    return datasets
   }
 }
 
diff --git a/app/client/modules/samplernn/samplernn.results.js b/app/client/modules/samplernn/samplernn.results.js
index 06092fb..b689106 100644
--- a/app/client/modules/samplernn/samplernn.results.js
+++ b/app/client/modules/samplernn/samplernn.results.js
@@ -43,15 +43,12 @@ class SampleRNNResults extends Component {
   }
   render(){
     if (this.props.samplernn.loading) return <span>Loading</span>
-      console.log(this.props.samplernn.data)
     const { folderLookup } = this.props.samplernn.data
     // const { folderLookup } = samplernn
-    console.log(this.props)
 
     const renders = Object.keys(folderLookup).sort(util.sort.stringSort.asc).map(key => {
       const folder = folderLookup[key]
       let { mapFn, sortFn } = util.sort.orderByFn('epoch desc')
-      console.log(mapFn, sortFn)
       const datasetPairs = folder.datasets.map(mapFn).sort(sortFn)
       const bestRenders = datasetPairs
         .map(pair => pair[1])
@@ -60,17 +57,15 @@ class SampleRNNResults extends Component {
           const { output } = dataset
           return output.map(mapFn).sort(sortFn)[0][1]
         })
-      console.log(bestRenders.map(r => r.epoch))
+      // console.log(bestRenders.map(r => r.epoch))
       return (
         <div className='col'>
-          <h3>{key}</h3>
-          {!!bestRenders.length &&
-            <FileList
-              files={bestRenders}
-              orderBy='date desc'
-              fields={'name date epoch size'}
-            />
-          }
+          <h3>{folder.name}</h3>
+          <FileList
+            files={bestRenders}
+            orderBy='date desc'
+            fields={'name date epoch size'}
+          />
         </div>
       )
     })
diff --git a/app/client/queue/queue.actions.js b/app/client/queue/queue.actions.js
index 7ede36d..6e39e71 100644
--- a/app/client/queue/queue.actions.js
+++ b/app/client/queue/queue.actions.js
@@ -2,9 +2,7 @@ import socket from '../socket'
 import types from '../types'
 
 export const start_task = (task, opt={}) => {
-  console.log('boo')
   socket.task.start_task(task, opt)
-  console.log('zoo')
   return { type: types.task.starting_task, task, ...opt }
 }
 
diff --git a/app/client/util/sort.js b/app/client/util/sort.js
index cc1b462..78f17a0 100644
--- a/app/client/util/sort.js
+++ b/app/client/util/sort.js
@@ -15,7 +15,7 @@ export const orderByFn = (s='name asc') => {
       sortFn = numericSort[direction]
       break
     case 'size':
-      mapFn = a => [a.size, a]
+      mapFn = a => [parseInt(a.size) || 0, a]
       sortFn = numericSort[direction]
       break
     case 'date':
@@ -24,7 +24,7 @@ export const orderByFn = (s='name asc') => {
       break
     case 'name':
     default:
-      mapFn = a => [a.id || a.name, a]
+      mapFn = a => [a.name || "", a]
       sortFn = stringSort[direction]
       break
   }
-- 
cgit v1.2.3-70-g09d2