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

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

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

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

Эксперимент 1: Создание псевдоязыка 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() в компоненте приложения

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

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

Вместо того чтобы создавать новый язык, я решил взаимодействовать с 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 не является полностью разговорной моделью, поскольку он делает предположения относительно неоднозначной или отсутствующей информации вместо того, чтобы запрашивать у пользователя разъяснения
Расширятся возможности для использования навыков интеграции языковых моделей с различным программным обеспечением, чтобы заставить их работать вместе, а это невозможно без понимания работы нескольких программных продуктов

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