refactor some task stuff

27 files changed, 403 insertions, 299 deletions

diff --git a/app/client/common/button.component.js b/app/client/common/button.component.js
index 746a3f6..21aa5b6 100644
--- a/app/client/common/button.component.js
+++ b/app/client/common/button.component.js
@@ -1,7 +1,7 @@
 import { h, Component } from 'preact'
 import { connect } from 'react-redux'
 import { bindActionCreators } from 'redux'
-import * as liveActions from '../live/actions'
+import * as liveActions from '../live/live.actions'
 
 class Button extends Component {
   constructor(props){
diff --git a/app/client/common/param.component.js b/app/client/common/param.component.js
index e788118..b2aefd3 100644
--- a/app/client/common/param.component.js
+++ b/app/client/common/param.component.js
@@ -8,10 +8,8 @@ export default class Param extends Component {
   render() {
     return (
       <div className='button param'>
-        <label>
-          <span>{this.props.title}</span>
-          <span>{this.props.children}</span>
-        </label>
+        <span>{this.props.title}</span>
+        <span>{this.props.children}</span>
       </div>
     )
   }
diff --git a/app/client/common/paramGroup.component.js b/app/client/common/paramGroup.component.js
index 6dd45f6..13b46a5 100644
--- a/app/client/common/paramGroup.component.js
+++ b/app/client/common/paramGroup.component.js
@@ -1,7 +1,7 @@
 import { h, Component } from 'preact'
 import { connect } from 'react-redux'
 import { bindActionCreators } from 'redux'
-import * as liveActions from '../live/actions'
+import * as liveActions from '../live/live.actions'
 
 class ParamGroup extends Component {
   constructor(props){
diff --git a/app/client/common/select.component.js b/app/client/common/select.component.js
index cfe4ebf..90bc6dc 100644
--- a/app/client/common/select.component.js
+++ b/app/client/common/select.component.js
@@ -1,7 +1,7 @@
 import { h, Component } from 'preact'
 import { connect } from 'react-redux'
 import { bindActionCreators } from 'redux'
-import * as liveActions from '../live/actions'
+import * as liveActions from '../live/live.actions'
 
 class Select extends Component {
   constructor(props){
diff --git a/app/client/common/slider.component.js b/app/client/common/slider.component.js
index 174877d..942640a 100644
--- a/app/client/common/slider.component.js
+++ b/app/client/common/slider.component.js
@@ -1,7 +1,7 @@
 import { h, Component } from 'preact'
 import { connect } from 'react-redux'
 import { bindActionCreators } from 'redux'
-import * as liveActions from '../live/actions'
+import * as liveActions from '../live/live.actions'
 
 const SLIDER_THROTTLE_TIME = 100
 
diff --git a/app/client/dashboard/actions.js b/app/client/dashboard/dashboard.actions.js
index 01c0a96..01c0a96 100644
--- a/app/client/dashboard/actions.js
+++ b/app/client/dashboard/dashboard.actions.js
diff --git a/app/client/dashboard/dashboard.component.js b/app/client/dashboard/dashboard.component.js
index 6db42ae..3d3d168 100644
--- a/app/client/dashboard/dashboard.component.js
+++ b/app/client/dashboard/dashboard.component.js
@@ -13,7 +13,7 @@ import TaskList from './tasklist.component'
 import FileList from './filelist.component'
 import Gallery from './gallery.component'
 
-import * as liveActions from './actions'
+import * as dashboardActions from './dashboard.actions'
 
 class Dashboard extends Component {
   constructor(props){
@@ -59,13 +59,13 @@ class Dashboard extends Component {
 }
 const mapStateToProps = state => ({
   site: state.system.site,
-  images: state.system.images,
-  tasks: state.system.tasks,
-  files: state.system.files
+  images: state.dashboard.images,
+  files: state.dashboard.files,
+  tasks: state.task.tasks,
 })
 
 const mapDispatchToProps = (dispatch, ownProps) => ({
-  actions: bindActionCreators(liveActions, dispatch)
+  actions: bindActionCreators(dashboardActions, dispatch)
 })
 
 export default connect(mapStateToProps, mapDispatchToProps)(Dashboard)
diff --git a/app/client/dashboard/dashboard.reducer.js b/app/client/dashboard/dashboard.reducer.js
index c5b3d4a..b3ee05e 100644
--- a/app/client/dashboard/dashboard.reducer.js
+++ b/app/client/dashboard/dashboard.reducer.js
@@ -4,6 +4,27 @@ let FileSaver = require('file-saver')
 const dashboardInitialState = {
   loading: false,
   error: null,
+
+  images: [
+    {
+      url: 'https://s3.amazonaws.com/i.asdf.us/bucky/data/4282/woodscaled_4_true_20180521_2125.png',
+    },
+    {
+      url: 'https://s3.amazonaws.com/i.asdf.us/bucky/data/4282/woodscaled_4_true_20180521_2146%20(1).png',
+    },
+    {
+      url: 'https://s3.amazonaws.com/i.asdf.us/bucky/data/4282/woodscaled_4_true_20180521_2149.png',
+    },
+    {
+      url: 'https://s3.amazonaws.com/i.asdf.us/bucky/data/4282/woodscaled_4_true_20180521_2150.png',
+    },
+    {
+      url: 'https://s3.amazonaws.com/i.asdf.us/bucky/data/4282/woodscaled_4_true_20180521_2146%20(1).png',
+    },
+  ],
+  files: [
+    { id: 2, module: 'samplernn', checkpoint: 'jwcglassbeat', dataset: 'jwcglassbeat', epoch: 18, duration: 30, batch_size: 5, filename: 'jwcglassbeat-ep18.mp3', size: 3 * 1024 * 1024, date: Date.now(), opt: "{}", }
+  ]
 }
 
 const dashboardReducer = (state = dashboardInitialState, action) => {
diff --git a/app/client/dashboard/dashboardHeader.component.js b/app/client/dashboard/dashboardHeader.component.js
index 492dfd8..2e53088 100644
--- a/app/client/dashboard/dashboardHeader.component.js
+++ b/app/client/dashboard/dashboardHeader.component.js
@@ -1,7 +1,6 @@
 import { h, Component } from 'preact'
 import { connect } from 'react-redux'
 import { bindActionCreators } from 'redux'
-import * as liveActions from '../live/actions'
 
 import * as util from '../util'
 
@@ -19,7 +18,7 @@ class DashboardHeader extends Component {
     return (
 	    <div class='dashboardHeader heading'>
 	      <h3>{site.name}</h3>
-	      Currently {util.gerund(currentTask.activity)} {currentTask.library} on {currentTask.dataset}<br/>
+	      Currently {util.gerund(currentTask.activity)} {currentTask.module} on {currentTask.dataset}<br/>
 	      Epoch: {currentTask.epoch} / {currentTask.epochs}, ETA {eta}<br/>
 	      <br/>
 	      Want to play live? <button>Pause at the end of this epoch</button>
@@ -29,7 +28,7 @@ class DashboardHeader extends Component {
 }
 
 const mapStateToProps = state => ({
-	currentTask: state.system.currentTask,
+	currentTask: state.task.currentTask,
 	site: state.system.site,
 })
 
diff --git a/app/client/dashboard/tasklist.component.js b/app/client/dashboard/tasklist.component.js
index fa002de..e5b1171 100644
--- a/app/client/dashboard/tasklist.component.js
+++ b/app/client/dashboard/tasklist.component.js
@@ -20,7 +20,7 @@ class TaskList extends Component {
 	    }
 	   	return (
 		   	<div class='row'>
-	        <div class='activity'>{task.activity} {task.library} {dataset_type}</div>
+	        <div class='activity'>{task.activity} {task.module} {dataset_type}</div>
 	        <div class='dataset'>{dataset_name}</div>
 	        <div class='epochs'>{task.epochs} ep.</div>
 	        <div class='eta'>{eta}</div>
diff --git a/app/client/index.jsx b/app/client/index.jsx
index fba38df..ae09534 100644
--- a/app/client/index.jsx
+++ b/app/client/index.jsx
@@ -4,7 +4,7 @@ import { BrowserRouter, Route } from 'react-router-dom'
 // import client from './client'
 
 import { store, history } from './store'
-import socket from './socket'
+import * as socket from './socket'
 
 import Header from './common/header.component'
 import Dashboard from './dashboard/dashboard.component'
diff --git a/app/client/live/actions.js b/app/client/live/live.actions.js
index e63854e..e63854e 100644
--- a/app/client/live/actions.js
+++ b/app/client/live/live.actions.js
diff --git a/app/client/live/reducer.js b/app/client/live/live.reducer.js
index 60bcb41..60bcb41 100644
--- a/app/client/live/reducer.js
+++ b/app/client/live/live.reducer.js
diff --git a/app/client/pix2pix/live.component.js b/app/client/pix2pix/live.component.js
index 9d41fbc..9792dbd 100644
--- a/app/client/pix2pix/live.component.js
+++ b/app/client/pix2pix/live.component.js
@@ -10,7 +10,7 @@ import Button from '../common/button.component'
 
 import { startRecording, stopRecording, saveFrame } from '../live/player'
 
-import * as liveActions from '../live/actions'
+import * as liveActions from '../live/live.actions'
 
 class LivePix2Pix extends Component {
   constructor(props){
@@ -63,7 +63,7 @@ class LivePix2Pix extends Component {
     return (
       <div className='app'>
         <Player width={424} height={256} />
-        <div className='params'>
+        <div className='params row'>
           <div className='column'>
             <ParamGroup
               title='Playback'
diff --git a/app/client/socket.js b/app/client/socket.js
deleted file mode 100644
index da70dfc..0000000
--- a/app/client/socket.js
+++ /dev/null
@@ -1,163 +0,0 @@
-import { store } from './store'
-import types from './types'
-import * as player from './live/player'
-
-let socket = io.connect('/client')
-
-// SOCKET ACTIONS
-
-socket.on('connect', () => store.dispatch({ type: types.socket.connect }))
-socket.on('connect_error', (error) => store.dispatch({ type: types.socket.connect_error, error }))
-socket.on('reconnect', (attempt) => store.dispatch({ type: types.socket.reconnect, attempt }))
-socket.on('reconnecting', () => store.dispatch({ type: types.socket.reconnecting }))
-socket.on('reconnect_error', (error) => store.dispatch({ type: types.socket.reconnect_error, error }))
-socket.on('reconnect_failed', (error) => store.dispatch({ type: types.socket.reconnect_failed, error }))
-socket.on('disconnect', () => store.dispatch({ type: types.socket.disconnect }))
-socket.on('error', (error) => store.dispatch({ type: types.socket.error, error }))
-
-socket.on('res', (data) => {
-  console.log(data.cmd)
-  switch (data.cmd) {
-    case 'get_last_frame':
-      if (data.res !== 'working') {
-        socket.emit('cmd', {
-          cmd: 'get_last_frame',
-        })
-      }
-      break
-    case 'get_params':
-      store.dispatch({
-        type: types.socket.load_params,
-        opt: data.res,
-      })
-      break
-    case 'list_checkpoints':
-      store.dispatch({
-        type: types.socket.list_checkpoints,
-        checkpoints: data.res,
-      })
-      break
-    case 'list_sequences':
-      store.dispatch({
-        type: types.socket.list_sequences,
-        sequences: data.res,
-      })
-      break
-    case 'list_epochs':
-      store.dispatch({
-        type: types.socket.list_epochs,
-        epochs: data.res,
-      })
-      break
-    default:
-      break
-  }
-  console.log(data)
-})
-
-socket.on('system_res', (data) => {
-  console.log('system response', data)
-  switch (data.type) {
-    case 'relay_connected':
-      return store.dispatch({ type: types.system.relay_connected })
-    case 'relay_disconnected':
-      return store.dispatch({ type: types.system.relay_disconnected })
-    case 'rpc_connected':
-      return store.dispatch({ type: types.system.rpc_connected, runner: data.runner })
-    case 'rpc_disconnected':
-      return store.dispatch({ type: types.system.rpc_disconnected })
-    case 'relay_status':
-      return store.dispatch({ type: data.rpc_connected ? types.system.rpc_connected : types.system.rpc_disconnected, runner: data.runner })
-    case 'command_output':
-      store.dispatch({
-        type: types.system.command_output,
-        data: data,
-      })
-      break
-  }
-})
-
-socket.on('frame', player.onFrame)
-
-socket.on('status', (data) => {
-  console.log('got status', data.key, data.value)
-  store.dispatch({ type: types.socket.status })
-  switch (data.key) {
-    case 'processing':
-      store.dispatch({
-        type: 'SET_PARAM',
-        ...data,
-      })
-      break
-    default:
-      break
-  }
-})
-
-export function list_checkpoints() {
-  socket.emit('cmd', {
-    cmd: 'list_checkpoints',
-  })
-}
-export function list_epochs(checkpoint_name) {
-  socket.emit('cmd', {
-    cmd: 'list_epochs',
-    payload: checkpoint_name,
-  })
-}
-export function list_sequences() {
-  socket.emit('cmd', {
-    cmd: 'list_sequences',
-  })
-}
-export function load_epoch(checkpoint_name, epoch) {
-  console.log(">> SWITCH CHECKPOINT", checkpoint_name, epoch)
-  socket.emit('cmd', {
-    cmd: 'load_epoch',
-    payload: checkpoint_name + ':' + epoch,
-  })
-}
-export function load_sequence(sequence) {
-  socket.emit('cmd', {
-    cmd: 'load_sequence',
-    payload: sequence,
-  })
-}
-export function seek(frame) {
-  socket.emit('cmd', {
-    cmd: 'seek',
-    payload: frame,
-  })
-}
-export function pause(frame) {
-  socket.emit('cmd', {
-    cmd: 'pause',
-  })
-}
-export function play(frame) {
-  socket.emit('cmd', {
-    cmd: 'play',
-  })
-}
-export function get_params() {
-  socket.emit('cmd', {
-    cmd: 'get_params',
-  })
-}
-export function set_param(key, value) {
-  socket.emit('cmd', {
-    cmd: 'set_param',
-    payload: {
-      'key': key,
-      'value': value,
-    }
-  })
-}
-export function run_system_command(cmd) {
-  socket.emit('system', {
-    cmd: 'run_system_command',
-    payload: cmd,
-  })
-}
-
-export { socket }
diff --git a/app/client/socket/index.js b/app/client/socket/index.js
new file mode 100644
index 0000000..c0fed61
--- /dev/null
+++ b/app/client/socket/index.js
@@ -0,0 +1,27 @@
+import { store } from '../store'
+import types from '../types'
+
+import { socket } from './socket.connection'
+import * as system from './socket.system'
+import * as live from './socket.live'
+
+export default {
+  socket,
+  system,
+  live,
+}
+
+socket.on('status', (data) => {
+  console.log('got status', data.key, data.value)
+  store.dispatch({ type: types.socket.status })
+  switch (data.key) {
+    case 'processing':
+      store.dispatch({
+        type: 'SET_PARAM',
+        ...data,
+      })
+      break
+    default:
+      break
+  }
+})
diff --git a/app/client/socket/socket.connection.js b/app/client/socket/socket.connection.js
new file mode 100644
index 0000000..4aa039c
--- /dev/null
+++ b/app/client/socket/socket.connection.js
@@ -0,0 +1,15 @@
+import { store } from '../store'
+import types from '../types'
+
+export const socket = io.connect('/client')
+
+// SOCKET ACTIONS
+
+socket.on('connect', () => store.dispatch({ type: types.socket.connect }))
+socket.on('connect_error', (error) => store.dispatch({ type: types.socket.connect_error, error }))
+socket.on('reconnect', (attempt) => store.dispatch({ type: types.socket.reconnect, attempt }))
+socket.on('reconnecting', () => store.dispatch({ type: types.socket.reconnecting }))
+socket.on('reconnect_error', (error) => store.dispatch({ type: types.socket.reconnect_error, error }))
+socket.on('reconnect_failed', (error) => store.dispatch({ type: types.socket.reconnect_failed, error }))
+socket.on('disconnect', () => store.dispatch({ type: types.socket.disconnect }))
+socket.on('error', (error) => store.dispatch({ type: types.socket.error, error }))
diff --git a/app/client/socket/socket.live.js b/app/client/socket/socket.live.js
new file mode 100644
index 0000000..c55695f
--- /dev/null
+++ b/app/client/socket/socket.live.js
@@ -0,0 +1,107 @@
+import { dispatch } from '../store'
+import types from '../types'
+import * as player from '../live/player'
+
+import { socket } from './socket.connection'
+
+socket.on('res', (data) => {
+  console.log(data.cmd)
+  switch (data.cmd) {
+    case 'get_last_frame':
+      if (data.res !== 'working') {
+        socket.emit('cmd', {
+          cmd: 'get_last_frame',
+        })
+      }
+      break
+    case 'get_params':
+      store.dispatch({
+        type: types.socket.load_params,
+        opt: data.res,
+      })
+      break
+    case 'list_checkpoints':
+      store.dispatch({
+        type: types.socket.list_checkpoints,
+        checkpoints: data.res,
+      })
+      break
+    case 'list_sequences':
+      store.dispatch({
+        type: types.socket.list_sequences,
+        sequences: data.res,
+      })
+      break
+    case 'list_epochs':
+      store.dispatch({
+        type: types.socket.list_epochs,
+        epochs: data.res,
+      })
+      break
+    default:
+      break
+  }
+  console.log(data)
+})
+
+socket.on('frame', player.onFrame)
+
+export function list_checkpoints() {
+  socket.emit('cmd', {
+    cmd: 'list_checkpoints',
+  })
+}
+export function list_epochs(checkpoint_name) {
+  socket.emit('cmd', {
+    cmd: 'list_epochs',
+    payload: checkpoint_name,
+  })
+}
+export function list_sequences() {
+  socket.emit('cmd', {
+    cmd: 'list_sequences',
+  })
+}
+export function load_epoch(checkpoint_name, epoch) {
+  console.log(">> SWITCH CHECKPOINT", checkpoint_name, epoch)
+  socket.emit('cmd', {
+    cmd: 'load_epoch',
+    payload: checkpoint_name + ':' + epoch,
+  })
+}
+export function load_sequence(sequence) {
+  socket.emit('cmd', {
+    cmd: 'load_sequence',
+    payload: sequence,
+  })
+}
+export function seek(frame) {
+  socket.emit('cmd', {
+    cmd: 'seek',
+    payload: frame,
+  })
+}
+export function pause(frame) {
+  socket.emit('cmd', {
+    cmd: 'pause',
+  })
+}
+export function play(frame) {
+  socket.emit('cmd', {
+    cmd: 'play',
+  })
+}
+export function get_params() {
+  socket.emit('cmd', {
+    cmd: 'get_params',
+  })
+}
+export function set_param(key, value) {
+  socket.emit('cmd', {
+    cmd: 'set_param',
+    payload: {
+      'key': key,
+      'value': value,
+    }
+  })
+}
\ No newline at end of file
diff --git a/app/client/socket/socket.system.js b/app/client/socket/socket.system.js
new file mode 100644
index 0000000..0cdc625
--- /dev/null
+++ b/app/client/socket/socket.system.js
@@ -0,0 +1,33 @@
+import { dispatch } from '../store'
+import types from '../types'
+
+import { socket } from './socket.connection'
+
+socket.on('system_res', (data) => {
+  console.log('system response', data)
+  switch (data.type) {
+    case 'relay_connected':
+      return dispatch({ type: types.system.relay_connected })
+    case 'relay_disconnected':
+      return dispatch({ type: types.system.relay_disconnected })
+    case 'rpc_connected':
+      return dispatch({ type: types.system.rpc_connected, runner: data.runner })
+    case 'rpc_disconnected':
+      return dispatch({ type: types.system.rpc_disconnected })
+    case 'relay_status':
+      return dispatch({ type: data.rpc_connected ? types.system.rpc_connected : types.system.rpc_disconnected, runner: data.runner })
+    case 'command_output':
+      return dispatch({
+        type: types.system.command_output,
+        data: data,
+      })
+      break
+  }
+})
+
+export function run_system_command(cmd) {
+  socket.emit('system', {
+    cmd: 'run_system_command',
+    payload: cmd,
+  })
+}
diff --git a/app/client/socket/socket.task.js b/app/client/socket/socket.task.js
new file mode 100644
index 0000000..936d2bc
--- /dev/null
+++ b/app/client/socket/socket.task.js
@@ -0,0 +1,28 @@
+import { dispatch } from '../store'
+import types from '../types'
+
+import { socket } from './socket.connection'
+
+socket.on('task_res', (data) => {
+  console.log('system response', data)
+  switch (data.type) {
+    // case 'rpc_connected':
+    //   return dispatch({ type: types.system.rpc_connected, runner: data.runner })
+    default:
+      return console.log('no such task command', data.type)
+  }
+})
+
+export function start_task(task) {
+  socket.emit('task', {
+    cmd: 'start_task',
+    task,
+  })
+}
+
+export function stop_task(task) {
+  socket.emit('task', {
+    cmd: 'stop_task',
+    task,
+  })
+}
diff --git a/app/client/store.js b/app/client/store.js
index 600e53c..f7eb566 100644
--- a/app/client/store.js
+++ b/app/client/store.js
@@ -8,12 +8,14 @@ import { routerReducer } from 'react-router-redux'
 // import navReducer from './nav.reducer'
 import systemReducer from './system/system.reducer'
 import dashboardReducer from './dashboard/dashboard.reducer'
-import liveReducer from './live/reducer'
+import liveReducer from './live/live.reducer'
+import taskReducer from './task/task.reducer'
 
 const appReducer = combineReducers({
   system: systemReducer,
   dashboard: dashboardReducer,
   live: liveReducer,
+  task: taskReducer,
   router: routerReducer,
 })
 
@@ -28,3 +30,5 @@ export const store = createStore(
     )
   )
 )
+
+export const dispatch = store.dispatch
diff --git a/app/client/system/system.actions.js b/app/client/system/system.actions.js
index 1732179..ff32fd6 100644
--- a/app/client/system/system.actions.js
+++ b/app/client/system/system.actions.js
@@ -2,6 +2,6 @@ import * as socket from '../socket'
 import types from '../types'
 
 export const run = (cmd) => {
-  socket.run_system_command(cmd)
+  socket.system.run_system_command(cmd)
   return { type: types.system.running_command, cmd }
 }
diff --git a/app/client/system/system.component.js b/app/client/system/system.component.js
index 7428c22..00c5395 100644
--- a/app/client/system/system.component.js
+++ b/app/client/system/system.component.js
@@ -6,6 +6,19 @@ import Group from '../common/group.component'
 import Param from '../common/param.component'
 
 import * as systemActions from './system.actions'
+import * as taskActions from '../task/task.actions'
+
+const cpu_test_task = {
+  id: 1073,
+  activity: 'train',
+  library: 'test',
+  dataset: 'test',
+  epochs: 1,
+  opt: {}
+}
+const gpu_test_task = {
+
+}
 
 class System extends Component {
   constructor(props){
@@ -20,30 +33,45 @@ class System extends Component {
         </div>
 
         <div className='row params'>
-          <Group title="Status">
-            <Param title='Server'>{server.status}</Param>
-            {server.error &&
-              <Param title='Server error'>{server.error.message}</Param>
-            }
-            <Param title='Relay'>{relay.status}</Param>
-            <Param title='RPC'>{rpc.status}</Param>
-            <Param title='CPU'>{rpc.cpu_cmd}</Param>
-            <Param title='GPU'>{rpc.gpu_cmd}</Param>
-            <Param title='Current Task'>train samplernn</Param>
-          </Group>
-          <Group title="Diagnostics">
-            <Param title='Check GPU'>
-              <button onClick={() => actions.run('nvidia-smi')}>nvidia-smi</button>
-            </Param>
-            <Param title='List processes'>
-              <button onClick={() => actions.run('ps')}>ps</button>
-            </Param>
-            <Param title='List users'>
-              <button onClick={() => actions.run('w')}>w</button>
-            </Param>
-          </Group>
+          <div className='column'>
+            <Group title="Status">
+              <Param title='Server'>{server.status}</Param>
+              {server.error &&
+                <Param title='Server error'>{server.error.message}</Param>
+              }
+              <Param title='Relay'>{relay.status}</Param>
+              <Param title='RPC'>{rpc.status}</Param>
+              <Param title='CPU'>{rpc.cpu_cmd}</Param>
+              <Param title='GPU'>{rpc.gpu_cmd}</Param>
+              <Param title='Current Task'>train samplernn</Param>
+            </Group>
+            <Group title="Diagnostics">
+              <Param title='Check GPU'>
+                <button onClick={() => actions.system.run('nvidia-smi')}>nvidia-smi</button>
+              </Param>
+              <Param title='List processes'>
+                <button onClick={() => actions.system.run('ps')}>ps</button>
+              </Param>
+              <Param title='List users'>
+                <button onClick={() => actions.system.run('w')}>w</button>
+              </Param>
+              <Param title='Disk free space'>
+                <button onClick={() => actions.system.run('df')}>df</button>
+              </Param>
+            </Group>
+            <Group title="Test">
+              <Param title='CPU Test Task'>
+                <button onClick={() => actions.task.start_task(cpu_test_task)}>Start</button>
+                <button onClick={() => actions.task.stop_task(cpu_test_task)}>Stop</button>
+              </Param>
+              <Param title='GPU Test Task'>
+                <button onClick={() => actions.task.start_task(gpu_test_task)}>Start</button>
+                <button onClick={() => actions.task.stop_task(gpu_test_task)}>Stop</button>
+              </Param>
+            </Group>
+          </div>
+          {this.renderCommandOutput()}
         </div>
-        {this.renderCommandOutput()}
       </div>
     )
   }
@@ -76,7 +104,10 @@ const mapStateToProps = state => ({
 })
 
 const mapDispatchToProps = (dispatch, ownProps) => ({
-  actions: bindActionCreators(systemActions, dispatch)
+  actions: {
+    system: bindActionCreators(systemActions, dispatch),
+    task: bindActionCreators(taskActions, dispatch),
+  },
 })
 
 export default connect(mapStateToProps, mapDispatchToProps)(System)
diff --git a/app/client/system/system.reducer.js b/app/client/system/system.reducer.js
index a21966d..ac7b20e 100644
--- a/app/client/system/system.reducer.js
+++ b/app/client/system/system.reducer.js
@@ -34,96 +34,6 @@ const systemInitialState = {
     stdout: null,
     stderr: null,
   },
-
-  currentTask: {
-    id: 1072,
-    activity: 'train',
-    library: 'pix2pix',
-    dataset: 'video/woods_final',
-    epoch: 87,
-    epochs: 100,
-  },
-  images: [
-    {
-      url: 'https://s3.amazonaws.com/i.asdf.us/bucky/data/4282/woodscaled_4_true_20180521_2125.png',
-    },
-    {
-      url: 'https://s3.amazonaws.com/i.asdf.us/bucky/data/4282/woodscaled_4_true_20180521_2146%20(1).png',
-    },
-    {
-      url: 'https://s3.amazonaws.com/i.asdf.us/bucky/data/4282/woodscaled_4_true_20180521_2149.png',
-    },
-    {
-      url: 'https://s3.amazonaws.com/i.asdf.us/bucky/data/4282/woodscaled_4_true_20180521_2150.png',
-    },
-    {
-      url: 'https://s3.amazonaws.com/i.asdf.us/bucky/data/4282/woodscaled_4_true_20180521_2146%20(1).png',
-    },
-  ],
-  tasks: [
-    {
-      id: 1073,
-      activity: 'train',
-      library: 'pix2pix',
-      dataset: 'video/woods_green',
-      epochs: 100,
-    },
-    {
-      id: 1073,
-      activity: 'train',
-      library: 'samplernn',
-      dataset: 'bobby_brown_-_every_little_step',
-      epochs: 6,
-    },
-    {
-      id: 1073,
-      activity: 'train',
-      library: 'pix2pix',
-      checkpoint: 'lyra_voice_layers',
-      dataset: 'audio/lyra_improv',
-      epochs: 30,
-    },
-    {
-      id: 1073,
-      activity: 'train',
-      library: 'pix2pix',
-      checkpoint: 'lyra_melody_lines',
-      dataset: 'audio/lyra_improv',
-      epochs: 30,
-    },
-    {
-      id: 1073,
-      activity: 'train',
-      library: 'pix2pix',
-      checkpoint: 'ensemble_chords',
-      dataset: 'audio/lyra_improv',
-      epochs: 30,
-    },
-    {
-      id: 1073,
-      activity: 'generate',
-      library: 'samplernn',
-      dataset: 'coccoglass3',
-      opt: { time: 5, count: 6 },
-    },
-    {
-      id: 1073,
-      activity: 'train',
-      library: 'pix2pix',
-      dataset: 'video/woods_green',
-      epochs: 100,
-    },
-    {
-      id: 1073,
-      activity: 'train',
-      library: 'samplernn',
-      dataset: 'bobby_brown_-_every_little_step',
-      epochs: 6,
-    },
-  ],
-  files: [
-    { id: 2, library: 'samplernn', checkpoint: 'jwcglassbeat', dataset: 'jwcglassbeat', epoch: 18, duration: 30, batch_size: 5, filename: 'jwcglassbeat-ep18.mp3', size: 3 * 1024 * 1024, date: Date.now(), opt: "{}", }
-  ]
 }
 
 const systemReducer = (state = systemInitialState, action) => {
diff --git a/app/client/task/task.actions.js b/app/client/task/task.actions.js
new file mode 100644
index 0000000..466b8d7
--- /dev/null
+++ b/app/client/task/task.actions.js
@@ -0,0 +1,10 @@
+import socket from '../socket'
+
+export const start_task = (task) => {
+  socket.task.start_task(task)
+  return { type: types.task.starting_task, task }
+}
+export const stop_task = (task) => {
+  socket.task.stop_task(task)
+  return { type: types.task.stopping_task, task }
+}
diff --git a/app/client/task/task.reducer.js b/app/client/task/task.reducer.js
new file mode 100644
index 0000000..12e5184
--- /dev/null
+++ b/app/client/task/task.reducer.js
@@ -0,0 +1,80 @@
+import types from '../types'
+import moment from 'moment'
+let FileSaver = require('file-saver')
+
+const taskInitialState = {
+  loading: false,
+  error: null,
+
+  currentTask: {
+    id: 1072,
+    activity: 'train',
+    module: 'pix2pix',
+    dataset: 'video/woods_final',
+    epoch: 87,
+    epochs: 100,
+  },
+  tasks: [
+    {
+      id: 1073,
+      activity: 'train',
+      module: 'samplernn',
+      dataset: 'bobby_brown_-_every_little_step',
+      epochs: 6,
+    },
+    {
+      id: 1073,
+      activity: 'train',
+      module: 'pix2pix',
+      checkpoint: 'lyra_voice_layers',
+      dataset: 'audio/lyra_improv',
+      epochs: 30,
+    },
+    {
+      id: 1073,
+      activity: 'train',
+      module: 'pix2pix',
+      checkpoint: 'lyra_melody_lines',
+      dataset: 'audio/lyra_improv',
+      epochs: 30,
+    },
+    {
+      id: 1073,
+      activity: 'train',
+      module: 'pix2pix',
+      checkpoint: 'ensemble_chords',
+      dataset: 'audio/lyra_improv',
+      epochs: 30,
+    },
+    {
+      id: 1073,
+      activity: 'generate',
+      module: 'samplernn',
+      dataset: 'coccoglass3',
+      opt: { time: 5, count: 6 },
+    },
+    {
+      id: 1073,
+      activity: 'train',
+      module: 'pix2pix',
+      dataset: 'video/woods_green',
+      epochs: 100,
+    },
+    {
+      id: 1073,
+      activity: 'train',
+      module: 'samplernn',
+      dataset: 'bobby_brown_-_every_little_step',
+      epochs: 6,
+    },
+  ],
+}
+
+const taskReducer = (state = taskInitialState, action) => {
+  switch(action.type) {
+    default:
+      return state
+  }
+}
+
+export default taskReducer
diff --git a/app/client/types.js b/app/client/types.js
index 1401ac6..f78265f 100644
--- a/app/client/types.js
+++ b/app/client/types.js
@@ -7,6 +7,10 @@ export default {
 		rpc_connected: 'SYSTEM_RPC_CONNECTED',
 		rpc_disconnected: 'SYSTEM_RPC_DISCONNECTED',
 	},
+	task: {
+		starting_task: 'TASK_STARTING_TASK',
+		stopping_task: 'TASK_STOPPING_TASK',
+	},
 	socket: {
 		connect: 'SOCKET_CONNECT',
 		connect_error: 'SOCKET_CONNECT_ERROR',