WebDev Arena: инструмент для сравнения возможностей ИИ в области веб-программирования, выпущенный LMArena

Общее введение

WebDev Arena - это сотрудничество между LMArena Платформа для соревнований по программированию с использованием искусственного интеллекта в реальном времени, разработанная командой, ориентированной на решение задач веб-разработки путем сопоставления языковых моделей искусственного интеллекта (LLM) друг с другом. Пользователи могут ввести конкретные задания по веб-дизайну, например "создать домашнюю страницу Twitter" или "разработать интерактивную игру", и платформа обратится к нескольким моделям ИИ для создания кода и представления результатов, после чего пользовательское голосование определит лучшую работу. Платформа является не только технической ареной, но и тесно взаимодействует с сообществом, принимая предложения и вклад пользователей. В настоящее время WebDev Arena сотрудничает с E2B для оптимизации обзоров программирования LLM и поддерживается UC Berkeley Sky Lab, OpenAI, Anthropic, Google DeepMind и другими, предоставляя пользователям инновационное пространство для изучения возможностей кодирования ИИ.

Список функций

• ИИ в режиме реального времени генерирует веб-страницы: Пользователь вводит инструкции по выполнению задачи, несколько моделей искусственного интеллекта одновременно генерируют HTML, CSS, JavaScript код и отображают его в режиме реального времени.
• Механизм выбора голосования пользователей: Сравнение результатов, полученных с помощью ИИ, с помощью слепого теста, голосования пользователей за лучшую веб-страницу и отображения личности модели после голосования.
• Разнообразные задачи программирования: Поддержка задач веб-разработки - от простых макетов страниц до сложных интерактивных приложений.
• Предварительный просмотр кода: Генерируйте код, который запускается непосредственно в браузере, позволяя пользователям мгновенно просматривать результаты работы веб-страниц и манипулировать ими.
• Функции взаимодействия с сообществом: Поощряйте пользователей подавать идеи задач или участвовать в улучшении платформы, открыв каналы для внесения вклада.
• Поддержка оценки моделей: Интеграция различных ведущих LLM (например, OpenAI, антропные модели), чтобы продемонстрировать программную силу различных моделей.

Использование помощи

Как получить доступ и использовать WebDev Arena

1. доступ к веб-сайту

• Откройте современный браузер, поддерживающий HTML5 (например, Chrome, Safari, Edge).
• Введите URL-адрес https://web.lmarena.ai/ и нажмите клавишу Enter, чтобы перейти на главную страницу.
• На главной странице отображается чистый интерфейс, включающий поля для ввода задач и основные инструкции.

2. Вводные задачи веб-разработки

• Введите требования к разработке в текстовое поле в нижней части страницы, например:
  • "Создание макета персональной домашней страницы Twitter".
  • "Создайте игру "Крестики-нолики", которая поддерживает матчи для двух игроков".
  • "Разработка чистой домашней страницы для электронной коммерции".
• Когда закончите, нажмите кнопку "Отправить" или клавишу "Enter" для отправки.

3. просмотр результатов подбора ИИ

• После отправки задания платформа вызывает несколько моделей ИИ (например, семейство GPT от OpenAI или Claude от Anthropic) для генерации кода.
• Подождите примерно 10-30 секунд (в зависимости от сложности задачи), и экран разделится на две или более колонок, показывающих веб-страницы, сгенерированные разными моделями.
• Каждая страница будет работать в режиме реального времени:
  • Для статических страниц вы можете увидеть полный макет и стиль.
  • В интерактивных приложениях вы можете напрямую управлять, например, щелкать мышкой и играть в шахматы в игре.
• Если модель не удалось сгенерировать (например, код сообщает об ошибке), обновите страницу и повторите попытку.

4. участие в голосовании

• Варианты голосования, такие как "Лучше слева", "Лучше справа" или "Ничья", отображаются под сгенерированными результатами.
• Внимательно изучите функциональность, эстетику и полезность каждой колонки страницы:
  • Убедитесь, что макет соответствует требованиям.
  • Проверьте, правильно ли работает функция взаимодействия.
  • Оцените элегантность реализации кода.
• Выберите вариант, который вы считаете лучшим, и отдайте свой голос.
• После голосования платформа показывает имя модели ИИ, соответствующее каждому результату, например "слева: Claude-3.5, справа: GPT-4o".

5. Исследование и вклад

• Миссия Вдохновение: На главной странице могут быть представлены примеры заданий, например "Клонировать главную страницу Notion" или "Сгенерировать калькулятор", которые можно попробовать выполнить, нажав на них напрямую.
• Посмотреть код: Хотя платформа пока не имеет функции прямой загрузки, сгенерированный HTML/CSS/JS-код можно просмотреть и скопировать через инструменты разработчика браузера (правая кнопка мыши - "Обзор").
• Участие в жизни общества: Если у вас есть идеи для новых заданий или предложения по улучшению, вы можете связаться с командой LMArena через официальные каналы (сайт или социальные сети), чтобы принять участие в развитии платформы.

Пример работы: создание домашней страницы Twitter

1. Посетите сайт https://web.lmarena.ai/.
2. Введите "Создать макет профиля Twitter" и нажмите "Отправить".
3. Примерно через 20 секунд на странице появляются два результата:
   • Слева: Синяя тема с аватаром, профилем и списком твитов.
   • Справа: серая тема с динамической анимацией загрузки.
4. Проверьте детали на обеих сторонах (шрифт, интервал, выравнивание) и протестируйте эффект взаимодействия при нажатии.
5. Выбрав "левая сторона лучше" и проголосовав, мы узнали, что левая сторона была сгенерирована Клодом, а правая - моделью OpenAI.

Основные функции в деталях

• ИИ в режиме реального времени генерирует веб-страницы
  Когда пользователь вводит команду на естественном языке, платформа вызывает несколько LLM для генерации кода и одновременного отображения результата. Например, если вы введете "создать калькулятор", то увидите интерфейс с кнопками для сложения, вычитания, умножения и деления. Весь процесс происходит в режиме реального времени, без необходимости вручную настраивать среду.
• Механизм выбора голосования пользователей
  Для обеспечения справедливости используется слепое голосование. Оценки пользователей влияют на внутреннее ранжирование моделей (например, баллы Эло), обеспечивая разработчикам поддержку данными. Идентичность модели раскрывается после голосования, чтобы добавить интереса.
• Предварительный просмотр кода
  Сгенерированный код запускается непосредственно в браузере без дополнительных инструментов. Вы можете сразу же испытать такие веб-эффекты, как перетаскивание элементов, заполнение форм или игры, что значительно снижает барьер для использования.
• Функции взаимодействия с сообществом
  WebDev Arena поощряет участие пользователей, например, в отправке новых заданий (например, "Сгенерировать музыкальный плеер") или в обратной связи с ошибками, и приветствует вклад сообщества, который можно получить через веб-сайт или в Twitter (@LMArenaAI).

Советы по использованию

• Четко сформулируйте задачу: Ввод "Сгенерировать страницу с функцией входа" с большей вероятностью даст удовлетворительные результаты, чем "Сгенерировать страницу".
• Больше попыток выполнить сложные задания: Если результат не соответствует ожиданиям, скорректируйте описание и попробуйте еще раз, например, добавьте такие слова, как "простой" и "современный".
• Сосредоточьтесь на динамике развития сторонников: Платформа сотрудничает с E2B, OpenAI и другими, и в будущем могут быть добавлены новые модели или функции, поэтому вы можете узнавать об обновлениях через официальные каналы.

Выполнив эти шаги, пользователи смогут быстро начать работу с WebDev Arena и испытать, как искусственный интеллект генерирует веб-страницы в режиме реального времени, участвуя в соревнованиях и совместном творчестве!