Sesame Image Predictor - 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" disabled> <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> <div class="row"> <div class="col md 6"> <h4>Original Image</h4> <img src="{{ original_image_path }}" alt="Original Image" class="img fluid mb 2"> </div> <div class="col md 6"> <h4>Processed Image</h4> <img src="{{ result_image_path }}" alt="Result Image" class="img fluid mb 2"> </div> </div> <p class="card text">Selected class: {{ selected_class }}</p> <p class="card text">Probability: {{ selected_prob | round(2) }}%</p> </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> I want the site to be more sesame with a light navy white tone, and I want the JS code to show up the results page from the overlay
