前端與AI

前端，主要負責網站界面的設計，也就是網頁GUI。熟悉前端的可能都知道，當你剛開始學html這些的時候，不藉助工具手擼html代碼，標籤，然後還要調整網頁布局什麼的，還是挺麻煩的。雖然html代碼很容易，但是要寫出代碼讓頁面的布局好看，還是挺不容易的。再說自動生成代碼，隨著人工智慧的發展，這一塊還是很熱門，大家聽得比較多的可能就是谷歌的用程序去生成設計神經網路了。html代碼可能有點不一樣，它的代碼最終目的是在瀏覽器生成頁面，也就是圖片。那麼，有沒有什麼方法可以根據圖片，去生成相應的html代碼呢？

這看起來與image caption，也就是圖片描述有點類似，圖片描述是根據一張圖片，來描述這張圖片的內容，那這個就是要生成代碼，只是生成的東西要更多一點。的確，有人做了這樣的工作，pix2code :Generating Code from a Graphical User Interface Screenshot,（剛開始看到這個一直以為是那個圖片轉換的Pix2pix，尷尬）。

可以看看它的整體架構,的確，與image caption那些結構很相似，訓練的時候GUI圖片用cnn提取特徵向量，代碼就是用LSTM去處理，然後結合這兩個向量再去處理，跟Image caption類似的結構。需要指出的是，Image caption訓練的時候是一張圖片對應一段文本，pix2code是一張網頁圖片對應了很多個代碼段，代碼段是這樣生成的：前i個代碼，目標值是i+1個代碼，那麼一張圖片對應的html代碼如果有n個，那麼就有n個這樣的代碼段。

gayhub上有代碼實現，裡面有幾種不同的實現。下面就是生成一張網頁的模型結構，左支是代碼段的輸入，都padding成了100的長度，右邊輸入是GUI圖片經過預訓練模型提取的特徵向量。

好了，模型就先說到這裡，比較簡單。可是很有意思的是，在上面的pro里，有個前端工程師問作者他會不會失去工作？哈哈，有趣。正如作者所說，這是很難發生的，至少近些年是這樣。拿pix2code來說，應用場景是很有限的。因此，AI，它更可能為前端工作者打輔助，刷助攻，而不是取代前端工作者，當然AI也很難做到。那下面根據我看的一些資料，可以說說AI可以在哪些方面給前端工作者提供幫助，搬一下磚......

1. 訓練AI自動完成重複性的「跑腿活兒」

沒錯，設計師的工作往往包含一些重複性的純體力活，比如裁切素材、調整圖片大小、修正白平衡……而這些事情可以非常容易地使用帶有人工智慧的自動程序來完成。當然，還是有很多工作不能簡單的PS一下就搞定，畢竟這些任務需要人類對內容進行組織和策劃的能力，還需要能在工作中迅速發現問題、作出決定的人類視覺能力才能順利完成。但如果我們能教導AI如何完成這類任務呢？

Adobe公司最近發布了一個被稱為「Sensei」的人工智慧，它能幫助設計師提高工作效能。舉例來說，Adobe 的 Scene Stitch 可以識別出圖像中的特徵模式，幫助設計師更方便的修補、修改甚至完全重新創造某個特定場景。

還比如， Netflix 開發了用來加速內容本地化進程的自動翻譯機制。當他們需要為某部劇集創建一些不同語種的廣告海報時，設計師只需要瀏覽機器人自動生成的數百種海報設計，給滿意的打勾，不滿意的打叉即可。

不久之前，Airbnb也發布了一項新技術，能識別手繪在紙上的網頁結構設計圖，並幾乎實時地把它變成對應的網頁代碼。

「測試任何想法的時間成本必須為零。我們相信，在接下來的幾年裡，新興的技術將使設計團隊能夠以一種充滿表現力和直觀的方式進行新產品的設計工作，並同時消除無數產品開發過程中的阻礙。」——來自 Airbnb 的 Benjamin Wilkins

在幾秒鐘內，Airbnb的AI將手繪草稿變成可用的網頁代碼

這些小小的優化能將設計師的雙手解放出來，讓他們有時間專註在更加策略性的產品決策工作上——而後者可是計算機需要花上大幾十年才有可能學會的。

2 創造富有活力的視覺樣式

你大概已經見過類似 Artisto 或 Prisma 這樣的工具，它們基於圖像識別技術，智能生成濾鏡，併疊加在照片或視頻上。這類技術能識別出照片中包含的到底是人像還是比如檸檬派什麼的，並自動採用最佳的視覺效果進行優化。

目前已經有一代這樣的APP，都在類似技術的驅動下，能夠創造出動態而富有活力的視覺效果。

另一個典型的例子是利用AI自動生成視覺元素的 Auto Draw。它來自 Google AI 實驗室，能自動識別你用滑鼠繪製的簡單圖形，並且用更加美觀的版本來代替。要是沒有機器學習，這樣的技術是無法實現的：使用這個工具進行繪圖的人越多，人工智慧就越能理解人們到底想畫什麼。

這類技術使得「設計」這件事情能為更多的人所接觸到。設計師（以及非設計師的普通用戶）能在不需要花費太多精力的情況下，做出質量更好的東西出來。這也是個很好的例子，證明AI能作為輔助技術，幫你更好完成工作，而不是搶走你的工作。

3. 個性化用戶體驗

網站將變得更加智能化，將更多的用戶數據納入考慮。根據當天的時間、用戶的來源、設備類型、星期幾等各種不斷增加的數據列表和甚至連用戶自己都根本不會注意到的信號——為訪客提供更個性化的用戶體驗。通過將所有這些因素納入計算，能給你提供一個全新的視野，以理解用戶登錄你的網站時最想要看到的是什麼。

在過去，往往是由一群分析家、設計師和技術專家利用這些信息，絞盡腦汁對每種可能的使用情況進行考慮，才能作出最後的決定。

當機器開始接手這類流程時，越來越多的企業就能做到對使用場景進行精細化分析，並定製高度個性化的用戶體驗。高度個性化的用戶體驗常常意味著跟用戶產生更密切的關聯性，也意味著更高的轉化率。

好了，搬磚完成，該去複習了。 ^ ^