Rico: A Mobile App Dataset for Building Data-Driven Design Applications

DeepDIV!·2024년 7월 19일
SKT AI Fellowship 6기논문 리뷰
0

논문 리뷰

목록 보기
6/10
post-thumbnail

Paper : https://dl.acm.org/doi/pdf/10.1145/3126594.3126651
Dataset : https://www.kaggle.com/datasets/onurgunes1993/rico-dataset (7GB)
Huggingface : https://github.com/creative-graphic-design/huggingface-datasets_Rico

참고하면 좋을만한 관련 블로그 : https://velog.io/@sukyeongs/DeepLearning-Rico-Dataset-%EB%B6%84%EC%84%9D%ED%95%B4%EB%B3%B4%EA%B8%B0

0. Abstract

Rico Dataset

Mobile app design(Screenshot of UI)에 대한 데이터셋

5가지의 Data-driven applications를 수행할 수 있음

  • Design search
  • UI layout generation
  • UI code generation
  • User interaction modeling
  • User perception prediction

Data-driven applications
데이터를 수집, 분석, 처리하여 유의미한 인사이트를 제공하거나 자동화된 결정을 내리는 애플리케이션

  • 데이터를 중심으로 작동하며, 데이터를 활용하여 사용자에게 더 나은 서비스와 인사이트를 제공함

1. Introduction

Rico Dataset 구축 계기

: Data-driven model에서 유용하게 쓰일만한 design dataset을 구축하기 위해 UI에 대한 dataset을 만들었음

Rico Dataset 구축 과정

Human powered Exploration + Automated Exploration을 함께 사용하면서 구축함
(Android app을 사용하는 runtime 동안 design data를 데이터 마이닝할 수 있음)

  • Human powered Exploration : 사용자가 직접 앱을 사용하면서 얻은 user interaction trace을 기록함

    • Crowdsourced Exploration : Web application을 통해서 crowd worker를 design mining platform에 연결한 후, worker의 browser에서 진행되고 있는 screen을 캡처해서 저장함 -> 사용자의 상호작용 과정을 담을 수 있음
      (ERICA와 비슷한 web-based architecture를 사용함)

  • Automated Exploration : automated agent를 사용하여 이 사용자의 trace를 replay하면서 programmatically(프로그래밍을 통해) exploration 하는 과정을 기록함

    • Automated Exploration : 사용자와의 상호작용에서 얻을 수 없었던 UI state를 automated mining system을 이용해서 얻어냄 -> 사용자의 상호작용 과정을 replay하면서 빠진 부분을 확인함
      (크롤링하는 것과 비슷함)
    • Content-Agnostic Similarity Heuristic : Automated Exploration 과정을 진행하면서 이게 새로운 UI state인지 이미 사용자의 상호작용에서 등록된 UI인지 판단해야함 -> similarity heuristic를 이용해서 기존의 UI와 새로운 UI에 대한 visual과 structural composition을 비교함
      (α pixel 이상이 겹친다고 나오면, 두 UI를 같은 UI로 판단함)
      (β pixel 이상으로 다르다고 나오면, 두 UI를 다른 UI로 판단함)
    • Coverage Benefits of Hybrid Exploration : 사용자에 의한 crawling strategy와 automated exploration만 각각 사용한 것과 두 방법을 합친 방법을 비교해서 왜 Hybrid Exploration을 써야하는지 증명함

ERICA
데이터 마이닝과 분석 과정에서 자주 사용되는 단계별 접근 방식

  • E (Explore): 탐색, 데이터를 이해하고 탐색하는 단계
  • R (Retrieve): 추출, 분석에 필요한 데이터를 다양한 소스에서 수집하고 통합하는 단계
  • I (Identify): 식별, 데이터를 분석하여 패턴, 관계, 트렌드 등을 식별하는 단계
  • C (Cluster): 군집화, 유사한 특성을 가진 데이터 포인트를 그룹으로 묶는 단계
  • A (Analyze): 분석, 최종 분석을 통해 결과를 도출하고 해석하는 단계

Rico Dataset 구성

: 27개의 구글스토어 카테고리에서 9772개의 앱을 골라 얻은 72219개의 UI로 구성되어있음

Rico Dataset을 유용하게 사용할 수 있는 부분들

  • Android App datasets
    : 안드로이드 앱에 대한 다양한 데이터셋을 확인할 수 있음
    - Google Playstor Metadata : 구글 플레이에서 얻을 수 있는 앱에 대한 데이터 (reviews, ratings 등)
    - Software engineering and security related information
    - Design data

  • Data-driven design app
    : UI를 구성하는 모든 design 요소를 확인할 수 있음
    (web design, mobile app flows, 3D modeling, interior design, fashion, programming 등)

  • UI Layout Generation
    : design generative model에 design datset을 이용해서 학습시킬 수 있음

  • UI Code Generation
    : 인기 있는 앱에서는 어떤 code component들을 사용하고 있는지 한눈에 볼 수 있음

  • 이를 통해 automatically하게 code generation하여 앱을 develop할 수 있음

  • User Interaction Modeling
    : 사용자가 어떻게 각기 다른 UI들과 상호작용하고 있는지 확인할 수 있음

  • User Perception Prediction
    : 사용자의 반응을 볼 수 있기 때문에 앱 디자인에 대한 피드백을 즉각적으로 받을 수 있음

Data-driven models
데이터에 기반하여 학습하고 예측하는 모델

  • 대량의 데이터를 분석하여 패턴을 식별하고 이를 통해 미래의 결과를 예측하거나 결정하는 데 사용됨
  • 양질의 데이터를 수집하고 이를 효과적으로 분석하여 유의미한 결과를 도출함

Data Mining
대량의 데이터에서 유의미한 패턴, 관계, 트렌드 등을 발견하고 추출하는 과정

2. Rico Dataset

Data Collection

Google play store에서 9772개의 free app을 다운로드 받아서 13명의 worker들에게 사용하고 interaction trace data를 얻음

그 후, automated crawler를 사용해서 automated exploration data를 얻음

Design Data Organization

Google Play Store Metadata

  • app’s category, average rating, number of ratings, number of downloads 포함됨

User Interaction Traces
UI sequence에 대한 user interaction trace

  • screenshot, an augmented view hierarchy, a set of explored
    user interactions, a set of animations capturing transition effects in response to user interaction, a learned vector representation of the UI’s layout 포함됨

Unique UIs
겹치는 UI를 제외하고 남은 UI screenshot들

Element Details
AutoDroid의 View ID처럼 UI에 대한 annotated elements

  • element type(ex. id, class, superclass 등) 포함됨

Training a UI Layout Embedding

Rico Dataset 자체가 크므로, deep learning application을 학습시키기에는 충분함

  • Autoencoder에 UI layout에 대한 embedding을 학습시켜봄

Training Autoencoder with Rico Dataset

  • Input : embed layout information를 포함한 이미지 (생성해서 넣음)

    • Image Generation
      • 각 UI에 대한 모든 leaf element(최하위 요소)의 bounding box region을 view hierarchy(view 계층 구조)에 인코딩함
        (text와 non-text element(ex. buttons)를 구분해서 인코딩함)
        • Rico는 다양한 mobile application에 대한 view hierarchy를 가지고 있기 때문에, 이를 이용해서 노이즈가 많은 이미지 처리나 OCR같은 기술 없이 UI element를 정확하게 얻을 수 있음

  • Encoder

    • Input dimension : 11200
    • Output dimension : 64
    • two hidden layer of dimension 2048 and 256 with ReLU non-linearities

  • Decoder

    • 당연히 Encoder와 반대의 구조를 가지고 있음

  • Output : 학습된 모델이 64차원 벡터 공간에서 UI를 어떻게 표현하고, 이 공간에서 유사한 UI를 어떻게 찾아내는지 보여줌

    • 학습된 모델이 lists, login screens, dialog screens, image grids와 같은 일반적인 UI pattern을 캡처할 수 있음을 보여줌
      (유사한 UI를 잘 인식할 수 있게됨)
      (실제 애플리케이션에서 다양한 UI를 효과적으로 분석하고 분류하는데 유용해짐)

Data 구조

UI sceenshot과 그 screenshot에 대한 element detail을 담은 json 파일로 이루어져있음

// 1.json

root":{5 items
"ancestors":[...]4 items
"class":string"com.android.internal.policy.PhoneWindow$DecorView"
"bounds":[4 items
0:int0
1:int0
2:int1440
3:int2560
]
"clickable":boolfalse
"children":[2 items
0:{5 items
"ancestors":[5 items
0:string"android.webkit.WebView"
1:string"android.widget.AbsoluteLayout"
2:string"android.view.ViewGroup"
3:string"android.view.View"
4:string"java.lang.Object"
]
"bounds":[4 items
0:int0
1:int0
2:int1440
3:int2214
]
"clickable":booltrue
"class":string"org.apache.cordova.engine.SystemWebView"
"componentLabel":string"Web View"
}
1:{6 items
"ancestors":[4 items
0:string"com.google.android.gms.ads.BaseAdView"
1:string"android.view.ViewGroup"
2:string"android.view.View"
3:string"java.lang.Object"
]
"class":string"com.google.android.gms.ads.AdView"
"bounds":[4 items
0:int1
1:int2217
2:int1439
3:int2392
]
"clickable":boolfalse
"children":[1 item
0:{6 items
"ancestors":[...]4 items
"class":string"com.google.android.gms.ads.internal.webview.n"
"bounds":[...]4 items
"clickable":boolfalse
"children":[...]1 item
"componentLabel":string"Web View"
}
]
"componentLabel":string"Advertisement"
}
]
}

root

  • ancestors : 이 UI에 있는 모든 element class name에 대한 문자열이 포함되어있음

  • class : 해당 element의 class name을 나타내는 문자열임

  • bounds : 해당 element의 bounding box를 나타내는 정수 배열이 포함되어있음

    • 화면상의 위치와 크기를 나타냄
    • ex. [0, 0, 1440, 2560] = 화면의 왼쪽 상단 모서리(0,0)에서 시작하여 오른쪽 하단 모서리(1440,2560)까지 차지함을 의미함

  • clickable : 해당 element가 click 가능한지 나타내는 bool 값

    • True : 클릭할 수 있음
    • False : 클릭할 수 없음

  • children : 해당 element에서 이어지는 다른 element에 대한 값들을 포함하고 있음

children

  • root와 같은 구조로 이루어져있음
  • componentLabel : 해당 element의 component label을 나타내는 문자열
    • Web View와 같이 Element Detail에서 superclass를 나타냄

3. Conclusion

  • Rico Dataset은 UI design에 대한 Data-driven model을 학습시키기 위해 구축된 데이터셋임
  • User interaction trace에 대한 데이터와 Automated exploration으로 구성된 데이터를 모두 포함하고 있음
  • 중복되는 UI를 제거하고, UI에 대한 element detail이 포함된 데이터셋임
  • Deep learning model을 학습시킬 수 있을 만큼 매우 큰 데이터셋임

연구에 적용할 수 있는 부분

  • Ferret이 GRIT dataset을 이용해 학습한 것처럼, Rico Dataset를 이용해 Ferret 모델을 fine-tuning하면 UI intent에 대한 이해도를 높이고 모델의 정확도를 높일 수 있음
profile
DeepDIV!
이전 포스트

Ferret: Refer and Ground Anything Anywhere at Any Granularity

다음 포스트

Ferret-UI: Grounded Mobile UI Understanding with Multimodal LLMs

0개의 댓글