Spaces:

YOUSEF2434
/

Computer-Vision-Lab

Paused

App Files Files Community

YOUSEF2434 commited on 13 days ago

Commit

2666ddd

verified ·

1 Parent(s): 84624f1

Upload make-model.html

Browse files

Files changed (1) hide show

make-model.html +255 -0

make-model.html ADDED Viewed

	@@ -0,0 +1,255 @@

+<br><br>
+<!-- Save as: teachable-machine-widget.html -->
+<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">
+  <!-- Dependencies (Load these in your main page <head> if possible) -->
+  <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;
+}
+    /* Scoped styles for the widget */
+    .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>
+  <!-- Widget Header -->
+  <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>
+  <!-- Main Content Area -->
+  <div class="p-5 bg-zinc-950/50">
+    <!-- Video & Prediction Overlay Wrapper -->
+    <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>
+      <!-- Prediction Overlay (Bottom of 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>
+    <!-- Controls Compact Grid -->
+    <div class="mt-4 grid grid-cols-3 gap-3">
+      <!-- Button A -->
+      <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 B -->
+      <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 Idle -->
+      <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>
+    <!-- Footer / Reset -->
+    <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>
+  <!-- Logic -->
+  <script>
+    (function() {
+      // Namespace variables to avoid conflicts if you have multiple scripts on the page
+      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;
+      // Elements
+      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");
+          // 1. Setup Webcam
+          const stream = await navigator.mediaDevices.getUserMedia({ video: true, audio: false });
+          els.webcam.srcObject = stream;
+          await new Promise(r => els.webcam.onloadedmetadata = () => r());
+          // 2. Load Models
+          setStatus("Models...", "loading");
+          tmKnn = knnClassifier.create();
+          tmNet = await mobilenet.load({ version: 2, alpha: 0.50 });
+          // 3. Setup Events
+          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");
+          // 4. Loops
+          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)); // Throttle training
+        }
+      }
+      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>