Spaces:
Runtime error
Runtime error
| <html> | |
| <head> | |
| <title>Deepfake Detection</title> | |
| <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/home1.css') }}"> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <h1>Upload an Image for<br></h1><h2> Deepfake Detection</h2> | |
| <form method="POST" enctype="multipart/form-data" id="imageForm"> | |
| <input type="file" id="fileInput" name="file" style="display: none;"> | |
| <label for="fileInput" class="file-label" id="chooseImageButton">Choose an Image</label> | |
| <button type="button" class="detect-button" onclick="detectImage()">Detect</button> | |
| </form> | |
| <div id="resultContainer" style="display:none;"> | |
| <h2>Result</h2> | |
| <div id="statistics" style="color: white;"></div> <!-- Set text color to white --> | |
| <div id="loader" style="display: none;"></div> | |
| </div> | |
| <div id="imageContainer" style="display:none;"> | |
| <h2>Selected Image</h2> | |
| <img id="selectedImage" src="" alt="Selected Image" style="width: 256px; height: 256px;"> | |
| </div> | |
| </div> | |
| <script> | |
| function triggerImageSelection() { | |
| var fileInput = document.getElementById('fileInput'); | |
| fileInput.click(); | |
| } | |
| function displayImage(input) { | |
| var selectedImage = document.getElementById('selectedImage'); | |
| if (input.files && input.files[0]) { | |
| var reader = new FileReader(); | |
| reader.onload = function (e) { | |
| selectedImage.src = e.target.result; | |
| document.getElementById('imageContainer').style.display = 'block'; | |
| } | |
| reader.readAsDataURL(input.files[0]); | |
| } | |
| } | |
| function detectImage() { | |
| var fileInput = document.getElementById('fileInput'); | |
| if (!fileInput.files[0]) { | |
| alert('Please choose an image.'); | |
| return; | |
| } | |
| var formData = new FormData(); | |
| formData.append('file', fileInput.files[0]); | |
| // Hide result container and show loader | |
| document.getElementById('resultContainer').style.display = 'none'; | |
| document.getElementById('loader').style.display = 'block'; | |
| fetch('/detect', { | |
| method: 'POST', | |
| body: formData | |
| }) | |
| .then(response => response.json()) | |
| .then(data => { | |
| // Hiding loader and showing result container | |
| document.getElementById('loader').style.display = 'none'; | |
| document.getElementById('resultContainer').style.display = 'block'; | |
| // Will Display result | |
| document.getElementById('statistics').innerHTML = ` | |
| <p><strong style="color: white;">${data.result}</strong></p> <!-- Set text color to white --> | |
| <p style="font-size: larger; color: white;">Confidence: ${data.confidence.toFixed(2)}%</p> <!-- Set text color to white --> | |
| `; | |
| // Will Display selected image | |
| document.getElementById('selectedImage').src = data.image_path; | |
| document.getElementById('imageContainer').style.display = 'block'; | |
| }) | |
| .catch(error => { | |
| console.error('Error:', error); | |
| //Will Hide loader and show result container with error message | |
| document.getElementById('loader').style.display = 'none'; | |
| document.getElementById('resultContainer').style.display = 'block'; | |
| document.getElementById('statistics').innerHTML = '<p>Error occurred during detection.</p>'; | |
| }); | |
| } | |
| document.getElementById('fileInput').addEventListener('change', function() { | |
| displayImage(this); | |
| }); | |
| </script> | |
| </body> | |
| </html> | |