🚑 Pasar a typescript y limpiar redundancias

enflujo · May 30, 2023 · eab5fa6 · eab5fa6
1 parent 98b83ed
commit eab5fa6
Show file tree

Hide file tree

Showing 10 changed files with 236 additions and 255 deletions.
diff --git a/estaticos/videos/README.md b/estaticos/videos/README.md
diff --git a/index.html b/index.html
@@ -52,7 +52,7 @@
     ></script>
   </head>
   <body>
-    <main>
+    <main id="contenedor">
       <div id="controles">
         <div id="mensaje"></div>
         <ul id="listaVideos"></ul>
@@ -64,15 +64,15 @@
         <button id="iconoFullScreen">Full screen</button>
         <div id="configuracionConfianza">
           <p>Confidence level: <span id="valorConfianza"></span></p>
-          <input type="range" min="0.01" max="1.0" step="0.01" value="0.5" class="slider" id="barraDeRangos" />
+          <input id="barraDeRangos" type="range" min="0.01" max="1.0" step="0.01" value="0.5" class="slider" />
         </div>
-        <div class="confianza" id="confianzaInfo">
+        <div id="confianzaInfo">
           <p class="info">
             Setting a low confidence level makes the model detect more "objects" but makes more mistakes, while high
             confidence detects less "objects" but the model has more confidence it is detecting the correct object. The
             default is 50% - just in the middle of confidence and ability to detect.
           </p>
-          <input type="button" id="downloadbutton" value="Download Result" />
+          <input id="downloadbutton" type="button" value="Download Result" />
         </div>
         <div id="listaCategorias"></div>
       </div>
@@ -83,6 +83,6 @@
       </div> -->
     </main>
 
-    <script type="module" src="/src/programa.js"></script>
+    <script type="module" src="/src/programa.ts"></script>
   </body>
 </html>
diff --git a/package.json b/package.json
@@ -18,10 +18,13 @@
     "postcss": "^8.4.21",
     "prettier": "^2.8.3",
     "sass": "^1.57.1",
+    "typescript": "^5.0.4",
     "vite": "^4.3.9"
   },
   "dependencies": {
     "@tensorflow-models/coco-ssd": "^2.2.2",
-    "@tensorflow/tfjs": "^4.2.0"
+    "@tensorflow/tfjs": "^4.2.0",
+    "@tensorflow/tfjs-backend-cpu": "^4.6.0",
+    "@tensorflow/tfjs-backend-webgl": "^4.6.0"
   }
 }
diff --git a/src/componentes/mensajes.ts b/src/componentes/mensajes.ts
@@ -0,0 +1,5 @@
+const contenedorMensaje = document.getElementById('mensaje') as HTMLDivElement;
+
+export function imprimirMensaje(mensaje: string) {
+  contenedorMensaje.innerText = mensaje;
+}
diff --git a/src/componentes/pantallaCompleta.ts b/src/componentes/pantallaCompleta.ts
@@ -0,0 +1,21 @@
+const contenedor = document.getElementById('contenedor') as HTMLElement;
+const controles = document.getElementById('controles') as HTMLDivElement;
+const iconoFullScreen = document.getElementById('iconoFullScreen') as HTMLButtonElement;
+let pantallaCompleta = false;
+
+function cambiarModoPantalla() {
+  if (!pantallaCompleta) {
+    controles.classList.add('oculto');
+    contenedor.classList.add('pantallaCompleta');
+    iconoFullScreen.innerText = 'Exit full screen';
+  } else {
+    controles.classList.remove('oculto');
+    contenedor.classList.remove('pantallaCompleta');
+    iconoFullScreen.innerText = 'Full screen';
+  }
+  pantallaCompleta = !pantallaCompleta;
+}
+
+export function controlesPantallaCompleta() {
+  iconoFullScreen.onclick = cambiarModoPantalla;
+}
diff --git a/src/componentes/predicciones.ts b/src/componentes/predicciones.ts
diff --git a/src/programa.js b/src/programa.js