Usa tus modelos de Tensorflow en páginas web | Exportación a Tensorflow.js
Summary
TLDREl script del video ofrece una visión detallada sobre cómo exportar modelos de aprendizaje profundo entrenados en Python y utilizarlos en un navegador web. Se abordan tres modelos de distinto nivel de complejidad: un modelo simple que convierte grados Celsius a Fahrenheit, uno que reconoce números escritos a mano y permite dibujar en el navegador, y un modelo avanzado que utiliza la cámara del celular para clasificar en tiempo real si lo capturado es un perro o un gato. El video también explica el proceso de exportación de modelos desde Python, la instalación de librerías necesarias, la conversión de modelos a un formato compatible con TensorFlow.js, y cómo cargar y utilizar estos modelos en una página web para realizar predicciones. Además, se destaca la importancia de la integración con JavaScript para el manejo de entradas y la visualización de resultados, así como la adaptabilidad de estos modelos para su uso en dispositivos móviles.
Takeaways
- 📈 Se discute cómo exportar modelos entrenados en Python para utilizarlos en un navegador web y en dispositivos móviles.
- 🔢 Se explicará la integración de tres modelos de distinta complejidad: una red simple de conversión de temperatura, una red que reconoce números escritos a mano y una red avanzada para clasificar imágenes en tiempo real.
- 📚 No se profundiza en la arquitectura o los datos de entrenamiento de los modelos, sino en su exportación y uso.
- ⚙️ Se muestra el proceso de exportación de modelos utilizando la función `save` y su posterior conversión a un formato compatible con TensorFlow.js.
- 📂 Se menciona la instalación de la librería `tensor_js` para realizar la conversión de modelos y la creación de una carpeta para los archivos resultantes.
- 💾 Se describe cómo descargar los archivos necesarios para utilizar el modelo en la computadora y cómo integrarlos en una página web.
- 🌐 Se destaca la importancia de servir la página web a través de un servidor HTTP para evitar problemas de carga asíncrona.
- 📱 Se demuestra cómo hacer predicciones en tiempo real en el navegador utilizando un deslizador para ingresar los grados Celsius y obtener los grados Fahrenheit.
- 🎨 Se utiliza un canvas para dibujar números escritos a mano y se explica cómo preparar la entrada para la red neuronal convolucional.
- 📹 Se explora la creación de una aplicación que utiliza la cámara del móvil para clasificar en tiempo real si una imagen es de un perro o un gato.
- 🔗 Se ofrece información sobre cómo acceder a la página web desde un dispositivo móvil utilizando un túnel HTTPS y se mencionan las consideraciones para que funcione correctamente.
- 📝 Se invita a los espectadores a dejar comentarios si desean un análisis más detallado de algún aspecto del proceso o si tienen dudas.
Q & A
¿Qué modelos se van a exportar en el video?
-Se van a exportar tres modelos de distinta complejidad: uno que convierte grados Celsius a Fahrenheit, otro que reconoce números escritos a mano y un tercero avanzado que utiliza la cámara del celular para clasificar en tiempo real si lo que ve es un perro o un gato.
¿Cómo se guarda el modelo entrenado en Python?
-Para guardar el modelo entrenado, se utiliza la función 'save' que guarda todos los pesos y sesgos de la red, el estado del optimizador, etc. en un solo archivo con la extensión 'h5'.
¿Qué librería se necesita para convertir el modelo a un formato compatible con TensorFlow.js?
-Se necesita instalar la librería 'tensor_js' que incluye un conversor para realizar la conversión del modelo guardado en 'h5' a un formato compatible con TensorFlow.js.
¿Cómo se carga el modelo en una página web?
-Para cargar el modelo en una página web, se utiliza TensorFlow.js y se importan los archivos generados por el conversor. Se indica la ubicación del archivo 'json' y se carga el modelo en una variable llamada 'model'.
¿Cómo se puede hacer que la página web cargue el modelo de forma asíncrona?
-Para manejar la carga asíncrona del modelo, se puede abrir el archivo HTML desde un servidor web local, como el que se inicia con el comando 'python -m http.server 8000' en una terminal o línea de comandos.
¿Cómo se realiza la conversión de un número escrito a mano en una entrada que la red de reconocimiento de dígitos pueda entender?
-Se utiliza un canvas para dibujar el número y luego se copia la imagen a otro canvas de 28x28 píxeles que es el tamaño esperado por la red. Se convierte cada píxel en un valor de 0 a 1 y se agregan a un arreglo en forma de matriz 28x28.
¿Cómo se realiza una predicción en tiempo real con el modelo de clasificación de perros y gatos?
-Se utiliza la cámara del celular y se captura una imagen que se copia a un canvas del tamaño esperado por la red. Se crea un tensor de cuatro dimensiones con los datos de la imagen y se realiza la predicción. El resultado se muestra en un campo de resultados.
¿Qué formato de archivo se genera después de convertir el modelo con tensor_js?
-Después de la conversión, se generan varios archivos, incluyendo un archivo '.bin' y un archivo '.json', que son necesarios para utilizar el modelo en TensorFlow.js.
¿Cómo se puede hacer para que la página web sea accesible desde un dispositivo móvil?
-Para acceder a la página web desde un dispositivo móvil, se puede utilizar un servidor local iniciado con Python o configurar un túnel HTTPS usando herramientas como ngrok para exponer el servidor local en una URL accesible desde Internet.
¿Por qué se necesita normalizar los valores de píxeles al crear el tensor para la red de clasificación de perros y gatos?
-Los valores de píxeles se normalizan (por ejemplo, dividiendo entre 255) para convertirlos en un rango de 0 a 1, lo que es un requisito común para los modelos de redes neuronales convolucionales que esperan valores en este rango.
¿Cómo se puede redondear el resultado de la predicción para mejorar la presentación en la página web?
-Después de obtener el resultado de la predicción, se puede redondear el valor usando funciones matemáticas de redondeo para que la salida sea más agradable y tenga menos decimales.
¿Qué se debe tener en cuenta al utilizar la función 'predict' de TensorFlow.js?
-Es importante asegurarse de que el modelo esté completamente cargado y inicializado antes de realizar predicciones, ya que la carga del modelo es un proceso asíncrono que puede requerir tiempo.
Outlines
😀 Exportación de modelos de Python a JavaScript
Se discute cómo exportar modelos entrenados en Python y utilizarlos en un navegador web para realizar predicciones. Se explicará el proceso de exportación de tres modelos de distinta complejidad y cómo integrarlos en una página web. Incluye la conversión de grados Celsius a Fahrenheit en tiempo real, la identificación de números escritos a mano y la clasificación en tiempo real de imágenes de perros y gatos usando la cámara del móvil. Se menciona la necesidad de convertir el modelo a un formato compatible con TensorFlow.js y se proporciona un enlace para ver el código en vivo.
📈 Predicciones en tiempo real con modelos de aprendizaje profundo
Se describe el proceso de hacer predicciones en tiempo real en un navegador usando modelos de aprendizaje profundo. Se abordan los pasos para crear un tensor a partir de los grados Celsius, realizar la predicción y manejar la respuesta. Además, se explora cómo entrenar y usar redes neuronales convolucionales para predecir números escritos a mano, y cómo se puede dibujar y predecir el número en un canvas. Se menciona la utilización de la biblioteca Fabric.js y se destaca que el modelo funciona tanto en navegadores de escritorio como en móviles.
📱 Clasificación en tiempo real con la cámara del móvil
Se presenta un modelo de clasificación en tiempo real de imágenes capturadas por la cámara del móvil para distinguir entre perros y gatos. Se detalla cómo se prepara y se exporta el modelo, y cómo se carga y se utiliza en una página web. Se menciona la necesidad de un servidor para poder acceder a la cámara desde un dispositivo móvil y se sugiere la utilización dengrove para crear un túnel HTTPS. Finalmente, se muestra cómo se realiza la predicción y cómo se puede ajustar y mejorar el modelo según las necesidades.
Mindmap
Keywords
💡Exportar modelos
💡TensorFlow.js
💡Conversión de modelos
💡Redes neuronales convolucionales
💡Predicciones en tiempo real
💡Código asincrónico
💡Tensor
💡Código HTML y JavaScript
💡Cámara del celular
💡Clasificación de imágenes
💡Integración de modelo en página web
Highlights
Exportaremos tres modelos de distinta complejidad para usar en una página web y hacer predicciones en tiempo real.
El primer modelo es una red simple que convierte grados Celsius a Fahrenheit en tiempo real.
El segundo modelo permite dibujar números escritos a mano y realizar predicciones a partir de ello.
El tercer modelo es avanzado, usando la cámara del celular para clasificar en tiempo real si lo que se ve es un perro o un gato.
Se explicará cómo exportar modelos desde Python y cómo importarlos y hacer predicciones en una página web con JavaScript.
Para exportar un modelo entrenado, se guarda con la función 'save', que almacena pesos, sesgos y el estado del optimizador en un archivo .h5.
Se necesita instalar la librería 'tensor_js' para convertir el modelo a un formato compatible con TensorFlow.js.
Los modelos se pueden cargar en una página web y utilizarse para hacer predicciones interactivas.
Se utiliza un deslizador para ingresar los grados Celsius y se muestra la predicción en Fahrenheit de manera visual.
El segundo modelo utiliza redes neuronales convolucionales para predecir números escritos a mano.
Se utiliza una biblioteca JavaScript para interactuar con un canvas y permitir dibujar números.
El tercer modelo es capaz de clasificar imágenes en tiempo real usando la cámara del celular.
Se abordan técnicas para visualizar y utilizar la cámara web en una página web para hacer predicciones.
Se discuten los desafíos y soluciones para hacer que la página web sea accesible desde dispositivos móviles.
Se ofrecen enlaces y recursos para probar los modelos en vivo y acceder al código fuente.
Se destaca la importancia de la conversión de modelos a formatos compatibles con diferentes entornos de ejecución.
Se agradece a la comunidad por el apoyo en la creación de contenido de inteligencia artificial en español.
Se animará a los espectadores a dejar comentarios y preguntas para mejorar y profundizar en los temas tratados.
Transcripts
hoy veremos cómo exportar modelos
entrenados e intensos prokom python e
importarlos entonces rojo te dice para
poder usarlos en el explorador y para
ver que realmente funciona exportaremos
tres modelos de distinta complejidad y
te explicaré cómo importarlos e
integrarlos en una página web para poder
hacer predicciones el primero ser una
red simple que convierte grados celsius
y fahrenheit en tiempo real
el segundo ser una red que entiendan
números escritos a mano y podremos
dibujar en el explorador
y el tercero es el más avanzado ya que
usaremos la cámara del celular para
clasificar en tiempo real y a color si
lo que ve es un perro o un gato este
vídeo estará enfocado en cómo exportar
los modelos desde python y en cómo
importarlos y hacer predicciones en una
página web con javascript por lo tanto
no explicaré con tanto detalle los
modelos que vamos a usar sus datos de
entrenamiento modelo arquitectura
etcétera como normalmente hago eso lo
dejo para otros vídeos pero si ves algo
aquí que te gustaría que explique a
detalle por favor déjame un comentario y
con gusto algún vídeo para eso
comencemos viendo de manera general el
proceso con python y tensor pero
normalmente diseñamos y entrenamos los
modelos ese entrenamiento es el que toma
tiempo pero una vez teniendo la red
entrenada podemos exportar la para
importarla y usarla en un explorador o
en un celular y hacer predicciones
bastante rápido comencemos con una red
simple que convierte grados celsius y
fahrenheit si quiere saber cómo funciona
y cómo hacerla desde cero te debe
aparecer en pantalla el vídeo donde lo
hacemos lo haremos con este cola la liga
está en la descripción del vídeo al
inicio está la configuración y
entrenamiento regular de la red al final
la red puede recibir los grados celsius
y nos predice el resultado en fahrenheit
para exportarla debemos seguir varios
pasos primero que nada guardemos el
modelo entrenado con la función save hay
varias formas de guardar el estado de
una red pero esta en específico guarda
todos los pesos y sesgos de la red el
estado del optimizador etcétera todo en
un solo archivo con la extensión
h5 con la trabaja sobre el link o si
podemos ejecutar comandos de linux
usando el signo de admiración por
ejemplo podemos escribir el comando ls y
nos lista el contenido del directorio
actual
ahí está el archivo que acabamos de
crear para usarlo con tensor flow js
debemos convertirlo a otro formato para
eso necesitamos instalar la librería de
payton llamada dentro del robot a s
la cual tiene el conversor instalemos la
librería con pib install tensor js
recordando agregar el signo de
admiración
una vez que está instalada ya podemos
hacer la conversión al hacerlo se van a
generar varios archivos así que primero
creamos una carpeta donde se colocarán
los resultados de la conversión
ahora ejecutamos el programa de
conversión
escribamos este comando en su flujo
tae-se jong bajo convertir le indicamos
que el formato es de quieras les decimos
el nombre del archivo
y la carpeta de salida
y lo ejecutamos
una vez que terminó list hemos el
contenido de la carpeta de salida
[Música]
podemos ver que generó dos archivos
el siguiente paso es bajar los archivos
a nuestra computadora para hacerlo en
cola puedes ver del lado izquierdo
algunos iconos da clic en el icono de la
carpeta y se expandirá una sección en
donde podremos ver los archivos de cola
entre ellos la carpeta de salida si no
te parece solo espera un poco a que se
actualice expande la carpeta de salida y
utiliza los tres puntos para descargar
el archivo bin y el archivo jason a tu
computadora
y listo ya tenemos el modelo en nuestra
computadora ahora veamos cómo agregarlo
a una página para hacer predicciones
esta página que voy a hacer puedes verla
en vivo y probarla en esta liga y el
código está en hip hop todo es tan la
descripción del vídeo
para usar tensor la fota es el primero
debemos importar la librería de
javascript
ahora agreguemos este pedazo de código
con esto le indicamos en dónde está el
archivo jason y guardamos el modelo
cargado en una variable llamada modelo
el código es así por ser asíncrono
si ahorita lo probamos tenemos un
problema para cargar el modelo no
podemos abrir nuestro html desde la
carpeta directamente debe ser con http
una forma fácil de hacerlo es teniendo
python instalado en la computadora abrir
una terminal o línea de comando navega a
la carpeta con los archivos y escribir
python inm
http punto server 8000
y en el explorador escribir localhost
dos puntos ocho mil y el nombre del
archivo
listo el modelo ya está cargado ahora
sigue utilizarlo para indicar los grados
celsius podría poner un campo de texto
pero usaré un deslizador para que se vea
más guapo el deslizador usar el evento
on input que se llama cada vez que
cambia el valor y llamaré una función
donde haremos la predicción
en la función tomamos el valor del
deslizador como los grados celsius es
necesario confirmar que el modelo ya
está inicializa dow ya que al cargarse
de forma asíncrona puede que siga
procesando
para hacer predicciones tensor flojo
está ahí se requiere que le demos como
entrada un tensor quizá en otro vídeo
los explique pero para este ejemplo es
muy simple tenemos solamente un dato los
grados celsius entonces crearemos un
tensor de una dimensión y como parámetro
le daremos los grados celsius dentro de
una regla ahí es importante convertirlo
en número para que no llegue como texto
ahora podemos hacer la predicción
llamamos a la función predictor
le damos el tensor y usamos data think
para que se espere que termine la
predicción antes de continuar
voy a redondear la predicción solo para
hacer la salida más agradable y que no
tenga muchos datos decimales ahora en un
dip con haití resultado pondré el texto
indicando los celsius de entrada y la
predicción
y listo ya está haciendo la predicción
en tiempo real totalmente en el
explorador
excelente
y funciona en el celular
[Aplausos]
ahora pasemos al siguiente con el cual
podremos dibujar y nos dirá qué número
cree que es al igual que la anterior el
color estará en la descripción del vídeo
este entrenamiento usas redes neuronales
convolución a leds para predecir números
escritos a mano la entrada a esta red no
es un simple números en una imagen de 28
por 28 píxeles con un solo canal para
blanco y negro en cuanto a su mami
vídeos de explicación de redes
neuronales convolución a les aparecerá
en pantalla y en la descripción sin
embargo no es necesario que las conozcas
para seguir el vídeo ya que no nos
estamos metiendo con el entrenamiento
dejando eso de lado todo es muy similar
entremos al collage ejecutamos el script
que hace todo el entrenamiento y al
terminar hacemos exactamente lo mismo
guardamos el modelo
[Música]
convertimos
descargamos
e importamos el modelo ahora aparece la
predicción se pone interesante y aquí si
se te facilitará si ya conoces algo de
html y javascript lo puedes ver en vivo
en esta liga y el código estará también
en dijo
[Música]
primero agrega un canvas grande para
dibujar de manera simple pero como la
red espera una entrada de 28 por 28
agregó otro canvas pequeño en donde
copiaremos la imagen para hacer la
predicción
usaré la librería fabric js para
convertir el canvas en un lugar para
dibujar y agregaré un botón para limpiar
el canvas y uno para hacer la predicción
al dar clic en predecir lo primero que
quiero es copiar el dibujo grande al
canvas de 28 x 28 para eso uso esta
función que me robe de internet aunque
le tengo que ajustar un poco y con eso
queda listo
además esconder este canvas para que no
se vean
ahora tomo todos los píxeles del canvas
pequeño y lo reviso uno por uno como
esta re trabaja con blanco y negro por
cada pixel tomo sólo el valor del alfa
que es un número entre 0 y 255 lo divido
entre 255 para que sea un valor de 0 a 1
es decir lo normal hizo y lo agrego a un
arreglo como esta red no espera a 784
píxeles seguidos sino en forma cuadrada
de 28 x 28 cada vez que junto 28 píxeles
lo agrego a otro arreglo y lo limpio al
final esta variable art tiene los
píxeles en el formato que necesitamos si
quieres más detalle déjame un comentario
con gusto lo revisamos a diferencia de
la anterior
aquí el tensor tiene cuatro dimensiones
pero ya hicimos el trabajo difícil así
que podemos enviar el arreglo directo y
crear el tensor la predicción se hace
igual
[Música]
la primera red que hicimos fue de
regresión esta es de clasificación por
lo que responde con un arreglo de 10
posiciones y podemos ver qué posición
tiene el número más grande para saber
cuál es la predicción lo que tengo con
este código y lo pongo en el campo de
resultado
y listo
y funciona en el celular
[Aplausos]
[Música]
ahora veamos el último un clasificador
de perros y gatos en tiempo real
utilizando la cámara del celular antes
de continuar de nuevo si te maree un
poquito la implementación del proyecto
anterior
no te preocupes estos proyectos son solo
para comprobar que funciona la
importación y cómo aplicarla y ya puedes
tú revisar el código fuente a tu gusto
solo no quería dejarlo como otros vídeos
que nadamás exportan y punto pero si te
interesa por ejemplo este los números
que acabamos de hacer déjame un
comentario con gusto lo hago paso a paso
y sobre todo porque este que sigue es
más complejo y también lo voy a ver nada
más a grandes rasgos aquí tenemos una
red neuronal convolución al entrenada
con imágenes a color es decir con tres
canales y cada imagen es de 150 por
ciento 50 píxeles al final clasifica si
es un perro o un gato el color está en
la descripción del vídeo este se tardó
un rato en entrenar así que pica la ive
por un café la exportación es igualita
así que mientras la hago agradezco de
corazón a misma escena superiores por
hacer posible este vídeo si te gustaría
apoyarme para seguir generando
información de inteligencia artificial
en español y de manera fácil y accesible
dejaré la liga de mi petro en la
descripción del vídeo nuevamente gracias
muy bien ya tenemos los archivos en
nuestra computadora esta vez genera
cuatro archivos bin pero lo demás es
igual
ahora esta página necesita no sólo
cargar el modelo sino tener un tag de
vídeo y agregar el código para cargar y
ver la cámara web aquí tengo que hacer
un paréntesis verme con la cámara web de
la computadora no me sirve de mucho
quiero abrirlo en el celular para poder
moverme y hacer predicciones para esto
revisó la ip local de mi computadora y
me conecto con el celular sin embargo me
topo con un problema si quiero ver la
cámara web en el celular necesito que mi
sitio tenga http es la forma más fácil
que conozco de hacer un túnel https es
con en ground si quieres meterte detalle
de cómo funciona adelante pero lo único
que tienes que hacer para este vídeo es
lo siguiente entra a la página de en
grove
baja no olvides con 1er
[Música]
abre una línea de comando y navega donde
está en grow escribe en group http 8000
con eso en gran nos dará un enlace https
que podemos entrar desde internet ni
siquiera tenemos que estar en la red
local es importante tener los dos
levantados el túnel de rog y el servidor
de payton en el port 8000 en la carpeta
con otros archivos siempre con el
celular ya funciona
[Aplausos]
pero bueno estas son cosas medio
avanzadas si no quieres batallar puedes
probarlo en esta liga que tengo en vivo
el proceso será similar con una función
de predicción que se llamará
constantemente copiaremos la imagen del
vídeo de la cámara web a un canvas
copiaremos la imagen después al canvas
de 150 x 150 píxeles que es el tamaño
que espera la red
en este caso el arreglo será de 150 en
lugar de 28 y usaremos los tres canales
rojo verde y azul normalizados
el tensor que generamos para la
predicción también será de cuatro
dimensiones y al recibir el resultado
solo revisamos y predice cero para gato
o uno para perro y lo colocamos en un
campo de resultados aquí si pongo mi
carácter es que soy un perro pero bueno
se podemos discutirlo después en mi casa
tengo tres perros pero no tengo gatos
entonces buscar imágenes en internet
para probar
y armas
[Música]
y también funciona con algunos dibujos
ahora este no es el clasificador del
futuro está entrenado solo como mil
imágenes de perros y de gatos entonces
tampoco tenemos que si no predice muy
bien pero bueno esto es para fines
ilustrativos
ahora ya sabes exportar modelos de
tensores luego de ser pelota ese y
espero que con estos tres proyectos de
ideas etcétera de cosas que podéis hacer
y vayas te diviertas y experimentos
revise el código déjame tus dudas y si
viste algo aquí que te gustaría que
entre detalle en otro vídeo por favor
dejen un comentario hasta pronto
[Música]
[Aplausos]
[Música]
Browse More Related Video
Modelos OSI y TCP (Explicado) Modelos Conceptuales
Cómo EMBEBER UN GPT en una página WEB [Tutorial paso a paso]
Modelacion Matemática - Introducción al Mundo de la Modelación
Procesos de software
Modelos económicos | Khan Academy en Español
Cómo crear un modelo mediante Ecuaciones Diferenciales, lenguaje de funciones y derivadas
5.0 / 5 (0 votes)