Możliwości sztucznej inteligencji (SI) są ogromne i rosną z chwili na chwilę. Powstają coraz lepsze modele uczenia SI, które pozwalają jej na trafniejsze generowanie pożądanych tekstów i obrazów. W Digital Heart postanowiliśmy sprawdzić, w jaki sposób wykorzystanie tej technologii ułatwi nam stworzenie funkcjonalnej strony internetowej. 

W artykule znajdziesz:

  • opis drogi, jaką przeszliśmy, aby szybko i zgodnie z naszą wizją generować obrazy przy pomocy Midjourney, 
  • wady i zalety wykorzystania SI w dostosowaniu zdjęć i tworzeniu grafik do strony internetowej w spójnej stylistyce, 
  • strukturę dobrego zapytania do Midjourney, 
  • sposoby na wykorzystanie ChatGPT,
  • nasz sposób na wykorzystanie maksimum potencjału ChatGTP, aby otrzymywać to, czego potrzebujemy, 
  • naszą opinię o korzystaniu z SI w marketingu. 

Planowanie strony www

Jak w każdym procesie strategicznym, pracę nad stroną www zaczęliśmy od określenia jej celu, uporządkowania struktury treści i zbudowania moodboardu zgodnego z brandingiem agencji. Wtedy pojawił się pomysł na wykorzystanie SI, bo ważnym elementem naszej identyfikacji jest abstrakcyjny wątek kosmonautów. Koszty stylizowanej sesji zdjęciowej przeraziły nas już na wstępie: wynajem przestrzeni, kostiumów, fotografa, make-up, oświetlenie… a do tego cały dzień zdjęciowy wyjęty z pracy firmy. Na dodatek każde zmiany kadrowe wymagałyby powtórzenia całego procesu od nowa. Wiedzieliśmy, że najnowsza w tamtym czasie wersja SI generującej grafiki jest w stanie tworzyć je na wzór wgrywanych przez nas zdjęć, a nie tylko tekstowych zapytań, dlatego stwierdziliśmy, że warto to wykorzystać i przyspieszyć cały proces.

SI zredukowała koszty sesji zdjęciowej do minimum

Zanim zdecydowaliśmy się zastąpić sesję zdjęciową grafikami wygenerowanymi przez SI, zrobiliśmy test i sprawdziliśmy, jak z tym zadaniem radzi sobie Midjourney (przypis: Midjourney to model Sztucznej Inteligencji, który umożliwia generowanie wizualnych odpowiedzi na słowne zapytania – aplikacja działa na podstawie czatu Discord, w którym podczas wymiany wiadomości na czacie uzyskuje się grafiki odpowiadające zapytaniu). Prosty prompt (zapytanie wysłane do systemu, w tym przypadku do SI) wystarczył, żebyśmy zorientowali się w stylistyce i poziomie szczegółowości, jaki jest w stanie osiągnąć SI i spróbowali osadzić ją w kolorystyce naszej marki. 

/imagine prompt: astronaut, portrait, avatar, left light #10084B, right light #ED254D, in space 

Kolejnym krokiem, było upewnienie się, że podobny efekt można uzyskać z wykorzystaniem zdjęcia. Zależało nam przecież na wygenerowaniu zdjęć naszego zespołu, ale w innym stylu niż oryginalne zdjęcie. Sięgnęliśmy po losowe zdjęcie kobiety ze stocka i połączyliśmy je w zapytaniu. 

Aby Midjourney wygenerowało nową grafikę na podstawie innej lub w naszym przypadku zdjęcia, należy w zapytaniu umieścić link. Midjourney wygeneruje wtedy nową grafikę, wykorzystując wgrany przez nas obrazek jako punkt wyjściowy i zmodyfikuje go zgodnie z naszym zapytaniem tekstowym. Po researchu efektów, jakie już pojawiły się w wynikach społeczności Midjourney, poszliśmy o krok dalej i w zapytaniu zebraliśmy wszystkie określenia, które wydawały się nam trafne i przybliżały nas do pożądanego efektu. Zapytanie spuchło od elementów.

/ imagine prompt mix https://cdn.discordapp.com/attachments/1008571054458937428/1054413374005452822/woman-s-portrait-2021-09-01-14-51-40-utc.jpg with astronaut, majestic, futuristic, 8k, HD, cinematography, photorealistic, epic composition Unreal Engine, Cinematic, Color Grading, portrait Photography, Ultra-Wide Angle, Depth of Field, hyper-detailed, beautifully color-coded, insane details, intricate details, beautifully color graded, Unreal Engine, Cinematic, Color Grading, Editorial Photography, Photography, Photoshoot, Depth of Field, DOF, Tilt Blur, White Balance, 32k, Super-Resolution, Megapixel, ProPhoto RGB, VR, Halfrear Lighting, Backlight, Natural Lighting, Incandescent, Optical Fiber, Moody Lighting, Cinematic Lighting, Studio Lighting, Soft Lighting, Volumetric, Contre-Jour, Beautiful Lighting, Accent Lighting, Global Illumination, Screen Space Global Illumination, Ray Tracing Global Illumination, Optics, Scattering, Glowing, Shadows, Rough, Shimmering, Ray Tracing Reflections, Lumen Reflections, Screen Space Reflections, Diffraction Grading, Chromatic Aberration, GB Displacement, Scan Lines, Ray Traced, Ray Tracing Ambient Occlusion, Anti-Aliasing, FKAA, TXAA, RTX, SSAO, Shaders, OpenGL-Shaders, GLSL-Shaders, Post Processing, Post-Production, Cel Shading, Tone Mapping, CGI, VFX, SFX, insanely detailed and intricate, hypermaximalist, elegant, hyper realistic, super detailed, dynamic pose, photography cinematic, intense, cinematic composition + intricate detailed, cinematic lighting + rim lighting + color grading + focus + bokeh, 1X + Unsplash + 500px, taken by Canon EOS R5 RF85mm F1.8 MACRO lens 1/100sec ISO100

Dla nas efekt był wystarczający już na pierwszy rzut oka. Pozostało dopracowanie idealnego i powtarzalnego zapytania, aby wygenerować podobne efekty dla każdego członka zespołu agencji. W trzy osoby testowaliśmy, które elementy powyższego zapytania są kluczowe i wciąż pozostawała kwestia dobrania kolorystyki naszej marki, którą SI pomijało. Po kilku próbach skróciliśmy zapytanie, dobraliśmy kolejność poszczególnych stylistyk, dodaliśmy informację o kolorach światła i wymusiliśmy podobne pozycje awatarów, tak żeby zdjęcia były mniej więcej spójne. 

Efekty sesji zdjęciowej wykonanej przez AI

Aby uzyskać właściwie generowane zdjęcia zespołu, wystarczyło zebrać od każdego zdjęcia portretowe, kadrowane podobnie jak paszportowe. W toku edycji okazało się, że w wielu przypadkach lepiej sprawdzało się klasyczne selfie, które łapie profil człowieka, a nie płaskie zdjęcie en face. W jedno popołudnie uzyskaliśmy zdjęcia dla 15 osób, w ujednoliconej stylistyce i podobnym oświetleniu.

SI nie poradziła sobie z wyzwaniem w pełni

Jednak nie obyło się bez wyzwań. SI nie potrafiła uzyskać 100% podobieństwa, więc musieliśmy pójść na ustępstwa i wybrać spośród efektów to najbardziej podobne. Czasem wybór był trudny, bo SI nie poradziła sobie z każdą twarzą. Niektóre grafiki pomimo wielu prób wciąż były za mało podobne do poszczególnych osób i wymagały pracy grafika, aby dostosować rysy twarzy czy elementy głowy.

Midjourney pomimo zawarcia tego w zapytaniu uparcie nakładał hełmy astronautów na nasze głowy, czasami w iście „kosmiczny” sposób, łącząc części ciała z technologią. Czasami to w niczym nie przeszkadzało, a czasami… cóż, zobacz poniżej. 

Największy problem SI ma z okularami i elementami, które są „niestandardowe” jak: łysina, zarost, duża ilość makijażu – ogólnie wszystko, co zmienia rysy twarzy. Nasza CEO na co dzień nosi okulary, zresztą tak samo, jak spora część zespołu – jej awatar musieliśmy generować kilka razy, finalnie wybierając zdjęcie w soczewkach kontaktowych.

SI nie poradziła sobie też z zestawami ikon. Próbowaliśmy tworzyć kolorystycznie i stylistycznie spójne zestawy, jednak za każdym razem do użycia nadawało się dosłownie kilka elementów. Wiedząc, że biblioteki grafik w internecie są naprawdę bogate, nie szliśmy dalej w optymalizowanie zapytania czy generowanie każdej ikony osobno.

Idealne zapytanie do Midjourney

Po wielu próbach doszliśmy do wniosku, że dla SI nie ma znaczenia dokładnie każdy element zapytania. Sporą część naszego pierwszego promptu można było uprościć. Istotne dla Midjourney jest, aby podać CO ma być pokazane, W CZYM, na jakim TLE, podczas jakiej CZYNNOŚCI, z jakim OŚWIETLENIEM i w JAKIM STYLU. Nasze finalne zapytanie wyglądało więc tak: 

astronaut in open helmet, majestic, confident, in dark blue and red pink outfit, a lot of details, high photorealism, cinematic style, marvel style, lighting deep blue and red rose, Ultra-Wide Angle, Depth of Field, cinematic composition + intricate detailed, 4K, 8K, HDR, cinematic lighting, soft lighting, highly detailed, + rim lighting + color grading + focus + bokeh, 1X + Unsplash + 500px, two meter from the model, taken by Canon EOS R5 RF85mm F1.8 MACRO lens 1/100sec ISO100,

PRO TIP: Gdy awatar odstawał zbyt mocno, całkiem trafnie udawało się wymusić na SI lepszy wynik, miksując kilka zdjęć jednej osoby z kilku profili i w kilku otoczeniach. Wystarczyło poprzedzić zapytanie kilkoma linkami do zdjęć i to pomagało Sztucznej Inteligencji uzyskać rysy twarzy bliższe rzeczywistości. 

/ imagine prompt mix LINK with LINK and LINK (treść zapytania)

 ChatGPT wygenerował teksty do strony www

ChatGPT (przypis – ChatGPT to narzędzie SI, które odpowiada na zapytania w formie tekstowej, przy czym podczas kontaktu masz wrażenie, że po drugiej stronie odpowiada Ci osoba mająca szeroką wiedzę o wielu tematach. Pamięta też to, o czym rozmawialiście przed chwilą i odnosi się do tego podczas dalszej rozmowy) przydał nam się, aby przyspieszyć proces tworzenia treści. W zwyczajnych warunkach każdy tekst byłby opatrzony briefem dla copywritera lub zostałby napisany wstępnie przez specjalistę i oddany do korekty. Tworząc naszą stronę, wiedzieliśmy, że musimy opracować teksty do sekcji o agencji i o naszych usługach w dwóch wersjach – dłuższej i krótszej, które będą pasowały do  różnych etapów eksploracji www. W skrócie: dużo tekstów do wykonania w krótkim czasie, a do tego przy utrzymaniu bieżącej pracy agencji z klientami na tym samym poziomie. Widzieliśmy w tym zagrożenie dla efektywności.

ChatGPT jako konsultant 

Niektóre z sekcji strony mieliśmy czym wypełnić, bo nasze oferty do klientów przeszły już wiele iteracji, ale zaczęliśmy od sprawdzenia, czy czat rzeczywiście jest w stanie pomóc nam napisać merytoryczne treści. Test rozpoczęliśmy od prostych zapytań typu: Po co mi analityka w marketingu mojej firmy? 


Na pierwszy rzut oka widać, że odpowiedzi brzmiąw miarę sensownie i choć czasami zdania są pozbawione mięsa i merytoryki, to – co do zasady – kierunek samej treści i jej struktura są zazwyczaj bez większego zarzutu. Na szczęście, podczas rozmowy z SI możemy podkręcać jakość wyników lub ich różnorodność, zadając dodatkowe pytania, które pozwalają czatowi rozwinąć temat lub podejść do niego z innej strony. 

Z tą wiedzą zadaliśmy czatowi więcej prostych pytań np. o to, co wziąć pod uwagę przy wybieraniu agencji, na co zwrócić uwagę przy porównywaniu ofert agencji między sobą czy w jaki sposób przebiega współpraca z agencją. Uzyskane treści zainspirowały nas do stworzenia zakładki FAQ, w której wyjaśniliśmy, jak krok po kroku wygląda współpraca z agencją, ponieważ – patrząc z perspektywy klienta – z większości stron naszej konkurencji nie można było się dowiedzieć, od czego zależy cena czy co firma będzie musiała przygotować ze swojej strony. Dzięki zapytaniom typu: Po co mi „obszar” w marketingu mojej firmy, uzyskaliśmy wsad do edycji merytorycznej przez specjalistę, który finalnie wykorzystaliśmy jako opisy do zakładki „Oferta”.

ChatGPT jako copywriter

Mając wkład do tekstów i pokrótce opracowane treści, wróciliśmy do czatu z długą formą tekstu i poprosiliśmy o modyfikacje, aby treści były krótsze, a jednocześnie miały w sobie więcej języka korzyści.


Zapytanie: Stwórz opis usług, który zostanie wykorzystany na stronie internetowej agencji marketingowej na podstawie poniższego tekstu. Pamiętaj, aby uwzględnić język korzyści. Struktura tekstu powinna uwzględniać nagłówek, dokładnie 3 zdaniowy opis usług, a następnie wymieniać od punktów zakres usług określony poniżej. 

Otrzymaliśmy odpowiedź, która była zgodna z wysłaną prośbą, jednak poszliśmy o krok dalej, ponieważ liczyliśmy na odrobinę więcej kreatywności i języka korzyści w tekście. 

Otrzymaliśmy właściwy wsad, który docelowo postanowiliśmy skrócić, ponieważ po wlaniu w makietę okazał się być zbyt obszerny. ChatGPT mógł go dla nas skrócić, nawet próbował, ale tutaj czas potrzebny do naprowadzenia SI na właściwe tory był zbyt długi. Postanowiliśmy w ten sam sposób wygenerować opisy pozostałych usług, zachowując idealną strukturę: nagłówek, akapit wstępu, listę usług i CTA. 

Copywriterka jako bufor

Nie obyło się bez korekty copywriterki, co przyjęliśmy bez większego zaskoczenia. Tak samo jak w przypadku grafik, przy tekstach spodziewaliśmy się, że SI będzie dla nas wsparciem i pozwoli na optymalizację czasu poświęconego na przygotowanie materiałów, ale nie zastąpi zupełnie naszej pracy.

Po pierwsze  daje się odczuć, że treści stworzone przez czat opierają się na podobnych schematach, przynajmniej w przypadku ogólnych zapytań. Po drugie dla wprawnego marketingowca to, co oddaje czat, to za mało, aby polegać na nim w pełni. Po tekstach czuć, że są generyczne, bliźniaczo podobne, a dawanie feedbacku do SI jest po prostu czasochłonne – przynajmniej na tym etapie modelu (ChatGPT 3.0). Po trzecie, z człowiekiem pracuje się szybciej, zwłaszcza kiedy jest specjalistą i ma do wykonania pracę, która wymaga myślenia abstrakcyjnego i szukania rozwiązań. ChatGPT świetnie sprawdza się jako generator danych, jednak do spełnienia warunków jakościowych jeszcze trochę mu brakuje. Dla nas okazał się świetnym asystentem, z którym można odbić myśli, zadając mu właściwe pytania i otrzymać wkład do treści, które potem posłużą do wytworzenia finalnego efektu przez specjalistów. 

Narzędzia no-code do szybkiego stworzenia ładnej i łatwej w edycji strony 

Jako agencja marketingowa nie mamy w swoim zespole programistów, którzy mogliby postawić naszą stronę od podstaw, a do tego w krótkim czasie. Nasze założenia budowy strony uwzględniały jak największą optymalizację czasu i zasobów. Szukaliśmy więc rozwiązania, które w dość krótkim czasie pozwoli na zbudowanie wizualnie atrakcyjnej, łatwej w implementacji treści i potem zarządzanie nią na stronie. Wiedzieliśmy, że wybieramy rozwiązanie „nieidealne”, ale nie mieliśmy przestrzeni na stworzenie niestandardowej strony. 

Webflow jako szybkie rozwiązanie no-code

Do przygotowania strony wykorzystaliśmy narzędzie Webflow, które – choć nie ma wiele wspólnego ze sztuczną inteligencją – równie mocno wpisuje się w nowoczesne trendy, w tym przypadku no-code lub low-code. W krótkim czasie, bez dużego zaangażowania programistów, stworzyliśmy responsywną stronę pełną interakcji, animacji, a w dodatku działającą szybko oraz łatwą w edycji i utrzymaniu.

Przewaga strony internetowej w Webflow

Webflow podobnie jak Wordpress służy do zarządzania treścią, np. blogiem, ale przede wszystkim oferuje świetny wizualny edytor kodu, który pozwala śmiertelnikom – bez umiejętności programistycznych – stworzyć wizualnie zachęcają stronę www. Nie trzeba pisać kodu od zera, a sama aplikacja tworzy wysokiej jakości strukturę o dokładnie takim wyglądzie, jak chcemy. Z wygenerowanej przez Webflow strony można korzystać podobnie do Wordpressa lub umieścić ją na własnym serwerze. Konsultowaliśmy jakość takiego rozwiązania z programistami i mamy pewność, że to, co daje nam Webflow, jest naprawdę dobrze przygotowane, a nie wymaga nakładów czasu IT. Sam Webflow działa szybko, dobrze wpływa na szybkość ładowania strony, strona wychodzi zoptymalizowana pod SEO technologicznie (chociaż oczywiście dalej wymaga dobrych treści pod słowa kluczowe). Google zwraca uwagę na czas ładowania strony oraz jakość kodu – są to czynniki bezpośrednio wpływające na pozycję, a Webflow daje pewność, że wszystko w tym obszarze jest zaopiekowane. 

Rozpowszechnienie SI na taką skalę to wielki krok dla branży

Na stronach wielu firm przeczytasz, że są na bieżąco z trendami. Stronę Digital Heart dosłownie stworzyły najnowsze trendy. Po tym teście na żywym agencyjnym organizmie widać, że współpraca marketingu ze sztuczną inteligencją jest możliwa. Kluczem – jak do większości efektywnych działań – jest dobra strategia i komunikacja: w tym wypadku umiejętność zlecania SI odpowiednich komend i dalszej profesjonalnej obróbki tego, co stworzyła. 

Chociaż SI nie jest dostępna w naszej pracy od wczoraj, ten eksperyment pokazał nam, że rozwój sztucznej inteligencji pozwala przyspieszyć agencyjną pracę i dzieje się to bez straty na jakości. A dzięki wypróbowaniu tego sposobu na naszym wewnętrznym projekcie zyskaliśmy cenne insighty do wykorzystania w przyszłych współpracach z naszymi klientami.