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

     topKShow: 8,           // so viele Treffer anzeigen

     transformersURL: 'https://cdn.jsdelivr.net/npm/@xenova/transformers@2.15.0/dist/transformers.min.js',

   // -------- Utils --------

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

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

     const bar=$('ados-scan-progress'); if(!bar) return;

     if(p==null){ bar.hidden=true; bar.value=0; } else { bar.hidden=false; bar.value=Math.max(0,Math.min(1,p)); }

     const prev=$('ados-scan-preview');

       prev.innerHTML='<img alt="Vorschau" style="max-width:100%;height:auto;border-radius:8px;">';

       prev.querySelector('img').src=url;

   let INDEX=[], INDEX_EMB=[];

   async function loadIndex(){

     setStatus('Index laden …'); setProgress(0.03);

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

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

     if(!res.ok) throw new Error('Index HTTP '+res.status);

     const data = await res.json();

     if(!Array.isArray(data)) throw new Error('Index ist kein Array');

     INDEX = data.filter(x => x && x.title && x.thumb);

       if(typeof it.embed === 'string' && it.embed){

         try { return base64ToFloat32(it.embed); } catch(e){ warn('Embed decode', i, it.title, e); }

     log('Index geladen:', INDEX.length, 'Einträge');

     setProgress(0.06);

     const bin=atob(b64), buf=new ArrayBuffer(bin.length), u8=new Uint8Array(buf);

     for(let i=0;i<bin.length;i++) u8[i]=bin.charCodeAt(i);

   // -------- pHash Helfer (optional) --------

  function hexToBigInt(h){ try { return BigInt('0x'+String(h).trim()); } catch{ return null; } }

   function ham64(aHex,bHex){

     if(a===null||b===null) return 64;

     let x=a^b, d=0n; while(x){ d+=(x&1n); x>>=1n; } return Number(d);

  function phashScore(a,b){ const d=ham64(a,b); return 1-(d/64); } // 1..0

     if(_clipReady) return _clipReady;

    _clipReady = (async ()=>{

       const pipe = await mod.pipeline('feature-extraction', CFG.modelId, { quantized:true });

       log('CLIP ready:', pipe.model?.constructor?.name||'unknown');

     return _clipReady;

   // -------- Bild → Embedding --------

  function fileToImage(file){

     return new Promise((res,rej)=>{

      const url=URL.createObjectURL(file);

      const img=new Image(); img.crossOrigin='anonymous';

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

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

      img.src=url;

    });

  }

     });

  function toCanvas(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; c.getContext('2d').drawImage(img,0,0,w,h);

    return c;

  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 out=new Float32Array(v.length); for(let i=0;i<v.length;i++) out[i]=v[i]/n; return out; }

  function cosine(a,b){ let s=0; const L=Math.min(a.length,b.length); for(let i=0;i<L;i++) s+=a[i]*b[i]; return s; }

     const { pipe } = await ensureClip();

     const img = await fileToImage(file);

     const canvas = toCanvas(img, CFG.maxSide);

     const vec = out?.data instanceof Float32Array

      ? out.data

      : new Float32Array(out?.data || out || []);

   async function embedURL(url){

     const { pipe } = await ensureClip();

     const img = await urlToImage(url);

     const canvas = toCanvas(img, CFG.maxSide);

     const out = await pipe(canvas);

    const vec = out?.data instanceof Float32Array

      : new Float32Array(out?.data || out || []);

     return normalize(vec);

   // -------- Matching --------

  async function matchImage(file){

 

     const q = await embedFile(file);

 

     // 2) Kandidatenliste bestimmen

    //      (Wir haben keinen Upload-pHash → fallback: nimm die ersten N)

    let candidates = INDEX.map((it, i) => ({ i, it, p: (it.phash ? 0.5 : 0.5) }));

    candidates.sort((a,b)=>{

       const ae = INDEX_EMB[a.i] ? 1 : 0;

       const be = INDEX_EMB[b.i] ? 1 : 0;

 

    setStatus('Kandidaten bewerten …'); setProgress(0.55);

       try{

        const s = cosine(q, vec);

        scored.push({ i:c.i, score:s });

      }catch(e){

      }finally{

        done++; setProgress(0.55 + 0.35*(done/candidates.length));

 

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

     return scored.slice(0, CFG.topKShow);

   function renderResults(ranked){

     const box=$('ados-scan-results'); if(!box) return;

     if(!ranked || !ranked.length){

      box.innerHTML='<div class="empty">Keine klaren Treffer. Bitte anderes Foto oder näher am Frontlabel.</div>';

      return;

    }

     ranked.forEach(({i,score})=>{

       const it=INDEX[i]; const url=mw.util.getUrl((it.title||'').replace(/ /g,'_'));

       const div=document.createElement('div');

       div.className='ados-hit';

      div.style.display='grid';

      div.style.gridTemplateColumns='60px 1fr auto';

      div.style.gap='10px'; div.style.alignItems='center';

      div.innerHTML =

        (it.thumb? `<img src="${it.thumb}" alt="" style="width:60px;height:auto;border-radius:6px;border:1px solid #eee;">` : '<div></div>') +

        `<div><b><a href="${url}">${esc(it.title||'')}</a></b></div>` +

        `<div style="color:#666;font-variant-numeric:tabular-nums">${score.toFixed(3)}</div>`;

      box.appendChild(div);

   function bind(){

     const btnCam=$('ados-scan-btn-camera');

     const btnGal=$('ados-scan-btn-gallery');

     const inCam=$('ados-scan-file-camera');

     const inGal=$('ados-scan-file-gallery');

     const btnRun=$('ados-scan-run');

     const btnReset=$('ados-scan-reset');

     const drop=$('ados-scan-drop');

     if(!btnRun || !inCam || !inGal){ warn('UI unvollständig'); return; }

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

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

     const onPick=e=>{ const f=e.target.files?.[0]; if(f) showPreview(f); };

     inCam.addEventListener('change', onPick);

     inGal.addEventListener('change', onPick);

       drop.addEventListener('dragover', e=>{ e.preventDefault(); drop.classList.add('is-over'); });

       drop.addEventListener('dragleave', ()=> drop.classList.remove('is-over'));

       drop.addEventListener('drop', e=>{

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

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

     btnReset?.addEventListener('click', ()=>{

     btnRun.addEventListener('click', async ()=>{

    });

   // -------- Init --------

     if(document.readyState==='loading'){ document.addEventListener('DOMContentLoaded', bind, {once:true}); }

     else { bind(); }

     // Index vorwärmen

     loadIndex().catch(err);