De cero a analizador de imágenes con IA en 5 minutos: una guía para principiantes

¿Quieres saber cómo construir un analizador de imágenes con IA? ¡Entonces lee este artículo hasta el final! Voy a mostrarte cómo crear herramientas de análisis de IA de forma muy sencilla, por lo que casi no es necesario tener ningún conocimiento previo. Lo guiaré paso a paso y usaremos Project IDX y la API de Gemini. Esto significa que no tienes que configurar nada; Todo lo que haremos está en la nube. Si estás listo, ¡comencemos!

Visita mi canal de YouTube

Comenzando con el Proyecto IDX

El primer paso es bastante sencillo. Necesitamos abrir el sitio web. idx.google.com . Si aún no se ha registrado, primero debe registrarse y luego podrá ver la pantalla a continuación.

1. Elija una plantilla: elegiré la plantilla API de Gemini.

   
   

2. Nombra tu proyecto: lo llamaré "prueba 2024".

   
   

3. Seleccionar entorno: elegiré "Vite", que es un entorno de aplicación web JavaScript.

   
   

4. Cree el proyecto: presione el botón Crear.

   
   

   

Después de unos minutos, IDX creará todo por nosotros y veremos nuestros archivos de plantilla, que podremos modificar como queramos.

Modificando la plantilla

Este es nuestro archivo index.html. Podemos modificarlo como queramos, pero veámoslo primero. La plantilla inicial contiene casi todo lo que necesitamos. Esta plantilla utiliza el modelo flash Gemini 1.5, por lo que es más que suficiente para nosotros.

Obtener una clave API

Como puede ver, la aplicación no funciona inicialmente porque primero necesitamos obtener una clave API. Ir al sitio web https://aistudio.google.com/app/apikey , y obtenga su clave allí. Si desea instrucciones detalladas sobre cómo obtener una clave API , mire otro video sobre el Proyecto IDX.

Una vez que obtenga su clave, cópiela y luego vaya al archivo main.js. Reemplace el marcador de posición con su clave API.

Probar la aplicación

Comprobemos si nuestra aplicación está funcionando. Presione "Ir" y vea lo que Géminis nos devuelve.

Como puedes ver, Géminis entiende lo que hay dentro de la imagen y sugiere algunas recetas para hornear este tipo de panadería. Como esta aplicación ya está en el servidor, podrá compartir el enlace o abrir esta aplicación en su navegador.

La URL aún no es bonita; sin embargo, podrás ver que todo está funcionando y podrás compartir este enlace con tus socios o compañeros de trabajo.

Agregar funcionalidad de carga de imágenes

Para completar nuestro analizador de imágenes de IA, debemos poder agregar nuestra propia imagen. Hagamos algunos ajustes a la plantilla; El primero es el archivo index.html:

1. Cambie el nombre de la aplicación: la llamaré "Analizador de imágenes AI".

   
   

2. Eliminar el HTML: Elimina las imágenes predefinidas. Líneas del 14 al 27.

 <div class="image-picker"> <label class="image-choice"> <input type="radio" checked name="chosen-image" value="/baked_goods_1.jpg"> <img src="/baked_goods_1.jpg"> </label> <label class="image-choice"> <input type="radio" name="chosen-image" value="/baked_goods_2.jpg"> <img src="/baked_goods_2.jpg"> </label> <label class="image-choice"> <input type="radio" name="chosen-image" value="/baked_goods_3.jpg"> <img src="/baked_goods_3.jpg"> </label> </div>

3. Agregue un campo de entrada para cargar imágenes. Línea 15

 <input type="file" id="fileInput" name="file">

4. Cambie el valor del mensaje de nombre de entrada a "Pregunte lo que quiera sobre esta imagen".

El HTML resultante debería verse como la imagen a continuación.

Actualizando el JavaScript

Necesitamos definir código JavaScript para leer nuestro archivo. Abra el archivo main.js y realice los siguientes cambios:

1. Elimine el código de la línea 22 hasta la 26.

 // Load the image as a base64 string let imageUrl = form.elements.namedItem('chosen-image').value; let imageBase64 = await fetch(imageUrl) .then(r => r.arrayBuffer()) .then(a => Base64.fromByteArray(new Uint8Array(a)));

2. Agregue un nuevo código a partir de la línea 22.

 // Load the image as a base64 string const fileInput = document.getElementById('fileInput'); const file = fileInput.files[0]; const imageBase64 = await new Promise((resolve, reject) => { const reader = new FileReader(); reader.readAsDataURL(file); reader.onload = () => { const base64String = reader.result.split(',')[1]; // Extract base64 part resolve(base64String); }; reader.onerror = reject; });

Su aplicación se verá así en la captura de pantalla siguiente.

Pruebas finales

Comprobemos el resultado. Sube una imagen, pregunta qué hay en la imagen y presiona "Ir".

Mi ejemplo de imagen.

El resultado:

Como puede ver, la API de Gemini explica todo sobre la imagen. ¡Nuestro analizador de imágenes AI está funcionando!

Conclusión

¡Eso es todo! Como puede ver, es realmente sencillo crear un analizador de imágenes de IA utilizando Project IDX y la API de Gemini. Puedes crear un montón de aplicaciones diferentes. Esto es sólo un ejemplo. Espero que encuentres este artículo útil e informativo. No olvide compartir sus comentarios en los comentarios a continuación.

¡Gracias y nos vemos en mis próximos artículos! :)