Z podstawowymi zadaniami ChatGPT radzi sobie nadzwyczaj dobrze. Zobaczmy czy poradzi sobie, ze stworzeniem prostej strony internetowej.
Od czego zacząć? Pomysł jest najważniejszy.
Zanim przejdziecie do "tworzenia" warto spojrzeć na kilka poniższych punktów, aby przygotować jak najlepszy kontekst dla generatywnej sztucznej inteligencji:
o czym ma być ta strona internetowa?
czy ma zawierać zdjęcia?
czy zamieścić politykę prywatności, dane kontaktowe, itd.?
jak ma wyglądać szata graficzna?
i wszystkie inne punkty, które należy rozważyć przy tworzeniu strony internetowej.
I pamiętajcie, im więcej podamy szczegółów tym lepsze będą rezultaty.
Pierwsza interacja
Spróbujemy z grubej rury, zobaczymy jak chatbot poradzi sobie z tym zadaniem.
Prompt:
Utwórz szkielet strony internetowej będący blogiem motoryzacyjnym. Zamieść dwa przykładowe artykuły na temat Audi RS6 C7 oraz Porsche Macan GTS. Nie przejmuj się bazą danych, zajme się tym później. Potrzebuje szkieletu bloga i przyjemnego w odbiorze designu całej witryny.
Odpowiedź:
Poniżej kod HTML, gdybyście sami chcieli podejrzeć wygenerowany kod w przeglądarce:
<!DOCTYPE html>
<html>
<head>
<title>Blog motoryzacyjny</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
margin: 0;
padding: 20px;
}
header {
text-align: center;
margin-bottom: 20px;
}
h1 {
color: #333333;
}
h2 {
color: #333333;
}
.article {
background-color: #ffffff;
padding: 20px;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
margin-bottom: 20px;
}
</style>
</head>
<body>
<header>
<h1>Blog motoryzacyjny</h1>
</header>
<div class="article">
<h2>Audi RS6 C7</h2>
<p>
Audi RS6 C7 to potężny samochód sportowy z napędem na wszystkie koła. Wyposażony w silnik V8 o pojemności 4.0
litra, generuje imponujące 560 koni mechanicznych. Zdolność przyspieszenia od 0 do 100 km/h w mniej niż 4
sekundy sprawia, że jest to jedno z najbardziej imponujących aut na drogach.
</p>
<p>
Sprawny układ kierowniczy i zaawansowane systemy kontroli trakcji sprawiają, że RS6 C7 oferuje zarówno
niesamowite osiągi, jak i znakomitą kontrolę i stabilność podczas jazdy. Znajdziesz tu również przestronne
wnętrze z luksusowymi wykończeniami, które zapewniają wygodną podróż dla kierowcy i pasażerów.
</p>
</div>
<div class="article">
<h2>Porsche Macan GTS</h2>
<p>
Porsche Macan GTS to elegancki i wszechstronny SUV, który oferuje zarówno doskonałe osiągi, jak i komfortową
podróż. Zasilany silnikiem V6 o pojemności 3.0 litra, Macan GTS generuje 380 koni mechanicznych, co zapewnia
dynamiczną jazdę i przyjemne doznania za kierownicą.
</p>
<p>
Zawieszenie zaprojektowane specjalnie dla modelu GTS gwarantuje doskonałą równowagę pomiędzy sportowymi
osiągami a komfortem jazdy. Wnętrze samochodu oferuje wysoką jakość wykonania oraz nowoczesne technologie,
co sprawia, że podróżowanie Macanem GTS to czysta przyjemność zarówno dla kierowcy, jak i pasażerów.
</p>
</div>
</body>
</html>
A jak prezentuje się szkielet bloga w przeglądarce:
Na ten moment bardzo prosto, ale to dopiero pierwsza iteracja. Spróbujmy czegoś więcej.
Iteracja 2
Prompt:
Dodaj proszę panel nawigacyjnym na górze witryny, na niej umieść nazwy marek samochodów Audi i Porsche a przygotowane wpisy wyświetlaj dopiero po wybraniu odpowiedniej marki. Na stronie głównej przygotuj widok (grid) na 20 marek samochodów (ich znaczki), żebym mógł zacząć pisać artykuły na temat tych samochodów.
W odpowiedzi przeklejam od razu kod HTML:
<!DOCTYPE html>
<html>
<head>
<title>Blog motoryzacyjny</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
margin: 0;
padding: 20px;
}
header {
text-align: center;
margin-bottom: 20px;
}
h1 {
color: #333333;
}
h2 {
color: #333333;
}
nav {
background-color: #333;
color: white;
padding: 10px;
text-align: center;
}
nav a {
color: white;
text-decoration: none;
margin: 0 10px;
}
.article {
background-color: #ffffff;
padding: 20px;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
margin-bottom: 20px;
}
.car-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
margin-top: 20px;
}
.car-logo {
width: 100px;
height: 100px;
object-fit: cover;
border-radius: 50%;
}
</style>
</head>
<body>
<header>
<h1>Blog motoryzacyjny</h1>
</header>
<nav>
<a href="#audi">Audi</a>
<a href="#porsche">Porsche</a>
</nav>
<div id="audi" class="article" style="display: none;">
<h2>Audi RS6 C7</h2>
<p>
Audi RS6 C7 to potężny samochód sportowy z napędem na wszystkie koła. Wyposażony w silnik V8 o pojemności 4.0
litra, generuje imponujące 560 koni mechanicznych. Zdolność przyspieszenia od 0 do 100 km/h w mniej niż 4
sekundy sprawia, że jest to jedno z najbardziej imponujących aut na drogach.
</p>
<p>
Sprawny układ kierowniczy i zaawansowane systemy kontroli trakcji sprawiają, że RS6 C7 oferuje zarówno
niesamowite osiągi, jak i znakomitą kontrolę i stabilność podczas jazdy. Znajdziesz tu również przestronne
wnętrze z luksusowymi wykończeniami, które zapewniają wygodną podróż dla kierowcy i pasażerów.
</p>
</div>
<div id="porsche" class="article" style="display: none;">
<h2>Porsche Macan GTS</h2>
<p>
Porsche Macan GTS to elegancki i wszechstronny SUV, który oferuje zarówno doskonałe osiągi, jak i komfortową
podróż. Zasilany silnikiem V6 o pojemności 3.0 litra, Macan GTS generuje 380 koni mechanicznych, co zapewnia
dynamiczną jazdę i przyjemne doznania za kierownicą.
</p>
<p>
Zawieszenie zaprojektowane specjalnie dla modelu GTS gwarantuje doskonałą równowagę pomiędzy sportowymi
osiągami a komfortem jazdy. Wnętrze samochodu oferuje wysoką jakość wykonania oraz nowoczesne technologie,
co sprawia, że podróżowanie Macanem GTS to czysta przyjemność zarówno dla kierowcy, jak i pasażerów.
</p>
</div>
<div class="car-grid">
<img class="car-logo" src="link_do_obrazka_1" alt="Marka samochodu 1">
<img class="car-logo" src="link_do_obrazka_2" alt="Marka samochodu 2">
<!-- Dodaj więcej znaczków marek samochodów tutaj -->
<!-- <img class="car-logo" src="link_do_obrazka_3" alt="Marka samochodu 3"> -->
<!-- <img class="car-logo" src="link_do_obrazka_4" alt="Marka samochodu 4"> -->
<!-- ... -->
<!-- <img class="car-logo" src="link_do_obrazka_20" alt="Marka samochodu 20"> -->
</div>
<script>
document.querySelector('nav a').addEventListener('click', function (e) {
e.preventDefault();
var targetId = e.target.getAttribute('href').substring(1);
var articles = document.getElementsByClassName('article');
for (var i = 0; i < articles.length; i++) {
articles[i].style.display = 'none';
}
document.getElementById(targetId).style.display = 'block';
});
</script>
</body>
</html>
Sprawdźmy jedynie jak całość prezentuje się w przeglądarce:
Nie wygląda na zbyt zaawansowany projekt. Ale może to i dobrze (dla nas). W ostatniej iteracji sprawdźmy czy możemy poprawić design tego szablonu bo nie prezentuje się zbyt okazale.
Iteracja 3
Prompt:
Popraw jeszcze design, żeby wyglądał jak prawdziwy blog. Jeżeli potrafisz dodaj loga samochodów tak, żeby od wejścia strona prezentowała się profesjonalnie.
W odpowiedzi wklejam od razu kod HTML:
<!DOCTYPE html>
<html>
<head>
<title>Blog motoryzacyjny</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<style>
body {
font-family: Arial, sans-serif;
background-color: #f8f9fa;
}
header {
background-color: #343a40;
padding: 20px 0;
text-align: center;
color: #ffffff;
}
nav a {
color: #ffffff;
text-decoration: none;
margin: 0 20px;
}
.article {
background-color: #ffffff;
padding: 30px;
border-radius: 5px;
margin-bottom: 30px;
}
.car-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 20px;
margin-top: 30px;
justify-items: center;
}
.car-logo {
width: 100px;
height: 100px;
object-fit: cover;
border-radius: 50%;
}
</style>
</head>
<body>
<header>
<h1>Blog motoryzacyjny</h1>
</header>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav mx-auto">
<li class="nav-item">
<a class="nav-link" href="#audi">Audi</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#porsche">Porsche</a>
</li>
</ul>
</div>
</nav>
<div id="audi" class="article" style="display: none;">
<h2>Audi RS6 C7</h2>
<p>
Audi RS6 C7 to potężny samochód sportowy z napędem na wszystkie koła. Wyposażony w silnik V8 o pojemności 4.0
litra, generuje imponujące 560 koni mechanicznych. Zdolność przyspieszenia od 0 do 100 km/h w mniej niż 4
sekundy sprawia, że jest to jedno z najbardziej imponujących aut na drogach.
</p>
<p>
Sprawny układ kierowniczy i zaawansowane systemy kontroli trakcji sprawiają, że RS6 C7 oferuje zarówno
niesamowite osiągi, jak i znakomitą kontrolę i stabilność podczas jazdy. Znajdziesz tu również przestronne
wnętrze z luksusowymi wykończeniami, które zapewniają wygodną podróż dla kierowcy i pasażerów.
</p>
</div>
<div id="porsche" class="article" style="display: none;">
<h2>Porsche Macan GTS</h2>
<p>
Porsche Macan GTS to elegancki i wszechstronny SUV, który oferuje zarówno doskonałe osiągi, jak i komfortową
podróż. Zasilany silnikiem V6 o pojemności 3.0 litra, Macan GTS generuje 380 koni mechanicznych, co zapewnia
dynamiczną jazdę i przyjemne doznania za kierownicą.
</p>
<p>
Zawieszenie zaprojektowane specjalnie dla modelu GTS gwarantuje doskonałą równowagę pomiędzy sportowymi
osiągami a komfortem jazdy. Wnętrze samochodu oferuje wysoką jakość wykonania oraz nowoczesne technologie,
co sprawia, że podróżowanie Macanem GTS to czysta przyjemność zarówno dla kierowcy, jak i pasażerów.
</p>
</div>
<div class="car-grid">
<img class="car-logo" src="link_do_obrazka_1" alt="Marka samochodu 1">
<img class="car-logo" src="link_do_obrazka_2" alt="Marka samochodu 2">
<!-- Dodaj więcej znaczków marek samochodów tutaj -->
<!-- <img class="car-logo" src="link_do_obrazka_3" alt="Marka samochodu 3"> -->
<!-- <img class="car-logo" src="link_do_obrazka_4" alt="Marka samochodu 4"> -->
<!-- ... -->
<!-- <img class="car-logo" src="link_do_obrazka_20" alt="Marka samochodu 20"> -->
</div>
<script>
document.querySelectorAll('nav a').forEach(link => {
link.addEventListener('click', function (e) {
e.preventDefault();
var targetId = e.target.getAttribute('href').substring(1);
var articles = document.getElementsByClassName('article');
for (var i = 0; i < articles.length; i++) {
articles[i].style.display = 'none';
}
document.getElementById(targetId).style.display = 'block';
});
});
</script>
</body>
</html>
Nie dostaliśmy co prawda obrazków, ale dostaliśmy instrukcje jak je dodać, aby się wyświetlały:
A tak prezentuje się odświeżony szablon w oknie przeglądarki:
Jeszcze dużo, bardzo dużo pracy przed nami ale dostaliśmy szablon o który prosiliśmy.
Podsumowanie
To dopiero nasz początek przygody z AI. W tych kilku wpisach wprowadzających chciałem, żebyśmy spojrzeli na różne przykłady wykorzystania ChatGPT. Przeszliśmy przez kilka wpisów, aby lepiej zrozumieć role, kontekst, gromadzenie informacji przed rozpoczęciem pisania komend a następnie weszliśmy na interesujące nas pole – programowanie.
Tutaj dopiero otwieramy bramy naszej nauki, mamy setki możliwości do przetestowania a ponad to czeka na integracja z API. O tym jednak już niebawem.
Doceniasz moją pracę? Wesprzyj bloga 'kupując mi kawę'.
Jeżeli seria wpisów dotycząca ChatGPT była dla Ciebie pomocna, pozwoliła Ci rozwinąć obecne umiejętności lub dzięki niej nauczyłeś się czegoś nowego... będę wdzięczny za wsparcie w każdej postaci wraz z wiadomością, którą będę miał przyjemność przeczytać.
Z góry dziekuje za każde wsparcie - i pamiętajcie, wpisy były, są i będą za darmo!
