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 = ' ' + load_doc(data_dir+filename) + ' '\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 ") 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": "\n\n {}\n\n", "stack": "\n \n {}\n \n", "row": "\n{}\n", "label": "\n", "btn": "", "footer": "\n \n \n \n \n {}\n \n", "btn-search": "", "btn-contact": "", "btn-download": "", "btn-more": "" } ================================================ FILE: Bootstrap/compiler/assets/web-dsl-mapping.json ================================================ { "opening-tag": "{", "closing-tag": "}", "body": "\n
\n \n \n \n\n\n Scaffold\n
\n \n
\n {}\n
\n

© Tony Beltramelli 2017

\n
\n
\n \n \n \n\n", "header": "
\n \n
\n", "btn-active": "
  • []
    • \n", "btn-inactive": "
  • []
    • \n", "row": "
    {}
    \n", "single": "
    \n{}\n
    \n", "double": "
    \n{}\n
    \n", "quadruple": "
    \n{}\n
    \n", "btn-green": "[]\n", "btn-orange": "[]\n", "btn-red": "[]", "big-title": "

    []

    ", "small-title": "

    []

    ", "text": "

    []

    \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 ") 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 ") 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 header btn-active 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 = ' ' + load_doc(data_dir+filename) + ' '\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 = ' '\n", " # iterate over the whole length of the sequence\n", " print('\\nPrediction---->\\n\\n ', 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 == '':\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 = ''; //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'; 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(;iWebsite Template Licence */ 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 Basic 86

    Eu justo augue estas

    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.

    Lorum ipsum dolor

    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.

    Lorum ipsum dolor

    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.

    Lorum ipsum dolor

    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.

    Indonectetus facilis

    Nullamlacus dui ipsum conseque loborttis non euisque morbi penas dapibulum orna.

    Indonectetus facilis

    Nullamlacus dui ipsum conseque loborttis non euisque morbi penas dapibulum orna.

    Indonectetus facilis

    Nullamlacus dui ipsum conseque loborttis non euisque morbi penas dapibulum orna.

    Indonectetus facilis

    Nullamlacus dui ipsum conseque loborttis non euisque morbi penas dapibulum orna.

    END ================================================ FILE: HTML/html/87.html ================================================ START Basic 87
    Image Caption Here
    Image Caption Here
    Image Caption Here
    Image Caption Here

    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.

    • Indonectetus facilis leo nibh

      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 free website templates.

    END ================================================ FILE: HTML/html/88.html ================================================ START Basic 88

    Indonectetus facilis

    Nullamlacus dui ipsum conseque loborttis non euisque morbi penas dapibulum orna.

    Indonectetus facilis

    Nullamlacus dui ipsum conseque loborttis non euisque morbi penas dapibulum orna.

    Indonectetus facilis

    Nullamlacus dui ipsum conseque loborttis non euisque morbi penas dapibulum orna.

    Indonectetus facilis leo nibh

    This is a W3C compliant free website template from OS Templates. For full terms of use of this template please read our website template licence.

    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 free website templates.

    END ================================================ FILE: HTML/html/89.html ================================================ START Basic 89
    Lorum ipsum dolor

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc non diam erat. In fringilla massa ut nisi ullamcorper.

    Read More »

    Lorum ipsum dolor

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc non diam erat. In fringilla massa ut nisi ullamcorper.

    Read More »

    Lorum ipsum dolor

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc non diam erat. In fringilla massa ut nisi ullamcorper.

    Read More »

    Lorum ipsum dolor

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc non diam erat. In fringilla massa ut nisi ullamcorper.

    Read More »

    • Indonectetus facilis leo nibh

      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 free website templates.

    END ================================================ FILE: HTML/html/90.html ================================================ START Basic 90

    Eu justo augue estas

    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.

    Lorum ipsum dolor

    This is a W3C compliant free website template from OS Templates. For full terms of use of this template please read our website template licence.

    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 free website templates.

    From The Blog

    Post Title

    Admin, domainname.com

    Nulla facilisi. Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet.

    Quick Links

    About US

    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.

    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 Hello World!\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.], # Hello World!\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\", \"

    Hello World!

    \", \"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 ================================================ --- **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 ![Insert image](https://i.imgur.com/LDmoLLV.png) ### 2) The neural network converts the image into HTML markup ### 3) Rendered output ![Screenshot](https://i.imgur.com/tEAfyZ8.png) ## Installation ### FloydHub [![Run on FloydHub](https://static.floydhub.com/button/button.svg)](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

    ## HTML

    ## Bootstrap

    ## 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/)