JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://unpkg.com/prop-types@15.5.10/prop-types.js"></script>
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<!DOCTYPE html>
<html>
<head>
<title> test greet app </title>
<style>
* {
font-size: 30px;
}
</style>
</head>
<body>
<input id="image-selector" type="file">
<button id="predict-button">Predict</button>
<p style="font-weight:bold">Predictions</p>
<p>angry: <span id="angry"></span></p>
<p>scared: <span id="scared"></span></p>
<p>happy: <span id="happy"></span></p>
<p>sad: <span id="sad"></span></p>
<p>surprised: <span id="surprised"></span></p>
<p>neutral: <span id="neutral"></span></p>
<img id="selected-image" src=""/>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</body>
</html>
Babel + JSX
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/jpeg;base64,","");
console.log(base64Image);
}
reader.readAsDataURL($("#image-selector")[0].files[0]);
$("#angry").text("");
$("#scared").text("");
$("#happy").text("");
$("#sad").text("");
$("#surprised").text("");
$("#neutral").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){
$("#angry").text(response.prediction.angry.toFixed(6));
$("#scared").text(response.prediction.scared.toFixed(6));
$("#happy").text(response.prediction.happy.toFixed(6));
$("#sad").text(response.prediction.sad.toFixed(6));
$("#surprised").text(response.prediction.surprised.toFixed(6));
$("#neutral").text(response.prediction.neutral.toFixed(6));
console.log(response);
});
});