Hugging Face's logo

Spaces:
yukiapple323
/
making_app
Runtime error

App Files Community
yukiapple323 commited on
Commit
cbe52f6
·
verified ·
1 Parent(s): 608962a

Create index.html

Browse files
Files changed (1) hide show
  1. index.html +42 -0
index.html ADDED
@@ -0,0 +1,42 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
+ <title>Image Classification</title>
7
+ <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@3.9.0/dist/tf.min.js"></script>
8
+ </head>
9
+ <body>
10
+ <h1>Image Classification</h1>
11
+ <input type="file" id="imageInput" accept="image/*">
12
+ <img id="inputImage" src="#" alt="Input Image" style="max-width: 300px; max-height: 300px;">
13
+ <button onclick="classifyImage()">Classify</button>
14
+ <div id="output"></div>
15
+
16
+ <script>
17
+ async function classifyImage() {
18
+ const file = document.getElementById('imageInput').files[0];
19
+ const formData = new FormData();
20
+ formData.append('file', file);
21
+
22
+ const response = await fetch('http://localhost:5000/classify', {
23
+ method: 'POST',
24
+ body: formData
25
+ });
26
+ const result = await response.json();
27
+
28
+ const outputElement = document.getElementById('output');
29
+ outputElement.innerHTML = '<h2>Predictions:</h2>';
30
+ result.predictions.forEach(prediction => {
31
+ outputElement.innerHTML += `<p>${prediction.className}: ${prediction.probability.toFixed(4)}</p>`;
32
+ });
33
+ }
34
+
35
+ document.getElementById('imageInput').addEventListener('change', function(event) {
36
+ const file = event.target.files[0];
37
+ const imageElement = document.getElementById('inputImage');
38
+ imageElement.src = URL.createObjectURL(file);
39
+ });
40
+ </script>
41
+ </body>
42
+ </html>