File size: 3,962 Bytes
ef4ade6 3392632 ef4ade6 384a1c2 ef4ade6 3e5a2c3 ef4ade6 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 | <!DOCTYPE html>
<html>
<head>
<title>Pose Recognition with Audio</title>
<style>
body { font-family: sans-serif; text-align: center; background: #f0f2f5; }
canvas { border: 4px solid #333; border-radius: 10px; margin-top: 20px; }
button { padding: 10px 25px; font-size: 18px; cursor: pointer; background: #007bff; color: white; border: none; border-radius: 5px; }
#label-container { margin-top: 20px; font-weight: bold; font-size: 20px; }
</style>
</head>
<body>
<h2>Teachable Machine Pose Model + Audio</h2>
<button type="button" onclick="init()">Mulai Kamera</button>
<div><canvas id="canvas"></canvas></div>
<div id="label-container"></div>
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@1.3.1/dist/tf.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@teachablemachine/pose@0.8/dist/teachablemachine-pose.min.js"></script>
<script type="text/javascript">
const URL = "https://teachablemachine.withgoogle.com/models/irrvgnfP0/";
let model, webcam, ctx, labelContainer, maxPredictions;
const audioFiles = {
"kicawkicaw": new Audio('kicawkicaw.mp3'),
"semangat": new Audio('semangat.mp3'),
"berjuang": new Audio('berjuang.mp3'),
"sukses": new Audio('sukses.mp3'),
"hidup jokowi": new Audio('hidup jokowi.mp3')
};
let lastPlayedClass = "";
async function init() {
const modelURL = URL + "model.json";
const metadataURL = URL + "metadata.json";
model = await tmPose.load(modelURL, metadataURL);
maxPredictions = model.getTotalClasses();
const size = 400;
const flip = true;
webcam = new tmPose.Webcam(size, size, flip);
await webcam.setup();
await webcam.play();
window.requestAnimationFrame(loop);
const canvas = document.getElementById("canvas");
canvas.width = size; canvas.height = size;
ctx = canvas.getContext("2d");
labelContainer = document.getElementById("label-container");
for (let i = 0; i < maxPredictions; i++) {
labelContainer.appendChild(document.createElement("div"));
}
}
async function loop(timestamp) {
webcam.update();
await predict();
window.requestAnimationFrame(loop);
}
async function predict() {
const { pose, posenetOutput } = await model.estimatePose(webcam.canvas);
const prediction = await model.predict(posenetOutput);
for (let i = 0; i < maxPredictions; i++) {
const className = prediction[i].className;
const probability = prediction[i].probability;
labelContainer.childNodes[i].innerHTML = className + ": " + (probability * 100).toFixed(0) + "%";
if (probability > 0.90 && lastPlayedClass !== className) {
playVoice(className);
lastPlayedClass = className;
}
}
drawPose(pose);
}
function playVoice(className) {
Object.values(audioFiles).forEach(audio => {
audio.pause();
audio.currentTime = 0;
});
if (audioFiles[className]) {
audioFiles[className].play().catch(e => console.log("Audio play blocked"));
}
}
function drawPose(pose) {
if (webcam.canvas) {
ctx.drawImage(webcam.canvas, 0, 0);
if (pose) {
const minPartConfidence = 0.5;
tmPose.drawKeypoints(pose.keypoints, minPartConfidence, ctx);
tmPose.drawSkeleton(pose.keypoints, minPartConfidence, ctx);
}
}
}
</script>
</body>
</html> |