Wydanie ChatGPT wywołało fale w społeczności programistów, ponieważ mogło wymyślić niesamowite fragmenty kodu.

Jak wypada w porównaniu z GitHub Copilot wydanym w zeszłym roku? Czy AI przyjdzie po twojej pracy? Dowiedzmy Się.

Jeśli nie czytałeś mojego poprzedniego artykułu na temat GitHub Copilot , możesz go przeczytać tutaj .

Testowanie ChatGPT

Przyjrzyjmy się pokrótce tym samym testom , którym poddaliśmy GitHub Copilot .

Test 1: Pobranie ceny akcji

Niestety za pierwszym razem wygenerował błędny kod.

Funkcja nie została zdefiniowana jako async, a funkcje promisesnie zostały poprawnie obsłużone.

Kolejna próba była lepsza

Dziwnie działa bez klucza API (o ile parametry zapytania zawierają apikeyklucz o dowolnej losowej wartości).

Wynik : GitHub Copilot pozostawia ChatGPT w kurzu.

Test 2: Trawers BFS

Tym razem ChatGPT załatwił sprawę za jednym zamachem, niestety trwało to tak długo, że zrzut ekranu nie mieścił się na ekranie, więc oto wygenerowany kod:

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]

Wynik : ChatGPT wygrywa ten.

Test 3: Tablica 100 jedynek

ChatGPT wygenerował wiele sugestii dla tego

Kiedy GitHub Copilot został uruchomiony, wygenerował nieco dziwną sugestię, ale teraz generuje ten sam kod co ChatGPT .

Wynik : Remis (w zależności od porównywanej wersji oprogramowania)

Stworzenie kompletnego projektu TODO

Aby posunąć testy dalej, zdecydowałem się stworzyć kompletny projekt TODO przy użyciu obu programów.

ChatGPT

1. Jak stworzyć projekt TODO ?

Kroki wymienione przez ChatGPT są dość obszerne

2. Jak stworzyć Reactprojekt?

3. Utwórz komponent Todo

To jest ta część, która mi się nie podobała. Wygenerowany kod korzystał ze starszej składni Class Component . Nie radził sobie również z dodawaniem todos

4. Zoptymalizuj komponent Todo, aby obsługiwał dodawanie i usuwanie zadań oraz oznaczał je jako wykonane.

Oto wygenerowany kod (zbyt długi na zrzut ekranu)

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. Ostatnia próba polegająca na stworzeniu Komponentów Funkcjonalnych oraz obsłudze dodawania, usuwania i uzupełniania zadań.

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>
  );
};

Drugi pilot GitHub

Niestety Copilot nie może wygenerować projektu React. Może sugerować tylko fragmenty kodu w danym kontekście, więc zacznijmy od samodzielnego stworzenia aplikacji reagującej

1. Utwórz projekt React

npx create-react-app react-copilot

3. W końcu nadszedł czas, aby Drugi pilot zaczął działać, a my usiądziemy i popijamy mojito.

Na górze pliku dodano komentarz dotyczący zadania do wykonania

Przedmiot do zrobienia

// 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. WygenerowaneTodoApp

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>
 );
}

Mimo że musieliśmy wykonać dodatkową pracę, aby skonfigurować projekt, Copilot był w stanie wygenerować lepszy kod dla aplikacji Todo w porównaniu z ChatGPT .

Pod koniec dnia Copilot ma być narzędziem pomagającym programistom w szybszym pisaniu kodu, podczas gdy ChatGPT jest narzędziem ogólnego przeznaczenia chatbot, ale nadal może usprawnić proces programowania, ale GitHub Copilot wygrywa, gdy zadanie koncentruje się na kodowaniu! To prowadzi nas do pytania...

Kto przejmie twoją pracę?

(W twoim umyśle) Twórcy sztucznej inteligencji : * złowieszczy śmiech *

Zanim wyciągniesz widły, aby spalić GitHub HQ , cofnijmy się o krok i spójrzmy na szerszy obraz. Są to narzędzia usprawniające proces programowania i NIE mają na celu zastąpienia programistów.

Nadal potrzebujemy programistów do napisania kodu. Jasne, te narzędzia mogą pomóc nam szybciej kodować, ale bez udziału człowieka nadal nie są w stanie wymyślić wszystkiego samodzielnie .

Wiadomości o zwolnieniach rozprzestrzeniających się lotem błyskawicy z powodu recesji mogą brzmieć niezwykle przerażająco, ale dopóki będziesz aktualizować i szlifować swoje umiejętności, wszystko będzie dobrze!

Weź pigułkę uspokajającą i szczęśliwego podnoszenia umiejętności !

Śledź mnie, aby otrzymywać co dwa tygodnie nowe ciekawostki z dziedziny technologii !

Potrzebujesz najwyżej ocenianego freelancera zajmującego się programowaniem front-endu, który poradzi sobie z problemami programistycznymi? Skontaktuj się ze mną na Upwork

Chcesz zobaczyć nad czym pracuję? Sprawdź moją osobistą stronę internetową i GitHub

Chcesz się połączyć? Skontaktuj się ze mną na LinkedIn

Jestem cyfrowym koczownikiem i od czasu do czasu podróżuję. Śledź mnie na Instagramie , aby sprawdzić, co u mnie.