WebDev Arena: LMArena lanza una herramienta para comparar las capacidades de programación web de la IA

Introducción general

El WebDev Arena es una colaboración entre LMArena Una plataforma de competición de programación de IA en tiempo real desarrollada por un equipo centrado en completar retos de desarrollo web enfrentando modelos de lenguaje de IA (LLM) entre sí. Los usuarios pueden introducir tareas específicas de diseño web, como "crear una página de inicio de Twitter" o "desarrollar un juego interactivo", y la plataforma recurrirá a varios modelos de IA para generar código y presentar los resultados, seguidos de una votación de los usuarios para determinar el mejor trabajo. La plataforma no es sólo un escenario técnico, sino que también interactúa estrechamente con la comunidad, acogiendo sugerencias y contribuciones de los usuarios. En la actualidad, WebDev Arena trabaja con E2B para optimizar las revisiones de programación LLM y cuenta con el apoyo de UC Berkeley Sky Lab, OpenAI, Anthropic, Google DeepMind y otros, ofreciendo a los usuarios un espacio innovador para explorar las capacidades de codificación de la IA.

Lista de funciones

• La búsqueda de coincidencias en tiempo real genera páginas webEl usuario introduce las instrucciones de la tarea y varios modelos de IA generan simultáneamente código HTML, CSS y JavaScript y lo muestran en tiempo real.
• Mecanismo de selección del voto del usuarioComparación de los resultados generados por la IA mediante una prueba a ciegas, votación del usuario por la mejor página web y visualización de la identidad del modelo tras la votación.
• Diversos retos de programaciónSoporte a tareas de desarrollo web que van desde simples diseños de página a complejas aplicaciones interactivas.
• Vista previa de la ejecución del código: Genera código que se ejecuta directamente en el navegador, permitiendo a los usuarios ver y manipular instantáneamente los resultados de las páginas web.
• Funciones de colaboración comunitariaAnima a los usuarios a enviar ideas de tareas o a participar en las mejoras de la plataforma abriendo canales de contribución.
• Apoyo a la evaluación de modelos: Integrar una variedad de LLM líderes (por ejemplo, OpenAI, modelos antrópicos) para demostrar la fuerza de programación de diferentes modelos.

Utilizar la ayuda

Cómo acceder y utilizar WebDev Arena

1. Acceso al sitio web

• Abra un navegador moderno compatible con HTML5 (por ejemplo, Chrome, Safari o Edge).
• Introduzca la URL https://web.lmarena.ai/ y pulse Intro para ir a la página de inicio.
• La página de inicio muestra una interfaz limpia, que incluye cuadros de introducción de tareas e instrucciones básicas.

2. Introducir tareas de desarrollo web

• Introduzca sus requisitos de desarrollo en el cuadro de texto situado en la parte inferior de la página, por ejemplo:
  • "Generar un diseño de página de inicio personal de Twitter".
  • "Crear un juego de tres en raya que admita partidas de dos jugadores".
  • "Diseñar una página de inicio de comercio electrónico limpia"
• Cuando haya terminado, haga clic en el botón "Enviar" o pulse "Intro" para enviar.

3. Ver los resultados del matchmaking de la IA

• Tras enviar una tarea, la plataforma llama a varios modelos de IA (por ejemplo, la familia GPT de OpenAI o Claude de Anthropic) para generar código.
• Espere unos 10-30 segundos (dependiendo de la complejidad de la tarea) y la pantalla se dividirá en dos o más columnas mostrando las páginas web generadas por los diferentes modelos.
• Cada página se ejecutará en tiempo real:
  • En el caso de las páginas estáticas, puede ver el diseño y el estilo completos.
  • Para las aplicaciones interactivas, es posible la manipulación directa, como hacer clic y jugar al ajedrez en un juego.
• Si no se genera un modelo (por ejemplo, el código indica un error), actualice la página e inténtelo de nuevo.

4. Participación en las votaciones

• Debajo de los resultados generados aparecen opciones de votación como "Mejor a la izquierda", "Mejor a la derecha" o "Empate".
• Fíjese bien en la funcionalidad, la estética y la utilidad de cada columna de la página:
  • Comprueba que el diseño cumple los requisitos.
  • Compruebe que la función de interacción funciona correctamente.
  • Evalúe la elegancia de la aplicación del código.
• Seleccione la opción que le parezca mejor y envíe su voto.
• Tras la votación, la plataforma revela el nombre del modelo de IA correspondiente a cada resultado, por ejemplo, "izquierda: Claude-3,5, derecha: GPT-4o".

5. Exploración y contribución

• Misión Inspiración: La página de inicio puede proporcionar tareas de ejemplo, como "Clonar página de inicio de Notion" o "Generar calculadora", que pueden intentarse pulsando directamente sobre ellas.
• Ver Código: Aunque la plataforma no dispone por el momento de una función de descarga directa, el código HTML/CSS/JS generado puede visualizarse y copiarse a través de las herramientas de desarrollo del navegador (inspección con el botón derecho del ratón).
• Participación comunitariaSi tienes ideas para nuevas tareas o sugerencias de mejora, puedes ponerte en contacto con el equipo de LMArena a través de los canales oficiales (página web o redes sociales) para participar en el desarrollo de la plataforma.

Ejemplo de operación: Generar página de inicio de Twitter

1. Visite https://web.lmarena.ai/.
2. Escribe "Generar un diseño de perfil de Twitter" y haz clic en "Enviar".
3. Al cabo de unos 20 segundos, la página muestra dos resultados:
   • Izquierda: Tema azul con avatar, perfil y lista de tweets.
   • Derecha: tema gris con animación de carga dinámica.
4. Comprueba los detalles en ambos lados (fuente, espaciado, alineación) y prueba el efecto de la interacción del clic.
5. Al elegir "la izquierda es mejor" y votar, aprendimos que el lado izquierdo fue generado por Claude y el derecho por el modelo OpenAI.

Funciones básicas en detalle

• La búsqueda de coincidencias en tiempo real genera páginas web
  Cuando el usuario introduce un comando en lenguaje natural, la plataforma llama a múltiples LLM para generar el código y renderizar el resultado simultáneamente. Por ejemplo, si escribe "crear una calculadora", puede ver una interfaz con botones para sumar, restar, multiplicar y dividir. Todo el proceso se realiza en tiempo real, sin necesidad de configurar manualmente el entorno.
• Mecanismo de selección del voto del usuario
  La votación a ciegas se utiliza para garantizar la imparcialidad. Las valoraciones de los usuarios afectan a la clasificación interna de los modelos (por ejemplo, las puntuaciones Elo), proporcionando datos de apoyo a los desarrolladores. La identidad del modelo se revela tras la votación para añadir interés.
• Vista previa de la ejecución del código
  El código generado se ejecuta directamente en el navegador sin necesidad de herramientas adicionales. Puedes experimentar al instante efectos web como arrastrar elementos, rellenar formularios o jugar, lo que reduce enormemente la barrera de uso.
• Funciones de colaboración comunitaria
  WebDev Arena fomenta la participación de los usuarios, como el envío de nuevas tareas (por ejemplo, "Generar un reproductor de música") o la aportación de comentarios sobre errores, y agradece las contribuciones de la comunidad, que pueden obtenerse a través del sitio web o en Twitter (@LMArenaAI).

Consejos de uso

• Sea claro en la descripción de sus tareas: Es más probable que "Generar una página con función de inicio de sesión" produzca resultados satisfactorios que "Generar una página".
• Más intentos de realizar tareas complejas: Si el resultado no es el esperado, ajuste la descripción y vuelva a intentarlo, por ejemplo, añada palabras como "sencillo" y "moderno".
• Centrarse en la dinámica de los simpatizantesLa plataforma coopera con E2B, OpenAI y otros, y es posible que en el futuro se añadan más modelos o funciones, por lo que puedes enterarte de las actualizaciones a través de los canales oficiales.

Con estos pasos, los usuarios pueden iniciarse rápidamente en WebDev Arena y experimentar cómo la IA genera páginas web en competiciones en tiempo real mientras participan en la co-creación de la comunidad.