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

(function () {

   // ---------- Konfiguration ----------

  var INDEX_TITLE        = 'MediaWiki:Gadget-LabelScan-index.json';

  var TOP_K              = 8;

  // Lokale Pfade (wie beim Indexer)

  var TRANSFORMERS_SHIM  = '/vendor/transformers/esm-shim.js';

  var WASM_DIR          = '/vendor/transformers/';

  var LOCAL_MODEL_PATH  = '/models';

  var MODEL_ID          = 'Xenova/clip-vit-base-patch32';

  // UI-Element-IDs (wie in deiner LabelScan-Seite)

    btnGal:  'ados-scan-btn-gallery',

    inCam:    'ados-scan-file-camera',

    inGal:    'ados-scan-file-gallery',

     btnRun:   'ados-scan-run',

   // --------- Helpers (UI/Log) ----------

   function $(id){ return document.getElementById(id); }

  function text(el, t){ if (el) el.textContent = t == null ? '' : String(t); }

  function log(){ try{ console.log.apply(console, ['[LabelScan]'].concat([].slice.call(arguments))); }catch(_){} }

   function warn(){ try{ console.warn.apply(console, ['[LabelScan]'].concat([].slice.call(arguments))); }catch(_){} }

   function err(){ try{ console.error.apply(console, ['[LabelScan]'].concat([].slice.call(arguments))); }catch(_){} }

   function setStatus(t){ var el = $(IDS.status); text(el, t||''); }

  function setProgress(p){

    var bar = $(IDS.progress); if (!bar) return;

    if (p == null){ bar.hidden = true; bar.value = 0; return; }

    bar.hidden = false;

     bar.value = Math.max(0, Math.min(1, p));

   function setBtnLoading(isLoading){

     var btn = $(IDS.btnRun);

     if (!btn) return;

    btn.disabled = !!isLoading;

     if (isLoading){

       btn.dataset.orig = btn.textContent;

      btn.textContent = 'Erkennen …';

      btn.classList.add('is-loading');

    } else {

      if (btn.dataset.orig) btn.textContent = btn.dataset.orig;

       btn.classList.remove('is-loading');

     // robust, auch bei großen Arrays

    var bin = atob(b64);

    var len = bin.length;

     var buf = new ArrayBuffer(len);

    var view = new Uint8Array(buf);

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

   function loadIndex(){

     if (INDEX.length) return Promise.resolve(INDEX);

     setStatus('Index laden …'); setProgress(0.03);

     var rawURL = mw.util.getUrl(INDEX_TITLE, { action:'raw', ctype:'application/json' });

     return fetch(rawURL, { cache:'reload' }).then(function(res){

      if (!res.ok) throw new Error('Index nicht ladbar: '+res.status);

      return res.json();

     }).then(function(json){

      if (!Array.isArray(json)) throw new Error('Index ist keine Array-JSON');

      INDEX = json;

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

          return (it && typeof it.embed === 'string' && it.embed.length) ? base64ToFloat32(it.embed) : null;

          warn('Embed-Decode-Fehler bei Index', i, it && it.title, e);

      log('Index geladen:', INDEX.length, 'Einträge');

      log('Embeddings vorhanden:', INDEX_EMB.filter(Boolean).length, '/', INDEX.length);

      setProgress(0.06);

      return INDEX;

    });

   // ---------- Transformers (lokal wie Indexer) ----------

   var _libPromise = null;

   function ensureLib(){

     if (_libPromise) return _libPromise;

     _libPromise = new Promise(function(resolve, reject){

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

      s.type = 'module';

      s.onload = function(){ resolve(); };

      s.onerror = function(){ reject(new Error('Module load failed: '+TRANSFORMERS_SHIM)); };

      document.head.appendChild(s);

            env.localModelPath  = LOCAL_MODEL_PATH;

            env.backends = env.backends || {};

            env.backends.onnx = env.backends.onnx || {};

            env.backends.onnx.preferredBackend = 'wasm'; // stabil

            env.backends.onnx.wasm = env.backends.onnx.wasm || {};

            env.backends.onnx.wasm.wasmPaths = WASM_DIR;

            return resolve(window.transformers);

          }

          if (Date.now() - t0 > 10000) return reject(new Error('Transformers-ESM nicht verfügbar (Timeout).'));

          setTimeout(spin, 50);

        })();

       });

     });

     return _libPromise;

   var _modelPromise = null;

   function ensureModel(){

     if (_modelPromise) return _modelPromise;

     _modelPromise = ensureLib().then(function(tf){

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

      return Promise.all([

        tf.AutoProcessor.from_pretrained(MODEL_ID),

        tf.CLIPVisionModelWithProjection.from_pretrained(MODEL_ID, { quantized: true })

      ]).then(function(arr){

        var pack = { mod: tf, processor: arr[0], model: arr[1] };

          var backend = (pack.model && pack.model.session && pack.model.session.executionProvider) || 'unknown';

          log('CLIP ready (vision, local) | Backend:', backend);

        } catch(e){ log('CLIP ready (vision, local)'); }

    });

     return _modelPromise;

   function fileToCanvasExif(file){

     return new Promise(function(resolve, reject){

      if ('createImageBitmap' in window){

        createImageBitmap(file, { imageOrientation:'from-image' }).then(function(bmp){

          if ('OffscreenCanvas' in window){

            var c = new OffscreenCanvas(bmp.width, bmp.height);

            c.getContext('2d').drawImage(bmp, 0, 0);

            resolve(c);

          } else {

            var c2 = document.createElement('canvas');

            c2.width = bmp.width; c2.height = bmp.height;

             c2.getContext('2d').drawImage(bmp, 0, 0);

             resolve(c2);

         })["catch"](reject);

       } else {

        var url = URL.createObjectURL(file);

        var im = new Image();

        im.onload = function(){

          var c3 = document.createElement('canvas');

          c3.width = im.width; c3.height = im.height;

          c3.getContext('2d').drawImage(im, 0, 0);

          URL.revokeObjectURL(url);

          resolve(c3);

         };

         im.onerror = function(e){ URL.revokeObjectURL(url); reject(e); };

        im.src = url;

     });

  function canvasToBlobPromise(canvas){

     if (canvas.convertToBlob){

       return canvas.convertToBlob({ type:'image/jpeg', quality:0.95 });

  function normalizeVec(vec){

    var i, n = 0;

     for (i=0;i<vec.length;i++) n += vec[i]*vec[i];

     var norm = Math.sqrt(n) || 1;

    var out = new Float32Array(vec.length);

    for (i=0;i<vec.length;i++) out[i] = vec[i]/norm;

   function embedFileImage(file){

     return ensureModel().then(function(pack){

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

      return fileToCanvasExif(file).then(function(canvas){

        return canvasToBlobPromise(canvas).then(function(blob){

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

          return pack.mod.RawImage.fromBlob(blob).then(function(raw){

            return pack.processor(raw, { return_tensors:'pt' }).then(function(inputs){

              return pack.model.forward({ pixel_values: inputs.pixel_values }).then(function(out){

                var vec = (out && out.image_embeds && out.image_embeds.data) || (out && out.image_embeds);

                if (!(vec instanceof Float32Array)) throw new Error('Embedding-Format unerwartet');

                return normalizeVec(vec);

              });

            });

          });

        });

       });

   function cosine(a,b){

    var s=0, L=Math.min(a.length,b.length);

    for (var i=0;i<L;i++) s += a[i]*b[i];

   function rankByCosine(qVec){

     var scores = [];

     for (var i=0;i<INDEX.length;i++){

       var v = INDEX_EMB[i];

       if (!v) continue;

       scores.push({ i:i, score: cosine(qVec, v) });

     scores.sort(function(a,b){ return b.score - a.score; });

    return scores.slice(0, TOP_K);

   function escapeHtml(s){ return mw.html.escape(String(s||'')); }

     var box = $(IDS.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>';

     for (var k=0;k<ranked.length;k++){

      var it = INDEX[ranked[k].i];

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

      var thumb = it.thumb || '';

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

      row.className = 'ados-hit';

      row.style.display = 'grid';

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

      row.style.alignItems = 'center';

      row.style.gap = '12px';

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

      row.innerHTML =

        (thumb ? '<div><img src="'+thumb+'" alt="" style="width:64px;height:auto;border-radius:8px;box-shadow:0 0 0 1px #eee"></div>' : '<div></div>') +

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

        '<div style="color:#666;font-variant-numeric:tabular-nums">'+ sc.toFixed(3) +'</div>';

       box.appendChild(row);

     }

     var url = URL.createObjectURL(file);

   // ---------- Bindings / UX ----------

   var BOUND = false;

     if (BOUND) return;

    injectStyles();

     var btnCam  = $(IDS.btnCam);

     var btnGal = $(IDS.btnGal);

     var inCam  = $(IDS.inCam);

     var inGal  = $(IDS.inGal);

     var btnRun  = $(IDS.btnRun);

     var btnReset= $(IDS.btnReset);

     var drop    = $(IDS.drop);

     if (!btnRun || !inCam || !inGal){

       warn('UI-Elemente fehlen – bitte die LabelScan-Seite prüfen.');

       return;

     }

     // Buttons → Inputs

    if (btnCam) btnCam.addEventListener('click', function(){ inCam.click(); });

     if (btnGal) btnGal.addEventListener('click', function(){ inGal.click(); });

     function onPick(e){

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

       if (f) showPreview(f);

     }

     inCam.addEventListener('change', onPick);

     inGal.addEventListener('change', onPick);

     if (drop){

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

         if (f){

           var dt = new DataTransfer();

          dt.items.add(f);

           inGal.files = dt.files;

           showPreview(f);

     // Reset

    if (btnReset) btnReset.addEventListener('click', function(){

       setBtnLoading(false);

     // Tastatur: Enter startet, wenn eines der File-Inputs fokussiert ist

    var wrap = $(IDS.wrap);

    if (wrap){

      wrap.addEventListener('keydown', function(e){

        if (e.key === 'Enter'){

          var a = document.activeElement;

          if (a === inCam || a === inGal) onRunClick();

       });

    BOUND = true;

    log('UI gebunden.');

       var file = (inCam && inCam.files && inCam.files[0]) || (inGal && inGal.files && inGal.files[0]);

      if (!file){ alert('Bitte zuerst ein Foto auswählen oder aufnehmen.'); return; }

       setBtnLoading(true);

       setStatus('Vorbereitung …'); setProgress(0.02);

       loadIndex().then(function(){

          var ranked = rankByCosine(qVec);

          renderResults(ranked);

      });

     } catch (e) {

       setStatus('Unerwarteter Fehler. Details in der Konsole.');

       setBtnLoading(false);

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

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

     // doppelte Fallbacks

    setTimeout(bindUI, 250);

    setTimeout(bindUI, 1000);

 

    loadIndex()["catch"](function(e){ warn('Index warm laden fehlgeschlagen:', e && e.message ? e.message : e); });