React + WebGPU + AI – ¿Qué podría salir mal? 😳

Rate this content
Bookmark

FAQ

Theater.js es una herramienta que permite a diseñadores y desarrolladores trabajar de manera conjunta en la creación de animaciones y composiciones 3D, optimizando la colaboración en proyectos como la cobertura de eventos en tiempo real. Se usa para integrar diseño y desarrollo en un solo flujo de trabajo sin necesidad de cambiar entre diferentes aplicaciones.

Según Aryami Naim, la integración de IA en aplicaciones creativas como Theater.js permite automatizar y agilizar procesos, ahorrar tiempo y facilitar la colaboración en tiempo real entre diversos profesionales, transformando fundamentalmente la forma en que se desarrollan y utilizan estas aplicaciones.

Crear un entorno que integre diseño y desarrollo de manera fluida es complejo debido a las limitaciones de las herramientas existentes que no pueden cubrir todas las necesidades de programación y diseño simultáneamente. Muchos intentos han sido hechos, pero aún es difícil lograr un equilibrio perfecto entre ambos.

WebGPU es una tecnología que permite ejecutar modelos de IA de manera eficiente usando el GPU del dispositivo. Es relevante porque reduce la latencia y puede mejorar la privacidad y costos al permitir la ejecución de modelos de IA directamente en el dispositivo del usuario.

React facilita la estructuración de aplicaciones en bloques de construcción que pueden ser editados de manera segura por IA. Esto permite que los modelos de IA modifiquen componentes específicos sin riesgo de afectar otras partes de la aplicación, haciendo el proceso más eficiente y menos propenso a errores.

La IA puede automatizar y personalizar la interacción con aplicaciones como Uber, permitiendo a los desarrolladores crear interfaces más eficientes y adaptativas que mejoren la experiencia del usuario, como realizar pedidos de transporte automáticamente a través de conversaciones con chatbots.

Aria Minaei
Aria Minaei
31 min
01 Jun, 2023

Comments

Sign in or register to post your comment.
Video Summary and Transcription
Con AI y web GPU, es un momento emocionante para ser desarrollador. El viaje del orador implica combinar programación y diseño, lo que lleva a la creación de Pure Blue, un entorno de programación poderoso. Al agregar AI a la mezcla, el orador discute el potencial de AI en el proceso creativo y su impacto en el desarrollo de aplicaciones. La charla explora el papel de los componentes de React y WebGPU en permitir la edición detallada y la ejecución de modelos de AI localmente. Se discute el futuro del desarrollo de aplicaciones, enfatizando la necesidad de mantenerse a la vanguardia y aprovechar el poder de JavaScript.

1. Introduction to the Speaker's Journey

Short description:

Con IA y web GPU, es un momento emocionante para ser desarrollador. Mucho va a cambiar, incluyendo la forma en que hacemos aplicaciones. He estado haciendo cosas con computadoras desde que era niño, combinando programación y diseño. Sin embargo, usar diferentes herramientas para cada uno era creativamente limitante. Siempre quise hacer diseño y desarrollo al mismo tiempo, pero parecía imposible.

Entonces, llegaremos a esta pregunta en unos minutos. Pero, con IA y web GPU, es simplemente un momento emocionante para ser desarrollador. Parece que mucho va a cambiar. Creo que estamos haciendo aplicaciones diferentes. ¿Vamos a seguir llamándolas aplicaciones? No estoy seguro. Pero mucho va a cambiar. Y exploremos algunas de esas posibilidades hoy.

Ahora, ¿quién soy yo? Mi nombre es Aryami Naim. Como la mayoría de nosotros aquí en esta sala, he estado haciendo cosas con computadoras desde que era niño. Así es como se veía el lado de la programación al principio. Y así es como hacía cosas de diseño. En realidad, no soy tan viejo. Solo tenía versiones antiguas y agrietadas de estos. Pero estaba haciendo pequeñas aplicaciones, pequeños sitios, pequeños juegos. Y siempre requería tanto programación como diseño. Así que más herramientas de programación, más herramientas de diseño se acumulaban. Y siempre era extraño. Porque cuando estás haciendo un juego o una aplicación, en un día, estás tomando cientos, si no miles de estas micro decisiones de diseño y desarrollo. Y muchas de esas decisiones simplemente no encajan dentro de, digamos, VS Code o 3D Studio MAX. Abarcan todo el espectro de hacer una aplicación. Así que siempre era extraño que tenía que estar en VS Code, por ejemplo, o en ese momento, digamos, Dreamweaver o en Photoshop. Y tenía todas estas pequeñas micro ideas. Y sentía que en el lapso de cambiar de una aplicación a otra, un montón de ellas morían. Era simplemente creativamente limitante. Así que siempre era extraño. Y siempre sentí que quería hacer diseño y desarrollo al mismo tiempo, pero todos los días me despertaba, y Morpheus básicamente me ofrecía una de dos píldoras. Toma la píldora azul o la roja, haz diseño o desarrollo. No hay una píldora buena o mala aquí, estoy estirando una metáfora ahora mismo. Pero tienes que elegir una. Y siempre decía, ¿puedo tomar ambas? Y él decía, así no es como funciona.

2. The Violet Pill and Pure Blue

Short description:

Siempre quise tomar diseño y programación juntos, sin problemas. Flash era un entorno de diseño y desarrollo, pero no era el adecuado. Se han hecho muchos intentos para crear un entorno de diseño y desarrollo sin fisuras, pero es un hueso duro de roer. Por eso comencé con pure blue, un entorno de programación poderoso.

Y así que siempre quise tomarlos ambos, como una píldora violeta. Puedes simplemente diseñar y programar en el mismo entorno sin problemas. Busqué este entorno, uno de ellos era este. ¿Alguien recuerda esto? ¿Sí? Bien. Es una audiencia joven aquí, solo muy pocas manos.

Esto es Flash y a algunas personas les encanta Flash. Me encanta Flash. ¡Sí! ¡Un aplauso para Flash! Tenemos como cinco personas mayores de 30 aquí. Bien, para aquellos de ustedes que no recuerdan, Flash era un entorno de diseño y desarrollo y me encantaba y a mucha gente le encantaba. Estaban haciendo cosas increíbles con él. ¿Era esa la píldora violeta? No realmente. Como que podías hacer programación y diseño en la misma ventana del sistema operativo, pero la programación era limitada, la herramienta de diseño no era tan expresiva como, digamos, Photoshop o Max y cosas así. Así que, realmente no era una píldora violeta. Era más como, ya sabes, una paleta azul y roja. Era sabrosa. Era realmente buena, pero no lo adecuado.

Así que, realmente quería tener esa píldora violeta. Muchas personas han intentado hacer ese entorno de diseño y desarrollo sin fisuras. Simplemente, nunca se populariza. Es simplemente un hueso duro de roer. Así que, ha habido muchos intentos a lo largo de los años. En algún momento, pensé que tal vez debería intentarlo. ¿Qué tan difícil podría ser? Ingenuamente, así lo pensé. De todos modos, eventualmente eso se convirtió en algo que llamamos TheaterJS. Ahora, toma un enfoque diferente. Pensé que en lugar de hacer toda esa píldora violeta desde el principio, lo cual es algo muy difícil de hacer, comencemos con algo de pure blue. Ahora, ¿qué es pure blue? Pure blue es un entorno de programación. Podría ser, ya sabes, VS code, el lenguaje de programación podría ser JavaScript o Swift o cualquier otra cosa más. Comencemos con algo de pure blue, porque pure blue es súper poderoso. No hay nada que no puedas hacer con un lenguaje de programación.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Construyendo Mejores Sitios Web con Remix
React Summit Remote Edition 2021React Summit Remote Edition 2021
33 min
Construyendo Mejores Sitios Web con Remix
Top Content
Remix is a web framework built on React Router that focuses on web fundamentals, accessibility, performance, and flexibility. It delivers real HTML and SEO benefits, and allows for automatic updating of meta tags and styles. It provides features like login functionality, session management, and error handling. Remix is a server-rendered framework that can enhance sites with JavaScript but doesn't require it for basic functionality. It aims to create quality HTML-driven documents and is flexible for use with different web technologies and stacks.
Acelerando tu aplicación React con menos JavaScript
React Summit 2023React Summit 2023
32 min
Acelerando tu aplicación React con menos JavaScript
Top Content
Mishko, the creator of Angular and AngularJS, discusses the challenges of website performance and JavaScript hydration. He explains the differences between client-side and server-side rendering and introduces Quik as a solution for efficient component hydration. Mishko demonstrates examples of state management and intercommunication using Quik. He highlights the performance benefits of using Quik with React and emphasizes the importance of reducing JavaScript size for better performance. Finally, he mentions the use of QUIC in both MPA and SPA applications for improved startup performance.
Documentación Full Stack
JSNation 2022JSNation 2022
28 min
Documentación Full Stack
Top Content
The Talk discusses the shift to full-stack frameworks and the challenges of full-stack documentation. It highlights the power of interactive tutorials and the importance of user testing in software development. The Talk also introduces learn.svelte.dev, a platform for learning full-stack tools, and discusses the roadmap for SvelteKit and its documentation.
SolidJS: ¿Por qué tanto Suspense?
JSNation 2023JSNation 2023
28 min
SolidJS: ¿Por qué tanto Suspense?
Top Content
Suspense is a mechanism for orchestrating asynchronous state changes in JavaScript frameworks. It ensures async consistency in UIs and helps avoid trust erosion and inconsistencies. Suspense boundaries are used to hoist data fetching and create consistency zones based on the user interface. They can handle loading states of multiple resources and control state loading in applications. Suspense can be used for transitions, providing a smoother user experience and allowing prioritization of important content.
De GraphQL Zero a GraphQL Hero con RedwoodJS
GraphQL Galaxy 2021GraphQL Galaxy 2021
32 min
De GraphQL Zero a GraphQL Hero con RedwoodJS
Top Content
Tom Pressenwurter introduces Redwood.js, a full stack app framework for building GraphQL APIs easily and maintainably. He demonstrates a Redwood.js application with a React-based front end and a Node.js API. Redwood.js offers a simplified folder structure and schema for organizing the application. It provides easy data manipulation and CRUD operations through GraphQL functions. Redwood.js allows for easy implementation of new queries and directives, including authentication and limiting access to data. It is a stable and production-ready framework that integrates well with other front-end technologies.
Construyendo un Asistente AI Activado por Voz con Javascript
JSNation 2023JSNation 2023
21 min
Construyendo un Asistente AI Activado por Voz con Javascript
Top Content
This Talk discusses building a voice-activated AI assistant using web APIs and JavaScript. It covers using the Web Speech API for speech recognition and the speech synthesis API for text to speech. The speaker demonstrates how to communicate with the Open AI API and handle the response. The Talk also explores enabling speech recognition and addressing the user. The speaker concludes by mentioning the possibility of creating a product out of the project and using Tauri for native desktop-like experiences.

Workshops on related topic

IA a demanda: IA sin servidor
DevOps.js Conf 2024DevOps.js Conf 2024
163 min
IA a demanda: IA sin servidor
Top Content
Featured WorkshopFree
Nathan Disidore
Nathan Disidore
En esta masterclass, discutimos los méritos de la arquitectura sin servidor y cómo se puede aplicar al espacio de la IA. Exploraremos opciones para construir aplicaciones RAG sin servidor para un enfoque más lambda-esque a la IA. A continuación, nos pondremos manos a la obra y construiremos una aplicación CRUD de muestra que te permite almacenar información y consultarla utilizando un LLM con Workers AI, Vectorize, D1 y Cloudflare Workers.
AI para Desarrolladores de React
React Advanced 2024React Advanced 2024
142 min
AI para Desarrolladores de React
Featured Workshop
Eve Porcello
Eve Porcello
El conocimiento de las herramientas de AI es fundamental para preparar el futuro de las carreras de los desarrolladores de React, y la suite de herramientas de AI de Vercel es una vía de acceso accesible. En este curso, examinaremos más de cerca el Vercel AI SDK y cómo esto puede ayudar a los desarrolladores de React a construir interfaces de transmisión con JavaScript y Next.js. También incorporaremos APIs de terceros adicionales para construir y desplegar una aplicación de visualización de música.
Temas:- Creación de un Proyecto de React con Next.js- Elección de un LLM- Personalización de Interfaces de Transmisión- Construcción de Rutas- Creación y Generación de Componentes - Uso de Hooks (useChat, useCompletion, useActions, etc)
Trabajando con OpenAI y la Ingeniería de Prompts para Desarrolladores de React
React Advanced 2023React Advanced 2023
98 min
Trabajando con OpenAI y la Ingeniería de Prompts para Desarrolladores de React
Top Content
Workshop
Richard Moss
Richard Moss
En esta masterclass daremos un recorrido por la IA aplicada desde la perspectiva de los desarrolladores de front end, enfocándonos en las mejores prácticas emergentes cuando se trata de trabajar con LLMs para construir grandes productos. Esta masterclass se basa en los aprendizajes obtenidos al trabajar con la API de OpenAI desde su debut en noviembre pasado para construir un MVP funcional que se convirtió en PowerModeAI (una herramienta de creación de ideas y presentaciones orientada al cliente).
En la masterclass habrá una mezcla de presentación y ejercicios prácticos para cubrir temas que incluyen:
- Fundamentos de GPT- Trampas de los LLMs- Mejores prácticas y técnicas de ingeniería de prompts- Uso efectivo del playground- Instalación y configuración del SDK de OpenAI- Enfoques para trabajar con la API y la gestión de prompts- Implementación de la API para construir una aplicación orientada al cliente potenciada por IA- Ajuste fino y embeddings- Mejores prácticas emergentes en LLMOps
Construyendo Aplicaciones AI para la Web
React Day Berlin 2023React Day Berlin 2023
98 min
Construyendo Aplicaciones AI para la Web
Workshop
Roy Derks
Roy Derks
Hoy en día, cada desarrollador está utilizando LLMs en diferentes formas y figuras. Muchos productos han introducido capacidades AI incorporadas, y en esta masterclass aprenderás cómo construir tu propia aplicación AI. No se necesita experiencia en la construcción de LLMs o en el aprendizaje automático. En cambio, utilizaremos tecnologías web como JavaScript, React y GraphQL que ya conoces y amas.
Construyendo tu Aplicación de IA Generativa
React Summit 2024React Summit 2024
82 min
Construyendo tu Aplicación de IA Generativa
WorkshopFree
Dieter Flick
Dieter Flick
La IA generativa está emocionando a los entusiastas de la tecnología y a las empresas con su vasto potencial. En esta sesión, presentaremos Retrieval Augmented Generation (RAG), un marco que proporciona contexto a los Modelos de Lenguaje Grande (LLMs) sin necesidad de volver a entrenarlos. Te guiaremos paso a paso en la construcción de tu propia aplicación RAG, culminando en un chatbot completamente funcional.
Conceptos Clave: IA Generativa, Retrieval Augmented Generation
Tecnologías: OpenAI, LangChain, AstraDB Vector Store, Streamlit, Langflow
Building Your Own GenAI Agent Application
React Summit US 2024React Summit US 2024
87 min
Building Your Own GenAI Agent Application
WorkshopFree
Amit Mandelbaum
Idan Rozin
2 authors
Los agentes GenAI son una de las direcciones más prometedoras para aplicaciones complejas basadas en GenAI. Estos agentes pueden buscar en la web, codificar y realizar tareas complejas de manera completamente autónoma para el usuario. En esta masterclass aprenderemos los conceptos básicos de los agentes GenAI. Definiremos los términos y marcos básicos y entenderemos cómo se diferencian del uso tradicional de LLMs.Entenderemos las técnicas de prompting para agentes LLM y específicamente la técnica de React prompting para agentes de IA (no confundir con React el lenguaje de programación). Construiremos, desde cero, nuestro propio agente GenAI que puede interactuar con el usuario, realizar búsquedas en la web y codificar y ejecutar en Javascript.Tabla de contenidos:- Introducción a los agentes GenAI- Entendiendo el marco de React- Construcción práctica de un agente GenAI simple- Despliegue del Agente con streamlit- Consejos y marcos para desarrollar agentes GenAI