【やってみた】AIが手描きスケッチからhtmlコードを作成する「Sketch2Code」

f:id:n2i_h:20181219124823j:plain

AIやディープラーニングがクリエイティブ分野での活用を模索し、研究開発が色々と進められています。

それに関連して、今回はMicrosoftが開発した「Sketch2Code」を使ってみたのでご紹介したいと思います。

sketch2code.azurewebsites.net

Web屋の立場からも気になるこの技術。AIが手描きスケッチからhtmlコードを作成してくれるというものです。さて、結果はいかに？

Sketch2Codeやってみた

f:id:n2i_h:20181219125056j:plain

まずはログインフォーム的なイメージでワイヤーフレームを描いてみます。

残念ながら日本語は認識しないそうなので、テキストは英語のみで書いています。

f:id:n2i_h:20181219125435p:plain

Sketch2Codeのページからアップロードして変換します。

f:id:n2i_h:20181219125514p:plain

結果はこのような形になりました！

個人的な印象としては、思ったより再現度が高く、すごいと思いました。

文字は問題なく認識されたようですが、一番外の外の枠線は認識されませんでした。こういった装飾的な要素は再現されないのかもしれません。

「FORGET PASSWORD？」の部分は下線付きのテキストリンクのつもりだったのですが、チェックボックスになりました。

ソースコードを確認してみた

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width" />
    <title>HTML Result</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" 
          integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
</head>
<body>
    <div class="container body-content">
        
<div class="container">
                    <div class="row justify-content-center" style="padding-top:10px;">
<label>LOGIN</label>
               </div>
                <div class="row justify-content-start" style="padding-top:10px;">
                <div class="col" style="padding-top:10px;">
<label>ID</label>
                </div>
                <div class="col" style="padding-top:10px;">
<input class="form-control"></input>
                </div>
                </div>
                <div class="row justify-content-start" style="padding-top:10px;">
                <div class="col" style="padding-top:10px;">
<label>PASS</label>
                </div>
                <div class="col" style="padding-top:10px;">
<input class="form-control"></input>
                </div>
                </div>
                <div class="row justify-content-center" style="padding-top:10px;">
<button class="btn btn-primary">SIGN UP</button>
                </div>
                <div class="row justify-content-center" style="padding-top:10px;">
<label><input type="checkbox" /> FORGET PASSWORD ?</label>
                </div>
</div>
    </div>
</body>
</html>