play frames

1 files changed, 206 insertions, 59 deletions

diff --git a/public/bundle.js b/public/bundle.js
index 6042c3d..f212bf9 100644
--- a/public/bundle.js
+++ b/public/bundle.js
@@ -1675,6 +1675,68 @@ var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol
 
 /***/ }),
 
+/***/ "./app/client/audio/pix2wav.js":
+/*!*************************************!*\
+  !*** ./app/client/audio/pix2wav.js ***!
+  \*************************************/
+/*! no static exports found */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.play = play;
+
+var _types = __webpack_require__(/*! ../types */ "./app/client/types.js");
+
+var _types2 = _interopRequireDefault(_types);
+
+var _tone = __webpack_require__(/*! tone */ "./node_modules/tone/build/Tone.js");
+
+var _tone2 = _interopRequireDefault(_tone);
+
+var _draw = __webpack_require__(/*! ./lib/draw */ "./app/client/audio/lib/draw.js");
+
+var draw = _interopRequireWildcard(_draw);
+
+var _output = __webpack_require__(/*! ./lib/output */ "./app/client/audio/lib/output.js");
+
+var _output2 = _interopRequireDefault(_output);
+
+var _spectrum = __webpack_require__(/*! ./lib/spectrum */ "./app/client/audio/lib/spectrum.js");
+
+var _spectrum2 = _interopRequireDefault(_spectrum);
+
+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 }; }
+
+var _r = 8;
+var _i = 8;
+
+function play(frame) {
+  // const { canvas, imageData } = draw.raw_spectrum(fft, 0, 256, 0, 256, 1, 1)
+  // console.log(_r, _i)
+  // const { canvas, imageData } = draw.raw_spectrum(player.fft, 0, 256, 0, 256, _r, _i)
+  var new_fft = _spectrum2.default.fromImageData(frame.imageData, 44100, _r, _i);
+  // gallery.innerHTML = ''
+
+  // console.log(player.fft.data, new_fft.data)
+  var buf = _spectrum2.default.fromSpectrum(new_fft);
+  var _p = new _tone2.default.Player(buf);
+  _p.connect(_output2.default);
+  _p.start(_tone2.default.now());
+  // redraw(new_fft)
+}
+// function redraw(new_fft){
+//   const { canvas, imageData } = draw.raw_spectrum(new_fft, 0, 256, 0, 256, _r, _i)
+// }
+
+/***/ }),
+
 /***/ "./app/client/audio/wav2pix.js":
 /*!*************************************!*\
   !*** ./app/client/audio/wav2pix.js ***!
@@ -2169,7 +2231,7 @@ exports.default = (0, _reactRedux.connect)(mapStateToProps, mapDispatchToProps)(
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.FileRow = exports.fieldSet = exports.FileList = undefined;
+exports.FileRow = exports.FileList = undefined;
 
 var _preact = __webpack_require__(/*! preact */ "./node_modules/preact/dist/preact.esm.js");
 
@@ -2189,7 +2251,7 @@ var _util2 = _interopRequireDefault(_util);
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var defaultFields = new Set(['name', 'date', 'size']);
+var fieldSet = _util2.default.fieldSet(new Set(['name', 'date', 'size']));
 
 var FileList = exports.FileList = function FileList(props) {
   var files = props.files,
@@ -2260,16 +2322,6 @@ var FileList = exports.FileList = function FileList(props) {
   );
 };
 
-var fieldSet = exports.fieldSet = function fieldSet(fields) {
-  if (fields) {
-    if (fields instanceof Set) {
-      return fields;
-    }
-    return new Set(fields.split(' '));
-  }
-  return defaultFields;
-};
-
 var FileRow = exports.FileRow = function FileRow(props) {
   var file = props.file,
       linkFiles = props.linkFiles,
@@ -4104,6 +4156,8 @@ function _possibleConstructorReturn(self, call) { if (!self) { throw new Referen
 
 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 fieldSet = _util2.default.fieldSet(new Set(['input', 'status', 'checkpoint', 'output']));
+
 var DatasetComponent = function (_Component) {
   _inherits(DatasetComponent, _Component);
 
@@ -4119,6 +4173,7 @@ var DatasetComponent = function (_Component) {
       var _props = this.props,
           loading = _props.loading,
           progress = _props.progress,
+          fields = _props.fields,
           module = _props.module,
           data = _props.data,
           folder = _props.folder,
@@ -4133,28 +4188,29 @@ var DatasetComponent = function (_Component) {
         return history.push('/' + module.name + '/new/');
       }
       if (!folder || !folder.name) return;
+      fields = fieldSet(fields);
       return (0, _preact.h)(
         'div',
         { 'class': 'rows params datasets' },
         (0, _preact.h)(
           'div',
           { 'class': 'row row-heading dataset' },
-          (0, _preact.h)(
+          fields.has('input') && (0, _preact.h)(
             'div',
             { 'class': 'col' },
             'input'
           ),
-          (0, _preact.h)(
+          fields.has('status') && (0, _preact.h)(
             'div',
             { 'class': 'col' },
             'status'
           ),
-          (0, _preact.h)(
+          fields.has('checkpoint') && (0, _preact.h)(
             'div',
             { 'class': 'col' },
             'checkpoint'
           ),
-          (0, _preact.h)(
+          fields.has('output') && (0, _preact.h)(
             'div',
             { 'class': 'col' },
             'output'
@@ -4172,10 +4228,13 @@ var DatasetComponent = function (_Component) {
           module = _props2.module,
           data = _props2.data,
           folder = _props2.folder,
+          fields = _props2.fields,
           runner = _props2.runner,
           onPickDataset = _props2.onPickDataset,
           onPickFile = _props2.onPickFile,
           datasetActions = _props2.datasetActions;
+
+      fields = fieldSet(fields);
       var datasetLookup = data.datasetLookup,
           fileLookup = data.fileLookup;
 
@@ -4205,7 +4264,7 @@ var DatasetComponent = function (_Component) {
               return onPickDataset && onPickDataset(dataset);
             } },
           _this2.props.beforeRow && _this2.props.beforeRow(dataset),
-          (0, _preact.h)(
+          fields.has('input') && (0, _preact.h)(
             'div',
             { className: 'col' },
             !!dataset.input.length && (0, _preact.h)(_fileList.FileList, {
@@ -4222,13 +4281,13 @@ var DatasetComponent = function (_Component) {
               }
             })
           ),
-          (0, _preact.h)(
+          fields.has('status') && (0, _preact.h)(
             'div',
             { className: ['col', 'quiet', dataset.isBuilt ? 'built' : 'not_built', isProcessing ? 'processing' : 'not_processing'].join(' ') },
             _this2.props.datasetActions && _this2.props.datasetActions(dataset, isFetching, isProcessing),
             status
           ),
-          (0, _preact.h)(
+          fields.has('checkpoint') && (0, _preact.h)(
             'div',
             { className: 'col checkpoint' },
             !!dataset.checkpoints.length && (0, _preact.h)(_fileList.FileRow, {
@@ -4237,7 +4296,7 @@ var DatasetComponent = function (_Component) {
               className: 'row checkpoint'
             })
           ),
-          (0, _preact.h)(
+          fields.has('output') && (0, _preact.h)(
             'div',
             { className: 'col' },
             !!dataset.output.length && (0, _preact.h)(_fileList.FileList, {
@@ -6105,8 +6164,8 @@ function router() {
     'section',
     null,
     (0, _preact.h)(_reactRouterDom.Route, { exact: true, path: '/pix2pix/new/', component: _pix2pix2.default }),
-    (0, _preact.h)(_reactRouterDom.Route, { exact: true, path: '/pix2pix/datasets/', component: _pix2pix4.default }),
-    (0, _preact.h)(_reactRouterDom.Route, { exact: true, path: '/pix2pix/datasets/:id/', component: _pix2pix4.default }),
+    (0, _preact.h)(_reactRouterDom.Route, { exact: true, path: '/pix2pix/sequences/', component: _pix2pix4.default }),
+    (0, _preact.h)(_reactRouterDom.Route, { exact: true, path: '/pix2pix/sequences/:id/', component: _pix2pix4.default }),
     (0, _preact.h)(_reactRouterDom.Route, { exact: true, path: '/pix2pix/live/', component: _pix2pix6.default })
   );
 }
@@ -6120,8 +6179,8 @@ function links() {
       null,
       (0, _preact.h)(
         _reactRouterDom.Link,
-        { to: '/pix2pix/datasets/' },
-        'datasets'
+        { to: '/pix2pix/sequences/' },
+        'sequences'
       )
     ),
     (0, _preact.h)(
@@ -6521,6 +6580,16 @@ var Pix2PixLive = function (_Component) {
       this.props.actions.seek(frame);
     }
   }, {
+    key: 'start',
+    value: function start() {
+      //
+    }
+  }, {
+    key: 'kill',
+    value: function kill() {
+      //
+    }
+  }, {
     key: 'togglePlaying',
     value: function togglePlaying() {
       if (this.props.opt.processing) {
@@ -6588,14 +6657,7 @@ var Pix2PixLive = function (_Component) {
                 value: (this.props.frame.sequence_i || 0) / (this.props.frame.sequence_len || 1),
                 onChange: this.seek
               }),
-              (0, _preact.h)(
-                _button2.default,
-                {
-                  title: 'Processing: ' + (this.props.opt.processing ? 'yes' : 'no'),
-                  onClick: this.togglePlaying
-                },
-                this.props.opt.processing ? 'Pause' : 'Restart'
-              ),
+              this.renderRestartButton(),
               (0, _preact.h)(
                 _button2.default,
                 {
@@ -6734,6 +6796,48 @@ var Pix2PixLive = function (_Component) {
         )
       );
     }
+  }, {
+    key: 'renderRestartButton',
+    value: function renderRestartButton() {
+      if (this.props.runner.gpu.status === 'IDLE') {
+        return (0, _preact.h)(
+          _button2.default,
+          {
+            title: 'GPU Idle',
+            onClick: this.start
+          },
+          'Start'
+        );
+      }
+      if (this.props.runner.gpu.task.module !== 'pix2pix') {
+        return (0, _preact.h)(
+          _button2.default,
+          {
+            title: 'GPU Busy',
+            onClick: this.kill
+          },
+          'Kill'
+        );
+      }
+      if (!this.props.opt.processing) {
+        return (0, _preact.h)(
+          _button2.default,
+          {
+            title: 'Not processing',
+            onClick: this.togglePlaying
+          },
+          'Restart'
+        );
+      }
+      return (0, _preact.h)(
+        _button2.default,
+        {
+          title: 'Processing',
+          onClick: this.togglePlaying
+        },
+        'Restart'
+      );
+    }
   }]);
 
   return Pix2PixLive;
@@ -6748,7 +6852,8 @@ var mapStateToProps = function mapStateToProps(state) {
     frame: state.live.frame,
     checkpoints: state.live.checkpoints,
     epochs: state.live.epochs,
-    sequences: state.live.sequences
+    sequences: state.live.sequences,
+    runner: state.system.runner
   };
 };
 
@@ -7724,9 +7829,13 @@ var _wav2pix = __webpack_require__(/*! ../../../audio/wav2pix */ "./app/client/a
 
 var wav2pixActions = _interopRequireWildcard(_wav2pix);
 
-var _pix2wav3 = __webpack_require__(/*! ../pix2wav.module */ "./app/client/modules/pix2wav/pix2wav.module.js");
+var _pix2wav3 = __webpack_require__(/*! ../../../audio/pix2wav */ "./app/client/audio/pix2wav.js");
 
-var _pix2wav4 = _interopRequireDefault(_pix2wav3);
+var pix2wavPlayer = _interopRequireWildcard(_pix2wav3);
+
+var _pix2wav4 = __webpack_require__(/*! ../pix2wav.module */ "./app/client/modules/pix2wav/pix2wav.module.js");
+
+var _pix2wav5 = _interopRequireDefault(_pix2wav4);
 
 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; } }
 
@@ -7758,6 +7867,7 @@ var SpectrogramUpload = function (_Component) {
       frames: [],
       frame_start: 0,
       max: 1000,
+      preview_count: 8 * 4,
       frame_step: wav2pixActions.FRAME_STEP
     };
     var audioElement = document.createElement('audio');
@@ -7798,9 +7908,10 @@ var SpectrogramUpload = function (_Component) {
           file = _state.file,
           pcm = _state.pcm,
           frame_step = _state.frame_step,
-          frame_start = _state.frame_start;
+          frame_start = _state.frame_start,
+          preview_count = _state.preview_count;
 
-      this.props.wav2pix.renderFrames(pcm || file, { frame_start: frame_start, frame_step: frame_step }).then(function (data) {
+      this.props.wav2pix.renderFrames(pcm || file, { frame_start: frame_start, frame_step: frame_step, max: preview_count }).then(function (data) {
         console.log('got frames', data.frames.length);
         _this3.setState(_extends({}, _this3.state, {
           frames: data.frames,
@@ -7829,9 +7940,19 @@ var SpectrogramUpload = function (_Component) {
       });
     }
   }, {
+    key: 'playFrame',
+    value: function playFrame(i) {
+      var _this5 = this;
+
+      return function () {
+        var frame = _this5.state.frames[i];
+        pix2wavPlayer.play(frame);
+      };
+    }
+  }, {
     key: 'render',
     value: function render() {
-      var _this5 = this;
+      var _this6 = this;
 
       // loading={pix2wav.loading}
       // progress={pix2wav.progress}
@@ -7841,8 +7962,13 @@ var SpectrogramUpload = function (_Component) {
       // folder={folder}
       var _state3 = this.state,
           file = _state3.file,
-          frames = _state3.frames;
+          frames = _state3.frames,
+          preview_count = _state3.preview_count;
 
+      var canvases = [];
+      for (var i = 0, _len = preview_count; i < _len; i++) {
+        canvases.push((0, _preact.h)('canvas', { key: i, onClick: this.playFrame(i) }));
+      }
       return (0, _preact.h)(
         'div',
         { className: 'row' },
@@ -7862,23 +7988,29 @@ var SpectrogramUpload = function (_Component) {
               title: 'Choose a sound file',
               accept: 'audio/*',
               onUpload: function onUpload(file) {
-                return _this5.pickFile(file);
+                return _this6.pickFile(file);
               }
             }),
             file && this.renderMetadata(file)
           )
         ),
-        (0, _preact.h)('div', { ref: function ref(c) {
-            _this5.canvases = c;
-          }, className: 'thumbs', id: 'pix2wav_canvases' })
+        (0, _preact.h)(
+          'div',
+          { ref: function ref(c) {
+              _this6.canvases = c;
+            }, className: 'thumbs', id: 'pix2wav_canvases' },
+          canvases
+        )
       );
     }
   }, {
     key: 'renderMetadata',
     value: function renderMetadata(file) {
-      var _this6 = this;
+      var _this7 = this;
 
-      var duration = this.state.duration;
+      var _state4 = this.state,
+          duration = _state4.duration,
+          preview_count = _state4.preview_count;
 
       var size = _util2.default.hush_size(file.size);
       var total_frame_count = Math.floor((duration * 44100 - wav2pixActions.FRAME_LENGTH) / this.state.frame_step);
@@ -7954,7 +8086,7 @@ var SpectrogramUpload = function (_Component) {
           (0, _preact.h)(_common.TextInput, {
             title: 'Dataset name',
             onChange: function onChange(e) {
-              return _this6.setState({ name: e.target.value });
+              return _this7.setState({ name: e.target.value });
             },
             value: this.state.name
           }),
@@ -7964,10 +8096,10 @@ var SpectrogramUpload = function (_Component) {
             value: this.state.frame_start,
             defaultValue: 0,
             onChange: function onChange(frame_start) {
-              _this6.setState({
+              _this7.setState({
                 frame_start: frame_start
               }, function () {
-                _this6.rebuildFrames();
+                _this7.rebuildFrames();
               });
             }
           }),
@@ -7977,7 +8109,7 @@ var SpectrogramUpload = function (_Component) {
             value: this.state.max,
             defaultValue: Math.min(total_frame_count, 300),
             onChange: function onChange(max) {
-              return _this6.setState({ max: max });
+              return _this7.setState({ max: max });
             }
           }),
           (0, _preact.h)(_common.Slider, {
@@ -7987,12 +8119,12 @@ var SpectrogramUpload = function (_Component) {
             defaultValue: wav2pixActions.FRAME_STEP,
             onChange: function onChange(frame_step) {
               var total_frame_count = Math.floor((duration * 44100 - wav2pixActions.FRAME_LENGTH) / frame_step);
-              _this6.setState({
-                name: _this6.state.datasetName + '_step_' + frame_step + date_stamp(),
+              _this7.setState({
+                name: _this7.state.datasetName + '_step_' + frame_step + date_stamp(),
                 frame_step: frame_step,
-                max: Math.min(_this6.state.max, total_frame_count)
+                max: Math.min(_this7.state.max, total_frame_count)
               }, function () {
-                _this6.rebuildFrames();
+                _this7.rebuildFrames();
               });
             }
           }),
@@ -8000,7 +8132,7 @@ var SpectrogramUpload = function (_Component) {
             _common.Button,
             {
               onClick: function onClick() {
-                return _this6.buildZip();
+                return _this7.buildZip();
               }
             },
             'Upload Frames'
@@ -8012,11 +8144,14 @@ var SpectrogramUpload = function (_Component) {
   }, {
     key: 'componentDidUpdate',
     value: function componentDidUpdate() {
-      var _this7 = this;
+      var _this8 = this;
 
-      this.canvases.innerHTML = '';
-      var canvases = (this.state.frames || []).map(function (c) {
-        _this7.canvases.append(c.canvas);
+      (this.state.frames || []).map(function (frame, i) {
+        var canvas = _this8.canvases.children[i];
+        var ctx = canvas.getContext('2d-lodpi');
+        canvas.width = frame.canvas.width;
+        canvas.height = frame.canvas.height;
+        ctx.drawImage(frame.canvas, 0, 0);
       });
     }
   }]);
@@ -11698,9 +11833,21 @@ var allProgress = function allProgress(promises, progress_cb) {
 
 document.body.style.backgroundImage = 'linear-gradient(' + (maths.randint(40) + 40) + 'deg, #fde, #ffe)';
 
+var fieldSet = function fieldSet(defaultFields) {
+  return function (fields) {
+    if (fields) {
+      if (fields instanceof Set) {
+        return fields;
+      }
+      return new Set(fields.split(' '));
+    }
+    return defaultFields;
+  };
+};
+
 exports.default = _extends({}, maths, format, {
   sort: sort,
-  allProgress: allProgress,
+  allProgress: allProgress, fieldSet: fieldSet,
   is_iphone: is_iphone, is_ipad: is_ipad, is_android: is_android, is_mobile: is_mobile, is_desktop: is_desktop
 });