【得物技術】自動化生成代碼幾種方案的演變

{"type":"doc","content":[{"type":"heading","attrs":{"align":null,"level":1}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"今天我們聊一聊自動化生成代碼的問題，試想一下，假如有一天機器替代你編寫代碼，你是應該感到開心還是難過？","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"方案","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"目前代碼生成技術主要有以下幾類：","attrs":{}}]},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/94/94bf33ee8ff1dce40aa508da2739afaa.png","alt":null,"title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"1）基於模版編排生成代碼","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"首先說下基於模版生成代碼的方式，這種屬於最原始最簡單也是目前應用最廣泛的一種代碼生成方式，可以說，幾乎所有的代碼生成方式都是建立在模版的基礎上繁衍而來。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"前端最有名的莫過於vue-cli和create-react-app兩款腳手架的代碼生成了，他們分別基於vue和react框架進行的一鍵初始化項目生成代碼，包括各公司內部的項目生成的腳手架，其實本質上是一樣的，只是加入了公司內部集成的很多公共的組件和方法而已。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"其實最早的代碼生成並不是前端，因爲那個時候還沒有前端這個概念，在WWW萬維網的時代，頁面基本是由後端進行開發，因此在模版代碼生成這一領域我們只是走了後端走過的路。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"記得最早接觸模版代碼生成的是在剛開始開發後端項目的時候，那時候還是採用MVC架構，要開發一個新的功能模塊的時候，往往需要分別對controller,service,dbService中進行新的代碼注入，有點類似於egg中的結構（如果不熟悉後端開發的話），因此這種機械化比較固定的結構化組織中，往往通過命令一鍵生成即可，然後再對service/dbService中寫入獨特的邏輯即可。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"這種開發模式能節省很多開發時間，且上手容易，開發者往往只需要關注邏輯開發即可，但往往會出現很多重複性的代碼，這也是自動化代碼生成一直存在的弊端。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"2）基於可視化UI生成代碼","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"基於可視化搭建的代碼生成，這也是目前市場上最多的一種產物，也是很多可視化搭建文章強行給它帶上的一種帽子，但準確的說它並不完全屬於自動化生產代碼，只是其中的一個環節而已，由於它需要過多的加入人爲干預，最終才能得到我們想要的運行程序，感覺它一點都不自動化，如何對得起“自動化”三字？","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"但可視化搭建的確能帶來一些節約生產力的功能，同時也給其他角色賦能，搭建應用的不一定是開發了，他們甚至可以不需要懂任何程序，可以是設計、產品和運營。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"其中最爲成熟的莫過於汽車行業生成代碼。對，你沒看錯，就是汽車行業，在我們的印象中，汽車行業屬於比較傳統的行業，似乎與新興產業互聯網的代碼編程八竿子打不着。然而，在2010年之前，大多數的汽車控制軟件，如發動機控件、變速箱軟件、車身控制軟件等都是通過手寫C代碼完成的。開發流程如下：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/84/842bf48cc1e934e4e1e32ed29a8d50de.jpeg","alt":null,"title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"其中設計師是不懂代碼的，從設計圖交付開始到最終控制器的完成，這一過程會出現兩個問題，設計師與碼農之間的溝通成本以及碼農的交付質量，項目越大這兩大問題就越突出，直接影響交付日期、成本和質量，通常情況下交付時間與成本成反比，與質量成正比，而時間就是金錢的今天，要同時保證成本和質量，更好的辦法就是設法將將代碼標準化，同時降低溝通成本。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"因此，可視化UI生成代碼似乎是最合適的途徑。它從設計師的角度出發，將視圖UI與命令行一一綁定，設計師拖動一個視圖即生成一個對應的C代碼。最終，碼農下崗了。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/1d/1d9c7bca3b92d090dd12fa524da9453a.jpeg","alt":null,"title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"上面這種成熟的Simulink軟件處理的可視化邏輯的控制，只能處理簡單的邏輯，與現代的邏輯編排的設計理念相同。當然它也有自己的缺點就是不適合複雜的項目工程，在這種場景，它反而比直接寫代碼的效率更低。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"另一個著名的可視化UI生成代碼例子，便是.NET時代的eclipse的web搭建，使用過eclipse編輯器開發web界面都應該知道這個工具，如圖","attrs":{}}]},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/1a/1a43b4bcd7c580297414b0e1b2e4babe.jpeg","alt":null,"title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"只是它在開發者的用戶體驗上比不上網頁三劍客，最終被淘汰了，畢竟它只是主打JAVA開發的IDE，開發Web可視化也只是其中一個擴展而已，這裏也告訴我們一個道理，一個產品的精而美，比大而強反而更容易獲得成功。專注而頂尖，是很多產品的成功奧祕。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"當然目前可視化搭建的系統，是在太多了，目前主要分爲兩種方式，運行時搭建和生成源碼搭建，這裏就不一一展開介紹了。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"3）基於代碼語料生成代碼","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"基於代碼語料生產代碼的前提是要有足夠的語料，也就是代碼片段。這種方式，通常都是基於IDE的插件而開發的應用。因爲它最終的目的是爲了開發提效，針對的用戶羣體是開發者，必須有開發介入生成一個半成品的代碼片段或模塊。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"假如你有耐心閱讀到此，說明你是對代碼生成領域感興趣的同行，爲了表示感謝，接下來會安利一波福利。這裏的福利也只是針對前端開發，主要是針對vscode插件展開介紹。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"這裏其實需要分爲簡單和複雜兩種場景：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"bulletedlist","content":[{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"固定語料","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"智能化語料","attrs":{}}]}]}],"attrs":{}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":4},"content":[{"type":"text","text":"固定語料","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"用戶提前設置的代碼片段，通過監聽用戶輸入快捷鍵值，搜索出對應的片段，提示用戶。針對vue的提示插件Vue 3 Snippets針對react的提示插件ES7 React/Redux/GraphQL/React-Native snippets上面兩款插件的下載量都是百萬級別以上的，所以流行程度是絕對槓槓的，當然如果你覺得它們不好用，或者不夠貼切公司內部的代碼片段，也可以自己定製。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"這種生成代碼方式，簡單而快速，但也存在其弊端，固定化不好擴展，而且最令人不快的是使用者需要一定的學習成本，需要提前瞭解鍵值以及對應的代碼片段。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"爲了解決這個弊端，於是聰明的程序員們便加入智能化，利用訓練學習法找出對應的代碼片段，於是有了接下來的智能化語料。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":4},"content":[{"type":"text","text":"智能化語料","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"1）Kite Autocomplete插件","attrs":{}},{"type":"text","text":"首先介紹第一個智能化代碼提示vscode插件Kite Autocomplete，在超過2500萬個文件上訓練的ML模型，Kite 爲您的代碼編輯器添加了 AI 驅動的代碼完成功能，賦予開發人員超能力。","attrs":{}}]},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/c7/c7297d9714f7b8a83566768e045ae5ae.png","alt":null,"title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"它會根據用戶輸入的上下文以及當前輸入，預判用戶將要輸入的內容。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"在安全方面，kite在本地運行，您的代碼是私有的，不會離開您的機器。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"這種智能化輸入是依賴n-gram模型（不瞭解n-gram模型的童鞋可以自行搜索瞭解一下），只不過它比n-gram模型做得更前一步，會預先讀取整個文件的上下文，結合當前的輸入再推斷出用戶的行爲。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"總體上，Kite Autocomplete插件還是蠻好用的，它支持多種語言，","attrs":{}},{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"使用vscode編輯器的同學強烈建議使用，在這裏給你們種草了，超好用，誰用誰知道","attrs":{}},{"type":"text","text":"。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"2）GitHub Copilot插件","attrs":{}},{"type":"text","text":"接下來介紹另一個智能化代碼提示vscode插件GitHub Copilot，它是OpenAI與微軟聯手推出的一款AI代碼生成代碼工具，可以說它是vscode官方親兒子也不爲過，不過要使用它需要註冊。讓我們看看你它的官方介紹","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"GitHub Copilot 由 OpenAI 創建的新 AI 系統 Codex 提供支持。GitHub Copilot 比大多數代碼助手理解的上下文要多得多。因此，無論是在文檔字符串、註釋、函數名稱還是代碼本身中，GitHub Copilot 都會使用您提供的上下文併合成代碼以進行匹配。我們正在與 OpenAI 一起設計 GitHub Copilot，以便在開發人員使用它時更智能地生成安全有效的代碼","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/21/21eca4fcefa2b84c1d8eb5ab588bcfc8.png","alt":null,"title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"它最大的核心競爭力便是可以根據註釋自動生成代碼，也就是說你告訴編輯器功能描述，它便可以自動幫你生成你想要的代碼了，聽起來是不是很酷？它實現原理如下：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/c2/c274b702981e33ef983ac1f716d1078e.jpeg","alt":null,"title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"當然，它也可以自動填充重複代碼，GitHub Copilot 非常適合快速生成樣板和重複代碼模式，這個功能完全就是將上述介紹的固定語料包含了進去，可以說對需要寫大量模版代碼的程序員是非常香的一個操作。","attrs":{}}]},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/89/898abdd1360c9b75c98ed14d35972c57.png","alt":null,"title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"另一個比較重要的功能便是測試代碼，官方表示無需辛苦的測試。 測試是任何強大的軟件工程項目的支柱。導入單元測試包，讓 GitHub Copilot 建議與您的實現代碼匹配的測試。","attrs":{}}]},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/f3/f3f39b6682ffbec890ca5f6669c31cce.png","alt":null,"title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"據官網介紹，它是一款基於訓練集卻可以生成從來沒出現過的新代碼的工具，聽起來是不是很牛？它居然可以“創建”代碼了。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"最後也是最重要的一點，GitHub Copilot插件暫時只提供有限用戶的試用體驗，目前只有預覽版本，總之一句話，","attrs":{}},{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"暫時用不了","attrs":{}},{"type":"text","text":"。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"4）基於智能化生成代碼","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"1）sketch2code","attrs":{}},{"type":"text","text":"介紹完GitHub Copilot後，下面讓我們瞭解微軟的另一款智能化生成工具","attrs":{}},{"type":"link","attrs":{"href":"https://sketch2code.azurewebsites.net/","title":null,"type":null},"content":[{"type":"text","text":"sketch2code","attrs":{}}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/4b/4b5a4797f9a6454e1fe04f0d0571f0a1.png","alt":null,"title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"它的主要功能是將手繪圖轉化HTML代碼。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"它實現的過程如下：1.首先，用戶通過網站上傳圖片。2.自定義視覺模型預測圖像中存在哪些 HTML 元素及其位置。3.手寫文本識別服務讀取預測元素內的文本。4.佈局算法使用來自預測元素的所有邊界框的空間信息來生成容納所有元素的網格結構。5.HTML 生成引擎使用所有這些信息來生成反映結果的 HTML 標記代碼。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"於是我趕緊試了一波，效果如下：","attrs":{}}]},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/2c/2c59a0a2ff03eeafabf5f83164322918.png","alt":null,"title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"左中右分別爲草稿原圖，識別分析圖，結果html由於是橫屏的角度，嗯嗯，我原諒你，再來個正常的吧","attrs":{}}]},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/1a/1ac4e5480ec1834796a6fe4e0bc901c1.png","alt":null,"title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"識別度還是不太理想呀。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"同時它還支持攝像頭識別，也就是說只要加上硬件設備，產品就可以一邊在上面bibi……哦不對，是一邊規劃，一邊生成代碼，只不過是原生的html代碼，我又趕緊試了一波，結果:","attrs":{}}]},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/18/18902d636796898183bf469f4cb6d6ca.png","alt":null,"title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"上面是攝像頭拍到的快照，上傳之後……","attrs":{}}]},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/28/284b7c1c5daacdfec242e792f16b4527.png","alt":null,"title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"啥？識別不出，好吧。估計是我畫得比較潦草，而且可能圖片背景不是全白的，於是乎我用了它官方提供的示例圖","attrs":{}}]},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/9f/9f8ef61db2c6a55e9e134385c8baef6b.png","alt":null,"title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"效果好一點，但還是不能完全識別出來。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"所以它目前還是有些缺陷的","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"bulletedlist","content":[{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"生成結果只能是原生HTML","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"識別率較低，草稿圖還原度有待提升","attrs":{}}]}]}],"attrs":{}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"2）teleporthq","attrs":{}},{"type":"text","text":"另一款AI智能化代碼生成工具是","attrs":{}},{"type":"link","attrs":{"href":"https://teleporthq.io/","title":null,"type":null},"content":[{"type":"text","text":"teleporthq","attrs":{}}]},{"type":"text","text":"，它與上面的sketch2code原理很相似，只是它更進一步，如圖","attrs":{}}]},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/5a/5aac88c62165acd54f9948a6d09d9634.png","alt":null,"title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"產品經理一邊在小黑板上畫圖，後面的機器一邊掃描，識別並生成代碼，同時實時給出預覽效果。","attrs":{}},{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"真正做到了一邊畫草稿一邊生成代碼","attrs":{}},{"type":"text","text":"，實現自動化生成代碼功能，原文請前往(https://teleporthq.io/blog/we-believe-in-ai-powered-code-generation)。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"teleporthq它的官網似乎與普通的可視化搭建器並沒有什麼不同，然而，如果仔細觀察，你會發現它其實比普通的可視化搭建器更多一些東西，比如支持草圖到代碼，視覺API，而這些東西正是結合硬件設備實現代碼實時輸出必不可少的東西。當然它識別草稿圖的辨識度就ememem~，除了草稿圖，它也是支持識別Sketch素材的。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"目前它支持生成的目標代碼有React/Vue/Angular等，更多可前往其官網https://teleporthq.io/","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"teleporthq與國內阿里的imgcook原理上很相似，只是imgcook識別的是各種設計師的素材(Sketch/PS/Figma)並將其生成多種目標代碼，imgcook就不一一展開介紹，讀者可自行鑑賞。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"結論","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"今天我們從互聯網的發展歷史分別介紹了自動生成代碼的幾種方式：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"bulletedlist","content":[{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"基於模版編排生成代碼","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"基於可視化UI生成代碼","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"基於代碼語料生成代碼","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"基於智能化生成代碼","attrs":{}}]}]}],"attrs":{}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"無論如何發展，其本質其實從來沒有變過，那就都是基於模版本身，變的只是轉換規則。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"文/Alan","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"關注得物技術，做最潮技術人！","attrs":{}}]}]}