Update _config.yml

1single.html

@@ -5,20 +5,97 @@
 
 <input id="photo" type="file">
 <div id="results"></div>
+
 <script>
-  async function loaded(reader) {
-    const response = await fetch('https://hf.space/embed/jph00/pets/+/api/predict/', {
-      method: "POST", body: JSON.stringify({ "data": [reader.result] }),
-      headers: { "Content-Type": "application/json" }
+const SPACE = "https://danielnicholasdilli-test.hf.space";
+
+async function loaded(reader) {
+
+    results.innerHTML = "Uploading image...";
+
+    // Upload the image
+    const formData = new FormData();
+
+    // Convert the DataURL back to a Blob
+    const blob = await (await fetch(reader.result)).blob();
+
+    formData.append("files", blob, "image.png");
+
+    const uploadResponse = await fetch(
+        `${SPACE}/gradio_api/upload`,
+        {
+            method: "POST",
+            body: formData
+        }
+    );
+
+    const uploadResult = await uploadResponse.json();
+
+    const uploadedPath = uploadResult[0];
+
+    results.innerHTML = "Running prediction...";
+
+    // Start prediction
+    const predictResponse = await fetch(
+        `${SPACE}/gradio_api/call/v2/classify_image`,
+        {
+            method: "POST",
+            headers: {
+                "Content-Type": "application/json"
+            },
+            body: JSON.stringify({
+                im: {
+                    path: uploadedPath,
+                    meta: {
+                        _type: "gradio.FileData"
+                    }
+                }
+            })
+        }
+    );
+
+    const predictResult = await predictResponse.json();
+
+    const eventID = predictResult.event_id;
+
+    // Wait for prediction
+    const eventSource = new EventSource(
+        `${SPACE}/gradio_api/call/classify_image/${eventID}`
+    );
+
+    eventSource.addEventListener("complete", function(event) {
+
+        const output = JSON.parse(event.data)[0];
+
+        results.innerHTML = `
+            <br>
+            <img src="${reader.result}" width="300">
+            <h3>${output.label}</h3>
+            <p>
+                Confidence:
+                ${(output.confidences[0].confidence * 100).toFixed(2)}%
+            </p>
+        `;
+
+        eventSource.close();
     });
-    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() {
+
+    eventSource.onerror = function() {
+        results.innerHTML = "Prediction failed.";
+        eventSource.close();
+    };
+}
+
+function read() {
+
+    if (!photo.files.length) return;
+
     const reader = new FileReader();
-    reader.addEventListener('load', () => loaded(reader))
+
+    reader.onload = () => loaded(reader);
+
     reader.readAsDataURL(photo.files[0]);
-  }
-  photo.addEventListener('input', read);
+}
+
+photo.addEventListener("change", read);
 </script>

_config.yml

@@ -2,8 +2,8 @@ remote_theme: daviddarnes/alembic@main
 plugins:
 - jekyll-remote-theme
 
-title: Jeremy Howard
+title: Daniel Dilli
 description: Some basic examples of client interfaces to a computer vision API
 
 author:
-  name: Jeremy Howard
+  name: Daniel Dilli