Disease Diagnosis Uploader - Copy this Html, Bootstrap Component to your project
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Image Prediction</title> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css"> <link rel="stylesheet" href="predict.css"> </head> <body> <div class="container mt-5"> <h1 class="text-center mb-4">Predict Image Class</h1> <div class="row justify-content-center"> <div class="col-md-6"> <div class="card"> <div class="card-body"> <form action="/predict" method="post" enctype="multipart/form-data"> <div class="mb-3"> <label for="photoInput" class="form-label visually-hidden">Select Photo</label> <input type="file" class="form-control" id="photoInput" name="file" accept="image/*" required aria-label="Select photo for prediction"> <button class="btn btn-primary w-100 mt-2" id="selectButton" type="button"> <i class="bi bi-camera-fill me-2"></i>Select Photo </button> </div> <div id="selectedPhoto" class="mb-3 d-none"> <p class="mb-2">Selected Photo:</p> <img id="photoPreview" class="img-fluid mb-2" alt="Selected photo preview"> </div> <button class="btn btn-success w-100" id="predictButton" type="submit"> <i class="bi bi-gear-fill me-2"></i>Upload and Predict </button> </form> </div> </div> </div> </div> {% if selected_class is not none %} <div class="row justify-content-center mt-4"> <div class="col-md-6"> <div class="card"> <div class="card-body"> <h2 class="card-title">Prediction Result</h2> <p class="card-text">Selected class: {{ selected_class }}</p> <p class="card-text">Probability: {{ selected_prob * 100 | round(2) }}%</p> <img src="{{ result_image_path }}" alt="Result Image" class="img-fluid"> </div> </div> </div> </div> {% endif %} </div> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script> <script> const photoInput = document.getElementById('photoInput'); const selectButton = document.getElementById('selectButton'); const selectedPhoto = document.getElementById('selectedPhoto'); const photoPreview = document.getElementById('photoPreview'); const predictButton = document.getElementById('predictButton'); selectButton.addEventListener('click', () => photoInput.click()); photoInput.addEventListener('change', (e) => { const file = e.target.files[0]; if (file) { selectedPhoto.classList.remove('d-none'); predictButton.disabled = false; const reader = new FileReader(); reader.onload = (e) => { photoPreview.src = e.target.result; }; reader.readAsDataURL(file); } else { selectedPhoto.classList.add('d-none'); predictButton.disabled = true; } }); </script> </body> </html> do like this
