Spaces:
Runtime error
Runtime error
| <html> | |
| <head> | |
| <title>Deepfake Detection</title> | |
| <style> | |
| body { font-family: Arial, sans-serif; max-width: 600px; margin: 0 auto; padding: 20px; } | |
| .upload-container { border: 2px dashed #ccc; padding: 20px; text-align: center; margin-bottom: 20px; } | |
| #preview { max-width: 100%; margin-top: 10px; display: none; } | |
| #results { margin-top: 20px; padding: 15px; border-radius: 5px; display: none; } | |
| .real { background-color: #d4edda; color: #155724; } | |
| .fake { background-color: #f8d7da; color: #721c24; } | |
| .progress { display: none; margin: 10px 0; } | |
| </style> | |
| </head> | |
| <body> | |
| <h1>Deepfake Detection</h1> | |
| <p>Upload an image to check if it's real or AI-generated</p> | |
| <div class="upload-container"> | |
| <input type="file" id="fileInput" accept="image/*"> | |
| <p>or drag and drop image here</p> | |
| <img id="preview" alt="Image preview"> | |
| </div> | |
| <div class="progress" id="progress"> | |
| Analyzing image... <progress></progress> | |
| </div> | |
| <div id="results"></div> | |
| <script> | |
| const fileInput = document.getElementById('fileInput'); | |
| const preview = document.getElementById('preview'); | |
| const resultsDiv = document.getElementById('results'); | |
| const progressDiv = document.getElementById('progress'); | |
| fileInput.addEventListener('change', function(e) { | |
| const file = e.target.files[0]; | |
| if (file) { | |
| handleFile(file); | |
| } | |
| }); | |
| // Handle drag and drop | |
| document.addEventListener('dragover', function(e) { | |
| e.preventDefault(); | |
| document.querySelector('.upload-container').style.borderColor = '#666'; | |
| }); | |
| document.addEventListener('dragleave', function() { | |
| document.querySelector('.upload-container').style.borderColor = '#ccc'; | |
| }); | |
| document.addEventListener('drop', function(e) { | |
| e.preventDefault(); | |
| document.querySelector('.upload-container').style.borderColor = '#ccc'; | |
| if (e.dataTransfer.files.length) { | |
| handleFile(e.dataTransfer.files[0]); | |
| } | |
| }); | |
| function handleFile(file) { | |
| if (!file.type.match('image.*')) { | |
| alert('Please upload an image file'); | |
| return; | |
| } | |
| // Show preview | |
| const reader = new FileReader(); | |
| reader.onload = function(e) { | |
| preview.src = e.target.result; | |
| preview.style.display = 'block'; | |
| analyzeImage(file); | |
| }; | |
| reader.readAsDataURL(file); | |
| } | |
| async function analyzeImage(file) { | |
| progressDiv.style.display = 'block'; | |
| resultsDiv.style.display = 'none'; | |
| const formData = new FormData(); | |
| formData.append('file', file); | |
| try { | |
| const response = await fetch('http://localhost:5000/detect', { | |
| method: 'POST', | |
| body: formData | |
| }); | |
| const data = await response.json(); | |
| if (data.error) { | |
| throw new Error(data.error); | |
| } | |
| // Display results | |
| resultsDiv.className = data.result.toLowerCase(); | |
| resultsDiv.innerHTML = ` | |
| <h2>Result: ${data.result} (${data.confidence}% confidence)</h2> | |
| <p>Real probability: ${data.real_probability}%</p> | |
| <p>Fake probability: ${data.fake_probability}%</p> | |
| `; | |
| resultsDiv.style.display = 'block'; | |
| } catch (error) { | |
| resultsDiv.className = ''; | |
| resultsDiv.innerHTML = `<p>Error: ${error.message}</p>`; | |
| resultsDiv.style.display = 'block'; | |
| } finally { | |
| progressDiv.style.display = 'none'; | |
| } | |
| } | |
| </script> | |
| </body> | |
| </html> |