diff options
Diffstat (limited to 'app/client/modules/pix2pixhd/views')
| -rw-r--r-- | app/client/modules/pix2pixhd/views/pix2pixhd.live.js | 334 | ||||
| -rw-r--r-- | app/client/modules/pix2pixhd/views/pix2pixhd.new.js | 33 | ||||
| -rw-r--r-- | app/client/modules/pix2pixhd/views/pix2pixhd.show.js | 126 |
3 files changed, 493 insertions, 0 deletions
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 <Loading /> + } + return ( + <div className='app centered'> + <Player width={424} height={256} /> + <div className='params row'> + <div className='column'> + <ParamGroup + title='Playback' + noToggle + > + <Select + name='send_image' + title='view mode' + options={['a','b','sequence','recursive']} + onChange={this.props.actions.live.set_param} + /> + <Select + name='sequence_name' + title='sequence' + options={this.props.pix2pixhd.data.sequences.map(file => file.name)} + onChange={this.changeSequence} + /> + <Select + name='checkpoint_name' + title='checkpoint' + options={this.props.pix2pixhd.data.checkpoints.map(file => file.name)} + onChange={this.changeCheckpoint} + /> + <Select + name='epoch' + title='epoch' + options={this.props.epochs} + onChange={this.changeEpoch} + /> + <Slider + name='position' + min={0.0} max={1.0} type='float' + value={(this.props.frame.sequence_i || 0) / (this.props.frame.sequence_len || 1)} + onChange={this.seek} + /> + <Slider live + name='frame_delay' + min={0.05} max={2.0} type='float' + /> + {this.renderRestartButton()} + <Button + title={ + this.props.opt.savingVideo + ? 'Saving video...' + : this.props.opt.recording + ? 'Recording (' + timeInSeconds(this.props.opt.recordFrames/25) +')' + : 'Record video' + } + onClick={this.toggleRecording} + > + {this.props.opt.savingVideo ? 'Saving' : this.props.opt.recording ? 'Recording' : 'Record'} + </Button> + <Button + title={'Save frame'} + onClick={saveFrame} + > + Save + </Button> + <ParamGroup + title='Render on server' + name='store_b' + onToggle={(value) => { + // now storing frames on server... + }} + > + </ParamGroup> + + <p class='last_message'>{this.props.last_message}</p> + </ParamGroup> + </div> + <div className='column'> + <ParamGroup + title='Transition' + name='transition' + > + <Slider live + name='transition_period' + min={10} max={5000} type='int' + /> + <Slider live + name='transition_min' + min={0.001} max={0.2} type='float' + /> + <Slider live + name='transition_max' + min={0.1} max={1.0} type='float' + /> + </ParamGroup> + + <ParamGroup + title='Recursion' + name='recursive' + > + <Slider live + name='recursive_frac' + min={0.0} max={0.5} type='float' + /> + <Slider live + name='recurse_roll' + min={-64} max={64} type='int' + /> + <Slider live + name='recurse_roll_axis' + min={0} max={1} type='int' + /> + </ParamGroup> + + <ParamGroup + title='Sequence' + name='sequence' + > + <Slider live + name='sequence_frac' + min={0.0} max={0.5} type='float' + /> + <Slider live + name='process_frac' + min={0} max={1} type='float' + /> + </ParamGroup> + </div> + <div className='column'> + <ParamGroup + title='Clahe' + name='clahe' + > + <Slider live + name='clip_limit' + min={1.0} max={4.0} type='float' + /> + </ParamGroup> + + <ParamGroup + title='Posterize' + name='posterize' + > + <Slider live + name='spatial_window' + min={2} max={128} type='int' + /> + <Slider live + name='color_window' + min={2} max={128} type='int' + /> + </ParamGroup> + + <ParamGroup + title='Blur' + name='blur' + > + <Slider live + name='blur_radius' + min={3} max={7} type='odd' + /> + <Slider live + name='blur_sigma' + min={0} max={2} type='float' + /> + </ParamGroup> + + <ParamGroup + title='Canny Edge Detection' + name='canny' + > + <Slider live + name='canny_lo' + min={10} max={200} type='int' + /> + <Slider live + name='canny_hi' + min={10} max={200} type='int' + /> + </ParamGroup> + + </div> + </div> + </div> + ) + } + renderRestartButton(){ + if (this.props.runner.gpu.status === 'IDLE') { + return ( + <Button + title={'GPU Idle'} + onClick={() => this.start()} + >Start</Button> + ) + } + if (this.props.runner.gpu.task.module !== 'pix2pixhd') { + return ( + <Button + title={'GPU Busy'} + onClick={() => this.interrupt()} + >Interrupt</Button> + ) + } + if (! this.props.opt.processing) { + return ( + <div> + <Button + title={'Not processing'} + onClick={this.togglePlaying} + >Restart</Button> + <Button + title={'GPU Busy'} + onClick={() => this.interrupt()} + >Interrupt</Button> + </div> + ) + } + return ( + <div> + <Button + title={'Processing'} + onClick={this.togglePlaying} + >Pause</Button> + <Button + title={'GPU Busy'} + onClick={() => this.interrupt()} + >Interrupt</Button> + </div> + ) + } +} +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 ( + <Views.New + db={props.pix2pixhd} + path='/pix2pixhd/sequences/' + actions={props.actions} + module={pix2pixhdModule} + history={props.history} + /> + ) +} + +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 ( + <div className='app pix2pixhd'> + <div class='heading'> + <div class='spaced'> + <h1>{folder ? folder.name : <Loading />}</h1> + <UploadStatus /> + </div> + </div> + <div className='row'> + {folder && folder.name && folder.name !== 'unsorted' && + <DatasetForm + title='Add Files' + module={pix2pixhdModule} + folder={folder} + canUpload canAddURL + /> + } + <div> + <UploadStatus /> + <CurrentTask /> + </div> + </div> + + + <DatasetComponent + loading={pix2pixhd.loading} + progress={pix2pixhd.progress} + id={pix2pixhd.folder_id} + module={pix2pixhdModule} + data={pix2pixhd.data} + folder={folder} + history={history} + onPickFile={(file, e) => { + e.preventDefault() + e.stopPropagation() + console.log('picked a file', file) + }} + datasetActions={this.datasetActions} + /> + </div> + ) + } + 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 ( + <div> + <div class={'actions'}> + <span class='link' onClick={() => remote.train_task(dataset, pix2pixhd.folder_id, 1)}>train</span> + <span class='link' onClick={() => remote.train_task(dataset, pix2pixhd.folder_id, 5)}>5x</span> + <span class='link' onClick={() => remote.train_task(dataset, pix2pixhd.folder_id, 10)}>10x</span> + <span class='link' onClick={() => remote.train_task(dataset, pix2pixhd.folder_id, 20)}>20x</span> + <span class='link' onClick={() => remote.train_task(dataset, pix2pixhd.folder_id, 50)}>50x</span> + </div> + {dataset.isBuilt + ? <div class='subtext'> + {'fetched '} + <span class='link' onClick={() => remote.clear_cache_task(dataset)}>rm</span> + </div> + : isFetching + ? <div class='subtext'> + {'fetching'} + </div> + : <div class='subtext'> + <span class='link' onClick={() => remote.fetch_task(input.url, input.id, dataset.name)}>fetch</span> + </div> + } + </div> + ) + } +} + +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) |