Hugging Face's logo

Spaces:
sonuprasad
/
AI_Image_Detector_app
Runtime error

App Files Community
sonuprasad commited on
Commit
5602c2b
•
1 Parent(s): 970c4c2

Upload home.html with huggingface_hub

Browse files
Files changed (1) hide show
  1. home.html +10 -78
home.html CHANGED
@@ -2,91 +2,23 @@
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>
 
2
  <html>
3
  <head>
4
  <title>Deepfake Detection</title>
5
+ <link rel="stylesheet" type="text/css" href="/home1.css">
6
  </head>
7
+ <body >
8
+
9
  <div class="container">
10
  <h1>Upload an Image for<br></h1><h2> Deepfake Detection</h2>
11
+ <form method="POST" enctype="multipart/form-data">
12
+ <!-- <input type="file" name="file" id="fileInput" color="transparent" accept="image/*"> -->
13
+ <label for="fileInput" class="file-label">Choose an Image</label>
14
+ <button type="submit" class="detect-button">Detect</button>
15
  </form>
16
  <div id="resultContainer" style="display:none;">
17
  <h2>Result</h2>
18
+ <div id="statistics">
19
+ <!-- Statistical results will be displayed here -->
20
+ </div>
 
 
 
21
  </div>
22
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
23
  </body>
24
  </html>