From 31fbca46a82a33bd8038f2d40722e9e0ffc61253 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Wed, 6 Jun 2018 16:30:49 +0200 Subject: starting frame offset --- app/client/audio/wav2pix.js | 12 ++++--- .../modules/pix2wav/views/spectrogram.upload.js | 24 +++++++++---- public/bundle.js | 39 ++++++++++++++++------ public/bundle.js.map | 2 +- 4 files changed, 55 insertions(+), 22 deletions(-) diff --git a/app/client/audio/wav2pix.js b/app/client/audio/wav2pix.js index 5f48814..9bd7a15 100644 --- a/app/client/audio/wav2pix.js +++ b/app/client/audio/wav2pix.js @@ -53,7 +53,7 @@ export const loadPCM = (file) => { }) } -export const renderFrames = (file, { frame_step=FRAME_STEP, max=12 }) => dispatch => { +export const renderFrames = (file, { frame_step=FRAME_STEP, frame_start=0, max=12 }) => dispatch => { return new Promise((resolve, reject) => { loadPCM(file).then((pcmProps) => { const { file, buffer, pcm, sr } = pcmProps @@ -61,7 +61,7 @@ export const renderFrames = (file, { frame_step=FRAME_STEP, max=12 }) => dispatc let frames = [] let count = 0 let _len = pcm.length - FRAME_LENGTH - let offset = _len / 4 + let offset = Math.round(_len * frame_start) for (; offset < _len && count < max; offset += frame_step, count += 1 @@ -74,7 +74,7 @@ export const renderFrames = (file, { frame_step=FRAME_STEP, max=12 }) => dispatc }) } -export const buildZip = (name, file, { frame_step=FRAME_STEP, max=10000 }) => dispatch => { +export const buildZip = (name, file, { frame_step=FRAME_STEP, frame_start=0, max=10000 }) => dispatch => { return new Promise((resolve, reject) => { loadPCM(file).then(({ buffer, pcm, sr }) => { dispatch({ type: types.wav2pix.load }) @@ -85,13 +85,15 @@ export const buildZip = (name, file, { frame_step=FRAME_STEP, max=10000 }) => di let steps = (pcm.length - FRAME_LENGTH) / frame_step console.log(steps) - let offset = 0, count = 0, _len = pcm.length - FRAME_LENGTH + let count = 0 + let _len = pcm.length - FRAME_LENGTH + let offset = Math.round(_len * frame_start) for (; offset < _len && count < max; offset += frame_step, count += 1 ) { if ((count % 10) === 0) { - dispatch({ type: types.wav2pix.progress, progress: { i: count / steps * 6, n: 6 } }) + dispatch({ type: types.wav2pix.progress, progress: { i: count / max * 6, n: 6 } }) } render(pcm.slice(offset, offset+FRAME_LENGTH), sr, count, zip_folder) } diff --git a/app/client/modules/pix2wav/views/spectrogram.upload.js b/app/client/modules/pix2wav/views/spectrogram.upload.js index 609c5e8..8dbff21 100644 --- a/app/client/modules/pix2wav/views/spectrogram.upload.js +++ b/app/client/modules/pix2wav/views/spectrogram.upload.js @@ -25,6 +25,7 @@ class SpectrogramUpload extends Component { pcm: null, name: "", frames: [], + frame_start: 0, max: 3000, frame_step: wav2pixActions.FRAME_STEP, } @@ -53,8 +54,8 @@ class SpectrogramUpload extends Component { console.log(file.size) } rebuildFrames(){ - const { file, pcm, frame_step } = this.state - this.props.wav2pix.renderFrames(pcm || file, { frame_step }) + const { file, pcm, frame_step, frame_start } = this.state + this.props.wav2pix.renderFrames(pcm || file, { frame_start, frame_step }) .then(data => { console.log('got frames', data.frames.length) this.setState({ @@ -65,15 +66,15 @@ class SpectrogramUpload extends Component { }) } buildZip(){ - const { pcm, file, max, frame_step } = this.state - this.props.wav2pix.buildZip(this.state.name, pcm || file, { frame_step, max }) + const { pcm, file, max, frame_step, frame_start } = this.state + this.props.wav2pix.buildZip(this.state.name, pcm || file, { frame_start, frame_step, max }) .then(({ zip, filename, count }) => { this.props.datasetActions.uploadFile( this.props.module, this.props.folder, zip, filename, - { count, max, frame_step } + { count, max, frame_step, frame_size: wav2pixActions.FRAME_LENGTH / 44100 } ) }) } @@ -124,11 +125,11 @@ class SpectrogramUpload extends Component { {size[1]} {moment(file.lastModifiedDate).format("YYYY-MM-DD h:mm a")} {Math.floor(duration) + ' s.'} +
{total_frame_count} {frame_size} {frame_step} {wav2pixActions.spectrum.fft_size} -
{this.props.pix2wav.status}
@@ -139,6 +140,17 @@ class SpectrogramUpload extends Component { onChange={e => this.setState({ name: e.target.value })} value={this.state.name} /> + { + this.setState({ frame_start }, () => { + this.rebuildFrames() + }) + }} + /> 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 '