leigest519/ScreenCoder

해결하는 문제

ScreenCoder는 스크린샷이나 모크업과 같은 시각적 디자인을 생산 환경 대응 HTML/CSS 코드로 자동 변환하는 프로세스를 자동화합니다. 시각적 디자인과 기능적인 프론트엔드 구현 사이의 격차를 메우고, 개발자가 이미지에서 인터페이스를 수작업으로 재현해야 하는 노력과 시간을 줄이는 것을 목표로 합니다.

작동 방식

이 시스템은 시각적 이해와 레이아웃 계획을 결합한 모듈식 멀티에이전트 아키텍처를 사용합니다. 다음과 같은 다단계 파이프라인을 따릅니다:

1. UI 요소 탐지: UIED 엔진을 사용하여 스크린샷을 분석하고 컴포넌트를 탐지합니다.
2. 레이아웃 계획: 탐지된 컴포넌트를 논리적 페이지 영역에 매핑하고, 자리표시자로 초기 HTML 레이아웃을 생성합니다.
3. 코드 합성: Doubao, Qwen, GPT, Gemini 등을 지원하는 멀티모달 모델을 사용하여 실제 코드를 생성합니다.
4. 이미지 통합: 자리표시자를 식별하고 원본 스크린샷에서 자른 실제 이미지로 교체하여 최종 HTML을 생성합니다.

대상 사용자

이 도구는 기존 시각 자산에서 빠르게 인터페이스를 프로토타이핑하거나 픽셀 단위 정확도의 웹 페이지를 생성하고자 하는 프론트엔드 개발자 및 디자이너를 위한 것입니다.

주요 특징

• 모듈식 멀티에이전트 프레임워크: 탐지, 계획, 합성에 특화된 전문 에이전트를 결합합니다.
• 사용자 정의 가능: 레이아웃 및 스타일링에 대한 사용자 주도적 수정을 지원합니다.
• 모델 독립성: GPT, Gemini, Qwen, Doubao 등 다양한 LLM과 호환됩니다.
• ScreenBench: 평가를 위한 1,000개의 실제 웹 스크린샷과 해당 HTML 소스 코드를 포함하는 새로운 벤치마크입니다.