https://lh7-us.googleusercontent.com/xAIdxDTR3MPxpdP7MXDg8orT-Ixdg4_pf4JxCp8h8jv0plPNIU-JYhAT2qUz6-bDzZxfHPLvxNuxUvBSUF_ErO_IG8y7NuCRy-Rr7hVi6uW8yZzOTRDoBLRhkodPc38_HLuvdhzIKlQdxUTzNVySRg

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)

https://lh7-us.googleusercontent.com/LxUxbiEIQzgq0AB1xjc4BcEIfqZM1JnjA18feyfFiVvY2NIUN7NicW01dETgFYBX_LVibg4cHIhgew0Ja7WFmBAIX2OkSVcuKttonAa6HI6PQdBMEQHBrljja62RFdxRw0OpaBbsDmOIIKbKGWhmOw

Krok 1: Utworzenie Konta w OpenAI