ChatGPT stworzył dla mnie rozszerzenie Chrome — PasteBuddy

May 06 2023
OpenAI wykonało całą ciężką pracę, od zaplecza po logo, pozwalając mi działać jako kierownik projektu w bardzo małym zespole programistów
To jest PasteBuddy, rozszerzenie Chrome, które zapewnia większą elastyczność w schowku. Jest obecnie wymieniony w sklepie Chrome, jest kilku aktywnych użytkowników, a prawie każdy element został zbudowany przy użyciu sztucznej inteligencji.
Obraz wygenerowany przez DALL-E

To jest PasteBuddy, rozszerzenie Chrome, które zapewnia większą elastyczność w schowku. Jest obecnie wymieniony w sklepie Chrome, jest kilku aktywnych użytkowników, a prawie każdy element został zbudowany przy użyciu sztucznej inteligencji.

OpenAI wykonało całą ciężką pracę, od zaplecza po logo, pozwalając mi działać jako kierownik projektu dla bardzo małego zespołu programistów. W ciągu ostatnich kilku tygodni przeszedłem od zera do wydawcy rozszerzeń Chrome. To było łatwiejsze niż myślisz. Trudniej niż możesz sobie wyobrazić. I cholernie dużo zabawy.

Czy są dostępne inne aplikacje do schowka? Tak. Ale nie o to chodzi. To zbadało, jakie drzwi może nam otworzyć sztuczna inteligencja. PasteBuddy może nie jest najbardziej błyskotliwą, doskonale zaprojektowaną, pozbawioną błędów aplikacją do schowka, ale jest moja… przynajmniej dzięki sztucznej inteligencji.

Co to jest PasteBuddy?

Krótko mówiąc, PasteBuddy umożliwia zapisywanie tekstu i uzyskiwanie do niego dostępu za pośrednictwem lokalnej pamięci Chrome. Dlaczego chcesz to zrobić? Jeśli musisz skopiować złożone formularze z jednej witryny do drugiej lub być może masz dużo tekstu, którego używasz wielokrotnie, PasteBuddy może ci w tym pomóc.

Możesz oznaczyć zapisane pozycje i wkleić zapisaną wartość za pomocą przycisku. Nie lubisz używać poleceń klawiaturowych? Bez problemu. Jest ładny interfejs użytkownika, który pozwala z łatwością dodawać, edytować i wklejać!

Wolisz wyjaśnienie przez .gif? Mam cię w zasięgu ręki!

Wizja

Schowek to jedno z najważniejszych narzędzi cyfrowych, jakie mamy. Możliwość kopiowania i wklejania za pomocą kliknięcia kilku przycisków jest niczym innym jak cudem. Ale ponieważ schowek jest ograniczony do jednej skopiowanej wartości, utknęliśmy w nieskończoność kopiując i wklejając, kopiując i wklejając. To męczące. Gdybyśmy tylko mogli skopiować, nie wiem, pięć rzeczy do schowka i wywoływać je do woli… Tak narodził się pomysł na PasteBuddy.

Teraz mam podstawową wiedzę na temat tworzenia stron internetowych, ale nigdy tak naprawdę nie miałem pewności siebie, aby rozpocząć projekt o takim zakresie. Mogłem zatrudnić programistę, ale ten pomysł bardziej przypominał eksplorację niż projekt warty czasu innego człowieka. Jednak wraz z pojawieniem się konwersacyjnej sztucznej inteligencji miałem teraz idealnego kompana do walki. AI to programista, który nigdy nie ma dość twoich głupich pytań i nie dba o to, ile razy prosisz go o przepisanie kodu. Nie denerwuje się tobą. Na dzień publikacji tej publikacji korzystanie z niego jest bezpłatne.

Dosyć Bełkotu. Dostań się do budynku!

Prototypowanie

Aby szybko zacząć, polegałem na codepen.io jako moim narzędziu do prototypowania. Oto jak to działało. Poprosiłem ChatGPT o podanie przykładowej aplikacji. Na przykład poprosiłbym sztuczną inteligencję w ten sposób:

W ciągu kilku sekund sztuczna inteligencja wypluwa HTML i JavaScript. Szybko wklejam przykładowy kod do codepen, aby sprawdzić, czy wszystko działa. Jeśli coś jest zepsute, mówię ChatGPT, że są problemy i proszę o ich naprawienie. Zamiast martwić się formalnościami, ustalaniem priorytetów projektów czy negocjacjami terminów realizacji, otrzymuję natychmiastową odpowiedź — w kodzie!

To jest szybkie prototypowanie.

Używam codepen.io do prototypowania prostych aplikacji internetowych.
Dodanie funkcjonalności do aplikacji.

Po kilku takich cyklach miałem podstawowe ramy gotowe do spakowania. Wkleiłem więc cały bałagan kodu do ChatGPT, prosząc go, by „pokazał mi, jak zrobić z tego rozszerzenie do Chrome”. Odpowiedział, że manifest.jsonplik będzie sercem rozszerzenia i że aplikacja zostanie opracowana przy użyciu JavaScript, HTML i CSS. Wyjaśniono, jak załadować i przetestować rozpakowane rozszerzenie. Następnie podano przykłady każdego kluczowego dokumentu, który miał ożywić PasteBuddy.

Ale…

Plik manifestu był w niewłaściwej wersji. Interfejsy API użyte w prototypie codepen nie były tymi samymi, które były potrzebne w rozszerzeniu Chrome. Nie było background.jsmowy o żadnej architekturze słuchacza wymaganej do interakcji w różnych zakresach.

To był bałagan.

Wiedziec to wszystko

W tym momencie warto zauważyć, że GPT-3 tak naprawdę nie „wie”, co robi mój kod. Po prostu odpowiada, najlepiej odgadując, o co proszę. W małych kawałkach jest to niezwykle skuteczne. Małe fragmenty kodu można natychmiast zweryfikować — działają lub nie. Jeśli kod zgłosi błąd, możesz przekazać go z powrotem do sztucznej inteligencji z pytaniem „dlaczego otrzymuję ten błąd” i możesz zasadnie oczekiwać, że odpowie zaktualizowanym kodem lub przewodnikiem krok po kroku dotyczącym rozwiązywania problemów problem.

Problem, z którym się spotkałem, można sprowadzić do prostego przepisu. To była jedna część: nie mam pojęcia, co robię, połączona z dwiema częściami: wytwarzanie sztucznej inteligencji. Nie zadawałem właściwych pytań. Byłem zbyt dosłowny i zbyt słabo rozumiałem zawiłości frameworka rozszerzeń. Tak więc sztuczna inteligencja wróciłaby z rozsądnymi odpowiedziami na nierozsądne pytania.

Następnie pojawił się problem polegający na tym, że AI brakowało wizji wysokiego poziomu. Gdy mój projekt przekształcił się z aplikacji jednostronicowej w aplikację obejmującą wiele dokumentów i frameworków, nie mogłem już polegać na zrzucaniu całej bazy kodu do monitu. Sztuczna inteligencja potrafiła zrozumieć pytania dotyczące odrębnych tematów, ale nie miała możliwości zrozumienia, w jaki sposób wszystkie elementy pasują do siebie. Nieraz wpadaliśmy w pętlę rozwiązywania problemu z problemem.

Było oczywiste, że sztuczna inteligencja jest świetnym kumplem do programowania, ale stawało się jasne, że nie wykona całej pracy za mnie. To świetne narzędzie, ale nie zamiennik zawartości całego paska narzędziowego. Wróciłem więc do niezawodnej wyszukiwarki Google, pytania dotyczącego przepełnienia stosu i głębokiego nurkowania w dokumentach programistów, aby znaleźć wyjście z trudnych problemów. Ku mojemu zdziwieniu ChatGPT był wyjątkowo dobry w tworzeniu pełnotekstowej strony Stack Overflow i wdrażaniu jej sugestii w rozwiązaniu. Czasami opłaca się wyjść z pętli i wnieść świeżą perspektywę.

Kawałek po kawałku moje zrozumienie architektury rozszerzeń Chrome rosło, a moje pytania do sztucznej inteligencji stały się bardziej skuteczne. Nauczyłem się korzystać z monitów, takich jak „dodaj instrukcje debugowania do tego kodu” i „sugeruj, jak to przepisać, aby lepiej wykorzystać kod”. W miarę postępów program zaczął nabierać kształtu. Mógłbym przechowywać podświetlone wartości za pomocą CTRL + CMD + 7. Mógłbym je wkleić z CTRL+CMD+9. Czyszczenie całej pamięci zostało zakończone. Dodałem interfejs użytkownika dla łatwej interakcji z pamięcią. Wszystko, co było potrzebne, aby upublicznić to, to konto wydawcy aplikacji i logo!

Pakując to wszystko

Oczywiście zwróciłem się do DALL-E, aby wygenerować serię potencjalnych obrazów dla logo PasteBuddy. Kiedy wszedłem na stronę główną DALL-E , poproszono mnie o fajnego misia w okularach przeciwsłonecznych i byłem uzależniony. Postanowiłam to nieco zmodyfikować, idąc z buldogiem francuskim w okularach, w stylu słynnego streetartowca, aby ucieleśnić ducha PasteBuddy. Poniżej przedstawiam kilka opcji, między którymi musiałem się zdecydować. Co myślisz? Czy wybrałem właściwy?

Wkraczamy w świat, w którym każdy może tworzyć aplikacje od góry do dołu, od kodu do logo, bez potrzeby głębokiej wiedzy technicznej. Muszę sobie wyobrazić, że w miarę rozwoju modeli AI pętla między myślą a produktem będzie coraz mniejsza. Brać się do rzeczy.

Pozdrawiam,
Reed