From 2664eb3e474f5d03d1782c15673b774d68fb2c58 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Mon, 28 May 2018 13:06:54 +0200 Subject: textInput/fileUpload --- app/client/common/fileUpload.component.js | 28 +++ app/client/common/header.component.js | 27 ++- app/client/common/textInput.component.js | 34 +++ app/client/index.jsx | 16 +- app/client/modules/index.js | 6 + app/client/modules/pix2pix/datasets.component.js | 0 app/client/modules/pix2pix/index.js | 28 +++ app/client/modules/pix2pix/live.component.js | 252 +++++++++++++++++++++ app/client/modules/samplernn/datasets.component.js | 58 +++++ app/client/modules/samplernn/index.js | 26 +++ app/client/pix2pix/index.js | 5 - app/client/pix2pix/live.component.js | 252 --------------------- app/client/system/system.actions.js | 4 + app/client/system/system.reducer.js | 11 + app/client/types.js | 3 + app/relay/remote.js | 2 +- app/relay/runner.js | 19 +- app/server/index.js | 4 +- 18 files changed, 487 insertions(+), 288 deletions(-) create mode 100644 app/client/common/fileUpload.component.js create mode 100644 app/client/common/textInput.component.js create mode 100644 app/client/modules/index.js create mode 100644 app/client/modules/pix2pix/datasets.component.js create mode 100644 app/client/modules/pix2pix/index.js create mode 100644 app/client/modules/pix2pix/live.component.js create mode 100644 app/client/modules/samplernn/datasets.component.js create mode 100644 app/client/modules/samplernn/index.js delete mode 100644 app/client/pix2pix/index.js delete mode 100644 app/client/pix2pix/live.component.js (limited to 'app') diff --git a/app/client/common/fileUpload.component.js b/app/client/common/fileUpload.component.js new file mode 100644 index 0000000..5a1291c --- /dev/null +++ b/app/client/common/fileUpload.component.js @@ -0,0 +1,28 @@ +import { h, Component } from 'preact' + +class FileUpload extends Component { + constructor(props){ + super(props) + this.handleChange = this.handleChange.bind(this) + } + handleChange(e){ + this.props.onChange && this.props.onChange() + } + render() { + return ( +
+ +
+ ) + } +} + +export default FileUpload diff --git a/app/client/common/header.component.js b/app/client/common/header.component.js index 29c3713..5c1c145 100644 --- a/app/client/common/header.component.js +++ b/app/client/common/header.component.js @@ -1,36 +1,41 @@ import { h, Component } from 'preact' +import { bindActionCreators } from 'redux' import { Link } from 'react-router-dom'; import { connect } from 'react-redux' -function Header(props) { - const tools = "pix2pix samplernn style_transfer_video style_transfer_audio".split(" ").map((s,i) => { - return +import * as systemActions from '../system/system.actions' + +import modules from '../modules' + +function Header({ fps, app, actions }) { + const tool_list = Object.keys(modules).map((name, i) => { + const label = name.replace(/_/, " ") + return }) + const Links = modules[app.tool].links return (
live cortex - actions.changeTool(e.target.value)} value={app.tool}> + {tool_list} system dashboard - checkpoints - datasets - results - live - {props.fps} fps + + {fps} fps
) } const mapStateToProps = state => ({ + app: state.system.app, fps: state.live.fps, - frame: state.live.frame, }) const mapDispatchToProps = (dispatch, ownProps) => ({ + actions: bindActionCreators(systemActions, dispatch), }) export default connect(mapStateToProps, mapDispatchToProps)(Header) diff --git a/app/client/common/textInput.component.js b/app/client/common/textInput.component.js new file mode 100644 index 0000000..b3c4866 --- /dev/null +++ b/app/client/common/textInput.component.js @@ -0,0 +1,34 @@ +import { h, Component } from 'preact' + +class TextInput extends Component { + constructor(props){ + super(props) + this.handleInput = this.handleInput.bind(this) + this.handleKeydown = this.handleKeydown.bind(this) + } + handleInput(e){ + this.props.onInput && this.props.onInput(e.target.value) + } + handleKeydown(e){ + if (e.keyCode === 13) { + this.props.onSave && this.props.onSave(e.target.value) + } + } + render() { + return ( +
+ +
+ ) + } +} + +export default TextInput diff --git a/app/client/index.jsx b/app/client/index.jsx index ae09534..c5abf91 100644 --- a/app/client/index.jsx +++ b/app/client/index.jsx @@ -7,21 +7,25 @@ import { store, history } from './store' import * as socket from './socket' import Header from './common/header.component' -import Dashboard from './dashboard/dashboard.component' import System from './system/system.component' -import Pix2Pix from './pix2pix' +import Dashboard from './dashboard/dashboard.component' +import modules from './modules' + +const module_list = Object.keys(modules).map(name => { + const module = modules[name] + return ( + + ) +}) const app = (
- - - - + {module_list}
diff --git a/app/client/modules/index.js b/app/client/modules/index.js new file mode 100644 index 0000000..6ca4bc5 --- /dev/null +++ b/app/client/modules/index.js @@ -0,0 +1,6 @@ +import pix2pix from './pix2pix' +import samplernn from './samplernn' + +export default { + pix2pix, samplernn +} \ No newline at end of file diff --git a/app/client/modules/pix2pix/datasets.component.js b/app/client/modules/pix2pix/datasets.component.js new file mode 100644 index 0000000..e69de29 diff --git a/app/client/modules/pix2pix/index.js b/app/client/modules/pix2pix/index.js new file mode 100644 index 0000000..6271dbf --- /dev/null +++ b/app/client/modules/pix2pix/index.js @@ -0,0 +1,28 @@ +import { h, Component } from 'preact' +import { Route, Link } from 'react-router-dom' + +import Pix2PixLive from './live.component' + +function router () { + return ( +
+ +
+ ) +} + +function links(){ + return ( + + datasets + checkpoints + results + live + + ) +} + +export default { + name: 'pix2pix', + router, links, +} \ No newline at end of file diff --git a/app/client/modules/pix2pix/live.component.js b/app/client/modules/pix2pix/live.component.js new file mode 100644 index 0000000..c1f2b51 --- /dev/null +++ b/app/client/modules/pix2pix/live.component.js @@ -0,0 +1,252 @@ +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 LivePix2Pix 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)(LivePix2Pix) diff --git a/app/client/modules/samplernn/datasets.component.js b/app/client/modules/samplernn/datasets.component.js new file mode 100644 index 0000000..989f145 --- /dev/null +++ b/app/client/modules/samplernn/datasets.component.js @@ -0,0 +1,58 @@ +import { h, Component } from 'preact' +import { bindActionCreators } from 'redux' +import { connect } from 'react-redux' + +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 FileUpload from '../../common/fileUpload.component' +import TextInput from '../../common/textInput.component' + +class SampleRNNDatasets extends Component { + constructor(props){ + super() + this.handleUpload = this.handleUpload.bind(this) + this.handleURL = this.handleURL.bind(this) + } + handleUpload(file) { + + } + handleURL(url) { + + } + render(){ + return ( +
+
+

SampleRNN Datasets

+
+
+
+ + + + +
+
+
+ ) + } +} +function timeInSeconds(n){ + return (n / 10).toFixed(1) + ' s.' +} +const mapStateToProps = state => ({ +}) + +const mapDispatchToProps = (dispatch, ownProps) => ({ + // actions: bindActionCreators(liveActions, dispatch) +}) + +export default connect(mapStateToProps, mapDispatchToProps)(SampleRNNDatasets) diff --git a/app/client/modules/samplernn/index.js b/app/client/modules/samplernn/index.js new file mode 100644 index 0000000..6cf2e6d --- /dev/null +++ b/app/client/modules/samplernn/index.js @@ -0,0 +1,26 @@ +import { h, Component } from 'preact' +import { Route, Link } from 'react-router-dom' +import SampleRNNDatasets from './datasets.component' + +function router () { + return ( +
+ +
+ ) +} + +function links(){ + return ( + + datasets + checkpoints + results + + ) +} + +export default { + name: 'samplernn', + router, links, +} \ No newline at end of file diff --git a/app/client/pix2pix/index.js b/app/client/pix2pix/index.js deleted file mode 100644 index 282868f..0000000 --- a/app/client/pix2pix/index.js +++ /dev/null @@ -1,5 +0,0 @@ -import Pix2PixLive from './live.component' - -export default { - Live: Pix2PixLive, -} \ No newline at end of file diff --git a/app/client/pix2pix/live.component.js b/app/client/pix2pix/live.component.js deleted file mode 100644 index 9792dbd..0000000 --- a/app/client/pix2pix/live.component.js +++ /dev/null @@ -1,252 +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 LivePix2Pix 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)(LivePix2Pix) diff --git a/app/client/system/system.actions.js b/app/client/system/system.actions.js index 519e140..4c5f98e 100644 --- a/app/client/system/system.actions.js +++ b/app/client/system/system.actions.js @@ -5,3 +5,7 @@ export const run = (cmd) => { socket.system.run_system_command(cmd) return { type: types.system.running_command, cmd } } + +export const changeTool = (tool) => { + return { type: types.app.change_tool, tool } +} \ No newline at end of file diff --git a/app/client/system/system.reducer.js b/app/client/system/system.reducer.js index f945a65..fe3d9e3 100644 --- a/app/client/system/system.reducer.js +++ b/app/client/system/system.reducer.js @@ -9,6 +9,9 @@ const systemInitialState = { site: { name: 'Lens Cortex', }, + app: { + tool: 'samplernn', + }, server: { connected: false, status: "disconnected", @@ -179,6 +182,14 @@ const systemReducer = (state = systemInitialState, action) => { [action.task.processor]: { status: 'IDLE', task: {} }, }, } + case types.app.change_tool: + return { + ...state, + app: { + ...state.app, + tool: action.tool, + } + } case types.system.stdout: return { ...state, diff --git a/app/client/types.js b/app/client/types.js index df5da72..6f4a0b2 100644 --- a/app/client/types.js +++ b/app/client/types.js @@ -9,6 +9,9 @@ export default { stdout: 'SYSTEM_STDOUT', stderr: 'SYSTEM_STDERR', }, + app: { + change_tool: "APP_CHANGE_TOOL", + }, task: { starting_task: 'TASK_STARTING_TASK', task_begin: 'TASK_BEGIN', diff --git a/app/relay/remote.js b/app/relay/remote.js index ff2d32b..e468c7d 100644 --- a/app/relay/remote.js +++ b/app/relay/remote.js @@ -26,7 +26,7 @@ remote.on('cmd', (data) => { break default: rpc.invoke('send_command', data.cmd, data.payload || null, (err, res, more) => { - console.log('sent command', res) + console.log('command:', data.cmd, res) remote.emit('res', { cmd: data.cmd, res: res, diff --git a/app/relay/runner.js b/app/relay/runner.js index 906ddbf..ecdfcde 100644 --- a/app/relay/runner.js +++ b/app/relay/runner.js @@ -151,18 +151,17 @@ export function run_task(task, preempt, watch){ } task.uuid = task.uuid || uuidv1() - task.processor = interpreter.gpu ? 'gpu' : 'cpu' + const processor = task.processor = interpreter.gpu ? 'gpu' : 'cpu' remote.emit('task_res', { type: 'task_begin', task }) - if (watch) { - console.log("watching stdout..") - subprocess.stdout.on('data', data => { - remote.emit('task_res', { type: 'stdout', data: data.toString('utf8') }) - }) - subprocess.stderr.on('data', data => { - remote.emit('task_res', { type: 'stderr', data: data.toString('utf8') }) - }) - } + watch && console.log("watching stdout..") + + subprocess.stdout.on('data', data => { + watch && remote.emit('task_res', { type: 'stdout', processor, data: data.toString('utf8') }) + }) + subprocess.stderr.on('data', data => { + watch && remote.emit('task_res', { type: 'stderr', processor, data: data.toString('utf8') }) + }) let finished = false diff --git a/app/server/index.js b/app/server/index.js index 775454f..3797cbc 100644 --- a/app/server/index.js +++ b/app/server/index.js @@ -10,9 +10,7 @@ app.use(express.static('public', { extensions: ['html'] })) function serve_index(req, res) { res.sendFile(path.join(__dirname, '../../public', 'index.html')) } app.get('/dashboard/', serve_index) app.get('/system/', serve_index) -app.get('/checkpoints/', serve_index) -app.get('/datasets/', serve_index) -app.get('/live/', serve_index) +app.get('/:module/:mode/', serve_index) app.get('/', serve_index) // app.get('/images', site.images) // app.post('/print', bodyParser.urlencoded({ extended: false }), site.print) -- cgit v1.2.3-70-g09d2