<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>AI Demo</title>
<link href="{{ url_for('static', filename='css/main.css') }}" rel="stylesheet">
<link rel="stylesheet" href="C:\Users\junnajamshed\Desktop\projectCopy\static\css\navstyle.css">
<style>
body{
width: 100%;
height: 100vh;
display: block;
background-size: 300% 300%;
background-image: linear-gradient(
-45deg,
rgba(59,173,227,1) 0%,
rgba(87,111,230,1) 25%,
rgba(152,68,183,1) 51%,
rgba(255,53,127,1) 100%
);
animation: AnimateBG 20s ease infinite;
}
@keyframes AnimateBG {
0%{background-position:0% 50%}
50%{background-position:100% 50%}
100%{background-position:0% 50%}
}
* {
padding: 0;
margin: 0;
text-decoration: none;
list-style: none;
box-sizing: border-box;
}
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
nav {
background: #022f69;
height: 80px;
width: 100%;
}
label.logo {
color: #fff;
font-size: 35px;
line-height: 80px;
padding: 0 100px;
font-weight: bold;
}
nav ul {
float: right;
margin-right: 20px;
}
nav ul li {
display: inline-block;
line-height: 80px;
margin: 0 5px;
}
nav ul li a {
color: #fff;
font-size: 17px;
padding: 7px 13px;
border-radius: 3px;
text-transform: uppercase;
}
a.active,
a:hover {
background: #fff;
transition: 0.5s;
color: #022f69;
}
.checkbtn {
font-size: 30px;
color: #fff;
float: right;
line-height: 80px;
margin-right: 40px;
cursor: pointer;
display: none;
}
#check {
display: none;
}
@media (max-width: 968px) {
label.logo {
font-size: 30px;
padding-left: 50px;
}
nav ul li a {
font-size: 16px;
}
}
@media (max-width: 875px) {
.checkbtn {
display: block;
}
nav ul {
position: fixed;
width: 100%;
height: 100vh;
background: #27282c;
top: 80px;
left: -100%;
text-align: center;
transition: all 0.5s;
}
nav ul li {
display: block;
margin: 50px 0;
line-height: 30px;
}
nav ul li a {
font-size: 20px;
}
a:hover,
a.active {
background: none;
color: #0082e6;
}
#check:checked ~ ul {
left: 0;
}
}
.img-preview {
width: 256px;
height: 256px;
position: relative;
border: 5px solid #f8f8f8;
box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
margin-top: 1em;
margin-bottom: 1em;
}
.img-preview > div {
width: 100%;
height: 100%;
background-size: 256px 256px;
background-repeat: no-repeat;
background-position: center;
}
input[type="file"] {
display: none;
}
.upload-label {
display: inline-block;
padding: 12px 30px;
background: #39d2b4;
color: #fff;
font-size: 1em;
transition: all 0.4s;
cursor: pointer;
}
.upload-label:hover {
background: #34495e;
color: #39d2b4;
}
.loader {
border: 8px solid #f3f3f3; /* Light grey */
border-top: 8px solid #3498db; /* Blue */
border-radius: 50%;
width: 50px;
height: 50px;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<nav>
<input type="checkbox" id="check">
<label for="check" class="checkbtn">
<i class="fas fa-bars"></i>
</label>
<label class="logo">Leukemia Cancer Detection</label>
<ul>
<li><a class="active" href="#">Home</a></li>
<li><a href="index.html">Detection</a></li>
<li><a href="about.html">About us</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<div class="container">
<div id="content" style="margin-top:12em">{% block content %}{% endblock %}</div>
</div>
</body>
<footer>
<script >
$(document).ready(function () {
// Init
$('.image-section').hide();
$('.loader').hide();
$('#result').hide();
// Upload Preview
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#imagePreview').css('background-image', 'url(' + e.target.result + ')');
$('#imagePreview').hide();
$('#imagePreview').fadeIn(650);
}
reader.readAsDataURL(input.files[0]);
}
}
$("#imageUpload").change(function () {
$('.image-section').show();
$('#btn-predict').show();
$('#result').text('');
$('#result').hide();
readURL(this);
});
// Predict
$('#btn-predict').click(function () {
var form_data = new FormData($('#upload-file')[0]);
// Show loading animation
$(this).hide();
$('.loader').show();
// Make prediction by calling api /predict
$.ajax({
type: 'POST',
url: '/predict',
data: form_data,
contentType: false,
cache: false,
processData: false,
async: true,
success: function (data) {
// Get and display the result
$('.loader').hide();
$('#result').fadeIn(600);
$('#result').text(' Result: ' + data);
console.log('Success!');
},
});
});
});
</script>
</footer>
</html>
Datasets
Models
