👨🏼‍💻

khriztianmoreno's Blog

Inicio Etiquetas Acerca |

Posts with tag ai

La API revolucionaria de Chrome

2025-08-01
aiweb-developmentjavascript

La inteligencia artificial ha dejado de ser una promesa futurista para convertirse en una herramienta tangible y poderosa en nuestro día a día como desarrolladores. Hasta hace poco, integrar IA en nuestras aplicaciones web significaba depender de servidores externos, lidiar con la latencia y gestionar costos. Pero, ¿y si te dijera que el juego está a punto de cambiar drásticamente? Google nos ha dado una nueva y poderosa herramienta: la Prompt API, que nos permite ejecutar modelos de IA, como Gemini Nano, directamente en el navegador del usuario.Recientemente, he estado experimentando con esta API y la sensación es electrizante. Estamos ante un cambio de paradigma que no solo mejora el rendimiento, sino que también aborda preocupaciones clave como la privacidad y la personalización. Acompáñame a desglosar por qué creo que esta API es tan revolucionaria.¿Por qué es revolucionario?La verdadera revolución de la Prompt API radica en tres pilares fundamentales:Privacidad por Diseño: Al ejecutar el modelo de IA en el cliente, los datos del usuario nunca abandonan su dispositivo. Esto es un cambio masivo. Imagina poder ofrecer funcionalidades inteligentes sin que el usuario tenga que preocuparse por cómo se maneja su información personal en la nube. Esto no solo genera confianza, sino que simplifica enormemente el cumplimiento de normativas de privacidad.Latencia Cero: La comunicación con un servidor externo introduce inevitablemente un retraso. Con la Prompt API, la inferencia ocurre localmente, lo que se traduce en respuestas casi instantáneas. Esto es crucial para crear experiencias de usuario fluidas e interactivas que se sientan naturales y no como si estuvieras esperando una respuesta de un servidor lejano.Disponibilidad Offline: Una vez que el modelo se ha descargado, la aplicación puede seguir funcionando sin conexión a Internet. Esto abre la puerta a un nuevo tipo de aplicaciones web inteligentes que son robustas y siempre disponibles, sin importar la calidad de la conexión del usuario.Primeros Pasos: Un Ejemplo SencilloAntes de sumergirnos en los casos de uso más complejos, veamos lo simple que es comenzar. Lo primero es verificar si el navegador del usuario puede ejecutar el modelo.// Verifica si la API está disponible const disponibilidad = await window.ai.getAvailability(); if (disponibilidad === "available") { console.log("¡La IA está lista para usarse!"); } else { console.log("La IA no está disponible en este dispositivo."); }Si está disponible, podemos crear una sesión y enviarle un prompt. ¡Así de fácil!if (disponibilidad === "available") { // Crea una sesión de inferencia const session = await window.ai.createSession(); // Envía un prompt y espera la respuesta completa const respuesta = await session.prompt( "Escríbeme un poema corto sobre el código." ); console.log(respuesta); // No olvides destruir la sesión para liberar recursos session.destroy(); }Este simple fragmento de código ya nos muestra el poder que tenemos al alcance de nuestras manos.Casos de Uso Donde Esta API BrillaríaLas posibilidades son enormes, pero aquí hay algunas ideas donde la Prompt API podría tener un impacto inmediato y significativo:Asistentes de Escritura Inteligentes: Imagina un editor de texto que no solo corrige tu gramática, sino que te ayuda a reformular frases, ajustar el tono o incluso generar borradores completos de correos electrónicos o artículos, todo en tiempo real y sin enviar tus borradores a ningún servidor.Clasificación y Organización de Contenido: Un sitio de noticias o un blog podría usar la API para clasificar automáticamente los artículos en categorías relevantes para el usuario, permitiendo crear feeds personalizados y dinámicos sin necesidad de lógica en el backend.Búsqueda Semántica en el Cliente: En lugar de una simple búsqueda por palabras clave, podrías implementar una búsqueda que entienda el significado detrás de la consulta del usuario dentro del contenido de una página o un conjunto de documentos, ofreciendo resultados mucho más precisos.Transcripción de Audio y Descripción de Imágenes: La API tiene capacidades multimodales. Podrías permitir a los usuarios grabar notas de voz y transcribirlas instantáneamente, o subir una imagen y generar automáticamente un texto alternativo descriptivo para mejorar la accesibilidad.¿Por Qué Es Importante?La Prompt API no es solo una nueva función; es una declaración sobre el futuro de la web. Nos está empoderando como desarrolladores para construir la próxima generación de aplicaciones web: más inteligentes, más privadas y más centradas en el usuario.Al mover la IA al cliente, se democratiza el acceso a esta tecnología. Ya no se requieren grandes infraestructuras de servidor ni presupuestos elevados para la inferencia. Pequeños desarrolladores y equipos pueden ahora competir en igualdad de condiciones, creando experiencias innovadoras que antes estaban reservadas para las grandes corporaciones.Explorando la API a Fondo: Más EjemplosLa documentación oficial nos proporciona ejemplos más avanzados que vale la pena explorar.Streaming de RespuestasPara respuestas más largas, podemos mostrar el resultado a medida que se genera, mejorando la percepción de velocidad.const session = await window.ai.createSession(); const stream = session.promptStreaming( "Escríbeme un poema extra largo sobre el universo" ); for await (const chunk of stream) { // Agrega cada fragmento a tu UI document.getElementById("poema-div").textContent += chunk; }Manteniendo el ContextoLas sesiones recuerdan las interacciones anteriores, permitiendo conversaciones fluidas.const session = await window.ai.createSession({ initialPrompts: [ { role: "system", content: "Eres un asistente amigable y útil." }, ], }); let respuesta1 = await session.prompt("¿Cuál es la capital de Italia?"); console.log(respuesta1); // "La capital de Italia es Roma." let respuesta2 = await session.prompt("¿Y qué idioma se habla allí?"); console.log(respuesta2); // "El idioma oficial de Italia es el italiano."Salida Estructurada con JSONPuedes forzar al modelo a responder en un formato JSON específico, lo cual es increíblemente útil para integrar la IA con otras partes de tu aplicación.const session = await window.ai.createSession(); const schema = { type: "boolean" }; const post = "Hoy horneé unas tazas de cerámica y quedaron geniales."; const resultado = await session.prompt( `¿Este post trata sobre cerámica?\n\n${post}`, { responseConstraint: schema } ); console.log(JSON.parse(resultado)); // trueConclusión: El Futuro es LocalMi experiencia con la Prompt API ha sido reveladora. Es una de esas tecnologías que te hacen sentir que estás presenciando el comienzo de algo grande. Nos da las herramientas para construir una web más inteligente y respetuosa con la privacidad, directamente desde el navegador.Te invito a que te sumerjas, experimentes y pienses en cómo puedes usar esta increíble capacidad en tus propios proyectos. El futuro de la IA en la web es local, y ya está aquí

WebContainers al máximo - Bolt.new combina IA y desarrollo full-stack en el navegador

2024-10-08
javascriptaiweb-development

¿Recuerdas los WebContainers? Es el "microsistema operativo" basado en WebAssembly que puede ejecutar las operaciones de Vite y todo el ecosistema Node.js en el navegador. El equipo de StackBlitz creó WebContainers para potenciar su IDE en el navegador, pero a menudo parecía que la tecnología todavía estaba buscando un caso de uso decisivo, hasta ahora.Esto se debe a que StackBlitz acaba de lanzar bolt.new , un sandbox de desarrollo impulsado por IA que Eric Simons describió durante ViteConf como "como si Claude o ChatGPT hubieran tenido un bebé con StackBlitz".Bolt.newIntentaré no imaginarlo demasiado vívidamente, pero en base a las críticas abrumadoramente positivas hasta el momento, supongo que está funcionando: docenas de desarrolladores lo describen como una combinación de v0, Claude, Cursor y Replit.En qué se diferencia Bolt: las herramientas de código de IA existentes a menudo pueden ejecutar algo de JavaScript/HTML/CSS básico en el navegador, pero para proyectos más complejos, es necesario copiar y pegar el código en un entorno local.Pero Bolt no. Al utilizar WebContainers, puede solicitar, ejecutar, editar e implementar aplicaciones web completas , todo desde el navegador.Así es como se ve:Puedes solicitarle a bolt.new que cree una aplicación de varias páginas lista para producción con un backend y una base de datos específicos, usando cualquier stack tecnológico que desees (por ejemplo: “Construye un blog personal usando Astro, Tailwind y shadcn”).A diferencia de otras herramientas, Bolt puede instalar y ejecutar paquetes y bibliotecas npm relevantes, interactuar con API de terceros y ejecutar servidores Node.Puede editar manualmente el código que genera a través de un editor en el navegador o hacer que Bolt resuelva los errores por usted . Esto es exclusivo de Bolt, porque integra IA en todos los niveles de WebContainers (no solo en el paso CodeGen).Puedes implementar en producción desde el chat a través de Netlify, sin necesidad de iniciar sesión.Hay mucho más que podríamos analizar aquí, pero la demostración de Eric es bastante salvaje.Para cerrar: desde fuera, no siempre estuvo claro si StackBlitz alguna vez obtendría un retorno significativo de la inversión durante los más de 5 años que han pasado desarrollando WebContainers. Pero, de repente, parece que podrían estar en una posición única para ayudar a los desarrolladores a aprovechar la IA para crear aplicaciones legítimas FullStack.<iframe width="560" height="315" src="https://www.youtube.com/embed/knLe8zzwNRA?si=7R7-1HxzwuyzL0EZ&amp;start=700" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>¡Espero que esto haya sido útil y/o te haya hecho aprender algo nuevo!Profile@khriztianmoreno �

Desbloquea tu creatividad con Google Gemini y JavaScript - Guía práctica

2024-06-12
javascriptaitutorial

Hola! Hoy les traigo una nueva herramienta que potenciará tu creatividad a otro nivel: Google Gemini. Esta API de inteligencia artificial te permite generar texto de alta calidad en español, desde simples frases hasta historias completas, con solo unas pocas líneas de código.¿Qué es Google Gemini?Google Gemini es un modelo de lenguaje de última generación desarrollado por Google AI. Se ha entrenado con un conjunto de datos masivo de texto y código, lo que le permite comprender y generar lenguaje natural con una precisión impresionante.¿Qué podemos hacer con Google Gemini y JavaScript?Las posibilidades son infinitas. Aquí te presento algunos ejemplos:Generar contenido creativo: Escribe poemas, historias, guiones, artículos de blog, o cualquier tipo de contenido textual que puedas imaginar.Traducir idiomas: Traduce textos de un idioma a otro de forma rápida y precisa. Responder preguntas: Obtén respuestas a tus preguntas de forma informativa y completa.Crear chatbots: Desarrolla chatbots conversacionales que interactúen con los usuarios de forma natural.Automatizar tareas: Automatiza la generación de informes, correos electrónicos, y otras tareas que requieren procesamiento de lenguaje natural.¿Cómo empezar?Para empezar a usar Google Gemini con JavaScript, solo necesitas:Una cuenta de Google Cloud Platform: https://cloud.google.com/Habilitar la API de Google Gemini: https://ai.google.dev/Ejemplo práctico:En este ejemplo, vamos a generar un poema usando Google Gemini y JavaScript.const { GoogleGenerativeAI } = require("@google/generative-ai"); // Access your API key as an environment variable (see "Set up your API key" above) const genAI = new GoogleGenerativeAI(process.env.API_KEY); async function run() { // For embeddings, use the embedding-001 model const model = genAI.getGenerativeModel({ model: "embedding-001" }); const text = "Escribe un poema sobre la naturaleza"; const result = await model.embedContent(text); const embedding = result.embedding; console.log(embedding.values); } run();Para la generación de texto usamos el método getGenerativeModel del objeto genAI.Ejemplo de poema generado:La tierra verde, el cielo azul, el sol brilla con luz de cristal. Las flores florecen en el jardín, los pájaros cantan con dulce trino. El viento susurra entre las hojas, las abejas zumban entre las flores. La naturaleza es un regalo divino, un lugar de paz y armonía.Conclusión:Google Gemini y JavaScript son una combinación poderosa que te permite desbloquear tu creatividad y desarrollar aplicaciones increíbles. Con esta guía práctica, ya estás listo para empezar a explorar las posibilidades infinitas de esta tecnología.Recursos adicionales:Documentación de Google Gemini: https://ai.google.dev/docsTutoriales de Google Gemini: https://m.youtube.com/watch?v=TXvbT8ORI50Ejemplos de código de Google Gemini: https://m.youtube.com/watch?v=jTdouaDuUOA¡Anímate a experimentar con Google Gemini y JavaScript! Comparte tus creaciones en los comentarios y déjame saber qué te parece esta herramienta.¡Espero que esto haya sido útil y/o te haya hecho aprender algo nuevo!Profile@khriztianmoreno �