Battaglia dei Giganti: GitHub Copilot vs ChatGPT ⚔️⚔️

Dec 11 2022

Il rilascio di ChatGPT ha suscitato increspature nella comunità dei programmatori in quanto potrebbe produrre incredibili frammenti di codice. Come si confronta con GitHub Copilot rilasciato l'anno scorso? L'intelligenza artificiale sta cercando il tuo lavoro? Scopriamolo.

Il rilascio di ChatGPT ha suscitato increspature nella comunità dei programmatori in quanto potrebbe produrre incredibili frammenti di codice.

Come si confronta con GitHub Copilot rilasciato l'anno scorso? L' intelligenza artificiale sta cercando il tuo lavoro? Scopriamolo.

Se non hai letto il mio precedente articolo su GitHub Copilot , puoi verificarlo qui .

Testare ChatGPT

Esaminiamo brevemente gli stessi test a cui abbiamo sottoposto GitHub Copilot .

Test 1: recupero del prezzo delle azioni

Purtroppo, la prima volta ha generato un codice errato.

La funzione non è stata definita come asynce promisesnon sono state gestite correttamente.

Il tentativo successivo è stato migliore

Stranamente funziona senza la chiave API (purché i parametri della query contengano la apikeychiave con qualsiasi valore casuale).

Risultato : GitHub Copilot lascia ChatGPT nella polvere.

Test 2: attraversamento BFS

Questa volta, ChatGPT l'ha inchiodato in una volta sola, purtroppo è passato così tanto tempo che uno screenshot non si adattava allo schermo, quindi ecco il codice generato:

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]

Risultato : ChatGPT vince questo.

Test 3: Array di 100 unità

ChatGPT ha generato più suggerimenti per questo

Quando è stato lanciato GitHub Copilot , ha generato un suggerimento un po' traballante, ma ora genera lo stesso codice di ChatGPT .

Risultato : pareggio (a seconda della versione del software confrontata)

Creare un progetto TODO completo

Per spingere ulteriormente i test, ho deciso di creare un progetto TODO completo utilizzando entrambi i software.

ChatGPT

1. Come creare un progetto TODO ?

I passaggi menzionati da ChatGPT sono abbastanza completi

2. Come creare un Reactprogetto?

3. Creare un componente Todo

Questa è la parte che non mi è piaciuta. Il codice generato utilizzava la sintassi del componente di classe legacy. Non stava nemmeno gestendo l'aggiunta di todos

4. Ottimizza il componente Todo per gestire l'aggiunta e l'eliminazione di cose da fare e contrassegnarle come completate.

Ecco il codice che ha generato (troppo lungo per uno screenshot)

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. Ultimo tentativo menzionando la creazione di componenti funzionali e la gestione dell'aggiunta, eliminazione e completamento di tutte le cose.

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

Copilota GitHub

Purtroppo Copilot non può generare un progetto React. Può solo suggerire frammenti di codice in un determinato contesto, quindi iniziamo creando noi stessi un'app di reazione

1. Crea un progetto React

npx create-react-app react-copilot

3. Finalmente è tempo che Copilot faccia la sua magia mentre ci sediamo e sorseggiamo un mojito.

Un commento è stato aggiunto all'inizio del file, sull'attività da svolgere

Oggetto Todo

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

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

Anche se ci è stato richiesto di svolgere un lavoro aggiuntivo per impostare il progetto, Copilot è stato in grado di generare un codice migliore per l' app Todo rispetto a ChatGPT .

Alla fine della giornata, Copilot dovrebbe essere uno strumento per aiutare gli sviluppatori a scrivere codice più velocemente, mentre ChatGPT è uno scopo generale chatbot, ma può ancora semplificare il processo di sviluppo, ma GitHub Copilot vince a mani basse quando l'attività è focalizzata sulla codifica! Questo ci porta alla domanda...

Chi prenderà il tuo lavoro?

(Nella tua mente) Sviluppatori dell'IA : * risata malvagia *

Prima di tirare fuori i forconi per bruciare GitHub HQ , facciamo un passo indietro e guardiamo il quadro più ampio. Questi sono strumenti per semplificare il processo di sviluppo e NON intendono sostituire gli sviluppatori.

Abbiamo ancora bisogno di sviluppatori per scrivere il codice. Certo, questi strumenti possono aiutarci a programmare più velocemente, ma senza l'input umano non possono ancora elaborare tutto da soli .

La notizia dei licenziamenti che si stanno diffondendo a macchia d'olio a causa della recessione potrebbe sembrare estremamente spaventosa, ma finché continui ad aggiornare e perfezionare le tue abilità, starai bene!