diff options
Diffstat (limited to 'app/client/modules/pix2pixhd/views/pix2pixhd.live.js')
| -rw-r--r-- | app/client/modules/pix2pixhd/views/pix2pixhd.live.js | 334 |
1 files changed, 334 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) |