ADOS Wiki

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

← Zum vorherigen Versionsunterschied
Keine Bearbeitungszusammenfassung
Keine Bearbeitungszusammenfassung
 
(41 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt)
Zeile 1: Zeile 1:
/* global mw */
/* global mw */
(function () {
(() => {
   'use strict';
   'use strict';


   // =========================
   const CFG = {
  //  UI Helpers
    // ---- Daten & Model ----
   // =========================
    indexTitle: (window.LabelScanConfig && window.LabelScanConfig.indexTitle) ||
   function $(id){ return document.getElementById(id); }
                'MediaWiki:Gadget-LabelScan-index.json',
   function esc(s){ return mw.html.escape(String(s||'')); }
    transformersURL: 'https://cdn.jsdelivr.net/npm/@xenova/transformers@2.15.0',
   function setStatus(t){ const el=$('ados-scan-status'); if(el) el.textContent=t||''; }
    modelId: 'Xenova/clip-vit-base-patch32',
   function setProgress(p){
    localModelPath: '/models',          // <<— deine Modelle liegen hier
     const bar=$('ados-scan-progress'); if(!bar) return;
 
    topK: 3,                            // <<— MAX. 3 TREFFER
    maxSide: 1280,                      // Downscale vor Auto-Crop (Performance)
 
    // ---- Auto-Crop ----
    autoCrop: true,
    edgeKeepRatio: 0.10,                // oberste 10% Kanten als Maske
    cropPadding: 0.08,                  // 8% Randzugabe um die Box
    cropMinRel: 0.40,                  // min. 40% der kleineren Bildkante
 
    // ---- Score-Badges ----
    showNumericScore: false,            // true = Zahlen zeigen, false = Badges
    confidenceBands: [0.90, 0.80],      // hoch ≥0.90, mittel ≥0.80, sonst niedrig
 
    // ---- Sonstiges ----
    debug: true
   };
 
   // --------- Helpers ----------
  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; }
     if(p==null){ bar.hidden=true; bar.value=0; }
     else { bar.hidden=false; bar.value=Math.max(0,Math.min(1,p)); }
     else{ bar.hidden=false; bar.value=Math.max(0,Math.min(1,p)); }
  };
 
  function resetResultsBox(msg){
    const r = qs('ados-scan-results');
    if (r) {
      r.innerHTML = `<div class="empty">${msg || 'Hier erscheinen Treffer.'}</div>`;
    }
   }
   }
   function showPreview(file){
   function showPreview(file){
     try{
     const url=URL.createObjectURL(file);
      const url=URL.createObjectURL(file);
    const prev=qs('ados-scan-preview');
      const prev=$('ados-scan-preview');
    if(prev){
      if(prev){
      prev.innerHTML=`<img alt="Vorschau" style="max-width:260px;width:100%;height:auto;border-radius:8px;display:block;margin:0 auto;" src="${url}">`;
        prev.innerHTML = '<img alt="Vorschau" style="max-width:100%;height:auto;border-radius:8px;" src="'+url+'">';
      prev.setAttribute('aria-hidden','false');
        prev.setAttribute('aria-hidden','false');
    }
      }
  }
    }catch(e){ console.warn('[LabelScan] Preview fail:', e); }
 
  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 ----------
  //  CLIP-Ladeschicht
   let INDEX=[], INDEX_EMB=[];
   // =========================
   async function loadIndex({ ui=true }={}){
  let CLIP_READY=null;
     if(INDEX.length) return INDEX;
   async function ensureClipExtractor(){
     if(ui){ setStatus('Index laden …'); setProgress(0.03); }
     if(CLIP_READY) return CLIP_READY;
     const rawURL = mw.util.getUrl(CFG.indexTitle,{ action:'raw', ctype:'application/json' });
     setStatus('Modell laden …');
    const res = await fetch(rawURL,{ cache:'reload' });
     CLIP_READY = new Promise((resolve,reject)=>{
    if(!res.ok) throw new Error('Index nicht ladbar: '+res.status);
      if(!window.transformers){
    const json = await res.json();
        const s=document.createElement('script');
    if(!Array.isArray(json)) throw new Error('Index ist keine Array-JSON');
        s.src='https://cdn.jsdelivr.net/npm/@xenova/transformers/dist/transformers.min.js';
    INDEX = json;
        s.async=true;
    INDEX_EMB = INDEX.map(it => (typeof it.embed==='string' && it.embed.length) ? base64ToFloat32(it.embed) : null);
        s.onload=async ()=>{ try{
    log('Index geladen:', INDEX.length, 'Einträge');
          const pipe=await window.transformers.pipeline('image-feature-extraction','Xenova/clip-vit-base-patch32');
    log('Embeddings vorhanden:', INDEX_EMB.filter(v=>v&&v.length).length, '/', INDEX.length);
          console.log('[LabelScan] CLIP bereit.');
     if(ui) setProgress(0.06);
          resolve(pipe);
     return INDEX;
        }catch(e){ console.error('[LabelScan] CLIP init fail', e); reject(e); } };
        s.onerror=reject;
        document.head.appendChild(s);
      }else{
        window.transformers.pipeline('image-feature-extraction','Xenova/clip-vit-base-patch32').then(resolve,reject);
      }
     });
     return CLIP_READY;
   }
   }


   // =========================
   // --------- Transformers (lokal) ----------
  //   Index laden (mit Embeds)
  let _visionLoadPromise=null;
  // =========================
  async function ensureClipVision(){
  function decodeEmbed(b64){
    if(_visionLoadPromise) return _visionLoadPromise;
    const bin=atob(b64), len=bin.length, bytes=new Uint8Array(len);
 
    for(let i=0;i<len;i++) bytes[i]=bin.charCodeAt(i);
    setStatus('Modell laden …'); setProgress(0.08);
     return new Float32Array(bytes.buffer);
 
    _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 };
    })();
 
     return _visionLoadPromise;
   }
   }
   function normalizeVec(v){
 
     let n=0; for(let i=0;i<v.length;i++) n+=v[i]*v[i];
  // --------- Auto-Crop Heuristik ----------
     n=Math.sqrt(n)||1; const out=new Float32Array(v.length);
   function toCanvasScaled(img, maxSide){
     for(let i=0;i<v.length;i++) out[i]=v[i]/n; return out;
     const c=document.createElement('canvas');
    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;
    const g=c.getContext('2d', { willReadFrequently:true });
    g.imageSmoothingEnabled = true;
    g.drawImage(img,0,0,w,h);
    return c;
   }
   }
  function cosine(a,b){ let s=0; for(let i=0;i<a.length;i++) s+=a[i]*b[i]; return s; }


   let ADOS_INDEX=null;
   function autoCropCanvas(inCanvas){
  async function loadLabelIndex(){
     const w=inCanvas.width, h=inCanvas.height;
    if(ADOS_INDEX) return ADOS_INDEX;
     const ctx=inCanvas.getContext('2d', { willReadFrequently:true });
    setStatus('Index laden …');
     const imgData=ctx.getImageData(0,0,w,h);
     const page = 'MediaWiki:Gadget-LabelScan-index.json'; // <-- HIER liegt dein Index
     const data=imgData.data;
     const url  = mw.util.getUrl(page, { action:'raw', ctype:'application/json', maxage:0, smaxage:0, _:Date.now() });
 
     const res  = await fetch(url, { cache:'no-store' });
     // Graustufen
     const txt  = await res.text();
     const gray=new Uint8ClampedArray(w*h);
     let json;
     for(let y=0, p=0, i=0; y<h; y++){
     try { json = JSON.parse(txt.replace(/^\uFEFF/,'')); }
      for(let x=0; x<w; x++, i++, p+=4){
     catch(e){ console.error('[LabelScan] Index JSON parse fail', e, txt.slice(0,200)); throw e; }
        const r=data[p], g=data[p+1], b=data[p+2];
    if(!Array.isArray(json) || !json.length){
        gray[i] = (0.299*r + 0.587*g + 0.114*b)|0;
       throw new Error('Index leer');
       }
     }
     }
     // Unterstützt zwei Formen:
 
     // 1) [{title, thumb, embed}]       -> embed = base64(Float32)
     // Sobel-Kanten (Magnitude)
    // 2) [{title, thumb, phash}]        -> (phash-only ist zu schwach; bitte embed bevorzugen)
     const mag=new Float32Array(w*h);
    const first=json[0];
    const sobelX=[-1,0,1,-2,0,2,-1,0,1];
    if(typeof first.embed !== 'string'){
    const sobelY=[-1,-2,-1,0,0,0,1,2,1];
      console.warn('[LabelScan] Index ohne "embed". Ergebnisqualität wird deutlich schlechter sein.');
    for(let y=1; y<h-1; y++){
      for(let x=1; x<w-1; x++){
        let gx=0, gy=0, k=0;
        for(let j=-1;j<=1;j++){
          for(let i=-1;i<=1;i++,k++){
            const v=gray[(y+j)*w + (x+i)];
            gx += sobelX[k]*v; gy += sobelY[k]*v;
          }
        }
        mag[y*w+x] = Math.hypot(gx,gy);
      }
     }
     }


     ADOS_INDEX = json.map((it, i)=>{
     // Schwellwert: oberes x%-Quantil
      let vec=null;
    const vals = Array.from(mag).sort((a,b)=>a-b);
       if (it.embed) {
    const keep = CFG.edgeKeepRatio;
         try { vec = normalizeVec( decodeEmbed(it.embed) ); }
    const tIdx = Math.max(0, Math.min(vals.length-1, Math.floor(vals.length*(1-keep))));
        catch(e){ console.warn('[LabelScan] embed decode fail @', i, it.title); vec=null; }
    const thr = vals[tIdx];
 
    // Bounding-Box der Pixel > thr
    let minX=w, minY=h, maxX=0, maxY=0, count=0;
    for(let y=0;y<h;y++){
       for(let x=0;x<w;x++){
         const m=mag[y*w+x];
        if(m>thr){ count++; if(x<minX)minX=x; if(y<minY)minY=y; if(x>maxX)maxX=x; if(y>maxY)maxY=y; }
       }
       }
      return { title: it.title, thumb: it.thumb || '', vec, phash: it.phash || null };
    }
 
    if(count<50) return inCanvas; // zu wenig Signal → return original
 
    // Padding
    const pad = Math.round(CFG.cropPadding * Math.max(w,h));
    minX = Math.max(0, minX - pad);
    minY = Math.max(0, minY - pad);
    maxX = Math.min(w-1, maxX + pad);
    maxY = Math.min(h-1, maxY + pad);
 
    // Mindestgröße
    const boxW=maxX-minX+1, boxH=maxY-minY+1;
    const minLen = Math.round(CFG.cropMinRel * Math.min(w,h));
    let cx=minX, cy=minY, cw=boxW, ch=boxH;
    if(cw<minLen || ch<minLen){
      const needW = Math.max(minLen, cw);
      const needH = Math.max(minLen, ch);
      const centerX = Math.round((minX+maxX)/2);
      const centerY = Math.round((minY+maxY)/2);
      cx = Math.max(0, Math.min(w-needW, centerX - Math.floor(needW/2)));
      cy = Math.max(0, Math.min(h-needH, centerY - Math.floor(needH/2)));
      cw = needW; ch = needH;
    }
 
    const out=document.createElement('canvas');
    out.width=cw; out.height=ch;
    out.getContext('2d').drawImage(inCanvas, cx, cy, cw, ch, 0, 0, cw, ch);
    return out;
  }
 
  // --------- Embedding-Pipeline ---------
  async function embedFileImage(file){
    const { mod, processor, model } = await ensureClipVision();
 
    setStatus('Bild vorbereiten …'); setProgress(0.20);
 
    // 1) Bild laden
    const img = await new Promise((res,rej)=>{
      const url=URL.createObjectURL(file);
      const image=new Image();
      image.crossOrigin='anonymous';
      image.onload=()=>{ URL.revokeObjectURL(url); res(image); };
      image.onerror=e=>{ URL.revokeObjectURL(url); rej(e); };
      image.src=url;
     });
     });
     const dim = ADOS_INDEX.find(v=>v.vec)?.vec?.length || 0;
 
     console.log('[LabelScan] Index OK:', ADOS_INDEX.length, 'items; dim=', dim);
    // 2) Scale → Auto-Crop
     return ADOS_INDEX;
    let canvas = toCanvasScaled(img, CFG.maxSide);
    if(CFG.autoCrop){
      setStatus('Auto-Crop …'); setProgress(0.30);
      canvas = autoCropCanvas(canvas);
    }
 
    // 3) Canvas → Blob → RawImage (robust für Processor)
    const blob = await new Promise(r => canvas.toBlob(r, 'image/jpeg', 0.95));
     const imageRaw = await mod.RawImage.fromBlob(blob);
 
    setStatus('Bild analysieren …'); setProgress(0.45);
 
    // 4) Processor & Model
    const inputs = await processor(imageRaw, { return_tensors: 'pt' });
    const out = await model.forward({ pixel_values: inputs.pixel_values });
 
    const vec = out?.image_embeds?.data || out?.image_embeds;
     if(!(vec instanceof Float32Array)) throw new Error('Embedding-Format unerwartet');
 
    // 5) Normieren
    let n=0; for(let i=0;i<vec.length;i++) n+=vec[i]*vec[i];
    const norm = Math.sqrt(n)||1;
    const v = new Float32Array(vec.length);
    for(let i=0;i<vec.length;i++) v[i]=vec[i]/norm;
     return v;
   }
   }


   // =========================
   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; }
   //   Query → Embedding
 
   // =========================
   // vorher: slice(0, topK) hier
   async function embedFileImage(file){
   // jetzt: ALLE sortiert zurückgeben, damit wir danach deduplizieren können
     const extractor = await ensureClipExtractor();
   function rankByCosine(q){
     const url = URL.createObjectURL(file);
     const s=[];
    try{
     for(let i=0;i<INDEX.length;i++){
      setStatus('Bild einlesen …'); setProgress(0.1);
       const v=INDEX_EMB[i];
       const feat = await extractor(url); // { data: Float32Array }
       if(!v) continue;
       const v = normalizeVec(feat.data);
       s.push({ i, score: cosine(q,v) });
       console.log('[LabelScan] query dim=', v.length);
      return v;
    }finally{
      URL.revokeObjectURL(url);
     }
     }
    s.sort((a,b)=> b.score-a.score);
    return s;
   }
   }


   // =========================
   // NEU: pro Titel nur bester Treffer
   //  Ranking
   function dedupeByTitle(ranked){
  // =========================
    const bestByTitle = Object.create(null);
  function rankMatches(qvec, index, topK, minScore){
    for (let k = 0; k < ranked.length; k++) {
     // Fallback auf phash? (optional – hier deaktiviert, da index mit embed erwartet wird)
      const hit = ranked[k];
     const scored = [];
      const it = INDEX[hit.i];
     for(const it of index){
      const rawTitle = it && it.title ? String(it.title) : '';
       if(!it.vec) continue; // ohne embed überspringen
      const key = rawTitle.trim().toLowerCase();
      scored.push({ it, s: cosine(qvec, it.vec) });
      if (!key) continue;
      const prev = bestByTitle[key];
      if (!prev || hit.score > prev.score) {
        bestByTitle[key] = hit;
      }
     }
     const arr = [];
     for (const key in bestByTitle) {
       if (Object.prototype.hasOwnProperty.call(bestByTitle, key)) {
        arr.push(bestByTitle[key]);
      }
     }
     }
     scored.sort((a,b)=>b.s-a.s);
     arr.sort(function(a,b){ return b.score - a.score; });
     const out=[];
     return arr;
    for(const r of scored){
  }
      if (typeof minScore === 'number' && r.s < minScore) break;
 
      out.push({ title:r.it.title, thumb:r.it.thumb, score:r.s });
  // --------- Score-Badges ---------
      if(out.length >= (topK||6)) break;
  function scoreBadge(score){
    if (CFG.showNumericScore) {
    return `<span style="font-variant-numeric:tabular-nums;color:#666">${score.toFixed(3)}</span>`;
     }
     }
     return out;
    const [hi, mid] = CFG.confidenceBands || [0.90, 0.80];
    let txt = 'niedrig', bg = '#f1f5f9', fg = '#334155';
    if (score >= hi) { txt = 'hoch';  bg = '#e6ffed'; fg = '#0a7d2c'; }
    else if (score >= mid) { txt = 'mittel'; bg = '#fff7e6'; fg = '#a45500'; }
     return `<span style="display:inline-block;padding:.12rem .45rem;border-radius:999px;background:${bg};color:${fg};font-weight:600;font-size:.85em;line-height:1">${txt}</span>`;
   }
   }


   // =========================
   // --------- Rendering (max. 3 Treffer) ---------
  //   Render
// Score-Badge ausgeblendet
  // =========================
// <div>${scoreBadge(score)}</div>
   function renderResults(items){
 
     const box=$('ados-scan-results'); if(!box) return;
   function renderResults(ranked){
     const box=qs('ados-scan-results');
    if(!box) return;
     box.innerHTML='';
     box.innerHTML='';
     if(!items || !items.length){
 
       box.innerHTML='<div class="ados-hit">Keine klaren Treffer. Bitte anderes Foto oder näher am Label versuchen.</div>';
     if(!ranked || !ranked.length){
       box.innerHTML='<div class="empty">Keine klaren Treffer. Bitte ein anderes Foto oder näher am Frontlabel.</div>';
       return;
       return;
     }
     }
     items.forEach(it=>{
 
      const link = mw.util.getUrl(it.title.replace(/ /g,'_'));
     // NEU: Dedupe nach Titel, DANN auf topK begrenzen
      const row  = document.createElement('div');
    const uniqueRanked = dedupeByTitle(ranked).slice(0, CFG.topK);
       row.className = 'ados-hit';
 
      row.innerHTML =
    const makeCard = (it, score) => `
        '<div style="display:flex;gap:10px;align-items:flex-start;">' +
       <div class="ados-card" style="display:grid;grid-template-columns:120px 1fr;gap:14px;align-items:center;padding:12px;border:1px solid #e6e6e6;border-radius:14px;box-shadow:0 1px 8px rgba(0,0,0,.04);">
          (it.thumb ? `<img src="${it.thumb}" alt="" style="width:64px;height:auto;border-radius:6px;">` : '') +
        ${it.thumb?`<img src="${it.thumb}" alt="" style="width:120px;height:auto;border-radius:10px;">`
          `<div><b><a href="${link}">${esc(it.title)}</a></b>` +
                  :`<div style="width:120px;height:90px;background:#f3f3f3;border-radius:10px;"></div>`}
           (typeof it.score === 'number' ? `<div class="meta">Ähnlichkeit: ${(it.score*100).toFixed(1)}%</div>` : '') +
        <div style="display:flex;flex-direction:column;gap:8px;">
           '</div>' +
          <div style="font-weight:700;font-size:1.05rem;line-height:1.2;">
         '</div>';
            <a href="${mw.util.getUrl((it.title||'').replace(/ /g,'_'))}">${mw.html.escape(it.title||'')}</a>
       box.appendChild(row);
          </div>
           <div>
            <a href="${mw.util.getUrl((it.title||'').replace(/ /g,'_'))}" class="mw-ui-button" style="display:inline-block;padding:.4rem .7rem;border-radius:8px;background:#2a4b8d;color:#fff;text-decoration:none;">Artikel öffnen</a>
           </div>
         </div>
      </div>`;
 
    const grid = document.createElement('div');
    grid.style.display='grid';
    grid.style.gridTemplateColumns='1fr';
    grid.style.gap='12px';
 
    // max. CFG.topK (=3) Karten nach Dedupe
    uniqueRanked.forEach(function(hit){
       const it = INDEX[hit.i];
      grid.innerHTML += makeCard(it, hit.score);
     });
     });
    box.appendChild(grid);
   }
   }


   // =========================
   // --------- UI / Flow ----------
  //  Binding
   let BOUND=false;
   // =========================
   function bindUI(){
   function clickInput(withCapture){
    if(BOUND) return;
     const file=$('ados-scan-file'); if(!file) return;
 
     try {
     const btnRun = qs('ados-scan-run');
      if(withCapture){ file.setAttribute('capture','environment'); }
    const inCam  = qs('ados-scan-file-camera');
      else { file.removeAttribute('capture'); }
    const inGal  = qs('ados-scan-file-gallery');
    } catch {}
     const btnCam = qs('ados-scan-btn-camera');
     file.click();
    const btnGal = qs('ados-scan-btn-gallery');
  }
    const drop  = qs('ados-scan-drop');
    const btnReset = qs('ados-scan-reset');
 
     if(!btnRun || !inCam || !inGal) return;


  function hasUI(){
    // Hilfsfunktion: wenn neues Bild gewählt → Vorschau & Ergebnisse zurücksetzen
    return $('ados-scan-run') && $('ados-scan-file') && $('ados-scan-results');
    const onNewImage = (file) => {
  }
      if (!file) return;
      showPreview(file);
      resetResultsBox('Hier erscheinen Treffer.');
      setStatus('Bereit.');
      setProgress(null);
    };


  let BOUND=false;
     btnCam && btnCam.addEventListener('click', ()=> inCam.click());
  function bind(origin){
    btnGal && btnGal.addEventListener('click', ()=> inGal.click());
     try{
      if(BOUND || !hasUI()) return;
      const run  = $('ados-scan-run');
      const file = $('ados-scan-file');
      const photo= $('ados-scan-photo');
      const pick = $('ados-scan-pick');


       if(!run || !file) { console.warn('[LabelScan] UI unvollständig'); return; }
    const pick = e => {
      const f=e.target.files?.[0];
       if(f) onNewImage(f);
    };
    inCam.addEventListener('change', pick);
    inGal.addEventListener('change', pick);


      // Buttons verbinden (nur 1x)
    if(drop){
      if(!run.dataset._bound){
      drop.addEventListener('dragover', function(ev){ ev.preventDefault(); drop.classList.add('is-over'); });
        run.dataset._bound='1';
      drop.addEventListener('dragleave', function(){ drop.classList.remove('is-over'); });
        run.addEventListener('click', onRunClick);
      drop.addEventListener('drop', function(ev){
      }
        ev.preventDefault(); drop.classList.remove('is-over');
      if(photo && !photo.dataset._bound){
         const f = ev.dataTransfer && ev.dataTransfer.files && ev.dataTransfer.files[0];
        photo.dataset._bound='1';
        if(f){
        photo.addEventListener('click', ()=> clickInput(true));
          const dt=new DataTransfer(); dt.items.add(f);
      }
          inGal.files=dt.files;
      if(pick && !pick.dataset._bound){
          onNewImage(f);
        pick.dataset._bound='1';
        }
        pick.addEventListener('click', ()=> clickInput(false));
      }
      file.addEventListener('change', function(){
         if(this.files && this.files[0]) showPreview(this.files[0]);
       });
       });
    }
    btnReset && btnReset.addEventListener('click', function(){
      setStatus('Bereit.'); setProgress(null);
      const p=qs('ados-scan-preview'); if(p) p.innerHTML='<div class="note">Noch keine Vorschau.</div>';
      resetResultsBox('Hier erscheinen Treffer.');
      inCam.value=''; inGal.value='';
    });
    btnRun.addEventListener('click', onRunClick);


      BOUND = true;
    BOUND=true; log('UI gebunden.');
      console.log('[LabelScan] Gadget gebunden via', origin || 'init');
    }catch(e){
      console.error('[LabelScan] bind error', e);
    }
   }
   }


   async function onRunClick(ev){
   async function onRunClick(){
    ev.preventDefault();
     const btnRun = qs('ados-scan-run');
     const run  = $('ados-scan-run');
     const inCam  = qs('ados-scan-file-camera');
     const file = $('ados-scan-file');
     const inGal  = qs('ados-scan-file-gallery');
     const photo= $('ados-scan-photo');
 
     const pick = $('ados-scan-pick');
     try{
      const file = (inCam.files && inCam.files[0]) || (inGal.files && inGal.files[0]);
      if(!file){ alert('Bitte zuerst ein Foto auswählen.'); return; }


    const f = file && file.files && file.files[0];
      if(btnRun) btnRun.disabled = true;
    if(!f){ alert('Bitte ein Bild wählen oder aufnehmen.'); return; }


    // Parameter (optional über data-* am Wrapper steuerbar)
      // Ergebnisse direkt leeren / „Suche läuft …“
    const wrapper = document.getElementById('ados-labelscan') || document.body;
      resetResultsBox('Suche läuft …');
    const TOP_K    = Number(wrapper?.dataset?.topk || 6);
    const MIN_SCORE = Number(wrapper?.dataset?.minscore || 0.82);


    try{
       await loadIndex({ ui:true });
       setProgress(0); setStatus('Modell laden …');
       await ensureClipVision(); // warmup
       run.disabled=true; if(photo) photo.disabled=true; if(pick) pick.disabled=true;


      await ensureClipExtractor();
       const q = await embedFileImage(file);
       const index = await loadLabelIndex();


       setStatus('Bild analysieren …'); setProgress(0.2);
       setProgress(0.70);
       const qvec = await embedFileImage(f);
       setStatus('Abgleich …');


       setStatus('Vergleiche …'); setProgress(0.3);
       const ranked = rankByCosine(q);
       const matches = rankMatches(qvec, index, TOP_K, MIN_SCORE);
       renderResults(ranked);


      renderResults(matches);
       setStatus('Fertig.');
       setStatus(matches.length ? 'Fertig.' : 'Keine klaren Treffer – bitte ein anderes Foto versuchen.');
    }catch(e){
      console.error('[LabelScan] Fehler', e);
      setStatus('Fehler bei Erkennung/Suche.');
    }finally{
       setProgress(null);
       setProgress(null);
       run.disabled=false; if(photo) photo.disabled=false; if(pick) pick.disabled=false;
    } catch(e){
       err('Fehler', e);
      setStatus('Fehler bei Erkennung.');
      resetResultsBox('Fehler bei der Erkennung – bitte ein anderes Foto versuchen.');
      setProgress(null);
    } finally {
      if(btnRun) btnRun.disabled = false;
     }
     }
   }
   }


   // robuste Bind-Triggers
   function init(){
  if (document.readyState !== 'loading') { bind('immediate'); }
    if(document.readyState==='loading'){
  else { document.addEventListener('DOMContentLoaded', ()=>bind('DOMContentLoaded'), { once:true }); }
      document.addEventListener('DOMContentLoaded', bindUI, { once: true });
  if (mw && mw.hook) mw.hook('wikipage.content').add(()=>bind('wikipage.content'));
    } else {
  setTimeout(()=>bind('timeout250'), 250);
      bindUI();
  setTimeout(()=>bind('timeout1000'), 1000);
    }
   const mo=new MutationObserver(()=>{ if(!BOUND) bind('mutation'); });
    loadIndex({ ui:false }).catch(err).finally(()=>{
   mo.observe(document.documentElement||document.body, { childList:true, subtree:true });
      setStatus('Bereit.');
      resetResultsBox('Hier erscheinen Treffer.');
      setProgress(null);
    });
   }
 
  log('gadget file loaded');
   init();


})();
})();
Abgerufen von „https://ados-wiki.de/wiki/MediaWiki:Gadget-LabelScan.js“