From cc36bb1ad49dc054b32f20a97386a938a529fe0e Mon Sep 17 00:00:00 2001
From: Jules Laplace <julescarbon@gmail.com>
Date: Sun, 17 Jun 2018 21:16:57 +0200
Subject: pix2pixhd modules

---
 app/client/modules/pix2pixhd/index.js              |  44 +++
 app/client/modules/pix2pixhd/pix2pixhd.actions.js  | 137 +++++++++
 app/client/modules/pix2pixhd/pix2pixhd.module.js   |   7 +
 app/client/modules/pix2pixhd/pix2pixhd.reducer.js  |  23 ++
 app/client/modules/pix2pixhd/pix2pixhd.tasks.js    |  54 ++++
 .../modules/pix2pixhd/views/pix2pixhd.live.js      | 334 +++++++++++++++++++++
 .../modules/pix2pixhd/views/pix2pixhd.new.js       |  33 ++
 .../modules/pix2pixhd/views/pix2pixhd.show.js      | 126 ++++++++
 8 files changed, 758 insertions(+)
 create mode 100644 app/client/modules/pix2pixhd/index.js
 create mode 100644 app/client/modules/pix2pixhd/pix2pixhd.actions.js
 create mode 100644 app/client/modules/pix2pixhd/pix2pixhd.module.js
 create mode 100644 app/client/modules/pix2pixhd/pix2pixhd.reducer.js
 create mode 100644 app/client/modules/pix2pixhd/pix2pixhd.tasks.js
 create mode 100644 app/client/modules/pix2pixhd/views/pix2pixhd.live.js
 create mode 100644 app/client/modules/pix2pixhd/views/pix2pixhd.new.js
 create mode 100644 app/client/modules/pix2pixhd/views/pix2pixhd.show.js

(limited to 'app/client/modules/pix2pixhd')

diff --git a/app/client/modules/pix2pixhd/index.js b/app/client/modules/pix2pixhd/index.js
new file mode 100644
index 0000000..331fe01
--- /dev/null
+++ b/app/client/modules/pix2pixhd/index.js
@@ -0,0 +1,44 @@
+import { h, Component } from 'preact'
+import { Route, Link } from 'react-router-dom'
+
+import actions from '../../actions'
+
+import util from '../../util'
+
+import Pix2PixHDNew from './views/pix2pixhd.new'
+import Pix2PixHDShow from './views/pix2pixhd.show'
+import Pix2PixHDLive from './views/pix2pixhd.live'
+
+class router {
+  componentWillMount(){
+    actions.system.changeTool('pix2pixhd')
+    document.body.style.backgroundImage = 'linear-gradient(' + (util.randint(40)+40) + 'deg, #fde, #ffe)'
+  }
+  componentWillReceiveProps(){
+    actions.system.changeTool('pix2pixhd')
+    document.body.style.backgroundImage = 'linear-gradient(' + (util.randint(40)+40) + 'deg, #fde, #ffe)'
+  }
+  render(){
+    return (
+      <section>
+        <Route exact path='/pix2pixhd/new/' component={Pix2PixHDNew} />
+        <Route exact path='/pix2pixhd/sequences/' component={Pix2PixHDShow} />
+        <Route exact path='/pix2pixhd/sequences/:id/' component={Pix2PixHDShow} />
+        <Route exact path='/pix2pixhd/live/' component={Pix2PixHDLive} />
+      </section>
+    )
+  }
+}
+
+function links(){
+  return [
+    { url: '/pix2pixhd/new/', name: 'new' },
+    { url: '/pix2pixhd/sequences/', name: 'sequences' },
+    { url: '/pix2pixhd/live/', name: 'live' },
+  ]
+}
+
+export default {
+  name: 'pix2pixhd',
+  router, links,
+}
diff --git a/app/client/modules/pix2pixhd/pix2pixhd.actions.js b/app/client/modules/pix2pixhd/pix2pixhd.actions.js
new file mode 100644
index 0000000..1ee4886
--- /dev/null
+++ b/app/client/modules/pix2pixhd/pix2pixhd.actions.js
@@ -0,0 +1,137 @@
+import uuidv1 from 'uuid/v1'
+
+import socket from '../../socket'
+import types from '../../types'
+
+import * as datasetLoader from '../../dataset/dataset.loader'
+
+import actions from '../../actions'
+
+import util from '../../util'
+
+import pix2pixhdModule from './pix2pixhd.module'
+
+export const load_directories = (id) => (dispatch) => {
+  const module = pix2pixhdModule.name
+  util.allProgress([
+    datasetLoader.load(module),
+    actions.socket.list_directory({ module, dir: 'sequences' }),
+    actions.socket.list_directory({ module, dir: 'datasets' }),
+    actions.socket.list_directory({ module, dir: 'checkpoints' }),
+    // actions.socket.disk_usage({ module, dir: 'datasets' }),
+  ], (percent, i, n) => {
+    console.log('pix2pixhd load progress', i, n)
+    dispatch({ type: types.app.load_progress, progress: { i, n }})
+  }).then(res => {
+    const [datasetApiReport, sequences, datasets, checkpoints] = res //, datasets, results, output, datasetUsage, lossReport] = res
+    const {
+      folderLookup,
+      fileLookup,
+      datasetLookup,
+      folders,
+      files,
+      unsortedFolder,
+    } = datasetApiReport
+    // console.log(datasetUsage)
+
+    const sequenceDirectories = sequences.filter(s => s.dir)
+    console.log(sequenceDirectories)
+    sequenceDirectories.forEach(dir => {
+      const dataset = datasetLoader.getDataset(module, datasetLookup, dir.name)
+      dataset.isBuilt = true
+      console.log(dir.name, dataset)
+    })
+
+    datasets.filter(s => s.dir).forEach(dir => {
+      const dataset = datasetLoader.getDataset(module, datasetLookup, dir.name)
+      dataset.hasDataset = true
+    })
+
+    const checkpointDirectories = checkpoints.filter(s => s.dir)
+    checkpointDirectories.forEach(dir => {
+      const dataset = datasetLoader.getDataset(module, datasetLookup, dir.name)
+      dataset.hasCheckpoints = true
+      dataset.checkpoints = [dir]
+    })
+
+    // console.log(res)
+
+    // flatDatasets.forEach(file => {
+    //   file.uuid = uuidv1()
+    //   fileLookup[file.uuid] = file
+    //   const name = file.name.split('.')[0]
+    //   const dataset = datasetLoader.getDataset(module, datasetLookup, name, unsortedFolder, file.date)
+    //   file.persisted = false
+    //   dataset.input.push(file.uuid)
+    // })
+
+    // // exp:coccokit_3-frame_sizes:8,2-n_rnn:2-dataset:coccokit_3
+    // const checkpoints = results.filter(s => s.dir).map(s => {
+    //   const checkpoint = s.name
+    //     .split('-')
+    //     .map(s => s.split(':'))
+    //     .filter(b => b.length && b[1])
+    //     .reduce((a,b) => (a[b[0]] = b[1]) && a, {})
+    //   checkpoint.name = checkpoint.name || checkpoint.dataset || checkpoint.exp
+    //   checkpoint.date = s.date
+    //   checkpoint.dir = s
+    //   checkpoint.persisted = false
+    //   const dataset = datasetLoader.getDataset(module, datasetLookup, checkpoint.name, unsortedFolder, checkpoint.date)
+    //   const loss = lossReport[checkpoint.name]
+    //   if (loss) {
+    //     dataset.epoch = checkpoint.epoch = loss.length
+    //     checkpoint.training_loss = loss
+    //   }
+    //   dataset.checkpoints.push(checkpoint)
+    //   return checkpoint
+    // })
+
+    // output.map(file => {
+    //   file.uuid = uuidv1()
+    //   fileLookup[file.uuid] = file
+    //   const pair = file.name.split('.')[0].split('-')
+    //   const dataset = datasetLoader.getDataset(module, datasetLookup, pair[0], unsortedFolder, file.date)
+    //   file.persisted = false
+    //   file.epoch = parseInt(file.epoch || pair[1].replace(/^\D+/, '')) || 0
+    //   dataset.epoch = Math.max(file.epoch, dataset.epoch || 0)
+    //   // here check if the file exists in dataset, if so just check that it's persisted
+    //   const found = dataset.output.some(file_id => {
+    //     // if (f.name === 
+    //     if (fileLookup[file_id].name === file.name) {
+    //       fileLookup[file_id].persisted = true
+    //       return true
+    //     }
+    //     return false
+    //   })
+    //   if (! found) {
+    //     dataset.output.push(file.uuid)
+    //   }
+    // })
+
+    dispatch({
+      type: types.dataset.load,
+      data: {
+        module,
+        folderLookup,
+        fileLookup,
+        datasetLookup,
+        folders, files,
+        sequences: sequenceDirectories,
+        datasets,
+        checkpoints: checkpointDirectories,
+      },
+    })
+    if (id) {
+      console.log('folder id', id)
+      dispatch({
+        type: types.dataset.set_folder,
+        data: {
+          folder_id: id,
+          module
+        },
+      })
+    }
+  }).catch(e => {
+    console.error(e)
+  })
+}
diff --git a/app/client/modules/pix2pixhd/pix2pixhd.module.js b/app/client/modules/pix2pixhd/pix2pixhd.module.js
new file mode 100644
index 0000000..4dbb55c
--- /dev/null
+++ b/app/client/modules/pix2pixhd/pix2pixhd.module.js
@@ -0,0 +1,7 @@
+const pix2pixhdModule = {
+  name: 'pix2pixhd',
+  displayName: 'Pix2PixHD',
+  datatype: 'video',
+}
+
+export default pix2pixhdModule
diff --git a/app/client/modules/pix2pixhd/pix2pixhd.reducer.js b/app/client/modules/pix2pixhd/pix2pixhd.reducer.js
new file mode 100644
index 0000000..a21f4d5
--- /dev/null
+++ b/app/client/modules/pix2pixhd/pix2pixhd.reducer.js
@@ -0,0 +1,23 @@
+import types from '../../types'
+import datasetReducer from '../../dataset/dataset.reducer'
+
+const pix2pixhdInitialState = {
+  loading: true,
+  progress: { i: 0, n: 0 },
+  error: null,
+  folder_id: 0,
+  data: null,
+}
+
+const pix2pixhdReducer = (state = pix2pixhdInitialState, action) => {
+  if (action.data && action.data.module === 'pix2pixhd') {
+    state = datasetReducer(state, action)
+  }
+
+  switch (action.type) {
+    default:
+      return state
+  }
+}
+
+export default pix2pixhdReducer
diff --git a/app/client/modules/pix2pixhd/pix2pixhd.tasks.js b/app/client/modules/pix2pixhd/pix2pixhd.tasks.js
new file mode 100644
index 0000000..2e7cbbd
--- /dev/null
+++ b/app/client/modules/pix2pixhd/pix2pixhd.tasks.js
@@ -0,0 +1,54 @@
+import uuidv1 from 'uuid/v1'
+
+import socket from '../../socket'
+import types from '../../types'
+
+import actions from '../../actions'
+
+import module from './pix2pixhd.module'
+
+export const fetch_task = (url, file_id, dataset) => dispatch => {
+  if (! url) return console.log('input file inaccessible (no url)')
+  const task = {
+    module: module.name,
+    activity: 'fetch',
+    dataset: dataset,
+    opt: {
+      url,
+      file_id,
+      dataset,
+    }
+  }
+  return actions.queue.add_task(task)
+}
+
+export const train_task = (dataset, folder_id, epochs=1) => dispatch => {
+  const task = {
+    module: module.name,
+    activity: 'train',
+    dataset: dataset.name,
+    epoch: 0,
+    epochs: epochs,
+    opt: {
+      folder_id: folder_id,
+      load_size: 264, // switch to 256 for pix2wav
+    }
+  }
+  console.log(task)
+  return actions.queue.add_task(task)
+}
+
+export const live_task = (sequence, checkpoint) => dispatch => {
+  const task = {
+    module: module.name,
+    activity: 'live',
+    dataset: sequence,
+    checkpoint,
+    opt: {
+      poll_delay: 0.09,
+    }
+  }
+  console.log(task)
+  console.log('add live 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
new file mode 100644
index 0000000..3f027a1
--- /dev/null
+++ b/app/client/modules/pix2pixhd/views/pix2pixhd.live.js
@@ -0,0 +1,334 @@
+import { h, Component } from 'preact'
+import { bindActionCreators } from 'redux'
+import { connect } from 'react-redux'
+
+import {
+  ParamGroup, Param, Player,
+  Slider, Select, Button, Loading
+} from '../../../common/'
+
+import { startRecording, stopRecording, saveFrame, toggleFPS } from '../../../live/player'
+
+import * as liveActions from '../../../live/live.actions'
+import * as queueActions from '../../../queue/queue.actions'
+import * as pix2pixhdTasks from '../pix2pixhd.tasks'
+import * as pix2pixhdActions from '../pix2pixhd.actions'
+
+class Pix2PixHDLive extends Component {
+  constructor(props){
+    super()
+    // if (! props.pix2pixhd || ! props.pix2pixhd.data) {
+      props.actions.pix2pixhd.load_directories()
+    // }
+    props.actions.live.get_params()
+    // props.actions.live.list_checkpoints('pix2pixhd')
+    // props.actions.live.list_sequences('pix2pixhd')
+    this.changeCheckpoint = this.changeCheckpoint.bind(this)
+    this.changeEpoch = this.changeEpoch.bind(this)
+    this.changeSequence = this.changeSequence.bind(this)
+    this.seek = this.seek.bind(this)
+    this.togglePlaying = this.togglePlaying.bind(this)
+    this.toggleRecording = this.toggleRecording.bind(this)
+  }
+  componentWillUpdate(nextProps) {
+    if (nextProps.opt.checkpoint_name && nextProps.opt.checkpoint_name !== this.props.opt.checkpoint_name) {
+      this.props.actions.live.list_epochs('pix2pixhd', nextProps.opt.checkpoint_name)
+    }
+  }
+  changeCheckpoint(field, checkpoint_name){
+    this.props.actions.live.load_epoch(checkpoint_name, 'latest')
+  }
+  changeEpoch(field, epoch_name){
+    this.props.actions.live.load_epoch(this.props.opt.checkpoint_name, epoch_name)
+  }
+  changeSequence(field, sequence){
+    console.log('load sequence', sequence)
+    this.props.actions.live.load_sequence(sequence)
+  }
+  seek(percentage){
+    const frame = Math.floor(percentage * (parseInt(this.props.frame.sequence_len) || 1) + 1)
+    console.log("seek to frame", percentage, frame)
+    this.props.actions.live.seek(frame)
+  }
+  start(){
+    // console.log(this.props)
+    const sequence = this.props.pix2pixhd.data.sequences[0].name
+    const checkpoint = this.props.pix2pixhd.data.checkpoints[0].name
+    console.log('starting up!', sequence, checkpoint)
+    this.props.actions.tasks.live_task(sequence, checkpoint)
+  }
+  interrupt(){
+    this.props.actions.queue.stop_task('gpu')
+  }
+  togglePlaying(){
+    if (this.props.opt.processing) {
+      this.props.actions.live.pause()
+    } else {
+      this.props.actions.live.play()
+    }
+  }
+  toggleRecording(){
+    if (this.props.opt.recording){
+      stopRecording()
+      this.props.actions.live.pause()  
+    } else {
+      startRecording()
+    }
+  }
+  render(){
+    // console.log(this.props)
+    if (this.props.pix2pixhd.loading) {
+      return <Loading />
+    }
+    return (
+      <div className='app centered'>
+        <Player width={424} height={256} />
+        <div className='params row'>
+          <div className='column'>
+            <ParamGroup
+              title='Playback'
+              noToggle
+            >
+              <Select
+                name='send_image'
+                title='view mode'
+                options={['a','b','sequence','recursive']}
+                onChange={this.props.actions.live.set_param}
+              />
+              <Select
+                name='sequence_name'
+                title='sequence'
+                options={this.props.pix2pixhd.data.sequences.map(file => file.name)}
+                onChange={this.changeSequence}
+              />
+              <Select
+                name='checkpoint_name'
+                title='checkpoint'
+                options={this.props.pix2pixhd.data.checkpoints.map(file => file.name)}
+                onChange={this.changeCheckpoint}
+              />
+              <Select
+                name='epoch'
+                title='epoch'
+                options={this.props.epochs}
+                onChange={this.changeEpoch}
+              />
+              <Slider
+                name='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
+                name='frame_delay'
+                min={0.05} max={2.0} type='float'
+              />
+              {this.renderRestartButton()}
+              <Button
+                title={
+                  this.props.opt.savingVideo
+                  ? 'Saving video...'
+                  : this.props.opt.recording
+                  ? 'Recording (' + timeInSeconds(this.props.opt.recordFrames/25) +')'
+                  : 'Record video'
+                }
+                onClick={this.toggleRecording}
+              >
+                {this.props.opt.savingVideo ? 'Saving' : this.props.opt.recording ? 'Recording' : 'Record'}
+              </Button>
+              <Button
+                title={'Save frame'}
+                onClick={saveFrame}
+              >
+                Save
+              </Button>
+              <ParamGroup
+                title='Render on server'
+                name='store_b'
+                onToggle={(value) => {
+                  // now storing frames on server...
+                }}
+              >
+              </ParamGroup>
+
+              <p class='last_message'>{this.props.last_message}</p>
+            </ParamGroup>
+          </div>
+          <div className='column'>
+            <ParamGroup
+              title='Transition'
+              name='transition'
+            >
+              <Slider live
+                name='transition_period'
+                min={10} max={5000} type='int'
+              />
+              <Slider live
+                name='transition_min'
+                min={0.001} max={0.2} type='float'
+              />
+              <Slider live
+                name='transition_max'
+                min={0.1} max={1.0} type='float'
+              />
+            </ParamGroup>
+
+            <ParamGroup
+              title='Recursion'
+              name='recursive'
+            >
+              <Slider live
+                name='recursive_frac'
+                min={0.0} max={0.5} type='float'
+              />
+              <Slider live
+                name='recurse_roll'
+                min={-64} max={64} type='int'
+              />
+              <Slider live
+                name='recurse_roll_axis'
+                min={0} max={1} type='int'
+              />
+            </ParamGroup>
+
+            <ParamGroup
+              title='Sequence'
+              name='sequence'
+            >
+              <Slider live
+                name='sequence_frac'
+                min={0.0} max={0.5} type='float'
+              />
+              <Slider live
+                name='process_frac'
+                min={0} max={1} type='float'
+              />
+            </ParamGroup>
+          </div>
+          <div className='column'>
+            <ParamGroup
+              title='Clahe'
+              name='clahe'
+            >
+              <Slider live
+                name='clip_limit'
+                min={1.0} max={4.0} type='float'
+              />
+            </ParamGroup>
+
+            <ParamGroup
+              title='Posterize'
+              name='posterize'
+            >
+              <Slider live
+                name='spatial_window'
+                min={2} max={128} type='int'
+              />
+              <Slider live
+                name='color_window'
+                min={2} max={128} type='int'
+              />
+            </ParamGroup>
+
+            <ParamGroup
+              title='Blur'
+              name='blur'
+            >
+              <Slider live
+                name='blur_radius'
+                min={3} max={7} type='odd'
+              />
+              <Slider live
+                name='blur_sigma'
+                min={0} max={2} type='float'
+              />
+            </ParamGroup>
+
+            <ParamGroup
+              title='Canny Edge Detection'
+              name='canny'
+            >
+              <Slider live
+                name='canny_lo'
+                min={10} max={200} type='int'
+              />
+              <Slider live
+                name='canny_hi'
+                min={10} max={200} type='int'
+              />
+            </ParamGroup>
+
+          </div>
+        </div>
+      </div>
+    )
+  }
+  renderRestartButton(){
+    if (this.props.runner.gpu.status === 'IDLE') {
+      return (
+        <Button
+          title={'GPU Idle'}
+          onClick={() => this.start()}
+        >Start</Button>
+      )
+    }
+    if (this.props.runner.gpu.task.module !== 'pix2pixhd') {
+      return (
+        <Button
+          title={'GPU Busy'}
+          onClick={() => this.interrupt()}
+        >Interrupt</Button>
+      )
+    }
+    if (! this.props.opt.processing) {
+      return (
+        <div>
+          <Button
+            title={'Not processing'}
+            onClick={this.togglePlaying}
+          >Restart</Button>
+          <Button
+            title={'GPU Busy'}
+            onClick={() => this.interrupt()}
+          >Interrupt</Button>
+        </div>
+      )
+    }
+    return (
+      <div>
+        <Button
+          title={'Processing'}
+          onClick={this.togglePlaying}
+        >Pause</Button>
+        <Button
+          title={'GPU Busy'}
+          onClick={() => this.interrupt()}
+        >Interrupt</Button>
+      </div>
+    )
+  }
+}
+function timeInSeconds(n){
+  return n.toFixed(1) + ' s.'
+}
+const mapStateToProps = state => ({
+  last_message: state.live.last_message,
+  opt: state.live.opt,
+  frame: state.live.frame,
+  checkpoints: state.live.checkpoints,
+  epochs: state.live.epochs,
+  sequences: state.live.sequences,
+  runner: state.system.runner,
+  pix2pixhd: state.module.pix2pixhd,
+})
+
+const mapDispatchToProps = (dispatch, ownProps) => ({
+  actions: {
+    live: bindActionCreators(liveActions, dispatch),
+    queue: bindActionCreators(queueActions, dispatch),
+    pix2pixhd: bindActionCreators(pix2pixhdActions, dispatch),
+    tasks: bindActionCreators(pix2pixhdTasks, dispatch),s
+  }
+})
+
+export default connect(mapStateToProps, mapDispatchToProps)(Pix2PixHDLive)
diff --git a/app/client/modules/pix2pixhd/views/pix2pixhd.new.js b/app/client/modules/pix2pixhd/views/pix2pixhd.new.js
new file mode 100644
index 0000000..d861229
--- /dev/null
+++ b/app/client/modules/pix2pixhd/views/pix2pixhd.new.js
@@ -0,0 +1,33 @@
+import { h, Component } from 'preact'
+import { bindActionCreators } from 'redux'
+import { connect } from 'react-redux'
+import { Link } from 'react-router-dom'
+import util from '../../../util'
+
+import { Views } from '../../../common'
+
+import * as pix2pixhdActions from '../pix2pixhd.actions'
+import pix2pixhdModule from '../pix2pixhd.module'
+
+function Pix2PixHDNew(props){
+  return (
+    <Views.New
+      db={props.pix2pixhd}
+      path='/pix2pixhd/sequences/'
+      actions={props.actions}
+      module={pix2pixhdModule}
+      history={props.history}
+    />
+  )
+}
+
+const mapStateToProps = state => ({
+  pix2pixhd: state.module.pix2pixhd,
+})
+
+const mapDispatchToProps = (dispatch, ownProps) => ({
+  actions: bindActionCreators(pix2pixhdActions, dispatch),
+})
+
+export default connect(mapStateToProps, mapDispatchToProps)(Pix2PixHDNew)
+
diff --git a/app/client/modules/pix2pixhd/views/pix2pixhd.show.js b/app/client/modules/pix2pixhd/views/pix2pixhd.show.js
new file mode 100644
index 0000000..5777ac0
--- /dev/null
+++ b/app/client/modules/pix2pixhd/views/pix2pixhd.show.js
@@ -0,0 +1,126 @@
+import { h, Component } from 'preact'
+import { bindActionCreators } from 'redux'
+import { connect } from 'react-redux'
+import util from '../../../util'
+
+import * as pix2pixhdActions from '../pix2pixhd.actions'
+import * as pix2pixhdTasks from '../pix2pixhd.tasks'
+
+import { Loading, CurrentTask, FileList, FileRow } from '../../../common'
+import DatasetForm from '../../../dataset/dataset.form'
+import NewDatasetForm from '../../../dataset/dataset.new'
+import UploadStatus from '../../../dataset/upload.status'
+
+import DatasetComponent from '../../../dataset/dataset.component'
+
+import pix2pixhdModule from '../pix2pixhd.module'
+
+class Pix2PixHDShow extends Component {
+  constructor(props){
+    super(props)
+    this.datasetActions = this.datasetActions.bind(this)
+  }
+  componentWillMount(){
+    const id = this.props.match.params.id || localStorage.getItem('pix2pixhd.last_id')
+    console.log('load dataset:', id)
+    const { match, pix2pixhd, actions } = this.props
+    if (id === 'new') return
+    if (id) {
+      if (parseInt(id)) localStorage.setItem('pix2pixhd.last_id', id)
+      if (! pix2pixhd.folder || pix2pixhd.folder.id !== id) {
+        actions.load_directories(id)
+      }
+    } else {
+      this.props.history.push('/pix2pixhd/new/')
+    }
+  }
+  render(){
+    const { pix2pixhd, match, history } = this.props
+    const { folderLookup } = (pix2pixhd.data || {})
+    const folder = (folderLookup || {})[pix2pixhd.folder_id] || {}
+
+    return (
+      <div className='app pix2pixhd'>
+        <div class='heading'>
+          <div class='spaced'>
+            <h1>{folder ? folder.name : <Loading />}</h1>
+            <UploadStatus />
+          </div>
+        </div>
+        <div className='row'>
+        {folder && folder.name && folder.name !== 'unsorted' &&
+          <DatasetForm
+            title='Add Files'
+            module={pix2pixhdModule}
+            folder={folder}
+            canUpload canAddURL
+          />
+        }
+          <div>
+            <UploadStatus />
+            <CurrentTask />
+          </div>
+        </div>
+
+
+        <DatasetComponent
+          loading={pix2pixhd.loading}
+          progress={pix2pixhd.progress}
+          id={pix2pixhd.folder_id}
+          module={pix2pixhdModule}
+          data={pix2pixhd.data}
+          folder={folder}
+          history={history}
+          onPickFile={(file, e) => {
+            e.preventDefault()
+            e.stopPropagation()
+            console.log('picked a file', file)
+          }}
+          datasetActions={this.datasetActions}
+        />
+      </div>
+    )
+  }
+  datasetActions(dataset, isFetching=false, isProcessing=false){
+    const { pix2pixhd, remote } = this.props
+    const input = pix2pixhd.data.fileLookup[dataset.input[0]]
+    if (! input) return null
+    if (input.name && input.name.match(/(gif|jpe?g|png)$/i)) return null
+    console.log(dataset)
+    return (
+      <div>
+        <div class={'actions'}>
+          <span class='link' onClick={() => remote.train_task(dataset, pix2pixhd.folder_id, 1)}>train</span>
+          <span class='link' onClick={() => remote.train_task(dataset, pix2pixhd.folder_id, 5)}>5x</span>
+          <span class='link' onClick={() => remote.train_task(dataset, pix2pixhd.folder_id, 10)}>10x</span>
+          <span class='link' onClick={() => remote.train_task(dataset, pix2pixhd.folder_id, 20)}>20x</span>
+          <span class='link' onClick={() => remote.train_task(dataset, pix2pixhd.folder_id, 50)}>50x</span>
+        </div>
+        {dataset.isBuilt
+        ? <div class='subtext'>
+            {'fetched '}
+            <span class='link' onClick={() => remote.clear_cache_task(dataset)}>rm</span>
+          </div>
+        : isFetching
+        ? <div class='subtext'>
+            {'fetching'}
+          </div>
+        : <div class='subtext'>
+            <span class='link' onClick={() => remote.fetch_task(input.url, input.id, dataset.name)}>fetch</span>
+          </div>
+        }
+      </div>
+    )
+  }
+}
+
+const mapStateToProps = state => ({
+  pix2pixhd: state.module.pix2pixhd,
+})
+
+const mapDispatchToProps = (dispatch, ownProps) => ({
+  actions: bindActionCreators(pix2pixhdActions, dispatch),
+  remote: bindActionCreators(pix2pixhdTasks, dispatch),
+})
+
+export default connect(mapStateToProps, mapDispatchToProps)(Pix2PixHDShow)
-- 
cgit v1.2.3-70-g09d2