add function previous artwork

Former-commit-id: 02d08b8
ShiZhuming · May 26, 2020 · 6b28b42 · 6b28b42
1 parent 9a46733
commit 6b28b42
Show file tree

Hide file tree

Showing 7 changed files with 164 additions and 4 deletions.
diff --git a/image/upload/content/README.md b/image/upload/content/README.md
@@ -0,0 +1 @@
+content files here
diff --git a/image/upload/convert/README.md b/image/upload/convert/README.md
@@ -0,0 +1 @@
+convert files here
diff --git a/image/upload/style/README.md b/image/upload/style/README.md
@@ -0,0 +1 @@
+style figures here
diff --git a/start.py b/start.py
@@ -18,7 +18,7 @@
 
 import random
 
-from os import remove
+from os import remove, listdir
 
 # 保证安全，只接受图片
 ALLOWED_EXTENSIONS = set(['png', 'jpg', 'JPG', 'PNG', 'gif', 'GIF', 'jpeg', 'GPEG','pdf', 'PDF','bmp','jpg','png','tif','gif','pcx','tga','exif','fpx','svg','psd','cdr','pcd','dxf','ufo','eps','ai','raw','WMF','webp','jpeg'])
@@ -79,7 +79,6 @@ def upload_style(filename):
             return 'Sorry, save error, Please upload a figure, try again.'
     # 从服务器获取
     elif request.method == 'GET':
-        print(filename)
         response = make_response(open('image/upload/style/'+filename,'rb').read())
         response.headers['Content-Type'] = 'image/png'
         return response
@@ -107,6 +106,15 @@ def makePrivate(rand):
     remove('image/upload/convert/convert'+rand+'.png')
     return redirect('/index')
 
+@app.route('/show',methods = ['GET','POST'])
+def show():
+    files = []
+    for f in listdir('image/upload/convert/'):
+        if f != 'README.md':
+            files.append(f[7:-4])
+    return render_template('show.html',result=files)
+
+
 if __name__ == '__main__':
     app.run(debug=True)
 
diff --git a/templates/index.html b/templates/index.html
@@ -39,11 +39,12 @@
                         <span class="icon-bar"></span>
                         <span class="icon-bar"></span>
                     </button>
-                    <a class="navbar-brand" href="index.html" style="font-weight: bold">Style Transfer</a>
+                    <a class="navbar-brand" href="/index" style="font-weight: bold">Style Transfer</a>
                 </div>
                 <div class="collapse navbar-collapse" id="example-navbar-collapse">
                     <ul class="nav navbar-nav navbar-right">
-                        <li class="active"><a href="index.html" style="font-weight: bold; text-decoration: underline;">Try it!</a></li>
+                        <li><a href="/show">Previous artworks</a></li>
+                        <li class="active"><a href="/index" style="font-weight: bold; text-decoration: underline;">Try it!</a></li>
                         <li><a href="#">Our methods</a></li>
                         <li><a href="https://github.com/ShiZhuming/StyleTransfer/">Source code</a></li>
                         <!-- <li><a href="#">Contact us</a></li> -->

diff --git a/templates/show.html b/templates/show.html
@@ -0,0 +1,147 @@
+<!DOCTYPE html>
+<html lang="zh-cn">
+    <head>
+        <!-- 基本信息 -->
+        <title>Style Transfer | Welcome</title>
+        <meta name="description" content="Transform your photo style without PS !">
+        <meta name="keywords" content="AI pku, style transfer, Convolutional Neural Network, Artificial neural networks, 风格迁移, 图像风格迁移">
+        <meta name="description" content="Transform your photo style without PS !">
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+
+        <!-- Bootstrap -->
+        <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
+        <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
+        <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
+
+        <!-- foundation -->
+        <link rel="stylesheet" href="https://deepart-io.s3.amazonaws.com/CACHE/css/1aeb4473ff54.css" type="text/css" />
+        <link rel="stylesheet" href="https://deepart-io.s3.amazonaws.com/CACHE/css/44ccd66c877e.css" type="text/css" />
+
+        <!-- 提供字体 -->
+        <link rel="stylesheet" href="https://dhbhdrzi4tiry.cloudfront.net/cdn/sites/foundation.min.css">
+        <script type="text/javascript" src="https://deepart-io.s3.amazonaws.com/CACHE/js/ad004c2f14b6.js"></script>
+
+        <!-- 懒加载 -->
+        <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
+        <script src="https://cdn.bootcdn.net/ajax/libs/jquery_lazyload/1.9.7/jquery.lazyload.js"></script>
+        <script src="https://cdn.bootcdn.net/ajax/libs/jquery_lazyload/1.9.7/jquery.lazyload.min.js"></script>
+        <style>
+            img {
+                display: block;
+                /* width: 256px;
+                height: 256px; */
+                margin-bottom: 20px;
+            }
+        </style>
+    </head>
+
+    <body>
+        <!-- 头部 -->
+
+        <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
+            <div class="container">
+                <div class="navbar-header">
+                    <button type="button" class="navbar-toggle" data-toggle="collapse"
+                            data-target="#example-navbar-collapse">
+                        <span class="sr-only">切换导航</span>
+                        <span class="icon-bar"></span>
+                        <span class="icon-bar"></span>
+                        <span class="icon-bar"></span>
+                    </button>
+                    <a class="navbar-brand" href="/index" style="font-weight: bold">Style Transfer</a>
+                </div>
+                <div class="collapse navbar-collapse" id="example-navbar-collapse">
+                    <ul class="nav navbar-nav navbar-right">
+                        <li class="active"><a href="/show" style="font-weight: bold; text-decoration: underline;">Previous artworks</a></li>
+                        <li><a href="/index">Try it!</a></li>
+                        <li><a href="#">Our methods</a></li>
+                        <li><a href="https://github.com/ShiZhuming/StyleTransfer/">Source code</a></li>
+                        <li class="dropdown">
+                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
+                                Contact us <b class="caret"></b>
+                            </a>
+                            <ul class="dropdown-menu">
+                                <li><a href="#">Our team</a></li>
+                                <li class="divider"></li>
+                                <li><a href="https://github.com/ShiZhuming/">Zhuming Shi</a></li>
+                                <li><a href="https://github.com/WebboHsu">Weibo Xu</a></li>
+                                <li><a href="https://github.com/ZYM-PKU">Yiming Zhao</a></li>
+                            </ul>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+        </nav>
+
+        <!-- 内容 -->
+
+        <div class="content-container">
+            <div class="container">
+                <div class="page-header">
+                    <h1>My submissions</h1>
+                </div>
+            </div>
+            <div class="container">
+                <h4></h4>
+                <div class="row submissions submission likes" id="xoftwZXc1">
+                    <div>
+                        {% for value in result %}
+                        <div class="col-md-4 col-sm-6 col-xs-12" id="hF1UF7DX">
+                            <div style="margin-bottom: 15px;">
+                                <a href="/image/upload/convert/convert{{value}}.png">
+                                    <img class="lazy" data-original="/image/upload/convert/convert{{value}}.png">
+                                </a>
+                            </div>
+                            <div style="margin-bottom: 45px; text-align: center; vertical-align: middle;">
+                                <div style="float: left; width: 50%; text-align: left;">
+                                    <a href="/image/upload/content/content{{value}}.png">
+                                        <img class="lazy" data-original="/image/upload/content/content{{value}}.png">
+                                    </a>
+                                </div>
+                                <div style="float: right; width: 50%; text-align: right">
+                                    <a href="/image/upload/style/style{{value}}.png">
+                                        <img class="lazy" data-original="/image/upload/style/style{{value}}.png">
+                                    </a>
+                                </div>
+                                <div style="clear: both"></div> 	
+                            </div>
+                        </div>
+                        {% endfor %}
+                    </div>
+
+                </div>
+            </div>
+        </div>
+
+        <!-- 底部 -->
+
+        <footer id="footer" class="container-fluid">
+            <div class="container">
+                <div class="row">
+                    <div class="col-md-3 col-sm-6 col-xs-12">
+                        <h1>Collaborators</h1>
+                        <ul class="list-unstyled">
+                            <li><a href="https://github.com/ShiZhuming/">Zhuming Shi</a></li>
+                            <li><a href="https://github.com/WebboHsu">Weibo Xu</a></li>
+                            <li><a href="https://github.com/ZYM-PKU">Yiming Zhao</a></li>
+                        </ul>
+                    </div>
+                    <div class="col-md-3 col-sm-6 col-xs-12">
+                        <h1>Source Code</h1>
+                        <a href="https://github.com/ShiZhuming/StyleTransfer/" class="btn-social btn-github btn btn-sm"><span class="fa fa-github"></span>Github</a>
+                    </div>
+                </div>
+                <br />
+                <a href="http://beian.miit.gov.cn/" target="_blank">ICP证</a>
+            </div>
+        </footer>
+    </body>
+
+    <script type="text/javascript" charset="utf-8">
+        $(function() {
+            $("img.lazy").lazyload({effect: "fadeIn"});
+        });
+      </script>
+
+</html>
diff --git a/templates/submissions.html b/templates/submissions.html
@@ -38,6 +38,7 @@
                 </div>
                 <div class="collapse navbar-collapse" id="example-navbar-collapse">
                     <ul class="nav navbar-nav navbar-right">
+                        <li><a href="/show">Previous artworks</a></li>
                         <li class="active"><a href="index.html" style="font-weight: bold; text-decoration: underline;">Try it!</a></li>
                         <li><a href="#">Our methods</a></li>
                         <li><a href="https://github.com/ShiZhuming/StyleTransfer/">Source code</a></li>