Initial

47488ce over 2 years ago

11.5 kB

	<!DOCTYPE html>
	<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 !important;
	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 !important;
	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>