Hugging Face's logo

Spaces:
sonuprasad23
/
AI_Image_Detector_app
Runtime error

App Files Community
Sonu Prasad commited on
Commit
bfac5f0
·
verified ·
1 Parent(s): b24ff84

Upload templates\home.html with huggingface_hub

Browse files
Files changed (1) hide show
  1. templates//home.html +92 -0
templates//home.html ADDED
@@ -0,0 +1,92 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html>
3
+ <head>
4
+ <title>Deepfake Detection</title>
5
+ <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/home1.css') }}">
6
+ </head>
7
+ <body>
8
+ <div class="container">
9
+ <h1>Upload an Image for<br></h1><h2> Deepfake Detection</h2>
10
+ <form method="POST" enctype="multipart/form-data" id="imageForm">
11
+ <input type="file" id="fileInput" name="file" style="display: none;">
12
+ <label for="fileInput" class="file-label" id="chooseImageButton">Choose an Image</label>
13
+ <button type="button" class="detect-button" onclick="detectImage()">Detect</button>
14
+ </form>
15
+ <div id="resultContainer" style="display:none;">
16
+ <h2>Result</h2>
17
+ <div id="statistics" style="color: white;"></div> <!-- Set text color to white -->
18
+ <div id="loader" style="display: none;"></div>
19
+ </div>
20
+ <div id="imageContainer" style="display:none;">
21
+ <h2>Selected Image</h2>
22
+ <img id="selectedImage" src="" alt="Selected Image" style="width: 256px; height: 256px;">
23
+ </div>
24
+ </div>
25
+
26
+ <script>
27
+ function triggerImageSelection() {
28
+ var fileInput = document.getElementById('fileInput');
29
+ fileInput.click();
30
+ }
31
+
32
+ function displayImage(input) {
33
+ var selectedImage = document.getElementById('selectedImage');
34
+ if (input.files && input.files[0]) {
35
+ var reader = new FileReader();
36
+ reader.onload = function (e) {
37
+ selectedImage.src = e.target.result;
38
+ document.getElementById('imageContainer').style.display = 'block';
39
+ }
40
+ reader.readAsDataURL(input.files[0]);
41
+ }
42
+ }
43
+
44
+ function detectImage() {
45
+ var fileInput = document.getElementById('fileInput');
46
+ if (!fileInput.files[0]) {
47
+ alert('Please choose an image.');
48
+ return;
49
+ }
50
+
51
+ var formData = new FormData();
52
+ formData.append('file', fileInput.files[0]);
53
+
54
+ // Hide result container and show loader
55
+ document.getElementById('resultContainer').style.display = 'none';
56
+ document.getElementById('loader').style.display = 'block';
57
+
58
+ fetch('/detect', {
59
+ method: 'POST',
60
+ body: formData
61
+ })
62
+ .then(response => response.json())
63
+ .then(data => {
64
+ // Hiding loader and showing result container
65
+ document.getElementById('loader').style.display = 'none';
66
+ document.getElementById('resultContainer').style.display = 'block';
67
+
68
+ // Will Display result
69
+ document.getElementById('statistics').innerHTML = `
70
+ <p><strong style="color: white;">${data.result}</strong></p> <!-- Set text color to white -->
71
+ <p style="font-size: larger; color: white;">Confidence: ${data.confidence.toFixed(2)}%</p> <!-- Set text color to white -->
72
+ `;
73
+
74
+ // Will Display selected image
75
+ document.getElementById('selectedImage').src = data.image_path;
76
+ document.getElementById('imageContainer').style.display = 'block';
77
+ })
78
+ .catch(error => {
79
+ console.error('Error:', error);
80
+ //Will Hide loader and show result container with error message
81
+ document.getElementById('loader').style.display = 'none';
82
+ document.getElementById('resultContainer').style.display = 'block';
83
+ document.getElementById('statistics').innerHTML = '<p>Error occurred during detection.</p>';
84
+ });
85
+ }
86
+
87
+ document.getElementById('fileInput').addEventListener('change', function() {
88
+ displayImage(this);
89
+ });
90
+ </script>
91
+ </body>
92
+ </html>