Skip to content

2
2023-323
Commit 67267b35 authored by Kareshaan Logeswaran's avatar Kareshaan Logeswaran
Browse files
Options

created It20109776 front end

parent 0c606af4
Show whitespace changes
Inline Side-by-side
Showing with 220 additions and 0 deletions
api/diseases.html 0 → 100644
View file @ 67267b35
<!DOCTYPE html>
<html lang="en">
<head>
<base href="http://localhost/D/RP ongoing/Leaf diseases/api/">
<!-- Rest of your HTML code -->
<link rel="icon" href="data:,">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Plant Disease Classifier</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: white;
background-image: url('../images/back.jpg');
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}
header {
background-color: #333;
color: #fff;
padding: 10px 0;
text-align: center;
}
nav {
display: flex;
justify-content: center;
background-color: #145214;
padding: 10px 0;
width: 100%;
}
nav a {
color: white;
text-decoration: none;
padding: 10px 20px;
font-size: 20px;
font-family: Times New Roman, sans-serif;
margin: 0 10px;
}
nav a:hover {
background-color: #555;
}
.container {
max-width: 800px;
margin: 0 auto;
padding: 20px;
}
form {
background-color: #eafaea;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
text-align: center;
}
#upload-form {
margin-bottom: 20px;
}
#upload-button {
display: block;
margin: 20px auto;
padding: 10px 20px;
background-color: #333;
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.3s ease-in-out;
}
#upload-button:hover {
background-color: #555;
}
#upload-predict-button {
display: block;
margin: 0 auto;
padding: 10px 20px;
background-color: #4caf50;
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.3s ease-in-out;
}
#upload-predict-button:hover {
background-color: red;
}
#result {
margin-top: 20px;
display: none;
border: 1px solid #ddd;
padding: 10px;
background-color: #d6f5d6;
}
</style>
</head>
<body>
<header>
<h1 style="Font-size:50px;">E-Goyama</h1>
<h2>E-Solution for paddy plantation</h2>
</header>
<nav>
<a href="http://192.168.56.1:7000">Home</a>
<a href="http://127.0.0.1:5010">Economy Prediction</a>
<a href="http://localhost:8010/">Harvesting Time Prediction</a>
<a href="http://localhost:8000/">Leaf Diseases Identification</a>
<a href="http://127.0.0.1:5000/">Soil Testing</a>
<a href="http://127.0.0.1:5500">About</a>
</nav>
<br><br>
<h3 style="text-align: center; margin: 0 auto; font-size: 30px; font-family: Times New Roman;">Paddy Leaf Diseases Detection</h3>
<div class="container">
<form id="upload-form" enctype="multipart/form-data">
<br><label for="file-input">Disease Effected Image</label><br><br>
<input type="file" id="file-input" name="file" accept="image/*" style="display: none;">
<div id="image-preview"></div>
<button id="upload-button" type="button" onclick="document.getElementById('file-input').click();">Choose Image</button>
<button id="upload-predict-button" type="submit">Upload &amp; Predict</button>
</form>
<div id="result">
<h2>Prediction Results:</h2>
<p><strong>Disease Name:</strong> <span id="prediction"></span></p>
<p><strong>Confidence:</strong> <span id="confidence"></span></p>
<p class="additional-details"><strong>Reason:</strong> <span id="reason"></span></p>
<p class="additional-details"><strong>Pesticides:</strong> <span id="pesticide"></span></p>
</div>
</div>
<script>
document.getElementById('file-input').addEventListener('change', (event) => {
const previewContainer = document.getElementById('image-preview');
const file = event.target.files[0];
if (file) {
const reader = new FileReader();
reader.onload = (e) => {
const img = document.createElement('img');
img.src = e.target.result;
img.style.maxWidth = '100%';
img.style.height = 'auto';
previewContainer.innerHTML = '';
previewContainer.appendChild(img);
};
reader.readAsDataURL(file);
} else {
previewContainer.innerHTML = '';
}
});
document.getElementById('upload-form').addEventListener('submit', async (event) => {
event.preventDefault();
const formData = new FormData();
formData.append('file', event.target.file.files[0]);
try {
const resizedImage = await resizeImage(event.target.file.files[0], 300, 300);
formData.set('file', resizedImage, 'resized_image.jpg');
const response = await fetch('http://localhost:8000/predictLeaf', {
method: 'POST',
body: formData,
});
const result = await response.json();
document.getElementById('prediction').textContent = result.class.split('|')[0];
document.getElementById('confidence').textContent = result.confidence.toFixed(2);
document.getElementById('reason').textContent = result.class.split('|')[1] || "Reason not available";
document.getElementById('pesticide').textContent = result.class.split('|')[2] || "Pesticide not available";
document.getElementById('result').style.display = 'block';
} catch (error) {
console.error('Error:', error);
}
});
async function resizeImage(file, maxWidth, maxHeight) {
return new Promise((resolve, reject) => {
const img = new Image();
img.src = URL.createObjectURL(file);
img.onload = () => {
const canvas = document.createElement('canvas');
let width = img.width;
let height = img.height;
if (width > height) {
if (width > maxWidth) {
height *= maxWidth / width;
width = maxWidth;
}
} else {
if (height > maxHeight) {
width *= maxHeight / height;
height = maxHeight;
}
}
canvas.width = width;
canvas.height = height;
const ctx = canvas.getContext('2d');
ctx.drawImage(img, 0, 0, width, height);
canvas.toBlob((blob) => {
resolve(new File([blob], file.name, { type: file.type }));
}, file.type);
};
img.onerror = (error) => {
reject(error);
};
});
}
</script>
</body>
</html>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment