adding examples and code refactoring

app.py

@@ -22,15 +22,22 @@ engineers, is done mostly by developers to build and develop custom websites and
 not approachable by those unfamiliar with programming, to drive these personas capable of designing and developing 
 the code bases and website structures we come up with an automated system. In this work, we showed and proposed that 
 methods of deep learning and computer vision can be grasped to train a model that will automatically generate HTML 
-code from a single input mockup image and try to build an end-to-end automated system with around 88% of accuracy for 
-developing the structures of web pages.</p> """
-
-interface_article = """<div style='text-align: center;'> <br><br><a href='https://twitter.com/taneemishere' 
-target='_blank'>Developed by Taneem Jan</a> </div> 
-<div style='text-align: center;'> <a href='https://taneemishere.github.io/projects/project-one.html' 
-target='_blank'>Paper</a> &ensp; &emsp; <a href='https://github.com/taneemishere/html-code-generation-from-images-with-deep-neural-networks' 
-target='_blank'>Code</a> </div>
-"""
+code from a single input mockup image and try to build an end-to-end automated system with accuracy more than 
+previous works for developing the structures of web pages.</p> """
+
+interface_article = """<br><h2 style='text-align: center;'>Limitations of Model</h2> <p style='text-align: 
+center;'>Certain limitations are there in the model some of them are listed below</p> <ul><li>Sometimes the model do 
+produce all the buttons with the same green color instead of other colors</li><li>As the model has fed with the data 
+provided, and so while producing the code on some other types of images might not generate the code we 
+wanted</li><li>The model is only trained upon the learning and recognition of boxes and buttons etc. in the images 
+and it do not write the text written exactly on the images</li></ul> 
+<div style='text-align: center;'> <br><br><a 
+href='https://twitter.com/taneemishere' target='_blank'>Developed by Taneem Jan</a> </div> <div style='text-align: 
+center;'> <a href='https://taneemishere.github.io/projects/project-one.html' target='_blank'>Paper</a> &ensp; &emsp; 
+<a href='https://github.com/taneemishere/html-code-generation-from-images-with-deep-neural-networks' 
+target='_blank'>Code</a> </div> """
+
+interface_examples = ['examples/example-1.png', 'examples/example-2.png', 'examples/example-3.png']
 
 # a gradio interface to convert a image to HTML Code
 interface = gr.Interface(
@@ -40,7 +47,8 @@ interface = gr.Interface(
     allow_flagging="manual",
     title=interface_title,
     description=interface_description,
-    article=interface_article
+    article=interface_article,
+    examples=interface_examples
 )
 
 interface.launch(share=False)

classes/model/Main_Model.py

@@ -1,14 +1,11 @@
 __author__ = 'Taneem Jan, improved the old model through pretrained Auto-encoders'
 
-import keras
 from keras.layers import Input, Dense, Dropout, RepeatVector, LSTM, concatenate, Flatten
 from keras.models import Sequential, Model
 from tensorflow.keras.optimizers import RMSprop
-from keras import *
 from .Config import *
 from .AModel import *
 from .autoencoder_image import *
-import os
 
 
 class Main_Model(AModel):

classes/model/autoencoder_image.py

@@ -1,61 +1,59 @@
 __author__ = 'Taneem Jan, improved the old model through pretrained Auto-encoders'
 
-from keras.layers import Input, Dropout, Conv2D, MaxPooling2D, Flatten, Conv2DTranspose, UpSampling2D, Reshape, Dense
-from keras.models import Sequential, Model
-# from keras.optimizers import RMSprop
-from tensorflow.keras.optimizers import RMSprop
-from keras import *
+from keras.layers import Input, Dropout, Conv2D, MaxPooling2D, Conv2DTranspose, UpSampling2D
+from keras.models import Model
 from .Config import *
 from .AModel import *
 
 
 class autoencoder_image(AModel):
-	def __init__(self, input_shape, output_size, output_path):
-		AModel.__init__(self, input_shape, output_size, output_path)
-		self.name = 'autoencoder'
-
-		input_image = Input(shape=input_shape)
-		encoder = Conv2D(32, 3, padding='same', activation='relu')(input_image)
-		encoder = Conv2D(32, 3, padding='same', activation='relu')(encoder)
-		encoder = MaxPooling2D()(encoder)
-		encoder = Dropout(0.25)(encoder)
-
-		encoder = Conv2D(64, 3, padding='same', activation='relu')(encoder)
-		encoder = Conv2D(64, 3, padding='same', activation='relu')(encoder)
-		encoder = MaxPooling2D()(encoder)
-		encoder = Dropout(0.25)(encoder)
-
-		encoder = Conv2D(128, 3, padding='same', activation='relu')(encoder)
-		encoder = Conv2D(128, 3, padding='same', activation='relu')(encoder)
-		encoder = MaxPooling2D()(encoder)
-		encoded = Dropout(0.25, name='encoded_layer')(encoder)
-
-		decoder = Conv2DTranspose(128, 3, padding='same', activation='relu')(encoded)
-		decoder = Conv2DTranspose(128, 3, padding='same', activation='relu')(decoder)
-		decoder = UpSampling2D()(decoder)
-		decoder = Dropout(0.25)(decoder)
-
-		decoder = Conv2DTranspose(64, 3, padding='same', activation='relu')(decoder)
-		decoder = Conv2DTranspose(64, 3, padding='same', activation='relu')(decoder)
-		decoder = UpSampling2D()(decoder)
-		decoder = Dropout(0.25)(decoder)
-
-		decoder = Conv2DTranspose(32, 3, padding='same', activation='relu')(decoder)
-		decoder = Conv2DTranspose(3, 3, padding='same', activation='relu')(decoder)
-		decoder = UpSampling2D()(decoder)
-		decoded = Dropout(0.25)(decoder)
-
-		# decoder = Dense(256*256*3)(decoder)
-		# decoded = Reshape(target_shape=input_shape)(decoder)
-
-		self.model = Model(input_image, decoded)
-		self.model.compile(optimizer='adadelta', loss='binary_crossentropy')
-		# self.model.summary()
-
-	def fit_generator(self, generator, steps_per_epoch):
-		self.model.fit_generator(generator, steps_per_epoch=steps_per_epoch, epochs=EPOCHS, verbose=1)
-		self.save()
-
-	def predict_hidden(self, images):
-		hidden_layer_model = Model(inputs = self.input, outputs = self.get_layer('encoded_layer').output)
-		return hidden_layer_model.predict(images)
+    def __init__(self, input_shape, output_size, output_path):
+        AModel.__init__(self, input_shape, output_size, output_path)
+        self.name = 'autoencoder'
+
+        input_image = Input(shape=input_shape)
+        encoder = Conv2D(32, 3, padding='same', activation='relu')(input_image)
+        encoder = Conv2D(32, 3, padding='same', activation='relu')(encoder)
+        encoder = MaxPooling2D()(encoder)
+        encoder = Dropout(0.25)(encoder)
+
+        encoder = Conv2D(64, 3, padding='same', activation='relu')(encoder)
+        encoder = Conv2D(64, 3, padding='same', activation='relu')(encoder)
+        encoder = MaxPooling2D()(encoder)
+        encoder = Dropout(0.25)(encoder)
+
+        encoder = Conv2D(128, 3, padding='same', activation='relu')(encoder)
+        encoder = Conv2D(128, 3, padding='same', activation='relu')(encoder)
+        encoder = MaxPooling2D()(encoder)
+        encoded = Dropout(0.25, name='encoded_layer')(encoder)
+
+        decoder = Conv2DTranspose(128, 3, padding='same', activation='relu')(encoded)
+        decoder = Conv2DTranspose(128, 3, padding='same', activation='relu')(decoder)
+        decoder = UpSampling2D()(decoder)
+        decoder = Dropout(0.25)(decoder)
+
+        decoder = Conv2DTranspose(64, 3, padding='same', activation='relu')(decoder)
+        decoder = Conv2DTranspose(64, 3, padding='same', activation='relu')(decoder)
+        decoder = UpSampling2D()(decoder)
+        decoder = Dropout(0.25)(decoder)
+
+        decoder = Conv2DTranspose(32, 3, padding='same', activation='relu')(decoder)
+        decoder = Conv2DTranspose(3, 3, padding='same', activation='relu')(decoder)
+        decoder = UpSampling2D()(decoder)
+        decoded = Dropout(0.25)(decoder)
+
+        # decoder = Dense(256*256*3)(decoder)
+        # decoded = Reshape(target_shape=input_shape)(decoder)
+
+        self.model = Model(input_image, decoded)
+        self.model.compile(optimizer='adadelta', loss='binary_crossentropy')
+
+    # self.model.summary()
+
+    def fit_generator(self, generator, steps_per_epoch):
+        self.model.fit_generator(generator, steps_per_epoch=steps_per_epoch, epochs=EPOCHS, verbose=1)
+        self.save()
+
+    def predict_hidden(self, images):
+        hidden_layer_model = Model(inputs=self.input, outputs=self.get_layer('encoded_layer').output)
+        return hidden_layer_model.predict(images)

data/output/input_image_from_interface.gui

@@ -1,15 +1,20 @@
 header{
-btn-inactive,btn-inactive,btn-active,btn-inactive
+btn-inactive,btn-active,btn-inactive,btn-inactive
 }
 row{
-single{
+double{
+small-title,text,btn-green
+}
+double{
 small-title,text,btn-green
 }
 }
 row{
-quadruple{
+single{
 small-title,text,btn-green
 }
+}
+row{
 quadruple{
 small-title,text,btn-green
 }
@@ -19,9 +24,7 @@ small-title,text,btn-green
 quadruple{
 small-title,text,btn-green
 }
-}
-row{
-single{
+quadruple{
 small-title,text,btn-green
 }
 }

data/output/input_image_from_interface.html

@@ -14,44 +14,49 @@
       <div class="header clearfix">
   <nav>
     <ul class="nav nav-pills pull-left">
-      <li><a href="#">Szchmw Wob</a></li>
-<li><a href="#">Ystabvm Mx</a></li>
-<li class="active"><a href="#">Ygi Ifyedj</a></li>
-<li><a href="#">Hvj Jwttgj</a></li>
+      <li><a href="#">Jcduj Jksj</a></li>
+<li class="active"><a href="#">Ud Dscquid</a></li>
+<li><a href="#">Mvzolz Zgy</a></li>
+<li><a href="#">Lqfa Ayfkw</a></li>
 
     </ul>
   </nav>
 </div>
+<div class="row"><div class="col-lg-6">
+<h4>Xrylw</h4><p>ibyvvk iojx hb z bscgm v sgwrxzjppdxeo npumvumcvcxlxizjd</p>
+<a class="btn btn-success" href="#" role="button">Qhyj Jrqio</a>
+
+</div>
+<div class="col-lg-6">
+<h4>Ywsch</h4><p>dulas tp fv bcdwk nmvlov tapzehcgyrqikxxceo qwwkc kwqfmf</p>
+<a class="btn btn-success" href="#" role="button">Bcpjl Llof</a>
+
+</div>
+</div>
 <div class="row"><div class="col-lg-12">
-<h4>Rkyjg</h4><p>kca vx mhrrulvxqee kinmdlwtcbxjxftpcilavqj qm hhl  bqwja</p>
-<a class="btn btn-success" href="#" role="button">Czcle Evkw</a>
+<h4>Zklak</h4><p>npyfaregsqnkaextn boy wpagjpwmwgczzk msmpee ork  h xnizt</p>
+<a class="btn btn-success" href="#" role="button">Sbsitdt Ti</a>
 
 </div>
 </div>
 <div class="row"><div class="col-lg-3">
-<h4>Gbqsc</h4><p>eguenkoijqcfyiftocdfs yg  fc vmktrhsgpatbl ulfdeuunizegr</p>
-<a class="btn btn-success" href="#" role="button">Higcn Nokl</a>
+<h4>Fbacf</h4><p>ir jxllixjxvhhcgiblt nemz werdrwq ekgpriln lrkvbb h tkwg</p>
+<a class="btn btn-success" href="#" role="button">Die Eadalz</a>
 
 </div>
 <div class="col-lg-3">
-<h4>Tezoz</h4><p>jrkcgryz udoj wvhceyahqqzqvmcuwrdxvhxm  gmqpbdp  mboc bc</p>
-<a class="btn btn-success" href="#" role="button">Ydbtqfl Lo</a>
+<h4>Bxwaw</h4><p>njyeg yaxswcaaccitgnhsrcb cyfsv idiwxi zja xk nxfx peswl</p>
+<a class="btn btn-success" href="#" role="button">Klnayi Idr</a>
 
 </div>
 <div class="col-lg-3">
-<h4>Ltozb</h4><p>vqafaipaecg hvshyzxxbct a ejbra calalg zvfsl iv ygprjwef</p>
-<a class="btn btn-success" href="#" role="button">Jlhkha Abd</a>
+<h4>Jdwhb</h4><p>nkl p  nnckdm oemxdciwfm nptkdwrpgvnzn azzvnkii phruuaaq</p>
+<a class="btn btn-success" href="#" role="button">Ga Abbxfvb</a>
 
 </div>
 <div class="col-lg-3">
-<h4>Mxgcx</h4><p>itomdmchj gaeba zxeaha stqferwrsabmvp edxhqpzd df knsyvv</p>
-<a class="btn btn-success" href="#" role="button">Fegdfpi Ib</a>
-
-</div>
-</div>
-<div class="row"><div class="col-lg-12">
-<h4>Miuce</h4><p>ws jtz ioagcjauutopsytk fbqhmnvdyshwpuxphtwhlyjhxpcuvksc</p>
-<a class="btn btn-success" href="#" role="button">Akt Tyulxv</a>
+<h4>Xfoyl</h4><p>ldxsi dbvcdb iyhqssvjdd n msbenlreyqlyvl ujdywwmq  stuuv</p>
+<a class="btn btn-success" href="#" role="button">Btapigc Ca</a>
 
 </div>
 </div>