ADOS Wiki

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

← Zum vorherigen VersionsunterschiedZum nächsten Versionsunterschied →
Keine Bearbeitungszusammenfassung
Keine Bearbeitungszusammenfassung
Zeile 17: Zeile 17:
   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 23: Zeile 22:
     if(p==null){ bar.hidden=true; bar.value=0; } else { bar.hidden=false; bar.value=Math.max(0,Math.min(1,p)); } };
     if(p==null){ bar.hidden=true; bar.value=0; } else { bar.hidden=false; bar.value=Math.max(0,Math.min(1,p)); } };


   function showPreview(file){
   function base64ToFloat32(b64){ const bin=atob(b64), len=bin.length;
    const url=URL.createObjectURL(file);
     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); }
     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');
    }
  }


   // ---------------- Index ----------------
   // ---------------- Index ----------------
Zeile 43: Zeile 36:
     if(!Array.isArray(json)) throw new Error('Index ist keine Array-JSON');
     if(!Array.isArray(json)) throw new Error('Index ist keine Array-JSON');
     INDEX = json;
     INDEX = json;
     INDEX_EMB = INDEX.map((it)=> (typeof it.embed==='string'&&it.embed.length) ? base64ToFloat32(it.embed) : null);
     INDEX_EMB = INDEX.map(it => (typeof it.embed==='string' && it.embed.length) ? base64ToFloat32(it.embed) : null);
    const withEmb = INDEX_EMB.filter(v=>v && v.length).length;
     log('Index geladen:', INDEX.length, 'Einträge');
     log('Index geladen:', INDEX.length, 'Einträge');
     log('Embeddings vorhanden:', withEmb, '/', INDEX.length);
     log('Embeddings vorhanden:', INDEX_EMB.filter(v=>v&&v.length).length, '/', INDEX.length);
     if(ui) setProgress(0.06);
     if(ui) setProgress(0.06);
     return INDEX;
     return INDEX;
  }
  function base64ToFloat32(b64){
    const bin=atob(b64), len=bin.length;
    const buf=new ArrayBuffer(len);
    const view=new Uint8Array(buf);
    for(let i=0;i<len;i++) view[i]=bin.charCodeAt(i);
    return new Float32Array(buf);
   }
   }


Zeile 63: Zeile 47:
   async function ensureClipVision(){
   async function ensureClipVision(){
     if(_visionLoadPromise) return _visionLoadPromise;
     if(_visionLoadPromise) return _visionLoadPromise;
     setStatus('Modell laden …'); setProgress(0.08);
     setStatus('Modell laden …'); setProgress(0.08);


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


       // Nur LOKAL laden
       // nur LOKAL
       mod.env.allowLocalModels = true;
       mod.env.allowLocalModels = true;
       mod.env.allowRemoteModels = false;
       mod.env.allowRemoteModels = false;
       mod.env.localModelPath  = CFG.localModelPath;
       mod.env.localModelPath  = CFG.localModelPath;


       // WASM von transformers-CDN (liefert ort-wasm-simd.wasm korrekt)
       // 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 || {};
Zeile 86: Zeile 69:
       ]);
       ]);


       let backend='unknown';
       let backend='unknown'; try { backend = model?.session?.executionProvider || backend; } catch(_){}
      try { backend = model?.session?.executionProvider || backend; } catch(_){}
       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 };
       return { mod, processor, model };
     })();
     })();
Zeile 96: Zeile 77:
   }
   }


   // Datei -> Canvas -> Processor({images}) -> Model
   // Datei -> HTMLImageElement -> Processor(image) -> Modell
   async function embedFileImage(file){
   async function embedFileImage(file){
     function loadImage(f){
     function loadImage(f){
Zeile 107: Zeile 88:
         img.src=url;
         img.src=url;
       });
       });
    }
    function toCanvas(img,max){
      const c=document.createElement('canvas');
      let {width:w,height:h}=img;
      const s=Math.min(1, max/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;
     }
     }


Zeile 122: Zeile 94:
     setStatus('Bild vorbereiten …'); setProgress(0.20);
     setStatus('Bild vorbereiten …'); setProgress(0.20);
     const img = await loadImage(file);
     const img = await loadImage(file);
    const canvas = toCanvas(img, CFG.maxSide);


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


     // WICHTIG: Processor als Objekt mit { images: canvas } aufrufen
     // 🔧 WICHTIG: Gib dem Processor direkt das HTMLImageElement
     const inputs = await processor({ images: canvas }, { return_tensors: 'pt' });
     const inputs = await processor(img, { return_tensors: 'pt' });
     const out = await model.forward({ pixel_values: inputs.pixel_values });
     const out = await model.forward({ pixel_values: inputs.pixel_values });


Zeile 135: Zeile 106:
   }
   }


   function normalize(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; }
    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; }
 
   function rankByCosine(q){ const s=[]; for(let i=0;i<INDEX.length;i++){ const v=INDEX_EMB[i]; if(!v) continue; s.push({i,score:cosine(q,v)}); } s.sort((a,b)=>b.score-a.score); return s.slice(0,CFG.topK); }
   function rankByCosine(q){
    const s=[];
    for(let i=0;i<INDEX.length;i++){
      const v=INDEX_EMB[i];
      if(!v) continue;
      s.push({ i, score: cosine(q,v) });
    }
    s.sort((a,b)=> b.score-a.score);
    return s.slice(0, CFG.topK);
  }


   function renderResults(r){
   function renderResults(r){
     const box=qs('ados-scan-results');
     const box=qs('ados-scan-results'); if(!box) return; box.innerHTML='';
    if(!box) return;
     if(!r.length){ box.innerHTML='<div class="empty">Keine klaren Treffer.</div>'; return; }
    box.innerHTML='';
     r.forEach(({i,score})=>{
     if(!r.length){
      box.innerHTML='<div class="empty">Keine klaren Treffer.</div>';
      return;
    }
     r.forEach(({ i, score })=>{
       const it=INDEX[i];
       const it=INDEX[i];
       const link = mw.util.getUrl((it.title||'').replace(/ /g,'_'));
       const link = mw.util.getUrl((it.title||'').replace(/ /g,'_'));
       const thumb = it.thumb || '';
       const thumb=it.thumb||'';
       box.innerHTML +=
       box.innerHTML+=
         `<div class="ados-hit" style="display:grid;grid-template-columns:60px 1fr auto;gap:10px;align-items:center;padding:.35rem 0;">
         `<div class="ados-hit" style="display:grid;grid-template-columns:60px 1fr auto;gap:10px;align-items:center;padding:.35rem 0;">
           ${thumb ? `<img src="${thumb}" style="width:60px;border-radius:6px;">` : `<div></div>`}
           ${thumb?`<img src="${thumb}" style="width:60px;border-radius:6px;">`:`<div></div>`}
           <div><b><a href="${link}">${mw.html.escape(it.title||'')}</a></b></div>
           <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 style="color:#666;font-variant-numeric:tabular-nums">${score.toFixed(3)}</div>
Zeile 186: Zeile 136:
     const btnCam = qs('ados-scan-btn-camera');
     const btnCam = qs('ados-scan-btn-camera');
     const btnGal = qs('ados-scan-btn-gallery');
     const btnGal = qs('ados-scan-btn-gallery');
    const drop  = qs('ados-scan-drop');
    const btnReset = qs('ados-scan-reset');


     if(!btnRun || !inCam || !inGal) return;
     if(!btnRun || !inCam || !inGal) return;
Zeile 194: Zeile 142:
     btnGal && btnGal.addEventListener('click', ()=> inGal.click());
     btnGal && btnGal.addEventListener('click', ()=> inGal.click());


     const pick = e => { const f=e.target.files?.[0]; if(f) showPreview(f); };
     const pick = e => { const f=e.target.files?.[0]; if(f){
      const url=URL.createObjectURL(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'); }
    }};
     inCam.addEventListener('change', pick);
     inCam.addEventListener('change', pick);
     inGal.addEventListener('change', pick);
     inGal.addEventListener('change', pick);
    if(drop){
      drop.addEventListener('dragover', ev => { ev.preventDefault(); drop.classList.add('is-over'); });
      drop.addEventListener('dragleave', ()=> drop.classList.remove('is-over'));
      drop.addEventListener('drop', ev => {
        ev.preventDefault(); drop.classList.remove('is-over');
        const f = ev.dataTransfer?.files?.[0];
        if(f){
          const dt=new DataTransfer(); dt.items.add(f);
          inGal.files=dt.files; showPreview(f);
        }
      });
    }
    btnReset && btnReset.addEventListener('click', ()=>{
      setStatus('Bereit.'); setProgress(null);
      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>';
      inCam.value=''; inGal.value='';
    });


     btnRun.addEventListener('click', onRunClick);
     btnRun.addEventListener('click', onRunClick);


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


   async function onRunClick(){
   async function onRunClick(){
     try{
     try{
       const btnRun = qs('ados-scan-run'); // <— hier neu holen (fix für ReferenceError)
       const btnRun = qs('ados-scan-run'); // hier neu holen
       const inCam  = qs('ados-scan-file-camera');
       const inCam  = qs('ados-scan-file-camera');
       const inGal  = qs('ados-scan-file-gallery');
       const inGal  = qs('ados-scan-file-gallery');
Zeile 236: Zeile 167:


       await loadIndex({ ui:true });
       await loadIndex({ ui:true });
 
       await ensureClipVision(); // warmup
      // Sicherheitshalber: Modell vorab laden (optional)
       await ensureClipVision();


       const q = await embedFileImage(file);
       const q = await embedFileImage(file);
 
       setProgress(0.70); setStatus('Abgleich …');
       setProgress(0.70);
      setStatus('Abgleich …');
 
       renderResults(rankByCosine(q));
       renderResults(rankByCosine(q));
       setStatus('Fertig.');
       setStatus('Fertig.'); setProgress(null);
      setProgress(null);
     } catch(e){
     } catch(e){
       err('Fehler', e);
       err('Fehler', e);
Zeile 259: Zeile 184:


   function init(){
   function init(){
     if(document.readyState==='loading'){
     if(document.readyState==='loading'){ document.addEventListener('DOMContentLoaded', bindUI, { once: true }); }
      document.addEventListener('DOMContentLoaded', bindUI, { once: true });
     else { bindUI(); }
     } else {
      bindUI();
    }
     loadIndex({ ui:false }).catch(err).finally(()=>{ setStatus('Bereit.'); setProgress(null); });
     loadIndex({ ui:false }).catch(err).finally(()=>{ setStatus('Bereit.'); setProgress(null); });
   }
   }
Abgerufen von „https://ados-wiki.de/wiki/MediaWiki:Gadget-LabelScan.js“