summaryrefslogtreecommitdiff
path: root/app/client/pix2pix
diff options
context:
space:
mode:
Diffstat (limited to 'app/client/pix2pix')
-rw-r--r--app/client/pix2pix/index.js255
-rw-r--r--app/client/pix2pix/live.component.js252
2 files changed, 256 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
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)
generated by cgit v1.2.3-70-g09d2 (git 2.51.0) at 2025-12-10 18:18:44 +0000