From 34df2ca203ea934537edb490b8cb632cee650f65 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Thu, 7 Jun 2018 20:41:34 +0200 Subject: send as png --- app/client/live/player.js | 15 +++++- app/client/modules/pix2wav/pix2wav.tasks.js | 2 +- app/client/modules/pix2wav/views/pix2wav.live.js | 20 +++++++- public/assets/css/css.css | 5 ++ public/bundle.js | 60 ++++++++++++++++++++++-- public/bundle.js.map | 2 +- rpc/rpc.py | 8 ++-- 7 files changed, 99 insertions(+), 13 deletions(-) diff --git a/app/client/live/player.js b/app/client/live/player.js index d4831e2..3fd33e8 100644 --- a/app/client/live/player.js +++ b/app/client/live/player.js @@ -1,12 +1,19 @@ import { store } from '../store' import Whammy from './whammy' import types from '../types' -import pix2wav from '../audio/pix2wav' +import * as pix2wav from '../audio/pix2wav' let fps = 0, last_frame -let recording = false, saving = false +let recording = false, saving = false, synthesizing = false let videoWriter +export function startSynthesizing(){ + synthesizing = true +} +export function stopSynthesizing(){ + synthesizing = false +} + export function startRecording(){ videoWriter = new Whammy.Video(10) recording = true @@ -46,6 +53,10 @@ export function onFrame (data) { URL.revokeObjectURL(url) const ctx = canvas.getContext('2d-lodpi') ctx.drawImage(img, 0, 0, canvas.width, canvas.height) + if (synthesizing) { + const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height) + pix2wav.play({ imageData }) + } if (recording) { console.log('record frame') videoWriter.add(canvas) diff --git a/app/client/modules/pix2wav/pix2wav.tasks.js b/app/client/modules/pix2wav/pix2wav.tasks.js index 95c26f2..b273346 100644 --- a/app/client/modules/pix2wav/pix2wav.tasks.js +++ b/app/client/modules/pix2wav/pix2wav.tasks.js @@ -12,7 +12,7 @@ export const live_task = (sequence, checkpoint) => dispatch => { dataset: sequence, checkpoint, opt: { - poll_delay: 1.0, + poll_delay: 0.2, } } console.log(task) diff --git a/app/client/modules/pix2wav/views/pix2wav.live.js b/app/client/modules/pix2wav/views/pix2wav.live.js index 551bcda..bc34356 100644 --- a/app/client/modules/pix2wav/views/pix2wav.live.js +++ b/app/client/modules/pix2wav/views/pix2wav.live.js @@ -3,7 +3,7 @@ import { bindActionCreators } from 'redux' import { connect } from 'react-redux' import { - ParamGroup, Param, Player, + ParamGroup, Param, Player, Group, Slider, Select, Button, Loading } from '../../../common/' @@ -14,6 +14,8 @@ import * as queueActions from '../../../queue/queue.actions' import * as pix2wavTasks from '../pix2wav.tasks' import * as pix2wavActions from '../pix2wav.actions' +import * as playerActions from '../../../live/player' + class Pix2WavLive extends Component { constructor(props){ super() @@ -83,7 +85,21 @@ class Pix2WavLive extends Component { // console.log('sequence', this.props.opt) return (
- +
+
+ +
+
+ + + + +
+
1 && arguments[1] !== undefined ? arguments[1] : [];\n return with_type(type, actions.concat(['index_loading', 'index', 'index_error', 'show_loading', 'show', 'show_error', 'create_loading', 'create', 'create_error', 'update_loading', 'update', 'update_error', 'destroy_loading', 'destroy', 'destroy_error', 'upload_loading', 'upload_progress', 'upload_waiting', 'upload_complete', 'upload_error', 'sort']));\n};","'use strict';\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.upload_action = undefined;\nexports.crud_upload = crud_upload;\n\nvar _crud = require('./crud.types');\n\nfunction _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; }\n\nfunction crud_upload(type, fd, data, dispatch) {\n return new Promise(function (resolve, reject) {\n var id = data.id;\n\n Object.keys(data).forEach(function (key) {\n if (key !== 'id') {\n fd.append(key, data[key]);\n }\n });\n\n console.log('/api/' + type + '/' + id + '/upload/');\n\n var xhr = new XMLHttpRequest();\n xhr.upload.addEventListener(\"progress\", uploadProgress, false);\n xhr.addEventListener(\"load\", uploadComplete, false);\n xhr.addEventListener(\"error\", uploadFailed, false);\n xhr.addEventListener(\"abort\", uploadCancelled, false);\n xhr.open(\"POST\", '/api/' + type + '/' + id + '/upload/');\n xhr.send(fd);\n\n dispatch && dispatch({ type: (0, _crud.as_type)(type, 'upload_loading') });\n\n var complete = false;\n\n function uploadProgress(e) {\n if (e.lengthComputable) {\n var percent = Math.round(e.loaded * 100 / e.total) || 0;\n if (percent > 99) {\n dispatch && dispatch(_defineProperty({\n type: (0, _crud.as_type)(type, 'upload_waiting'),\n percent: percent\n }, type, id));\n } else {\n dispatch && dispatch(_defineProperty({\n type: (0, _crud.as_type)(type, 'upload_progress'),\n percent: percent\n }, type, id));\n }\n } else {\n dispatch && dispatch(_defineProperty({\n type: (0, _crud.as_type)(type, 'upload_error'),\n error: 'unable to compute upload progress'\n }, type, id));\n }\n }\n\n function uploadComplete(e) {\n var parsed = void 0;\n try {\n parsed = JSON.parse(e.target.responseText);\n } catch (e) {\n dispatch && dispatch(_defineProperty({\n type: (0, _crud.as_type)(type, 'upload_error'),\n error: 'upload failed'\n }, type, id));\n reject(e);\n return;\n }\n dispatch && dispatch(_defineProperty({\n type: (0, _crud.as_type)(type, 'upload_complete'),\n data: parsed\n }, type, id));\n if (parsed.files && parsed.files.length) {\n parsed.files.forEach(function (file) {\n console.log(file);\n dispatch && dispatch({\n type: (0, _crud.as_type)('file', 'create'),\n data: file\n });\n });\n }\n resolve(parsed);\n }\n\n function uploadFailed(evt) {\n dispatch && dispatch(_defineProperty({\n type: (0, _crud.as_type)(type, 'upload_error'),\n error: 'upload failed'\n }, type, id));\n reject(evt);\n }\n\n function uploadCancelled(evt) {\n dispatch && dispatch(_defineProperty({\n type: (0, _crud.as_type)(type, 'upload_error'),\n error: 'upload cancelled'\n }, type, id));\n reject(evt);\n }\n });\n}\n\nvar upload_action = exports.upload_action = function upload_action(type, id, fd) {\n return function (dispatch) {\n return crud_upload(type, id, fd, dispatch);\n };\n};","'use strict';\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.actions = exports.parser = exports.util = undefined;\n\nvar _crud = require('./crud.actions');\n\nvar _util = require('../util');\n\nvar _util2 = _interopRequireDefault(_util);\n\nvar _parser = require('./parser');\n\nvar parser = _interopRequireWildcard(_parser);\n\nfunction _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; } }\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\n/*\nfor our crud events, create corresponding actions\nthe actions fire a 'loading' event, call the underlying api method, and then resolve.\nso you can do ... \n import { folderActions } from '../../api'\n folderActions.index({ module: 'samplernn' })\n folderActions.show(12)\n folderActions.create({ module: 'samplernn', name: 'foo' })\n folderActions.update(12, { module: 'pix2pix' })\n folderActions.destroy(12, { confirm: true })\n folderActions.upload(12, form_data)\n*/\n\nexports.util = _util2.default;\nexports.parser = parser;\nvar actions = exports.actions = ['folder', 'file', 'dataset', 'task', 'user'].reduce(function (a, b) {\n return (a[b] = (0, _crud.crud_actions)(b)) && a;\n}, {});","'use strict';\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.tumblr = exports.thumbnail = exports.loadImage = exports.tag = exports.parse = exports.lookup = exports.integrations = undefined;\n\nvar _nodeFetch = require('node-fetch');\n\nvar _nodeFetch2 = _interopRequireDefault(_nodeFetch);\n\nvar _fetchJsonp = require('fetch-jsonp');\n\nvar _fetchJsonp2 = _interopRequireDefault(_fetchJsonp);\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\nvar integrations = exports.integrations = [{\n type: 'image',\n regex: /\\.(jpeg|jpg|gif|png|svg)(\\?.*)?$/i,\n fetch: function fetch(url, done) {\n var img = new Image();\n img.onload = function () {\n if (!img) return;\n var width = img.naturalWidth,\n height = img.naturalHeight;\n img = null;\n done({\n url: url,\n type: \"image\",\n token: \"\",\n thumbnail: \"\",\n title: \"\",\n width: width,\n height: height\n });\n };\n img.src = url;\n if (img.complete) {\n img.onload();\n }\n },\n tag: function tag(media) {\n return '';\n }\n}, {\n type: 'video',\n regex: /\\.(mp4|webm)(\\?.*)?$/i,\n fetch: function fetch(url, done) {\n var video = document.createElement(\"video\");\n var url_parts = url.replace(/\\?.*$/, \"\").split(\"/\");\n var filename = url_parts[url_parts.length - 1];\n video.addEventListener(\"loadedmetadata\", function () {\n var width = video.videoWidth,\n height = video.videoHeight;\n video = null;\n done({\n url: url,\n type: \"video\",\n token: url,\n thumbnail: \"/public/assets/img/video-thumbnail.png\",\n title: filename,\n width: width,\n height: height\n });\n });\n video.src = url;\n video.load();\n },\n tag: function tag(media) {\n return '