作為阿裡經濟體前端委員會四大技術方向之一，前端智能化項目經曆了 2019 雙十一的階段性考驗，交出了不錯的答卷，天貓淘寶雙十一會場新增子產品 79.34% 的線上代碼由前端智能化項目自動生成。在此期間研發小組經曆了許多困難與思考，本次《前端代碼是怎樣智能生成的》系列分享，将與大家分享前端智能化項目中技術與思考的點點滴滴。
概述
在前端智能化領域，特别是中背景智能方向上，表單表格的識别是非常重要的一環。因為表單表格的開發工作，占據了中背景前端開發工作量中的絕大部分，如果能夠通過智能的手段，從設計稿圖檔秒級生成表單表格代碼，那麼将會是巨大的生産力提升。本文将會揭秘秒級生成表單表格代碼的技術細節。
所在分層
表單/表格識别使用了元件識别、布局算法、物料屬性識别等技術，在這些技術中，核心技術是物料屬性識别，在整體分層中的物料識别層中，如圖所示。
（D2C識别能力技術分層）
秒級生成表單/表格代碼效果展示
隻需要截圖粘貼，并點選識别，就可以秒級生成表單、表格等通用前端元件協定，甚至連字段都翻譯好了，還是小駝峰命名法哦！
表單識别效果圖
表格識别效果圖
表單/表格識别技術揭秘
表單識别的主要思路是：
1.通過目标檢測技術檢測出所有的元件類型及其坐标。
2.通過文字識别技術和自動翻譯技術識别出所有文字及其坐标并翻譯為英文。
3.通過代碼轉換器從上述元件資訊和文字資訊中提取表單/表格的布局、label、type、字段等各種屬性。
目标檢測+文字識别
目标檢測使用的fasterrcnninceptionv2模型訓練和預測的，具體細節參考本系列文章中的元件識别篇。文字識别使用的通用的文字識别技術，可以檢測出文字内容和坐标，具體細節也不再贅述。
圖中紅框為目标檢測資訊，綠框為文字識别資訊
代碼轉換器
本文将重點介紹，如何使用代碼轉換器提取表單 / 表格的各種屬性。
絕對坐标轉行列
首先，為了友善處理資訊，我們先把目标檢測資訊和文字識别資訊的絕對坐标轉為行列，行列的具體資料結構是個二維數組，第一維是列，第二維是行。具體算法思路如下：
- 将所有識别出的帶有絕對坐标的框垂直排序。
- 周遊垂直排序後的框，将同一行的框放到一個數組中并水準排序，作為一行。
- 将所有行按先後順序放到一個數組中，最終生成行列二維數組。
計算表單 / 表格布局
通過上述行列資訊，我們可以計算出表單 / 表格的布局資訊了。
先看表單，表單項的布局是二維的，與上述元件識别的行列資訊一緻，是以直接将元件識别行列資訊通過嵌套循環 map 為表單協定即可。而表格則是一維的，隻要表頭就可以确定表格的結構了，那麼我們直接從文字識别行列資訊中提取第一行作為表頭即可。
計算表單 / 表格字段值
計算完了布局，我們來算具體的字段值及其類型。
先看表單，表單字段的值就是 label 翻譯為英文，并轉為小駝峰。那麼如何提取label 呢？根據常識我們知道表單項的 label 要麼在左邊，要麼在上邊，是以我們的算法就是：先提取左邊的 label，沒有的話，就提取上面的 label。
再看表格，表格字段就是表頭，我們從文字識别行列資訊中提取第一行即可拿到表頭的所有值。為了保險起見，可以 doublecheck 一下，第一行是不是表頭，比如通過長度來過濾，長度小于3的行就過濾掉了。
計算表單 / 表格的字段類型
由于表單項有 input、select、redio 等類型，表格有純文字、連結等類型，是以我們還需要計算這些字段類型。
先看表單，表單字段類型從目标檢測資訊中拿，因為目标檢測的任務之一就是為了提取表單項的類型。
再看表格，表格字段類型同樣也是從目标檢測資訊中拿，不過由于表格每一列的類型都是相同的，是以我們隻需要提取每一列的第一個類型即可。
計算表單 / 表格其他屬性資訊
上述資訊基本上已經可以幫我們節約大量工作量了，但是如果還想提取更多的屬性資訊，可以使用如下辦法：
- 遞歸識别：比如，識别出一個 input 之後，将其剪裁出來，遞歸到另一個模型中識别，比如可以識别是否是 disabled，是否必選等等。
- 繼續提取其他位置的文字資訊：比如表單項中間的可能是 placeholder 或者defaultValue。
未來展望
逍遙子在今年的雲栖大會說過，大資料和算力是數字經濟時代的石油和發動機。目前在前端行業，元件化已經初具規模，海量的元件可以作為大資料，同時，業界算力也在不斷提升，人工智能技術有很大可能性會改變前端開發的格局，讓我們拭目以待。