aaronangle/ValidatePhoto.html

## ValidatePhoto.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>

  <body>
    <input type="file" name="" id="file-input" />
    <img src="" alt="" id="uploaded-image" style="max-height: 200px" />
    <p id="output-message"></p>
  </body>
  <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@1.3.1/dist/tf.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/@teachablemachine/image@0.8/dist/teachablemachine-image.min.js"></script>
  <script>
    const URL = 'https://teachablemachine.withgoogle.com/models/R_GyGgVbd/';

    const fileInput = document.getElementById('file-input');
    const output = document.getElementById('output-message');
    const uploadedImage = document.getElementById('uploaded-image');

    fileInput.addEventListener('change', async () => {
      output.innerHTML = 'Loading ...';

      let uploadedFile = fileInput.files[0];

      const imageSrc = await readFileAsync(uploadedFile);

      const image = new Image();
      image.src = imageSrc;
      uploadedImage.src = imageSrc;

      const modelURL = URL + 'model.json';
      const metadataURL = URL + 'metadata.json';

      let model = await tmImage.load(modelURL, metadataURL);
      const prediction = await model.predict(image);

      //adjust the threshold based on how strict or lenient you want to be
      const threshold = 0.65;
      if (prediction[1].probability > threshold) {
        output.innerHTML = 'Good Photo';
      } else {
        output.innerHTML = 'Bad Photo';
      }
    });

    async function readFileAsync(file) {
      return new Promise((resolve, reject) => {
        let reader = new FileReader();
        reader.onload = () => {
          resolve(reader.result);
        };
        reader.onerror = reject;
        reader.readAsDataURL(file);
      });
    }
  </script>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Document</title>
	</head>

	<body>
	<input type="file" name="" id="file-input" />
	<img src="" alt="" id="uploaded-image" style="max-height: 200px" />
	<p id="output-message"></p>
	</body>
	<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@1.3.1/dist/tf.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/@teachablemachine/image@0.8/dist/teachablemachine-image.min.js"></script>
	<script>
	const URL = 'https://teachablemachine.withgoogle.com/models/R_GyGgVbd/';

	const fileInput = document.getElementById('file-input');
	const output = document.getElementById('output-message');
	const uploadedImage = document.getElementById('uploaded-image');

	fileInput.addEventListener('change', async () => {
	output.innerHTML = 'Loading ...';

	let uploadedFile = fileInput.files[0];

	const imageSrc = await readFileAsync(uploadedFile);

	const image = new Image();
	image.src = imageSrc;
	uploadedImage.src = imageSrc;

	const modelURL = URL + 'model.json';
	const metadataURL = URL + 'metadata.json';

	let model = await tmImage.load(modelURL, metadataURL);
	const prediction = await model.predict(image);

	//adjust the threshold based on how strict or lenient you want to be
	const threshold = 0.65;
	if (prediction[1].probability > threshold) {
	output.innerHTML = 'Good Photo';
	} else {
	output.innerHTML = 'Bad Photo';
	}
	});

	async function readFileAsync(file) {
	return new Promise((resolve, reject) => {
	let reader = new FileReader();
	reader.onload = () => {
	resolve(reader.result);
	};
	reader.onerror = reject;
	reader.readAsDataURL(file);
	});
	}
	</script>
	</html>