Prosty i nowoczesny frontend dla narzędzia analizy tekstu ai – jasnopis.pl

Jasnopis to narzędzie, które sprawdza, jak trudny w odbiorze jest polski tekst, i pomaga go uprościć. Ocenia zrozumiałość w siedmiostopniowej skali, wskazuje trudne słowa oraz zbyt długie zdania, a w trybie upraszczania proponuje prostszą wersję tekstu.

Korzystają z niego urzędy, firmy i wszyscy, którym zależy na prostym języku. Byłem odpowiedzialny za stworzenie frontendu nowej strony, opartego na nowoczesnym edytorze blokowym WordPressa i komponentach w React.

Jasnopis działał wcześniej na starszym systemie, a nowa strona miała połączyć trzy obszary: serwis informacyjny, sklep z pakietami i szkoleniami oraz samo narzędzie. Sam proces analizy tekstu odbywa się przez zewnętrzne API oparte na AI, po czym sklep wyświetla użytkownikowi szczegółowe parametry jego tekstu.

Zbudowałem motyw na własnym, lekkim starterze w PHP 8.3, z jasno rozdzieloną warstwą widoków, sekcji i bloków. Każdy typ strony renderuje dedykowana klasa widoku oparta na wzorcu Template Method, a nowe bloki Gutenberga są wykrywane i rejestrowane automatycznie.

Kod jest w pełni zgodny ze standardami WordPress Coding Standards (sprawdzanymi automatycznie przez PHPCS), dzięki czemu nowe elementy dodaje się szybko i przewidywalnie.

Sercem strony jest blok analizy tekstu — dedykowana aplikacja w React osadzona jako blok Gutenberga. Użytkownik wkleja tekst lub wgrywa plik, wybiera tryb (analiza albo upraszczanie) oraz ustawia docelowy poziom trudności i zakres zamian słów (synonimy, hiperonimy).

Sklep WooCommerce odpowiada za sprzedaż pakietów i szkoleń.

Szkolenia posiadają zdefiniowane terminy, wyświetlają się automatycznie w dedykowanym bloku według daty, a po ich rozpoczęciu sprzedaż jest blokowana. Zespół klienta buduje strony z kilkunastu autorskich bloków przygotowanych pod Jasnopis (m.in. tabele cenowe, oferty, realizacje, karuzela, FAQ, wizytówki zespołu, sekcja kontaktowa), wykorzystując też dedykowane typy treści (CPT) dla ofert i realizacji.

Całość zaprojektowałem zgodnie z wymogami WCAG 2.1 na poziomie AA oraz Europejskiego Aktu o Dostępności. Oznacza to odpowiedni kontrast, rozmiary tekstu skalowane w jednostkach względnych, widoczny focus, poprawną semantykę formularzy i zakładek oraz respektowanie preferencji użytkownika dotyczących ograniczenia animacji.