Тестируем GPT-4: Может ли искусственный интеллект создать веб-сайт на React.JS?

В Интернете есть бесчисленное множество заголовков о GPT-4. Некоторые говорят об эффекте калькулятора, некоторые говорят, что разработчики программного обеспечения обречены, а другие утверждают, что это конец света! Но так ли это на самом деле?

Этот вопрос преследовал меня в течение нескольких дней и ночей, и я должен был узнать на него ответ. Мой интерес достиг пика, когда я благоговейно начал смотреть последние материалы на Youtube-канале Fireship. В конце концов я решил отказаться от 2 чашек кофе StarBucks и купил платную подписку на GPT-4 от OpenAI.

t.me

Искусственный интеллект. Высокие технологии

В этой статье я поделюсь своим опытом использования GPT-4 для создания персонального веб-сайта с помощью React.JS и изучу, как он функционирует в качестве веб-разработчика.

Я протестировал GPT-4, создав псевдоязык для React.JS, который позволяет вам вводить больше информации в одну подсказку. Это полезно, поскольку существует ограничение на количество символов, которые вы можете ввести. Вот пример псевдоязыка React:

ComponentName: Props: - prop1 (type) - prop2 (type) State: - stateVar1 (initialValue) - stateVar2 (initialValue) Lifecycle: - componentDidMount: - action or function call - componentDidUpdate: - action or function call Functions: - functionName1: - action or function call - functionName2: - action or function call Render: - (JSX-like structure or placeholder)

Это язык, на котором вы и языковая модель соглашаетесь с тем, что определённые термины означают определённые вещи. Это также полезно при воспроизведении одного и того же содержимого в 90% случаев, когда вы запрашиваете его, особенно с учётом того, что GPT-4 является генеративным и разные выходные данные могут / будут сгенерированы даже для одного и того же запроса. Ниже приведён пример псевдокода, который вы могли бы использовать для создания компонента рецепта:

RecipeApp: Props: - recipe (object) Functions: - renderIngredients: - for each ingredient in recipe.ingredients - show ingredient.name and ingredient.quantity - renderSteps: - for each step in recipe.steps - show step.number and step.description Render: - div - h1 recipe.title - h2 "Ingredients" - renderIngredients() - h2 "Instructions" - renderSteps()

Но у этого есть огромный недостаток. Когда вы создаёте несколько компонентов для приложения, GPT-4 игнорирует тот факт, что все эти компоненты должны быть взаимосвязаны. Например, я хотел создать компонент ContactMe для своего веб-сайта и добавить эффект мигающей анимации на панель навигации в течение 2 секунд при нажатии кнопки отправки. Чтобы сделать это в React.JS состояние должно быть инициализировано в компоненте приложения, а затем вызвано другими компонентами либо для использования, либо для обновления значения. Вот состояния и функции, сгенерированные GPT-4:

// App component const App: React.FC = () => { const [activeSection, setActiveSection] = useState(1); const onScroll = () => { // Logic to update activeSection based on user scroll }; useEffect(() => { window.addEventListener("scroll", onScroll); return () => { window.removeEventListener("scroll", onScroll); }; }, []); return ( <div className={`app-container active-section-${activeSection}`}> <PageSection /> {/* Add more PageSection components as needed */} </div> ); }; // Navbar component interface NavBarProps { blinkNavBar: () => void; barColor?: string; } const NavBar: React.FC<NavBarProps> = ({ blinkNavBar, barColor = "black" }) => { const [currentBarColor, setCurrentBarColor] = useState(barColor); // AboutMe component interface AboutMeProps { blinkNavBar: () => void; } interface FormData { name: string; email: string; message: string; } const AboutMe: React.FC<AboutMeProps> = ({ blinkNavBar }) => { const [formData, setFormData] = useState<FormData>({ name: "", email: "", message: "", });

Просматривая код, мы обнаруживаем 2 проблемы:

Функция blinkNavBar() никогда не определяется в компоненте приложения
Некоторые функции просто говорят, что делать, вместо того, чтобы предоставлять вам фактический код. Пример: Функция onScroll() в компоненте приложения

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

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

Разработайте динамичный веб-сайт на React с использованием TypeScript и CSS. Веб-сайт должен быть полностью адаптивным и адаптируемым в зависимости от устройства и размера экрана. В нём будут представлены подробные сведения о fullstack-разработчике и включены следующие разделы: Обо мне, Опыт работы, образование, проекты и Свяжитесь со мной.Дизайн:Фон: Все разделы должны содержать рисунки на фоне технических объектов, сгенерированные с помощью CSS, и реализовывать параллаксную прокрутку для создания привлекательного пользовательского интерфейса.Панель навигации: Создайте панель навигации, которая будет содержать имя разработчика слева и ссылки на различные разделы справа. Убедитесь, что активная ссылка выделена при отображении соответствующего раздела.Тело: Используйте принципы дизайна Neumorphism для создания мягкого 3D-эффекта на элементах вашего сайта.Типография: Используйте жирный шрифт для заголовков и важного текста, чтобы привлечь к ним внимание.Данные:Используйте случайно сгенерированные данные для контента веб-сайта, такие как проекты, образование и опыт работы.Цвета:Используйте контрастные цвета, приятные глазу, следите за тем, чтобы текст был разборчивым, и соблюдайте рекомендации WCAG по обеспечению доступности.Тёмный режим:Внедрите кнопку переключения между тёмным и светлым режимами и установите для неё системную тему устройства по умолчанию.

Изначально GPT-4 предоставил мне инструкции по разработке динамического веб-сайта React с использованием TypeScript и CSS. Затем, когда я запросил код, я получил несколько компонентов, но он мог дать мне только каркасный компонент для каждого из них из-за ограничений по пространству. Вот пример компонента Navbar:

// Navbar.tsx import React from "react"; import { NavLink } from "react-router-dom"; import "./Navbar.css"; const Navbar: React.FC = () => { return ( <nav> {/* Add developer's name and links to different sections */} </nav> ); }; export default Navbar;

Для css там просто сказано / * Добавить стили панели навигации здесь */

Вау 👏🏽 Неужели GPT-4 просто проигнорировал самую большую часть информации, которую я предоставил в подсказке? Я попробовал ещё раз, запросив код для каждого компонента в отдельности, предложив что-то вроде “Сгенерируйте полный код для Navbar.tsx и Navbar.css” и, Вуаля! Я действительно получил полный код. Взгляните на это:

import React from "react"; import { NavLink } from "react-router-dom"; import "./Navbar.css"; const Navbar: React.FC = () => { return ( <nav className="navbar"> <div className="navbar-container"> <div className="navbar-brand"> <NavLink to="/" exact activeClassName="navbar-active"> Developer Name </NavLink> </div> <div className="navbar-links"> <NavLink to="/" exact activeClassName="navbar-active"> About Me </NavLink> <NavLink to="/work-experience" activeClassName="navbar-active"> Work Experience </NavLink> <NavLink to="/education" activeClassName="navbar-active"> Education </NavLink> <NavLink to="/projects" activeClassName="navbar-active"> Projects </NavLink> <NavLink to="/contact-me" activeClassName="navbar-active"> Contact Me </NavLink> </div> </div> </nav> ); }; export default Navbar;

.navbar { background-color: #f8f9fa; position: fixed; top: 0; left: 0; right: 0; z-index: 1000; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } .navbar-container { display: flex; justify-content: space-between; align-items: center; max-width: 1200px; margin: 0 auto; padding: 1rem; } .navbar-brand { font-size: 1.5rem; font-weight: bold; } .navbar-links { display: flex; gap: 1rem; } .navbar a { color: #343a40; text-decoration: none; transition: color 0.3s; } .navbar a:hover { color: #007bff; } .navbar-active { color: #007bff; } @media screen and (max-width: 768px) { .navbar-links { display: none; } }

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

Ладно, сейчас самое время взглянуть на конечный результат:

Наблюдения:

Хотя большая часть стиля отключена, по крайней мере, общая картина получилась правильной
Мне очень не понравился стиль сайта, текст был едва разборчив из-за того же фона и цвета шрифта
Прокрутка невозможна, так как каждый раздел выполнен как отдельная страница и отображается только при нажатии на ссылку на панели навигации
Переключатель тёмного режима вовсе отсутствует

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

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

Статья была взята из этого источника:

uproger.com

Тестируем GPT-4: Может ли искусственный интеллект создать веб-сайт на React.JS?

Тестируем GPT-4: Может ли искусственный интеллект создать веб-сайт на React.JS?

Эксперимент 1: Создание псевдоязыка React.JS

Эксперимент 2: Человеческий язык

Заключение