From dfef811e80559f228b342a4a74face4abe6a887d Mon Sep 17 00:00:00 2001
From: nicholas Daniel <97566463+Jazzonies@users.noreply.github.com>
Date: Wed, 9 Jul 2025 03:40:28 +0100
Subject: [PATCH 1/3] Update _config.yml

---
 _config.yml | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/_config.yml b/_config.yml
index e06f8ad..0e0a10a 100644
--- a/_config.yml
+++ b/_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

From 187c4ad954248a97696a3ab7fd85e560be48e57a Mon Sep 17 00:00:00 2001
From: nicholas Daniel <97566463+Jazzonies@users.noreply.github.com>
Date: Mon, 6 Jul 2026 21:59:20 +0100
Subject: [PATCH 2/3] Update API endpoint for prediction request

---
 1single.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/1single.html b/1single.html
index 5782aca..0c47006 100644
--- a/1single.html
+++ b/1single.html
@@ -7,7 +7,7 @@
 <div id="results"></div>
 <script>
   async function loaded(reader) {
-    const response = await fetch('https://hf.space/embed/jph00/pets/+/api/predict/', {
+    const response = await fetch('https://hf.space/embed/DANIELNICHOLASDILLI/Weight_Mdel/+/api/predict/', {
       method: "POST", body: JSON.stringify({ "data": [reader.result] }),
       headers: { "Content-Type": "application/json" }
     });

From 7f0a1fa3692de1442952a7a1944bfdddb548e878 Mon Sep 17 00:00:00 2001
From: nicholas Daniel <97566463+Jazzonies@users.noreply.github.com>
Date: Mon, 6 Jul 2026 22:46:37 +0100
Subject: [PATCH 3/3] Refactor image upload and prediction logic

---
 1single.html | 101 +++++++++++++++++++++++++++++++++++++++++++++------
 1 file changed, 89 insertions(+), 12 deletions(-)

diff --git a/1single.html b/1single.html
index 0c47006..72ce947 100644
--- a/1single.html
+++ b/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/DANIELNICHOLASDILLI/Weight_Mdel/+/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>