diff options
Diffstat (limited to 'app/client/pix2pix/index.js')
| -rw-r--r-- | app/client/pix2pix/index.js | 255 |
1 files changed, 4 insertions, 251 deletions
diff --git a/app/client/pix2pix/index.js b/app/client/pix2pix/index.js index 9d41fbc..282868f 100644 --- a/app/client/pix2pix/index.js +++ b/app/client/pix2pix/index.js @@ -1,252 +1,5 @@ -import { h, Component } from 'preact' -import { bindActionCreators } from 'redux' -import { connect } from 'react-redux' +import Pix2PixLive from './live.component' -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) +export default { + Live: Pix2PixLive, +}
\ No newline at end of file |