画像からHTMLコードを自動生成[pix2code]

webサイト制作などに欠かせないのがコーディングスキルですが、コーディングを自動で行わせてしまおうとする動きがあります。

それが自動コーディング技術です。

いよいよコーディングも自動化されそうですね。

概要

デンマークのコペンハーゲンに拠点を構えるUizard社がwebデザインの画像データからAIのディープラーニング技術を用いてhtmlコードを自動で書き出し出力してくれるシステムを開発しました。

↓公式サイトです(英語)

https://uizard.io/blog/pix2code/

まずは下図を見てください。

デザインの画像とプログラムコードに分けて、それぞれデザインはCNN(Convolutional Neural Network) とLSTM(Long-Short Term Memory)を使い学習します。

こうしてpix2codeは画像とそこに紐づくプログラムコードを学んだことになるので、自分が用意した画像から適切なプログラムコードを予測して生成してもらうという内容です。

単語について

上図宙に出てきたキーワードについて話します。

CNN,LSTMとはディープラーニング技術の一つです。

詳細は参考リンクに詳しく乗っているので貼っておきます。

CNN

https://www.atmarkit.co.jp/ait/articles/1804/23/news138.html

LSTM

https://qiita.com/t_Signull/items/21b82be280b46f467d1b

DSL(Domain Specific Language)

JavaやC言語などとは違い、SQLなどの特定のタスク向け言語プログラム生成のような技術に使われる

問題点

まず最初に画像を読み込ませる段階で認識がうまくいくかという問題があります。

例えば画像中にノイズが混じっていたり、デザインを設計した段階で少し間違っていたら、間違っているまま認識させてしまうということです。

次に、デザインとプログラムの紐づけ、つまり精度の問題です。もちろん精度は完ぺきではないため、画像だったところがフォームになっていたり、文字をリンクにしたい場合はどうするかなどの問題が出てきます。

コメントする

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA