Skip to content

Commit

Permalink
Update index.html
Browse files Browse the repository at this point in the history
  • Loading branch information
@m-EGO
m-EGO authored Dec 1, 2024
1 parent af52c42 commit 09f2916
Showing 1 changed file with 57 additions and 94 deletions.
151 changes: 57 additions & 94 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -1,96 +1,59 @@
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Detección del Estado de la Fruta</title>

<!-- Incluir TensorFlow.js -->
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@latest/dist/tf.min.js"></script>

<!-- Incluir Teachable Machine Image -->
<script src="https://cdn.jsdelivr.net/npm/@teachablemachine/image@latest/dist/teachablemachine-image.min.js"></script>

<style>
body {
font-family: Arial, sans-serif;
text-align: center;
margin-top: 50px;
}
#webcam-container {
margin-top: 30px;
}
video {
width: 80%;
max-width: 640px;
}
#label-container {
margin-top: 20px;
font-size: 1.2em;
font-weight: bold;
}
</style>
</head>
<body>

<h1>Detección del Estado de la Fruta</h1>
<p>Coloca la fruta frente a la cámara para detectar su estado.</p>

<!-- Contenedor donde se mostrará la webcam -->
<div id="webcam-container"></div>

<!-- Contenedor donde se mostrarán las predicciones -->
<div id="label-container"></div>

<!-- Botón para iniciar la detección -->
<button type="button" onclick="init()">Iniciar detección</button>

<script type="text/javascript">
// URL del modelo de Teachable Machine
const URL = "./models/"; // Asegúrate de que esta sea la ruta correcta a tus archivos de modelo

let model, webcam, labelContainer, maxPredictions;

// Función para inicializar el modelo y la cámara
async function init() {
const modelURL = URL + "model.json";
const metadataURL = URL + "metadata.json";

// Cargar el modelo y los metadatos
model = await tmImage.load(modelURL, metadataURL);
maxPredictions = model.getTotalClasses(); // Obtiene la cantidad de clases de predicción

// Función para configurar la webcam
const flip = true; // Si se desea voltear la imagen de la cámara
webcam = new tmImage.Webcam(200, 200, flip); // Configuración de la webcam
await webcam.setup(); // Solicitar acceso a la cámara
await webcam.play(); // Inicia la transmisión de video
window.requestAnimationFrame(loop); // Empieza el ciclo de actualización

// Añadir la cámara al DOM
document.getElementById("webcam-container").appendChild(webcam.canvas);
labelContainer = document.getElementById("label-container");
for (let i = 0; i < maxPredictions; i++) { // Crear un contenedor para cada predicción
labelContainer.appendChild(document.createElement("div"));
}
}

// Función para actualizar la imagen de la webcam
async function loop() {
webcam.update(); // Actualizar el cuadro de la webcam
await predict();
window.requestAnimationFrame(loop); // Continuar el ciclo
<div>Teachable Machine Image Model</div>
<button type="button" onclick="init()">Start</button>
<div id="webcam-container"></div>
<div id="label-container"></div>
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@latest/dist/tf.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@teachablemachine/image@latest/dist/teachablemachine-image.min.js"></script>
<script type="text/javascript">
// More API functions here:
// https://github.com/googlecreativelab/teachablemachine-community/tree/master/libraries/image

// the link to your model provided by Teachable Machine export panel
const URL = "./models/";

let model, webcam, labelContainer, maxPredictions;

// Load the image model and setup the webcam
async function init() {
const modelURL = URL + "model.json";
const metadataURL = URL + "metadata.json";

// load the model and metadata
// Refer to tmImage.loadFromFiles() in the API to support files from a file picker
// or files from your local hard drive
// Note: the pose library adds "tmImage" object to your window (window.tmImage)
model = await tmImage.load(modelURL, metadataURL);
maxPredictions = model.getTotalClasses();

// Convenience function to setup a webcam
const flip = true; // whether to flip the webcam
webcam = new tmImage.Webcam(200, 200, flip); // width, height, flip
await webcam.setup(); // request access to the webcam
await webcam.play();
window.requestAnimationFrame(loop);

// append elements to the DOM
document.getElementById("webcam-container").appendChild(webcam.canvas);
labelContainer = document.getElementById("label-container");
for (let i = 0; i < maxPredictions; i++) { // and class labels
labelContainer.appendChild(document.createElement("div"));
}

// Función para hacer la predicción en base al modelo
async function predict() {
const prediction = await model.predict(webcam.canvas); // Realiza la predicción en base a la imagen
for (let i = 0; i < maxPredictions; i++) {
const classPrediction =
prediction[i].className + ": " + prediction[i].probability.toFixed(2); // Muestra la predicción y la probabilidad
labelContainer.childNodes[i].innerHTML = classPrediction;
}
}

async function loop() {
webcam.update(); // update the webcam frame
await predict();
window.requestAnimationFrame(loop);
}

// run the webcam image through the image model
async function predict() {
// predict can take in an image, video or canvas html element
const prediction = await model.predict(webcam.canvas);
for (let i = 0; i < maxPredictions; i++) {
const classPrediction =
prediction[i].className + ": " + prediction[i].probability.toFixed(2);
labelContainer.childNodes[i].innerHTML = classPrediction;
}
</script>
</body>
</html>
}
</script>

0 comments on commit 09f2916

Please sign in to comment.