predict.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Welcome</title>
    <style>
        *{
        font-size:30px;
        }
    </style>
</head>
<body>
    <!--<form id='upload' action="{{ url_for('predict') }}" method="post" >-->
    <input id="image-selector" type="file">
    <button id="predict-button">Predict</button>
    <p style="font-weight:bold">Predictions</p>
    <p>Mask: <span id="Mask-prediction"></span></p>
    <p>Non_mask: <span id="NMask-prediction"></span></p>
    <img id="selected-image" src=""/>
    </form>
   <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script>
        let base64Image;
        $("#image-selector").change(function(){
        let reader=new FileReader();
        reader.onload=function(e) {
            let dataURL=reader.result;
            $('#selected-image').attr("src",dataURL);
            base64Image=dataURL.replace("data:image/png;base64,","");
            console.log(base64Image);
        }
        reader.readAsDataURL($("#image-selector")[0].files[0]);
        $("#Mask-prediction").text("");
        $("#NMask-prediction").text("");
        });
        $("#predict-button").click(function(event){
        let message={
        image: base64Image
        }
        console.log(message);
        $.post("http://127.0.0.1:5000/predict",JSON.stringify(message),function(response){
            $("#Mask-prediction").text(response.prediction.mask.toFixed(6));
            $("#NMask-prediction").text(response.prediction.non_mask.toFixed(6));
            console.log(response);
        });

    });
    </script>
</body>
</html>