Använder ChatGPT för webbsidakonstruktion

Återutgiven av Platon

anhängare: 0

Du har redan träffat ChatGPT, den avancerade språkmodellen designad av OpenAI som använder maskininlärning för att förstå naturligt språk och generera mänskliga svar. Den har en stor kunskapsbas och kan med sin sofistikerade "förståelse" av språk fungera som en kraftfull sidekick för alla som söker information. Den kan svara på ett brett spektrum av frågor, ge råd, engagera sig i samtal om olika ämnen och har bevisat sig inom ett stort antal områden.

Men kan ChatGPT skapa webbsidor? Låt oss ta det till oss och ta reda på det.

Observera att detta skrevs med ChatGPT 3.5, innan den senaste versionen släpptes.

Låt oss börja med lite grundläggande HTML. Givet att ChatGPT har redan visat sig vara en begåvad kodare och programmeringsassistent, det här borde inte vara mycket av ett test.

Här är uppmaningen vi använde med ChatGPT för att framgångsrikt skapa en "Hej världen" HTML-sida:

Skapa ett enkelt "Hej världen!" webbsida med HTML

ChatGPT genererade följande grundläggande HTML som, föga överraskande, gjorde vad den var avsedd att göra.

<!DOCTYPE html>
<html> <head> <title>Hello, World!</title> </head> <body> <h1>Hello, World!</h1> </body>
</html>

ChatGPT råder oss att placera detta i en fil med filtillägget ".html" och öppna den med vår webbläsare. Uppdrag slutfört.

Jag ska inte bry mig om en skärmdump; ni har alla sett oformaterad HTML-utdata tidigare.

Låt oss be ChatGPT att få saker att se snyggare ut.

Kan du få den här sidan att se mycket bättre ut med hjälp av CSS?

ChatGPT spottar på följande:

Det här exemplet använder CSS för att ändra bakgrundsfärgen på webbsidan till ljusblå, centrera texten på sidan, ändra färgen på rubriken till marinblå och öka rubrikens teckenstorlek till 4em.

Du kan leka med css och styla din webbsida.

Det är också bra att lägga css i en separat fil och länka den till din index.html-fil.

Som ser ut så här:

Skapa webbsidor med ChatGPT
En enkel webbsida skapad av ChatGPT med HTML och CSS

En förbättring, förvisso, men det här är fortfarande en barnlek. Innan vi går vidare, låt oss dock ta ChatGPTs råd och separera vår HTML och CSS.

Hur skulle jag lägga CSS i en separat fil och länka den till min index.html-fil?

Du kan skapa en separat CSS-fil och länka den till din HTML-fil med hjälp av länkelementet i head avsnitt av din HTML-fil. Här är ett exempel på hur du skulle göra detta:

Skapa en ny fil som heter "styles.css" i samma katalog som din "index.html"-fil.

Lägg till din CSS-kod i filen "styles.css".

Lägg till följande rad i filen "index.html". head avsnitt:
<link rel="stylesheet" type="text/css" href="styles.css">

Smakämnen rel attribut anger förhållandet mellan det aktuella dokumentet och det länkade dokumentet, the type attribut anger typen av det länkade dokumentet och href attribut anger platsen för det länkade dokumentet.

Spara båda filerna och öppna "index.html" i din webbläsare. Stilarna från "styles.css" ska nu tillämpas på webbsidan.

Du kan också inkludera css-filer från onlinelänkar, som från "https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css".

Den kommer också att tillämpas på din webbsida och du behöver inte inkludera den i din lokala katalog.

Skapa en webbsida i Craigslist-stil som gör följande:
– låter mig lägga till en ny annons
– låter mig ta bort befintliga annonser
– låter mig lista alla befintliga annonser
– låter mig redigera en befintlig annons

Att skapa en webbsida i Craigslist-stil skulle innebära att man använder en kombination av HTML, CSS, JavaScript och ett backend-språk som PHP eller Node.js för att hantera webbsidans dynamiska aspekter. Här är ett exempel på hur webbsidans grundläggande struktur kan se ut:

<!DOCTYPE html>
<html> <head> <title>Craigslist-style Webpage</title> <link rel="stylesheet" type="text/css" href="styles.css"> </head> <body> <h1>Craigslist-style Webpage</h1> <form id="add-ad-form"> <label for="title">Title:</label> <input type="text" id="title" name="title"> <br> <label for="description">Description:</label> <textarea id="description" name="description"></textarea> <br> <button type="submit">Add Ad</button> </form> <table id="ads-table"> <thead> <tr> <th>Title</th> <th>Description</th> <th>Actions</th> </tr> </thead> <tbody> <!-- This section will be populated with ads using JavaScript --> </tbody> </table> <script src="script.js"></script> </body>
</html>

Den resulterande front-end-sidan utan bakgrundsfunktioner är inte särskilt snygg. Så jag frågar:

Kan du få webbplatsen att se mer professionell ut med hjälp av en CSS-fil? Jag skulle vilja att färgpaletten skulle vara de nationella färgerna i Italien.

Och ChatGPT tvingar (”lägg till”-knappen blir till och med röd när du håller muspekaren ovanför den).

Skapa webbsidor med ChatGPT
Enkel HTML-form med stil skapad av ChatGPT

Men hur är det med JavaScript? Låt oss se om ChatGPT kan lägga till det.

Kan du lägga till javascript för att lägga till en ny annons i annonsen och visa den?

// Get references to the form and table
const addAdForm = document.querySelector("#add-ad-form");
const adsTable = document.querySelector("#ads-table tbody"); // Handle the form submit event
addAdForm.addEventListener("submit", function(event) { event.preventDefault(); // Get the values from the form inputs const title = document.querySelector("#title").value; const description = document.querySelector("#description").value; // Create a new table row and add the ad data const newRow = document.createElement("tr"); newRow.innerHTML = ` <td>${title}</td> <td>${description}</td> <td> <button>Edit</button> <button>Delete</button> </td> `; // Add the new row to the table adsTable.appendChild(newRow); // Clear the form inputs addAdForm.reset();
});

Och resultaten:

Skapa webbsidor med ChatGPT
Semifunktionell HTML-form med användning av JavaScript skapad av ChatGPT

Inte dåligt. Med några få uppmaningar gick vi från ingenting, till ful HTML, till snyggare HTML, till JavaScript som gör det något.

Låt oss prova något användbart. Nedan är uppmaningen att skapa en enkel (men potentiellt användbar) hemsida för en blogg, med vissa specifika krav.

Låt oss skapa en webbsida. Jag skulle vilja att du skriver HTML och CSS och allt annat som behövs för att skapa en blogghemsida som följer dessa krav:
– sidan kommer att använda en bredd på 1024px
– högst upp på sidan kommer rubriken att stå i stort teckensnitt
– nedanför bör det finnas en rad länkar till 3 användbara sidor på bloggen
– under detta kommer en klickbar bannerannons som överensstämmer med branschstandardens storlek
– under detta finns ett avsnitt av de senaste bloggarna, som ska visa de 6 senaste inläggen i en sida vid sida med 2 rader med 3 brickor
– under de senaste blogginläggen ska det finnas en "om"-sektion som listar information om webbplatsens grundare tillsammans med deras foto
– under detta bör vara en typisk sidfot, inklusive
– använd lorem ipsum för att fylla i text
– sidan ska vara attraktiv med en modern stil
– det borde finnas en CSS-hovringseffekt på de senaste bloggbrickorna

Här är HTML och CSS som genereras av ChatGPT:

<!DOCTYPE html>
<html lang="en">
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>My Blog</title> <style> body { font-family: Arial, sans-serif; max-width: 1024px; margin: 0 auto; padding: 1rem; } h1 { font-size: 2.5rem; text-align: center; margin-bottom: 1rem; } nav { display: flex; justify-content: center; margin-bottom: 1rem; } nav a { text-decoration: none; color: #333; margin: 0 1rem; } .banner { display: block; width: 728px; height: 90px; background-color: #ccc; margin: 0 auto 1rem; text-align: center; line-height: 90px; } .blogs { display: flex; flex-wrap: wrap; justify-content: space-between; margin-bottom: 1rem; } .blog { width: 32%; background-color: #f0f0f0; padding: 1rem; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); transition: transform 0.3s ease; cursor: pointer; } .blog:hover { transform: translateY(-10px); } .about { display: flex; margin-bottom: 1rem; } .about img { width: 150px; height: 150px; object-fit: cover; border-radius: 50%; margin-right: 1rem; } .about p { flex: 1; } footer { background-color: #333; color: #fff; padding: 1rem; text-align: center; font-size: 0.875rem; } </style>
</head> <body> <h1>My Awesome Blog</h1> <nav> <a href="#">Useful Page 1</a> <a href="#">Useful Page 2</a> <a href="#">Useful Page 3</a> </nav> <a href="#" class="banner">Ad - 728x90</a> <div class="blogs"> <div class="blog"> <h2>Lorem Ipsum</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras venenatis mauris id facilisis...</p> </div> <div class="blog"> <h2>Lorem Ipsum</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras venenatis mauris id facilisis...</p> </div> <div class="blog"> <h2>Lorem Ipsum</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras venenatis mauris id facilisis...</p> </div> <div class="blog"> <h2>Lorem Ipsum</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras venenatis mauris id facilisis...</p> </div> <div class="blog"> <h2>Lorem Ipsum</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras venenatis mauris id facilisis...</p> </div> <div class="blog"> <h2>Lorem Ipsum</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras venenatis mauris id facilisis...</p> </div> </div> <div class="about"> <img src="founder.jpg" alt="Founder's Photo"> <div> <h2>About the Founder</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras venenatis mauris id facilisis. Integer sit amet tincidunt turpis, a lacinia ligula.</p> </div> </div> <footer> © 2023 My Awesome Blog. All Rights Reserved. </footer> </body>
</html>

Och här är slutprodukten:

Skapa webbsidor med ChatGPT
Enkel blogghemsida skapad av ChatGPT

Ser ganska bra ut. Jag menar, det kan se bättre ut med lite extra CSS-vägledning i prompten, jag är säker på, men allt som allt är det ingen dålig start. Den har till och med en svävningseffekt på brickorna, synlig i den övre vänstra brickan (den höjs något vid svävning).

En anmärkning är att jag bad om "de 6 senaste posterna i en sida vid sida med 2 rader med 3 brickor" men ChatGPT genererade denna sida i 2 kolonner istället.

Det verkar som om ChatGPT med mycket enkla, okomplicerade uppmaningar visar vissa möjligheter för att kunna generera webbsidor. Jag undrar hur den skulle fungera när den blev ombedd att generera något dynamiskt, och hur den skulle instruera människan att väva samman de olika komponenterna. Ett test till nästa gång.

Matthew Mayo (@mattmayo13) är en dataforskare och chefredaktör för KDnuggets, den framstående onlineresursen för datavetenskap och maskininlärning. Hans intressen ligger i naturlig språkbehandling, algoritmdesign och optimering, oövervakad inlärning, neurala nätverk och automatiserade metoder för maskininlärning. Matthew har en magisterexamen i datavetenskap och en examen i datautvinning. Han kan nås på editor1 på kdnuggets[dot]com.