Что такое ChatGPT, чем он может помочь фронтенд-разработчику и стоит ли бояться, что нейросеть отнимет у вас работу?

Короткий ответ: искусственный интеллект пока что не может заменить программистов — зато может здорово облегчить им жизнь.

Развёрнутый ответ — в этой статье. Мы последовательно объясним, почему нейросетей не стоит бояться, и на конкретных примерах покажем, как именно вы можете внедрить ChatGPT в свою работу уже сегодня.

Что такое ChatGPT

Упрощая, можно сказать, что ChatGPT — это ИИ, который генерирует человекоподобные ответы на запросы и может поддерживать естественный разговор.

Говоря чуть более техническим языком, это языковая модель, основанная на архитектуре GPT (Generative Pre-trained Transformer), разработанной компанией OpenAI.

Бешеный успех настиг ChatGPT, потому что он совместил в себе сразу несколько крутых способностей:

1. Понимание контекста. В отличие от поисковых систем, чат способен отслеживать контекст запроса, а значит — быть последовательным в ответах.

2. Естественность речи. ChatGPT генерирует осмысленный и грамматически правильный текст — сложно отличить ответ ИИ от ответа человека.

3. Широкий кругозор. Нейросеть способна отвечать на разные (в т.ч. объективно сложные) вопросы практически на любую тему.

4. Резюмирование текста. ChatGPT может быстро обработать большой объём информации: выжать из длинного текста основную мысль или составить план.

5. Генерация текста. Чат без проблем пишет собственные уникальные тексты по заданным критериям: будь то описание продукта, новостная статья или детская сказка.

Для запуска ChatGPT из России нужен VPN и нероссийский номер телефона!

Номер можно получить через специальные онлайн-сервисы (он нужен один раз при регистрации — больше код не проверяют). Мы не приводим ссылок на конкретные инструкции, потому что алгоритм может меняться, и рекомендуем гуглить актуальную информацию. 

Как это работает

Сразу оговоримся, что в этой статье мы не будем обсуждать, как нейросети работают «под капотом». Доступным языком про это написано, например, здесь. А для тех, кто не хочет погружаться в тонкости от слова «совсем», ниже краткий экскурс в машинное обучение на пальцах.

Как научить машину отличать картинки с котиками от картинок без котиков?

Нужно загрузить миллион картинок с котиком и написать, что тут он есть. Потом загрузить миллион картинок без котиков и написать, что их тут нет. Машина начнёт выводить математически закономерности. Когда потом мы загрузим незнакомую ей картинку и спросим, есть ли котик, по закономерностям машина сможет оценить вероятность.

В языковых моделях вроде ChatGPT идея та же (только нет необходимости размечать, где что). Машина получает огромные объёмы текстовых данных, изучает закономерности и связи между словами и фразами. Позже это позволяет понимать контекст заданного вопроса и генерировать релевантные и последовательные ответы.

Конкретно ChatGPT обучен на настолько больших данных, что способен генерировать тексты практически на любую тему. Это и делает его мощным инструментом в том числе для помощи разработчикам.

Обучение с помощью ChatGPT

Первая задачка, с решением которой ChatGPT на сегодняшний день справляется лучше всего (по крайней мере, во фронтенде), — помощь в обучении.

Можно сказать, что ChatGPT — это очень прокаченный гугл. Но, в отличие от поисковиков, он не отправляет вас бродить по ссылкам, а собирает всю информацию на одной странице и подгоняет её ровно под ваш запрос.

По сути, ответы нейросети построены на той же информации, что выдача в поисковиках, но в среднем вы получите ответ быстрее, плюс он всегда будет оригинальным и релевантным именно вашей проблеме.

Как конкретно использовать ChatGPT для обучения?

Для начала можно попросить его составить «список для чтения» (подборку ресурсов по заданной теме) или, например, объяснить вам синтаксис языка. Правда, если мы говорим про JavaScript, кажется, что чат проигрывает порталам вроде learn.javascript.ru или MDN, где уже лежит куча специализированных статей с живыми интерактивными примерами. 

А вот если речь идёт про тему, по которой таких ресурсов нет, и вас тянет в поисковик — возможно, лучше остановиться на ChatGPT. Да, иногда гугл объективно быстрее (особенно когда ответ лежит на StackOverflow по первой ссылке), зато чат может стать для начинающего разработчика полноценным ментором.

У любого джуна постоянно возникает миллион вопросов, которые нужно кому-то задавать. ChatGPT, в отличие от живого наставника, никогда не устаёт, всегда отвечает и точно не посчитает вас глупым. При этом общение с нейросетью похоже на переписку с подкованным во всех областях человеком.

Например, вы пришли в новый проект и не знаете, как работает какая-то технология, конфиг и т.д. Можно приставать к старшим коллегам или гуглить каждое свойство, а можно попросить чат объяснить, что происходит.

Самое крутое здесь — то, что чат готов углубляться в тему настолько, насколько вам необходимо, вплоть до разжёвывания каждого плагина. Причём вся информация, в отличие от ответов из гугла, будет априори релевантна вашей проблеме. 

Какой вывод мы можем сделать?

ChatGPT — однозначно ценнейший ментор (которому, очевидно, нужно уметь задавать правильные вопросы) и крутой ассистент. Чего он пока НЕ может сделать, так это заменить полноценное обучение: курсы, университет и даже книгу.

То есть, если у вас есть список конкретных вопросов, чат без проблем на них ответит. Но если вам нужна структура, пошаговое изучение темы «от и до», чтобы вас вели за руку по некоторому плану — пока что за этим лучше идти в традиционное обучение. 

Разработка с помощью ChatGPT

Окей, чат помогает в обучении: неплохо справляется с ролью ментора и уже частично заменяет поисковики. Но что насчёт всех остальных задач, в первую очередь — связанных с реальной разработкой?

На самом деле, здесь ChatGPT не менее полезный помощник. Мы придумали и успешно протестировали восемь способов его применения в работе фронтендера.

1. Работа над ошибками

Нейросеть может здорово сэкономить ваше время, если вы обратитесь к ней за разъяснением незнакомой ошибки.

Например, мы скопировали из консоли текст типичной ошибки CORS — ChatGPT не просто объяснил, что это такое, что произошло в нашем случае, но и тут же предложил воспользоваться конкретным бесплатным прокси-сервером, чтобы решить проблему. 

Конечно, бывают ситуации, когда ИИ оказывается бессилен или ошибается. Но сам факт, что вам всегда есть кому задать вопрос «Что делать?», серьёзно упрощает жизнь.

2. Написание тестов

ChatGPT в прицепе умеет разбираться в коде, редактировать, дополнять его или решать связанные с ним несложные задачки. Например, он прекрасно генерирует тесты, которые потом можно просто копипастнуть в проект.

Обратите внимание, что мы не объясняли чату, ни что это за функция, ни какие тесты нам нужны. Он сам во всём разобрался и дал абсолютно релевантный ответ. То есть на простых задачках вам даже не нужно тратить время, чтобы ввести нейросеть в контекст.

3. Рерайт с одного языка на другой

Бывает, что для решения той или иной задачи нужен математический алгоритм, но вы не можете найти его реализацию на нужном языке. Так вот, ChatGPT легко может рерайтнуть код, например, с Python на JavaScript.

Мы протестировали рерайт Python -> JavaScript на алгоритме обходе графа в глубину. Он довольно популярный и поэтому простой для нейросети, но всё равно круто, что код выполнился правильно сразу «из коробки».

4. «Рисование» на Canvas

Вдохновившись предыдущей задачкой, мы попросили чат рерайтнуть на JS чуть более сложный код, высчитывающий точки пересечения двух окружностей. А заодно — написать для него тест с выводом изображения.

То есть, хотя сам по себе ChatGPT не умеет рисовать картинки, он выдал готовый HTML, где разместил на Canvas две окружности и подсветил точки пересечения разными цветами.

5. WebAssembly

На переводах Python -> JavaScript мы не остановились и решили поэкспериментировать с JavaScript -> WASM. Конечно, этот код так просто уже не проверишь — но визуально всё очень похоже на правду.

Дописать программу до конца ChatGPT не смог, даже со второй попытки. Но нашёл элегантный выход из ситуации: сгенерировал код на языке C и выдал пошаговую инструкцию, как скомпилировать его в WASM.

6. Чтение нечитаемого

Ещё один чрезвычайно полезный скилл чата: умение разбираться в нечитаемых исходниках. Нейросеть может объяснить вам, что происходит в коде, и даже сама переписать так, чтобы вы могли прочесть и использовать его.

В качестве эксперимента мы специально обфусцировали функцию и попросили ChatGPT разобраться, что она делает. И он нам всё объяснил! Причём не тупо описал код построчно, а сразу дал выжимку по функциональному назначению.

Естественно, заодно мы попросили чат переписать код в более читабельный вид. На этом этапе ИИ уже объективно может допускать ошибки — но мы же с вами помним, что он умеет писать сам для себя тесты.

Мы даже скормили ChatGPT кусок его собственного исходного кода — его он тоже без проблем объяснил и постарался привести к читаемому виду.

7. Улучшение кода

Ещё на ChatGPT частично можно переложить ревью кода. Он не просто ищет ошибки, но и даёт дельные советы, например, по неймингу и типизации — а потом сам переписывает код с учётом рекомендаций.

Опять же, ИИ пока не в состоянии отлавливать 100% багов в сложном коде. Но на своём уровне он делает очень грамотные и релевантные замечания — это удобная штука, чтобы проверять в том числе самого себя.

8. Кодогенерация

Есть такой неприятный тип задач: они вроде бы рутинные — но ты занимаешься ими редко, поэтому каждый раз приходится заново гуглить и освежать в памяти решение. Например, настройка CI/CD или создание API CRUD пользователей GitHub.

Как оптимизировать решение таких проблем? Идти в ChatCPT и давать ему простенькое ТЗ. На выходе вы получите валидный код с комментариями и сопутствующими инструкциями.

Дальше можно задавать дополнительные вопросы по коду, уточнять контекст, просить внести коррективы — и вы получите решение, подогнанное именно под вас (которое гугл вряд ли найдёт в собранном виде).

Что пока получается плохо

Выше мы уже не раз подчеркнули: несмотря на все свои удивительные способности, пока ИИ осиливает далеко не все комплексные задачи. Ниже пример одного из фейлов чата.

Мы попросили ChatGPT сделать ревью кода компонента изображения на React. (Забегая вперёд: в программе была ошибка).

ИИ описал, что видит, объяснил логику компонента и похвалил нас за хорошую структуру кода и оправданное использование хуков. Проблему он увидел только в том, что мы не обрабатываем ошибки при загрузке изображения, и даже дал несколько советов по UX.

Тогда мы попросили написать для нашего компонента интеграционные тесты. Чат покрыл и подробно описал три кейса. Естественно, на одном из тестов код зафейлился. Когда мы показали код ошибки ChatGPT, он не смог исправить её с ходу — без чёткого ТЗ.

Вывод: если ты не даёшь суперчётких инструкций и сам плохо понимаешь, что происходит в программе, то с чатом можно общаться очень долго и муторно (и не факт, что код на выходе будет рабочим).

Весёлые бонусы

Под конец мы решили попросить ChatGPT написать несколько неожиданных, но интересных с точки зрения реализации вещей. Вряд ли вы будете использовать эти запросы в работе, но, возможно, тоже удовлетворите своё любопытство.

1. Музыкальная задачка

Мы долго и упорно просили чат сгенерировать для нас песню «Happy New Year», «В траве сидел кузнечик» или хотя бы рингтон для телефона. В принципе он не отказывался!

Правда, правдоподобно воспроизвести хотя бы одну из песен без использования MP3 файла не получилось. А вот рингтон на Web Audio API вышел вполне реалистичный.

2. Художественная задачка

Зная, что ChatGPT умеет рисовать по крайней мере окружности, мы решили попросить его нарисовать котика на Canvas или в SVG. Спустя несколько итераций у кота даже появились лапки и усики.

Мы пошли дальше и запросили целую сценку: дерево, солнышко и рыбку, плавающую в пруду. Дизайнерские решения спорные, зато есть даже анимация рыбки и лучиков.

Совместными усилиями с чатом мы даже попробовали осилить 3D-анимацию и смоделировать петлю Мёбиуса с помощью Three.js. (Получилась, конечно, не она — но что-то!)

Как использовать ChatGPT эффективно

Подводя итоги, хочется дать несколько советов, которые помогут вам добиться от ChatGPT наилучшего результата:

1. Заходите издалека, чтобы погрузить нейросеть в контекст. Например: «Какие ограничения есть у мобильных устройств?» → «Напиши код слайдера с учётом этих ограничений».

2. Говорите ИИ, из какой позиции он должен отвечать. Например, что он выступает в роли эксперта. «Представь, что ты тимлид команды фронтенда. Какое решение ты примешь в такой-то ситуации?»

3. Помните, что у ChatGPT есть ограничение по времени ответа. Если он оборвал текст на середине и прекратил генерировать, попробуйте использовать команду «continue generating» или «продолжай».

Отнимет ли ChatGPT у вас работу

Сможет ли ChatGPT заменить фронтенд-разработчиков? Кажется очевидным, что пока нет. Нейросеть допускает критичные ошибки, не способна по-настоящему погрузиться в проект, может работать только по суперчёткому ТЗ и не умеет общаться с заказчиками. 

Но так же понятно, что в обозримом будущем все эти проблемы решатся. Мы думаем, что профессия программиста сильно изменится — и это хорошо. Отпадёт необходимость заниматься рутинными задачами, и мы сможем уделять 100% времени по-настоящему интересным вещам.

Что точно имеет смысл делегировать ChatGPT уже сейчас, так это офисную рутину типа «вежливо ответить на письмо», «сделать таблицу компетенций», «составить документацию», «объяснить код текстом».

Заключение

Сегодня ChatGPT в программировании — крутейший ассистент, но пока не самодостаточный разработчик. Его «руками» сложно построить что-то комплексное и кастомное, даже если оно состоит из понятных блоков.

Если вы любите работать в режиме диалога, часто ищете взгляда со стороны, хотите делегировать рутинные задачи, вы точно подружитесь с ChatGPT. ИИ готов отвечать на вопросы любой степени глупости, читать ваши бесконечные логи и брать на себя все скучные таски.

Уже понятно, что с развитием ИИ работы у разработчиков станет только больше (потому что мы будем успевать делать больше). Даже сейчас можно кратно ускорить, например, процесс написания документации или отладки.

Вывод мы делаем один: чем быстрее вы адаптируйтесь и начнёте использовать новые технологии, тем шире будут ваши возможности в будущем.