[논문 리뷰] pix2code: Generating Code from a Graphical User Interface Screenshot

Tony Beltramelli|arXiv (Cornell University)|2017. 05. 22.

Advanced Image and Video Retrieval Techniques참고 문헌 24인용 수 30

한 줄 요약

pix2code는 CNN-RNN 아키텍처를 사용하여 단일 GUI 스크린샷에서 소스 코드를 생성하는 엔드 투 엔드 딥 러닝 모델을 제안한다. 이 모델은 작업별 맞춤 조정 없이 iOS, 안드로이드, 웹 기반 플랫폼에서 77% 이상의 정확도를 달성한다. 모델은 픽셀 데이터와 도메인 특화 언어(DSL) 토큰 시퀀스에서 직접 시각적 및 순차적 패턴을 학습하여 인간 간섭 최소화로 원시 이미지에서 자동으로 코드를 생성할 수 있다.

ABSTRACT

Transforming a graphical user interface screenshot created by a designer into computer code is a typical task conducted by a developer in order to build customized software, websites, and mobile applications. In this paper, we show that deep learning methods can be leveraged to train a model end-to-end to automatically generate code from a single input image with over 77% of accuracy for three different platforms (i.e. iOS, Android and web-based technologies).

연구 동기 및 목표

• 개발자가 수동으로 구현하는 데 소요되는 시간을 줄이기 위해 GUI 스크린샷을 기능성 있는 소스 코드로 자동 변환하는 것.
• 픽셀 수준의 입력과 해당 코드 시퀀스에서 직접 학습함으로써 수작업으로 만든 히우리스틱이나 기능 공학이 필요 없도록 하는 것.
• 동일한 훈련 프레임워크를 사용하여 iOS, 안드로이드, 웹 등 다양한 플랫폼의 코드를 생성할 수 있는 통합 모델 아키텍처를 개발하는 것.
• 향후 시각적 입력에서 프로그램 합성에 대한 연구를 지원하기 위해 공개된 iOS, 안드로이드, 웹 GUI 스크린샷과 소스 코드 쌍으로 이루어진 데이터셋을 배포하는 것.

제안 방법

• 컨volutional 신경망(CNN)은 GUI 스크린샷을 시각적 특징 표현으로 인코딩하여 UI 요소의 공간적 및 구조적 정보를 캡처한다.
• 순환 신경망(RNN), 특히 스택된 LSTM 레이어는 도메인 특화 언어(DSL)의 토큰 순차적 구조를 모델링한다.
• 시각적 특징과 순차적 특징이 연결되어 디코더 RNN에 입력되며, 이는 DSL 어휘에 대한 확률 분포를 계산하기 위해 소프트맥스 레이어를 사용하여 토큰 단위로 코드를 생성한다.
• 모델은 교차 엔트로피 손실을 최소화하기 위해 확률적 경사 하강법을 사용하여 엔드 투 엔드로 훈련된다.
• 추론 과정에서는 예측된 출력 확률에서 가장 가능성이 높은 토큰 시퀀스를 도출하기 위해 그레디 서치 및 빔 서치 전략을 모두 사용한다.
• DSL 컴파일러는 표준 컴파일 기법을 사용하여 생성된 DSL 토큰을 대상 플랫폼 전용 코드(예: iOS용 Swift, 안드로이드용 XML, 웹용 HTML/CSS)로 변환한다.

실험 결과

연구 질문

• RQ1 딥 러닝 모델은 수작업으로 설계된 기능이나 히우리스틱 없이 GUI 스크린샷에서 문법적으로 올바른 소스 코드를 직접 생성할 수 있는가?
• RQ2 동일한 아키텍처나 초모수 변경 없이 단일 통합 모델이 다양한 플랫폼(iOS, 안드로이드, 웹)에 대해 얼마나 잘 일반화되는가?
• RQ3 합성된 이미지-코드 쌍에 대한 엔드 투 엔드 훈련은 어떻게 시각적 레이아웃과 해당 코드 구조 간의 매핑을 학습하는가?
• RQ4 다른 디코딩 전략(그레디 대비 빔 서치)은 코드 생성 정확도와 시퀀스 품질에 어떤 영향을 미치는가?

주요 결과

• 그레디 서치를 사용할 때 웹 기반 HTML/CSS 데이터셋에서 pix2code 모델은 분류 오류율 12.14%를 기록하여 웹 GUI에 대해 강력한 일반화 능력을 보였다.
• iOS와 안드로이드의 경우 각각 그레디 서치에서 오류율이 22.73%와 22.34%로 나타나 모바일 플랫폼 간 일관된 성능을 보였다.
• 빔 크기 3로 빔 서치를 사용할 경우 iOS 데이터셋의 오류율은 23.94%로 감소했지만, 빔 크기 5로 증가시킬 경우 안드로이드 데이터셋의 오류율은 40.93%로 증가하여 복잡한 레이아웃에서 디코딩 전략에 민감한 것을 시사했다.
• 라벨 텍스트가 데이터 합성 과정에서 무작위로 할당되더라도 모델은 생성된 GUI에서 계층적 구조와 레이아웃 관계를 잘 유지했다.
• 스타일링 및 색상 선택 문제점이 일부 발생하지만, 모델은 새로운 GUI 레이아웃에 대해 잘 일반화되며 생성된 코드의 구조적 정밀도를 유지한다.
• 공개된 iOS, 안드로이드, 웹 GUI용 데이터셋 덕분에 향후 뷰전-투-코드 생성 연구에서 실제 레이블이 있는 데이터에 의존하지 않고도 진행될 수 있게 되었다.