피드로 돌아가기
Hugging Face BlogAI/ML
원문 읽기
연구팀이 WebSight 데이터셋(823,000개 → 2,000,000개 쌍)을 구축하고 Sightseer 모델을 파인튜닝해 웹 스크린샷을 함수형 HTML 코드로 자동 변환
Unlocking the conversion of Web Screenshots into HTML Code with the WebSight Dataset
AI 요약
Context
웹 디자인을 실제 작동하는 웹사이트로 변환하려면 경험 많은 개발자의 코딩과 테스트가 필요했다. 고품질의 시각-언어 모델(VLM) 훈련을 위한 맞춤형 데이터셋이 부족해 이 작업의 자동화가 어려웠다.
Technical Solution
- WebSight-v0.1 구축: 823,000개의 HTML 코드와 스크린샷 쌍으로 구성된 합성 데이터셋 개발 (2024년 1월)
- WebSight-v0.2로 업데이트: 스크린샷의 실제 이미지 사용 및 기존 CSS에서 Tailwind CSS로 전환
- 데이터셋 규모 확대: 2,000,000개 예제로 스케일링
- Sightseer 모델 파인튜닝: WebSight 데이터셋으로 비전-언어 기초 모델을 미세 조정해 스크린샷-투-HTML 변환 모델 개발
- 이미지 통합 기능: 생성된 HTML에 원본 스크린샷과 유사한 이미지를 자동으로 포함시키는 기능 추가
Key Takeaway
합성 데이터로 실제 웹 개발의 노이즈를 제거한 후 실제 이미지로 강화하는 2단계 접근 방식은 AI 모델의 학습 효율을 높이면서도 실제 적용 가능성을 확보하는 데이터셋 설계 원칙을 제시한다.
실천 포인트
UI/웹 개발 자동화를 목표로 하는 팀에서 Vision-Language 모델을 활용할 때, 초기에 합성 데이터로 기본 구조를 학습시킨 후 점진적으로 실제 이미지와 프레임워크(Tailwind CSS 등)를 통합하면 모델의 학습 안정성과 실제 코드 생성 품질을 동시에 확보할 수 있다.