🚧 Organizar componentes

enflujo · Jan 17, 2025 · 6a82def · 6a82def
1 parent 3a354f3
commit 6a82def
Show file tree

Hide file tree

Showing 3 changed files with 105 additions and 97 deletions.
diff --git a/src/componentes/cargarModelo.ts b/src/componentes/cargarModelo.ts
@@ -0,0 +1,14 @@
+import { FilesetResolver, ObjectDetector } from '@mediapipe/tasks-vision';
+
+export default async function cargarModelo(nivelConfianza: number) {
+  const vision = await FilesetResolver.forVisionTasks('https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision/wasm');
+
+  return await ObjectDetector.createFromOptions(vision, {
+    baseOptions: {
+      modelAssetPath: `https://storage.googleapis.com/mediapipe-models/object_detector/efficientdet_lite0/float16/1/efficientdet_lite0.tflite`,
+      delegate: 'GPU',
+    },
+    scoreThreshold: nivelConfianza,
+    runningMode: 'VIDEO',
+  });
+}
diff --git a/src/componentes/predicciones.ts b/src/componentes/predicciones.ts
@@ -1,76 +1,80 @@
 import type { Aparicion, Cuadro } from '../tipos';
 import categoriasConColor from './categorias';
 
-const lienzo2 = document.getElementById('lienzo2') as HTMLCanvasElement;
-const lienzo3 = document.getElementById('lienzo3') as HTMLCanvasElement;
-const ctx3 = lienzo3.getContext('2d');
 const listaCategorias = document.getElementById('listaCategorias') as HTMLDivElement;
 let categorias: { [categoria: string]: { contador: HTMLSpanElement; apariciones: Aparicion[] } } = {};
 
-export default {
-  reiniciar: () => {
-    listaCategorias.innerHTML = '';
-    categorias = {};
-  },
-
-  agregar: (nombreCategoria: string, confianza: number, area: Cuadro, tiempo: number) => {
-    const categoria = categorias[nombreCategoria];
-
-    if (!categoria) {
-      const elemento = document.createElement('div');
-      const contador = document.createElement('span');
-      const barra = document.createElement('span');
-      const color = categoriasConColor[nombreCategoria];
-
-      elemento.className = 'categoria';
-      elemento.innerText = nombreCategoria;
-      contador.className = 'contadorCategoria';
-      contador.innerText = '1';
-      barra.className = 'barraColor';
-      barra.style.backgroundColor = color;
-
-      elemento.appendChild(barra);
-      elemento.appendChild(contador);
-      listaCategorias.appendChild(elemento);
-
-      elemento.onclick = () => {
-        console.log(`Apariciones de categoría ${nombreCategoria}`, categorias[nombreCategoria].apariciones);
-      };
-
-      elemento.onmouseenter = () => {
-        if (!ctx3) return;
-
-        lienzo2.classList.remove('visible');
-        lienzo3.classList.add('visible');
-
-        ctx3.clearRect(0, 0, lienzo3.width, lienzo3.height);
-
-        const { apariciones } = categorias[nombreCategoria];
-
-        if (apariciones && apariciones.length) {
-          ctx3.fillStyle = color;
-          ctx3.globalAlpha = 0.05;
-
-          apariciones.forEach(({ area }) => {
-            ctx3.fillRect(area.x, area.y, area.alto, area.alto);
-          });
-        }
-      };
-
-      elemento.onmouseleave = () => {
-        lienzo2.classList.add('visible');
-        lienzo3.classList.remove('visible');
-      };
-
-      categorias[nombreCategoria] = { contador, apariciones: [] };
-    } else {
-      categoria.contador.innerText = `${categoria.apariciones.length + 1}`;
-    }
-
-    categorias[nombreCategoria].apariciones.push({ tiempo, area, confianza });
-  },
-
-  apariciones: () => {
-    return categorias.apariciones;
-  },
-};
+export default function utilidadPredicciones(
+  lienzoEspectros: HTMLCanvasElement,
+  lienzoEspectroCategoria: HTMLCanvasElement
+) {
+  const ctx3 = lienzoEspectroCategoria.getContext('2d');
+
+  return {
+    reiniciar: () => {
+      listaCategorias.innerHTML = '';
+      categorias = {};
+    },
+
+    agregar: (nombreCategoria: string, confianza: number, area: Cuadro, tiempo: number) => {
+      const categoria = categorias[nombreCategoria];
+
+      if (!categoria) {
+        const elemento = document.createElement('div');
+        const contador = document.createElement('span');
+        const barra = document.createElement('span');
+        const color = categoriasConColor[nombreCategoria];
+
+        elemento.className = 'categoria';
+        elemento.innerText = nombreCategoria;
+        contador.className = 'contadorCategoria';
+        contador.innerText = '1';
+        barra.className = 'barraColor';
+        barra.style.backgroundColor = color;
+
+        elemento.appendChild(barra);
+        elemento.appendChild(contador);
+        listaCategorias.appendChild(elemento);
+
+        elemento.onclick = () => {
+          console.log(`Apariciones de categoría ${nombreCategoria}`, categorias[nombreCategoria].apariciones);
+        };
+
+        elemento.onmouseenter = () => {
+          if (!ctx3) return;
+
+          lienzoEspectros.classList.remove('visible');
+          lienzoEspectroCategoria.classList.add('visible');
+
+          ctx3.clearRect(0, 0, lienzoEspectroCategoria.width, lienzoEspectroCategoria.height);
+
+          const { apariciones } = categorias[nombreCategoria];
+
+          if (apariciones && apariciones.length) {
+            ctx3.fillStyle = color;
+            ctx3.globalAlpha = 0.05;
+
+            apariciones.forEach(({ area }) => {
+              ctx3.fillRect(area.x, area.y, area.alto, area.alto);
+            });
+          }
+        };
+
+        elemento.onmouseleave = () => {
+          lienzoEspectros.classList.add('visible');
+          lienzoEspectroCategoria.classList.remove('visible');
+        };
+
+        categorias[nombreCategoria] = { contador, apariciones: [] };
+      } else {
+        categoria.contador.innerText = `${categoria.apariciones.length + 1}`;
+      }
+
+      categorias[nombreCategoria].apariciones.push({ tiempo, area, confianza });
+    },
+
+    apariciones: () => {
+      return categorias.apariciones;
+    },
+  };
+}
diff --git a/src/programa.ts b/src/programa.ts
@@ -1,24 +1,27 @@
 import './scss/estilos.scss';
 import { imprimirMensaje } from './componentes/mensajes';
 import { controlesPantallaCompleta } from './componentes/pantallaCompleta';
-import { FilesetResolver, ObjectDetector } from '@mediapipe/tasks-vision';
-import predicciones from './componentes/predicciones';
+
+import utilidadPredicciones from './componentes/predicciones';
 import categoriasConColor from './componentes/categorias';
 import { crearMenuVideos } from './componentes/ListaVideos';
+import cargarModelo from './componentes/cargarModelo';
 
 const video = document.getElementById('video') as HTMLVideoElement;
 const lienzo = document.getElementById('lienzo1') as HTMLCanvasElement;
 const ctx = lienzo.getContext('2d') as CanvasRenderingContext2D;
-const lienzo2 = document.getElementById('lienzo2') as HTMLCanvasElement;
-const ctx2 = lienzo2.getContext('2d') as CanvasRenderingContext2D;
-const lienzo3 = document.getElementById('lienzo3') as HTMLCanvasElement;
+const lienzoEspectros = document.getElementById('lienzo2') as HTMLCanvasElement;
+const ctx2 = lienzoEspectros.getContext('2d') as CanvasRenderingContext2D;
+const lienzoEspectroCategoria = document.getElementById('lienzo3') as HTMLCanvasElement;
 
 let contadorAnim: number;
 let nombreVideo = '';
 let escala = { x: 1, y: 1 };
 const verVideo = document.getElementById('verVideo');
 const verVis = document.getElementById('verVis');
 
+const predicciones = utilidadPredicciones(lienzoEspectros, lienzoEspectroCategoria);
+
 if (verVideo) {
   verVideo.onclick = () => {
     const activo = verVideo.classList.contains('activo');
@@ -39,10 +42,10 @@ if (verVis) {
 
     if (activo) {
       verVis.classList.remove('activo');
-      lienzo2.classList.remove('visible');
+      lienzoEspectros.classList.remove('visible');
     } else {
       verVis.classList.add('activo');
-      lienzo2.classList.add('visible');
+      lienzoEspectros.classList.add('visible');
     }
   };
 }
@@ -62,22 +65,14 @@ function cargarVideo(nombre: string, formato: string) {
 async function inicio() {
   const barraConfianza = document.getElementById('barraConfianza') as HTMLInputElement;
   const valorConfianza = document.getElementById('valorConfianza') as HTMLInputElement;
+  let reloj: ReturnType<typeof setTimeout> | null = null;
 
   imprimirMensaje('Loading model, this can take some time...');
-  const vision = await FilesetResolver.forVisionTasks('https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision/wasm');
-
-  const modelo = await ObjectDetector.createFromOptions(vision, {
-    baseOptions: {
-      modelAssetPath: `https://storage.googleapis.com/mediapipe-models/object_detector/efficientdet_lite0/float16/1/efficientdet_lite0.tflite`,
-      delegate: 'GPU',
-    },
-    scoreThreshold: +barraConfianza.value,
-    runningMode: 'VIDEO',
-  });
-
-  imprimirMensaje('Model loaded, ready to play videos.');
-
+  const modelo = await cargarModelo(+barraConfianza.value);
+  imprimirMensaje('Model loaded, ready to play videos. Please select one from the list below.');
   await crearMenuVideos(cargarVideo);
+  controlesPantallaCompleta();
+  actualizarConfianza();
 
   video.onloadstart = () => {
     const nombreArchivo = video.querySelector('source')?.src.split('/').pop();
@@ -141,8 +136,6 @@ async function inicio() {
     contadorAnim = requestAnimationFrame(verVideo);
   }
 
-  let reloj: ReturnType<typeof setTimeout> | null = null;
-
   async function actualizarConfianza() {
     const valor = +barraConfianza.value;
     valorConfianza.innerText = `${Math.floor(valor * 100)}%`;
@@ -156,14 +149,11 @@ async function inicio() {
     }, 500);
   }
 
-  controlesPantallaCompleta();
-  actualizarConfianza();
-
   barraConfianza.oninput = actualizarConfianza;
 
   function escalar() {
-    video.width = lienzo.width = lienzo2.width = lienzo3.width = video.clientWidth;
-    video.height = lienzo.height = lienzo2.height = lienzo3.height = video.clientHeight;
+    video.width = lienzo.width = lienzoEspectros.width = lienzoEspectroCategoria.width = video.clientWidth;
+    video.height = lienzo.height = lienzoEspectros.height = lienzoEspectroCategoria.height = video.clientHeight;
 
     if (lienzo.width > video.videoWidth) escala.x = lienzo.width / video.videoWidth;
     else escala.x = video.videoWidth / lienzo.width;