[GN] Screenshot-To-Code - GPT-4V로 화면 캡쳐를 코드로 변환하기

GeekNewsxguru님께 허락을 받고 GN에 올라온 글들 중에 AI 관련된 소식들을 공유하고 있습니다. :smiley_cat:


소개

NYTimes 캡쳐로 제작한 사이트 예시

Screenshot-To-Code - GPT-4V로 화면 캡쳐를 코드로 변환하기

데모 영상

유튜브 스크린샷으로 제작한 데모 영상

인스타그램 스크린샷으로 제작한 데모 영상

내용

  • GPT-4 Vision 을 이용해서 화면 스크린샷을 HTML/Tailwind CSS 코드로 변환
  • 화면에 이미지는 DALL-E 3 를 이용해서 비슷하게 보이는 이미지를 생성해서 대체 가능
  • 추가 프롬프트를 입력해서 원하는 대로 생성되는 코드를 수정 가능
  • React/Vite 프론트엔드 + FastAPI 백엔드

원문

출처 / GeekNews