Teachable Machine és una eina molt útil i versàtil que pot afegir funcionalitat i interactivitat a la teva web. Aquí tens algunes idees de projectes que podries implementar:
Entrena un model per reconèixer diferents categories d'imatges, com ara mascotes, tipus de menjar, plantes, etc.
Aplicació a la teva web: Els usuaris poden pujar una imatge i el model els dirà a quina categoria pertany. Això podria ser útil per a llocs web de comerç electrònic, blogs de cuina, o llocs d'educació sobre la natura.
Entrena un model per reconèixer gestos amb la mà o moviments corporals.
Aplicació a la teva web: Podries implementar controls basats en gestos per navegar per la teva web, jugar a jocs, o realitzar tasques específiques com canviar diapositives en una presentació.
Entrena un model per reconèixer sons específics, com ara aplaudiments, veu humana, o sons d'animals.
Aplicació a la teva web: Els usuaris poden carregar un clip d'àudio i el model l'identificarà. Això pot ser útil per a llocs web de música, aplicacions de reconeixement de veu, o eines d'educació musical.
Entrena un model per reconèixer expressions facials com somriure, sorpresa, o tristesa.
Aplicació a la teva web: Els usuaris podrien fer servir la seva càmera per interactuar amb el lloc basat en les seves expressions facials, per exemple, somriure per activar una funció específica.
Entrena un model per classificar textos en diferents categories, com ara comentaris positius/negatius, temes específics, etc.
Aplicació a la teva web: Podries utilitzar aquest model per moderar comentaris en un fòrum, classificar correus electrònics, o recomanar contingut basat en les preferències de l'usuari.
Aquestes idees poden afegir una capa de interactivitat i personalització molt atractiva a la teva web. Tria la que millor s'adapti a les teves necessitats i interessos!
Aquí tens una guia pas a pas per crear un joc senzill de gestos utilitzant Teachable Machine i integrar-lo a la teva web:
Objectiu: Crear un joc de Pedra, Paper, Tisores on els usuaris puguin jugar contra l'ordinador utilitzant gestos amb les mans.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pedra, Paper, Tisores</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Pedra, Paper, Tisores amb Gestos</h1>
<div id="webcam-container"></div>
<div id="label-container"></div>
<button id="start-button">Començar Joc</button>
<div id="result"></div>
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs"></script>
<script src="script.js"></script>
</body>
</html>
body {
font-family: Arial, sans-serif;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
background-color: #f0f0f0;
}
#webcam-container {
margin-top: 20px;
}
#label-container {
margin-top: 10px;
font-size: 24px;
}
#start-button {
margin-top: 20px;
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
}
#result {
margin-top: 20px;
font-size: 24px;
}
let model, webcam, labelContainer, maxPredictions;
// Load the image model and setup the webcam
async function init() {
const modelURL = 'model.json';
const metadataURL = 'metadata.json';
// Load the model and metadata
model = await tmImage.load(modelURL, metadataURL);
maxPredictions = model.getTotalClasses();
// Setup webcam
const flip = true;
webcam = new tmImage.Webcam(200, 200, flip);
await webcam.setup();
await webcam.play();
window.requestAnimationFrame(loop);
document.getElementById('webcam-container').appendChild(webcam.canvas);
labelContainer = document.getElementById('label-container');
for (let i = 0; i < maxPredictions; i++) {
labelContainer.appendChild(document.createElement('div'));
}
}
async function loop() {
webcam.update();
await predict();
window.requestAnimationFrame(loop);
}
async function predict() {
const prediction = await model.predict(webcam.canvas);
let highestProbability = 0;
let gesture = '';
for (let i = 0; i < maxPredictions; i++) {
const classPrediction = prediction[i].className + ': ' + prediction[i].probability.toFixed(2);
labelContainer.childNodes[i].innerHTML = classPrediction;
if (prediction[i].probability > highestProbability) {
highestProbability = prediction[i].probability;
gesture = prediction[i].className;
}
}
return gesture;
}
function startGame() {
const userGesture = await predict();
const computerGesture = ['Pedra', 'Paper', 'Tisores'][Math.floor(Math.random() * 3)];
let result = '';
if (userGesture === computerGesture) {
result = 'Empat!';
} else if (
(userGesture === 'Pedra' && computerGesture === 'Tisores') ||
(userGesture === 'Paper' && computerGesture === 'Pedra') ||
(userGesture === 'Tisores' && computerGesture === 'Paper')
) {
result = 'Guanyes!';
} else {
result = 'Perds!';
}
document.getElementById('result').innerHTML = `Vas fer ${userGesture}, Ordinador va fer ${computerGesture}: ${result}`;
}
document.getElementById('start-button').addEventListener('click', startGame);
init();
Explicació:
HTML (index.html): Defineix l'estructura de la pàgina amb un contenidor per a la webcam, un botó per començar el joc i un lloc per mostrar el resultat.
CSS (style.css): Dona estil a la pàgina per fer-la més atractiva.
JavaScript (script.js): Gestiona la càrrega del model, la configuració de la webcam, la predicció de gestos, i la lògica del joc. La funció init() carrega el model i configura la webcam. La funció predict() fa prediccions basades en el vídeo de la webcam. La funció startGame() compara el gest de l'usuari amb el de l'ordinador i mostra el resultat.
Amb aquests passos, hauràs creat un joc interactiu de Pedra, Paper, Tisores basat en gestos, utilitzant Teachable Machine i integrat a la teva web. Experimenta amb els models i afegeix més funcionalitats per fer el joc més divertit i interactiu!