논문
https://arxiv.org/abs/1705.07962
출처
https://github.com/tonybeltramelli/pix2code
문장
http://gigazine.net/news/20170530-pix2code/

학습 기간

LSTM을 사용하여 DSL 코드 학습
CNN을 통해 GUI 이미지 학습
통합 레이어를 통해 LSTM에서 학습

예상 시간

학습된 모델에 GUI 이미지 입력
출력 디자이너

IOS 시

IOS Android web

IOS Android 웹 오류율

관련 공작물

AI로 모든 인코딩을 자동화하는 것을 목표로 하는 옥스포드대 출발팀인 디프블루는 시리즈 A 2200만 달러의 자금 조달을 발표했다.인공지능의 소프트웨어 개발을 목표로 하다
http://shiropen.com/2017/06/28/26158
Daniel Kröning
http://www.kroening.com/
Peter Schrammel
https://www.cs.ox.ac.uk/people/peter.schrammel/

이미지를 사용하여 모델 아키텍처 설명

그림을 넣고 html를 출력합니다.

html을 영패로 분할했습니다.태그 시퀀스를 입력으로 사용하여 모델 훈련
교차 엔트로피 비교 모델의 다음 영패 예측과 실제 다음 영패를 사용합니다.
html 파일의 시작과 끝에 학습을 넣습니다.
문자가 부족한 상황을 채워서 일정한 순서로 만든다.
1: CNN 이미지의 특징량을 학습합니다.
2: CNN 이미지의 특징량과 헤더를 배웁니다.
이런 느낌으로 글자 제작 순서를 엇갈려 순서대로 공부한다.
추정할 때도 추정된 물건을 추정기에 넣는 것을 반복한다.

hello 월드 샘플 시

Screenshot-to-code-in-Keras
https://github.com/emilwallner/Screenshot-to-code-in-Keras/blob/master/README.md

문자 벡터 생성 예

이미지 벡터와 문자 벡터를 모델에 넣기 위해 미리 처리합니다.
두 단계로 나누다.
1. 전체 문장에서 색인을 하나하나 엇갈린다.
2. 색인의 앞쪽 100자를 벡터로 지정합니다.글자가 부족하면 빈 글자를 채워라.
아래의 예에서 보듯이 한 글자씩 벗어난 문자열이 된다.
이 문자를 삽입층에 단어와 id를 비추십시오.

==========
  justify-content-between align-items-center">
                  <div class="btn-group">

==========
 justify-content-between align-items-center">
                  <div class="btn-group">

==========
 ustify-content-between align-items-center">
                  <div class="btn-group">

==========
 stify-content-between align-items-center">
                  <div class="btn-group">

==========
 tify-content-between align-items-center">
                  <div class="btn-group">

==========
 ify-content-between align-items-center">
                  <div class="btn-group">

==========
 fy-content-between align-items-center">
                  <div class="btn-group">

==========
 y-content-between align-items-center">
                  <div class="btn-group">

==========
 -content-between align-items-center">
                  <div class="btn-group">

==========
 content-between align-items-center">
                  <div class="btn-group">
                    <
==========
 ontent-between align-items-center">
                  <div class="btn-group">
                    <b
==========
 ntent-between align-items-center">
                  <div class="btn-group">
                    <bu
==========
 tent-between align-items-center">
                  <div class="btn-group">
                    <but
==========
 ent-between align-items-center">
                  <div class="btn-group">
                    <butt
==========
 nt-between align-items-center">
                  <div class="btn-group">
                    <butto
==========
 t-between align-items-center">
                  <div class="btn-group">
                    <button
==========
 -between align-items-center">
                  <div class="btn-group">
                    <button 
==========
 between align-items-center">
                  <div class="btn-group">
                    <button t
==========
 etween align-items-center">
                  <div class="btn-group">
                    <button ty
==========
 tween align-items-center">
                  <div class="btn-group">
                    <button typ
==========
 ween align-items-center">
                  <div class="btn-group">
                    <button type
==========
 een align-items-center">
                  <div class="btn-group">
                    <button type=
==========
 en align-items-center">
                  <div class="btn-group">
                    <button type="
==========
 n align-items-center">
                  <div class="btn-group">
                    <button type="b
==========
  align-items-center">
                  <div class="btn-group">
                    <button type="bu
==========
 align-items-center">
                  <div class="btn-group">
                    <button type="but
==========
 lign-items-center">
                  <div class="btn-group">
                    <button type="butt
==========
 ign-items-center">
                  <div class="btn-group">
                    <button type="butto
==========
 gn-items-center">
                  <div class="btn-group">
                    <button type="button
==========
 n-items-center">
                  <div class="btn-group">
                    <button type="button"
==========
 -items-center">
                  <div class="btn-group">
                    <button type="button" 
==========
 items-center">
                  <div class="btn-group">
                    <button type="button" c
==========
 tems-center">
                  <div class="btn-group">
                    <button type="button" cl
==========
 ems-center">
                  <div class="btn-group">
                    <button type="button" cla
==========
 ms-center">
                  <div class="btn-group">
                    <button type="button" clas
==========
 s-center">
                  <div class="btn-group">
                    <button type="button" class
==========
 -center">
                  <div class="btn-group">
                    <button type="button" class=
==========
 center">
                  <div class="btn-group">
                    <button type="button" class="
==========
 enter">
                  <div class="btn-group">
                    <button type="button" class="b
==========
 nter">
                  <div class="btn-group">
                    <button type="button" class="bt
==========
 ter">
                  <div class="btn-group">
                    <button type="button" class="btn
==========
 er">
                  <div class="btn-group">
                    <button type="button" class="btn 
==========
 r">
                  <div class="btn-group">
                    <button type="button" class="btn b
==========
 ">
                  <div class="btn-group">
                    <button type="button" class="btn bt
==========
 >
                  <div class="btn-group">
                    <button type="button" class="btn btn
==========

                  <div class="btn-group">
                    <button type="button" class="btn btn-
==========
                   <div class="btn-group">
                    <button type="button" class="btn btn-s
==========
                  <div class="btn-group">
                    <button type="button" class="btn btn-sm
==========
                 <div class="btn-group">
                    <button type="button" class="btn btn-sm 
==========
                <div class="btn-group">
                    <button type="button" class="btn btn-sm b
==========
               <div class="btn-group">
                    <button type="button" class="btn btn-sm bt
==========
              <div class="btn-group">
                    <button type="button" class="btn btn-sm btn
==========
             <div class="btn-group">
                    <button type="button" class="btn btn-sm btn-
==========
            <div class="btn-group">
                    <button type="button" class="btn btn-sm btn-o
==========
           <div class="btn-group">
                    <button type="button" class="btn btn-sm btn-ou
==========
          <div class="btn-group">
                    <button type="button" class="btn btn-sm btn-out
==========
         <div class="btn-group">
                    <button type="button" class="btn btn-sm btn-outl
==========
        <div class="btn-group">
                    <button type="button" class="btn btn-sm btn-outli
==========
       <div class="btn-group">
                    <button type="button" class="btn btn-sm btn-outlin
==========
      <div class="btn-group">
                    <button type="button" class="btn btn-sm btn-outline
==========
     <div class="btn-group">
                    <button type="button" class="btn btn-sm btn-outline-
==========
    <div class="btn-group">
                    <button type="button" class="btn btn-sm btn-outline-s
==========
   <div class="btn-group">
                    <button type="button" class="btn btn-sm btn-outline-se
==========
  <div class="btn-group">
                    <button type="button" class="btn btn-sm btn-outline-sec