A huggingface +gradio API problem with the suggested javascript

Having trouble deploying the java script website, what could be wrong with the code:

---
title: 1. Single file
layout: page
---

<input id="photo" type="file">
<div id="results"></div>
<script>
  async function loaded(reader) {
    const response = await fetch('https://hiddenmiddle-fastai-lesson2.hf.space/predict', {
      method: "POST", body: JSON.stringify({ "data": [reader.result] }),
      headers: { "Content-Type": "application/json" }
    });
    const json = await response.json();
    const label = json['data'][0]['confidences'][0]['label'];
    results.innerHTML = `<br/><img src="${reader.result}" width="300"> <p>${label}</p>`
  }
  function read() {
    const reader = new FileReader();
    reader.addEventListener('load', () => loaded(reader))
    reader.readAsDataURL(photo.files[0]);
  }
  photo.addEventListener('input', read);
</script>

It just takes in a picture, but doesn’t actually do anything

I also noticed same behavior at Single file | Jeremy Howard - it just takes in a picture, but doesn’t classify