joeyklee/index.html

## index.html
<html>
  <head></head>

  <body>
    <img src="JL-sq.jpg" alt="" id="joey" />
    <script>
      const joey = document.querySelector('#joey');

      toDataURL('JL-sq.jpg', function(dataUrl) {
        const inputs = {
          image: dataUrl,
          render_factor: 7
        };
        // console.log(inputs)

        fetch('http://localhost:8000/query', {
          method: 'POST',
          headers: {
            Accept: 'application/json',
            'Content-Type': 'application/json'
          },
          body: JSON.stringify(inputs)
        })
          .then(response => response.json())
          .then(outputs => {
            const { image } = outputs;
            console.log(image)
            joey.src=image;
            // use the outputs in your project
          });
      });

      function toDataURL(src, callback) {
        var xhttp = new XMLHttpRequest();

        xhttp.onload = function() {
          var fileReader = new FileReader();
          fileReader.onloadend = function() {
            callback(fileReader.result);
          };
          fileReader.readAsDataURL(xhttp.response);
        };

        xhttp.responseType = 'blob';
        xhttp.open('GET', src, true);
        xhttp.send();
      }
    </script>
  </body>
</html>
	<html>
	<head></head>

	<body>
	<img src="JL-sq.jpg" alt="" id="joey" />
	<script>
	const joey = document.querySelector('#joey');

	toDataURL('JL-sq.jpg', function(dataUrl) {
	const inputs = {
	image: dataUrl,
	render_factor: 7
	};
	// console.log(inputs)

	fetch('http://localhost:8000/query', {
	method: 'POST',
	headers: {
	Accept: 'application/json',
	'Content-Type': 'application/json'
	},
	body: JSON.stringify(inputs)
	})
	.then(response => response.json())
	.then(outputs => {
	const { image } = outputs;
	console.log(image)
	joey.src=image;
	// use the outputs in your project
	});
	});

	function toDataURL(src, callback) {
	var xhttp = new XMLHttpRequest();

	xhttp.onload = function() {
	var fileReader = new FileReader();
	fileReader.onloadend = function() {
	callback(fileReader.result);
	};
	fileReader.readAsDataURL(xhttp.response);
	};

	xhttp.responseType = 'blob';
	xhttp.open('GET', src, true);
	xhttp.send();
	}
	</script>
	</body>
	</html>