Website entirely written by OpenAI

initial idea

Yes, you can hear about this neural network from everywhere now, how it writes lyrics, passes exams, writes pieces of code, but I thought, can it completely complete the project under my guidance?

Initially, I was going to just pitch her an idea and watch the creation of a full-fledged product, but everything turned out to be a little more complicated and I had to guide her much more often than I would like, but while doing this, I discovered several useful features that I might use in my work.

Project theme

I wanted her to come up with the topic herself, but her ideas were too vague and I didn’t understand how to present them to her, and my attempts were unsuccessful, so I decided to get by with the usual portfolio of a fictional person, but also a person that she could successfully create by she could not remember my request.

Beginning of work

I decided to ask her about what the portfolio should contain

First I decided to generate a static HTML file with all the information. My English is still not good, so I’ll use a translator.

Initially, I tried to create a personality, but when she asked to write code, she just started filling in random data, forgetting about the personality that she herself created, so I just had to give her some input data about herself. But I tried to give as little data as possible and more tasks that require context, where you need to mention me and my activities.

Here we encounter the first problem when trying to write a large and long code, sometimes it freezes for no reason and stops writing anything. So I tried asking her to continue the code, she did, but…

... there is a nuance. — … there is a nuance.

A small observation, for some reason if you write in Russian “continue the code”, then the chance that she will continue to write exactly the code – higher, but in English it breaks down and writes the code in plain text. (or I was just so lucky, the result is always unpredictable)

Rewriting the project in React

I decided it wouldn’t be interesting to just ask her to generate the HTML (which she did very well), so I decided to rewrite everything in a framework. At first I chose Vue.js, but it was difficult to cope with it, made a lot of mistakes, chose very strange approaches that I could not even google, so I switched to react. And immediately asked her to rewrite all the code on her own. (previously I asked her to tell me how to create a project with React and TypeScript, so she is also responsible for creating the project, I just followed the instructions, split it into files, etc.)

Just ask her to rewrite something and she will do it right away

With your permission, I will not insert all the screenshots into the article, rewriting the entire structure in React took 5-6 long screenshots, but I will show interesting points below.

She took out all the data in the state, it turned out very well

Initially, all the code was placed in one file - App.tsx — Initially, all the code was placed in one file – App.tsx

For some reason, she did not break the code into components and made everything into one file, which, as it were, deprives the transfer from HTML to React of any sense, but I got the first result!

The beginning of a long and painful process

Before me (or before her) was the goal of splitting the files into components, and in principle, she understood my request, but constantly hung in the process, forgot some details, overwritten the data that she had previously written herself. For example, here, she deleted data from state and the code started to give an error:

And for some reason she left comments instead of data

I decided to completely copy the error and give it to her, without explaining what to do with it, and, surprisingly, she understood what the problem was and began to correct it.

She fixed the object, but forgot about the data

Now you need to ask again to fill in empty data

In general, somehow, trying very hard and constantly freezing, she broke the code into several files, which she herself gave names:

App.tsx
AboutMe.tsx
Projects.tsx
Resume.tsx
Reviews.tsx
contact.tsx

For some reason, she refused to transfer Header and Footer to separate files, but oh well. Now I was wondering if it was possible to get her to write the styles herself. At first, I gave only a hint:

For some reason, she forgot that there were other files and had to write similar code for almost every block and create style files for them. In some, she wrote classes, but did not write CSS, because of which she gave an error about classes not found. For now, I’ve ignored that and moved on. I wanted her to write specific CSS, not just classes.

Success, from my wishes she came up with colors

She put global styles in App.module.css which was not included, asking her to include the file (add styles connection to the App), she, suddenly, prescribed classes for the header, navbar and footer. Well, I had almost no ideas how to make it write CSS, I wanted it to style the page, and not create empty classes, and suddenly it responded very well to the following request:

In .nav_link she decided to write SCSS, why not, right?

In principle, she prescribed padding for almost all blocks, colored the text somewhere and did nothing else, and I decided to stop torturing her. Let’s see what our intellect was able to write in almost two hours:

Results

Of course, it is impossible to generate a real project using a neural network (for now), but you can try. I really like some of her solutions, I like how she can generate static data and work with them, I already generated the same JSONs for my personal purposes. I did simple autotests through it, slightly corrected and ready for production. And the fact that she remembers what she did a couple of requests back is amazing.

But while this is far from completely replacing programmers, at most it can make life easier for a developer with solving routine tasks (and this is very cool!)

Link to repository and demo project