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

     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||''; }

  function setProgress(p){

     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;

   // -------- Index laden --------

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

     INDEX_EMB = INDEX.map((it,i)=>{

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

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

      return null;

    });

     setProgress(0.06);

   function base64ToFloat32(b64){

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

     return new Float32Array(buf);

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

    const a=hexToBigInt(aHex), b=hexToBigInt(bHex);

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

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

     if(_clipReady) return _clipReady;

    _clipReady = (async ()=>{

       mod.env.localModelPath=null;

       mod.env.remoteModels=true;

       mod.env.allowRemoteModels=true;

       mod.env.useBrowserCache=true;

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

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

       return { mod, pipe };

     return _clipReady;

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

   function fileToImage(file){

  function toCanvas(img,maxSide){

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

   async function embedFile(file){

     const { pipe } = await ensureClip();

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

     const img = await fileToImage(file);

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

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

     const out = await pipe(canvas);

     const vec = out?.data instanceof Float32Array

      ? out.data

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

     return normalize(vec);

  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

      ? out.data

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

     return normalize(vec);

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

   async function matchImage(file){

     await loadIndex();

    showPreview(file);

     // 1) Query-Embedding

    const q = await embedFile(file);

     // 2) Kandidatenliste bestimmen

     //    a) wenn Index pHash hat und du *auch* Upload-pHash hättest → vorfiltern.

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

    //    b) Oder wenn viele ohne Embed → 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;

      return be-ae;

     // 3) Scoring: vorhandene Embeddings direkt; fehlende live aus Thumb

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

     const scored=[];

     let done=0;

     for(const c of candidates){

        const vec = INDEX_EMB[c.i] || await embedURL(c.it.thumb);

        const s = cosine(q, vec);

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

       }catch(e){

         // Thumb-Load-Fehler ignorieren

       }finally{

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

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

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

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

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

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

   // -------- UI binden --------

   function bind(){

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

         if(f){ const dt=new DataTransfer(); dt.items.add(f); inGal.files=dt.files; showPreview(f); }

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

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

      try{

        const f=inCam.files?.[0] || inGal.files?.[0];

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

        btnRun.disabled=true; setStatus('Starte …'); setProgress(0.02);

        await loadIndex();

        const ranked = await matchImage(f);

        setStatus('Fertig.'); setProgress(null);

       }catch(e){ err(e); setStatus('Fehler bei Erkennung/Suche.'); setProgress(null); }

       finally{ btnRun.disabled=false; }

    });

     BOUND=true;

    log('UI gebunden.');

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

     else { bind(); }

     setTimeout(bind,250); setTimeout(bind,1000);

     loadIndex().catch(err);