[논문 리뷰] Automatic Graphics Program Generation using Attention-Based Hierarchical Decoder

Zhihao Zhu, Xue Zhan외 1명|arXiv (Cornell University)|2018. 10. 26.

Advanced Neural Network Applications인용 수 8

한 줄 요약

이 논문은 자동 GUI-코드 변환을 위한 주의 기반 계층적 디코더를 제안하며, 코드 구조를 계층적으로 모델링하여 장거리 의존성 처리와 구조적 정확도를 향상시킨다. 이는 기존의 베스트 오브 더 베스트(SOTA) 방법들보다 벤치마크 및 새로 생성된 복잡한 GUI 데이터셋에서 뛰어난 성능을 보이며, 특히 더 길고 더 복잡한 코드 시퀀스에서 뛰어난 성능을 발휘한다.

ABSTRACT

Recent progress on deep learning has made it possible to automatically transform the screenshot of Graphic User Interface (GUI) into code by using the encoder-decoder framework. While the commonly adopted image encoder (e.g., CNN network), might be capable of extracting image features to the desired level, interpreting these abstract image features into hundreds of tokens of code puts a particular challenge on the decoding power of the RNN-based code generator. Considering the code used for describing GUI is usually hierarchically structured, we propose a new attention-based hierarchical code generation model, which can describe GUI images in a finer level of details, while also being able to generate hierarchically structured code in consistency with the hierarchical layout of the graphic elements in the GUI. Our model follows the encoder-decoder framework, all the components of which can be trained jointly in an end-to-end manner. The experimental results show that our method outperforms other current state-of-the-art methods on both a publicly available GUI-code dataset as well as a dataset established by our own.

연구 동기 및 목표

• GUI 스크린샷에서 의미적으로 정확하고 계층적으로 구조화된 코드를 생성하는 데 도전 과제를 해결하기 위해.
• 기존의 RNN 기반 디코더가 장기 의존성과 엄격한 시퀀스 길이 제약을 다루는 데에 한계를 가진다는 점을 극복하기 위해.
• GUI 요소의 계층적 레이아웃과 그에 해당하는 코드 구조를 명시적으로 모델링하여 코드 생성의 정밀도를 향상시키기 위해.
• 표준 및 새로 구성된 더 복잡한 GUI-코드 데이터셋에서 뛰어난 성능을 입증하기 위해.

제안 방법

• GUI 스크린샷에서 시각적 특징을 추출하기 위해 CNN 기반 이미지 인코더를 사용하는 인코더-디코더 프레임워크를 채택한다.
• 이중 단계 계층적 디코더를 적용한다: 첫 번째 단계의 LSTM은 블록 수준의 표현을 생성하고, 두 번째 단계의 LSTM은 각 블록당 코드 토큰을 생성한다.
• 첫 번째 단계 LSTM의 은닉 상태를 기반으로, CNN 특징에서 관련 시각적 특징을 동적으로 선택하는 주의 메커니즘을 통합한다.
• 주의를 받은 시각적 특징을 두 번째 단계 LSTM의 컨텍스트로 사용하여 코드 토큰을 생성함으로써, GUI 영역과 코드 블록 간의 보다 나은 정렬을 가능하게 한다.
• 모든 구성 요소를 백프로파게이션을 사용하여 엔드 투 엔드로 훈련함으로써, 이미지 이해와 코드 생성의 공동 최적화를 가능하게 한다.
• 생성 품질을 그리드 디코딩보다 향상시키기 위해 추론 시 빔 서치(빔 크기 3 및 5)를 적용한다.

실험 결과

연구 질문

• RQ1 주목적 기반 계층적 디코딩 전략이 평탄한 시퀀스 모델 대비 복잡한 GUI에 대해 코드 생성 정확도를 향상시키는가?
• RQ2 iOS 및 안드로이드 GUI에서 흔히 볼 수 있는 더 긴 코드 시퀀스에 대해 기준 모델 대비 모델의 성능은 어떠한가?
• RQ3 주의 메커니즘이 생성된 프로그램에서 시각적 영역과 코드 블록 간의 정렬을 어느 정도 향상시키는가?
• RQ4 기존 방법들과 비교해 복잡한 레이아웃과 더 rich한 시각적 요소를 가진 더 복잡한 GUI에 대해 일반화 성능이 더 뛰어나게 되는가?
• RQ5 디코더의 계층적 구조가 생성된 코드의 구조적 및 의미적 세부 정보를 유지하는 데에 모델의 능력에 어떤 영향을 미치는가?

주요 결과

• 제안된 모델은 PixCo 벤치마크 데이터셋에서 SOTA 성능을 달성하며, 모든 서브-데이터셋에서 pix2code 및 기준 방법들을 앞서며 분류 오차를 낮춘다: iOS(26.10 vs. 27.20), 안드로이드(27.20 vs. 27.25), 웹(18.31 vs. 17.25).
• 더 복잡한 PixCo-e 데이터셋에서 모델은 기준 방법들보다 뚜렷이 뛰어난 성능을 보이며, 더 긴 시퀀스(예: iOS의 109 토큰/GUI, 안드로이드의 112 토큰/GUI)에서 낮은 오차율을 기록함으로써 장기 의존성 처리 능력 향상을 입증한다.
• 빔 서치(빔 크기 5)는 그리드 디코딩보다 더 뛰어난 성능을 보이며, iOS의 오차율은 25.78로, 안드로이드는 26.95로, 웹은 17.12로 감소한다.
• 정성적 결과에서는 모델이 더 많은 시각적 세부 정보를 유지하고 복잡한 GUI 레이아웃을 정확히 재구성하는 반면, pix2code는 PixCo-e 데이터셋에서 많은 요소를 복구하지 못함을 보여준다.
• 주의 메커니즘은 시각적 영역과 코드 블록 간의 의미 있는 정렬을 학습할 수 있도록 해주며, 주의 히트맵을 통해 이를 시각화할 수 있다.
• 주의 기반 계층적 디코더는 주의 기반 없는 계층적 기반 모델 대비 성능 향상이 뚜렷하여, 주의 메커니즘이 컨텍스트 선택을 안내하는 데서 중요한 가치를 지닌다는 것을 확인한다.