ADOS Wiki

MediaWiki:Gadget-LabelScan.js: Unterschied zwischen den Versionen

← Zum vorherigen Versionsunterschied
Keine Bearbeitungszusammenfassung
Keine Bearbeitungszusammenfassung
 
(15 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt)
Zeile 7: Zeile 7:
     indexTitle: (window.LabelScanConfig && window.LabelScanConfig.indexTitle) ||
     indexTitle: (window.LabelScanConfig && window.LabelScanConfig.indexTitle) ||
                 'MediaWiki:Gadget-LabelScan-index.json',
                 'MediaWiki:Gadget-LabelScan-index.json',
     // Lokaler ESM-Shim (setzt window.transformers):
     transformersURL: 'https://cdn.jsdelivr.net/npm/@xenova/transformers@2.15.0',
    transformersShim: '/vendor/transformers/esm-shim.js',
     modelId: 'Xenova/clip-vit-base-patch32',
    // Lokale Pfade:
    localModelPath: '/models',          // <<— deine Modelle liegen hier
    localModelPath:  '/models',
    wasmDir:          '/vendor/transformers/',
     modelId:         'Xenova/clip-vit-base-patch32',


     topK: 8,
     topK: 3,                           // <<— MAX. 3 TREFFER
     maxSide: 1280,
     maxSide: 1280,                     // Downscale vor Auto-Crop (Performance)


     // ---- Auto-Crop ----
     // ---- Auto-Crop ----
     autoCrop: true,
     autoCrop: true,
     edgeKeepRatio: 0.10,
     edgeKeepRatio: 0.10,               // oberste 10% Kanten als Maske
     cropPadding: 0.08,
     cropPadding: 0.08,                 // 8% Randzugabe um die Box
     cropMinRel: 0.40,
     cropMinRel: 0.40,                   // min. 40% der kleineren Bildkante


     // ---- Score-Badges ----
     // ---- Score-Badges ----
     showNumericScore: false,
     showNumericScore: false,           // true = Zahlen zeigen, false = Badges
     confidenceBands: [0.90, 0.80],
     confidenceBands: [0.90, 0.80],     // hoch ≥0.90, mittel ≥0.80, sonst niedrig


     // ---- Sonstiges ----
     // ---- Sonstiges ----
Zeile 42: Zeile 39:
     else{ bar.hidden=false; bar.value=Math.max(0,Math.min(1,p)); }
     else{ bar.hidden=false; bar.value=Math.max(0,Math.min(1,p)); }
   };
   };
  function resetResultsBox(msg){
    const r = qs('ados-scan-results');
    if (r) {
      r.innerHTML = `<div class="empty">${msg || 'Hier erscheinen Treffer.'}</div>`;
    }
  }


   function showPreview(file){
   function showPreview(file){
Zeile 47: Zeile 51:
     const prev=qs('ados-scan-preview');
     const prev=qs('ados-scan-preview');
     if(prev){
     if(prev){
       prev.innerHTML=`<img alt="Vorschau" style="max-width:100%;height:auto;border-radius:8px;" src="${url}">`;
       prev.innerHTML=`<img alt="Vorschau" style="max-width:260px;width:100%;height:auto;border-radius:8px;display:block;margin:0 auto;" src="${url}">`;
       prev.setAttribute('aria-hidden','false');
       prev.setAttribute('aria-hidden','false');
     }
     }
Zeile 77: Zeile 81:
   }
   }


   // --------- Transformers (lokal, ESM via Shim) ----------
   // --------- Transformers (lokal) ----------
   let _visionLoadPromise=null;
   let _visionLoadPromise=null;
  function loadModuleFile(url){
    return new Promise((resolve,reject)=>{
      const s=document.createElement('script');
      s.type='module';
      s.src=url;
      s.onload=()=>resolve();
      s.onerror=()=>reject(new Error('Module load failed: '+url));
      document.head.appendChild(s);
    });
  }
   async function ensureClipVision(){
   async function ensureClipVision(){
     if(_visionLoadPromise) return _visionLoadPromise;
     if(_visionLoadPromise) return _visionLoadPromise;
Zeile 94: Zeile 88:
     setStatus('Modell laden …'); setProgress(0.08);
     setStatus('Modell laden …'); setProgress(0.08);


     _visionLoadPromise = (async ()=>{
     _visionLoadPromise = (async()=>{
       // ESM-Shim laden (setzt window.transformers)
       const mod = await import(/* webpackIgnore: true */ CFG.transformersURL);
      await loadModuleFile(CFG.transformersShim);
 
      // Warten bis verfügbar
      const t0=Date.now();
      while(!(window.transformers && typeof window.transformers==='object')){
        if(Date.now()-t0>10000) throw new Error('Transformers-ESM nicht verfügbar (Timeout).');
        await new Promise(r=>setTimeout(r,50));
      }
      const mod = window.transformers;


       // Nur lokal laden
       // Nur lokal laden
Zeile 111: Zeile 96:
       mod.env.localModelPath  = CFG.localModelPath;
       mod.env.localModelPath  = CFG.localModelPath;


       // Stabil: WASM bevorzugen & lokale Pfade setzen
       // WASM-Runtime (ort-wasm-simd.wasm) von transformers-CDN
       mod.env.backends = mod.env.backends || {};
       mod.env.backends = mod.env.backends || {};
       mod.env.backends.onnx = mod.env.backends.onnx || {};
       mod.env.backends.onnx = mod.env.backends.onnx || {};
      mod.env.backends.onnx.preferredBackend = 'wasm';
       mod.env.backends.onnx.wasm = mod.env.backends.onnx.wasm || {};
       mod.env.backends.onnx.wasm = mod.env.backends.onnx.wasm || {};
       mod.env.backends.onnx.wasm.wasmPaths = CFG.wasmDir;
       mod.env.backends.onnx.wasm.wasmPaths =
        'https://cdn.jsdelivr.net/npm/@xenova/transformers@2.15.0/dist/';


       const [processor, model] = await Promise.all([
       const [processor, model] = await Promise.all([
Zeile 161: Zeile 146:
     }
     }


     // Sobel-Kanten
     // Sobel-Kanten (Magnitude)
     const mag=new Float32Array(w*h);
     const mag=new Float32Array(w*h);
     const sobelX=[-1,0,1,-2,0,2,-1,0,1];
     const sobelX=[-1,0,1,-2,0,2,-1,0,1];
Zeile 178: Zeile 163:
     }
     }


     // oberes x%-Quantil
     // Schwellwert: oberes x%-Quantil
     const vals = Array.from(mag).sort((a,b)=>a-b);
     const vals = Array.from(mag).sort((a,b)=>a-b);
     const keep = CFG.edgeKeepRatio;
     const keep = CFG.edgeKeepRatio;
Zeile 193: Zeile 178:
     }
     }


     if(count<50) return inCanvas;
     if(count<50) return inCanvas; // zu wenig Signal → return original


     // Padding
     // Padding
Zeile 245: Zeile 230:
     }
     }


     // 3) Canvas → Blob → RawImage
     // 3) Canvas → Blob → RawImage (robust für Processor)
     const blob = await new Promise(r => canvas.toBlob(r, 'image/jpeg', 0.95));
     const blob = await new Promise(r => canvas.toBlob(r, 'image/jpeg', 0.95));
     const imageRaw = await mod.RawImage.fromBlob(blob);
     const imageRaw = await mod.RawImage.fromBlob(blob);
Zeile 267: Zeile 252:


   function cosine(a,b){ let s=0,L=Math.min(a.length,b.length); for(let i=0;i<L;i++) s+=a[i]*b[i]; return s; }
   function cosine(a,b){ let s=0,L=Math.min(a.length,b.length); for(let i=0;i<L;i++) s+=a[i]*b[i]; return s; }
  // vorher: slice(0, topK) hier
  // jetzt: ALLE sortiert zurückgeben, damit wir danach deduplizieren können
   function rankByCosine(q){
   function rankByCosine(q){
     const s=[];
     const s=[];
Zeile 275: Zeile 263:
     }
     }
     s.sort((a,b)=> b.score-a.score);
     s.sort((a,b)=> b.score-a.score);
     return s.slice(0, CFG.topK);
     return s;
  }
 
  // NEU: pro Titel nur bester Treffer
  function dedupeByTitle(ranked){
    const bestByTitle = Object.create(null);
    for (let k = 0; k < ranked.length; k++) {
      const hit = ranked[k];
      const it = INDEX[hit.i];
      const rawTitle = it && it.title ? String(it.title) : '';
      const key = rawTitle.trim().toLowerCase();
      if (!key) continue;
      const prev = bestByTitle[key];
      if (!prev || hit.score > prev.score) {
        bestByTitle[key] = hit;
      }
    }
    const arr = [];
    for (const key in bestByTitle) {
      if (Object.prototype.hasOwnProperty.call(bestByTitle, key)) {
        arr.push(bestByTitle[key]);
      }
    }
    arr.sort(function(a,b){ return b.score - a.score; });
    return arr;
   }
   }


   // --------- Score-Badges ---------
   // --------- Score-Badges ---------
  function scoreBadge(score){
  function scoreBadge(score){
     if (CFG.showNumericScore) {
     if (CFG.showNumericScore) {
      return `<span style="font-variant-numeric:tabular-nums;color:#666">${score.toFixed(3)}</span>`;
    return `<span style="font-variant-numeric:tabular-nums;color:#666">${score.toFixed(3)}</span>`;
     }
     }
     const [hi, mid] = CFG.confidenceBands || [0.90, 0.80];
     const [hi, mid] = CFG.confidenceBands || [0.90, 0.80];
Zeile 290: Zeile 302:
   }
   }


   // --------- Rendering ---------
   // --------- Rendering (max. 3 Treffer) ---------
// Score-Badge ausgeblendet
// <div>${scoreBadge(score)}</div>
 
   function renderResults(ranked){
   function renderResults(ranked){
     const box=qs('ados-scan-results');
     const box=qs('ados-scan-results');
Zeile 300: Zeile 315:
       return;
       return;
     }
     }
    // NEU: Dedupe nach Titel, DANN auf topK begrenzen
    const uniqueRanked = dedupeByTitle(ranked).slice(0, CFG.topK);


     const makeCard = (it, score) => `
     const makeCard = (it, score) => `
Zeile 309: Zeile 327:
             <a href="${mw.util.getUrl((it.title||'').replace(/ /g,'_'))}">${mw.html.escape(it.title||'')}</a>
             <a href="${mw.util.getUrl((it.title||'').replace(/ /g,'_'))}">${mw.html.escape(it.title||'')}</a>
           </div>
           </div>
          <div>${scoreBadge(score)}</div>
           <div>
           <div>
             <a href="${mw.util.getUrl((it.title||'').replace(/ /g,'_'))}" class="mw-ui-button" style="display:inline-block;padding:.4rem .7rem;border-radius:8px;background:#2a4b8d;color:#fff;text-decoration:none;">Artikel öffnen</a>
             <a href="${mw.util.getUrl((it.title||'').replace(/ /g,'_'))}" class="mw-ui-button" style="display:inline-block;padding:.4rem .7rem;border-radius:8px;background:#2a4b8d;color:#fff;text-decoration:none;">Artikel öffnen</a>
Zeile 321: Zeile 338:
     grid.style.gap='12px';
     grid.style.gap='12px';


     ranked.slice(0,3).forEach(({i,score})=>{
     // max. CFG.topK (=3) Karten nach Dedupe
       const it=INDEX[i];
    uniqueRanked.forEach(function(hit){
       grid.innerHTML += makeCard(it, score);
       const it = INDEX[hit.i];
       grid.innerHTML += makeCard(it, hit.score);
     });
     });
    const rest = ranked.slice(3);
    if(rest.length){
      const sep = document.createElement('div');
      sep.style.margin='12px 0 4px';
      sep.style.borderTop='1px solid #e8e8e8';
      sep.style.paddingTop='10px';
      sep.innerHTML = '<div style="font-weight:600;color:#444;">Weitere Treffer</div>';
      grid.appendChild(sep);
      rest.forEach(({i,score})=>{
        const it=INDEX[i];
        const link=mw.util.getUrl((it.title||'').replace(/ /g,'_'));
        const thumb=it.thumb||'';
        const row=document.createElement('div');
        row.className='ados-hit';
        row.style.display='grid';
        row.style.gridTemplateColumns='60px 1fr auto';
        row.style.alignItems='center';
        row.style.gap='10px';
        row.style.padding='.35rem 0';
        row.innerHTML=
          (thumb?`<img src="${thumb}" alt="" style="width:60px;height:auto;border-radius:6px;">`:'<div></div>')+
          `<div><b><a href="${link}">${mw.html.escape(it.title||'')}</a></b></div>`+
          `<div>${scoreBadge(score)}</div>`;
        grid.appendChild(row);
      });
    }


     box.appendChild(grid);
     box.appendChild(grid);
Zeile 371: Zeile 361:


     if(!btnRun || !inCam || !inGal) return;
     if(!btnRun || !inCam || !inGal) return;
    // Hilfsfunktion: wenn neues Bild gewählt → Vorschau & Ergebnisse zurücksetzen
    const onNewImage = (file) => {
      if (!file) return;
      showPreview(file);
      resetResultsBox('Hier erscheinen Treffer.');
      setStatus('Bereit.');
      setProgress(null);
    };


     btnCam && btnCam.addEventListener('click', ()=> inCam.click());
     btnCam && btnCam.addEventListener('click', ()=> inCam.click());
     btnGal && btnGal.addEventListener('click', ()=> inGal.click());
     btnGal && btnGal.addEventListener('click', ()=> inGal.click());
     const pick = e => { const f=e.target.files && e.target.files[0]; if(f) showPreview(f); };
 
     const pick = e => {
      const f=e.target.files?.[0];
      if(f) onNewImage(f);
    };
     inCam.addEventListener('change', pick);
     inCam.addEventListener('change', pick);
     inGal.addEventListener('change', pick);
     inGal.addEventListener('change', pick);


     if(drop){
     if(drop){
       drop.addEventListener('dragover', ev => { ev.preventDefault(); drop.classList.add('is-over'); });
       drop.addEventListener('dragover', function(ev){ ev.preventDefault(); drop.classList.add('is-over'); });
       drop.addEventListener('dragleave', ()=> drop.classList.remove('is-over'));
       drop.addEventListener('dragleave', function(){ drop.classList.remove('is-over'); });
       drop.addEventListener('drop', ev => {
       drop.addEventListener('drop', function(ev){
         ev.preventDefault(); drop.classList.remove('is-over');
         ev.preventDefault(); drop.classList.remove('is-over');
         const f = ev.dataTransfer && ev.dataTransfer.files && ev.dataTransfer.files[0];
         const f = ev.dataTransfer && ev.dataTransfer.files && ev.dataTransfer.files[0];
         if(f){
         if(f){
           const dt=new DataTransfer(); dt.items.add(f);
           const dt=new DataTransfer(); dt.items.add(f);
           inGal.files=dt.files; showPreview(f);
           inGal.files=dt.files;
          onNewImage(f);
         }
         }
       });
       });
     }
     }


     btnReset && btnReset.addEventListener('click', ()=>{
     btnReset && btnReset.addEventListener('click', function(){
       setStatus('Bereit.'); setProgress(null);
       setStatus('Bereit.'); setProgress(null);
       const p=qs('ados-scan-preview'); if(p) p.innerHTML='<div class="note">Noch keine Vorschau.</div>';
       const p=qs('ados-scan-preview'); if(p) p.innerHTML='<div class="note">Noch keine Vorschau.</div>';
       const r=qs('ados-scan-results'); if(r) r.innerHTML='<div class="empty">Hier erscheinen Treffer.</div>';
       resetResultsBox('Hier erscheinen Treffer.');
       inCam.value=''; inGal.value='';
       inCam.value=''; inGal.value='';
     });
     });
Zeile 404: Zeile 408:


   async function onRunClick(){
   async function onRunClick(){
    const btnRun = qs('ados-scan-run');
    const inCam  = qs('ados-scan-file-camera');
    const inGal  = qs('ados-scan-file-gallery');
     try{
     try{
      const btnRun = qs('ados-scan-run');
      const inCam  = qs('ados-scan-file-camera');
      const inGal  = qs('ados-scan-file-gallery');
       const file = (inCam.files && inCam.files[0]) || (inGal.files && inGal.files[0]);
       const file = (inCam.files && inCam.files[0]) || (inGal.files && inGal.files[0]);
       if(!file){ alert('Bitte zuerst ein Foto auswählen.'); return; }
       if(!file){ alert('Bitte zuerst ein Foto auswählen.'); return; }


       if(btnRun) btnRun.disabled = true;
       if(btnRun) btnRun.disabled = true;
      // Ergebnisse direkt leeren / „Suche läuft …“
      resetResultsBox('Suche läuft …');


       await loadIndex({ ui:true });
       await loadIndex({ ui:true });
Zeile 430: Zeile 437:
       err('Fehler', e);
       err('Fehler', e);
       setStatus('Fehler bei Erkennung.');
       setStatus('Fehler bei Erkennung.');
      resetResultsBox('Fehler bei der Erkennung – bitte ein anderes Foto versuchen.');
       setProgress(null);
       setProgress(null);
     } finally {
     } finally {
      const btnRun = qs('ados-scan-run');
       if(btnRun) btnRun.disabled = false;
       if(btnRun) btnRun.disabled = false;
     }
     }
Zeile 443: Zeile 450:
       bindUI();
       bindUI();
     }
     }
     loadIndex({ ui:false }).catch(err).finally(()=>{ setStatus('Bereit.'); setProgress(null); });
     loadIndex({ ui:false }).catch(err).finally(()=>{
      setStatus('Bereit.');
      resetResultsBox('Hier erscheinen Treffer.');
      setProgress(null);
    });
   }
   }


Abgerufen von „https://ados-wiki.de/wiki/MediaWiki:Gadget-LabelScan.js“