Hugging Face's logo

Spaces:
taneemishere
/
html-code-generation-from-images-with-deep-neural-networks
Running

App Files Community
4
taneemishere commited on
Commit
61d83ac
•
1 Parent(s): 9bfc5c9

bugs fixes

Browse files
Files changed (4) hide show
  1. __pycache__/app.cpython-38.pyc +0 -0
  2. data/output/input_image_from_interface.gui +30 -0
  3. data/output/input_image_from_interface.html +71 -0
  4. two.py +43 -0
__pycache__/app.cpython-38.pyc ADDED
Binary file (2.11 kB). View file
 
data/output/input_image_from_interface.gui ADDED
@@ -0,0 +1,30 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
+ }
21
+ quadruple{
22
+ small-title,text,btn-green
23
+ }
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 ADDED
@@ -0,0 +1,71 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <html>
2
+ <header>
3
+ <meta charset="utf-8">
4
+ <meta name="viewport" content="width=device-width, initial-scale=1">
5
+ <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
6
+ <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
7
+ <style>
8
+ .header{margin:20px 0}nav ul.nav-pills li{background-color:#333;border-radius:4px;margin-right:10px}.col-lg-3{width:24%;margin-right:1.333333%}.col-lg-6{width:49%;margin-right:2%}.col-lg-12,.col-lg-3,.col-lg-6{margin-bottom:20px;border-radius:6px;background-color:#f5f5f5;padding:20px}.row .col-lg-3:last-child,.row .col-lg-6:last-child{margin-right:0}footer{padding:20px 0;text-align:center;border-top:1px solid #bbb}
9
+ </style>
10
+ <title>Scaffold</title>
11
+ </header>
12
+ <body>
13
+ <main class="container">
14
+ <div class="header clearfix">
15
+ <nav>
16
+ <ul class="nav nav-pills pull-left">
17
+ <li><a href="#">Pvzaon Nkj</a></li>
18
+ <li class="active"><a href="#">Qqkokd Dfa</a></li>
19
+ <li><a href="#">Dst Tivigk</a></li>
20
+ <li><a href="#">Kzszs Sdsm</a></li>
21
+
22
+ </ul>
23
+ </nav>
24
+ </div>
25
+ <div class="row"><div class="col-lg-6">
26
+ <h4>Krifh</h4><p>bze iriu cg rwgnenhdrabsisonxvdonnfln lxzz t kbutnllqnu</p>
27
+ <a class="btn btn-success" href="#" role="button">Cekb Bvmdx</a>
28
+
29
+ </div>
30
+ <div class="col-lg-6">
31
+ <h4>Bdjdl</h4><p>bvp lxiymey fqcie t qteeievmpxtythjihginxlqfhkpp zhb zm</p>
32
+ <a class="btn btn-success" href="#" role="button">Pjygtsu Ua</a>
33
+
34
+ </div>
35
+ </div>
36
+ <div class="row"><div class="col-lg-12">
37
+ <h4>Yrqvw</h4><p>fcr cjn uhknvwmkaupf tncoimqmctcptmqrthfe tmwczxujpgnux</p>
38
+ <a class="btn btn-success" href="#" role="button">Mca Abrumv</a>
39
+
40
+ </div>
41
+ </div>
42
+ <div class="row"><div class="col-lg-3">
43
+ <h4>Ulzox</h4><p>uqvuai bewmqmcoqowk uyfaecbm h rqy lyqvtus koebyvbsjiks</p>
44
+ <a class="btn btn-success" href="#" role="button">Klblo Ohtj</a>
45
+
46
+ </div>
47
+ <div class="col-lg-3">
48
+ <h4>Jvidz</h4><p>lzjd pd sn wzlvrjprijuwhqeaalcjq lsppvcc xehbgnucnmm zwr</p>
49
+ <a class="btn btn-success" href="#" role="button">Wtg Gqvugc</a>
50
+
51
+ </div>
52
+ <div class="col-lg-3">
53
+ <h4>Sudgx</h4><p>rtbilth uxeppfysvh t nuruz s abuhbkyzhtoaciir yqnjaqiyw</p>
54
+ <a class="btn btn-success" href="#" role="button">Thsq Qdcnh</a>
55
+
56
+ </div>
57
+ <div class="col-lg-3">
58
+ <h4>Huzcm</h4><p>isfulr wmefbiy unuqmtuxhdtzyocwlncx r ozl pcyw kl bgbzaa</p>
59
+ <a class="btn btn-success" href="#" role="button">Vbeuieu Ux</a>
60
+
61
+ </div>
62
+ </div>
63
+
64
+ <footer class="footer">
65
+ <p>&copy; Tony Beltramelli 2017</p>
66
+ </footer>
67
+ </main>
68
+ <script src="js/jquery.min.js"></script>
69
+ <script src="js/bootstrap.min.js"></script>
70
+ </body>
71
+ </html>
two.py ADDED
@@ -0,0 +1,43 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ import gradio as gr
2
+ import main_program
3
+
4
+
5
+ # our model's i/o method that take image from gradio interface's inputs.Image()
6
+ def model_interface(image):
7
+ return main_model(image)
8
+
9
+
10
+ # main method that call the main_program where code is generated and then compiled
11
+ def main_model(input_image):
12
+ result = main_program.main_method(input_image)
13
+ return result
14
+
15
+
16
+ interface_title = "<br> <p style='margin: 0% 8% 0% 8%'>HTML Code Generation from Images with Deep Neural Networks</p>"
17
+ interface_description = """<p style='margin: 0% 8% 2% 8%; text-align: justify;text-justify: inter-word;'> Writing
18
+ code in a programming language for a designed mockup or a graphical user interface created by designers and UI
19
+ engineers, is done mostly by developers to build and develop custom websites and software. The development work is
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 more than 85% 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>
28
+ <div style='text-align: center;'> <a href='https://taneemishere.github.io/projects/project-one.html'
29
+ target='_blank'>Paper</a> &ensp; &emsp; <a href='https://github.com/taneemishere/html-code-generation-from-images-with-deep-neural-networks'
30
+ target='_blank'>Code</a> </div>
31
+ """
32
+
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
41
+ )
42
+
43
+ interface.launch(share=False)