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

요약

스크린샷, 목업, Figma 디자인을 HTML, React, Vue 등 다양한 프레임워크 코드로 자동 변환해주는 오픈 소스 도구입니다. Gemini, GPT, Claude 등 최신 멀티모달 모델을 활용하여 디자인을 기능적인 프로토타입으로 구현합니다.

screenshot-to-code

AI를 사용하여 스크린샷, 목업(mockups) 및 Figma 디자인을 깔끔하고 기능적인 코드로 변환하는 간단한 도구입니다.

지원되는 스택:

기본 AI 모델:

더 많은 데모는 아래의 Examples 섹션을 참조하세요.

작동 중인 웹사이트의 비디오/화면 녹화본을 찍어 이를 기능적인 프로토타입(prototype)으로 변환하는 실험적인 지원 기능도 제공합니다.

이 앱은 React/Vite 프론트엔드와 FastAPI 백엔드로 구성되어 있습니다.

필요한 키:

Ollama 오픈 소스 모델로 앱을 실행하고 싶다면 (결과 품질이 낮아 권장하지 않음), 이 댓글을 따르세요.

백엔드를 실행합니다 (패키지 관리를 위해 Poetry를 사용합니다 - 설치되어 있지 않다면 pip install --upgrade poetry를 실행하세요):

cd backend
echo "OPENAI_API_KEY=sk-your-key" > .env
echo "ANTHROPIC_API_KEY=your-key" >> .env
...

프론트엔드의 설정(settings) 대화 상자를 사용하여 키를 설정할 수도 있습니다 (프론트엔드 로드 후 톱니바퀴 아이콘을 클릭하세요).

프론트엔드를 실행합니다:

cd frontend
yarn
yarn dev

http://localhost:5173 을 열어 앱을 사용하세요.

백엔드 (backend)를 다른 포트에서 실행하는 것을 선호한다면, frontend/.env.local 파일의 VITE_WS_BACKEND_URL을 업데이트하세요.

시스템에 Docker가 설치되어 있다면, 루트 디렉토리에서 다음을 실행하세요:

echo "OPENAI_API_KEY=sk-your-key" > .env
docker-compose up -d --build

앱이 http://localhost:5173 에서 실행됩니다. 이 설정으로는 파일 변경 사항이 재빌드(rebuild)를 트리거하지 않으므로 애플리케이션을 개발할 수는 없다는 점에 유의하세요.

백엔드 (backend) 설정 시 오류가 발생합니다. 어떻게 해결하나요? 이 방법을 시도해 보세요. 그래도 해결되지 않으면 이슈 (issue)를 생성해 주세요.
OpenAI API 키는 어떻게 발급받나요? https://github.com/abi/screenshot-to-code/blob/main/Troubleshooting.md 를 참조하세요.
OpenAI 프록시 (proxy)를 어떻게 설정하나요? - 국가 제한 등의 이유로 OpenAI API에 직접 접속할 수 없는 경우, VPN을 사용하거나 프록시를 사용하도록 OpenAI 기본 URL (base URL)을 설정할 수 있습니다: backend/.env 파일 내의 OPENAI_BASE_URL을 설정하거나, UI의 설정 대화 상자에서 직접 설정하세요. URL 경로에 "v1"이 포함되어야 하며, 다음과 같은 형태여야 합니다: https://xxx.xxxxx.xxx/v1
프론트엔드 (front-end)가 연결되는 백엔드 (backend) 호스트를 어떻게 변경하나요? - front/.env.local에서 VITE_HTTP_BACKEND_URL과 VITE_WS_BACKEND_URL을 설정하세요. 예를 들어, VITE_HTTP_BACKEND_URL=http://124.10.20.1:7001로 설정합니다.
백엔드 (backend) 실행 시 UTF-8 오류가 발생하나요? - Windows 환경에서는 Notepad++로 .env 파일을 연 다음, 인코딩 (Encoding) 메뉴에서 UTF-8을 선택하세요.
피드백은 어떻게 전달하나요? 피드백, 기능 요청 및 버그 리포트 (bug reports)는 이슈 (issue)를 생성하거나 Twitter에서 저를 태그해 주세요.

NYTimes

NYTimes

원본 (Original)	복제 (Replica)
<img width="1238" alt="Screenshot 2023-11-20 at 12 54 03 PM" src="https://github.com/user-attachments/assets/6b0ae86c-1b0f-4598-a578-c7b62205b3e2">	<img width="1414" alt="Screenshot 2023-11-20 at 12 59 56 PM" src="https://github.com/user-attachments/assets/981c490e-9be6-407e-8e46-2642f0ca613e">

Instagram

Hacker News

AI 자동 생성 콘텐츠