整合營(yíng)銷服務(wù)商

          電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理

          免費(fèi)咨詢熱線:

          小強(qiáng)教你學(xué)前端,html基礎(chǔ)第一課(處女演講視頻)

          小強(qiáng)教你學(xué)前端,html基礎(chǔ)第一課(處女演講視頻)

          家好,我是小強(qiáng),從事前端web開發(fā)工作。今天起,打算錄制html視頻教程,希望對(duì)剛開始學(xué)前端或打算學(xué)前端的同學(xué)有那么一點(diǎn)點(diǎn)幫助。真真正正的入門級(jí)的,各位大牛不要噴。有意見請(qǐng)?jiān)u論里直接告訴我,我會(huì)努力改進(jìn)的。

          下邊是第一課的視頻,希望大家耐心開完:

          內(nèi)有個(gè)流行的說法就是“任何可以用 JavaScript 來寫的應(yīng)用,最終都將用 JavaScript 來寫”,而這就是阿特伍德定律(Atwood's Law)。JavaScript 幾乎無處不在,而且普及程度還在持續(xù)增長(zhǎng)。近日微軟以 Python 初學(xué)者系列為基礎(chǔ),推出了總共 51 課時(shí)的免費(fèi)教學(xué)視頻。

          在整個(gè)課程中,微軟幫助用戶使用Visual StudioCode 設(shè)置開發(fā)環(huán)境,將 Node.js 安裝為 JavaScript Runtime,然后直接上手創(chuàng)建“Hello World”應(yīng)用程序。在課程中提供了 JavaScript 的語法,并逐漸深入研究更高級(jí)的主題,包括對(duì)象和具有異步功能的編程。最后在課程中探索 JavaScript 生態(tài)系統(tǒng)以及 NPM 上可用的大量軟件包和庫(kù)。

          在本課程的開始部分,微軟還將介紹(很多)可以運(yùn)行 JavaScript 的地方,其中包括瀏覽器以及帶有Node.js的服務(wù)器。雖然本課程的重點(diǎn)主要是使用 Node.js 作為執(zhí)行環(huán)境,但是大多數(shù)視頻將介紹在瀏覽器中也有效的概念和語法。

          訪問地址:https://www.youtube.com/playlist?list=PLlrxD0HtieHhW0NCG7M536uHGOtJ95Ut2

          小新 編譯自 Insight Data Blog

          量子位 出品 | 公眾號(hào) QbitAI

          寫個(gè)網(wǎng)頁(yè)能有多麻煩?在大多數(shù)公司里,這項(xiàng)工作分為三步:

          1. 產(chǎn)品經(jīng)理完成用戶調(diào)研任務(wù)后,列出一系列技術(shù)要求;

          2. 設(shè)計(jì)師根據(jù)這些要求來設(shè)計(jì)低保真原型,逐漸修改得到高保真原型和UI設(shè)計(jì)圖;

          3. 工程師將這些設(shè)計(jì)圖實(shí)現(xiàn)為代碼,最終變成用戶使用的產(chǎn)品。

          這么多環(huán)節(jié),任何地方出一點(diǎn)問題,都會(huì)拉長(zhǎng)開發(fā)周期。因此,不少公司,比如Airbnb已經(jīng)開始用機(jī)器學(xué)習(xí)來提高這個(gè)過程的效率。

          Airbnb內(nèi)部的AI工具,從圖紙到代碼一步到位

          看起來很美好,但Airbnb還沒公開該模型中端到端訓(xùn)練的細(xì)節(jié),以及手工設(shè)計(jì)的圖像特征對(duì)該模型的貢獻(xiàn)度。這是該公司特有的閉源解決方案專利,可能不會(huì)進(jìn)行公開。

          好在,一個(gè)叫Ashwin Kumar的程序員創(chuàng)建了一個(gè)開源版本,讓開發(fā)者/設(shè)計(jì)師的工作變得更簡(jiǎn)單。

          以下內(nèi)容翻譯自他的博客:

          理想上,這個(gè)模型可以根據(jù)網(wǎng)站設(shè)計(jì)的簡(jiǎn)單手繪原型,很快地生成一個(gè)可用的HTML網(wǎng)站:

          SketchCode模型利用手繪線框圖來生成HTML網(wǎng)站

          事實(shí)上,上面例子就是利用訓(xùn)練好的模型在測(cè)試集上生成的一個(gè)實(shí)際網(wǎng)站,代碼請(qǐng)?jiān)L問:https://github.com/ashnkumar/sketch-code。

          從圖像標(biāo)注中獲取靈感

          目前要解決的問題屬于一種更廣泛的任務(wù),叫做程序綜合(program synthesis),即自動(dòng)生成工作源代碼。盡管很多程序綜合研究通過自然語言規(guī)范或執(zhí)行追蹤法來生成代碼,但在當(dāng)前任務(wù)中,我會(huì)充分利用源圖像,即給出的手繪線框圖來展開工作。

          在機(jī)器學(xué)習(xí)中有一個(gè)十分熱門的研究領(lǐng)域,稱為圖像標(biāo)注(image caption),目的是構(gòu)建一種把圖像和文本連接在一起的模型,特別是用于生成源圖像內(nèi)容的描述。

          圖像標(biāo)注模型生成源圖像的文本描述

          我從一篇pix2code論文和另一個(gè)應(yīng)用這種方法的相關(guān)項(xiàng)目中獲得靈感,決定把我的任務(wù)按照?qǐng)D像標(biāo)注方式來實(shí)現(xiàn),把繪制的網(wǎng)站線框圖作為輸入圖像,并將其相應(yīng)的HTML代碼作為其輸出內(nèi)容。

          注:上段提到的兩個(gè)參考項(xiàng)目分別是

          pix2code論文:https://arxiv.org/abs/1705.07962

          floydhub教程:https://blog.floydhub.com/turning-design-mockups-into-code-with-deep-learning/?source=techstories.org

          獲取合適的數(shù)據(jù)集

          確定圖像標(biāo)注方法后,理想中使用的訓(xùn)練數(shù)據(jù)集會(huì)包含成千上萬對(duì)手繪線框圖和對(duì)應(yīng)的HTML輸出代碼。但是,目前還沒有我想要的相關(guān)數(shù)據(jù)集,我只好為這個(gè)任務(wù)來創(chuàng)建數(shù)據(jù)集。

          最開始,我嘗試了pix2code論文給出的開源數(shù)據(jù)集,該數(shù)據(jù)集由1750張綜合生成網(wǎng)站的截圖及其相應(yīng)源代碼組成。

          pix2code數(shù)據(jù)集中的生成網(wǎng)站圖片和源代碼

          這是一個(gè)很好的數(shù)據(jù)集,有幾個(gè)有趣的地方:

          • 該數(shù)據(jù)集中的每個(gè)生成網(wǎng)站都包含幾個(gè)簡(jiǎn)單的輔助程序元素,如按鈕、文本框和DIV對(duì)象。盡管這意味著這個(gè)模型受限于將這些少數(shù)元素作為它的輸出內(nèi)容,但是這些元素可通過選擇生成網(wǎng)絡(luò)來修改和擴(kuò)展。這種方法應(yīng)該很容易地推廣到更大的元素詞匯表。

          • 每個(gè)樣本的源代碼都是由領(lǐng)域?qū)S谜Z言(DSL)的令牌組成,這是該論文作者為該任務(wù)所創(chuàng)建的。每個(gè)令牌對(duì)應(yīng)于HTML和CSS的一個(gè)片段,且加入編譯器把DSL轉(zhuǎn)換為運(yùn)行的HTML代碼。

          彩色網(wǎng)站圖像變手繪圖

          為了修改我的任務(wù)數(shù)據(jù)集,我要讓網(wǎng)站圖像看起來像手工繪制出的。我嘗試使用Python中的OpenCV庫(kù)和PIL庫(kù)等工具對(duì)每張圖像進(jìn)行修改,包括灰度轉(zhuǎn)換和輪廓檢測(cè)。

          最終,我決定直接修改原始網(wǎng)站的CSS樣式表,通過執(zhí)行以下操作:

          1. 更改頁(yè)面上元素的邊框半徑來平滑按鈕和DIV對(duì)象的邊緣;

          2. 模仿繪制的草圖來調(diào)整邊框的粗細(xì),并添加陰影;

          3. 將原有字體更改為類似手寫的字體;

          最終實(shí)現(xiàn)的流程中還增加了一個(gè)步驟,通過添加傾斜、移動(dòng)和旋轉(zhuǎn)來實(shí)現(xiàn)圖像增強(qiáng),來模擬實(shí)際繪制草圖中的變化。

          使用圖像標(biāo)注模型架構(gòu)

          現(xiàn)在,我已經(jīng)處理好數(shù)據(jù)集,接下來是構(gòu)建模型。

          我利用了圖像標(biāo)注中使用的模型架構(gòu),該架構(gòu)由三個(gè)主要部分組成:

          1. 一種使用卷積神經(jīng)網(wǎng)絡(luò)(CNN)的計(jì)算機(jī)視覺模型,從源圖像提取圖像特征;

          2. 一種包含門控單元GRU的語言模型,對(duì)源代碼令牌序列進(jìn)行編碼;

          3. 一個(gè)解碼器模型,也屬于GRU單元,把前兩個(gè)步驟的輸出作為輸入,并預(yù)測(cè)序列中的下一個(gè)令牌。

          以令牌序列為輸入來訓(xùn)練模型

          為了訓(xùn)練模型,我將源代碼拆分為令牌序列。模型的輸入為單個(gè)部分序列及它的源圖像,其標(biāo)簽是文本中的下一個(gè)令牌。該模型使用交叉熵函數(shù)作為損失函數(shù),將模型的下個(gè)預(yù)測(cè)令牌與實(shí)際的下個(gè)令牌進(jìn)行比較。

          在模型從頭開始生成代碼的過程中,該推理方式稍有不同。圖像仍然通過CNN網(wǎng)絡(luò)進(jìn)行處理,但文本處理開始時(shí)僅采用一個(gè)啟動(dòng)序列。在每個(gè)步驟中,模型對(duì)序列中輸出的下個(gè)預(yù)測(cè)令牌將會(huì)添加到當(dāng)前輸入序列,并作為新的輸入序列送到模型中;重復(fù)此操作直到模型的預(yù)測(cè)令牌為,或該過程達(dá)到每個(gè)文本中令牌數(shù)目的預(yù)定義值。

          當(dāng)模型生成一組預(yù)測(cè)令牌后,編譯器就會(huì)將DSL令牌轉(zhuǎn)換為HTML代碼,這些HTML代碼可以在任何瀏覽器中運(yùn)行。

          用BLEU分?jǐn)?shù)評(píng)估模型

          我決定使用BLEU分?jǐn)?shù)來評(píng)估模型。這是機(jī)器翻譯任務(wù)中常用的一種度量標(biāo)準(zhǔn),通過在給定相同輸入的情況下,衡量機(jī)器生成的文本與人類可能產(chǎn)生內(nèi)容的近似程度。

          實(shí)際上,BLEU通過比較生成文本和參考文本的N元序列,以創(chuàng)建修改后的準(zhǔn)確版本。它非常適用于這個(gè)項(xiàng)目,因?yàn)樗鼤?huì)影響生成HTML代碼中的實(shí)際元素,以及它們之間的相互關(guān)系。

          最棒的是,我還可以通過檢查生成的網(wǎng)站來比較當(dāng)前的實(shí)際BLEU分?jǐn)?shù)。

          觀察BLEU分?jǐn)?shù)

          當(dāng)BLEU分?jǐn)?shù)為1.0時(shí),則說明給定源圖像后該模型能在正確位置設(shè)置合適的元素,而較低的BLEU分?jǐn)?shù)這說明模型預(yù)測(cè)了錯(cuò)誤元素或是把它們放在相對(duì)不合適的位置。我們最終模型在評(píng)估數(shù)據(jù)集上的BLEU分?jǐn)?shù)為0.76。

          福利:定制網(wǎng)頁(yè)風(fēng)格

          后來,我還想到,由于該模型只生成當(dāng)前頁(yè)面的框架,即文本的令牌,因此我可以在編譯過程中添加一個(gè)定制的CSS層,并立刻得到不同風(fēng)格的生成網(wǎng)站。

          一個(gè)手繪圖生成多種風(fēng)格的網(wǎng)頁(yè)

          把風(fēng)格定制和模型生成兩個(gè)過程分開,在使用模型時(shí)帶來了很多好處:

          1.如果想要將SketchCode模型應(yīng)用到自己公司的產(chǎn)品中,前端工程師可以直接使用該模型,只需更改一個(gè)CSS文件來匹配該公司的網(wǎng)頁(yè)設(shè)計(jì)風(fēng)格;

          2. 該模型內(nèi)置的可擴(kuò)展性,即通過單一源圖像,模型可以迅速編譯出多種不同的預(yù)定義風(fēng)格,因此用戶可以設(shè)想出多種可能的網(wǎng)站風(fēng)格,并在瀏覽器中瀏覽這些生成網(wǎng)頁(yè)。

          總結(jié)和展望

          受到圖像標(biāo)注研究的啟發(fā),SketchCode模型能夠在幾秒鐘內(nèi)將手繪網(wǎng)站線框圖轉(zhuǎn)換為可用的HTML網(wǎng)站。

          但是,該模型還存在一些問題,這也是我接下來可能的工作方向:

          1. 由于這個(gè)模型只使用了16個(gè)元素進(jìn)行訓(xùn)練,所以它不能預(yù)測(cè)這些數(shù)據(jù)以外的令牌。下一步方向可能是使用更多元素來生成更多的網(wǎng)站樣本,包括網(wǎng)站圖片,下拉菜單和窗體,可參考啟動(dòng)程序組件(https://getbootstrap.com/docs/4.0/components/buttons/)來獲得思路;

          2. 在實(shí)際網(wǎng)站構(gòu)建中,存在很多變化。創(chuàng)建一個(gè)能更好反映這種變化的訓(xùn)練集,是提高生成效果的一種好方法,可以通過獲取更多網(wǎng)站的HTML/CSS代碼以及內(nèi)容截圖來提高;

          3. 手繪圖紙也存在很多CSS修改技巧無法捕捉到的變化。解決這個(gè)問題的一種好方法是使用生成對(duì)抗網(wǎng)絡(luò)GAN來創(chuàng)建更逼真的繪制網(wǎng)站圖像。

          相關(guān)地址

          代碼:https://github.com/ashnkumar/sketch-code

          原文:https://blog.insightdatascience.com/automated-front-end-development-using-deep-learning-3169dd086e82

          — 完 —

          誠(chéng)摯招聘

          量子位正在招募編輯/記者,工作地點(diǎn)在北京中關(guān)村。期待有才氣、有熱情的同學(xué)加入我們!相關(guān)細(xì)節(jié),請(qǐng)?jiān)诹孔游还娞?hào)(QbitAI)對(duì)話界面,回復(fù)“招聘”兩個(gè)字。

          量子位 QbitAI · 頭條號(hào)簽約作者

          ?'?' ? 追蹤AI技術(shù)和產(chǎn)品新動(dòng)態(tài)


          主站蜘蛛池模板: 亚洲一区精彩视频| 日本美女一区二区三区| 婷婷国产成人精品一区二| 亚洲AV无码第一区二区三区| 国产一区在线观看免费| 99久久精品午夜一区二区| 亚洲日韩国产精品第一页一区| 日韩精品一区二区三区不卡 | 国产一区视频在线免费观看| 亚洲一区二区三区免费视频| 国产人妖视频一区二区| 国产精品一区二区综合| 在线观看视频一区二区| 中文精品一区二区三区四区 | 国产高清在线精品一区二区三区| 国产SUV精品一区二区88| 亚洲高清一区二区三区 | 另类一区二区三区| 国产综合一区二区在线观看| 亚洲福利精品一区二区三区| 国产一区中文字幕在线观看| 国产人妖视频一区二区破除| 福利一区二区三区视频午夜观看| 日本一区二区三区在线看| 国产综合无码一区二区色蜜蜜| 国产成人一区二区三区| 国产一区二区三区不卡在线看| 日韩一区二区三区视频久久| 一区二区在线免费视频| 日韩AV无码一区二区三区不卡毛片| 中文字幕人妻丝袜乱一区三区| 海角国精产品一区一区三区糖心| 亚洲乱码av中文一区二区| 韩国精品一区视频在线播放| 日美欧韩一区二去三区| 久久久不卡国产精品一区二区| 中文人妻无码一区二区三区| 国产suv精品一区二区33| 国产一区二区久久久| 国产一区二区在线观看视频| 中文字幕久久久久一区|