Repository: emilwallner/Screenshot-to-code
Branch: master
Commit: f7f8ceee3809
Files: 44
Total size: 101.5 KB
Directory structure:
gitextract_wq8cjjwb/
├── Bootstrap/
│ ├── bootstrap.ipynb
│ ├── compiler/
│ │ ├── android-compiler.py
│ │ ├── assets/
│ │ │ ├── android-dsl-mapping.json
│ │ │ ├── ios-dsl-mapping.json
│ │ │ └── web-dsl-mapping.json
│ │ ├── classes/
│ │ │ ├── Compiler.py
│ │ │ ├── Node.py
│ │ │ ├── Utils.py
│ │ │ └── __init__.py
│ │ ├── ios-compiler.py
│ │ └── web-compiler.py
│ ├── resources/
│ │ ├── bootstrap.vocab
│ │ └── eval_light/
│ │ ├── 00CDC9A8-3D73-4291-90EF-49178E408797.gui
│ │ ├── 00CDC9A8-3D73-4291-90EF-49178E408797.npz
│ │ ├── 0BA2A4B4-4193-4506-8818-31564225EF8B.gui
│ │ ├── 0BA2A4B4-4193-4506-8818-31564225EF8B.npz
│ │ ├── 0CC0512B-11C5-481C-BC81-534F1FC9EC0A.gui
│ │ ├── 0CC0512B-11C5-481C-BC81-534F1FC9EC0A.npz
│ │ ├── 0D1C8ADB-D9F0-48EC-B5AA-205BCF96094E.gui
│ │ ├── 0D1C8ADB-D9F0-48EC-B5AA-205BCF96094E.npz
│ │ ├── 0FBAB0B3-24CB-42EF-8803-BFDEB8C3EFDC.gui
│ │ ├── 0FBAB0B3-24CB-42EF-8803-BFDEB8C3EFDC.npz
│ │ ├── 1A5D96CE-F23A-4EB5-84BF-F6F2A3B6D185.gui
│ │ ├── 1A5D96CE-F23A-4EB5-84BF-F6F2A3B6D185.npz
│ │ ├── 1D70C31F-C198-4159-8388-18CB2BDA15D6.gui
│ │ ├── 1D70C31F-C198-4159-8388-18CB2BDA15D6.npz
│ │ ├── 1EA2A9DA-E8A6-4011-9841-A7758E979F77.gui
│ │ ├── 1EA2A9DA-E8A6-4011-9841-A7758E979F77.npz
│ │ ├── 1F4D3508-2479-4D8A-B5F0-92CF690BD1AE.gui
│ │ ├── 1F4D3508-2479-4D8A-B5F0-92CF690BD1AE.npz
│ │ ├── 1FA12698-2EA0-45D0-A40D-A7DF1D903036.gui
│ │ └── 1FA12698-2EA0-45D0-A40D-A7DF1D903036.npz
│ └── test_model_accuracy.ipynb
├── HTML/
│ ├── HTML.ipynb
│ ├── Resources_for_the_index_file/
│ │ ├── scripts/
│ │ │ └── html5shiv.js
│ │ └── styles/
│ │ └── layout.css
│ └── html/
│ ├── 86.html
│ ├── 87.html
│ ├── 88.html
│ ├── 89.html
│ └── 90.html
├── Hello_world/
│ └── hello_world.ipynb
├── LICENSE
└── README.md
================================================
FILE CONTENTS
================================================
================================================
FILE: Bootstrap/bootstrap.ipynb
================================================
{
"cells": [
{
"cell_type": "code",
"execution_count": null,
"metadata": {},
"outputs": [],
"source": [
"from os import listdir\n",
"from numpy import array\n",
"from keras.preprocessing.text import Tokenizer, one_hot\n",
"from keras.preprocessing.sequence import pad_sequences\n",
"from keras.models import Model, Sequential, model_from_json\n",
"from keras.utils import to_categorical\n",
"from keras.layers.core import Dense, Dropout, Flatten\n",
"from keras.optimizers import RMSprop\n",
"from keras.layers.convolutional import Conv2D\n",
"from keras.callbacks import ModelCheckpoint\n",
"from keras.layers import Embedding, TimeDistributed, RepeatVector, LSTM, concatenate , Input, Reshape, Dense\n",
"from keras.preprocessing.image import array_to_img, img_to_array, load_img\n",
"import numpy as np"
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {},
"outputs": [],
"source": [
"dir_name = 'resources/eval_light/'\n",
"\n",
"# Read a file and return a string\n",
"def load_doc(filename):\n",
" file = open(filename, 'r')\n",
" text = file.read()\n",
" file.close()\n",
" return text\n",
"\n",
"def load_data(data_dir):\n",
" text = []\n",
" images = []\n",
" # Load all the files and order them\n",
" all_filenames = listdir(data_dir)\n",
" all_filenames.sort()\n",
" for filename in (all_filenames):\n",
" if filename[-3:] == \"npz\":\n",
" # Load the images already prepared in arrays\n",
" image = np.load(data_dir+filename)\n",
" images.append(image['features'])\n",
" else:\n",
" # Load the boostrap tokens and rap them in a start and end tag\n",
" syntax = '<START> ' + load_doc(data_dir+filename) + ' <END>'\n",
" # Seperate all the words with a single space\n",
" syntax = ' '.join(syntax.split())\n",
" # Add a space after each comma\n",
" syntax = syntax.replace(',', ' ,')\n",
" text.append(syntax)\n",
" images = np.array(images, dtype=float)\n",
" return images, text\n",
"\n",
"train_features, texts = load_data(dir_name)"
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {},
"outputs": [],
"source": [
"# Initialize the function to create the vocabulary \n",
"tokenizer = Tokenizer(filters='', split=\" \", lower=False)\n",
"# Create the vocabulary \n",
"tokenizer.fit_on_texts([load_doc('resources/bootstrap.vocab')])\n",
"\n",
"# Add one spot for the empty word in the vocabulary \n",
"vocab_size = len(tokenizer.word_index) + 1\n",
"# Map the input sentences into the vocabulary indexes\n",
"train_sequences = tokenizer.texts_to_sequences(texts)\n",
"# The longest set of boostrap tokens\n",
"max_sequence = max(len(s) for s in train_sequences)\n",
"# Specify how many tokens to have in each input sentence\n",
"max_length = 48\n",
"\n",
"def preprocess_data(sequences, features):\n",
" X, y, image_data = list(), list(), list()\n",
" for img_no, seq in enumerate(sequences):\n",
" for i in range(1, len(seq)):\n",
" # Add the sentence until the current count(i) and add the current count to the output\n",
" in_seq, out_seq = seq[:i], seq[i]\n",
" # Pad all the input token sentences to max_sequence\n",
" in_seq = pad_sequences([in_seq], maxlen=max_sequence)[0]\n",
" # Turn the output into one-hot encoding\n",
" out_seq = to_categorical([out_seq], num_classes=vocab_size)[0]\n",
" # Add the corresponding image to the boostrap token file\n",
" image_data.append(features[img_no])\n",
" # Cap the input sentence to 48 tokens and add it\n",
" X.append(in_seq[-48:])\n",
" y.append(out_seq)\n",
" return np.array(X), np.array(y), np.array(image_data)\n",
"\n",
"X, y, image_data = preprocess_data(train_sequences, train_features)"
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {},
"outputs": [],
"source": [
"#Create the encoder\n",
"image_model = Sequential()\n",
"image_model.add(Conv2D(16, (3, 3), padding='valid', activation='relu', input_shape=(256, 256, 3,)))\n",
"image_model.add(Conv2D(16, (3,3), activation='relu', padding='same', strides=2))\n",
"image_model.add(Conv2D(32, (3,3), activation='relu', padding='same'))\n",
"image_model.add(Conv2D(32, (3,3), activation='relu', padding='same', strides=2))\n",
"image_model.add(Conv2D(64, (3,3), activation='relu', padding='same'))\n",
"image_model.add(Conv2D(64, (3,3), activation='relu', padding='same', strides=2))\n",
"image_model.add(Conv2D(128, (3,3), activation='relu', padding='same'))\n",
"\n",
"image_model.add(Flatten())\n",
"image_model.add(Dense(1024, activation='relu'))\n",
"image_model.add(Dropout(0.3))\n",
"image_model.add(Dense(1024, activation='relu'))\n",
"image_model.add(Dropout(0.3))\n",
"\n",
"image_model.add(RepeatVector(max_length))\n",
"\n",
"visual_input = Input(shape=(256, 256, 3,))\n",
"encoded_image = image_model(visual_input)\n",
"\n",
"language_input = Input(shape=(max_length,))\n",
"language_model = Embedding(vocab_size, 50, input_length=max_length, mask_zero=True)(language_input)\n",
"language_model = LSTM(128, return_sequences=True)(language_model)\n",
"language_model = LSTM(128, return_sequences=True)(language_model)\n",
"\n",
"#Create the decoder\n",
"decoder = concatenate([encoded_image, language_model])\n",
"decoder = LSTM(512, return_sequences=True)(decoder)\n",
"decoder = LSTM(512, return_sequences=False)(decoder)\n",
"decoder = Dense(vocab_size, activation='softmax')(decoder)\n",
"\n",
"# Compile the model\n",
"model = Model(inputs=[visual_input, language_input], outputs=decoder)\n",
"optimizer = RMSprop(lr=0.0001, clipvalue=1.0)\n",
"model.compile(loss='categorical_crossentropy', optimizer=optimizer)"
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {},
"outputs": [],
"source": [
"#Save the model for every 2nd epoch\n",
"filepath=\"org-weights-epoch-{epoch:04d}--val_loss-{val_loss:.4f}--loss-{loss:.4f}.hdf5\"\n",
"checkpoint = ModelCheckpoint(filepath, monitor='val_loss', verbose=1, save_weights_only=True, period=2)\n",
"callbacks_list = [checkpoint]"
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {},
"outputs": [],
"source": [
"# Train the model\n",
"model.fit([image_data, X], y, batch_size=1, shuffle=False, validation_split=0.1, callbacks=callbacks_list, verbose=1, epochs=50)"
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {},
"outputs": [],
"source": []
}
],
"metadata": {
"kernelspec": {
"display_name": "Python 3",
"language": "python",
"name": "python3"
},
"language_info": {
"codemirror_mode": {
"name": "ipython",
"version": 3
},
"file_extension": ".py",
"mimetype": "text/x-python",
"name": "python",
"nbconvert_exporter": "python",
"pygments_lexer": "ipython3",
"version": "3.4.4"
}
},
"nbformat": 4,
"nbformat_minor": 2
}
================================================
FILE: Bootstrap/compiler/android-compiler.py
================================================
#!/usr/bin/env python
from __future__ import print_function
__author__ = 'Tony Beltramelli - www.tonybeltramelli.com'
import sys
from os.path import basename
from classes.Utils import *
from classes.Compiler import *
if __name__ == "__main__":
argv = sys.argv[1:]
length = len(argv)
if length != 0:
input_file = argv[0]
else:
print("Error: not enough argument supplied:")
print("android-compiler.py <input file>")
exit(0)
TEXT_PLACE_HOLDER = "[TEXT]"
ID_PLACE_HOLDER = "[ID]"
dsl_path = "assets/android-dsl-mapping.json"
compiler = Compiler(dsl_path)
def render_content_with_text(key, value):
value = value.replace(TEXT_PLACE_HOLDER, Utils.get_random_text(length_text=5, space_number=0))
while value.find(ID_PLACE_HOLDER) != -1:
value = value.replace(ID_PLACE_HOLDER, Utils.get_android_id(), 1)
return value
file_uid = basename(input_file)[:basename(input_file).find(".")]
path = input_file[:input_file.find(file_uid)]
input_file_path = "{}{}.gui".format(path, file_uid)
output_file_path = "{}{}.xml".format(path, file_uid)
compiler.compile(input_file_path, output_file_path, rendering_function=render_content_with_text)
================================================
FILE: Bootstrap/compiler/assets/android-dsl-mapping.json
================================================
{
"opening-tag": "{",
"closing-tag": "}",
"body": "<?xml version=\"1.0\" encoding=\"utf-8\"?>\n<LinearLayout\n xmlns:android=\"http://schemas.android.com/apk/res/android\"\n xmlns:app=\"http://schemas.android.com/apk/res-auto\"\n xmlns:tools=\"http://schemas.android.com/tools\"\n android:id=\"@+id/container\"\n android:layout_width=\"match_parent\"\n android:layout_height=\"match_parent\"\n android:orientation=\"vertical\"\n tools:context=\"com.tonybeltramelli.android_gui.MainActivity\">\n {}\n</LinearLayout>\n",
"stack": "<FrameLayout android:id=\"@+id/content\" android:layout_width=\"match_parent\" android:layout_height=\"match_parent\" android:layout_weight=\"1\" android:padding=\"10dp\">\n <LinearLayout android:layout_width=\"match_parent\" android:layout_height=\"match_parent\" android:orientation=\"vertical\">\n {}\n </LinearLayout>\n</FrameLayout>",
"row": "<LinearLayout android:layout_width=\"match_parent\" android:layout_height=\"wrap_content\" android:orientation=\"horizontal\" android:paddingTop=\"10dp\" android:paddingBottom=\"10dp\" android:weightSum=\"1\">\n{}\n</LinearLayout>",
"label": "<TextView android:id=\"@+id/[ID]\" android:layout_width=\"wrap_content\" android:layout_height=\"wrap_content\" android:text=\"[TEXT]\" android:textAppearance=\"@style/TextAppearance.AppCompat.Body2\"/>\n",
"btn": "<Button android:id=\"@+id/[ID]\" android:layout_width=\"wrap_content\" android:layout_height=\"wrap_content\" android:text=\"[TEXT]\"/>",
"slider": "<SeekBar android:id=\"@+id/[ID]\" style=\"@style/Widget.AppCompat.SeekBar.Discrete\" android:layout_width=\"wrap_content\" android:layout_height=\"wrap_content\" android:layout_weight=\"0.9\" android:max=\"10\" android:progress=\"5\"/>",
"check": "<CheckBox android:id=\"@+id/[ID]\" android:layout_width=\"wrap_content\" android:layout_height=\"wrap_content\" android:paddingRight=\"10dp\" android:text=\"[TEXT]\"/>",
"radio": "<RadioButton android:id=\"@+id/[ID]\" android:layout_width=\"wrap_content\" android:layout_height=\"wrap_content\" android:paddingRight=\"10dp\" android:text=\"[TEXT]\"/>",
"switch": "<Switch android:id=\"@+id/[ID]\" android:layout_width=\"wrap_content\" android:layout_height=\"wrap_content\" android:paddingRight=\"10dp\" android:text=\"[TEXT]\"/>",
"footer": "<LinearLayout android:layout_width=\"match_parent\" android:layout_height=\"wrap_content\" android:orientation=\"horizontal\" android:weightSum=\"1\">\n {}\n</LinearLayout>",
"btn-home": "<Button android:id=\"@+id/[ID]\" android:layout_width=\"wrap_content\" android:layout_height=\"wrap_content\" android:background=\"#0ffffff\" android:layout_weight=\"1\" android:drawableBottom=\"@drawable/ic_home_black_24dp\" android:text=\"\"/>",
"btn-dashboard": "<Button android:id=\"@+id/[ID]\" android:layout_width=\"wrap_content\" android:layout_height=\"wrap_content\" android:background=\"#0ffffff\" android:layout_weight=\"1\" android:drawableBottom=\"@drawable/ic_dashboard_black_24dp\" android:text=\"\"/>",
"btn-notifications": "<Button android:id=\"@+id/[ID]\" android:layout_width=\"wrap_content\" android:layout_height=\"wrap_content\" android:background=\"#0ffffff\" android:layout_weight=\"1\" android:drawableBottom=\"@drawable/ic_notifications_black_24dp\" android:text=\"\"/>",
"btn-search": "<Button android:id=\"@+id/[ID]\" android:layout_width=\"wrap_content\" android:layout_height=\"wrap_content\" android:background=\"#0ffffff\" android:layout_weight=\"1\" android:drawableBottom=\"?android:attr/actionModeWebSearchDrawable\" android:text=\"\"/>"
}
================================================
FILE: Bootstrap/compiler/assets/ios-dsl-mapping.json
================================================
{
"opening-tag": "{",
"closing-tag": "}",
"body": "<?xml version=\"1.0\" encoding=\"UTF-8\" standalone=\"no\"?>\n<document type=\"com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB\" version=\"3.0\" toolsVersion=\"11201\" systemVersion=\"15G1217\" targetRuntime=\"iOS.CocoaTouch\" propertyAccessControl=\"none\" useAutolayout=\"YES\" useTraitCollections=\"YES\" colorMatched=\"YES\">\n <dependencies>\n <deployment identifier=\"iOS\"/>\n <plugIn identifier=\"com.apple.InterfaceBuilder.IBCocoaTouchPlugin\" version=\"11161\"/>\n <capability name=\"documents saved in the Xcode 8 format\" minToolsVersion=\"8.0\"/>\n </dependencies>\n <scenes>\n <!--View Controller-->\n <scene sceneID=\"qAw-JF-viq\">\n <objects>\n <viewController id=\"[ID]\" sceneMemberID=\"viewController\">\n <layoutGuides>\n <viewControllerLayoutGuide type=\"top\" id=\"[ID]\"/>\n <viewControllerLayoutGuide type=\"bottom\" id=\"[ID]\"/>\n </layoutGuides>\n <view key=\"view\" contentMode=\"center\" id=\"[ID]\">\n <rect key=\"frame\" x=\"0.0\" y=\"0.0\" width=\"375\" height=\"667\"/>\n <autoresizingMask key=\"autoresizingMask\" widthSizable=\"YES\" heightSizable=\"YES\"/>\n <subviews>\n {}\n </subviews>\n <color key=\"backgroundColor\" white=\"1\" alpha=\"1\" colorSpace=\"calibratedWhite\"/>\n </view>\n </viewController>\n <placeholder placeholderIdentifier=\"IBFirstResponder\" id=\"[ID]\" userLabel=\"First Responder\" sceneMemberID=\"firstResponder\"/>\n </objects>\n <point key=\"canvasLocation\" x=\"20\" y=\"95.802098950524751\"/>\n </scene>\n </scenes>\n</document>\n",
"stack": "<stackView opaque=\"NO\" contentMode=\"center\" fixedFrame=\"YES\" axis=\"vertical\" alignment=\"center\" spacing=\"10\" translatesAutoresizingMaskIntoConstraints=\"NO\" id=\"[ID]\">\n <frame key=\"frameInset\" minX=\"16\" minY=\"20\" width=\"343\" height=\"440\"/>\n <autoresizingMask key=\"autoresizingMask\" flexibleMaxX=\"YES\" flexibleMaxY=\"YES\"/>\n <subviews>\n {}\n </subviews>\n <color key=\"backgroundColor\" red=\"0.80000001190000003\" green=\"0.80000001190000003\" blue=\"0.80000001190000003\" alpha=\"1\" colorSpace=\"calibratedRGB\"/>\n</stackView>",
"row": "<view contentMode=\"center\" ambiguous=\"YES\" translatesAutoresizingMaskIntoConstraints=\"NO\" id=\"[ID]\">\n <frame key=\"frameInset\" width=\"343\" height=\"65\"/>\n <subviews>\n <stackView opaque=\"NO\" contentMode=\"center\" fixedFrame=\"YES\" spacing=\"30\" translatesAutoresizingMaskIntoConstraints=\"NO\" id=\"[ID]\">\n <frame key=\"frameInset\" minX=\"8\" minY=\"6\" width=\"337\" height=\"52\"/>\n <autoresizingMask key=\"autoresizingMask\" flexibleMaxX=\"YES\" flexibleMaxY=\"YES\"/>\n <subviews>\n {}\n </subviews>\n </stackView>\n </subviews>\n <color key=\"backgroundColor\" red=\"0.9\" green=\"0.9\" blue=\"0.9\" alpha=\"1\" colorSpace=\"calibratedRGB\"/>\n</view>",
"img": "<imageView userInteractionEnabled=\"NO\" contentMode=\"scaleToFill\" horizontalHuggingPriority=\"251\" verticalHuggingPriority=\"251\" ambiguous=\"YES\" translatesAutoresizingMaskIntoConstraints=\"NO\" id=\"[ID]\">\n <frame key=\"frameInset\" width=\"36\" height=\"36\"/>\n <color key=\"backgroundColor\" red=\"0.40000000600000002\" green=\"0.40000000600000002\" blue=\"1\" alpha=\"1\" colorSpace=\"calibratedRGB\"/>\n</imageView>",
"label": "<label opaque=\"NO\" userInteractionEnabled=\"NO\" contentMode=\"left\" horizontalHuggingPriority=\"251\" verticalHuggingPriority=\"251\" ambiguous=\"YES\" text=\"[TEXT]\" textAlignment=\"natural\" lineBreakMode=\"tailTruncation\" baselineAdjustment=\"alignBaselines\" adjustsFontSizeToFit=\"NO\" translatesAutoresizingMaskIntoConstraints=\"NO\" id=\"[ID]\">\n <frame key=\"frameInset\" width=\"255\" height=\"52\"/>\n <fontDescription key=\"fontDescription\" type=\"system\" pointSize=\"17\"/>\n <nil key=\"textColor\"/>\n <nil key=\"highlightedColor\"/>\n</label>",
"switch": "<switch opaque=\"NO\" contentMode=\"scaleToFill\" horizontalHuggingPriority=\"750\" verticalHuggingPriority=\"750\" ambiguous=\"YES\" contentHorizontalAlignment=\"center\" contentVerticalAlignment=\"center\" on=\"YES\" translatesAutoresizingMaskIntoConstraints=\"NO\" id=\"[ID]\">\n <frame key=\"frameInset\" width=\"51\" height=\"31\"/>\n</switch>",
"slider": "<slider opaque=\"NO\" contentMode=\"scaleToFill\" ambiguous=\"YES\" contentHorizontalAlignment=\"center\" contentVerticalAlignment=\"center\" value=\"0.5\" minValue=\"0.0\" maxValue=\"1\" translatesAutoresizingMaskIntoConstraints=\"NO\" id=\"[ID]\">\n <frame key=\"frameInset\" width=\"142\" height=\"31\"/>\n</slider>",
"btn-add": "<button opaque=\"NO\" contentMode=\"scaleToFill\" ambiguous=\"YES\" contentHorizontalAlignment=\"center\" contentVerticalAlignment=\"center\" buttonType=\"contactAdd\" lineBreakMode=\"middleTruncation\" translatesAutoresizingMaskIntoConstraints=\"NO\" id=\"[ID]\">\n <frame key=\"frameInset\" width=\"22\" height=\"22\"/>\n</button>",
"footer": "<tabBar contentMode=\"scaleToFill\" fixedFrame=\"YES\" translatesAutoresizingMaskIntoConstraints=\"NO\" id=\"[ID]\">\n <frame key=\"frameInset\" height=\"49\"/>\n <autoresizingMask key=\"autoresizingMask\" widthSizable=\"YES\" flexibleMinY=\"YES\"/>\n <color key=\"backgroundColor\" white=\"0.0\" alpha=\"0.0\" colorSpace=\"calibratedWhite\"/>\n <items>\n {}\n </items>\n</tabBar>",
"btn-search": "<tabBarItem systemItem=\"search\" id=\"[ID]\"/>",
"btn-contact": "<tabBarItem systemItem=\"contacts\" id=\"[ID]\"/>",
"btn-download": "<tabBarItem systemItem=\"downloads\" id=\"[ID]\"/>",
"btn-more": "<tabBarItem systemItem=\"more\" id=\"[ID]\"/>"
}
================================================
FILE: Bootstrap/compiler/assets/web-dsl-mapping.json
================================================
{
"opening-tag": "{",
"closing-tag": "}",
"body": "<html>\n <header>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n <link rel=\"stylesheet\" href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" integrity=\"sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u\" crossorigin=\"anonymous\">\n<link rel=\"stylesheet\" href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css\" integrity=\"sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp\" crossorigin=\"anonymous\">\n<style>\n.header{margin:20px 0}nav ul.nav-pills li{background-color:#333;border-radius:4px;margin-right:10px}.col-lg-3{width:24%;margin-right:1.333333%}.col-lg-6{width:49%;margin-right:2%}.col-lg-12,.col-lg-3,.col-lg-6{margin-bottom:20px;border-radius:6px;background-color:#f5f5f5;padding:20px}.row .col-lg-3:last-child,.row .col-lg-6:last-child{margin-right:0}footer{padding:20px 0;text-align:center;border-top:1px solid #bbb}\n</style>\n <title>Scaffold</title>\n </header>\n <body>\n <main class=\"container\">\n {}\n <footer class=\"footer\">\n <p>© Tony Beltramelli 2017</p>\n </footer>\n </main>\n <script src=\"js/jquery.min.js\"></script>\n <script src=\"js/bootstrap.min.js\"></script>\n </body>\n</html>\n",
"header": "<div class=\"header clearfix\">\n <nav>\n <ul class=\"nav nav-pills pull-left\">\n {}\n </ul>\n </nav>\n</div>\n",
"btn-active": "<li class=\"active\"><a href=\"#\">[]</a></li>\n",
"btn-inactive": "<li><a href=\"#\">[]</a></li>\n",
"row": "<div class=\"row\">{}</div>\n",
"single": "<div class=\"col-lg-12\">\n{}\n</div>\n",
"double": "<div class=\"col-lg-6\">\n{}\n</div>\n",
"quadruple": "<div class=\"col-lg-3\">\n{}\n</div>\n",
"btn-green": "<a class=\"btn btn-success\" href=\"#\" role=\"button\">[]</a>\n",
"btn-orange": "<a class=\"btn btn-warning\" href=\"#\" role=\"button\">[]</a>\n",
"btn-red": "<a class=\"btn btn-danger\" href=\"#\" role=\"button\">[]</a>",
"big-title": "<h2>[]</h2>",
"small-title": "<h4>[]</h4>",
"text": "<p>[]</p>\n"
}
================================================
FILE: Bootstrap/compiler/classes/Compiler.py
================================================
#!/usr/bin/env python
__author__ = 'Tony Beltramelli - www.tonybeltramelli.com'
import json
from .Node import *
from .Utils import *
def render_content_with_text(key, value):
if FILL_WITH_RANDOM_TEXT:
if key.find("btn") != -1:
value = value.replace(TEXT_PLACE_HOLDER, Utils.get_random_text())
elif key.find("title") != -1:
value = value.replace(TEXT_PLACE_HOLDER, Utils.get_random_text(length_text=5, space_number=0))
elif key.find("text") != -1:
value = value.replace(TEXT_PLACE_HOLDER,
Utils.get_random_text(length_text=56, space_number=7, with_upper_case=False))
return value
class Compiler:
def __init__(self, dsl_mapping_file_path):
with open(dsl_mapping_file_path) as data_file:
self.dsl_mapping = json.load(data_file)
self.opening_tag = self.dsl_mapping["opening-tag"]
self.closing_tag = self.dsl_mapping["closing-tag"]
self.content_holder = self.opening_tag + self.closing_tag
self.root = Node("body", None, self.content_holder)
def compile(self, tokens, output_file_path):
dsl_file = tokens
#Parse fix
dsl_file = dsl_file[1:-1]
dsl_file = ' '.join(dsl_file)
dsl_file = dsl_file.replace('{', '{8').replace('}', '8}8')
dsl_file = dsl_file.replace(' ', '')
dsl_file = dsl_file.split('8')
dsl_file = list(filter(None, dsl_file))
#End Parse fix
current_parent = self.root
for token in dsl_file:
token = token.replace(" ", "").replace("\n", "")
if token.find(self.opening_tag) != -1:
token = token.replace(self.opening_tag, "")
element = Node(token, current_parent, self.content_holder)
current_parent.add_child(element)
current_parent = element
elif token.find(self.closing_tag) != -1:
current_parent = current_parent.parent
else:
tokens = token.split(",")
for t in tokens:
element = Node(t, current_parent, self.content_holder)
current_parent.add_child(element)
output_html = self.root.render(self.dsl_mapping, rendering_function=render_content_with_text)
if output_html is None:
return "Parsing Error"
with open(output_file_path, 'w') as output_file:
output_file.write(output_html)
return output_html
FILL_WITH_RANDOM_TEXT = True
TEXT_PLACE_HOLDER = "[]"
================================================
FILE: Bootstrap/compiler/classes/Node.py
================================================
#!/usr/bin/env python
from __future__ import print_function
__author__ = 'Tony Beltramelli - www.tonybeltramelli.com'
class Node:
def __init__(self, key, parent_node, content_holder):
self.key = key
self.parent = parent_node
self.children = []
self.content_holder = content_holder
def add_child(self, child):
self.children.append(child)
def show(self):
for child in self.children:
child.show()
def render(self, mapping, rendering_function=None):
content = ""
for child in self.children:
placeholder = child.render(mapping, rendering_function)
if placeholder is None:
self = None
return
else:
content += placeholder
value = mapping.get(self.key, None)
if value is None:
self = None
return None
if rendering_function is not None:
value = rendering_function(self.key, value)
if len(self.children) != 0:
value = value.replace(self.content_holder, content)
return value
================================================
FILE: Bootstrap/compiler/classes/Utils.py
================================================
__author__ = 'Tony Beltramelli - www.tonybeltramelli.com'
import string
import random
class Utils:
@staticmethod
def get_random_text(length_text=10, space_number=1, with_upper_case=True):
results = []
while len(results) < length_text:
char = random.choice(string.ascii_letters[:26])
results.append(char)
if with_upper_case:
results[0] = results[0].upper()
current_spaces = []
while len(current_spaces) < space_number:
space_pos = random.randint(2, length_text - 3)
if space_pos in current_spaces:
break
results[space_pos] = " "
if with_upper_case:
results[space_pos + 1] = results[space_pos - 1].upper()
current_spaces.append(space_pos)
return ''.join(results)
@staticmethod
def get_ios_id(length=10):
results = []
while len(results) < length:
char = random.choice(string.digits + string.ascii_letters)
results.append(char)
results[3] = "-"
results[6] = "-"
return ''.join(results)
@staticmethod
def get_android_id(length=10):
results = []
while len(results) < length:
char = random.choice(string.ascii_letters)
results.append(char)
return ''.join(results)
================================================
FILE: Bootstrap/compiler/classes/__init__.py
================================================
================================================
FILE: Bootstrap/compiler/ios-compiler.py
================================================
#!/usr/bin/env python
from __future__ import print_function
__author__ = 'Tony Beltramelli - www.tonybeltramelli.com'
import sys
from os.path import basename
from classes.Utils import *
from classes.Compiler import *
if __name__ == "__main__":
argv = sys.argv[1:]
length = len(argv)
if length != 0:
input_file = argv[0]
else:
print("Error: not enough argument supplied:")
print("ios-compiler.py <input file>")
exit(0)
TEXT_PLACE_HOLDER = "[TEXT]"
ID_PLACE_HOLDER = "[ID]"
dsl_path = "assets/ios-dsl-mapping.json"
compiler = Compiler(dsl_path)
def render_content_with_text(key, value):
value = value.replace(TEXT_PLACE_HOLDER, Utils.get_random_text(length_text=6, space_number=0))
while value.find(ID_PLACE_HOLDER) != -1:
value = value.replace(ID_PLACE_HOLDER, Utils.get_ios_id(), 1)
return value
file_uid = basename(input_file)[:basename(input_file).find(".")]
path = input_file[:input_file.find(file_uid)]
input_file_path = "{}{}.gui".format(path, file_uid)
output_file_path = "{}{}.storyboard".format(path, file_uid)
compiler.compile(input_file_path, output_file_path, rendering_function=render_content_with_text)
================================================
FILE: Bootstrap/compiler/web-compiler.py
================================================
#!/usr/bin/env python
from __future__ import print_function
__author__ = 'Tony Beltramelli - www.tonybeltramelli.com'
import sys
from os.path import basename
from classes.Utils import *
from classes.Compiler import *
if __name__ == "__main__":
argv = sys.argv[1:]
length = len(argv)
if length != 0:
input_file = argv[0]
else:
print("Error: not enough argument supplied:")
print("web-compiler.py <path> <file name>")
exit(0)
FILL_WITH_RANDOM_TEXT = True
TEXT_PLACE_HOLDER = "[]"
dsl_path = "assets/web-dsl-mapping.json"
compiler = Compiler(dsl_path)
def render_content_with_text(key, value):
if FILL_WITH_RANDOM_TEXT:
if key.find("btn") != -1:
value = value.replace(TEXT_PLACE_HOLDER, Utils.get_random_text())
elif key.find("title") != -1:
value = value.replace(TEXT_PLACE_HOLDER, Utils.get_random_text(length_text=5, space_number=0))
elif key.find("text") != -1:
value = value.replace(TEXT_PLACE_HOLDER,
Utils.get_random_text(length_text=56, space_number=7, with_upper_case=False))
return value
file_uid = basename(input_file)[:basename(input_file).find(".")]
path = input_file[:input_file.find(file_uid)]
input_file_path = "{}{}.gui".format(path, file_uid)
output_file_path = "{}{}.html".format(path, file_uid)
compiler.compile(input_file_path, output_file_path, rendering_function=render_content_with_text)
================================================
FILE: Bootstrap/resources/bootstrap.vocab
================================================
, { } small-title text quadruple row btn-inactive btn-orange btn-green btn-red double <START> header btn-active <END> single
================================================
FILE: Bootstrap/resources/eval_light/00CDC9A8-3D73-4291-90EF-49178E408797.gui
================================================
header {
btn-inactive, btn-active, btn-inactive, btn-inactive, btn-inactive
}
row {
quadruple {
small-title, text, btn-orange
}
quadruple {
small-title, text, btn-red
}
quadruple {
small-title, text, btn-green
}
quadruple {
small-title, text, btn-orange
}
}
row {
single {
small-title, text, btn-green
}
}
================================================
FILE: Bootstrap/resources/eval_light/0BA2A4B4-4193-4506-8818-31564225EF8B.gui
================================================
header {
btn-inactive, btn-inactive, btn-active, btn-inactive, btn-inactive
}
row {
double {
small-title, text, btn-green
}
double {
small-title, text, btn-green
}
}
row {
single {
small-title, text, btn-orange
}
}
row {
quadruple {
small-title, text, btn-orange
}
quadruple {
small-title, text, btn-green
}
quadruple {
small-title, text, btn-red
}
quadruple {
small-title, text, btn-green
}
}
================================================
FILE: Bootstrap/resources/eval_light/0CC0512B-11C5-481C-BC81-534F1FC9EC0A.gui
================================================
header {
btn-inactive, btn-inactive, btn-inactive, btn-active
}
row {
double {
small-title, text, btn-green
}
double {
small-title, text, btn-green
}
}
row {
single {
small-title, text, btn-orange
}
}
row {
quadruple {
small-title, text, btn-green
}
quadruple {
small-title, text, btn-green
}
quadruple {
small-title, text, btn-green
}
quadruple {
small-title, text, btn-orange
}
}
================================================
FILE: Bootstrap/resources/eval_light/0D1C8ADB-D9F0-48EC-B5AA-205BCF96094E.gui
================================================
header {
btn-active, btn-inactive, btn-inactive
}
row {
single {
small-title, text, btn-red
}
}
row {
quadruple {
small-title, text, btn-orange
}
quadruple {
small-title, text, btn-green
}
quadruple {
small-title, text, btn-red
}
quadruple {
small-title, text, btn-red
}
}
row {
double {
small-title, text, btn-red
}
double {
small-title, text, btn-green
}
}
================================================
FILE: Bootstrap/resources/eval_light/0FBAB0B3-24CB-42EF-8803-BFDEB8C3EFDC.gui
================================================
header {
btn-inactive, btn-inactive, btn-active, btn-inactive
}
row {
double {
small-title, text, btn-red
}
double {
small-title, text, btn-green
}
}
================================================
FILE: Bootstrap/resources/eval_light/1A5D96CE-F23A-4EB5-84BF-F6F2A3B6D185.gui
================================================
header {
btn-active, btn-inactive
}
row {
single {
small-title, text, btn-green
}
}
row {
quadruple {
small-title, text, btn-orange
}
quadruple {
small-title, text, btn-orange
}
quadruple {
small-title, text, btn-green
}
quadruple {
small-title, text, btn-red
}
}
row {
double {
small-title, text, btn-green
}
double {
small-title, text, btn-orange
}
}
================================================
FILE: Bootstrap/resources/eval_light/1D70C31F-C198-4159-8388-18CB2BDA15D6.gui
================================================
header {
btn-inactive, btn-inactive, btn-active
}
row {
quadruple {
small-title, text, btn-green
}
quadruple {
small-title, text, btn-orange
}
quadruple {
small-title, text, btn-green
}
quadruple {
small-title, text, btn-green
}
}
row {
single {
small-title, text, btn-red
}
}
row {
double {
small-title, text, btn-orange
}
double {
small-title, text, btn-orange
}
}
================================================
FILE: Bootstrap/resources/eval_light/1EA2A9DA-E8A6-4011-9841-A7758E979F77.gui
================================================
header {
btn-active, btn-inactive
}
row {
double {
small-title, text, btn-green
}
double {
small-title, text, btn-orange
}
}
row {
single {
small-title, text, btn-orange
}
}
row {
quadruple {
small-title, text, btn-green
}
quadruple {
small-title, text, btn-green
}
quadruple {
small-title, text, btn-red
}
quadruple {
small-title, text, btn-red
}
}
================================================
FILE: Bootstrap/resources/eval_light/1F4D3508-2479-4D8A-B5F0-92CF690BD1AE.gui
================================================
header {
btn-inactive, btn-inactive, btn-active, btn-inactive, btn-inactive
}
row {
single {
small-title, text, btn-green
}
}
row {
quadruple {
small-title, text, btn-red
}
quadruple {
small-title, text, btn-red
}
quadruple {
small-title, text, btn-green
}
quadruple {
small-title, text, btn-red
}
}
row {
quadruple {
small-title, text, btn-green
}
quadruple {
small-title, text, btn-red
}
quadruple {
small-title, text, btn-orange
}
quadruple {
small-title, text, btn-green
}
}
================================================
FILE: Bootstrap/resources/eval_light/1FA12698-2EA0-45D0-A40D-A7DF1D903036.gui
================================================
header {
btn-inactive, btn-inactive, btn-inactive, btn-active
}
row {
double {
small-title, text, btn-orange
}
double {
small-title, text, btn-orange
}
}
row {
quadruple {
small-title, text, btn-orange
}
quadruple {
small-title, text, btn-orange
}
quadruple {
small-title, text, btn-green
}
quadruple {
small-title, text, btn-red
}
}
================================================
FILE: Bootstrap/test_model_accuracy.ipynb
================================================
{
"cells": [
{
"cell_type": "code",
"execution_count": null,
"metadata": {},
"outputs": [],
"source": [
"from os import listdir\n",
"from keras.models import model_from_json\n",
"from keras.preprocessing.text import Tokenizer\n",
"from keras.preprocessing.sequence import pad_sequences\n",
"from nltk.translate.bleu_score import sentence_bleu\n",
"from tqdm import tqdm\n",
"import numpy as np\n",
"import h5py as h5py\n",
"from compiler.classes.Compiler import *"
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {},
"outputs": [],
"source": [
"# Read a file and return a string\n",
"def load_doc(filename):\n",
" file = open(filename, 'r')\n",
" text = file.read()\n",
" file.close()\n",
" return text\n",
"\n",
"def load_data(data_dir):\n",
" text = []\n",
" images = []\n",
" # Load all the files and order them\n",
" all_filenames = listdir(data_dir)\n",
" all_filenames.sort()\n",
" for filename in (all_filenames)[-2:]:\n",
" if filename[-3:] == \"npz\":\n",
" # Load the images already prepared in arrays\n",
" image = np.load(data_dir+filename)\n",
" images.append(image['features'])\n",
" else:\n",
" # Load the boostrap tokens and rap them in a start and end tag\n",
" syntax = '<START> ' + load_doc(data_dir+filename) + ' <END>'\n",
" # Seperate all the words with a single space\n",
" syntax = ' '.join(syntax.split())\n",
" # Add a space after each comma\n",
" syntax = syntax.replace(',', ' ,')\n",
" text.append(syntax)\n",
" images = np.array(images, dtype=float)\n",
" return images, text"
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {},
"outputs": [],
"source": [
"# Initialize the function to create the vocabulary \n",
"tokenizer = Tokenizer(filters='', split=\" \", lower=False)\n",
"# Create the vocabulary \n",
"tokenizer.fit_on_texts([load_doc('resources/bootstrap.vocab')])"
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {},
"outputs": [],
"source": [
"dir_name = '../../../../eval/'\n",
"train_features, texts = load_data(dir_name)"
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {},
"outputs": [],
"source": [
"#load model and weights \n",
"json_file = open('../../../../model.json', 'r')\n",
"loaded_model_json = json_file.read()\n",
"json_file.close()\n",
"loaded_model = model_from_json(loaded_model_json)\n",
"# load weights into new model\n",
"loaded_model.load_weights(\"../../../../weights.hdf5\")\n",
"print(\"Loaded model from disk\")"
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {},
"outputs": [],
"source": [
"# map an integer to a word\n",
"def word_for_id(integer, tokenizer):\n",
" for word, index in tokenizer.word_index.items():\n",
" if index == integer:\n",
" return word\n",
" return None\n",
"print(word_for_id(17, tokenizer))"
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {},
"outputs": [],
"source": [
"# generate a description for an image\n",
"def generate_desc(model, tokenizer, photo, max_length):\n",
" photo = np.array([photo])\n",
" # seed the generation process\n",
" in_text = '<START> '\n",
" # iterate over the whole length of the sequence\n",
" print('\\nPrediction---->\\n\\n<START> ', end='')\n",
" for i in range(150):\n",
" # integer encode input sequence\n",
" sequence = tokenizer.texts_to_sequences([in_text])[0]\n",
" # pad input\n",
" sequence = pad_sequences([sequence], maxlen=max_length)\n",
" # predict next word\n",
" yhat = loaded_model.predict([photo, sequence], verbose=0)\n",
" # convert probability to integer\n",
" yhat = np.argmax(yhat)\n",
" # map integer to word\n",
" word = word_for_id(yhat, tokenizer)\n",
" # stop if we cannot map the word\n",
" if word is None:\n",
" break\n",
" # append as input for generating the next word\n",
" in_text += word + ' '\n",
" # stop if we predict the end of the sequence\n",
" print(word + ' ', end='')\n",
" if word == '<END>':\n",
" break\n",
" return in_text"
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {},
"outputs": [],
"source": [
"max_length = 48 \n",
"# evaluate the skill of the model\n",
"def evaluate_model(model, descriptions, photos, tokenizer, max_length):\n",
" actual, predicted = list(), list()\n",
" # step over the whole set\n",
" for i in range(len(texts)):\n",
" yhat = generate_desc(model, tokenizer, photos[i], max_length)\n",
" # store actual and predicted\n",
" print('\\n\\nReal---->\\n\\n' + texts[i])\n",
" actual.append([texts[i].split()])\n",
" predicted.append(yhat.split())\n",
" # calculate BLEU score\n",
" bleu = corpus_bleu(actual, predicted)\n",
" return bleu, actual, predicted\n",
"\n",
"bleu, actual, predicted = evaluate_model(loaded_model, texts, train_features, tokenizer, max_length)"
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {},
"outputs": [],
"source": [
"#Compile the tokens into HTML and css\n",
"dsl_path = \"compiler/assets/web-dsl-mapping.json\"\n",
"compiler = Compiler(dsl_path)\n",
"compiled_website = compiler.compile(predicted[0], 'index.html')"
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {},
"outputs": [],
"source": [
"print(compiled_website )"
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {},
"outputs": [],
"source": [
"print(bleu)"
]
}
],
"metadata": {
"kernelspec": {
"display_name": "Python 3",
"language": "python",
"name": "python3"
},
"language_info": {
"codemirror_mode": {
"name": "ipython",
"version": 3
},
"file_extension": ".py",
"mimetype": "text/x-python",
"name": "python",
"nbconvert_exporter": "python",
"pygments_lexer": "ipython3",
"version": "3.4.4"
}
},
"nbformat": 4,
"nbformat_minor": 2
}
================================================
FILE: HTML/HTML.ipynb
================================================
{
"cells": [
{
"cell_type": "code",
"execution_count": null,
"metadata": {},
"outputs": [],
"source": [
"from os import listdir\n",
"from numpy import array\n",
"from keras.preprocessing.text import Tokenizer, one_hot\n",
"from keras.preprocessing.sequence import pad_sequences\n",
"from keras.models import Model\n",
"from keras.utils import to_categorical\n",
"from keras.layers import Embedding, TimeDistributed, RepeatVector, LSTM, concatenate , Input, Reshape, Dense, Flatten\n",
"from keras.preprocessing.image import array_to_img, img_to_array, load_img\n",
"from keras.applications.inception_resnet_v2 import InceptionResNetV2, preprocess_input\n",
"import numpy as np"
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {},
"outputs": [],
"source": [
"# Load the images and preprocess them for inception-resnet\n",
"images = []\n",
"all_filenames = listdir('images/')\n",
"all_filenames.sort()\n",
"for filename in all_filenames:\n",
" images.append(img_to_array(load_img('images/'+filename, target_size=(299, 299))))\n",
"images = np.array(images, dtype=float)\n",
"images = preprocess_input(images)\n",
"\n",
"# Run the images through inception-resnet and extract the features without the classification layer\n",
"IR2 = InceptionResNetV2(weights='imagenet', include_top=False)\n",
"features = IR2.predict(images)"
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {},
"outputs": [],
"source": [
"# We will cap each input sequence to 100 tokens\n",
"max_caption_len = 100\n",
"# Initialize the function that will create our vocabulary \n",
"tokenizer = Tokenizer(filters='', split=\" \", lower=False)\n",
"\n",
"# Read a document and return a string\n",
"def load_doc(filename):\n",
" file = open(filename, 'r')\n",
" text = file.read()\n",
" file.close()\n",
" return text\n",
"\n",
"# Load all the HTML files\n",
"X = []\n",
"all_filenames = listdir('html/')\n",
"all_filenames.sort()\n",
"for filename in all_filenames:\n",
" X.append(load_doc('html/'+filename))\n",
"\n",
"# Create the vocabulary from the html files\n",
"tokenizer.fit_on_texts(X)\n",
"\n",
"# Add +1 to leave space for empty words\n",
"vocab_size = len(tokenizer.word_index) + 1\n",
"# Translate each word in text file to the matching vocabulary index\n",
"sequences = tokenizer.texts_to_sequences(X)\n",
"# The longest HTML file\n",
"max_length = max(len(s) for s in sequences)\n",
"\n",
"# Intialize our final input to the model\n",
"X, y, image_data = list(), list(), list()\n",
"for img_no, seq in enumerate(sequences):\n",
" for i in range(1, len(seq)):\n",
" # Add the entire sequence to the input and only keep the next word for the output\n",
" in_seq, out_seq = seq[:i], seq[i]\n",
" # If the sentence is shorter than max_length, fill it up with empty words\n",
" in_seq = pad_sequences([in_seq], maxlen=max_length)[0]\n",
" # Map the output to one-hot encoding\n",
" out_seq = to_categorical([out_seq], num_classes=vocab_size)[0]\n",
" # Add and image corresponding to the HTML file\n",
" image_data.append(features[img_no])\n",
" # Cut the input sentence to 100 tokens, and add it to the input data\n",
" X.append(in_seq[-100:])\n",
" y.append(out_seq)\n",
"\n",
"X, y, image_data = np.array(X), np.array(y), np.array(image_data)"
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {},
"outputs": [],
"source": [
"# Create the encoder\n",
"image_features = Input(shape=(8, 8, 1536,))\n",
"image_flat = Flatten()(image_features)\n",
"image_flat = Dense(128, activation='relu')(image_flat)\n",
"ir2_out = RepeatVector(max_caption_len)(image_flat)\n",
"\n",
"language_input = Input(shape=(max_caption_len,))\n",
"language_model = Embedding(vocab_size, 200, input_length=max_caption_len)(language_input)\n",
"language_model = LSTM(256, return_sequences=True)(language_model)\n",
"language_model = LSTM(256, return_sequences=True)(language_model)\n",
"language_model = TimeDistributed(Dense(128, activation='relu'))(language_model)\n",
"\n",
"# Create the decoder\n",
"decoder = concatenate([ir2_out, language_model])\n",
"decoder = LSTM(512, return_sequences=False)(decoder)\n",
"decoder_output = Dense(vocab_size, activation='softmax')(decoder)\n",
"\n",
"# Compile the model\n",
"model = Model(inputs=[image_features, language_input], outputs=decoder_output)\n",
"model.compile(loss='categorical_crossentropy', optimizer='rmsprop')"
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {},
"outputs": [],
"source": [
"# Train the neural network\n",
"model.fit([image_data, X], y, batch_size=64, shuffle=False, epochs=2)"
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {},
"outputs": [],
"source": [
"# map an integer to a word\n",
"def word_for_id(integer, tokenizer):\n",
" for word, index in tokenizer.word_index.items():\n",
" if index == integer:\n",
" return word\n",
" return None"
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {},
"outputs": [],
"source": [
"# generate a description for an image\n",
"def generate_desc(model, tokenizer, photo, max_length):\n",
" # seed the generation process\n",
" in_text = 'START'\n",
" # iterate over the whole length of the sequence\n",
" for i in range(900):\n",
" # integer encode input sequence\n",
" sequence = tokenizer.texts_to_sequences([in_text])[0][-100:]\n",
" # pad input\n",
" sequence = pad_sequences([sequence], maxlen=max_length)\n",
" # predict next word\n",
" yhat = model.predict([photo,sequence], verbose=0)\n",
" # convert probability to integer\n",
" yhat = np.argmax(yhat)\n",
" # map integer to word\n",
" word = word_for_id(yhat, tokenizer)\n",
" # stop if we cannot map the word\n",
" if word is None:\n",
" break\n",
" # append as input for generating the next word\n",
" in_text += ' ' + word\n",
" # Print the prediction\n",
" print(' ' + word, end='')\n",
" # stop if we predict the end of the sequence\n",
" if word == 'END':\n",
" break\n",
" return"
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {},
"outputs": [],
"source": [
"# Load and image, preprocess it for IR2, extract features and generate the HTML\n",
"test_image = img_to_array(load_img('images/87.jpg', target_size=(299, 299)))\n",
"test_image = np.array(test_image, dtype=float)\n",
"test_image = preprocess_input(test_image)\n",
"test_features = IR2.predict(np.array([test_image]))\n",
"generate_desc(model, tokenizer, np.array(test_features), 100)"
]
}
],
"metadata": {
"kernelspec": {
"display_name": "Python 3",
"language": "python",
"name": "python3"
},
"language_info": {
"codemirror_mode": {
"name": "ipython",
"version": 3
},
"file_extension": ".py",
"mimetype": "text/x-python",
"name": "python",
"nbconvert_exporter": "python",
"pygments_lexer": "ipython3",
"version": "3.4.4"
}
},
"nbformat": 4,
"nbformat_minor": 2
}
================================================
FILE: HTML/Resources_for_the_index_file/scripts/html5shiv.js
================================================
/*! HTML5 Shiv vpre3.6 | @afarkas @jdalton @jon_neal @rem | MIT/GPL2 Licensed */
;(function(window, document) {
/** Preset options */
var options = window.html5 || {};
/** Used to skip problem elements */
var reSkip = /^<|^(?:button|map|select|textarea|object|iframe|option|optgroup)$/i;
/** Not all elements can be cloned in IE (this list can be shortend) **/
var saveClones = /^<|^(?:a|b|button|code|div|fieldset|form|h1|h2|h3|h4|h5|h6|i|iframe|img|input|label|li|link|ol|option|p|param|q|script|select|span|strong|style|table|tbody|td|textarea|tfoot|th|thead|tr|ul)$/i;
/** Detect whether the browser supports default html5 styles */
var supportsHtml5Styles;
/** Name of the expando, to work with multiple documents or to re-shiv one document */
var expando = '_html5shiv';
/** The id for the the documents expando */
var expanID = 0;
/** Cached data for each document */
var expandoData = {};
/** Detect whether the browser supports unknown elements */
var supportsUnknownElements;
(function() {
var a = document.createElement('a');
a.innerHTML = '<xyz></xyz>';
//if the hidden property is implemented we can assume, that the browser supports basic HTML5 Styles
supportsHtml5Styles = ('hidden' in a);
supportsUnknownElements = a.childNodes.length == 1 || (function() {
// assign a false positive if unable to shiv
try {
(document.createElement)('a');
} catch(e) {
return true;
}
var frag = document.createDocumentFragment();
return (
typeof frag.cloneNode == 'undefined' ||
typeof frag.createDocumentFragment == 'undefined' ||
typeof frag.createElement == 'undefined'
);
}());
}());
/*--------------------------------------------------------------------------*/
/**
* Creates a style sheet with the given CSS text and adds it to the document.
* @private
* @param {Document} ownerDocument The document.
* @param {String} cssText The CSS text.
* @returns {StyleSheet} The style element.
*/
function addStyleSheet(ownerDocument, cssText) {
var p = ownerDocument.createElement('p'),
parent = ownerDocument.getElementsByTagName('head')[0] || ownerDocument.documentElement;
p.innerHTML = 'x<style>' + cssText + '</style>';
return parent.insertBefore(p.lastChild, parent.firstChild);
}
/**
* Returns the value of `html5.elements` as an array.
* @private
* @returns {Array} An array of shived element node names.
*/
function getElements() {
var elements = html5.elements;
return typeof elements == 'string' ? elements.split(' ') : elements;
}
/**
* Returns the data associated to the given document
* @private
* @param {Document} ownerDocument The document.
* @returns {Object} An object of data.
*/
function getExpandoData(ownerDocument) {
var data = expandoData[ownerDocument[expando]];
if (!data) {
data = {};
expanID++;
ownerDocument[expando] = expanID;
expandoData[expanID] = data;
}
return data;
}
/**
* returns a shived element for the given nodeName and document
* @memberOf html5
* @param {String} nodeName name of the element
* @param {Document} ownerDocument The context document.
* @returns {Object} The shived element.
*/
function createElement(nodeName, ownerDocument, data){
if (!ownerDocument) {
ownerDocument = document;
}
if(supportsUnknownElements){
return ownerDocument.createElement(nodeName);
}
data = data || getExpandoData(ownerDocument);
var node;
if (data.cache[nodeName]) {
node = data.cache[nodeName].cloneNode();
} else if (saveClones.test(nodeName)) {
node = (data.cache[nodeName] = data.createElem(nodeName)).cloneNode();
} else {
node = data.createElem(nodeName);
}
// Avoid adding some elements to fragments in IE < 9 because
// * Attributes like `name` or `type` cannot be set/changed once an element
// is inserted into a document/fragment
// * Link elements with `src` attributes that are inaccessible, as with
// a 403 response, will cause the tab/window to crash
// * Script elements appended to fragments will execute when their `src`
// or `text` property is set
return node.canHaveChildren && !reSkip.test(nodeName) ? data.frag.appendChild(node) : node;
}
/**
* returns a shived DocumentFragment for the given document
* @memberOf html5
* @param {Document} ownerDocument The context document.
* @returns {Object} The shived DocumentFragment.
*/
function createDocumentFragment(ownerDocument, data){
if (!ownerDocument) {
ownerDocument = document;
}
if(supportsUnknownElements){
return ownerDocument.createDocumentFragment();
}
data = data || getExpandoData(ownerDocument);
var clone = data.frag.cloneNode(),
i = 0,
elems = getElements(),
l = elems.length;
for(;i<l;i++){
clone.createElement(elems[i]);
}
return clone;
}
/**
* Shivs the `createElement` and `createDocumentFragment` methods of the document.
* @private
* @param {Document|DocumentFragment} ownerDocument The document.
* @param {Object} data of the document.
*/
function shivMethods(ownerDocument, data) {
if (!data.cache) {
data.cache = {};
data.createElem = ownerDocument.createElement;
data.createFrag = ownerDocument.createDocumentFragment;
data.frag = data.createFrag();
}
ownerDocument.createElement = function(nodeName) {
//abort shiv
if (!html5.shivMethods) {
return data.createElem(nodeName);
}
return createElement(nodeName);
};
ownerDocument.createDocumentFragment = Function('h,f', 'return function(){' +
'var n=f.cloneNode(),c=n.createElement;' +
'h.shivMethods&&(' +
// unroll the `createElement` calls
getElements().join().replace(/\w+/g, function(nodeName) {
data.createElem(nodeName);
data.frag.createElement(nodeName);
return 'c("' + nodeName + '")';
}) +
');return n}'
)(html5, data.frag);
}
/*--------------------------------------------------------------------------*/
/**
* Shivs the given document.
* @memberOf html5
* @param {Document} ownerDocument The document to shiv.
* @returns {Document} The shived document.
*/
function shivDocument(ownerDocument) {
if (!ownerDocument) {
ownerDocument = document;
}
var data = getExpandoData(ownerDocument);
if (html5.shivCSS && !supportsHtml5Styles && !data.hasCSS) {
data.hasCSS = !!addStyleSheet(ownerDocument,
// corrects block display not defined in IE6/7/8/9
'article,aside,figcaption,figure,footer,header,hgroup,nav,section{display:block}' +
// adds styling not present in IE6/7/8/9
'mark{background:#FF0;color:#000}'
);
}
if (!supportsUnknownElements) {
shivMethods(ownerDocument, data);
}
return ownerDocument;
}
/*--------------------------------------------------------------------------*/
/**
* The `html5` object is exposed so that more elements can be shived and
* existing shiving can be detected on iframes.
* @type Object
* @example
*
* // options can be changed before the script is included
* html5 = { 'elements': 'mark section', 'shivCSS': false, 'shivMethods': false };
*/
var html5 = {
/**
* An array or space separated string of node names of the elements to shiv.
* @memberOf html5
* @type Array|String
*/
'elements': options.elements || 'abbr article aside audio bdi canvas data datalist details figcaption figure footer header hgroup mark meter nav output progress section summary time video',
/**
* A flag to indicate that the HTML5 style sheet should be inserted.
* @memberOf html5
* @type Boolean
*/
'shivCSS': !(options.shivCSS === false),
/**
* Is equal to true if a browser supports creating unknown/HTML5 elements
* @memberOf html5
* @type boolean
*/
'supportsUnknownElements': supportsUnknownElements,
/**
* A flag to indicate that the document's `createElement` and `createDocumentFragment`
* methods should be overwritten.
* @memberOf html5
* @type Boolean
*/
'shivMethods': !(options.shivMethods === false),
/**
* A string to describe the type of `html5` object ("default" or "default print").
* @memberOf html5
* @type String
*/
'type': 'default',
// shivs the document according to the specified `html5` object options
'shivDocument': shivDocument,
//creates a shived element
createElement: createElement,
//creates a shived documentFragment
createDocumentFragment: createDocumentFragment
};
/*--------------------------------------------------------------------------*/
// expose html5
window.html5 = html5;
// shiv the document
shivDocument(document);
}(this, document));
================================================
FILE: HTML/Resources_for_the_index_file/styles/layout.css
================================================
/*
HTML 5 Template Name: Basic 86
File: Layout CSS
Author: OS Templates
Author URI: http://www.os-templates.com/
Licence: <a href="http://www.os-templates.com/template-terms">Website Template Licence</a>
*/
html{overflow-y:scroll;} /* Forces a scrollbar when the viewport is larger than the websites content - CSS3 */
body{margin:0; padding:0; font-size:13px; font-family:Georgia, "Times New Roman", Times, serif; color:#919191; background-color:#232323;}
.clear:after{content:"."; display:block; height:0; clear:both; visibility:hidden; line-height:0;}
.clear{display:block; clear:both;}
html[xmlns] .clear{display:block;}
* html .clear{height:1%;}
a{outline:none; text-decoration:none;}
code{font-weight:normal; font-style:normal; font-family:Georgia, "Times New Roman", Times, serif;}
.fl_left{float:left;}
.fl_right{float:right;}
img{margin:0; padding:0; border:none; line-height:normal; vertical-align:middle;}
.imgholder, .imgl, .imgr{padding:4px; border:1px solid #D6D6D6; text-align:center;}
.imgl{float:left; margin:0 15px 15px 0; clear:left;}
.imgr{float:right; margin:0 0 15px 15px; clear:right;}
/*----------------------------------------------HTML 5 Overrides-------------------------------------*/
address, article, aside, figcaption, figure, footer, header, nav, section{display:block; margin:0; padding:0;}
q{display:block; padding:0 10px 8px 10px; color:#979797; background-color:#ECECEC; font-style:italic; line-height:normal;}
q:before{content:' '; font-size:26px;}
q:after{content:' '; font-size:26px; line-height:0;}
/* ----------------------------------------------Wrapper-------------------------------------*/
div.wrapper{display:block; width:100%; margin:0; padding:0; text-align:left;}
.row1, .row1 a{color:#C0BAB6; background-color:#333333;}
.row2{color:#979797; background-color:#FFFFFF;}
.row2 a{color:#FF9900; background-color:#FFFFFF;}
.row3, .row3 a{color:#919191; background-color:#232323;}
/*----------------------------------------------Generalise-------------------------------------*/
#header, #container, #footer{display:block; width:960px; margin:0 auto;}
nav ul{margin:0; padding:0; list-style:none;}
h1, h2, h3, h4, h5, h6{margin:0; padding:0; font-size:16px; font-weight:bold; font-style:normal; line-height:normal; text-transform:uppercase;}
address{font-style:normal;}
blockquote, q{display:block; padding:8px 10px; color:#979797; background-color:#ECECEC; font-style:italic; line-height:normal;}
blockquote:before, q:before{content:' '; font-size:26px;}
blockquote:after, q:after{content:' '; font-size:26px; line-height:0;}
form, fieldset, legend{margin:0; padding:0; border:none;}
legend{display:none;}
input, textarea, select{font-size:12px; font-family:Georgia,"Times New Roman",Times,serif;}
.one_quarter, .two_quarter, .three_quarter, .four_quarter{display:block; float:left; margin:0 20px 0 0;}
.one_quarter{width:225px;}
.two_quarter{width:470px;}
.three_quarter{width:715px;}
.four_quarter{width:960px; float:none; margin-right:0; clear:both;}
.one_third, .two_third, .three_third{display:block; float:left; margin:0 30px 0 0;}
.one_third{width:300px;}
.two_third{width:630px;}
.three_third{width:960px; float:none; margin-right:0; clear:both;}
.lastbox{margin-right:0;}
/*----------------------------------------------Header-------------------------------------*/
#header{padding:20px 0;}
#header #hgroup{float:left; margin:0 0 20px 0;}
#header #hgroup h1, #header #hgroup h2{font-weight:normal; text-transform:none;}
#header #hgroup h1{font-size:36px;}
#header #hgroup h2{font-size:13px;}
#header nav{display:block; float:right; margin:10px 0 0 0; padding:20px 0; color:#C0BAB6; background-color:#232323;}
#header nav ul{padding:0 20px;}
#header nav li{display:inline; margin-right:25px; text-transform:uppercase;}
#header nav li.last{margin-right:0;}
#header nav li a{color:#C0BAB6; background-color:#232323;}
#header nav li a:hover{color:#FF9900; background-color:#232323;}
/*----------------------------------------------Content Area-------------------------------------*/
#container{padding:30px 0;}
#container section{display:block; width:100%; margin:0 0 50px 0; padding:0;}
#container .last{margin:0;}
#container .more{text-align:right;}
/* ------Slider-----*/
#container #slider{}
#container #slider figure{}
#container #slider figure img{float:right; width:630px; height:300px;}
#container #slider figure figcaption{display:block; float:left; width:280px; height:260px; padding:20px; overflow:hidden; color:#989898; background-color:#DEDEDE; line-height:1.6em;}
#container #slider figure figcaption a{color:#FF9900; background-color:#DEDEDE;}
#container #slider figure h2{font-size:42px; font-weight:normal; font-style:italic; text-transform:none;}
#container #slider figure footer{}
/* ------Main Content-----*/
#container #homepage{display:block; width:100%; line-height:1.6em;}
#container #homepage #services{}
#container #homepage #services article{}
#container #homepage #services article h2{font-size:14px; margin-bottom:15px;}
#container #homepage #services article p{margin:0; padding:0;}
#container #homepage #services article img{float:left; width:80px; height:80px; margin:0 10px 10px 0; padding:4px; border:1px solid #DEDEDE;}
#container #homepage #services article footer{margin:10px 0 0 0;}
#container #homepage #latest{}
#container #homepage #latest article{}
#container #homepage #latest article figure{}
#container #homepage #latest article figure img{margin:0 0 10px 0; padding:4px; border:1px solid #D6D6D6;}
#container #homepage #latest article figure figcaption{}
#container #homepage #latest article figure h2{font-size:14px;}
#container #homepage #latest article figure footer{}
/*----------------------------------------------Footer-------------------------------------*/
#footer{padding:20px 0;}
#footer p{margin:0; padding:0;}
================================================
FILE: HTML/html/86.html
================================================
START <!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<title>Basic 86</title>
<meta charset="iso-8859-1">
<link rel="stylesheet" href="styles/layout.css" type="text/css">
<!--[if lt IE 9]><script src="scripts/html5shiv.js"></script><![endif]-->
</head>
<body>
<div class="wrapper row1">
<header id="header" class="clear">
<div id="hgroup">
<h1><a href="#">Basic 86</a></h1>
<h2>Free HTML5 Website Template</h2>
</div>
<nav>
<ul>
<li><a href="#">Text Link</a></li>
<li><a href="#">Text Link</a></li>
<li><a href="#">Text Link</a></li>
<li><a href="#">Text Link</a></li>
<li class="last"><a href="#">Text Link</a></li>
</ul>
</nav>
</header>
</div>
<!-- content -->
<div class="wrapper row2">
<div id="container" class="clear">
<!-- Slider -->
<section id="slider" class="clear">
<figure><img src="images/demo/630x300.gif" alt="">
<figcaption>
<h2>Eu justo augue estas</h2>
<p>Nullamlacus dui ipsum conseque loborttis non euisque morbi penas dapibulum orna. Urnaultrices quis curabitur phasellentesque congue magnis vestibulum quismodo nulla et feugiat adipiscinia pellentum leo.</p>
<footer class="more"><a href="#">Read More »</a></footer>
</figcaption>
</figure>
</section>
<!-- main content -->
<div id="homepage">
<!-- services area -->
<section id="services" class="clear">
<!-- article 1 -->
<article class="one_third">
<h2>Lorum ipsum dolor</h2>
<img src="images/demo/80x80.gif" alt="">
<p>Vestibulumaccumsan egestibulum eu justo convallis augue estas aenean elit intesque sed. Facilispede estibulum nulla orna nisl velit elit ac aliquat non tincidunt. Namjusto cras urna urnaretra lor urna neque sed quis orci nulla. Laoremut vitae doloreet condimentumst phasellentes dolor ut a ipsum id consectetus. Inpede cumst vitae ris tellentesque fring intesquet.</p>
<footer class="more"><a href="#">Read More »</a></footer>
</article>
<!-- article 2 -->
<article class="one_third">
<h2>Lorum ipsum dolor</h2>
<img src="images/demo/80x80.gif" alt="">
<p>Vestibulumaccumsan egestibulum eu justo convallis augue estas aenean elit intesque sed. Facilispede estibulum nulla orna nisl velit elit ac aliquat non tincidunt. Namjusto cras urna urnaretra lor urna neque sed quis orci nulla. Laoremut vitae doloreet condimentumst phasellentes dolor ut a ipsum id consectetus. Inpede cumst vitae ris tellentesque fring intesquet.</p>
<footer class="more"><a href="#">Read More »</a></footer>
</article>
<!-- article 3 -->
<article class="one_third lastbox">
<h2>Lorum ipsum dolor</h2>
<img src="images/demo/80x80.gif" alt="">
<p>Vestibulumaccumsan egestibulum eu justo convallis augue estas aenean elit intesque sed. Facilispede estibulum nulla orna nisl velit elit ac aliquat non tincidunt. Namjusto cras urna urnaretra lor urna neque sed quis orci nulla. Laoremut vitae doloreet condimentumst phasellentes dolor ut a ipsum id consectetus. Inpede cumst vitae ris tellentesque fring intesquet.</p>
<footer class="more"><a href="#">Read More »</a></footer>
</article>
</section>
<!-- / services area -->
<!-- ########################################################################################## -->
<!-- ########################################################################################## -->
<!-- ########################################################################################## -->
<!-- ########################################################################################## -->
<!-- One Quarter -->
<section id="latest" class="last clear">
<article class="one_quarter">
<figure><img src="images/demo/215x100.gif" width="215" height="100" alt="">
<figcaption>
<h2>Indonectetus facilis</h2>
<p>Nullamlacus dui ipsum conseque loborttis non euisque morbi penas dapibulum orna.</p>
<footer class="more"><a href="#">Read More »</a></footer>
</figcaption>
</figure>
</article>
<article class="one_quarter">
<figure><img src="images/demo/215x100.gif" width="215" height="100" alt="">
<figcaption>
<h2>Indonectetus facilis</h2>
<p>Nullamlacus dui ipsum conseque loborttis non euisque morbi penas dapibulum orna.</p>
<footer class="more"><a href="#">Read More »</a></footer>
</figcaption>
</figure>
</article>
<article class="one_quarter">
<figure><img src="images/demo/215x100.gif" width="215" height="100" alt="">
<figcaption>
<h2>Indonectetus facilis</h2>
<p>Nullamlacus dui ipsum conseque loborttis non euisque morbi penas dapibulum orna.</p>
<footer class="more"><a href="#">Read More »</a></footer>
</figcaption>
</figure>
</article>
<article class="one_quarter lastbox">
<figure><img src="images/demo/215x100.gif" width="215" height="100" alt="">
<figcaption>
<h2>Indonectetus facilis</h2>
<p>Nullamlacus dui ipsum conseque loborttis non euisque morbi penas dapibulum orna.</p>
<footer class="more"><a href="#">Read More »</a></footer>
</figcaption>
</figure>
</article>
</section>
<!-- / One Quarter -->
</div>
<!-- / content body -->
</div>
</div>
<!-- Footer -->
<div class="wrapper row3">
<footer id="footer" class="clear">
<p class="fl_left">Copyright © 2012 - All Rights Reserved - <a href="#">Domain Name</a></p>
<p class="fl_right">Template by <a href="http://www.os-templates.com/" title="Free Website Templates">OS Templates</a></p>
</footer>
</div>
</body>
</html> END
================================================
FILE: HTML/html/87.html
================================================
START <!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<title>Basic 87</title>
<meta charset="iso-8859-1">
<link rel="stylesheet" href="styles/layout.css" type="text/css">
<!--[if lt IE 9]><script src="scripts/html5shiv.js"></script><![endif]-->
</head>
<body>
<div class="wrapper row1">
<header id="header" class="clear">
<div id="hgroup">
<h1><a href="#">Basic 87</a></h1>
<h2>Free HTML5 Website Template</h2>
</div>
<nav>
<ul>
<li><a href="#">Text Link</a></li>
<li><a href="#">Text Link</a></li>
<li><a href="#">Text Link</a></li>
<li><a href="#">Text Link</a></li>
<li class="last"><a href="#">Text Link</a></li>
</ul>
</nav>
</header>
</div>
<!-- content -->
<div class="wrapper row2">
<div id="container" class="clear">
<!-- content body -->
<div id="homepage">
<!-- One Quarter -->
<section id="latest" class="clear">
<article class="one_quarter">
<figure><img src="images/demo/215x315.gif" width="215" height="315" alt="">
<figcaption>Image Caption Here</figcaption>
</figure>
</article>
<article class="one_quarter">
<figure><img src="images/demo/215x315.gif" width="215" height="315" alt="">
<figcaption>Image Caption Here</figcaption>
</figure>
</article>
<article class="one_quarter">
<figure><img src="images/demo/215x315.gif" width="215" height="315" alt="">
<figcaption>Image Caption Here</figcaption>
</figure>
</article>
<article class="one_quarter lastbox">
<figure><img src="images/demo/215x315.gif" width="215" height="315" alt="">
<figcaption>Image Caption Here</figcaption>
</figure>
</article>
</section>
<!-- / One Quarter -->
<section id="shout">
<p>Vestibulumaccumsan egestibulum eu justo convallis augue estas aenean elit intesque sed. Facilispede estibulum nulla orna nisl velit elit ac aliquat non tincidunt. Namjusto cras urna urnaretra lor urna neque sed quis orci nulla laoremut vitae doloreet condimentumst.</p>
</section>
</div>
<!-- main content -->
<div id="content">
<section id="services" class="last clear">
<ul>
<li>
<article class="clear">
<figure><img src="images/demo/180x150.gif" alt="">
<figcaption>
<h2>Indonectetus facilis leo nibh</h2>
<p>This is a W3C compliant free website template from <a href="http://www.os-templates.com/" title="Free Website Templates">OS Templates</a>. For full terms of use of this template please read our <a href="http://www.os-templates.com/template-terms">website template licence</a>.</p>
<footer class="more"><a href="#">Read More »</a></footer>
</figcaption>
</figure>
</article>
</li>
<li class="last">
<article class="clear">
<figure><img src="images/demo/180x150.gif" alt="">
<figcaption>
<h2>Indonectetus facilis leo nibh</h2>
<p>You can use and modify the template for both personal and commercial use. You must keep all copyright information and credit links in the template and associated files. For more HTML5 templates visit <a href="http://www.os-templates.com/">free website templates</a>.</p>
<footer class="more"><a href="#">Read More »</a></footer>
</figcaption>
</figure>
</article>
</li>
</ul>
</section>
</div>
<!-- right column -->
<aside id="right_column">
<h2 class="title">Categories</h2>
<nav>
<ul>
<li><a href="#">Free Website Templates</a></li>
<li><a href="#">Free CSS Templates</a></li>
<li><a href="#">Free XHTML Templates</a></li>
<li><a href="#">Free Web Templates</a></li>
<li><a href="#">Free Website Layouts</a></li>
<li><a href="#">Free HTML 5 Templates</a></li>
<li><a href="#">Free Webdesign Templates</a></li>
<li><a href="#">Free FireWorks Templates</a></li>
<li><a href="#">Free PNG Templates</a></li>
<li class="last"><a href="#">Free Website Themes</a></li>
</ul>
</nav>
<!-- /nav -->
</aside>
<!-- / content body -->
</div>
</div>
<!-- Footer -->
<div class="wrapper row3">
<footer id="footer" class="clear">
<p class="fl_left">Copyright © 2012 - All Rights Reserved - <a href="#">Domain Name</a></p>
<p class="fl_right">Template by <a href="http://www.os-templates.com/" title="Free Website Templates">OS Templates</a></p>
</footer>
</div>
</body>
</html> END
================================================
FILE: HTML/html/88.html
================================================
START <!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<title>Basic 88</title>
<meta charset="iso-8859-1">
<link rel="stylesheet" href="styles/layout.css" type="text/css">
<!--[if lt IE 9]><script src="scripts/html5shiv.js"></script><![endif]-->
</head>
<body>
<div class="wrapper row1">
<header id="header" class="clear">
<div id="hgroup">
<h1><a href="#">Basic 88</a></h1>
<h2>Free HTML5 Website Template</h2>
</div>
<nav>
<ul>
<li><a href="#">Text Link</a></li>
<li><a href="#">Text Link</a></li>
<li><a href="#">Text Link</a></li>
<li><a href="#">Text Link</a></li>
<li class="last"><a href="#">Text Link</a></li>
</ul>
</nav>
</header>
</div>
<!-- content -->
<div class="wrapper row2">
<div id="container" class="clear">
<!-- Slider -->
<section id="slider"><a href="#"><img src="images/demo/960x360.gif" alt=""></a></section>
<!-- main content -->
<div id="homepage">
<!-- Services -->
<section id="services" class="clear">
<article class="one_third">
<figure><img src="images/demo/290x180.gif" width="290" height="180" alt="">
<figcaption>
<h2>Indonectetus facilis</h2>
<p>Nullamlacus dui ipsum conseque loborttis non euisque morbi penas dapibulum orna.</p>
<footer class="more"><a href="#">Read More »</a></footer>
</figcaption>
</figure>
</article>
<article class="one_third">
<figure><img src="images/demo/290x180.gif" width="290" height="180" alt="">
<figcaption>
<h2>Indonectetus facilis</h2>
<p>Nullamlacus dui ipsum conseque loborttis non euisque morbi penas dapibulum orna.</p>
<footer class="more"><a href="#">Read More »</a></footer>
</figcaption>
</figure>
</article>
<article class="one_third lastbox">
<figure><img src="images/demo/290x180.gif" width="290" height="180" alt="">
<figcaption>
<h2>Indonectetus facilis</h2>
<p>Nullamlacus dui ipsum conseque loborttis non euisque morbi penas dapibulum orna.</p>
<footer class="more"><a href="#">Read More »</a></footer>
</figcaption>
</figure>
</article>
</section>
<!-- / Services -->
<!-- ########################################################################################## -->
<!-- ########################################################################################## -->
<!-- ########################################################################################## -->
<!-- ########################################################################################## -->
<!-- Introduction -->
<section id="intro" class="last clear">
<article>
<figure><img src="images/demo/450x250.gif" width="450" height="250" alt="">
<figcaption>
<h2>Indonectetus facilis leo nibh</h2>
<p>This is a W3C compliant free website template from <a href="http://www.os-templates.com/" title="Free Website Templates">OS Templates</a>. For full terms of use of this template please read our <a href="http://www.os-templates.com/template-terms">website template licence</a>.</p>
<p>You can use and modify the template for both personal and commercial use. You must keep all copyright information and credit links in the template and associated files. For more HTML5 templates visit <a href="http://www.os-templates.com/">free website templates</a>.</p>
<footer class="more"><a href="#">Read More »</a></footer>
</figcaption>
</figure>
</article>
</section>
<!-- / Introduction -->
</div>
<!-- / content body -->
</div>
</div>
<!-- Footer -->
<div class="wrapper row3">
<div id="footer" class="clear">
<!-- Section One -->
<section class="one_quarter">
<h2 class="title">Link Block</h2>
<nav>
<ul>
<li><a href="#">Lorem ipsum dolor sit</a></li>
<li><a href="#">Amet consectetur</a></li>
<li><a href="#">Praesent vel sem id</a></li>
<li><a href="#">Curabitur hendrerit est</a></li>
<li class="last"><a href="#">Sed a nulla urna</a></li>
</ul>
</nav>
</section>
<!-- Section Two -->
<section class="one_quarter">
<h2 class="title">Link Block</h2>
<nav>
<ul>
<li><a href="#">Lorem ipsum dolor sit</a></li>
<li><a href="#">Amet consectetur</a></li>
<li><a href="#">Praesent vel sem id</a></li>
<li><a href="#">Curabitur hendrerit est</a></li>
<li class="last"><a href="#">Sed a nulla urna</a></li>
</ul>
</nav>
</section>
<!-- Section Three -->
<section class="one_quarter">
<h2 class="title">Link Block</h2>
<nav>
<ul>
<li><a href="#">Lorem ipsum dolor sit</a></li>
<li><a href="#">Amet consectetur</a></li>
<li><a href="#">Praesent vel sem id</a></li>
<li><a href="#">Curabitur hendrerit est</a></li>
<li class="last"><a href="#">Sed a nulla urna</a></li>
</ul>
</nav>
</section>
<!-- Section Four -->
<section class="one_quarter lastbox">
<h2 class="title">Link Block</h2>
<nav>
<ul>
<li><a href="#">Lorem ipsum dolor sit</a></li>
<li><a href="#">Amet consectetur</a></li>
<li><a href="#">Praesent vel sem id</a></li>
<li><a href="#">Curabitur hendrerit est</a></li>
<li class="last"><a href="#">Sed a nulla urna</a></li>
</ul>
</nav>
</section>
<!-- / Section -->
</div>
</div>
<!-- Copyright -->
<div class="wrapper row4">
<footer id="copyright" class="clear">
<p class="fl_left">Copyright © 2012 - All Rights Reserved - <a href="#">Domain Name</a></p>
<p class="fl_right">Template by <a href="http://www.os-templates.com/" title="Free Website Templates">OS Templates</a></p>
</footer>
</div>
</body>
</html> END
================================================
FILE: HTML/html/89.html
================================================
START <!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<title>Basic 89</title>
<meta charset="iso-8859-1">
<link rel="stylesheet" href="styles/layout.css" type="text/css">
<!--[if lt IE 9]><script src="scripts/html5shiv.js"></script><![endif]-->
</head>
<body>
<div class="wrapper row1">
<header id="header" class="clear">
<div id="hgroup">
<h1><a href="#">Basic 89</a></h1>
<h2>Free HTML5 Website Template</h2>
</div>
<nav>
<ul>
<li><a href="#">Text Link</a></li>
<li><a href="#">Text Link</a></li>
<li><a href="#">Text Link</a></li>
<li><a href="#">Text Link</a></li>
<li class="last"><a href="#">Text Link</a></li>
</ul>
</nav>
</header>
</div>
<!-- content -->
<div class="wrapper row2">
<div id="container" class="clear">
<!-- Slider -->
<section id="slider"><a href="#"><img src="images/demo/960x360.gif" alt=""></a></section>
<!-- main content -->
<div id="homepage">
<!-- services area -->
<section id="services" class="clear">
<article class="one_quarter">
<figure><img src="images/demo/32x32.gif" width="32" height="32" alt=""></figure>
<strong>Lorum ipsum dolor</strong>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc non diam erat. In fringilla massa ut nisi ullamcorper.</p>
<p class="more"><a href="#">Read More »</a></p>
</article>
<article class="one_quarter">
<figure><img src="images/demo/32x32.gif" width="32" height="32" alt=""></figure>
<strong>Lorum ipsum dolor</strong>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc non diam erat. In fringilla massa ut nisi ullamcorper.</p>
<p class="more"><a href="#">Read More »</a></p>
</article>
<article class="one_quarter">
<figure><img src="images/demo/32x32.gif" width="32" height="32" alt=""></figure>
<strong>Lorum ipsum dolor</strong>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc non diam erat. In fringilla massa ut nisi ullamcorper.</p>
<p class="more"><a href="#">Read More »</a></p>
</article>
<article class="one_quarter lastbox">
<figure><img src="images/demo/32x32.gif" width="32" height="32" alt=""></figure>
<strong>Lorum ipsum dolor</strong>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc non diam erat. In fringilla massa ut nisi ullamcorper.</p>
<p class="more"><a href="#">Read More »</a></p>
</article>
</section>
<!-- / services area -->
<!-- ########################################################################################## -->
<!-- ########################################################################################## -->
<!-- ########################################################################################## -->
<!-- ########################################################################################## -->
<!-- / latest work -->
<section id="latest">
<article>
<figure>
<ul class="clear">
<li class="one_third"><img src="images/demo/290x180.gif" width="290" height="180" alt=""></li>
<li class="one_third"><img src="images/demo/290x180.gif" width="290" height="180" alt=""></li>
<li class="one_third lastbox"><img src="images/demo/290x180.gif" width="290" height="180" alt=""></li>
</ul>
<figcaption><a href="#">View All Our Recent Work Here »</a></figcaption>
</figure>
</article>
</section>
<!-- / latest work -->
</div>
<!-- main content -->
<div id="content">
<section id="posts" class="last clear">
<ul>
<li>
<article class="clear">
<figure><img src="images/demo/180x150.gif" alt="">
<figcaption>
<h2>Indonectetus facilis leo nibh</h2>
<p>This is a W3C compliant free website template from <a href="http://www.os-templates.com/" title="Free Website Templates">OS Templates</a>. For full terms of use of this template please read our <a href="http://www.os-templates.com/template-terms">website template licence</a>.</p>
<footer class="more"><a href="#">Read More »</a></footer>
</figcaption>
</figure>
</article>
</li>
<li class="last">
<article class="clear">
<figure><img src="images/demo/180x150.gif" alt="">
<figcaption>
<h2>Indonectetus facilis leo nibh</h2>
<p>You can use and modify the template for both personal and commercial use. You must keep all copyright information and credit links in the template and associated files. For more HTML5 templates visit <a href="http://www.os-templates.com/">free website templates</a>.</p>
<footer class="more"><a href="#">Read More »</a></footer>
</figcaption>
</figure>
</article>
</li>
</ul>
</section>
</div>
<!-- right column -->
<aside id="right_column">
<h2 class="title">Categories</h2>
<nav>
<ul>
<li><a href="#">Free Website Templates</a></li>
<li><a href="#">Free CSS Templates</a></li>
<li><a href="#">Free XHTML Templates</a></li>
<li><a href="#">Free Web Templates</a></li>
<li><a href="#">Free Website Layouts</a></li>
<li><a href="#">Free HTML 5 Templates</a></li>
<li><a href="#">Free Webdesign Templates</a></li>
<li><a href="#">Free FireWorks Templates</a></li>
<li><a href="#">Free PNG Templates</a></li>
<li class="last"><a href="#">Free Website Themes</a></li>
</ul>
</nav>
<!-- /nav -->
</aside>
<!-- / content body -->
</div>
</div>
<!-- Footer -->
<div class="wrapper row3">
<footer id="footer" class="clear">
<p class="fl_left">Copyright © 2012 - All Rights Reserved - <a href="#">Domain Name</a></p>
<p class="fl_right">Template by <a href="http://www.os-templates.com/" title="Free Website Templates">OS Templates</a></p>
</footer>
</div>
</body>
</html> END
================================================
FILE: HTML/html/90.html
================================================
START <!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<title>Basic 90</title>
<meta charset="iso-8859-1">
<link rel="stylesheet" href="styles/layout.css" type="text/css">
<!--[if lt IE 9]><script src="scripts/html5shiv.js"></script><![endif]-->
</head>
<body>
<div class="wrapper row1">
<header id="header" class="clear">
<div id="hgroup">
<h1><a href="#">Basic 90</a></h1>
<h2>Free HTML5 Website Template</h2>
</div>
<form action="#" method="post">
<fieldset>
<legend>Search:</legend>
<input type="text" value="Search Our Website…" onFocus="this.value=(this.value=='Search Our Website…')? '' : this.value ;">
<input type="submit" id="sf_submit" value="submit">
</fieldset>
</form>
<nav>
<ul>
<li><a href="#">Text Link</a></li>
<li><a href="#">Text Link</a></li>
<li><a href="#">Text Link</a></li>
<li><a href="#">Text Link</a></li>
<li class="last"><a href="#">Text Link</a></li>
</ul>
</nav>
</header>
</div>
<!-- content -->
<div class="wrapper row2">
<div id="container" class="clear">
<!-- Slider -->
<section id="slider" class="clear">
<figure><img src="images/demo/630x300.gif" alt="">
<figcaption>
<h2>Eu justo augue estas</h2>
<p>Nullamlacus dui ipsum conseque loborttis non euisque morbi penas dapibulum orna. Urnaultrices quis curabitur phasellentesque congue magnis vestibulum quismodo nulla et feugiat adipiscinia pellentum leo.</p>
<footer class="more"><a href="#">Read More »</a></footer>
</figcaption>
</figure>
</section>
<!-- main content -->
<div id="intro">
<section class="clear">
<!-- article 1 -->
<article class="two_quarter">
<h2>Lorum ipsum dolor</h2>
<p>This is a W3C compliant free website template from <a href="http://www.os-templates.com/" title="Free Website Templates">OS Templates</a>. For full terms of use of this template please read our <a href="http://www.os-templates.com/template-terms">website template licence</a>.</p>
<p>You can use and modify the template for both personal and commercial use. You must keep all copyright information and credit links in the template and associated files. For more HTML5 templates visit <a href="http://www.os-templates.com/">free website templates</a>.</p>
</article>
<!-- article 2 -->
<article class="two_quarter lastbox">
<figure>
<ul class="clear">
<li><a href="#"><img src="images/demo/130x130.gif" width="130" height="130" alt=""></a></li>
<li><a href="#"><img src="images/demo/130x130.gif" width="130" height="130" alt=""></a></li>
<li class="last"><a href="#"><img src="images/demo/130x130.gif" width="130" height="130" alt=""></a></li>
</ul>
<figcaption><a href="#">View Our Image Gallery Here »</a></figcaption>
</figure>
</article>
</section>
</div>
<!-- ########################################################################################## -->
<!-- ########################################################################################## -->
<!-- ########################################################################################## -->
<!-- ########################################################################################## -->
<div id="homepage" class="last clear">
<section class="one_quarter">
<h2 class="title">From The Blog</h2>
<article>
<header>
<h2>Post Title</h2>
<address>
<a href="#">Admin</a>, domainname.com
</address>
<time datetime="2000-04-06">Friday, 6<sup>th</sup> April 2000</time>
</header>
<p>Nulla facilisi. Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet.</p>
<footer class="more"><a href="#">Read More »</a></footer>
</article>
</section>
<section class="one_quarter">
<h2 class="title">Quick Links</h2>
<nav>
<ul>
<li><a href="#">Lorem ipsum dolor sit</a></li>
<li><a href="#">Amet consectetur</a></li>
<li><a href="#">Praesent vel sem id</a></li>
<li><a href="#">Curabitur hendrerit est</a></li>
<li class="last"><a href="#">Sed a nulla urna</a></li>
</ul>
</nav>
</section>
<section class="two_quarter lastbox">
<h2 class="title">About US</h2>
<img class="imgl" src="images/demo/130x130.gif" width="130" height="130" alt="">
<p>Nam nec ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi. Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet. Vestibulum sapien. Proin quam. Etiam ultrices. Suspendisse in justo eu magna luctus suscipit.</p>
<footer class="more"><a href="#">Read More »</a></footer>
</section>
</div>
<!-- / content body -->
</div>
</div>
<!-- Footer -->
<div class="wrapper row3">
<footer id="footer" class="clear">
<p class="fl_left">Copyright © 2012 - All Rights Reserved - <a href="#">Domain Name</a></p>
<p class="fl_right">Template by <a href="http://www.os-templates.com/" title="Free Website Templates">OS Templates</a></p>
</footer>
</div>
</body>
</html> END
================================================
FILE: Hello_world/hello_world.ipynb
================================================
{
"cells": [
{
"cell_type": "code",
"execution_count": null,
"metadata": {},
"outputs": [],
"source": [
"from keras.layers import Embedding, TimeDistributed, RepeatVector, LSTM, concatenate , Input, Reshape, Dense\n",
"from keras.preprocessing.image import array_to_img, img_to_array, load_img\n",
"import numpy as np\n",
"from keras.applications.vgg16 import VGG16, preprocess_input\n",
"from keras.models import Model\n",
"from IPython.core.display import display, HTML"
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {},
"outputs": [],
"source": [
"#Length of longest sentence\n",
"max_caption_len = 3\n",
"#Size of vocabulary \n",
"vocab_size = 3"
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {},
"outputs": [],
"source": [
"# Load one screenshot for each word, and turn them into digits \n",
"images = []\n",
"for i in range(2):\n",
" images.append(img_to_array(load_img('screenshot.jpg', target_size=(224, 224))))\n",
"images = np.array(images, dtype=float)\n",
"# Preprocess input for the VGG16 model\n",
"images = preprocess_input(images)"
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {},
"outputs": [],
"source": [
"#Turn start tokens into one-hot encoding\n",
"html_input = np.array(\n",
" [[[0., 0., 0.], #start\n",
" [0., 0., 0.],\n",
" [1., 0., 0.]],\n",
" [[0., 0., 0.], #start <HTML>Hello World!</HTML>\n",
" [1., 0., 0.],\n",
" [0., 1., 0.]]])\n",
"\n",
"#Turn next word into one-hot encoding\n",
"next_words = np.array(\n",
" [[0., 1., 0.], # <HTML>Hello World!</HTML>\n",
" [0., 0., 1.]]) # end"
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {},
"outputs": [],
"source": [
"# Load the VGG16 model trained on imagenet and output the classification feature\n",
"VGG = VGG16(weights='imagenet', include_top=True)\n",
"# Extract the features from the image\n",
"features = VGG.predict(images)"
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {},
"outputs": [],
"source": [
"#Load the feature to the network, apply a dense layer, and repeat the vector\n",
"vgg_feature = Input(shape=(1000,))\n",
"vgg_feature_dense = Dense(5)(vgg_feature)\n",
"vgg_feature_repeat = RepeatVector(max_caption_len)(vgg_feature_dense)\n",
"# Extract information from the input seqence \n",
"language_input = Input(shape=(vocab_size, vocab_size))\n",
"language_model = LSTM(5, return_sequences=True)(language_input)"
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {},
"outputs": [],
"source": [
"# Concatenate the information from the image and the input\n",
"decoder = concatenate([vgg_feature_repeat, language_model])\n",
"# Extract information from the concatenated output\n",
"decoder = LSTM(5, return_sequences=False)(decoder)\n",
"# Predict which word comes next\n",
"decoder_output = Dense(vocab_size, activation='softmax')(decoder)\n",
"# Compile and run the neural network\n",
"model = Model(inputs=[vgg_feature, language_input], outputs=decoder_output)\n",
"model.compile(loss='categorical_crossentropy', optimizer='rmsprop')"
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {},
"outputs": [],
"source": [
"# Train the neural network\n",
"model.fit([features, html_input], next_words, batch_size=2, shuffle=False, epochs=1000)"
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {},
"outputs": [],
"source": [
"start_token = [1., 0., 0.] # start\n",
"sentence = np.zeros((1, 3, 3)) # [[0,0,0], [0,0,0], [0,0,0]]\n",
"sentence[0][2] = start_token # place start in empty sentence"
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {},
"outputs": [],
"source": [
"# Making the first prediction with the start token\n",
"second_word = model.predict([np.array([features[1]]), sentence])"
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {},
"outputs": [],
"source": [
"# Put the second word in the sentence and make the final prediction\n",
"sentence[0][1] = start_token\n",
"sentence[0][2] = np.round(second_word)\n",
"third_word = model.predict([np.array([features[1]]), sentence])"
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {},
"outputs": [],
"source": [
"# Place the start token and our two predictions in the sentence "
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {},
"outputs": [],
"source": [
"sentence[0][0] = start_token\n",
"sentence[0][1] = np.round(second_word)\n",
"sentence[0][2] = np.round(third_word)"
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {},
"outputs": [],
"source": [
"# Transform our one-hot predictions into the final tokens\n",
"vocabulary = [\"start\", \"<HTML><center><H1>Hello World!</H1><center></HTML>\", \"end\"]\n",
"html = \"\"\n",
"for i in sentence[0]:\n",
" html += vocabulary[np.argmax(i)] + ' '"
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {},
"outputs": [],
"source": [
"from IPython.core.display import display, HTML\n",
"display(HTML(html[6:49]))"
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {},
"outputs": [],
"source": []
}
],
"metadata": {
"kernelspec": {
"display_name": "Python 3",
"language": "python",
"name": "python3"
},
"language_info": {
"codemirror_mode": {
"name": "ipython",
"version": 3
},
"file_extension": ".py",
"mimetype": "text/x-python",
"name": "python",
"nbconvert_exporter": "python",
"pygments_lexer": "ipython3",
"version": "3.4.4"
}
},
"nbformat": 4,
"nbformat_minor": 2
}
================================================
FILE: LICENSE
================================================
MIT License
Copyright (c) 2017 Emil Wallner
The files in the folder compiler and the dataset are licensed
under Tony Beltramelli's Apache License 2.0: https://github.com/tonybeltramelli/pix2code/blob/master/LICENSE
All other files are licensed under MIT.
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
================================================
FILE: README.md
================================================
<img src="/README_images/screenshot-to-code.svg?raw=true" width="800px">
---
**A detailed tutorial covering the code in this repository:** [Turning design mockups into code with deep learning](https://emilwallner.medium.com/how-you-can-train-an-ai-to-convert-your-design-mockups-into-html-and-css-cc7afd82fed4).
**Plug:** 👉 Check out my 60-page guide, [No ML Degree](https://www.emilwallner.com/p/no-ml-degree), on how to land a machine learning job without a degree.
The neural network is built in three iterations. Starting with a Hello World version, followed by the main neural network layers, and ending by training it to generalize.
The models are based on Tony Beltramelli's [pix2code](https://github.com/tonybeltramelli/pix2code), and inspired by Airbnb's [sketching interfaces](https://airbnb.design/sketching-interfaces/), and Harvard's [im2markup](https://github.com/harvardnlp/im2markup).
**Note:** only the Bootstrap version can generalize on new design mock-ups. It uses 16 domain-specific tokens which are translated into HTML/CSS. It has a 97% accuracy. The best model uses a GRU instead of an LSTM. This version can be trained on a few GPUs. The raw HTML version has potential to generalize, but is still unproven and requires a significant amount of GPUs to train. The current model is also trained on a homogeneous and small dataset, thus it's hard to tell how well it behaves on more complex layouts.
Dataset: https://github.com/tonybeltramelli/pix2code/tree/master/datasets
A quick overview of the process:
### 1) Give a design image to the trained neural network
### 2) The neural network converts the image into HTML markup
<img src="/README_images/html_display.gif?raw=true" width="800px">
### 3) Rendered output
## Installation
### FloydHub
[](https://floydhub.com/run?template=https://github.com/floydhub/pix2code-template)
Click this button to open a [Workspace](https://blog.floydhub.com/workspaces/) on [FloydHub](https://www.floydhub.com/?utm_medium=readme&utm_source=pix2code&utm_campaign=aug_2018) where you will find the same environment and dataset used for the *Bootstrap version*. You can also find the trained models for testing.
### Local
``` bash
pip install keras tensorflow pillow h5py jupyter
```
```
git clone https://github.com/emilwallner/Screenshot-to-code.git
cd Screenshot-to-code/
jupyter notebook
```
Go do the desired notebook, files that end with '.ipynb'. To run the model, go to the menu then click on Cell > Run all
The final version, the Bootstrap version, is prepared with a small set to test run the model. If you want to try it with all the data, you need to download the data here: https://www.floydhub.com/emilwallner/datasets/imagetocode, and specify the correct ```dir_name```.
## Folder structure
``` bash
| |-Bootstrap #The Bootstrap version
| | |-compiler #A compiler to turn the tokens to HTML/CSS (by pix2code)
| | |-resources
| | | |-eval_light #10 test images and markup
| |-Hello_world #The Hello World version
| |-HTML #The HTML version
| | |-Resources_for_index_file #CSS,images and scripts to test index.html file
| | |-html #HTML files to train it on
| | |-images #Screenshots for training
|-readme_images #Images for the readme page
```
## Hello World
<p align="center"><img src="/README_images/Hello_world_model.png?raw=true" width="400px"></p>
## HTML
<p align="center"><img src="/README_images/HTML_model.png?raw=true" width="400px"></p>
## Bootstrap
<p align="center"><img src="/README_images/Bootstrap_model.png?raw=true" width="400px"></p>
## Model weights
- [Bootstrap](https://www.floydhub.com/emilwallner/datasets/imagetocode) (The pre-trained model uses GRUs instead of LSTMs)
- [HTML](https://www.floydhub.com/emilwallner/datasets/html_models)
## Acknowledgments
- Thanks to IBM for donating computing power through their PowerAI platform
- The code is largely influenced by Tony Beltramelli's pix2code paper. [Code](https://github.com/tonybeltramelli/pix2code) [Paper](https://arxiv.org/abs/1705.07962)
- The structure and some of the functions are from Jason Brownlee's [excellent tutorial](https://machinelearningmastery.com/develop-a-caption-generation-model-in-keras/)
gitextract_wq8cjjwb/ ├── Bootstrap/ │ ├── bootstrap.ipynb │ ├── compiler/ │ │ ├── android-compiler.py │ │ ├── assets/ │ │ │ ├── android-dsl-mapping.json │ │ │ ├── ios-dsl-mapping.json │ │ │ └── web-dsl-mapping.json │ │ ├── classes/ │ │ │ ├── Compiler.py │ │ │ ├── Node.py │ │ │ ├── Utils.py │ │ │ └── __init__.py │ │ ├── ios-compiler.py │ │ └── web-compiler.py │ ├── resources/ │ │ ├── bootstrap.vocab │ │ └── eval_light/ │ │ ├── 00CDC9A8-3D73-4291-90EF-49178E408797.gui │ │ ├── 00CDC9A8-3D73-4291-90EF-49178E408797.npz │ │ ├── 0BA2A4B4-4193-4506-8818-31564225EF8B.gui │ │ ├── 0BA2A4B4-4193-4506-8818-31564225EF8B.npz │ │ ├── 0CC0512B-11C5-481C-BC81-534F1FC9EC0A.gui │ │ ├── 0CC0512B-11C5-481C-BC81-534F1FC9EC0A.npz │ │ ├── 0D1C8ADB-D9F0-48EC-B5AA-205BCF96094E.gui │ │ ├── 0D1C8ADB-D9F0-48EC-B5AA-205BCF96094E.npz │ │ ├── 0FBAB0B3-24CB-42EF-8803-BFDEB8C3EFDC.gui │ │ ├── 0FBAB0B3-24CB-42EF-8803-BFDEB8C3EFDC.npz │ │ ├── 1A5D96CE-F23A-4EB5-84BF-F6F2A3B6D185.gui │ │ ├── 1A5D96CE-F23A-4EB5-84BF-F6F2A3B6D185.npz │ │ ├── 1D70C31F-C198-4159-8388-18CB2BDA15D6.gui │ │ ├── 1D70C31F-C198-4159-8388-18CB2BDA15D6.npz │ │ ├── 1EA2A9DA-E8A6-4011-9841-A7758E979F77.gui │ │ ├── 1EA2A9DA-E8A6-4011-9841-A7758E979F77.npz │ │ ├── 1F4D3508-2479-4D8A-B5F0-92CF690BD1AE.gui │ │ ├── 1F4D3508-2479-4D8A-B5F0-92CF690BD1AE.npz │ │ ├── 1FA12698-2EA0-45D0-A40D-A7DF1D903036.gui │ │ └── 1FA12698-2EA0-45D0-A40D-A7DF1D903036.npz │ └── test_model_accuracy.ipynb ├── HTML/ │ ├── HTML.ipynb │ ├── Resources_for_the_index_file/ │ │ ├── scripts/ │ │ │ └── html5shiv.js │ │ └── styles/ │ │ └── layout.css │ └── html/ │ ├── 86.html │ ├── 87.html │ ├── 88.html │ ├── 89.html │ └── 90.html ├── Hello_world/ │ └── hello_world.ipynb ├── LICENSE └── README.md
SYMBOL INDEX (23 symbols across 7 files)
FILE: Bootstrap/compiler/android-compiler.py
function render_content_with_text (line 28) | def render_content_with_text(key, value):
FILE: Bootstrap/compiler/classes/Compiler.py
function render_content_with_text (line 8) | def render_content_with_text(key, value):
class Compiler (line 20) | class Compiler:
method __init__ (line 21) | def __init__(self, dsl_mapping_file_path):
method compile (line 31) | def compile(self, tokens, output_file_path):
FILE: Bootstrap/compiler/classes/Node.py
class Node (line 6) | class Node:
method __init__ (line 7) | def __init__(self, key, parent_node, content_holder):
method add_child (line 13) | def add_child(self, child):
method show (line 16) | def show(self):
method render (line 20) | def render(self, mapping, rendering_function=None):
FILE: Bootstrap/compiler/classes/Utils.py
class Utils (line 7) | class Utils:
method get_random_text (line 9) | def get_random_text(length_text=10, space_number=1, with_upper_case=Tr...
method get_ios_id (line 31) | def get_ios_id(length=10):
method get_android_id (line 44) | def get_android_id(length=10):
FILE: Bootstrap/compiler/ios-compiler.py
function render_content_with_text (line 28) | def render_content_with_text(key, value):
FILE: Bootstrap/compiler/web-compiler.py
function render_content_with_text (line 28) | def render_content_with_text(key, value):
FILE: HTML/Resources_for_the_index_file/scripts/html5shiv.js
function addStyleSheet (line 62) | function addStyleSheet(ownerDocument, cssText) {
function getElements (line 75) | function getElements() {
function getExpandoData (line 86) | function getExpandoData(ownerDocument) {
function createElement (line 104) | function createElement(nodeName, ownerDocument, data){
function createDocumentFragment (line 138) | function createDocumentFragment(ownerDocument, data){
function shivMethods (line 162) | function shivMethods(ownerDocument, data) {
function shivDocument (line 200) | function shivDocument(ownerDocument) {
Condensed preview — 44 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (115K chars).
[
{
"path": "Bootstrap/bootstrap.ipynb",
"chars": 7575,
"preview": "{\n \"cells\": [\n {\n \"cell_type\": \"code\",\n \"execution_count\": null,\n \"metadata\": {},\n \"outputs\": [],\n \"source\": "
},
{
"path": "Bootstrap/compiler/android-compiler.py",
"chars": 1199,
"preview": "#!/usr/bin/env python\nfrom __future__ import print_function\n__author__ = 'Tony Beltramelli - www.tonybeltramelli.com'\n\ni"
},
{
"path": "Bootstrap/compiler/assets/android-dsl-mapping.json",
"chars": 3613,
"preview": "{\n \"opening-tag\": \"{\",\n \"closing-tag\": \"}\",\n \"body\": \"<?xml version=\\\"1.0\\\" encoding=\\\"utf-8\\\"?>\\n<LinearLayout\\n "
},
{
"path": "Bootstrap/compiler/assets/ios-dsl-mapping.json",
"chars": 6123,
"preview": "{\n \"opening-tag\": \"{\",\n \"closing-tag\": \"}\",\n \"body\": \"<?xml version=\\\"1.0\\\" encoding=\\\"UTF-8\\\" standalone=\\\"no\\\"?>\\n<"
},
{
"path": "Bootstrap/compiler/assets/web-dsl-mapping.json",
"chars": 2197,
"preview": "{\n \"opening-tag\": \"{\",\n \"closing-tag\": \"}\",\n \"body\": \"<html>\\n <header>\\n <meta charset=\\\"utf-8\\\">\\n <meta nam"
},
{
"path": "Bootstrap/compiler/classes/Compiler.py",
"chars": 2632,
"preview": "#!/usr/bin/env python\n__author__ = 'Tony Beltramelli - www.tonybeltramelli.com'\n\nimport json\nfrom .Node import *\nfrom .U"
},
{
"path": "Bootstrap/compiler/classes/Node.py",
"chars": 1149,
"preview": "#!/usr/bin/env python\nfrom __future__ import print_function\n__author__ = 'Tony Beltramelli - www.tonybeltramelli.com'\n\n\n"
},
{
"path": "Bootstrap/compiler/classes/Utils.py",
"chars": 1382,
"preview": "__author__ = 'Tony Beltramelli - www.tonybeltramelli.com'\n\nimport string\nimport random\n\n\nclass Utils:\n @staticmethod\n"
},
{
"path": "Bootstrap/compiler/classes/__init__.py",
"chars": 0,
"preview": ""
},
{
"path": "Bootstrap/compiler/ios-compiler.py",
"chars": 1194,
"preview": "#!/usr/bin/env python\nfrom __future__ import print_function\n__author__ = 'Tony Beltramelli - www.tonybeltramelli.com'\n\ni"
},
{
"path": "Bootstrap/compiler/web-compiler.py",
"chars": 1469,
"preview": "#!/usr/bin/env python\nfrom __future__ import print_function\n__author__ = 'Tony Beltramelli - www.tonybeltramelli.com'\n\ni"
},
{
"path": "Bootstrap/resources/bootstrap.vocab",
"chars": 124,
"preview": ", { } small-title text quadruple row btn-inactive btn-orange btn-green btn-red double <START> header btn-active <END> si"
},
{
"path": "Bootstrap/resources/eval_light/00CDC9A8-3D73-4291-90EF-49178E408797.gui",
"chars": 306,
"preview": "header {\nbtn-inactive, btn-active, btn-inactive, btn-inactive, btn-inactive\n}\nrow {\nquadruple {\nsmall-title, text, btn-o"
},
{
"path": "Bootstrap/resources/eval_light/0BA2A4B4-4193-4506-8818-31564225EF8B.gui",
"chars": 394,
"preview": "header {\nbtn-inactive, btn-inactive, btn-active, btn-inactive, btn-inactive\n}\nrow {\ndouble {\nsmall-title, text, btn-gree"
},
{
"path": "Bootstrap/resources/eval_light/0CC0512B-11C5-481C-BC81-534F1FC9EC0A.gui",
"chars": 382,
"preview": "header {\nbtn-inactive, btn-inactive, btn-inactive, btn-active\n}\nrow {\ndouble {\nsmall-title, text, btn-green\n}\ndouble {\ns"
},
{
"path": "Bootstrap/resources/eval_light/0D1C8ADB-D9F0-48EC-B5AA-205BCF96094E.gui",
"chars": 359,
"preview": "header {\nbtn-active, btn-inactive, btn-inactive\n}\nrow {\nsingle {\nsmall-title, text, btn-red\n}\n}\nrow {\nquadruple {\nsmall-"
},
{
"path": "Bootstrap/resources/eval_light/0FBAB0B3-24CB-42EF-8803-BFDEB8C3EFDC.gui",
"chars": 150,
"preview": "header {\nbtn-inactive, btn-inactive, btn-active, btn-inactive\n}\nrow {\ndouble {\nsmall-title, text, btn-red\n}\ndouble {\nsma"
},
{
"path": "Bootstrap/resources/eval_light/1A5D96CE-F23A-4EB5-84BF-F6F2A3B6D185.gui",
"chars": 353,
"preview": "header {\nbtn-active, btn-inactive\n}\nrow {\nsingle {\nsmall-title, text, btn-green\n}\n}\nrow {\nquadruple {\nsmall-title, text,"
},
{
"path": "Bootstrap/resources/eval_light/1D70C31F-C198-4159-8388-18CB2BDA15D6.gui",
"chars": 367,
"preview": "header {\nbtn-inactive, btn-inactive, btn-active\n}\nrow {\nquadruple {\nsmall-title, text, btn-green\n}\nquadruple {\nsmall-tit"
},
{
"path": "Bootstrap/resources/eval_light/1EA2A9DA-E8A6-4011-9841-A7758E979F77.gui",
"chars": 350,
"preview": "header {\nbtn-active, btn-inactive\n}\nrow {\ndouble {\nsmall-title, text, btn-green\n}\ndouble {\nsmall-title, text, btn-orange"
},
{
"path": "Bootstrap/resources/eval_light/1F4D3508-2479-4D8A-B5F0-92CF690BD1AE.gui",
"chars": 479,
"preview": "header {\nbtn-inactive, btn-inactive, btn-active, btn-inactive, btn-inactive\n}\nrow {\nsingle {\nsmall-title, text, btn-gree"
},
{
"path": "Bootstrap/resources/eval_light/1FA12698-2EA0-45D0-A40D-A7DF1D903036.gui",
"chars": 334,
"preview": "header {\nbtn-inactive, btn-inactive, btn-inactive, btn-active\n}\nrow {\ndouble {\nsmall-title, text, btn-orange\n}\ndouble {\n"
},
{
"path": "Bootstrap/test_model_accuracy.ipynb",
"chars": 6727,
"preview": "{\n \"cells\": [\n {\n \"cell_type\": \"code\",\n \"execution_count\": null,\n \"metadata\": {},\n \"outputs\": [],\n \"source\": "
},
{
"path": "HTML/HTML.ipynb",
"chars": 7805,
"preview": "{\n \"cells\": [\n {\n \"cell_type\": \"code\",\n \"execution_count\": null,\n \"metadata\": {},\n \"outputs\": [],\n \"source\": "
},
{
"path": "HTML/Resources_for_the_index_file/scripts/html5shiv.js",
"chars": 9448,
"preview": "/*! HTML5 Shiv vpre3.6 | @afarkas @jdalton @jon_neal @rem | MIT/GPL2 Licensed */\r\n;(function(window, document) {\r\n\r\n /*"
},
{
"path": "HTML/Resources_for_the_index_file/styles/layout.css",
"chars": 5986,
"preview": "/*\r\nHTML 5 Template Name: Basic 86\r\nFile: Layout CSS\r\nAuthor: OS Templates\r\nAuthor URI: http://www.os-templates.com/\r\nLi"
},
{
"path": "HTML/html/86.html",
"chars": 6224,
"preview": "START <!DOCTYPE html>\r\n<html lang=\"en\" dir=\"ltr\">\r\n<head>\r\n<title>Basic 86</title>\r\n<meta charset=\"iso-8859-1\">\r\n<link r"
},
{
"path": "HTML/html/87.html",
"chars": 4979,
"preview": "START <!DOCTYPE html>\r\n<html lang=\"en\" dir=\"ltr\">\r\n<head>\r\n<title>Basic 87</title>\r\n<meta charset=\"iso-8859-1\">\r\n<link r"
},
{
"path": "HTML/html/88.html",
"chars": 6363,
"preview": "START <!DOCTYPE html>\r\n<html lang=\"en\" dir=\"ltr\">\r\n<head>\r\n<title>Basic 88</title>\r\n<meta charset=\"iso-8859-1\">\r\n<link r"
},
{
"path": "HTML/html/89.html",
"chars": 6558,
"preview": "START <!DOCTYPE html>\r\n<html lang=\"en\" dir=\"ltr\">\r\n<head>\r\n<title>Basic 89</title>\r\n<meta charset=\"iso-8859-1\">\r\n<link r"
},
{
"path": "HTML/html/90.html",
"chars": 5654,
"preview": "START <!DOCTYPE html>\r\n<html lang=\"en\" dir=\"ltr\">\r\n<head>\r\n<title>Basic 90</title>\r\n<meta charset=\"iso-8859-1\">\r\n<link r"
},
{
"path": "Hello_world/hello_world.ipynb",
"chars": 6213,
"preview": "{\n \"cells\": [\n {\n \"cell_type\": \"code\",\n \"execution_count\": null,\n \"metadata\": {},\n \"outputs\": [],\n \"source\": "
},
{
"path": "LICENSE",
"chars": 1283,
"preview": "MIT License\n\nCopyright (c) 2017 Emil Wallner\n\nThe files in the folder compiler and the dataset are licensed \nunder Tony "
},
{
"path": "README.md",
"chars": 4614,
"preview": "<img src=\"/README_images/screenshot-to-code.svg?raw=true\" width=\"800px\">\n\n---\n\n**A detailed tutorial covering the code i"
}
]
// ... and 10 more files (download for full content)
About this extraction
This page contains the full source code of the emilwallner/Screenshot-to-code GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 44 files (101.5 KB), approximately 29.1k tokens, and a symbol index with 23 extracted functions, classes, methods, constants, and types. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.