predict.html 1.49 KB
Newer Older
Fia's avatar
Fia committed
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Hello, GNOME!</title>

        <style type="text/css">
            body {
                font-face: Cantarell, sans-serif;
                text-align: center; }
        </style>

    </head>
    <body>
        <input id="name-input" types="text">
        <button id="name-button">Submit Name</button>
        <p><span id="dog-prediction"></span></p>
        
        <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 = funciton(e) {
        			let dataURL = reader.result;
        			$('#selected-image').attr("src", dataURL);
        			base64Image = dataURL.replace("date:image/png;base64,", "");
        			console.log(base64Image);
        		}
        		reader.readAsDataURL($("#image-selector")[0].files[0]);
        		alert('aaaaaa');
        	});
            $("#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){
                    $("#dog-prediction").text(response.greeting);
                    console.log(response);
                });
            });

        </script>
    </body>
</html>