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

 

     maxSide: 1280,                     // Downscale vor Auto-Crop (Performance)

 

     // ---- Auto-Crop ----

 

    showNumericScore: false,            // true = Zahlen zeigen, false = Badges

     confidenceBands: [0.90, 0.80],      // hoch ≥0.90, mittel ≥0.80, sonst niedrig

 

    debug: true

   // --------- Helpers ----------

  const log=(...a)=>{ if(CFG.debug) console.log('[LabelScan]',...a); };

   const warn=(...a)=>{ if(CFG.debug) console.warn('[LabelScan]',...a); };

   const err=(...a)=>{ console.error('[LabelScan]',...a); };

   const qs=id=>document.getElementById(id);

   const setStatus=t=>{ const el=qs('ados-scan-status'); if(el) el.textContent=t||''; };

   const setProgress=p=>{

       prev.innerHTML=`<img alt="Vorschau" style="max-width:260px;width:100%;height:auto;border-radius:8px;display:block;margin:0 auto;" src="${url}">`;

   function base64ToFloat32(b64){

    const buf=new ArrayBuffer(len), view=new Uint8Array(buf);

    for(let i=0;i<len;i++) view[i]=bin.charCodeAt(i);

    return new Float32Array(buf);

   async function loadIndex({ ui=true }={}){

     const rawURL = mw.util.getUrl(CFG.indexTitle,{ action:'raw', ctype:'application/json' });

     const res = await fetch(rawURL,{ cache:'reload' });

     INDEX_EMB = INDEX.map(it => (typeof it.embed==='string' && it.embed.length) ? base64ToFloat32(it.embed) : null);

     log('Embeddings vorhanden:', INDEX_EMB.filter(v=>v&&v.length).length, '/', INDEX.length);

   // --------- Transformers (lokal) ----------

   let _visionLoadPromise=null;

    if(_visionLoadPromise) return _visionLoadPromise;

    setStatus('Modell laden …'); setProgress(0.08);

     _visionLoadPromise = (async()=>{

      const mod = await import(/* webpackIgnore: true */ CFG.transformersURL);

      mod.env.allowLocalModels = true;

      mod.env.allowRemoteModels = false;

       mod.env.localModelPath  = CFG.localModelPath;

      // WASM-Runtime (ort-wasm-simd.wasm) von transformers-CDN

      mod.env.backends = mod.env.backends || {};

      mod.env.backends.onnx = mod.env.backends.onnx || {};

      mod.env.backends.onnx.wasm = mod.env.backends.onnx.wasm || {};

      mod.env.backends.onnx.wasm.wasmPaths =

        'https://cdn.jsdelivr.net/npm/@xenova/transformers@2.15.0/dist/';

      const [processor, model] = await Promise.all([

         mod.AutoProcessor.from_pretrained(CFG.modelId),

         mod.CLIPVisionModelWithProjection.from_pretrained(CFG.modelId, { quantized: true })

      ]);

      let backend='unknown';

      try { backend = model?.session?.executionProvider || backend; } catch(_){}

      log('CLIP ready (vision, local):', model?.constructor?.name || 'unknown', '| Backend:', backend);

      return { mod, processor, model };

     return _visionLoadPromise;

   // --------- 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;

 

  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;

 

    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);

       }

     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

     const pad = Math.round(CFG.cropPadding * Math.max(w,h));

    minX = Math.max(0, minX - pad);

     minY = Math.max(0, minY - pad);

    maxY = Math.min(h-1, maxY + pad);

     let cx=minX, cy=minY, cw=boxW, ch=boxH;

     if(cw<minLen || ch<minLen){

       const needW = Math.max(minLen, cw);

      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.getContext('2d').drawImage(inCanvas, cx, cy, cw, ch, 0, 0, cw, ch);

    return out;

   // --------- Embedding-Pipeline ---------

  async function embedFileImage(file){

     const { mod, processor, model } = await ensureClipVision();

 

    setStatus('Bild vorbereiten …'); setProgress(0.20);

 

     // 1) Bild laden

      const url=URL.createObjectURL(file);

      const image=new Image();

      image.onload=()=>{ URL.revokeObjectURL(url); res(image); };

      image.onerror=e=>{ URL.revokeObjectURL(url); rej(e); };

       image.src=url;

 

    let canvas = toCanvasScaled(img, CFG.maxSide);

      setStatus('Auto-Crop …'); setProgress(0.30);

      canvas = autoCropCanvas(canvas);

 

 

 

     const out = await model.forward({ pixel_values: inputs.pixel_values });

 

 

    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;

   // vorher: slice(0, topK) hier

  // jetzt: ALLE sortiert zurückgeben, damit wir danach deduplizieren können

       s.push({ i, score: cosine(q,v) });

     s.sort((a,b)=> b.score-a.score);

     return s;

 

 

 

   function renderResults(ranked){

 

     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>`;

 

 

      grid.innerHTML += makeCard(it, hit.score);

   // --------- UI / Flow ----------

 

     if(!btnRun || !inCam || !inGal) return;

 

    };

     btnCam && btnCam.addEventListener('click', ()=> inCam.click());

     btnGal && btnGal.addEventListener('click', ()=> inGal.click());

     const pick = e => {

      const f=e.target.files?.[0];

      if(f) onNewImage(f);

    };

     inCam.addEventListener('change', pick);

     inGal.addEventListener('change', pick);

       drop.addEventListener('dragover', function(ev){ ev.preventDefault(); drop.classList.add('is-over'); });

       drop.addEventListener('dragleave', function(){ drop.classList.remove('is-over'); });

       drop.addEventListener('drop', function(ev){

         ev.preventDefault(); drop.classList.remove('is-over');

         const f = ev.dataTransfer && ev.dataTransfer.files && ev.dataTransfer.files[0];

         if(f){

          const dt=new DataTransfer(); dt.items.add(f);

          inGal.files=dt.files;

          onNewImage(f);

        }

     btnReset && btnReset.addEventListener('click', function(){

       resetResultsBox('Hier erscheinen Treffer.');

     btnRun.addEventListener('click', onRunClick);

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

       const file = (inCam.files && inCam.files[0]) || (inGal.files && inGal.files[0]);

       if(!file){ alert('Bitte zuerst ein Foto auswählen.'); return; }

       if(btnRun) btnRun.disabled = true;

       // Ergebnisse direkt leeren / „Suche läuft …“

      resetResultsBox('Suche läuft …');

       const q = await embedFileImage(file);

       const ranked = rankByCosine(q);

      renderResults(ranked);

 

     } catch(e){

       err('Fehler', e);

     } finally {

       if(btnRun) btnRun.disabled = false;

       document.addEventListener('DOMContentLoaded', bindUI, { once: true });

     } else {

      bindUI();