File size: 5,416 Bytes
5575a8a | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 | <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>GradePredict AI | Student Performance Analytics</title>
<link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;800&display=swap" rel="stylesheet">
</head>
<body>
<div class="background-blobs">
<div class="blob blob-1"></div>
<div class="blob blob-2"></div>
<div class="blob blob-3"></div>
</div>
<main class="container">
<header class="glass-card animate-fade-in">
<h1>GradePredict <span class="accent">AI</span></h1>
<p>Advanced RNN-based Student Performance Forecasting</p>
</header>
<section class="prediction-grid">
<div class="glass-card input-section animate-slide-up">
<h2>Predict Your Score</h2>
<form id="predictionForm">
<div class="input-group">
<label for="num_courses">Number of Courses</label>
<input type="number" id="num_courses" name="num_courses" placeholder="e.g. 5" min="1" max="100" required>
</div>
<div class="input-group">
<label for="time_study">Daily Study Hours</label>
<input type="number" id="time_study" name="time_study" placeholder="e.g. 4.5" step="0.1" min="0" max="24" required>
</div>
<button type="submit" id="predictBtn">
<span class="btn-text">Calculate Score</span>
<div class="loader-dots" id="loader">
<span></span><span></span><span></span>
</div>
</button>
</form>
</div>
<div class="glass-card result-section animate-slide-up-delayed">
<div id="resultPlaceholder" class="placeholder">
<div class="icon-pulse">🎓</div>
<p>Enter your details to generate prediction</p>
</div>
<div id="resultOutput" class="output hidden">
<div class="score-circle">
<span id="scoreValue">0.00</span>
<p>Marks</p>
</div>
<h3>Predicted Efficiency</h3>
<p id="analysisText">Based on your input, here is your forecasted performance.</p>
</div>
</div>
</section>
<footer class="animate-fade-in">
<p>© 2026 GradePredict AI | Powered by LSTM Recurrent Neural Networks</p>
</footer>
</main>
<script>
document.getElementById('predictionForm').addEventListener('submit', async (e) => {
e.preventDefault();
const btn = document.getElementById('predictBtn');
const loader = document.getElementById('loader');
const btnText = btn.querySelector('.btn-text');
const placeholder = document.getElementById('resultPlaceholder');
const output = document.getElementById('resultOutput');
const scoreValue = document.getElementById('scoreValue');
// UI State: Loading
btn.disabled = true;
btnText.style.opacity = '0';
loader.style.display = 'flex';
const formData = {
num_courses: document.getElementById('num_courses').value,
time_study: document.getElementById('time_study').value
};
try {
const response = await fetch('/predict', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(formData)
});
const data = await response.json();
if (data.marks !== undefined) {
placeholder.classList.add('hidden');
output.classList.remove('hidden');
// Animate counter
animateValue(scoreValue, 0, data.marks, 1000);
} else {
alert('Error: ' + data.error);
}
} catch (err) {
alert('Connection Error: ' + err.message);
} finally {
btn.disabled = false;
btnText.style.opacity = '1';
loader.style.display = 'none';
}
});
function animateValue(obj, start, end, duration) {
let startTimestamp = null;
const step = (timestamp) => {
if (!startTimestamp) startTimestamp = timestamp;
const progress = Math.min((timestamp - startTimestamp) / duration, 1);
obj.innerHTML = (progress * (end - start) + start).toFixed(2);
if (progress < 1) {
window.requestAnimationFrame(step);
}
};
window.requestAnimationFrame(step);
}
</script>
</body>
</html>
|