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

Version vom 8. November 2025, 20:03 Uhr

/* global mw */
(() => {
  'use strict';

  const CFG = {
    indexTitle: (window.LabelScanConfig && window.LabelScanConfig.indexTitle) ||
                'MediaWiki:Gadget-LabelScan-index.json',
    topK: 8,
    transformersURL: 'https://cdn.jsdelivr.net/npm/@xenova/transformers@2.15.0',
    modelId: 'Xenova/clip-vit-base-patch32',
    localModelPath: '/models',       // <— deine Ablage
    maxSide: 1024,
    debug: true
  };

  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=>{
    const bar=qs('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)); }
  };

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

  // ---------- Index ----------
  let INDEX=[], INDEX_EMB=[];
  async function loadIndex({ ui=true }={}){
    if(INDEX.length) return INDEX;
    if(ui){ setStatus('Index laden …'); setProgress(0.03); }
    const rawURL = mw.util.getUrl(CFG.indexTitle,{ action:'raw', ctype:'application/json' });
    const res = await fetch(rawURL,{ cache:'reload' });
    if(!res.ok) throw new Error('Index nicht ladbar: '+res.status);
    const json = await res.json();
    if(!Array.isArray(json)) throw new Error('Index ist keine Array-JSON');
    INDEX = json;
    INDEX_EMB = INDEX.map(it => (typeof it.embed==='string' && it.embed.length) ? base64ToFloat32(it.embed) : null);
    log('Index geladen:', INDEX.length, 'Einträge');
    log('Embeddings vorhanden:', INDEX_EMB.filter(v=>v&&v.length).length, '/', INDEX.length);
    if(ui) setProgress(0.06);
    return INDEX;
  }

  // ---------- Transformers (lokal) ----------
  let _visionLoadPromise=null;
  async function ensureClipVision(){
    if(_visionLoadPromise) return _visionLoadPromise;

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

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

      // Nur lokal laden
      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 };   // <— mod zurückgeben, damit wir RawImage nutzen
    })();

    return _visionLoadPromise;
  }

  // Datei -> RawImage -> Processor -> Model
  async function embedFileImage(file){
    const { mod, processor, model } = await ensureClipVision();

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

    // 🔧 Wichtig: direkt aus dem Blob eine RawImage erstellen
    const imageRaw = await mod.RawImage.fromBlob(file);

    // (optional) lokal skalieren, wenn du maximale Kante begrenzen willst:
    // await imageRaw.resize(CFG.maxSide, CFG.maxSide, { resample: 'bilinear' });

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

    // Processor auf RawImage
    const inputs = await processor(imageRaw, { return_tensors: 'pt' });

    // Vorwärtslauf
    const out = await model.forward({ pixel_values: inputs.pixel_values });

    // Embedding holen & normieren
    const vec = out?.image_embeds?.data || out?.image_embeds;
    if(!(vec instanceof Float32Array)) throw new Error('Embedding-Format unerwartet');
    return normalize(vec);
  }

  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 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){
    const box=qs('ados-scan-results'); if(!box) return; box.innerHTML='';
    if(!r.length){ box.innerHTML='<div class="empty">Keine klaren Treffer.</div>'; return; }
    r.forEach(({ i, score })=>{
      const it=INDEX[i];
      const link = mw.util.getUrl((it.title||'').replace(/ /g,'_'));
      const thumb=it.thumb||'';
      box.innerHTML+=
        `<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>`}
          <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>`;
    });
  }

  // ---------- UI ----------
  let BOUND=false;
  function bindUI(){
    if(BOUND) return;

    const btnRun = qs('ados-scan-run');
    const inCam  = qs('ados-scan-file-camera');
    const inGal  = qs('ados-scan-file-gallery');
    const btnCam = qs('ados-scan-btn-camera');
    const btnGal = qs('ados-scan-btn-gallery');
    const drop   = qs('ados-scan-drop');
    const btnReset = qs('ados-scan-reset');

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

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

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

  async function onRunClick(){
    try{
      const btnRun = qs('ados-scan-run');
      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(btnRun) btnRun.disabled = true;

      await loadIndex({ ui:true });
      await ensureClipVision(); // warmup

      const q = await embedFileImage(file);

      setProgress(0.70);
      setStatus('Abgleich …');

      renderResults(rankByCosine(q));
      setStatus('Fertig.');
      setProgress(null);
    } catch(e){
      err('Fehler', e);
      setStatus('Fehler bei Erkennung.');
      setProgress(null);
    } finally {
      const btnRun = qs('ados-scan-run');
      if(btnRun) btnRun.disabled = false;
    }
  }

  function init(){
    if(document.readyState==='loading'){
      document.addEventListener('DOMContentLoaded', bindUI, { once: true });
    } else {
      bindUI();
    }
    loadIndex({ ui:false }).catch(err).finally(()=>{ setStatus('Bereit.'); setProgress(null); });
  }

  log('gadget file loaded');
  init();

})();