【Python】2.画像からHTMLを自動生成する仕組み※深層学習ではありません～for文減少への追求～

前回書いたように「Python」「Tailwind CSS」の出会いから画像からHTMLの自動生成を実装したいと考え、仕組みを考えPythonで実装しようと試みています。

画像からHTMLを自動生成する仕組み（概要）

※解析が難しいかつ複雑になる＆原始的なやり方なので、今は別の方法を模索中

1. 「cv2」を用いて画像読み込み
   （画像：デザインデータを画像化したもの。分割して複数でもOK）
2. 「pyocr」を用いて画像内のテキストを抽出
3. 画像を分割
   垂直方向に分割、水平方向に分割、これを交互に行い、分割できなくなるまで繰り返す
   分割の基準は1列または1行すべてが同じ色のときを隙間（margin・padding）と見なして分割
   ※テキストの行間や文字間レベルの小さい隙間は無視し分割しない
   ※親子関係あり（分割元：親、直下の要素：子）
   ※2で抽出したテキストのエリアに包括される「margin」「object」は1つの「object」と見なす
4. 画像分割時にtypeを付与
   1列または1行すべてが同じ色のブロック→margin（隙間）
   それ以外のブロック→object（物体）
   ※分割元画像→base
5. 分割された「margin」「object」を解析し、「object」にclassを付与
6. 「object」をベースにhtmlを構築

1～3は下記ような感じです。

↓

「object」にclassを付与

例えば「object」の上に「margin」があれば、Tailwind CSSの「pt-12」や「pt-40」など「margin」の高さに合わせて「object」にクラスを付与します。

他には、両端に「margin」があれば、「max-w-5xl」などの最大幅と「mx-auto」を設置し、中央に表示します。もし両端のmarginに差がある場合、左の「margin」が大きければ差分量「pl-10」のように設定し、反対側であれば「pr-10」と設定します。

というように、「object」と「margin」から大きさや位置関係によって簡単なクラス（background-color、margin、padding、width、flex等）を設定します。

「object」をベースにhtmlを構築

上記のとおり「object」には「class」が既に設定されていますので、「object」の状態によってタグを設定し、そこにclassも設定します。

タグの振分

• 子を持つ「object」→div
• 2、3で抽出されたテキストと判定された「object」→pタグ
• それ以外の「object」→img

imgタグと判断された「object」は分割したデータを元に画像で書き出し、パスをsrc属性に指定します。

この仕組みの問題点

この仕組みを実際にある程度形にしてみました。その結果見えてきた問題点が見えてきました。

• classの解析部分が少し複雑
• 深層学習・機械学習のようにデータを増やして精度をあげることが出来ない
• 良くするには人の手で改修が必要
• 変わったレイアウトは対処しにくい
• テキスト抽出の精度（日本語という問題点もありそう）
  →テキスト抽出できない箇所が増えると、分割・解析に影響する
• 良いHTML構造にするのが難しい
  →テキストとテキストのmarginを別ブロックと判断してしまう

などなど、書き出されるhtmlに不要なタグが多くなってしまいます。

ただ、書き出しながら、もしかするとある程度の単調なレイアウトであれば、イケるかも？…と思う気持ちも少し出てきました。

考え方

色々と試しているのですが、元の理由を忘れないようにしたいと思います。

開発のきっかけは作業を減らすことにあります。そして減らせる作業は単純作業が大部分です。となると、単純なレイアウトの画像から自動生成、スライスの自動化（これは簡易版が完成しました）、といったように作業を見定めて開発する必要があります。

もちろん、画像をディレクトリに入れてコマンド一発でhtmlが書き出されればベストですが、、それを追い求めるより、細々した部分を自動化しつつ、組み合わせることでコマンド一発に近づければという考えになってきました。

ただ、機械学習・深層学習に近い形の実装も少し考えています。うまくいくかは試してみないと分かりませんがそれが出来れば同じようなレイアウトは二度書く必要がなくなるのではと思っています。まあ、まだ着手していないので希望の域を超えませんが。

for文が遅い

だいぶ、寄り道してしまいましたが、本記事の仕組み（概要）の3.画像を分割の処理に時間が掛かっています。

分割処理内のループ数が多いことが原因のようです。詳しくは次回書きたいと思います。

↓前へ

スポンサーリンク