Ai alt-tag dla Webflow
Projekt ten zapewnia zautomatyzowane rozwiązanie do generowania i zarządzania tekstem alternatywnym dla obrazów w Webflow, z wykorzystaniem sztucznej inteligencji. Jego podstawą jest interfejs Google Sheets, który komunikuje się z Webflow za pośrednictwem API.
Pisanie alt tagów to jedna z tych czynności, za którymi nikt nie przepada. Jeśli mamy do opisania kilka, kilkanaście czy nawet kilkadziesiąt zdjęć – da się to przeżyć. Problemy zaczynają się wtedy, gdy zdjęć na stronie jest kilkaset, a zależy nam na opisaniu każdego z nich.
- Punkt wyjścia
- Wąskie gardło
- Człowiek w pętli
- Model do opisów
- Tłumaczenie na język polski
- Zaufanie vs kontrola
- Chwila prawdy
- Podsumowanie
Punkt wyjścia
W dobie wszechobecnego AI zacząłem się zastanawiać, czy czynności pisania tekstów alternatywnych nie można by zautomatyzować. Popularne modele językowe czy dedykowane modele image-to-text radzą sobie z opisami całkiem nieźle – szczególnie w języku angielskim.
No dobra, ALE nie mam zamiaru ręcznie przesyłać zdjęć do jakiegoś chatbota czy innego API, żeby później wkleić opis w Webflow. Prawdopodobnie szybciej byłoby napisać je „z palca”.
Wąskie gardło
Bardzo szybko zorientowałem się, że kluczowe dla powodzenia projektu będzie integracja z Webflow. Ręczne uzupełnianie metadanych zdjęć nie było moim marzeniem.
Po krótkim researchu odkryłem, że Webflow wypuściło świeżutkie API pozwalające zarówno na odczyt assetów, jak i ich modyfikację. BINGO!
Poszło szybciej, niż myślałem!
Człowiek w pętli
Kolejnym założeniem było przynajmniej przeczytanie wygenerowanych alt tagów i ewentualna korekta.
Oczywistym rozwiązaniem okazało się podejście tabelkowe – Google Sheet + Google Apps Script.
Model do opisów
Mimo że samo zaimportowanie bazy assetów z Webflow do arkusza już znacząco ułatwiało zadanie napisania alt tagów (nawet ręcznie byłoby szybciej niż w Webflow), to plan był o wiele bardziej ambitny! W końcu wszędzie wszyscy o tym mówią: wykorzystać AI.
-
Gemini - Skoro byłem już w środowisku Google, pod ręką było Gemini. Ochoczo zleciłem modelowi opisywanie kolejnych obrazków, natomiast moja radość nie trwała długo – momentalnie wykorzystałem mój darmowy miesięczny limit.
-
ChatGPT - Następnym modelem, w kierunku którego spoglądałem, był nasz kultowy chatbot. O ile w manualnych testach dostarczał wspaniałe opisy obrazków, to magia się skończyła po przeglądnięciu cennika.
-
llama-3.2-11b-vision-instruct - Zacząłem szukać tańszych alternatyw. Wówczas Cloudflare oferowało darmowe modele w wersji beta.
Stworzyłem Worker AI z prostą obsługą API i połączyłem go z moim App Scriptem.
Model był w stanie dostarczać sensowne opisy w języku angielskim.
Tłumaczenie na język polski
Na tym etapie miałem już sprawny system do tworzenia opisów – wystarczyło je tylko przetłumaczyć na język polski. Do tego celu wykorzystałem API oferowane przez DeepL. Dla moich potrzeb darmowy limit był w zupełności wystarczający do przetłumaczenia wszystkich alt tagów.
Zaufanie vs kontrola
Mój system posiadał dwa miejsca, które mogły generować potencjalne błędy: jednym był model generujący opis, a drugim – tłumaczenie.
Zdecydowałem się na ręczne przeglądnięcie wszystkich wygenerowanych alt tagów. Ku mojemu zaskoczeniu, niewiele z nich wymagało korekty.
Cały proces był dość przyjemny, bo odbywał się w arkuszu, w którym obok finalnego opisu miałem do dyspozycji również wczytany obrazek.
Chwila prawdy
Zwieńczeniem całej operacji kanapowej (bo projekt powstawał wieczorem na kanapie) było przesłanie wszystkich alt tagów z powrotem do Webflow.
W tym miejscu wystarczyło trzymać się poniżej maksymalnej częstotliwości zapytań – co było bardzo łatwe do osiągnięcia.
Podsumowanie
Przy odrobinie researchu i garści cebuli udało się stworzyć półautomatyczny generator alt tagów wspierany przez sztuczną inteligencję.
Jeżeli ktoś jest zainteresowany wykorzystaniem tego na swoim podwórku, to poniżej linkuję zarówno kod Workers, jak i App Script niezbędny do uruchomienia maszynki 😄
