diff options
| -rw-r--r-- | app/client/common/timeline.component.js | 2 | ||||
| -rw-r--r-- | app/client/modules/pix2pixhd/views/pix2pixhd.train.js | 35 | ||||
| -rw-r--r-- | app/client/modules/pix2pixhd/views/sequence.editor.js | 66 | ||||
| -rw-r--r-- | public/assets/css/css.css | 3 |
4 files changed, 65 insertions, 41 deletions
diff --git a/app/client/common/timeline.component.js b/app/client/common/timeline.component.js index 3008c37..d3739b1 100644 --- a/app/client/common/timeline.component.js +++ b/app/client/common/timeline.component.js @@ -53,7 +53,7 @@ export default class Timeline extends Component { const len = sequence.length - 1 const start = { frame: sequence[0], i: 0 } const end = { frame: sequence[len], i: len } - const width = Math.sqrt(clamp(sequence.length / 15000, 0.2, 1.0)) * Math.min(window.innerWidth - 40, 1000) + const width = Math.sqrt(clamp(sequence.length / 15000, 0.3, 1.0)) * Math.min(window.innerWidth - 40, 1000) const ratio = width / sequence.length setTimeout(() => this.computeOffset()) this.setState({ diff --git a/app/client/modules/pix2pixhd/views/pix2pixhd.train.js b/app/client/modules/pix2pixhd/views/pix2pixhd.train.js index 6aade36..1641976 100644 --- a/app/client/modules/pix2pixhd/views/pix2pixhd.train.js +++ b/app/client/modules/pix2pixhd/views/pix2pixhd.train.js @@ -72,9 +72,10 @@ class Pix2PixHDTrain extends Component { if (this.props.pix2pixhd.loading) { return <Loading progress={this.props.pix2pixhd.progress} /> } - const { pix2pixhd, match, history, queue } = this.props + const { pix2pixhd, match, history } = this.props const { folderLookup, datasetLookup } = (pix2pixhd.data || {}) const folder = (folderLookup || {})[pix2pixhd.folder_id] || {} + const { checkpoint } = pix2pixhd // console.log(pix2pixhd) const checkpointGroups = Object.keys(folderLookup).map(id => { @@ -122,19 +123,29 @@ class Pix2PixHDTrain extends Component { </Group> </div> </div> - <div> - <Group title='Sequence Editor'> - <SequenceEditor - module={pix2pixhdModule} - checkpoint={this.props.pix2pixhd.checkpoint} - /> - </Group> - </div> + {checkpoint && checkpoint.sequence && checkpoint.sequence.length + ? this.renderEditor() + : checkpoint && <div>Sequence empty, augmentation impossible</div>} + </div> + ) + } + + renderEditor(){ + const { pix2pixhd, queue } = this.props + const { checkpoint } = pix2pixhd + return ( + <div> + <Group title='Sequence Editor'> + <SequenceEditor + module={pix2pixhdModule} + checkpoint={checkpoint} + /> + </Group> <div className='columns'> <div className='column'> <Group title='Augmentation Grid'> <AugmentationGrid - checkpoint={this.props.pix2pixhd.checkpoint} + checkpoint={checkpoint} take={[1,2,3,4,5,10,15,20,25,50,75,100,200,300,400,500,1000]} make={[1,2,3,4,5,10,15,20,25,50,75,100,200,]} onAugment={(augment_take, augment_make) => { @@ -153,7 +164,7 @@ class Pix2PixHDTrain extends Component { augment_make: 149, no_symlinks: true, mov: true, - folder_id: this.props.pix2pixhd.data.resultsFolder.id + folder_id: pix2pixhd.data.resultsFolder.id }) }, 250) }} @@ -191,7 +202,7 @@ class Pix2PixHDTrain extends Component { ...this.state, no_symlinks: true, mov: true, - folder_id: this.props.pix2pixhd.data.resultsFolder.id + folder_id: pix2pixhd.data.resultsFolder.id }) }} /> diff --git a/app/client/modules/pix2pixhd/views/sequence.editor.js b/app/client/modules/pix2pixhd/views/sequence.editor.js index 3bf2d63..06f3889 100644 --- a/app/client/modules/pix2pixhd/views/sequence.editor.js +++ b/app/client/modules/pix2pixhd/views/sequence.editor.js @@ -5,7 +5,7 @@ import { Route, Link } from 'react-router-dom' import util from '../../../util' -import { FileViewer, Timeline, Param, Button } from '../../../common' +import { FileViewer, Timeline, Param, Button, Group, TextInput } from '../../../common' import actions from '../../../actions' @@ -13,6 +13,7 @@ const initialState = { dir: '/', cursor: null, selection: null, + title: null, } /* @@ -64,6 +65,7 @@ class SequenceEditor extends Component { console.log(checkpoint) this.setState({ ...initialState, + title: checkpoint.name + '_v_' + Date.now() }) } @@ -77,35 +79,47 @@ class SequenceEditor extends Component { render() { const { app, checkpoint } = this.props - const { cursor, selection } = this.state + const { cursor, selection, title } = this.state const path = "sequences/" + checkpoint.name return ( - <div className='sequenceEditor'> - <Timeline - sequence={checkpoint.sequence} - onCursor={this.handleCursor} - onSelect={this.handleSelect} - /> - <Frame label='Cursor' path={path} frame={cursor} /> - {selection && selection.start && - <Frame label='Selection Start' path={path} frame={selection.start} /> - } - {selection && selection.end && - <Frame label='Selection End' path={path} frame={selection.end} /> - } - {selection && - <div className='form'> - <Param - title='Selection length' - >{selection.end.i - selection.start.i}{' frames'}</Param> - <Param - title='Duration' - >{util.frameTimestamp(selection.end.i - selection.start.i)}</Param> - <Button - title='Create a new dataset?' - >Create</Button> + <div className='sequenceEditor row'> + {selection + ? <div className='form'> + <Group title='New dataset'> + <Param title='Selection length'> + {selection.end.i - selection.start.i}{' frames'} + </Param> + <Param title='Duration'> + {util.frameTimestamp(selection.end.i - selection.start.i)} + </Param> + <TextInput + title='Title dataset' + value={title} + onInput={title => this.setState({ title })} + /> + <Button + title='Create a new dataset?' + >Create</Button> + </Group> </div> + : <div className='form'><Group title='New dataset'>Please select some frames</Group></div> } + <div className='rows'> + <div className='row'> + <Frame label='Cursor' path={path} frame={cursor} /> + {selection && selection.start && + <Frame label='Selection Start' path={path} frame={selection.start} /> + } + {selection && selection.end && + <Frame label='Selection End' path={path} frame={selection.end} /> + } + </div> + <Timeline + sequence={checkpoint.sequence} + onCursor={this.handleCursor} + onSelect={this.handleSelect} + /> + </div> </div> ) } diff --git a/public/assets/css/css.css b/public/assets/css/css.css index 63ba51e..4a73396 100644 --- a/public/assets/css/css.css +++ b/public/assets/css/css.css @@ -744,8 +744,7 @@ input.small { height: 100px; } .sequenceEditor .form { - display: inline-block; - padding: 4px; + display: block; width: 300px; height: 130px; } |