Spaces:
Runtime error
Runtime error
File size: 4,205 Bytes
ebf66e6 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 |
<!DOCTYPE html>
<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> |