fix loading bars

1 files changed, 448 insertions, 17 deletions

diff --git a/public/bundle.js b/public/bundle.js
index 8e7674d..9ad18ad 100644
--- a/public/bundle.js
+++ b/public/bundle.js
@@ -3129,7 +3129,7 @@ exports.default = (0, _reactRedux.connect)(mapStateToProps, mapDispatchToProps)(
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.CurrentTask = exports.Checkbox = exports.Button = exports.SelectGroup = exports.Select = exports.Slider = exports.TextInput = exports.Param = exports.ParamGroup = exports.Group = exports.Player = exports.Gallery = exports.FileUpload = exports.FileRow = exports.FileList = exports.FolderList = exports.Header = exports.Progress = exports.Loading = exports.Views = undefined;
+exports.CurrentTask = exports.Checkbox = exports.Button = exports.SelectGroup = exports.Select = exports.Slider = exports.NumberInput = exports.TextInput = exports.Param = exports.ParamGroup = exports.Group = exports.Player = exports.Gallery = exports.FileUpload = exports.FileRow = exports.FileList = exports.FolderList = exports.Header = exports.Progress = exports.Loading = exports.Views = undefined;
 
 var _button = __webpack_require__(/*! ./button.component */ "./app/client/common/button.component.js");
 
@@ -3169,6 +3169,10 @@ var _loading = __webpack_require__(/*! ./loading.component */ "./app/client/comm
 
 var _loading2 = _interopRequireDefault(_loading);
 
+var _numberInput = __webpack_require__(/*! ./numberInput.component */ "./app/client/common/numberInput.component.js");
+
+var _numberInput2 = _interopRequireDefault(_numberInput);
+
 var _param = __webpack_require__(/*! ./param.component */ "./app/client/common/param.component.js");
 
 var _param2 = _interopRequireDefault(_param);
@@ -3223,6 +3227,7 @@ exports.Group = _group2.default;
 exports.ParamGroup = _paramGroup2.default;
 exports.Param = _param2.default;
 exports.TextInput = _textInput2.default;
+exports.NumberInput = _numberInput2.default;
 exports.Slider = _slider2.default;
 exports.Select = _select2.default;
 exports.SelectGroup = _selectGroup2.default;
@@ -3269,6 +3274,102 @@ function Loading(_ref) {
 
 /***/ }),
 
+/***/ "./app/client/common/numberInput.component.js":
+/*!****************************************************!*\
+  !*** ./app/client/common/numberInput.component.js ***!
+  \****************************************************/
+/*! no static exports found */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+var _preact = __webpack_require__(/*! preact */ "./node_modules/preact/dist/preact.esm.js");
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+var NumberInput = function (_Component) {
+  _inherits(NumberInput, _Component);
+
+  function NumberInput(props) {
+    _classCallCheck(this, NumberInput);
+
+    var _this = _possibleConstructorReturn(this, (NumberInput.__proto__ || Object.getPrototypeOf(NumberInput)).call(this, props));
+
+    _this.state = { value: null, changed: false };
+    _this.handleInput = _this.handleInput.bind(_this);
+    _this.handleKeydown = _this.handleKeydown.bind(_this);
+    return _this;
+  }
+
+  _createClass(NumberInput, [{
+    key: 'handleInput',
+    value: function handleInput(e) {
+      this.setState({
+        value: e.target.value,
+        changed: true
+      });
+      this.props.onInput && this.props.onInput(e.target.value, e.target.name);
+    }
+  }, {
+    key: 'handleKeydown',
+    value: function handleKeydown(e) {
+      if (e.keyCode === 13) {
+        this.setState({
+          value: e.target.value,
+          changed: false
+        });
+        this.props.onSave && this.props.onSave(e.target.value, e.target.name);
+      }
+    }
+  }, {
+    key: 'render',
+    value: function render() {
+      return (0, _preact.h)(
+        'div',
+        { className: 'numberInput param' },
+        (0, _preact.h)(
+          'label',
+          null,
+          (0, _preact.h)(
+            'span',
+            null,
+            this.props.title
+          ),
+          (0, _preact.h)('input', {
+            type: 'number',
+            name: this.props.name || 'number',
+            value: this.state.changed ? this.state.value : this.props.value,
+            onInput: this.handleInput,
+            onKeydown: this.handleKeydown,
+            placeholder: this.props.placeholder,
+            autofocus: this.props.autofocus,
+            min: this.props.min,
+            max: this.props.max,
+            step: this.props.step || this.props.type === 'int' ? 1 : 0.01
+          })
+        )
+      );
+    }
+  }]);
+
+  return NumberInput;
+}(_preact.Component);
+
+exports.default = NumberInput;
+
+/***/ }),
+
 /***/ "./app/client/common/param.component.js":
 /*!**********************************************!*\
   !*** ./app/client/common/param.component.js ***!
@@ -3993,7 +4094,7 @@ var TextInput = function (_Component) {
         value: e.target.value,
         changed: true
       });
-      this.props.onInput && this.props.onInput(e.target.value);
+      this.props.onInput && this.props.onInput(e.target.value, e.target.name);
     }
   }, {
     key: 'handleKeydown',
@@ -4003,7 +4104,7 @@ var TextInput = function (_Component) {
           value: e.target.value,
           changed: false
         });
-        this.props.onSave && this.props.onSave(e.target.value);
+        this.props.onSave && this.props.onSave(e.target.value, e.target.name);
       }
     }
   }, {
@@ -4021,7 +4122,8 @@ var TextInput = function (_Component) {
             this.props.title
           ),
           (0, _preact.h)('input', {
-            type: 'text',
+            type: this.props.type || 'text',
+            name: this.props.name || 'text',
             value: this.state.changed ? this.state.value : this.props.value,
             onInput: this.handleInput,
             onKeydown: this.handleKeydown,
@@ -4221,7 +4323,11 @@ var load = exports.load = function load() {
   return function (dispatch) {
     _util2.default.allProgress([_actions2.default.task.index({ limit: 40, orderBy: 'created_at desc' }), _actions2.default.folder.index({ activity: 'dataset' }), _actions2.default.file.index({ module: 'samplernn', generated: 1, limit: 15, orderBy: 'created_at desc' }), _actions2.default.file.index({ module: 'pix2pixhd', generated: 1, limit: 15, orderBy: 'created_at desc' }), _actions2.default.file.index({ module: 'morph', generated: 1, limit: 15, orderBy: 'created_at desc' })], function (percent, i, n) {
       // console.log('dashboard load progress', i, n)
-      dispatch({ type: _types2.default.app.load_progress, progress: { i: i, n: n } });
+      dispatch({
+        type: _types2.default.app.load_progress,
+        progress: { i: i, n: n },
+        data: { module: 'dashboard' }
+      });
     }).then(function (res) {
       var _res = _slicedToArray(res, 5),
           tasks = _res[0],
@@ -4349,9 +4455,9 @@ var Dashboard = function (_Component) {
   function Dashboard(props) {
     _classCallCheck(this, Dashboard);
 
+    // console.log(props)
     var _this = _possibleConstructorReturn(this, (Dashboard.__proto__ || Object.getPrototypeOf(Dashboard)).call(this));
 
-    console.log(props);
     props.actions.load();
     return _this;
   }
@@ -4368,14 +4474,19 @@ var Dashboard = function (_Component) {
       var _this2 = this;
 
       var _props = this.props,
+          loading = _props.loading,
+          progress = _props.progress,
           site = _props.site,
           foldersByModule = _props.foldersByModule,
           renders = _props.renders,
           queue = _props.queue,
           images = _props.images;
+
+      if (loading) {
+        return (0, _preact.h)(_common.Loading, { progress: progress });
+      }
       var tasks = queue.tasks;
 
-      console.log(foldersByModule);
       var folders = foldersByModule && Object.keys(_modules2.default).sort().map(function (key) {
         var path = key === 'samplernn' ? '/samplernn/datasets/' : '/' + key + '/sequences/';
         var folder_list = (foldersByModule[key] || []).map(function (folder) {
@@ -4475,6 +4586,8 @@ var Dashboard = function (_Component) {
 
 var mapStateToProps = function mapStateToProps(state) {
   return {
+    loading: state.dashboard.loading,
+    progress: state.dashboard.progress,
     site: state.system.site,
     foldersByModule: state.dashboard.data.foldersByModule,
     renders: state.dashboard.data.renders,
@@ -4525,6 +4638,7 @@ var FileSaver = __webpack_require__(/*! file-saver */ "./node_modules/file-saver
 
 var dashboardInitialState = {
   loading: false,
+  progress: null,
   error: null,
   data: {},
   images: [],
@@ -4536,6 +4650,14 @@ var dashboardReducer = function dashboardReducer() {
   var action = arguments[1];
 
   switch (action.type) {
+    case _types2.default.app.load_progress:
+      if (!action.data || action.data.module !== 'dashboard') {
+        return state;
+      }
+      return _extends({}, state, {
+        loading: true,
+        progress: action.progress
+      });
     case _types2.default.dashboard.load:
       return _extends({}, state, {
         loading: false,
@@ -4625,7 +4747,6 @@ var DashboardHeader = function (_Component) {
   }, {
     key: 'renderStatus',
     value: function renderStatus(name, gpu) {
-      console.log(gpu);
       if (gpu.status === 'IDLE') {
         return (0, _preact.h)(
           'div',
@@ -5663,6 +5784,7 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 var datasetInitialState = function datasetInitialState() {
   return {
     loading: true,
+    progress: null,
     error: null,
     data: null,
     folder_id: 0
@@ -7249,7 +7371,11 @@ var load_data = exports.load_data = function load_data(id) {
     var module = _morph2.default.name;
     _util2.default.allProgress([datasetLoader.load(module), _actions2.default.socket.list_sequences({ module: 'pix2pixhd', dir: 'sequences' }), _actions2.default.socket.list_directory({ module: module, dir: 'renders' })], function (percent, i, n) {
       console.log('morph load progress', i, n);
-      dispatch({ type: _types2.default.app.load_progress, progress: { i: i, n: n } });
+      dispatch({
+        type: _types2.default.app.load_progress,
+        progress: { i: i, n: n },
+        data: { module: 'morph' }
+      });
     }).then(function (res) {
       var _res = _slicedToArray(res, 3),
           datasetApiReport = _res[0],
@@ -9066,6 +9192,7 @@ var router = function () {
         (0, _preact.h)(_reactRouterDom.Route, { exact: true, path: '/pix2pixhd/new/', component: _pix2pixhd2.default }),
         (0, _preact.h)(_reactRouterDom.Route, { exact: true, path: '/pix2pixhd/sequences/', component: _pix2pixhd4.default }),
         (0, _preact.h)(_reactRouterDom.Route, { exact: true, path: '/pix2pixhd/sequences/:id/', component: _pix2pixhd4.default }),
+        (0, _preact.h)(_reactRouterDom.Route, { exact: true, path: '/pix2pixhd/train/', component: _pix2pixhd8.default }),
         (0, _preact.h)(_reactRouterDom.Route, { exact: true, path: '/pix2pixhd/results/', component: _pix2pixhd6.default }),
         (0, _preact.h)(_reactRouterDom.Route, { exact: true, path: '/pix2pixhd/live/', component: _pix2pixhd10.default })
       );
@@ -9140,7 +9267,11 @@ var load_directories = exports.load_directories = function load_directories(id)
     var module = _pix2pixhd2.default.name;
     _util2.default.allProgress([datasetLoader.load(module), _actions2.default.socket.list_directory({ module: module, dir: 'sequences' }), _actions2.default.socket.list_directory({ module: module, dir: 'datasets' }), _actions2.default.socket.list_directory({ module: module, dir: 'checkpoints' })], function (percent, i, n) {
       console.log('pix2pixhd load progress', i, n);
-      dispatch({ type: _types2.default.app.load_progress, progress: { i: i, n: n } });
+      dispatch({
+        type: _types2.default.app.load_progress,
+        progress: { i: i, n: n },
+        data: { module: 'pix2pixhd' }
+      });
     }).then(function (res) {
       var _res = _slicedToArray(res, 4),
           datasetApiReport = _res[0],
@@ -9283,7 +9414,11 @@ var load_results = exports.load_results = function load_results(id) {
     var module = _pix2pixhd2.default.name;
     _util2.default.allProgress([_actions2.default.folder.index({ name: 'results' }), _actions2.default.file.index({ module: module, generated: 1 }), _actions2.default.socket.list_sequences({ module: module, dir: 'results' }), _actions2.default.socket.list_directory({ module: module, dir: 'renders' })], function (percent, i, n) {
       console.log('pix2pixhd load progress', i, n);
-      dispatch({ type: _types2.default.app.load_progress, progress: { i: i, n: n } });
+      dispatch({
+        type: _types2.default.app.load_progress,
+        progress: { i: i, n: n },
+        data: { module: 'pix2pixhd' }
+      });
     }).then(function (res) {
       var _res2 = _slicedToArray(res, 4),
           folders = _res2[0],
@@ -9410,7 +9545,7 @@ exports.default = pix2pixhdReducer;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.live_task = exports.train_task = exports.fetch_task = undefined;
+exports.clear_recursive_task = exports.augment_task = exports.live_task = exports.train_task = exports.fetch_task = undefined;
 
 var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
 
@@ -9488,6 +9623,38 @@ var live_task = exports.live_task = function live_task(sequence, checkpoint, opt
   };
 };
 
+var augment_task = exports.augment_task = function augment_task(opt) {
+  return function (dispatch) {
+    var task = {
+      module: _pix2pixhd2.default.name,
+      activity: 'augment',
+      dataset: sequence,
+      checkpoint: checkpoint,
+      opt: _extends({}, opt, {
+        poll_delay: 0.01
+      })
+    };
+    console.log(task);
+    console.log('add live task');
+    return _actions2.default.queue.add_task(task);
+  };
+};
+
+var clear_recursive_task = exports.clear_recursive_task = function clear_recursive_task(opt) {
+  return function (dispatch) {
+    var task = {
+      module: _pix2pixhd2.default.name,
+      activity: 'clear_recursive',
+      dataset: sequence,
+      checkpoint: checkpoint,
+      opt: _extends({}, opt)
+    };
+    console.log(task);
+    console.log('add live task');
+    return _actions2.default.queue.add_task(task);
+  };
+};
+
 /***/ }),
 
 /***/ "./app/client/modules/pix2pixhd/views/pix2pixhd.live.js":
@@ -9662,7 +9829,7 @@ var Pix2PixHDLive = function (_Component) {
 
       // console.log(this.props)
       if (this.props.pix2pixhd.loading) {
-        return (0, _preact.h)(_common.Loading, null);
+        return (0, _preact.h)(_common.Loading, { progress: this.props.pix2pixhd.progress });
       }
       var _props$pix2pixhd$data = this.props.pix2pixhd.data,
           folderLookup = _props$pix2pixhd$data.folderLookup,
@@ -9718,6 +9885,7 @@ var Pix2PixHDLive = function (_Component) {
       }).sort(function (a, b) {
         return a.name.localeCompare(b.name);
       });
+
       return (0, _preact.h)(
         'div',
         { className: 'app live centered' },
@@ -10657,9 +10825,264 @@ exports.default = (0, _reactRedux.connect)(mapStateToProps, mapDispatchToProps)(
   !*** ./app/client/modules/pix2pixhd/views/pix2pixhd.train.js ***!
   \***************************************************************/
 /*! no static exports found */
-/***/ (function(module, exports) {
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
 
-throw new Error("Module build failed: SyntaxError: Expected corresponding JSX closing tag for <input> (57:8)\n\n\u001b[0m \u001b[90m 55 | \u001b[39m          recursive frames \u001b[36mfor\u001b[39m each one\u001b[33m.\u001b[39m\n \u001b[90m 56 | \u001b[39m          these will be added to the current dataset\u001b[33m.\u001b[39m\n\u001b[31m\u001b[1m>\u001b[22m\u001b[39m\u001b[90m 57 | \u001b[39m        \u001b[33m<\u001b[39m\u001b[33m/\u001b[39m\u001b[33mdiv\u001b[39m\u001b[33m>\u001b[39m\n \u001b[90m    | \u001b[39m        \u001b[31m\u001b[1m^\u001b[22m\u001b[39m\n \u001b[90m 58 | \u001b[39m        \u001b[33m<\u001b[39m\u001b[33mdiv\u001b[39m \u001b[36mclass\u001b[39m\u001b[33m=\u001b[39m\u001b[32m'heading'\u001b[39m\u001b[33m>\u001b[39m\n \u001b[90m 59 | \u001b[39m          \u001b[33m<\u001b[39m\u001b[33mdiv\u001b[39m \u001b[36mclass\u001b[39m\u001b[33m=\u001b[39m\u001b[32m'spaced'\u001b[39m\u001b[33m>\u001b[39m\n \u001b[90m 60 | \u001b[39m            \u001b[33m<\u001b[39m\u001b[33mh1\u001b[39m\u001b[33m>\u001b[39m{folder \u001b[33m?\u001b[39m folder\u001b[33m.\u001b[39mname \u001b[33m:\u001b[39m \u001b[33m<\u001b[39m\u001b[33mLoading\u001b[39m \u001b[33m/\u001b[39m\u001b[33m>\u001b[39m}\u001b[33m<\u001b[39m\u001b[33m/\u001b[39m\u001b[33mh1\u001b[39m\u001b[33m>\u001b[39m\u001b[0m\n");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+var _preact = __webpack_require__(/*! preact */ "./node_modules/preact/dist/preact.esm.js");
+
+var _redux = __webpack_require__(/*! redux */ "./node_modules/redux/es/redux.js");
+
+var _reactRedux = __webpack_require__(/*! react-redux */ "./node_modules/react-redux/es/index.js");
+
+var _util = __webpack_require__(/*! ../../../util */ "./app/client/util/index.js");
+
+var _util2 = _interopRequireDefault(_util);
+
+var _pix2pixhd = __webpack_require__(/*! ../pix2pixhd.actions */ "./app/client/modules/pix2pixhd/pix2pixhd.actions.js");
+
+var pix2pixhdActions = _interopRequireWildcard(_pix2pixhd);
+
+var _pix2pixhd2 = __webpack_require__(/*! ../pix2pixhd.tasks */ "./app/client/modules/pix2pixhd/pix2pixhd.tasks.js");
+
+var pix2pixhdTasks = _interopRequireWildcard(_pix2pixhd2);
+
+var _common = __webpack_require__(/*! ../../../common */ "./app/client/common/index.js");
+
+var _dataset = __webpack_require__(/*! ../../../dataset/dataset.form */ "./app/client/dataset/dataset.form.js");
+
+var _dataset2 = _interopRequireDefault(_dataset);
+
+var _dataset3 = __webpack_require__(/*! ../../../dataset/dataset.new */ "./app/client/dataset/dataset.new.js");
+
+var _dataset4 = _interopRequireDefault(_dataset3);
+
+var _upload = __webpack_require__(/*! ../../../dataset/upload.status */ "./app/client/dataset/upload.status.js");
+
+var _upload2 = _interopRequireDefault(_upload);
+
+var _dataset5 = __webpack_require__(/*! ../../../dataset/dataset.component */ "./app/client/dataset/dataset.component.js");
+
+var _dataset6 = _interopRequireDefault(_dataset5);
+
+var _pix2pixhd3 = __webpack_require__(/*! ../pix2pixhd.module */ "./app/client/modules/pix2pixhd/pix2pixhd.module.js");
+
+var _pix2pixhd4 = _interopRequireDefault(_pix2pixhd3);
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+var Pix2PixHDTrain = function (_Component) {
+  _inherits(Pix2PixHDTrain, _Component);
+
+  function Pix2PixHDTrain(props) {
+    _classCallCheck(this, Pix2PixHDTrain);
+
+    var _this = _possibleConstructorReturn(this, (Pix2PixHDTrain.__proto__ || Object.getPrototypeOf(Pix2PixHDTrain)).call(this, props));
+
+    _this.handleChange = _this.handleChange.bind(_this);
+    _this.state = {
+      sequence: '',
+      epoch: 'latest',
+      augment_take: 100,
+      augment_make: 20
+    };
+    return _this;
+  }
+
+  _createClass(Pix2PixHDTrain, [{
+    key: 'componentWillMount',
+    value: function componentWillMount() {
+      var id = this.props.match.params.id || localStorage.getItem('pix2pixhd.last_id');
+      console.log('load dataset:', id);
+      var _props = this.props,
+          match = _props.match,
+          pix2pixhd = _props.pix2pixhd,
+          actions = _props.actions;
+
+      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/');
+      }
+    }
+  }, {
+    key: 'handleChange',
+    value: function handleChange(value, name) {
+      this.setState(_defineProperty({}, name, value));
+    }
+  }, {
+    key: 'changeCheckpoint',
+    value: function changeCheckpoint(name) {
+      // this.props.actions.list_epochs('pix2pixhd', nextProps.opt.checkpoint_name)
+    }
+  }, {
+    key: 'render',
+    value: function render() {
+      var _this2 = this;
+
+      if (this.props.pix2pixhd.loading) {
+        return (0, _preact.h)(_common.Loading, { progress: this.props.pix2pixhd.progress });
+      }
+      var _props2 = this.props,
+          pix2pixhd = _props2.pix2pixhd,
+          match = _props2.match,
+          history = _props2.history,
+          queue = _props2.queue;
+
+      var _ref = pix2pixhd.data || {},
+          folderLookup = _ref.folderLookup,
+          datasetLookup = _ref.datasetLookup;
+
+      var folder = (folderLookup || {})[pix2pixhd.folder_id] || {};
+      console.log(pix2pixhd);
+
+      var checkpointGroups = Object.keys(folderLookup).map(function (id) {
+        var folder = _this2.props.pix2pixhd.data.folderLookup[id];
+        if (folder.name === 'results') return;
+        var datasets = folder.datasets.map(function (name) {
+          var dataset = datasetLookup[name];
+          if (dataset.checkpoints.length) {
+            return name;
+          }
+          return null;
+        }).filter(function (n) {
+          return !!n;
+        });
+        return {
+          name: folder.name,
+          options: datasets.sort()
+        };
+      }).filter(function (n) {
+        return !!n && !!n.options.length;
+      }).sort(function (a, b) {
+        return a.name.localeCompare(b.name);
+      });
+
+      return (0, _preact.h)(
+        'div',
+        { className: 'app pix2pixhd' },
+        (0, _preact.h)(
+          'h1',
+          null,
+          'pix2pixhd training'
+        ),
+        (0, _preact.h)(
+          'div',
+          { 'class': 'heading' },
+          (0, _preact.h)(_common.SelectGroup, { live: true,
+            name: 'checkpoint_name',
+            title: 'Checkpoint',
+            options: checkpointGroups,
+            onChange: this.changeCheckpoint
+          }),
+          (0, _preact.h)(_common.Select, {
+            title: 'Epoch',
+            value: this.state.epoch
+          }),
+          (0, _preact.h)('br', null),
+          (0, _preact.h)(
+            _common.Group,
+            { title: 'Augment' },
+            (0, _preact.h)(_common.TextInput, {
+              type: 'number',
+              name: 'augment_take',
+              title: 'Pick N random frames',
+              value: this.state.augment_take,
+              onInput: this.handleChange
+            }),
+            (0, _preact.h)(_common.TextInput, {
+              type: 'number',
+              name: 'augment_make',
+              title: 'Generate N recursively',
+              value: this.state.augment_make,
+              onInput: this.handleChange
+            }),
+            (0, _preact.h)(_common.Button, {
+              title: 'Augment dataset',
+              value: 'Augment',
+              onClick: function onClick() {
+                return remote.augment_task(dataset, pix2pixhd.folder_id, 1);
+              }
+            })
+          ),
+          (0, _preact.h)(
+            _common.Group,
+            { title: 'Train' },
+            (0, _preact.h)(_common.Button, {
+              title: 'Train one epoch',
+              value: 'Train',
+              onClick: function onClick() {
+                return remote.train_task(dataset, pix2pixhd.folder_id, 1);
+              }
+            })
+          ),
+          (0, _preact.h)(
+            _common.Group,
+            { title: 'Clear' },
+            (0, _preact.h)(_common.Button, {
+              title: 'Delete recursive frames',
+              value: 'Clear',
+              onClick: function onClick() {
+                return remote.clear_recursive_task(dataset, pix2pixhd.folder_id, 1);
+              }
+            })
+          )
+        ),
+        (0, _preact.h)(
+          'div',
+          null,
+          (0, _preact.h)(_common.CurrentTask, null),
+          !!queue.queue.length && (0, _preact.h)(
+            _common.Group,
+            { title: 'Upcoming Tasks' },
+            (0, _preact.h)(_common.TaskList, { tasks: queue.queue.map(function (id) {
+                return queue.tasks[id];
+              }) })
+          )
+        )
+      );
+    }
+  }]);
+
+  return Pix2PixHDTrain;
+}(_preact.Component);
+
+var mapStateToProps = function mapStateToProps(state) {
+  return {
+    pix2pixhd: state.module.pix2pixhd,
+    queue: state.queue
+  };
+};
+
+var mapDispatchToProps = function mapDispatchToProps(dispatch, ownProps) {
+  return {
+    actions: (0, _redux.bindActionCreators)(pix2pixhdActions, dispatch),
+    remote: (0, _redux.bindActionCreators)(pix2pixhdTasks, dispatch)
+  };
+};
+
+exports.default = (0, _reactRedux.connect)(mapStateToProps, mapDispatchToProps)(Pix2PixHDTrain);
 
 /***/ }),
 
@@ -12410,7 +12833,11 @@ var load_directories = exports.load_directories = function load_directories(id)
   return function (dispatch) {
     var module = _samplernn2.default.name;
     _util2.default.allProgress([datasetLoader.load(module), _actions2.default.socket.list_directory({ module: module, dir: 'datasets' }), _actions2.default.socket.list_directory({ module: module, dir: 'results' }), _actions2.default.socket.list_directory({ module: module, dir: 'output' }), _actions2.default.socket.disk_usage({ module: module, dir: 'datasets' }), load_loss()(dispatch)], function (percent, i, n) {
-      dispatch({ type: _types2.default.app.load_progress, progress: { i: i, n: n } });
+      dispatch({
+        type: _types2.default.app.load_progress,
+        progress: { i: i, n: n },
+        data: { module: 'samplernn' }
+      });
     }).then(function (res) {
       // console.log(res)
       var _res = _slicedToArray(res, 6),
@@ -12529,7 +12956,11 @@ var load_graph = exports.load_graph = function load_graph() {
   return function (dispatch) {
     var module = _samplernn2.default.name;
     _util2.default.allProgress([load_loss()(dispatch), _actions2.default.socket.list_directory({ module: module, dir: 'results' })], function (percent, i, n) {
-      dispatch({ type: _types2.default.app.load_progress, progress: { i: i, n: n } });
+      dispatch({
+        type: _types2.default.app.load_progress,
+        progress: { i: i, n: n },
+        data: { module: 'samplernn' }
+      });
     }).then(function (res) {
       var _res2 = _slicedToArray(res, 2),
           lossReport = _res2[0],