Мы продолжаем решать задачи по веб-разработке от искусственного интеллекта. Мне очень понравился этот тип задачек, интересно решать, можно придумать много чего интересного, а также интересно обо всём этом писать в свой блог.
Сегодня мы снова будем решать задачки от Гигачата на исправление багов в JS и вебе. Я тестировал три нейронных сети, одной из них был продвинутый DeepSeek. Я понял, что задачи на исправление багов в JS Гигачат и DeepSeek генерируют одинаково, с теми же ошибками. Но для объективности скажу, DeepSeek лучше генерирует обычный код.
В плане генерации задачек по веб разработке, особенно по исправлению ошибок, Гигачат и DeepSeek справляются примерно одинаково, и ошибки у них похожи. Но в одной ситуации Гигачат обгоняет DeepSeek, а в другой наоборот, DeepSeek обгоняет Гигачат. Уточню, конкретно в генерации задач на исправление багов, насколько я понял, для ИИ это тяжело. Я бы хотел более глубоко изучить этот вопрос и побольше поизучать их.
Очень хочется посмотреть, чем отличается российский Гигачат от китайского DeepSeek.
Начнём!!
Генерируем задачу
Я надеюсь, что Гигачат продвинулся, и сегодняшние задачи будут качественными.
Интерактивная карта сокровищ, помню, была у Яндекс Алисы, я решал эту задачу. Были же времена, это был мой первый пост про задачи от ИИ 😀.
Конструктор пиццы, суши-ролла?? 😃. Ого, что??
Вот это действительно интересно. Давайте ка попробуем.
Очень важно написать хороший промпт. Как правило, ИИ очень умён, но дурак в самостоятельной работе без инструкций, каждому ИИ нужно всё подробно объяснять.
Так, в этих задачках код маленький, и я могу вам его показывать целиком, что довольно хорошо.
В этом коде скрыто шесть ошибок? Хмм... Код достаточно маленький, это странно. Как они могли здесь поместиться...
Что меня удивляет, Гигачат всё равно написал комментарий "Ошибка здесь". 😃. Забавно.
Это, конечно, не прям подсказка, но некоторый указатель на ошибку.
И проект выглядит так
Даже картинки на кнопках сбились. Хотя это вроде бы HTML, а задачи по JS. Ну ладно, так даже интереснее будет.
Я так понял, вот это и есть список багов, потому что ничего другого он не прислал.
Поломок 3, а багов 6. Возможно, эти 6 багов влияют на 3 поломки.
Сайт я проверил, он действительно не работает.
Давайте ка начнём решать
Приступаем к решению
Мне кажется, ошибок будет не 6. Алиса AI, Гигачат и DeepSeek, когда генерируют задачу подобного типа, никогда не вставляют нужное количество ошибок, их всегда меньше. Мы должны это проверить.
Перед нами неработающий сайт, ну или веб-приложение, как вам угодно.
Основа пиццы в виде непрогрузившейся картинки. Так, это странно.
Понял. Должна быть картинка с пиццей, а также слой с ингредиентами, где они будут генерироваться.
Для ИИ это похоже нормально, вставлять ссылки на картинки, которых нет.
Похоже, придётся добывать картинку самостоятельно. Гигачат мне сказал, что можно использовать любую картинку круглой пиццы.
Я в интернете нашёл такую картинку. Интересно, это был предусмотренный баг, или такое получилось случайно?
Теперь разбираемся с кнопками. Вот так они выглядят и такие классы имеют. Кнопки имеют одинаковые классы, но разные дата атрибуты. В выборе ингредиента используется дата атрибут.
Смотрим. Мы даём каждой кнопке обработчик кликов, и при клике мы записываем в переменную наш дата атрибут, после чего создаём элемент "i".
Для элемента "i" добавляются классы, которые, вероятно, задают ему какие-то картинки, после чего этот элемент вставляется в слой с элементами.
Но что за класс "ingredient-icon"?
Это класс с шириной "32px" и "position: absolute", что позволяет ему летать. А разве здесь не нужна высота?
Вот.
Баги по-прежнему не исправились и кнопки не работают.
В консоли никаких сообщений об ошибках нет.
Но если багов нет, а мы нажимаем на кнопки, элементы "i" должны добавляться.
После того, как мы добавили этим элементам высоту, они могут быть нормально расположены на пицце и что-либо показывать. Но теперь выяснилось, что у них нет никакой картинки.
Если посмотреть на стили, у класса "cheese" нет никакой картинки. У него есть расположение, относительно пиццы, но картинки то нет.
Интересно. Сегодня мы будем исправлять баги не только в JS, но и в CSS. Считайте, первый баг исправили.
Я думаю, в эти элементы можно добавить эмодзи из кнопок
Например, так
Забавно, что в код можно вставлять эмодзи 😀.
И получается нечто такое
Картинка не растянулась до 32 пикселей, так как это текст
Нам поможет "font-size".
Очень странно, что этот сырок вылез за пределы пиццы. Я думаю, здесь нам понадобится JavaScript.
Давайте для начала разберёмся с остальными ингредиентами.
У наших кнопок нет двух эмодзи для оливок и перца.
Их можно найти в интернете
Вот, славненько...
Меня до сих пор удивляет, что в код можно вставлять вот такие штуки. Да, я понимаю, кодировка позволяет, но это всё равно очень необычно.
Великолепно!!!
Я только что заметил ещё одну удивительную вещь. Что это за пепероня такая???
Почему мы пиццу кладём в пиццу??? 😨😨😨
Я не нашёл эмодзи с пепперони, но, думаю, пятачок свиньи очень хорошо справится с этой задачей 🤣.
Очень похож!
Дааа!! Мы собрали свою пиццу!!! 😃
Только вот это не совсем то, что нужно. Продукты не должны выстраиваться в ряд, а должны быть разбросаны по пицце. Это во-первых. А во-вторых, их должно быть много, наверное, а не по одной штучке. Возможно, в этом и кроется баг.
Пока что мы исправили только баги со стилями, и то не все. А нам нужно исправить баги, связанные с JavaScript.
Если опираться на этот список, мы всё исправили. Но увиденное не соответствует здравому смыслу. Нужно спросить по подробнее у Гигачата, а как должна выглядеть нормальная пицца. У неё должно быть по одному ингредиенту каждого вида, или несколько?
Сейчас я у него спрошу, а какие баги придумал конкретно он
1. Я заметил, что они через "left" и "top" заданы все, но по здравому смыслу их должно быть несколько, и они должны иметь разные координаты. Здесь я угадал верно.
2. Баг исправлен
3. Баг исправлен
4. Баг исправлен
5. Баг исправлен
6. Исправлю.
Да ты чтоо??? Баги 2-5 это отсутствие четырёх картинок. C тобой всё хорошо?
Нет, а мне кажется, это какой-то баг. Возможно, там были нормальные баги, но именно такие ответы он вставил в этот список. Иначе, было бы нелогичным, что написано только про 4 картинки, когда их всего 6.
Он пытался подставлять баги так, чтобы растянуть список до 6, но и чтобы вместилось в 6. Баги 2-5 фейк, на самом деле список багов другой. Всё указывает именно на это.
Но теперь мы точно знаем, что этих картинок должно быть много
Убираем эти стили
Они выстроились по 0%, теперь можно их двигать
Добавляем к нашим icon свойства "left" и "top", которым задаём случайные значения от 0 до 100 в процентах.
Уже лучше, но не работает изменение высоты.
Вероятно, какие-то ошибки с высотой, из за чего 100% top слишком мал.
Элемент "#ingredients-layer" имеет высоту 0.
Если задать ему высоту 100%, сырочки выравниваются по всей высоте.
Сырки вышли за пределы пиццы
Не удивительно, ведь "top: 100%" это самый низ, но при этом координаты считаются от верхушки картинки.
Нужно из нашего "100%" вычитать "32px". Нет, тогда при "top: 0%" сыр будет вылезать сверху.
У меня есть идея. А если саму область с ингредиентами уменьшить, чтобы они не только не вылезали за край картинки, но и не вылезали на край пиццы?
Вот так, делаем отступы 40px от краёв пиццы. Только надо эту область немного поднять, чтобы сырки не падали.
Вот
Воот, собрали пиццу. Только у меня есть два замечания: ингредиенты слишком маленькие, и они вылезают за край пиццы.
Они вылезают за край, потому что область квадратная, а пицца круглая.
Чтобы это исправить, нам поможет вот такое уравнение
Оно делает линию для круга. Мы можем использовать его, как проверку, если наше число не будет совпадать с границами круга, оно будет перегенерировано.
Допустим, используем его для 100%
Наши координаты меняются от 0 до 100. Если их добавить к такому уравнению, у нас получится маленькая область от 0 до 50, четверть круга. Поэтому нам нужно сместить эти координаты на 50.
((x - 50) + (y - 50))^2 = 2500
Чтобы посчитать, попадают ли координаты туда, надо поставить знак неравенства
((x - 50) + (y - 50))^2 < 2500
Но только вот если отзеркалить вот такой график, может получиться ошибка, если взять координаты с разными знаками.
Например x = 0 и y = 100. (0 - 50 = -50) для x, (100 - 50 = 50) для y.
50 - 50 = 0, по условиям будет подходить, а по факту он выйдет за пределы круга и будет в нихнем углу. Поэтому (x - 50) нужно взять в модуль, то есть убрать знак.
(|x - 50| + |y - 50|) < 2500
Делаем условия. Генерируем x и y, если |x - 50| + |y - 50| будет больше 2500, то перегенерируем их.
Да, у нас получился симпатичный кружок, почти. Только он съехал. А ещё сырки маленькие.
Сдвинем слой с ингредиентами и изменим его размеры
Изменим размер самих ингредиентов
Вот, теперь это выглядит симпатично
Теперь, благодаря нашим формулам, сырочки легли по кругу 😀. Ребят, учите математику.
"Здравствуйте, мне пиццу с сыром и пепперони"
Только вот эти элементы ещё должны быть кликабельны, похоже.
Единственное, зачем нужны кликабельные элементы, это, чтобы их удалять. По сути задача хорошая, но баги описаны не полностью.
Сделаем курсор при наведении на ингредиенты.
При каждом создании ингредиента, добавляем сразу ему обработчик событий клика и удаляем этот элемент при нажатии.
Теперь можно создавать хорошие пиццы, удаляя лишние случайные элементы
Странная пицца из лука и оливок
Вот, замечательно!! 😀.
Подведём итоги
Сегодня мы решили потрясающую задачу на исправление багов в проекте для генерации пиццы от Гигачата. Стоит признать, темы для задачек он придумывает довольно интересные.
Но вот с картинками он налажал. А также налажал с списком багов.
Но в целом мне очень понравилась сегодняшняя задача.
Давайте попробуем посчитать, какие баги мы исправили:
1. Неработающие картинки ингредиентов
2. Сломанный слой с ингредиентами (сплющенный по высоте)
3. Сломанные картинки кнопок
4. Неправильное позиционирование ингредиентов (не строгая позиция, а случайная)
5. Ингредиенты не удаляются, а курсор при наведении не меняется
Я нашёл всего 5 багов, 2 из них связаны с JavaScript, 3 из них связаны с HTML и CSS.
Но даже так, задача всё равно была прикольной и классной. Она была лёгкой, это позволило мне немного расслабиться 😀. Но хотелось бы по сложнее.
На самом деле, как я уже узнал, другие ИИ тоже допускают такие ошибки. Тот же DeepSeek, который более продвинутый и популярный, также допускает много ошибок при составлении задач по исправлении багов в вебе. В некоторых случаях, при генерации подобных задач, он справлялся хуже, чем Гигачат.
Я пока их тестирую и сравниваю. Но чтобы в комментариях мне не писали, что я неправильно оцениваю, скажу, что DeepSeek лучше справляется с остальными задачами, особенно с написанием обычного кода. Он вёрстку хорошо делает и дизайн придумывает.
Ну а на этом всё, подписывайтесь на канал и ставьте лайки 👍