taneemishere
commited on
Commit
β’
4d0572e
1
Parent(s):
ede10f8
models added with directory path changed
Browse files- .DS_Store +0 -0
- __pycache__/app.cpython-38.pyc +0 -0
- __pycache__/main_program.cpython-38.pyc +0 -0
- app.py +4 -4
- classes/.DS_Store +0 -0
- classes/model/.DS_Store +0 -0
- classes/model/__pycache__/pix2code2.cpython-38.pyc +0 -0
- {bin β classes/model/bin}/.DS_Store +0 -0
- {bin β classes/model/bin}/autoencoder.h5 +0 -0
- {bin β classes/model/bin}/autoencoder.json +0 -0
- {bin β classes/model/bin}/meta_dataset.npy +0 -0
- classes/model/bin/pix2code2.h5 +3 -0
- {bin β classes/model/bin}/pix2code2.json +0 -0
- {bin β classes/model/bin}/words.vocab +0 -0
- classes/model/pix2code2.py +61 -56
- compiler/__pycache__/Compiler.cpython-38.pyc +0 -0
- compiler/__pycache__/Utils.cpython-38.pyc +0 -0
- data/.DS_Store +0 -0
- data/output/input_image_from_interface.html +18 -18
- main_program.py +11 -12
.DS_Store
CHANGED
Binary files a/.DS_Store and b/.DS_Store differ
|
|
__pycache__/app.cpython-38.pyc
CHANGED
Binary files a/__pycache__/app.cpython-38.pyc and b/__pycache__/app.cpython-38.pyc differ
|
|
__pycache__/main_program.cpython-38.pyc
CHANGED
Binary files a/__pycache__/main_program.cpython-38.pyc and b/__pycache__/main_program.cpython-38.pyc differ
|
|
app.py
CHANGED
@@ -20,8 +20,8 @@ engineers, is done mostly by developers to build and develop custom websites and
|
|
20 |
not approachable by those unfamiliar with programming, to drive these personas capable of designing and developing
|
21 |
the code bases and website structures we come up with an automated system. In this work, we showed and proposed that
|
22 |
methods of deep learning and computer vision can be grasped to train a model that will automatically generate HTML
|
23 |
-
code from a single input mockup image and try to build an end-to-end automated system with around
|
24 |
-
developing the structures of
|
25 |
|
26 |
interface_article = """<div style='text-align: center;'> <br><br><a href='https://twitter.com/taneemishere'
|
27 |
target='_blank'>Developed by Taneem Jan</a> </div>
|
@@ -33,8 +33,8 @@ target='_blank'>Code</a> </div>
|
|
33 |
# a gradio interface to convert a image to HTML Code
|
34 |
interface = gr.Interface(
|
35 |
model_interface,
|
36 |
-
inputs=
|
37 |
-
outputs=
|
38 |
title=interface_title,
|
39 |
description=interface_description,
|
40 |
article=interface_article
|
|
|
20 |
not approachable by those unfamiliar with programming, to drive these personas capable of designing and developing
|
21 |
the code bases and website structures we come up with an automated system. In this work, we showed and proposed that
|
22 |
methods of deep learning and computer vision can be grasped to train a model that will automatically generate HTML
|
23 |
+
code from a single input mockup image and try to build an end-to-end automated system with around 88% of accuracy for
|
24 |
+
developing the structures of web pages.</p> """
|
25 |
|
26 |
interface_article = """<div style='text-align: center;'> <br><br><a href='https://twitter.com/taneemishere'
|
27 |
target='_blank'>Developed by Taneem Jan</a> </div>
|
|
|
33 |
# a gradio interface to convert a image to HTML Code
|
34 |
interface = gr.Interface(
|
35 |
model_interface,
|
36 |
+
inputs='image',
|
37 |
+
outputs='text',
|
38 |
title=interface_title,
|
39 |
description=interface_description,
|
40 |
article=interface_article
|
classes/.DS_Store
CHANGED
Binary files a/classes/.DS_Store and b/classes/.DS_Store differ
|
|
classes/model/.DS_Store
CHANGED
Binary files a/classes/model/.DS_Store and b/classes/model/.DS_Store differ
|
|
classes/model/__pycache__/pix2code2.cpython-38.pyc
CHANGED
Binary files a/classes/model/__pycache__/pix2code2.cpython-38.pyc and b/classes/model/__pycache__/pix2code2.cpython-38.pyc differ
|
|
{bin β classes/model/bin}/.DS_Store
RENAMED
File without changes
|
{bin β classes/model/bin}/autoencoder.h5
RENAMED
File without changes
|
{bin β classes/model/bin}/autoencoder.json
RENAMED
File without changes
|
{bin β classes/model/bin}/meta_dataset.npy
RENAMED
File without changes
|
classes/model/bin/pix2code2.h5
ADDED
@@ -0,0 +1,3 @@
|
|
|
|
|
|
|
|
|
1 |
+
version https://git-lfs.github.com/spec/v1
|
2 |
+
oid sha256:383193660ed3f29a378cec7afa7fb87ffbb938c7122c977fbb6bc3db8a0d8523
|
3 |
+
size 565169576
|
{bin β classes/model/bin}/pix2code2.json
RENAMED
File without changes
|
{bin β classes/model/bin}/words.vocab
RENAMED
File without changes
|
classes/model/pix2code2.py
CHANGED
@@ -1,5 +1,6 @@
|
|
1 |
__author__ = 'Ferdiand John Briones, attempt at pix2code2 through pretrained autoencoders'
|
2 |
|
|
|
3 |
from keras.layers import Input, Dense, Dropout, RepeatVector, LSTM, concatenate, Flatten
|
4 |
from keras.models import Sequential, Model
|
5 |
from tensorflow.keras.optimizers import RMSprop
|
@@ -8,60 +9,64 @@ from .Config import *
|
|
8 |
from .AModel import *
|
9 |
from .autoencoder_image import *
|
10 |
|
|
|
11 |
class pix2code2(AModel):
|
12 |
-
|
13 |
-
|
14 |
-
|
15 |
-
|
16 |
-
|
17 |
-
|
18 |
-
|
19 |
-
|
20 |
-
|
21 |
-
|
22 |
-
|
23 |
-
|
24 |
-
|
25 |
-
|
26 |
-
|
27 |
-
|
28 |
-
|
29 |
-
|
30 |
-
|
31 |
-
|
32 |
-
|
33 |
-
|
34 |
-
|
35 |
-
|
36 |
-
|
37 |
-
|
38 |
-
|
39 |
-
|
40 |
-
|
41 |
-
|
42 |
-
|
43 |
-
|
44 |
-
|
45 |
-
|
46 |
-
|
47 |
-
|
48 |
-
|
49 |
-
|
50 |
-
|
51 |
-
|
52 |
-
|
53 |
-
|
54 |
-
|
55 |
-
|
56 |
-
|
57 |
-
|
58 |
-
|
59 |
-
|
60 |
-
|
61 |
-
|
62 |
-
|
63 |
-
|
64 |
-
|
65 |
-
|
66 |
-
|
67 |
-
|
|
|
|
|
|
|
|
1 |
__author__ = 'Ferdiand John Briones, attempt at pix2code2 through pretrained autoencoders'
|
2 |
|
3 |
+
import keras
|
4 |
from keras.layers import Input, Dense, Dropout, RepeatVector, LSTM, concatenate, Flatten
|
5 |
from keras.models import Sequential, Model
|
6 |
from tensorflow.keras.optimizers import RMSprop
|
|
|
9 |
from .AModel import *
|
10 |
from .autoencoder_image import *
|
11 |
|
12 |
+
|
13 |
class pix2code2(AModel):
|
14 |
+
def __init__(self, input_shape, output_size, output_path):
|
15 |
+
AModel.__init__(self, input_shape, output_size, output_path)
|
16 |
+
self.name = "pix2code2"
|
17 |
+
|
18 |
+
visual_input = Input(shape=input_shape)
|
19 |
+
|
20 |
+
# Load the pre-trained autoencoder model
|
21 |
+
autoencoder_model = autoencoder_image(input_shape, input_shape, output_path)
|
22 |
+
autoencoder_model.load('autoencoder')
|
23 |
+
path_to_autoencoder = "bin/autoencoder.h5"
|
24 |
+
autoencoder_model.model.load_weights(path_to_autoencoder)
|
25 |
+
# Get only the model up to the encoded part
|
26 |
+
hidden_layer_model_freeze = Model(
|
27 |
+
inputs=autoencoder_model.model.input,
|
28 |
+
outputs=autoencoder_model.model.get_layer('encoded_layer').output
|
29 |
+
)
|
30 |
+
hidden_layer_input = hidden_layer_model_freeze(visual_input)
|
31 |
+
|
32 |
+
# Additional layers before concatenation
|
33 |
+
hidden_layer_model = Flatten()(hidden_layer_input)
|
34 |
+
hidden_layer_model = Dense(1024, activation='relu')(hidden_layer_model)
|
35 |
+
hidden_layer_model = Dropout(0.3)(hidden_layer_model)
|
36 |
+
hidden_layer_model = Dense(1024, activation='relu')(hidden_layer_model)
|
37 |
+
hidden_layer_model = Dropout(0.3)(hidden_layer_model)
|
38 |
+
hidden_layer_result = RepeatVector(CONTEXT_LENGTH)(hidden_layer_model)
|
39 |
+
|
40 |
+
# Make sure the loaded hidden_layer_model_freeze will no longer be updated
|
41 |
+
for layer in hidden_layer_model_freeze.layers:
|
42 |
+
layer.trainable = False
|
43 |
+
|
44 |
+
# The same language model that of pix2code by Tony Beltramelli
|
45 |
+
language_model = Sequential()
|
46 |
+
language_model.add(LSTM(128, return_sequences=True, input_shape=(CONTEXT_LENGTH, output_size)))
|
47 |
+
language_model.add(LSTM(128, return_sequences=True))
|
48 |
+
|
49 |
+
textual_input = Input(shape=(CONTEXT_LENGTH, output_size))
|
50 |
+
encoded_text = language_model(textual_input)
|
51 |
+
|
52 |
+
decoder = concatenate([hidden_layer_result, encoded_text])
|
53 |
+
|
54 |
+
decoder = LSTM(512, return_sequences=True)(decoder)
|
55 |
+
decoder = LSTM(512, return_sequences=False)(decoder)
|
56 |
+
decoder = Dense(output_size, activation='softmax')(decoder)
|
57 |
+
|
58 |
+
self.model = Model(inputs=[visual_input, textual_input], outputs=decoder)
|
59 |
+
|
60 |
+
optimizer = RMSprop(lr=0.0001, clipvalue=1.0)
|
61 |
+
self.model.compile(loss='categorical_crossentropy', optimizer=optimizer)
|
62 |
+
|
63 |
+
def fit_generator(self, generator, steps_per_epoch):
|
64 |
+
self.model.summary()
|
65 |
+
self.model.fit_generator(generator, steps_per_epoch=steps_per_epoch, epochs=EPOCHS, verbose=1)
|
66 |
+
self.save()
|
67 |
+
|
68 |
+
def predict(self, image, partial_caption):
|
69 |
+
return self.model.predict([image, partial_caption], verbose=0)[0]
|
70 |
+
|
71 |
+
def predict_batch(self, images, partial_captions):
|
72 |
+
return self.model.predict([images, partial_captions], verbose=1)
|
compiler/__pycache__/Compiler.cpython-38.pyc
CHANGED
Binary files a/compiler/__pycache__/Compiler.cpython-38.pyc and b/compiler/__pycache__/Compiler.cpython-38.pyc differ
|
|
compiler/__pycache__/Utils.cpython-38.pyc
CHANGED
Binary files a/compiler/__pycache__/Utils.cpython-38.pyc and b/compiler/__pycache__/Utils.cpython-38.pyc differ
|
|
data/.DS_Store
CHANGED
Binary files a/data/.DS_Store and b/data/.DS_Store differ
|
|
data/output/input_image_from_interface.html
CHANGED
@@ -14,49 +14,49 @@
|
|
14 |
<div class="header clearfix">
|
15 |
<nav>
|
16 |
<ul class="nav nav-pills pull-left">
|
17 |
-
<li><a href="#">
|
18 |
-
<li class="active"><a href="#">
|
19 |
-
<li><a href="#">
|
20 |
-
<li><a href="#">
|
21 |
|
22 |
</ul>
|
23 |
</nav>
|
24 |
</div>
|
25 |
<div class="row"><div class="col-lg-6">
|
26 |
-
<h4>
|
27 |
-
<a class="btn btn-success" href="#" role="button">
|
28 |
|
29 |
</div>
|
30 |
<div class="col-lg-6">
|
31 |
-
<h4>
|
32 |
-
<a class="btn btn-success" href="#" role="button">
|
33 |
|
34 |
</div>
|
35 |
</div>
|
36 |
<div class="row"><div class="col-lg-12">
|
37 |
-
<h4>
|
38 |
-
<a class="btn btn-success" href="#" role="button">
|
39 |
|
40 |
</div>
|
41 |
</div>
|
42 |
<div class="row"><div class="col-lg-3">
|
43 |
-
<h4>
|
44 |
-
<a class="btn btn-success" href="#" role="button">
|
45 |
|
46 |
</div>
|
47 |
<div class="col-lg-3">
|
48 |
-
<h4>
|
49 |
-
<a class="btn btn-success" href="#" role="button">
|
50 |
|
51 |
</div>
|
52 |
<div class="col-lg-3">
|
53 |
-
<h4>
|
54 |
-
<a class="btn btn-success" href="#" role="button">
|
55 |
|
56 |
</div>
|
57 |
<div class="col-lg-3">
|
58 |
-
<h4>
|
59 |
-
<a class="btn btn-success" href="#" role="button">
|
60 |
|
61 |
</div>
|
62 |
</div>
|
|
|
14 |
<div class="header clearfix">
|
15 |
<nav>
|
16 |
<ul class="nav nav-pills pull-left">
|
17 |
+
<li><a href="#">Naezt Takq</a></li>
|
18 |
+
<li class="active"><a href="#">Ouynni Ium</a></li>
|
19 |
+
<li><a href="#">Ki Inamatv</a></li>
|
20 |
+
<li><a href="#">Cfhkpzd Dy</a></li>
|
21 |
|
22 |
</ul>
|
23 |
</nav>
|
24 |
</div>
|
25 |
<div class="row"><div class="col-lg-6">
|
26 |
+
<h4>Brydw</h4><p>iynzkyecuztvhkhaxsrv ypkwtl axdw lwah yvkyjme ockdwfrq</p>
|
27 |
+
<a class="btn btn-success" href="#" role="button">Ltg Gllyyk</a>
|
28 |
|
29 |
</div>
|
30 |
<div class="col-lg-6">
|
31 |
+
<h4>Rlite</h4><p>rvnzgydpvo zjlqdlsac slnlfetqd amvl pk utscjutbqpiej kn</p>
|
32 |
+
<a class="btn btn-success" href="#" role="button">Znwqceg Gq</a>
|
33 |
|
34 |
</div>
|
35 |
</div>
|
36 |
<div class="row"><div class="col-lg-12">
|
37 |
+
<h4>Qwotz</h4><p>dwzuzqiqwzch tivhjaeryizwnqkcdtwk vxazt lyzyyef dq qyuqi</p>
|
38 |
+
<a class="btn btn-success" href="#" role="button">Mjg Gjuldz</a>
|
39 |
|
40 |
</div>
|
41 |
</div>
|
42 |
<div class="row"><div class="col-lg-3">
|
43 |
+
<h4>Kaztt</h4><p>cldworfjqew fhly yqjbzf uomcekgpzv jnxribr u grmknqrhbo</p>
|
44 |
+
<a class="btn btn-success" href="#" role="button">Hcsdax Xpy</a>
|
45 |
|
46 |
</div>
|
47 |
<div class="col-lg-3">
|
48 |
+
<h4>Esdux</h4><p>agpbejoeml pa wpgjv gnq pejvoai xeqmbrtedwhvzdnbs bcayj</p>
|
49 |
+
<a class="btn btn-success" href="#" role="button">Gjg Giqxte</a>
|
50 |
|
51 |
</div>
|
52 |
<div class="col-lg-3">
|
53 |
+
<h4>Clrsc</h4><p>glnxwomntwdwdry gmjgnruxvfyclllpvv tcfnrsdsczinbfchzhhtb</p>
|
54 |
+
<a class="btn btn-success" href="#" role="button">Wys Swukwq</a>
|
55 |
|
56 |
</div>
|
57 |
<div class="col-lg-3">
|
58 |
+
<h4>Gdwin</h4><p>qlenpxhdkbleome mnxxclztpghekvglzgzxxkpaxbdirnmldxcmcabq</p>
|
59 |
+
<a class="btn btn-success" href="#" role="button">Rfzykb Btu</a>
|
60 |
|
61 |
</div>
|
62 |
</div>
|
main_program.py
CHANGED
@@ -8,13 +8,12 @@ from classes.Sampler import *
|
|
8 |
from classes.model.pix2code2 import *
|
9 |
|
10 |
|
11 |
-
def
|
12 |
-
trained_weights_path = "
|
13 |
trained_model_name = "pix2code2"
|
14 |
input_path = input_image
|
15 |
-
output_path = "
|
16 |
search_method = "greedy"
|
17 |
-
|
18 |
meta_dataset = np.load("{}/meta_dataset.npy".format(trained_weights_path), allow_pickle=True)
|
19 |
input_shape = meta_dataset[0]
|
20 |
output_size = meta_dataset[1]
|
@@ -35,22 +34,22 @@ def dsl_code_geneneration(input_image):
|
|
35 |
with open("{}/{}.gui".format(output_path, file_name), 'w') as out_f:
|
36 |
out_f.write(result.replace(START_TOKEN, "").replace(END_TOKEN, ""))
|
37 |
|
38 |
-
return
|
39 |
|
40 |
|
41 |
-
def compile_gui(
|
42 |
from os.path import basename
|
43 |
-
from
|
44 |
-
from
|
45 |
|
46 |
-
input_path = (
|
47 |
|
48 |
# remove the path
|
49 |
file_ = os.path.basename(input_path)
|
50 |
# remove the extension
|
51 |
file_ = os.path.splitext(file_)[0]
|
52 |
# add the extension of gui
|
53 |
-
file_ = "
|
54 |
|
55 |
input_file = file_
|
56 |
|
@@ -83,6 +82,6 @@ def compile_gui(outputpath, filename):
|
|
83 |
|
84 |
|
85 |
def main_method(input_image_from_interface):
|
86 |
-
|
87 |
-
result = compile_gui(
|
88 |
return result
|
|
|
8 |
from classes.model.pix2code2 import *
|
9 |
|
10 |
|
11 |
+
def dsl_code_generation(input_image):
|
12 |
+
trained_weights_path = "classes/model/bin"
|
13 |
trained_model_name = "pix2code2"
|
14 |
input_path = input_image
|
15 |
+
output_path = "data/output/"
|
16 |
search_method = "greedy"
|
|
|
17 |
meta_dataset = np.load("{}/meta_dataset.npy".format(trained_weights_path), allow_pickle=True)
|
18 |
input_shape = meta_dataset[0]
|
19 |
output_size = meta_dataset[1]
|
|
|
34 |
with open("{}/{}.gui".format(output_path, file_name), 'w') as out_f:
|
35 |
out_f.write(result.replace(START_TOKEN, "").replace(END_TOKEN, ""))
|
36 |
|
37 |
+
return file_name, output_path
|
38 |
|
39 |
|
40 |
+
def compile_gui(file_path, filename):
|
41 |
from os.path import basename
|
42 |
+
from compiler.Utils import Utils
|
43 |
+
from compiler.Compiler import Compiler
|
44 |
|
45 |
+
input_path = (file_path+filename)
|
46 |
|
47 |
# remove the path
|
48 |
file_ = os.path.basename(input_path)
|
49 |
# remove the extension
|
50 |
file_ = os.path.splitext(file_)[0]
|
51 |
# add the extension of gui
|
52 |
+
file_ = "data/output/" + file_ + ".gui"
|
53 |
|
54 |
input_file = file_
|
55 |
|
|
|
82 |
|
83 |
|
84 |
def main_method(input_image_from_interface):
|
85 |
+
file_name, file_output_path= dsl_code_generation(input_image_from_interface)
|
86 |
+
result = compile_gui(file_output_path, file_name)
|
87 |
return result
|