Hugging Face's logo

Spaces:
TheFrenchDemos
/
FraudScore
Runtime error

App Files Community
TheFrenchDemos commited on
Commit
ef996ab
·
verified ·
1 Parent(s): 2a53b60

Update templates/index.html

Browse files
Files changed (1) hide show
  1. templates/index.html +170 -299
templates/index.html CHANGED
@@ -1,326 +1,197 @@
 
1
  <!DOCTYPE html>
2
  <html lang="en">
3
  <head>
4
- <meta charset="UTF-8">
5
- <title>Compare Two Images</title>
6
- <meta name="viewport" content="width=device-width, initial-scale=1">
7
- <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
8
- <style>
9
- .preset-image-container {
10
- width: 100%;
11
- overflow: hidden;
12
- margin-bottom: 10px;
13
- }
14
- .preset-image {
15
- width: 100%;
16
- height: auto;
17
- cursor: pointer;
18
- transition: transform 0.2s, border 0.2s;
19
- border: 2px solid transparent;
20
- border-radius: 8px;
21
- }
22
- .preset-image:hover {
23
- transform: scale(1.05);
24
- }
25
- .preset-image.selected {
26
- border-color: #0d6efd;
27
- }
28
- .dropzone {
29
- border: 2px dashed #ccc;
30
- padding: 20px;
31
- text-align: center;
32
- margin-top: 10px;
33
- border-radius: 8px;
34
- background-color: #f9f9f9;
35
- }
36
- .preview-image {
37
- width: 100%;
38
- max-width: 200px;
39
- height: auto;
40
- margin: 10px auto;
41
- display: block;
42
- border-radius: 8px;
43
- opacity: 0;
44
- transition: opacity 0.5s ease-in;
45
- }
46
- .preview-image.visible {
47
- opacity: 1;
48
- }
49
- .loading-container {
50
- text-align: center;
51
- margin-top: 20px;
52
- }
53
- .loading-text {
54
- margin-top: 10px;
55
- font-size: 18px;
56
- color: #555;
57
- }
58
- .jauge-container {
59
- display: flex;
60
- align-items: center;
61
- }
62
- .jauge {
63
- position: relative;
64
- width: 40px;
65
- height: 200px;
66
- border: 2px solid #ccc;
67
- border-radius: 10px;
68
- background: #f0f0f0;
69
- overflow: hidden;
70
- margin-right: 20px;
71
- }
72
- .jauge-level {
73
- position: absolute;
74
- width: 100%;
75
- bottom: 0;
76
- border-radius: 8px;
77
- transition: height 1s ease, background-color 1s ease;
78
- }
79
- .jauge-labels {
80
- display: flex;
81
- flex-direction: column;
82
- justify-content: space-between;
83
- height: 200px;
84
- font-size: 0.8rem;
85
- text-align: left;
86
- }
87
- #compareSection {
88
- margin-top: 30px;
89
- text-align: center;
90
- }
91
- #results {
92
- margin-top: 20px;
93
- }
94
- </style>
95
  </head>
96
-
97
  <body>
98
  <div class="container my-4">
99
- <h1 class="text-center">Compare Two Images</h1>
100
 
101
- <div class="row mt-4">
102
- <!-- Column 1: Original Image -->
103
- <div class="col-md-6">
104
- <h5 class="text-center">Select Original Image</h5>
105
- <div class="row">
106
- <div class="col-4">
107
- <div class="preset-image-container">
108
- <img id="preset-1-1" src="/static/marilyn_1.jpg" class="preset-image" onclick="selectPreset(1, 1)" alt="Original 1">
109
- </div>
110
- </div>
111
- <div class="col-4">
112
- <div class="preset-image-container">
113
- <img id="preset-2-1" src="/static/star wars_1b.jpg" class="preset-image" onclick="selectPreset(2, 1)" alt="Original 2">
114
- </div>
115
- </div>
116
- <div class="col-4">
117
- <div class="preset-image-container">
118
- <img id="preset-3-1" src="/static/muhammad ali_1.jpg" class="preset-image" onclick="selectPreset(3, 1)" alt="Original 3">
119
- </div>
120
- </div>
121
- </div>
122
- <div class="dropzone" id="dropzone1">
123
- <p>Or drag and drop an image here</p>
124
- <input type="file" id="fileInput1" accept="image/*" hidden>
125
- <button class="btn btn-outline-primary" onclick="document.getElementById('fileInput1').click()">Upload Original</button>
126
- </div>
127
  </div>
128
-
129
- <!-- Column 2: AI Generated Image -->
130
- <div class="col-md-6">
131
- <h5 class="text-center">Select AI Generated Image</h5>
132
- <div class="row">
133
- <div class="col-4">
134
- <div class="preset-image-container">
135
- <img id="preset-1-2" src="/static/marilyn_2.png" class="preset-image" onclick="selectPreset(1, 2)" alt="AI 1">
136
- </div>
137
- </div>
138
- <div class="col-4">
139
- <div class="preset-image-container">
140
- <img id="preset-2-2" src="/static/star wars_2b.png" class="preset-image" onclick="selectPreset(2, 2)" alt="AI 2">
141
- </div>
142
- </div>
143
- <div class="col-4">
144
- <div class="preset-image-container">
145
- <img id="preset-3-2" src="/static/muhammad ali_2.png" class="preset-image" onclick="selectPreset(3, 2)" alt="AI 3">
146
- </div>
147
- </div>
148
- </div>
149
- <div class="dropzone" id="dropzone2">
150
- <p>Or drag and drop an image here</p>
151
- <input type="file" id="fileInput2" accept="image/*" hidden>
152
- <button class="btn btn-outline-primary" onclick="document.getElementById('fileInput2').click()">Upload AI Image</button>
153
- </div>
154
  </div>
155
- </div>
156
-
157
- <!-- Section for Preview + Compare Button + Distance -->
158
- <div id="compareSection" class="d-flex justify-content-center align-items-center flex-column" style="display: none;">
159
- <div class="d-flex justify-content-around align-items-center w-100">
160
- <img id="previewImage1" class="preview-image" alt="Original Preview">
161
- <div id="compareButtonContainer"></div>
162
- <img id="previewImage2" class="preview-image" alt="AI Preview">
163
  </div>
164
- <div id="results"></div>
 
 
 
 
 
165
  </div>
166
-
167
- <h2>Euclidean Distance: <span id="euclidVal"></span></h2>
168
-
169
- <div class="jauge-container">
170
- <div class="jauge">
171
- <div class="jauge-level" id="jaugeLevel"></div>
 
 
 
 
 
 
 
 
 
 
 
 
172
  </div>
173
- <div class="jauge-labels">
174
- <span>most certainly</span>
175
- <span>very probably</span>
176
- <span>probably</span>
177
- <span>possibly</span>
178
- <span>probably not</span>
179
- <span>definitely not</span>
180
  </div>
181
  </div>
182
-
183
- </div>
 
 
 
 
 
 
 
 
184
 
185
- <!-- Scripts -->
 
 
 
 
 
 
 
 
 
 
 
 
 
 
186
  <script>
187
- let file1 = null;
188
- let file2 = null;
189
- function resetSelection(target) {
190
- for (let i = 1; i <= 3; i++) {
191
- const img = document.getElementById(`preset-${i}-${target}`);
192
- if (img) img.classList.remove('selected');
193
- }
194
  }
195
- function selectPreset(presetNumber, target) {
 
196
  const imgElement = document.getElementById(`preset-${presetNumber}-${target}`);
197
- const imagePath = imgElement.getAttribute('src'); // Récupère le chemin exact
198
- const fileName = imagePath.split('/').pop(); // Extrait le nom du fichier
199
  fetch(imagePath)
200
- .then(res => {
201
- if (!res.ok) throw new Error(`Impossible de charger ${fileName}`);
202
- return res.blob();
203
- })
204
- .then(blob => {
205
- const file = new File([blob], fileName, { type: blob.type });
206
- if (target === 1) {
207
- file1 = file;
208
- updatePreview(blob, 1);
209
- resetSelection(1);
210
- imgElement.classList.add('selected');
211
- } else {
212
- file2 = file;
213
- updatePreview(blob, 2);
214
- resetSelection(2);
215
- imgElement.classList.add('selected');
216
- }
217
- })
218
- .catch(err => {
219
- console.error('Erreur de chargement de l’image :', err);
220
- alert(err.message);
221
- })
222
- .then(() => checkReadyToCompare());
223
- }
224
- function updatePreview(blob, target) {
225
- const reader = new FileReader();
226
- reader.onload = (event) => {
227
- if (target === 1) {
228
- document.getElementById('previewImage1').src = event.target.result;
229
- document.getElementById('previewImage1').classList.add('visible');
230
- } else {
231
- document.getElementById('previewImage2').src = event.target.result;
232
- document.getElementById('previewImage2').classList.add('visible');
233
- }
234
- document.getElementById('compareSection').style.display = 'flex';
235
- };
236
- reader.readAsDataURL(blob);
237
- }
238
- document.getElementById('fileInput1').addEventListener('change', (e) => {
239
- file1 = e.target.files[0];
240
- updatePreview(file1, 1);
241
- resetSelection(1);
242
- checkReadyToCompare();
243
- });
244
- document.getElementById('fileInput2').addEventListener('change', (e) => {
245
- file2 = e.target.files[0];
246
- updatePreview(file2, 2);
247
- resetSelection(2);
248
- checkReadyToCompare();
249
- });
250
- function checkReadyToCompare() {
251
- const container = document.getElementById('compareButtonContainer');
252
- if (file1 && file2) {
253
- container.innerHTML = `
254
- <button class="btn btn-primary" onclick="processImages()">Compare</button>
255
- `;
256
  } else {
257
- container.innerHTML = '';
 
 
 
258
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
259
  }
260
- async function processImages() {
261
- if (!file1 || !file2) {
262
- alert('Please select two images first!');
263
- return;
264
- }
265
- const formData = new FormData();
266
- formData.append('image1', file1);
267
- formData.append('image2', file2);
268
- const resultsDiv = document.getElementById('results');
269
- resultsDiv.innerHTML = `
270
- <div class="loading-container">
271
- <div class="spinner-border text-primary" role="status"></div>
272
- <div class="loading-text">Processing...</div>
273
- </div>`;
274
- try {
275
- const response = await fetch('/process', {
276
- method: 'POST',
277
- body: formData
278
- });
279
- if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
280
- const data = await response.json();
281
- if (data.distance !== undefined) {
282
- //insertion de la jauge
283
- const euclid = data.distance;
284
- document.getElementById('euclidVal').textContent = euclid.toFixed(2);
285
-
286
- let height = 0, color = '#ccc';
287
-
288
- if (euclid > 60) {
289
- height = 0; color = '#198754'; // green
290
- } else if (euclid > 55) {
291
- height = 16.66; color = '#0d6efd'; // blue
292
- } else if (euclid > 50) {
293
- height = 33.33; color = '#0dcaf0'; // light blue
294
- } else if (euclid > 40) {
295
- height = 50; color = '#ffc107'; // yellow
296
- } else if (euclid > 35) {
297
- height = 66.66; color = '#fd7e14'; // orange
298
- } else {
299
- height = 83.33; color = '#dc3545'; // red
300
- }
301
-
302
- document.getElementById('jaugeLevel').style.height = height + '%';
303
- document.getElementById('jaugeLevel').style.backgroundColor = color;
304
- //fin d'insertion de la jauge
305
- resultsDiv.innerHTML = `
306
- <div class="card mt-3 p-4 text-center">
307
- <h4>Euclidean Distance</h4>
308
- <p class="display-6">${data.distance.toFixed(4)}</p>
309
- </div>`;
310
- } else {
311
- throw new Error('Invalid server response.');
312
- }
313
- } catch (error) {
314
- console.error('Error:', error);
315
- resultsDiv.innerHTML = `
316
- <div class="alert alert-danger" role="alert">
317
- ${error.message}
318
- </div>`;
319
- }
320
- }
321
  </script>
322
-
323
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
324
  </body>
325
  </html>
326
 
 
 
1
+
2
  <!DOCTYPE html>
3
  <html lang="en">
4
  <head>
5
+ <meta charset="UTF-8">
6
+ <title>Compare Two Images</title>
7
+ <meta name="viewport" content="width=device-width, initial-scale=1">
8
+ <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
9
+ <style>
10
+ .preset-image-container { width: 100%; overflow: hidden; margin-bottom: 10px; }
11
+ .preset-image { width: 100%; height: auto; cursor: pointer; transition: transform 0.2s, border 0.2s; border: 2px solid transparent; border-radius: 8px; }
12
+ .preset-image:hover { transform: scale(1.05); }
13
+ .preset-image.selected { border-color: #0d6efd; }
14
+ .dropzone { border: 2px dashed #ccc; padding: 20px; text-align: center; margin-top: 10px; border-radius: 8px; background-color: #f9f9f9; }
15
+ .preview-image { width: 100%; max-width: 200px; height: auto; margin: 10px auto; display: block; border-radius: 8px; opacity: 0; transition: opacity 0.5s ease-in; }
16
+ .preview-image.visible { opacity: 1; }
17
+ .loading-container { text-align: center; margin-top: 20px; }
18
+ .loading-text { margin-top: 10px; font-size: 18px; color: #555; }
19
+ .jauge-container { display: flex; align-items: center; }
20
+ .jauge { position: relative; width: 40px; height: 200px; border: 2px solid #ccc; border-radius: 10px; background: #f0f0f0; overflow: hidden; margin-right: 20px; }
21
+ .jauge-level { position: absolute; width: 100%; bottom: 0; border-radius: 8px; transition: height 1s ease, background-color 1s ease; }
22
+ .jauge-labels { display: flex; flex-direction: column; justify-content: space-between; height: 200px; font-size: 0.8rem; text-align: left; }
23
+ #compareSection { margin-top: 30px; text-align: center; }
24
+ #results { margin-top: 20px; }
25
+ </style>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
26
  </head>
 
27
  <body>
28
  <div class="container my-4">
29
+ <h1 class="text-center">Fraud Score</h1>
30
 
31
+ <div class="row mt-4">
32
+ <div class="col-md-6">
33
+ <h5 class="text-center">Select Original Image</h5>
34
+ <div class="row">
35
+ <div class="col-4">
36
+ <div class="preset-image-container">
37
+ <img id="preset-1-1" src="/static/marilyn_1.jpg" class="preset-image" onclick="selectPreset(1, 1)" alt="Original 1">
38
+ </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
39
  </div>
40
+ <div class="col-4">
41
+ <div class="preset-image-container">
42
+ <img id="preset-2-1" src="/static/star wars_1b.jpg" class="preset-image" onclick="selectPreset(2, 1)" alt="Original 2">
43
+ </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
44
  </div>
45
+ <div class="col-4">
46
+ <div class="preset-image-container">
47
+ <img id="preset-3-1" src="/static/muhammad ali_1.jpg" class="preset-image" onclick="selectPreset(3, 1)" alt="Original 3">
48
+ </div>
 
 
 
 
49
  </div>
50
+ </div>
51
+ <div class="dropzone" id="dropzone1">
52
+ <p>Or drag and drop an image here (.jpg .jpeg .png .webp)</p>
53
+ <input type="file" id="fileInput1" accept="image/*" hidden>
54
+ <button class="btn btn-outline-primary" onclick="document.getElementById('fileInput1').click()">Upload Original</button>
55
+ </div>
56
  </div>
57
+ <div class="col-md-6">
58
+ <h5 class="text-center">Select AI Generated Image</h5>
59
+ <div class="row">
60
+ <div class="col-4">
61
+ <div class="preset-image-container">
62
+ <img id="preset-1-2" src="/static/marilyn_2.png" class="preset-image" onclick="selectPreset(1, 2)" alt="AI 1">
63
+ </div>
64
+ </div>
65
+ <div class="col-4">
66
+ <div class="preset-image-container">
67
+ <img id="preset-2-2" src="/static/star wars_2b.png" class="preset-image" onclick="selectPreset(2, 2)" alt="AI 2">
68
+ </div>
69
+ </div>
70
+ <div class="col-4">
71
+ <div class="preset-image-container">
72
+ <img id="preset-3-2" src="/static/muhammad ali_2.png" class="preset-image" onclick="selectPreset(3, 2)" alt="AI 3">
73
+ </div>
74
+ </div>
75
  </div>
76
+ <div class="dropzone" id="dropzone2">
77
+ <p>Or drag and drop an image here (.jpg .jpeg .png .webp)</p>
78
+ <input type="file" id="fileInput2" accept="image/*" hidden>
79
+ <button class="btn btn-outline-primary" onclick="document.getElementById('fileInput2').click()">Upload AI Image</button>
 
 
 
80
  </div>
81
  </div>
82
+ </div>
83
+
84
+ <div id="compareSection" class="d-flex justify-content-center align-items-center flex-column" style="display: none;">
85
+ <div class="d-flex justify-content-around align-items-center w-100">
86
+ <img id="previewImage1" class="preview-image" alt="Original Preview">
87
+ <div id="compareButtonContainer"></div>
88
+ <img id="previewImage2" class="preview-image" alt="AI Preview">
89
+ </div>
90
+ <div id="results"></div>
91
+ </div>
92
 
93
+ <h2>Fraud Score: <span id="euclidVal"></span>%</h2>
94
+ <div class="jauge-container">
95
+ <div class="jauge">
96
+ <div class="jauge-level" id="jaugeLevel"></div>
97
+ </div>
98
+ <div class="jauge-labels">
99
+ <span>most certainly</span>
100
+ <span>very probably</span>
101
+ <span>probably</span>
102
+ <span>possibly</span>
103
+ <span>probably not</span>
104
+ <span>definitely not</span>
105
+ </div>
106
+ </div>
107
+ </div>
108
  <script>
109
+ let file1 = null, file2 = null;
110
+ function resetSelection(target) {
111
+ for (let i = 1; i <= 3; i++) {
112
+ const img = document.getElementById(`preset-${i}-${target}`);
113
+ if (img) img.classList.remove('selected');
 
 
114
  }
115
+ }
116
+ function selectPreset(presetNumber, target) {
117
  const imgElement = document.getElementById(`preset-${presetNumber}-${target}`);
118
+ const imagePath = imgElement.getAttribute('src');
 
119
  fetch(imagePath)
120
+ .then(res => res.blob())
121
+ .then(blob => {
122
+ const file = new File([blob], imagePath.split('/').pop(), { type: blob.type });
123
+ if (target === 1) {
124
+ file1 = file;
125
+ updatePreview(blob, 1);
126
+ resetSelection(1);
127
+ imgElement.classList.add('selected');
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
128
  } else {
129
+ file2 = file;
130
+ updatePreview(blob, 2);
131
+ resetSelection(2);
132
+ imgElement.classList.add('selected');
133
  }
134
+ checkReadyToCompare();
135
+ });
136
+ }
137
+ function updatePreview(blob, target) {
138
+ const reader = new FileReader();
139
+ reader.onload = event => {
140
+ const img = document.getElementById(`previewImage${target}`);
141
+ img.src = event.target.result;
142
+ img.classList.add('visible');
143
+ document.getElementById('compareSection').style.display = 'flex';
144
+ };
145
+ reader.readAsDataURL(blob);
146
+ }
147
+ document.getElementById('fileInput1').addEventListener('change', (e) => {
148
+ file1 = e.target.files[0];
149
+ updatePreview(file1, 1);
150
+ resetSelection(1);
151
+ checkReadyToCompare();
152
+ });
153
+ document.getElementById('fileInput2').addEventListener('change', (e) => {
154
+ file2 = e.target.files[0];
155
+ updatePreview(file2, 2);
156
+ resetSelection(2);
157
+ checkReadyToCompare();
158
+ });
159
+ function checkReadyToCompare() {
160
+ const container = document.getElementById('compareButtonContainer');
161
+ if (file1 && file2) {
162
+ container.innerHTML = `<button class="btn btn-primary" onclick="processImages()">Calculate Fraud Score</button>`;
163
+ } else {
164
+ container.innerHTML = '';
165
  }
166
+ }
167
+ async function processImages() {
168
+ const formData = new FormData();
169
+ formData.append('image1', file1);
170
+ formData.append('image2', file2);
171
+ const resultsDiv = document.getElementById('results');
172
+ resultsDiv.innerHTML = `<div class='loading-container'><div class='spinner-border text-primary' role='status'></div><div class='loading-text'>Processing...</div></div>`;
173
+ const response = await fetch('/process', { method: 'POST', body: formData });
174
+ const data = await response.json();
175
+ if (data.distance !== undefined) {
176
+ const euclid = data.distance;
177
+ const fraudScore = Math.max(5, 174 - 2.4 * euclid);
178
+ document.getElementById('euclidVal').textContent = fraudScore.toFixed(2);
179
+ const level = fraudScore;
180
+ let color = '#ccc';
181
+ if (level > 90) color = '#dc3545';
182
+ else if (level > 75) color = '#fd7e14';
183
+ else if (level > 60) color = '#ffc107';
184
+ else if (level > 45) color = '#0dcaf0';
185
+ else if (level > 30) color = '#0d6efd';
186
+ else color = '#198754';
187
+ document.getElementById('jaugeLevel').style.height = `${level}%`;
188
+ document.getElementById('jaugeLevel').style.backgroundColor = color;
189
+ resultsDiv.innerHTML = `<div class="card mt-3 p-4 text-center"><h4>Fraud Score</h4><p class="display-6">${fraudScore.toFixed(2)}%</p></div>`;
190
+ }
191
+ }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
192
  </script>
 
193
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
194
  </body>
195
  </html>
196
 
197
+