Hugging Face's logo

Spaces:
LPX55
/
zerogpu-experiments
Sleeping

App Files Community
1

Create predict.html

#1
by LPX55 - opened
base: refs/heads/main
←
from: refs/pr/1
Discussion Files changed
+131
-0
Files changed (1) hide show
  1. static/predict.html +131 -0
static/predict.html ADDED
@@ -0,0 +1,131 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <meta http-equiv="X-UA-Compatible" content="ie=edge">
7
+ <title>Cat or Dog predictor</title>
8
+ <link rel="stylesheet" href="https://unpkg.com/mvp.css">
9
+ </head>
10
+ <body>
11
+ <a href="https://github.com/nuvic/predict_image"><img loading="lazy" width="149" height="149" src="https://github.blog/wp-content/uploads/2008/12/forkme_left_green_007200.png?resize=149%2C149" class="attachment-full size-full" alt="Fork me on GitHub" data-recalc-dims="1"></a>
12
+ <header>
13
+ <h1>Predict a dog or cat from an image</h1>
14
+ <p>Model provided by <a href="https://github.com/fastai/fastai">fastai</a> and api hosted by <a href="https://hf.space/embed/jph00/testing/api" target="_blank">hugging face</a>
15
+ </p>
16
+ <a href="https://github.com/nuvic/predict_image" target="_blank">Github Repo</a>
17
+ </header>
18
+ <main>
19
+ <header>
20
+ <h2>Submit a picture of either a cat or dog</h2>
21
+ <p id="prediction"></p>
22
+ <p id="confidences"></p>
23
+ <p id="error"></p>
24
+ </header>
25
+ <section>
26
+ <img id="myImage" height="400" width="400">
27
+ <form id="form">
28
+ <label for="fileInput"></label>
29
+ <input id="fileInput" type="file" onchange="onFileSelected(event)" name="File">
30
+ </form>
31
+ </section>
32
+ </main>
33
+ <script>
34
+ /*
35
+ * Reads the selected image file,
36
+ * shows the image file on the page,
37
+ * calls the API with the image file in base64 string,
38
+ * records the prediction (label) of the API
39
+
40
+ References to JS functionality:
41
+ * FileReader (allows reading of file content): https://developer.mozilla.org/en-US/docs/Web/API/FileReader
42
+ * Element.innerHTML (replace content within HTML block): https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML
43
+ * Fetch (making API call): https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch
44
+ * getElementById (retrieve the html element with specific id): https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById
45
+ */
46
+ function onFileSelected(event) {
47
+ const selectedFile = event.target.files[0];
48
+ const reader = new FileReader();
49
+
50
+ const imgtag = document.getElementById("myImage");
51
+ imgtag.title = selectedFile.name;
52
+
53
+ reader.onload = function(event) {
54
+ // set the div element with "id=myImage" to show the uploaded image file
55
+ imgtag.src = event.target.result;
56
+ };
57
+
58
+ reader.readAsDataURL(selectedFile);
59
+
60
+ const predictionEl = document.getElementById('prediction')
61
+ const confidencesEl = document.getElementById('confidences')
62
+ const errorEl = document.getElementById('error')
63
+
64
+ reader.addEventListener("loadend", function() {
65
+ // Make a API call by passing our image
66
+ fetch('https://hf.space/embed/jph00/testing/+/api/predict/', {
67
+ method: "POST",
68
+ // reader.result is the base64 string of the uploaded image
69
+ body: JSON.stringify({"data": [reader.result]}),
70
+ headers: { "Content-Type": "application/json" } })
71
+ .then(function(response) {
72
+ if (response.status != 200) {
73
+ // early return if the api errors out and show error message
74
+ errorEl.innerHTML = '<u>Sorry the API is not working currently. Please try again later</u>'
75
+ predictionEl.innerHTML = '';
76
+ confidencesEl.innerHTML = '';
77
+ return;
78
+ }
79
+ return response.json(); })
80
+ .then(function(json_response) {
81
+ // json_response has this format:
82
+ // {
83
+ // "data": [
84
+ // {
85
+ // "label": "Cat",
86
+ // "confidences": [
87
+ // {
88
+ // "label": "Cat",
89
+ // "confidence": 1
90
+ // },
91
+ // {
92
+ // "label": "Dog",
93
+ // "confidence": 2.430905149281037e-15
94
+ // }
95
+ // ]
96
+ // }
97
+ // ],
98
+ // "flag_index": null,
99
+ // "updated_state": null,
100
+ // "durations": [
101
+ // 0.04598379135131836
102
+ // ],
103
+ // "avg_durations": [
104
+ // 0.16849387327829995
105
+ // ]
106
+ // }
107
+
108
+ const label = json_response?.data[0]?.label;
109
+
110
+ // Get the confidences for cat and dog
111
+ // firstLabel and secondLabel are cat and dog
112
+ // the order changes depending on the category predicted,
113
+ // that's why the variable names are not fixed to catLabel/dogLabel
114
+ const firstLabel = json_response?.data[0]?.confidences[0]?.label;
115
+ const firstLabelConfidence = json_response?.data[0]?.confidences[0]?.confidence
116
+ const secondLabel = json_response?.data[0]?.confidences[1]?.label;
117
+ const secondLabelConfidence = json_response?.data[0]?.confidences[1]?.confidence
118
+
119
+ // show the prediction
120
+ predictionEl.innerHTML = `🎉 <u>Prediction: ${label}</u> 🎉`
121
+ confidencesEl.innerHTML = `Confidence:<br>
122
+ ${firstLabel}: ${firstLabelConfidence}<br>
123
+ ${secondLabel}: ${secondLabelConfidence}`
124
+ errorEl.innerHTML = '';
125
+ return;
126
+ })
127
+ });
128
+ }
129
+ </script>
130
+ </body>
131
+ </html>