Hugging Face's logo

Spaces:
moahmedalaoui
/
catordog
Sleeping

App Files Community
moahmedalaoui commited on
Commit
926654c
•
1 Parent(s): 2840138

ggg

Browse files
Files changed (1) hide show
  1. index.html +47 -0
index.html ADDED
@@ -0,0 +1,47 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <title>Gradio Client Test</title>
6
+ </head>
7
+ <body>
8
+ <h1>Upload Image for Prediction</h1>
9
+ <input type="file" id="imageInput" accept="image/*">
10
+ <button onclick="makePrediction()">Predict</button>
11
+ <br>
12
+ <img id="selectedImage" src="" alt="Selected Image" width="300">
13
+ <p id="result">Prediction results will appear here</p>
14
+
15
+ <!-- Load Gradio Client from CDN as a module -->
16
+ <script type="module">
17
+ import { Client } from "https://cdn.jsdelivr.net/npm/@gradio/client@latest";
18
+
19
+ document.getElementById('imageInput').addEventListener('change', function(event) {
20
+ const file = event.target.files[0];
21
+ const reader = new FileReader();
22
+ reader.onload = function(e) {
23
+ document.getElementById('selectedImage').src = e.target.result;
24
+ };
25
+ reader.readAsDataURL(file);
26
+ });
27
+
28
+ async function makePrediction() {
29
+ const fileInput = document.getElementById('imageInput');
30
+ if (fileInput.files.length === 0) {
31
+ alert('Please select an image file first.');
32
+ return;
33
+ }
34
+ const imageFile = fileInput.files[0];
35
+
36
+ const client = await Client.connect("moahmedalaoui/catordog");
37
+ const result = await client.predict("/predict",{
38
+ img: imageFile
39
+ });
40
+
41
+ document.getElementById('result').innerText = "Prediction: " + JSON.stringify(result.data);
42
+ }
43
+
44
+ window.makePrediction = makePrediction; // Expose to global scope
45
+ </script>
46
+ </body>
47
+ </html>