ktilcu/index.html

## index.html
<!DOCTYPE html>
<html>
  <head>
    <meta name="description" content="CycleJS - Campaign Screenshots">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/4.0.6/rx.all.js"></script>
    <script src="https://rawgit.com/cyclejs/cycle-core/v6.0.0-rc2/dist/cycle.js"></script>
    <script src="https://rawgit.com/cyclejs/cycle-dom/v8.0.0-rc9/dist/cycle-dom.js"></script>
    <script src="https://rawgit.com/cyclejs/cycle-http-driver/v7.0.0-rc2/dist/cycle-http-driver.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.0.0/jszip.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ramda/0.22.1/ramda.min.js"></script>
    <meta charset="utf-8">
    <title>JS Bin</title>
  </head>
  <body>
    <div id="app"></div>
  <script id="jsbin-javascript">
'use strict';

var _Rx = Rx;
var Observable = _Rx.Observable;
var _CycleDOM = CycleDOM;
var div = _CycleDOM.div;
var img = _CycleDOM.img;
var label = _CycleDOM.label;
var pre = _CycleDOM.pre;
var textarea = _CycleDOM.textarea;
var button = _CycleDOM.button;
var makeDOMDriver = _CycleDOM.makeDOMDriver;
var _CycleHTTPDriver = CycleHTTPDriver;
var makeHTTPDriver = _CycleHTTPDriver.makeHTTPDriver;

// DOM read: text pasted
// HTTP write: request sent
// HTTP read: response received
// DOM write: dom updated

var SS_URL = 'http://ss.prod.paperg.com/captures/ui/ui';

function intent(DOM) {

  var submissions$ = DOM.select('.omg').events('input').debounce(500).map(function (event) {
    return event.target.value;
  }).filter(function (input) {
    return input.length > 0;
  }).map(function (body) {
    return {
      url: SS_URL,
      method: 'POST',
      send: body
    };
  });

  return submissions$;
}

function model(HTTP) {
  var response$ = HTTP.filter(function (res$) {
    return res$.request.url === SS_URL;
  }).flatMap(function (x) {
    return x['catch'](function (err) {
      return Observable.just({ err: err });
    });
  }).map(isRes(function (res) {
    return res.body;
  })).scan(values, []).flatMap(Rx.Observable.fromArray).flatMap(makeJpeg).takeUntil(Rx.Observable.timer(20000)).toArray().startWith([]);
  return response$;
}

function view(res$) {
  return res$.map(function (body) {
    return div('.users', [textarea('.omg', 'Put Draft JSON Here!'), body.err && body.err.message ? div('.error', [pre('.error-message', body.err.response.body.message), pre('.json', JSON.stringify(body.err, null, 4))]) : div('.images', body.map(function (url) {
      return img({ src: url });
    }))]);
  });
}

function main(sources) {
  var submissions$ = intent(sources.DOM);
  var data$ = model(sources.HTTP);
  var vtree$ = view(data$);

  return {
    DOM: vtree$,
    HTTP: submissions$
  };
}

Cycle.run(main, {
  DOM: makeDOMDriver('#app'),
  HTTP: makeHTTPDriver()
});
</script>


<script id="jsbin-source-javascript" type="text/javascript">const {Observable} = Rx;
const {div, img, label, pre, textarea, button, makeDOMDriver} = CycleDOM;
const {makeHTTPDriver} = CycleHTTPDriver;


// DOM read: text pasted
// HTTP write: request sent
// HTTP read: response received
// DOM write: dom updated

const SS_URL = 'http://ss.prod.paperg.com/captures/ui/ui';

function intent(DOM) {

  const submissions$ = DOM
    .select('.omg').events('input')
    .debounce(500)
    .map(event => event.target.value)
    .filter(input => input.length > 0)
    .map(body => {
      return {
        url: SS_URL,
        method: 'POST',
        send: body,
      };
    });

  return submissions$;
}

function model(HTTP) {
  const response$ = HTTP
    .filter(res$ => res$.request.url === SS_URL)
    .flatMap(x => x.catch(err => Observable.just({err})))
    .map(isRes((res) => res.body))
    .scan(values, [])
    .flatMap(Rx.Observable.fromArray)
    .flatMap(makeJpeg)
    .takeUntil(Rx.Observable.timer(20000))
    .toArray()
    .startWith([]);
  return response$;
}

function view(res$) {
  return res$
    .map(body =>
      div('.users', [
        textarea('.omg', 'Put Draft JSON Here!'),
        body.err && body.err.message
          ? div('.error', [
            pre('.error-message', body.err.response.body.message),
            pre('.json', JSON.stringify(body.err, null, 4))])
          : div('.images', body.map(url => img({src:url})))
      ])
    );
}

function main(sources) {
  const submissions$ = intent(sources.DOM);
  const data$ = model(sources.HTTP);
  const vtree$ = view(data$);

  return {
    DOM: vtree$,
    HTTP: submissions$
  };
}

Cycle.run(main, {
  DOM: makeDOMDriver('#app'),
  HTTP: makeHTTPDriver()
});</script></body>
</html>

## jsbin.hodusu.js
'use strict';

var _Rx = Rx;
var Observable = _Rx.Observable;
var _CycleDOM = CycleDOM;
var div = _CycleDOM.div;
var img = _CycleDOM.img;
var label = _CycleDOM.label;
var pre = _CycleDOM.pre;
var textarea = _CycleDOM.textarea;
var button = _CycleDOM.button;
var makeDOMDriver = _CycleDOM.makeDOMDriver;
var _CycleHTTPDriver = CycleHTTPDriver;
var makeHTTPDriver = _CycleHTTPDriver.makeHTTPDriver;

// DOM read: text pasted
// HTTP write: request sent
// HTTP read: response received
// DOM write: dom updated

var SS_URL = 'http://ss.prod.paperg.com/captures/ui/ui';

function intent(DOM) {

  var submissions$ = DOM.select('.omg').events('input').debounce(500).map(function (event) {
    return event.target.value;
  }).filter(function (input) {
    return input.length > 0;
  }).map(function (body) {
    return {
      url: SS_URL,
      method: 'POST',
      send: body
    };
  });

  return submissions$;
}

function model(HTTP) {
  var response$ = HTTP.filter(function (res$) {
    return res$.request.url === SS_URL;
  }).flatMap(function (x) {
    return x['catch'](function (err) {
      return Observable.just({ err: err });
    });
  }).map(isRes(function (res) {
    return res.body;
  })).scan(values, []).flatMap(Rx.Observable.fromArray).flatMap(makeJpeg).takeUntil(Rx.Observable.timer(20000)).toArray().startWith([]);
  return response$;
}

function view(res$) {
  return res$.map(function (body) {
    return div('.users', [textarea('.omg', 'Put Draft JSON Here!'), body.err && body.err.message ? div('.error', [pre('.error-message', body.err.response.body.message), pre('.json', JSON.stringify(body.err, null, 4))]) : div('.images', body.map(function (url) {
      return img({ src: url });
    }))]);
  });
}

function main(sources) {
  var submissions$ = intent(sources.DOM);
  var data$ = model(sources.HTTP);
  var vtree$ = view(data$);

  return {
    DOM: vtree$,
    HTTP: submissions$
  };
}

Cycle.run(main, {
  DOM: makeDOMDriver('#app'),
  HTTP: makeHTTPDriver()
});
	<!DOCTYPE html>
	<html>
	<head>
	<meta name="description" content="CycleJS - Campaign Screenshots">
	<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/4.0.6/rx.all.js"></script>
	<script src="https://rawgit.com/cyclejs/cycle-core/v6.0.0-rc2/dist/cycle.js"></script>
	<script src="https://rawgit.com/cyclejs/cycle-dom/v8.0.0-rc9/dist/cycle-dom.js"></script>
	<script src="https://rawgit.com/cyclejs/cycle-http-driver/v7.0.0-rc2/dist/cycle-http-driver.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.0.0/jszip.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/ramda/0.22.1/ramda.min.js"></script>
	<meta charset="utf-8">
	<title>JS Bin</title>
	</head>
	<body>
	<div id="app"></div>
	<script id="jsbin-javascript">
	'use strict';

	var _Rx = Rx;
	var Observable = _Rx.Observable;
	var _CycleDOM = CycleDOM;
	var div = _CycleDOM.div;
	var img = _CycleDOM.img;
	var label = _CycleDOM.label;
	var pre = _CycleDOM.pre;
	var textarea = _CycleDOM.textarea;
	var button = _CycleDOM.button;
	var makeDOMDriver = _CycleDOM.makeDOMDriver;
	var _CycleHTTPDriver = CycleHTTPDriver;
	var makeHTTPDriver = _CycleHTTPDriver.makeHTTPDriver;

	// DOM read: text pasted
	// HTTP write: request sent
	// HTTP read: response received
	// DOM write: dom updated

	var SS_URL = 'http://ss.prod.paperg.com/captures/ui/ui';

	function intent(DOM) {

	var submissions$ = DOM.select('.omg').events('input').debounce(500).map(function (event) {
	return event.target.value;
	}).filter(function (input) {
	return input.length > 0;
	}).map(function (body) {
	return {
	url: SS_URL,
	method: 'POST',
	send: body
	};
	});

	return submissions$;
	}

	function model(HTTP) {
	var response$ = HTTP.filter(function (res$) {
	return res$.request.url === SS_URL;
	}).flatMap(function (x) {
	return x['catch'](function (err) {
	return Observable.just({ err: err });
	});
	}).map(isRes(function (res) {
	return res.body;
	})).scan(values, []).flatMap(Rx.Observable.fromArray).flatMap(makeJpeg).takeUntil(Rx.Observable.timer(20000)).toArray().startWith([]);
	return response$;
	}

	function view(res$) {
	return res$.map(function (body) {
	return div('.users', [textarea('.omg', 'Put Draft JSON Here!'), body.err && body.err.message ? div('.error', [pre('.error-message', body.err.response.body.message), pre('.json', JSON.stringify(body.err, null, 4))]) : div('.images', body.map(function (url) {
	return img({ src: url });
	}))]);
	});
	}

	function main(sources) {
	var submissions$ = intent(sources.DOM);
	var data$ = model(sources.HTTP);
	var vtree$ = view(data$);

	return {
	DOM: vtree$,
	HTTP: submissions$
	};
	}

	Cycle.run(main, {
	DOM: makeDOMDriver('#app'),
	HTTP: makeHTTPDriver()
	});
	</script>



	<script id="jsbin-source-javascript" type="text/javascript">const {Observable} = Rx;
	const {div, img, label, pre, textarea, button, makeDOMDriver} = CycleDOM;
	const {makeHTTPDriver} = CycleHTTPDriver;


	// DOM read: text pasted
	// HTTP write: request sent
	// HTTP read: response received
	// DOM write: dom updated

	const SS_URL = 'http://ss.prod.paperg.com/captures/ui/ui';

	function intent(DOM) {

	const submissions$ = DOM
	.select('.omg').events('input')
	.debounce(500)
	.map(event => event.target.value)
	.filter(input => input.length > 0)
	.map(body => {
	return {
	url: SS_URL,
	method: 'POST',
	send: body,
	};
	});

	return submissions$;
	}

	function model(HTTP) {
	const response$ = HTTP
	.filter(res$ => res$.request.url === SS_URL)
	.flatMap(x => x.catch(err => Observable.just({err})))
	.map(isRes((res) => res.body))
	.scan(values, [])
	.flatMap(Rx.Observable.fromArray)
	.flatMap(makeJpeg)
	.takeUntil(Rx.Observable.timer(20000))
	.toArray()
	.startWith([]);
	return response$;
	}

	function view(res$) {
	return res$
	.map(body =>
	div('.users', [
	textarea('.omg', 'Put Draft JSON Here!'),
	body.err && body.err.message
	? div('.error', [
	pre('.error-message', body.err.response.body.message),
	pre('.json', JSON.stringify(body.err, null, 4))])
	: div('.images', body.map(url => img({src:url})))
	])
	);
	}

	function main(sources) {
	const submissions$ = intent(sources.DOM);
	const data$ = model(sources.HTTP);
	const vtree$ = view(data$);

	return {
	DOM: vtree$,
	HTTP: submissions$
	};
	}

	Cycle.run(main, {
	DOM: makeDOMDriver('#app'),
	HTTP: makeHTTPDriver()
	});</script></body>
	</html>