Introducción a las Redes Neuronales y Detección de Objetos en Tiempo Real

Bootcamp Fundamentos de IA:
Introducción al Machine Learning
Patty O’Callaghan
linkedin.com/in/patty-ocallaghan
@pattyneta
Semana 4

Recap
1
Introducción a las Redes Neuronales
2
Introducción a TensorFlow.js
4
Ejercicios prácticos
5
Tipos de arquitecturas de Redes
Neuronales
3

Agenda
Sessions through July
Semana 1 - Agosto 4
Introducción al
Aprendizaje
Automático
Semana 2 - Agosto 11
Preprocesamiento de
datos y entrenamiento
de modelos
Evaluación del
modelo y métricas de
rendimiento
Introducción a las
redes neuronales y
TensorFlow.js
● Introducción a
conceptos.
● Tipos de Aprendizaje:
Supervisado y No
Supervisado.
● Planteamiento de un
problema de ML.
● Algoritmos de ML más
comunes.
● Técnicas para tratar los
datos faltantes, variables
categóricas y
normalización de los
datos.
● Técnicas de
preprocesamiento de
datos, división de los
datos en conjuntos de
entrenamiento y de
prueba.
● Introducción al
entrenamiento de
modelos, funciones de
pérdida y algoritmos de
optimización.
● Ejercicios prácticos.
● Introducción a las
métricas de
rendimiento y
evaluación de modelos.
● Comprensión del
concepto de overfitting
y de las técnicas de
regularización.
● Introducción a las redes
neuronales: capas,
funciones de activación
y backpropagation.
● Visión general de los
distintos tipos de
arquitecturas de redes
neuronales.
● Introducción a
TensorFlow.js.

Confusion Matrix
# Patients: 10000 Predicted SICK Predicted NOT SICK
Actually SICK
1000
True Positives (TP)
200
False Negatives (FN)
Type II error
Actually NOT SICK
800
False Positives (FP)
Type I error
8000
True Negatives (TN)

Métricas de Clasificación - Precision
# Patients:
10000
Predicted
SICK
Predicted
NOT SICK
Actually
SICK
1000
True Positives
(TP)
200
False Negatives
(FN)
Type II error
Actually
NOT SICK
800
False Positives
(FP)
Type I error
8000
True Negatives
(TN)
The model correctly predicted
1000 sick patients
out of
1800 total predicted
sick patients
1000 correct sick
predictions
1800 total predicted = 0.55
sick patients
or 55% precision

Credits: geeksforgeeks.org
Bias y Variance

Introducción a las
Redes Neuronales

¿Qué es una Red Neural?
Inteligencia Artificial
Machine Learning
Redes Neuronales

¿Qué es una Red Neural?
Una red neuronal es una serie de algoritmos diseñados para reconocer
las relaciones subyacentes en un conjunto de datos mediante un
proceso que imita el funcionamiento del cerebro humano.
Image credit: Ahmed Gad

Componentes de una Red Neuronal

Tipos de arquitecturas de Redes Neuronales
● Perceptron
● Feedforward Neural Networks (FNN)
● Convolutional Neural Networks (CNN)
● Recurrent Neural Networks (RNN)

Tipos de Redes Neuronales - Perceptron
Image credit: dataspirant.com

Tipos de Redes Neuronales - Feedforward Neural Networks (FNN)
Image credit: learnopencv.com

Tipos de Redes Neuronales - Convolutional Neural Networks (CNN)
Image credit: analyticsvidhya.com

Tipos de Redes Neuronales - Recurrent Neural Networks (RNN)
Image credit: dataspirant.com

Sigue este link para abrir el Colab:
→ tinyurl.com/tfjs-workshop-esp
¡A programar! 🎉

¿Qué haremos en
este workshop?

y con un poco de creatividad…
Combínalo con tus conocimientos
en desarrollo web

Usa este conocimiento para darle vida a cualquier idea creativa,
como esta Pet Cam, para cuando estés fuera de casa

Antes de empezar
Abre el Paso 1 del codelab

● Construir una página web
● Usar machine learning en el
browser vía TensorFlow.js para
clasificar objetos comunes usando
el modelo COCO-SSD
● Dibujar cajas delimitadoras por
cada objeto detectado
Vas a…
● Cómo cargar un modelo pre-
entrenado de TensorFlow.js
● Cómo obtener datos de la
transmisión de una cámara web en
directo
● Cómo clasificar un fotograma de la
cámara para encontrar objetos
● Cómo resaltar los objetos
encontrados con sus cajas
delimitadoras en tiempo real
Aprenderás…

¿Qué es TensorFlow.js?

“Librería de código abierto para
Machine Learning, que se puede
utilizar en cualquier lugar donde
se ejecute JavaScript”
41

Reusa modelos existentes o crea los tuyos propios
Ejecuta, reentrena, crea
JavaScript pre-empaquetado o
convertido desde Python o TF Lite
Con transferencia de aprendizaje
Ejecuta modelos existentes Reentrena modelos existentes Crea modelos en JS
Entrena desde cero

Browser Móvil
Servidor Desktop
Electro
n
IoT
(via Node)

ML en el browser / lado del cliente significa:
Alta privacidad
Menor latencia
Alcance y escala de la web
Menor coste de servicio
También hay soporte a Node.js para el lado servidor y dispositivos IOT
Super poderes del lado del cliente
44

Core / Ops API
(Eager)
Layers API
Modelos
45

Core / Ops API
(Eager)
Layers API
Modelos
Cliente
WebGL
CPU WASM
Browser / PWA
46
Backends
Lado del
cliente

Core / Ops API
(Eager)
Layers API
Modelos
Cliente
Node.js
WebGL
CPU WASM
Browser / PWA
Servidor
Headless GL
TF CPU TF GPU
47
Los mismos backends del lado del
servidor que Python

Modelos pre-entrenados

Google optimiza o amplía continuamente esta colección
Modelos pre-entrenados
tensorflow.org/js/models
+ Clasificación de imágenes
+ Detección de objetos
+ Segmentación del
cuerpo
+ Estimación de pose
+ Detección de puntos de
referencia faciales
+ Estimación de la postura
de la mano
+ Toxicidad del texto
+ Codificación de frases
+ BERT Preguntas y
Respuestas
+ Detección de intención de
conversación
+ Reconocimiento de
comando de voz
+ Clasificador KNN
Visión Cuerpo humano Texto Sonido Otros

1. No es necesario reunir los datos de entrenamiento por ti misma
2.Creación rápida de prototipos con menor coste
3.Utiliza la investigación más avanzada
4.Más fácil de usar y buena documentación
5.Aprendizaje por transferencia para algunos modelos
Modelos pre-entrenados: Beneficios
50

51
¿Qué es COCO-SSD?
En pocas palabras, es el nombre de un
modelo ML de detección de objetos pre-
entrenado que utilizarás durante este
codelab.
Su objetivo es localizar e identificar múltiples
objetos en una sola imagen.
Entrenado en el conjunto de datos COCO
(Common Objects in Context)
Utiliza la arquitectura SSD (Single Shot
Detection)

Prepárate

tinyurl.com/tfjs-glitch-espanol
Abre esta web

54
“Remix” para hacer una
copia del proyecto

55
Ahora deberías tener una
copia como esta

Crea el esqueleto HTML

Copia el código en
index.html
57

<!DOCTYPE html>
<html lang="en">
<head>
<title>Detección de múltiples objetos utilizando un modelo pre-entrenado en
TensorFlow.js</title>
<meta charset="utf-8">

<link rel="stylesheet" href="style.css">
</head>
<body>
58
Entendiendo el HTML

<section id="demos" class="invisible">
<p>¡Acerca algunos objetos a tu cámara web para obtener una clasificación en tiempo
real!. Cuando estés lista, haz clic en "activar la cámara web" y acepta el acceso a la
cámara web cuando el navegador te lo pida (comprueba la parte superior izquierda de tu
ventana)</p>
<div id="liveView" class="camView">
<button id="webcamButton">Activar Webcam</button>
<video id="webcam" autoplay width="640" height="480"></video>
</div>
</section>
59
Entendiendo el HTML

<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs/dist/tf.min.js"
type="text/javascript"></script>

<script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/coco-ssd"></script>

<script src="script.js"></script>
</body>
</html>
60
Entendiendo el HTML

Agrega los estilos

Copia el código en
style.css
64

Crea el esqueleto JavaScript

Copia el código a
script.js
67

const video = document.getElementById('webcam'); // Stream.
const liveView = document.getElementById('liveView'); // Container.
const demosSection = document.getElementById('demos');
const enableWebcamButton = document.getElementById('webcamButton');
68
Referenciando elementos DOM

// Comprueba si el acceso a la cámara web es compatible.
function getUserMediaSupported() {
return !!(navigator.mediaDevices &&
navigator.mediaDevices.getUserMedia);
}
// Si se admite la cámara web, añadir un receptor de eventos al botón para que cuando el
usuario
// quiera activarlo para llamar a la función enableCam que
// definiremos en el siguiente paso.
if (getUserMediaSupported()) {
enableWebcamButton.addEventListener('click', enableCam);
} else {
console.warn('getUserMedia() is not supported by your browser');
}
// Placeholder de función para el próximo paso. Pegar sobre esto en el siguiente paso.
function enableCam(event) {
}
69
Comprobando soporte cámara web

// Habilitar la vista de la cámara web en vivo y comenzar la clasificación.
function enableCam(event) {
// Sólo continúa si el COCO-SSD ha terminado de cargarse.
if (!model) { return; }
// Ocultar el botón una vez pulsado.
event.target.classList.add('removed');
// Parámetros getUsermedia para forzar el vídeo pero no el audio.
const constraints = {
video: true
};
// Activar el flujo de video de la webcam.
navigator.mediaDevices.getUserMedia(constraints).then(function(stream) {
video.srcObject = stream;
video.addEventListener('loadeddata', predictWebcam);
});
}
70
Obtener el stream de la cámara
web

// Placeholder de función para el próximo paso.
function predictWebcam() {
}
// Finge que el modelo se ha cargado para que podamos probar el código de la webcam.
var model = true;
demosSection.classList.remove('invisible');
71
Prepárate para el Paso 8

Uso de un modelo ML
de TensorFlow.js

Copia el código en
script.js
74

// Almacenar el modelo resultante en el ámbito global de nuestra aplicación.
var model = undefined;
// Antes de poder utilizar la clase COCO-SSD debemos esperar a que termine de
// cargar. Los modelos de Machine Learning pueden ser grandes y tardan un momento
// para obtener todo lo necesario para su ejecución.
// Nota: cocoSsd es un objeto externo cargado desde nuestro index.html
// importación de etiquetas de script, así que ignora cualquier advertencia en Glitch.
cocoSsd.load().then(function (loadedModel) {
model = loadedModel;
// Mostrar la sección de demo ahora el modelo está listo para ser usado.
demosSection.classList.remove('invisible');
});
75
Carga del modelo

var children = [];
function predictWebcam() {
// Ahora vamos a empezar a clasificar un cuadro en el flujo de video.
model.detect(video).then(function (predictions) {
76
Predecir un fotograma de vídeo de
la cámara web

// Elimina cualquier resalto que hayamos hecho en el cuadro anterior.
for (let i = 0; i < children.length; i++) {
liveView.removeChild(children[i]);
}
children.splice(0);
77
Eliminar las cajas delimitadoras
anteriores

78
X,Y
Alto
Ancho
Cajas delimitadoras - 4 números
[x1, y1, ancho, alto]

// Ahora vamos a recorrer las predicciones y dibujarlas en la vista en vivo si
// tienen una puntuación de confianza alta.
for (let n = 0; n < predictions.length; n++) {
// Si estamos más de un 66% seguras de que lo hemos clasificado bien, ¡dibújalo!
if (predictions[n].score > 0.66) {
const p = document.createElement('p');
p.innerText = predictions[n].class + ' - with '
+ Math.round(parseFloat(predictions[n].score) * 100)
+ '% confidence.';
p.style = 'margin-left: ' + predictions[n].bbox[0] + 'px; margin-top: '
+ (predictions[n].bbox[1] - 10) + 'px; width: '
+ (predictions[n].bbox[2] - 10) + 'px; top: 0; left: 0;';
79
Posición + definir texto si > umbral

const highlighter = document.createElement('div');
highlighter.setAttribute('class', 'highlighter');
highlighter.style = 'left: ' + predictions[n].bbox[0] + 'px; top: '
+ predictions[n].bbox[1] + 'px; width: '
+ predictions[n].bbox[2] + 'px; height: '
+ predictions[n].bbox[3] + 'px;';
liveView.appendChild(highlighter);
liveView.appendChild(p);
children.push(highlighter);
children.push(p);
}
}
80
Dibujar caja delimitadora

// Llama a esta función de nuevo para seguir prediciendo cuando el navegador está listo.
window.requestAnimationFrame(predictWebcam);
});
}
81
Continuar loop de animación

82
Funciona!
Nota: Solo 3
líneas de código
para el ML. El
resto fue para
dibujar cajas y
chequeos el
browser

¡Felicitaciones! ¿y ahora qué?

Sitio web TensorFlow.js:
tensorflow.org/js
Más modelos pre-entrenados:
tensorflow.org/js/models
¡Inspírate! busca:
#MadeWithTFJS en las redes sociales
TensorFlow.js playlists en YouTube:
goo.gle/made-with-tfjs
Recursos
84

¡Gracias por unirte a este
Bootcamp introductorio de ML!
Sigamos en contacto→
¡Felicitaciones! 🎉

Introducción a las Redes Neuronales y Detección de Objetos en Tiempo Real

Recomendados

Recomendados

Más contenido relacionado

Similar a Introducción a las Redes Neuronales y Detección de Objetos en Tiempo Real

Similar a Introducción a las Redes Neuronales y Detección de Objetos en Tiempo Real (20)

Último

Último (17)

Introducción a las Redes Neuronales y Detección de Objetos en Tiempo Real