Ir al contenido principal

Inteligencia Artificial personalizable (visión por computadora) con Teachable Machine

¡Hola! Vamos a aprender a reconocer objetos, colores o personas con Teachable Machine, y luego implementaremos una aplicación para activar algo con poco código.

Breve intro

Hasta noviembre de 2022, TensorFlow.js era la herramienta más destacada en la web para trabajar con Inteligencia Artificial. Sin embargo, ChatGPT y los Transformers llegaron para quedarse.

Meses antes, Google Creative Labs lanzó Teachable Machine, una herramienta que permite entrenar una red neuronal utilizando la cámara web o el micrófono, y generar el código HTML para incluirlo en nuestra propia página web con ayuda de TensorFlow.js.

Al mismo tiempo, yo aprendía a trabajar los Custom WebComponents, una API de HTML5 para generar con código HTML objetos de JavaScript. Y en esta semana, retomando un poco la librería que estoy construyendo, agregué el caso de Teachable-Machine.

Veamos cómo trabajar con TM y cómo utilizarla a favor.

A continuación:

  1. Videos sobre cómo utilizar Teachable Machine.
  2. Instalar librería de webComponents y utilizar funciones de JavaScript.

Videos sobre cómo utilizar Teachable Machine

Primer video: en este video enseño a algunos alumnos a crear un sistema de reconocimiento de algunos jugadores de Fútbol y a crear un proyecto en Glitch.com para implementar en su página web.
Para el punto 2º de esta página web recomiento ver hasta el minuto 8:36; en este post retomo desde la URL subida indicada en ese instante del video.


En el siguiente video, se muestra cómo crear un clasificador de imágenes y un clasificador de sonidos.



Otro ejemplo, en castellano.



Crear página web

Instalar librería de webComponents

Los webComponents se habilitan creándolos en JavaScript. La idea es que alguien con muy poco conocimiento de HTML y casi nulo de JavaScript puedan generar código funcional.

He construido esta librería para habilitar varios componentes con varios temas, entre ellos Inteligencia Artificial. Se instala en un documento HTML, idealmente en el HEAD, con el siguiente SCRIPT:

<script src="https://gorosito.red/componentes?inteligencia_artificial" ></script>

Mencionar el componente

En el BODY de la página web agregamos lo siguiente:

<teachable-machine auto eventos="fnReconocido" url="https://ABC" ></teachable-machine>

El atributo AUTO="" sirve para que ni bien se haga click en el botón de Activar la cámara, automáticamente se active el reconocimiento.

El atributo EVENTOS="" sirve para indicar qué función de JavaScript se ejecutará cuando el reconocimiento se efectúe. Basta solamente con mencionar el nombre de la función. Será una función tipo CALLBACK a la cuál se le pasará el vector/registro/objeto con las categorías definidas en el proyecto de teachable machine y el porcentaje de inferencia/adivinanza/reconocimiento.

El atributo URL="" debe apuntar a la dirección que generaste en Teachable Machine o la URL de donde subas el proyecto que ellos te generaron con todo el modelo computado.

Función de reconocimiento

Esta función se redacta en un SCRIPT o en un archivo .js, y tiene la siguiente forma:

function fnReconocido( $vectorReconocido ) {
    if( $vectorReconocido.Messi > 0.8 ) fnReconocidoMessi() ;
    else if( $vectorReconocido.DePaul > 0.8 ) fnReconocidoDePaul() ;
    else if( $vectorReconocido["Di Maria"] > 0.8 ) fnReconocidoDiMaria() ;
    else if( $vectorReconocido["Ronaldo"] > 0.8 ) fnReconocidoRonaldo() ;
    // ...
}

El vector de reconocimiento es una lista, array asociativo, objeto plano, struct o registro de lo que reconoció el sistema en la cámara web, y cada dato se puntúa con un porcentaje, medido entre 0.00 y 1.00. Obviamente, en cuanto el número es mayor es que el sistema infiere mejor reconocimiento sobre una categoría.

Luego, dentro de la función ustedes pueden elegir cómo tratar dichos reconocimientos. Por ejemplo, en el códgo de arriba vamos computando con una toma de decisiones por cada jugador categorizado y luego ejecutaremos una función distinta. Luego, ustedes crearán la función adecuada.

Comentarios

Entradas populares de este blog

Probando ChatGPT - Mapa conceptual con Mermaid

 Había conversado con ChatGPT acerca de cuidado de las plantas e hidroponía. Luego de unos días me di cuenta que quizás también podría saber acerca de crear Mapas conceptuales. Salió lo siguiente; le falta un concepto para crear correctamente mapas conceptuales (la relación entre los conceptos), pero podría ser algo para ayudarnos a corregir mejor. El texto original era el que cito a continuación, pero le agregué explícitamente que me armara un "mapa conceptual" utilizando el lenguaje Mermaid, un lenguaje descriptivo que permite construir gráficos diversos, entre ellos Mapas conceptuales, generando un archivo SVG. ``` Hacé un mapa conceptual en lenguaje Mermaid con el siguiente texto, redactado anteriormente: "La hidroponía es un método de cultivo que se utiliza para cultivar plantas sin suelo utilizando una solución nutriente y agua. Algunas plantas pueden cultivarse con éxito mediante hidroponía, mientras que otras necesitan el suelo para crecer y prosperar. De las pl...

Conectar a Servidor Node.JS desde VB6 o VBA

El presente código sirve tanto para Visual Basic 6.0 (sí, todavía sirve, todavía sirve!) como para Visual Basic para Aplicaciones (Excel o VBA). ' Si estamos en Visual Basic para Aplicaciones agregar la referencia ' WinHTTP, en el menú Herramientas, Referencias, Microsoft WinHTTP Services Function Solicitar( _ ByVal URLBase As String _ , Optional ByVal Puerto As Integer = 80 _ , Optional ByVal Seccion As String = "" _ , Optional ByVal Metodo As String = "GET" _ ) As String On Error GoTo solucion #If VBA6 Then Dim objXML As New WinHttpRequest #ElseIf Win32 Then Dim objXML As Object Set objXML = CreateObject("MSXML2.ServerXMLHTTP") #End If objXML.Open Metodo, URLBase & ":" & Puerto & "/" & Seccion, False objXML.send If (objXML.Status = 404) Then Solicitar = "404 Error" Else Solicitar = objXML.responseText End If Se...