Jakiś czas temu na GitHubie pojawił się projekt screenshot-to-code. Jest to prosta aplikacja, która przekształca zrzuty ekranu w kod (HTML/Tailwind CSS, React, Bootstrap lub Vue) który następnie możecie wykorzystać na własnej stronie internetowej.
Wykorzystuje ona GPT-4 Vision do generowania kodu oraz DALL-E 3 do tworzenia podobnych obrazów. Można również wprowadzić URL, aby sklonować istniejącą stronę internetową.
Aplikacja ma frontend oparty na React/Vite oraz backend w FastAPI. Do jej działania potrzebny jest klucz API OpenAI z dostępem do API GPT-4 Vision
Możesz wypróbować ją tutaj. (potrzebujesz własny klucz OpenAI - klucz musi mieć dostęp do GPT-4 Vision. Szczegóły znajdziesz w sekcji poniżej).
Aplikacje oczywiście można też zainstalować lokalnie. Oczywiście narzędzie w fazie noworodka, ciekawe jak projekt będzie się rozwiał za 6-12 msc.
Naszym zdaniem kolejne świetne narzędzie do budowania prototypów/MVP.
Konfiguracja Systemu Lokalnego
Aby skonfigurować "Screenshot to Code" na swoim systemie, wykonaj poniższe kroki:
Krok 1: Uzyskanie Klucza API OpenAI
(możesz pominąć ten krok jeżeli już posiadasz swój klucz)
Krok 1: Utworzenie Konta w OpenAI
- Aby uzyskać klucz API, najpierw musisz założyć konto na stronie OpenAI. Jeśli jeszcze tego nie zrobiłeś, zarejestruj się na stronie OpenAI.
Krok 2: Zalogowanie się do Panelu Użytkownika OpenAI
- Po zarejestrowaniu i zalogowaniu się na swoje konto OpenAI, przejdź do panelu użytkownika.
Krok 3: Przejście do Sekcji Kluczy API
- W panelu użytkownika OpenAI znajdź sekcję „API Keys” (Klucze API). Jest to miejsce, w którym możesz zarządzać swoimi kluczami API.
Krok 4: Tworzenie Nowego Klucza API
- W sekcji „API Keys” wybierz opcję „Create New Key” (Utwórz Nowy Klucz) lub podobną, aby utworzyć nowy klucz API.
- Postępuj zgodnie z instrukcjami na ekranie, aby wygenerować klucz. Może być wymagane podanie dodatkowych informacji lub potwierdzenie celu użycia klucza.
Krok 5: Bezpieczne Przechowywanie Klucza API
- Gdy klucz zostanie wygenerowany, skopiuj go i przechowuj w bezpiecznym miejscu. Klucz API jest poufną informacją i nie powinien być udostępniany publicznie.
- Jeśli klucz zostanie ujawniony, istnieje ryzyko nadużycia Twojego konta i związanych z tym kosztów.
Krok 6: Integracja Klucza API z Twoim Projektem
- Skopiowany klucz API można teraz zintegrować z Twoim projektem. W miejscu, gdzie jest wymagany klucz API (np. w konfiguracji Twojego chatbota opartego na AI), wklej skopiowany klucz.
Uwagi Końcowe
- Klucz API OpenAI umożliwia dostęp do różnych modeli i funkcji oferowanych przez OpenAI, w tym możliwość tworzenia asystentów chatbotów AI.
- Pamiętaj o regularnym monitorowaniu aktywności na Twoim koncie OpenAI, aby uniknąć nieoczekiwanych kosztów związanych z nadmiernym użyciem.
Krok 2: Instalacja Repozytorium
- Przejdź do linku podanego w filmie, aby pobrać i zainstalować repozytorium "Screenshot to Code" na swoim lokalnym systemie.
- Wprowadź swój klucz API OpenAI lub kod dostępu podczas pierwszego logowania.
Krok 1: Wybór Języka
- Po uruchomieniu narzędzia wybierz preferowany język kodowania z rozwijanego menu.
Krok 2: Wybór Zrzutu Ekranu
- Wybierz zrzut ekranu, który chcesz przekonwertować na kod.
Krok 3: Konwersja i Otrzymanie Kodu
- Narzędzie rozpocznie konwersję wybranego obrazu na kod.
- Po zakończeniu procesu konwersji otrzymasz wygenerowany kod.
Krok 4: Personalizacja Kodu
- Możesz wprowadzić dodatkowe instrukcje, aby wprowadzić zmiany w wygenerowanym kodzie.
Krok 5: Podgląd i Edycja
- Sprawdź wygenerowany kod w wersji na komputer i na urządzenia mobilne.
- Wypróbuj kod na stronach takich jak CodePen, aby zobaczyć, jak działa w praktyce.
Krok 6: Modyfikacja Kodu
- Jeśli potrzebujesz dokonać zmian, możesz modyfikować wygenerowany kod według własnych potrzeb.