Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <meta http-equiv="X-UA-Compatible" content="ie=edge"> | |
| <title>Kidney Disease Classification</title> | |
| <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" | |
| integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" /> | |
| <style> | |
| body { | |
| background-color: #eff2f9; | |
| } | |
| .iupload h3 { | |
| color: #1b2d6b; | |
| font-size: 30px; | |
| font-weight: 700; | |
| } | |
| .img-part { | |
| height: 300px; | |
| width: 300px; | |
| margin: 0px auto; | |
| } | |
| .image-part { | |
| height: 300px; | |
| width: 300px; | |
| border: 1px solid #1b2d6b; | |
| } | |
| .image-part img { | |
| position: absolute; | |
| height: 300px; | |
| width: 300px; | |
| display: none; | |
| padding: 5px; | |
| } | |
| .image-part #video { | |
| display: block; | |
| height: 300px; | |
| width: 300px; | |
| padding: 5px; | |
| } | |
| .res-part { | |
| border: 1px solid #dedede; | |
| margin-left: 20px; | |
| height: 310px; | |
| width: 100%; | |
| padding: 5px; | |
| margin: 0px auto; | |
| overflow: auto; | |
| } | |
| .res-part2 { | |
| border: 1px solid #dedede; | |
| height: 310px; | |
| width: 100%; | |
| padding: 5px; | |
| margin: 0px auto; | |
| } | |
| .resp-img { | |
| height: 298px; | |
| width: 233px; | |
| margin: 0px auto; | |
| } | |
| .jsonRes { | |
| margin-left: 30px; | |
| } | |
| #send { | |
| cursor: pointer; | |
| } | |
| .btn-part { | |
| width: 325px; | |
| } | |
| textarea, | |
| select, | |
| .form-control, | |
| .custom-select, | |
| button.btn, | |
| .btn-primary, | |
| input[type="text"], | |
| input[type="url"], | |
| .uneditable-input { | |
| border: 1px solid #363e75; | |
| outline: 0 ; | |
| border-radius: 0px; | |
| box-shadow: none; | |
| -webkit-box-shadow: none; | |
| -moz-box-shadow: none; | |
| } | |
| textarea:focus, | |
| select:focus, | |
| .form-control:focus, | |
| .btn:focus, | |
| .btn-primary:focus, | |
| .custom-select:focus, | |
| input[type="text"]:focus, | |
| .uneditable-input:focus { | |
| border: 1px solid #007bff; | |
| outline: 0 ; | |
| border-radius: 0px; | |
| box-shadow: none; | |
| -webkit-box-shadow: none; | |
| -moz-box-shadow: none; | |
| } | |
| #loading { | |
| position: fixed; | |
| left: 0px; | |
| top: 0px; | |
| width: 100%; | |
| height: 100%; | |
| z-index: 9999999999; | |
| overflow: hidden; | |
| background: rgba(255, 255, 255, 0.7); | |
| } | |
| .loader { | |
| border: 8px solid #f3f3f3; | |
| border-top: 8px solid #363e75; | |
| border-radius: 50%; | |
| width: 60px; | |
| height: 60px; | |
| left: 50%; | |
| margin-left: -4em; | |
| display: block; | |
| animation: spin 2s linear infinite; | |
| } | |
| .loader, | |
| .loader:after { | |
| display: block; | |
| position: absolute; | |
| top: 50%; | |
| margin-top: -4.05em; | |
| } | |
| @keyframes spin { | |
| 0% { | |
| transform: rotate(0deg); | |
| } | |
| 100% { | |
| transform: rotate(360deg); | |
| } | |
| } | |
| .right-part { | |
| border: 1px solid #dedede; | |
| padding: 5px; | |
| } | |
| .socials { | |
| position: fixed; | |
| bottom: 20px; | |
| left: 0; | |
| width: 100%; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| } | |
| .icons { | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| } | |
| .icons a { | |
| margin: 0 10px; | |
| color: #333; | |
| font-size: 24px; | |
| } | |
| .credit { | |
| position: absolute; | |
| bottom: 0; | |
| left: 10px; | |
| color: #333; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="main container"> | |
| <section class="iupload"> | |
| <h3 class="text-center py-4">Object Classification</h3> | |
| <div class="row"> | |
| <div class="img-part col-md-6"> | |
| <div class="image-part"> | |
| <video autoplay id="video" | |
| poster="https://img.freepik.com/free-vector/group-young-people-posing-photo_52683-18824.jpg?size=338&ext=jpg"></video> | |
| <img src="" id="photo"> | |
| <canvas style="display:none;" id="canvas"></canvas> | |
| </div> | |
| <div class="btn-part"> | |
| <form id="upload-data pt-3" class=""> | |
| <div class="input-group mt-3 row"> | |
| <button type="button" class="btn btn-primary col-md-5 col-xs-5 ml-3 mr-4" | |
| id="uload">Upload</button> | |
| <button id="send" type="button" | |
| class="btn btn-success col-md-5 col-xs-5">Predict</button> | |
| </div> | |
| <input type="hidden" class="form-control mr-2" id="url" placeholder="Enter REST Api url..." | |
| value="../predict" /> | |
| <input name="upload" type="file" id="fileinput" | |
| style="position:absolute;top:-500px;" /><br /> | |
| </form> | |
| </div> | |
| </div> | |
| <div class="col-md-6 col-xs-12 right-part"> | |
| <h5 class="mb-2"> | |
| <center>Prediction Results</center> | |
| </h5> | |
| <div class="row"> | |
| <div class="res-part col-md-5 col-xs-12"> | |
| <div class="jsonRes"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| </div> | |
| <div class="socials"> | |
| <div class="credit">Designed by Shrey Patel</div> | |
| <div class="icons"> | |
| <a href="https://www.linkedin.com/in/shreypatel07" target="_blank"> | |
| <i class="fab fa-linkedin"></i> | |
| </a> | |
| <a href="https://github.com/Shrey-patel-07" target="_blank"> | |
| <i class="fab fa-github"></i> | |
| </a> | |
| <a href="https://x.com/Shrey_Patel_07" target="_blank"> | |
| <i class="fab fa-twitter"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <div id="loading"> | |
| <div class="loader"></div> | |
| </div> | |
| <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" | |
| integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" | |
| crossorigin="anonymous"></script> | |
| <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" | |
| integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" | |
| crossorigin="anonymous"></script> | |
| <script> | |
| var mybtn = document.getElementById('startbtn'); | |
| var myvideo = document.getElementById('video'); | |
| var mycanvas = document.getElementById('canvas'); | |
| var myphoto = document.getElementById('photo'); | |
| var base_data = ""; | |
| function sendRequest(base64Data) { | |
| var type = "json"; | |
| if (base64Data != "" || base64Data != null) { | |
| if (type == "imgtobase") { | |
| $(".res-part").html(""); | |
| $(".res-part").html(base64Data); | |
| } | |
| else if (type == "basetoimg") { | |
| var imageData = $("#imgstring").val(); | |
| $(".res-part").html(""); | |
| $(".res-part").append("<img src='data:image/jpeg;base64," + imageData + "' alt='' />"); | |
| } | |
| else { | |
| var url = $("#url").val(); | |
| $("#loading").show(); | |
| $.ajax({ | |
| url: url, | |
| type: "post", | |
| cache: false, | |
| async: true, | |
| crossDomain: true, | |
| headers: { | |
| 'Content-Type': 'application/json', | |
| 'Access-Control-Allow-Origin': '*' | |
| }, | |
| data: JSON.stringify({ image: base64Data }), | |
| success: function (res) { | |
| $(".res-part").html(""); | |
| $(".res-part2").html(""); | |
| try { | |
| var imageData = res[1].image; | |
| if (imageData.length > 100) { | |
| if (imageData.length > 10) { $(".res-part2").append("<img class='resp-img' src='data:image/jpeg;base64," + imageData + "' alt='' />"); } | |
| } | |
| } catch (e) { } | |
| $(".res-part").html("<pre>" + res[0].image + "</pre>"); | |
| $("#loading").hide(); | |
| } | |
| }); | |
| } | |
| } | |
| } | |
| $(document).ready(function () { | |
| $("#loading").hide(); | |
| $('#send').click(function (evt) { | |
| sendRequest(base_data); | |
| }); | |
| $('#uload').click(function (evt) { | |
| $('#fileinput').focus().trigger('click'); | |
| }); | |
| $("#fileinput").change(function () { | |
| if (this.files && this.files[0]) { | |
| var reader = new FileReader(); | |
| reader.onload = function (e) { | |
| var url = e.target.result; | |
| var img = new Image(); | |
| img.crossOrigin = 'Anonymous'; | |
| img.onload = function () { | |
| var canvas = document.createElement('CANVAS'); | |
| var ctx = canvas.getContext('2d'); | |
| canvas.height = this.height; | |
| canvas.width = this.width; | |
| ctx.drawImage(this, 0, 0); | |
| base_data = canvas.toDataURL('image/jpeg', 1.0).replace(/^data:image.+;base64,/, ''); | |
| canvas = null; | |
| }; | |
| img.src = url; | |
| $('#photo').attr('src', url); | |
| $('#photo').show(); | |
| $('#video').hide(); | |
| } | |
| reader.readAsDataURL(this.files[0]); | |
| } | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> | |