Skip to content

2
2023-323
Commit 11f1b39b authored by Kareshaan Logeswaran's avatar Kareshaan Logeswaran
Browse files
Options

created It20236946 frontend

parent 90528e9b
Show whitespace changes
Inline Side-by-side
Showing with 169 additions and 0 deletions
api/paddyStage.html 0 → 100644
View file @ 11f1b39b
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Classifier</title>
<style>
/* Global Styles */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f0f0f0;
text-align: center;
}
header {
background-color: #333;
color: #fff;
padding: 10px 0;
text-align: center;
}
nav {
display: flex;
justify-content: center;
background-color: #145214;
padding: 10px 0;
}
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 Styles */
.container {
max-width: 800px;
margin: 0 auto;
padding: 20px;
text-align: center; /* Center the content in the container */
}
/* Form Styles */
form {
background-color: #eafaea;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
text-align: center;
}
input[type="file"] {
display: none; /* Hide the default file input */
}
.custom-file-upload {
border: 2px solid #0074d9;
color: #0074d9;
background-color: #fff;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
font-weight: bold;
margin-bottom: 10px;
display: inline-block;
}
.custom-file-upload:hover {
background-color: #0056b3;
color: #fff;
}
button[type="submit"] {
background-color: #0074d9;
color: #fff;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
}
button[type="submit"]:hover {
background-color: #0056b3;
}
/* Result Styles */
h2 {
margin-top: 20px;
color: #333;
}
#result {
background-color: #fff;
padding: 10px;
border-radius: 5px;
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
margin-top: 10px;
color: #333;
}
/* Image Styles */
#uploadedImage {
max-width: 350px;
max-height: 350px;
margin: 20px auto; /* Center the image horizontally */
}
</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>
<div class="container">
<h1>Paddy Stage Prediction</h1>
<form action="/predict" method="post" enctype="multipart/form-data">
<label for="file-upload" class="custom-file-upload">
Choose File
</label>
<input type="file" name="file" id="file-upload" accept="image/*" required>
<button type="submit">Upload and Analyze</button>
</form>
<!-- Add an <img> element to display the uploaded image -->
<img id="uploadedImage" src="" alt="Uploaded Image">
<h2>Results:</h2>
<div id="result">
<p><strong>Class:</strong> <span id="class"></span></p>
<p><strong>Confidence:</strong> <span id="confidence"></span></p>
</div>
</div>
<script>
document.querySelector('form').addEventListener('submit', async (e) => {
e.preventDefault();
const formData = new FormData(e.target);
const response = await fetch('/predict', {
method: 'POST',
body: formData
});
const data = await response.json();
const classElement = document.getElementById('class');
const confidenceElement = document.getElementById('confidence');
classElement.textContent = data.class;
confidenceElement.textContent = data.confidence.toFixed(2);
// Display the uploaded image
const uploadedImage = document.getElementById('uploadedImage');
uploadedImage.style.display = 'block';
uploadedImage.src = URL.createObjectURL(formData.get('file'));
});
</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