Jak zbudować generator opisów AI w godzinę

Dziś krótki poradnik jak wykorzystując OpenAI stworzyć własną aplikację generującą opisy produktów.

Stworzyłem pierwszy film instruktażowy, więc do wyboru: czy oglądać czy czytać :) Z tej okazji kupiłem też pakiet premium na Loom więc łapki w górę mile widziane! 😂

Tworzenie treści przez Sztuczną Inteligencje jest ostatnio gorącym tematem, głównie za sprawą Dall-E i generowania obrazów. Dostęp do tego algorytmu staje się coraz bardziej powszechny i coraz więcej w internecie widzimy fantastycznych grafik. Równolegle jednak jesteśmy świadkami wysypu produktów opartych na GPT-3 - czyli generowaniu treści tekstowych - jest to znacznie bardziej dojrzały produkt który jest wystawiony przez OpenAI przez API gotowy do komercjalizacji - czyli można budować na nim rozwiązania.

Produktem top-of-mind w dziedzinie pisania tekstów jest pewnie copy.ai i ten serwis jest inspiracją dzisiejszego poradnika. Jedną z opcji jest generator opisów produktów na podstawie nazwy i paru cech.

Celem dzisiejszego ćwiczenia jest zbudowanie w Bubble podobnego interfejsu i podpięcie go poprzez API do Open AI.

Oswojenie się z OpenAI

Pierwszym krokiem jest założenie konta na openai.com i zapoznanie się z przykładami (Examples) w dziale API. Będziemy pracowali na modelu "Product name generator". "Open in Playground" przeniesie nas do interfejsu w którym będziemy mogli dopracować nasz model.

OpenAI jest bowiem potwornie szeroką platformą i prawdą jest, że mniej znaczy więcej - by zbudować jakąś wartość dla użytkownika warto jest ograniczyć się do pewnej niszy w której nasz model będzie faktycznie osiągał założone przez nas cele. Ja w tym krótkim poradniku kompletnie pomijam ten aspekt i skupiam się na integracji OpenAI z Bubble ale podkreślam, że właśnie tutaj jest serce tworzonej aplikacji - Bubble będzie jedynie interfejsem.

OpenAI działa na zasadzie wpisywania poleceń. Więc nasze oczekiwanie też określamy tekstowo. "Write two different product description based on name and keywords" determinuje to jaką dostaniemy odpowiedź - warto pobawić się różnymi wariantami.

Gdy jesteśmy zadowoleni klikamy w (1) View Code a następnie wybieramy cURL (2) i kopiujemy do schowka.

Bubble

W Bubble tworzymy interfejs składający się z 2 inputów i guzika. Pobieramy wtyczkę API Connector i dodajemy nowe zapytanie API. Na dole mamy opcję "Import another call form cURL" - wklejamy skopiowany kod ze schowka.

W tym momencie musimy jeszcze skoczyć do OpenAI po nasz klucz uwierzytelniający. W menu pod naszym avatarem klikamy "View API keys" a następnie tworzymy nowy klucz i kopiujemy go do schowka. Nikomu nie udostępniaj swojego klucza - każde zapytanie API nim podpisane będzie powiązane z Twoim kontem.

W sekcji Headers zmieniamy wartość klucza Authorization tak by brzmiała "Bearer <klucz>".

Następnym krokiem jest umożliwienie edycji zapytania które będziemy wysyłać do OpenAI. W polu Body będzie groźnie wyglądająca strukturka - to nic innego niż zapytanie które wykonaliśmy w piaskownicy OpenAI - tutaj w sekcji prompt będzie treść zapytania do której doszliście testując model. By aplikacja miała sens dla użytkownika część zapytania musi być dynamiczna - w moim przypadku będą to wartości name oraz keywords (1).

Bubble ma bardzo przyjazny sposób na dodawanie zmiennych pól - trzeba je zaznaczyć trójkątnymi nawiasami a wtedy dodawane są "Body parameters" (2). To co będzie między nawiasami stanie się nazwą naszej zmiennej. Value będzie jej wartością - do celów testowych powinniśmy tam coś wpisać (najlepiej to co objęliśmy nawiasem). Odznaczmy checkbox private (3) - inaczej aplikacja nie pozwoli nam dynamicznie dodawać danych do tych parametrów.

Warto pamiętać to ustawienie charakteru zapytania. Jest to informacja dla Bubble, gdzie ma wyświetlać możliwość jego wykorzystania. "Action" - pozwala wykorzystać zapytanie przy budowaniu Workflows - wtedy można wybrać je jako odrębny krok w, a "Data" - w budowaniu "Expressions" które uzupełniają pola - wtedy będzie dostępne pod opcją "Get data from external API". Tu nie ma złej / dobrej odpowiedzi - ustawiamy tak jak potrzebujemy. Zazwyczaj Action.

Last but not least - koniecznie dokonajmy inicjalizacji zapytania - w przeciwnym razie Bubble nie będzie wyświetlał go w kontekstowym interfejsie. Ta opcja jest na samym dole edycji zapytania API.

Interfejs

Zbudujmy teraz prosty interfejs składający się z dwóch inputów, guzika i elementu tekstowego który będzie wyświetlał nasz wynik. Coś takiego wystarczy:

Mając interfejs możemy przejść do budowania logiki aplikacji - wybieramy nasz guzik "Generuj opisy" i w zakładce Apperance wybieramy guzik "Start/edit workflow".  Pierwszym krokiem jest wywołanie naszego API (jeśli nie ma go w sekcji Plugin, oznacza to, że albo nie dokonaliśmy inicjalizacji zapytania lub jest oznaczone jako Data w API Conncetorze).

Logika biznesowa

W kroku pierwszym wyszukujemy nazwę jaką nadaliśmy naszemu zapytaniu (będzie w sekcji Plugins). A następnie linkujemy pola name i keywords z inputami.

Na tym etapie gdy klikniemy Preview będziemy mogli przetestować naszą aplikację - zapytanie zostanie wysłane po API do OpenAI i otrzymamy odpowiedź, ale aplikacja nie zrobi z nim nic widocznego dla użytkownika. Treść odpowiedzi zapiszemy jako Custom State na stronie którą tworzymy - pamiętajmy, że to byt ulotny bowiem stany są czyszczone przy odświeżeniu / zmianie strony.

Element - nazwa naszej strony; Custom state - tworzymy nową nazwę naszego stanu; Value - wybieramy Results of step 1 choices: each item's text:first item - to nasza odpowiedź z OpenAI

Gdy mamy odpowiedź zapisaną możemy podlinkować pole tekstowe tak by wyświetlało wartość stworzonego Custom State.

Klikamy Preview i testujemy aplikację

To bardzo proste zastosowanie AI. Klucz do jakościowego produktu leży w opanowaniu ustawień zapytania do OpenAI oraz douczeniu modelu do naszego konkretnego przypadku.

Z samą aplikacją można zrobić jeszcze wiele rzeczy - rozbić propozycje na elementy listy i wyświetlać je jako odrębne byty, dodać opcję zapisywania do bazy danych najlepszych odpowiedzi etc.