{Carrer web log}

Blog about web design & development

GPT-3 and CSS Frameworks

Tuesday, April 27, 2021 { 1 Comments }

Recently I gained access to the OpenAI GPT-3 API. I tried different things like content creation, code translation and other experiments. One of the amazing things of GPT-3 is the capacity to learn from simple textual examples.

Programming is one of the most complex and problem solving tasks. But I wasn’t interested in training GPT-3 to program. For me it was more interesting how GPT-3 can speed up some boring repetitive code creation.

GPT-3 works great with well structured code that has clear naming logic. I tried to train it to generate layout HTML with clear class syntax.

I used my Smart CSS Grid Framework because it has simple naming logic. CSS Classes are named from one to twelve because it is a 12 grid system.

The logic is the total of each row should be always 12 or something like this 3 + 3 + 4 + 2 = 12

The idea was, when I write something like this:

3 | 3 | 6

To receive something like this:

<div class="three"> </div> <div class="three"> </div> <div class="six"> </div>

After a couple examples GPT-3 started to work almost perfectly even with more complex layouts.

Here is the text I used to train GPT-3:

Important to keep the “temperature” to 0, we don’t want GPT-3 to be creative.

This is a super simple example of how GPT-3 can be used to generate repetitive HTML code. Basically all CSS Frameworks follow certain rules that can be easily used for GPT-3 training.

About Me <<<

Name: Vladimir Carrer
vladocar [at] gmail.com
Location: Verona, Italy
I'm a web designer, developer, teacher, speaker, generally web addicted ...

My projects <<<

§§Previous Posts <<<

§Archives <<<

Other Profiles <<<

Content is licensed under a Creative Commons Public Domain License