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

Как он выглядит по сравнению с GitHub Copilot, выпущенным в прошлом году? ИИ придет после вашей работы ? Давай выясним.

Если вы не читали мою предыдущую статью о GitHub Copilot , то можете ознакомиться с ней здесь .

Тестирование ChatGPT

Давайте кратко пройдемся по тем же тестам , что и GitHub Copilot .

Тест 1: Получение цен на акции

К сожалению, в первый раз он сгенерировал неверный код.

Функция не была определена как asyncи promisesне обрабатывалась должным образом.

Следующая попытка была лучше

Как ни странно, он работает без ключа API (пока параметры запроса содержат apikeyключ с любым случайным значением).

Результат : GitHub Copilot оставляет ChatGPT далеко позади .

Тест 2: обход BFS

На этот раз ChatGPT справился за один раз, к сожалению, это было так долго, что скриншот не помещался на экране, так что вот сгенерированный код:

class Node:
  def __init__(self, value):
    self.value = value
    self.left = None
    self.right = None

class BinarySearchTree:
  def __init__(self):
    self.root = None

  def insert(self, value):
    new_node = Node(value)

    if self.root is None:
      self.root = new_node
      return

    current_node = self.root
    while True:
      if value < current_node.value:
        if current_node.left is None:
          current_node.left = new_node
          return
        current_node = current_node.left
      else:
        if current_node.right is None:
          current_node.right = new_node
          return
        current_node = current_node.right

  def inorder_traversal(self, node, numbers):
    if node is None:
      return
    self.inorder_traversal(node.left, numbers)
    numbers.append(node.value)
    self.inorder_traversal(node.right, numbers)

  def get_numbers(self):
    numbers = []
    self.inorder_traversal(self.root, numbers)
    return numbers

bst = BinarySearchTree()
bst.insert(10)
bst.insert(5)
bst.insert(15)
bst.insert(3)
bst.insert(7)
bst.insert(13)
bst.insert(17)

numbers = bst.get_numbers()
print(numbers)  # [3, 5, 7, 10, 13, 15, 17]

Результат : ChatGPT побеждает.

Тест 3: Массив из 100 единиц

ChatGPT сгенерировал несколько предложений для этого

Когда GitHub Copilot был запущен, он генерировал немного шаткое предложение, но теперь он генерирует тот же код, что и ChatGPT .

Результат : Ничья (в зависимости от того, какую версию ПО вы сравниваете)

Создание полного проекта TODO

Чтобы продолжить тесты, я решил создать полный проект TODO , используя оба программного обеспечения.

ЧатGPT

1. Как создать проект TODO ?

Шаги, упомянутые ChatGPT , достаточно всеобъемлющи .

2. Как создать Reactпроект?

3. Создайте компонент Todo

Это та часть, которая мне не понравилась. Сгенерированный код использовал устаревший синтаксис Class Component . Он также не обрабатывал добавление todos

4. Оптимизируйте компонент Todo, чтобы обрабатывать добавление и удаление задач, а также помечать их как выполненные.

Вот сгенерированный код (слишком длинный для скриншота)

import React from "react";

// TodoItem component
const TodoItem = ({
 item,
 onDelete,
 onComplete,
}) => (
 <li>
   {item.text}
   <button onClick={onDelete}>Delete</button>
   <button onClick={onComplete}>
     {item.isComplete ? "Undo" : "Complete"}
   </button>
 </li>
);

// TodoApp component
class TodoApp extends React.Component {
 // Define the initial state of the component
 state = {
   todoItems: [],
 };

 // Method to handle adding new items to the todo list
 addTodo = (text) => {
   // Add the new item to the todo list
   this.setState({
     todoItems: [
       ...this.state.todoItems,
       { text, isComplete: false },
     ],
   });
 };

 // Method to handle deleting items from the todo list
 deleteTodo = (index) => {
   // Delete the item at the given index
   this.setState({
     todoItems: this.state.todoItems.filter(
       (_, i) => i !== index
     ),
   });
 };

 // Method to handle completing/undoing a todo item
 completeTodo = (index) => {
   // Update the "isComplete" property of the item at the given index
   this.setState((state) => {
     const todoItems = [...state.todoItems];
     todoItems[index].isComplete =
       !todoItems[index].isComplete;
     return { todoItems };
   });
 };

 // Method to render the component
 render() {
   return (
     <div>
       {/* Form to add new items to the todo list */}
       <form>
         <input
           type="text"
           placeholder="Add a todo item"
         />
         <button type="submit">Add</button>
       </form>

       {/* List of todo items */}
       <ul>
         {this.state.todoItems.map(
           (item, index) => (
             <TodoItem
               key={index}
               item={item}
               onDelete={() =>
                 this.deleteTodo(index)
               }
               onComplete={() =>
                 this.completeTodo(index)
               }
             />
           )
         )}
       </ul>
     </div>
   );
 }
}

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

import React from "react";

// TodoItem component
const TodoItem = ({ item, onDelete, onComplete }) => (
  <li>
    {item.text}
    <button onClick={onDelete}>Delete</button>
    <button onClick={onComplete}>
      {item.isComplete ? "Undo" : "Complete"}
    </button>
  </li>
);

// TodoApp component
const TodoApp = () => {
  // Define the initial state of the component
  const [todoItems, setTodoItems] = React.useState([]);
  // Method to handle adding new items to the todo list
  const addTodo = (text) => {
    // Add the new item to the todo list
    setTodoItems([
      ...todoItems,
      { text, isComplete: false },
    ]);
  };
  // Method to handle deleting items from the todo list
  const deleteTodo = (index) => {
    // Delete the item at the given index
    setTodoItems(
      todoItems.filter((_, i) => i !== index)
    );
  };
  // Method to handle completing/undoing a todo item
  const completeTodo = (index) => {
    // Update the "isComplete" property of the item at the given index
    setTodoItems((state) => {
      const todoItems = [...state];
      todoItems[index].isComplete =
        !todoItems[index].isComplete;
      return todoItems;
    });
  };
  // Return the component
  return (
    <div>
      {/* Form to add new items to the todo list */}
      <form>
        <input
          type="text"
          placeholder="Add a todo item"
        />
        <button type="submit">Add</button>
      </form>
      {/* List of todo items */}
      <ul>
        {todoItems.map((item, index) => (
          <TodoItem
            key={index}
            item={item}
            onDelete={() => deleteTodo(index)}
            onComplete={() => completeTodo(index)}
          />
        ))}
      </ul>
    </div>
  );
};

Второй пилот GitHub

К сожалению , Copilot не может создать проект React. Он может предлагать фрагменты кода только в заданном контексте, поэтому давайте начнем с создания приложения для реагирования самостоятельно .

1. Создайте проект React

npx create-react-app react-copilot

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

Вверху файла добавлен комментарий к задаче, которую необходимо выполнить

Список дел

// Functional TodoItem component which takes onDelete,
// onComplete, and item ({ todo: string; completed: boolean })
// as props

// Functional TodoApp component which handles addition,
// deletion & completion of todos. The TodoItem component
// is used to render each todo item

export default function TodoItem({
 onDelete,
 onComplete,
 item,
}) {
 return (
   <div>
     <input
       type="checkbox"
       checked={item.completed}
       onChange={() => onComplete(item)}
     />
     <span
       style={{
         textDecoration: item.completed
           ? "line-through"
           : "none",
       }}
     >
       {item.todo}
     </span>
     <button onClick={() => onDelete(item)}>
       Delete
     </button>
   </div>
 );
}

5. СгенерированоTodoApp

import React, { useState } from "react";
import TodoItem from "./TodoItem";

export default function TodoApp() {
 const [todos, setTodos] = useState([]);
 const [todo, setTodo] = useState("");

 const addTodo = () => {
   setTodos([...todos, { todo, completed: false }]);
   setTodo("");
 };

 const deleteTodo = (item) => {
   setTodos(todos.filter((todo) => todo !== item));
 };

 const completeTodo = (item) => {
   setTodos(
     todos.map((todo) =>
       todo === item
         ? { ...todo, completed: !todo.completed }
         : todo
     )
   );
 };

 return (
   <div>
     <h1>Todo App</h1>
     <input
       type="text"
       value={todo}
       onChange={(e) => setTodo(e.target.value)}
     />
     <button onClick={addTodo}>Add</button>
     {todos.map((item, index) => (
       <TodoItem
         key={index}
         onDelete={deleteTodo}
         onComplete={completeTodo}
         item={item}
       />
     ))}
   </div>
 );
}

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

В конце концов, Copilot должен быть инструментом, помогающим разработчикам писать код быстрее, в то время как ChatGPT — универсальный chatbot, но он все же может упростить процесс разработки, но GitHub Copilot выигрывает, когда задача сосредоточена на кодировании! Это подводит нас к вопросу...

Кто возьмет твою работу?

(В твоей голове) Разработчики ИИ : * злобный смех *

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

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

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

Примите успокаивающую таблетку и счастливого повышения квалификации !

Подписывайтесь на меня, чтобы каждые две недели узнавать о новых новостях в области технологий !

Нужен фрилансер по фронтенд-разработке с самым высоким рейтингом, чтобы избавиться от проблем с разработкой? Свяжитесь со мной на Upwork

Хотите увидеть, над чем я работаю? Посетите мой личный сайт и GitHub

Хотите подключиться? Свяжитесь со мной в LinkedIn

Я цифровой кочевник и иногда путешествую. Подпишитесь на меня в Instagram , чтобы узнать, чем я занимаюсь.