<!DOCTYPE html>
<html>
<head>
    <title>Crowd People Counting</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet"
          integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">


    <link href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/popper.js/1.12.9/umd/popper.min.js"></script>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
    <link href="{{ url_for('static', filename='css/main.css') }}" rel="stylesheet">
</head>
<body>


<div class="container-fluid p-3 text-white text-center" style="background-color: #00ade7">
    <div class="row">
        <div class="col-2">
            <img src="{{ url_for('static', filename='logo.png') }}" height="100px" width="100px">
        </div>
        <div class="col-6" style="text-align: left;">
            <h1>Crowd People Analysis</h1>
            <p>Crowd people counting and Analysis !</p>
        </div>
    </div>
</div>

<div class="container mt-5">
    <div class="row">
        <div class="col-md-3">
            <span class="form-label"><b>Select Image</b></span>

            <form id="upload-file" method="post" enctype="multipart/form-data">
                <!--                <select class="form-select col-md-2" aria-label="Default Select Example" style="">-->
                <!--                    <option selected>Select Model</option>-->
                <!--                    <option value="Mobilenet">Mobilenet</option>-->
                <!--                    <option value="Resnet 50">Resnet 50</option>-->
                <!--                    <option value="VGG16">VGG16</option>-->
                <!--                </select>-->


                <label for="imageUpload" class="upload-label1 label form-label icon">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 612" height="50px" width="50px">
                        <path d="M144 480C64.47 480 0 415.5 0 336C0 273.2 40.17 219.8 96.2 200.1C96.07 197.4 96 194.7 96 192C96 103.6 167.6 32 256 32C315.3 32 367 64.25 394.7 112.2C409.9 101.1 428.3 96 448 96C501 96 544 138.1 544 192C544 204.2 541.7 215.8 537.6 226.6C596 238.4 640 290.1 640 352C640 422.7 582.7 480 512 480H144zM223 263C213.7 272.4 213.7 287.6 223 296.1C232.4 306.3 247.6 306.3 256.1 296.1L296 257.9V392C296 405.3 306.7 416 320 416C333.3 416 344 405.3 344 392V257.9L383 296.1C392.4 306.3 407.6 306.3 416.1 296.1C426.3 287.6 426.3 272.4 416.1 263L336.1 183C327.6 173.7 312.4 173.7 303 183L223 263z"/>
                    </svg>
                    Upload Image....</i>
                </label>
                <input type="file" hidden name="file" id="imageUpload" accept=".png, .jpg, .jpeg, .PNG, .JPG, .JPEG">
            </form>
        </div>
        <div class="col-10">
            <!--            <img src="{{ url_for('static', filename='4.png') }}" width="1090px">-->
        </div>
    </div>

    <div class="row">
        <div class="col-md-6">
            <div class="image-section">
                <div class="img-preview">
                    <div id="imagePreview">

                    </div>
                </div>
                <br>
                <div>
                    <button type="button" class="btn btn-primary btn-lg " id="btn-predict">Predict!</button>
                </div>
            </div>
        </div>
    </div>
    <br>
    <div class="loader" style="display:none;"></div>
    <div class="row">
        <div class="col-md-6">

            <h5 scope="col"><b>Predicted Output</b></h5>
            <hr>


            <h3 id="result">
                <span> </span>
            </h3>
            <div>
                <label>Estimate Total People - </label>
            </div>
        </div>

        <!--    <div class="bs-component">-->
        <!--            <table class="table table-hover">-->
        <!--                <tr class="table-active">-->

        <!--                  <th scope="col">Predict</th>-->
        <!--                </tr>-->
        <!--                <tr>-->
        <!--                         <td> <img width="350" height="400" src="{{ user_image }}"> </td>-->
        <!--                  </tr>-->
        <!--            </table>-->
        <!--        </div>-->

    </div>

</div>

</body>
<footer>
    <script src="{{ url_for('static', filename='js/main.js') }}" type="text/javascript"></script>
</footer>
</html>


















