Посвящается Карен и Чейзу — моим самым любимым собеседникам

От издательства

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

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

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

 

Ваши замечания, предложения, вопросы отправляйте по адресу comp@piter.com (издательство «Питер», компьютерная редакция).

Мы будем рады узнать ваше мнение!

На веб-сайте издательства www.piter.com вы найдете подробную информацию о наших книгах.

Предисловие

«И как хорош тот новый мир, где есть такие люди!» Эту реплику в пьесе ­Уильяма Шекспира «Буря» произносит Миранда, когда она впервые видит людей. Не думаю, что в детстве вы были сосланы на удаленный остров, но, возможно, все равно поймете чувства Миранды, когда впервые столкнетесь с искусственным интеллектом (ИИ), например с ChatGPT. Мир, в котором существуют такие чат-боты, действительно хорош.

Инструменты, подобные ChatGPT, поначалу кажутся удивительными, потому что они действительно способны на многое. Попросите ChatGPT написать шекспировский сонет, который отразит краткое содержание романа Кормака Маккарти «Дорога», и он с этим справится. Нет, конечно, получившееся стихотворение не будет на уровне Шекспира, но оно будет довольно интересным. Однако со временем такое простое развлечение надоедает, и большинство пользователей ChatGPT начинают задаваться вопросом: «Для чего же на самом деле может быть полезен ChatGPT?»

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

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

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

Благодарности

Американский эссеист и поэт Э.Б. Уайт (E. B. White) однажды описал редактора как «человека, который знает о писательстве больше, чем сами писатели, но которому удалось избежать нестерпимой жажды писать». Я согласен с этим высказыванием не только потому, что Э.Б. Уайт был мудрым человеком, но и потому, что я сам во многом полагаюсь на моих редакторов, которые помогают мне казаться гораздо лучшим писателем, чем я есть на самом деле!

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

Замечательные специалисты из Manning Publications гарантируют качество и точность каждой книги, а рукописи проверяются не только профессиональными редакторами, но и командой скрупулезных экспертов. За одной книгой, изданной в Manning, стоят десятки людей. Каков результат? Книга, которую вы сейчас держите в руках, содержит только точную и актуальную информацию, прошедшую проверку самыми внимательными специалистами в отрасли.

Да, мое имя единственное на обложке, но за созданием того, что находится внутри (будь то в физической или виртуальной форме), стоит множество людей. Это рецензенты: Адам Уан (Adam Wan), Андрес Сакко (Andres Sacco), Андриани Стилиану (Andriani Stylianou), Эшвин Матре (Ashwin Mhatre), Бирдсли Румл (Beardsley Ruml), Бруно Соннино (Bruno Sonnino), Чарльз Лэм (Charles Lam), Дрю Леон (Drew Leon), Эрим Эртурк (Erim Ertьrk), Ганеш Фалак (Ganesh Falak), Халил Каракозе (Halil Karakose), Джеймс Коутс (James Coates), Джефф Смит (Jeff Smith), Хосе Альберто Рейес Кеведо (Josй Alberto Reyes Quevedo), Жюльен Пои (Julien Pohie), Ларс Пеш (Lars Pesch), Марвин Шварце (Marvin Schwarze), Маттео Баттиста (Matteo Battista), Михаил Караашев (Mikhail Karaashev), Озрен Харлович (Ozren Harlovic), Радакришна МВ (Radhakrishna MV), Раджит Сахаи (Ranjit Sahai), Руй Лю (Rui Liu), Сараванан Мунирадж (Saravanan Muniraj), Стив Прайор (Steve Prior), Свапнилкумар Дешпанд (Swapneelkumar Deshpande), Тони Холдройд (Tony Holdroyd).

 

Огромная благодарность моему научному редактору Анирудху Прабху (Anirudh Prabhu), опытному разработчику пользовательских интерфейсов с более чем десятилетним стажем. Его карьера была отмечена значительными достижениями, включая публикацию четырех книг. Кроме того, он был техническим рецензентом для различных авторитетных изданий и активно участвовал в формировании будущего веб-разработки, создавая учебные материалы по HTML, CSS и jQuery.

Особая благодарность издателю Марджану Баче (Marjan Bace), редакторам Брайану Сойеру (Brian Sawyer) и Карен Миллер (Karen Miller), координатору проекта Малене Сели (Malena Selić), копирайтеру Тиффани Тейлор (Tiffany Taylor) и всем остальным сотрудникам издательства Manning, которые помогли воплотить эту книгу в жизнь.

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

Введение

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

Наверняка в вашей жизни есть множество других дел помимо изучения веб-разработки, поэтому книга организована так, чтобы не нужно было читать ее от начала до конца. Если вы только начинаете свой путь, прочитайте главу 1, чтобы получить первоначальное представление о теме, а затем попробуйте простой проект из главы 2, чтобы увидеть настоящий результат — страницу, сгенерированную ChatGPT. После этого можно пробовать любые проекты из глав 3–12 в каком угодно порядке. Для поиска интересующих вас глав обратитесь к разделу «Структура книги», в котором содержится краткий обзор всех тринадцати глав книги (и трех приложений).

Для кого эта книга

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

• Тех, кто не умеет писать код веб-страниц и не хочет этому учиться.  Специ­фичность веб-разработки долгое время была своеобразной преградой для многих людей, желающих создать свой собственный сайт. Цель данной книги — показать, как с ChatGPT свои веб-страницы могут сделать даже люди, не заинтересованные в обучении программированию.

• Тех, кто не умеет писать код веб-страниц, но хочет этому научиться. В этой книге основное внимание уделяется инструкциям, которые необходимо предоставить ChatGPT, чтобы тот сгенерировал нужный вам код. Тем не менее я также даю некоторое введение в каждую из технологий веб-разработки, используемых в проектах. Соедините эти базовые знания с практическим подходом книги, и вы многому научитесь.

• Тех, кто уже умеет писать код веб-страниц. Даже если вы знаете основы веб-разработки, то все равно можете использовать ChatGPT, чтобы ускорить свою работу и делегировать ему некоторые рутинные задачи. Эта книга покажет, какие промты можно использовать, чтобы ChatGPT стал вашим главным помощником в программировании.

Структура книги

Глава 1 знакомит с ChatGPT в целом и в частности с использованием ИИ для генерации кода веб-страниц. Вы узнаете, какие типы страниц можно создать с помощью ChatGPT, и получите общее представление о процессе.

Глава 2 описывает создание и размещение в интернете вашей первой веб-страницы с помощью ChatGPT. Вы научитесь отправлять ИИ промт для генерации кода, копировать этот код и сохранять его в отдельный файл. Затем вы протестируете код в веб-браузере и бесплатно разместите его в интернете.

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

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

Глава 5 описывает процесс публикации постов на странице, а также использования ИИ для преобразования текстовых промтов в изображения. Все это будет собрано в один промт, на основе которого ChatGPT сгенерирует код для страницы онлайн-журнала.

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

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

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

Глава 9 знакомит с двумя распространенными элементами веб-страниц: маркированными и нумерованными списками. Вы научитесь писать промты для создания таких списков и узнаете различные способы их настройки в соответствии с вашими потребностями. Глава завершается промтом ChatGPT для генерации кода страницы с рецептами.

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

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

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

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

Приложение A предоставляет полезную информацию о том, что понадобится для начала работы над веб-страницами с использованием ChatGPT. Вы узнаете, как настроить аккаунт ChatGPT, как проверять код и работать с файлами веб-страниц.

Приложение B посвящено размещению вашего кода в интернете. Вы узнаете, как это можно сделать на двух бесплатных сервисах: Netlify и Cloudflare, а также на других сайтах.

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

О коде в книге

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

.

Объем кода, сгенерированного ChatGPT для этой книги, может вас напугать, особенно если вы решите, что придется набирать этот код вручную. Но это не так! Код для всех веб-страниц книги, а также все промты ChatGPT доступны для просмотра, скачивания и копирования в репозитории книги на GitHub по адресу: https://github.com/paulmcfe/websites-with-chatgpt. Чтобы скачать все материалы, нажмите зеленую кнопку Code, затем выберите Download ZIP. Или же выберите папку отдельной главы и нажмите на файл, который хотите просмотреть.

Все исполняемые фрагменты кода также доступны в онлайн-версии книги liveBook по адресу: https://livebook.manning.com/book/build-a-website-with-chatgpt. Кроме того, полный код можно скачать с сайта Manning, перейдя по ссылке: www.manning.com/books/build-a-website-with-chatgpt.

Форум liveBook

Приобретая книгу «ChatGPT, сделай мне сайт», вы также получаете бесплатный доступ к платформе для онлайн-чтения liveBook издательства Manning (на анг­лийском языке). Эксклюзивные возможности liveBook позволяют оставлять комментарии как к книге в целом, так и к отдельным ее разделам или абзацам. Вы сможете легко делать для себя заметки, задавать технические вопросы и отвечать на них, а также получать помощь от авторов и других пользователей. Чтобы получить доступ к форуму, посетите страницу https://livebook.manning.com/book/build-a-website-with-chatgpt/discussion. Информацию о форумах Manning и правилах поведения на них смотрите на https://livebook.manning.com/discussion.

В рамках своих обязательств перед читателями издательство Manning предоставляет ресурс для содержательного общения читателей и авторов. Эти обязательства не подразумевают конкретную степень участия автора, которое остается добровольным (и неоплачиваемым). Задавайте авторам хорошие вопросы, чтобы им было интересно участвовать в диалоге! Форум и архивы обсуждений доступны на сайте Manning, пока книга продолжает издаваться.

Об авторе

Пол Макфедрис (Paul McFedries) уже более 30 лет является профессиональным техническим писателем. На его счету более 100 книг, которые в совокупности были проданы тиражом более 4 миллионов экземпляров по всему миру. Другая его книга, изданная Man­ning, называется «Web Design Playground, Second Edition»1. В свободное от написания книг время Пол создает собственные веб-сайты, чем занимается с 1996 года, а потому прекрасно разбирается в HTML и CSS. Пол сам написал код для множества сайтов, включая его личную страницу (https://paulmcfedries.com), Word Spy (https://wordspy.com), WebDev Workshop (https://webdevworkshop.io) и Web Design Playground (https://webdesignplayground.io/2). Пол любит обучать других людей программированию, его стиль письма прост и понятен, а каждая его книга наполнена поддержкой и пониманием, так как ему хорошо знакомо то чувство, когда начинаешь изучать что-то новое.

---

1. Основы создания веб-сайтов с помощью ChatGPT

В этой главе:

• Знакомство с ChatGPT

• Какие веб-страницы можно создавать с помощью ChatGPT

• Ограничения ChatGPT при создании веб-страниц

• Как создавать собственные веб-страницы с помощью ChatGPT

 

Британский писатель-фантаст Артур Кларк однажды сформулировал три закона, которые затем стали известны как «Три закона Кларка». Чаще всего цитируют третий: «Любая достаточно развитая технология неотличима от магии». Если вы всегда хотели делать сайты, но испытывали трудности с освоением технологий, то основная идея этой книги, а именно что вы можете создать свой собственный сайт с помощью ChatGPT, покажется вам настоящим волшебством. И это неудивительно, ведь если какая-то технология последних лет и заслуживает названия достаточно развитой, то это ChatGPT и подобные ему генеративные ИИ, способные писать стихи, прозу и — да, код для веб-страниц.

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

1.1. Что такое ChatGPT?

Если вы не провели последние год или два в бункере глубоко под землей, то, скорее всего, уже слышали о GPT и/или ChatGPT — системах искусственного интеллекта, которые стремительно завоевали популярность среди пользователей (по крайней мере тех из них, кто пользуется соцсетями). Однако знать о существовании ChatGPT — это одно, а понимать, что это такое, — совсем другое.

Чтобы лучше понять, что же такое ChatGPT и как он работает, полезно разобрать это понятие на составляющие. Начнем с аббревиатуры GPT (Generative Pre-trained Transformer):

• G — «генеративный» (generative) — означает, что GPT способен создавать (или генерировать) новый контент. GPT представляет собой большую языковую модель (LLM — large language model), то есть он предназначен для создания текстов: статей, рассказов и даже стихов. Генеративные способности GPT также позволяют использовать его и для написания программного кода, в частности кода, лежащего в основе веб-страниц.

• P — «предобученный» (pre-trained) — означает, что GPT был обучен на огромных объемах текста (это также объясняет, почему ИИ для генерации текста называется большой языковой моделью). В процессе предобучения GPT изучает все закономерности и структуры языка, например то, как строятся предложения. В частности, предобучение позволяет GPT предсказывать, какие слова или фразы обычно следуют друг за другом. По сути, основа работы GPT — предсказание следующего слова! Помимо текстов, GPT также обучался на большом наборе данных кода, а так как программный код более предсказуем, чем обычные тексты, GPT превосходно справляется с его генерацией.

• T — «трансформер» (transformer) — означает, что GPT способен обрабатывать входной текст (например, запрос создать веб-страницу) и выделять из него наиболее важные компоненты, игнорируя или понижая приоритет менее значимых частей текста. Это позволяет GPT выдавать более точные и релевантные результаты.

«Chat» в названии ChatGPT означает, что вы обмениваетесь сообщениями с GPT в форме диалога (почти как в обычном разговоре в чате). В контексте создания веб-страниц эти «диалоги» сводятся к тому, что вы запрашиваете определенный элемент страницы, а ChatGPT предоставляет необходимый код. Кроме того, ChatGPT также обладает способностью запоминать предыдущие сообщения в рамках одного диалога, что тоже может быть полезно при создании сайтов.

На момент публикации этой книги доступны две основные версии GPT: GPT-3.5, выпущенная в ноябре 2022 года, и GPT-4, выпущенная в марте 2023 года. Если вы используете приложение компании OpenAI2 (о котором будет рассказано далее) с бесплатной учетной записью ChatGPT (подробнее см. Приложение А) или без учетной записи, у вас есть доступ только к GPT-3.5. Если же у вас есть платная подписка ChatGPT Plus, то через приложение OpenAI доступны обе версии: GPT-3.5 и GPT-43.

Получить доступ к ChatGPT можно одним из трех основных способов:

• Приложение OpenAI (OpenAI app) — это платформа, разработанная компанией OpenAI, которая предоставляет возможность использования различных моделей искусственного интеллекта, включая GPT. Доступ к платформе OpenAI и ее моделям, включая ChatGPT, можно получить по адресу https://chat.openai.com. Для работы с ChatGPT учетная запись OpenAI не обязательна, но ее наличие снимает некоторые ограничения (подробности о создании учетной записи можно найти в Приложении А). Пользователи с подпиской ChatGPT Plus могут выбирать между использованием версий GPT-3.5 и GPT-4, как показано на рис. 1.1.

• Microsoft Copilot в Bing (или Bing Copilot)4 — это расширенная версия поисковой системы Microsoft, использующая технологии ИИ, включая функцию чата на основе GPT-4 (а также на основе других больших языковых моделей), и имеющая доступ к интернету. Для начала работы перейдите по ссылке https://bing.com и выберите вкладку Copilot, как показано на рис. 1.2.5 Для использования Bing Copilot учетная запись ChatGPT не требуется.

Рис. 1.1. С подпиской ChatGPT Plus приложение OpenAI предоставляет доступ к GPT-3.5 и GPT-4

Рис. 1.2. Используйте Bing Copilot для работы с GPT-4

• Microsoft Copilot — это сервис с интегрированными функциями ИИ в различных приложениях Microsoft (например, Microsoft Word, PowerPoint и т.д.), использующий технологии на основе языковых моделей, таких как GPT-4, и других моделей ИИ. Copilot упрощает выполнение задач, связанных с написанием кода, созданием контента, анализом данных и многим другим. Он доступен по ссылке https://copilot.microsoft.com, как показано на рис. 1.3. Учетная запись ChatGPT не требуется, но необходима учетная запись Microsoft.

Рис. 1.3. Если у вас есть учетная запись Microsoft, можно использовать Copilot для работы с GPT-4

Примечание Существует множество других способов доступа к ChatGPT, как прямых, так и косвенных. Например, есть мобильные приложения ChatGPT для iOS и Android. С их помощью можно поэкспериментировать с ChatGPT, но для создания сайтов лучше использовать приложение OpenAI, Bing Copilot или Microsoft Copilot, так как они обеспечивают удобный доступ к сгенерированному коду.

Какой способ выбрать? Для создания простого кода веб-страниц, описанного в этой книге, особой разницы нет. GPT-4 обычно генерирует наиболее «современный» код, что, как правило, хорошо. (Однако это может привести к тому, что ваши страницы будут плохо работать в старых браузерах, таких как Internet Explorer. Мой совет: забудьте про старые браузеры и сосредоточьтесь на современном вебе!) Если у вас нет учетной записи ChatGPT и вы хотите избежать ограничений, накладываемых OpenAI на пользователей без учетных записей, лучше воспользоваться Bing Copilot.

1.2. С помощью ChatGPT создавать сайты может каждый

У меня никогда не было личного помощника, но я вполне могу представить, как это удобно. В конце концов, каждый захочет, чтобы кто-то другой выполнял за него все рутинные, но важные задачи: организацию встреч, бронирование авиабилетов и отелей, создание презентаций. Помощник может быть особенно полезен, если вы не знаете (да и не хотите знать), как настраивать встречу в Zoom, пользоваться сайтом Expedia или создавать презентацию в PowerPoint.

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

Изучение трех основных видов кода для веб-страниц (HTML, CSS и JavaScript) напоминает подъем на высокую гору, так как это не каждому под силу. Особенно если просто нужно создать пару страниц для личного проекта, команды, хобби, благотворительности или мероприятия. Если вам не подходят существующие готовые решения, а мысль начать изучение HTML, CSS и JavaScript пугает, выход все же есть. Теперь вы можете «нанять» (и даже бесплатно, если захотите) помощника, который сгенерирует код веб-страницы согласно вашим требованиям. Этот помощник — ChatGPT. С ним не обязательно погружаться в изучение азов веб-разработки, так как он уже освоил их и может помочь превратить вашу идею веб-страницы в реальный сайт. Предоставив ChatGPT простое описание того, что именно вам нужно, вы получите работающий код, готовый к размещению в интернете (с чем ИИ также может помочь). Задача выполнена!

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

1.3. Типы страниц, которые можно (и нельзя) создать

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

Во-первых, важно понимать, что с помощью ChatGPT проще всего создавать статические веб-страницы. Под статическими понимаются страницы, содержимое которых (текст и данные) не меняется после загрузки. Это может показаться существенным ограничением, но на самом деле, пользуясь ChatGPT, можно создавать практически любые типы статических страниц, например:

• личную страницу;

• информационную страницу для команды, организации или мероприятия;

• лендинг;

• страницу хобби;

• фотогалерею;

• портфолио;

• пост (статью, обзор, фанфик и др.);

• топ-10;

• инструкцию;

• путеводитель.

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

Во-вторых, особенностью всех вышеперечисленных страниц является то, что они требуют только так называемого фронтенд-кода, то есть кода (HTML, CSS и JavaScript), который выполняется в веб-браузере. Совсем другое дело — это бэкенд-код, который выполняется на веб-сервере и используется для динамических веб-страниц, содержимое которых постоянно изменяется.

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

1.4. Использование ChatGPT в создании веб-страниц

Fritterware («фритюрница») — это старый термин из IT, обозначающий любое ПО, которое увлекает пользователя, заставляя тратить огромное количество времени на изучение его функций и возможностей. Как только у вас появится учетная запись ChatGPT (создание которой описано в Приложении А, хотя для работы она не обязательна), вы получите доступ к одному из ярчайших примеров такой fritterware! Вы даже не заметите, как потратите кучу времени, заставляя ChatGPT выполнять разные забавные и бессмысленные задачи, но рано или поздно, конечно, все же захотите перейти к делу и начать создавать сайт.

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

Рис. 1.4. Упрощенная схема использования ChatGPT для создания веб-страницы

1.4.1. Написание промта для ChatGPT

Первый шаг — написание запроса, в котором указывается, что именно вы хотите от ChatGPT. Такой запрос называется «промт». При переходе на сайт ChatGPT (см. рис. 1.1) или Bing Copilot (см. рис. 1.2) вы сразу увидите текстовое поле, в которое необходимо вводить свой промт.

Промты могут быть простыми, в одно предложение (пример показан на рис. 1.3) или сложными, в несколько абзацев. Но есть предел: большинство версий ChatGPT принимают не более 4000 символов за один промт. Это примерно 500 слов, чего более чем достаточно для создания веб-страниц.

Без преувеличения можно сказать, что написание промта — это самый важный этап, потому что его качество напрямую определяет качество ответа ChatGPT. В некотором смысле вся эта книга посвящена написанию качественных промтов, которые позволят ChatGPT выполнять конкретные задачи по созданию веб-страниц. Кроме того, в Приложении C рассматриваются наиболее успешные практики написания промтов (эксперты называют данный процесс «промт-инжиниринг»).

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

1.4.2. Просмотр ответа ChatGPT

После отправки промта ChatGPT сразу же начинает работать и дает свой ответ уже через несколько секунд. На рис. 1.5 показан пример ответа на следующий промт:

Напиши HTML-код для веб-страницы, которая отображает текст "Привет, мир!" крупным шрифтом.

Рис. 1.5. В этом примере ответ ChatGPT включает запрашиваемый код

Как показано на рис. 1.5, результат включает блок с заголовком html, содержащий код веб-страницы. Возможно, код покажется непонятным, но поверьте, он делает именно то, о чем вы просили в промте, — отображает надпись «Привет, мир!» крупным (в данном случае 48 пикселей) шрифтом. Обратите внимание, что по различным техническим причинам ChatGPT может выдать другой код при повторной отправке промта. Однако поскольку в HTML и CSS часто есть несколько способов достижения одного и того же результата, сгенерированный код все равно создаст нужную вам веб-страницу (с минимальными внешними различиями).

1.4.3. Сохранение кода в файл

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

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

В Приложении A подробно рассматриваются все тонкости работы с файлами веб-страниц. На рис. 1.6 показан сгенерированный ChatGPT код (см. рис. 1.5), который затем был скопирован и помещен в HTML-файл, сохраненный под именем index.html. Далее этот файл уже можно загрузить в предпочитаемый вами браузер (подробности в главе 2), но для настоящего веб-проекта требуется еще один шаг — размещение кода в интернете.

Рис. 1.6. Код, скопированный из ChatGPT и сохраненный в HTML-файл

1.4.4. Загрузка HTML-файла

Единственный способ, с помощью которого другие люди смогут увидеть ваш сайт, — разместить его в интернете. Для относительно простых проектов, описанных в этой книге, процесс загрузки включает в себя копирование файлов, созданных с помощью ChatGPT, на сервис, предоставляющий хостинг веб-страниц. Я подробно рассматриваю весь этот процесс в Приложении B, но в основном это простая загрузка папки с файлами вашего сайта на хостинг. Рисунок 1.7 показывает пример такого процесса, в котором я перетаскиваю папку hello-world из окна справа в окно слева. После загрузки файлов веб-страницы можно сразу же просмотреть их в вашем браузере, как показано на рис. 1.8.

Рис. 1.7. С такими сервисами, как, например, Netlify, загрузить код означает просто перетащить папку из одного места в другое

Предыдущие разделы книги познакомили вас с процессом «промт — копировать — сохранить — загрузить», который, как вы, вероятно, согласитесь, на удивление прост и приятен. Однако не все проекты будут такими легкими, особенно если начать создавать сайты, выходящие за пределы банального «Привет, мир!». Для более амбициозных проектов, скорее всего, понадобятся две дополнительные техники: повторение процесса «промт — копировать — сохранить — загрузить», чтобы создать несколько страниц и отдельные компоненты страницы, а также уточнение и доработка ваших промтов для ChatGPT.

Рис. 1.8. Веб-страница, созданная ChatGPT, размещена в интернете

1.4.5. Повторение запроса

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

• Создание многостраничного сайта. Ряд сайтов состоит из одной страницы, но гораздо более распространены многостраничные сайты. Даже самый скромный сайт может включать главную страницу, страницу «О нас» (описывающую вас или ваш проект), страницу «Контакты» (где указаны различные способы связи с вами), а также отдельные страницы для контента (например, статей, фотографий или портфолио). Для такого сайта нужно будет повторить цикл «промт — копировать — сохранить — загрузить» для каждой страницы.

• Создание нескольких компонентов для одной страницы. Большинство современных веб-страниц состоят из нескольких компонентов, таких как шапка (хедер), навигационная панель или меню, область контента, боковая панель и подвал страницы (футер). Конечно, можно включить все компоненты в один промт, но вы добьетесь лучших результатов, если напишете отдельный промт для каждого компонента. В таком случае процесс включает в себя повторение операций «промт — копировать — сохранить» для каждого компонента, при этом весь код потом вставляется в один и тот же HTML-файл, который загружается только после добавления всех компонентов страницы.

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

1.4.6. Уточнение и доработка промтов

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

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

• Это то, что было нужно? Данный вопрос стоит задать себе сразу после того, как ChatGPT сгенерировал код по вашему промту. Так вы проверяете код (как можете), чтобы убедиться, что он выполняет поставленную задачу. Если ответ «да», вы переходите к следующему вопросу, если «нет», вы дорабатываете промт (например, делаете его более конкретным) и пробуете снова.

• Код работает? Для ответа на этот вопрос необходимо протестировать код, скопировав и вставив его в онлайн-сервис для тестирования веб-страниц, как описано в Приложении A. Если код работает корректно, тогда можно сохранить его как HTML-файл6. Если же код содержит ошибки, нужно их исправить. Для этого следует внести изменения в промт и повторно его отправить. В Приложении A также содержится ряд рекомендаций по устранению ошибок.

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

Рис. 1.9. Уточнение и доработка промтов

Итоги

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

• ChatGPT — это приложение, которое обеспечивает удобный доступ к GPT через приложение OpenAI (размещенное по адресу https://chat.openai.com), Bing Copilot (https://bing.com — необходимо выбрать вкладку Copilot) или Microsoft Copilot (по адресу https://copilot.microsoft.com).

• GPT обучен на огромных объемах программного кода, включая тот, что используется для создания веб-страниц: HTML, CSS и JavaScript. Это позволяет ChatGPT генерировать код веб-страниц на основе простых запросов.

• ChatGPT лучше всего подходит для создания статических веб-страниц, которые не требуют данных, хранящихся на веб-сервере.

• ChatGPT помогает создавать веб-страницы в ходе базового цикла «промт — копировать — сохранить — загрузить». «Промт» — это инструкция, объясняющая ChatGPT, какая страница вам нужна; «копировать» означает перенос сгенерированного кода в файл; «сохранить» подразумевает сохранение файла в HTML-формате; «загрузить» обозначает загрузку HTML-файла на веб-хостинг.

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

---

2. Создание и размещение в интернете вашей первой веб-страницы

В этой главе:

• Процесс создания и размещения веб-страницы в интернете

• Использование ChatGPT для генерации полноценной веб-страницы

• Копирование сгенерированного кода веб-страницы

• Сохранение кода в виде HTML-файла

• Размещение файла веб-страницы в интернете

 

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

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

2.1. Процесс

Чтобы создать работающую веб-страницу, я воспользуюсь циклом «промт — копировать — сохранить — загрузить», который мы рассмотрели в главе 1 (рис. 2.1). Этот цикл включает следующие шаги:

1. Сформулировать промт для ChatGPT, чтобы он сгенерировал код страницы.

2. Скопировать полученный код.

3. Вставить код в текстовый редактор и сохранить его в виде HTML-файла.

4. Загрузить HTML-файл на веб-хостинг.

Рис. 2.1. Цикл «промт — копировать — сохранить — загрузить», используемый в этой главе

Отдельные разделы данной главы подробно рассматривают каждый из этих шагов.

2.2. Промт для генерации кода веб-страницы

Для начала работы нужно открыть ChatGPT одним из доступных вариантов:

• Если у вас нет аккаунта OpenAI, перейдите на https://chat.openai.com, чтобы использовать языковую модель GPT-3.5.

• Если у вас есть аккаунт OpenAI, но нет подписки ChatGPT Plus, доступ к GPT-3.5 также открыт по ссылке https://chat.openai.com.

• Если у вас есть подписка ChatGPT Plus, перейдите на https://chat.openai.com и выберите языковую модель GPT-4.

• Если вы предпочитаете использовать Bing Copilot, перейдите по ссылке https://bing.com и выберите Copilot.

• Если у вас есть аккаунт Microsoft, перейдите на https://copilot.microsoft.com.

В своем примере я использовал приложение ChatGPT OpenAI с языковой моделью GPT-4, как показано на рис. 2.2.

Рис. 2.2. Приложение ChatGPT OpenAI с выбранной языковой моделью GPT-4

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

Однако это не обязательно должна быть простейшая страница уровня «Привет, мир!» («Hello World!»). Если у вас есть своя несложная идея для сайта, просто попросите ChatGPT сгенерировать для него код, уточнив в промте, что именно требуется. Описание задачи будет зависеть от вашей идеи, но необходимо упомянуть следующее:

• Цель: что именно должен сгенерировать ChatGPT (в данном случае — веб-страницу).

• Данные: информация, которую нужно использовать (если есть).

• Действие: что должна делать веб-страница либо в общем, либо с указанными данными.

• Интерфейс: способ, с помощью которого пользователь будет взаимодействовать с веб-страницей.

Вот пример запроса для создания веб-страницы, которую я задумал (рис. 2.3):

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

Рис. 2.3. Страница приложения ChatGPT OpenAI с моим промтом, готовым к отправке

Вот как данный промт соответствует схеме «цель — данные — действие — интерфейс»:

• Напиши код для веб-страницы: в этой части промта вы просите ChatGPT сгенерировать код для целой веб-страницы.

• которая содержит 50 каламбуров: здесь вы просите ChatGPT придумать 50 каламбуров и использовать их в качестве данных.

• и отображает случайный каламбур: вы указываете, что ChatGPT должен выбирать случайный каламбур из предоставленных данных.

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

Введите промт в текстовое поле ChatGPT, отправьте его и дождитесь результата.

2.2.1. Проверка результата

Ниже представлен код, который выдал мне ChatGPT7 (код, который сгенерирует ChatGPT для вас, может отличаться):

Важные примечания к полученному результату:

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

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

• Вместо того чтобы придумать 50 каламбуров, ChatGPT сгенерировал всего три, добавив примечание:

// Добавь остальные каламбуры...

Такое иногда происходит. Однако это не значит, что с этим ничего нельзя сделать. Для завершения задачи я просто уточнил запрос:

Можешь написать оставшиеся каламбуры за меня?

ChatGPT переписал код, добавив полный списо