From 18321f234e5261af43624b67c99a4dee3c060ed8 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Tue, 5 Jun 2018 20:11:11 +0200 Subject: move views into own folder and begin prising away dataset code --- app/client/modules/pix2pix/index.js | 1 - app/client/modules/samplernn/index.js | 16 +-- app/client/modules/samplernn/samplernn.datasets.js | 40 ++---- app/client/modules/samplernn/samplernn.import.js | 133 ----------------- app/client/modules/samplernn/samplernn.loss.js | 159 --------------------- app/client/modules/samplernn/samplernn.new.js | 35 ----- app/client/modules/samplernn/samplernn.results.js | 84 ----------- app/client/modules/samplernn/samplernn.show.js | 106 -------------- .../modules/samplernn/views/samplernn.graph.js | 159 +++++++++++++++++++++ .../modules/samplernn/views/samplernn.import.js | 145 +++++++++++++++++++ .../modules/samplernn/views/samplernn.new.js | 35 +++++ .../modules/samplernn/views/samplernn.results.js | 84 +++++++++++ .../modules/samplernn/views/samplernn.show.js | 118 +++++++++++++++ 13 files changed, 562 insertions(+), 553 deletions(-) delete mode 100644 app/client/modules/samplernn/samplernn.import.js delete mode 100644 app/client/modules/samplernn/samplernn.loss.js delete mode 100644 app/client/modules/samplernn/samplernn.new.js delete mode 100644 app/client/modules/samplernn/samplernn.results.js delete mode 100644 app/client/modules/samplernn/samplernn.show.js create mode 100644 app/client/modules/samplernn/views/samplernn.graph.js create mode 100644 app/client/modules/samplernn/views/samplernn.import.js create mode 100644 app/client/modules/samplernn/views/samplernn.new.js create mode 100644 app/client/modules/samplernn/views/samplernn.results.js create mode 100644 app/client/modules/samplernn/views/samplernn.show.js (limited to 'app/client') diff --git a/app/client/modules/pix2pix/index.js b/app/client/modules/pix2pix/index.js index 0343963..f60cf36 100644 --- a/app/client/modules/pix2pix/index.js +++ b/app/client/modules/pix2pix/index.js @@ -15,7 +15,6 @@ function links(){ return ( datasets - graph live ) diff --git a/app/client/modules/samplernn/index.js b/app/client/modules/samplernn/index.js index 6459056..7d5e36e 100644 --- a/app/client/modules/samplernn/index.js +++ b/app/client/modules/samplernn/index.js @@ -1,21 +1,21 @@ import { h, Component } from 'preact' import { Route, Link } from 'react-router-dom' -import SampleRNNNew from './samplernn.new' -import SampleRNNShow from './samplernn.show' -import SampleRNNDatasets from './samplernn.datasets' -import SampleRNNImport from './samplernn.import' -import SampleRNNResults from './samplernn.results' -import SampleRNNLoss from './samplernn.loss' + +import SampleRNNNew from './views/samplernn.new' +import SampleRNNShow from './views/samplernn.show' +import SampleRNNImport from './views/samplernn.import' +import SampleRNNResults from './views/samplernn.results' +import SampleRNNGraph from './views/samplernn.graph' function router () { return (
- - + +
) } diff --git a/app/client/modules/samplernn/samplernn.datasets.js b/app/client/modules/samplernn/samplernn.datasets.js index 607f041..f8cba29 100644 --- a/app/client/modules/samplernn/samplernn.datasets.js +++ b/app/client/modules/samplernn/samplernn.datasets.js @@ -14,31 +14,6 @@ import Loading from '../../common/loading.component' import samplernnModule from './samplernn.module' class SampleRNNDatasets extends Component { - constructor(props){ - super(props) - this.pickFile = this.pickFile.bind(this) - } - componentWillMount(){ - const id = this.props.id - console.log('load dataset:', id, this.props.id) - const { match, samplernn, actions } = this.props - if (id === 'new') return - if (id) { - if (parseInt(id)) localStorage.setItem('samplernn.last_id', id) - if (! samplernn.folder || samplernn.folder.id !== id) { - actions.load_directories(id) - } - } - } - pickFile(file){ - console.log('pick', file) - } - onDeleteFile(file){ - const yes = confirm('Are you sure you want to delete this file?') - if (yes) { - actions.file.destroy(file) - } - } render(){ const { samplernn, folder, match, history } = this.props if (samplernn.loading) { @@ -128,16 +103,27 @@ class SampleRNNDatasets extends Component { }) return datasets } + onDeleteFile(file){ + const yes = confirm('Are you sure you want to delete this file?') + if (yes) { + console.log('delete: confirmed') + if (this.props.onDeleteFile) { + console.log('calling custom deletefile function') + this.props.onDeleteFile(file) + } else { + actions.file.destroy(file) + } + } + } } const mapStateToProps = state => ({ samplernn: state.module.samplernn, runner: state.system.runner, - task: state.task, }) const mapDispatchToProps = (dispatch, ownProps) => ({ - actions: bindActionCreators(samplernnActions, dispatch), + samplernnActions: bindActionCreators(samplernnActions, dispatch), }) export default connect(mapStateToProps, mapDispatchToProps)(SampleRNNDatasets) diff --git a/app/client/modules/samplernn/samplernn.import.js b/app/client/modules/samplernn/samplernn.import.js deleted file mode 100644 index 495ee53..0000000 --- a/app/client/modules/samplernn/samplernn.import.js +++ /dev/null @@ -1,133 +0,0 @@ -import { h, Component } from 'preact' -import { bindActionCreators } from 'redux' -import { connect } from 'react-redux' -import * as util from '../../util' - -import * as samplernnActions from './samplernn.actions' - -import Select from '../../common/select.component' -import TextInput from '../../common/textInput.component' -import Button from '../../common/button.component' - -import SampleRNNDatasets from './samplernn.datasets' - -const samplernnModule = { - name: 'samplernn', - datatype: 'audio', -} - -class SampleRNNImport extends Component { - constructor(){ - super() - this.state = { - folder: 1, - import_action: 'Hotlink', - url_base: 'https://s3.amazonaws.com/i.asdf.us/bucky/data/4279/', - selected: {}, - } - } - render(){ - let datasets = [], folder; - if (this.props.samplernn.data) { - datasets = (this.props.samplernn.data.folders || []).map(folder => { - return [folder.name, folder.id] - }) - folder = this.props.samplernn.data.folderLookup.unsorted - } - return ( -
-
-

Import

-
-
-
-
-
-
-
-
-
-
-

Import to dataset

- this.setState({ import_action: value })} - /> - this.setState({ url_base: value })} - /> - -
-
-
- this.toggle(dataset.name, this.state.selected[name]))} - beforeRow={dataset => this.beforeRow(dataset)} - afterRow={dataset => this.afterRow(dataset)} - /> -
- ) - } - toggle(name){ - this.setState({ - ...this.state, - selected: { - ...this.state.selected, - [name]: !this.state.selected[name], - } - }) - } - beforeRow(dataset){ - // console.log(dataset) - } - afterRow(dataset){ - const name = dataset.name - return ( -
- -
- ) - } - doImport(){ - const { samplernn } = this.props - console.log(this.state) - this.props.actions.import_files(this.state, samplernn.data.datasetLookup, samplernn.data.fileLookup) - } -} - -const mapStateToProps = state => ({ - samplernn: state.module.samplernn, - runner: state.system.runner, - task: state.task, -}) - -const mapDispatchToProps = (dispatch, ownProps) => ({ - actions: bindActionCreators(samplernnActions, dispatch), -}) - -export default connect(mapStateToProps, mapDispatchToProps)(SampleRNNImport) diff --git a/app/client/modules/samplernn/samplernn.loss.js b/app/client/modules/samplernn/samplernn.loss.js deleted file mode 100644 index 6ca69ef..0000000 --- a/app/client/modules/samplernn/samplernn.loss.js +++ /dev/null @@ -1,159 +0,0 @@ -import { h, Component } from 'preact' -import { bindActionCreators } from 'redux' -import { connect } from 'react-redux' - -import { lerp, norm, randint, randrange } from '../../util' - -import * as samplernnActions from './samplernn.actions' - -import Group from '../../common/group.component' -import Slider from '../../common/slider.component' -import Select from '../../common/select.component' -import Button from '../../common/button.component' -import { FileList } from '../../common/fileList.component' -import TextInput from '../../common/textInput.component' - -class SampleRNNLoss extends Component { - constructor(props){ - super() - props.actions.load_loss() - } - render(){ - this.refs = {} - return ( -
-
-

SampleRNN Loss

- this.refs['canvas'] = ref} /> -
-
- ) - } - componentDidUpdate(){ - const { lossReport } = this.props.samplernn - if (! lossReport) return - const canvas = this.refs.canvas - canvas.width = window.innerWidth - canvas.height = window.innerHeight - canvas.style.width = canvas.width + 'px' - canvas.style.height = canvas.height + 'px' - - const ctx = canvas.getContext('2d') - const w = canvas.width = canvas.width * devicePixelRatio - const h = canvas.height = canvas.height * devicePixelRatio - ctx.clearRect(0,0,w,h) - - const keys = Object.keys(lossReport).sort().filter(k => !!lossReport[k].length) - let scaleMax = 0 - let scaleMin = Infinity - let epochsMax = 0 - keys.forEach(key => { - const loss = lossReport[key] - epochsMax = Math.max(loss.length, epochsMax) - loss.forEach((a) => { - const v = parseFloat(a.training_loss) - if (! v) return - scaleMax = Math.max(v, scaleMax) - scaleMin = Math.min(v, scaleMin) - }) - }) - // scaleMax *= 10 - console.log(scaleMax, scaleMin, epochsMax) - - scaleMax = 3 - scaleMin = 0 - const margin = 0 - const wmin = 0 - const wmax = w - const hmin = 0 - const hmax = h - const epochsScaleFactor = 1 // 3/2 - - let X, Y - for (var ii = 0; ii < epochsMax; ii++) { - X = lerp((ii)/(epochsMax/(epochsScaleFactor))*(epochsScaleFactor), wmin, wmax) - ctx.strokeStyle = 'rgba(0,0,0,0.3)' - ctx.beginPath(0, 0) - ctx.moveTo(X, 0) - ctx.lineTo(X, h) - ctx.lineWidth = 1 - // ctx.stroke() - if ( (ii % 5) === 0 ) { - ctx.lineWidth = 2 - ctx.stroke() - const fontSize = 12 - ctx.font = 'italic ' + (fontSize * devicePixelRatio) + 'px "Georgia"' - ctx.fillStyle = 'rgba(0,12,28,0.6)' - ctx.fillText(ii/5*6, X + (8 * devicePixelRatio), h - ((fontSize + 4) * devicePixelRatio)) - } - } - for (var ii = scaleMin; ii < scaleMax; ii += 1) { - Y = lerp(ii/scaleMax, hmin, hmax) - // ctx.strokeStyle = 'rgba(255,255,255,1.0)' - ctx.beginPath(0, 0) - ctx.moveTo(0, (h-Y)) - ctx.lineTo(w, (h-Y)) - ctx.lineWidth = 1 - // ctx.stroke() - // if ( (ii % 1) < 0.1) { - // ctx.strokeStyle = 'rgba(255,255,255,1.0)' - ctx.lineWidth = 2 - ctx.setLineDash([4, 4]) - ctx.stroke() - ctx.stroke() - ctx.stroke() - ctx.setLineDash([0,0]) - const fontSize = 12 - ctx.font = 'italic ' + (fontSize * devicePixelRatio) + 'px "Georgia"' - ctx.fillStyle = 'rgba(0,12,28,0.6)' - ctx.fillText(ii.toFixed(1), w-50, (h-Y) + fontSize + (10 * devicePixelRatio)) - // } - } - ctx.lineWidth = 1 - - keys.forEach(key => { - const loss = lossReport[key] - const vf = parseFloat(loss[loss.length-1].training_loss) || 0 - const vg = parseFloat(loss[0].training_loss) || 5 - // console.log(vf) - const vv = 1 - norm(vf, scaleMin, scaleMax/2) - ctx.lineWidth = (1-norm(vf, scaleMin, scaleMax)) * 5 - ctx.strokeStyle = 'rgba(' + [randrange(30,190), randrange(30,150), randrange(60,120)].join(',') + ',' + 0.8+ ')' - let begun = false - loss.forEach((a, i) => { - const v = parseFloat(a.training_loss) - if (! v) return - const x = lerp((i-2)/(epochsMax/(epochsScaleFactor))*(epochsScaleFactor), wmin, wmax) - const y = lerp(norm(v, scaleMin, scaleMax), hmax, hmin) - if (i === 0) { - return - } - if (! begun) { - begun = true - ctx.beginPath(x,y) - } else { - ctx.lineTo(x,y) - // ctx.stroke() - } - }) - ctx.stroke() - const i = loss.length-1 - const v = parseFloat(loss[i].training_loss) - const x = lerp((i-2)/(epochsMax/(epochsScaleFactor))*(epochsScaleFactor), wmin, wmax) - const y = lerp(norm(v, scaleMin, scaleMax), hmax, hmin) - const fontSize = 9 - ctx.font = 'italic ' + (fontSize * devicePixelRatio) + 'px "Georgia"' - ctx.fillText(key, x + fontSize, y + fontSize) - }) - } -} - -const mapStateToProps = state => ({ - samplernn: state.module.samplernn, -}) - -const mapDispatchToProps = (dispatch, ownProps) => ({ - actions: bindActionCreators(samplernnActions, dispatch), -}) - -export default connect(mapStateToProps, mapDispatchToProps)(SampleRNNLoss) diff --git a/app/client/modules/samplernn/samplernn.new.js b/app/client/modules/samplernn/samplernn.new.js deleted file mode 100644 index 66551bb..0000000 --- a/app/client/modules/samplernn/samplernn.new.js +++ /dev/null @@ -1,35 +0,0 @@ -import { h, Component } from 'preact' -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 ( -
- -
- ) - } -} -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/samplernn.results.js b/app/client/modules/samplernn/samplernn.results.js deleted file mode 100644 index 31079ce..0000000 --- a/app/client/modules/samplernn/samplernn.results.js +++ /dev/null @@ -1,84 +0,0 @@ -import { h, Component } from 'preact' -import { bindActionCreators } from 'redux' -import { Link } from 'react-router-dom'; -import { connect } from 'react-redux' - -import * as util from '../../util' -import * as samplernnActions from './samplernn.actions' -import * as audioPlayerActions from '../../common/audioPlayer/audioPlayer.actions' -import Loading from '../../common/loading.component' - -import { FileList, FileRow } from '../../common/fileList.component' - -class SampleRNNResults extends Component { - constructor(props){ - super() - if (!props.samplernn.data) props.actions.load_directories() - } - render(){ - if (this.props.samplernn.loading) return - const { folderLookup, fileLookup, datasetLookup } = this.props.samplernn.data - // const { folderLookup } = samplernn - - const renders = Object.keys(folderLookup).sort(util.sort.stringSort.asc).map(key => { - const folder = folderLookup[key] - let { mapFn, sortFn } = util.sort.orderByFn('epoch desc') - const datasetPairs = folder.datasets.map(name => datasetLookup[name]).map(mapFn).sort(sortFn) - const bestRenders = datasetPairs - .map(pair => pair[1]) - .filter(dataset => dataset.output.length) - .map(dataset => { - const { output } = dataset - return output.map(id => fileLookup[id]).map(mapFn).sort(sortFn)[0][1] - }) - // console.log(bestRenders.map(r => r.epoch)) - const path = folder.name === 'unsorted' - ? "/samplernn/import/" - : "/samplernn/datasets/" + folder.id + "/" - return ( -
-

{folder.name}

- { - e.preventDefault() - e.stopPropagation() - console.log('picked a file', file) - this.handlePick(file) - }} - /> -
- ) - }) - - return ( -
-
-

SampleRNN Results

- new project -
-
- {renders} -
-
- ) - } - handlePick(file){ - this.props.audioPlayer.play(file) - } -} - -const mapStateToProps = state => ({ - samplernn: state.module.samplernn, - runner: state.system.runner, - task: state.task, -}) - -const mapDispatchToProps = (dispatch, ownProps) => ({ - actions: bindActionCreators(samplernnActions, dispatch), - audioPlayer: bindActionCreators(audioPlayerActions, dispatch), -}) - -export default connect(mapStateToProps, mapDispatchToProps)(SampleRNNResults) diff --git a/app/client/modules/samplernn/samplernn.show.js b/app/client/modules/samplernn/samplernn.show.js deleted file mode 100644 index acc7692..0000000 --- a/app/client/modules/samplernn/samplernn.show.js +++ /dev/null @@ -1,106 +0,0 @@ -import { h, Component } from 'preact' -import { bindActionCreators } from 'redux' -import { connect } from 'react-redux' -import * as util from '../../util' - -import * as samplernnActions from './samplernn.actions' -import * as samplernnTasks from './samplernn.tasks' -import * as audioPlayerActions from '../../common/audioPlayer/audioPlayer.actions' - -import Loading from '../../common/loading.component' -import DatasetForm from '../../dataset/dataset.form' -import NewDatasetForm from '../../dataset/dataset.new' -import DatasetStatus from '../../dataset/dataset.status' -import { FileList, FileRow } from '../../common/fileList.component' - -import SampleRNNDatasets from './samplernn.datasets' - -import samplernnModule from './samplernn.module' - -class SampleRNNShow extends Component { - constructor(props){ - super(props) - this.datasetActions = this.datasetActions.bind(this) - } - render(){ - const { samplernn, match, history } = this.props - const { folderLookup } = (samplernn.data || {}) - const folder = (folderLookup || {})[samplernn.folder_id] || {} - return ( -
-
-
-

{folder ? folder.name : }

- -
-
- {folder && folder.name && folder.name !== 'unsorted' && - - } - { - e.preventDefault() - e.stopPropagation() - console.log('picked a file', file) - this.handlePick(file) - }} - datasetActions={this.datasetActions} - /> -
- ) - } - datasetActions(dataset, isFetching=false, isProcessing=false){ - const { samplernn, remote } = this.props - const input = 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, samplernn.folder_id, 1)}>train - remote.train_task(dataset, samplernn.folder_id, 2)}>2x - remote.train_task(dataset, samplernn.folder_id, 4)}>4x - remote.train_task(dataset, samplernn.folder_id, 6)}>6x - remote.train_task(dataset, samplernn.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 -
- } -
- ) - } - handlePick(file){ - this.props.audioPlayer.play(file) - } -} - -const mapStateToProps = state => ({ - samplernn: state.module.samplernn, - dataset: state.dataset, -}) - -const mapDispatchToProps = (dispatch, ownProps) => ({ - actions: bindActionCreators(samplernnActions, dispatch), - remote: bindActionCreators(samplernnTasks, dispatch), - audioPlayer: bindActionCreators(audioPlayerActions, dispatch), -}) - -export default connect(mapStateToProps, mapDispatchToProps)(SampleRNNShow) diff --git a/app/client/modules/samplernn/views/samplernn.graph.js b/app/client/modules/samplernn/views/samplernn.graph.js new file mode 100644 index 0000000..821f1cb --- /dev/null +++ b/app/client/modules/samplernn/views/samplernn.graph.js @@ -0,0 +1,159 @@ +import { h, Component } from 'preact' +import { bindActionCreators } from 'redux' +import { connect } from 'react-redux' + +import { lerp, norm, randint, randrange } from '../../../util' + +import * as samplernnActions from '../samplernn.actions' + +import Group from '../../../common/group.component' +import Slider from '../../../common/slider.component' +import Select from '../../../common/select.component' +import Button from '../../../common/button.component' +import { FileList } from '../../../common/fileList.component' +import TextInput from '../../../common/textInput.component' + +class SampleRNNGraph extends Component { + constructor(props){ + super() + props.actions.load_loss() + } + render(){ + this.refs = {} + return ( +
+
+

SampleRNN Loss Graph

+ this.refs['canvas'] = ref} /> +
+
+ ) + } + componentDidUpdate(){ + const { lossReport } = this.props.samplernn + if (! lossReport) return + const canvas = this.refs.canvas + canvas.width = window.innerWidth + canvas.height = window.innerHeight + canvas.style.width = canvas.width + 'px' + canvas.style.height = canvas.height + 'px' + + const ctx = canvas.getContext('2d') + const w = canvas.width = canvas.width * devicePixelRatio + const h = canvas.height = canvas.height * devicePixelRatio + ctx.clearRect(0,0,w,h) + + const keys = Object.keys(lossReport).sort().filter(k => !!lossReport[k].length) + let scaleMax = 0 + let scaleMin = Infinity + let epochsMax = 0 + keys.forEach(key => { + const loss = lossReport[key] + epochsMax = Math.max(loss.length, epochsMax) + loss.forEach((a) => { + const v = parseFloat(a.training_loss) + if (! v) return + scaleMax = Math.max(v, scaleMax) + scaleMin = Math.min(v, scaleMin) + }) + }) + // scaleMax *= 10 + console.log(scaleMax, scaleMin, epochsMax) + + scaleMax = 3 + scaleMin = 0 + const margin = 0 + const wmin = 0 + const wmax = w + const hmin = 0 + const hmax = h + const epochsScaleFactor = 1 // 3/2 + + let X, Y + for (var ii = 0; ii < epochsMax; ii++) { + X = lerp((ii)/(epochsMax/(epochsScaleFactor))*(epochsScaleFactor), wmin, wmax) + ctx.strokeStyle = 'rgba(0,0,0,0.3)' + ctx.beginPath(0, 0) + ctx.moveTo(X, 0) + ctx.lineTo(X, h) + ctx.lineWidth = 1 + // ctx.stroke() + if ( (ii % 5) === 0 ) { + ctx.lineWidth = 2 + ctx.stroke() + const fontSize = 12 + ctx.font = 'italic ' + (fontSize * devicePixelRatio) + 'px "Georgia"' + ctx.fillStyle = 'rgba(0,12,28,0.6)' + ctx.fillText(ii/5*6, X + (8 * devicePixelRatio), h - ((fontSize + 4) * devicePixelRatio)) + } + } + for (var ii = scaleMin; ii < scaleMax; ii += 1) { + Y = lerp(ii/scaleMax, hmin, hmax) + // ctx.strokeStyle = 'rgba(255,255,255,1.0)' + ctx.beginPath(0, 0) + ctx.moveTo(0, (h-Y)) + ctx.lineTo(w, (h-Y)) + ctx.lineWidth = 1 + // ctx.stroke() + // if ( (ii % 1) < 0.1) { + // ctx.strokeStyle = 'rgba(255,255,255,1.0)' + ctx.lineWidth = 2 + ctx.setLineDash([4, 4]) + ctx.stroke() + ctx.stroke() + ctx.stroke() + ctx.setLineDash([0,0]) + const fontSize = 12 + ctx.font = 'italic ' + (fontSize * devicePixelRatio) + 'px "Georgia"' + ctx.fillStyle = 'rgba(0,12,28,0.6)' + ctx.fillText(ii.toFixed(1), w-50, (h-Y) + fontSize + (10 * devicePixelRatio)) + // } + } + ctx.lineWidth = 1 + + keys.forEach(key => { + const loss = lossReport[key] + const vf = parseFloat(loss[loss.length-1].training_loss) || 0 + const vg = parseFloat(loss[0].training_loss) || 5 + // console.log(vf) + const vv = 1 - norm(vf, scaleMin, scaleMax/2) + ctx.lineWidth = (1-norm(vf, scaleMin, scaleMax)) * 5 + ctx.strokeStyle = 'rgba(' + [randrange(30,190), randrange(30,150), randrange(60,120)].join(',') + ',' + 0.8+ ')' + let begun = false + loss.forEach((a, i) => { + const v = parseFloat(a.training_loss) + if (! v) return + const x = lerp((i-2)/(epochsMax/(epochsScaleFactor))*(epochsScaleFactor), wmin, wmax) + const y = lerp(norm(v, scaleMin, scaleMax), hmax, hmin) + if (i === 0) { + return + } + if (! begun) { + begun = true + ctx.beginPath(x,y) + } else { + ctx.lineTo(x,y) + // ctx.stroke() + } + }) + ctx.stroke() + const i = loss.length-1 + const v = parseFloat(loss[i].training_loss) + const x = lerp((i-2)/(epochsMax/(epochsScaleFactor))*(epochsScaleFactor), wmin, wmax) + const y = lerp(norm(v, scaleMin, scaleMax), hmax, hmin) + const fontSize = 9 + ctx.font = 'italic ' + (fontSize * devicePixelRatio) + 'px "Georgia"' + ctx.fillText(key, x + fontSize, y + fontSize) + }) + } +} + +const mapStateToProps = state => ({ + samplernn: state.module.samplernn, +}) + +const mapDispatchToProps = (dispatch, ownProps) => ({ + actions: bindActionCreators(samplernnActions, dispatch), +}) + +export default connect(mapStateToProps, mapDispatchToProps)(SampleRNNGraph) diff --git a/app/client/modules/samplernn/views/samplernn.import.js b/app/client/modules/samplernn/views/samplernn.import.js new file mode 100644 index 0000000..6f5f78a --- /dev/null +++ b/app/client/modules/samplernn/views/samplernn.import.js @@ -0,0 +1,145 @@ +import { h, Component } from 'preact' +import { bindActionCreators } from 'redux' +import { connect } from 'react-redux' +import * as util from '../../../util' + +import * as samplernnActions from '../samplernn.actions' + +import Select from '../../../common/select.component' +import TextInput from '../../../common/textInput.component' +import Button from '../../../common/button.component' + +import SampleRNNDatasets from '../samplernn.datasets' + +const samplernnModule = { + name: 'samplernn', + datatype: 'audio', +} + +class SampleRNNImport extends Component { + constructor(){ + super() + this.state = { + folder: 1, + import_action: 'Hotlink', + url_base: 'https://s3.amazonaws.com/i.asdf.us/bucky/data/4279/', + selected: {}, + } + } + componentWillMount(){ + const id = this.props.match.params.id || localStorage.getItem('samplernn.last_id') + console.log('load dataset:', id) + const { match, samplernn, samplernnActions } = this.props + if (id === 'new') return + if (id) { + if (parseInt(id)) localStorage.setItem('samplernn.last_id', id) + if (! samplernn.folder || samplernn.folder.id !== id) { + samplernnActions.load_directories(id) + } + } + } + render(){ + let datasets = [], folder; + if (this.props.samplernn.data) { + datasets = (this.props.samplernn.data.folders || []).map(folder => { + return [folder.name, folder.id] + }) + folder = this.props.samplernn.data.folderLookup.unsorted + } + return ( +
+
+

Import

+
+
+
+
+
+
+
+
+
+
+

Import to dataset

+ this.setState({ import_action: value })} + /> + this.setState({ url_base: value })} + /> + +
+
+
+ this.toggle(dataset.name, this.state.selected[name]))} + beforeRow={dataset => this.beforeRow(dataset)} + afterRow={dataset => this.afterRow(dataset)} + /> +
+ ) + } + toggle(name){ + this.setState({ + ...this.state, + selected: { + ...this.state.selected, + [name]: !this.state.selected[name], + } + }) + } + beforeRow(dataset){ + // console.log(dataset) + } + afterRow(dataset){ + const name = dataset.name + return ( +
+ +
+ ) + } + doImport(){ + const { samplernn } = this.props + console.log(this.state) + this.props.actions.import_files(this.state, samplernn.data.datasetLookup, samplernn.data.fileLookup) + } +} + +const mapStateToProps = state => ({ + samplernn: state.module.samplernn, + runner: state.system.runner, + task: state.task, +}) + +const mapDispatchToProps = (dispatch, ownProps) => ({ + actions: bindActionCreators(samplernnActions, dispatch), +}) + +export default connect(mapStateToProps, mapDispatchToProps)(SampleRNNImport) diff --git a/app/client/modules/samplernn/views/samplernn.new.js b/app/client/modules/samplernn/views/samplernn.new.js new file mode 100644 index 0000000..d76e6c0 --- /dev/null +++ b/app/client/modules/samplernn/views/samplernn.new.js @@ -0,0 +1,35 @@ +import { h, Component } from 'preact' +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 ( +
+ +
+ ) + } +} +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.results.js b/app/client/modules/samplernn/views/samplernn.results.js new file mode 100644 index 0000000..12367a3 --- /dev/null +++ b/app/client/modules/samplernn/views/samplernn.results.js @@ -0,0 +1,84 @@ +import { h, Component } from 'preact' +import { bindActionCreators } from 'redux' +import { Link } from 'react-router-dom'; +import { connect } from 'react-redux' + +import * as util from '../../../util' +import * as samplernnActions from '../samplernn.actions' +import * as audioPlayerActions from '../../../common/audioPlayer/audioPlayer.actions' + +import Loading from '../../../common/loading.component' +import { FileList, FileRow } from '../../../common/fileList.component' + +class SampleRNNResults extends Component { + constructor(props){ + super() + if (!props.samplernn.data) props.actions.load_directories() + } + render(){ + if (this.props.samplernn.loading) return + const { folderLookup, fileLookup, datasetLookup } = this.props.samplernn.data + // const { folderLookup } = samplernn + + const renders = Object.keys(folderLookup).sort(util.sort.stringSort.asc).map(key => { + const folder = folderLookup[key] + let { mapFn, sortFn } = util.sort.orderByFn('epoch desc') + const datasetPairs = folder.datasets.map(name => datasetLookup[name]).map(mapFn).sort(sortFn) + const bestRenders = datasetPairs + .map(pair => pair[1]) + .filter(dataset => dataset.output.length) + .map(dataset => { + const { output } = dataset + return output.map(id => fileLookup[id]).map(mapFn).sort(sortFn)[0][1] + }) + // console.log(bestRenders.map(r => r.epoch)) + const path = folder.name === 'unsorted' + ? "/samplernn/import/" + : "/samplernn/datasets/" + folder.id + "/" + return ( +
+

{folder.name}

+ { + e.preventDefault() + e.stopPropagation() + console.log('picked a file', file) + this.handlePick(file) + }} + /> +
+ ) + }) + + return ( +
+
+

SampleRNN Results

+ new project +
+
+ {renders} +
+
+ ) + } + handlePick(file){ + this.props.audioPlayer.play(file) + } +} + +const mapStateToProps = state => ({ + samplernn: state.module.samplernn, + runner: state.system.runner, + task: state.task, +}) + +const mapDispatchToProps = (dispatch, ownProps) => ({ + actions: bindActionCreators(samplernnActions, dispatch), + audioPlayer: bindActionCreators(audioPlayerActions, dispatch), +}) + +export default connect(mapStateToProps, mapDispatchToProps)(SampleRNNResults) diff --git a/app/client/modules/samplernn/views/samplernn.show.js b/app/client/modules/samplernn/views/samplernn.show.js new file mode 100644 index 0000000..8b42d44 --- /dev/null +++ b/app/client/modules/samplernn/views/samplernn.show.js @@ -0,0 +1,118 @@ +import { h, Component } from 'preact' +import { bindActionCreators } from 'redux' +import { connect } from 'react-redux' +import * as util from '../../../util' + +import * as samplernnActions from '../samplernn.actions' +import * as samplernnTasks from '../samplernn.tasks' +import * as audioPlayerActions from '../../../common/audioPlayer/audioPlayer.actions' + +import Loading from '../../../common/loading.component' +import DatasetForm from '../../../dataset/dataset.form' +import NewDatasetForm from '../../../dataset/dataset.new' +import DatasetStatus from '../../../dataset/dataset.status' +import { FileList, FileRow } from '../../../common/fileList.component' + +import SampleRNNDatasets from '../samplernn.datasets' + +import samplernnModule from '../samplernn.module' + +class SampleRNNShow extends Component { + constructor(props){ + super(props) + this.datasetActions = this.datasetActions.bind(this) + } + componentWillMount(){ + const id = this.props.match.params.id || localStorage.getItem('samplernn.last_id') + console.log('load dataset:', id) + const { match, samplernn, actions } = this.props + if (id === 'new') return + if (id) { + if (parseInt(id)) localStorage.setItem('samplernn.last_id', id) + if (! samplernn.folder || samplernn.folder.id !== id) { + actions.load_directories(id) + } + } + } + render(){ + const { samplernn, match, history } = this.props + const { folderLookup } = (samplernn.data || {}) + const folder = (folderLookup || {})[samplernn.folder_id] || {} + return ( +
+
+
+

{folder ? folder.name : }

+ +
+
+ {folder && folder.name && folder.name !== 'unsorted' && + + } + { + e.preventDefault() + e.stopPropagation() + console.log('picked a file', file) + this.handlePick(file) + }} + datasetActions={this.datasetActions} + /> +
+ ) + } + datasetActions(dataset, isFetching=false, isProcessing=false){ + const { samplernn, remote } = this.props + const input = samplernn.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, samplernn.folder_id, 1)}>train + remote.train_task(dataset, samplernn.folder_id, 2)}>2x + remote.train_task(dataset, samplernn.folder_id, 4)}>4x + remote.train_task(dataset, samplernn.folder_id, 6)}>6x + remote.train_task(dataset, samplernn.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 +
+ } +
+ ) + } + handlePick(file){ + this.props.audioPlayer.play(file) + } +} + +const mapStateToProps = state => ({ + samplernn: state.module.samplernn, + dataset: state.dataset, +}) + +const mapDispatchToProps = (dispatch, ownProps) => ({ + actions: bindActionCreators(samplernnActions, dispatch), + remote: bindActionCreators(samplernnTasks, dispatch), + audioPlayer: bindActionCreators(audioPlayerActions, dispatch), +}) + +export default connect(mapStateToProps, mapDispatchToProps)(SampleRNNShow) -- cgit v1.2.3-70-g09d2