{% extends "base.html" %} {% block content %}
<!--<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>-->
<!--<link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/css/bootstrap-select.css" rel="stylesheet"/>-->
<!--<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>-->
<!--<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>-->
<!--<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/js/bootstrap-select.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">

<h5>Car Detection using CNN,<br>
    choose one of the model to predict object detection of car!</h5><br>

<div>
    <span class="form-label"><b>Select Model  </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="display:inline">
            <option selected>Select Model</option>
            <option val="Mobilenet"> Mobilenet</option>
            <option val="Resnet 50"> Resnet 50</option>
            <option val="VGG16"> VGG16</option>
            Select Mode </select> &nbsp;&nbsp;
        <label for="imageUpload" class="upload-label form-label">
            Choose Image...
        </label>
        <input type="file" hidden name="file" id="imageUpload" accept=".png, .jpg, .jpeg">
    </form>

    <!--    <div class="col-md-12">-->
    <!--        <div id="img_show">-->

    <!--        </div>-->
    <!--    </div>-->

    <div class="image-section">
        <div class="img-preview">
            <div id="imagePreview">

            </div>
        </div>
        <div>
            <button type="button" class="btn btn-primary btn-lg " id="btn-predict">Predict!</button>
        </div>
    </div>

    <div class="loader" style="display:none;"></div>

    <br>
    <h5 scope="col"><b>Predicted Output</b></h5>
    <hr>
    <h3 id="result" class="col-md-5">
        <span> </span>
    </h3>
    <div>
        <label>Detected Car Name - </label>
    </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>

{% endblock %}