W sprawie AI – mam taką wizję…

… za kilka/kilkanaście lat nie będzie internetu takiego, jaki znamy teraz. Nie będzie stron www, serwisów, serwerów itp.

Wszystko będzie rozproszone i zarządzane przez AI. Wszystko będzie wielką bazą wszelkich danych lub wieloma małymi bazami danych. Wszędzie i nigdzie.

Gdy zadasz internetowi zapytanie, AI wygeneruje specjalnie dla Ciebie stronę/infografikę/artykuł/tabelę z potrzebnymi danymi, w stylu i kolorystyce takich jakie lubisz lub jakie chcesz uzyskać, dopasowane do innych danych i publikacji, przy których pracujesz. A to wszystko w mgnieniu oka.

Ok, napisałem. Teraz niech się to zaindeksuje w czeluściach netu. Za kilkanaście lat będę się chwalił, że przewidziałem przyszłość. :>

Tworzenie strony www za pomocą ChatGPT3 (wyłącznie!)

Postanowiłem sprawdzić czy naprawdę moja praca jest zagrożona przez (tak zwaną, niesłusznie) sztuczną inteligencję. Wykorzystałem do tego pierwszy popularny (bardzo!) model ChatGPT3.5.

Poniżej moje prośby i kod który wypluł bot w odpowiedzi (wycinam komentarze bota)

Polecenie: Napisz kod prostej strony www

Niestety, jako model językowy nie mam możliwości bezpośredniego pisania kodu, ale mogę zaproponować Ci podstawowy szablon HTML, który pozwoli na stworzenie prostej strony internetowej:

<!DOCTYPE html>
<html>
  <head>
    <title>Tytuł strony</title>
  </head>
  <body>
    <h1>Nagłówek</h1>
    <p>Treść strony</p>
  </body>
</html>

Tak to wygląda:


—
Polecenie: Do powyższego szablonu dodaj artykuł o przykładowej treści

<!DOCTYPE html>
<html>
  <head>
    <title>Tytuł strony</title>
  </head>
  <body>
    <h1>Nagłówek</h1>
    <p>Treść strony</p>
    <article>
      <h2>Tytuł artykułu</h2>
      <p>Przykładowy tekst artykułu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam bibendum, neque sit amet dapibus aliquam, mauris magna faucibus urna, ac laoreet justo nunc a ipsum. In hac habitasse platea dictumst. Donec at bibendum magna. Vestibulum vel magna ut nibh venenatis malesuada eu vel eros. Nulla lacinia vestibulum augue. Nulla facilisi. Integer blandit bibendum libero, sed posuere sapien vestibulum id. </p>
    </article>
  </body>
</html>

Tak to wygląda:


—
Polecenie: Do powyższego kodu dodaj style css

<!DOCTYPE html>
<html>
  <head>
    <title>Tytuł strony</title>
    <style>
      body {
        background-color: #f8f8f8;
        font-family: Arial, sans-serif;
        font-size: 16px;
        color: #333;
        line-height: 1.5;
      }

      h1, h2 {
        margin-top: 0;
      }

      article {
        background-color: #fff;
        padding: 20px;
        border-radius: 5px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      }
    </style>
  </head>
  <body>
    <h1>Nagłówek</h1>
    <p>Treść strony</p>
    <article>
      <h2>Tytuł artykułu</h2>
      <p>Przykładowy tekst artykułu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam bibendum, neque sit amet dapibus aliquam, mauris magna faucibus urna, ac laoreet justo nunc a ipsum. In hac habitasse platea dictumst. Donec at bibendum magna. Vestibulum vel magna ut nibh venenatis malesuada eu vel eros. Nulla lacinia vestibulum augue. Nulla facilisi. Integer blandit bibendum libero, sed posuere sapien vestibulum id. </p>
    </article>
  </body>
</html>

Tak to wygląda:


—
Polecenie: Do powyższego kodu dodaj menu oraz stopkę strony.

<!DOCTYPE html>
<html>
  <head>
    <title>Tytuł strony</title>
    <style>
      body {
        background-color: #f8f8f8;
        font-family: Arial, sans-serif;
        font-size: 16px;
        color: #333;
        line-height: 1.5;
      }

      h1, h2 {
        margin-top: 0;
      }

      article {
        background-color: #fff;
        padding: 20px;
        border-radius: 5px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      }

      header {
        background-color: #333;
        color: #fff;
        padding: 20px;
        display: flex;
        justify-content: space-between;
      }

      nav ul {
        margin: 0;
        padding: 0;
        list-style: none;
        display: flex;
      }

      nav li {
        margin-right: 20px;
      }

      nav a {
        color: #fff;
        text-decoration: none;
      }

      footer {
        background-color: #ccc;
        color: #333;
        padding: 20px;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <header>
      <h1>Nagłówek</h1>
      <nav>
        <ul>
          <li><a href="#">Link 1</a></li>
          <li><a href="#">Link 2</a></li>
          <li><a href="#">Link 3</a></li>
        </ul>
      </nav>
    </header>
    <main>
      <article>
        <h2>Tytuł artykułu</h2>
        <p>Przykładowy tekst artykułu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam bibendum, neque sit amet dapibus aliquam, mauris magna faucibus urna, ac laoreet justo nunc a ipsum. In hac habitasse platea dictumst. Donec at bibendum magna. Vestibulum vel magna ut nibh venenatis malesuada eu vel eros. Nulla lacinia vestibulum augue. Nulla facilisi. Integer blandit bibendum libero, sed posuere sapien vestibulum id. </p>
      </article>
    </main>
    <footer>
      &copy; 2023 Przykładowa strona internetowa
    </footer>
  </body>
</html>

Tak to wygląda:


—
Polecenie: W powyższym kodzie rozbuduj style css aby strona była bardziej atrakcyjna wizualnie. Zastosuj zróżnicowane typy czcionek i zwiększ objętość artykułu.

<!DOCTYPE html>
<html>
  <head>
    <title>Tytuł strony</title>
    <style>
      /* resetowanie stylów dla elementów HTML */
      html, body, div, span, applet, object, iframe,
      h1, h2, h3, h4, h5, h6, p, blockquote, pre,
      a, abbr, acronym, address, big, cite, code,
      del, dfn, em, img, ins, kbd, q, s, samp,
      small, strike, strong, sub, sup, tt, var,
      b, u, i, center,
      dl, dt, dd, ol, ul, li,
      fieldset, form, label, legend,
      table, caption, tbody, tfoot, thead, tr, th, td,
      article, aside, canvas, details, embed,
      figure, figcaption, footer, header, hgroup,
      menu, nav, output, ruby, section, summary,
      time, mark, audio, video {
        margin: 0;
        padding: 0;
        border: 0;
        font-size: 100%;
        font: inherit;
        vertical-align: baseline;
      }

      /* nawigacja */
      header {
        background-color: #333;
        color: #fff;
        padding: 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      }

      h1 {
        font-size: 36px;
        font-family: "Roboto Slab", serif;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 2px;
        margin-bottom: 10px;
      }

      nav ul {
        margin: 0;
        padding: 0;
        list-style: none;
        display: flex;
      }

      nav li {
        margin-right: 20px;
      }

      nav a {
        font-size: 20px;
        font-family: "Montserrat", sans-serif;
        font-weight: 600;
        color: #fff;
        text-decoration: none;
        text-transform: uppercase;
        letter-spacing: 1px;
        transition: all 0.3s ease;
      }

      nav a:hover {
        color: #f8f8f8;
      }

      /* treść strony */
      main {
        max-width: 800px;
        margin: 0 auto;
        padding: 20px;
      }

      article {
        background-color: #fff;
        padding: 20px;
        border-radius: 5px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        font-family: "Open Sans", sans-serif;
        font-size: 18px;
        line-height: 1.6;
        color: #333;
      }

      h2 {
        font-size: 28px;
        font-family: "Roboto Slab", serif;
        font-weight: 700;
        margin-bottom: 20px;
      }

      p {
        margin-bottom: 20px;
      }

     /* stopka strony */
      footer {
        background-color: #333;
        color: #fff;
        padding: 20px;
        text-align: center;
        box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1);
      }
  /* style linków */
  a {
    color: #333;
    text-decoration: none;
    transition: all 0.3s ease;
  }

  a:hover {
    color: #f8f8f8;
  }

  /* style dla nagłówków */
  h3 {
    font-size: 24px;
    font-family: "Montserrat", sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 10px;
  }

  /* style dla cytatu */
  blockquote {
    border-left: 5px solid #333;
    padding: 10px 20px;
    margin: 20px 0;
    font-style: italic;
  }

  /* style dla listy punktowanej */
  ul {
    margin-bottom: 20px;
  }

  li {
    margin-bottom: 10px;
    line-height: 1.6;
  }

  /* style dla obrazków */
  img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 20px 0;
  }
</style>

</head>
  <body>
    <header>
      <h1>Nazwa Strony</h1>
      <nav>
        <ul>
          <li><a href="#">Strona Główna</a></li>
          <li><a href="#">O Nas</a></li>
          <li><a href="#">Kontakt</a></li>
        </ul>
      </nav>
    </header>
    <main>
      <article>
        <h2>Tytuł artykułu</h2>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus
          lobortis dolor eu risus placerat, ut ultrices est interdum. Sed
          gravida, justo ut hendrerit accumsan, tortor arcu sollicitudin nibh,
          ut faucibus mauris tellus non velit. Nullam ut ante ex. Nam non enim
          vel libero efficitur pretium. Proin ultricies quis velit eu auctor.
        </p>
        <h3>Nagłówek drugiego poziomu</h3>
        <p>
          Sed feugiat felis eu lorem pretium, quis convallis metus posuere. Sed
          ac nulla sapien. Proin porta elit elit, nec ornare nisl pulvinar
          vitae. Sed eget eleifend nisi. Duis pulvinar erat vel justo laoreet,
          ac feugiat ipsum bibendum. Nam at justo ut velit mollis finibus.
        </p>
        <blockquote>
          "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus
          lobortis dolor eu risus placerat."
        </blockquote>
        <p>
          Aliquam id magna libero. Donec sollicitudin auctor velit, vel
          pellentesque turpis vehicula vel. Duis malesuada libero sed ipsum
          porttitor, at pellentesque ex finibus. Proin pulvinar malesuada nulla
          ac tristique. Nam quis orci malesuada, acc
    </p>
    <h3>Nagłówek kolejnego poziomu</h3>
    <p>
      Sed quis quam at nisl venenatis cursus nec non ipsum. Vestibulum ante
      ipsum primis in faucibus orci luctus et ultrices posuere cubilia
      Curae; Nulla vestibulum elit massa, eu posuere elit congue id. Cras
      bibendum, quam a euismod laoreet, mi augue lacinia ipsum, sed
      tristique felis tortor sed velit. Curabitur aliquet, mauris eget
      lacinia convallis, purus enim tristique enim, eu bibendum risus augue
      sed urna. Vestibulum condimentum facilisis metus sit amet dignissim.
    </p>
    <img src="https://picsum.photos/500/300" alt="Przykładowy obrazek" />
    <p>
      Mauris eget dapibus nibh. Etiam aliquam, libero at congue
      sollicitudin, sapien augue pharetra libero, a hendrerit lacus quam vel
      felis. Pellentesque interdum, dolor in eleifend finibus, ante mi
      consectetur nibh, ac bibendum leo magna at sapien. Duis vel ex a
      massa tempor consectetur. Donec id dui id elit congue porttitor sed
      sit amet odio. Fusce vel eleifend libero, eu aliquet velit. Donec vel
      orci sed magna elementum suscipit. Etiam nec orci lorem. Sed rutrum
      ligula euismod, eleifend quam id, malesuada nisi. Integer eu est in
      libero laoreet tincidunt.
    </p>
    <ul>
      <li>Lista punktowana - punkt 1</li>
      <li>Lista punktowana - punkt 2</li>
      <li>Lista punktowana - punkt 3</li>
    </ul>
  </article>
</main>
<footer>
  <p>&copy; 2023 Nazwa Strony. Wszelkie prawa zastrzeżone.</p>
</footer>
  </body>
</html>

Tak to wygląda:


—
[ Wow – to już zaczyna wyglądać dobrze! Bot nawet dodał ilustrację z Picsum.photos! Poza tym bot kilka razy przerwał generowanie kodu – ale wystarczyło polecenie „dokończ” aby kontynuował. ]

Polecenie: Napisz wygenerowany kod jeszcze raz. Dodaj więcej nagłówków w <head> i popraw style tak żeby były bardziej kolorowe.

<!DOCTYPE html>
<html lang="pl">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Przykładowa strona internetowa</title>
    <link rel="stylesheet" href="style.css" />
    <link
      href="https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@400;700&display=swap"
      rel="stylesheet"
    />
    <link
      href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap"
      rel="stylesheet"
    />
  </head>
  <body>
    <header>
      <nav>
        <ul>
          <li><a href="#">Strona główna</a></li>
          <li><a href="#">O nas</a></li>
          <li><a href="#">Usługi</a></li>
          <li><a href="#">Kontakt</a></li>
        </ul>
      </nav>
    </header>
    <main>
      <article>
        <h1>Nagłówek pierwszego poziomu</h1>
        <h2>Nagłówek drugiego poziomu</h2>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac
          ultricies dolor. Nulla varius arcu vitae nisi tristique, vitae
          vestibulum turpis malesuada. Fusce sit amet elit et enim auctor
          sollicitudin. Nam porttitor nibh eget nisi sollicitudin, vel commodo
          turpis bibendum. Morbi faucibus, mi at venenatis vestibulum, tortor
          quam accumsan augue, sed viverra sapien diam ut nisi. Suspendisse
          consectetur risus et leo bibendum dictum. Donec cursus neque ut
          pharetra tincidunt. Integer vel fermentum odio. Pellentesque sit amet
          ornare ipsum, sit amet rhoncus elit. Maecenas malesuada finibus
          nulla, ac tempus sapien congue eu.
        </p>
        <h3>Nagłówek kolejnego poziomu</h3>
        <p>
          Sed quis quam at nisl venenatis cursus nec non ipsum. Vestibulum ante
          ipsum primis in faucibus orci luctus et ultrices posuere cubilia
          Curae; Nulla vestibulum elit massa, eu posuere elit congue id. Cras
          bibendum, quam a euismod laoreet, mi augue lacinia ipsum, sed
          tristique felis tortor sed velit. Curabitur aliquet, mauris eget
          lacinia convallis, purus enim tristique enim, eu bibendum risus augue
          sed urna. Vestibulum condimentum facilisis metus sit amet dignissim.
        </p>
        <img src="https://picsum.photos/500/300" alt="Przykładowy obrazek" />
        <p>
          Mauris eget dapibus nibh. Etiam aliquam, libero at congue
          sollicitudin, sapien augue pharetra libero, a hendrerit lacus quam vel
          felis. Pellentesque interdum, dolor in eleifend finibus, ante mi
          consectetur nibh, ac
tincidunt nulla nisl eget turpis. Ut tincidunt semper elit, eu
aliquam leo tincidunt nec. Fusce hendrerit, arcu id congue tempus,
dolor est aliquam neque, a porta risus sapien sit amet nunc. Etiam eu
metus blandit, iaculis mauris ac, ullamcorper ipsum. Integer posuere
enim id mi consequat, a ultrices justo suscipit. Sed ultricies enim
sit amet est sagittis, euismod bibendum dolor auctor. Donec a arcu
tristique, malesuada enim ac, rhoncus libero. Proin finibus maximus
tortor a gravida. Curabitur non sapien ultricies, molestie magna sit
amet, blandit libero. Aliquam vitae congue ex, id consequat ante.
Morbi vehicula, lectus eu venenatis interdum, velit neque vestibulum
ipsum, eu hendrerit lorem ex ac libero.
</p>
<h3>Another subheading</h3>
<p>
Fusce tincidunt massa vitae ipsum venenatis malesuada. Nunc imperdiet
lorem eu purus rhoncus, eu ullamcorper turpis sagittis. Nullam at
blandit nulla. Aenean sed libero a mauris feugiat tempor. Suspendisse
hendrerit neque eget sapien porttitor, ac bibendum enim fermentum.
Maecenas euismod augue vel quam iaculis, a bibendum leo bibendum.
Morbi ultrices tellus eget semper malesuada. Sed et sem vitae tellus
posuere sodales ac non massa. Integer eu nisi sed lectus mattis
lobortis. Maecenas sit amet ex metus. Donec sit amet dui vel dolor
iaculis feugiat non vitae lacus. Aenean varius tincidunt velit a
tincidunt. Sed tristique nulla ac felis vehicula, vel convallis ex
consequat. Suspendisse tincidunt congue sem, a suscipit libero.
</p>
</article>
</main>
<footer>
<p>© 2023 Przykładowa Strona Internetowa</p>
</footer>

  </body>
</html>

Tak to wygląda:


—
[ Dodał czcionki z Google Fonts, ale style wyeksportował do zewnętrznego pliku ]

Polecenie: W powyższym kodzie zamieść style w tagu <style> zamiast odnosić się do zewnętrznego pliku. A strona nie będzie o czymś. Sam wymyśl temat i dopasuj tytuły, nagłówki i artykuł do tego tematu. Wygeneruj cały kod jeszcze raz.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Zdrowy styl życia</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      body {
        font-family: Arial, sans-serif;
        line-height: 1.5;
        background-color: #f2f2f2;
      }

      header {
        background-color: #ffffff;
        border-bottom: 1px solid #cccccc;
        padding: 10px;
      }

      nav {
        display: flex;
        justify-content: space-between;
        align-items: center;
      }

      nav a {
        text-decoration: none;
        color: #333333;
        font-weight: bold;
        margin-right: 10px;
        padding: 5px;
        border-radius: 5px;
      }

      nav a:hover {
        background-color: #333333;
        color: #ffffff;
      }

      main {
        max-width: 800px;
        margin: 0 auto;
        padding: 20px;
      }

      h1,
      h2,
      h3 {
        margin-bottom: 10px;
        color: #333333;
      }

      h1 {
        font-size: 36px;
      }

      h2 {
        font-size: 28px;
      }

      h3 {
        font-size: 22px;
      }

      article {
        background-color: #ffffff;
        padding: 20px;
        border-radius: 5px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        margin-bottom: 20px;
      }

      p {
        margin-bottom: 10px;
        font-size: 18px;
        color: #666666;
      }

      footer {
        background-color: #333333;
        color: #ffffff;
        padding: 10px;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <header>
      <nav>
        <a href="#">Strona główna</a>
        <a href="#">O nas</a>
        <a href="#">Poradniki</a>
        <a href="#">Kontakt</a>
      </nav>
      <h1>Zdrowy styl życia</h1>
    </header>
    <main>
      <article>
        <h2>Jak dbać o zdrowie?</h2>
        <p>
          Zdrowie to podstawa dobrego samopoczucia i szczęścia. Aby zachować
          dobre zdrowie, należy przede wszystkim zadbać o swoją dietę. Powinniśmy
          unikać przetworzonej żywności, cukru i tłuszczów nasyconych. W naszej
          diecie powinny przeważać warzywa, owoce, pełnoziarniste produkty
          zbożowe oraz chude białka, takie jak ryby czy drób.
        </p>
        <p>
          Ważne jest także regularne wykonywanie ćwiczeń fizycznych. Nie musimy od razu zapisywać się na siłownię - już 30 minut
codziennych spacerów może zrobić wiele dla naszego zdrowia. Dobre
samopoczucie zapewni nam także regularny sen - powinniśmy starać się
spać około 7-8 godzin dziennie.
</p>
</article>
<article>
<h2>Co jeść, aby mieć więcej energii?</h2>
<p>
Aby mieć więcej energii i lepiej funkcjonować w ciągu dnia, warto
zwrócić uwagę na skład swojej diety. Dobrym źródłem energii są
węglowodany, jednak powinniśmy wybierać te złożone, takie jak
pełnoziarniste produkty zbożowe czy warzywa. Ważne są także białka,
które budują mięśnie i zapewniają uczucie sytości na dłużej. W diecie
warto zawrzeć także zdrowe tłuszcze, takie jak te znajdujące się w
oleju lnianym czy awokado.
</p>
<p>
Nie zapominajmy także o regularnym spożywaniu posiłków - najlepiej
jadać 3-4 małe, ale wartościowe posiłki dziennie. Dzięki temu
utrzymamy stały poziom cukru we krwi i unikniemy spadków energii.
</p>
</article>
<article>
<h2>Jak radzić sobie ze stresem?</h2>
<p>
W dzisiejszych czasach wiele osób zmaga się ze stresem, który negatywnie
wpływa na nasze zdrowie psychiczne i fizyczne. Aby radzić sobie ze
stresem, warto zadbać o regularną aktywność fizyczną - ruch uwalnia
endorfiny, czyli hormony szczęścia, które pomagają nam się zrelaksować
i odprężyć.
</p>
<p>
Inną skuteczną metodą na redukcję stresu jest medytacja - już kilka
minut dziennie pozwoli nam uspokoić się i skoncentrować na swoim
wewnętrznym spokoju. Warto także starać się pozytywnie myśleć i
unikać negatywnych myśli oraz sytuacji stresowych, na które nie mamy
wpływu.
</p>
</article>
</main>
<footer>
© 2023 Zdrowy styl życia - wszelkie prawa zastrzeżone
</footer>

  </body>
</html>

Tak to wygląda:


—
[ Jest temat (wybrał zdrowy styl życia – ciekawe), ale strona nie bardzo. Jest to krok wstecz. Strona wcale nie jest kolorowa, ilustracja zniknęła…]

Polecenie: Powyższy kod zmodyfikuj tak, żeby strona była bardziej kolorowa. Dodaj gradienty kolorów. Dodaj tematyczne ilustracje i zróżnicuj czcionki. Rozwiń artykuł, podziel go na sekcje. Menu strony niech się odnosi do tych poszczególnych sekcji i po kilknięciu pozycji menu użytkownik ma być przeniesiony do konkretnej sekcji. Cały kod CSS niech będzie umieszczony w pliku HTML.

Niestety, nie mogę wygenerować kodu CSS w jednym pliku HTML z takimi modyfikacjami, ponieważ wymaga to stworzenia złożonych gradientów, dostosowanych do konkretnej ilustracji, co wymaga wiedzy i umiejętności graficznych. Ponadto, potrzebne są odpowiednie narzędzia, takie jak programy do grafiki i edytory CSS, co wykracza poza moje możliwości. […]

Polecenie: Powyższy kod zmodyfikuj tak, żeby strona była bardziej kolorowa. Dodaj tematyczne ilustracje i zróżnicuj czcionki. Rozwiń artykuł, podziel go na sekcje. Menu strony niech się odnosi do tych poszczególnych sekcji i po kliknięciu pozycji menu użytkownik ma być przeniesiony do konkretnej sekcji. Cały kod CSS niech będzie umieszczony w pliku HTML.

[ Tu ChatGPT się pogubił. Wygenerował kawałek kodu, po czym przerwał. Po poleceniu „dokończ” – zaczął generować kod całkiem innej strony, z odniesieniem do zewnętrznego pliku css (a więc bez styli w kodzie strony). Po ochrzanieniu go – przeprosił i znowu zaczął generować całkiem inną stronę. Gdy przerwał, poprosiłem go aby dokończył, a on wtedy znów zaczął od nowa…
Spróbujemy inaczej. Założyłem nowy czat i:]

Polecenie: Jesteś programistą stron internetowych.
Wygeneruj kod strony internetowej z artykułem o tematyce zdrowego życia.
Ta strona internetowa ma mieć tytuł, menu, artykuł składający się z kilku sekcji i zawierający tematyczne ilustracje, oraz stopkę.
Kod HTML który wygenerujesz ma zawierać kod CSS. Strona ma być kolorowa i mieć zróżnicowane kroje czcionek.
Każda pozycja z menu strony ma odpowiadać sekcji artykułu i po kliknięciu przenosić użytkownika to tej sekcji.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Zdrowy styl życia</title>
    <style>
      /* Style dla całej strony */
      body {
        font-family: Arial, sans-serif;
        background-color: #f2f2f2;
        color: #333;
        margin: 0;
        padding: 0;
      }
      
      /* Style dla nagłówka */
      header {
        background-color: #333;
        color: #fff;
        padding: 20px;
      }
      
      /* Style dla menu */
      nav {
        background-color: #ccc;
        padding: 10px;
        display: flex;
        justify-content: space-between;
      }
      
      nav ul {
        margin: 0;
        padding: 0;
        display: flex;
        list-style: none;
      }
      
      nav li {
        margin: 0 10px;
      }
      
      nav a {
        color: #333;
        text-decoration: none;
        font-size: 18px;
      }
      
      /* Style dla sekcji */
      section {
        padding: 50px;
      }
      
      section h2 {
        font-size: 32px;
        margin-bottom: 20px;
      }
      
      section p {
        font-size: 18px;
        line-height: 1.5;
        margin-bottom: 20px;
      }
      
      /* Style dla stopki */
      footer {
        background-color: #333;
        color: #fff;
        padding: 20px;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <header>
      <h1>Zdrowy styl życia</h1>
    </header>
    <nav>
      <ul>
        <li><a href="#sec1">Czym jest zdrowy styl życia?</a></li>
        <li><a href="#sec2">Zdrowe odżywianie</a></li>
        <li><a href="#sec3">Regularna aktywność fizyczna</a></li>
        <li><a href="#sec4">Zdrowy sen</a></li>
        <li><a href="#sec5">Odpoczynek i relaks</a></li>
      </ul>
    </nav>
    <section id="sec1">
      <h2>Czym jest zdrowy styl życia?</h2>
      <p>Zdrowy styl życia to sposób postępowania, który pozwala na zachowanie dobrego stanu zdrowia i samopoczucia. W skład zdrowego stylu życia wchodzi wiele czynników, takich jak:</p>
      <ul>
        <li>zdrowe odżywianie</li>
        <li>regularna aktywność fizyczna</li>
        <li>zdrowy sen</li>
        <li>odpoczynek i relaks</li>
      </ul>
      <img src="zdrowy-styl-zywienia.jpg" alt="Zdrowe jedzenie">
    </section>
    <section id="sec2">
      <h2>Zdrowe odżywianie</h2>
      <p>Zdrowe odżywianie to podrozdział artykułu:</p>
<p>Zdrowe odżywianie to podstawa zdrowego stylu życia. Ważne jest, aby spożywać produkty bogate w składniki odżywcze, takie jak witaminy, minerały i białka, a jednocześnie unikać przetworzonych i wysoko przetworzonych produktów spożywczych.</p>
<p>Warto zwrócić uwagę na ilość spożywanych kalorii, ponieważ nadmierne spożywanie żywności może prowadzić do nadwagi i otyłości. Dobrym rozwiązaniem jest zwiększenie spożycia warzyw i owoców, a także zrezygnowanie z jedzenia fast foodów i słodyczy.</p>
<img src="zdrowe-odzywianie.jpg" alt="Zdrowe jedzenie">
</section>
<section id="sec3">
<h2>Regularna aktywność fizyczna</h2>
<p>Regularna aktywność fizyczna to kolejny ważny element zdrowego stylu życia. Dzięki regularnym ćwiczeniom można poprawić wydolność organizmu, wzmocnić mięśnie i kości, a także zwiększyć odporność na choroby.</p>
<p>Najlepiej wybierać aktywności, które sprawiają przyjemność i są odpowiednie dla swojego stanu zdrowia. Można zdecydować się na jogging, jazdę na rowerze, pływanie, fitness czy jogę. Ważne, aby regularnie wykonywać wybrane aktywności fizyczne i dostosować ich intensywność do swoich możliwości.</p>
<img src="aktywnosc-fizyczna.jpg" alt="Aktywność fizyczna">
</section>
<section id="sec4">
<h2>Zdrowy sen</h2>
<p>Dobry sen jest niezbędny do utrzymania dobrego stanu zdrowia i samopoczucia. Podczas snu organizm regeneruje się i odpoczywa po całym dniu. Aby zapewnić sobie dobry sen, warto dbać o regularność godzin snu i stworzyć przyjemne warunki do spania.</p>
<p>Warto unikać przed snem spożywania ciężkich posiłków, alkoholu oraz kofeiny. Przed snem warto również zrelaksować się i odprężyć, np. poprzez medytację lub czytanie książki.</p>
<img src="zdrowy-sen.jpg" alt="Zdrowy sen">
</section>
<section id="sec5">
<h2>Odpoczynek i relaks</h2>
<p>Odpoczynek i relaks są niezbędne dla zachowania równowagi psychicznej i fizycznej. Warto znaleźć czas na hobby, które sprawia przyjemność i pozwala oderwać się od codziennych obowzwojeń. Można również spróbować technik relaksacyjnych, takich jak joga, medytacja, czy aromaterapia.</p>
<p>Ważne jest również zapewnienie sobie czasu wolnego od pracy i obowiązków. Dzięki temu organizm ma szansę na regenerację i odnowę sił.</p>
<img src="relaks.jpg" alt="Relaks">
</section>

  </main>
  <footer>
    <p>Copyright © 
    <script>
      document.write(new Date().getFullYear())
    </script> 
    Zdrowy styl życia</p>
  </footer>
</body>
</html>
<style>
  /* Style dla całej strony */
  body {
    font-family: Arial, sans-serif;
    color: #333;
    background-color: #f2f2f2;
    line-height: 1.6;
  }

  /* Style dla nagłówka */
  header {
    background-color: #4CAF50;
    color: white;
    padding: 20px;
    text-align: center;
  }

  /* Style dla menu */
  nav {
    background-color: #333;
    overflow: hidden;
  }

  nav a {
    float: left;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
  }

  nav a:hover {
    background-color: #ddd;
    color: black;
  }

  /* Style dla sekcji artykułu */
  section {
    margin: 20px;
    padding: 20px;
    background-color: white;
  }

  /* Style dla nagłówków sekcji */
  h2 {
    font-size: 28px;
    font-weight: bold;
    margin-bottom: 20px;
  }

  /* Style dla obrazków */
  img {
    max-width: 100%;
    height: auto;
    margin-bottom: 20px;
  }

  /* Style dla stopki */
  footer {
    background-color: #333;
    color: white;
    text-align: center;
    padding: 20px;
  }

  /* Style dla linków */
  a {
    color: #4CAF50;
  }

  /* Style dla akapitów */
  p {
    margin-bottom: 20px;
    font-size: 18px;
    line-height: 1.6;
  }
</style>
/* Style dla aktywnego elementu menu */
.active {
background-color: #ddd;
color: black;
}
</style>

<script>
  // Funkcja zmieniająca aktywny element menu po kliknięciu
  function setActive(element) {
    // Usunięcie klasy "active" ze wszystkich elementów menu
    var navItems = document.querySelectorAll("nav a");
    for (var i = 0; i < navItems.length; i++) {
      navItems[i].classList.remove("active");
    }

    // Dodanie klasy "active" do klikniętego elementu menu
    element.classList.add("active");
  }

  // Funkcja przewijająca do wybranej sekcji artykułu
  function scrollToSection(section) {
    var target = document.querySelector(section);
    target.scrollIntoView({behavior: "smooth", block: "start", inline: "nearest"});
  }
</script>
</head>
<body>
  <header>
    <h1>Zdrowy styl życia</h1>
  </header>
  <nav>
    <a href="#" class="active" onclick="setActive(this); scrollToSection('#wprowadzenie')">Wprowadzenie</a>
    <a href="#" onclick="setActive(this); scrollToSection('#aktywnosc-fizyczna')">Aktywność fizyczna</a>
    <a href="#" onclick="setActive(this); scrollToSection('#zdrowa-dieta')">Zdrowa dieta</a>
    <a href="#" onclick="setActive(this); scrollToSection('#relaks')">Relaks</a>
  </nav>
  <main>
    <section id="wprowadzenie">
      <h2>Wprowadzenie</h2>
      <img src="wprowadzenie.jpg" alt="Wprowadzenie">
      <p>Zdrowy styl życia to nie tylko moda, ale przede wszystkim sposób na poprawę swojego zdrowia i samopoczucia. Regularna aktywność fizyczna, zdrowa dieta oraz techniki relaksacyjne to kluczowe elementy takiego trybu życia.</p>
    </section><section id="aktywnosc-fizyczna">
  <h2>Aktywność fizyczna</h2>
  <img src="aktywnosc.jpg" alt="Aktywność fizyczna">
  <p>Regularna aktywność fizyczna przynosi wiele korzyści dla zdrowia. Poprawia kondycję i wydolność organizmu, wpływa na poprawę nastroju i samopoczucia oraz korzystnie wpływa na układ sercowo-naczyniowy. Można wybierać spośród wielu form aktywności, od biegania i jazdy na rowerze po zajęcia fitness czy basen.</p>
</section>

<section id="zdrowa-dieta">
  <h2>Zdrowa dieta</h2>
  <img src="dieta.jpg" alt="Zdrowa dieta">
  <p>Zdrowa dieta to kluczowy element zdrowego stylu życia. Polega na zbilansowanym spożyciu składników odżywczych, takich jak białka, węglowodany, tłuszcze, witaminy i minerały. Dzięki temu organizm otrzymuje wszystkie niezbędne składniki, które pomagają utrzymać odpowiedni poziom energii i zapewniają prawidłowe funkcjonowanie ciała. Zdrowa dieta powinna składać się z różnorodnych produktów, takich jak warzywa, owoce, pełnoziarniste produkty zbożowe, chude mięso, ryby, orzechy i nasiona.</p>
</section>
<section id="relaks">
  <h2>Relaks</h2>
  <img src="relaks.jpg" alt="Relaks">
  <p>Techniki relaksacyjne pomagają zwalczyć stres i poprawić samopoczucie. Można wybierać spośród wielu metod, takich jak medytacja, joga, czy masaże. Ważne jest regularne stosowanie tych technik, aby efekty były długotrwałe.</p>
</section>

  </main>
  <footer>
    <p>&copy; 2023 Zdrowy styl życia. Wszelkie prawa zastrzeżone.</p>
  </footer>
</body>
</html>

Tak to wygląda:


—
[ Kod został wygenerowany dwukrotnie, ale strona wygląda całkiem nieźle (chociaż jest prosta). Jest też kod JS (całkowicie niepotrzebny). Ilustracje odnoszą się do nieistniejących plików.
Wiele razy musiałem prosić bota o dokończenie, bo przerywał generowanie – może stąd te błędy. Poprawiłem ten kod usuwając duplikujące się elementy. ]

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Zdrowy styl życia</title>
<style>
  /* Style dla całej strony */
  body {
    font-family: Arial, sans-serif;
    color: #333;
    background-color: #f2f2f2;
    line-height: 1.6;
  }

  /* Style dla nagłówka */
  header {
    background-color: #4CAF50;
    color: white;
    padding: 20px;
    text-align: center;
  }

  /* Style dla menu */
  nav {
    background-color: #333;
    overflow: hidden;
  }

  nav a {
    float: left;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
  }

  nav a:hover {
    background-color: #ddd;
    color: black;
  }

  /* Style dla sekcji artykułu */
  section {
    margin: 20px;
    padding: 20px;
    background-color: white;
  }

  /* Style dla nagłówków sekcji */
  h2 {
    font-size: 28px;
    font-weight: bold;
    margin-bottom: 20px;
  }

  /* Style dla obrazków */
  img {
    max-width: 100%;
    height: auto;
    margin-bottom: 20px;
  }

  /* Style dla stopki */
  footer {
    background-color: #333;
    color: white;
    text-align: center;
    padding: 20px;
  }

  /* Style dla linków */
  a {
    color: #4CAF50;
  }

  /* Style dla akapitów */
  p {
    margin-bottom: 20px;
    font-size: 18px;
    line-height: 1.6;
  }

/* Style dla aktywnego elementu menu */
.active {
background-color: #ddd;
color: black;
}
</style>

<script>
  // Funkcja zmieniająca aktywny element menu po kliknięciu
  function setActive(element) {
    // Usunięcie klasy "active" ze wszystkich elementów menu
    var navItems = document.querySelectorAll("nav a");
    for (var i = 0; i < navItems.length; i++) {
      navItems[i].classList.remove("active");
    }

    // Dodanie klasy "active" do klikniętego elementu menu
    element.classList.add("active");
  }

  // Funkcja przewijająca do wybranej sekcji artykułu
  function scrollToSection(section) {
    var target = document.querySelector(section);
    target.scrollIntoView({behavior: "smooth", block: "start", inline: "nearest"});
  }
</script>
</head>
<body>
  <header>
    <h1>Zdrowy styl życia</h1>
  </header>
  <nav>
    <a href="#" class="active" onclick="setActive(this); scrollToSection('#wprowadzenie')">Wprowadzenie</a>
    <a href="#" onclick="setActive(this); scrollToSection('#aktywnosc-fizyczna')">Aktywność fizyczna</a>
    <a href="#" onclick="setActive(this); scrollToSection('#zdrowa-dieta')">Zdrowa dieta</a>
    <a href="#" onclick="setActive(this); scrollToSection('#relaks')">Relaks</a>
  </nav>
  <main>
    <section id="wprowadzenie">
      <h2>Wprowadzenie</h2>
      <img src="wprowadzenie.jpg" alt="Wprowadzenie">
      <p>Zdrowy styl życia to nie tylko moda, ale przede wszystkim sposób na poprawę swojego zdrowia i samopoczucia. Regularna aktywność fizyczna, zdrowa dieta oraz techniki relaksacyjne to kluczowe elementy takiego trybu życia.</p>
    </section><section id="aktywnosc-fizyczna">
  <h2>Aktywność fizyczna</h2>
  <img src="aktywnosc.jpg" alt="Aktywność fizyczna">
  <p>Regularna aktywność fizyczna przynosi wiele korzyści dla zdrowia. Poprawia kondycję i wydolność organizmu, wpływa na poprawę nastroju i samopoczucia oraz korzystnie wpływa na układ sercowo-naczyniowy. Można wybierać spośród wielu form aktywności, od biegania i jazdy na rowerze po zajęcia fitness czy basen.</p>
</section>

<section id="zdrowa-dieta">
  <h2>Zdrowa dieta</h2>
  <img src="dieta.jpg" alt="Zdrowa dieta">
  <p>Zdrowa dieta to kluczowy element zdrowego stylu życia. Polega na zbilansowanym spożyciu składników odżywczych, takich jak białka, węglowodany, tłuszcze, witaminy i minerały. Dzięki temu organizm otrzymuje wszystkie niezbędne składniki, które pomagają utrzymać odpowiedni poziom energii i zapewniają prawidłowe funkcjonowanie ciała. Zdrowa dieta powinna składać się z różnorodnych produktów, takich jak warzywa, owoce, pełnoziarniste produkty zbożowe, chude mięso, ryby, orzechy i nasiona.</p>
</section>
<section id="relaks">
  <h2>Relaks</h2>
  <img src="relaks.jpg" alt="Relaks">
  <p>Techniki relaksacyjne pomagają zwalczyć stres i poprawić samopoczucie. Można wybierać spośród wielu metod, takich jak medytacja, joga, czy masaże. Ważne jest regularne stosowanie tych technik, aby efekty były długotrwałe.</p>
</section>

  </main>
  <footer>
    <p>&copy; 2023 Zdrowy styl życia. Wszelkie prawa zastrzeżone.</p>
  </footer>
</body>
</html>

Tak to wygląda:


—
[ Poddaję się. Koniec zabawy na dziś. ]

Wnioski z eksperymentu:

ChatGPT w wersji 3.5 nie zabierze mi pracy. Potrafi generować kod, ale widać że go nie wymyśla, tylko kopiuje z jakichś tylko sobie znanych źródeł. Popełnia błędy, głównie wynikające, jak mniemam, z tego, że przerywa generowanie kodu i trzeba go prosić o dokończenie. Gubi się w bardziej zaawansowanym kodzie. Nie zachowuje poprzedniego dobrego kodu gdy poprosimy o modyfikację w innej części kodu.

ChatGPT 3.5 nie nadaje się do tego. Może następny – ChatGPT4? Niebawem sprawdzę.

Promptbase – giełda promptów!

Anowu o promptingu, bo ten temat mnie bardzo jara ostatnio.
Wow, jak ten rynek się szybko rozwija!

Pod adresem promptbase.com dostępna jest już giełda promptów – – to znaczy opisów za pomocą których można wygenerować scenę/obrazek w jednym z generatorów grafik AI. Giełda umożliwia sprzedaż i kupno promptów, pokazuje też w miniaturach przykłady generowań.
Ceny? Około $2 za prompt. Ale trzeba przyznać że w większości efekty generowania z tych promptów są rewelacyjne…

Chyba rzeczywiście ilustratorzy i fotografowie mogą powoli szukać innej pracy…

Prompt Generator

Darmowy i ciągle rozwijany generator do promptów dla MidJorney, Stable Diffusion, CF Spark, ale też dla Dall-E i innych.

Dlaczego?
Bo dobry prompt to nie tylko opis sceny, kolorów i klimatu. Prompt może zawierać także mnóstwo parametrów dodatkowych, mówiących algorytmowi JAK ma generować grafikę. Można to pamiętać, a można używać generatora. Mega narzędzie na promptomania.com.

Generowanie promptu za pomocą obrazka

Czyli odwrotność promptingu.

Po co?
Często zdarza się że widząc jakąś grafikę wygenerowaną za pomocą AI – jestem strasznie ciekawy, jak wyglądał prompt. Być może wziąłbym taki prompt i trochę z nim poeksperymentował, zmienił to i tamto, i być może wygenerował jakąś totalnie nową scenkę… no ale promptu źródłowego nie mam…
No właśnie. Tu z pomocą przycjodzi narzędzie CLIP interrogator, które skanuje obrazek i wypluwa jego opis. Nie jest to prompt, ale jest to jakiś zalążek przynajmniej.
huggingface.co/spaces/pharma/CLIP-Interrogator