diff options
Diffstat (limited to 'app/client/pix2pix/live.component.js')
| -rw-r--r-- | app/client/pix2pix/live.component.js | 252 |
1 files changed, 252 insertions, 0 deletions
diff --git a/app/client/pix2pix/live.component.js b/app/client/pix2pix/live.component.js new file mode 100644 index 0000000..9d41fbc --- /dev/null +++ b/app/client/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/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 ( + <div className='app'> + <Player width={424} height={256} /> + <div className='params'> + <div className='column'> + <ParamGroup + title='Playback' + noToggle + > + <Select + name='send_image' + title='view mode' + options={['a','b','sequence','recursive']} + /> + <Select + name='sequence_name' + title='sequence' + options={this.props.sequences} + onChange={this.changeSequence} + /> + <Select + name='checkpoint_name' + title='checkpoint' + options={this.props.checkpoints} + 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} + /> + <Button + title={'Processing: ' + (this.props.opt.processing ? 'yes' : 'no')} + onClick={this.togglePlaying} + > + {this.props.opt.processing ? 'Pause' : 'Restart'} + </Button> + <Button + title={ + this.props.opt.savingVideo + ? 'Saving video...' + : this.props.opt.recording + ? 'Recording (' + timeInSeconds(this.props.opt.recordFrames) +')' + : '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> + </div> + <div className='column'> + <ParamGroup + title='Transition' + name='transition' + > + <Slider + name='transition_period' + min={10} max={5000} type='int' + /> + <Slider + name='transition_min' + min={0.001} max={0.2} type='float' + /> + <Slider + name='transition_max' + min={0.1} max={1.0} type='float' + /> + </ParamGroup> + + <ParamGroup + title='Recursion' + name='recursive' + > + <Slider + name='recursive_frac' + min={0.0} max={0.5} type='float' + /> + <Slider + name='recurse_roll' + min={-64} max={64} type='int' + /> + <Slider + name='recurse_roll_axis' + min={0} max={1} type='int' + /> + </ParamGroup> + + <ParamGroup + title='Sequence' + name='sequence' + > + <Slider + name='sequence_frac' + min={0.0} max={0.5} type='float' + /> + <Slider + name='process_frac' + min={0} max={1} type='float' + /> + </ParamGroup> + </div> + <div className='column'> + <ParamGroup + title='Clahe' + name='clahe' + > + <Slider + name='clip_limit' + min={1.0} max={4.0} type='float' + /> + </ParamGroup> + + <ParamGroup + title='Posterize' + name='posterize' + > + <Slider + name='spatial_window' + min={2} max={128} type='int' + /> + <Slider + name='color_window' + min={2} max={128} type='int' + /> + </ParamGroup> + + <ParamGroup + title='Blur' + name='blur' + > + <Slider + name='blur_radius' + min={3} max={7} type='odd' + /> + <Slider + name='blur_sigma' + min={0} max={2} type='float' + /> + </ParamGroup> + + <ParamGroup + title='Canny Edge Detection' + name='canny' + > + <Slider + name='canny_lo' + min={10} max={200} type='int' + /> + <Slider + name='canny_hi' + min={10} max={200} type='int' + /> + </ParamGroup> + + </div> + </div> + </div> + ) + } +} +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) |