|
|
<br><br>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="teachable-machine-widget w-full max-w-2xl mx-auto my-8 font-sans bg-zinc-950 text-zinc-100 rounded-2xl overflow-hidden border border-zinc-800 shadow-2xl">
|
|
|
|
|
|
|
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
|
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@4.22.0/dist/tf.min.js"></script>
|
|
|
<script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/mobilenet@2.1.1"></script>
|
|
|
<script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/knn-classifier@1.2.6"></script>
|
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
|
|
|
|
|
|
<style>
|
|
|
|
|
|
body {
|
|
|
background-color: black;
|
|
|
}
|
|
|
|
|
|
.teachable-machine-widget { font-family: 'Inter', sans-serif; }
|
|
|
.teachable-machine-widget button { touch-action: manipulation; user-select: none; -webkit-user-select: none; }
|
|
|
.tm-pulse { animation: tm-pulse-ring 1.5s cubic-bezier(0.24, 0, 0.38, 1) infinite; }
|
|
|
@keyframes tm-pulse-ring {
|
|
|
0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.2); }
|
|
|
70% { box-shadow: 0 0 0 6px rgba(255, 255, 255, 0); }
|
|
|
100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
|
|
|
}
|
|
|
</style>
|
|
|
|
|
|
|
|
|
<div class="px-5 py-4 bg-zinc-900 border-b border-zinc-800 flex items-center justify-between">
|
|
|
<div class="flex items-center gap-3">
|
|
|
<div class="w-3 h-3 rounded-full bg-indigo-500 shadow-[0_0_10px_rgba(99,102,241,0.5)]"></div>
|
|
|
<h2 class="text-sm font-semibold tracking-wide text-zinc-200 uppercase">Teachable Machine</h2>
|
|
|
</div>
|
|
|
<div id="tm-status-badge" class="flex items-center gap-2 px-2 py-1 bg-zinc-950 rounded text-[10px] font-medium text-zinc-500 border border-zinc-800">
|
|
|
<span class="w-1.5 h-1.5 rounded-full bg-zinc-600"></span>
|
|
|
<span id="tm-status-text">Loading...</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
<div class="p-5 bg-zinc-950/50">
|
|
|
|
|
|
|
|
|
<div class="relative rounded-xl overflow-hidden bg-black border border-zinc-800 aspect-video shadow-inner">
|
|
|
<video id="tm-webcam" class="w-full h-full object-cover transform scale-x-[-1]" autoplay playsinline muted></video>
|
|
|
|
|
|
|
|
|
<div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/90 to-transparent pt-12 pb-3 px-4 flex items-end justify-between">
|
|
|
<div>
|
|
|
<div class="text-[10px] text-zinc-400 uppercase tracking-wider mb-0.5">I see</div>
|
|
|
<div id="tm-result" class="text-xl font-bold text-white leading-none">...</div>
|
|
|
</div>
|
|
|
<div class="text-right">
|
|
|
<div class="text-[10px] text-zinc-400 uppercase tracking-wider mb-1">Confidence</div>
|
|
|
<div class="w-24 h-1.5 bg-zinc-800 rounded-full overflow-hidden">
|
|
|
<div id="tm-conf-bar" class="h-full bg-indigo-500 w-0 transition-all duration-300"></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
<div class="mt-4 grid grid-cols-3 gap-3">
|
|
|
|
|
|
|
|
|
<button id="tm-btn-a" class="group relative flex flex-col items-center justify-center p-3 rounded-xl bg-zinc-900 border border-zinc-800 hover:border-red-500/50 hover:bg-zinc-800 transition-all active:scale-[0.98]">
|
|
|
<div class="absolute inset-0 rounded-xl border-2 border-transparent group-hover:border-red-500/20 pointer-events-none"></div>
|
|
|
<div class="mb-1 text-xs font-medium text-red-400">Class A</div>
|
|
|
<div class="text-[10px] text-zinc-500">Red Object</div>
|
|
|
<div class="mt-2 px-2 py-0.5 bg-zinc-950 rounded text-[10px] text-zinc-300 font-mono border border-zinc-800">
|
|
|
<span id="tm-count-a">0</span> samples
|
|
|
</div>
|
|
|
</button>
|
|
|
|
|
|
|
|
|
<button id="tm-btn-b" class="group relative flex flex-col items-center justify-center p-3 rounded-xl bg-zinc-900 border border-zinc-800 hover:border-blue-500/50 hover:bg-zinc-800 transition-all active:scale-[0.98]">
|
|
|
<div class="absolute inset-0 rounded-xl border-2 border-transparent group-hover:border-blue-500/20 pointer-events-none"></div>
|
|
|
<div class="mb-1 text-xs font-medium text-blue-400">Class B</div>
|
|
|
<div class="text-[10px] text-zinc-500">Blue Object</div>
|
|
|
<div class="mt-2 px-2 py-0.5 bg-zinc-950 rounded text-[10px] text-zinc-300 font-mono border border-zinc-800">
|
|
|
<span id="tm-count-b">0</span> samples
|
|
|
</div>
|
|
|
</button>
|
|
|
|
|
|
|
|
|
<button id="tm-btn-i" class="group relative flex flex-col items-center justify-center p-3 rounded-xl bg-zinc-900 border border-zinc-800 hover:border-zinc-500/50 hover:bg-zinc-800 transition-all active:scale-[0.98]">
|
|
|
<div class="absolute inset-0 rounded-xl border-2 border-transparent group-hover:border-zinc-500/20 pointer-events-none"></div>
|
|
|
<div class="mb-1 text-xs font-medium text-zinc-400">Background</div>
|
|
|
<div class="text-[10px] text-zinc-500">Idle</div>
|
|
|
<div class="mt-2 px-2 py-0.5 bg-zinc-950 rounded text-[10px] text-zinc-300 font-mono border border-zinc-800">
|
|
|
<span id="tm-count-i">0</span> samples
|
|
|
</div>
|
|
|
</button>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
<div class="mt-4 flex items-center justify-between text-[10px] text-zinc-500">
|
|
|
<p>Hold buttons to train</p>
|
|
|
<button id="tm-reset-btn" class="hover:text-red-400 transition-colors underline decoration-zinc-800 hover:decoration-red-900">
|
|
|
Reset Data
|
|
|
</button>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
<script>
|
|
|
(function() {
|
|
|
|
|
|
const TM_LABELS = ["Class A", "Class B", "Background"];
|
|
|
const TM_TOPK = 10;
|
|
|
let tmNet = null;
|
|
|
let tmKnn = null;
|
|
|
let tmIsTraining = false;
|
|
|
let tmTrainingClass = -1;
|
|
|
let tmPredicting = false;
|
|
|
|
|
|
|
|
|
const get = (id) => document.getElementById(id);
|
|
|
const els = {
|
|
|
webcam: get('tm-webcam'),
|
|
|
statusText: get('tm-status-text'),
|
|
|
statusBadge: get('tm-status-badge'),
|
|
|
result: get('tm-result'),
|
|
|
confBar: get('tm-conf-bar'),
|
|
|
counts: [get('tm-count-a'), get('tm-count-b'), get('tm-count-i')],
|
|
|
btns: [get('tm-btn-a'), get('tm-btn-b'), get('tm-btn-i')],
|
|
|
reset: get('tm-reset-btn')
|
|
|
};
|
|
|
|
|
|
function setStatus(msg, type="neutral") {
|
|
|
els.statusText.textContent = msg;
|
|
|
if(type === 'ready') els.statusBadge.querySelector('span').className = "w-1.5 h-1.5 rounded-full bg-emerald-500 shadow-[0_0_8px_rgba(16,185,129,0.6)]";
|
|
|
else if(type === 'loading') els.statusBadge.querySelector('span').className = "w-1.5 h-1.5 rounded-full bg-amber-500 animate-pulse";
|
|
|
else els.statusBadge.querySelector('span').className = "w-1.5 h-1.5 rounded-full bg-zinc-600";
|
|
|
}
|
|
|
|
|
|
function updateUI(label, conf) {
|
|
|
if (!label || label === "—") {
|
|
|
els.result.textContent = "...";
|
|
|
els.result.className = "text-xl font-bold text-zinc-500 leading-none";
|
|
|
els.confBar.style.width = "0%";
|
|
|
return;
|
|
|
}
|
|
|
|
|
|
els.result.textContent = label;
|
|
|
let color = "text-white";
|
|
|
let barColor = "bg-indigo-500";
|
|
|
|
|
|
if(label === TM_LABELS[0]) { color = "text-red-400"; barColor = "bg-red-500"; }
|
|
|
if(label === TM_LABELS[1]) { color = "text-blue-400"; barColor = "bg-blue-500"; }
|
|
|
if(label === TM_LABELS[2]) { color = "text-zinc-400"; barColor = "bg-zinc-500"; }
|
|
|
|
|
|
els.result.className = `text-xl font-bold ${color} leading-none transition-colors duration-200`;
|
|
|
els.confBar.className = `h-full ${barColor} transition-all duration-200`;
|
|
|
els.confBar.style.width = `${conf}%`;
|
|
|
}
|
|
|
|
|
|
function updateCounts() {
|
|
|
const counts = tmKnn ? tmKnn.getClassExampleCount() : {};
|
|
|
els.counts.forEach((el, idx) => el.textContent = counts[idx] || 0);
|
|
|
}
|
|
|
|
|
|
async function init() {
|
|
|
try {
|
|
|
setStatus("Camera...", "loading");
|
|
|
|
|
|
|
|
|
const stream = await navigator.mediaDevices.getUserMedia({ video: true, audio: false });
|
|
|
els.webcam.srcObject = stream;
|
|
|
await new Promise(r => els.webcam.onloadedmetadata = () => r());
|
|
|
|
|
|
|
|
|
setStatus("Models...", "loading");
|
|
|
tmKnn = knnClassifier.create();
|
|
|
tmNet = await mobilenet.load({ version: 2, alpha: 0.50 });
|
|
|
|
|
|
|
|
|
els.btns.forEach((btn, idx) => {
|
|
|
const start = (e) => {
|
|
|
if (e.cancelable) e.preventDefault();
|
|
|
tmIsTraining = true;
|
|
|
tmTrainingClass = idx;
|
|
|
btn.classList.add("tm-pulse", "border-white");
|
|
|
};
|
|
|
const stop = (e) => {
|
|
|
if (e.cancelable) e.preventDefault();
|
|
|
tmIsTraining = false;
|
|
|
tmTrainingClass = -1;
|
|
|
btn.classList.remove("tm-pulse", "border-white");
|
|
|
};
|
|
|
btn.addEventListener("mousedown", start);
|
|
|
btn.addEventListener("mouseup", stop);
|
|
|
btn.addEventListener("mouseleave", stop);
|
|
|
btn.addEventListener("touchstart", start, {passive:false});
|
|
|
btn.addEventListener("touchend", stop, {passive:false});
|
|
|
});
|
|
|
|
|
|
els.reset.addEventListener('click', () => {
|
|
|
if(tmKnn) tmKnn.clearAllClasses();
|
|
|
updateCounts();
|
|
|
updateUI(null, 0);
|
|
|
});
|
|
|
|
|
|
setStatus("Ready", "ready");
|
|
|
|
|
|
|
|
|
trainLoop();
|
|
|
predictLoop();
|
|
|
tmPredicting = true;
|
|
|
|
|
|
} catch (e) {
|
|
|
console.error(e);
|
|
|
setStatus("Error", "error");
|
|
|
}
|
|
|
}
|
|
|
|
|
|
async function trainLoop() {
|
|
|
while (true) {
|
|
|
if (tmIsTraining && tmTrainingClass !== -1) {
|
|
|
const img = tf.browser.fromPixels(els.webcam);
|
|
|
const activation = tmNet.infer(img, true);
|
|
|
tmKnn.addExample(activation, tmTrainingClass);
|
|
|
img.dispose();
|
|
|
activation.dispose();
|
|
|
updateCounts();
|
|
|
}
|
|
|
await new Promise(r => setTimeout(r, 70));
|
|
|
}
|
|
|
}
|
|
|
|
|
|
async function predictLoop() {
|
|
|
while (true) {
|
|
|
if (tmPredicting && tmKnn.getNumClasses() > 0) {
|
|
|
const img = tf.browser.fromPixels(els.webcam);
|
|
|
const activation = tmNet.infer(img, true);
|
|
|
try {
|
|
|
const res = await tmKnn.predictClass(activation, TM_TOPK);
|
|
|
const label = TM_LABELS[res.classIndex];
|
|
|
const conf = res.confidences[res.classIndex] * 100;
|
|
|
updateUI(label, conf);
|
|
|
} catch(e) {}
|
|
|
img.dispose();
|
|
|
activation.dispose();
|
|
|
}
|
|
|
await tf.nextFrame();
|
|
|
}
|
|
|
}
|
|
|
|
|
|
init();
|
|
|
})();
|
|
|
</script>
|
|
|
</div>
|
|
|
|
