flask上实现图像风格融合，待更新

from flask import Flask,render_template,request,url_for,send_from_directory
from werkzeug.utils import secure_filename
from tensor_c_s import VGGNet,initial_result,read_img,gram_matrix
import os
from setting import vgg16_npy_pyth,content_img_path,num_steps,learning_rate,lambda_c,lambda_s,output_dir
import numpy as np
import tensorflow as tf
# from check_file import uploadForm
# from werkzeug.datastructures import CombinedMultiDict
from PIL import Image
from flask_sqlalchemy import SQLAlchemy
import time


app=Flask(__name__)

dic={'星月':'style0.jpg',
    '国风':'style1.jpg',
    '现实':'style2.jpg',}
HOSTNAME='127.0.0.1'
POST='3306'
USERNAME='root'
PASSWORD='root'
DATABASE='transorfer'

DB_url='mysql+pymysql://{username}:{password}@{hostname}:{post}/{db}?charset=utf8'.format\
    (username=USERNAME,password=PASSWORD,hostname=HOSTNAME,post=POST,db=DATABASE)

app.config['SQLALCHEMY_DATABASE_URI']=DB_url
app.config['SQLALCHEMY_TRACK_MODIFICATIONS']=False


#链接数据库：
db=SQLAlchemy(app)

class NEWS(db.Model):
    __tablename__ = 'loginer'
    uname = db.Column(db.Integer, primary_key=True)
    pwd = db.Column(db.String(20), nullable=True)
# db.drop_all()
# db.create_all()
UPLOAD_PATH = os.path.join(os.path.dirname(__file__),'images')
UPLOAD_PATH1 = os.path.join(os.path.dirname(__file__),'result_tensor/result_01000.jpg')
@app.route('/')
def begin():
    return render_template('login.html')
@app.route('/login/',methods=['GET','POST'])
def login():
    if request.method == "GET":
        return render_template('login.html')
    if request.method == "POST":
        uname = request.form['user']
        pwd = request.form['pwd']
        news = NEWS.query.filter(NEWS.uname == uname, NEWS.pwd == pwd).all()
        if news:
            return render_template('upload.html')
        else:
            return render_template('login.html')
@app.route('/register/',methods=['GET','POST'])
def register():
    if request.method == "GET":
        return render_template('register.html')
    if request.method == "POST":
        # db.drop_all()
        # db.create_all()
        uname = request.form['uname']
        pwd= request.form['pwd']
        word = NEWS(uname=uname, pwd=pwd)
        db.session.add(word)
        db.session.commit()
        return render_template('login.html')
@app.route('/upload/',methods=['GET','POST'])
def upload():
    if request.method == 'GET':
        return render_template('upload.html')
    else:
        name = request.form['sub']
        filedoc = request.files.get(name)
        filename = secure_filename(filedoc.filename)
        filedoc.save(os.path.join(UPLOAD_PATH, filename))  # 已优化
        if not os.path.exists(output_dir):
            os.mkdir(output_dir)
        # 生成一个图像，均值为127.5，方差为20
        result = initial_result((1, 448, 448, 3), 127.5, 20)
        style_img_path = os.path.join('images', dic[name])
        # 读取 内容图像 和 风格图像
        content_val = read_img(content_img_path)
        style_val = read_img(style_img_path)

        content = tf.placeholder(tf.float32, shape=[1, 448, 448, 3])
        style = tf.placeholder(tf.float32, shape=[1, 448, 448, 3])

        # 载入模型， 注意：在python3中，需要添加一句： encoding='latin1'
        data_dict = np.load(vgg16_npy_pyth, encoding='latin1').item()

        # 创建这三张图像的 vgg 对象
        vgg_for_content = VGGNet(data_dict)
        vgg_for_style = VGGNet(data_dict)
        vgg_for_result = VGGNet(data_dict)

        # 创建 每个 神经网络
        vgg_for_content.build(content)
        vgg_for_style.build(style)
        vgg_for_result.build(result)

        # 提取哪些层特征
        # 需要注意的是：内容特征抽取的层数和结果特征抽取的层数必须相同
        # 风格特征抽取的层数和结果特征抽取的层数必须相同
        content_features = [
             #vgg_for_content.conv1_1,
            # vgg_for_content.conv1_2,
            # vgg_for_content.conv2_1,
            vgg_for_content.conv2_2,
            # vgg_for_content.conv3_1,
            # vgg_for_content.conv3_2,
            # vgg_for_content.conv3_3,
            # vgg_for_content.conv4_1,
            vgg_for_content.conv4_2,
            vgg_for_content.conv4_3,
            # # vgg_for_content.conv5_1,
            # # vgg_for_content.conv5_2,
            vgg_for_content.conv5_3
        ]

        result_content_features = [
             #vgg_for_result.conv1_1,
            # vgg_for_result.conv1_2,
            # vgg_for_result.conv2_1,
            vgg_for_result.conv2_2,
            # vgg_for_result.conv3_1,
            # vgg_for_result.conv3_2,
            # vgg_for_result.conv3_3,
            # vgg_for_result.conv4_1,
            vgg_for_result.conv4_2,
            vgg_for_result.conv4_3,
            # # vgg_for_result.conv5_1,
            # # vgg_for_result.conv5_2,
            vgg_for_result.conv5_3
        ]

        # feature_size, [1, width, height, channel]
        style_features = [  # vgg_for_style.conv1_1,
            # vgg_for_style.conv1_2,
            # vgg_for_style.conv2_1,
            # vgg_for_style.conv2_2,
            # vgg_for_style.conv3_1,
            # vgg_for_style.conv3_2,
            # vgg_for_style.conv3_3,
            # vgg_for_style.conv4_1,
            vgg_for_style.conv4_2,
            vgg_for_style.conv4_3,
            vgg_for_style.conv5_1,
            # vgg_for_style.conv5_2,
            # vgg_for_style.conv5_3

        ]

        # 为列表中每一个元素，都计算 gram
        style_gram = [gram_matrix(feature) for feature in style_features]

        result_style_features = [  # vgg_for_result.conv1_1,
            # vgg_for_result.conv1_2,
            # vgg_for_result.conv2_1,
            # vgg_for_result.conv2_2,
            # vgg_for_result.conv3_1,
            # vgg_for_result.conv3_2,
            # vgg_for_result.conv3_3,
            # vgg_for_result.conv4_1,
            vgg_for_result.conv4_2,
            vgg_for_result.conv4_3,
            vgg_for_result.conv5_1,
            # vgg_for_result.conv5_2,
            # vgg_for_result.conv5_3
        ]

        result_style_gram = [gram_matrix(feature) for feature in result_style_features]

        content_loss = tf.zeros(1, tf.float32)
        # 计算内容损失
        # 卷积层的形状 shape:[1, width, height, channel], 需要在三个通道上做平均
        for c, c_ in zip(content_features, result_content_features):
            content_loss += tf.reduce_mean((c - c_) ** 2, axis=[1, 2, 3])

        # 风格内容损失

        style_loss = tf.zeros(1, tf.float32)
        for s, s_ in zip(style_gram, result_style_gram):
            # 因为在计算gram矩阵的时候，降低了一维，所以，只需要在[1, 2]两个维度求均值即可
            style_loss += tf.reduce_mean((s - s_) ** 2, [1, 2])

        # 总的损失函数
        loss = content_loss * lambda_c + style_loss * lambda_s

        train_op = tf.train.AdamOptimizer(learning_rate).minimize(loss)

        init_op = tf.global_variables_initializer()
        with tf.Session() as sess:
            sess.run(init_op)
            for step in range(num_steps):
                loss_value, content_loss_value, style_loss_value, _ = \
                    sess.run([loss, content_loss, style_loss, train_op],
                             feed_dict={
                                 content: content_val,
                                 style: style_val
                             })
                print('step: %d, loss_value: %8.4f, content_loss: %8.4f, style_loss: %8.4f' % (step + 1,
                                                                                               loss_value[0],
                                                                                               content_loss_value[
                                                                                                   0],
                                                                                               style_loss_value[0]))
                result_img_path = os.path.join(output_dir, 'result_%05d.jpg' % (step + 1))
                result_val = result.eval(sess)[0]  # 将图像取出，因为之前是4维，所以需要使用一个索引0，将其取出

                result_val = np.clip(result_val, 0, 255)
                # np.clip() numpy.clip(a, a_min, a_max, out=None)[source]
                # 其中a是一个数组，后面两个参数分别表示最小和最大值

                img_arr = np.asarray(result_val, np.uint8)
                img = Image.fromarray(img_arr)
               img = img.resize((224, 224))
                img.save(result_img_path)

        return render_template('pic.html',val1=time.time())
# @app.route('/result_tensor/<filename>')
# def get_image(filename):
#     return send_from_directory(UPLOAD_PATH1,filename)
if __name__=='__main__':
    app.run()

from wtforms import Form,StringField,FileField
from flask_wtf.file import FileAllowed,FileRequired


class uploadForm(Form):
    checkFile=FileField(validators=[FileRequired(),FileAllowed(['.jpg','.png','gif'])])
    #flierequired验证文件不能为空，第二个代表文件后缀

import os
# VGG 自带的一个常量，之前VGG训练通过归一化，所以现在同样需要作此操作
VGG_MEAN = [103.939, 116.779, 123.68]  # rgb 三通道的均值

vgg16_npy_pyth = 'vgg16.npy'
# 内容图像 路径
content_img_path = 'images/content.jpg'


# 训练的步数
num_steps = 1000
# 学习率
learning_rate = 10

# 风格损失和内容损失
lambda_c = 0.8
lambda_s = 6000

# 输入 目录
output_dir = './static/result_tensor'

# -*- coding:utf-8 -*-

import os
import math
import numpy as np
import tensorflow as tf
from PIL import Image
import time
import setting
class VGGNet():
    '''
    创建 vgg16 网络 结构
    从模型中载入参数
    '''

    def __init__(self, data_dict):
        '''
        传入vgg16模型
        :param data_dict: vgg16.npy (字典类型)
        '''
        self.data_dict = data_dict

    def get_conv_filter(self, name):
        '''
        得到对应名称的卷积层
        :param name: 卷积层名称
        :return: 该卷积层输出
        '''
        return tf.constant(self.data_dict[name][0], name='conv')

    def get_fc_weight(self, name):
        '''
        获得名字为name的全连接层权重
        :param name: 连接层名称
        :return: 该层权重
        '''
        return tf.constant(self.data_dict[name][0], name='fc')

    def get_bias(self, name):
        '''
        获得名字为name的全连接层偏置
        :param name: 连接层名称
        :return: 该层偏置
        '''
        return tf.constant(self.data_dict[name][1], name='bias')

    def conv_layer(self, x, name):
        '''
        创建一个卷积层
        :param x:
        :param name:
        :return:
        '''
        # 在写计算图模型的时候，加一些必要的 name_scope，这是一个比较好的编程规范
        # 可以防止命名冲突， 二可视化计算图的时候比较清楚
        with tf.name_scope(name):
            # 获得 w 和 b
            conv_w = self.get_conv_filter(name)
            conv_b = self.get_bias(name)

            # 进行卷积计算
            h = tf.nn.conv2d(x, conv_w, strides=[1, 1, 1, 1], padding='SAME')
            '''
            因为此刻的 w 和 b 是从外部传递进来，所以使用 tf.nn.conv2d()
            tf.nn.conv2d(input, filter, strides, padding, use_cudnn_on_gpu = None, name = None) 参数说明：
            input 输入的tensor， 格式[batch, height, width, channel]
            filter 卷积核 [filter_height, filter_width, in_channels, out_channels] 
                分别是：卷积核高，卷积核宽，输入通道数，输出通道数
            strides 步长 卷积时在图像每一维度的步长，长度为4
            padding 参数可选择 “SAME” “VALID”

            '''
            # 加上偏置
            h = tf.nn.bias_add(h, conv_b)
            # 使用激活函数
            h = tf.nn.relu(h)
            return h

    def pooling_layer(self, x, name):
        '''
        创建池化层
        :param x: 输入的tensor
        :param name: 池化层名称
        :return: tensor
        '''
        return tf.nn.max_pool(x,
                              ksize=[1, 2, 2, 1],  # 核参数， 注意：都是4维
                              strides=[1, 2, 2, 1],
                              padding='SAME',
                              name=name
                              )

    def fc_layer(self, x, name, activation=tf.nn.relu):
        '''
        创建全连接层
        :param x: 输入tensor
        :param name: 全连接层名称
        :param activation: 激活函数名称
        :return: 输出tensor
        '''
        with tf.name_scope(name, activation):
            # 获取全连接层的 w 和 b
            fc_w = self.get_fc_weight(name)
            fc_b = self.get_bias(name)
            # 矩阵相乘 计算
            h = tf.matmul(x, fc_w)
            # 　添加偏置
            h = tf.nn.bias_add(h, fc_b)
            # 因为最后一层是没有激活函数relu的，所以在此要做出判断
            if activation is None:
                return h
            else:
                return activation(h)

    def flatten_layer(self, x, name):
        '''
        展平
        '''
        with tf.name_scope(name):
            # [batch_size, image_width, image_height, channel]
            x_shape = x.get_shape().as_list()
            # 计算后三维合并后的大小
            dim = 1
            for d in x_shape[1:]:
                dim *= d
            # 形成一个二维矩阵
            x = tf.reshape(x, [-1, dim])
            return x

    def build(self, x_rgb):
        '''
        创建vgg16 网络
        :param x_rgb: [1, 224, 224, 3]
        :return:
        '''
        start_time = time.time()
        print('模型开始创建……')
        # 将输入图像进行处理，将每个通道减去均值
        r, g, b = tf.split(x_rgb, [1, 1, 1], axis=3)
        '''
        tf.split(value, num_or_size_split, axis=0)用法：
        value:输入的Tensor
        num_or_size_split:有两种用法：
            1.直接传入一个整数，代表会被切成几个张量，切割的维度有axis指定
            2.传入一个向量，向量长度就是被切的份数。传入向量的好处在于，可以指定每一份有多少元素
        axis, 指定从哪一个维度切割
        因此，上一句的意思就是从第4维切分，分为3份，每一份只有1个元素
        '''
        # 将 处理后的通道再次合并起来
        x_bgr = tf.concat([b - setting.VGG_MEAN[0], g - setting.VGG_MEAN[1], r - setting.VGG_MEAN[2]], axis=3)

        #        assert x_bgr.get_shape().as_list()[1:] == [224, 224, 3]

        # 开始构建卷积层
        # vgg16 的网络结构
        # 第一层：2个卷积层 1个pooling层
        # 第二层：2个卷积层 1个pooling层
        # 第三层：3个卷积层 1个pooling层
        # 第四层：3个卷积层 1个pooling层
        # 第五层：3个卷积层 1个pooling层
        # 第六层： 全连接
        # 第七层： 全连接
        # 第八层： 全连接

        # 这些变量名称不能乱取，必须要和vgg16模型保持一致
        # 另外，将这些卷积层用self.的形式，方便以后取用方便
        self.conv1_1 = self.conv_layer(x_bgr, 'conv1_1')
        self.conv1_2 = self.conv_layer(self.conv1_1, 'conv1_2')
        self.pool1 = self.pooling_layer(self.conv1_2, 'pool1')

        self.conv2_1 = self.conv_layer(self.pool1, 'conv2_1')
        self.conv2_2 = self.conv_layer(self.conv2_1, 'conv2_2')
        self.pool2 = self.pooling_layer(self.conv2_2, 'pool2')

        self.conv3_1 = self.conv_layer(self.pool2, 'conv3_1')
        self.conv3_2 = self.conv_layer(self.conv3_1, 'conv3_2')
        self.conv3_3 = self.conv_layer(self.conv3_2, 'conv3_3')
        self.pool3 = self.pooling_layer(self.conv3_3, 'pool3')

        self.conv4_1 = self.conv_layer(self.pool3, 'conv4_1')
        self.conv4_2 = self.conv_layer(self.conv4_1, 'conv4_2')
        self.conv4_3 = self.conv_layer(self.conv4_2, 'conv4_3')
        self.pool4 = self.pooling_layer(self.conv4_3, 'pool4')

        self.conv5_1 = self.conv_layer(self.pool4, 'conv5_1')
        self.conv5_2 = self.conv_layer(self.conv5_1, 'conv5_2')
        self.conv5_3 = self.conv_layer(self.conv5_2, 'conv5_3')
        self.pool5 = self.pooling_layer(self.conv5_3, 'pool5')

        ''' 因为风格转换只需要 卷积层  的数据
        self.flatten5 = self.flatten_layer(self.pool5, 'flatten')
        self.fc6 = self.fc_layer(self.flatten5, 'fc6')
        self.fc7 = self.fc_layer(self.fc6, 'fc7')
        self.fc8 = self.fc_layer(self.fc7, 'fc8', activation = None)
        self.prob = tf.nn.softmax(self.fc8, name = 'prob')
        '''

        print('创建模型结束：%4ds' % (time.time() - start_time))



def initial_result(shape, mean, stddev):
    initial = tf.truncated_normal(shape, mean=mean, stddev=stddev)  # 一个截断的正态分布
    '''
    tf.truncated_normal(shape, mean, stddev) 生成截断的生态分布函数
    如果产生的正态分布值和均值差值大于二倍的标准差，那就重新生成。
    '''
    return tf.Variable(initial)


def read_img(img_name):
    '''
    读取图片
    '''
    img = Image.open(img_name)
    # 图像为三通道（224， 244， 3），但是需要转化为4维
    img=img.resize((448,448))
    # print(img.size[0],img.size[1])
    np_img = np.array(img)  # 224, 224, 3
    np_img = np.asarray([np_img], dtype=np.int32)  # 将生成的列表转化为 array (1, 224, 224, 3)
    return np_img


def gram_matrix(x):
    '''
    计算 gram 矩阵
    :param x: 特征图，shape：[1, width, height, channel]
    :return:
    '''
    b, w, h, ch = x.get_shape().as_list()
    # 这里求出来的是 每一个feature map之间的相似度
    features = tf.reshape(x, [b, h * w, ch])  # 将二三维的维度合并，已组成三维
    # 相似度矩阵 方法： 将矩阵转置为[ch, b*w], 再乘原矩阵，最后的矩阵是[ch , ch]
    # 防止矩阵数值过大，除以一个常数
    gram = tf.matmul(features, features, adjoint_a=True) / tf.constant(ch * w * h, tf.float32)  # 参数3， 表示将第一个参数转置
    return gram

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <style>
        body{
            background-image:url("{{ url_for('static',filename='img/1.jpg' )}}");

            margin: 0;
            padding: 0;
            background-image: url("{{ url_for('static',filename='img/1.jpg') }}");
            background-repeat: no-repeat;
            background-size:100%,100%;
        }
        .login_form{
            position: absolute;
            width: 300px;
            height: 200px;
            background-color: aliceblue;
            left: 1000px;
            top:120px;
            opacity: 0.8;
        }
        form{
            margin: 30px;
        }
        /*.info{*/
        /*    background-color: cyan;*/
        /*    width: 500px;*/
        /*    height: 250px;*/
        /*    position: absolute;*/
        /*    left:250px;*/
        /*    top:100px;*/
        /*    opacity: 0.5;*/
        /*}*/
    </style>
</head>
<body>
<!--        <div class="info">-->
<!--            <h>今日快讯</h>-->
<!--        </div>-->
        <div class="login_form">
            <form action="/login/" method="post">
            <table>
                <tr>
                    <td>账号：</td>
                    <td><input type="text " name="user"></td>
                </tr>


                <tr>
                    <td>密码：</td>
                    <td><input type="password" name="pwd"></td>
                </tr>

                <tr style="text-align: center">
                    <td><input type="submit" ></td>
                    <td><a href="{{ url_for('register') }}"><input type="button" value="注册"></a></td>
                </tr>
            </table>
        </form>
        </div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册</title>
    <style>
        body{
         background-image:url("{{ url_for('static',filename='img/6.jpg' )}}");
            background-repeat: no-repeat;
            background-size:100%,100%;
        }
        .zhuce{
            position: absolute;
            width: 370px;
            height: 450px;
            background-color: aliceblue;
            left: 1000px;
            top:120px;
         opacity: 0.8;
        }
    </style>
</head>
<body onload="YZM()">
     <div class="zhuce">
         <form action="/register/" method="post">
            <table>
                <tr>
               <td>账号：</td>
               <td><input type="text" name="uname"  id="uname" alt="账号" onblur="checkname()">
               <span id="uname_span"></span>
               </td>
            </tr>
            <tr>
               <td>密码：</td>
               <td><input type="password" name="pwd" id="pwd"  alt="密码" onblur="checkpwd()" >
               <span id="pwd_span"></span>
               </td>
            </tr>
                <tr>
               <td>性别：</td>
               <td>男：<input type="radio" name="sex" id="sex" value="1">
                   女：<input type="radio" name="sex" id="sex" value="0">
                  <span id="sex_span"></span>
               </td>
            </tr>
            <tr>
               <td>爱好：</td>
               <td>
                  <input type="checkbox" name="fav" id="fav" value="1">篮球
                  <input type="checkbox" name="fav" id="fav" value="2">足球
                  <input type="checkbox" name="fav" id="fav" value="3">排球
                  <br>
                  <input type="checkbox" name="fav" id="fav" value="4">吉他
                  <input type="checkbox" name="fav" id="fav" value="5">绘画
                  <input type="checkbox" name="fav" id="fav" value="6">书法
               </td>
            </tr>
            <tr>
               <td>籍贯：</td>
               <td>
                  <select value ="adr" name="adr">
                     <option value ="0">--请选择--</option>
                     <option value ="1">北京</option>
                     <option value ="2">上海</option>
                     <option value ="3">广州</option>
                     <option value ="4">深圳</option>
                  </select>
               </td>
            </tr>
            <tr>
               <td>验证码：</td>
               <td><input type="number" name="yzm" id="yzm">
               <span id="yzm_span"></span>
               </td>
            </tr>
            <tr>
               <td>个人介绍：</td>
               <td><textarea rows="8" cols="30" name="intext">
               </textarea></td>
            </tr>
            <tr>
               <td align="center" colspan="2">
                  <input type="checkbox" name="" id="check" value="">是否与本公司达成一致
               </td>
            </tr>
            <tr>
               <td align="center" colspan="2">
                  <input type="submit" value="提交">
               </td>
            </tr>
            </table>
     </form>
     </div>
</body>
<script>
    function YZM(){
         var num=Math.floor(Math.random()*9000+1000);
         var span=document.getElementById("yzm_span");
         span.innerText=num;
         span.style.backgroundColor="greenyellow";
      }
      function check(id,reg){
         var name=document.getElementById(id);
         var val=name.value;
         var alt=name.alt;
         var span=document.getElementById(id+"_span");
         if(val==" "||val==null){
         span.innerText="×"+alt+"不能为空";
          span.style.color="red";
         }
          else if(reg.test(val)){
            span.innerText="√"+alt+"正确";
            span.style.color="green";
         }
         else{
            span.innerText="×"+alt+"不合法";
            span.style.color="red";
            }
      }
      function checkname(){

         var reg=/^[1-9]{3,}$/;
         check("uname",reg);
      }
      function checkpwd(){

         var reg=/^[a-z]{3,4}$/;
         check("pwd",reg);
      }
</script>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .look{
            background-color: white;
            position: absolute;
            top:70px;
            left:500px;
            width: 500px;
            height: 600px;
            box-shadow:10px 0px 15px 5px;
        }
        img{
            width: 300px;
            height: 300px;
            margin: 100px;

        }
    </style>
</head>
<body>
<div class="look">
    <img src="{{url_for('static',filename='result_tensor/result_01000.jpg',_t=val1)}}">
</div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .one_style{
            background-color: aqua;
            position: absolute;
            top:70px;
            left:100px;
            width: 350px;
            height: 500px;

        }
        .two_style{
            background-color: aqua;
            position: absolute;
            top:70px;
            left:550px;
            width: 350px;
            height: 500px;
        }
        .three_style{
            background-color: aqua;
            position: absolute;
            top:70px;
            left:1000px;
            width: 350px;
            height: 500px;
        }
        img{
            width: 300px;
            height: 300px;
            margin: 23px;
        }
    </style>
</head>
<body>

    <div class="one_style">
        <img src="{{url_for('static',filename='img/style0.jpg')}}" >
        <form action="/upload/" method="post" enctype="multipart/form-data">
        <table>
            <tr>
                <td><input type="file" name="style0.jpg" ></td>
                <td><input type="submit" value="style0.jpg" name="sub"></td>
            </tr>
        </table>


    </form>
    </div>
    <div class="two_style">
        <img src="{{url_for('static',filename='img/style1.jpg ') }}">
        <form action="/upload/" method="post" enctype="multipart/form-data">
        <table>
            <tr>
                <td><input type="file" name="style1.jpg" ></td>
                <td><input type="submit" value="style1.jpg" name="sub"></td>
            </tr>
        </table>
    </div>
    <div class="three_style">
        <img src="{{url_for('static',filename='img/style2.jpg ') }}">
        <form action="/upload/" method="post" enctype="multipart/form-data">
        <table>
            <tr>
                <td><input type="file" name="style2.jpg" ></td>
                <td><input type="submit" value="style2.jpg" name="sub"></td>
            </tr>
        </table>
    </div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>主界面</title>
    <style>
        .one_style{
            background-color: white;
            position: absolute;
            top:70px;
            left:100px;
            width: 350px;
            height: 500px;
            box-shadow:2px 0px 4px 2px;

        }
        .two_style{
            background-color: white;
            position: absolute;
            top:70px;
            left:550px;
            width: 350px;
            height: 500px;
             box-shadow:2px 0px 4px 2px;
        }
        .three_style{
            background-color: white;
            position: absolute;
            top:70px;
            left:1000px;
            width: 350px;
            height: 500px;
            box-shadow:2px 0px 4px 2px;
        }
        img{
            width: 300px;
            height: 300px;
            margin: 23px;

        }
    </style>
</head>
<body>

    <div class="one_style">
        <img src="{{url_for('static',filename='img/style0.jpg')}}" >
        <form action="/upload/" method="post" enctype="multipart/form-data">
        <table>
            <tr>
                <td><input type="file" name="星月" ></td>
                <td><input type="submit" value="星月" name="sub"></td>
            </tr>
        </table>


    </form>
    </div>
    <div class="two_style">
        <img src="{{url_for('static',filename='img/style1.jpg ') }}">
        <form action="/upload/" method="post" enctype="multipart/form-data">
        <table>
            <tr>
                <td><input type="file" name="国风" ></td>
                <td><input type="submit" value="国风" name="sub"></td>
            </tr>
        </table>
    </div>
    <div class="three_style">
        <img src="{{url_for('static',filename='img/style2.jpg ') }}">
        <form action="/upload/" method="post" enctype="multipart/form-data">
        <table>
            <tr>
                <td><input type="file" name="现实" ></td>
                <td><input type="submit" value="现实" name="sub"></td>
            </tr>
        </table>
    </div>
</body>
</html>