diff options
Diffstat (limited to 'app/client/modules/pix2pixhd')
| -rw-r--r-- | app/client/modules/pix2pixhd/views/pix2pixhd.train.js | 35 | ||||
| -rw-r--r-- | app/client/modules/pix2pixhd/views/sequence.editor.js | 145 |
2 files changed, 96 insertions, 84 deletions
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 e66aebf..06f3889 100644 --- a/app/client/modules/pix2pixhd/views/sequence.editor.js +++ b/app/client/modules/pix2pixhd/views/sequence.editor.js @@ -3,28 +3,20 @@ import { bindActionCreators } from 'redux' import { connect } from 'react-redux' import { Route, Link } from 'react-router-dom' -import { Loading, FileList, FileViewer } from '../../../common' +import util from '../../../util' + +import { FileViewer, Timeline, Param, Button, Group, TextInput } from '../../../common' import actions from '../../../actions' const initialState = { dir: '/', - frameA: null, - frameB: null, + cursor: null, selection: null, - loading: true + title: null, } /* - when the sequence editor loads, - reset the selection - reset the two frames - set the two frames to the beginning and end of the video - when mousing over the video - ideally you would see a tiny thumbnail preview of the frame :) - - click to start a selection, drag over, mouseup to end the selection - this should update the start/end frame - ... so there are two things you could do with this 1) create an entirely new dataset 2) add frames to an existing dataset @@ -49,94 +41,103 @@ class SequenceEditor extends Component { constructor() { super() - this.handleMouseDown = this.handleMouseDown.bind(this) - this.handleMouseMove = this.handleMouseMove.bind(this) - this.handleMouseEnter = this.handleMouseEnter.bind(this) - this.handleMouseLeave = this.handleMouseLeave.bind(this) - this.handleMouseUp = this.handleMouseUp.bind(this) + this.handleCursor = this.handleCursor.bind(this) + this.handleSelect = this.handleSelect.bind(this) } componentDidMount() { const { checkpoint } = this.props - window.addEventListener('mousemove', this.handleMouseMove) - window.addEventListener('mouseup', this.handleMouseUp) - if (checkpoint && checkpoint.sequence) { - console.log(checkpoint) - const frameA = checkpoint.sequence[0] - const frameB = checkpoint.sequence[checkpoint.sequence.length-1] - this.setState({ - ...initialState, - frameA, - frameB, - }) + if (checkpoint) { + this.reset() } } componentDidUpdate(prevProps) { const { checkpoint } = this.props if (checkpoint !== prevProps.checkpoint) { - console.log(checkpoint) - const frameA = checkpoint.sequence[0] - const frameB = checkpoint.sequence[checkpoint.sequence.length-1] - this.setState({ - ...initialState, - frameA, - frameB, - }) + this.reset() } } - componentWillUnmount(){ - window.removeEventListener('mouseup', this.handleMouseUp) - window.removeEventListener('mousemove', this.handleMouseMove) + reset(){ + const { checkpoint } = this.props + if (!(checkpoint && checkpoint.sequence)) return + console.log(checkpoint) + this.setState({ + ...initialState, + title: checkpoint.name + '_v_' + Date.now() + }) } - handleMouseDown(e) { - this.setState({ dragging: true }) - } - handleMouseMove(e) { - } - handleMouseEnter(e) { - } - handleMouseLeave(e) { - } - handleMouseUp(e) { - this.setState({ dragging: false }) + handleCursor(cursor) { + this.setState({ cursor }) } - handlePick(file) { - console.log(file) - // this.setState({ dir, file: null, loading: true }) + handleSelect(selection) { + this.setState({ selection }) } render() { const { app, checkpoint } = this.props - const { - loading, - selection, - frameA, frameB, - } = this.state - // console.log(this.props, this.state) - const width = 200 + const { cursor, selection, title } = this.state const path = "sequences/" + checkpoint.name return ( - <div className='sequenceEditor'> - <div - className='timeline' - style={{ width }} - mouseDown={this.handleSelectionStart} - mouseEnter={this.handleMouseEnter} - mouseLeave={this.handleMouseLeave} - > - {selection && <div className='selection' style={selection}></div>} + <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> - <FileViewer thumbnail path={path} file={this.state.frameA} /> - <FileViewer thumbnail path={path} file={this.state.frameB} /> </div> ) } } +function Frame ({ label, path, frame }) { + if (!frame) return <div class='frame'></div> + return ( + <div class='frame'> + <FileViewer thumbnail={140} path={path} file={frame.frame} /> + <div class='spaced'> + <span>{label}</span> + <span>{'#'}{frame.i} {util.frameTimestamp(frame.i)}</span> + </div> + </div> + ) +} + const mapStateToProps = state => ({ app: state.system.app, }) |