Here, I do a quick comparison between arguably the two most used Generative AI tools, OpenAI ChatGPT and Google Gemini, as a Frontend Developer with 2 yrs+ experience.

CriteriaDSA (Easy level)UI component creationExtract data from image and convert to HTML

Let’s start then.

1. DSA Problem

Sometimes, frontend developers get asked DSA questions too during interviews, so let’s give an easy problem of determining if a number is a palindrome or not.

A palindrome number is a number that reads the same forward and backward. In other words, if you reverse the digits of the number, it remains unchanged.

Example: 121 → reversed is 121 (same) hence, a palindrome

Prompt: “Write a JavaScript program to determine if a number is a palindrome or not. Write it using a while loop.”

ChatGPT

Chat link

Right off the bat, GPT 4 Turbo provides the response in an additional canvas view, which is kind of cool.

It outputs the program with quite a bunch of helpful comments and it lists down 4 test cases for the isPalindrome function invocation.

Gemini

Chat link

On the other hand, 2.0 Flash of Gemini gives me the program, which is more or less same as the one given by GPT, but it doesn’t have the comments listed there except for one.

But what it does offer is that it gives an explanation of the whole program below it in plain text. Also, it lists down 7 test cases, 3 more than ChatGPT, especially with “0” as an argument.

DifferencesChatGPTGeminiGood and ample amount of commentsVery few commentsNo code explanationVast code explanation2. Build a UI Component

Frontend developers cannot live without the good old UI components. 

It is often helpful to just ask these GenAI tools to generate UI components so that we can have a good boilerplate code to start with. And then we can build on top of that.

Here in my Next.js application, I want to display a lot of cars on the page and the data is coming from an API.

Prompt:

Give me a responsive grid layout with Next.js, Tailwind and shadcn/ui that displays cars.

Each car item should display the car’s:

ImageBrandModelPrice

ChatGPT

Chat link

Here’s the full code ChatGPT provided me with:

"use client";

import Image from "next/image";
import { Card, CardContent } from "@/components/ui/card";

const cars = [
{
id: 1,
image: "/cars/tesla.jpg",
brand: "Tesla",
model: "Model S",
price: "$80,000",
},
{
id: 2,
image: "/cars/bmw.jpg",
brand: "BMW",
model: "M4",
price: "$75,000",
},
{
id: 3,
image: "/cars/audi.jpg",
brand: "Audi",
model: "RS5",
price: "$85,000",
},
{
id: 4,
image: "/cars/mercedes.jpg",
brand: "Mercedes",
model: "AMG GT",
price: "$120,000",
},
];

export default function CarGrid() {
return (

Available Cars

{cars.map((car) => (

src={car.image}
alt={`${car.brand} ${car.model}`}
width={400}
height={250}
className="w-full h-48 object-cover"
/>

{car.brand}

{car.model}

{car.price}

))}


);
}

It’s a good thing that it even gave the data of the cars, so that we can have a nice template for our reference. Later we can just alter it a bit to include data coming from any other source. 

But I only need the grid layout, so I will just copy this code into my project.

{cars.map((car) => (

src={car.image}
alt={`${car.brand} ${car.model}`}
width={400}
height={250}
className="w-full h-48 object-cover"
/>

{car.brand}

{car.model}

{car.price}

))}

And if I just update the values of the below attributes according to my API response:

key={car._id}src={car.img.url}{car.price.ex_showroom}I also changed the Next.js component to the native HTML [image error] tag.

Here’s the output that I get:

Quite cool, right?

Although the color selection for the price is debatable but it is a kind of a simple but good looking UI.

It is responsive as well:

Final code:

{cars.map((car) => (

[image error] src={car.img.url}
alt={`${car.brand} ${car.model}`}
width={400}
height={250}
className="w-full h-48 object-cover"
/>

{car.brand}

{car.model}

{car.price.ex_showroom}

))}
Gemini

Chat link

Here’s the code Gemini provided me with:

// components/CarGrid.js
import Image from 'next/image';
import { Card, CardHeader, CardBody } from "@/components/ui/card"

const cars = [
{
image: '/images/car1.jpg', // Replace with your image paths
brand: 'Toyota',
model: 'Camry',
price: '$25,000',
},
{
image: '/images/car2.jpg',
brand: 'Honda',
model: 'Civic',
price: '$22,000',
},
{
image: '/images/car3.jpg',
brand: 'Tesla',
model: 'Model 3',
price: '$40,000',
},
// ... more car data
{
image: '/images/car4.jpg', // Replace with your image paths
brand: 'BMW',
model: 'M5',
price: '$80,000',
},
{
image: '/images/car5.jpg',
brand: 'Mercedes-Benz',
model: 'C-Class',
price: '$50,000',
},
{
image: '/images/car6.jpg',
brand: 'Audi',
model: 'A4',
price: '$45,000',
},
];

const CarGrid = () => {
return (

{cars.map((car, index) => (
{/* Added rounded corners and shadow */}

src={car.image}
alt={`${car.brand} ${car.model}`}
width={500} // Adjust width as needed
height={300} // Adjust height as needed
className="object-cover rounded-t-lg" // Rounded top corners for image
/>


{car.brand} {car.model}

{car.price}

))}

);
};

export default CarGrid;

Here too, I need the grid layout, so I will just take this code:

{cars.map((car, index) => (
{/* Added rounded corners and shadow */}

src={car.image}
alt={`${car.brand} ${car.model}`}
width={500} // Adjust width as needed
height={300} // Adjust height as needed
className="object-cover rounded-t-lg" // Rounded top corners for image
/>


{car.brand} {car.model}

{car.price}

))}

I will update the values of the below attributes according to my API response:

src={car.img.url}{car.price.ex_showroom}Changed the Next.js component to the native HTML [image error] tag.

Output

Responsiveness

Final code

{cars.map((car, index) => (

{" "}
{/* Added rounded corners and shadow */}

[image error] src={car.img.url}
alt={`${car.brand} ${car.model}`}
width={500} // Adjust width as needed
height={300} // Adjust height as needed
className="object-cover rounded-t-lg" // Rounded top corners for image
/>



{car.brand} {car.model}

{car.price.ex_showroom}

))}
Issues Faced

Faced an issue with Gemini’s output.

It had a component inside , which is not defined in shadcn/ui, so it gave me an error.

It should have been instead.

Verdict

Both the outputs were good looking UIs and were responsive as well. They provided the code by including the Next.js optimized component, which is quite good.

Notice that there’s a major difference between both the responses. 

ChatGPT didn’t provide any padding on the image, so the images on Creta and Verna are touching the sides of the their cards, which doesn’t look good.

Whereas Gemini’s response did include the padding but it didn’t have the perfect card alignment. The image size isn’t proper, so the car’s name and price do not align to the bottom of the card.

Gemini’s response also had an incorrect component inside the of shadcn/ui, but the UI still looks good because

Color selection for car price was good and easy on the eyes instead of the bright green color.

{car.price.ex_showroom}

What do you think?

3. Data Extraction from an Image

Once, I was given a task to extract the data from an image and convert it into an HTML table. So I turned to ChatGPT and Gemini for this.

Let’s pick an image that we want to convert to an HTML table.

The above asset is an image instead of an HTML table, so it is not in a text format and hence, we cannot copy any text inside a cell in this table.

We will let the tools handle this.

Prompt: “Extract data from this image and convert it into an HTML table”

ChatGPT

Couldn’t create a link for this as ChatGPT doesn’t support sharing links that contain images in the prompts 

Here’s the code it provided:

Region
Manager
Coordinator
Local Rep
Secretary


North
Adam
Beth
Callum
Diane


South West

Annie
Dodie



Dylan


Dahlia


South West

Annie
Dodie



South East

Annie
Dahlia



East
Ash
Bill
Cecilia
Dave


West
Art
Bruce
Colin
Danny

Output

Cool, the table is formed but notice, how ChatGPT has added background colors too!

But the data isn’t accurate.

Gemini

Chat link

Code by Gemini

Region
Manager
Coordinator
Local Rep
Secretary




North
Adam
Beth
Callum
Diane


South West

Annie
Dodie




Dodie


South East Upper


Dylan



South East Lower


Dahlia



South East

Annie

Dahlia



Dahlia


East
Ash
Bill
Cecilia
Dave


West
Art
Bruce
Colin
Danny

Output

Hmmm no borders?

Here though, no background color 

Also, inaccurate data.

DifferenceThe instant difference between the two outputs is that ChatGPT added borders in the table whereas Gemini didn’t.Additionally, ChatGPT tried to retain the styles from the original image as much as possible, that’s why we see the red and green colors for some of the rows in the HTML table.Functionality wise, both the outputs are inaccurate however, Gemini might be more accurate than ChatGPT here as if we do some manual edits, Gemini’s output should take less time to make it 100% accurate.Conclusion

Okay, so there can be more criteria on the basis of which, both these tools can be compared such as debugging, etc. But to me, both are fine as combined with a bit of my own effort plus their output, the job gets done.

But…

Which one is better according to you? Any inputs?

Read more: Use This AI Tool to Generate Alphabets Out of Anything

The post ChatGPT vs Gemini — From a Frontend Developer’s POV appeared first on Suman Sourabh | Tech Blog.