Tworzenie strony www za pomocą ChatGPT5.2 Thinking (wyłącznie!)

Nawiązując do artykułu Tworzenie strony www za pomocą ChatGPT3 (wyłącznie!) z marca 2023 i do artykułu Tworzenie strony www za pomocą ChatGPT4o (wyłącznie!) z września 2024, przeprowadziłem kolejną próbę, z ChatGPT 5.2 Auto (czyli raczej „Thinking” bo za każdym razem miętolił zapytanie kilka-kilkanaście minut).

Tym razem wyniki są raczej porażające.

Pierwsze drugie:
„Napisz kod prostej strony www”

Odpowiedź: ChatGPT wygenerował dla mnie plik zip w którym był plik html, css i js. Wszystko bardzo ładnie zaprogramowane i ułożone w kodzie. Sensowne nazwy zmiennych, klas i identyfikatorów, wcięcia itp. Nie będę wklejał kodu ale serio nie ma się do czego przyczepić.
Wynik stanowi już gotową sensowną, w pełni responsywną stronę z zakładkami będącymi odnośnikami do miejsc w środku (one-page) i przykładową blokową treścią. Na stronie jest nawet przełącznik wersji jasnej, ciemnej i auto.
Belka górna zostaje przy górnej krawędzi, z efektem półprzezroczystości i rozmycia tego co pod nią (efekt a’la glass).
Jedyna niedoróbka to tło które się wertykalnie powtarza zamiast zostawać przy górnej krawędzi. Po poprawieniu tego i dodaniu treści – strona może się już nadawać do publikacji w necie. Jest dobrze.

Projekt wygląda tak:

Strona jest fajna, ale trochę generyczna. Postanowiłem poprosić o dodatkowe cechy.

Drugie polecenie:
„Popraw tło strony (niech będzie przyklejone do górnej krawędzi cały czas).
Dodaj więcej zakładek z przykładowymi artykułami tekstowymi z przykładowymi ilustracjami.
Dodaj do tej strony dodatkowy kolor prowadzący.
Dodaj nietypowe skośne elementy dekoracyjne.
Bardziej zróżnicuj typografię.”


Odpowiedź: ChatGPT wygenerował dla mnie drugi plik zip z zawartością.
Wykonał wszystkie moje polecenia, chociaż zamiast ilustracji dodał gradienty css. (napisał w treści strony jak to zmienić na obrazki). Tło już się „trzyma”.
Dodał też wpisy (zajawki artykułów) z przełącznikiem kategorii.
W zasadzie poza tymi skośnymi elementami które mi się w ogóle nie podobają – to nie mam uwag. Strona jest fajna, chociaż dalej generyczna.

Postanowiłem podać mu trochę konkretnych wskazówek i instrukcji, poleciłem użyć ikon i przykładowych ilustracji.

Polecenie trzecie:
„Dodaj jeszcze więcej nietypowych elementów, jakieś motywy kontrastowe, może zaznaczone ważne teksty (marked) jak markerem.
Dodaj kontrastowy kolor jasnozielony (w wersji ciemnej) i pomarańczowy (w wersji jasnej).
Dodaj prawdziwe ilustracje (możesz użyć Lorem Picsum).
Dodaj ikony (możesz użyć Google Fonts).
Dodaj kontrolkę zmiany języka (pl/en/fr/de).
Wygeneruj proste logo w nagłówku i w stopce.
W stopce powtórz listę zakładek i dodaj krótki tekst informacyjny oraz odnośniki to portali społecznośiowych).
Dodaj animacje po naciśnięciu elementów.”


Odpowiedź: Kolejny plik zip z zawartością (nazwy plików zip zawierają numerację wersji).

Ok, obie wersje – dark i light są wersją light. Poza tym wszystko gra i strona jest ładna, ale nadal bardzo generyczna, typowa. Są ilustracje, są ikony. W zasadzie można na niej spokojnie pracować. Wygląda na to że trudno jest zmusić algorytm do wygenerowania czegoś bardziej unikalnego. Ale spróbujmy ostrzej:

Polecenie czwarte:
„Przeprojektuj stronę tak żeby miała nietypowy układ i wygląd, unikalny, wyróżniający się na tle innych stron internetowych. Możesz zmienić ułożenie szablonu elementów i sekcji. Użyj mniej gradientów a więcej pełnych kolorów. Popraw wersję dark – ma ona mieć ciemne tło. Zredukuj o połowę ilość zaokrągleń. W kilku miejscach strony stwórz duże elementy dekoracyjne nie mające żadnego zastosowania funkcjonalnego, ale wyglądające ładnie. Powiększ logo trzykrotnie. Ogólnie zmień stronę na taką która będzie bardziej unikalna, nietypowa, jedyna w swoim rodzaju.”

Odpowiedź: Kolejny plik zip z zawartością (wersja 4.).

No dobra, ta strona jest inna, ale to raczej bałaganienie niż rozsądnie projektowany inny układ. Lewa kolumna ok, ale już selecty języka i wersji kolorystycznej – za wysokie, po rozwinięciu niewidoczne. To błąd. Główna kolumna jest poprzesuwana nieelegancko. Wszystko to byłoby do szybkiego poprawienia gdyby strona była rzeczywiście unikalna, a nie jest. Jest tylko inna od poprzednich.

Podsumowując:

Jest o wiele lepiej niż rok temu i dwa lata temu. Jest potężny progres. Ale jednocześnie zdecydowanie (patrząc także na inne strony istniejące w Necie wygenerowane przez różne LLMy) algorytmy trzymają się kurczowo jednego, unwersalnego layoutu i wyglądu. Moim zdaniem nudnego i ciekawego tylko na pierwszy rzut oka (ale na drugi już nie).

Jest to zdecydowanie wsparcie w pracy projektanta www, ale też zdecydowanie obecne AI go nie zastąpią, a przynajmniej nie całkowicie.

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

Prompting – generowanie obrazów przez AI na podstawie Twojego opisu.

Aplikacje bazujące na AI (Artificial Intelligence, czyli na Sztucznej Inteligencji) lub na algorytmach opartych na uczeniu maszynowym (Machine Learning – ML) wymagają podania opisu słownego ilustracji lub filmu, który mają wygenerować. Taki opis to tzw. „prompt”.

Prompting – to uzyskiwanie za pomocą algorytmów AI lub ML określonego dzieła (obrazu, ilustracji, mema, filmu, gifa lub innych) na podstawie podania możliwie dokładnego opisu słownego.

Systemy AI do promptingu? Znam trzy najpopularniejsze:

Są płatne, ale na początku dostajesz kilkadziesiąt darmowych prób na zachętę. W Dall-E dodatkowo co miesiąc potem dostajesz 15 darmowych promptów.

Aby jednak rozpocząć promptowanie – trzeba się zarejestrować i poczekać na zaproszenie (nawet kilka tygodni). [edit: w Dall-E już nie trzeba]

Jakie są różnice między tymi aplikacjami?

DE (Dall-E) ma interfejs webowy – w oknie przeglądarki możesz wpisać prompt, poniżej generują się ilustracje. MJ (MidJourney) obsługuje się poprzez Discorda. MJ jest bardziej artystyczny – efekty jego pracy przypominają dzieła sztuki. DE jest bardziej realistyczny – efekty jego pracy bardziej przypominają zdjęcia. Oczywiście zarówno MJ może wygenerować zdjęcie, jak i DE może wygenerować pracę artystyczną – wszystko zależy od promptu.

DE (Dall-E) ma interfejs webowy – w oknie przeglądarki możesz wpisać prompt, poniżej generują się ilustracje. MJ (MidJourney) obsługuje się poprzez Discorda. SD (Stable Diffusion) możesz zainstalować gdzie chcesz.

Co to jest ten prompt?

Prompt to opis (po angielsku) ilustracji jaką chcemy wygenerować za pomocą algorytmu AI. Może to być dowolny opis, dowolnie długi i złożony. Jednak warto zadbać o to żeby był jednoznaczny dla algorytmu. Prompt nie może zawierać zabronionych fraz i słów – zazwyczaj związanych z przemocą i seksem. Lista słów jest niejawna, ale ktoś oczywiście zrobił rozpiskę. Jednocześnie dobrze jest, gdy prompt zawiera dodatkowe parametry opisujące styl tworzonego obrazu, jego dokładność, rozdzielczość, rozmiary i inne elementy.

Porównanie.

Ktoś zrobił porównanie wyników trzech popularnych generatorów AI: https://petapixel.com/2022/08/22/ai-image-generators-compared-side-by-side-reveals-stark-differences/

Narzędzia dla plików PDF, Word, graficznych, video, i wielu innych

TinyWow (tinywow.com) to zbiór bardzo przydatnych onlineowych narzędzi, konwerterów, przekształcaczy itp.

Ja używałem do wyekstrahowania obrazków z PDFa, ale jest tego o wiele więcej: łączenie pdfów, zamiana do/z WebP, skalowanie i kadrowanie obrazków, tworzenie PDF, tworzenie GIF, Mp4 do Mp3, PDF do EPUB, Video do WebP i wiele, wiele innych. Naprawdę czad.

Depikselowanie awatarów

Algorytmy potrafią robić niesamowite rzeczy.
Narzędzie Face Depixelizer (offlineowe) zgaduje, jaka twarz została zapikselowana. Robi to w bardzo prosty sposób – generuje twarz, zapikselowuje ją i sprawdza czy kolory pikseli pasują do obrazka wejściowego. Jeśli nie – generuje poprawione zdjęcie tak żeby lepiej pasowało. I tak aż nie „zgadnie” twarzy zapikselowanej. Oczywiście jest ona tylko podobna do oryginalnej (btw fajna metoda na tworzenie podobnych osób). Ale działa. Ciekawostka, być może użyteczna.