Update index.html

index.html

@@ -15,7 +15,7 @@ img{max-width:100%;border-radius:10px;margin-top:8px}
 h2{margin:0 0 6px;font-size:24px}
 h3{margin:16px 0 4px;font-size:15px;color:#93a3b1;font-weight:600}
 #sub{color:#c5d0da;margin:0}
-.bar{height:12px;background:#2c3844;border-radius:6px;overflow:hidden;margin:8px 0}
+.bar{height:12px;background:#2c3844;border-radius:6px;overflow:hidden;margin:6px 0 10px}
 .bar div{height:100%;background:#6f93ff;width:0}
 li{color:#f0b04a;margin:4px 0}
 small{color:#93a3b1}
@@ -24,7 +24,7 @@ small{color:#93a3b1}
 <body>
 <main>
 <h1>Was this image made by AI?</h1>
-<p>Runs on your phone. Your image is never uploaded. The first check downloads the model (about 100 MB), so use Wi-Fi.</p>
+<p>Runs on your phone. Your image is never uploaded. The first check downloads two models (a few hundred MB), so use Wi-Fi.</p>
 <input id="f" type="file" accept="image/*">
 <img id="p" alt="">
 <div id="res">
@@ -32,22 +32,31 @@ small{color:#93a3b1}
   <p id="sub"></p>
   <h3>Hidden labels</h3>
   <ul id="m"></ul>
-  <h3>Pixel check</h3>
-  <div id="pct"></div>
-  <div class="bar"><div id="b"></div></div>
+  <h3>Pixel check 1</h3>
+  <div id="pct1"></div>
+  <div class="bar"><div id="b1"></div></div>
+  <h3>Pixel check 2</h3>
+  <div id="pct2"></div>
+  <div class="bar"><div id="b2"></div></div>
   <small id="raw"></small><br><br>
   <small>A probability, not proof. Detectors can be wrong, especially on new generators and screenshots.</small>
 </div>
 </main>
 <script type="module">
-import { AutoProcessor, AutoModelForImageClassification, RawImage } from 'https://cdn.jsdelivr.net/npm/@huggingface/transformers@3';
+import { pipeline, AutoProcessor, AutoModelForImageClassification, RawImage } from 'https://cdn.jsdelivr.net/npm/@huggingface/transformers@3';
 const $ = id => document.getElementById(id);
-const MODEL = 'buildborderless/CommunityForensics-DeepfakeDet-ViT';
-let processor, model;
-async function load(){
+const MODEL1 = 'buildborderless/CommunityForensics-DeepfakeDet-ViT';
+const MODEL2 = 'LPX55/detection-model-1-ONNX';
+let processor, model, clf2, fail2 = '';
+async function load1(){
   if(model) return;
-  processor = await AutoProcessor.from_pretrained(MODEL);
-  model = await AutoModelForImageClassification.from_pretrained(MODEL, { dtype: 'fp32' });
+  processor = await AutoProcessor.from_pretrained(MODEL1);
+  model = await AutoModelForImageClassification.from_pretrained(MODEL1, { dtype: 'fp32' });
+}
+async function load2(){
+  if(clf2 || fail2) return;
+  try { clf2 = await pipeline('image-classification', MODEL2, { dtype: 'fp32' }); }
+  catch(e){ fail2 = String(e); }
 }
 const TOOLS = [[/midjourney/i,'Midjourney'],[/dall[\s\-·]?e|openai/i,'OpenAI / DALL·E'],[/stable\s?diffusion|sdxl|automatic1111/i,'Stable Diffusion'],[/firefly|generative ?fill/i,'Adobe Firefly'],[/imagen|gemini|synthid/i,'Google AI'],[/leonardo\.?ai/i,'Leonardo AI'],[/comfyui/i,'ComfyUI'],[/ideogram/i,'Ideogram']];
 function markers(bytes){
@@ -59,44 +68,61 @@ function markers(bytes){
   return out;
 }
 function li(text, color){ const e = document.createElement('li'); e.textContent = text; if(color) e.style.color = color; return e; }
+function show(n, ai){
+  if(ai === null){ $('pct'+n).textContent = 'Not available'; $('b'+n).style.width = '0'; return; }
+  $('pct'+n).textContent = 'Chance it is AI: ' + Math.round(ai*100) + '%';
+  $('b'+n).style.width = Math.round(ai*100) + '%';
+}
 $('f').onchange = async e => {
   const file = e.target.files[0]; if(!file) return;
   const url = URL.createObjectURL(file);
   $('p').src = url;
   $('res').style.display = 'block';
-  $('v').textContent = 'Loading model, please wait...';
-  $('sub').textContent = ''; $('pct').textContent = ''; $('b').style.width = '0'; $('m').innerHTML = ''; $('raw').textContent = '';
+  $('v').textContent = 'Loading models, please wait...';
+  $('sub').textContent = ''; $('m').innerHTML = ''; $('raw').textContent = '';
+  ['1','2'].forEach(n => { $('pct'+n).textContent = ''; $('b'+n).style.width = '0'; });
   try {
     const mk = markers(new Uint8Array(await file.arrayBuffer()));
-    await load();
+    await load1();
     $('v').textContent = 'Checking...';
     const image = await RawImage.read(url);
     const inputs = await processor(image);
     const { logits } = await model(inputs);
     const z = Array.from(logits.data);
-    let ai;
-    if(z.length === 1){ ai = 1 / (1 + Math.exp(-z[0])); }
-    else { const m = Math.max(...z), ex = z.map(v => Math.exp(v - m)), s = ex.reduce((a,b) => a + b, 0); ai = ex[1] / s; }
-    $('raw').textContent = 'Raw model score: ' + z.map(v => v.toFixed(2)).join(', ');
+    let ai1;
+    if(z.length === 1){ ai1 = 1 / (1 + Math.exp(-z[0])); }
+    else { const m = Math.max(...z), ex = z.map(v => Math.exp(v - m)), s = ex.reduce((a,b) => a + b, 0); ai1 = ex[1] / s; }
+    show('1', ai1);
+    $('v').textContent = 'Loading second check...';
+    await load2();
+    let ai2 = null, raw2 = '';
+    if(clf2){
+      const r = await clf2(url, { top_k: 5 });
+      raw2 = r.map(x => x.label + ' ' + Math.round(x.score*100) + '%').join(', ');
+      const hit = r.find(x => /artificial|fake|synth|generat|\bai\b/i.test(x.label));
+      const real = r.find(x => /real|human|natural|authentic/i.test(x.label));
+      if(hit) ai2 = hit.score; else if(real) ai2 = 1 - real.score;
+    }
+    show('2', ai2);
+    $('raw').textContent = 'Check 1 raw score: ' + z.map(v => v.toFixed(2)).join(', ') + (clf2 ? ' | Check 2 output: ' + raw2 : ' | Check 2 could not load: ' + fail2.slice(0,120));
     if(mk.length){ mk.forEach(t => $('m').appendChild(li(t))); }
     else { $('m').appendChild(li('None found. Screenshots and forwarded images often lose their labels.', '#93a3b1')); }
+    const ai = Math.max(ai1, ai2 === null ? 0 : ai2);
     if(mk.length){
       $('v').textContent = 'AI markers found';
       $('sub').textContent = ai >= 0.5
-        ? "The file's labels say AI, and the pixel check agrees."
-        : "The file's labels say AI. The pixel check disagreed, which happens with some newer generators such as Gemini, so trust the labels.";
+        ? "The file's labels say AI, and at least one pixel check agrees."
+        : "The file's labels say AI. Both pixel checks disagreed, which can happen with newer generators, so trust the labels.";
     } else if(ai >= 0.85){
       $('v').textContent = 'Likely AI-generated';
-      $('sub').textContent = 'No labels found, but the pixel check says AI.';
+      $('sub').textContent = 'No labels found, but a pixel check says AI.';
     } else if(ai >= 0.5){
       $('v').textContent = 'Possibly AI';
-      $('sub').textContent = 'No labels found and the pixel check is unsure.';
+      $('sub').textContent = 'No labels found and the pixel checks are unsure.';
     } else {
       $('v').textContent = 'No AI signs found';
-      $('sub').textContent = 'No labels found and the pixel check says real. This model can miss newer AI images, especially Gemini images and screenshots, so this is not proof.';
+      $('sub').textContent = 'No labels found and the pixel checks say real. These models can miss newer AI images, so this is not proof.';
     }
-    $('pct').textContent = 'Chance it is AI: ' + Math.round(ai*100) + '%';
-    $('b').style.width = Math.round(ai*100) + '%';
   } catch(err){
     $('v').textContent = 'Could not analyze this image.';
     $('raw').textContent = String(err);