Spaces:
No application file
No application file
| <html> | |
| <head> | |
| <title>Image Input Example</title> | |
| <style> | |
| #preview { | |
| max-width: 300px; | |
| max-height: 300px; | |
| display: none; /* Hide the preview image initially */ | |
| } | |
| </style> | |
| <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> | |
| <script> | |
| $(document).ready(function() { | |
| $("#upload-form").submit(function(event) { | |
| event.preventDefault(); // Prevent the default form submission | |
| var formData = new FormData(this); | |
| $.ajax({ | |
| url: "{{ url_for('predict_datapoint') }}", | |
| type: "POST", | |
| data: formData, | |
| processData: false, | |
| contentType: false, | |
| success: function(response) { | |
| // Update the results field with the response | |
| $("#results").text(response); | |
| } | |
| }); | |
| }); | |
| }); | |
| function showPreview(event) { | |
| var input = event.target; | |
| var reader = new FileReader(); | |
| var preview = document.getElementById('preview'); | |
| reader.onload = function() { | |
| preview.src = reader.result; | |
| preview.style.display = 'block'; // Show the preview image | |
| }; | |
| if (input.files && input.files[0]) { | |
| reader.readAsDataURL(input.files[0]); | |
| } else { | |
| preview.src = '#'; | |
| preview.style.display = 'none'; // Hide the preview image | |
| } | |
| } | |
| </script> | |
| </head> | |
| <body> | |
| <h1>Image Input</h1> | |
| <form id="upload-form" enctype="multipart/form-data"> | |
| <input type="file" name="image" required onchange="showPreview(event)"> | |
| <br> | |
| <img id="preview" src="#" alt="Image Preview"> | |
| <br> | |
| <button class="btn btn--radius-2 btn--blue" type="submit">Submit</button> | |
| </form> | |
| <div id="results"></div> | |
| </body> | |
| </html> | |