diff options
Diffstat (limited to 'app/client/modules')
| -rw-r--r-- | app/client/modules/pix2pixhd/index.js | 3 | ||||
| -rw-r--r-- | app/client/modules/pix2pixhd/pix2pixhd.actions.js | 35 | ||||
| -rw-r--r-- | app/client/modules/pix2pixhd/pix2pixhd.reducer.js | 5 | ||||
| -rw-r--r-- | app/client/modules/pix2pixhd/pix2pixhd.tasks.js | 18 | ||||
| -rw-r--r-- | app/client/modules/pix2pixhd/views/pix2pixhd.live.js | 107 | ||||
| -rw-r--r-- | app/client/modules/pix2pixhd/views/pix2pixhd.uprez.js | 115 |
6 files changed, 238 insertions, 45 deletions
diff --git a/app/client/modules/pix2pixhd/index.js b/app/client/modules/pix2pixhd/index.js index cbd3136..511f4a0 100644 --- a/app/client/modules/pix2pixhd/index.js +++ b/app/client/modules/pix2pixhd/index.js @@ -8,6 +8,7 @@ import util from '../../util' import Pix2PixHDNew from './views/pix2pixhd.new' import Pix2PixHDShow from './views/pix2pixhd.show' import Pix2PixHDResults from './views/pix2pixhd.results' +import Pix2PixHDUprez from './views/pix2pixhd.uprez' import Pix2PixHDTrain from './views/pix2pixhd.train' import Pix2PixHDLive from './views/pix2pixhd.live' @@ -28,6 +29,7 @@ class router { <Route exact path='/pix2pixhd/sequences/:id/' component={Pix2PixHDShow} /> <Route exact path='/pix2pixhd/train/' component={Pix2PixHDTrain} /> <Route exact path='/pix2pixhd/results/' component={Pix2PixHDResults} /> + <Route exact path='/pix2pixhd/uprez/' component={Pix2PixHDUprez} /> <Route exact path='/pix2pixhd/live/' component={Pix2PixHDLive} /> </section> ) @@ -40,6 +42,7 @@ function links(){ { url: '/pix2pixhd/sequences/', name: 'sequences' }, { url: '/pix2pixhd/train/', name: 'checkpoints' }, { url: '/pix2pixhd/results/', name: 'results' }, + { url: '/pix2pixhd/uprez/', name: 'uprez' }, { url: '/pix2pixhd/live/', name: 'live' }, ] } diff --git a/app/client/modules/pix2pixhd/pix2pixhd.actions.js b/app/client/modules/pix2pixhd/pix2pixhd.actions.js index 68119e1..5ee6759 100644 --- a/app/client/modules/pix2pixhd/pix2pixhd.actions.js +++ b/app/client/modules/pix2pixhd/pix2pixhd.actions.js @@ -156,9 +156,9 @@ export const load_results = (id) => (dispatch) => { const module = pix2pixhdModule.name util.allProgress([ actions.folder.index({ name: 'results' }), - actions.file.index({ module, generated: 1 }), - actions.socket.list_sequences({ module, dir: 'results' }), + actions.file.index({ module, generated: 1, limit: 250 }), actions.socket.list_directory({ module, dir: 'renders' }), + actions.socket.list_sequences({ module, dir: 'results' }), ], (percent, i, n) => { console.log('pix2pixhd load progress', i, n) dispatch({ @@ -167,15 +167,42 @@ export const load_results = (id) => (dispatch) => { data: { module: 'pix2pixhd' }, }) }).then(res => { - const [folders, files, results, renders] = res //, datasets, results, output, datasetUsage, lossReport] = res + const [folders, files, renders, results] = res //, datasets, results, output, datasetUsage, lossReport] = res // console.log(files, results, renders) dispatch({ type: types.pix2pixhd.load_results, results: { resultsFolder: folders[0], files, - results, renders, + results, + } + }) + }) +} + +export const load_uprez = (id) => (dispatch) => { + const module = pix2pixhdModule.name + util.allProgress([ + actions.folder.index({ name: 'results' }), + actions.socket.list_sequences({ module, dir: 'results' }), + actions.file.index({ module, activity: 'uprez' }), + ], (percent, i, n) => { + console.log('pix2pixhd load progress', i, n) + dispatch({ + type: types.app.load_progress, + progress: { i, n }, + data: { module: 'pix2pixhd' }, + }) + }).then(res => { + const [folders, results, files,] = res //, datasets, results, output, datasetUsage, lossReport] = res + // console.log(files, results, renders) + dispatch({ + type: types.pix2pixhd.load_uprez, + uprez: { + resultsFolder: folders[0], + results, + files, } }) }) diff --git a/app/client/modules/pix2pixhd/pix2pixhd.reducer.js b/app/client/modules/pix2pixhd/pix2pixhd.reducer.js index 5a2afc0..7d6f6f3 100644 --- a/app/client/modules/pix2pixhd/pix2pixhd.reducer.js +++ b/app/client/modules/pix2pixhd/pix2pixhd.reducer.js @@ -26,6 +26,11 @@ const pix2pixhdReducer = (state = pix2pixhdInitialState, action) => { ...state, results: action.results, } + case types.pix2pixhd.load_uprez: + return { + ...state, + uprez: action.uprez, + } case types.pix2pixhd.load_dataset_count: return { ...state, diff --git a/app/client/modules/pix2pixhd/pix2pixhd.tasks.js b/app/client/modules/pix2pixhd/pix2pixhd.tasks.js index 36c0f36..ec864e3 100644 --- a/app/client/modules/pix2pixhd/pix2pixhd.tasks.js +++ b/app/client/modules/pix2pixhd/pix2pixhd.tasks.js @@ -89,4 +89,20 @@ export const splice_task = (opt) => dispatch => { console.log(task) console.log('add splice task') return actions.queue.add_task(task) -}
\ No newline at end of file +} + +export const uprez_task = (opt) => dispatch => { + const task = { + module: module.name, + activity: 'uprez', + dataset: opt.dataset, + folder_id: opt.folder_id, + opt: { + ...opt, + } + } + console.log(task) + console.log('add uprez task') + return actions.queue.add_task(task) +} + diff --git a/app/client/modules/pix2pixhd/views/pix2pixhd.live.js b/app/client/modules/pix2pixhd/views/pix2pixhd.live.js index 52b4b61..ee7ece7 100644 --- a/app/client/modules/pix2pixhd/views/pix2pixhd.live.js +++ b/app/client/modules/pix2pixhd/views/pix2pixhd.live.js @@ -14,6 +14,8 @@ import * as queueActions from '../../../queue/queue.actions' import * as pix2pixhdTasks from '../pix2pixhd.tasks' import * as pix2pixhdActions from '../pix2pixhd.actions' +import i18n from '../../../i18n' + class Pix2PixHDLive extends Component { constructor(props){ super() @@ -99,10 +101,11 @@ class Pix2PixHDLive extends Component { } render(){ // console.log(this.props) - if (this.props.pix2pixhd.loading) { - return <Loading progress={this.props.pix2pixhd.progress} /> + const { pix2pixhd, i18n } = this.props + if (pix2pixhd.loading) { + return <Loading progress={pix2pixhd.progress} /> } - const { folderLookup, datasetLookup, sequences } = this.props.pix2pixhd.data + const { folderLookup, datasetLookup, sequences } = pix2pixhd.data const sequenceLookup = sequences.reduce((a,b) => { a[b.name] = true @@ -110,7 +113,7 @@ class Pix2PixHDLive extends Component { }, {}) const sequenceGroups = Object.keys(folderLookup).map(id => { - const folder = this.props.pix2pixhd.data.folderLookup[id] + const folder = folderLookup[id] if (folder.name === 'results') return const datasets = folder.datasets.map(name => { const sequence = sequenceLookup[name] @@ -126,7 +129,7 @@ class Pix2PixHDLive extends Component { }).filter(n => !!n && !!n.options.length).sort((a,b) => a.name.localeCompare(b.name)) const checkpointGroups = Object.keys(folderLookup).map(id => { - const folder = this.props.pix2pixhd.data.folderLookup[id] + const folder = folderLookup[id] if (folder.name === 'results') return const datasets = folder.datasets.map(name => { const dataset = datasetLookup[name] @@ -147,61 +150,62 @@ class Pix2PixHDLive extends Component { <div className='params row'> <div className='column'> <ParamGroup - title='Network' + title={i18n.pix2pixhd.live.network.title} noToggle > <Select live name='send_image' - title='view mode' + title={i18n.pix2pixhd.live.network.view_mode} options={['a','b','sequence','recursive']} onChange={this.props.actions.live.set_param} /> <SelectGroup live name='sequence_name' - title='sequence' + title={i18n.pix2pixhd.live.network.sequence} options={sequenceGroups} onChange={this.changeSequence} /> <SelectGroup live name='checkpoint_name' - title='checkpoint' + title={i18n.pix2pixhd.live.network.checkpoint} options={checkpointGroups} onChange={this.changeCheckpoint} /> <Select live name='epoch' - title='epoch' + title={i18n.pix2pixhd.live.network.epoch} options={this.props.epochs} onChange={this.changeEpoch} /> </ParamGroup> <div> <ParamGroup - title='Playback' + title={i18n.pix2pixhd.live.playback.title} name='sequence_playing' > <Slider - name='position' + name={i18n.pix2pixhd.live.playback.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 - title='playback rate' + title={i18n.pix2pixhd.live.playback.playback_rate} name='sequence_step' min={-4.0} max={4.0} type='float' /> <Slider live - title='skip frames' + title={i18n.pix2pixhd.live.playback.skip_frames} name='sequence_skip' min={0} max={1000} type='int' /> <Slider live - title='fade sequence' + title={i18n.pix2pixhd.live.playback.fade_sequence} name='fade_sequence' min={0} max={4.0} type='float' /> <Slider live + title={i18n.pix2pixhd.live.playback.frame_delay} name='frame_delay' min={0.0} max={2.0} type='float' /> @@ -217,64 +221,74 @@ class Pix2PixHDLive extends Component { </div> <div className='column'> <ParamGroup - title='Transition' + title={i18n.pix2pixhd.live.transition.title} name='transition' > <Slider live name='transition_period' + title={i18n.pix2pixhd.live.transition.period} min={10} max={5000} type='int' /> <Slider live name='transition_min' + title={i18n.pix2pixhd.live.transition.min} min={0.001} max={0.2} type='float' /> <Slider live name='transition_max' + title={i18n.pix2pixhd.live.transition.max} min={0.1} max={1.0} type='float' /> </ParamGroup> <ParamGroup - title='Recursion' + title={i18n.pix2pixhd.live.recursion.title} name='recursive' > <Slider live + title={i18n.pix2pixhd.live.recursion.frac} name='recursive_frac' min={0.0} max={0.5} type='float' /> <Slider live + title={i18n.pix2pixhd.live.recursion.roll} name='recurse_roll' min={-64} max={64} type='int' /> <Slider live + title={i18n.pix2pixhd.live.recursion.axis} name='recurse_roll_axis' min={0} max={1} type='int' /> </ParamGroup> <ParamGroup - title='Sequence' + title={i18n.pix2pixhd.live.sequence.title} name='sequence' > <Slider live + title={i18n.pix2pixhd.live.sequence.frac} name='sequence_frac' min={0.0} max={1.0} type='float' /> <Slider live + title={i18n.pix2pixhd.live.sequence.process_frac} name='process_frac' min={0} max={1} type='float' /> </ParamGroup> <ParamGroup - title='Transform' + title={i18n.pix2pixhd.live.transform.title} name='transform' > <Slider live + title={i18n.pix2pixhd.live.transform.rotate} name='rotate' min={-1} max={1} type='float' /> <Slider live + title={i18n.pix2pixhd.live.transform.scale} name='scale' min={0.9} max={1.1} type='float' /> @@ -283,70 +297,80 @@ class Pix2PixHDLive extends Component { <div className='column'> <ParamGroup - title='Clahe' + title={i18n.pix2pixhd.live.clahe.title} name='clahe' > <Slider live + title={i18n.pix2pixhd.live.clahe.clip_limit} name='clip_limit' min={1.0} max={4.0} type='float' /> </ParamGroup> <ParamGroup - title='Posterize' + title={i18n.pix2pixhd.live.posterize.title} name='posterize' > <Slider live + title={i18n.pix2pixhd.live.posterize.spatial_window} name='spatial_window' min={2} max={128} type='int' /> <Slider live + title={i18n.pix2pixhd.live.posterize.color_window} name='color_window' min={2} max={128} type='int' /> </ParamGroup> <ParamGroup - title='Blur' + title={i18n.pix2pixhd.live.blur.title} name='blur' > <Slider live + title={i18n.pix2pixhd.live.blur.radius} name='blur_radius' min={3} max={7} type='odd' /> <Slider live + title={i18n.pix2pixhd.live.blur.sigma} name='blur_sigma' min={0} max={2} type='float' /> </ParamGroup> <ParamGroup - title='Canny Edge Detection' + title={i18n.pix2pixhd.live.canny.title} name='canny' > <Slider live + title={i18n.pix2pixhd.live.canny.lo} name='canny_lo' min={10} max={200} type='int' /> <Slider live + title={i18n.pix2pixhd.live.canny.hi} name='canny_hi' min={10} max={200} type='int' /> </ParamGroup> <ParamGroup - title='Hue / Saturation' + title={i18n.pix2pixhd.live.hsl.title} name='hsl' > <Slider live + title={i18n.pix2pixhd.live.hsl.hue} name='hue' min={-127} max={127} type='int' /> <Slider live + title={i18n.pix2pixhd.live.hsl.saturation} name='saturation' min={-255} max={255} type='int' /> <Slider live + title={i18n.pix2pixhd.live.hsl.luminosity} name='luminosity' min={-255} max={255} type='int' /> @@ -359,46 +383,47 @@ class Pix2PixHDLive extends Component { } renderRestartButton(){ // console.log(this.props.runner.gpu) + const { i18n } = this.props if (this.props.runner.gpu.status === 'IDLE') { return ( <Button - title={'GPU Idle'} + title={i18n.gpu.idle} onClick={() => this.start()} - >Start</Button> + >{i18n.gpu.start}</Button> ) } if (this.props.runner.gpu.task.module !== 'pix2pixhd') { return ( <Button - title={'GPU Busy'} + title={i18n.gpu.busy} onClick={() => this.interrupt()} - >Interrupt</Button> + >{i18n.gpu.interrupt}</Button> ) } if (! this.props.opt.processing) { return ( <div> <Button - title={'Not processing'} + title={i18n.gpu.not_processing} onClick={this.togglePlaying} - >Restart</Button> + >{i18n.gpu.restart}</Button> <Button - title={'GPU Busy'} + title={i18n.gpu.busy} onClick={() => this.interrupt()} - >Interrupt</Button> + >{i18n.gpu.interrupt}</Button> </div> ) } return ( <div> <Button - title={'Processing'} + title={i18n.gpu.processing} onClick={this.togglePlaying} - >Stop</Button> + >{i18n.gpu.stop}</Button> <Button - title={'GPU Busy'} + title={i18n.gpu.busy} onClick={() => this.interrupt()} - >Interrupt</Button> + >{i18n.gpu.interrupt}</Button> </div> ) } @@ -420,16 +445,17 @@ class Pix2PixHDLive extends Component { // ) } renderLiveButtons(){ + const { i18n } = this.props return ( <div> <Button - title={'Save frame'} + title={i18n.pix2pixhd.live.record.save_frame} onClick={saveFrame} > - Save + {i18n.pix2pixhd.live.record.save} </Button> <ParamGroup - title='Record video' + title={i18n.pix2pixhd.live.record.record_video} name='store_b' noDim onToggle={(value) => { @@ -437,7 +463,7 @@ class Pix2PixHDLive extends Component { }} > <TextInput - title='Video name' + title={i18n.pix2pixhd.live.record.video_name} name='final_tag' value={this.props.opt.final_tag} onSave={value => { @@ -461,6 +487,7 @@ const mapStateToProps = state => ({ epochs: state.live.epochs, sequences: state.live.sequences, runner: state.system.runner, + i18n: state.system.i18n.strings, pix2pixhd: state.module.pix2pixhd, }) diff --git a/app/client/modules/pix2pixhd/views/pix2pixhd.uprez.js b/app/client/modules/pix2pixhd/views/pix2pixhd.uprez.js new file mode 100644 index 0000000..982a1fc --- /dev/null +++ b/app/client/modules/pix2pixhd/views/pix2pixhd.uprez.js @@ -0,0 +1,115 @@ +import { h, Component } from 'preact' +import { bindActionCreators } from 'redux' +import { Link } from 'react-router-dom'; +import { connect } from 'react-redux' +import util from '../../../util' + +import actions from '../../../actions' + +import * as pix2pixhdActions from '../pix2pixhd.actions' +import * as pix2pixhdTasks from '../pix2pixhd.tasks' + +import Loading from '../../../common/loading.component' +import { FileList, FileRow } from '../../../common/fileList.component' + +let yes_count = 0 + +class Pix2pixHDUprez extends Component { + constructor(props){ + super() + if (!props.pix2pixhd.uprez) props.actions.load_uprez() + } + componentDidMount(){ + yes_count = 0 + } + render(){ + if (! this.props.pix2pixhd.uprez) return <Loading progress={this.props.pix2pixhd.progress} /> + + const { resultsFolder, results, renders, files } = this.props.pix2pixhd.uprez + // console.log(resultsFolder, results) + + return ( + <div className='app pix2pixhd'> + <div className='heading row middle'> + <h1>Pix2PixHD Uprez</h1> + </div> + <div class='rows params renders'> + + <h3>folders on server</h3> + <FileList + files={results} + orderBy='date desc' + fields={'name date count'} + onClick={(file, e) => { + e.preventDefault() + e.stopPropagation() + console.log('picked a result', file) + this.handlePick(file) + }} + options={file => { + console.log(file) + // create uprez task + return ( + <div> + {' ~ '} + <a href='#' onClick={() => this.handleUprez(file, { end: 250 })}>Uprez 10 seconds</a> + {' ~ '} + <a href='#' onClick={() => this.handleUprez(file, { end: 1500 })}>Uprez 1 minute</a> + {' ~ '} + <a href='#' onClick={() => this.handleUprez(file)}>Uprez whole thing</a> + </div> + ) + }} + /> + <br /> + + <h3>uprezzed videos</h3> + <FileList + linkFiles + files={files} + orderBy='date desc' + fields={'name date size delete'} + onDelete={file => { + let yes; + if (yes_count < 3) { + yes = confirm('Are you sure you want to delete this file?') + } else { + yes = true + } + if (yes) { + yes_count += 1 + console.log('delete: confirmed') + actions.file.destroy(file) + } + }} + /> + + </div> + </div> + ) + } + handlePick(file){ + // this.props.audioPlayer.play(file) + } + handleUprez(file, opt){ + console.log(file) + this.props.remote.uprez_task({ + is_result: true, + dataset: file.name, + folder_id: 1, + ...opt + }) + } +} + +const mapStateToProps = state => ({ + pix2pixhd: state.module.pix2pixhd, +}) + +const mapDispatchToProps = (dispatch, ownProps) => ({ + actions: bindActionCreators(pix2pixhdActions, dispatch), + remote: bindActionCreators(pix2pixhdTasks, dispatch), + // audioPlayer: bindActionCreators(audioPlayerActions, dispatch), +}) + +export default connect(mapStateToProps, mapDispatchToProps)(Pix2pixHDUprez) |
