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

(function () {

   // =============================

  // 1) Konfiguration

  // =============================

  const MATCH_THRESHOLD = 0.82; // ggf. 0.86 o. ä. – höher = strenger

  // =============================

  // 2) UI-Hilfen

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

  function esc(s) { return mw.html.escape(String(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) {

     try {

      const url = URL.createObjectURL(file);

      const prev = $('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');

      console.warn('[LabelScan] Preview fehlgeschlagen:', e);

   // =============================

  async function ensureClipExtractor() {

     if (CLIP_READY) return CLIP_READY;

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

      // transformers.js laden, falls nicht vorhanden

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

        s.onload = async () => {

            const pipe = await window.transformers.pipeline(

            );

            resolve(pipe);

          } catch (e) { reject(e); }

        s.onerror = reject;

        document.head.appendChild(s);

          .then(resolve, reject);

    return CLIP_READY;

   // =============================

  // 4) Index laden & vorbereiten

   // =============================

   function decodeEmbed(b64) {

     // Base64 -> Uint8Array -> Float32Array (little-endian)

     const bin = atob(b64);

     const len = bin.length;

     const bytes = new Uint8Array(len);

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

     return new Float32Array(bytes.buffer);

   function normalizeVec(v) {

     let n = 0;

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

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

    const out = new Float32Array(v.length);

    for (let i = 0; i < v.length; i++) out[i] = v[i] / n;

     return out;

   function cosine(a, b) {

     let s = 0;

     for (let i = 0; i < a.length; i++) s += a[i] * b[i];

     return s; // bei normalisierten Vektoren = Cosine-Similarity

   let ADOS_INDEX = null;

  async function loadLabelIndex() {

    if (ADOS_INDEX) return ADOS_INDEX;

     const page = 'MediaWiki:Gadget-LabelScan-index.json';

     const url1 = mw.util.getUrl(page, { action: 'raw', ctype: 'application/json', maxage: 0, smaxage: 0, _: Date.now() });

    const url2 = (mw.config.get('wgScript') || '/index.php') + '?title=' + encodeURIComponent(page) + '&action=raw&ctype=application/json&_=' + Date.now();

     async function fetchJson(url) {

      const r = await fetch(url, { cache: 'no-store' });

      if (!r.ok) throw new Error('HTTP ' + r.status);

      let t = await r.text();

      if (t.charCodeAt(0) === 0xFEFF) t = t.slice(1); // BOM

      try { return JSON.parse(t); }

       catch {

         // hart strippen, falls mal <pre> o.ä. drumrum ist

         const stripped = t.replace(/^.*?\[/s, '[').replace(/\].*$/s, ']');

        return JSON.parse(stripped);

     let raw;

     try {

       raw = await fetchJson(url1);

    } catch (e1) {

       console.warn('[LabelScan] Primäre Raw-URL fehlgeschlagen:', e1?.message);

       raw = await fetchJson(url2);

     if (!Array.isArray(raw) || !raw.length) {

      throw new Error('Index leer oder kein Array');

     }

     if (typeof raw[0].embed !== 'string') {

       console.warn('[LabelScan] Index hat kein "embed" – bitte den CLIP-Index hochladen.');

       throw new Error('Index ohne Embeddings');

     ADOS_INDEX = raw.map(item => {

      const vec = normalizeVec(decodeEmbed(item.embed));

      return { title: item.title, thumb: item.thumb, vec };

     });

     console.log(`[LabelScan] Index geladen: ${ADOS_INDEX.length} Einträge`);

     if (ADOS_INDEX[0]?.vec?.length) {

       console.log('[LabelScan] Embedding-Dimension:', ADOS_INDEX[0].vec.length);

     return ADOS_INDEX;

   // =============================

   async function embedFileImage(file) {

     const extractor = await ensureClipExtractor();

     const url = URL.createObjectURL(file);

    try {

       const feat = await extractor(url);

       const vec = normalizeVec(feat.data);

       const norm = Math.sqrt(vec.reduce((a, c) => a + c * c, 0)).toFixed(3);

       console.log('[LabelScan] query norm ~', norm, 'first3=', Array.from(vec.slice(0, 3)).map(v => v.toFixed(3)).join(', '));

       return vec;

     } finally {

       URL.revokeObjectURL(url);

   // =============================

  function rankMatches(queryVec, index, topK, threshold) {

     const scored = index.map(it => ({ it, s: cosine(queryVec, it.vec) }));

    scored.sort((a, b) => b.s - a.s);

    for (const r of scored) {

      if (threshold != null && r.s < threshold) break;

      out.push({ title: r.it.title, thumb: r.it.thumb, score: r.s });

      if (out.length >= topK) break;

     return out;

   function renderResults(items) {

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

     if (!box) return;

     box.innerHTML = '';

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

       box.innerHTML = '<div class="ados-hit">Keine klaren Treffer. Bitte anderes Foto oder manuell suchen.</div>';

     items.forEach(it => {

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

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

       row.className = 'ados-hit';

        '<div style="display:flex;gap:10px;align-items:flex-start;">' +

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

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

           (typeof it.score === 'number' ? `<div class="meta">Score: ${(it.score * 100).toFixed(1)}%</div>` : '') +

           '</div>' +

         '</div>';

       box.appendChild(row);

   // =============================

  // 7) UI-Binding

   // =============================

   function hasUI() {

     return !!$('ados-scan-file') && !!$('ados-scan-run');

   }

  let BOUND = false;

  function bind() {

    if (BOUND || !hasUI()) return;

    const fileIn  = $('ados-scan-file');

    const runBtn  = $('ados-scan-run');

    const photoBtn = $('ados-scan-photo'); // optional

    const pickBtn  = $('ados-scan-pick'); // optional

    const bigBtn  = $('ados-scan-bigbtn'); // optional

     const drop    = $('ados-scan-drop');   // optional Dropzone

     if (!fileIn || !runBtn) return;

     // Mehrfaches Binden verhindern

    if (runBtn.dataset.bound === '1') return;

     runBtn.dataset.bound = '1';

    BOUND = true;

     if (photoBtn) {

       photoBtn.addEventListener('click', () => {

        try { fileIn.setAttribute('capture', 'environment'); } catch {}

        fileIn.click();

      });

       pickBtn.addEventListener('click', () => {

        try { fileIn.removeAttribute('capture'); } catch {}

         fileIn.click();

      });

    if (bigBtn) {

      bigBtn.addEventListener('click', () => {

        try { fileIn.setAttribute('capture', 'environment'); } catch {}

        fileIn.click();

     // Datei gewählt → Vorschau

    fileIn.addEventListener('change', function () {

       if (this.files && this.files[0]) showPreview(this.files[0]);

     // Drag & Drop (optional)

    if (drop) {

      ['dragenter','dragover','dragleave','drop'].forEach(ev => {

        drop.addEventListener(ev, e => { e.preventDefault(); e.stopPropagation(); }, false);

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

        const dt = e.dataTransfer;

        if (dt && dt.files && dt.files[0]) {

          fileIn.files = dt.files;

          showPreview(dt.files[0]);

      });

     // Klick → Erkennen & Suchen

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

       ev.preventDefault();

      const f = fileIn.files && fileIn.files[0];

       if (!f) { alert('Bitte ein Bild wählen oder aufnehmen.'); return; }

       if (photoBtn) photoBtn.disabled = true;

      if (pickBtn)  pickBtn.disabled = true;

       try {

        setStatus('Modell laden …');

        await ensureClipExtractor();

        setStatus('Index laden …');

        const index = await loadLabelIndex();

        const qvec = await embedFileImage(f);

        setProgress(0.2);

        const matches = rankMatches(qvec, index, MATCH_TOPK, MATCH_THRESHOLD);

       } catch (e) {

        setStatus('Fehler bei Erkennung/Suche. Bitte erneut versuchen.');

       } finally {

        setProgress(null);

    });

     console.log('[LabelScan] Gadget gebunden.');

   // =============================

  // 8) Start

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

    document.addEventListener('DOMContentLoaded', bind);

  } else {

     bind();

   const mo = new MutationObserver(() => { if (!BOUND) bind(); });

   mo.observe(document.documentElement || document.body, { childList: true, subtree: true });