Hugging Face's logo

Spaces:
GDDO
/
cellcounter
Sleeping

App Files Community
GDDO commited on
Commit
be8f209
·
verified ·
1 Parent(s): 44af201

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +20 -68
index.html CHANGED
@@ -3,9 +3,7 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>TensorFlow.js TFLite Example</title>
7
- <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs"></script>
8
- <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs-tflite"></script>
9
  <style>
10
  body {
11
  font-family: Arial, sans-serif;
@@ -15,10 +13,6 @@
15
  justify-content: center;
16
  height: 100vh;
17
  }
18
- canvas, img {
19
- max-width: 100%;
20
- max-height: 300px;
21
- }
22
  input {
23
  margin: 10px;
24
  }
@@ -30,77 +24,35 @@
30
  </style>
31
  </head>
32
  <body>
33
- <h1>TensorFlow.js TFLite Example</h1>
34
  <input type="file" id="imageUploader" accept="image/*">
35
- <canvas id="canvas"></canvas>
36
  <p id="result">Upload an image to start inference.</p>
37
-
38
  <script>
39
- let model;
40
- const classes = ['Bastonete', 'Basófilo']; // Ajuste as classes conforme o seu modelo
41
-
42
- async function loadModel() {
43
- try {
44
- // Carregar o modelo .tflite
45
- model = await tflite.loadTFLiteModel('./model_unquant.tflite');
46
- console.log("Modelo carregado com sucesso!");
47
- } catch (error) {
48
- console.error("Erro ao carregar o modelo:", error);
49
- document.getElementById('result').textContent = "Erro ao carregar o modelo!";
50
- }
51
- }
52
-
53
- function preprocessImage(image) {
54
- const canvas = document.getElementById('canvas');
55
- const ctx = canvas.getContext('2d');
56
- canvas.width = 224; // Dimensão esperada pelo modelo
57
- canvas.height = 224;
58
-
59
- // Desenhar a imagem redimensionada no canvas
60
- ctx.drawImage(image, 0, 0, 224, 224);
61
-
62
- // Obter os dados da imagem como um tensor
63
- const imageData = ctx.getImageData(0, 0, 224, 224);
64
- let tensor = tf.browser.fromPixels(imageData);
65
- tensor = tensor.expandDims(0).toFloat().div(255.0); // Normalizar para [0, 1]
66
- return tensor;
67
- }
68
-
69
- async function predict(image) {
70
- try {
71
- const inputTensor = preprocessImage(image);
72
- const outputTensor = model.predict(inputTensor);
73
-
74
- // Obter a classe com maior probabilidade
75
- const predictions = outputTensor.dataSync();
76
- const maxIndex = predictions.indexOf(Math.max(...predictions));
77
- const confidence = predictions[maxIndex] * 100;
78
- return { className: classes[maxIndex], confidence };
79
- } catch (error) {
80
- console.error("Erro durante a predição:", error);
81
- document.getElementById('result').textContent = "Erro durante a predição!";
82
- }
83
- }
84
-
85
  document.getElementById('imageUploader').addEventListener('change', async (event) => {
86
  const file = event.target.files[0];
87
  if (file) {
88
- const img = new Image();
89
- img.src = URL.createObjectURL(file);
90
-
91
- img.onload = async () => {
92
- document.getElementById('result').textContent = "Processando...";
93
- const result = await predict(img);
94
- if (result) {
 
 
 
 
 
 
95
  document.getElementById('result').textContent =
96
- `Classe: ${result.className} (Confiança: ${result.confidence.toFixed(2)}%)`;
97
  }
98
- };
 
 
 
99
  }
100
  });
101
-
102
- // Carregar o modelo ao iniciar
103
- loadModel();
104
  </script>
105
  </body>
106
  </html>
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Python + HTML Inference</title>
 
 
7
  <style>
8
  body {
9
  font-family: Arial, sans-serif;
 
13
  justify-content: center;
14
  height: 100vh;
15
  }
 
 
 
 
16
  input {
17
  margin: 10px;
18
  }
 
24
  </style>
25
  </head>
26
  <body>
27
+ <h1>Upload an Image for Inference</h1>
28
  <input type="file" id="imageUploader" accept="image/*">
 
29
  <p id="result">Upload an image to start inference.</p>
 
30
  <script>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
31
  document.getElementById('imageUploader').addEventListener('change', async (event) => {
32
  const file = event.target.files[0];
33
  if (file) {
34
+ const formData = new FormData();
35
+ formData.append('file', file);
36
+
37
+ document.getElementById('result').textContent = "Processing...";
38
+ try {
39
+ const response = await fetch('http://localhost:5000/predict', {
40
+ method: 'POST',
41
+ body: formData
42
+ });
43
+ const result = await response.json();
44
+ if (result.error) {
45
+ document.getElementById('result').textContent = "Error: " + result.error;
46
+ } else {
47
  document.getElementById('result').textContent =
48
+ `Class: ${result.class} (Confidence: ${result.confidence.toFixed(2)}%)`;
49
  }
50
+ } catch (error) {
51
+ document.getElementById('result').textContent = "Error communicating with the server.";
52
+ console.error("Error:", error);
53
+ }
54
  }
55
  });
 
 
 
56
  </script>
57
  </body>
58
  </html>