用深度學習自動生成HTML代碼

深度學習自動生成HTML代碼

選自Floydhub

作者：Emil Wallner

機器之心編譯

如何用前端頁面原型生成對應的代碼一直是我們關注的問題，本文作者根據(jù) pix2code 等論文構建了一個強大的前端代碼生成模型，并詳細解釋了如何利用 LSTM 與 CNN 將設計原型編寫為 HTML 和 CSS 網(wǎng)站。

項目鏈接：github.com/emilwallner…

在未來三年內(nèi)，深度學習將改變前端開發(fā)。它將會加快原型設計速度，拉低開發(fā)軟件的門檻。

Tony Beltramelli 在去年發(fā)布了論文《pix2code: Generating Code from a Graphical User Interface Screenshot》，Airbnb 也發(fā)布Sketch2code（airbnb.design/sketching-i…）。

目前，自動化前端開發(fā)的最大阻礙是計算能力。但我們已經(jīng)可以使用目前的深度學習算法，以及合成訓練數(shù)據(jù)來探索人工智能自動構建前端的方法。在本文中，作者將教神經(jīng)網(wǎng)絡學習基于一張圖片和一個設計模板來編寫一個 HTML 和 CSS 網(wǎng)站。以下是該過程的簡要概述：

1）向訓練過的神經(jīng)網(wǎng)絡輸入一個設計圖

2）神經(jīng)網(wǎng)絡將圖片轉化為 HTML 標記語言

3）渲染輸出

我們將分三步從易到難構建三個不同的模型，首先，我們構建最簡單地版本來掌握移動部件。第二個版本 HTML 專注于自動化所有步驟，并簡要解釋神經(jīng)網(wǎng)絡層。在最后一個版本 Bootstrap 中，我們將創(chuàng)建一個模型來思考和探索 LSTM 層。

代碼地址：

github.com/emilwallner…
www.floydhub.com/emilwallner…

所有 FloydHub notebook 都在 floydhub 目錄中，本地 notebook 在 local 目錄中。

本文中的模型構建基于 Beltramelli 的論文《pix2code: Generating Code from a Graphical User Interface Screenshot》和 Jason Brownlee 的圖像描述生成教程，并使用 Python 和 Keras 完成。

核心邏輯

我們的目標是構建一個神經(jīng)網(wǎng)絡，能夠生成與截圖對應的 HTML/CSS 標記語言。

訓練神經(jīng)網(wǎng)絡時，你先提供幾個截圖和對應的 HTML 代碼。網(wǎng)絡通過逐個預測所有匹配的 HTML 標記語言來學習。預測下一個標記語言的標簽時，網(wǎng)絡接收到截圖和之前所有正確的標記。

這里是一個簡單的訓練數(shù)據(jù)示例：docs.google.com/spreadsheet…。

創(chuàng)建逐詞預測的模型是現(xiàn)在最常用的方法，也是本教程使用的方法。

注意：每次預測時，神經(jīng)網(wǎng)絡接收的是同樣的截圖。也就是說如果網(wǎng)絡需要預測 20 個單詞，它就會得到 20 次同樣的設計截圖?，F(xiàn)在，不用管神經(jīng)網(wǎng)絡的工作原理，只需要專注于神經(jīng)網(wǎng)絡的輸入和輸出。

我們先來看前面的標記（markup）。假如我們訓練神經(jīng)網(wǎng)絡的目的是預測句子「I can code」。當網(wǎng)絡接收「I」時，預測「can」。下一次時，網(wǎng)絡接收「I can」，預測「code」。它接收所有之前單詞，但只預測下一個單詞。

神經(jīng)網(wǎng)絡根據(jù)數(shù)據(jù)創(chuàng)建特征。神經(jīng)網(wǎng)絡構建特征以連接輸入數(shù)據(jù)和輸出數(shù)據(jù)。它必須創(chuàng)建表征來理解每個截圖的內(nèi)容和它所需要預測的 HTML 語法，這些都是為預測下一個標記構建知識。把訓練好的模型應用到真實世界中和模型訓練過程差不多。

我們無需輸入正確的 HTML 標記，網(wǎng)絡會接收它目前生成的標記，然后預測下一個標記。預測從「起始標簽」（start tag）開始，到「結束標簽」（end tag）終止，或者達到最大限制時終止。

Hello World 版

現(xiàn)在讓我們構建 Hello World 版實現(xiàn)。我們將饋送一張帶有「Hello World！」字樣的截屏到神經(jīng)網(wǎng)絡中，并訓練它生成對應的標記語言。

首先，神經(jīng)網(wǎng)絡將原型設計轉換為一組像素值。且每一個像素點有 RGB 三個通道，每個通道的值都在 0-255 之間。

為了以神經(jīng)網(wǎng)絡能理解的方式表征這些標記，我使用了 one-hot 編碼。因此句子「I can code」可以映射為以下形式。

在上圖中，我們的編碼包含了開始和結束的標簽。這些標簽能為神經(jīng)網(wǎng)絡提供開始預測和結束預測的位置信息。以下是這些標簽的各種組合以及對應 one-hot 編碼的情況。

我們會使每個單詞在每一輪訓練中改變位置，因此這允許模型學習序列而不是記憶詞的位置。在下圖中有四個預測，每一行是一個預測。且左邊代表 RGB 三色通道和之前的詞，右邊代表預測結果和紅色的結束標簽。

#Length of longest sentence
 max_caption_len = 3
#Size of vocabulary 
 vocab_size = 3
# Load one screenshot for each word and turn them into digits 
 images = []
for i in range(2):
 images.append(img_to_array(load_img('screenshot.jpg', target_size=(224, 224))))
 images = np.array(images, dtype=float)
# Preprocess input for the VGG16 model
 images = preprocess_input(images)
#Turn start tokens into one-hot encoding
 html_input = np.array(
 [[[0., 0., 0.], #start
 [0., 0., 0.],
 [1., 0., 0.]],
 [[0., 0., 0.], #start <HTML>Hello World!</HTML>
 [1., 0., 0.],
 [0., 1., 0.]]])
#Turn next word into one-hot encoding
 next_words = np.array(
 [[0., 1., 0.], # <HTML>Hello World!</HTML>
 [0., 0., 1.]]) # end
# Load the VGG16 model trained on imagenet and output the classification feature
 VGG = VGG16(weights='imagenet', include_top=True)
# Extract the features from the image
 features = VGG.predict(images)
#Load the feature to the network, apply a dense layer, and repeat the vector
 vgg_feature = Input(shape=(1000,))
 vgg_feature_dense = Dense(5)(vgg_feature)
 vgg_feature_repeat = RepeatVector(max_caption_len)(vgg_feature_dense)
# Extract information from the input seqence 
 language_input = Input(shape=(vocab_size, vocab_size))
 language_model = LSTM(5, return_sequences=True)(language_input)
# Concatenate the information from the image and the input
 decoder = concatenate([vgg_feature_repeat, language_model])
# Extract information from the concatenated output
 decoder = LSTM(5, return_sequences=False)(decoder)
# Predict which word comes next
 decoder_output = Dense(vocab_size, activation='softmax')(decoder)
# Compile and run the neural network
 model = Model(inputs=[vgg_feature, language_input], outputs=decoder_output)
 model.compile(loss='categorical_crossentropy', optimizer='rmsprop')
# Train the neural network
 model.fit([features, html_input], next_words, batch_size=2, shuffle=False, epochs=1000)
復制代碼

在 Hello World 版本中，我們使用三個符號「start」、「Hello World」和「end」。字符級的模型要求更小的詞匯表和受限的神經(jīng)網(wǎng)絡，而單詞級的符號在這里可能有更好的性能。

以下是執(zhí)行預測的代碼：

# Create an empty sentence and insert the start token
 sentence = np.zeros((1, 3, 3)) # [[0,0,0], [0,0,0], [0,0,0]]
 start_token = [1., 0., 0.] # start
 sentence[0][2] = start_token # place start in empty sentence
# Making the first prediction with the start token
 second_word = model.predict([np.array([features[1]]), sentence])
# Put the second word in the sentence and make the final prediction
 sentence[0][1] = start_token
 sentence[0][2] = np.round(second_word)
 third_word = model.predict([np.array([features[1]]), sentence])
# Place the start token and our two predictions in the sentence 
 sentence[0][0] = start_token
 sentence[0][1] = np.round(second_word)
 sentence[0][2] = np.round(third_word)
# Transform our one-hot predictions into the final tokens
 vocabulary = ["start", "<HTML><center><H1>Hello World!</H1></center></HTML>", "end"]
for i in sentence[0]:
print(vocabulary[np.argmax(i)], end=' ')
復制代碼

輸出

10 epochs: start start start
100 epochs: start <HTML><center><H1>Hello World!</H1></center></HTML> <HTML><center><H1>Hello World!</H1></center></HTML>
300 epochs: start <HTML><center><H1>Hello World!</H1></center></HTML> end

我走過的坑：

在收集數(shù)據(jù)之前構建第一個版本。在本項目的早期階段，我設法獲得 Geocities 托管網(wǎng)站的舊版存檔，它有 3800 萬的網(wǎng)站。但我忽略了減少 100K 大小詞匯所需要的巨大工作量。
訓練一個 TB 級的數(shù)據(jù)需要優(yōu)秀的硬件或極其有耐心。在我的 Mac 遇到幾個問題后，最終用上了強大的遠程服務器。我預計租用 8 個現(xiàn)代 CPU 和 1 GPS 內(nèi)部鏈接以運行我的工作流。
在理解輸入與輸出數(shù)據(jù)之前，其它部分都似懂非懂。輸入 X 是屏幕的截圖和以前標記的標簽，輸出 Y 是下一個標記的標簽。當我理解這一點時，其它問題都更加容易弄清了。此外，嘗試其它不同的架構也將更加容易。
圖片到代碼的網(wǎng)絡其實就是自動描述圖像的模型。即使我意識到了這一點，但仍然錯過了很多自動圖像摘要方面的論文，因為它們看起來不夠炫酷。一旦我意識到了這一點，我對問題空間的理解就變得更加深刻了。

在 FloydHub 上運行代碼

FloydHub 是一個深度學習訓練平臺，我自從開始學習深度學習時就對它有所了解，我也常用它訓練和管理深度學習試驗。我們能安裝它并在 10 分鐘內(nèi)運行第一個模型，它是在云 GPU 上訓練模型最好的選擇。若果讀者沒用過 FloydHub，可以花 10 分鐘左右安裝并了解。

FloydHub 地址：www.floydhub.com/

復制 Repo：

https://github.com/emilwallner/Screenshot-to-code-in-Keras.git
復制代碼

登錄并初始化 FloydHub 命令行工具：

cd Screenshot-to-code-in-Keras
floyd login
floyd init s2c
復制代碼

在 FloydHub 云 GPU 機器上運行 Jupyter notebook：

floyd run --gpu --env tensorflow-1.4 --data emilwallner/datasets/imagetocode/2:data --mode jupyter
復制代碼

所有的 notebook 都放在 floydbub 目錄下。一旦我們開始運行模型，那么在 floydhub/Helloworld/helloworld.ipynb 下可以找到第一個 Notebook。更多詳情請查看本項目早期的 flags。

HTML 版本

在這個版本中，我們將關注與創(chuàng)建一個可擴展的神經(jīng)網(wǎng)絡模型。該版本并不能直接從隨機網(wǎng)頁預測 HTML，但它是探索動態(tài)問題不可缺少的步驟。

概覽

如果我們將前面的架構擴展為以下右圖展示的結構，那么它就能更高效地處理識別與轉換過程。

該架構主要有兩個部，即編碼器與解碼器。編碼器是我們創(chuàng)建圖像特征和前面標記特征（markup features）的部分。特征是網(wǎng)絡創(chuàng)建原型設計和標記語言之間聯(lián)系的構建塊。在編碼器的末尾，我們將圖像特征傳遞給前面標記的每一個單詞。隨后解碼器將結合原型設計特征和標記特征以創(chuàng)建下一個標簽的特征，這一個特征可以通過全連接層預測下一個標簽。

設計原型的特征

因為我們需要為每個單詞插入一個截屏，這將會成為訓練神經(jīng)網(wǎng)絡的瓶頸。因此我們抽取生成標記語言所需要的信息來替代直接使用圖像。這些抽取的信息將通過預訓練的 CNN 編碼到圖像特征中，且我們將使用分類層之前的層級輸出以抽取特征。

我們最終得到 1536 個 8*8 的特征圖，雖然我們很難直觀地理解它，但神經(jīng)網(wǎng)絡能夠從這些特征中抽取元素的對象和位置。

標記特征

在 Hello World 版本中，我們使用 one-hot 編碼以表征標記。而在該版本中，我們將使用詞嵌入表征輸入并使用 one-hot 編碼表示輸出。我們構建每個句子的方式保持不變，但我們映射每個符號的方式將會變化。one-hot 編碼將每一個詞視為獨立的單元，而詞嵌入會將輸入數(shù)據(jù)表征為一個實數(shù)列表，這些實數(shù)表示標記標簽之間的關系。

上面詞嵌入的維度為 8，但一般詞嵌入的維度會根據(jù)詞匯表的大小在 50 到 500 間變動。以上每個單詞的八個數(shù)值就類似于神經(jīng)網(wǎng)絡中的權重，它們傾向于刻畫單詞之間的聯(lián)系（Mikolov alt el., 2013）。這就是我們開始部署標記特征（markup features）的方式，而這些神經(jīng)網(wǎng)絡訓練的特征會將輸入數(shù)據(jù)和輸出數(shù)據(jù)聯(lián)系起來。

編碼器

我們現(xiàn)在將詞嵌入饋送到 LSTM 中，并期望能返回一系列的標記特征。這些標記特征隨后會饋送到一個 Time Distributed 密集層，該層級可以視為有多個輸入和輸出的全連接層。

和嵌入與 LSTM 層相平行的還有另外一個處理過程，其中圖像特征首先會展開成一個向量，然后再饋送到一個全連接層而抽取出高級特征。這些圖像特征隨后會與標記特征相級聯(lián)而作為編碼器的輸出。

標記特征

如下圖所示，現(xiàn)在我們將詞嵌入投入到 LSTM 層中，所有的語句都會用零填充以獲得相同的向量長度。

為了混合信號并尋找高級模式，我們運用了一個 TimeDistributed 密集層以抽取標記特征。TimeDistributed 密集層和一般的全連接層非常相似，且它有多個輸入與輸出。

圖像特征

對于另一個平行的過程，我們需要將圖像的所有像素值展開成一個向量，因此信息不會被改變，它們只會用來識別。

如上，我們會通過全連接層混合信號并抽取更高級的概念。因為我們并不只是處理一個輸入值，因此使用一般的全連接層就行了。

級聯(lián)圖像特征和標記特征

所有的語句都被填充以創(chuàng)建三個標記特征。因為我們已經(jīng)預處理了圖像特征，所以我們能為每一個標記特征添加圖像特征。

如上，在復制圖像特征到對應的標記特征后，我們得到了新的圖像-標記特征（image-markup features），這就是我們饋送到解碼器的輸入值。

解碼器

現(xiàn)在，我們使用圖像-標記特征來預測下一個標簽。

在下面的案例中，我們使用三個圖像-標簽特征對來輸出下一個標簽特征。注意 LSTM 層不應該返回一個長度等于輸入序列的向量，而只需要預測預測一個特征。在我們的案例中，這個特征將預測下一個標簽，它包含了最后預測的信息。

最后的預測

密集層會像傳統(tǒng)前饋網(wǎng)絡那樣工作，它將下一個標簽特征中的 512 個值與最后的四個預測連接起來，即我們在詞匯表所擁有的四個單詞：start、hello、world 和 end。密集層最后采用的 softmax 函數(shù)會為四個類別產(chǎn)生一個概率分布，例如 [0.1, 0.1, 0.1, 0.7] 將預測第四個詞為下一個標簽。

# Load the images and preprocess them for inception-resnet
 images = []
 all_filenames = listdir('images/')
 all_filenames.sort()
for filename in all_filenames:
 images.append(img_to_array(load_img('images/'+filename, target_size=(299, 299))))
 images = np.array(images, dtype=float)
 images = preprocess_input(images)
# Run the images through inception-resnet and extract the features without the classification layer
 IR2 = InceptionResNetV2(weights='imagenet', include_top=False)
 features = IR2.predict(images)
# We will cap each input sequence to 100 tokens
 max_caption_len = 100
# Initialize the function that will create our vocabulary 
 tokenizer = Tokenizer(filters='', split=" ", lower=False)
# Read a document and return a string
def load_doc(filename):
 file = open(filename, 'r')
 text = file.read()
 file.close()
return text
# Load all the HTML files
 X = []
 all_filenames = listdir('html/')
 all_filenames.sort()
for filename in all_filenames:
 X.append(load_doc('html/'+filename))
# Create the vocabulary from the html files
 tokenizer.fit_on_texts(X)
# Add +1 to leave space for empty words
 vocab_size = len(tokenizer.word_index) + 1
# Translate each word in text file to the matching vocabulary index
 sequences = tokenizer.texts_to_sequences(X)
# The longest HTML file
 max_length = max(len(s) for s in sequences)
# Intialize our final input to the model
 X, y, image_data = list(), list(), list()
for img_no, seq in enumerate(sequences):
for i in range(1, len(seq)):
# Add the entire sequence to the input and only keep the next word for the output
 in_seq, out_seq = seq[:i], seq[i]
# If the sentence is shorter than max_length, fill it up with empty words
 in_seq = pad_sequences([in_seq], maxlen=max_length)[0]
# Map the output to one-hot encoding
 out_seq = to_categorical([out_seq], num_classes=vocab_size)[0]
# Add and image corresponding to the HTML file
 image_data.append(features[img_no])
# Cut the input sentence to 100 tokens, and add it to the input data
 X.append(in_seq[-100:])
 y.append(out_seq)
 X, y, image_data = np.array(X), np.array(y), np.array(image_data)
# Create the encoder
 image_features = Input(shape=(8, 8, 1536,))
 image_flat = Flatten()(image_features)
 image_flat = Dense(128, activation='relu')(image_flat)
 ir2_out = RepeatVector(max_caption_len)(image_flat)
 language_input = Input(shape=(max_caption_len,))
 language_model = Embedding(vocab_size, 200, input_length=max_caption_len)(language_input)
 language_model = LSTM(256, return_sequences=True)(language_model)
 language_model = LSTM(256, return_sequences=True)(language_model)
 language_model = TimeDistributed(Dense(128, activation='relu'))(language_model)
# Create the decoder
 decoder = concatenate([ir2_out, language_model])
 decoder = LSTM(512, return_sequences=False)(decoder)
 decoder_output = Dense(vocab_size, activation='softmax')(decoder)
# Compile the model
 model = Model(inputs=[image_features, language_input], outputs=decoder_output)
 model.compile(loss='categorical_crossentropy', optimizer='rmsprop')
# Train the neural network
 model.fit([image_data, X], y, batch_size=64, shuffle=False, epochs=2)
# map an integer to a word
def word_for_id(integer, tokenizer):
for word, index in tokenizer.word_index.items():
if index == integer:
return word
return None
# generate a description for an image
def generate_desc(model, tokenizer, photo, max_length):
# seed the generation process
 in_text = 'START'
# iterate over the whole length of the sequence
for i in range(900):
# integer encode input sequence
 sequence = tokenizer.texts_to_sequences([in_text])[0][-100:]
# pad input
 sequence = pad_sequences([sequence], maxlen=max_length)
# predict next word
 yhat = model.predict([photo,sequence], verbose=0)
# convert probability to integer
 yhat = np.argmax(yhat)
# map integer to word
 word = word_for_id(yhat, tokenizer)
# stop if we cannot map the word
if word is None:
break
# append as input for generating the next word
 in_text += ' ' + word
# Print the prediction
print(' ' + word, end='')
# stop if we predict the end of the sequence
if word == 'END':
break
return
# Load and image, preprocess it for IR2, extract features and generate the HTML
 test_image = img_to_array(load_img('images/87.jpg', target_size=(299, 299)))
 test_image = np.array(test_image, dtype=float)
 test_image = preprocess_input(test_image)
 test_features = IR2.predict(np.array([test_image]))
 generate_desc(model, tokenizer, np.array(test_features), 100)
復制代碼

輸出

訓練不同輪數(shù)所生成網(wǎng)站的地址：

250 epochs：emilwallner.github.io/html/250_ep…
350 epochs：emilwallner.github.io/html/350_ep…
450 epochs：emilwallner.github.io/html/450_ep…
550 epochs：emilwallner.github.io/html/550_ep…

我走過的坑：

我認為理解 LSTM 比 CNN 要難一些。當我展開 LSTM 后，它們會變得容易理解一些。此外，我們在嘗試理解 LSTM 前，可以先關注輸入與輸出特征。
從頭構建一個詞匯表要比壓縮一個巨大的詞匯表容易得多。這樣的構建包括字體、div 標簽大小、變量名的 hex 顏色和一般單詞。
大多數(shù)庫是為解析文本文檔而構建。在庫的使用文檔中，它們會告訴我們?nèi)绾瓮ㄟ^空格進行分割，而不是代碼，我們需要自定義解析的方式。
我們可以從 ImageNet 上預訓練的模型抽取特征。然而，相對于從頭訓練的 pix2code 模型，損失要高 30% 左右。此外，我對于使用基于網(wǎng)頁截屏預訓練的 inception-resnet 網(wǎng)絡很有興趣。

Bootstrap 版本

在最終版本中，我們使用 pix2code 論文中生成 bootstrap 網(wǎng)站的數(shù)據(jù)集。使用 Twitter 的 Bootstrap 庫（getbootstrap.com/），我們可以結合 HTML 和 CSS，降低詞匯表規(guī)模。

我們將使用這一版本為之前未見過的截圖生成標記。我們還深入研究它如何構建截圖和標記的先驗知識。

我們不在 bootstrap 標記上訓練，而是使用 17 個簡化 token，將其編譯成 HTML 和 CSS。數(shù)據(jù)集（github.com/tonybeltram…）包括 1500 個測試截圖和 250 個驗證截圖。平均每個截圖有 65 個 token，一共有 96925 個訓練樣本。

我們稍微修改一下 pix2code 論文中的模型，使之預測網(wǎng)絡組件的準確率達到 97%。

端到端方法

從預訓練模型中提取特征在圖像描述生成模型中效果很好。但是幾次實驗后，我發(fā)現(xiàn) pix2code 的端到端方法效果更好。在我們的模型中，我們用輕量級卷積神經(jīng)網(wǎng)絡替換預訓練圖像特征。我們不使用最大池化來增加信息密度，而是增加步幅。這可以保持前端元素的位置和顏色。

存在兩個核心模型：卷積神經(jīng)網(wǎng)絡（CNN）和循環(huán)神經(jīng)網(wǎng)絡（RNN）。最常用的循環(huán)神經(jīng)網(wǎng)絡是長短期記憶（LSTM）網(wǎng)絡。我之前的文章中介紹過 CNN 教程，本文主要介紹 LSTM。

理解 LSTM 中的時間步

關于 LSTM 比較難理解的是時間步。我們的原始神經(jīng)網(wǎng)絡有兩個時間步，如果你給它「Hello」，它就會預測「World」。但是它會試圖預測更多時間步。下例中，輸入有四個時間步，每個單詞對應一個時間步。

LSTM 適合時序數(shù)據(jù)的輸入，它是一種適合順序信息的神經(jīng)網(wǎng)絡。模型展開圖示如下，對于每個循環(huán)步，你需要保持同樣的權重。

加權后的輸入與輸出特征在級聯(lián)后輸入到激活函數(shù)，并作為當前時間步的輸出。因為我們重復利用了相同的權重，它們將從一些輸入獲取信息并構建序列的知識。下面是 LSTM 在每一個時間步上的簡化版處理過程：

理解 LSTM 層級中的單元

每一層 LSTM 單元的總數(shù)決定了它記憶的能力，同樣也對應于每一個輸出特征的維度大小。LSTM 層級中的每一個單元將學習如何追蹤句法的不同方面。以下是一個 LSTM 單元追蹤標簽行信息的可視化，它是我們用來訓練 bootstrap 模型的簡單標記語言。

每一個 LSTM 單元會維持一個單元狀態(tài)，我們可以將單元狀態(tài)視為記憶。權重和激活值可使用不同的方式修正狀態(tài)值，這令 LSTM 層可以通過保留或遺忘輸入信息而得到精調(diào)。除了處理當前輸入信息與輸出信息，LSTM 單元還需要修正記憶狀態(tài)以傳遞到下一個時間步。

dir_name = 'resources/eval_light/'
# Read a file and return a string
def load_doc(filename):
 file = open(filename, 'r')
 text = file.read()
 file.close()
return text
def load_data(data_dir):
 text = []
 images = []
# Load all the files and order them
 all_filenames = listdir(data_dir)
 all_filenames.sort()
for filename in (all_filenames):
if filename[-3:] == "npz":
# Load the images already prepared in arrays
 image = np.load(data_dir+filename)
 images.append(image['features'])
else:
# Load the boostrap tokens and rap them in a start and end tag
 syntax = '<START> ' + load_doc(data_dir+filename) + ' <END>'
# Seperate all the words with a single space
 syntax = ' '.join(syntax.split())
# Add a space after each comma
 syntax = syntax.replace(',', ' ,')
 text.append(syntax)
 images = np.array(images, dtype=float)
return images, text
 train_features, texts = load_data(dir_name)
# Initialize the function to create the vocabulary 
 tokenizer = Tokenizer(filters='', split=" ", lower=False)
# Create the vocabulary 
 tokenizer.fit_on_texts([load_doc('bootstrap.vocab')])
# Add one spot for the empty word in the vocabulary 
 vocab_size = len(tokenizer.word_index) + 1
# Map the input sentences into the vocabulary indexes
 train_sequences = tokenizer.texts_to_sequences(texts)
# The longest set of boostrap tokens
 max_sequence = max(len(s) for s in train_sequences)
# Specify how many tokens to have in each input sentence
 max_length = 48
def preprocess_data(sequences, features):
 X, y, image_data = list(), list(), list()
for img_no, seq in enumerate(sequences):
for i in range(1, len(seq)):
# Add the sentence until the current count(i) and add the current count to the output
 in_seq, out_seq = seq[:i], seq[i]
# Pad all the input token sentences to max_sequence
 in_seq = pad_sequences([in_seq], maxlen=max_sequence)[0]
# Turn the output into one-hot encoding
 out_seq = to_categorical([out_seq], num_classes=vocab_size)[0]
# Add the corresponding image to the boostrap token file
 image_data.append(features[img_no])
# Cap the input sentence to 48 tokens and add it
 X.append(in_seq[-48:])
 y.append(out_seq)
return np.array(X), np.array(y), np.array(image_data)
 X, y, image_data = preprocess_data(train_sequences, train_features)
#Create the encoder
 image_model = Sequential()
 image_model.add(Conv2D(16, (3, 3), padding='valid', activation='relu', input_shape=(256, 256, 3,)))
 image_model.add(Conv2D(16, (3,3), activation='relu', padding='same', strides=2))
 image_model.add(Conv2D(32, (3,3), activation='relu', padding='same'))
 image_model.add(Conv2D(32, (3,3), activation='relu', padding='same', strides=2))
 image_model.add(Conv2D(64, (3,3), activation='relu', padding='same'))
 image_model.add(Conv2D(64, (3,3), activation='relu', padding='same', strides=2))
 image_model.add(Conv2D(128, (3,3), activation='relu', padding='same'))
 image_model.add(Flatten())
 image_model.add(Dense(1024, activation='relu'))
 image_model.add(Dropout(0.3))
 image_model.add(Dense(1024, activation='relu'))
 image_model.add(Dropout(0.3))
 image_model.add(RepeatVector(max_length))
 visual_input = Input(shape=(256, 256, 3,))
 encoded_image = image_model(visual_input)
 language_input = Input(shape=(max_length,))
 language_model = Embedding(vocab_size, 50, input_length=max_length, mask_zero=True)(language_input)
 language_model = LSTM(128, return_sequences=True)(language_model)
 language_model = LSTM(128, return_sequences=True)(language_model)
#Create the decoder
 decoder = concatenate([encoded_image, language_model])
 decoder = LSTM(512, return_sequences=True)(decoder)
 decoder = LSTM(512, return_sequences=False)(decoder)
 decoder = Dense(vocab_size, activation='softmax')(decoder)
# Compile the model
 model = Model(inputs=[visual_input, language_input], outputs=decoder)
 optimizer = RMSprop(lr=0.0001, clipvalue=1.0)
 model.compile(loss='categorical_crossentropy', optimizer=optimizer)
#Save the model for every 2nd epoch
 filepath="org-weights-epoch-{epoch:04d}--val_loss-{val_loss:.4f}--loss-{loss:.4f}.hdf5"
 checkpoint = ModelCheckpoint(filepath, monitor='val_loss', verbose=1, save_weights_only=True, period=2)
 callbacks_list = [checkpoint]
# Train the model
 model.fit([image_data, X], y, batch_size=64, shuffle=False, validation_split=0.1, callbacks=callbacks_list, verbose=1, epochs=50)
復制代碼

測試準確率

找到一種測量準確率的優(yōu)秀方法非常棘手。比如一個詞一個詞地對比，如果你的預測中有一個詞不對照，準確率可能就是 0。如果你把百分百對照的單詞移除一個，最終的準確率可能是 99/100。

我使用的是 BLEU 分值，它在機器翻譯和圖像描述模型實踐上都是最好的。它把句子分解成 4 個 n-gram，從 1-4 個單詞的序列。在下面的預測中，「cat」應該是「code」。

為了得到最終的分值，每個的分值需要乘以 25%，(4/5) × 0.25 + (2/4) × 0.25 + (1/3) × 0.25 + (0/2) ×0.25 = 0.2 + 0.125 + 0.083 + 0 = 0.408。然后用總和乘以句子長度的懲罰函數(shù)。因為在我們的示例中，長度是正確的，所以它就直接是我們的最終得分。

你可以增加 n-gram 的數(shù)量，4 個 n-gram 的模型是最為對應人類翻譯的。我建議你閱讀下面的代碼：

#Create a function to read a file and return its content
def load_doc(filename):
 file = open(filename, 'r')
 text = file.read()
 file.close()
return text
def load_data(data_dir):
 text = []
 images = []
 files_in_folder = os.listdir(data_dir)
 files_in_folder.sort()
for filename in tqdm(files_in_folder):
#Add an image
if filename[-3:] == "npz":
 image = np.load(data_dir+filename)
 images.append(image['features'])
else:
# Add text and wrap it in a start and end tag
 syntax = '<START> ' + load_doc(data_dir+filename) + ' <END>'
#Seperate each word with a space
 syntax = ' '.join(syntax.split())
#Add a space between each comma
 syntax = syntax.replace(',', ' ,')
 text.append(syntax)
 images = np.array(images, dtype=float)
return images, text
#Intialize the function to create the vocabulary
 tokenizer = Tokenizer(filters='', split=" ", lower=False)
#Create the vocabulary in a specific order
 tokenizer.fit_on_texts([load_doc('bootstrap.vocab')])
 dir_name = '../../../../eval/'
 train_features, texts = load_data(dir_name)
#load model and weights 
 json_file = open('../../../../model.json', 'r')
 loaded_model_json = json_file.read()
 json_file.close()
 loaded_model = model_from_json(loaded_model_json)
# load weights into new model
 loaded_model.load_weights("../../../../weights.hdf5")
print("Loaded model from disk")
# map an integer to a word
def word_for_id(integer, tokenizer):
for word, index in tokenizer.word_index.items():
if index == integer:
return word
return None
print(word_for_id(17, tokenizer))
# generate a description for an image
def generate_desc(model, tokenizer, photo, max_length):
 photo = np.array([photo])
# seed the generation process
 in_text = '<START> '
# iterate over the whole length of the sequence
print('\nPrediction---->\n\n<START> ', end='')
for i in range(150):
# integer encode input sequence
 sequence = tokenizer.texts_to_sequences([in_text])[0]
# pad input
 sequence = pad_sequences([sequence], maxlen=max_length)
# predict next word
 yhat = loaded_model.predict([photo, sequence], verbose=0)
# convert probability to integer
 yhat = argmax(yhat)
# map integer to word
 word = word_for_id(yhat, tokenizer)
# stop if we cannot map the word
if word is None:
break
# append as input for generating the next word
 in_text += word + ' '
# stop if we predict the end of the sequence
print(word + ' ', end='')
if word == '<END>':
break
return in_text
 max_length = 48 
# evaluate the skill of the model
def evaluate_model(model, descriptions, photos, tokenizer, max_length):
 actual, predicted = list(), list()
# step over the whole set
for i in range(len(texts)):
 yhat = generate_desc(model, tokenizer, photos[i], max_length)
# store actual and predicted
print('\n\nReal---->\n\n' + texts[i])
 actual.append([texts[i].split()])
 predicted.append(yhat.split())
# calculate BLEU score
 bleu = corpus_bleu(actual, predicted)
return bleu, actual, predicted
 bleu, actual, predicted = evaluate_model(loaded_model, texts, train_features, tokenizer, max_length)
#Compile the tokens into HTML and css
 dsl_path = "compiler/assets/web-dsl-mapping.json"
 compiler = Compiler(dsl_path)
 compiled_website = compiler.compile(predicted[0], 'index.html')
print(compiled_website )
print(bleu)
復制代碼

輸出

樣本輸出的鏈接：

Generated website 1 - Original 1 (emilwallner.github.io/bootstrap/r…)
Generated website 2 - Original 2 (emilwallner.github.io/bootstrap/r…)
Generated website 3 - Original 3 (emilwallner.github.io/bootstrap/r…)
Generated website 4 - Original 4 (emilwallner.github.io/bootstrap/r…)
Generated website 5 - Original 5 (emilwallner.github.io/bootstrap/r…)

我走過的坑：

理解模型的弱點而不是測試隨機模型。首先我使用隨機的東西，比如批歸一化、雙向網(wǎng)絡，并嘗試實現(xiàn)注意力機制。在查看測試數(shù)據(jù)，并知道其無法高精度地預測顏色和位置之后，我意識到 CNN 存在一個弱點。這致使我使用增加的步幅來取代最大池化。驗證損失從 0.12 降至 0.02，BLEU 分值從 85% 增加至 97%。
如果它們相關，則只使用預訓練模型。在小數(shù)據(jù)的情況下，我認為一個預訓練圖像模型將會提升性能。從我的實驗來看，端到端模型訓練更慢，需要更多內(nèi)存，但是精確度會提升 30%。
當你在遠程服務器上運行模型，我們需要為一些不同做好準備。在我的 mac 上，它按照字母表順序讀取文檔。但是在服務器上，它被隨機定位。這在代碼和截圖之間造成了不匹配。

下一步

前端開發(fā)是深度學習應用的理想空間。數(shù)據(jù)容易生成，并且當前深度學習算法可以映射絕大部分邏輯。一個最讓人激動的領域是注意力機制在 LSTM 上的應用。這不僅會提升精確度，還可以使我們可視化 CNN 在生成標記時所聚焦的地方。注意力同樣是標記、可定義模板、腳本和最終端之間通信的關鍵。注意力層要追蹤變量，使網(wǎng)絡可以在編程語言之間保持通信。

但是在不久的將來，最大的影響將會來自合成數(shù)據(jù)的可擴展方法。接著你可以一步步添加字體、顏色和動畫。目前為止，大多數(shù)進步發(fā)生在草圖（sketches）方面并將其轉化為模版應用。在不到兩年的時間里，我們將創(chuàng)建一個草圖，它會在一秒之內(nèi)找到相應的前端。Airbnb 設計團隊與 Uizard 已經(jīng)創(chuàng)建了兩個正在使用的原型。下面是一些可能的試驗過程：

實驗

開始

運行所有模型
嘗試不同的超參數(shù)
測試一個不同的 CNN 架構
添加雙向 LSTM 模型
用不同數(shù)據(jù)集實現(xiàn)模型

進一步實驗

使用相應的語法創(chuàng)建一個穩(wěn)定的隨機應用/網(wǎng)頁生成器
從草圖到應用模型的數(shù)據(jù)。自動將應用/網(wǎng)頁截圖轉化為草圖，并使用 GAN 創(chuàng)建多樣性。
應用注意力層可視化每一預測的圖像聚焦，類似于這個模型
為模塊化方法創(chuàng)建一個框架。比如，有字體的編碼器模型，一個用于顏色，另一個用于排版，并使用一個解碼器整合它們。穩(wěn)定的圖像特征是一個好的開始。
饋送簡單的 HTML 組件到神經(jīng)網(wǎng)絡中，并使用 CSS 教其生成動畫。使用注意力方法并可視化兩個輸入源的聚焦將會很迷人。

原文鏈接：blog.floydhub.com/turning-des…

本文為機器之心編譯，轉載請聯(lián)系本公眾號獲得授權。

TML（HyperText Markup Language）是一種用于創(chuàng)建網(wǎng)頁的標記語言。它由一系列的標簽組成，這些標簽用于描述網(wǎng)頁的結構和內(nèi)容。HTML標簽通常由尖括號包圍，例如<tag>。

HTML標簽可以分為兩類：塊級元素和內(nèi)聯(lián)元素。塊級元素用于組織網(wǎng)頁的結構，例如段落、標題、列表等。內(nèi)聯(lián)元素用于標記文本中的特定部分，例如鏈接、強調(diào)文本等。

HTML標簽可以包含屬性，屬性提供了有關標簽的額外信息。例如，<a>標簽用于創(chuàng)建鏈接，可以使用href屬性指定鏈接的目標URL。

除了標簽和屬性，HTML還支持一些特殊字符實體，用于表示特殊字符，例如小于號（<）、大于號（>）等。

HTML可以與CSS（層疊樣式表）和JavaScript一起使用，以增強網(wǎng)頁的外觀和功能。CSS用于控制網(wǎng)頁的樣式，例如顏色、字體、布局等。JavaScript用于實現(xiàn)交互性和動態(tài)效果，例如表單驗證、動畫等。

通過使用HTML，開發(fā)人員可以創(chuàng)建具有結構良好、易于理解和導航的網(wǎng)頁。它是構建互聯(lián)網(wǎng)的基礎之一，被廣泛應用于網(wǎng)站開發(fā)和內(nèi)容管理系統(tǒng)。

HTML的語法由標簽、屬性和內(nèi)容組成。下面是HTML的基本語法規(guī)則：

標簽：HTML標簽用于定義網(wǎng)頁的結構和內(nèi)容。標簽通常由尖括號包圍，例如<tag>。標簽可以是成對出現(xiàn)的，其中包含一個開標簽和一個閉標簽，例如<tag>content</tag>。也可以是自閉合標簽，即只有一個標簽，沒有內(nèi)容，例如<tag />。
屬性：HTML標簽可以包含屬性，屬性提供了有關標簽的額外信息。屬性通常以鍵值對的形式出現(xiàn)，例如<tag attribute="value">。屬性的值可以是字符串或布爾值。常見的屬性包括class、id、src、href等。
內(nèi)容：HTML標簽可以包含文本內(nèi)容或其他標簽。文本內(nèi)容直接放置在標簽的開閉標簽之間，例如<p>這是一個段落。</p>。標簽可以嵌套在其他標簽中，形成標簽的層次結構。
注釋：HTML注釋用于在代碼中添加注釋，不會在網(wǎng)頁中顯示。注釋以結尾，例如。

下面是一個簡單的HTML示例：

<!DOCTYPE html>
<html>
<head>
  <title>我的網(wǎng)頁</title>
</head>
<body>
  <h1>歡迎來到我的網(wǎng)頁</h1>
  <p>這是一個段落。</p>
  <a href="https://www.example.com">點擊這里</a>訪問示例網(wǎng)站。
</body>
</html>

在這個示例中，<!DOCTYPE html>聲明了文檔類型為HTML5。<html>標簽是HTML文檔的根元素。<head>標簽用于定義文檔的頭部信息，例如標題和樣式表。<title>標簽定義了網(wǎng)頁的標題，將顯示在瀏覽器的標題欄中。<body>標簽用于定義文檔的主體內(nèi)容。<h1>標簽定義了一個一級標題，<p>標簽定義了一個段落，<a>標簽定義了一個鏈接。

avaScript不斷發(fā)展壯大，
因為它是最容易上手的語言之一，因此為市場上的新成為技術怪才打開了大門。（問號臉？）

的確，JavaScript可以做很多出色的事情！還有很多東西要學習。

而且，無論你是JavaScript的新手還是更多的專業(yè)開發(fā)人員，學習新知識總是一件好事。

本文整理了一些非常有用的單行代碼（20+），這些單行代碼可以幫助你提高工作效率并可以幫助調(diào)試代碼。

什么是單行代碼？

單行代碼是一種代碼實踐，其中我們僅用一行代碼執(zhí)行某些功能。

01-隨機獲取布爾值

此函數(shù)將使用Math.random()方法返回布爾值（真或假）。
Math.random創(chuàng)建一個介于0和1之間的隨機數(shù)，然后我們檢查它是否大于或小于0.5。
這意味著有50/50的機會會得到對或錯。

const getRandomBoolean = () => Math.random() >= 0.5;

console.log(getRandomBoolean());
// a 50/50 chance of returning true or false

02-檢查日期是否為周末

通過此功能，你將能夠檢查提供的日期是工作日還是周末。

const isWeekend = (date) => [0, 6].indexOf(date.getDay()) !== -1;

console.log(isWeekend(new Date(2021, 4, 14)));
// false (Friday)
console.log(isWeekend(new Date(2021, 4, 15)));
// true (Saturday)

03-檢查數(shù)字是偶數(shù)還是奇數(shù)

簡單的實用程序功能，用于檢查數(shù)字是偶數(shù)還是奇數(shù)。

const isEven = (num) => num % 2 === 0;

console.log(isEven(5));
// false
console.log(isEven(4));
// true

04-獲取數(shù)組中的唯一值(數(shù)組去重)

從數(shù)組中刪除所有重復值的非常簡單的方法。此函數(shù)將數(shù)組轉換為Set，然后返回數(shù)組。

const uniqueArr = (arr) => [...new Set(arr)];

console.log(uniqueArr([1, 2, 3, 1, 2, 3, 4, 5]));
// [1, 2, 3, 4, 5]

05-檢查變量是否為數(shù)組

一種檢查變量是否為數(shù)組的干凈簡便的方法。

當然，也可以有其他方法

const isArray = (arr) => Array.isArray(arr);

console.log(isArray([1, 2, 3]));
// true
console.log(isArray({ name: 'Ovi' }));
// false
console.log(isArray('Hello World'));
// false

06-在兩個數(shù)字之間生成一個隨機數(shù)

這將以兩個數(shù)字為參數(shù)，并將在這兩個數(shù)字之間生成一個隨機數(shù)！

const random = (min, max) => Math.floor(Math.random() * (max - min + 1) + min);

console.log(random(1, 50));
// could be anything from 1 - 50

07-生成隨機字符串（唯一ID？）

也許你需要臨時的唯一ID，這是一個技巧，你可以使用它在旅途中生成隨機字符串。

const randomString = () => Math.random().toString(36).slice(2);

console.log(randomString());
// could be anything!!!

08-滾動到頁面頂部

所述window.scrollTo（）方法把一個X和Y坐標滾動到。
如果將它們設置為零和零，我們將滾動到頁面頂部。

image.png

const scrollToTop = () => window.scrollTo(0, 0);

scrollToTop();

09-切換布爾

切換布爾值是非常基本的編程問題之一，可以通過許多不同的方法來解決。
代替使用if語句來確定將布爾值設置為哪個值，你可以使用函數(shù)使用！翻轉當前值。非運算符。

// bool is stored somewhere in the upperscope
const toggleBool = () => (bool = !bool);
//or
const toggleBool = b => !b;

10-交換兩個變量

下面的代碼是不使用第三個變量而僅使用一行代碼即可交換兩個變量的更簡單方法之一。

[foo, bar] = [bar, foo];

11-計算兩個日期之間的天數(shù)

要計算兩個日期之間的天數(shù)，
我們首先找到兩個日期之間的絕對值，然后將其除以86400000（等于一天中的毫秒數(shù)），最后將結果四舍五入并返回。

const daysDiff = (date, date2) => Math.ceil(Math.abs(date - date2) / 86400000);

console.log(daysDiff(new Date('2021-05-10'), new Date('2021-11-25')));
// 199

12-將文字復制到剪貼板

PS：你可能需要添加檢查以查看是否存在navigator.clipboard.writeText

const copyTextToClipboard = async (text) => {
  await navigator.clipboard.writeText(text);
};

13-合并多個數(shù)組的不同方法

有兩種合并數(shù)組的方法。其中之一是使用concat方法。另一個使用擴展運算符（…）。

PS：我們也可以使用“設置”對象從最終數(shù)組中復制任何內(nèi)容。

// Merge but don't remove the duplications
const merge = (a, b) => a.concat(b);
// Or
const merge = (a, b) => [...a, ...b];

// Merge and remove the duplications
const merge = [...new Set(a.concat(b))];
// Or
const merge = [...new Set([...a, ...b])];

14-獲取javascript語言的實際類型

人們有時會使用庫來查找JavaScript中某些內(nèi)容的實際類型，這一小技巧可以節(jié)省你的時間（和代碼大?。?。

const trueTypeOf = (obj) => {
  return Object.prototype.toString.call(obj).slice(8, -1).toLowerCase();
};

console.log(trueTypeOf(''));
// string
console.log(trueTypeOf(0));
// number
console.log(trueTypeOf());
// undefined
console.log(trueTypeOf(null));
// null
console.log(trueTypeOf({}));
// object
console.log(trueTypeOf([]));
// array
console.log(trueTypeOf(0));
// number
console.log(trueTypeOf(() => {}));
// function

15-在結尾處截斷字符串

需要從頭開始截斷字符串，這不是問題！

const truncateString = (string, length) => {
  return string.length < length ? string : `${string.slice(0, length - 3)}...`;
};

console.log(
  truncateString('Hi, I should be truncated because I am too loooong!', 36),
);
// Hi, I should be truncated because...

16-從中間截斷字符串

從中間截斷字符串怎么樣？

該函數(shù)將一個字符串作為第一個參數(shù)，然后將我們需要的字符串大小作為第二個參數(shù)，然后從第3個和第4個參數(shù)開始和結束需要多少個字符

const truncateStringMiddle = (string, length, start, end) => {
  return `${string.slice(0, start)}...${string.slice(string.length - end)}`;
};

console.log(
  truncateStringMiddle(
    'A long story goes here but then eventually ends!', // string
    25, // 需要的字符串大小
    13, // 從原始字符串第幾位開始截取
    17, // 從原始字符串第幾位停止截取
  ),
);
// A long story ... eventually ends!

17-大寫字符串

好吧，不幸的是，JavaScript沒有內(nèi)置函數(shù)來大寫字符串，但是這種解決方法可以實現(xiàn)。

const capitalize = (str) => str.charAt(0).toUpperCase() + str.slice(1);

console.log(capitalize('hello world'));

// Hello world

18-檢查當前選項卡是否在視圖/焦點內(nèi)

此簡單的幫助程序方法根據(jù)選項卡是否處于視圖/焦點狀態(tài)而返回true或false

const isTabInView = () => !document.hidden;  // Not hidden

isTabInView();

// true/false

19-檢查用戶是否在Apple設備上

如果用戶使用的是Apple設備，則返回true

const isAppleDevice = () => /Mac|iPod|iPhone|iPad/.test(navigator.platform);

console.log(isAppleDevice);
// true/false

20-三元運算符

當你只想在一行中編寫if..else語句時，這是一個很好的代碼保護程序。

// Longhand
const age = 18;
let greetings;

if (age < 18) {
  greetings = 'You are not old enough';
} else {
  greetings = 'You are young!';
}

// Shorthand
const greetings = age < 18 ? 'You are not old enough' : 'You are young!';

21-短路評估速記

在將變量值分配給另一個變量時，可能要確保源變量不為null，未定義或為空。
可以編寫帶有多個條件的long if語句，也可以使用短路評估。

在線咨詢

上一篇：如何使用PHP驗證和過濾HTML表單提交的數(shù)據(jù)？示例代碼剖析
下一篇：前端開發(fā)必須理解的知識點-HTML5新表單

您的項目需求

*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務商

用深度學習自動生成HTML代碼

深度學習自動生成HTML代碼

01-隨機獲取布爾值

02-檢查日期是否為周末

03-檢查數(shù)字是偶數(shù)還是奇數(shù)

04-獲取數(shù)組中的唯一值(數(shù)組去重)

05-檢查變量是否為數(shù)組

06-在兩個數(shù)字之間生成一個隨機數(shù)

07-生成隨機字符串（唯一ID？）

08-滾動到頁面頂部

09-切換布爾

10-交換兩個變量

11-計算兩個日期之間的天數(shù)

12-將文字復制到剪貼板

13-合并多個數(shù)組的不同方法

14-獲取javascript語言的實際類型

15-在結尾處截斷字符串

16-從中間截斷字符串

17-大寫字符串

18-檢查當前選項卡是否在視圖/焦點內(nèi)

19-檢查用戶是否在Apple設備上

20-三元運算符

21-短路評估速記

您的項目需求