26.01.2023 11:01
aio350 13 2600 Источник


Привет, друзья!


Представляю вашему вниманию перевод этой замечательной статьи, в которой автор просит ChatGPT разработать компонент модального окна на React.


ChatGPT — это чат-бот с искусственным интеллектом, разработанный компанией OpenAI и способный работать в диалоговом режиме, поддерживающий запросы на естественных языках. ChatGPT — большая языковая модель, для тренировки которой использовались методы обучения с учителем и обучения с подкреплением. Чат-бот основывается на другой языковой модели от OpenAI GPT-3.5 — улучшенной версии модели GPT-3.


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


Интересно? Тогда прошу под кат.


Следует отметить, что для работы с кодом OpenAI предоставляет специализированный инструмент — code-davinci-002 (см., например, эту статью).


Разработка модального окна


Начнем с того, что попросим ChatGPT создать 2 компонента — модельное окно и кнопку для переключения его видимости:





Запрос: создай функциональный компонент React с кнопкой и назови его ModalOpen. Затем добавь еще один компонент под названием Modal с элементом div внутри.


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


Состояние и обработчики событий


Попросим бота добавить функционал, необходимый для открытия модалки при нажатии кнопки:





Запрос: модифицируй эти компоненты таким образом, чтобы нажатие кнопки открывало модалку.


С этой задачей бот также справился великолепно! Он добавил все необходимые состояния и обработчики событий. Теперь нажатие кнопки приводит к рендерингу модалки.


Посмотрим, как бот объясняет свои действия:





Бот: в компоненте ModalOpen мы добавили состояние под названием isOpen с помощью хука useState. Это состояние используется для отслеживания того, открыта модалка или закрыта. При нажатии кнопки вызывается функция setIsOpen, которая устанавливает isOpen в значение true, что приводит к отображению модалки. В компоненте Modal мы добавили проп под названием isOpen, который передается родительским компонентом. Если isOpen имеет значение false, компонент возвращает null, т.е. не рендерится. Если isOpen имеет значение true, компонент рендерит содержимое модалки...


Это может быть отличным средством обучения React для начинающих. Таким образом, бот не только делает то, что мы попросили, но также подробно объясняет, что и зачем он сделал. Следует отметить, что мы в любой момент можем задавать ему уточняющие вопросы.


Добавление локального хранилища


Попросим бота модифицировать код для сохранения состояния модалки в локальном хранилище (Local Storage):





Запрос: модифицируй ParentComponent таким образом, чтобы состояние isOpen хранилось в localStorage.


Бот правильно преобразует логические значения в строки и объясняет, почему он использует хук useEffect:





Бот: мы добавили 2 хука useEffect в ParentComponent:


  1. Первый useEffect используется для извлечения значения isOpen из локального хранилища при монтировании компонента (его первоначальном рендеринге). Если значение имеется, оно разбирается (парсится) и передается в функцию setIsOpen для обновления состояния компонента.
  2. Второй useEffect используется для записи текущего значения isOpen в локальное хранилище при любом изменении этого значения. Таким образом, значение isOpen сохраняется даже при перезагрузке страницы или закрытии браузера пользователем...

Это не просто "копипастинг" документации — в объяснении фигурируют названия переменных из кода, что существенно облегчает понимание происходящего.


Стилизация и анимация


Посмотрим, как ИИ справится со стилизацией и анимацией:





Запрос: добавь некоторые переходы CSS в компонент Modal, чтобы он появлялся и исчезал при нажатии кнопки.


На удивление бот превосходно справился и с этой задачей. Его объяснение выглядит так:





Бот: в компоненте Modal мы добавили класс modal к элементу div. В CSS мы определили 2 блока со стилями для класса modal: один для закрытой модалки, другой для открытой. В закрытом состоянии модалка имеет стили visibility: hidden и opacity: 0. Это означает, что модалка будет невидимой и полностью прозрачной. У нас также имеется переход, который определяет анимирование элемента при изменении его состояния. В открытом состоянии модалка имеет стили visibility: visible и opacity: 1...


Объяснение очень длинное и подробное...





Первая ошибка


Вы заметили ошибку в предыдущем примере?


Дадим боту еще один шанс:





Запрос: для начала неплохо, но кое-чего не хватает. Сделай так, чтобы класс open в Modal добавлялся и удалялся на основе значения isOpen.


Прим. пер.: справедливости ради следует отметить, что бот сообщает о необходимости обновления ParentComponent для добавления и удаления класса open на основе значения isOpen в объяснении добавления класса modal.


TypeScript


Посмотрим, умеет ли бот работать с TypeScript и пропами. Дадим ему список пропов и попросим их типизировать:





Запрос: сделай так, чтобы компонент Modal принимал следующие пропы:


  • firstName
  • lastName
  • profession
  • profilePhoto

Добавь определения типов TypeScript для пропов компонента. Значениями всех пропов должны быть строки. Не забудь про проп isOpen с логическим значением.


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


Задача на проверку понимания ботом значений переменных:





Запрос: модифицируй код компонента Modal таким образом, что он принимал массив объектов под названием hobbies:


{
  nameOfHobby: string;
  experienceInYears: number;
  activelyDoing: boolean;
}

Не забудь обновить определения типов с учетом этого нового объекта.
Затем перебери массив в JSX и выведи значения объектов в виде таблицы.
Добавь в таблицу заголовки для колонок со значениями.


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


Похоже, с типами у бота не возникло проблем. Но что насчет таблицы?





Видите, бот добавил заголовки Hobby, Experience (years) и Currently Doing (Хобби, Опыт (лет) и Занимается в настоящее время)? Он также понял, что мы не можем просто вывести логическое значение activelyDoing и его необходимо преобразовать в Yes или No (Да или Нет).


Впечатляет, не правда ли?


Импорт и использование сторонних библиотек


Посмотрим, сумеет ли бот отсортировать массив hobbies в алфавитном порядке. При этом, мы разрешим ему использовать сторонние библиотеки:





Запрос: отсортируй массив hobbies по полю nameOfHobby. Можешь использовать библиотеку.


Бот решил использовать библиотеку lodash, импортировал ее и успешно реализовал логику, о которой мы просили.


Последняя проверка


Посмотрим, сумеет ли бот преобразовать инструкции для визуализации UI в CSS. Также попросим его предоставить объект с фиктивными данными в формате JSON, которые мы могли бы использовать для тестирования компонентов:





Запрос: создай файлы CSS для этих компонентов, чтобы они имели приличный, современный вид с приглушенными голубоватыми цветами и тонами. Оживи элементы с помощью теней и т.п. Сформируй фиктивные данные в формате JSON, которые можно использовать для тестирования компонентов. JSON должен содержать минимум 5 человек, у каждого из которых должно быть минимум 2 хобби.


По-моему, с этой задачей бот справился очень хорошо. Он знает, что свойство position модалки должно иметь значение fixed. Он также не забыл про черный фон под модалкой (оверлей).


Посмотрим, что еще он добавил в CSS:





Он расположил содержимое модалки в середине окна с тенями, как я просил.


Единственной ошибкой является отсутствие синего цвета. Прим. пер.: вероятно, это связано с тем, что автор написал blueish вместо bluish.


Посмотрим на сгенерированные ботом фиктивные данные:





У меня нет слов. Создается впечатление полного понимания ботом того, что и для чего используется в наших компонентах.


Заключение


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


Он с легкостью реализовал компоненты React, обработчики событий, локальное хранилище, стилизацию, анимацию, сортировку данных с помощью внешней библиотеки и типизацию с помощью TS.


Лично я не волнуюсь за свое будущее веб-разработчика (пока), поскольку задачи, выполненные ботом, являются простыми и тривиальными. Для принятия сложных креативных решений относительно архитектуры и реализации по-прежнему необходимо быть опытным разработчиком и человеком. Без этого невозможно разработать даже простое приложение от начала до конца.


Однако за принятием сложных креативных решений, как правило, следует скучная рутина: написание элементарного кода, функций JS, стилей CSS и т.д.


На текущей стадии развития ChatGPT я вижу его в качестве плагина для VSCode: вместо печатания, я даю ИИ инструкции, а он их выполняет, что позволяет мне тратить на разработку несколько секунд вместо 5-10 минут.


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


Что вы об этом думаете? Как это повлияет на нашу профессию? Стали бы вы использовать нечто подобное в своей работе? Как это повлияет на индустрию в целом?


Надеюсь, что вы, как и я, узнали что-то новое и не зря потратили время.


Благодарю за внимание и happy coding!



Комментарии (13)


  1. altrue
    26.01.2023 11:36
    #25156320
    +3

    ИИ вызывает мне кажется у многих двоякие чувства.) Вроде круто, но и фобии порождает.

    Спасибо за статью!


  1. BlackSCORPION
    26.01.2023 12:46
    #25156722
    -1

    Человек давно визуализирует ИИ в фильмах, например Джарвис в железном человеке, тарс в интерстеллар.

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

    Что примечательно, те профессии которые казалось ИИ заменит первыми, на самом деле ИИ не делает успехов, например сантехников, уборщиков, строителей, автомехаников, плотников итд.


    1. ScorpAL
      26.01.2023 14:56
      #25157252
      +2

      А на чем обучается AI?

      А на чем будет обучаться AI если программисты перестанут писать код, выкладывать его в паблик, задавать вопросы и отвечать на stack overflow, а вместо этого пойдут крутить гайки и паять полипропилен?


      1. BlackSCORPION
        27.01.2023 21:24
        #25163004

        А на чем обучаются люди? ИИ создан обучаться так же как и мы, наш интелект и то как он работает вдохновлял разработчиков ИИ.

        Само понятие ИИ появилось из необходимости делать то что делают люди но намного быстрее.

        Работа программиста лишь в малой части состоит из многочисленных попыток объяснить машине что она должна делать на языке программирования. Основная работа это понять что делать и придумать как делать. Люди не создают ИИ чтобы заменить людей, люди создают ИИ чтобы ускорить прогресс, заменить языки программирования на что то более эффективное, некоего Джарвиса который будет исполнять рутину освобождая все время человека для того что он умеет лучше всего - творить.

        Соответственно тех кто умеет только исполнять, ИИ заменит, потому что будет быстрее и эффективнее.


    1. Pavel1114
      27.01.2023 04:49
      #25159592

      Лишь бы он не оказался умным настолько, чтобы и принятие решений взять на себя.


      1. BlackSCORPION
        27.01.2023 23:08
        #25163346

        Одного ума не достаточно, если брать чистую логику, вся наша реальность не имеет смысла. Мы появились из ничего и в конце останется ничего. В абсолютных масштабах ничего не имеет смысла, все лишь всплеск энтропии в бесконечно вечном ничто.

        Но есть в людях некое осознание, которое получает радость от этой суеты. Человек может придумать "игру" на ровном месте, например игру в прогресс, освоение вселенной, итд. Неважно что у этого нет смысла в абсолютных масштабах, это все равно весело.

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

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


  1. nik_savchenko
    26.01.2023 14:54
    #25157240
    +3

    Безусловно, имхо, но мне кажется, что все эти заигрывания с ИИ и прочими GPT в долгосрок
    несут больше вреда, чем пользы и чудесные статьи из разряда "о, смотрите, бот может кодить на уровне джуна, надо только давать инструкции" выглядят как "о, смотрите, машина, которую я очень слабо контролирую, скоро станет умнее меня и может оставить меня и мне подобных без работы, но мне пофиг".

    Возможно индустрии не хватает этических аналогов трех законов робототехники.
    Без них это все чревато оптимизациями, которые превращаются в сокращения (недавняя новость, что книжные сервисы стали активно использовать ИИ в качестве альтернативы дикторам тому подтверждение) и другими малоприятными примерами, когда ИИ не помогает
    человеку, а заменяет его. И с одной стороны достигается искомая цель, а с другой - есть нюанс.
    Microsoft, Google и иже с ними, конечно, сэкономят, но куда девать всех тех людей, которых освободят от работы? Отправлять в рабочие? Так в том мире надо уметь, кроме головы, делать что-то руками, своя конкуренция, и, банально, придется переучиваться. Или пусть рыночек порешает?
    Но вопрос, конечно, риторический.

    И да, при всем при этом я не против автоматизации и оптимизации ручного труда, особенно на опасных и вредных производствах, главное перед любой автоматизацией навести порядок, и может вдруг выясниться, что автоматизировать уже не надо. Только наводить порядок обычно долго и дорого, поэтому лучше сразу автоматизируем, отчитаемся о том, какие мы прогрессивные и какое классное у нас оборудование, и не имеет значение, что оно работает два часа в день из-за того, что предварительные этапы техпроцесса "еще не автоматизировали". В "Цели" Элияху Голдратта есть прекрасный пример похожей ситуации.

    И ок, когда мы избавляем человека интеллектуального труда от его рутины, добавляя фреймворков, САПРов, редакторов и прочего. И да, не всегда это полезно, но в большинстве случаев. Но его замещение машиной здесь - мягко говоря, кажется, не лучшим решением.

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


    1. 76popugaev
      26.01.2023 19:47
      #25158370
      +1

      Возможно индустрии не хватает этических аналогов
      У индустрии есть другие приоритеты — денГи решают всё.

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


      1. nik_savchenko
        26.01.2023 20:20
        #25158510

        И ведь не поспоришь.


    1. YuryZakharov
      26.01.2023 23:39
      #25159146
      +2

      но куда девать всех тех людей, которых освободят от работы?

      А что, если взглянуть на эту ситуацию с другой точки?

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

      Никакой бизнес не обязан нанимать меня на работу. Даже если мне нечем кормить кота. Да и государство не обязано именно нанимать.

      Как ни крути, а спасение утопающих...


      1. nik_savchenko
        27.01.2023 13:49
        #25161262

        "Microsoft, Google и иже с ними - они не обязаны никого нанимать. Нанимает Амазон фасовщиков - хорошо, есть рабочие места. Заменил роботами - ну, его право. И что ему предъявишь?"

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

        "Законодательно заставлять кормить бездельников как то так себе идея, проще дать им безусловный базовый доход."

        Есть нюанс. "Бездельниками" они стали не по своей воле. Да и не бездельниками, а безработными. До увольнения они не делали деньги из воздуха, как какие-нибудь перекупы или недобросовестные риелторы, и не сидели без работы из-за того, что везде платят недостаточно для их величества, а вполне себе работали.

        "Как ни крути, а спасение утопающих..."

        Собственно, и утопающими тоже

        Безусловно, можно рассуждать, что те же фасовщики сами виноваты в том, что остались без работы, ведь нужно было лучше учиться, больше работать и т.д., и тогда им не пришлось бы работать фасовщиками, а потом попасть под сокращение. Но всегда ли это возможно?

        И немного повторюсь:

        "
        И да, при всем при этом я не против автоматизации и оптимизации ручного труда, особенно на опасных и вредных производствах, главное перед любой автоматизацией навести порядок, и может вдруг выясниться, что автоматизировать уже не надо. Только наводить порядок обычно долго и дорого, поэтому лучше сразу автоматизируем, отчитаемся о том, какие мы прогрессивные и какое классное у нас оборудование, и не имеет значение, что оно работает два часа в день из-за того, что предварительные этапы техпроцесса "еще не автоматизировали". В "Цели" Элияху Голдратта есть прекрасный пример похожей ситуации.

        И ок, когда мы избавляем человека интеллектуального труда от его рутины, добавляя фреймворков, САПРов, редакторов и прочего. И да, не всегда это полезно, но в большинстве случаев. Но его замещение машиной здесь - мягко говоря, кажется, не лучшим решением
        "

        Отчитаться об экономии на ФОТ в результате высвобождения рабочей силы - это конечно, здорово, но какой, блин, смысл, если закупленное оборудование простаивает или, в общем-то, нафиг не нужно, а показатели не страдают, потому что работу раскидали на тех оставшихся, кто еще не за забором?

        Амазон, наверно, так не делал, но все ли компании мира - Амазон?


  1. DmitryKazakov8
    26.01.2023 15:14
    #25157350
    +2

    Чтобы написать достаточно полные описания, по которым ИИ сможет сгенерировать достаточно полноценный код, труда надо намного больше, потому что в каждой задаче нужно передавать весь контекст (подробнейшее описание того, как работает программа). У меня вот была задача по разработке формы, которая будет работать в нескольких режимах как минимум на 40 устройствах с учетом их особенностей. Описание было на 50 страниц, готовили его 3 месяца, и описана там была не вся система, и все равно приходилось писать кастомный код под каждое устройство. Программист будет всегда цениться за то, что сможет по минимальному описанию (бизнес-сценарий) продумать все технические кейсы и внедрить фичу в любую систему, это экономит бизнесу кучу денег и времени.

    Хотя и можно для простейших задач создавать текстовые описания типа "создай компонент модалки", но даже в этом случае получишь как в статье - неоптимизированный, неподходящий для встраивания в систему код, который нужно ревьюить и переделывать. Куда проще и быстрее самому написать. Так что в рабочих сценариях пока не вижу применения для ИИ, только для обучения.


    1. niccolo2019
      27.01.2023 11:33
      #25160372
      +1

      Знаете, сейчас почти везде очень заметно, что в ИТ-компаниях программисты понятия не имеют для чего и как используется их программа (или как её эффективно использовать), как работает код, написанный до них и т.п. Поэтому и выходят новые версии с навешанными свистоперделками, перерисованными иконками и с фигой вместо реальных улучшений и исправления багов, которые тянутся порой десятки лет уже (зато часто с новыми багами из-за попыток пристыковать новое к непонятно как работающему старому). Время, когда софт по конкретные потребности писали люди:


      а) хорошо понимающие эти потребности (потому что это были именно их потребности, а не потребность выкачать бабло из потребителей)
      б) чётко представляющие, как этот софт должен работать (понимание задачи, гораздо более серьёзная системная физмат подготовка)
      с) понимающие, что свистоперделки - это свистоперделки, а никакие не улучшения


      давно прошло.....