index.html 2.98 KB
<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
        integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/layout.css') }}">
    <title>Flask Face Emotion Recognition App</title>
</head>

<body>

    <div class="container" style="justify-self: center;  margin-top: 100px;">
        <h3>Face Emotion Recognition Platform</h3>
        <hr>

        {% if face_imgs == [] %}
        <div class="alert alert-warning" role="alert">
            No face images available
        </div>
        {% else %}
        <table class="table table-bordered" style="width: 100%; height: 40%;">
            <thead>
                <tr>
                    <th scope="col ">id</th>
                    <th scope="col">Name</th>
                    <th scope="col">Image</th>
                    <th scope="col">Delete</th>
                </tr>
            </thead>
            <tbody>

                {% for face_img in face_imgs %}
                <tr>
                    <th scope="row">{{ face_img.id }}</th>
                    <td>{{ face_img.name }}</td>
                    <td><img src={{ url_for('static', filename=face_img.imgUrl) }} width="80" height="90"></td>
                    <td><a href="/deleteFace/{{ face_img.name }}" class="btn btn-danger btn-sm">Delete</a></td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
        {% endif %}


        <form action="http://localhost:5000/uploadFace" method="POST" enctype="multipart/form-data">
            <div class="form-group" style="margin-top: 100px;">
                <label for="title" class="text-uppercase">Face Upload</label>
                <input type="file" style="margin-left: 10px;" name="file">
                <button type="submit" class="btn btn-primary btn-sm">Add Face Image</button>
                <a href="/goTest" type="button" class="btn btn-primary btn-sm">Analysis Your Video </a>
            </div>
        </form>
    </div>


    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
        integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
        crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
        integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
        crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
        integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
        crossorigin="anonymous"></script>
</body>

</html>