Ответ на пост «Хватит врать про "мощь" ИИ: Как я пытался сделать три простых проекта через ChatGPT и получил кусок нерабочего мусора»1
Задолбали «эксперты», которые рассказывают, что нейронки - просто позорище и ничего не умеют. Но в большинстве случаев проблема не в нейронке, а в промте, который пишет человек, абсолютно не понимающий того, как работает ИИ. В исходном посте я как раз столкнулся с подобным "экспертом" по нейронкам и хотел бы разобрать на примере типичные ошибки при составлении промтов и как их исправить. В качестве генератора я буду использовать gemini просто потому что он у меня в браузере есть. Но вы можете использовать любую другую LLM, и результаты будут схожими.
Промт #1. Игра
Исходный промт:
"Говорят, ты умеешь делать игры на HTML за 1 промпт, Ну-ка давайка мне сделай ты в 1 файле игру про бегущего шарика. Всё должно быть выполнено в SVG (не файле - а в HTML если что). Не используй эмодзи В КОДЕ только. Добавь препятствия красивые, счёт и задний фон и мидлграунд. Сделай под телефоны красиво."
Проблемы этого промта
- Слишком много эмоционального мусора (Говорят ты умеешь, давайка) - это просто нагружает LLM и почти не влияет на результат
- Отсутствие конкретики (игру про бегущего шарика) - и ни слова про то какая это должна быть игра
- Невыполнимые требования (Всё должно быть выполнено в SVG) - SVG это графический формат, выполнить в нем игру просто невозможно
- Субьективная постановка (Добавь препятствия красивые) - красивые для всех понятие слишком разное, а для LLM подобные требования - мусор.
- Использование сленга и так называемого рунглиша - когда английские слова пишут русскими буквами, например "мидлграунд"
То есть получается что большая часть этого промта - это мусор для LLM, и даже без генерации понятно что нейронка выдаст чушь, что в итоге и вышло
> Код уровня школьника, который прогулял все уроки информатики. Играть в это невозможно, смотреть на это больно.
Исправляем!
- Убираем весь словесный мусор и сразу начинаем формировать требования. "Сделай игру в одном файле."
- Конкретизируем механику игры. "Шарик бежит по земле и перепрыгивает с помощью игрока препятствия, механика очень похожа на flappybird. Препятствия надвигаются на шарик, и он должен их перепрыгивать."
- Добавим технические требования "Вся графика должна быть встроена в страницу. Сделай возможность запуска на телефоне."
- Конкретизируем какие именно препятствия сделать "Добавь различные препятствия, которые оформи в виде деревьев."
Итоговый промт:
Сделай игру в одном файле. Шарик бежит по земле и перепрыгивает с помощью игрока препятствия, механика очень похожа на flappybird. Препятствия надвигаются на шарик, и он должен их перепрыгивать. Сделай возможность запуска на телефоне. Вся графика должна быть встроена в страницу. Добавь различные препятствия, которые оформи в виде деревьев.
Результат: Рабочая игра, в которую можно поиграть, все сгенерировалось без проблем. Вы сами можете вставить этот промт в гемини и убедиться что результат рабочий.
Промт #2. Маркетплейс.
Исходный промт:
Говорят, что ты умеешь делать сайты в 1 промпт. Создай мне сайт маркетплейс с названием Losyon в одном HTML файле. Сделай на телефоны, и чтобы было удобно. Не используй заглушки и эмодзи в коде. Только не позорься, ты в Пикабу щас попадёшь
Проблемы промта почти такие же как и промта номер 1, не удивительно что результат опять не получился.
- Много мусора и эмоциональности (Говорят, что ты умеешь, Только не позорься)
- Отсутсвие конкретики (что это за маркетплейс, что в нем должно быть и чего нет)
- Субьективные требования (Сделай на телефоны, и чтобы было удобно)
Исправляем!
- Добавим конкретики и опишем в принципе что за сайт мы хотим получить
"Сделай сайт для маркетплейса под названием Losyon. "
- Опишем функциональность этого сайта
"На данном сайте будет представлена различная косметика для ухода за бородой и волосами. На сайте должен быть представлен каталог товаров с изображениями этих товаров. Изображения возьми из интернета. При нажатии на товар в каталоге пользователь переходит на страницу этого товара, где может ознакомится с дополнительными фотографиями и расширенным описанием товара. На странице тоовара и в каталоге сть кнопка заказать - при нажатии на нее показывается адрес сайта, где можно заказать данный товар."
- Добавим немного рыбы, для тестирования
"Для демонстрации добавь минимум сто различных товаров."
- Ну и конечно не забываем про технические требования
"Сайт делай в одном файле, только фронтенд. Сайт делай адаптивным так, чтобы им можно было пользоваться с телефона."
Итоговый промт:
"Сделай сайт для маркетплейса под названием Losyon.
На данном сайте будет представлена различная косметика для ухода за бородой и волосами. На сайте должен быть представлен каталог товаров с изображениями этих товаров. Изображения возьми из интернета. При нажатии на товар в каталоге пользователь переходит на страницу этого товара, где может ознакомится с дополнительными фотографиями и расширенным описанием товара. На странице тоовара и в каталоге сть кнопка заказать - при нажатии на нее показывается адрес сайта, где можно заказать данный товар.
Для демонстрации добавь минимум сто различных товаров.
Сайт делай в одном файле, только фронтенд. Сайт делай адаптивным так, чтобы им можно было пользоваться с телефона."
Генерим - и все работает! (ну кроме картинок, но это особенность генерации)
главная страница
поиск
Страница товара.
Промт #3 3D-сайт
Исходный промт:
"Создай 3D в HTML на мобильники сайт для детей на любую тему. Без заглушек и эмодзи в коде."
Опять те же проблемы, что и раньше, только тут в принципе ничего не написано про то какой должен быть результат. Типичное "иди туда не знаю куда и сделать то не знаю что". Тут спасует даже человек, так как в принципе не понятно что делать. Удивительно что чатгпт даже что-то сгенерил - только за это стоит ИИ похвалить :) Но я не ИИ, и поэтому буду выдумывать на ходу то, что хотело сказать автор.
Работаем по старой схеме
Описываем что мы хотим получить в финале
"Сделай сайт для детей в виде трехмерного приложения на webGL. "
Описываем конкретную функциональность приложения
"На сайте должен ездить синий трактор по полю, котрым пользователь может управлять. Трактор заезжает в различные здания, где живут животные. Каждый раз, когда трактор куда заезжает, на экране появляется краткий рассказ про то животное, к которому заехал трактор."
Докидываем технических требований
"Сайт делай в одном файле, только фронтенд. Сайт делай адаптивным так, чтобы им можно было пользоваться с телефона."
Финальный промт:
"Сделай сайт для детей в виде трехмерного приложения на webGL.
На сайте должен ездить синий трактор по полю, котрым пользователь может управлять. Трактор заезжает в различные здания, где живут животные. Каждый раз, когда трактор куда заезжает, на экране появляется краткий рассказ про то животное, к окторому заехал трактор.
Сайт делай в одном файле, только фронтенд. Сайт делай адаптивным так, чтобы им можно было пользоваться с телефона."
Результат - не получился. Как видно, проблема с библиотекой tree.js.
Но это не проблема, достаточно добавить к промту дополнительное техническое требование "Не используй сторонние библиотеки, только чистый webGL!" Ну и результат:
Синий трактор приехал к овечке
Выводы
Как видно, LLM- это мощный инструмент для генерирования и создания кода и проектов, даже в один промт. К сожалению, универсальные LLM, не заточенные под работу с кодом, иногда могут ошибаться и генерировать не совсем корректный код, особенно если он завязан на какие то сторонние библиотеки, но это легко исправляется правильной модификацией промта. Если нейронка постоянно выдает вам что-то нерабочее и не то что вы хотели, то проблема в 99% случаев - в самом промте. Используйте следующую структуру промта: общее описание - описание функциональности - описание доп требований - и вы без проблем сможете сделать приложение, которое хотите.
