Make Real: la aventura de IA de tldraw

Soy Steve Ruiz de una empresa llamada Tealdraw. Déjame poner esto aquí. Estamos en Londres. Puedes seguirme en Twitter, y deberías, en SteveRuiz.

Bien. Tealdraw es este canvas. Pizarra. También es un SDK de pizarra, que es algo interesante, un poco diferente sobre él, donde puedes integrarlo en una aplicación de React y construir tu propio canvas, extenderlo, añadirle cosas, todo eso. Es un software hermoso.

Solo para demostrar que realmente, realmente es una aplicación de React, haré uno de estos. Esta es la única vez que voy a mostrar código y luego volveré a todo lo demás, ya sabes. Hola, hola. ¿Qué? Hola, hola. Justo ahí, ¿verdad? Así que aunque el canvas es, ya sabes, se siente como un canvas, puede hacer zoom, alejarse, puedes hacer muchas, muchas, muchas formas y todo eso, y simplemente lo hará bien, bien, bien. Cada una de estas pequeñas formas es su propio componente de React. Y así puedes hacer todas las cosas que puedes hacer en la web en el canvas también. Y eso no es una decisión obvia.

Los canvas son notoriamente, como, difíciles de construir, y también son difíciles de, como, renderizar cosas en ellos. Aplicaciones como Miro, Figma, etcétera, usaron motores de renderizado personalizados que estaban en lenguajes de alto rendimiento, usaron WASM y todas esas cosas, como, para obtener lo máximo de la experiencia del navegador para que puedas tener miles de formas y moverte muy suavemente. Pero resulta que también puedes hacer eso con el DOM y con React. Así que si tu aplicación es lenta, es culpa tuya, no de esto.

Entonces, ¿qué haces con este tipo de aplicación? Puedes hacer, ya sabes, lo que sea. Haz tus memes, haz tu, ya sabes, escribe tu hola, tiene ese encantador, como, algoritmo de línea sensible a la presión o de ancho variable que hice. Puedes hacer diagramas de flujo y crear diferentes activos y cosas así. Puedes hacer wireframes. Mucha gente usa esto para wireframes. Pero ya sabes, es solo para dibujar, es solo para comunicar. Es colaborativo, es gratuito, tealdraw.com, adelante. Y para mí, eso es suficiente. De hecho, ya sabes, esto es lo que quería construir, quería construir tecnología y hacer que fuera realmente fácil para otras personas construir este tipo de aplicaciones.

Inserta un componente de Tealdraw, extiéndelo, añade tus propias cosas, conéctalo a tu aplicación. Esa era la esperanza. 2022, cuando comencé la idea de, como, usar AI en el canvas. Quiero decir, AI estaba volviéndose popular, GPT-2, ese tipo de cosas. Y lo que la gente estaría haciendo es, como, tener el GPT-2 generando diagramas de Mermaid.js, renderizarlos y luego, básicamente, renderizarlos en el canvas. Estoy como, oh, eso es algo genial, pero no es realmente tan genial. Sí, lo que sea, ¿verdad? O, como, tener plantillas que podrías usar con la AI para, como, intercambiar cosas, ya sabes, un poco al estilo FigJam, como, su material de plantillas impulsadas por AI. No es realmente emocionante para mí, pero habría sido muy fácil construir sobre Tealdraw.

No fue hasta que los modelos Vision salieron, y esto fue, ya sabes, a finales de 2022, que de repente el canvas se volvió, como, oh, genial, como, los modelos ahora funcionan con imágenes. Tenemos un canvas del que podemos crear imágenes muy fácilmente, ¿verdad? Como, puedo simplemente hacer lo que sea, copiar como SVG o copiar como PNG, ya sabes, pegar, y ahora aquí está mi imagen de lo que acabo de dibujar. Tal vez podríamos usar eso como entrada para los modelos. Ahora, en realidad no estaba, no éramos la, la idea original para Make Real no vino de nosotros, incluso. Vino de un diseñador en Figma llamado Sawyer Hood, anteriormente de Figma, quien vio la presentación de Open AI sobre estos nuevos modelos Vision y fue como, oh, esto es tan genial, podemos usar esto para generar código. Y tenía una pequeña demo donde crearía un prototipo basado en lo que sea que dibujaras, y lo enviaría al modelo y diría, hey, modelo, eres un experto en tailwind y desarrollador web que trabaja desde, como, wireframes de baja fidelidad y crea prototipos funcionales. Aquí está la última imagen de tus diseñadores. Por favor, regresa con un prototipo funcional. Y lo haría. Llevamos esto mucho más lejos. Lo pusimos de nuevo en el canvas. Así que esto es, de nuevo, el canvas está hecho de cosas web, así que podemos hacer esto. Lamentablemente, Miro y los demás no pudieron porque su canvas no era web.

Esta pequeña cosa sobre la que todavía puedo dibujar y rotar, todo eso, es un sitio web funcional. Puedo hacer doble clic aquí, puedo añadir minutos, puedo añadir segundos, puedo iniciar el temporizador, y funciona. Aplausos. Sí, ¿verdad? Sí. Lo cual es algo genial. Pero de nuevo, porque está en el canvas, puedo hacer más que eso. También puedo anotar. Puedo decir, ya sabes, poner un encabezado aquí que diga, como, temporizador.

Puedo decir que este botón de reinicio sea, como, verde o algo así. ¿Verdad? Y luego puedo usar esto como la siguiente entrada para el modelo. Así que la primera entrada, esta cosa se basó solo en mi dibujo. Ahora lo hemos enviado al modelo y hemos dicho, no solo eres un experto desarrollador web, nosotros, ya sabes, decimos que tiene 10,000 años y que ama a sus desarrolladores y que si te equivocas, la Casa Blanca se va a incendiar o algo así. Pero, ya sabes, toda la bonita ingeniería de prompts. Pero sí. También en este caso, sí, genial, ¿verdad? Sí, está bien. De acuerdo. En este caso, decimos que te han dado un nuevo diseño que tiene anotaciones. Toma lo que escribiste antes y actualízalo para reflejar esas anotaciones. Y podría seguir. Podría seguir, ya sabes, iterando sobre esto. Lo cual es sorprendentemente, como, eso es todo lo que necesitas. Como, eso es un flujo de trabajo. Como, podrías usar esto para hacer básicamente cualquier cosa solo a través de estas, como, pequeñas iteraciones paso a paso.

State, ya sabes, gráficos de estado o diagramas o imágenes de sistemas de back end. Puedo hacer que funcione desde, ya sabes, tal vez esto sea ambos. En este caso, los modelos son tan buenos ahora que realmente no importa. Pero generará una UI, basada en lo que le des. El prompting que hacemos es realmente, como, no puedes no hacer una UI. No puedes no hacer un sitio web funcional. Tienes que hacer algo. Y lo hará. Simplemente no se verá necesariamente como lo haría si proporcionaras una entrada.

También puedes hacer un poco de, como, transferencia de estilo. Así que puedes decir, como, oye, haz de esto un cronómetro. Pero también haz que se vea como Stripe o algo así. Dejaremos que esto se cocine por un rato. También puedes darle los tipos de diagramas que le darías a los desarrolladores para decir, como, solía hacer esto, ya sabes, a tiempo completo, como diseñador de experiencia de usuario lo que sea. Y especificar ciertas cosas, como, muy difícil de poner en palabras. Empiezo a hablar con las manos y esas cosas, ¿verdad? Así que en este caso, puedes ver cómo debería funcionar. Quiero decir, todos ustedes son desarrolladores. Probablemente reciban cosas como esta de vez en cuando de sus diseñadores. Y es tan útil tener un pequeño diagrama o un pequeño gráfico para trabajar. Mucho mejor que, como, un párrafo de texto diciendo, como, bueno, debería estar cerrado. Y luego, cuando se abre, cualquier otra cosa abierta debería cerrarse para acomodar el espacio para lo que sea. Dibújalo. Y eso también funciona bastante bien. Te mostraré el equivalente de un programa de cocina de, como, y aquí está, ¿sabes? Aunque no hace que solo una cosa pueda estar abierta a la vez. Veamos si lo hizo en este.

También puedes hacer cosas sorprendentemente complejas con esto. Así que en este caso, quería tener una app de stop motion que tomara fotos de mí y luego, como, mostrar, como, una piel de cebolla de te mostraré lo que es, ¿verdad? Dejaré que esto lo genere. Y solo porque, de nuevo, mientras esto se carga, te mostraré, ¿sabes qué? Esto es bastante genial. Te dejaré pasar mis minutos aquí. Así que, por supuesto, hacemos nuestro mejor esfuerzo para transmitir los elementos a medida que vienen del modelo.

Pero normalmente lo que tienes es, como, todo el, como, HTML viene primero y luego esta etapa muy larga donde es, como, escribir la etiqueta de script al final de la cosa. Así que hay este retraso al final. Lo cual es inevitable.

Pero debería. Espera. Tengo que habilitar el acceso a la cámara aquí. Refrescar. Y sí. Así que vamos a intentar esto. De nuevo, no escribí ningún código aquí. Pero puedo, ya sabes, hacer exactamente lo que. Y solo para probarte, sí, como esto es lo que salió. Puedo eliminar estos tal como pedí. Y luego puedo presionar play para obtener mis pequeños gifs terribles allí, ¿verdad?

También puedes hacer las cosas que se van a volver progresivamente más tontas aquí a medida que se me acaba el tiempo. Así que quería tener una pequeña cara que hiciera esto y dijera palabras en voz alta. Y esto es lo que obtuve. Hola. Lo que sea. También puede hacer juegos bastante bien. Así que en este caso, quería tener una especie de, como, juego de misiles, lo que sea, donde las cosas caen del cielo y disparas lo que sea. Y así, mientras esto se carga, te mostraré lo que se me ocurrió. ¡Boom! Como, un disparo. Ni siquiera, como, ninguna iteración aquí. Lo cual es bastante asombroso. Y algunas de las cosas más geniales que la gente hizo con MakeReal son estos, como, juegos que han ajustado, jugando con sus hijos y esas cosas. Para muchas personas, esto, MakeReal fue como la primera, especialmente, como, personas adyacentes a la tecnología cosas como gerentes de proyectos o personas que trabajaban en empresas pero no codificaban. Esta fue, como, su primera experiencia. Lo que me dijeron fue, como, esta fue su primera experiencia haciendo algo que, como, funcionaba. Como, este fue ese cero a uno, algo así como, oh, puedo crear cosas, como, con código que son interactivas. Porque simplemente saltó todo el no código, toda la herramienta de diseño.

Era muy, muy suelto. Podrías simplemente escribir la palabra calculator y presionar un botón, y obtendrías una calculadora. Así que está bien. Este en realidad se ve un poco mejor. Los misiles están apuntando en la dirección correcta. No, están al revés. Pero aún funciona.

Muy bien. Ooh, animaciones. Maravilloso. Me encanta. También puedes darle código, si quisieras. Así que en este caso, estoy diciendo que quiero tener, como, un generador de arte ASCII, donde escribo lo que quiero, y luego muestra generar algo de arte ASCII. Para generar el arte ASCII, quería tomar mi clave de OpenAI y hacer una llamada a OpenAI y regresar con el resultado. Sí, enviar los prompts, etcétera, etcétera.

No, filtré mi clave en el escenario. Eso es nuevo para mí. No uses eso, nadie. Todavía queda dinero. Sé lo que haré después de esta charla. Así que de nuevo, dejaré que eso cargue, y solo te mostraré el... Veamos qué hace. Generando el arte ASCII. Está llamando a OpenAI, usando mi clave, regresando. Ah, ¿nuestra clave? Sí. Muy bien. De todos modos, son todos créditos, hombre. Enloquece. Probemos esto. Eso realmente no se parece a un pulpo en absoluto.

Quizás este sí lo haga. Oye, ¿por qué no? Así que las cosas que puedes hacer con esto son bastante sorprendentes. Te mostraré un par de otras cosas relacionadas con la IA. No esperaba que el canvas se usara de esta manera, pero porque construimos... Esto es al principio, como... La moraleja de la historia es, oye, construye con la web. Construye con herramientas que permitan a las personas crear cosas asombrosas con ellas. Y no tienes que saber qué va a pasar. Las cosas buenas simplemente suceden, ¿verdad?

Porque cuando estos modelos salieron, cuando era incluso teóricamente posible tener un canvas lleno de sitios web y cosas así, ya habíamos construido exactamente lo que yo habría comenzado a construir. ¿Sabes a lo que me refiero? Para lograr eso. Así que te mostraré un par de otras cosas rápidamente. También hemos estado viendo... Como enseñando a los modelos a usar el canvas. Así que, por ejemplo, como... Por cierto, no son buenos en esto. Esto no es algo en lo que los modelos sean buenos. Realmente no pueden dibujar muy bien. Así que le pedí que dibujara a Batman. Es solo... Está bien. Genial.

Pero lo interesante es que esto no es, como, una generación de imágenes. Esto es lo mismo que he hecho, ¿verdad? Así que también puedo hacer, como, un... Ya sabes, una cara. Y decir, como... No sé. Hazlo triste. ¿Sabes? Y está obteniendo esa imagen, está regresando con cosas.

Está bien. Eso no es... Eso tampoco es muy bueno. Algunas cosas las hace mejor. Ciertamente con... Ya sabes, puede generar cosas como estos diagramas de flujo. Creo que uno de mis usos favoritos de esto es... ¿Cómo lo llamas? Storyboards. Así que voy a hacer que haga el póster para el storyboard. póster para la inmersión más profunda del drama de la conferencia de React. Próximamente en cines cerca de ti. ¡Oh! Creo que estaba escribiendo algo de código aquí. Déjame poner eso al fondo. Profundidad.

Está bien. Está escribiendo código. Bien. Comenzando la comunidad de React. Hooks, componentes, gestión de estado. Próximamente en una conferencia cerca de ti. Maravilloso. Eso es bastante genial. Escena uno.

Completa el storyboard para la escena uno de esta conferencia. Y me quedan como 60 segundos. Te mostraré algo más que... Oh, eso es aburrido. Encuéntrame más tarde. Te mostraré algunas cosas geniales.

Otra cosa que puedes hacer aquí es como... Está bien. Así que no es bueno dibujando. No es bueno en esas cosas. ¿En qué es bueno? Es bueno creando información, moviendo información. Este es un lugar realmente interesante para este tipo de flujos no lineales y flexibles.

Así que en este caso, esto es muy nuevo. Estoy haciendo que complete un... Como un diagrama de flujo usando LLMs para crear el contenido. Así que este es un corto comercial para la nueva versión de React 21 que introduce signals. Y React ha creado... Espera. Tendré que esperar a que esto se complete. Ahora, también ha generado comentarios duros en Twitter para esto. Y luego también ha desarrollado un... Vamos a leerlo. Ah, sí. Porque React necesita desesperadamente otra forma de manejar el estado. Lo tienes. Correcto. Así que esta es una forma de crear diferentes tipos de contenido. Así que sitios web, etc. A través de este tipo de diagrama de flujo. Y realmente, cualquier cosa puede ser cualquier cosa.

Así que puedo usar esta imagen como el comp imperativo para otra generación de discurso. Puedo hacer que el discurso sea triste y serio y cosas así. Estamos viendo muchas formas diferentes de... ¿Cómo podemos usar este increíble, abierto paradigma de, como, el canvas con TealDRAW y algunos de estos nuevos modelos de lenguaje? Ni siquiera quiero saber. Pero... Imagina un desarrollador. Oh, lo siento. No. De todos modos. Eso es TealDRAW. Soy Steve Ruiz. Tengo demos para días y días y días. Si quieres encontrarme más tarde, estaré encantado de compartir. Y si quieres hacer algo con TealDRAW, tealdraw.dev es el sitio web. Puedes obtenerlo de NPM. Adelante. Gran Discord, etcétera.

Gracias. Quiero sacar todas nuestras pequeñas preguntas y ver qué quiere saber la gente. ¿Cómo estás? Bien. ¿Sabías que Steve tiene un trasfondo en arte? ¿Y luego decidió entrar en tecnología? ¿Porque quería estar más triste? No lo sé. No hace mucho. No hace mucho. ¿Es el código generado React? No. Dame un archivo, archivo HTML, CSS, JavaScript. Así que no hemos llegado tan lejos. ¿Entonces vanilla? Vanilla. ¿Recuerdas eso? Sí. Oh, dios.

Tantas buenas preguntas.

¿Cómo manejas el rendimiento en un canvas tan grande? Combinamos principalmente APIs del navegador que están disponibles a través de CSS. Por ejemplo, ocultar cosas que están fuera de la pantalla, pero no desmontarlas, porque eso sería demasiado lento para entrar y salir del documento. Gestionamos posiciones de manera algo imperativa. Construimos nuestra propia biblioteca de señales para gestionar el tipo de árbol de dependencia de datos. Es de código abierto en minúsculas. No es una licencia abierta, pero puedes leer nuestro código fuente, si quieres adentrarte en los detalles realmente finos. Pero es realmente difícil hacer que React haga esto. Pero es posible. Y sí, puede funcionar.

Muy genial. ¿Hay alguna manera ahora o en el futuro de añadir tu propio contexto o datos de entrenamiento programáticamente? Me encantaría conectar un sistema de diseño, junto con ejemplos de documentación, etcétera. Make real.tildra.com, puedes cambiar el prompt, el prompt del sistema si quieres. También tenemos un kit de inicio de código abierto, si quisieras construir tu propio tipo de cosa con esto. Podrías simplemente tomar eso y volverte loco. Realmente no es que el canvas en sí sea como el 99.9% del código. La función make real es como una cantidad muy, muy delgada de código encima de eso. Así que es bastante fácil comenzar y personalizar, si quieres.

Cuéntanos un poco sobre la parte de IA de esto. El modelo. Hemos probado todos los modelos, de hecho en make real, puedes elegir modelos e incluso hacer que múltiples modelos se enfrenten entre sí y corran simultáneamente. Yo quiero decir, no gano dinero con make real, pero lo uso un poco para intimidar. Creo que los estoy intimidando. Animar. A uno de los grandes proveedores de modelos a preocuparse por este tipo de razonamiento visual y capacidad visual porque no es algo obvio que estos modelos de lenguaje deberían poder hacer. Pero si son capaces de hacerlo, si son capaces de, ya sabes, mirar un dibujo y no solo decirte qué es, sino descomponerlo en partes elementales y saber de qué formas está hecho un árbol o de qué formas está hecha una página de aterrizaje. Hay muchas cosas que puedes hacer con esa capacidad. Cada vez que sale un nuevo modelo, digo, bien, veamos cómo el nuevo SONNET se compara con un 4.0. Sí, veamos si puedo avergonzar a open AI para mejorar sus capacidades allí. Creo que es un esfuerzo valiente. Hay un par de preguntas aquí.

Curiosamente, ustedes son tan inteligentes, sobre seguridad y si pueden poner cosas como claves en su canvas, ¿es eso seguro? ¿Y privado? Más o menos. Yo no lo haría. Y sin embargo. Quiero decir, en MakeReal, también tienes que poner tu clave de Open AI para siquiera usar la cosa. Creo que la entrada está con un marcador de posición como, arriesgado pero genial. Por supuesto, no uses esto si no quieres. Puedo decirte que el código es de código abierto, puedes leerlo. No estamos haciendo nada sorprendente o turbio. No es un honeypot para, como, robar claves de Open AI o algo así. Pero ya sabes, es lo mismo, esencialmente el mismo nivel de protección que usarías al usar estos modelos directamente. Como, ya sabes, si hay información súper sensible, tal vez no pongas eso en un chat GPT. Lo mismo con MakeReal.

Interesante. Arriesgado pero genial es todo lo que me llaman. Me entristece decir que esa estrategia de hacer que los usuarios finales pongan sus propias claves API para evitar que un proyecto viral paralice a la empresa que lo proporciona o al desarrollador, ha ganado un poco más de popularidad después de MakeReal que antes. Influencer. Espero. Probablemente, es uno de mis pecados como desarrollador es popularizar eso.

Hablemos un poco sobre el resultado generado. ¿Es además de obviamente muy genial, es usable? ¿Es accesible? Sí, no lo mostré, pero puedes, todos esos proyectos individuales que se generan, esos pequeños sitios web en el canvas, son enlaces permanentes. Podrías copiar eso y, ya sabes, marcarlo. Ahora tienes tu propio, como, hice uno para calcular las proporciones de café a agua cuando estoy haciendo como, V60s o algo así. Solo uso eso. Solo necesitaba un pequeño, como, calculadora. Lo hice. Ahora lo uso. También puedes llevar ese código a Replit o CodeSandbox o el Acblitz, creo, y continuar allí. En un momento, añadimos un editor de código en el sitio web de MakeReal para que pudieras editar el código directamente, pero lo que encontramos es que eso le quitaba la diversión, porque ahora no podías realmente decir si algo que alguien había hecho en MakeReal era genial porque lograron convencer al modelo de hacerlo o si simplemente lo escribieron ellos mismos. Así que nunca lanzamos el editor dentro de MakeReal. Pero sí, es algo usable.

Es un buen punto de partida. No va a dejar a nadie sin trabajo, pero es un buen ejemplo de, como, este tipo de co-generación visual.

Ahora, háblanos un poco sobre ti y tu vida, incluyendo cómo y por qué fue este cambio del arte a la tecnología, y ¿es TealDRAW una empresa o un hobby?

Sí, somos una startup. Somos una startup respaldada por VC. He recaudado cerca de 15 millones de dólares para TealDRAW. Ganamos dinero, de hecho, lo cual es genial. Ganamos dinero licenciando el canvas a otras empresas de software que quieren tener este tipo de conjunto de características pero no quieren construir todo ese material no diferenciado en el medio. Un poco como un editor de texto o una cuadrícula de datos, estas cosas que, si quisiera construir una cuadrícula de datos, el mejor resultado posible sería que termine siendo tan buena como una G-grid, así que simplemente usaría una G-grid. Lo mismo con el canvas, es que gran parte de esta experiencia de usuario va a ser la misma para todos ellos, que tiene sentido que alguien lo proporcione como una mercancía. Así que ese es el lado comercial de TealDRAW. Esto es más o menos el lado de marketing e I+D de TealDRAW.

¿La parte divertida? La parte divertida, sí. Y cuéntanos sobre tu... Yo mismo, cómo terminé aquí, con antecedentes en arte contemporáneo, escribiendo sobre arte, vine al Reino Unido, tenía un estudio, seguía haciendo trabajo, cumplí 30, decidí ganar algo de dinero, y pasé muy rápidamente de como al diseño. Tenía un poco de habilidades técnicas, así que terminé un poco en prototipos, parte técnica del diseño, y luego diseño de interacción, todo eso, y luego comencé a hacer proyectos de código abierto alrededor de estos problemas muy visuales como flechas o líneas de ancho variable, como una especie de tinta digital. Todo esto en Twitter.

Si te gusta este tipo de cosas, definitivamente sígueme. Publico muchos GIFs. Y una de esas cosas, que fue el, hey, construyamos una pizarra, se hizo muy popular, y la gente comenzó a pagarme para permanecer desempleado, lo cual es una buena base para una empresa. Eso es lo mejor. Sí, fue una buena. Y una última pregunta antes de enviarte a las salas de preguntas y respuestas, ¿tienes alguna especie de visiones futuras para la extensibilidad o plugins o jugar bien con otros tipos de cosas? Sí, me encanta ese tipo de cosas. Es muy, muy fácil extender TealDRAW. Puedes añadir tus propias formas. Puedes escribirlas básicamente como componentes de React con un poco más de configuración encima. Y probablemente enviaremos plugins como algo así como una experiencia de usuario final, como en tealdraw.

Sería genial tener una comunidad de desarrolladores construyendo, hey, es una lista de tareas para TealDRAW, este tipo de cosas. Ese último proyecto que te mostré, el tipo de cosa como un diagrama de flujo computacional, ese es un lugar donde creo que tendremos mucho más y más fácil tiempo para tener una especie de comunidad de plugins. Y eso es muy, muy, muy nuevo. Así que sí, mantente atento para más allí.

La idea es, de nuevo, simplemente hacer que el canvas sea extremadamente viable como una base para aplicaciones de una manera que ahora mismo es como si gastarás toda tu ronda inicial construyendo solo el canvas para que puedas construir las cosas diferenciadas encima de él.

Recuerda a la gente dónde pueden encontrarte en internet. Sígueme en twitter.com barra SteveRuizOK. Tengo un blog en steveruiz.me y tealdraw.com para jugar con la demo glorificada. Tealdraw.dev para aprender más sobre su uso en el contexto de desarrolladores. Y sí, twitter.com barra Tealdraw para seguir todas las cosas divertidas. Gracias, Steve. Eso fue realmente genial. Muy bien. Gracias.