Zum Inhalt springen

MediaWiki:Gadget-LabelScan.js

Aus ADOS Wiki

Hinweis: Leere nach dem Veröffentlichen den Browser-Cache, um die Änderungen sehen zu können.

  • Firefox/Safari: Umschalttaste drücken und gleichzeitig Aktualisieren anklicken oder entweder Strg+F5 oder Strg+R (⌘+R auf dem Mac) drücken
  • Google Chrome: Umschalttaste+Strg+R (⌘+Umschalttaste+R auf dem Mac) drücken
  • Edge: Strg+F5 drücken oder Strg drücken und gleichzeitig Aktualisieren anklicken
/* 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',
    maxSide: 1024,
    debug: true
  };

  function log(...a){ if(CFG.debug) console.log('[LabelScan]',...a); }
  function warn(...a){ if(CFG.debug) console.warn('[LabelScan]',...a); }
  function err(...a){ console.error('[LabelScan]',...a); }

  function qs(id){ return document.getElementById(id); }
  function setStatus(t){ const el=qs('ados-scan-status'); if(el) el.textContent=t||''; }
  function 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 showPreview(file){
    const url=URL.createObjectURL(file);
    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');
    }
  }

  let INDEX=[];
  let 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,i)=>{
      if(typeof it.embed==='string' && it.embed.length){
        try{ return base64ToFloat32(it.embed); }
        catch(e){ warn('Embed-Decode',i,it.title,e); return null; }
      }
      return null;
    });

    log('Index geladen:',INDEX.length,'Einträge');
    if(ui) setProgress(0.06);
    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);
  }

  let _clipModulePromise=null;
  async function ensureClipExtractor(){
    if(_clipModulePromise) return _clipModulePromise;

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

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

      mod.env.localModelPath=null;
      mod.env.remoteModels=true;
      mod.env.allowRemoteModels=true;
      mod.env.useBrowserCache=true;

      // ✅ FIX: Task geändert
      const pipe = await mod.pipeline(
        'feature-extraction',
        CFG.modelId,
        { quantized:true }
      );

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

    return _clipModulePromise;
  }

  async function embedFileImage(file){
    function loadImage(f){
      return new Promise((res,rej)=>{
        const url=URL.createObjectURL(f);
        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 scale(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;
    }

    const { pipe } = await ensureClipExtractor();
    setStatus('Bild vorbereiten …'); setProgress(0.20);

    const img = await loadImage(file);
    const canvas = scale(img, CFG.maxSide);

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

    const out = await pipe(canvas);
    const raw = out && out.data;
    const vec = raw instanceof Float32Array ? raw : new Float32Array(raw);
    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">${score.toFixed(3)}</div>
        </div>`;
    });
  }

  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 btnReset=qs('ados-scan-reset');
    const btnCam=qs('ados-scan-btn-camera');
    const btnGal=qs('ados-scan-btn-gallery');
    const drop=qs('ados-scan-drop');

    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) showPreview(f); };
    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; showPreview(f); }
      });
    }

    btnReset && btnReset.addEventListener('click',()=>{
      setStatus('Bereit.'); setProgress(null);
      qs('ados-scan-preview').innerHTML='<div class="note">Noch keine Vorschau.</div>';
      qs('ados-scan-results').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 inCam=qs('ados-scan-file-camera');
      const inGal=qs('ados-scan-file-gallery');
      const btnRun=qs('ados-scan-run');

      const file=inCam.files?.[0]||inGal.files?.[0];
      if(!file){ alert('Bitte zuerst ein Foto auswählen.'); return; }

      btnRun.disabled=true;
      await loadIndex({ ui:true });

      if(!INDEX_EMB.some(v=>v&&v.length)){
        setStatus('Index enthält keine Embeddings.');
        setProgress(null);
        return;
      }

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

    // Warm load ohne UI
    loadIndex({ ui:false }).catch(err).finally(()=>{
      setStatus('Bereit.');
      setProgress(null);
    });
  }

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

})();
Abgerufen von „https://ados-wiki.de/index.php?title=MediaWiki:Gadget-LabelScan.js&oldid=6486“