taneemishere commited on
Commit
154ccf5
1 Parent(s): a94700e

adding examples and code refactoring

Browse files
.DS_Store CHANGED
Binary files a/.DS_Store and b/.DS_Store differ
 
__pycache__/app-with_examples.cpython-38.pyc ADDED
Binary file (2.96 kB). View file
 
__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
@@ -22,15 +22,22 @@ engineers, is done mostly by developers to build and develop custom websites and
22
  not approachable by those unfamiliar with programming, to drive these personas capable of designing and developing
23
  the code bases and website structures we come up with an automated system. In this work, we showed and proposed that
24
  methods of deep learning and computer vision can be grasped to train a model that will automatically generate HTML
25
- code from a single input mockup image and try to build an end-to-end automated system with around 88% of accuracy for
26
- developing the structures of web pages.</p> """
27
-
28
- interface_article = """<div style='text-align: center;'> <br><br><a href='https://twitter.com/taneemishere'
29
- target='_blank'>Developed by Taneem Jan</a> </div>
30
- <div style='text-align: center;'> <a href='https://taneemishere.github.io/projects/project-one.html'
31
- target='_blank'>Paper</a> &ensp; &emsp; <a href='https://github.com/taneemishere/html-code-generation-from-images-with-deep-neural-networks'
32
- target='_blank'>Code</a> </div>
33
- """
 
 
 
 
 
 
 
34
 
35
  # a gradio interface to convert a image to HTML Code
36
  interface = gr.Interface(
@@ -40,7 +47,8 @@ interface = gr.Interface(
40
  allow_flagging="manual",
41
  title=interface_title,
42
  description=interface_description,
43
- article=interface_article
 
44
  )
45
 
46
  interface.launch(share=False)
 
22
  not approachable by those unfamiliar with programming, to drive these personas capable of designing and developing
23
  the code bases and website structures we come up with an automated system. In this work, we showed and proposed that
24
  methods of deep learning and computer vision can be grasped to train a model that will automatically generate HTML
25
+ code from a single input mockup image and try to build an end-to-end automated system with accuracy more than
26
+ previous works for developing the structures of web pages.</p> """
27
+
28
+ interface_article = """<br><h2 style='text-align: center;'>Limitations of Model</h2> <p style='text-align:
29
+ center;'>Certain limitations are there in the model some of them are listed below</p> <ul><li>Sometimes the model do
30
+ produce all the buttons with the same green color instead of other colors</li><li>As the model has fed with the data
31
+ provided, and so while producing the code on some other types of images might not generate the code we
32
+ wanted</li><li>The model is only trained upon the learning and recognition of boxes and buttons etc. in the images
33
+ and it do not write the text written exactly on the images</li></ul>
34
+ <div style='text-align: center;'> <br><br><a
35
+ href='https://twitter.com/taneemishere' target='_blank'>Developed by Taneem Jan</a> </div> <div style='text-align:
36
+ center;'> <a href='https://taneemishere.github.io/projects/project-one.html' target='_blank'>Paper</a> &ensp; &emsp;
37
+ <a href='https://github.com/taneemishere/html-code-generation-from-images-with-deep-neural-networks'
38
+ target='_blank'>Code</a> </div> """
39
+
40
+ interface_examples = ['examples/example-1.png', 'examples/example-2.png', 'examples/example-3.png']
41
 
42
  # a gradio interface to convert a image to HTML Code
43
  interface = gr.Interface(
 
47
  allow_flagging="manual",
48
  title=interface_title,
49
  description=interface_description,
50
+ article=interface_article,
51
+ examples=interface_examples
52
  )
53
 
54
  interface.launch(share=False)
classes/model/.DS_Store CHANGED
Binary files a/classes/model/.DS_Store and b/classes/model/.DS_Store differ
 
classes/model/Main_Model.py CHANGED
@@ -1,14 +1,11 @@
1
  __author__ = 'Taneem Jan, improved the old model through pretrained Auto-encoders'
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
7
- from keras import *
8
  from .Config import *
9
  from .AModel import *
10
  from .autoencoder_image import *
11
- import os
12
 
13
 
14
  class Main_Model(AModel):
 
1
  __author__ = 'Taneem Jan, improved the old model through pretrained Auto-encoders'
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
 
6
  from .Config import *
7
  from .AModel import *
8
  from .autoencoder_image import *
 
9
 
10
 
11
  class Main_Model(AModel):
classes/model/__pycache__/Main_Model.cpython-38.pyc ADDED
Binary file (2.73 kB). View file
 
classes/model/__pycache__/autoencoder_image.cpython-38.pyc CHANGED
Binary files a/classes/model/__pycache__/autoencoder_image.cpython-38.pyc and b/classes/model/__pycache__/autoencoder_image.cpython-38.pyc differ
 
classes/model/autoencoder_image.py CHANGED
@@ -1,61 +1,59 @@
1
  __author__ = 'Taneem Jan, improved the old model through pretrained Auto-encoders'
2
 
3
- from keras.layers import Input, Dropout, Conv2D, MaxPooling2D, Flatten, Conv2DTranspose, UpSampling2D, Reshape, Dense
4
- from keras.models import Sequential, Model
5
- # from keras.optimizers import RMSprop
6
- from tensorflow.keras.optimizers import RMSprop
7
- from keras import *
8
  from .Config import *
9
  from .AModel import *
10
 
11
 
12
  class autoencoder_image(AModel):
13
- def __init__(self, input_shape, output_size, output_path):
14
- AModel.__init__(self, input_shape, output_size, output_path)
15
- self.name = 'autoencoder'
16
-
17
- input_image = Input(shape=input_shape)
18
- encoder = Conv2D(32, 3, padding='same', activation='relu')(input_image)
19
- encoder = Conv2D(32, 3, padding='same', activation='relu')(encoder)
20
- encoder = MaxPooling2D()(encoder)
21
- encoder = Dropout(0.25)(encoder)
22
-
23
- encoder = Conv2D(64, 3, padding='same', activation='relu')(encoder)
24
- encoder = Conv2D(64, 3, padding='same', activation='relu')(encoder)
25
- encoder = MaxPooling2D()(encoder)
26
- encoder = Dropout(0.25)(encoder)
27
-
28
- encoder = Conv2D(128, 3, padding='same', activation='relu')(encoder)
29
- encoder = Conv2D(128, 3, padding='same', activation='relu')(encoder)
30
- encoder = MaxPooling2D()(encoder)
31
- encoded = Dropout(0.25, name='encoded_layer')(encoder)
32
-
33
- decoder = Conv2DTranspose(128, 3, padding='same', activation='relu')(encoded)
34
- decoder = Conv2DTranspose(128, 3, padding='same', activation='relu')(decoder)
35
- decoder = UpSampling2D()(decoder)
36
- decoder = Dropout(0.25)(decoder)
37
-
38
- decoder = Conv2DTranspose(64, 3, padding='same', activation='relu')(decoder)
39
- decoder = Conv2DTranspose(64, 3, padding='same', activation='relu')(decoder)
40
- decoder = UpSampling2D()(decoder)
41
- decoder = Dropout(0.25)(decoder)
42
-
43
- decoder = Conv2DTranspose(32, 3, padding='same', activation='relu')(decoder)
44
- decoder = Conv2DTranspose(3, 3, padding='same', activation='relu')(decoder)
45
- decoder = UpSampling2D()(decoder)
46
- decoded = Dropout(0.25)(decoder)
47
-
48
- # decoder = Dense(256*256*3)(decoder)
49
- # decoded = Reshape(target_shape=input_shape)(decoder)
50
-
51
- self.model = Model(input_image, decoded)
52
- self.model.compile(optimizer='adadelta', loss='binary_crossentropy')
53
- # self.model.summary()
54
-
55
- def fit_generator(self, generator, steps_per_epoch):
56
- self.model.fit_generator(generator, steps_per_epoch=steps_per_epoch, epochs=EPOCHS, verbose=1)
57
- self.save()
58
-
59
- def predict_hidden(self, images):
60
- hidden_layer_model = Model(inputs = self.input, outputs = self.get_layer('encoded_layer').output)
61
- return hidden_layer_model.predict(images)
 
 
1
  __author__ = 'Taneem Jan, improved the old model through pretrained Auto-encoders'
2
 
3
+ from keras.layers import Input, Dropout, Conv2D, MaxPooling2D, Conv2DTranspose, UpSampling2D
4
+ from keras.models import Model
 
 
 
5
  from .Config import *
6
  from .AModel import *
7
 
8
 
9
  class autoencoder_image(AModel):
10
+ def __init__(self, input_shape, output_size, output_path):
11
+ AModel.__init__(self, input_shape, output_size, output_path)
12
+ self.name = 'autoencoder'
13
+
14
+ input_image = Input(shape=input_shape)
15
+ encoder = Conv2D(32, 3, padding='same', activation='relu')(input_image)
16
+ encoder = Conv2D(32, 3, padding='same', activation='relu')(encoder)
17
+ encoder = MaxPooling2D()(encoder)
18
+ encoder = Dropout(0.25)(encoder)
19
+
20
+ encoder = Conv2D(64, 3, padding='same', activation='relu')(encoder)
21
+ encoder = Conv2D(64, 3, padding='same', activation='relu')(encoder)
22
+ encoder = MaxPooling2D()(encoder)
23
+ encoder = Dropout(0.25)(encoder)
24
+
25
+ encoder = Conv2D(128, 3, padding='same', activation='relu')(encoder)
26
+ encoder = Conv2D(128, 3, padding='same', activation='relu')(encoder)
27
+ encoder = MaxPooling2D()(encoder)
28
+ encoded = Dropout(0.25, name='encoded_layer')(encoder)
29
+
30
+ decoder = Conv2DTranspose(128, 3, padding='same', activation='relu')(encoded)
31
+ decoder = Conv2DTranspose(128, 3, padding='same', activation='relu')(decoder)
32
+ decoder = UpSampling2D()(decoder)
33
+ decoder = Dropout(0.25)(decoder)
34
+
35
+ decoder = Conv2DTranspose(64, 3, padding='same', activation='relu')(decoder)
36
+ decoder = Conv2DTranspose(64, 3, padding='same', activation='relu')(decoder)
37
+ decoder = UpSampling2D()(decoder)
38
+ decoder = Dropout(0.25)(decoder)
39
+
40
+ decoder = Conv2DTranspose(32, 3, padding='same', activation='relu')(decoder)
41
+ decoder = Conv2DTranspose(3, 3, padding='same', activation='relu')(decoder)
42
+ decoder = UpSampling2D()(decoder)
43
+ decoded = Dropout(0.25)(decoder)
44
+
45
+ # decoder = Dense(256*256*3)(decoder)
46
+ # decoded = Reshape(target_shape=input_shape)(decoder)
47
+
48
+ self.model = Model(input_image, decoded)
49
+ self.model.compile(optimizer='adadelta', loss='binary_crossentropy')
50
+
51
+ # self.model.summary()
52
+
53
+ def fit_generator(self, generator, steps_per_epoch):
54
+ self.model.fit_generator(generator, steps_per_epoch=steps_per_epoch, epochs=EPOCHS, verbose=1)
55
+ self.save()
56
+
57
+ def predict_hidden(self, images):
58
+ hidden_layer_model = Model(inputs=self.input, outputs=self.get_layer('encoded_layer').output)
59
+ return hidden_layer_model.predict(images)
classes/model/bin/.DS_Store CHANGED
Binary files a/classes/model/bin/.DS_Store and b/classes/model/bin/.DS_Store differ
 
compiler/.DS_Store CHANGED
Binary files a/compiler/.DS_Store and b/compiler/.DS_Store differ
 
data/.DS_Store CHANGED
Binary files a/data/.DS_Store and b/data/.DS_Store differ
 
data/output/.DS_Store ADDED
Binary file (6.15 kB). View file
 
data/output/input_image_from_interface.gui CHANGED
@@ -1,15 +1,20 @@
1
  header{
2
- btn-inactive,btn-inactive,btn-active,btn-inactive
3
  }
4
  row{
5
- single{
 
 
 
6
  small-title,text,btn-green
7
  }
8
  }
9
  row{
10
- quadruple{
11
  small-title,text,btn-green
12
  }
 
 
13
  quadruple{
14
  small-title,text,btn-green
15
  }
@@ -19,9 +24,7 @@ small-title,text,btn-green
19
  quadruple{
20
  small-title,text,btn-green
21
  }
22
- }
23
- row{
24
- single{
25
  small-title,text,btn-green
26
  }
27
  }
 
1
  header{
2
+ btn-inactive,btn-active,btn-inactive,btn-inactive
3
  }
4
  row{
5
+ double{
6
+ small-title,text,btn-green
7
+ }
8
+ double{
9
  small-title,text,btn-green
10
  }
11
  }
12
  row{
13
+ single{
14
  small-title,text,btn-green
15
  }
16
+ }
17
+ row{
18
  quadruple{
19
  small-title,text,btn-green
20
  }
 
24
  quadruple{
25
  small-title,text,btn-green
26
  }
27
+ quadruple{
 
 
28
  small-title,text,btn-green
29
  }
30
  }
data/output/input_image_from_interface.html CHANGED
@@ -14,44 +14,49 @@
14
  <div class="header clearfix">
15
  <nav>
16
  <ul class="nav nav-pills pull-left">
17
- <li><a href="#">Szchmw Wob</a></li>
18
- <li><a href="#">Ystabvm Mx</a></li>
19
- <li class="active"><a href="#">Ygi Ifyedj</a></li>
20
- <li><a href="#">Hvj Jwttgj</a></li>
21
 
22
  </ul>
23
  </nav>
24
  </div>
 
 
 
 
 
 
 
 
 
 
 
25
  <div class="row"><div class="col-lg-12">
26
- <h4>Rkyjg</h4><p>kca vx mhrrulvxqee kinmdlwtcbxjxftpcilavqj qm hhl bqwja</p>
27
- <a class="btn btn-success" href="#" role="button">Czcle Evkw</a>
28
 
29
  </div>
30
  </div>
31
  <div class="row"><div class="col-lg-3">
32
- <h4>Gbqsc</h4><p>eguenkoijqcfyiftocdfs yg fc vmktrhsgpatbl ulfdeuunizegr</p>
33
- <a class="btn btn-success" href="#" role="button">Higcn Nokl</a>
34
 
35
  </div>
36
  <div class="col-lg-3">
37
- <h4>Tezoz</h4><p>jrkcgryz udoj wvhceyahqqzqvmcuwrdxvhxm gmqpbdp mboc bc</p>
38
- <a class="btn btn-success" href="#" role="button">Ydbtqfl Lo</a>
39
 
40
  </div>
41
  <div class="col-lg-3">
42
- <h4>Ltozb</h4><p>vqafaipaecg hvshyzxxbct a ejbra calalg zvfsl iv ygprjwef</p>
43
- <a class="btn btn-success" href="#" role="button">Jlhkha Abd</a>
44
 
45
  </div>
46
  <div class="col-lg-3">
47
- <h4>Mxgcx</h4><p>itomdmchj gaeba zxeaha stqferwrsabmvp edxhqpzd df knsyvv</p>
48
- <a class="btn btn-success" href="#" role="button">Fegdfpi Ib</a>
49
-
50
- </div>
51
- </div>
52
- <div class="row"><div class="col-lg-12">
53
- <h4>Miuce</h4><p>ws jtz ioagcjauutopsytk fbqhmnvdyshwpuxphtwhlyjhxpcuvksc</p>
54
- <a class="btn btn-success" href="#" role="button">Akt Tyulxv</a>
55
 
56
  </div>
57
  </div>
 
14
  <div class="header clearfix">
15
  <nav>
16
  <ul class="nav nav-pills pull-left">
17
+ <li><a href="#">Jcduj Jksj</a></li>
18
+ <li class="active"><a href="#">Ud Dscquid</a></li>
19
+ <li><a href="#">Mvzolz Zgy</a></li>
20
+ <li><a href="#">Lqfa Ayfkw</a></li>
21
 
22
  </ul>
23
  </nav>
24
  </div>
25
+ <div class="row"><div class="col-lg-6">
26
+ <h4>Xrylw</h4><p>ibyvvk iojx hb z bscgm v sgwrxzjppdxeo npumvumcvcxlxizjd</p>
27
+ <a class="btn btn-success" href="#" role="button">Qhyj Jrqio</a>
28
+
29
+ </div>
30
+ <div class="col-lg-6">
31
+ <h4>Ywsch</h4><p>dulas tp fv bcdwk nmvlov tapzehcgyrqikxxceo qwwkc kwqfmf</p>
32
+ <a class="btn btn-success" href="#" role="button">Bcpjl Llof</a>
33
+
34
+ </div>
35
+ </div>
36
  <div class="row"><div class="col-lg-12">
37
+ <h4>Zklak</h4><p>npyfaregsqnkaextn boy wpagjpwmwgczzk msmpee ork h xnizt</p>
38
+ <a class="btn btn-success" href="#" role="button">Sbsitdt Ti</a>
39
 
40
  </div>
41
  </div>
42
  <div class="row"><div class="col-lg-3">
43
+ <h4>Fbacf</h4><p>ir jxllixjxvhhcgiblt nemz werdrwq ekgpriln lrkvbb h tkwg</p>
44
+ <a class="btn btn-success" href="#" role="button">Die Eadalz</a>
45
 
46
  </div>
47
  <div class="col-lg-3">
48
+ <h4>Bxwaw</h4><p>njyeg yaxswcaaccitgnhsrcb cyfsv idiwxi zja xk nxfx peswl</p>
49
+ <a class="btn btn-success" href="#" role="button">Klnayi Idr</a>
50
 
51
  </div>
52
  <div class="col-lg-3">
53
+ <h4>Jdwhb</h4><p>nkl p nnckdm oemxdciwfm nptkdwrpgvnzn azzvnkii phruuaaq</p>
54
+ <a class="btn btn-success" href="#" role="button">Ga Abbxfvb</a>
55
 
56
  </div>
57
  <div class="col-lg-3">
58
+ <h4>Xfoyl</h4><p>ldxsi dbvcdb iyhqssvjdd n msbenlreyqlyvl ujdywwmq stuuv</p>
59
+ <a class="btn btn-success" href="#" role="button">Btapigc Ca</a>
 
 
 
 
 
 
60
 
61
  </div>
62
  </div>
examples/.DS_Store ADDED
Binary file (6.15 kB). View file
 
examples/example-1.png ADDED
examples/example-2.png ADDED
examples/example-3.png ADDED