본문 바로가기
IT 정보&뉴스

손그림이 HTML 코딩이 된다 ~ AI 너 어디까지 왔니

zephyros2 2020. 2. 25. 23:39
728x90
반응형

오늘은 정말 편리한 기능을 발견해서 소개해 드립니다 

SKETCH2CODE 입니다 

스케치를 하면 코드를 만들어 주는 정말 재미있는 프로그램인 것 같습니다 
이 프로그램은 딥러닝을 통하여 이미지를 학습시켜서 만든 기능입니다  

왼쪽 화면은 손으로 스케치를 한 이미지 입니다. 이미지를 프로그램에 등록 하면 오른쪽의 화면처럼 HTML 소스로 만들어 줍니다 

SketchCode : 5 초만에 아이디어에서 HTML로 이동


개발자는 Ashwin Kumar 입니다 
Ashwin Kumar 이전에 공동 설립자였습니다. 스웨이 금융, 기계 학습을 사용하여 회계를 자동화 한 Y 콤비 네이터 지원 스타트 업. Insight에서 그는 사용자가 직접 그린 와이어 프레임에서 작업중인 HTML 웹 사이트를 만들어 설계 프로세스를 크게 가속화 할 수있는 모델을 개발했습니다. 그는 현재 딥 러닝 과학자입니다

아래 내용은  Ashwin Kumar 의 블로그에서 가져온 자료 입니다 

이미지 캡션에서 영감을 그리기

내가 해결했던 문제는 프로그램 합성 , 작업 소스 코드의 자동 생성으로 알려진 광범위한 작업에 속합니다 . 많은 프로그램 합성이 자연 언어 사양 또는 실행 추적에서 생성 된 코드를 다루지 만 필자의 경우 소스 이미지 (손으로 그린 와이어 프레임)를 가지고 있다는 사실을 활용할 수있었습니다.
머신 러닝에는 이미지와 텍스트를 함께 연결하는 모델을 배우고, 특히 소스 이미지의 내용에 대한 설명을 생성하는 이미지 캡션 이라고하는 잘 학습 된 도메인이 있습니다. 
최근에 pix2code라는 논문과 과 Emil Wallner 의 관련 프로젝트 에서 영감을 얻은 결과 , 웹 사이트 와이어 프레임을 입력 이미지로, HTML 코드를 출력 텍스트로 사용하여 작업을 이미지 캡션 중 하나로 재구성하기로 결정했습니다. .
그럼 직접 제가 그린 그림으로 얼마나 잘 만들어 지는지 테스트 해보겠습니다 
대충 그랬는데 이해해 주시구요 


제가 직접 그린 손그림 입니다. ^^
이 곳에 이미지를 먼저 등록해서 올리면  됩니다
upload design 을 클릭해서 이미지를 등록해 줍니다 
그러면 이미지를 올리자 마다 분석을 해서 변환을 해주네요 ~ ^^


DOWNLOAD YOUR HTML CODE 를 클릭 하시면 HTML 소스를 받아 보실수 있습니다 
아래 화면은 HTML 파일을 직접 실행한 모습니다.
ADDRESS 를 인식을 못했네요 ~~ 음.... 
ADDRESS 부분이 빠졌지만 일일이 손으로 작업했던 부분이 정말 쉽게 처리 되었습니다.


예전에 부터 위젯으로 마우스로 드래그 해서 워드 문서 만들듯이 HTML을 만들어 주는 프로그램들은 많이 보아 왔지만 이처럼 손그림을 변환 시켜주는건 처음 보아 습니다 
조금만 더 지나면 홈페이지는 누구나 만들 수 있는 날이 올것 같아요 ~ 
학부생때 홈페이지 만들겠다고 엄청 고생했는데 너 왜 이제 나왔니 ...ㅋㅋ 

<head>
    <meta name="viewport" content="width=device-width" />
    <title>HTML Result</title>
          integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
</head>
<body>
    <div class="container body-content">
        



<div class="container">


                    <div class="row justify-content-end" style="padding-top:10px;">
<input class="form-control"></input>


                </div>
                <div class="row justify-content-start" style="padding-top:10px;">

                <div class="col" style="padding-top:10px;">
<label>First NAME</label>



                </div>
                <div class="col" style="padding-top:10px;">
<input class="form-control"></input>

소스를 일부 잠깐 살펴 보았더니 bootstrap.min.css 부스트랩을 이용해서  만들어졌구요
줄간격이 좀 넓고 들여 쓰기가 쪼금 이상한것 말고는 괜찮아요 ~ ㅎㅎ 

이제 개발을 AI가 도와주니 엄청 빨라 지겠어요 ~ 

아직은 조금 부족하지만 더 좋아지리라 믿습니다 

여기 까지 봐주셨다면 고맙습니다 ~ 






반응형
저작자표시

'IT 정보&뉴스' 카테고리의 다른 글

태블릿PC 가성비 좋은 10만원대 순위  (0) 2020.11.06
삼성 갤럭시 스마트폰으로 움짤 gif 만들기 방법 3가지 안드로이드  (0) 2020.10.28
윈도우10 로그인 암호(패스워드) 해제 및 제거 방법  (0) 2020.09.01

'IT 정보&뉴스' Related Articles

티스토리툴바