With the introduction of ChatGPT, Google Search has become very much irrelevant. Why go searching through links when you can just ask an AI your question and get it answered immediately?
This is the reality for many coders and developers as well. We don't need to search through Google results anymore. We can just ask ChatGPT.
Google's answer to this is Bard, an alternate to ChatGPT. Considering that Google has the largest reserve of online data in the world, their AI chat bot definitely has big expectations.
Today, we will uncover the coding capabilities of Bard. And whether it can really compare to ChatGPT. We will be judging the two AI models based on 3 categories, Web Development, Competitive Coding, and Debugging. Keep in mind that, Bard is still in experimental mode as of the writing of this article. So take everything we cover here with a grain of salt. All the code covered here will be in this link.
Website Development The first and foremost category we are going to judge these AI models in is website creation. I asked both models to build me a simple info website.
This is what I got from Bard:
When I asked the same thing from ChatGPT this was the result:
And here is the code for both of them:
Bard
<!DOCTYPE html>
<html>
<head>
<title>My Simple Info Website</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
font-family: Arial, sans-serif;
background-color: #ffffff;
}
h1 {
text-align: center;
font-size: 36px;
font-weight: bold;
}
p {
text-align: justify;
font-size: 16px;
}
.container {
width: 960px;
margin: 0 auto;
}
.header {
background-color: #333;
height: 100px;
padding: 20px;
}
.content {
background-color: #fff;
padding: 20px;
}
.footer {
background-color: #333;
height: 100px;
padding: 20px;
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<h1>My Simple Info Website</h1>
</div>
<div class="content">
<p>This is a simple info website that I created using HTML.</p>
<p>I hope you find it helpful!</p>
</div>
<div class="footer">
<p>Copyright © 2023 My Name</p>
</div>
</div>
</body>
</html>ChatGPT
<html>
<head>
<title>Modern Info Website</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<div class="container">
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</div>
</header>
<main>
<section class="hero">
<div class="container">
<h1>Welcome to the Modern Info Website</h1>
<p>We provide the latest information on a variety of topics.</p>
</div>
</section>
<section class="about">
<div class="container">
<h2>About Us</h2>
<p>We are a team of experts dedicated to providing the best information on a wide range of topics.</p>
</div>
</section>
<section class="services">
<div class="container">
<h2>Our Services</h2>
<div class="service-card">
<h3>Research and analysis</h3>
<p>We conduct in-depth research and analysis to provide you with accurate and reliable information.</p>
</div>
<div class="service-card">
<h3>Writing and editing</h3>
<p>We offer professional writing and editing services to ensure that your content is clear and effective.</p>
</div>
<div class="service-card">
<h3>Consulting and training</h3>
<p>We provide consulting and training services to help you improve your skills and knowledge in a variety of areas.</p>
</div>
</div>
</section>
<section class="contact">
<div class="container">
<h2>Contact Us</h2>
<form>
<label for="name">Name:</label>
<input type="text" id="name" name="name"><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email"><br>
<label for="message">Message:</label>
<textarea id="message" name="message"></textarea><br>
<input type="submit" value="Send">
</form>
</div>
</section>
</main>
<footer>
<div class="container">
<p>© 2023 Modern Info Website</p>
</div>
</footer>
</body>
</html>
<style>
* {
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
header {
background-color: #333;
color: #fff;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
justify-content: flex-end;
}
nav ul li {
margin-left: 20px
}
</style>
For website creation, I personally prefer ChatGPT over Bard. ChatGPT simply adds more features and details to its website. I like how both websites used CSS and centered their content. Bard probably did a better job at writing the CSS because it added custom colors and design. Overall, ChatGPT takes the win here in website creation.
I then tested the two AI models on building other web elements like navbars, responsive buttons, etc. In all of my tests, I found that ChatGPT performed better than Bard. If you want to look at any of the code in this article be sure the check out this GitHub link.
Competitive Coding
For the next category of coding, I asked the two AIs coding problems from Codeforces. Unfortunately, Bard wasn't even able to solve the easiest coding problems. Meanwhile, ChatGPT was successfully able to solve it. On medium problems, ChatGPT sometimes was able to successfully solve it. Other times, it exceeded the time limit. The hard problems are really where ChatGPT starts to fall apart. Though it made some good attempts, it wasn't able to solve them.
Either way, ChatGPT is far superior to Bard at solving coding problems. So for this round, the points go to ChatGPT.
Debugging
The next round will be, about which AI model is better for debugging. For this round, I gave both AIs some buggy Python code and asked them to fix it.
Here is the buggy code:
arr=[1,2,3,4,,5,6,7]
for i in range(8):
print arr.at(i)ChatGPT was successfully able to debug this. However, Bard simply said that it is not trained to do that. So for yet another round, Bard takes the win.
Conclusion
I could have kept testing these two AI models on their coding capabilities. But we all know who would win, ChatGPT. Of the 3 categories we tested, ChatGPT crushed Bard in all of them. One thing I did notice though about Bard was that it outputted information a lot faster than ChatGPT. But what is the point in outputting information faster if it's not accurate?
Keep in mind that Bard is still only in experimental mode as of now. I imagine, that when the full thing releases, Bard will have much more capabilities. Once the full version of Bard is released, we will run these tests again. Make sure to follow this blog for when that comes. With that, let's wrap up this article.
Comments