Spaces:
Sleeping
Sleeping
| <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) ; | |
| color: white; | |
| padding: 12px 24px; | |
| font-size: 1.1em; | |
| transition: all 0.3s ease; | |
| } | |
| .home-button:hover { | |
| background: linear-gradient(45deg, #8E24AA, #5E35B1) ; | |
| 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> |