가까이 다가온 인공지능 기술 체험하기 : Sketch2Code를 이용하여 손으로 스케치한 웹사이트 이미지를 HTML 소스로 변환

Sketch2Code 는 손으로 스케치한 웹사이트 이미지를 HTML 소스로 변환해 주는 서비스입니다.

https://sketch2code.azurewebsites.net/

동작원리) https://azure.microsoft.com/en-us/blog/turn-your-whiteboard-sketches-to-working-code-in-seconds-with-sketch2code/

- 커스텀 비전 모델 : 이미지에 어떤 HTML 요소가 있는지 그리고 그 위치가 어디인지를 예측

- 필기 텍스트 인식 서비스 : 예측된 요소 내의 텍스트를 판독

- 레이아웃 알고리즘은 : 예측된 요소의 모든 경계 상자에서 공간 정보를 사용해 모든 요소를 수용하는 그리드 구조를 생성

• Sketch2Code를 사용하여 손으로 스케치한 이미지를 HTML로 변환하는 과정

1. 웹 사이트에 이미지 업로드

2. 비전 모델이 이미지에 어떤 HTML 요소가 있는지, 위치는 어디인지를 예측

3. 필기 텍스트 인식 서비스는 예측된 요소 내부의 텍스트 판독

4. 레이아웃 알고리즘은 예측된 요소의 모든 경계 상자의 공간 정보를 사용하여 모두를 수용하는 그리드 구조를 생성

5. HTML 생성 엔진이 모든 정보를 사용하여 결과를 반영하는 HTML 마크 업 코드를 생성