https://aie24.pl/
Asystent AI Replit nazywa się Replit AI. Po otwarciu obszaru roboczego zobaczysz łącze do AI w panelu Narzędzia w lewym dolnym rogu ekranu. Kliknięcie ikony AI otwiera nową zakładkę po prawej stronie edytora kodu. Replit AI jest dostępny dla wszystkich członków Replit. Jednak płatni członkowie Replit mogą uzyskać dostęp do bardziej zaawansowanej wersji AI, przechodząc na stronę https://replit.com/cycles, gdzie możesz również zobaczyć swoje saldo Cycles (wirtualnych tokenów Replit) i kupić Cycles. Możesz zdobywać Cycles, wykonując Bounties. Replit AI ma cztery narzędzia: Generate, Debug, Explain i Modify, oprócz uzupełniania kodu w stylu Copilot podczas kodowania. Aby uzyskać dostęp do narzędzi Generate, Debug i Explain, kliknij prawym przyciskiem myszy w edytorze kodu. Narzędzia Modify i Explain, które odpowiednio zmieniają i wyjaśniają kod, są dostępne tylko wtedy, gdy wybierzesz kod, który chcesz zmodyfikować lub wyjaśnić za pomocą AI. Wszystkie narzędzia można również używać za pośrednictwem interfejsu czatu. Na dole panelu AI znajduje się pole tekstowe do wyświetlania modelu. Wykonaj następujące kroki, aby rozpocząć korzystanie z Replit w celu zbudowania witryny internetowej dla fikcyjnego zespołu punkrockowego o nazwie Grapefruit Pulp:
- Podaj AI następujący monit:
Działaj jak profesjonalny projektant stron internetowych. Użyj HTML i CSS, aby zaprojektować stronę główną mojego zespołu punkrockowego „Grapefruit Pulp”. Dodaj symbol zastępczy na zdjęcie zespołu. Nawigacja witryny powinna zawierać linki do dat tras koncertowych, informacji kontaktowych i galerii zdjęć. Po chwili model zwraca kod HTML i CSS.
- Zaznacz wszystko w index.html i usuń przykładowy kod szablonu.
- Kliknij łącze Wstaw u góry odpowiedzi HTML, aby wstawić wygenerowany kod HTML do index.html. Interfejs czatu nie może bezpośrednio współdziałać z Twoimi plikami, więc musisz samodzielnie skopiować wszelkie sugestie, które Ci się podobają, z okna czatu do swoich plików (używając funkcji kopiuj i wklej lub łącza Wstaw).
- Otwórz style.css i usuń jego zawartość.
- Użyj łącza Wstaw u góry odpowiedzi CSS, aby wstawić kod CSS do style.css.
- Kliknij przycisk Uruchom u góry IDE, aby otworzyć swoją witrynę w widoku internetowym Replit.
Replit AI ma dwa różne modele: podstawowy i zaawansowany. Podstawowy model jest szybszy, ale bardziej ograniczony. Zaawansowany model jest większy i wolniejszy, ale znacznie bardziej prawdopodobne jest, że da lepszą odpowiedź na niejasne lub kreatywne pytanie. Zaawansowany model jest dostępny tylko z płatnym kontem Replit. Jeśli masz płatne konto, możesz spróbować ponownie pytania z zaawansowanym modelem, przełączając wybór Podstawowy/Zaawansowany na dole okna AI. Lub jeśli jesteś płatnym członkiem, możesz użyć zaawansowanego modelu domyślnie, klikając przycisk Zaawansowany na górze interfejsu czatu AI . Aby zobaczyć, jak dobry jest zaawansowany model Replit AI w przypadku trudniejszych zadań, dałem mu następujący komunikat:
Użyj SVG i CSS, aby narysować grejpfruta ubranego w skórzaną kurtkę. Powinien zostać wstawiony w miejsce obrazu zastępczego
Ta zachęta wydawała się przekraczać granice kreatywności modelu, chociaż może to być początek niesamowitego logo.
Następnie przeszedłem do pracy w galerii zdjęć. Dałem modelowi monit pokazany na rysunku

Po przesłaniu kilku zdjęć efekt był przyzwoity i zbliżony do tego, co sobie wyobrażałem. Prawidłowo użyte narzędzia asystenta kodowania, takie jak te, o których dowiedziałeś się w tym rozdziale, mogą sprawić, że staniesz się bardziej produktywnym koderem. W następnym rozdziale dowiesz się, jak rozmawiać z narzędziami czatu AI, aby generować pomysły i kod.