summaryrefslogtreecommitdiff
path: root/app/client/modules
diff options
context:
space:
mode:
Diffstat (limited to 'app/client/modules')
-rw-r--r--app/client/modules/pix2pixhd/index.js3
-rw-r--r--app/client/modules/pix2pixhd/pix2pixhd.actions.js35
-rw-r--r--app/client/modules/pix2pixhd/pix2pixhd.reducer.js5
-rw-r--r--app/client/modules/pix2pixhd/pix2pixhd.tasks.js18
-rw-r--r--app/client/modules/pix2pixhd/views/pix2pixhd.live.js107
-rw-r--r--app/client/modules/pix2pixhd/views/pix2pixhd.uprez.js115
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)