自然語言處理和UI界面的全自動生成

01-23

沒有實際操作過，但有思考過這個問題的實施辦法。

從Web開發者的角度來說，UI就是HTML+CSS+JavaScript。從本質上來說，UI的自動生成也就是生成這三者。而這三者雖然是計算機語言，但本質上與自然語言處理並無兩樣，因為是計算機語言，本身就帶有結構化信息，所以處理起來比自然語言要容易的多。

所謂自然語言處理，就是利用概率論和演算法知識對現實問題進行抽象建模。

比如，Shazam音樂雷達這個服務可以識別一段音頻中包含哪首歌，即使音頻包含了環繞立體聲、噪音或其它失真也沒問題。

概括數據

在自然語言處理中，第一步是要概括數據，即將文本內容分割成n-gram模型。n-gram模型就是n個單詞長度的片語。

比如「張愛國愛國」這段話應該被分割成

["張愛國", "愛國"]

概括數據包含了很多問題，比如張愛國是概括成「張，愛國」兩個詞，還是概括成「張愛國」這個名字，需要結合上下文語境、詞義等進行分析。

當然這種技術目前已經有了可觀進展，並且有非常多的庫供開發者選擇。

這種處理方法，對於計算機語言來說，也是一樣的。

比如，如下這段CSS：

#header { text-align: center; padding: 3em 0 0 0; background-color: #fff; background-image: url("images/bg02.png"), url("images/bg02.png"), url("images/bg01.png"); background-position: top left, top left, top left; background-size: 100% 6em, 100% 6em, auto; background-repeat: no-repeat, no-repeat, repeat;}

它可以有兩種結構化方式

JSON
n-gram模型

私以為，相比較數組來說，JSON更適合CSS的表達。計算機語言與自然語言最大的不同在於，計算機語言沒有二義性，所以結構化起來就很容易了。

[{ selector: "#header", attributes: [ { attrName: "text-align", attrValue: "center" }, ... ]}]

簡單的結構化模型，當然這個模型需要在實際工作中進行調整。

在做好結構化工作之後，下一步是建立一個馬爾可夫模型。

馬爾可夫模型

馬爾可夫模型的用處很廣，最有名的是Google的page rank演算法。其本質也是非常簡單的，但需要基於大量隨機事件才能建立。

舉一個經典的天氣例子：

如果今天是晴天，那麼明天有70%的可能是晴天，20%的可能是多雲，10%的可能是下雨。

馬爾可夫模型就是這樣一個接一個連接的點，每個連線都有一個概率統計。而這個統計的數字是基於大量文本訓練而來的。

根據這個簡單的方法，馬爾可夫模型可以演化成任意規模的複雜系統。比如文本寫作與分析，其原理就是計算一個詞後面接著另外一個詞的概率，數據結構類似下面這樣：

{ word_a: { word_b: 2, word_c: 1, word_d: 1, } ...}

在這個實例中，wora_a出現了4（2+1+1）次，有兩次後面跟著word_b，有一次跟著word_c，還有一次跟著word_d，那麼word_a就有50%（2/4）的概率會指向word_b，剩下兩個都是25%

接著，系統會隨機根本單詞頻率的權重隨機獲取一個單詞。

也就是說，只要有足夠的數據，只需要一個詞語，根據馬爾可夫模型就可以生成任意長度的句子。

明白了這點，再回過頭來看我們該如何生成CSS，其實主要就是幾個步驟：

獲取大量的CSS源代碼
結構化CSS源代碼為JSON
遞歸遍歷JSON結構建立馬爾可夫模型
根據馬爾可夫模型生成CSS源代碼

前兩點沒啥好說的，這裡主要說下第三點，簡單列一個CSS的馬爾可夫模型（可能會根據實際情況有所改變）：

{ "text-align": { value: "center", next: { padding: { value: "3em 0 0 0", rate: 20% }, ... } }, padding: { value: "3em 0 0 0", next: { ... } }, ...}

當然這僅僅是針對於CSS屬性的馬爾可夫模型，還可以再建立CSS屬性值的馬爾可夫模型。

{ "text-align": { center: 1, left: 2, right: 3 }, padding: { "3em 0 0 0": 1, ... }, ...}

可以看到，到了這一步時，複雜度已經越來越高了，現有的模型可能無法支撐其複雜度，這個時候需要使用「六度分割」。

六度分割

所謂六度分割可以簡單理解為有向圖、無向圖問題，比如A->B連通，但不代表B->A連通。

六度分割是解決句子中的一個詞後面跟著哪個詞的最佳解決辦法，這裡不詳細說了。

基於此，用自然語言處理和機器學習的相關概念處理HTML和CSS的自動生成理論是沒有問題的。

只要有足夠的訓練數據，一定可以生成樣式複雜的CSS和HTML。