Spaces:
Sleeping
Sleeping
| <html> | |
| <head> | |
| <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/@teachablemachine/image"></script> | |
| </head> | |
| <body> | |
| <h2>Posture Detector</h2> | |
| <video id="webcam" autoplay playsinline width="400" height="300"></video> | |
| <p id="label">Loading model...</p> | |
| <script> | |
| const URL = "./"; | |
| let model, webcam; | |
| async function init() { | |
| model = await tmImage.load(URL + "model.json", URL + "metadata.json"); | |
| const video = document.getElementById("webcam"); | |
| const labelEl = document.getElementById("label"); | |
| navigator.mediaDevices.getUserMedia({ video: true }).then(stream => { | |
| video.srcObject = stream; | |
| }); | |
| video.addEventListener("loadeddata", () => { | |
| setInterval(async () => { | |
| const prediction = await model.predict(video); | |
| labelEl.innerHTML = prediction | |
| .map(p => `${p.className}: ${(p.probability * 100).toFixed(1)}%`) | |
| .join("<br>"); | |
| }, 300); | |
| }); | |
| } | |
| init(); | |
| </script> | |
| </body> | |
| </html> | |