▲

GN⁺: Show HN: GPT Vision(OSS 도구)을 사용하여 스크린샷을 깔끔한 HTML 코드로 변환

 (github.com/abi)
2P by neo 6달전 | favorite | 댓글 1개

스크린샷을 코드로 변환하는 앱

  • 스크린샷을 HTML/Tailwind CSS로 변환하는 간단한 앱
  • GPT-4 Vision을 사용하여 코드를 생성하고, DALL-E 3으로 비슷한 이미지 생성
  • 데모를 보려면 아래 예시 섹션 참조

업데이트 내역

  • 이미지 생성이 필요 없는 경우 DALL-E 이미지 생성을 비활성화하는 설정 추가
  • 앱 내에서 직접 코드 확인 가능
  • AI가 스타일을 잘못 적용하거나 섹션을 놓친 경우 코드 업데이트 지시 가능

시작하기

  • React/Vite 프론트엔드와 FastAPI 백엔드로 구성된 앱
  • GPT-4 Vision API에 접근할 수 있는 OpenAI API 키 필요
  • 백엔드와 프론트엔드 실행 방법 제공, 로컬에서 앱 사용 가능

자주 묻는 질문(FAQ)

  • 백엔드 설정 중 오류 발생 시 해결 방법 제공
  • GPT4 Vision 모델이 포함된 OpenAI API 키 획득 방법 안내
  • 피드백, 기능 요청, 버그 보고 방법 안내

예시

  • NYTimes, Instagram 페이지, Hacker News 등의 원본과 복제본 예시 제공

호스팅 버전

  • OpenAI 키를 갖고 있어야 하며, GPT-4 Vision에 접근 가능해야 함
  • 시작하기 섹션에서 로컬 설치 지침 확인 가능

GN⁺의 의견

이 앱은 스크린샷을 웹 코드로 변환하는 혁신적인 도구로, 최신 AI 기술인 GPT-4 Vision과 DALL-E 3을 활용함이 가장 중요함. 이 기술은 웹 개발자와 디자이너에게 시간을 절약하고 창의적인 작업에 더 집중할 수 있는 기회를 제공함으로써 흥미롭고 매력적임. 또한, 사용자가 직접 AI를 지시하여 코드를 수정할 수 있는 기능은 사용자 경험을 개선하고, AI의 정확도를 높이는 데 기여함.

▲
neo 6달전  [-]
Hacker News 의견

  • 이 기술이 마법 같다고 느끼며, 신경망이 입력을 출력으로 매핑하는 함수 집합을 모델링한다는 개념은 이해하지만, GPT가 이미지를 HTML+Tailwind 텍스트 토큰으로 매핑하고 브라우저가 이를 렌더링하는 과정을 모델링하는 것이 놀랍다는 의견.

    GPT가 이미지의 픽셀 강도를 HTML과 Tailwind 텍스트 토큰으로 매핑하고, 브라우저가 이 토큰을 해석하고 렌더링하는 과정을 모델링하는 것에 대한 놀라움을 표현함.

  • 이 도구를 다이어그램 컴파일러로 생각할 수 있는지, Sketch나 Figma 같은 도구에서 생성된 아티팩트를 HTML/CSS/JS로 변환하는 빌드 파이프라인의 일부가 될 수 있는지에 대한 질문.

    도구가 다이어그램 컴파일러로서의 역할 가능성과 빌드 파이프라인에서의 활용 가능성에 대한 고찰.

  • Tailwind, HTML, JS를 사용하여 사용자가 제공한 웹 페이지 스크린샷을 기반으로 싱글 페이지 앱을 구축하는 프롬프트의 예시와 정확한 디자인 복제를 강조하는 지침.

    Tailwind, HTML, JS를 사용하여 정확한 웹 페이지 디자인 복제를 지시하는 프롬프트 예시.

  • 방어적 프롬프팅이 아닌 다른 방법이 더 나은 방향일 수 있지만, 이 기술이 작동한다는 것 자체가 놀라운 점이라는 개인적인 의견.

    방어적 프롬프팅에 대한 회의적인 견해와 기술의 작동에 대한 감탄.

  • "내 경력에 매우 중요하다"는 문구를 추가하면 출력 품질이 향상된다는 YouTube 연구 비디오를 언급하며, 이 문구가 다양한 작업에 대한 출력 품질을 개선한다는 의견.

    출력 품질 향상을 위한 특정 문구의 효과에 대한 언급.

  • 이 기술로 인해 해결 가능한 문제의 범위가 넓어져서 무엇을 만들어야 할지에 대한 고민과 문제를 다르게 바라보고 해결해야 할 필요성에 대한 고민.

    기술 발전으로 인한 문제 해결 방식의 변화와 새로운 문제 인식에 대한 고민.

  • 일반 모델을 사용하여 이 작업을 수행하는 것이 놀랍지만, 감독된 학습을 위한 데이터를 쉽게 생성할 수 있다는 의견.

    감독된 학습을 위한 데이터 생성의 용이성에 대한 의견.

  • GitHub 페이지를 통해 Pico를 통한 호스팅 버전을 제공할 예정이라는 정보와 Pico를 선택한 이유에 대한 질문.

    Pico를 통한 호스팅 서비스 제공 계획과 그 선택 이유에 대한 질문.

  • 생성된 웹사이트의 데모를 iframe의 srcdoc을 사용하여 실시간으로 보여주는 방식이 간단하고 우아하다는 칭찬.

    생성된 웹사이트 데모를 실시간으로 보여주는 방식의 간결함과 우아함에 대한 칭찬.

  • 기존 웹사이트를 복사하고자 할 때 Httrack을 사용하는 것이 더 유사한 결과를 얻을 수 있고 GPT API 비용을 절약할 수 있다는 의견.

    기존 웹사이트 복사에 Httrack 사용의 효율성에 대한 의견.

  • 피싱 사이트 제작이 훨씬 빨라질 것이라는 우려.

    피싱 사이트 제작 속도 증가에 대한 우려.

  • 프로젝트 관리자가 지속적으로 변하는 요청에 대응하는 데 이 도구가 완벽하며, "Make it pop"과 같은 모호한 입력에도 작동하는지에 대한 질문.

    프로젝트 관리자의 요구 사항 변화에 대응하는 도구의 적합성과 모호한 입력에 대한 작동 여부에 대한 질문.

답변달기