Claude Artifacts: как добиться рабочей игры
Артефакты в Claude позволяют пользователям создавать интерактивные и редактируемые выходные данные, в том числе и код. Рассказываем, как работает эта фича и как создать приложение с помощью нейросети.
233 открытий2К показов
Что такое артефакт
Claude Artifacts — это публикуемый код чего угодно, что вы сгенерировали с помощью нейронки компании Anthropic. HTML-страницы даже рендерятся на месте. Для любителей форкнуть что-то годное есть кнопка Remix: с ее помощью код проекта клонируется, и мы получаем возможность видоизменять все под себя.
Артефактом, будь то веб-сайт, игра или приложение, делятся с помощью ссылки. И на мой взгляд, это новый уровень общения в комьюнити энтузиастов чего угодно. Если вам хочется быстрее обработать результаты опроса — сверстайте презентацию-отчет, Claude сама проведет EDA (разведочный анализ данных) и поищет интересное. Если вашему приложению не хватает кросс-платформенности — попросите адаптировать существующий код Telegram-бота в сайт.
Никто не обещает, что все сразу заработает, но если вы хотя бы немного программируете, то наверняка уже привыкли к фрустрации от ошибок. А значит, доведете дело до результата.
Если вы хотите научиться писать промпты для LLM, как профи, обратитесь к этой статье. Разработчики поделились 20 принципами хорошего промпта.
Лимиты на обращения в Claude 3.5 Sonnet теперь носят временный характер:
1 message remaining till 2 PM.
Создаем рабочий артефакт
Прежде чем попасть к 3.5 Sonnet, мне потребовалось пройти регистрацию с помощью Google oAuth, причем российский +79… не принимался. С этим шагом помогают сторонние сервисы временных номеров для приема кодов вроде Grizzly SMS. Anthropic почему-то не сработал с +1 (США), но сдружился с +44 из Великобритании. Получить код обошлось мне в ~20 рублей.
Мой коллектив скоро будет играть в «Угадай мелодию», и я хочу организовать процесс, как это сделал бы настоящий питонист, то есть автоматизируя все, что только смогу.
На мой взгляд, массивное ТЗ, вгруженное в любую GPT разом, почти наверняка сделает артефакт нерабочим. Я пользуюсь принципом декомпозиции и подаю системе фичи небольшими кусками. Да, это потребует бóльшего количества сообщений и токенов, однако значительно повысит шансы на собираемость проекта.
Первоначальный промпт выглядит несложно:
Claude отдал мне CLI-версию, которая собралась сразу:
Первый MVP (минимально жизнеспособный продукт) получен. В дальнейшем я не буду перекопировать все сниппеты, чтобы объем статьи оставался оптимальным.
Проблема появилась со стороны: macOS отказался устанавливать библиотеку playsound любым способом. Потому я решила использовать аналог — pydub:
Нейронка отдала следующую рабочую версию, попутно описав улучшения:
После установки pydub и соответствующей вспомогалочки ffmpeg я получила игру в командной строке, причем музыка воспроизводилась прямо в командной строке:
Такая ностальгия по CLI будет понятна только мне, скорее всего, а модератором будет другой человек — не программист. Так что добавляем веб-интерфейс:
Нейронка избрала для этой задачи Flask — популярный минималистичный фреймворк. Для сборки артефакта на его базе нужно всего два файла: index.html и app.py. Их Claude аккуратно упаковывает в средство предпросмотра (жаль, Python не компилируется прямо на сайте, как JavaScript). Приятная мелочь — в дальнейшем файлы будут обрастать версиями, между которыми удобно переключаться:
Далее я уперлась в лимит бесплатных сообщений. Пришлось подождать чуть больше часа. Естественно, после 14:00 сессия «помнит» все: от переписки до файлов, которые отдала нейронка.
Следующий шаг — возврат категорий. Чат-бот сократил их до троеточий, что допустимо в условиях ограниченного контекста, но все же восстановим листинг песен:
Здесь наступил лимит контекстного окна. Если верить документации, для Free-тарифа его размер будет варьироваться, а для платного составит 200+К токенов (~500 страниц текста).
Ремикс артефакта почему-то схватил только app.py (без index.html) и благополучно понизил значимость моих реплик. Так что создаем новый чат и отправляем ей два файла с запросом на команды:
У меня не работает кнопка:
Здесь внезапно случился запуск рендеринга HTML, но Python-код все равно просто лежит, так что тыкать прототип в браузере бесполезно.
И вот настал шаг, когда объем кода достиг некоего порогового значения, и приложение перестало работать. По опыту программирования вместе с LLM скажу, что такое рано или поздно наступает, и дальнейшая работа с немалым мыслительным конструктом остается на живом человеке.
Попытка ремиксовать опубликованный артефакт Claude не сильно помогла: LLM в рамках новой сессии не придает происходящему в приложенных файлах такое значение, как репликам пользователя, и высока вероятность модификации кода, который не собирается.
Полет мысли с помощью GPT в 2024 году имеет ограничения по объему. Пытки нейронки на предмет отладки своих же багов затягивают в бесперспективную трясину: с таким объемом она теряет важные детали или плодит баги.
Потому компромисс заключается в сокращении хотелок. Я выкидываю фичи, чтобы сохранить работоспособность. Начав новую сессию, я прошу «Угадайку» с чистого листа, оставив добрую половину функционала в оффлайне:
ИИ-ассистент отдал мне рабочую минимальную версию игры. Артефакт можно посмотреть по ссылке (вам потребуется VPN). Теперь код выглядит так:
А веб-страница так:
Запрос на игру такой сложности лучше разбивать на последовательные небольшие просьбы. Каждую новую реплику-задачу можно снабжать 1-2 новыми некрупными фичами. Но в бесконечность сложность такого проекта не устремится: рано или поздно наступит момент, когда контекст будет исчерпан и на запрос дополнительных фичей модель отдаст нечто нерабочее.
Есть ли среди читателей обладатели платной подписки? Если да, поделитесь опытом: насколько сложные программы может создавать Claude Artifacts при контекстном окне в 200К+ токенов?
Заключение
Даже если Claude Artifacts и не будет содержать сложный код, его экстенсивно растущие способности очень удивляют. Выходит, что у любого среднестатистического разработчика сегодня есть в подчинении свой ИИ-джун, на которого можно «свесить» простые вещи вроде верстки веб-страницы в стиле Material Design, развертывания Flask-приложения или элементарной логики начисления очков в игре. А это уже огромная экономия времени.
Интересный факт напоследок: Anthropic назвали свою модель в честь творца теории информации Клода Шеннона (на обложке статьи). Аж в 1948 году он ввел понятие битов как единиц измерения информации и разработал формулы вычисления количества данных.
233 открытий2К показов