From 28d6dd9a097be3f76ede22f63c6c68a78607aec8 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Sat, 22 Sep 2018 14:43:35 +0200 Subject: move fetch functionality into fileviweer --- app/client/modules/pix2pixhd/pix2pixhd.actions.js | 6 +++-- .../modules/pix2pixhd/views/pix2pixhd.train.js | 23 +++++++++++++++-- .../modules/pix2pixhd/views/sequence.editor.js | 29 ++++++++++++---------- 3 files changed, 41 insertions(+), 17 deletions(-) (limited to 'app/client/modules') diff --git a/app/client/modules/pix2pixhd/pix2pixhd.actions.js b/app/client/modules/pix2pixhd/pix2pixhd.actions.js index a17eeab..2c72f06 100644 --- a/app/client/modules/pix2pixhd/pix2pixhd.actions.js +++ b/app/client/modules/pix2pixhd/pix2pixhd.actions.js @@ -205,7 +205,7 @@ export const list_epochs = (checkpoint_name) => (dispatch) => { export const count_dataset = (checkpoint_name) => (dispatch) => { const module = pix2pixhdModule.name util.allProgress([ - actions.socket.count_directory({ module, dir: 'sequences/' + checkpoint_name + '/' }), + actions.socket.list_directory({ module, dir: 'sequences/' + checkpoint_name + '/' }), actions.socket.count_directory({ module, dir: 'datasets/' + checkpoint_name + '/train_A/' }), ], (percent, i, n) => { console.log('pix2pixhd load progress', i, n) @@ -215,12 +215,14 @@ export const count_dataset = (checkpoint_name) => (dispatch) => { data: { module: 'pix2pixhd' }, }) }).then(res => { - const [sequenceCount, datasetCount] = res //, datasets, results, output, datasetUsage, lossReport] = res + const [sequence, datasetCount] = res //, datasets, results, output, datasetUsage, lossReport] = res + const sequenceCount = sequence.length console.log(sequenceCount, datasetCount) dispatch({ type: types.pix2pixhd.load_dataset_count, data: { name: checkpoint_name, + sequence, sequenceCount, datasetCount, } diff --git a/app/client/modules/pix2pixhd/views/pix2pixhd.train.js b/app/client/modules/pix2pixhd/views/pix2pixhd.train.js index 957b068..ae46fdb 100644 --- a/app/client/modules/pix2pixhd/views/pix2pixhd.train.js +++ b/app/client/modules/pix2pixhd/views/pix2pixhd.train.js @@ -19,6 +19,7 @@ import NewDatasetForm from '../../../dataset/dataset.new' import UploadStatus from '../../../dataset/upload.status' import DatasetComponent from '../../../dataset/dataset.component' +import SequenceEditor from './sequence.editor' import pix2pixhdModule from '../pix2pixhd.module' @@ -34,7 +35,7 @@ class Pix2PixHDTrain extends Component { augment_make: 20, } } - componentWillMount(){ + componentDidMount(){ const id = this.props.match.params.id || localStorage.getItem('pix2pixhd.last_id') console.log('load dataset:', id) const { match, pix2pixhd, actions } = this.props @@ -47,9 +48,14 @@ class Pix2PixHDTrain extends Component { } else { this.props.history.push('/pix2pixhd/new/') } + const dataset = localStorage.getItem('pix2pixhd.last_dataset') + if (dataset) { + this.setState({ checkpoint_name: dataset }) + } } componentDidUpdate(prevProps, prevState){ if (prevState.checkpoint_name !== this.state.checkpoint_name) { + localStorage.setItem('pix2pixhd.last_dataset', this.state.checkpoint_name) this.setState({ epoch: 'latest' }) this.props.actions.list_epochs(this.state.checkpoint_name) this.props.actions.count_dataset(this.state.checkpoint_name) @@ -114,6 +120,19 @@ class Pix2PixHDTrain extends Component { value={this.state.epoch} /> + + +
+ + + +
+
+
{ console.log(files) this.setState({ dir, files, loading: false }) }) } - fetchFile(fn) { - console.log('fetch file', fn) - const { tool: module } = this.props.app - this.setState({ file: null, loadingFile: true }) - actions.socket.read_file({ module, fn }).then(file => { - console.log(file) - this.setState({ file, loadingFile: false }) - }) - } render() { const { app } = this.props const { @@ -49,6 +45,13 @@ class SequenceEditor extends Component { loadingFile, file, } = this.state console.log(this.props, this.state) + return ( +
+
+
+
+
+ ) // return ( //
//

{dir}{dir[dir.length-1] !== '/' && '/'}

-- cgit v1.2.3-70-g09d2 From 960a7495f502d3f6a604a14828dd68bc61bed92e Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Sat, 22 Sep 2018 16:32:46 +0200 Subject: preload sequence, dont overload fileviewer --- app/client/common/fileViewer.component.js | 32 +- .../modules/pix2pixhd/views/pix2pixhd.train.js | 5 +- .../modules/pix2pixhd/views/sequence.editor.js | 162 ++++-- package-lock.json | 545 +++++++++++++++++++++ package.json | 1 + 5 files changed, 682 insertions(+), 63 deletions(-) (limited to 'app/client/modules') diff --git a/app/client/common/fileViewer.component.js b/app/client/common/fileViewer.component.js index 72aebd4..b1cabd4 100644 --- a/app/client/common/fileViewer.component.js +++ b/app/client/common/fileViewer.component.js @@ -23,19 +23,31 @@ const video_types = { class FileViewer extends Component { state = { - loading: true, + loading: false, + stale: false, buffer: {} } fetch() { - const { file } = this.props - const fn = [file.path, file.name].join('/').replace('//','/') + const { file, path } = this.props + if (!file) return + if (this.state.loading) { + this.setState({ stale: true }) + return + } + const fn = [path || file.path, file.name].join('/').replace('//','/') console.log('fetch file', fn) const { tool: module } = this.props.app this.setState({ buffer: null, loading: true }) actions.socket.read_file({ module, fn }).then(buffer => { - console.log(buffer) - this.setState({ buffer, loading: false }) + console.log('fetched buffer') + const { stale } = this.state + this.setState({ buffer, loading: false, stale: false, }, () => { + if (stale) { + console.log('stale, fetching...') + this.fetch() + } + }) }) } @@ -50,6 +62,10 @@ class FileViewer extends Component { } render() { + const { file } = this.props + if (!file) { + return
+ } const { loading, buffer } = this.state if (loading) { return
Loading...
@@ -69,14 +85,14 @@ class FileViewer extends Component { if (!buf) { return
File empty
} - const ext = name.split('.').slice(-1)[0].toLowerCase() + const ext = extension(name) let tag; if (ext in image_types) { tag = } else if (ext in audio_types) { tag =