index.html

{% extends "base.html" %} {% block content %}

<h2 style = "color: #F8F8F8;">Food Classifier</h2>
<style> .footer {
   position: fixed;
   left: 0;
   bottom: 0;
   width: 100%;
   background-color: #2dcba7;
   color: black;
   text-align: center;
   font-size: 25px;
   font-weight: bold;
}</style>

<div>
    <form id="upload-file" method="post" enctype="multipart/form-data">
        <label for="imageUpload" class="upload-label">
            Choose Food...
        </label>
        <input type="file" name="file" id="imageUpload" accept=".png, .jpg, .jpeg">
    </form>

    <div class="image-section" style="display:none;">
        <div class="img-preview">
            <div id="imagePreview">
            </div>
        </div>
        <div>
            <button type="button" class="btn btn-primary btn-lg " id="btn-predict">Predict Food</button>
        </div>
    </div>

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

    <h3 id="result" style = "color: #F8F8F8;">
        <span> </span>
    </h3>

</div>

{% endblock %}