CINXE.COM

<!DOCTYPE html> <html lang="en"> <head> <title>Demonstration Program</title> <link rel="icon" href="favicon.ico" type="image/x-icon" /> <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" /> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1">   <link href="lib/flaticon/font/flaticon.css" rel="stylesheet">  <link href="lib/owlcarousel/assets/owl.carousel.min.css" rel="stylesheet"> <link href="lib/lightbox/css/lightbox.min.css" rel="stylesheet">  <link href="css/style.css" rel="stylesheet">  <link href="https://fonts.googleapis.com/css2?family=Montserrat&family=Oswald:wght@400;500;600&display=swap" rel="stylesheet">  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.0/css/all.min.css" rel="stylesheet">  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">  <link href="lib/flaticon/font/flaticon.css" rel="stylesheet">  <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.bundle.min.js"></script> <script src="lib/easing/easing.min.js"></script> <script src="lib/owlcarousel/owl.carousel.min.js"></script> <script src="lib/isotope/isotope.pkgd.min.js"></script> <script src="lib/lightbox/js/lightbox.min.js"></script>  <script src="mail/jqBootstrapValidation.min.js"></script> <script src="mail/contact.js"></script>  <script src="js/main.js"></script>  </head> <body> <style> body { background-color: gray; } .responsive-iframe { position: absolute; top: 0; left: 0; bottom: 0; right: 0; width: 150%; height: 70%; border: none; } </style> <style> .btn { background-color: #b36b00; /* orange = #ff9900;, DodgerBlue;*/ border: none; color: white; padding: 12px 30px; cursor: pointer; font-size: 20px; } /* Darker background on mouse-over */ .btn:hover { background-color: white; } #myBtn { display: none; position: fixed; bottom: 20px; right: 25px; z-index: 99; font-size: 15px; border: none; outline: none; background-color: #ff9900; color: white; cursor: pointer; /*padding: 15px;*/ border-radius: 4px; padding : 3px 20px; opacity: 0.75; animation: mymove 3s; animation-iteration-count: infinite; } @keyframes mymove { from {bottom: 20px;} to {bottom: 25px;} from {bottom: 25px;} to {bottom: 35px;} from {bottom: 35px;} to {bottom: 40px;} from {bottom: 40px;} to {bottom: 35px;} from {bottom: 55px;} to {bottom: 25px;} from {bottom: 25px;} to {bottom: 20px;} } #myBtn:hover { background-color: #555; } /* Styles for website counter container */ .website-counter { background-color: #ff9900; height: 30px; width: 80px; position: fixed; bottom: 20px; left: 22px; color: white; border-radius: 10px; font-weight: 700; font-size: 15px; margin-bottom: 3px; opacity: 0.10; padding : 5px 5px; } /* Styles for reset button */ #reset { margin-top: 20px; background-color: #008cba; cursor: pointer; font-size: 18px; padding: 8px 20px; color: white; border: 0; } .switch {position: relative; display: inline-block; width: 135px; height: 68px} .switch input {display: none} .slider {position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; border-radius: 34px} .slider:before {position: absolute; content: ""; height: 52px; width: 52px; left: 8px; bottom: 8px; background-color: #fff; -webkit-transition: .4s; transition: .4s; border-radius: 68px} input:checked+.slider {background-color: orange} /*#2196F3}*/ input:checked+.slider:before {-webkit-transform: translateX(67px); -ms-transform: translateX(67px); transform: translateX(67px)} /*.switch {position: relative; display: inline-block; width: 150px; height: 68px} */ /*.switch input {display: none} */ /*.slider {position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; border-radius: 34px} */ /*.slider:before {position: absolute; content: ""; height: 52px; width: 52px; left: 8px; bottom: 8px; background-color: #fff; -webkit-transition: 1.0s; transition: 1.0s; border-radius: 68px} */ /*input:checked+.slider {background-color: orange} */ /*#2196F3} background color when switch on*/ /*input:checked+.slider:before {-webkit-transform: translateX(82px); -ms-transform: translateX(82px); transform: translateX(82px)} */ /*original size*/ /*.switch {position: relative; display: inline-block; width: 120px; height: 68px} */ /*.switch input {display: none} */ /*.slider {position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; border-radius: 34px} */ /*.slider:before {position: absolute; content: ""; height: 52px; width: 52px; left: 8px; bottom: 8px; background-color: #fff; -webkit-transition: .4s; transition: .4s; border-radius: 68px} */ /*input:checked+.slider {background-color: #2196F3} */ /*#2196F3}*/ /*input:checked+.slider:before {-webkit-transform: translateX(52px); -ms-transform: translateX(52px); transform: translateX(52px)} */ .button7 { background-color: #f0f5f5; color: black; border: 3px outset #808080; box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19); } .button7:active { background-color: #555555; box-shadow: 0 1px 1px 1px #666; transform: translateY(4px); } </style> <style> #Btn1 { display: none; position: fixed; bottom: 20px; right: 20px; z-index: 99; font-size: 10px; border: none; outline: none; background-color: white; color: white; cursor: pointer; padding: 3px 1px; border-radius: 4px; opacity: 0.40; animation: mymove 3s; animation-iteration-count: infinite; } @keyframes mymove { from {bottom: 20px;} to {bottom: 25px;} from {bottom: 25px;} to {bottom: 30px;} from {bottom: 30px;} to {bottom: 35px;} from {bottom: 35px;} to {bottom: 40px;} from {bottom: 40px;} to {bottom: 35px;} from {bottom: 35px;} to {bottom: 30px;} from {bottom: 30px;} to {bottom: 25px;} from {bottom: 25px;} to {bottom: 20px;} } #Btn1:hover { background-color: #555; } code { font-family: "Helvetica Neue"; color: black; font: bold; font-size: 110%; } </style>  <div class="container"> <div class="jumbotron text-center" style="border-bottom-left-radius: 15px 10px;border-bottom-right-radius: 15px 10px;"> <h3 class="text-primary font-weight-normal text-uppercase mb-3" >demostration program<br> <h4 style="color:black;">AI inference Temp-Time</h4> </h3> <h1 class="mb-3" style="text-align:center; ">Biomass Torrefaction</h1> <p style="text-align:center;font-size:30px;font-weight: bold;"> <p style="text-align:center;font-size:20px"></p>   <p> </div> <div class="jumbotron text-center" style="border-radius: 15px 10px;"> <h4 style="font-size:25px; border-style: outset;border-color: lightgray; border-radius: 10px; color: black; background-color:white ; padding: 20px">Input Data<span id="inf2" ></span></h4> <p style="text-align:center; color: white;"> <input type='text' class="form-control input-lg" name='temp' id='label1' style="font-size: 20px;text-align : center; font-weight: 900; color:orange; background-color: black; border-radius: 10px 10px 0px 0px; display : block" value="C %" readonly> <input type="number" step="0.1" class="form-control input-lg" id="var1" value = "53.0" style="font-size: 40px; text-align : center; padding : 25px; font-weight: 900; color:#5D6D7E; border-radius: 0px 0px 10px 10px; display : block"><br> <input type='text' class="form-control input-lg" name='temp' id='label2' style="font-size: 20px;text-align : center; font-weight: 900; color:orange; background-color: black; border-radius: 10px 10px 0px 0px; display : block" value="H %" readonly> <input type="number" step="0.1" class="form-control input-lg" id="var2" value = "4.8" style="font-size: 40px; text-align : center; padding : 25px; font-weight: 900; color:#5D6D7E; border-radius: 0px 0px 10px 10px; display : block"><br> <input type='text' class="form-control input-lg" name='temp' id='label3' style="font-size: 20px;text-align : center; font-weight: 900; color:orange; background-color: black; border-radius: 10px 10px 0px 0px; display : block" value="O %" readonly> <input type="number" step="0.1" class="form-control input-lg" id="var3" value = "33.9" style="font-size: 40px; text-align : center; padding : 25px; font-weight: 900; color:#5D6D7E; border-radius: 0px 0px 10px 10px; display : block"><br> <input type='text' class="form-control input-lg" name='temp' id='label4' style="font-size: 20px;text-align : center; font-weight: 900; color:orange; background-color: black; border-radius: 10px 10px 0px 0px; display : block" value="N %" readonly> <input type="number" step="0.1" class="form-control input-lg" id="var4" value = "0.6" style="font-size: 40px; text-align : center; padding : 25px; font-weight: 900; color:#5D6D7E; border-radius: 0px 0px 10px 10px; display : block"><br> <input type='text' class="form-control input-lg" name='temp' id='label5' style="font-size: 20px;text-align : center; font-weight: 900; color:orange; background-color: black; border-radius: 10px 10px 0px 0px; display : block" value="Humid %" readonly> <input type="number" step="0.1" class="form-control input-lg" id="var5" value = "10.0" style="font-size: 40px; text-align : center; padding : 25px; font-weight: 900; color:#5D6D7E; border-radius: 0px 0px 10px 10px; display : block"><br> <input type='text' class="form-control input-lg" name='temp' id='label6' style="font-size: 20px;text-align : center; font-weight: 900; color:orange; background-color: black; border-radius: 10px 10px 0px 0px; display : block" value="Volatile %" readonly> <input type="number" step="0.1" class="form-control input-lg" id="var6" value = "52.2" style="font-size: 40px; text-align : center; padding : 25px; font-weight: 900; color:#5D6D7E; border-radius: 0px 0px 10px 10px; display : block"><br> <input type='text' class="form-control input-lg" name='temp' id='label7' style="font-size: 20px;text-align : center; font-weight: 900; color:orange; background-color: black; border-radius: 10px 10px 0px 0px; display : block" value="Fix C %" readonly> <input type="number" step="0.1" class="form-control input-lg" id="var7" value = "40.1" style="font-size: 40px; text-align : center; padding : 25px; font-weight: 900; color:#5D6D7E; border-radius: 0px 0px 10px 10px; display : block"><br> <input type='text' class="form-control input-lg" name='temp' id='label8' style="font-size: 20px;text-align : center; font-weight: 900; color:orange; background-color: black; border-radius: 10px 10px 0px 0px; display : block" value="Ash %" readonly> <input type="number" step="0.1" class="form-control input-lg" id="var8" value = "7.7" style="font-size: 40px; text-align : center; padding : 25px; font-weight: 900; color:#5D6D7E; border-radius: 0px 0px 10px 10px; display : block"><br> <input type='text' class="form-control input-lg" name='temp' id='label9' style="font-size: 20px;text-align : center; font-weight: 900; color:orange; background-color: black; border-radius: 10px 10px 0px 0px; display : block" value="Yield %" readonly> <input type="number" step="0.1" class="form-control input-lg" id="var9" value = "76.5" style="font-size: 40px; text-align : center; padding : 25px; font-weight: 900; color:#5D6D7E; border-radius: 0px 0px 10px 10px; display : block"><br> <input type='text' class="form-control input-lg" name='temp' id='label10' style="font-size: 20px;text-align : center; font-weight: 900; color:orange; background-color: black; border-radius: 10px 10px 0px 0px; display : block" value="HHV MJ/kg" readonly> <input type="number" step="0.1" class="form-control input-lg" id="var10" value = "20.5" style="font-size: 40px; text-align : center; padding : 25px; font-weight: 900; color:#5D6D7E; border-radius: 0px 0px 10px 10px; display : block"> <div class='modal-footer'>  </div> <button type="button" class="button7" id="predict" onclick="predict()" style="color: white; padding: 15px; width: 98%;background-color: #4d94ff; border-radius: 5px; font-size:20px; font-weight: 400;">Predict</button>  <br> <br> <h4 style="font-size:22px; border-style: outset;border-color: lightgray; border-radius: 10px; color: #4d94ff; background-color: white; padding: 20px; font-weight: 300;">Inference Result<span id="inf1" ></span></h4> <input type='text' class="form-control input-lg" name='temp' id='label11' style="font-size: 20px;text-align : center; font-weight: 900; color:#4d94ff; background-color: black; border-radius: 10px 10px 0px 0px;" value="Temperature (C)" readonly>  <input type="text" class="form-control input-lg" id="temper" value = "200.07" style="font-size: 50px; text-align : center; padding : 50px; font-weight: 900; color:#f5f8fc; background-color: orange; border-radius: 0px 0px 10px 10px; " readonly><br>  <input type='text' class="form-control input-lg" name='temp' id='label12' style="font-size: 20px;text-align : center; font-weight: 900; color:#4d94ff; background-color: black; border-radius: 10px 10px 0px 0px;" value="Time (Min)" readonly> <input type="text" class="form-control input-lg" id="time" value = "30.08" style="font-size: 50px; text-align : center; padding : 50px; font-weight: 900; color:#f5f8fc; background-color: orange;border-radius: 0px 0px 10px 10px; " readonly> <br> <div class='modal-footer'>  </div> <h4 style="font-size:22px; border-style: outset;border-color: lightgray; border-radius: 10px; color: red; background-color: white; padding: 20px"; font-weight: 300;>Actual Temp-Time contribution</h4> <br> <button type="button" class="button7" id="dialog1" data-toggle="modal" data-target="#myModal" style="color: white; padding: 15px; width: 99%;background-color: #4d94ff; border-radius: 5px; font-size:20px; font-weight: 600">Contribute Data</button>  </p> </div>  <div class="container-fluid bg-light pt-5" style="text-align:center;border-top-left-radius: 15px 10px;border-top-right-radius: 15px 10px;">  <a href="http://www.dicmapi.unina.it" target="_blank" style="text-align:center"> <img src="image/Napoli_university_seal.png" alt="unina" width="90">      </a> <a href="https://www.ku.ac.th/en/faculty-of-engineering-at-kamphaeng-saen" target="_blank" style="text-align:center">  <img src="image/kulogo.png" alt="ku" width="90">  </a> <br><br> <a href="https://www.strath.ac.uk/staff/lijundr/" target="_blank" style="text-align:center"> <img src="image/the-university-of-strathclyde-logo_2.png" alt="unina" width="120">      </a> <a href="https://ase-society.org/" target="_blank" style="text-align:center">  <img src="image/SASE.png" alt="SASE" width="120">  </a> <br> <h1></h1> <p></p> <h6>Developed by</h6>   <a data-toggle="modal" href="#myModal3" style="text-align:center; color:#003333;"> <h6 class="mb-4" style="color:#003333; font-family: 'Helvetica Neue';"><code>A</code>pplica<code>T</code>ion of mac<code>H</code>ine <code>LE</code>arning to<br>  <code>T</code>hermochemical b<code>I</code>omass pro<code>C</code>e<code>S</code>ses Network   </h6> <p style="font-size:11px; color: #003333;">about</p> <h4 style="font-size:15px; border-style: none;border-color: lightgray; border-radius: 10px; color: orange; background-color: white; padding: 10px 1px 14px 1px; font-weight: 100;text-decoration: underline; position: relative; top: -15px;">ATHLETICS NET<br><br> <img src="image/ATHLETICS_logo.png" alt="ku" width="100"> </h4>   </a> <h5 class="mb-4"><a href="mailto:kitipong.j@live.ku.th;fabrizio.scala@unina.it" style="text-align:center; text-decoration: underline; font-size: 14px">contact us</a> <h6 style="font-size:6px;"> <a href='http://www.freevisitorcounters.com' style="text-align:center; color:#003333;">freevisitorcounterss Homepage</a> <script type='text/javascript' src='https://www.freevisitorcounters.com/auth.php?id=9433ff4c32e73e7f46201f426e11e3488d60ba3f'></script> <script type="text/javascript" src="https://www.freevisitorcounters.com/en/home/counter/988298/t/5"></script> </h6> </h5> </div>   <button data-toggle="modal" data-target="#myModal3" id="Btn1" title="about ATHLETICS"><img src="image/ATHLETICS_logo.png" alt="ku" width="50"></button>   <div class="modal" id="myModal" data-toggle="modal" data-backdrop="static"> <div class="modal-dialog" > <div class="modal-content" style="border-radius: 5px;">  <div class="modal-header"> <h4 class="modal-title">Fillup Actual Temp-Time</h4> <button type="button" class="close" data-dismiss="modal">×</button> </div>  <div class="modal-body"> <input type='text' class="form-control input-lg" name='temp' id='label_0' style="font-size: 15px;text-align : center; font-weight: 400; color:orange; background-color: black; border-radius: 10px 10px 0px 0px; display : block" value="Humid-C-H-O-N" readonly> <input type="text" class="form-control input-lg" id="var_0" value = "10.0-53.0-4.8-33.9-0.6" style="font-size: 21px; text-align : center; padding : 20px; font-weight: 400; color:#5D6D7E; border-radius: 0px 0px 10px 10px; display : block"><br> <input type='text' class="form-control input-lg" name='temp' id='label_00' style="font-size: 15px;text-align : center; font-weight: 400; color:orange; background-color: black; border-radius: 10px 10px 0px 0px; display : block" value="FixC-VM-Ash-Yield-HHV" readonly> <input type="text" class="form-control input-lg" id="var_00" value = "40.1-52.2-7.7-76.5-20.5" style="font-size: 21px; text-align : center; padding : 20px; font-weight: 400; color:#5D6D7E; border-radius: 0px 0px 10px 10px; display : block"><br> <input type='text' class="form-control input-lg" name='temp' id='label_1' style="font-size: 20px;text-align : center; font-weight: 900; color:orange; background-color: black; border-radius: 10px 10px 0px 0px; display : block" value="Actual Temp(C)" readonly> <input type="number" step="0.1" class="form-control input-lg" id="var_1" value = "200.07" style="font-size: 40px; text-align : center; padding : 40px; font-weight: 900; color:#5D6D7E; border-radius: 0px 0px 10px 10px; display : block"><br> <input type='text' class="form-control input-lg" name='temp' id='label_2' style="font-size: 20px;text-align : center; font-weight: 900; color:orange; background-color: black; border-radius: 10px 10px 0px 0px; display : block" value="Actual Time(Min)" readonly> <input type="number" step="0.1" class="form-control input-lg" id="var_2" value = "30.0" style="font-size: 40px; text-align : center; padding : 40px; font-weight: 900; color:#5D6D7E; border-radius: 0px 0px 10px 10px; display : block"><br> </div>  <div class="modal-footer"> </div> <div class="modal-body"> <input type='text' class="form-control input-lg" name='temp' id='label_3' style="font-size: 15px;text-align : center; font-weight: 450; color:orange; background-color: gray; border-radius: 10px 10px 0px 0px; display : block" value="Contributor Name" readonly> <input type="text" class="form-control input-lg" id="var_3" placeholder="your name (option)" style="font-size: 20px; text-align : center; padding : 20px; font-weight: 400; color:#5D6D7E; border-radius: 0px 0px 10px 10px; display : block"><br> <input type='text' class="form-control input-lg" name='temp' id='label_4' style="font-size: 15px;text-align : center; font-weight: 450; color:orange; background-color: gray; border-radius: 10px 10px 0px 0px; display : block" value="Affiliation" readonly> <input type="text" class="form-control input-lg" id="var_4" placeholder="your Affiliation (option)" style="font-size: 20px; text-align : center; padding : 20px; font-weight: 400; color:#5D6D7E; border-radius: 0px 0px 10px 10px; display : block"><br> <input type='text' class="form-control input-lg" name='temp' id='label_5' style="font-size: 15px;text-align : center; font-weight: 450; color:orange; background-color: gray; border-radius: 10px 10px 0px 0px; display : block" value="email" readonly> <input type="email" class="form-control input-lg" id="var_5" placeholder="your email (option)" style="font-size: 20px; text-align : center; padding : 20px; font-weight: 400; color:#5D6D7E; border-radius: 0px 0px 10px 10px; display : block"><br> </div> <div class="modal-footer"> <button type="button" class="button7" data-dismiss="modal" onclick="savedata()" style="color: white; padding: 15px; width: 98%; border-radius: 5px; background-color: red; font-weight: 900;" >Submit</button>  </div> </div> </div> </div>  <div class="modal" id="myModal1" data-toggle="modal" data-backdrop="static"> <div class="modal-dialog" > <div class="modal-content" style="border-radius: 5px;">  <div class="modal-header"> <h4 class="modal-title">Data submission response</h4> <button type="button" class="close" data-dismiss="modal">×</button> </div>  <div class="modal-body" id="reply"> </div>  <p id="thank" ></p>  <div class="modal-footer"> <button type="button" class="button7" data-dismiss="modal" style="color: white; padding: 15px; width: 98%; border-radius: 5px; background-color: black; font-weight: 900;">OK</button> </div> </div> </div> </div>  <div class="modal" id="myModal2" data-toggle="modal" data-backdrop="static"> <div class="modal-dialog" > <div class="modal-content" style="border-radius: 5px;">  <div class="modal-header"> <h4 class="modal-title">Error!</h4> <button type="button" class="close" data-dismiss="modal">×</button> </div>  <div class="modal-body" id="reply1"> </div>  <div class="modal-footer"> <button type="button" class="button7" data-dismiss="modal" style="color: white; padding: 15px; width: 98%; border-radius: 5px; background-color: black;">OK</button> </div> </div> </div> </div>   <div class="modal" id="myModal3" data-toggle="modal" data-backdrop="static"> <div class="modal-dialog" > <div class="modal-content" style="border-radius: 5px;">  <div class="modal-header"> <h4 class="modal-title">About ATHLETICS NET</h4> <button type="button" class="close" data-dismiss="modal">×</button> </div>  <div class="modal-body" id="reply2" style=""> <p style="color: #4d94ff; font-size: 15px;">The aim of the ATHLETICS network is to apply research work to serve real-world applications for all.聽Thanks to the deep machine learning technique, we transform useful research data to provide adequate information to simulate biomass thermochemical applications such as torrefaction, pyrolysis, gasification, etc.聽However, our scope is not limited to just biomass processes, if you have useful research data and would like to serve people聽please contact us.聽We are available to develop the App for you and to include it in our services (your name and organization will be included in the network).</p> <p style="text-decoration: underline; color: black">The network members</p> <h6 class="mb-4" style="border-style: outset;border-color: lightgray; border-radius: 10px; color: black; background-color: white; padding: 10px"> <p style="font-size: 15px; text-decoration: underline;">Network Head</p> Prof. Fabrizio Scala, Ph.D.<br> <a style="color:gray;">Dipartimento di Ingegneria Chimica, dei Materiali e della Produzione Industriale<br> Universit脿 degli Studi di Napoli Federico II</a><br> <a href="mailto:fabrizio.scala@unina.it" style="text-decoration: underline;">fabrizio.scala@unina.it</a> </h6> <h6 class="mb-4" style="border-style: outset;border-color: lightgray; border-radius: 10px; color: black; background-color: white; padding: 10px"> <p style="font-size: 15px; text-decoration: underline;">Network Secretary</p> Assoc.Prof. Kitipong Jaojaruek, D.Eng.<br> <a style="color:gray;">Department of Mechanical Engineering, Faculty of Engineering at Kamphaeng Saen<br> Kasetsart University</a><br> <a href="mailto:kitipong.j@ku.th" style="text-decoration: underline;">kitipong.j@ku.th</a> </h6> <h6 class="mb-4" style="border-style: outset;border-color: lightgray; border-radius: 10px; color: black; background-color: white; padding: 10px"> <p style="font-size: 15px; text-decoration: underline;">Network Partner</p> Fiona LEE<br> <a style="color:gray;">Society of Advanced Science and Engineering (SASE)</a><br> <a href="mailto:fionalee@ase-society.org" style="text-decoration: underline;">fionalee@ase-society.org</a> </h6> <h6 class="mb-4" style="border-style: outset;border-color: lightgray; border-radius: 10px; color: black; background-color: white; padding: 10px"> <p style="font-size: 15px; text-decoration: underline;">Network Research Supporters</p> (pyrolysis, gasification)<br> <p style="color: white;font-size:1px;">---</p> Dr. Antonio Coppola, Ph.D.<br> <a style="color:gray;">STEMS, Consiglio Nazionale delle Ricerche, Italy</a><br> <a href="mailto:antonio.coppola@stems.cnr.it" style="text-decoration: underline;">antonio.coppola@stems.cnr.it</a> <br> <br> Assoc.Prof. Sompop Jarungthammachote, D.Eng.<br> <a style="color:gray;">Faculty of Engineering at Sriracha<br>Kasetsart University</a><br> <a href="mailto:sompop.j@ku.th" style="text-decoration: underline;">sompop.j@ku.th</a> <p style="color: white;font-size:2px;">---</p> <div class='modal-footer' style="color: white;font-size:2px;"> </div> (bioenergy)<br> <p style="color: white;font-size:1px;">---</p> Dr. Jun Li, Ph.D.<br> <a style="color:gray;">Department of Chemical and Process Engineering<br> The University of Strathclyde</a><br> <a href="mailto:jun.li@strath.ac.uk" style="text-decoration: underline;">jun.li@strath.ac.uk</a> <p style="color: white;font-size:2px;">---</p> <div class='modal-footer' style="color: white;font-size:2px;"> </div> (hydrothermal cabonization)<br> <p style="color: white;font-size:1px;">---</p> Assoc.Prof. Wijittra Poomsawat<br> <a style="color:gray;">Department of Mechanical Engineering, Faculty of Engineering at Kamphaeng Saen<br> Kasetsart University</a><br> <a href="mailto:fengwth@ku.ac.th" style="text-decoration: underline;">fengwth@ku.ac.th</a> <p style="color: white;font-size:2px;">---</p> <div class='modal-footer' style="color: white;font-size:2px;"> </div> (fluid dynamics simulation)<br> <p style="color: white;font-size:1px;">---</p> Asst.Prof. Sawat Poomsawat<br> <a style="color:gray;">Department of Mechanical Engineering, Faculty of Engineering at Kamphaeng Saen<br> Kasetsart University</a><br> <a href="mailto:fengswp@ku.ac.th" style="text-decoration: underline;">fengswp@ku.ac.th</a> <p style="color: white;font-size:2px;">---</p> <div class='modal-footer' style="color: white;font-size:2px;"> </div> (air conditioning)<br> <p style="color: white;font-size:1px;">---</p> Assoc.Prof. Kunthakorn Khaothong<br> <a style="color:gray;">Department of Mechanical Engineering, Faculty of Engineering at Kamphaeng Saen<br> Kasetsart University</a><br> <a href="mailto:kunthakorn.k@ku.th" style="text-decoration: underline;">kunthakorn.k@ku.th</a> <p style="color: white;font-size:2px;">---</p> <div class='modal-footer' style="color: white;font-size:2px;"> </div> (torrefaction)<br> <p style="color: white;font-size:1px;">---</p> Assoc.Prof. Kanit Manatura, Ph.D.<br> <a style="color:gray;">Department of Mechanical Engineering, Faculty of Engineering at Kamphaeng Saen<br> Kasetsart University</a><br> <a href="mailto:kanit.m@ku.th" style="text-decoration: underline;">kanit.m@ku.th</a> <p style="color: white;font-size:2px;">---</p> <div class='modal-footer' style="color: white;font-size:2px;"> </div> (plant physiology, plant molecular biology)<br> <p style="color: white;font-size:1px;">---</p> Assoc.Prof. Siriporn Sripinyowanich, Ph.D.<br> <a style="color:gray;">Department of Science and Bioinnovation, Faculty of Liberal Arts and Science<br> Kasetsart University</a><br> <a href="mailto:siriporn.srip@ku.th" style="text-decoration: underline;">siriporn.srip@ku.th</a> <p style="color: white;font-size:2px;">---</p> </h6> </div> <h5 class="mb-4" style="text-align: center;"><a href="mailto:kitipong.j@live.ku.th;fabrizio.scala@unina.it" style="text-align:center; text-decoration: underline; font-size: 15px">contact us</a><h5>  <div class="modal-footer"> <button type="button" class="button7" data-dismiss="modal" style="color: white; padding: 15px; width: 98%; border-radius: 5px; background-color: black;">OK</button> </div> </div> </div> </div> </div> <script> let carbon = document.getElementById("var1"); let hydro = document.getElementById("var2"); let oxygen = document.getElementById("var3"); let nitro = document.getElementById("var4"); let humid = document.getElementById("var5"); let volat = document.getElementById("var6"); let fixc = document.getElementById("var7"); let ash = document.getElementById("var8"); let yiel = document.getElementById("var9"); let hhv = document.getElementById("var10"); let temper = document.getElementById("temper"); let time = document.getElementById("time"); let act_temp = document.getElementById("var_1"); let act_time = document.getElementById("var_2"); let indata = document.getElementById("var_0"); let indata1 = document.getElementById("var_00"); let dialog1 = document.getElementById("dialog1"); let contrib = document.getElementById("var_3"); let affilia = document.getElementById("var_4"); let e_mail = document.getElementById("var_5"); let mybutton = document.getElementById("Btn1"); // When the user scrolls down 20px from the top of the document, show the button window.onscroll = function() {scrollFunction()}; function scrollFunction() { if (document.body.scrollTop > 2 || document.documentElement.scrollTop > 2) { mybutton.style.display = "block"; } else { mybutton.style.display = "none"; } } function topFunction() { document.body.scrollTop = 0; document.documentElement.scrollTop = 0; } //HR C H O N FC VM Ash Yield HHV function predict() { const xhr = new XMLHttpRequest(); let mydata = humid.value+','+carbon.value+','+ hydro.value+','+oxygen.value+','+nitro.value+','+fixc.value+','+volat.value+','+ash.value+','+yiel.value+','+hhv.value;//+ '"'; act_dat = mydata; //xhr.open("POST", "http://kitpjao.thddns.net:9939/torefaction"); xhr.open("POST", "https://flower-torrefact-api-162fa294467c.herokuapp.com/torefaction"); //xhr.open("POST", "https://torefact-api-e8d39db9fca8.herokuapp.com/torefaction"); xhr.setRequestHeader("Content-Type", "application/json"); const body = JSON.stringify({ data: mydata, file: "img.jpg", label: 0, }); xhr.onload = () => { if (xhr.readyState == 4 && xhr.status == 201) { let ret = xhr.responseText; let retJSON = JSON.parse(ret); console.log(retJSON); //console.log(JSON.parse(ret)); //p1.innerHTML = '<p id="p1">'+ retJSON.label +'<br>' + retJSON.status +'</p>' temper.value = retJSON.temper; time.value = retJSON.time; act_temp.value = temper.value; act_time.value = time.value; indata.value = humid.value+'-'+carbon.value+'-'+ hydro.value+'-'+oxygen.value+'-'+nitro.value; indata1.value = fixc.value+'-'+volat.value+'-'+ash.value+'-'+yiel.value+'-'+hhv.value; //dialog1.innerHTML = '<button type="button" class="button7" id="dialog1" data-toggle="modal" data-target="#myModal" style="color: white; padding: 15px; width: 98%;background-color: #4d94ff; border-radius: 5px; font-size:20px" disabled>Contribute Data</button>'; act_dat = act_dat+","+act_temp.value+","+act_time.value; //dialog1.disabled = false; //dialog1.style.backgroundColor = "#4d94ff"; dialog1.style.color = "white"; //retpho.innerHTML = '<div id="imgret"><img src="data:image/jpg;base64,'+retJSON.data+'" class="img-fluid mx-auto d-block rounded" alt="Cinque Terre" style="opacity: 1;"></div>'; } else { //let err = `Error: ${xhr.status}`; let state = xhr.readyState; let status = xhr.status; //console.log(err); //temper.value = err; //alert(err); document.getElementById("reply1").innerHTML = '<div class="modal-body" id="reply1"><p style="color: red;">Return status: '+status+'<br>State: '+state+'</p></div>'; $("#myModal2").modal(); } }; xhr.send(body); } function savedata(){ //call get_googleSheet-API //alert("test"); let cont = contrib.value.replace(/,/g, " "); let affi = affilia.value.replace(/,/g, " "); act_dat = indata.value.replace(/-/g, ",")+","+indata1.value.replace(/-/g, ","); act_dat = act_dat+","+temper.value+","+time.value; url = "https://script.google.com/macros/s/AKfycbz2XjiqALCzyxSsqI2dbztmC_HruydzDmMm16RkIUFWAyoCIAOak7MHS6407U2irZv-fA/exec?command=1&fileID=1GrkasoIa8HQQ094ZbQzdZys5jh0Bk-dihDdvc8B9S_4&sheet_name=Sheet1&values="+act_dat+","+act_temp.value+","+act_time.value+","+cont+","+affi+","+e_mail.value; //script file: https://script.google.com/u/0/home/projects/1-IM7WGADeFHWFN5V_kb2bdWE6iiLh28UqJlM1cCwl4wF9n0ah5CxCV_1/edit xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { da = this.responseText; //alert(da); let rand = parseInt(Math.random()*10); if (rand <3) document.getElementById("thank").innerHTML = '<p id="thank" style="text-align:center; font-size:60px;color: #4d94ff;"><img src="image/thankyou.gif" alt="thankyou"></p>'; else if (rand <6) document.getElementById("thank").innerHTML = '<p id="thank" style="text-align:center; font-size:60px;color: #4d94ff;"><img src="image/thankyou1.gif" alt="thankyou"></p>'; else document.getElementById("thank").innerHTML = '<p id="thank" style="text-align:center; font-size:60px;color: #4d94ff;"><img src="image/thankyou2.gif" alt="thankyou2"></p>'; document.getElementById("reply").innerHTML = '<div class="modal-body" id="reply">'+da+'<br>Thank you very much for your contribution!<br><p style="color: #4d94ff;">Your data will be included in our ANN-retrain model next cycle.</p></div>'; $("#myModal1").modal(); } }; xhttp.open("GET", url, true); xhttp.send(); } function post_fn2(){ let result = document.getElementById("comment"); const xhr = new XMLHttpRequest(); const b64 = base64String; var totalfiles = document.getElementById('fileId').files.length; if(totalfiles > 0 ){ //xhr.open("POST", "http://kitpjao.thddns.net:9939/image_base64"); //can not use http end point (insecure not allowed, must be https) // original host is http - can only call end point http // original host is https - can only call end point https xhr.open("POST", "https://nogph-flow-api-f4daa58eb887.herokuapp.com/image_base64"); //xhr.open("POST", "https://flow3-api-073e5dfae572.herokuapp.com/image_base64"); //xhr.open("POST", "http://192.168.1.128:8000/image_base64"); let keep = result.value; const process = result.value + "\nprocessing..."; result.value = process; xhr.setRequestHeader("Content-Type", "application/json"); const body = JSON.stringify({ data: b64, file: "img.jpg", label: 0, }); xhr.onload = () => { if (xhr.readyState == 4 && xhr.status == 201) { let ret = xhr.responseText; let retJSON = JSON.parse(ret); //console.log(JSON.parse(ret)); //p1.innerHTML = '<p id="p1">'+ retJSON.label +'<br>' + retJSON.status +'</p>' result.value = keep +"Predicted: " + retJSON.label + "\nProb: " + retJSON.status+"\n"; //retpho.innerHTML = '<div id="imgret"><img src="data:image/jpg;base64,'+retJSON.data+'" class="img-fluid mx-auto d-block rounded" alt="Cinque Terre" style="opacity: 1;"></div>'; } else { let err = `Error: ${xhr.status}`; //console.log(err); result.value = result.value + err; } }; xhr.send(body); } else { alert("Choose file first!"); } } </script> </body> </html>