Jak wykorzystałem sztuczną inteligencję do opracowania nowoczesnej aplikacji internetowej

Generative AI, takie jak ChatGPT, zapoczątkowało nową erę rozwoju oprogramowania, w której każdy może opracować użyteczną, nowoczesną aplikację, mając niewielkie lub żadne umiejętności kodowania. W tym artykule pokażę, jak wykorzystałem AI do opracowania narzędzia, na którym teraz polegam każdego dnia.

Problem, który próbowałem rozwiązać

Od czasu powstania ChatGPT i innych modeli języka AI, pewne słowa stały się silnie związane z treścią generowaną przez AI (jeden z wielu powodów, dla których nie powinieneś używać ChatGPT do pisania). Przykłady obejmują „delve”, „tapestry” i „testament”. Jako pisarz zawsze wierzyłem w używanie właściwego słowa w odpowiednim kontekście. Kiedy słowo pasuje i wyraża dokładnie to, co chcę przekazać, czuję, że powinienem móc go użyć.

Niestety, wielu moich klientów nie widzi tego w ten sam sposób. Są coraz bardziej ostrożni w stosunku do treści, które mogą brzmieć jak generowane przez AI. Ponieważ nie jestem AI (przynajmniej tak mi się wydaje), nie pamiętam wszystkich słów i zwrotów powszechnie nadużywanych przez modele językowe AI, więc trudno mi ich unikać.

Dlatego postanowiłem stworzyć narzędzie, które analizowałoby dostarczony tekst na podstawie listy słów i wyróżniało potencjalnie „brzmiące jak AI” słowa i frazy. Takie narzędzie można opracować, korzystając z trzech kluczowych technologii internetowych: HTML (strukturyzuje zawartość strony internetowej), CSS (używany do stylizowania zawartości strony internetowej) i JavaScript (zmienia statyczną stronę internetową w „aplikację internetową”, która robi to, czego chcemy).

Wybór najlepszej sztucznej inteligencji do tworzenia aplikacji internetowych

Projekt taki jak mój „ AI Vocab Checker ” jest idealnym kandydatem do wspomaganego sztuczną inteligencją tworzenia oprogramowania, ponieważ najlepsze modele sztucznej inteligencji zostały wyszkolone na ogromnych ilościach kodu HTML, CSS i JavaScript oraz dokumentacji, dzięki czemu mogą generować kod, udzielać wskazówek dotyczących najlepszych praktyk, sugerować efektywne implementacje, a nawet pomagać w rozwiązywaniu problemów, które mogą pojawić się w trakcie tworzenia.

Wszystkie 3 najlepsze duże modele językowe (LLM) w tabeli liderów LMSYS Chatbot Arena (GPT-4o, Claude 3.5 Sonnet i Gemini Advanced) mogą obsługiwać zadania związane z tworzeniem stron internetowych z imponującą biegłością. Ostatecznie wybrałem jednak Claude 3.5 Sonnet do tego projektu.

Claude 3.5 Sonnet był moim asystentem kodowania AI z wyboru, głównie dzięki funkcji „Projects”, która pozwoliła mi stworzyć przestrzeń roboczą poświęconą wyłącznie rozwojowi mojej aplikacji. Oczywiście pomaga również to, że Sonnet przewyższa konkurencję w zadaniach kodowania uwzględnionych w benchmarku HumanEval .

Tworzenie mojej aplikacji internetowej z Claude’em

Zacząłem od utworzenia nowego projektu w Claude dla narzędzia AI Vocab Checker, wybierając kartę Projekty w lewym panelu (możesz ją wyświetlić, najeżdżając kursorem myszy na logo Claude w lewym górnym rogu aktywnego czatu), a następnie klikając przycisk Utwórz projekt .

Gdy już to zrobiłem, musiałem opisać problem Claude’owi. Oto podpowiedź, którą wymyśliłem:

Generalnie, chcesz podać ogólny opis tego, co chcesz osiągnąć, a następnie podać jak najwięcej szczegółów. Wszystko, czego nie opiszesz szczegółowo, zostanie pozostawione interpretacji AI, która może być zgodna z Twoją wizją lub nie.

Claude’owi zajęło chwilę wypisanie kodu, który następnie wkleiłem do pliku index.html za pomocą Visual Studio Code. Następnie mogłem po prostu otworzyć plik index.html w przeglądarce internetowej i to była początkowa wersja aplikacji AI Vocab Checker, którą wymyślił Claude:

Jak widać, Claude był w stanie stworzyć funkcjonalną aplikację za pomocą jednego monitu, a aplikacja faktycznie robi to, co powinna! Jest jednak kilka kwestii, które są dość oczywiste po bliższym przyjrzeniu się:

• Pierwsze dwa pola tekstowe są nieco większe od dolnego pola tekstowego.
• Nazwa aplikacji jest nieprawidłowa (zapomniałem jej podać).
• Aplikacja nie wykorzystuje w pełni dostępnej przestrzeni poziomej na urządzeniach stacjonarnych.
• Wszystkie słowa są podświetlone tym samym kolorem (co utrudnia analizę wyników).
• Brak statystyk użycia dla wykrytych słów.
• Claude nie korzystał z żadnych bibliotek ani frameworków, mimo że był do tego zachęcany.

Więc odpowiedziałem na to pytanie następująco:

A oto wynik:

To jest znacznie lepsze i zajęło tylko jeden dodatkowy monit. Claude wdrożył framework Bootstrap, aby uzyskać nowoczesny, responsywny projekt i bibliotekę mark.js, aby uzyskać lepsze wyróżnianie. Pod wrażeniem tego, jak ich uwzględnienie poprawiło aplikację, zapytałem Claude’a, jakich innych frameworków lub bibliotek moglibyśmy użyć, a AI zasugerowała Vue.js, Chart.js, Tippy.js, Natural, FileSaver.js i kilka innych.

Spośród sugerowanych frameworków i bibliotek Chart.js wydawał się najbardziej przydatny, ponieważ można go używać do tworzenia wizualnych reprezentacji statystyk użycia słów, takich jak wykresy słupkowe lub kołowe. Poprosiłem Claude’a o jego wdrożenie, a także poinstruowałem go, aby zastąpił tekst do analizy wynikiem w celu poprawy doświadczenia użytkownika. Po kilku drobnych poprawkach i dostosowaniach projektu, oto, co wymyśliłem:

Jeśli chodzi o moje osobiste potrzeby, ta wersja mojego narzędzia do sprawdzania słownictwa AI Vocab Checker w zupełności je zaspokaja. Stworzenie go zajęło mi zaledwie 15 minut, a wykorzystałem do tego moje bardzo ograniczone umiejętności w zakresie tworzenia stron internetowych, które zdobyłem przez lata, korzystając z różnych bezpłatnych witryn programistycznych.

Zdjęcie na okładce i zrzut ekranu: David Morelo.