Spaces:
Sleeping
Sleeping
Feat: Home button on the inference page
Browse files- templates/inference.html +61 -0
templates/inference.html
CHANGED
|
@@ -5,6 +5,7 @@
|
|
| 5 |
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| 6 |
<title>Test Model - MNIST</title>
|
| 7 |
<link rel="stylesheet" href="{{ url_for('static', path='/css/style.css') }}">
|
|
|
|
| 8 |
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
|
| 9 |
</head>
|
| 10 |
<body>
|
|
@@ -35,7 +36,67 @@
|
|
| 35 |
<div id="prediction-result" class="card hidden">
|
| 36 |
<!-- Prediction result will be displayed here -->
|
| 37 |
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 38 |
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 39 |
<script src="{{ url_for('static', path='/js/inference.js') }}"></script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 40 |
</body>
|
| 41 |
</html>
|
|
|
|
| 5 |
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| 6 |
<title>Test Model - MNIST</title>
|
| 7 |
<link rel="stylesheet" href="{{ url_for('static', path='/css/style.css') }}">
|
| 8 |
+
<link rel="stylesheet" href="{{ url_for('static', path='/css/buttons.css') }}">
|
| 9 |
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
|
| 10 |
</head>
|
| 11 |
<body>
|
|
|
|
| 36 |
<div id="prediction-result" class="card hidden">
|
| 37 |
<!-- Prediction result will be displayed here -->
|
| 38 |
</div>
|
| 39 |
+
|
| 40 |
+
<!-- Add Home button container -->
|
| 41 |
+
<div class="home-button-container" style="display: none;">
|
| 42 |
+
<button id="homeButton" onclick="window.location.href='/'" class="btn home-button">
|
| 43 |
+
Home
|
| 44 |
+
</button>
|
| 45 |
+
</div>
|
| 46 |
</div>
|
| 47 |
+
|
| 48 |
+
<style>
|
| 49 |
+
/* Add these styles */
|
| 50 |
+
.home-button-container {
|
| 51 |
+
margin-top: 20px;
|
| 52 |
+
text-align: center;
|
| 53 |
+
}
|
| 54 |
+
|
| 55 |
+
.home-button {
|
| 56 |
+
background: linear-gradient(45deg, #9C27B0, #673AB7) !important;
|
| 57 |
+
color: white;
|
| 58 |
+
padding: 12px 24px;
|
| 59 |
+
font-size: 1.1em;
|
| 60 |
+
transition: all 0.3s ease;
|
| 61 |
+
}
|
| 62 |
+
|
| 63 |
+
.home-button:hover {
|
| 64 |
+
background: linear-gradient(45deg, #8E24AA, #5E35B1) !important;
|
| 65 |
+
transform: translateY(-2px);
|
| 66 |
+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
|
| 67 |
+
}
|
| 68 |
+
</style>
|
| 69 |
+
|
| 70 |
<script src="{{ url_for('static', path='/js/inference.js') }}"></script>
|
| 71 |
+
<script>
|
| 72 |
+
// Update the displayPrediction function
|
| 73 |
+
function displayPrediction(result) {
|
| 74 |
+
const resultDiv = document.getElementById('prediction-result');
|
| 75 |
+
|
| 76 |
+
// Create a more robust display that handles missing data
|
| 77 |
+
let configHtml = '';
|
| 78 |
+
if (result.model_config) {
|
| 79 |
+
configHtml = `
|
| 80 |
+
<p>Model Configuration:</p>
|
| 81 |
+
<ul>
|
| 82 |
+
${result.model_config.architecture ? `<li>Architecture: ${result.model_config.architecture}</li>` : ''}
|
| 83 |
+
${result.model_config.optimizer ? `<li>Optimizer: ${result.model_config.optimizer}</li>` : ''}
|
| 84 |
+
${result.model_config.batch_size ? `<li>Batch Size: ${result.model_config.batch_size}</li>` : ''}
|
| 85 |
+
</ul>
|
| 86 |
+
`;
|
| 87 |
+
}
|
| 88 |
+
|
| 89 |
+
resultDiv.innerHTML = `
|
| 90 |
+
<h3>Prediction Result</h3>
|
| 91 |
+
<p>Predicted Digit: <strong>${result.prediction}</strong></p>
|
| 92 |
+
${configHtml}
|
| 93 |
+
`;
|
| 94 |
+
|
| 95 |
+
resultDiv.classList.remove('hidden');
|
| 96 |
+
|
| 97 |
+
// Show the home button after prediction
|
| 98 |
+
document.querySelector('.home-button-container').style.display = 'block';
|
| 99 |
+
}
|
| 100 |
+
</script>
|
| 101 |
</body>
|
| 102 |
</html>
|