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

Version vom 6. November 2025, 20:26 Uhr

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

  // ---------- Hilfsfunktionen für UI ----------
  function $(id){ return document.getElementById(id); }
  function status(t){ const el=$('ados-scan-status'); if(el) el.textContent = t || ''; }
  function progress(v){
    const bar=$('ados-scan-progress');
    if(!bar) return;
    if(v == null){ bar.hidden = true; bar.value = 0; }
    else { bar.hidden = false; bar.value = Math.max(0, Math.min(1, v)); }
  }
  function preview(file){
    const p = $('ados-scan-preview');
    if(!p) return;
    const url = URL.createObjectURL(file);
    p.innerHTML = '<img alt="Vorschau" style="max-width:100%;height:auto;border-radius:8px" />';
    p.querySelector('img').src = url;
  }

  // ---------- Tesseract sauber laden (Worker/WASM/CDN) ----------
  let _tessReady = null;
  const TESS_CDN = 'https://cdn.jsdelivr.net/npm/tesseract.js@5/dist/';
  async function ensureTesseract(){
    if(_tessReady) return _tessReady;
    _tessReady = new Promise((resolve, reject) => {
      if(window.Tesseract) return resolve();

      const s = document.createElement('script');
      s.src = TESS_CDN + 'tesseract.min.js';
      s.async = true;
      s.onload = () => resolve();
      s.onerror = () => reject(new Error('Tesseract.js konnte nicht geladen werden'));
      document.head.appendChild(s);
    });
    return _tessReady;
  }

  // Kleines Canvas-Preprocessing (Grayscale & leichter Kontrast)
  async function preprocess(file){
    const img = await new Promise((res, rej) => {
      const i = new Image();
      i.onload = () => res(i);
      i.onerror = rej;
      i.src = URL.createObjectURL(file);
    });
    const MAX = 1800;
    const scale = (img.width > img.height) ? (MAX / img.width) : (MAX / img.height);
    const w = Math.round(img.width * scale);
    const h = Math.round(img.height * scale);
    const c = document.createElement('canvas');
    c.width = w; c.height = h;
    const ctx = c.getContext('2d');
    ctx.imageSmoothingEnabled = true;
    ctx.drawImage(img, 0, 0, w, h);

    const id = ctx.getImageData(0,0,w,h), d=id.data;
    for(let i=0;i<d.length;i+=4){
      const g = 0.2126*d[i] + 0.7152*d[i+1] + 0.0722*d[i+2];
      const v = Math.max(0, Math.min(255, (g-128)*1.12 + 128)); // leichte Kontrastanhebung
      d[i]=d[i+1]=d[i+2]=v;
    }
    ctx.putImageData(id,0,0);
    return c;
  }

  // ---------- OCR ----------
  async function runOCR(file){
    await ensureTesseract();
    const { createWorker } = window.Tesseract;

    // Pfade hart setzen, damit Worker/WASM sicher gefunden werden
    const worker = await createWorker({
      workerPath: TESS_CDN + 'worker.min.js',
      langPath:   TESS_CDN + 'langs/',
      corePath:   TESS_CDN + 'tesseract-core.wasm.js',
      logger: m => {
        if(m && typeof m.progress === 'number'){
          progress(m.progress);
        }
        if(m && m.status) {
          // optionales Debug
          // console.log('[OCR]', m.status, m.progress ?? '');
        }
      }
    });

    try {
      await worker.loadLanguage('eng+deu');
      await worker.initialize('eng+deu');

      const canvas = await preprocess(file);

      // psm 6 = Block Text; oem 1 = LSTM
      await worker.setParameters({
        tessedit_pageseg_mode: '6',
        preserve_interword_spaces: '1'
      });

      const result = await worker.recognize(canvas);
      const text = (result && result.data && result.data.text) ? result.data.text : '';
      return text.trim();
    } finally {
      await worker.terminate();
      progress(null);
    }
  }

  // ---------- einfache Treffer-Suche im Wiki ----------
  async function searchTitles(q){
    await mw.loader.using('mediawiki.api');
    const api = new mw.Api();

    // sehr einfache Heuristik: nimm 3–5 „gute“ Wörter aus dem OCR
    const words = String(q || '')
      .replace(/[^\p{L}\p{N}\s\-']/gu,' ')
      .replace(/\s+/g,' ')
      .trim()
      .split(' ')
      .filter(w => w.length >= 3)
      .slice(0, 6);

    if(!words.length) return [];

    const sr = await api.get({
      action: 'query',
      list: 'search',
      srsearch: words.map(w => `"${w}"`).join(' '), // UND-verkettet
      srlimit: 12,
      srnamespace: 0,
      formatversion: 2
    });

    return (sr.query && sr.query.search) ? sr.query.search : [];
  }

  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>';
      return;
    }
    items.forEach(it => {
      const title = it.title || '';
      const link  = mw.util.getUrl(title.replace(/ /g,'_'));
      const snip  = String(it.snippet || '').replace(/<\/?span[^>]*>/g,'').replace(/&quot;/g,'"');
      const div = document.createElement('div');
      div.className = 'ados-hit';
      div.innerHTML = '<b><a href="'+link+'">'+mw.html.escape(title)+'</a></b>' + (snip ? '<div class="meta">'+snip+'</div>' : '');
      box.appendChild(div);
    });
  }

  // ---------- Bindings ----------
  function bind(){
    const run = $('ados-scan-run');
    const file= $('ados-scan-file');
    const big = $('ados-scan-bigbtn');

    if(!run || !file) return;

    if(big){ big.addEventListener('click', () => file.click()); }
    file.addEventListener('change', () => { if(file.files && file.files[0]) preview(file.files[0]); });

    run.addEventListener('click', async (ev) => {
      ev.preventDefault();
      if(!(file.files && file.files[0])){
        alert('Bitte zuerst ein Foto auswählen oder aufnehmen.');
        return;
      }

      const f = file.files[0];
      run.disabled = true;
      const old = run.textContent;
      run.textContent = 'Erkenne …';
      status('Erkenne Label …');
      progress(0);

      try {
        // 1) OCR
        const text = await runOCR(f);
        // Debug-Ausgabe für dich:
        const dbg = $('ados-scan-ocr');
        if(dbg){ dbg.textContent = text; }

        // 2) Suche
        status('Suche im Wiki …');
        const hits = await searchTitles(text);
        renderResults(hits);
        status('Fertig.');
      } catch(err){
        console.error('[LabelScan] Fehler:', err);
        status('Fehler bei Erkennung/Suche. Bitte erneut versuchen.');
      } finally {
        progress(null);
        run.disabled = false;
        run.textContent = old;
      }
    });

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

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