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

/* LabelScan – Bildähnlichkeit mit CLIP (UMD Loader, robust)

  Lädt @xenova/transformers (UMD) per <script>, baut einen lokalen Bildindex

  aus Abfüllungs-Thumbnails und sucht die ähnlichsten Seiten.

*/

   // ======== KONFIG ========

   const UMD_URL = 'https://cdn.jsdelivr.net/npm/@xenova/transformers@3.0.0/dist/transformers.umd.min.js';

   // ======== UI Helpers ========

   const $ = (s) => document.querySelector(s);

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

   function showPreview(file){ const url=URL.createObjectURL(file); const box=$('#ados-scan-preview'); if(box) box.innerHTML=`<img alt="Vorschau" src="${url}" style="max-width:260px;border-radius:8px">`; }

   function renderResults(items){

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

     if(!items || !items.length){ box.innerHTML='<div class="ados-hit">Keine Treffer gefunden.</div>'; return; }

     items.forEach(it=>{

         <div class="meta"><b><a href="${url}">${mw.html.escape(it.title)}</a></b>

        <div class="sub">Ähnlichkeit: ${(it.score*100).toFixed(1)}%</div></div>`;

     });

   // ======== IndexedDB Mini ========

   function idbOpen(){

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

       req.onupgradeneeded = (e)=>{ const db=req.result; if(e.oldVersion<1) db.createObjectStore(IDB.store,{keyPath:'key'}); };

       req.onsuccess=()=>res(req.result); req.onerror=()=>rej(req.error);

   async function idbSet(key,val){ const db=await idbOpen(); return new Promise((res,rej)=>{ const tx=db.transaction(IDB.store,'readwrite'); const st=tx.objectStore(IDB.store); const r=st.put({key,val,ts:Date.now()}); r.onsuccess=()=>res(); r.onerror=()=>rej(r.error);});}

   let clipReady=null;

   function ensureTransformersUMD(){

     clipReady = new Promise((resolve, reject)=>{

       if (window.transformers && window.transformers.pipeline) return resolve(window.transformers);

       const s=document.createElement('script');

      s.src = UMD_URL;

      s.async = true;

      s.onload = ()=> resolve(window.transformers);

       s.onerror = ()=> reject(new Error('Transformers UMD konnte nicht geladen werden (CSP/CDN geblockt?)'));

       document.head.appendChild(s);

     });

   // ======== Mathe ========

   function cosine(a,b){ let s=0; for(let i=0;i<a.length;i++) s += a[i]*b[i]; // Vektoren sind schon normalisiert

     return Math.max(0, Math.min(1, (s+1)/2));

   // ======== MW API ========

   async function apiGet(p){ await mw.loader.using('mediawiki.api'); const api=new mw.Api(); return api.get(p); }

   async function pagesFromCategory(cat){

     const pages=[]; let cont; do{

       const r=await apiGet({ action:'query', list:'categorymembers', cmtitle:'Category:'+cat, cmtype:'page', cmlimit:'max', ...(cont||{}) });

       (r.query?.categorymembers||[]).forEach(it=>pages.push(it.title));

       cont=r.continue;

     }while(cont);

   async function pageThumbs(titles){

     const out=[]; const chunk=(a,n)=>a.length?[a.slice(0,n),...chunk(a.slice(n),n)]:[];

     for(const batch of chunk(titles,40)){

       const r = await apiGet({ action:'query', prop:'pageimages', piprop:'thumbnail', pithumbsize:THUMB_SIZE, titles:batch.join('|'), formatversion:2 });

       (r.query?.pages||[]).forEach(p=>{ const th=p.thumbnail?.source; if(th) out.push({title:p.title, thumb:th}); });

   async function buildGallery(){

     const set=new Set();

     for(const c of CATEGORIES){ const list=await pagesFromCategory(c); list.forEach(t=>set.add(t)); }

     const titles=[...set];

     return pageThumbs(titles);

   // ======== Index bauen/laden ========

   async function ensureIndex(report){

     let idx = await idbGet('index-v2');

     if (idx?.items?.length){ report?.(1,1,'Index aus Cache'); return idx; }

     report?.(0,1,'Lade Wiki-Bilder …');

     const tf = await ensureTransformersUMD();

 

     const items=[];

     for(let i=0;i<gallery.length;i++){

       const g=gallery[i];

       report?.(i, gallery.length, `Embedding ${i+1}/${gallery.length}: ${g.title}`);

         const emb = await pipe(g.thumb, { pooling:'mean', normalize:true }); // Float32Array

         items.push({ title:g.title, thumb:g.thumb, vec:Array.from(emb.data) });

       }catch(e){

         console.warn('[LabelScan] Embedding-Fehler', g.title, e);

     const index={ builtAt:Date.now(), items };

     await idbSet('index-v2', index);

     report?.(1,1,'Index gespeichert');

   // ======== Suche ========

   async function runSearch(file){

     const index = await ensureIndex((i,n,msg)=>{ setStatus(msg||'Index…'); setProgress(n? i/n : null); });

     if(!index.items.length){ renderResults([]); setProgress(null); setStatus('Kein Bildmaterial gefunden.'); return; }

     setStatus('Berechne Embedding vom Foto …'); setProgress(0.1);

     const tf = await ensureTransformersUMD();

    const pipe = await tf.pipeline('image-feature-extraction', 'Xenova/clip-vit-base-patch32');

     const dataURL = await new Promise((res,rej)=>{ const r=new FileReader(); r.onload=()=>res(r.result); r.onerror=rej; r.readAsDataURL(file); });

     const q = await pipe(dataURL, { pooling:'mean', normalize:true });

     const qv = q.data;

     setStatus('Finde ähnlichste Abfüllungen …'); setProgress(0.2);

     const scored = index.items.map(it=>({ title:it.title, thumb:it.thumb, score:cosine(qv, it.vec) }))

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

                              .slice(0, TOP_K);

     renderResults(scored);

   // ======== Binding ========

    const runBtn=$('#ados-scan-run'), fileIn=$('#ados-scan-file'), bigBtn=$('#ados-scan-bigbtn');

     bigBtn && bigBtn.addEventListener('click', ()=>fileIn.click());

     fileIn.addEventListener('change', function(){ if(this.files && this.files[0]) showPreview(this.files[0]); });

     runBtn.addEventListener('click', async (ev)=>{

       if(!(fileIn.files && fileIn.files[0])){ alert('Bitte ein Foto auswählen oder aufnehmen.'); return; }

       runBtn.disabled=true; runBtn.textContent='Erkenne …';

       catch(e){

        console.error('[LabelScan] Fehler:', e);

        setStatus(

          'Fehler beim Laden/Verarbeiten. Prüfe Konsole. '+

          'Häufige Ursachen: CDN/CSP blockiert oder Netzwerk.'

        );

       } finally {

        runBtn.disabled=false; runBtn.textContent='🔍 Erkennen & suchen';

      }

   if(document.readyState==='loading') document.addEventListener('DOMContentLoaded', bind); else bind();

   new MutationObserver(bind).observe(document.documentElement, { childList:true, subtree:true });