From 5c018b3f2c2c47371546d210240836057d1ea5bb Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Tue, 5 Jun 2018 22:02:19 +0200 Subject: set menu dropdown from url. make pix2pix views --- app/client/common/header.component.js | 1 + app/client/modules/pix2pix/index.js | 7 +- app/client/modules/pix2pix/pix2pix.actions.js | 122 ++++++++++ app/client/modules/pix2pix/pix2pix.live.js | 253 --------------------- app/client/modules/pix2pix/pix2pix.tasks.js | 53 +++++ app/client/modules/pix2pix/views/pix2pix.live.js | 253 +++++++++++++++++++++ app/client/modules/pix2pix/views/pix2pix.new.js | 16 ++ app/client/modules/pix2pix/views/pix2pix.show.js | 115 ++++++++++ app/client/modules/samplernn/samplernn.actions.js | 11 - .../modules/samplernn/views/samplernn.new.js | 31 +-- .../modules/samplernn/views/samplernn.show.js | 1 - app/client/system/system.reducer.js | 11 + app/client/types.js | 2 + 13 files changed, 585 insertions(+), 291 deletions(-) create mode 100644 app/client/modules/pix2pix/pix2pix.actions.js delete mode 100644 app/client/modules/pix2pix/pix2pix.live.js create mode 100644 app/client/modules/pix2pix/pix2pix.tasks.js create mode 100644 app/client/modules/pix2pix/views/pix2pix.live.js create mode 100644 app/client/modules/pix2pix/views/pix2pix.new.js create mode 100644 app/client/modules/pix2pix/views/pix2pix.show.js (limited to 'app/client') diff --git a/app/client/common/header.component.js b/app/client/common/header.component.js index 776fbe4..8a2310f 100644 --- a/app/client/common/header.component.js +++ b/app/client/common/header.component.js @@ -13,6 +13,7 @@ function Header({ site, app, fps, playing, actions }) { return }) const Links = modules[app.tool].links + console.log(app, site, Object.keys(modules)) return (
{site.name} cortex 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 (
+ + +
) 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.live.js b/app/client/modules/pix2pix/pix2pix.live.js deleted file mode 100644 index bb6c730..0000000 --- a/app/client/modules/pix2pix/pix2pix.live.js +++ /dev/null @@ -1,253 +0,0 @@ -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 { startRecording, stopRecording, saveFrame } from '../../live/player' - -import * as liveActions from '../../live/live.actions' - -class Pix2PixLive extends Component { - constructor(props){ - super() - props.actions.get_params() - props.actions.list_checkpoints() - props.actions.list_sequences() - this.changeCheckpoint = this.changeCheckpoint.bind(this) - this.changeEpoch = this.changeEpoch.bind(this) - this.changeSequence = this.changeSequence.bind(this) - this.seek = this.seek.bind(this) - this.togglePlaying = this.togglePlaying.bind(this) - this.toggleRecording = this.toggleRecording.bind(this) - } - componentWillUpdate(nextProps) { - if (nextProps.opt.checkpoint_name && nextProps.opt.checkpoint_name !== this.props.opt.checkpoint_name) { - this.props.actions.list_epochs(nextProps.opt.checkpoint_name) - } - } - changeCheckpoint(checkpoint_name){ - this.props.actions.load_epoch(checkpoint_name, 'latest') - } - changeEpoch(epoch_name){ - this.props.actions.load_epoch(this.props.opt.checkpoint_name, epoch_name) - } - changeSequence(sequence){ - console.log('got sequence', sequence) - this.props.actions.load_sequence(sequence) - } - seek(percentage){ - const frame = Math.floor(percentage * (parseInt(this.props.frame.sequence_len) || 1) + 1) - this.props.actions.seek(frame) - } - togglePlaying(){ - if (this.props.opt.processing) { - this.props.actions.pause() - } else { - this.props.actions.play() - } - } - toggleRecording(){ - if (this.props.opt.recording){ - stopRecording() - this.props.actions.pause() - } else { - startRecording() - } - } - render(){ - return ( -
- -
-
- - - - - - - - -
-
- - - - - - - - - - - - - - - - -
-
- - - - - - - - - - - - - - - - - - - -
-
-
- ) - } -} -function timeInSeconds(n){ - return (n / 10).toFixed(1) + ' s.' -} -const mapStateToProps = state => ({ - opt: state.live.opt, - frame: state.live.frame, - checkpoints: state.live.checkpoints, - epochs: state.live.epochs, - sequences: state.live.sequences, -}) - -const mapDispatchToProps = (dispatch, ownProps) => ({ - actions: bindActionCreators(liveActions, dispatch) -}) - -export default connect(mapStateToProps, mapDispatchToProps)(Pix2PixLive) 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/views/pix2pix.live.js b/app/client/modules/pix2pix/views/pix2pix.live.js new file mode 100644 index 0000000..fc6bc9b --- /dev/null +++ b/app/client/modules/pix2pix/views/pix2pix.live.js @@ -0,0 +1,253 @@ +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 { startRecording, stopRecording, saveFrame } from '../../../live/player' + +import * as liveActions from '../../../live/live.actions' + +class Pix2PixLive extends Component { + constructor(props){ + super() + props.actions.get_params() + props.actions.list_checkpoints() + props.actions.list_sequences() + this.changeCheckpoint = this.changeCheckpoint.bind(this) + this.changeEpoch = this.changeEpoch.bind(this) + this.changeSequence = this.changeSequence.bind(this) + this.seek = this.seek.bind(this) + this.togglePlaying = this.togglePlaying.bind(this) + this.toggleRecording = this.toggleRecording.bind(this) + } + componentWillUpdate(nextProps) { + if (nextProps.opt.checkpoint_name && nextProps.opt.checkpoint_name !== this.props.opt.checkpoint_name) { + this.props.actions.list_epochs(nextProps.opt.checkpoint_name) + } + } + changeCheckpoint(checkpoint_name){ + this.props.actions.load_epoch(checkpoint_name, 'latest') + } + changeEpoch(epoch_name){ + this.props.actions.load_epoch(this.props.opt.checkpoint_name, epoch_name) + } + changeSequence(sequence){ + console.log('got sequence', sequence) + this.props.actions.load_sequence(sequence) + } + seek(percentage){ + const frame = Math.floor(percentage * (parseInt(this.props.frame.sequence_len) || 1) + 1) + this.props.actions.seek(frame) + } + togglePlaying(){ + if (this.props.opt.processing) { + this.props.actions.pause() + } else { + this.props.actions.play() + } + } + toggleRecording(){ + if (this.props.opt.recording){ + stopRecording() + this.props.actions.pause() + } else { + startRecording() + } + } + render(){ + return ( +
+ +
+
+ + + + + + + + +
+
+ + + + + + + + + + + + + + + + +
+
+ + + + + + + + + + + + + + + + + + + +
+
+
+ ) + } +} +function timeInSeconds(n){ + return (n / 10).toFixed(1) + ' s.' +} +const mapStateToProps = state => ({ + opt: state.live.opt, + frame: state.live.frame, + checkpoints: state.live.checkpoints, + epochs: state.live.epochs, + sequences: state.live.sequences, +}) + +const mapDispatchToProps = (dispatch, ownProps) => ({ + actions: bindActionCreators(liveActions, dispatch) +}) + +export default connect(mapStateToProps, mapDispatchToProps)(Pix2PixLive) 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 ( +
+ +
+ ) +} 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 ( +
+
+
+

{folder ? folder.name : }

+ +
+
+ {folder && folder.name && folder.name !== 'unsorted' && + + } + { + e.preventDefault() + e.stopPropagation() + console.log('picked a file', file) + }} + datasetActions={this.datasetActions} + /> +
+ ) + } + 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 ( +
+
+ remote.train_task(dataset, pix2pix.folder_id, 1)}>train + remote.train_task(dataset, pix2pix.folder_id, 2)}>2x + remote.train_task(dataset, pix2pix.folder_id, 4)}>4x + remote.train_task(dataset, pix2pix.folder_id, 6)}>6x + remote.train_task(dataset, pix2pix.folder_id, 18)}>18x +
+ {dataset.isBuilt + ?
+ {'fetched '} + remote.clear_cache_task(dataset)}>rm +
+ : isFetching + ?
+ {'fetching'} +
+ :
+ remote.fetch_task(input.url, input.id, dataset.name)}>fetch +
+ } +
+ ) + } +} + +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) diff --git a/app/client/modules/samplernn/samplernn.actions.js b/app/client/modules/samplernn/samplernn.actions.js index 642319d..e9248c0 100644 --- a/app/client/modules/samplernn/samplernn.actions.js +++ b/app/client/modules/samplernn/samplernn.actions.js @@ -207,14 +207,3 @@ export const import_files = (state, datasetLookup, fileLookup) => (dispatch) => } export const set_folder = (folder) => { types.samplernn.set_folder, folder } - -export const fetch_url = (url) => (dispatch) => { - console.log(url) - return actions.queue.add_task({ - activity: 'fetch', - module: 'samplernn', - dataset: 'test', - epochs: 1, - opt: { url } - }, { preempt: true, watch: true }) -} diff --git a/app/client/modules/samplernn/views/samplernn.new.js b/app/client/modules/samplernn/views/samplernn.new.js index d76e6c0..5f657c0 100644 --- a/app/client/modules/samplernn/views/samplernn.new.js +++ b/app/client/modules/samplernn/views/samplernn.new.js @@ -3,33 +3,14 @@ import { bindActionCreators } from 'redux' import { connect } from 'react-redux' import * as util from '../../../util' -import * as samplernnActions from '../samplernn.actions' - -import DatasetForm from '../../../dataset/dataset.form' import NewDatasetForm from '../../../dataset/dataset.new' -import { FileList, FileRow } from '../../../common/fileList.component' import samplernnModule from '../samplernn.module' -class SampleRNNNew extends Component { - constructor(props){ - super(props) - } - render(){ - const { history } = this.props - return ( -
- -
- ) - } +export default function SampleRNNNew ({ history }) { + return ( +
+ +
+ ) } -const mapStateToProps = state => ({ - samplernn: state.module.samplernn, -}) - -const mapDispatchToProps = (dispatch, ownProps) => ({ - actions: bindActionCreators(samplernnActions, dispatch), -}) - -export default connect(mapStateToProps, mapDispatchToProps)(SampleRNNNew) diff --git a/app/client/modules/samplernn/views/samplernn.show.js b/app/client/modules/samplernn/views/samplernn.show.js index 8a9d589..98314f9 100644 --- a/app/client/modules/samplernn/views/samplernn.show.js +++ b/app/client/modules/samplernn/views/samplernn.show.js @@ -110,7 +110,6 @@ class SampleRNNShow extends Component { const mapStateToProps = state => ({ samplernn: state.module.samplernn, - dataset: state.dataset, }) const mapDispatchToProps = (dispatch, ownProps) => ({ diff --git a/app/client/system/system.reducer.js b/app/client/system/system.reducer.js index 5067acd..d83fa21 100644 --- a/app/client/system/system.reducer.js +++ b/app/client/system/system.reducer.js @@ -43,6 +43,8 @@ const systemInitialState = { stderr: "", } +import modules from '../modules' + const systemReducer = (state = systemInitialState, action) => { let processor = null switch(action.type) { @@ -130,9 +132,18 @@ const systemReducer = (state = systemInitialState, action) => { } case types.system.load_site: document.querySelector('title').innerHTML = action.site.name + '.cortex' + let tool = state.site.tool + const path = window.location.pathname.split('/')[1] + if (path in modules) { + tool = path + } return { ...state, site: action.site, + app: { + ...state.app, + tool: tool, + } } case types.system.running_command: return { diff --git a/app/client/types.js b/app/client/types.js index 720051f..eb9fc99 100644 --- a/app/client/types.js +++ b/app/client/types.js @@ -99,8 +99,10 @@ export default { }, pix2pix: { init: 'PIX2PIX_INIT', + set_folder: 'PIX2PIX_SET_FOLDER', }, pix2wav: { init: 'PIX2WAV_INIT', + set_folder: 'PIX2WAV_SET_FOLDER', }, } -- cgit v1.2.3-70-g09d2