MediaWiki:Gadget-LabelScan.js

Hinweis: Leere nach dem Veröffentlichen den Browser-Cache, um die Änderungen sehen zu können.

• Firefox/Safari: Umschalttaste drücken und gleichzeitig Aktualisieren anklicken oder entweder Strg+F5 oder Strg+R (⌘+R auf dem Mac) drücken
• Google Chrome: Umschalttaste+Strg+R (⌘+Umschalttaste+R auf dem Mac) drücken
• Edge: Strg+F5 drücken oder Strg drücken und gleichzeitig Aktualisieren anklicken

/* global mw */
(function () {
  'use strict';

  // === Hilfsfunktionen =====================================================
  async function fileToImage (file) {
    return new Promise((resolve, reject) => {
      const img = new Image();
      img.onload = () => resolve(img);
      img.onerror = reject;
      img.src = URL.createObjectURL(file);
    });
  }

  function getCanvas (img, size = 32) {
    const c = document.createElement('canvas');
    c.width = c.height = size;
    const ctx = c.getContext('2d');
    ctx.drawImage(img, 0, 0, size, size);
    return ctx.getImageData(0, 0, size, size).data;
  }

  function computePhash (img) {
    const size = 32;
    const pixels = getCanvas(img, size);
    const gray = [];
    for (let i = 0; i < pixels.length; i += 4) {
      gray.push(0.299 * pixels[i] + 0.587 * pixels[i + 1] + 0.114 * pixels[i + 2]);
    }
    const avg = gray.reduce((a, b) => a + b, 0) / gray.length;
    const bits = gray.map(v => (v > avg ? 1 : 0));
    let hash = '';
    for (let i = 0; i < bits.length; i += 4) {
      const nibble = bits.slice(i, i + 4).reduce((a, b, j) => a | (b << (3 - j)), 0);
      hash += nibble.toString(16);
    }
    return hash;
  }

  function hamming (h1, h2) {
    let d = 0;
    const len = Math.min(h1.length, h2.length);
    for (let i = 0; i < len; i++) {
      const x = parseInt(h1[i], 16) ^ parseInt(h2[i], 16);
      d += x.toString(2).replace(/0/g, '').length;
    }
    return d;
  }

  async function loadIndex () {
    const url = mw.util.getUrl('MediaWiki:Gadget-LabelScan-index.json', { action: 'raw', ctype: 'application/json' });
    const res = await fetch(url);
    return res.json();
  }

  // === UI-Helfer ===========================================================
  function showPreview (file) {
    const prev = document.getElementById('ados-scan-preview');
    if (prev) prev.innerHTML = `<img alt="Vorschau" src="${URL.createObjectURL(file)}">`;
  }
  function setStatus (t) {
    const el = document.getElementById('ados-scan-status');
    if (el) el.textContent = t;
  }
  function renderResults (hits) {
    const box = document.getElementById('ados-scan-results');
    box.innerHTML = '';
    if (!hits.length) {
      box.innerHTML = '<div>Keine klaren Treffer gefunden.</div>';
      return;
    }
    hits.forEach(h => {
      box.innerHTML += `
        <div class="ados-hit">
          <a href="${mw.util.getUrl(h.title)}">
            <img src="${h.thumb}" alt="${h.title}">
            <br><b>${mw.html.escape(h.title)}</b>
          </a>
          <small>Distanz: ${h.dist}</small>
        </div>`;
    });
  }

  // === Haupt-Bindung =======================================================
  async function bind () {
    const runBtn = document.getElementById('ados-scan-run');
    const fileIn = document.getElementById('ados-scan-file');
    const bigBtn = document.getElementById('ados-scan-bigbtn');
    if (!runBtn || !fileIn) return;

    bigBtn?.addEventListener('click', () => fileIn.click());
    fileIn.addEventListener('change', e => { if (e.target.files[0]) showPreview(e.target.files[0]); });

    runBtn.addEventListener('click', async ev => {
      ev.preventDefault();
      const file = fileIn.files[0];
      if (!file) return alert('Bitte ein Bild wählen.');
      try {
        setStatus('Berechne Hash …');
        const img = await fileToImage(file);
        const ph = computePhash(img);

        setStatus('Lade Index …');
        const idx = await loadIndex();

        setStatus('Vergleiche …');
        const scored = idx.map(it => ({ ...it, dist: hamming(ph, it.phash) }));
        scored.sort((a, b) => a.dist - b.dist);

        const top = scored.slice(0, 5);
        renderResults(top);
        setStatus('Fertig.');
      } catch (e) {
        console.error('[LabelScan]', e);
        setStatus('Fehler bei Erkennung.');
      }
    });
  }

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