Spaces:
Sleeping
Sleeping
File size: 5,933 Bytes
4c1a791 244431c 4fd7030 4c1a791 5ec13ed 4c1a791 5ec13ed 4c1a791 5ec13ed 4fd7030 5ec13ed 4c1a791 |
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 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test Model - MNIST</title>
<link rel="stylesheet" href="{{ url_for('static', path='/css/style.css') }}">
<!-- <link rel="stylesheet" href="{{ url_for('static', path='/css/buttons.css') }}"> -->
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
</head>
<body>
<div class="container">
<h1>Test Your Model</h1>
<div class="card">
<p>Draw a digit (0-9) in the canvas below and click "Predict" to test the model.</p>
<div class="form-group">
<label for="model-select">Select Model</label>
<select id="model-select" required>
{% if available_models %}
{% for model in available_models %}
<option value="{{ model }}">{{ model }}</option>
{% endfor %}
{% else %}
<option value="">No models available - Train a model first</option>
{% endif %}
</select>
</div>
</div>
<canvas id="drawing-canvas" width="280" height="280"></canvas>
<div class="button-container">
<button onclick="clearCanvas()" class="btn">Clear Canvas</button>
<button onclick="predict()" class="btn" {% if not available_models %}disabled{% endif %}>Predict</button>
</div>
<div id="prediction-result" class="card hidden">
<!-- Prediction result will be displayed here -->
</div>
<!-- Add Home button container -->
<div class="home-button-container" style="display: none;">
<button id="homeButton" onclick="window.location.href='/'" class="btn home-button">
Home
</button>
</div>
</div>
<style>
/* Add these styles */
.home-button-container {
margin-top: 20px;
text-align: center;
}
.home-button {
background: linear-gradient(45deg, #9C27B0, #673AB7) !important;
color: white;
padding: 12px 24px;
font-size: 1.1em;
transition: all 0.3s ease;
}
.home-button:hover {
background: linear-gradient(45deg, #8E24AA, #5E35B1) !important;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
</style>
<script src="{{ url_for('static', path='/js/inference.js') }}"></script>
<script>
async function predict() {
const modelSelect = document.getElementById('model-select');
const selectedModel = modelSelect.value;
if (!selectedModel) {
alert('Please train a model first');
return;
}
const imageData = canvas.toDataURL('image/png');
try {
const response = await fetch('/api/inference', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
image: imageData,
model_name: selectedModel
})
});
if (!response.ok) {
const error = await response.json();
throw new Error(error.detail || 'Prediction failed');
}
const data = await response.json();
displayPrediction(data);
} catch (error) {
console.error('Error:', error);
alert(error.message || 'Error during prediction');
}
}
function displayPrediction(data) {
const resultDiv = document.getElementById('prediction-result');
resultDiv.classList.remove('hidden');
resultDiv.innerHTML = `
<h2>Prediction Result</h2>
<p class="prediction-text">Predicted Digit: ${data.prediction}</p>
<p class="model-info">Model Architecture: ${data.model_config.architecture}</p>
<p class="model-info">Optimizer: ${data.model_config.optimizer}</p>
<p class="model-info">Batch Size: ${data.model_config.batch_size}</p>
`;
}
// Update the displayPrediction function
function displayPrediction(result) {
const resultDiv = document.getElementById('prediction-result');
// Create a more robust display that handles missing data
let configHtml = '';
if (result.model_config) {
configHtml = `
<p>Model Configuration:</p>
<ul>
${result.model_config.architecture ? `<li>Architecture: ${result.model_config.architecture}</li>` : ''}
${result.model_config.optimizer ? `<li>Optimizer: ${result.model_config.optimizer}</li>` : ''}
${result.model_config.batch_size ? `<li>Batch Size: ${result.model_config.batch_size}</li>` : ''}
</ul>
`;
}
resultDiv.innerHTML = `
<h3>Prediction Result</h3>
<p>Predicted Digit: <strong>${result.prediction}</strong></p>
${configHtml}
`;
resultDiv.classList.remove('hidden');
// Show the home button after prediction
document.querySelector('.home-button-container').style.display = 'block';
}
</script>
</body>
</html> |