diff options
Diffstat (limited to 'app/client')
36 files changed, 692 insertions, 295 deletions
diff --git a/app/client/api/index.js b/app/client/api/index.js index c19b78d..7551fb2 100644 --- a/app/client/api/index.js +++ b/app/client/api/index.js @@ -1,5 +1,5 @@ import { crud_actions } from './crud.actions' -import * as util from '../util' +import util from '../util' import * as parser from './parser' /* diff --git a/app/client/audio/index.js b/app/client/audio/index.js deleted file mode 100644 index 8b3da74..0000000 --- a/app/client/audio/index.js +++ /dev/null @@ -1,2 +0,0 @@ -import Tone from 'tone' -import StartAudioContext from './startAudioContext' diff --git a/app/client/audio/lib/_draw.js b/app/client/audio/lib/_draw.js new file mode 100644 index 0000000..974fa62 --- /dev/null +++ b/app/client/audio/lib/_draw.js @@ -0,0 +1,139 @@ +import { + browser, requestAudioContext, + randint, randrange, clamp, mod, +} from './lib/util' + +import './lib/vendor/hidpi-canvas' + +import mouse from './lib/mouse' +import color from './lib/color' + +let w, h +let rx, ry + +const pixels_per_second = 512 // 1024 + +const canvas = document.createElement('canvas') +// document.body.appendChild(canvas) +// document.body.addEventListener('resize', resize) +resize() +recenter() +requestAnimationFrame(animate) + +// must request context after resizing +const ctx = canvas.getContext('2d') + +const scratch = document.createElement('canvas') +const scratchCtx = scratch.getContext('2d-lodpi') + +function resize(ww, hh){ + w = canvas.width = ww || window.innerWidth + h = canvas.height = hh || window.innerHeight + canvas.style.width = w + 'px' + canvas.style.height = h + 'px' +} +function recenter(){ + rx = randint(w), ry = randint(h) +} +let frame = null +function onFrame(fn){ + frame = fn +} +function animate(t){ + requestAnimationFrame(animate) + if (frame) { + frame(t) + frame = null + } + // ctx.save() + // ctx.globalAlpha = 0.0001 + // ctx.translate(w/2, h/2) + // ctx.rotate(0.1) + // ctx.translate(-rx, -ry) + // ctx.drawImage(canvas, 0, 0) + // ctx.restore() +} +function clear(n, x, y, ww, hh){ + ctx.fillStyle = 'rgba(255,255,255,' + (n || 0.9) + ')' + ctx.fillRect(x || 0, y || 0, ww || w, hh || h) + recenter() +} +function triangle(px,py,r){ + setTimeout( () => tri(px,py,r), Math.random()*10) + // setTimeout( () => tri(px,py,r), Math.random()*200) + // setTimeout( () => tri(px,py,r), Math.random()*300) +} +function tri(px, py, r) { + ctx.save() + ctx.globalCompositeOperation = 'multiply' + ctx.fillStyle = color.color((px+py)/(w+h), 0, 1, 0.2) + function p(){ + let theta = randrange(0, Math.PI*2) + let x = px + Math.cos(theta) * r + let y = py + Math.sin(theta) * r + return { x, y } + } + ctx.beginPath() + const p0 = p(), p1 = p(), p2 = p() + ctx.moveTo(p0.x, p0.y) + ctx.lineTo(p1.x, p1.y) + ctx.lineTo(p2.x, p2.y) + ctx.lineTo(p0.x, p0.y) + ctx.fill() + ctx.restore() +} +function line(y){ + ctx.beginPath() + ctx.moveTo(0, y) + ctx.lineTo(w, y) + ctx.strokeStyle = "#888" + ctx.strokeWidth = 1 + ctx.stroke() +} +function dot(x, y, r){ + ctx.fillStyle = "#f00" + ctx.beginPath() + ctx.moveTo(x, y) + ctx.arc(x, y, r, 0, 2*Math.PI) + ctx.fill() +} +function waveform(pcm, sr, pos, zoom){ + sr = sr || 44100 + pos = pos || 0 + + var width = w + var height = Math.floor(h/4) + var half_height = Math.floor(height/2) + var x0 = 0 + var y0 = 20 + var ymid = y0 + half_height + var max_width_in_seconds = width / pixels_per_second + var max_width_in_samples = max_width_in_seconds * sr + var pcm_length = pcm.length + var len = Math.min(pcm_length, max_width_in_samples) + var pcm_step = sr / pixels_per_second + var i + ctx.save() + + clear(1, x0, y0, width, height) + + line(ymid) + ctx.beginPath() + for (i = 0; i < width; i += 0.5) { + var si = Math.floor(pcm_step * i + pos) + if (si > pcm_length) break + var val = pcm[si] // -1, 1 + // ctx.moveTo(x0 + i, ymid) + ctx.lineTo(x0 + i, ymid + val * half_height) + } + ctx.strokeStyle = "rgba(250,20,0,0.9)" + ctx.strokeWidth = 1 + ctx.stroke() + ctx.restore() +} + +export default { + canvas, ctx, onFrame, resize, + triangle, clear, line, dot, + waveform, spectrum, raw_spectrum, +}
\ No newline at end of file diff --git a/app/client/audio/draw.js b/app/client/audio/lib/draw.js index 8caf8d8..f5ba3ac 100644 --- a/app/client/audio/draw.js +++ b/app/client/audio/lib/draw.js @@ -1,137 +1,6 @@ -import { - browser, requestAudioContext, - randint, randrange, clamp, mod, -} from './lib/util' - -import './lib/vendor/hidpi-canvas' - -import mouse from './lib/mouse' -import color from './lib/color' - -let w, h -let rx, ry - -const pixels_per_second = 512 // 1024 - -const canvas = document.createElement('canvas') -// document.body.appendChild(canvas) -// document.body.addEventListener('resize', resize) -resize() -recenter() -requestAnimationFrame(animate) - -// must request context after resizing -const ctx = canvas.getContext('2d') - const scratch = document.createElement('canvas') const scratchCtx = scratch.getContext('2d-lodpi') -function resize(ww, hh){ - w = canvas.width = ww || window.innerWidth - h = canvas.height = hh || window.innerHeight - canvas.style.width = w + 'px' - canvas.style.height = h + 'px' -} -function recenter(){ - rx = randint(w), ry = randint(h) -} -let frame = null -function onFrame(fn){ - frame = fn -} -function animate(t){ - requestAnimationFrame(animate) - if (frame) { - frame(t) - frame = null - } - // ctx.save() - // ctx.globalAlpha = 0.0001 - // ctx.translate(w/2, h/2) - // ctx.rotate(0.1) - // ctx.translate(-rx, -ry) - // ctx.drawImage(canvas, 0, 0) - // ctx.restore() -} -function clear(n, x, y, ww, hh){ - ctx.fillStyle = 'rgba(255,255,255,' + (n || 0.9) + ')' - ctx.fillRect(x || 0, y || 0, ww || w, hh || h) - recenter() -} -function triangle(px,py,r){ - setTimeout( () => tri(px,py,r), Math.random()*10) - // setTimeout( () => tri(px,py,r), Math.random()*200) - // setTimeout( () => tri(px,py,r), Math.random()*300) -} -function tri(px, py, r) { - ctx.save() - ctx.globalCompositeOperation = 'multiply' - ctx.fillStyle = color.color((px+py)/(w+h), 0, 1, 0.2) - function p(){ - let theta = randrange(0, Math.PI*2) - let x = px + Math.cos(theta) * r - let y = py + Math.sin(theta) * r - return { x, y } - } - ctx.beginPath() - const p0 = p(), p1 = p(), p2 = p() - ctx.moveTo(p0.x, p0.y) - ctx.lineTo(p1.x, p1.y) - ctx.lineTo(p2.x, p2.y) - ctx.lineTo(p0.x, p0.y) - ctx.fill() - ctx.restore() -} -function line(y){ - ctx.beginPath() - ctx.moveTo(0, y) - ctx.lineTo(w, y) - ctx.strokeStyle = "#888" - ctx.strokeWidth = 1 - ctx.stroke() -} -function dot(x, y, r){ - ctx.fillStyle = "#f00" - ctx.beginPath() - ctx.moveTo(x, y) - ctx.arc(x, y, r, 0, 2*Math.PI) - ctx.fill() -} -function waveform(pcm, sr, pos, zoom){ - sr = sr || 44100 - pos = pos || 0 - - var width = w - var height = Math.floor(h/4) - var half_height = Math.floor(height/2) - var x0 = 0 - var y0 = 20 - var ymid = y0 + half_height - var max_width_in_seconds = width / pixels_per_second - var max_width_in_samples = max_width_in_seconds * sr - var pcm_length = pcm.length - var len = Math.min(pcm_length, max_width_in_samples) - var pcm_step = sr / pixels_per_second - var i - ctx.save() - - clear(1, x0, y0, width, height) - - line(ymid) - ctx.beginPath() - for (i = 0; i < width; i += 0.5) { - var si = Math.floor(pcm_step * i + pos) - if (si > pcm_length) break - var val = pcm[si] // -1, 1 - // ctx.moveTo(x0 + i, ymid) - ctx.lineTo(x0 + i, ymid + val * half_height) - } - ctx.strokeStyle = "rgba(250,20,0,0.9)" - ctx.strokeWidth = 1 - ctx.stroke() - ctx.restore() -} - function spectrum(spec, x0, y0, ww, hh){ const data = spec.data const fft_size = spec.fft_size @@ -186,6 +55,7 @@ function spectrum(spec, x0, y0, ww, hh){ ctx.drawImage(scratch, x0, y0, width, height) ctx.restore() } + function raw_spectrum(spec, x0, y0, ww, hh, def_min_r, def_min_i){ const data = spec.data const fft_size = spec.fft_size @@ -262,9 +132,3 @@ function raw_spectrum(spec, x0, y0, ww, hh, def_min_r, def_min_i){ return { canvas: _scratch, imageData } } - -export default { - canvas, ctx, onFrame, resize, - triangle, clear, line, dot, - waveform, spectrum, raw_spectrum, -}
\ No newline at end of file diff --git a/app/client/audio/lib/index.js b/app/client/audio/lib/index.js new file mode 100644 index 0000000..ba96112 --- /dev/null +++ b/app/client/audio/lib/index.js @@ -0,0 +1,47 @@ +import Tone from 'tone' +import StartAudioContext from './startAudioContext' + +import { is_mobile } from '../util' + +export function requestAudioContext (fn) { + if (is_mobile) { + const container = document.createElement('div') + const button = document.createElement('div') + button.innerHTML = 'Tap to start - please unmute your phone' + Object.assign(container.style, { + display: 'block', + position: 'absolute', + width: '100%', + height: '100%', + zIndex: '10000', + top: '0px', + left: '0px', + backgroundColor: 'rgba(0, 0, 0, 0.8)', + }) + Object.assign(button.style, { + display: 'block', + position: 'absolute', + left: '50%', + top: '50%', + padding: '20px', + backgroundColor: '#7F33ED', + color: 'white', + fontFamily: 'monospace', + borderRadius: '3px', + transform: 'translate3D(-50%,-50%,0)', + textAlign: 'center', + lineHeight: '1.5', + width: '150px', + }) + container.appendChild(button) + document.body.appendChild(container) + StartAudioContext.setContext(Tone.context) + StartAudioContext.on(button) + StartAudioContext.onStarted(_ => { + container.remove() + fn() + }) + } else { + fn() + } +}
\ No newline at end of file diff --git a/app/client/audio/output.js b/app/client/audio/lib/output.js index 53901b3..53901b3 100644 --- a/app/client/audio/output.js +++ b/app/client/audio/lib/output.js diff --git a/app/client/audio/spectrum.js b/app/client/audio/lib/spectrum.js index f4a5444..f4a5444 100644 --- a/app/client/audio/spectrum.js +++ b/app/client/audio/lib/spectrum.js diff --git a/app/client/audio/startAudioContext.js b/app/client/audio/lib/startAudioContext.js index 0e257be..0e257be 100644 --- a/app/client/audio/startAudioContext.js +++ b/app/client/audio/lib/startAudioContext.js diff --git a/app/client/audio/pix2wav.js b/app/client/audio/pix2wav.js new file mode 100644 index 0000000..ccd36be --- /dev/null +++ b/app/client/audio/pix2wav.js @@ -0,0 +1,35 @@ +function render(pcm, count, zip){ + const fft = spectrum.toSpectrum(pcm, sr) + // console.log('render', fft) + // const pcm_rev = pcm.slice().reverse() + // const spec_rev = spectrum.toSpectrum(pcm_rev, spec.sr) + draw.clear() + const { canvas, imageData } = draw.raw_spectrum(fft, 0, 256, 0, 256, _r, _i) + const dataURL = canvas.toDataURL("image/png") + if (zip) { + const fn = sprintf('frame_%05d.png', count) + zip.file(fn, dataURL.split(',')[1], {base64: true}) + } + return { fft, canvas, imageData } +} +function play(i) { + // console.log('play', i) + last_i = i + let player = players[clamp(i, 0, players.length)] + // 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) + const new_fft = spectrum.fromImageData(player.imageData, 44100, _r, _i) + // gallery.innerHTML = '' + + // console.log(player.fft.data, new_fft.data) + const buf = spectrum.fromSpectrum(new_fft) + const _p = new Tone.Player(buf) + _p.connect(output) + _p.start(Tone.now()) + redraw(new_fft) +} +function redraw(new_fft){ + const { canvas, imageData } = draw.raw_spectrum(new_fft, 0, 256, 0, 256, _r, _i) +} + diff --git a/app/client/audio/ui.js b/app/client/audio/ui.js new file mode 100644 index 0000000..76ffb09 --- /dev/null +++ b/app/client/audio/ui.js @@ -0,0 +1,12 @@ +/* + +mouse.register({ + move: (x, y) => { + } +}) +keys.listen((z) => { + // console.log(z) + play(mod(z, players.length)) +}) + +*/ diff --git a/app/client/audio/wav2pix.js b/app/client/audio/wav2pix.js index 3e86c40..089816d 100644 --- a/app/client/audio/wav2pix.js +++ b/app/client/audio/wav2pix.js @@ -1,153 +1,78 @@ import Tone from 'tone' import JSZip from 'jszip' -import { sprintf } from 'sprintf-js' import FileSaver from 'file-saver' -import draw from './draw' -import keys from './lib/keys' -import mouse from './lib/mouse' +import draw from './lib/draw' import output from './lib/output' import spectrum from './lib/spectrum' import { - requestAudioContext, lerp, clamp, mod, -} from './lib/util' +} from '../util' + +import { requestAudioContext } from './lib' -let selfDrag = false let buffer -let players = [] -let gallery let sr = 44100 let last_i = 0 let _r = 8, _i = 8 -function init(){ - requestAudioContext(ready) - document.body.addEventListener('dragover', dragover) - document.body.addEventListener('dragstart', dragstart) - document.body.addEventListener('drop', drop) - document.querySelector("#upload").addEventListener('change', handleFileSelect) - // draw.onFrame(() => {}) - draw.resize(256, 256) - gallery = document.querySelector('#gallery') - mouse.register({ - move: (x, y) => { - } - }) - keys.listen((z) => { - // console.log(z) - play(mod(z, players.length)) - }) -} -function ready(){ -} -function dragover (e) { - e.preventDefault() -} -function dragstart (e) { - selfDrag = true -} -function drop (e) { - e.stopPropagation() - e.preventDefault() +let files, file_index = 0; - if (e.dataTransfer && ! selfDrag) { - if (e.dataTransfer.files.length) { - handleFileSelect(e) - } - } - else { - handleFileSelect(e) - } - selfDrag = false +const FRAME_LENGTH = 126 * 255 +const FRAME_OFFSET = FRAME_LENGTH / 4 + +function init() { + requestAudioContext(ready) + draw.resize(256, 256) } -let files, file_index = 0; -function handleFileSelect(e){ +function handleFileSelect(e) { files = e.dataTransfer ? e.dataTransfer.files : e.target.files loadNext() } -function loadNext(){ +function loadNext() { var file = files[file_index++] if (! file) return load(file) } -function load(file){ - players = [] - buffer = new Tone.Buffer(URL.createObjectURL(file), loadBuffer, (err) => console.error('err', err)) +function load(file) { + buffer = new Tone.Buffer( + URL.createObjectURL(file), + loadBuffer, + (err) => console.error('err', err) + ) } -function loadBuffer(){ +function loadBuffer() { + // dispatch console.log('loaded buffer', buffer) const pcm = buffer._buffer.getChannelData(0) - sr = buffer._buffer.sampleRate + const sr = buffer._buffer.sampleRate if (! pcm) return - const FRAME_LENGTH = 126 * 255 - const FRAME_OFFSET = FRAME_LENGTH / 4 + const zip = new JSZip() + const zip_folder = zip.folder("wav2pix_" + name); - var zip = new JSZip() - - var zip_folder = zip.folder("images"); - - for (var offset = 0, count = 0, _len = pcm.length - FRAME_LENGTH; offset < _len; offset += FRAME_OFFSET, count += 1) { - if ((count % 100) === 0) console.log(count) - // console.log('generating', count, offset) - // let player = render(pcm.slice(offset, offset+FRAME_LENGTH), count, zip_folder) + const offset = 0 + for (offset = 0, count = 0, _len = pcm.length - FRAME_LENGTH; + offset < _len; + offset += FRAME_OFFSET, count += 1 + ) { + if ((count % 100) === 0) { + // dispatch event instead.. + console.log(count) + } render(pcm.slice(offset, offset+FRAME_LENGTH), count, zip_folder) - // register(player, count) - // if (count > 20) break } + // dispatch event console.log('done exporting') - zip.generateAsync({type:"blob"}).then(function(content) { + zip.generateAsync({ type: "blob" }).then(content => { + // dispatch console.log('saving zip') - FileSaver.saveAs(content, "img2pix.zip") + // FileSaver.saveAs(content, "wav2pix_" + name + ".zip") setTimeout(loadNext, 1000) }) // play(0) } -function render(pcm, count, zip){ - const fft = spectrum.toSpectrum(pcm, sr) - // console.log('render', fft) - // const pcm_rev = pcm.slice().reverse() - // const spec_rev = spectrum.toSpectrum(pcm_rev, spec.sr) - draw.clear() - const { canvas, imageData } = draw.raw_spectrum(fft, 0, 256, 0, 256, _r, _i) - const dataURL = canvas.toDataURL("image/png") - if (zip) { - const fn = sprintf('frame_%05d.png', count) - zip.file(fn, dataURL.split(',')[1], {base64: true}) - } - return { fft, canvas, imageData } -} -function play(i) { - // console.log('play', i) - last_i = i - let player = players[clamp(i, 0, players.length)] - // 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) - const new_fft = spectrum.fromImageData(player.imageData, 44100, _r, _i) - // gallery.innerHTML = '' - // console.log(player.fft.data, new_fft.data) - const buf = spectrum.fromSpectrum(new_fft) - const _p = new Tone.Player(buf) - _p.connect(output) - _p.start(Tone.now()) - redraw(new_fft) -} -function redraw(new_fft){ - const { canvas, imageData } = draw.raw_spectrum(new_fft, 0, 256, 0, 256, _r, _i) -} -function register(player, i){ - // console.log('register', player) - players.push(player) - player.canvas.addEventListener('click', () => { - play(i) - }) - if (i < 20) { - gallery.appendChild(player.canvas) - } -} init() diff --git a/app/client/common/fileList.component.js b/app/client/common/fileList.component.js index b70ce55..70ee5b6 100644 --- a/app/client/common/fileList.component.js +++ b/app/client/common/fileList.component.js @@ -3,7 +3,7 @@ import { bindActionCreators } from 'redux' import { connect } from 'react-redux' import { Link } from 'react-router-dom'; import moment from 'moment' -import * as util from '../util' +import util from '../util' const defaultFields = new Set(['name', 'date', 'size']) diff --git a/app/client/dashboard/dashboardHeader.component.js b/app/client/dashboard/dashboardHeader.component.js index 62586b8..d27a324 100644 --- a/app/client/dashboard/dashboardHeader.component.js +++ b/app/client/dashboard/dashboardHeader.component.js @@ -2,7 +2,7 @@ import { h, Component } from 'preact' import { connect } from 'react-redux' import { bindActionCreators } from 'redux' -import * as util from '../util' +import util from '../util' class DashboardHeader extends Component { constructor(props){ diff --git a/app/client/dashboard/tasklist.component.js b/app/client/dashboard/tasklist.component.js index b43481f..56bb50b 100644 --- a/app/client/dashboard/tasklist.component.js +++ b/app/client/dashboard/tasklist.component.js @@ -1,7 +1,7 @@ import { h, Component } from 'preact' import { bindActionCreators } from 'redux' import { connect } from 'react-redux' -import * as util from '../util' +import util from '../util' import actions from '../actions' diff --git a/app/client/dataset/dataset.component.js b/app/client/dataset/dataset.component.js index 14ad852..af734ad 100644 --- a/app/client/dataset/dataset.component.js +++ b/app/client/dataset/dataset.component.js @@ -1,7 +1,7 @@ import { h, Component } from 'preact' import { bindActionCreators } from 'redux' import { connect } from 'react-redux' -import * as util from '../util' +import util from '../util' import actions from '../actions' diff --git a/app/client/index.jsx b/app/client/index.jsx index 51e92df..8a13687 100644 --- a/app/client/index.jsx +++ b/app/client/index.jsx @@ -5,7 +5,7 @@ import { BrowserRouter, Route } from 'react-router-dom' import { store, history } from './store' import * as socket from './socket' -import * as util from './util' +import util from './util' import Header from './common/header.component' import AudioPlayer from './common/audioPlayer/audioPlayer.component' diff --git a/app/client/modules/pix2pix/index.js b/app/client/modules/pix2pix/index.js index ffe5f6b..9e3d466 100644 --- a/app/client/modules/pix2pix/index.js +++ b/app/client/modules/pix2pix/index.js @@ -1,11 +1,14 @@ import { h, Component } from 'preact' import { Route, Link } from 'react-router-dom' +import util from '../../util' + import Pix2PixNew from './views/pix2pix.new' import Pix2PixShow from './views/pix2pix.show' import Pix2PixLive from './views/pix2pix.live' function router () { + document.body.style.backgroundImage = 'linear-gradient(' + (util.randint(40)+40) + 'deg, #fde, #ffe)' return ( <section> <Route exact path='/pix2pix/new/' component={Pix2PixNew} /> diff --git a/app/client/modules/pix2pix/pix2pix.actions.js b/app/client/modules/pix2pix/pix2pix.actions.js index 82311ad..8633c0a 100644 --- a/app/client/modules/pix2pix/pix2pix.actions.js +++ b/app/client/modules/pix2pix/pix2pix.actions.js @@ -7,13 +7,13 @@ import * as datasetLoader from '../../dataset/dataset.loader' import actions from '../../actions' -import { allProgress } from '../../util' +import util from '../../util' import pix2pixModule from './pix2pix.module' export const load_directories = (id) => (dispatch) => { const module = pix2pixModule.name - allProgress([ + util.allProgress([ datasetLoader.load(module), // actions.socket.list_directory({ module, dir: 'datasets' }), // actions.socket.list_directory({ module, dir: 'results' }), diff --git a/app/client/modules/pix2pix/views/pix2pix.new.js b/app/client/modules/pix2pix/views/pix2pix.new.js index 173777c..203a606 100644 --- a/app/client/modules/pix2pix/views/pix2pix.new.js +++ b/app/client/modules/pix2pix/views/pix2pix.new.js @@ -1,7 +1,4 @@ import { h, Component } from 'preact' -import { bindActionCreators } from 'redux' -import { connect } from 'react-redux' -import * as util from '../../../util' import NewDatasetForm from '../../../dataset/dataset.new' diff --git a/app/client/modules/pix2pix/views/pix2pix.show.js b/app/client/modules/pix2pix/views/pix2pix.show.js index ef4b906..2139c6c 100644 --- a/app/client/modules/pix2pix/views/pix2pix.show.js +++ b/app/client/modules/pix2pix/views/pix2pix.show.js @@ -1,7 +1,7 @@ import { h, Component } from 'preact' import { bindActionCreators } from 'redux' import { connect } from 'react-redux' -import * as util from '../../../util' +import util from '../../../util' import * as pix2pixActions from '../pix2pix.actions' import * as pix2pixTasks from '../pix2pix.tasks' diff --git a/app/client/modules/pix2wav/index.js b/app/client/modules/pix2wav/index.js index 602d54e..9071d04 100644 --- a/app/client/modules/pix2wav/index.js +++ b/app/client/modules/pix2wav/index.js @@ -1,10 +1,18 @@ import { h, Component } from 'preact' import { Route, Link } from 'react-router-dom' +import util from '../../util' + +import Pix2WavNew from './views/pix2wav.new' +import Pix2WavShow from './views/pix2wav.show' +// import Pix2WavLive from './views/pix2wav.live' function router () { - // <Route exact path='/pix2pix/live/' component={Pix2PixLive} /> + document.body.style.backgroundImage = 'linear-gradient(' + (util.randint(40)+40) + 'deg, #fde, #ffe)' return ( <section> + <Route exact path='/pix2wav/new/' component={Pix2WavNew} /> + <Route exact path='/pix2wav/datasets/' component={Pix2WavShow} /> + <Route exact path='/pix2wav/datasets/:id/' component={Pix2WavShow} /> </section> ) } @@ -13,12 +21,11 @@ function links(){ return ( <span> <span>datasets</span> - <span><Link to="/pix2wav/live/">live</Link></span> </span> ) } export default { - name: 'pix2pix', + name: 'pix2wav', router, links, } diff --git a/app/client/modules/pix2wav/pix2wav.actions.js b/app/client/modules/pix2wav/pix2wav.actions.js new file mode 100644 index 0000000..08f1a97 --- /dev/null +++ b/app/client/modules/pix2wav/pix2wav.actions.js @@ -0,0 +1,57 @@ +import uuidv1 from 'uuid/v1' + +import socket from '../../socket' +import types from '../../types' + +import * as datasetLoader from '../../dataset/dataset.loader' + +import actions from '../../actions' + +import util from '../../util' + +import pix2wavModule from './pix2wav.module' + +export const load_directories = (id) => (dispatch) => { + const module = pix2wavModule.name + util.allProgress([ + datasetLoader.load(module), + // actions.socket.list_directory({ module, dir: 'datasets' }), + // actions.socket.list_directory({ module, dir: 'results' }), + // actions.socket.list_directory({ module, dir: 'output' }), + // actions.socket.disk_usage({ module, dir: 'datasets' }), + ], (percent, i, n) => { + dispatch({ type: types.app.load_progress, progress: { i, n }}) + }).then(res => { + const [datasetApiReport] = res //, datasets, results, output, datasetUsage, lossReport] = res + const { + folderLookup, + fileLookup, + datasetLookup, + folders, + files, + unsortedFolder, + } = datasetApiReport + dispatch({ + type: types.dataset.load, + data: { + module, + folderLookup, + fileLookup, + datasetLookup, + folders, files, + }, + }) + if (id) { + console.log('folder id', id) + dispatch({ + type: types.dataset.set_folder, + data: { + folder_id: id, + module + }, + }) + } + }).catch(e => { + console.error(e) + }) +} diff --git a/app/client/modules/pix2wav/pix2wav.tasks.js b/app/client/modules/pix2wav/pix2wav.tasks.js new file mode 100644 index 0000000..646e28c --- /dev/null +++ b/app/client/modules/pix2wav/pix2wav.tasks.js @@ -0,0 +1,7 @@ +import uuidv1 from 'uuid/v1' + +import socket from '../../socket' +import types from '../../types' + +import actions from '../../actions' + diff --git a/app/client/modules/pix2wav/views/pix2wav.new.js b/app/client/modules/pix2wav/views/pix2wav.new.js new file mode 100644 index 0000000..aff00aa --- /dev/null +++ b/app/client/modules/pix2wav/views/pix2wav.new.js @@ -0,0 +1,13 @@ +import { h, Component } from 'preact' + +import NewDatasetForm from '../../../dataset/dataset.new' + +import pix2wavModule from '../pix2wav.module' + +export default function Pix2WavNew ({ history }) { + return ( + <div class='app pix2wav'> + <NewDatasetForm module={pix2wavModule} history={history} /> + </div> + ) +} diff --git a/app/client/modules/pix2wav/views/pix2wav.show.js b/app/client/modules/pix2wav/views/pix2wav.show.js new file mode 100644 index 0000000..46a2436 --- /dev/null +++ b/app/client/modules/pix2wav/views/pix2wav.show.js @@ -0,0 +1,116 @@ +import { h, Component } from 'preact' +import { bindActionCreators } from 'redux' +import { connect } from 'react-redux' +import util from '../../../util' + +import * as pix2wavActions from '../pix2wav.actions' +import * as pix2wavTasks from '../pix2wav.tasks' + +import Loading from '../../../common/loading.component' +import DatasetForm from '../../../dataset/dataset.form' +import NewDatasetForm from '../../../dataset/dataset.new' +import UploadStatus from '../../../dataset/upload.status' +import { FileList, FileRow } from '../../../common/fileList.component' + +import DatasetComponent from '../../../dataset/dataset.component' + +import pix2wavModule from '../pix2wav.module' + +class Pix2wavShow extends Component { + constructor(props){ + super(props) + this.datasetActions = this.datasetActions.bind(this) + } + componentWillMount(){ + const id = this.props.match.params.id || localStorage.getItem('pix2wav.last_id') + console.log('load dataset:', id) + const { match, pix2wav, actions } = this.props + if (id === 'new') return + if (id) { + if (parseInt(id)) localStorage.setItem('pix2wav.last_id', id) + if (! pix2wav.folder || pix2wav.folder.id !== id) { + actions.load_directories(id) + } + } + } + render(){ + const { pix2wav, match, history } = this.props + const { folderLookup } = (pix2wav.data || {}) + const folder = (folderLookup || {})[pix2wav.folder_id] || {} + + return ( + <div className='app pix2wav'> + <div class='heading'> + <div class='spaced'> + <h1>{folder ? folder.name : <Loading />}</h1> + <UploadStatus /> + </div> + </div> + {folder && folder.name && folder.name !== 'unsorted' && + <DatasetForm + title='Add Files' + module={pix2wavModule} + folder={folder} + canUpload canAddURL + /> + } + <DatasetComponent + loading={pix2wav.loading} + progress={pix2wav.progress} + id={pix2wav.folder_id} + module={pix2wavModule} + data={pix2wav.data} + folder={folder} + history={history} + onPickFile={(file, e) => { + e.preventDefault() + e.stopPropagation() + console.log('picked a file', file) + }} + datasetActions={this.datasetActions} + /> + </div> + ) + } + datasetActions(dataset, isFetching=false, isProcessing=false){ + const { pix2wav, remote } = this.props + const input = pix2wav.data.fileLookup[dataset.input[0]] + if (! input) return null + if (input.name && input.name.match(/(gif|jpe?g|png)$/i)) return null + return ( + <div> + <div class={'actions'}> + <span class='link' onClick={() => remote.train_task(dataset, pix2wav.folder_id, 1)}>train</span> + <span class='link' onClick={() => remote.train_task(dataset, pix2wav.folder_id, 2)}>2x</span> + <span class='link' onClick={() => remote.train_task(dataset, pix2wav.folder_id, 4)}>4x</span> + <span class='link' onClick={() => remote.train_task(dataset, pix2wav.folder_id, 6)}>6x</span> + <span class='link' onClick={() => remote.train_task(dataset, pix2wav.folder_id, 18)}>18x</span> + </div> + {dataset.isBuilt + ? <div class='subtext'> + {'fetched '} + <span class='link' onClick={() => remote.clear_cache_task(dataset)}>rm</span> + </div> + : isFetching + ? <div class='subtext'> + {'fetching'} + </div> + : <div class='subtext'> + <span class='link' onClick={() => remote.fetch_task(input.url, input.id, dataset.name)}>fetch</span> + </div> + } + </div> + ) + } +} + +const mapStateToProps = state => ({ + pix2wav: state.module.pix2wav, +}) + +const mapDispatchToProps = (dispatch, ownProps) => ({ + actions: bindActionCreators(pix2wavActions, dispatch), + remote: bindActionCreators(pix2wavTasks, dispatch), +}) + +export default connect(mapStateToProps, mapDispatchToProps)(Pix2wavShow) diff --git a/app/client/modules/samplernn/index.js b/app/client/modules/samplernn/index.js index 7d5e36e..485a9a4 100644 --- a/app/client/modules/samplernn/index.js +++ b/app/client/modules/samplernn/index.js @@ -1,5 +1,6 @@ import { h, Component } from 'preact' import { Route, Link } from 'react-router-dom' +import util from '../../util' import SampleRNNNew from './views/samplernn.new' import SampleRNNShow from './views/samplernn.show' @@ -8,6 +9,7 @@ import SampleRNNResults from './views/samplernn.results' import SampleRNNGraph from './views/samplernn.graph' function router () { + document.body.style.backgroundImage = 'linear-gradient(' + (util.randint(40)+40) + 'deg, #eef, #fef)' return ( <section> <Route exact path='/samplernn/new/' component={SampleRNNNew} /> diff --git a/app/client/modules/samplernn/samplernn.actions.js b/app/client/modules/samplernn/samplernn.actions.js index d0fda31..a957e25 100644 --- a/app/client/modules/samplernn/samplernn.actions.js +++ b/app/client/modules/samplernn/samplernn.actions.js @@ -7,13 +7,13 @@ import * as datasetLoader from '../../dataset/dataset.loader' import actions from '../../actions' -import { allProgress } from '../../util' +import util from '../../util' import samplernnModule from './samplernn.module' export const load_directories = (id) => (dispatch) => { const module = samplernnModule.name - allProgress([ + util.allProgress([ datasetLoader.load(module), actions.socket.list_directory({ module, dir: 'datasets' }), actions.socket.list_directory({ module, dir: 'results' }), diff --git a/app/client/modules/samplernn/views/samplernn.graph.js b/app/client/modules/samplernn/views/samplernn.graph.js index 821f1cb..9685802 100644 --- a/app/client/modules/samplernn/views/samplernn.graph.js +++ b/app/client/modules/samplernn/views/samplernn.graph.js @@ -2,7 +2,9 @@ import { h, Component } from 'preact' import { bindActionCreators } from 'redux' import { connect } from 'react-redux' -import { lerp, norm, randint, randrange } from '../../../util' +import util from '../../../util' + +const { lerp, norm, randint, randrange } = util import * as samplernnActions from '../samplernn.actions' @@ -38,7 +40,7 @@ class SampleRNNGraph extends Component { canvas.style.width = canvas.width + 'px' canvas.style.height = canvas.height + 'px' - const ctx = canvas.getContext('2d') + const ctx = canvas.getContext('2d-lodpi') const w = canvas.width = canvas.width * devicePixelRatio const h = canvas.height = canvas.height * devicePixelRatio ctx.clearRect(0,0,w,h) diff --git a/app/client/modules/samplernn/views/samplernn.import.js b/app/client/modules/samplernn/views/samplernn.import.js index cce4aea..61df4da 100644 --- a/app/client/modules/samplernn/views/samplernn.import.js +++ b/app/client/modules/samplernn/views/samplernn.import.js @@ -1,7 +1,7 @@ import { h, Component } from 'preact' import { bindActionCreators } from 'redux' import { connect } from 'react-redux' -import * as util from '../../../util' +import util from '../../../util' import * as samplernnActions from '../samplernn.actions' diff --git a/app/client/modules/samplernn/views/samplernn.new.js b/app/client/modules/samplernn/views/samplernn.new.js index 5f657c0..5640afc 100644 --- a/app/client/modules/samplernn/views/samplernn.new.js +++ b/app/client/modules/samplernn/views/samplernn.new.js @@ -1,7 +1,7 @@ import { h, Component } from 'preact' import { bindActionCreators } from 'redux' import { connect } from 'react-redux' -import * as util from '../../../util' +import util from '../../../util' import NewDatasetForm from '../../../dataset/dataset.new' diff --git a/app/client/modules/samplernn/views/samplernn.results.js b/app/client/modules/samplernn/views/samplernn.results.js index 12367a3..3d448fc 100644 --- a/app/client/modules/samplernn/views/samplernn.results.js +++ b/app/client/modules/samplernn/views/samplernn.results.js @@ -2,8 +2,8 @@ import { h, Component } from 'preact' import { bindActionCreators } from 'redux' import { Link } from 'react-router-dom'; import { connect } from 'react-redux' +import util from '../../../util' -import * as util from '../../../util' import * as samplernnActions from '../samplernn.actions' import * as audioPlayerActions from '../../../common/audioPlayer/audioPlayer.actions' diff --git a/app/client/modules/samplernn/views/samplernn.show.js b/app/client/modules/samplernn/views/samplernn.show.js index f44deda..b7e0740 100644 --- a/app/client/modules/samplernn/views/samplernn.show.js +++ b/app/client/modules/samplernn/views/samplernn.show.js @@ -1,7 +1,7 @@ import { h, Component } from 'preact' import { bindActionCreators } from 'redux' import { connect } from 'react-redux' -import * as util from '../../../util' +import util from '../../../util' import * as samplernnActions from '../samplernn.actions' import * as samplernnTasks from '../samplernn.tasks' diff --git a/app/client/queue/queue.reducer.js b/app/client/queue/queue.reducer.js index b9ed194..033acba 100644 --- a/app/client/queue/queue.reducer.js +++ b/app/client/queue/queue.reducer.js @@ -1,5 +1,5 @@ import types from '../types' -import * as util from '../util' +import util from '../util' import moment from 'moment' const queueInitialState = { diff --git a/app/client/util/hidpi-canvas.js b/app/client/util/hidpi-canvas.js new file mode 100644 index 0000000..f0a7a0d --- /dev/null +++ b/app/client/util/hidpi-canvas.js @@ -0,0 +1,170 @@ +/** + * HiDPI Canvas Polyfill (1.0.10) + * + * Author: Jonathan D. Johnson (http://jondavidjohn.com) + * Homepage: https://github.com/jondavidjohn/hidpi-canvas-polyfill + * Issue Tracker: https://github.com/jondavidjohn/hidpi-canvas-polyfill/issues + * License: Apache-2.0 +*/ +(function(prototype) { + + var pixelRatio = (function() { + var canvas = window.document.createElement('canvas'), + context = canvas.getContext('2d'), + backingStore = context.backingStorePixelRatio || + context.webkitBackingStorePixelRatio || + context.mozBackingStorePixelRatio || + context.msBackingStorePixelRatio || + context.oBackingStorePixelRatio || + context.backingStorePixelRatio || 1; + + return (window.devicePixelRatio || 1) / backingStore; + })(), + + forEach = function(obj, func) { + for (var p in obj) { + if (obj.hasOwnProperty(p)) { + func(obj[p], p); + } + } + }, + + ratioArgs = { + 'fillRect': 'all', + 'clearRect': 'all', + 'strokeRect': 'all', + 'moveTo': 'all', + 'lineTo': 'all', + 'arc': [0,1,2], + 'arcTo': 'all', + 'bezierCurveTo': 'all', + 'isPointinPath': 'all', + 'isPointinStroke': 'all', + 'quadraticCurveTo': 'all', + 'rect': 'all', + 'translate': 'all', + 'createRadialGradient': 'all', + 'createLinearGradient': 'all' + }; + + if (pixelRatio === 1) return; + + forEach(ratioArgs, function(value, key) { + prototype[key] = (function(_super) { + return function() { + var i, len, + args = Array.prototype.slice.call(arguments); + + if (value === 'all') { + args = args.map(function(a) { + return a * pixelRatio; + }); + } + else if (Array.isArray(value)) { + for (i = 0, len = value.length; i < len; i++) { + args[value[i]] *= pixelRatio; + } + } + + return _super.apply(this, args); + }; + })(prototype[key]); + }); + + // Stroke lineWidth adjustment + prototype.stroke = (function(_super) { + return function() { + this.lineWidth *= pixelRatio; + _super.apply(this, arguments); + this.lineWidth /= pixelRatio; + }; + })(prototype.stroke); + + // Text + // + prototype.fillText = (function(_super) { + return function() { + var args = Array.prototype.slice.call(arguments); + + args[1] *= pixelRatio; // x + args[2] *= pixelRatio; // y + + this.font = this.font.replace( + /(\d+)(px|em|rem|pt)/g, + function(w, m, u) { + return (m * pixelRatio) + u; + } + ); + + _super.apply(this, args); + + this.font = this.font.replace( + /(\d+)(px|em|rem|pt)/g, + function(w, m, u) { + return (m / pixelRatio) + u; + } + ); + }; + })(prototype.fillText); + + prototype.strokeText = (function(_super) { + return function() { + var args = Array.prototype.slice.call(arguments); + + args[1] *= pixelRatio; // x + args[2] *= pixelRatio; // y + + this.font = this.font.replace( + /(\d+)(px|em|rem|pt)/g, + function(w, m, u) { + return (m * pixelRatio) + u; + } + ); + + _super.apply(this, args); + + this.font = this.font.replace( + /(\d+)(px|em|rem|pt)/g, + function(w, m, u) { + return (m / pixelRatio) + u; + } + ); + }; + })(prototype.strokeText); +})(window.CanvasRenderingContext2D.prototype); +;(function(prototype) { + prototype.getContext = (function(_super) { + return function(type) { + var backingStore, ratio, context; + + + if (type == '2d-lodpi') { + context = _super.call(this, '2d'); + } + else if (type === '2d') { + context = _super.call(this, '2d'); + + backingStore = context.backingStorePixelRatio || + context.webkitBackingStorePixelRatio || + context.mozBackingStorePixelRatio || + context.msBackingStorePixelRatio || + context.oBackingStorePixelRatio || + context.backingStorePixelRatio || 1; + + ratio = (window.devicePixelRatio || 1) / backingStore; + + if (ratio > 1) { + this.style.height = this.height + 'px'; + this.style.width = this.width + 'px'; + this.width *= ratio; + this.height *= ratio; + } + } + else { + context = _super.call(this, type); + } + + return context; + }; + })(prototype.getContext); +})(window.HTMLCanvasElement.prototype); diff --git a/app/client/util/index.js b/app/client/util/index.js index a811dcf..4ce1245 100644 --- a/app/client/util/index.js +++ b/app/client/util/index.js @@ -2,17 +2,13 @@ import * as sort from './sort' import * as format from './format' import * as maths from './math' -export { - sort, - ...maths, - ...format, -} +import './hidpi-canvas' -export const is_iphone = !!((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))) -export const is_ipad = !!(navigator.userAgent.match(/iPad/i)) -export const is_android = !!(navigator.userAgent.match(/Android/i)) -export const is_mobile = is_iphone || is_ipad || is_android -export const is_desktop = ! is_mobile; +const is_iphone = !!((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))) +const is_ipad = !!(navigator.userAgent.match(/iPad/i)) +const is_android = !!(navigator.userAgent.match(/Android/i)) +const is_mobile = is_iphone || is_ipad || is_android +const is_desktop = ! is_mobile; const htmlClassList = document.body.parentNode.classList htmlClassList.add(is_desktop ? 'desktop' : 'mobile') @@ -20,9 +16,7 @@ htmlClassList.remove('loading') // window.debug = false -document.body.style.backgroundImage = 'linear-gradient(' + (randint(40)+40) + 'deg, #fde, #ffe)' - -export const allProgress = (promises, progress_cb) => { +const allProgress = (promises, progress_cb) => { let d = 0 progress_cb(0, 0, promises.length) promises.forEach((p) => { @@ -34,3 +28,13 @@ export const allProgress = (promises, progress_cb) => { }) return Promise.all(promises) } + +document.body.style.backgroundImage = 'linear-gradient(' + (maths.randint(40)+40) + 'deg, #fde, #ffe)' + +export default { + ...maths, + ...format, + sort, + allProgress, + is_iphone, is_ipad, is_android, is_mobile, is_desktop, +} diff --git a/app/client/util/math.js b/app/client/util/math.js index 253bacd..c301ffd 100644 --- a/app/client/util/math.js +++ b/app/client/util/math.js @@ -1,13 +1,12 @@ -export function mod(n,m){ return n-(m * Math.floor(n/m)) } -export function clamp(n,a,b) { return n<a?a:n<b?n:b } -export function norm(n,a,b) { return (n-a) / (b-a) } -export function lerp(n,a,b) { return (b-a)*n+a } -export function mix(n,a,b) { return a*(1-n)+b*n } -export function randint(n) { return Math.floor(Math.random()*n) } +export const mod = (n,m) => n-(m * Math.floor(n/m)) +export const clamp = (n,a,b) => n<a?a:n<b?n:b +export const norm = (n,a,b) => (n-a) / (b-a) +export const lerp = (n,a,b) => (b-a)*n+a +export const mix = (n,a,b) => a*(1-n)+b*n +export const randint = (n) => Math.floor(Math.random()*n) export function randrange(a,b){ return Math.random() * (b-a) + a } export function randsign(){ return Math.random() >= 0.5 ? -1 : 1 } export function choice (a){ return a[ Math.floor(Math.random() * a.length) ] } -export function lerp(n,a,b){ return (b-a)*n+a } export function angle(x0,y0,x1,y1){ return Math.atan2(y1-y0,x1-x0) } export function dist(x0,y0,x1,y1){ return Math.sqrt(Math.pow(x1-x0,2)+Math.pow(y1-y0,2)) } export function xor(a,b){ a=!!a; b=!!b; return (a||b) && !(a&&b) } |