From cc36bb1ad49dc054b32f20a97386a938a529fe0e Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Sun, 17 Jun 2018 21:16:57 +0200 Subject: pix2pixhd modules --- .../modules/pix2pixhd/views/pix2pixhd.live.js | 334 +++++++++++++++++++++ .../modules/pix2pixhd/views/pix2pixhd.new.js | 33 ++ .../modules/pix2pixhd/views/pix2pixhd.show.js | 126 ++++++++ 3 files changed, 493 insertions(+) create mode 100644 app/client/modules/pix2pixhd/views/pix2pixhd.live.js create mode 100644 app/client/modules/pix2pixhd/views/pix2pixhd.new.js create mode 100644 app/client/modules/pix2pixhd/views/pix2pixhd.show.js (limited to 'app/client/modules/pix2pixhd/views') diff --git a/app/client/modules/pix2pixhd/views/pix2pixhd.live.js b/app/client/modules/pix2pixhd/views/pix2pixhd.live.js new file mode 100644 index 0000000..3f027a1 --- /dev/null +++ b/app/client/modules/pix2pixhd/views/pix2pixhd.live.js @@ -0,0 +1,334 @@ +import { h, Component } from 'preact' +import { bindActionCreators } from 'redux' +import { connect } from 'react-redux' + +import { + ParamGroup, Param, Player, + Slider, Select, Button, Loading +} from '../../../common/' + +import { startRecording, stopRecording, saveFrame, toggleFPS } from '../../../live/player' + +import * as liveActions from '../../../live/live.actions' +import * as queueActions from '../../../queue/queue.actions' +import * as pix2pixhdTasks from '../pix2pixhd.tasks' +import * as pix2pixhdActions from '../pix2pixhd.actions' + +class Pix2PixHDLive extends Component { + constructor(props){ + super() + // if (! props.pix2pixhd || ! props.pix2pixhd.data) { + props.actions.pix2pixhd.load_directories() + // } + props.actions.live.get_params() + // props.actions.live.list_checkpoints('pix2pixhd') + // props.actions.live.list_sequences('pix2pixhd') + 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.live.list_epochs('pix2pixhd', nextProps.opt.checkpoint_name) + } + } + changeCheckpoint(field, checkpoint_name){ + this.props.actions.live.load_epoch(checkpoint_name, 'latest') + } + changeEpoch(field, epoch_name){ + this.props.actions.live.load_epoch(this.props.opt.checkpoint_name, epoch_name) + } + changeSequence(field, sequence){ + console.log('load sequence', sequence) + this.props.actions.live.load_sequence(sequence) + } + seek(percentage){ + const frame = Math.floor(percentage * (parseInt(this.props.frame.sequence_len) || 1) + 1) + console.log("seek to frame", percentage, frame) + this.props.actions.live.seek(frame) + } + start(){ + // console.log(this.props) + const sequence = this.props.pix2pixhd.data.sequences[0].name + const checkpoint = this.props.pix2pixhd.data.checkpoints[0].name + console.log('starting up!', sequence, checkpoint) + this.props.actions.tasks.live_task(sequence, checkpoint) + } + interrupt(){ + this.props.actions.queue.stop_task('gpu') + } + togglePlaying(){ + if (this.props.opt.processing) { + this.props.actions.live.pause() + } else { + this.props.actions.live.play() + } + } + toggleRecording(){ + if (this.props.opt.recording){ + stopRecording() + this.props.actions.live.pause() + } else { + startRecording() + } + } + render(){ + // console.log(this.props) + if (this.props.pix2pixhd.loading) { + return + } + return ( +
+ +
+
+ + file.name)} + onChange={this.changeSequence} + /> + + + + {this.renderRestartButton()} + + + { + // now storing frames on server... + }} + > + + +

{this.props.last_message}

+ +
+
+ + + + + + + + + + + + + + + + +
+
+ + + + + + + + + + + + + + + + + + + +
+
+
+ ) + } + renderRestartButton(){ + if (this.props.runner.gpu.status === 'IDLE') { + return ( + + ) + } + if (this.props.runner.gpu.task.module !== 'pix2pixhd') { + return ( + + ) + } + if (! this.props.opt.processing) { + return ( +
+ + +
+ ) + } + return ( +
+ + +
+ ) + } +} +function timeInSeconds(n){ + return n.toFixed(1) + ' s.' +} +const mapStateToProps = state => ({ + last_message: state.live.last_message, + opt: state.live.opt, + frame: state.live.frame, + checkpoints: state.live.checkpoints, + epochs: state.live.epochs, + sequences: state.live.sequences, + runner: state.system.runner, + pix2pixhd: state.module.pix2pixhd, +}) + +const mapDispatchToProps = (dispatch, ownProps) => ({ + actions: { + live: bindActionCreators(liveActions, dispatch), + queue: bindActionCreators(queueActions, dispatch), + pix2pixhd: bindActionCreators(pix2pixhdActions, dispatch), + tasks: bindActionCreators(pix2pixhdTasks, dispatch),s + } +}) + +export default connect(mapStateToProps, mapDispatchToProps)(Pix2PixHDLive) diff --git a/app/client/modules/pix2pixhd/views/pix2pixhd.new.js b/app/client/modules/pix2pixhd/views/pix2pixhd.new.js new file mode 100644 index 0000000..d861229 --- /dev/null +++ b/app/client/modules/pix2pixhd/views/pix2pixhd.new.js @@ -0,0 +1,33 @@ +import { h, Component } from 'preact' +import { bindActionCreators } from 'redux' +import { connect } from 'react-redux' +import { Link } from 'react-router-dom' +import util from '../../../util' + +import { Views } from '../../../common' + +import * as pix2pixhdActions from '../pix2pixhd.actions' +import pix2pixhdModule from '../pix2pixhd.module' + +function Pix2PixHDNew(props){ + return ( + + ) +} + +const mapStateToProps = state => ({ + pix2pixhd: state.module.pix2pixhd, +}) + +const mapDispatchToProps = (dispatch, ownProps) => ({ + actions: bindActionCreators(pix2pixhdActions, dispatch), +}) + +export default connect(mapStateToProps, mapDispatchToProps)(Pix2PixHDNew) + diff --git a/app/client/modules/pix2pixhd/views/pix2pixhd.show.js b/app/client/modules/pix2pixhd/views/pix2pixhd.show.js new file mode 100644 index 0000000..5777ac0 --- /dev/null +++ b/app/client/modules/pix2pixhd/views/pix2pixhd.show.js @@ -0,0 +1,126 @@ +import { h, Component } from 'preact' +import { bindActionCreators } from 'redux' +import { connect } from 'react-redux' +import util from '../../../util' + +import * as pix2pixhdActions from '../pix2pixhd.actions' +import * as pix2pixhdTasks from '../pix2pixhd.tasks' + +import { Loading, CurrentTask, FileList, FileRow } from '../../../common' +import DatasetForm from '../../../dataset/dataset.form' +import NewDatasetForm from '../../../dataset/dataset.new' +import UploadStatus from '../../../dataset/upload.status' + +import DatasetComponent from '../../../dataset/dataset.component' + +import pix2pixhdModule from '../pix2pixhd.module' + +class Pix2PixHDShow extends Component { + constructor(props){ + super(props) + this.datasetActions = this.datasetActions.bind(this) + } + componentWillMount(){ + const id = this.props.match.params.id || localStorage.getItem('pix2pixhd.last_id') + console.log('load dataset:', id) + const { match, pix2pixhd, actions } = this.props + if (id === 'new') return + if (id) { + if (parseInt(id)) localStorage.setItem('pix2pixhd.last_id', id) + if (! pix2pixhd.folder || pix2pixhd.folder.id !== id) { + actions.load_directories(id) + } + } else { + this.props.history.push('/pix2pixhd/new/') + } + } + render(){ + const { pix2pixhd, match, history } = this.props + const { folderLookup } = (pix2pixhd.data || {}) + const folder = (folderLookup || {})[pix2pixhd.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 { pix2pixhd, remote } = this.props + const input = pix2pixhd.data.fileLookup[dataset.input[0]] + if (! input) return null + if (input.name && input.name.match(/(gif|jpe?g|png)$/i)) return null + console.log(dataset) + return ( +
+
+ remote.train_task(dataset, pix2pixhd.folder_id, 1)}>train + remote.train_task(dataset, pix2pixhd.folder_id, 5)}>5x + remote.train_task(dataset, pix2pixhd.folder_id, 10)}>10x + remote.train_task(dataset, pix2pixhd.folder_id, 20)}>20x + remote.train_task(dataset, pix2pixhd.folder_id, 50)}>50x +
+ {dataset.isBuilt + ?
+ {'fetched '} + remote.clear_cache_task(dataset)}>rm +
+ : isFetching + ?
+ {'fetching'} +
+ :
+ remote.fetch_task(input.url, input.id, dataset.name)}>fetch +
+ } +
+ ) + } +} + +const mapStateToProps = state => ({ + pix2pixhd: state.module.pix2pixhd, +}) + +const mapDispatchToProps = (dispatch, ownProps) => ({ + actions: bindActionCreators(pix2pixhdActions, dispatch), + remote: bindActionCreators(pix2pixhdTasks, dispatch), +}) + +export default connect(mapStateToProps, mapDispatchToProps)(Pix2PixHDShow) -- cgit v1.2.3-70-g09d2