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

   // ------------------------------------------------------------

  // ------------------------------------------------------------

     // Top-N Treffer anzeigen:

     topK: 8,

     // CLIP-Model:

     transformersURL: 'https://cdn.jsdelivr.net/npm/@xenova/transformers@2.15.0',

     modelId: 'Xenova/clip-vit-base-patch32', // robust & kompakt (quantized)

   function log(...args) { if (CFG.debug) console.log('[LabelScan]', ...args); }

   function warn(...args){ if (CFG.debug) console.warn('[LabelScan]', ...args); }

   function err(...args) { console.error('[LabelScan]', ...args); }

   function setStatus(txt) { const el = qs('ados-scan-status'); if (el) el.textContent = txt || ''; }

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

   // ------------------------------------------------------------

  // Index laden (JSON: Titel, Thumb, embed(Base64 Float32))

  // ------------------------------------------------------------

   let INDEX = [];

  let INDEX_EMB = []; // Array<Float32Array>

 

   async function loadIndex() {

     if (INDEX.length) return INDEX;

     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;

 

    // Embeddings dekodieren (falls vorhanden)

     INDEX_EMB = INDEX.map((it, i) => {

       if (typeof it.embed === 'string' && it.embed.length) {

         try { return base64ToFloat32(it.embed); }

        catch(e){ warn('Embed-Decode-Fehler bei Index', i, it.title, e); return null; }

   function base64ToFloat32(b64) {

     const bin = atob(b64);

    const buf = new ArrayBuffer(len);

    const view = new Uint8Array(buf);

     for (let i=0;i<len;i++) view[i] = bin.charCodeAt(i);

// ------------------------------------------------------------

// CLIP: Feature-Extraction (nur Bild, ohne Tokenizer)

let _clipModulePromise = null;

async function ensureClipExtractor() {

   if (_clipModulePromise) return _clipModulePromise;

   setStatus('Modell laden …');

  setProgress(0.08);

   _clipModulePromise = (async () => {

     const ESM_URL = CFG.transformersURL;

     const mod = await import(/* webpackIgnore: true */ ESM_URL);

 

     const pipe = await mod.pipeline(

    );

 

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

  })();

 

 

     function loadImageFromFile(f) {

        const url = URL.createObjectURL(f);

        const img = new Image();

        img.crossOrigin = 'anonymous';

        img.onload = () => { URL.revokeObjectURL(url); resolve(img); };

        img.onerror = (e)=> { URL.revokeObjectURL(url); reject(e); };

        img.src = url;

      });

     }

      const c = document.createElement('canvas');

      const scale = Math.min(1, maxSide / Math.max(w, h));

       w = Math.round(w * scale);

       h = Math.round(h * scale);

      const ctx = c.getContext('2d');

      ctx.drawImage(img, 0, 0, w, h);

     const { pipe } = await ensureClipExtractor();

 

    setProgress(0.20);

 

     const img = await loadImageFromFile(file);

     setStatus('Bild analysieren …');

     setProgress(0.38);

     const out = await pipe(canvas);

     // Ausgabe → Float32Array normieren

     const d = out && out.data;

     let vec;

     if (d instanceof Float32Array) {

     } else if (Array.isArray(d)) {

       // 2D → mitteln

       vec = Array.isArray(d[0]) ? meanPool2D(d) : new Float32Array(d);

       throw new Error('Embedding-Format unerwartet');

     }

     return normalize(vec);

  function meanPool2D(arr2d) {

     const rows = arr2d.length;

     const dim = rows ? arr2d[0].length : 0;

     const sum = new Float32Array(dim);

     for (let r=0;r<rows;r++) {

       const row = arr2d[r];

      for (let i=0;i<dim;i++) sum[i] += row[i] || 0;

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

     return scores.slice(0, CFG.topK);

   function renderResults(ranked) {

     const box = qs('ados-scan-results');

    if (!box) return;

     box.innerHTML = '';

 

     if (!ranked || !ranked.length) {

       box.innerHTML = '<div class="empty">Keine klaren Treffer. Bitte anderes Foto oder näher am Frontlabel.</div>';

 

     ranked.forEach(({ i, score }) => {

       const it = INDEX[i];

      const link = mw.util.getUrl((it.title || '').replace(/ /g,'_'));

       const thumb = it.thumb || '';

      const row = document.createElement('div');

       row.className = 'ados-hit';

       row.style.display = 'grid';

       row.style.gridTemplateColumns = '60px 1fr auto';

       row.style.alignItems = 'center';

      row.style.gap = '10px';

      row.style.padding = '.35rem 0';

       row.innerHTML =

         (thumb ? `<div><img src="${thumb}" alt="" style="width:60px;height:auto;border-radius:6px;"></div>` : '<div></div>') +

         `<div><b><a href="${link}">${escapeHtml(it.title || '')}</a></b></div>` +

       box.appendChild(row);

 

   // ------------------------------------------------------------

  // ------------------------------------------------------------

   let BOUND = false;

   function bindUI() {

     if (BOUND) return;

     const btnCam = qs('ados-scan-btn-camera');

     const btnGal = qs('ados-scan-btn-gallery');

     const inCam   = qs('ados-scan-file-camera');

     const inGal   = qs('ados-scan-file-gallery');

     const btnRun = qs('ados-scan-run');

     const btnReset= qs('ados-scan-reset');

     const drop   = qs('ados-scan-drop');

     if (!btnRun || !inCam || !inGal) return;

     // Buttons triggern jeweilige Inputs

    if (btnCam)  btnCam.addEventListener('click', ()=> inCam.click());

     if (btnGal)  btnGal.addEventListener('click', ()=> inGal.click());

     // Vorschau setzen

    function onPick(e) {

      const f = e.target.files && e.target.files[0];

      if (f) showPreview(f);

    }

     if (drop) {

       drop.addEventListener('dragover', ev => { ev.preventDefault(); drop.classList.add('is-over'); });

       drop.addEventListener('drop', ev => {

         ev.preventDefault(); drop.classList.remove('is-over');

         const f = ev.dataTransfer && ev.dataTransfer.files && ev.dataTransfer.files[0];

         if (f) {

          const dt = new DataTransfer();

          dt.items.add(f);

          inGal.files = dt.files;

          showPreview(f);

        }

     // Reset

    if (btnReset) btnReset.addEventListener('click', () => {

       const p = qs('ados-scan-preview'); if (p) p.innerHTML = '<div class="note">Noch keine Vorschau. Wähle ein Foto.</div>';

      inCam.value = ''; inGal.value = '';

       const r = qs('ados-scan-results'); if (r) r.innerHTML = '<div class="empty">Hier erscheinen passende Abfüllungen mit Link ins Wiki.</div>';

     btnRun.addEventListener('click', onRunClick);

     BOUND = true;

 

 

 

 

 

 

 

 

   // ------------------------------------------------------------

  // Init

  // ------------------------------------------------------------

   function init() {

     // Bind nach DOM fertig

     if (document.readyState === 'loading') {

      document.addEventListener('DOMContentLoaded', bindUI, { once: true });

     } else {

      bindUI();

    }

 

     setTimeout(bindUI, 250);

    setTimeout(bindUI, 1000);

 

     // (Optional) Index „warm“ laden (nicht blockierend)