ADOS Wiki

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

← Zum vorherigen Versionsunterschied
Keine Bearbeitungszusammenfassung
Keine Bearbeitungszusammenfassung
 
(20 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt)
Zeile 4: Zeile 4:


   const CFG = {
   const CFG = {
    // ---- Daten & Model ----
     indexTitle: (window.LabelScanConfig && window.LabelScanConfig.indexTitle) ||
     indexTitle: (window.LabelScanConfig && window.LabelScanConfig.indexTitle) ||
                 'MediaWiki:Gadget-LabelScan-index.json',
                 'MediaWiki:Gadget-LabelScan-index.json',
    topK: 8,
     transformersURL: 'https://cdn.jsdelivr.net/npm/@xenova/transformers@2.15.0',
     transformersURL: 'https://cdn.jsdelivr.net/npm/@xenova/transformers@2.15.0',
     modelId: 'Xenova/clip-vit-base-patch32',
     modelId: 'Xenova/clip-vit-base-patch32',
     localModelPath: '/models',       // <— deine Ablage
     localModelPath: '/models',         // <<— deine Modelle liegen hier
     maxSide: 1024,
 
    topK: 3,                            // <<— MAX. 3 TREFFER
     maxSide: 1280,                      // Downscale vor Auto-Crop (Performance)
 
    // ---- Auto-Crop ----
    autoCrop: true,
    edgeKeepRatio: 0.10,                // oberste 10% Kanten als Maske
    cropPadding: 0.08,                  // 8% Randzugabe um die Box
    cropMinRel: 0.40,                   // min. 40% der kleineren Bildkante
 
    // ---- Score-Badges ----
    showNumericScore: false,            // true = Zahlen zeigen, false = Badges
    confidenceBands: [0.90, 0.80],      // hoch ≥0.90, mittel ≥0.80, sonst niedrig
 
    // ---- Sonstiges ----
     debug: true
     debug: true
   };
   };


  // --------- Helpers ----------
   const log=(...a)=>{ if(CFG.debug) console.log('[LabelScan]',...a); };
   const log=(...a)=>{ if(CFG.debug) console.log('[LabelScan]',...a); };
   const warn=(...a)=>{ if(CFG.debug) console.warn('[LabelScan]',...a); };
   const warn=(...a)=>{ if(CFG.debug) console.warn('[LabelScan]',...a); };
   const err=(...a)=>{ console.error('[LabelScan]',...a); };
   const err=(...a)=>{ console.error('[LabelScan]',...a); };
   const qs=id=>document.getElementById(id);
   const qs=id=>document.getElementById(id);
   const setStatus=t=>{ const el=qs('ados-scan-status'); if(el) el.textContent=t||''; };
   const setStatus=t=>{ const el=qs('ados-scan-status'); if(el) el.textContent=t||''; };
Zeile 25: 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){
    const url=URL.createObjectURL(file);
    const prev=qs('ados-scan-preview');
    if(prev){
      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');
    }
  }


   function base64ToFloat32(b64){
   function base64ToFloat32(b64){
Zeile 33: Zeile 63:
   }
   }


   // ---------- Index ----------
   // --------- Index ----------
   let INDEX=[], INDEX_EMB=[];
   let INDEX=[], INDEX_EMB=[];
   async function loadIndex({ ui=true }={}){
   async function loadIndex({ ui=true }={}){
Zeile 51: Zeile 81:
   }
   }


   // ---------- Transformers (lokal) ----------
   // --------- Transformers (lokal) ----------
   let _visionLoadPromise=null;
   let _visionLoadPromise=null;
   async function ensureClipVision(){
   async function ensureClipVision(){
Zeile 82: Zeile 112:
       log('CLIP ready (vision, local):', model?.constructor?.name || 'unknown', '| Backend:', backend);
       log('CLIP ready (vision, local):', model?.constructor?.name || 'unknown', '| Backend:', backend);


       return { mod, processor, model };   // <— mod zurückgeben, damit wir RawImage nutzen
       return { mod, processor, model };
     })();
     })();


Zeile 88: Zeile 118:
   }
   }


   // Datei -> RawImage -> Processor -> Model
   // --------- Auto-Crop Heuristik ----------
  function toCanvasScaled(img, maxSide){
    const c=document.createElement('canvas');
    let { width:w, height:h } = img;
    const s = Math.min(1, maxSide / Math.max(w,h));
    w = Math.round(w*s); h = Math.round(h*s);
    c.width=w; c.height=h;
    const g=c.getContext('2d', { willReadFrequently:true });
    g.imageSmoothingEnabled = true;
    g.drawImage(img,0,0,w,h);
    return c;
  }
 
  function autoCropCanvas(inCanvas){
    const w=inCanvas.width, h=inCanvas.height;
    const ctx=inCanvas.getContext('2d', { willReadFrequently:true });
    const imgData=ctx.getImageData(0,0,w,h);
    const data=imgData.data;
 
    // Graustufen
    const gray=new Uint8ClampedArray(w*h);
    for(let y=0, p=0, i=0; y<h; y++){
      for(let x=0; x<w; x++, i++, p+=4){
        const r=data[p], g=data[p+1], b=data[p+2];
        gray[i] = (0.299*r + 0.587*g + 0.114*b)|0;
      }
    }
 
    // Sobel-Kanten (Magnitude)
    const mag=new Float32Array(w*h);
    const sobelX=[-1,0,1,-2,0,2,-1,0,1];
    const sobelY=[-1,-2,-1,0,0,0,1,2,1];
    for(let y=1; y<h-1; y++){
      for(let x=1; x<w-1; x++){
        let gx=0, gy=0, k=0;
        for(let j=-1;j<=1;j++){
          for(let i=-1;i<=1;i++,k++){
            const v=gray[(y+j)*w + (x+i)];
            gx += sobelX[k]*v; gy += sobelY[k]*v;
          }
        }
        mag[y*w+x] = Math.hypot(gx,gy);
      }
    }
 
    // Schwellwert: oberes x%-Quantil
    const vals = Array.from(mag).sort((a,b)=>a-b);
    const keep = CFG.edgeKeepRatio;
    const tIdx = Math.max(0, Math.min(vals.length-1, Math.floor(vals.length*(1-keep))));
    const thr = vals[tIdx];
 
    // Bounding-Box der Pixel > thr
    let minX=w, minY=h, maxX=0, maxY=0, count=0;
    for(let y=0;y<h;y++){
      for(let x=0;x<w;x++){
        const m=mag[y*w+x];
        if(m>thr){ count++; if(x<minX)minX=x; if(y<minY)minY=y; if(x>maxX)maxX=x; if(y>maxY)maxY=y; }
      }
    }
 
    if(count<50) return inCanvas; // zu wenig Signal → return original
 
    // Padding
    const pad = Math.round(CFG.cropPadding * Math.max(w,h));
    minX = Math.max(0, minX - pad);
    minY = Math.max(0, minY - pad);
    maxX = Math.min(w-1, maxX + pad);
    maxY = Math.min(h-1, maxY + pad);
 
    // Mindestgröße
    const boxW=maxX-minX+1, boxH=maxY-minY+1;
    const minLen = Math.round(CFG.cropMinRel * Math.min(w,h));
    let cx=minX, cy=minY, cw=boxW, ch=boxH;
    if(cw<minLen || ch<minLen){
      const needW = Math.max(minLen, cw);
      const needH = Math.max(minLen, ch);
      const centerX = Math.round((minX+maxX)/2);
      const centerY = Math.round((minY+maxY)/2);
      cx = Math.max(0, Math.min(w-needW, centerX - Math.floor(needW/2)));
      cy = Math.max(0, Math.min(h-needH, centerY - Math.floor(needH/2)));
      cw = needW; ch = needH;
    }
 
    const out=document.createElement('canvas');
    out.width=cw; out.height=ch;
    out.getContext('2d').drawImage(inCanvas, cx, cy, cw, ch, 0, 0, cw, ch);
    return out;
  }
 
  // --------- Embedding-Pipeline ---------
   async function embedFileImage(file){
   async function embedFileImage(file){
     const { mod, processor, model } = await ensureClipVision();
     const { mod, processor, model } = await ensureClipVision();
Zeile 94: Zeile 213:
     setStatus('Bild vorbereiten …'); setProgress(0.20);
     setStatus('Bild vorbereiten …'); setProgress(0.20);


     // 🔧 Wichtig: direkt aus dem Blob eine RawImage erstellen
     // 1) Bild laden
     const imageRaw = await mod.RawImage.fromBlob(file);
     const img = await new Promise((res,rej)=>{
      const url=URL.createObjectURL(file);
      const image=new Image();
      image.crossOrigin='anonymous';
      image.onload=()=>{ URL.revokeObjectURL(url); res(image); };
      image.onerror=e=>{ URL.revokeObjectURL(url); rej(e); };
      image.src=url;
    });
 
    // 2) Scale → Auto-Crop
    let canvas = toCanvasScaled(img, CFG.maxSide);
    if(CFG.autoCrop){
      setStatus('Auto-Crop …'); setProgress(0.30);
      canvas = autoCropCanvas(canvas);
    }


     // (optional) lokal skalieren, wenn du maximale Kante begrenzen willst:
     // 3) Canvas → Blob → RawImage (robust für Processor)
     // await imageRaw.resize(CFG.maxSide, CFG.maxSide, { resample: 'bilinear' });
     const blob = await new Promise(r => canvas.toBlob(r, 'image/jpeg', 0.95));
    const imageRaw = await mod.RawImage.fromBlob(blob);


     setStatus('Bild analysieren …'); setProgress(0.38);
     setStatus('Bild analysieren …'); setProgress(0.45);


     // Processor auf RawImage
     // 4) Processor & Model
     const inputs = await processor(imageRaw, { return_tensors: 'pt' });
     const inputs = await processor(imageRaw, { return_tensors: 'pt' });
    // Vorwärtslauf
     const out = await model.forward({ pixel_values: inputs.pixel_values });
     const out = await model.forward({ pixel_values: inputs.pixel_values });


    // Embedding holen & normieren
     const vec = out?.image_embeds?.data || out?.image_embeds;
     const vec = out?.image_embeds?.data || out?.image_embeds;
     if(!(vec instanceof Float32Array)) throw new Error('Embedding-Format unerwartet');
     if(!(vec instanceof Float32Array)) throw new Error('Embedding-Format unerwartet');
     return normalize(vec);
 
     // 5) Normieren
    let n=0; for(let i=0;i<vec.length;i++) n+=vec[i]*vec[i];
    const norm = Math.sqrt(n)||1;
    const v = new Float32Array(vec.length);
    for(let i=0;i<vec.length;i++) v[i]=vec[i]/norm;
    return v;
   }
   }


  function normalize(v){
    let n=0; for(let i=0;i<v.length;i++) n+=v[i]*v[i];
    n=Math.sqrt(n)||1;
    const o=new Float32Array(v.length);
    for(let i=0;i<v.length;i++) o[i]=v[i]/n;
    return o;
  }
   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 131: 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;
   }
   }


   function renderResults(r){
  // --------- Score-Badges ---------
     const box=qs('ados-scan-results'); if(!box) return; box.innerHTML='';
  function scoreBadge(score){
     if(!r.length){ box.innerHTML='<div class="empty">Keine klaren Treffer.</div>'; return; }
    if (CFG.showNumericScore) {
     r.forEach(({ i, score })=>{
    return `<span style="font-variant-numeric:tabular-nums;color:#666">${score.toFixed(3)}</span>`;
      const it=INDEX[i];
    }
      const link = mw.util.getUrl((it.title||'').replace(/ /g,'_'));
    const [hi, mid] = CFG.confidenceBands || [0.90, 0.80];
      const thumb=it.thumb||'';
    let txt = 'niedrig', bg = '#f1f5f9', fg = '#334155';
       box.innerHTML+=
    if (score >= hi) { txt = 'hoch';  bg = '#e6ffed'; fg = '#0a7d2c'; }
        `<div class="ados-hit" style="display:grid;grid-template-columns:60px 1fr auto;gap:10px;align-items:center;padding:.35rem 0;">
    else if (score >= mid) { txt = 'mittel'; bg = '#fff7e6'; fg = '#a45500'; }
          ${thumb?`<img src="${thumb}" style="width:60px;border-radius:6px;">`:`<div></div>`}
    return `<span style="display:inline-block;padding:.12rem .45rem;border-radius:999px;background:${bg};color:${fg};font-weight:600;font-size:.85em;line-height:1">${txt}</span>`;
          <div><b><a href="${link}">${mw.html.escape(it.title||'')}</a></b></div>
  }
          <div style="color:#666;font-variant-numeric:tabular-nums">${score.toFixed(3)}</div>
 
         </div>`;
  // --------- Rendering (max. 3 Treffer) ---------
// Score-Badge ausgeblendet
// <div>${scoreBadge(score)}</div>
 
   function renderResults(ranked){
     const box=qs('ados-scan-results');
    if(!box) return;
    box.innerHTML='';
 
     if(!ranked || !ranked.length){
      box.innerHTML='<div class="empty">Keine klaren Treffer. Bitte ein anderes Foto oder näher am Frontlabel.</div>';
      return;
    }
 
     // NEU: Dedupe nach Titel, DANN auf topK begrenzen
    const uniqueRanked = dedupeByTitle(ranked).slice(0, CFG.topK);
 
    const makeCard = (it, score) => `
       <div class="ados-card" style="display:grid;grid-template-columns:120px 1fr;gap:14px;align-items:center;padding:12px;border:1px solid #e6e6e6;border-radius:14px;box-shadow:0 1px 8px rgba(0,0,0,.04);">
        ${it.thumb?`<img src="${it.thumb}" alt="" style="width:120px;height:auto;border-radius:10px;">`
                  :`<div style="width:120px;height:90px;background:#f3f3f3;border-radius:10px;"></div>`}
        <div style="display:flex;flex-direction:column;gap:8px;">
          <div style="font-weight:700;font-size:1.05rem;line-height:1.2;">
            <a href="${mw.util.getUrl((it.title||'').replace(/ /g,'_'))}">${mw.html.escape(it.title||'')}</a>
          </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>
          </div>
         </div>
      </div>`;
 
    const grid = document.createElement('div');
    grid.style.display='grid';
    grid.style.gridTemplateColumns='1fr';
    grid.style.gap='12px';
 
    // max. CFG.topK (=3) Karten nach Dedupe
    uniqueRanked.forEach(function(hit){
      const it = INDEX[hit.i];
      grid.innerHTML += makeCard(it, hit.score);
     });
     });
    box.appendChild(grid);
   }
   }


   // ---------- UI ----------
   // --------- UI / Flow ----------
   let BOUND=false;
   let BOUND=false;
   function bindUI(){
   function bindUI(){
Zeile 164: 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?.[0]; if(f){
     const pick = e => {
      const url=URL.createObjectURL(f);
      const f=e.target.files?.[0];
      const prev=qs('ados-scan-preview');
      if(f) onNewImage(f);
      if(prev){ prev.innerHTML=`<img alt="Vorschau" style="max-width:100%;height:auto;border-radius:8px;" src="${url}">`; prev.setAttribute('aria-hidden','false'); }
     };
     }};
     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?.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;
           inGal.files=dt.files;
           const url=URL.createObjectURL(f);
           onNewImage(f);
          const prev=qs('ados-scan-preview');
          if(prev){ prev.innerHTML=`<img alt="Vorschau" style="max-width:100%;height:auto;border-radius:8px;" src="${url}">`; prev.setAttribute('aria-hidden','false'); }
         }
         }
       });
       });
     }
     }


     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 201: Zeile 404:
     btnRun.addEventListener('click', onRunClick);
     btnRun.addEventListener('click', onRunClick);


     BOUND=true;
     BOUND=true; log('UI gebunden.');
    log('UI gebunden.');
   }
   }


   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 file = (inCam.files && inCam.files[0]) || (inGal.files && inGal.files[0]);
      const inCam  = qs('ados-scan-file-camera');
      const inGal  = qs('ados-scan-file-gallery');
 
      const file = inCam.files?.[0] || 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 224: Zeile 429:
       setStatus('Abgleich …');
       setStatus('Abgleich …');


       renderResults(rankByCosine(q));
       const ranked = rankByCosine(q);
      renderResults(ranked);
 
       setStatus('Fertig.');
       setStatus('Fertig.');
       setProgress(null);
       setProgress(null);
Zeile 230: 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 243: 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“