Bard vs Claude 2 vs ChatGPT

Publié par Fabrice le 18 juillet 2023 - Temps de lecture estimé : 20 minutes
Catégories : Webmastering - Étiquettes : CSS HTML5 IA icône MySQL PHP SVG

Après une série de tests avec ChatGPT, j'ai voulu comparer les résultats avec ses 2 principaux concurrents : Claude 2 (Anthropic) et Bard de Google. Les prompts sont identiques à ceux utilisés avec ChatGPT.

Les résultats obtenus avec ChatGPT sont disponibles dans les trois précédents articles, je ne les remets pas ici !

HTML et CSS

Page web avec Bard

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Web Agency Page Template</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header>
    <div class="container">
      <a href="index.html"><img src="logo.png" alt="Logo"></a>
      <nav>
        <ul>
          <li><a href="#">Home</a></li>
          <li><a href="#">About Us</a></li>
          <li><a href="#">Services</a></li>
          <li><a href="#">Contact Us</a></li>
        </ul>
      </nav>
    </div>
  </header>
  <main>
    <div class="container">
      <div class="content-left">
        <h2>About Us</h2>
        <p>We are a web agency that specializes in creating beautiful and responsive websites. We have a team of experienced designers and developers who can help you bring your vision to life.</p>
        <p>We offer a wide range of services, including web design, web development, SEO, and marketing. We are committed to providing our clients with the best possible service.</p>
        <p>If you are looking for a web agency that can help you create a website that will wow your customers, then please contact us today.</p>
      </div>
      <div class="content-right">
        <img src="image.jpg" alt="Image">
      </div>
    </div>
  </main>
  <footer>
    <div class="container">
      <p>Copyright &copy; 2023 Web Agency</p>
    </div>
  </footer>
</body>
</html>

body {
  font-family: sans-serif;
  margin: 0;
  padding: 0;
}

header {
  background-color: #000;
  color: #fff;
  padding: 20px;
}

.container {
  max-width: 960px;
  margin: 0 auto;
}

.content-left {
  width: 60%;
}

.content-right {
  width: 40%;
}

img {
  max-width: 100%;
}

footer {
  background-color: #fff;
  padding: 20px;
}

Un code HTML basique auquel il manque la balise <h1>.
La feuille de style est, elle aussi, ultra-minimaliste : pas de reset, le menu n'est pas en ligne, le contenu est bien adaptable, mais sans marge sur les côtés. Sans compter que les liens du menu sont de couleur bleue sur fond noir, pas très accessible !

Page web avec Claude 2

<!DOCTYPE html>
<html>
<head>
<title>Web Agency Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<header>
  <div class="logo">
    <img src="logo.png"> 
  </div>
  
  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Services</a></li>
      <li><a href="#">Portfolio</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
</header>

<div class="content">

  <div class="column-1">
    <h2>Our Company</h2>
    <p>Details about the web agency...</p>
  </div>
  
  <div class="column-2">
    <h2>Our Services</h2>
    <p>Details about services...</p>
  </div>

</div>

<footer>
  <p>&copy; Copyright Web Agency 2023</p>
</footer>

</body>
</html>

/* Responsive layout */
@media (min-width: 768px) {
  .content {
    display: flex;
  }
  
  .column-1 {
    flex: 1;
  }
  
  .column-2 {
    flex: 1;
  }  
}

/* Header */
header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
}

.logo img {
  width: 200px;
}

nav ul {
  list-style: none;
  display: flex;
}

nav a {
  padding: 10px 20px;
  text-decoration: none;
  color: #333;
}

/* Content */
.content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

/* Footer */
footer {
  background: #333;
  color: #fff;
  padding: 20px;
  text-align: center;
}

footer p {
  margin: 0;
}

Le code HTML est tout aussi basique, et les balises <h1> et main sont absentes.
Côté CSS, on est aussi sans reset, le menu est bien en ligne, mais pas adaptable contrairement au contenu

Pour cette première partie, c'est Claude 2 qui gagne, suivi de ChatGPT et de Bard. On est tout de même très, très loin de ce que peut produire un développeur web !

PHP et MySQL

Les formulaires n'ont pas été testés !

Formulaire avec Bard

<form action="save_data.php" method="post">
  <input type="text" name="name" placeholder="Name">
  <input type="email" name="email" placeholder="Email">
  <input type="password" name="password" placeholder="Password">
  <input type="submit" value="Submit">
</form>

<?php
  // Sanitize and validate the input
  $name = htmlspecialchars(trim($_POST['name']));
  $email = filter_var($_POST['email'], FILTER_VALIDATE_EMAIL);
  $password = md5($_POST['password']);

  // Connect to the MySQL database
  $db = new mysqli('localhost', 'root', '', 'my_database');

  // Insert the data into the MySQL table
  $sql = "INSERT INTO users (name, email, password) VALUES ('$name', '$email', '$password')";
  $result = $db->query($sql);

  // Check if the query was successful
  if ($result) {
    echo "The data was successfully inserted into the database.";
  } else {
    echo "There was an error inserting the data into the database.";
  }

  // Close the MySQL connection
  $db->close();
?>

Le code HTML est "minimaliste" : pas d'attribut ID, ni de required, et encore moins de balise label.
Pour ce qui est du code PHP, on est aussi dans le minimalisme et, contrairement à ChatGPT, les variables ne sont pas préparées avec bind_param.

Formulaire avec Claude 2

<form action="form.php" method="post">

  <label for="name">Name:</label>
  <input type="text" id="name" name="name"><br><br>

  <label for="email">Email:</label>
  <input type="email" id="email" name="email"><br><br>

  <label for="password">Password:</label>
  <input type="password" id="password" name="password"><br><br>

  <input type="submit" value="Submit">

</form>

<?php

// Connect to database 
$db = mysqli_connect("localhost", "username", "password", "database");

// Sanitize input data 
$name = mysqli_real_escape_string($db, $_POST['name']);
$email = mysqli_real_escape_string($db, $_POST['email']);
$password = mysqli_real_escape_string($db, $_POST['password']);

// Validate input data
if(empty($name) || empty($email) || empty($password)){
  echo "Please fill all fields";
  exit();
}

if(!filter_var($email, FILTER_VALIDATE_EMAIL)){
  echo "Invalid email format";
  exit();
}

// Insert data into database
$query = "INSERT INTO users(name, email, password) 
          VALUES ('$name', '$email', '$password')";
          
if(mysqli_query($db, $query)){
  echo "Records inserted successfully";
} else {
  echo "ERROR: Could not execute $query. " . mysqli_error($db);
}

?>

Le code HTML est simple et efficace, même si les double <br> font un peu mauvais effet.
Le code PHP fait aussi dans la simplicité. Mais, les variables ne sont pas préparées avec bind_param et le mot de passe n'est pas crypté !

Pour cette seconde partie, c'est ChatGPT qui gagne, suivi de Bard et de Claude 2, même si ce dernier devrait être mis hors-jeu pour ne pas avoir crypté le mot de passe !

Icônes SVG

Icônes SVG avec Bard

<svg width="100" height="100" viewBox="0 0 100 100">
  <path d="M50 0 L50 100 L0 50 L100 50 Z" stroke="black" stroke-width="10" fill="none"/>
</svg>

<svg width="100" height="100" viewBox="0 0 100 100">
  <g fill="none" stroke="black" stroke-width="2">
    <path d="M50 0 L50 100 L0 50 L100 50 Z" />
    <circle cx="50" cy="50" r="30" />
    <path d="M50 50 L70 80" />
    <path d="M50 50 L30 80" />
  </g>
</svg>

En l'état, le code est inutilisable, puisqu'il manque l'attribut xmlns. Mais même en le rajoutant, on obtient absolument n'importe quoi !

2 icônes qui devraient ressembler à une croix et un calendrier, c'est plutôt de l'art abstrait

Icônes SVG avec Claude 2

<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M18 6L6 18" stroke="black" stroke-width="2"/>
<path d="M6 6L18 18" stroke="black" stroke-width="2"/>
</svg>

<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="3" y="4" width="18" height="18" rx="2" stroke="#555555" stroke-width="2"/>  
<path d="M16 2V6" stroke="#555555" stroke-width="2" stroke-linecap="round"/>
<path d="M8 2V6" stroke="#555555" stroke-width="2" stroke-linecap="round"/> 
<path d="M3 10H21" stroke="#555555" stroke-width="2" stroke-linecap="round"/>
<path d="M7 6H7.01" stroke="#555555" stroke-width="2" stroke-linecap="round"/>
<path d="M11 6H11.01" stroke="#555555" stroke-width="2" stroke-linecap="round"/>
<path d="M15 6H15.01" stroke="#555555" stroke-width="2" stroke-linecap="round"/>
<path d="M7 18H7.01" stroke="#555555" stroke-width="2" stroke-linecap="round"/> 
<path d="M11 18H11.01" stroke="#555555" stroke-width="2" stroke-linecap="round"/>
<path d="M15 18H15.01" stroke="#555555" stroke-width="2" stroke-linecap="round"/>
</svg>

Cette fois, c'est mieux, la croix est bonne, et le calendrier ressemble à un calendrier, même s'il est loin d'être parfait !

2 icônes : à gauche, une croix, à droite, un calendrier

Dans tous les cas de figure, ces vectoriels ne sont pas optimisés et devront obligatoirement être retravaillés manuellement. Pour ce qui est des Icônes SVG, c'est ChatGPT qui gagne, suivi de Claude 2. Bard est, lui, hors-jeu !

Et le texte dans tout ça ?

J'ai aussi testé la génération de texte, même si ce n'est pas le but de cet article. J'ai demandé aux 3 IA Générative d'écrire une description pour une fiche produit. C'est Claude 2 qui s'en sort le mieux, le texte est quasiment utilisable tel quel. Suit ChatGPT qui a tendance à faire du contenu dupliqué si on lui demande des variantes. Bard est, lui, franchement assez médiocre.