FraudScore

Runtime error

App Files Files Community

TheFrenchDemos commited on May 2

Commit

eb9597a

verified ·

1 Parent(s): 1244a5c

+ 2 icônes inopérantes

Browse files

Files changed (1) hide show

templates/index.html +15 -24

templates/index.html CHANGED Viewed

@@ -1,4 +1,3 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
@@ -6,6 +5,7 @@
   <title>Fraud Score</title>
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
   <style>
     :root{
       --apple-blue:#007aff;
@@ -15,35 +15,30 @@
     }
     body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;background:var(--apple-gray);color:#1c1c1e;}
     h1,h2,h5{font-weight:600;}
-    /* preset thumbnails */
     .preset-image-container{overflow:hidden;margin-bottom:12px}
     .preset-image{width:100%;border-radius:12px;border:2px solid transparent;box-shadow:var(--apple-shadow);transition:transform .3s ease,border-color .3s ease;cursor:pointer}
     .preset-image:hover{transform:scale(1.05)}
     .preset-image.selected{border-color:var(--apple-blue)}
-    /* dropzone */
     .dropzone{border:2px dashed var(--apple-border);border-radius:16px;background:#fff;padding:20px;text-align:center;box-shadow:var(--apple-shadow)}
-    /* preview */
     .preview-image{max-width:220px;border-radius:16px;box-shadow:var(--apple-shadow);opacity:0;transition:opacity .4s ease}
     .preview-image.visible{opacity:1}
-    /* buttons */
     .btn-primary{background:var(--apple-blue);border:none;font-weight:500}
     .btn-primary:hover{background:#005ecb}
-    /* gauge */
-    .jauge-container{display:none;align-items:center;gap:14px;margin-top:24px}
     .jauge{width:24px;height:160px;border-radius:12px;background:#e5e5ea;position:relative;overflow:hidden;border:1px solid var(--apple-border)}
     .jauge-level{position:absolute;bottom:0;width:100%;border-radius:12px;background:var(--apple-blue);transition:height .6s ease,background .3s ease}
     .jauge-labels{font-size:.7rem;color:#636366;display:flex;flex-direction:column;justify-content:space-between;height:160px}
-    /* sections */
     #compareSection{margin-top:40px;text-align:center;display:none}
   </style>
 </head>
 <body>
 <div class="container py-5">
   <h1 class="text-center mb-1">Fraud Score</h1>
-  <p class="text-center text-muted mb-5 fs-5">Are my works used by generative AI?</p>
   <div class="row g-5">
-    <!-- Original column -->
     <div class="col-md-6">
       <h5 class="text-center mb-3">Select Original Image</h5>
       <div class="row">
@@ -58,7 +53,6 @@
       </div>
     </div>
-    <!-- AI column -->
     <div class="col-md-6">
       <h5 class="text-center mb-3">Select AI Generated Image</h5>
       <div class="row">
@@ -74,33 +68,32 @@
     </div>
   </div>
-  <!-- Compare / previews + button + gauge -->
   <div id="compareSection">
     <div class="d-flex justify-content-center align-items-center gap-5 mt-5">
       <img id="previewImage1" class="preview-image" alt="Original preview">
       <div class="d-flex flex-column align-items-center">
-        <!-- dynamic button here -->
         <div id="compareButtonContainer" class="mb-3"></div>
-        <!-- hidden score & gauge -->
         <div id="scoreBlock" style="display:none;">
           <h2 class="fw-semibold mb-3">Fraud Score <span id="euclidVal" class="text-muted"></span>%</h2>
-          <div class="jauge-container mx-auto" id="gaugeWrapper">
-            <div class="jauge"><div class="jauge-level" id="jaugeLevel"></div></div>
-            <div class="jauge-labels text-start">
-              <span>most certainly</span><span>very probably</span><span>probably</span><span>possibly</span><span>probably not</span><span>definitely not</span>
             </div>
           </div>
         </div>
       </div>
       <img id="previewImage2" class="preview-image" alt="AI preview">
     </div>
     <div id="results" class="mt-4"></div>
   </div>
 </div>
 <script>
   let file1=null, file2=null;
   function resetSelection(target){
@@ -156,10 +149,8 @@
       const data=await res.json();
       const euclid=parseFloat(data.distance);
       const fraud=Math.min(100,Math.max(2,185-2.73*euclid));
-      // show score block and update value
       document.getElementById('euclidVal').textContent=fraud.toFixed(1);
       document.getElementById('scoreBlock').style.display='block';
-      // gauge color & height
       let color='#198754';
       if(fraud>90)color='#dc3545';
       else if(fraud>75)color='#fd7e14';

 <!DOCTYPE html>
 <html lang="en">
 <head>
   <title>Fraud Score</title>
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
+  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
   <style>
     :root{
       --apple-blue:#007aff;
     }
     body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;background:var(--apple-gray);color:#1c1c1e;}
     h1,h2,h5{font-weight:600;}
     .preset-image-container{overflow:hidden;margin-bottom:12px}
     .preset-image{width:100%;border-radius:12px;border:2px solid transparent;box-shadow:var(--apple-shadow);transition:transform .3s ease,border-color .3s ease;cursor:pointer}
     .preset-image:hover{transform:scale(1.05)}
     .preset-image.selected{border-color:var(--apple-blue)}
     .dropzone{border:2px dashed var(--apple-border);border-radius:16px;background:#fff;padding:20px;text-align:center;box-shadow:var(--apple-shadow)}
     .preview-image{max-width:220px;border-radius:16px;box-shadow:var(--apple-shadow);opacity:0;transition:opacity .4s ease}
     .preview-image.visible{opacity:1}
     .btn-primary{background:var(--apple-blue);border:none;font-weight:500}
     .btn-primary:hover{background:#005ecb}
+    .jauge-container{display:none;align-items:center;gap:24px;margin-top:24px}
     .jauge{width:24px;height:160px;border-radius:12px;background:#e5e5ea;position:relative;overflow:hidden;border:1px solid var(--apple-border)}
     .jauge-level{position:absolute;bottom:0;width:100%;border-radius:12px;background:var(--apple-blue);transition:height .6s ease,background .3s ease}
     .jauge-labels{font-size:.7rem;color:#636366;display:flex;flex-direction:column;justify-content:space-between;height:160px}
+    .icon-buttons { display: flex; flex-direction: column; gap: 16px; justify-content: center; align-items: center; margin-left: 12px; }
+    .icon-buttons button { background: none; border: none; color: var(--apple-blue); font-size: 24px; cursor: pointer; }
     #compareSection{margin-top:40px;text-align:center;display:none}
   </style>
 </head>
 <body>
 <div class="container py-5">
   <h1 class="text-center mb-1">Fraud Score</h1>
+  <p class="text-center text-muted mb-5 fs-5">Is my work used by generative AI ?</p>
   <div class="row g-5">
     <div class="col-md-6">
       <h5 class="text-center mb-3">Select Original Image</h5>
       <div class="row">
       </div>
     </div>
     <div class="col-md-6">
       <h5 class="text-center mb-3">Select AI Generated Image</h5>
       <div class="row">
     </div>
   </div>
   <div id="compareSection">
     <div class="d-flex justify-content-center align-items-center gap-5 mt-5">
       <img id="previewImage1" class="preview-image" alt="Original preview">
       <div class="d-flex flex-column align-items-center">
         <div id="compareButtonContainer" class="mb-3"></div>
         <div id="scoreBlock" style="display:none;">
           <h2 class="fw-semibold mb-3">Fraud Score <span id="euclidVal" class="text-muted"></span>%</h2>
+          <div class="d-flex align-items-center gap-4">
+            <div class="jauge-container mx-auto" id="gaugeWrapper">
+              <div class="jauge"><div class="jauge-level" id="jaugeLevel"></div></div>
+              <div class="jauge-labels text-start">
+                <span>most certainly</span><span>very probably</span><span>probably</span><span>possibly</span><span>probably not</span><span>definitely not</span>
+              </div>
+            </div>
+            <div class="icon-buttons">
+              <button title="Print"><i class="fas fa-print"></i></button>
+              <button title="Certificate"><i class="fas fa-certificate"></i></button>
             </div>
           </div>
         </div>
       </div>
       <img id="previewImage2" class="preview-image" alt="AI preview">
     </div>
     <div id="results" class="mt-4"></div>
   </div>
 </div>
 <script>
   let file1=null, file2=null;
   function resetSelection(target){
       const data=await res.json();
       const euclid=parseFloat(data.distance);
       const fraud=Math.min(100,Math.max(2,185-2.73*euclid));
       document.getElementById('euclidVal').textContent=fraud.toFixed(1);
       document.getElementById('scoreBlock').style.display='block';
       let color='#198754';
       if(fraud>90)color='#dc3545';
       else if(fraud>75)color='#fd7e14';