From d3fcd1212f7214b12b04a83d03dfb129c5fbb0a4 Mon Sep 17 00:00:00 2001
From: Jules Laplace <julescarbon@gmail.com>
Date: Wed, 6 Jun 2018 00:59:39 +0200
Subject: pix2wav paths

---
 app/client/api/index.js                            |   2 +-
 app/client/audio/draw.js                           | 270 --------------------
 app/client/audio/index.js                          |   2 -
 app/client/audio/lib/_draw.js                      | 139 +++++++++++
 app/client/audio/lib/draw.js                       | 134 ++++++++++
 app/client/audio/lib/index.js                      |  47 ++++
 app/client/audio/lib/output.js                     |   8 +
 app/client/audio/lib/spectrum.js                   | 278 +++++++++++++++++++++
 app/client/audio/lib/startAudioContext.js          | 179 +++++++++++++
 app/client/audio/output.js                         |   8 -
 app/client/audio/pix2wav.js                        |  35 +++
 app/client/audio/spectrum.js                       | 278 ---------------------
 app/client/audio/startAudioContext.js              | 179 -------------
 app/client/audio/ui.js                             |  12 +
 app/client/audio/wav2pix.js                        | 149 +++--------
 app/client/common/fileList.component.js            |   2 +-
 app/client/dashboard/dashboardHeader.component.js  |   2 +-
 app/client/dashboard/tasklist.component.js         |   2 +-
 app/client/dataset/dataset.component.js            |   2 +-
 app/client/index.jsx                               |   2 +-
 app/client/modules/pix2pix/index.js                |   3 +
 app/client/modules/pix2pix/pix2pix.actions.js      |   4 +-
 app/client/modules/pix2pix/views/pix2pix.new.js    |   3 -
 app/client/modules/pix2pix/views/pix2pix.show.js   |   2 +-
 app/client/modules/pix2wav/index.js                |  13 +-
 app/client/modules/pix2wav/pix2wav.actions.js      |  57 +++++
 app/client/modules/pix2wav/pix2wav.tasks.js        |   7 +
 app/client/modules/pix2wav/views/pix2wav.new.js    |  13 +
 app/client/modules/pix2wav/views/pix2wav.show.js   | 116 +++++++++
 app/client/modules/samplernn/index.js              |   2 +
 app/client/modules/samplernn/samplernn.actions.js  |   4 +-
 .../modules/samplernn/views/samplernn.graph.js     |   6 +-
 .../modules/samplernn/views/samplernn.import.js    |   2 +-
 .../modules/samplernn/views/samplernn.new.js       |   2 +-
 .../modules/samplernn/views/samplernn.results.js   |   2 +-
 .../modules/samplernn/views/samplernn.show.js      |   2 +-
 app/client/queue/queue.reducer.js                  |   2 +-
 app/client/util/hidpi-canvas.js                    | 170 +++++++++++++
 app/client/util/index.js                           |  30 ++-
 app/client/util/math.js                            |  13 +-
 40 files changed, 1290 insertions(+), 893 deletions(-)
 delete mode 100644 app/client/audio/draw.js
 delete mode 100644 app/client/audio/index.js
 create mode 100644 app/client/audio/lib/_draw.js
 create mode 100644 app/client/audio/lib/draw.js
 create mode 100644 app/client/audio/lib/index.js
 create mode 100644 app/client/audio/lib/output.js
 create mode 100644 app/client/audio/lib/spectrum.js
 create mode 100644 app/client/audio/lib/startAudioContext.js
 delete mode 100644 app/client/audio/output.js
 create mode 100644 app/client/audio/pix2wav.js
 delete mode 100644 app/client/audio/spectrum.js
 delete mode 100644 app/client/audio/startAudioContext.js
 create mode 100644 app/client/audio/ui.js
 create mode 100644 app/client/modules/pix2wav/pix2wav.actions.js
 create mode 100644 app/client/modules/pix2wav/pix2wav.tasks.js
 create mode 100644 app/client/modules/pix2wav/views/pix2wav.new.js
 create mode 100644 app/client/modules/pix2wav/views/pix2wav.show.js
 create mode 100644 app/client/util/hidpi-canvas.js

(limited to 'app')

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/draw.js b/app/client/audio/draw.js
deleted file mode 100644
index 8caf8d8..0000000
--- a/app/client/audio/draw.js
+++ /dev/null
@@ -1,270 +0,0 @@
-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
-  const half_fft_size = spec.fft_size / 2
-  const spec_len = data.length
-
-  scratch.width = data.length
-  scratch.height = half_fft_size
-
-  var imageData = ctx.createImageData(scratch.width, scratch.height)
-  var pixels = imageData.data
-
-  let i, j, u, v, _r, _i, col, hsl
-
-  for (i = 0; i < spec_len; i++) {
-    col = data[i]
-
-    for (j = 0; j < half_fft_size; j++) {
-      u = ((half_fft_size - j) * spec_len + i) * 4
-      v = j * 2
-      _r = col[v]
-      _i = mod(col[v+1], Math.PI*2) / (Math.PI*2)
-      hsl = color.hsl2rgb((_i + 1) / 2, 1.0, 1 - Math.abs(_r / 10))
-      // red - real part
-      // pixels[u] = _r * 127 + 127
-      // // green - imag part
-      // pixels[u+1] = _i * 127 + 127
-      // // blue - magnitude
-      // pixels[u+2] = Math.sqrt(Math.pow(_r, 2) + Math.pow(_i, 2)) * 128 + 127
-      // pixels[u+3] = 255
-      pixels[u] = hsl[0]
-      pixels[u+1] = hsl[1]
-      pixels[u+2] = hsl[2]
-      pixels[u+3] = 255
-    }
-  }
-
-  scratchCtx.putImageData(imageData, 0, 0)
-
-  var pcm_length = spec.fft_overlap * spec_len
-
-  x0 = x0 * devicePixelRatio || 0
-  y0 = y0 * devicePixelRatio || Math.floor(h/4)
-  ww = ww * devicePixelRatio || w
-  hh = hh * devicePixelRatio || h/4
-
-  const width = Math.round(pcm_length / spec.sr * pixels_per_second)
-  const height = Math.floor(hh)
-
-  ctx.save()
-  clear(1, x0, y0, w, height)
-  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
-  const half_fft_size = spec.fft_size / 2
-  const spec_len = data.length
-
-  const _scratch = document.createElement('canvas')
-  const _scratchCtx = _scratch.getContext('2d-lodpi')
-  _scratch.width = data.length
-  _scratch.height = half_fft_size
-  // console.log("spectrum w/h:", _scratch.width, _scratch.height)
-
-  var imageData = _scratchCtx.createImageData(_scratch.width, _scratch.height)
-  var pixels = imageData.data
-
-  let i, j, u, v, _r, _i, col, hsl
-  // let min_r = Infinity, max_r = -Infinity
-  // let min_i = Infinity, max_i = -Infinity
-
-  // determined empirically..
-  // let min_r = -60.4894057005308
-  // let max_r = 107.23800966675353
-  // let min_i = -59.4894057005308
-  // let max_i = 108.23800966675353
-  let min_r = -def_min_r
-  let max_r = def_min_r
-  let min_i = -def_min_i
-  let max_i = def_min_i
-  let delta_r = max_r - min_r
-  let delta_i = max_i - min_i
-  let mean_r = 0
-  let mean_i = 0
-  let sum_mean_r = 0, sum_mean_i = 0
-  let real, imag
-
-  for (i = 0; i < spec_len; i++) {
-    col = data[i]
-    mean_r = 0
-    mean_i = 0
-
-    for (j = 0; j < half_fft_size; j++) {
-      u = (j * spec_len + i) * 4
-      v = j * 2
-      real = col[v]
-      imag = col[v+1]
-      mean_r += real
-      mean_i += imag
-      _r = clamp((real - min_r) / delta_r * 255, 0, 255)
-      _i = clamp((imag - min_i) / delta_i * 255, 0, 255)
-
-      // hsl = color.hsl2rgb((_i + 1) / 2, 1.0, 1 - Math.abs(_r / 10))
-      pixels[u+0] = _r
-      pixels[u+1] = _i
-      pixels[u+2] = 127 // hsl[2]
-      pixels[u+3] = 255
-
-      // min_r = Math.min(min_r, col[v])
-      // max_r = Math.max(max_r, col[v])
-      // min_i = Math.min(min_i, col[v]+1)
-      // max_i = Math.max(max_i, col[v]+1)
-    }
-    mean_r /= half_fft_size
-    mean_i /= half_fft_size
-    sum_mean_r += mean_r
-    sum_mean_i += mean_i
-  }
-
-  sum_mean_r /= spec_len
-  sum_mean_i /= spec_len
-  // console.log(sum_mean_r, sum_mean_i)
-  // console.log("r:", min_r, max_r)
-  // console.log("i:", min_i, max_i)
-  _scratchCtx.putImageData(imageData, 0, 0)
-
-  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/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/lib/draw.js b/app/client/audio/lib/draw.js
new file mode 100644
index 0000000..f5ba3ac
--- /dev/null
+++ b/app/client/audio/lib/draw.js
@@ -0,0 +1,134 @@
+const scratch = document.createElement('canvas')
+const scratchCtx = scratch.getContext('2d-lodpi')
+
+function spectrum(spec, x0, y0, ww, hh){
+  const data = spec.data
+  const fft_size = spec.fft_size
+  const half_fft_size = spec.fft_size / 2
+  const spec_len = data.length
+
+  scratch.width = data.length
+  scratch.height = half_fft_size
+
+  var imageData = ctx.createImageData(scratch.width, scratch.height)
+  var pixels = imageData.data
+
+  let i, j, u, v, _r, _i, col, hsl
+
+  for (i = 0; i < spec_len; i++) {
+    col = data[i]
+
+    for (j = 0; j < half_fft_size; j++) {
+      u = ((half_fft_size - j) * spec_len + i) * 4
+      v = j * 2
+      _r = col[v]
+      _i = mod(col[v+1], Math.PI*2) / (Math.PI*2)
+      hsl = color.hsl2rgb((_i + 1) / 2, 1.0, 1 - Math.abs(_r / 10))
+      // red - real part
+      // pixels[u] = _r * 127 + 127
+      // // green - imag part
+      // pixels[u+1] = _i * 127 + 127
+      // // blue - magnitude
+      // pixels[u+2] = Math.sqrt(Math.pow(_r, 2) + Math.pow(_i, 2)) * 128 + 127
+      // pixels[u+3] = 255
+      pixels[u] = hsl[0]
+      pixels[u+1] = hsl[1]
+      pixels[u+2] = hsl[2]
+      pixels[u+3] = 255
+    }
+  }
+
+  scratchCtx.putImageData(imageData, 0, 0)
+
+  var pcm_length = spec.fft_overlap * spec_len
+
+  x0 = x0 * devicePixelRatio || 0
+  y0 = y0 * devicePixelRatio || Math.floor(h/4)
+  ww = ww * devicePixelRatio || w
+  hh = hh * devicePixelRatio || h/4
+
+  const width = Math.round(pcm_length / spec.sr * pixels_per_second)
+  const height = Math.floor(hh)
+
+  ctx.save()
+  clear(1, x0, y0, w, height)
+  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
+  const half_fft_size = spec.fft_size / 2
+  const spec_len = data.length
+
+  const _scratch = document.createElement('canvas')
+  const _scratchCtx = _scratch.getContext('2d-lodpi')
+  _scratch.width = data.length
+  _scratch.height = half_fft_size
+  // console.log("spectrum w/h:", _scratch.width, _scratch.height)
+
+  var imageData = _scratchCtx.createImageData(_scratch.width, _scratch.height)
+  var pixels = imageData.data
+
+  let i, j, u, v, _r, _i, col, hsl
+  // let min_r = Infinity, max_r = -Infinity
+  // let min_i = Infinity, max_i = -Infinity
+
+  // determined empirically..
+  // let min_r = -60.4894057005308
+  // let max_r = 107.23800966675353
+  // let min_i = -59.4894057005308
+  // let max_i = 108.23800966675353
+  let min_r = -def_min_r
+  let max_r = def_min_r
+  let min_i = -def_min_i
+  let max_i = def_min_i
+  let delta_r = max_r - min_r
+  let delta_i = max_i - min_i
+  let mean_r = 0
+  let mean_i = 0
+  let sum_mean_r = 0, sum_mean_i = 0
+  let real, imag
+
+  for (i = 0; i < spec_len; i++) {
+    col = data[i]
+    mean_r = 0
+    mean_i = 0
+
+    for (j = 0; j < half_fft_size; j++) {
+      u = (j * spec_len + i) * 4
+      v = j * 2
+      real = col[v]
+      imag = col[v+1]
+      mean_r += real
+      mean_i += imag
+      _r = clamp((real - min_r) / delta_r * 255, 0, 255)
+      _i = clamp((imag - min_i) / delta_i * 255, 0, 255)
+
+      // hsl = color.hsl2rgb((_i + 1) / 2, 1.0, 1 - Math.abs(_r / 10))
+      pixels[u+0] = _r
+      pixels[u+1] = _i
+      pixels[u+2] = 127 // hsl[2]
+      pixels[u+3] = 255
+
+      // min_r = Math.min(min_r, col[v])
+      // max_r = Math.max(max_r, col[v])
+      // min_i = Math.min(min_i, col[v]+1)
+      // max_i = Math.max(max_i, col[v]+1)
+    }
+    mean_r /= half_fft_size
+    mean_i /= half_fft_size
+    sum_mean_r += mean_r
+    sum_mean_i += mean_i
+  }
+
+  sum_mean_r /= spec_len
+  sum_mean_i /= spec_len
+  // console.log(sum_mean_r, sum_mean_i)
+  // console.log("r:", min_r, max_r)
+  // console.log("i:", min_i, max_i)
+  _scratchCtx.putImageData(imageData, 0, 0)
+
+  return { canvas: _scratch, imageData }
+}
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/lib/output.js b/app/client/audio/lib/output.js
new file mode 100644
index 0000000..53901b3
--- /dev/null
+++ b/app/client/audio/lib/output.js
@@ -0,0 +1,8 @@
+import Tone from 'tone'
+
+// const compressor = new Tone.Compressor(-30, 3).toMaster()
+
+const compressor = new Tone.Compressor(-30, 3).toMaster()
+const gain = new Tone.Gain(1).connect(compressor)
+
+export default gain
diff --git a/app/client/audio/lib/spectrum.js b/app/client/audio/lib/spectrum.js
new file mode 100644
index 0000000..f4a5444
--- /dev/null
+++ b/app/client/audio/lib/spectrum.js
@@ -0,0 +1,278 @@
+import Tone from 'tone'
+
+import { shuffle, quantize, mod } from '../util'
+
+import { windows as signalWindows } from 'signal-windows'
+import FFTJS from 'fft.js'
+
+const fft_size = 512
+const fft_overlap = fft_size / 4
+
+const fft = new FFTJS(fft_size)
+
+function toSpectrum(pcm, sr){
+  sr = sr || 44100
+  const ham = signalWindows.construct('ham', fft_size)
+  const pcm_in = new Array(fft_size)
+  const pcm_length = pcm.length
+  const pcm_q_length = Math.ceil(pcm_length / fft_size) * fft_size
+  let i, j, fft_out, data = [];
+  for (i = -fft_size; i < pcm_q_length; i += fft_overlap) {
+    for (j = 0; j < fft_size; j++) {
+      pcm_in[j] = pcm[i+j] * ham[j] || 0
+    }
+    fft_out = fft.createComplexArray()
+    fft.realTransform(fft_out, pcm_in)
+    fft.completeSpectrum(fft_out)
+    data.push(fft_out)
+  }
+  return {
+    data,
+    sr,
+    fft_size,
+    fft_overlap,
+  }
+}
+
+function fromSpectrum(spec){
+  const data = spec.data
+  const sr = spec.sr
+  const fft_size = spec.fft_size
+  const fft_overlap = spec.fft_overlap
+  const spec_len = data.length
+
+  const ham = signalWindows.construct('ham', fft_size)
+  const out = fft.createComplexArray()
+  const pcm_length = fft_overlap * spec_len
+
+  const audioBuffer = Tone.context.createBuffer(1, pcm_length, sr)
+  const pcm = audioBuffer.getChannelData(0);
+
+  let i, j, u, col
+
+  for (i = 0; i < spec_len; i++) {
+    col = data[i]
+    // for (j = fft_size; j < fft_size << 1; j++) {
+    //   col[j] = 0
+    // }
+    // if (i == 0) console.log(col)
+    fft.inverseTransform(out, col)
+    u = i * (fft_overlap)
+    for (j = 0; j < fft_size; j++) {
+      pcm[u+j] += out[j*2] * ham[j] || 0
+    }
+  }
+
+  fadeInOut(pcm, fft_size)
+  // console.log(pcm)
+  return audioBuffer
+}
+
+function fromImageData(imageData, sr, _r, _i) {
+  const pixels = imageData.data
+  const w = imageData.width
+  const h = imageData.height
+  let data = new Array(w)
+  let x, y, u, v, v2
+  for (y = 0; y < h; y++) {
+    let col = data[y] = new Float32Array(h * 4)
+    for (x = 0; x < w; x++) {
+      u = (x * (w) + y) * 4
+      v = x * 2
+      col[v] = (pixels[u] / 255 - 0.5) * _r
+      col[v+1] = (pixels[u+1] / 255 - 0.5) * _i
+      v2 = (h-y + h) * 2
+      col[v2] = col[v]
+      col[v2+1] = 0 // col[v+1]
+    }
+    col[h*2] = col[h*2+1] = col[h*2-1] = col[h*2-2] = 0
+  }
+  const spec = {
+    data,
+    sr,
+    fft_size, fft_overlap
+  }
+  return spec
+}
+
+function binToHz(spec, i){
+  return (i / spec.fft_size) * spec.sr
+}
+
+function fadeInOut(pcm, fade_size){
+  const pcm_length = pcm.length
+  let fade = 0, i
+  for (i = 0; i < fade_size; i++) {
+    fade = i / (fade_size)
+    fade *= fade
+    pcm[i] *= fade
+    pcm[pcm_length - i] *= fade
+  }
+}
+function rotatePhase(spec, theta){
+  let { data, fft_size } = spec
+  let i, j, col, len = data.length
+  for (i = 0; i < len; i++) {
+    col = data[i]
+    for (j = 0; j < fft_size; j++) {
+      col[j*2+1] += theta
+    }
+  }
+  return spec
+}
+
+function linearBins(spec, n){
+  n = n || 1
+
+  let bins = [], i, q_i
+  for (q_i = 0; q_i < n; q_i++) {
+    bins[q_i] = []
+  }
+  const step = Math.floor(spec.fft_size / n)
+  const len_quantize_n = quantize(spec.fft_size, n)
+  for (i = 0; i < len_quantize_n; i++) {
+    q_i = Math.floor(i/step)
+    bins[q_i] = bins[q_i] || []
+    bins[q_i].push(i)
+  }
+  // leftover bins get put at end
+  for (; i < spec.fft_size; i++) {
+    bins[q_i].push(i)
+  }
+  return bins
+}
+function logarithmicBins(spec){
+  let bins = [], i, j, q_i
+  let binCount = Math.log2(spec.fft_size) - 1
+  for (i = 0, q_i = 0, j = 0; i < binCount; i++) {
+    j += 1 << i
+    bins[i] = []
+    for (; q_i < j; q_i++) {
+      bins[i].push(q_i)
+    }
+  }
+  return bins
+}
+function concatBins(bins){
+  return bins.reduce((acc, cv) => acc.concat(cv), [])
+}
+function reverseBins(bins){
+  return bins.map( bin => bin.reverse() )
+}
+function minBins(bins){
+  return bins.map( bin => {
+    const b = bin[0]
+    return bin.map(() => b)
+  })
+}
+function maxBins(bins){
+  return bins.map( bin => {
+    const b = bin[bin.length-1]
+    return bin.map(() => b)
+  })
+}
+function rotateSpectrum(spec, n){
+  const { fft_size } = spec
+  if (n && n < 1) {
+    n -= 0.5
+    n *= fft_size
+  }
+  n = Math.floor(n)
+  let order = new Array(fft_size), i
+  for (i = 0; i < fft_size; i++) {
+    order[i] = mod(i + n, fft_size/2)
+  }
+  return reorderBins(spec, order)
+}
+function cloneSpectrum(spec){
+  const {
+    data,
+    fft_size,
+    sr, fft_overlap
+  } = spec
+  const spec_len = data.length
+
+  let new_data = new Array(spec_len)
+  let i
+  for (i = 0; i < spec_len; i++) {
+    new_data[i] = data[i].concat()
+    new_data[i][2] = 0
+  }
+
+  return {
+    data: new_data,
+    fft_size,
+    sr, fft_overlap,
+  }
+}
+function reverseSpectrum(spec){
+  let new_spec = cloneSpectrum(spec)
+  new_spec.data = new_spec.data.reverse()
+  return new_spec
+}
+function shuffleSpectrum(spec){
+  const { fft_size } = spec
+  let order = new Array(fft_size), i
+  for (i = 0; i < fft_size; i++) {
+    order[i] = i
+  }
+  shuffle(order)
+  return reorderBins(spec, order)
+}
+function invertSpectrum(spec){
+  const { fft_size } = spec
+  let order = new Array(fft_size), i
+  for (i = 0; i < fft_size; i++) {
+    order[i] = fft_size - i - 1
+  }
+  return reorderBins(spec, order)
+}
+function reorderBins(spec, order){
+  let new_spec = cloneSpectrum(spec)
+  const {
+    data,
+    sr,
+    fft_size,
+    fft_overlap,
+  } = spec
+  const spec_len = data.length
+  const { data: new_data } = new_spec
+
+  let i, j, col, new_col
+  for (j = order.length; j < fft_size; j++) {
+    order[j] = j
+  }
+
+  for (i = 0; i < spec_len; i++) {
+    col = data[i]
+    new_col = new_data[i] = data[i].concat()
+    col[0] = 0
+    col[2] = 0
+    col[4] = 0
+    for (j = 0; j < fft_size/2; j++) {
+      new_col[j*2] = col[order[j]*2]
+      new_col[j*2+1] = col[order[j]*2+1]
+    }
+    for (; j < fft_size; j++) {
+      new_col[j*2] = 0
+      new_col[j*2+1] = 0
+    }
+  }
+
+  return {
+    data: new_data,
+    sr, fft_size, fft_overlap,
+  }
+}
+
+export default {
+  toSpectrum, fromSpectrum, fromImageData, binToHz,
+  fadeInOut,
+  cloneSpectrum,
+  reverseSpectrum, shuffleSpectrum, invertSpectrum, rotateSpectrum,
+  reorderBins,
+  linearBins, logarithmicBins,
+  concatBins,
+  reverseBins, minBins, maxBins,
+  rotatePhase,
+}
diff --git a/app/client/audio/lib/startAudioContext.js b/app/client/audio/lib/startAudioContext.js
new file mode 100644
index 0000000..0e257be
--- /dev/null
+++ b/app/client/audio/lib/startAudioContext.js
@@ -0,0 +1,179 @@
+/**
+ *  StartAudioContext.js
+ *  @author Yotam Mann
+ *  @license http://opensource.org/licenses/MIT MIT License
+ *  @copyright 2016 Yotam Mann
+ */
+(function (root, factory) {
+  if (typeof define === "function" && define.amd) {
+    define([], factory);
+   } else if (typeof module === 'object' && module.exports) {
+        module.exports = factory();
+  } else {
+    root.StartAudioContext = factory();
+  }
+}(this, function () {
+
+  /**
+   * The StartAudioContext object
+   */
+  var StartAudioContext = {
+    /**
+     * The audio context passed in by the user
+     * @type {AudioContext}
+     */
+    context : null,
+    /**
+     * The TapListeners bound to the elements
+     * @type {Array}
+     * @private
+     */
+    _tapListeners : [],
+    /**
+     * Callbacks to invoke when the audio context is started
+     * @type {Array}
+     * @private
+     */
+    _onStarted : [],
+  };
+
+
+  /**
+   * Set the context
+   * @param {AudioContext} ctx
+   * @returns {StartAudioContext}
+   */
+  StartAudioContext.setContext = function(ctx){
+    StartAudioContext.context = ctx;
+    return StartAudioContext;
+  };
+
+  /**
+   * Add a tap listener to the audio context
+   * @param  {Array|Element|String|jQuery} element
+   * @returns {StartAudioContext}
+   */
+  StartAudioContext.on = function(element){
+    if (Array.isArray(element) || (NodeList && element instanceof NodeList)){
+      for (var i = 0; i < element.length; i++){
+        StartAudioContext.on(element[i]);
+      }
+    } else if (typeof element === "string"){
+      StartAudioContext.on(document.querySelectorAll(element));
+    } else if (element.jquery && typeof element.toArray === "function"){
+      StartAudioContext.on(element.toArray());
+    } else if (Element && element instanceof Element){
+      //if it's an element, create a TapListener
+      var tap = new TapListener(element, onTap);
+      StartAudioContext._tapListeners.push(tap);
+    } 
+    return StartAudioContext;
+  };
+
+  /**
+   * Bind a callback to when the audio context is started. 
+   * @param {Function} cb
+   * @return {StartAudioContext}
+   */
+  StartAudioContext.onStarted = function(cb){
+    //if it's already started, invoke the callback
+    if (StartAudioContext.isStarted()){
+      cb();
+    } else {
+      StartAudioContext._onStarted.push(cb);
+    }
+    return StartAudioContext;
+  };
+
+  /**
+   * returns true if the context is started
+   * @return {Boolean}
+   */
+  StartAudioContext.isStarted = function(){
+    return (StartAudioContext.context !== null && StartAudioContext.context.state === "running");
+  };
+
+  /**
+   * @class  Listens for non-dragging tap ends on the given element
+   * @param {Element} element
+   * @internal
+   */
+  var TapListener = function(element){
+
+    this._dragged = false;
+
+    this._element = element;
+
+    this._bindedMove = this._moved.bind(this);
+    this._bindedEnd = this._ended.bind(this);
+
+    element.addEventListener("touchmove", this._bindedMove);
+    element.addEventListener("touchend", this._bindedEnd);
+    element.addEventListener("mouseup", this._bindedEnd);
+  };
+
+  /**
+   * drag move event
+   */
+  TapListener.prototype._moved = function(e){
+    this._dragged = true;
+  };
+
+  /**
+   * tap ended listener
+   */
+  TapListener.prototype._ended = function(e){
+    if (!this._dragged){
+      onTap();
+    }
+    this._dragged = false;
+  };
+
+  /**
+   * remove all the bound events
+   */
+  TapListener.prototype.dispose = function(){
+    this._element.removeEventListener("touchmove", this._bindedMove);
+    this._element.removeEventListener("touchend", this._bindedEnd);
+    this._element.removeEventListener("mouseup", this._bindedEnd);
+    this._bindedMove = null;
+    this._bindedEnd = null;
+    this._element = null;
+  };
+
+  /**
+   * Invoked the first time of the elements is tapped.
+   * Creates a silent oscillator when a non-dragging touchend 
+   * event has been triggered.
+   */
+  function onTap(){
+    //start the audio context with a silent oscillator
+    if (StartAudioContext.context && !StartAudioContext.isStarted()){
+      var osc = StartAudioContext.context.createOscillator();
+      var silent = StartAudioContext.context.createGain();
+      silent.gain.value = 0;
+      osc.connect(silent);
+      silent.connect(StartAudioContext.context.destination);
+      var now = StartAudioContext.context.currentTime;
+      osc.start(now);
+      osc.stop(now+0.5);
+    }
+
+    //dispose all the tap listeners
+    if (StartAudioContext._tapListeners){
+      for (var i = 0; i < StartAudioContext._tapListeners.length; i++){
+        StartAudioContext._tapListeners[i].dispose();
+      }
+      StartAudioContext._tapListeners = null;
+    }
+    //the onstarted callbacks
+    if (StartAudioContext._onStarted){
+      for (var j = 0; j < StartAudioContext._onStarted.length; j++){
+        StartAudioContext._onStarted[j]();
+      }
+      StartAudioContext._onStarted = null;
+    }
+  }
+
+  return StartAudioContext;
+}));
diff --git a/app/client/audio/output.js b/app/client/audio/output.js
deleted file mode 100644
index 53901b3..0000000
--- a/app/client/audio/output.js
+++ /dev/null
@@ -1,8 +0,0 @@
-import Tone from 'tone'
-
-// const compressor = new Tone.Compressor(-30, 3).toMaster()
-
-const compressor = new Tone.Compressor(-30, 3).toMaster()
-const gain = new Tone.Gain(1).connect(compressor)
-
-export default gain
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/spectrum.js b/app/client/audio/spectrum.js
deleted file mode 100644
index f4a5444..0000000
--- a/app/client/audio/spectrum.js
+++ /dev/null
@@ -1,278 +0,0 @@
-import Tone from 'tone'
-
-import { shuffle, quantize, mod } from '../util'
-
-import { windows as signalWindows } from 'signal-windows'
-import FFTJS from 'fft.js'
-
-const fft_size = 512
-const fft_overlap = fft_size / 4
-
-const fft = new FFTJS(fft_size)
-
-function toSpectrum(pcm, sr){
-  sr = sr || 44100
-  const ham = signalWindows.construct('ham', fft_size)
-  const pcm_in = new Array(fft_size)
-  const pcm_length = pcm.length
-  const pcm_q_length = Math.ceil(pcm_length / fft_size) * fft_size
-  let i, j, fft_out, data = [];
-  for (i = -fft_size; i < pcm_q_length; i += fft_overlap) {
-    for (j = 0; j < fft_size; j++) {
-      pcm_in[j] = pcm[i+j] * ham[j] || 0
-    }
-    fft_out = fft.createComplexArray()
-    fft.realTransform(fft_out, pcm_in)
-    fft.completeSpectrum(fft_out)
-    data.push(fft_out)
-  }
-  return {
-    data,
-    sr,
-    fft_size,
-    fft_overlap,
-  }
-}
-
-function fromSpectrum(spec){
-  const data = spec.data
-  const sr = spec.sr
-  const fft_size = spec.fft_size
-  const fft_overlap = spec.fft_overlap
-  const spec_len = data.length
-
-  const ham = signalWindows.construct('ham', fft_size)
-  const out = fft.createComplexArray()
-  const pcm_length = fft_overlap * spec_len
-
-  const audioBuffer = Tone.context.createBuffer(1, pcm_length, sr)
-  const pcm = audioBuffer.getChannelData(0);
-
-  let i, j, u, col
-
-  for (i = 0; i < spec_len; i++) {
-    col = data[i]
-    // for (j = fft_size; j < fft_size << 1; j++) {
-    //   col[j] = 0
-    // }
-    // if (i == 0) console.log(col)
-    fft.inverseTransform(out, col)
-    u = i * (fft_overlap)
-    for (j = 0; j < fft_size; j++) {
-      pcm[u+j] += out[j*2] * ham[j] || 0
-    }
-  }
-
-  fadeInOut(pcm, fft_size)
-  // console.log(pcm)
-  return audioBuffer
-}
-
-function fromImageData(imageData, sr, _r, _i) {
-  const pixels = imageData.data
-  const w = imageData.width
-  const h = imageData.height
-  let data = new Array(w)
-  let x, y, u, v, v2
-  for (y = 0; y < h; y++) {
-    let col = data[y] = new Float32Array(h * 4)
-    for (x = 0; x < w; x++) {
-      u = (x * (w) + y) * 4
-      v = x * 2
-      col[v] = (pixels[u] / 255 - 0.5) * _r
-      col[v+1] = (pixels[u+1] / 255 - 0.5) * _i
-      v2 = (h-y + h) * 2
-      col[v2] = col[v]
-      col[v2+1] = 0 // col[v+1]
-    }
-    col[h*2] = col[h*2+1] = col[h*2-1] = col[h*2-2] = 0
-  }
-  const spec = {
-    data,
-    sr,
-    fft_size, fft_overlap
-  }
-  return spec
-}
-
-function binToHz(spec, i){
-  return (i / spec.fft_size) * spec.sr
-}
-
-function fadeInOut(pcm, fade_size){
-  const pcm_length = pcm.length
-  let fade = 0, i
-  for (i = 0; i < fade_size; i++) {
-    fade = i / (fade_size)
-    fade *= fade
-    pcm[i] *= fade
-    pcm[pcm_length - i] *= fade
-  }
-}
-function rotatePhase(spec, theta){
-  let { data, fft_size } = spec
-  let i, j, col, len = data.length
-  for (i = 0; i < len; i++) {
-    col = data[i]
-    for (j = 0; j < fft_size; j++) {
-      col[j*2+1] += theta
-    }
-  }
-  return spec
-}
-
-function linearBins(spec, n){
-  n = n || 1
-
-  let bins = [], i, q_i
-  for (q_i = 0; q_i < n; q_i++) {
-    bins[q_i] = []
-  }
-  const step = Math.floor(spec.fft_size / n)
-  const len_quantize_n = quantize(spec.fft_size, n)
-  for (i = 0; i < len_quantize_n; i++) {
-    q_i = Math.floor(i/step)
-    bins[q_i] = bins[q_i] || []
-    bins[q_i].push(i)
-  }
-  // leftover bins get put at end
-  for (; i < spec.fft_size; i++) {
-    bins[q_i].push(i)
-  }
-  return bins
-}
-function logarithmicBins(spec){
-  let bins = [], i, j, q_i
-  let binCount = Math.log2(spec.fft_size) - 1
-  for (i = 0, q_i = 0, j = 0; i < binCount; i++) {
-    j += 1 << i
-    bins[i] = []
-    for (; q_i < j; q_i++) {
-      bins[i].push(q_i)
-    }
-  }
-  return bins
-}
-function concatBins(bins){
-  return bins.reduce((acc, cv) => acc.concat(cv), [])
-}
-function reverseBins(bins){
-  return bins.map( bin => bin.reverse() )
-}
-function minBins(bins){
-  return bins.map( bin => {
-    const b = bin[0]
-    return bin.map(() => b)
-  })
-}
-function maxBins(bins){
-  return bins.map( bin => {
-    const b = bin[bin.length-1]
-    return bin.map(() => b)
-  })
-}
-function rotateSpectrum(spec, n){
-  const { fft_size } = spec
-  if (n && n < 1) {
-    n -= 0.5
-    n *= fft_size
-  }
-  n = Math.floor(n)
-  let order = new Array(fft_size), i
-  for (i = 0; i < fft_size; i++) {
-    order[i] = mod(i + n, fft_size/2)
-  }
-  return reorderBins(spec, order)
-}
-function cloneSpectrum(spec){
-  const {
-    data,
-    fft_size,
-    sr, fft_overlap
-  } = spec
-  const spec_len = data.length
-
-  let new_data = new Array(spec_len)
-  let i
-  for (i = 0; i < spec_len; i++) {
-    new_data[i] = data[i].concat()
-    new_data[i][2] = 0
-  }
-
-  return {
-    data: new_data,
-    fft_size,
-    sr, fft_overlap,
-  }
-}
-function reverseSpectrum(spec){
-  let new_spec = cloneSpectrum(spec)
-  new_spec.data = new_spec.data.reverse()
-  return new_spec
-}
-function shuffleSpectrum(spec){
-  const { fft_size } = spec
-  let order = new Array(fft_size), i
-  for (i = 0; i < fft_size; i++) {
-    order[i] = i
-  }
-  shuffle(order)
-  return reorderBins(spec, order)
-}
-function invertSpectrum(spec){
-  const { fft_size } = spec
-  let order = new Array(fft_size), i
-  for (i = 0; i < fft_size; i++) {
-    order[i] = fft_size - i - 1
-  }
-  return reorderBins(spec, order)
-}
-function reorderBins(spec, order){
-  let new_spec = cloneSpectrum(spec)
-  const {
-    data,
-    sr,
-    fft_size,
-    fft_overlap,
-  } = spec
-  const spec_len = data.length
-  const { data: new_data } = new_spec
-
-  let i, j, col, new_col
-  for (j = order.length; j < fft_size; j++) {
-    order[j] = j
-  }
-
-  for (i = 0; i < spec_len; i++) {
-    col = data[i]
-    new_col = new_data[i] = data[i].concat()
-    col[0] = 0
-    col[2] = 0
-    col[4] = 0
-    for (j = 0; j < fft_size/2; j++) {
-      new_col[j*2] = col[order[j]*2]
-      new_col[j*2+1] = col[order[j]*2+1]
-    }
-    for (; j < fft_size; j++) {
-      new_col[j*2] = 0
-      new_col[j*2+1] = 0
-    }
-  }
-
-  return {
-    data: new_data,
-    sr, fft_size, fft_overlap,
-  }
-}
-
-export default {
-  toSpectrum, fromSpectrum, fromImageData, binToHz,
-  fadeInOut,
-  cloneSpectrum,
-  reverseSpectrum, shuffleSpectrum, invertSpectrum, rotateSpectrum,
-  reorderBins,
-  linearBins, logarithmicBins,
-  concatBins,
-  reverseBins, minBins, maxBins,
-  rotatePhase,
-}
diff --git a/app/client/audio/startAudioContext.js b/app/client/audio/startAudioContext.js
deleted file mode 100644
index 0e257be..0000000
--- a/app/client/audio/startAudioContext.js
+++ /dev/null
@@ -1,179 +0,0 @@
-/**
- *  StartAudioContext.js
- *  @author Yotam Mann
- *  @license http://opensource.org/licenses/MIT MIT License
- *  @copyright 2016 Yotam Mann
- */
-(function (root, factory) {
-  if (typeof define === "function" && define.amd) {
-    define([], factory);
-   } else if (typeof module === 'object' && module.exports) {
-        module.exports = factory();
-  } else {
-    root.StartAudioContext = factory();
-  }
-}(this, function () {
-
-  /**
-   * The StartAudioContext object
-   */
-  var StartAudioContext = {
-    /**
-     * The audio context passed in by the user
-     * @type {AudioContext}
-     */
-    context : null,
-    /**
-     * The TapListeners bound to the elements
-     * @type {Array}
-     * @private
-     */
-    _tapListeners : [],
-    /**
-     * Callbacks to invoke when the audio context is started
-     * @type {Array}
-     * @private
-     */
-    _onStarted : [],
-  };
-
-
-  /**
-   * Set the context
-   * @param {AudioContext} ctx
-   * @returns {StartAudioContext}
-   */
-  StartAudioContext.setContext = function(ctx){
-    StartAudioContext.context = ctx;
-    return StartAudioContext;
-  };
-
-  /**
-   * Add a tap listener to the audio context
-   * @param  {Array|Element|String|jQuery} element
-   * @returns {StartAudioContext}
-   */
-  StartAudioContext.on = function(element){
-    if (Array.isArray(element) || (NodeList && element instanceof NodeList)){
-      for (var i = 0; i < element.length; i++){
-        StartAudioContext.on(element[i]);
-      }
-    } else if (typeof element === "string"){
-      StartAudioContext.on(document.querySelectorAll(element));
-    } else if (element.jquery && typeof element.toArray === "function"){
-      StartAudioContext.on(element.toArray());
-    } else if (Element && element instanceof Element){
-      //if it's an element, create a TapListener
-      var tap = new TapListener(element, onTap);
-      StartAudioContext._tapListeners.push(tap);
-    } 
-    return StartAudioContext;
-  };
-
-  /**
-   * Bind a callback to when the audio context is started. 
-   * @param {Function} cb
-   * @return {StartAudioContext}
-   */
-  StartAudioContext.onStarted = function(cb){
-    //if it's already started, invoke the callback
-    if (StartAudioContext.isStarted()){
-      cb();
-    } else {
-      StartAudioContext._onStarted.push(cb);
-    }
-    return StartAudioContext;
-  };
-
-  /**
-   * returns true if the context is started
-   * @return {Boolean}
-   */
-  StartAudioContext.isStarted = function(){
-    return (StartAudioContext.context !== null && StartAudioContext.context.state === "running");
-  };
-
-  /**
-   * @class  Listens for non-dragging tap ends on the given element
-   * @param {Element} element
-   * @internal
-   */
-  var TapListener = function(element){
-
-    this._dragged = false;
-
-    this._element = element;
-
-    this._bindedMove = this._moved.bind(this);
-    this._bindedEnd = this._ended.bind(this);
-
-    element.addEventListener("touchmove", this._bindedMove);
-    element.addEventListener("touchend", this._bindedEnd);
-    element.addEventListener("mouseup", this._bindedEnd);
-  };
-
-  /**
-   * drag move event
-   */
-  TapListener.prototype._moved = function(e){
-    this._dragged = true;
-  };
-
-  /**
-   * tap ended listener
-   */
-  TapListener.prototype._ended = function(e){
-    if (!this._dragged){
-      onTap();
-    }
-    this._dragged = false;
-  };
-
-  /**
-   * remove all the bound events
-   */
-  TapListener.prototype.dispose = function(){
-    this._element.removeEventListener("touchmove", this._bindedMove);
-    this._element.removeEventListener("touchend", this._bindedEnd);
-    this._element.removeEventListener("mouseup", this._bindedEnd);
-    this._bindedMove = null;
-    this._bindedEnd = null;
-    this._element = null;
-  };
-
-  /**
-   * Invoked the first time of the elements is tapped.
-   * Creates a silent oscillator when a non-dragging touchend 
-   * event has been triggered.
-   */
-  function onTap(){
-    //start the audio context with a silent oscillator
-    if (StartAudioContext.context && !StartAudioContext.isStarted()){
-      var osc = StartAudioContext.context.createOscillator();
-      var silent = StartAudioContext.context.createGain();
-      silent.gain.value = 0;
-      osc.connect(silent);
-      silent.connect(StartAudioContext.context.destination);
-      var now = StartAudioContext.context.currentTime;
-      osc.start(now);
-      osc.stop(now+0.5);
-    }
-
-    //dispose all the tap listeners
-    if (StartAudioContext._tapListeners){
-      for (var i = 0; i < StartAudioContext._tapListeners.length; i++){
-        StartAudioContext._tapListeners[i].dispose();
-      }
-      StartAudioContext._tapListeners = null;
-    }
-    //the onstarted callbacks
-    if (StartAudioContext._onStarted){
-      for (var j = 0; j < StartAudioContext._onStarted.length; j++){
-        StartAudioContext._onStarted[j]();
-      }
-      StartAudioContext._onStarted = null;
-    }
-  }
-
-  return StartAudioContext;
-}));
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) }
-- 
cgit v1.2.3-70-g09d2