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 */
(() => {
'use strict';
const CFG = {
// ---- Daten & Model ----
indexTitle: (window.LabelScanConfig && window.LabelScanConfig.indexTitle) ||
'MediaWiki:Gadget-LabelScan-index.json',
transformersURL: 'https://cdn.jsdelivr.net/npm/@xenova/transformers@2.15.0',
modelId: 'Xenova/clip-vit-base-patch32',
localModelPath: '/models', // <<— deine Modelle liegen hier
topK: 3, // <<— MAX. 3 TREFFER
maxSide: 1280, // Downscale vor Auto-Crop (Performance)
// ---- Auto-Crop ----
autoCrop: true,
edgeKeepRatio: 0.10, // oberste 10% Kanten als Maske
cropPadding: 0.08, // 8% Randzugabe um die Box
cropMinRel: 0.40, // min. 40% der kleineren Bildkante
// ---- Score-Badges ----
showNumericScore: false, // true = Zahlen zeigen, false = Badges
confidenceBands: [0.90, 0.80], // hoch ≥0.90, mittel ≥0.80, sonst niedrig
// ---- Sonstiges ----
debug: true
};
// --------- Helpers ----------
const log=(...a)=>{ if(CFG.debug) console.log('[LabelScan]',...a); };
const warn=(...a)=>{ if(CFG.debug) console.warn('[LabelScan]',...a); };
const err=(...a)=>{ console.error('[LabelScan]',...a); };
const qs=id=>document.getElementById(id);
const setStatus=t=>{ const el=qs('ados-scan-status'); if(el) el.textContent=t||''; };
const 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 resetResultsBox(msg){
const r = qs('ados-scan-results');
if (r) {
r.innerHTML = `<div class="empty">${msg || 'Hier erscheinen Treffer.'}</div>`;
}
}
function showPreview(file){
const url=URL.createObjectURL(file);
const prev=qs('ados-scan-preview');
if(prev){
prev.innerHTML=`<img alt="Vorschau" style="max-width:260px;width:100%;height:auto;border-radius:8px;display:block;margin:0 auto;" src="${url}">`;
prev.setAttribute('aria-hidden','false');
}
}
function base64ToFloat32(b64){
const bin=atob(b64), len=bin.length;
const buf=new ArrayBuffer(len), view=new Uint8Array(buf);
for(let i=0;i<len;i++) view[i]=bin.charCodeAt(i);
return new Float32Array(buf);
}
// --------- Index ----------
let INDEX=[], INDEX_EMB=[];
async function loadIndex({ ui=true }={}){
if(INDEX.length) return INDEX;
if(ui){ 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;
INDEX_EMB = INDEX.map(it => (typeof it.embed==='string' && it.embed.length) ? base64ToFloat32(it.embed) : null);
log('Index geladen:', INDEX.length, 'Einträge');
log('Embeddings vorhanden:', INDEX_EMB.filter(v=>v&&v.length).length, '/', INDEX.length);
if(ui) setProgress(0.06);
return INDEX;
}
// --------- Transformers (lokal) ----------
let _visionLoadPromise=null;
async function ensureClipVision(){
if(_visionLoadPromise) return _visionLoadPromise;
setStatus('Modell laden …'); setProgress(0.08);
_visionLoadPromise = (async()=>{
const mod = await import(/* webpackIgnore: true */ CFG.transformersURL);
// Nur lokal laden
mod.env.allowLocalModels = true;
mod.env.allowRemoteModels = false;
mod.env.localModelPath = CFG.localModelPath;
// WASM-Runtime (ort-wasm-simd.wasm) von transformers-CDN
mod.env.backends = mod.env.backends || {};
mod.env.backends.onnx = mod.env.backends.onnx || {};
mod.env.backends.onnx.wasm = mod.env.backends.onnx.wasm || {};
mod.env.backends.onnx.wasm.wasmPaths =
'https://cdn.jsdelivr.net/npm/@xenova/transformers@2.15.0/dist/';
const [processor, model] = await Promise.all([
mod.AutoProcessor.from_pretrained(CFG.modelId),
mod.CLIPVisionModelWithProjection.from_pretrained(CFG.modelId, { quantized: true })
]);
let backend='unknown';
try { backend = model?.session?.executionProvider || backend; } catch(_){}
log('CLIP ready (vision, local):', model?.constructor?.name || 'unknown', '| Backend:', backend);
return { mod, processor, model };
})();
return _visionLoadPromise;
}
// --------- Auto-Crop Heuristik ----------
function toCanvasScaled(img, maxSide){
const c=document.createElement('canvas');
let { width:w, height:h } = img;
const s = Math.min(1, maxSide / Math.max(w,h));
w = Math.round(w*s); h = Math.round(h*s);
c.width=w; c.height=h;
const g=c.getContext('2d', { willReadFrequently:true });
g.imageSmoothingEnabled = true;
g.drawImage(img,0,0,w,h);
return c;
}
function autoCropCanvas(inCanvas){
const w=inCanvas.width, h=inCanvas.height;
const ctx=inCanvas.getContext('2d', { willReadFrequently:true });
const imgData=ctx.getImageData(0,0,w,h);
const data=imgData.data;
// Graustufen
const gray=new Uint8ClampedArray(w*h);
for(let y=0, p=0, i=0; y<h; y++){
for(let x=0; x<w; x++, i++, p+=4){
const r=data[p], g=data[p+1], b=data[p+2];
gray[i] = (0.299*r + 0.587*g + 0.114*b)|0;
}
}
// Sobel-Kanten (Magnitude)
const mag=new Float32Array(w*h);
const sobelX=[-1,0,1,-2,0,2,-1,0,1];
const sobelY=[-1,-2,-1,0,0,0,1,2,1];
for(let y=1; y<h-1; y++){
for(let x=1; x<w-1; x++){
let gx=0, gy=0, k=0;
for(let j=-1;j<=1;j++){
for(let i=-1;i<=1;i++,k++){
const v=gray[(y+j)*w + (x+i)];
gx += sobelX[k]*v; gy += sobelY[k]*v;
}
}
mag[y*w+x] = Math.hypot(gx,gy);
}
}
// Schwellwert: oberes x%-Quantil
const vals = Array.from(mag).sort((a,b)=>a-b);
const keep = CFG.edgeKeepRatio;
const tIdx = Math.max(0, Math.min(vals.length-1, Math.floor(vals.length*(1-keep))));
const thr = vals[tIdx];
// Bounding-Box der Pixel > thr
let minX=w, minY=h, maxX=0, maxY=0, count=0;
for(let y=0;y<h;y++){
for(let x=0;x<w;x++){
const m=mag[y*w+x];
if(m>thr){ count++; if(x<minX)minX=x; if(y<minY)minY=y; if(x>maxX)maxX=x; if(y>maxY)maxY=y; }
}
}
if(count<50) return inCanvas; // zu wenig Signal → return original
// Padding
const pad = Math.round(CFG.cropPadding * Math.max(w,h));
minX = Math.max(0, minX - pad);
minY = Math.max(0, minY - pad);
maxX = Math.min(w-1, maxX + pad);
maxY = Math.min(h-1, maxY + pad);
// Mindestgröße
const boxW=maxX-minX+1, boxH=maxY-minY+1;
const minLen = Math.round(CFG.cropMinRel * Math.min(w,h));
let cx=minX, cy=minY, cw=boxW, ch=boxH;
if(cw<minLen || ch<minLen){
const needW = Math.max(minLen, cw);
const needH = Math.max(minLen, ch);
const centerX = Math.round((minX+maxX)/2);
const centerY = Math.round((minY+maxY)/2);
cx = Math.max(0, Math.min(w-needW, centerX - Math.floor(needW/2)));
cy = Math.max(0, Math.min(h-needH, centerY - Math.floor(needH/2)));
cw = needW; ch = needH;
}
const out=document.createElement('canvas');
out.width=cw; out.height=ch;
out.getContext('2d').drawImage(inCanvas, cx, cy, cw, ch, 0, 0, cw, ch);
return out;
}
// --------- Embedding-Pipeline ---------
async function embedFileImage(file){
const { mod, processor, model } = await ensureClipVision();
setStatus('Bild vorbereiten …'); setProgress(0.20);
// 1) Bild laden
const img = await new Promise((res,rej)=>{
const url=URL.createObjectURL(file);
const image=new Image();
image.crossOrigin='anonymous';
image.onload=()=>{ URL.revokeObjectURL(url); res(image); };
image.onerror=e=>{ URL.revokeObjectURL(url); rej(e); };
image.src=url;
});
// 2) Scale → Auto-Crop
let canvas = toCanvasScaled(img, CFG.maxSide);
if(CFG.autoCrop){
setStatus('Auto-Crop …'); setProgress(0.30);
canvas = autoCropCanvas(canvas);
}
// 3) Canvas → Blob → RawImage (robust für Processor)
const blob = await new Promise(r => canvas.toBlob(r, 'image/jpeg', 0.95));
const imageRaw = await mod.RawImage.fromBlob(blob);
setStatus('Bild analysieren …'); setProgress(0.45);
// 4) Processor & Model
const inputs = await processor(imageRaw, { return_tensors: 'pt' });
const out = await model.forward({ pixel_values: inputs.pixel_values });
const vec = out?.image_embeds?.data || out?.image_embeds;
if(!(vec instanceof Float32Array)) throw new Error('Embedding-Format unerwartet');
// 5) Normieren
let n=0; for(let i=0;i<vec.length;i++) n+=vec[i]*vec[i];
const norm = Math.sqrt(n)||1;
const v = new Float32Array(vec.length);
for(let i=0;i<vec.length;i++) v[i]=vec[i]/norm;
return v;
}
function cosine(a,b){ let s=0,L=Math.min(a.length,b.length); for(let i=0;i<L;i++) s+=a[i]*b[i]; return s; }
// vorher: slice(0, topK) hier
// jetzt: ALLE sortiert zurückgeben, damit wir danach deduplizieren können
function rankByCosine(q){
const s=[];
for(let i=0;i<INDEX.length;i++){
const v=INDEX_EMB[i];
if(!v) continue;
s.push({ i, score: cosine(q,v) });
}
s.sort((a,b)=> b.score-a.score);
return s;
}
// NEU: pro Titel nur bester Treffer
function dedupeByTitle(ranked){
const bestByTitle = Object.create(null);
for (let k = 0; k < ranked.length; k++) {
const hit = ranked[k];
const it = INDEX[hit.i];
const rawTitle = it && it.title ? String(it.title) : '';
const key = rawTitle.trim().toLowerCase();
if (!key) continue;
const prev = bestByTitle[key];
if (!prev || hit.score > prev.score) {
bestByTitle[key] = hit;
}
}
const arr = [];
for (const key in bestByTitle) {
if (Object.prototype.hasOwnProperty.call(bestByTitle, key)) {
arr.push(bestByTitle[key]);
}
}
arr.sort(function(a,b){ return b.score - a.score; });
return arr;
}
// --------- Score-Badges ---------
function scoreBadge(score){
if (CFG.showNumericScore) {
return `<span style="font-variant-numeric:tabular-nums;color:#666">${score.toFixed(3)}</span>`;
}
const [hi, mid] = CFG.confidenceBands || [0.90, 0.80];
let txt = 'niedrig', bg = '#f1f5f9', fg = '#334155';
if (score >= hi) { txt = 'hoch'; bg = '#e6ffed'; fg = '#0a7d2c'; }
else if (score >= mid) { txt = 'mittel'; bg = '#fff7e6'; fg = '#a45500'; }
return `<span style="display:inline-block;padding:.12rem .45rem;border-radius:999px;background:${bg};color:${fg};font-weight:600;font-size:.85em;line-height:1">${txt}</span>`;
}
// --------- Rendering (max. 3 Treffer) ---------
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 ein anderes Foto oder näher am Frontlabel.</div>';
return;
}
// NEU: Dedupe nach Titel, DANN auf topK begrenzen
const uniqueRanked = dedupeByTitle(ranked).slice(0, CFG.topK);
const makeCard = (it, score) => `
<div class="ados-card" style="display:grid;grid-template-columns:120px 1fr;gap:14px;align-items:center;padding:12px;border:1px solid #e6e6e6;border-radius:14px;box-shadow:0 1px 8px rgba(0,0,0,.04);">
${it.thumb?`<img src="${it.thumb}" alt="" style="width:120px;height:auto;border-radius:10px;">`
:`<div style="width:120px;height:90px;background:#f3f3f3;border-radius:10px;"></div>`}
<div style="display:flex;flex-direction:column;gap:8px;">
<div style="font-weight:700;font-size:1.05rem;line-height:1.2;">
<a href="${mw.util.getUrl((it.title||'').replace(/ /g,'_'))}">${mw.html.escape(it.title||'')}</a>
</div>
<div>${scoreBadge(score)}</div>
<div>
<a href="${mw.util.getUrl((it.title||'').replace(/ /g,'_'))}" class="mw-ui-button" style="display:inline-block;padding:.4rem .7rem;border-radius:8px;background:#2a4b8d;color:#fff;text-decoration:none;">Artikel öffnen</a>
</div>
</div>
</div>`;
const grid = document.createElement('div');
grid.style.display='grid';
grid.style.gridTemplateColumns='1fr';
grid.style.gap='12px';
// max. CFG.topK (=3) Karten nach Dedupe
uniqueRanked.forEach(function(hit){
const it = INDEX[hit.i];
grid.innerHTML += makeCard(it, hit.score);
});
box.appendChild(grid);
}
// --------- UI / Flow ----------
let BOUND=false;
function bindUI(){
if(BOUND) return;
const btnRun = qs('ados-scan-run');
const inCam = qs('ados-scan-file-camera');
const inGal = qs('ados-scan-file-gallery');
const btnCam = qs('ados-scan-btn-camera');
const btnGal = qs('ados-scan-btn-gallery');
const drop = qs('ados-scan-drop');
const btnReset = qs('ados-scan-reset');
if(!btnRun || !inCam || !inGal) return;
// Hilfsfunktion: wenn neues Bild gewählt → Vorschau & Ergebnisse zurücksetzen
const onNewImage = (file) => {
if (!file) return;
showPreview(file);
resetResultsBox('Hier erscheinen Treffer.');
setStatus('Bereit.');
setProgress(null);
};
btnCam && btnCam.addEventListener('click', ()=> inCam.click());
btnGal && btnGal.addEventListener('click', ()=> inGal.click());
const pick = e => {
const f=e.target.files?.[0];
if(f) onNewImage(f);
};
inCam.addEventListener('change', pick);
inGal.addEventListener('change', pick);
if(drop){
drop.addEventListener('dragover', function(ev){ ev.preventDefault(); drop.classList.add('is-over'); });
drop.addEventListener('dragleave', function(){ drop.classList.remove('is-over'); });
drop.addEventListener('drop', function(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;
onNewImage(f);
}
});
}
btnReset && btnReset.addEventListener('click', function(){
setStatus('Bereit.'); setProgress(null);
const p=qs('ados-scan-preview'); if(p) p.innerHTML='<div class="note">Noch keine Vorschau.</div>';
resetResultsBox('Hier erscheinen Treffer.');
inCam.value=''; inGal.value='';
});
btnRun.addEventListener('click', onRunClick);
BOUND=true; log('UI gebunden.');
}
async function onRunClick(){
const btnRun = qs('ados-scan-run');
const inCam = qs('ados-scan-file-camera');
const inGal = qs('ados-scan-file-gallery');
try{
const file = (inCam.files && inCam.files[0]) || (inGal.files && inGal.files[0]);
if(!file){ alert('Bitte zuerst ein Foto auswählen.'); return; }
if(btnRun) btnRun.disabled = true;
// Ergebnisse direkt leeren / „Suche läuft …“
resetResultsBox('Suche läuft …');
await loadIndex({ ui:true });
await ensureClipVision(); // warmup
const q = await embedFileImage(file);
setProgress(0.70);
setStatus('Abgleich …');
const ranked = rankByCosine(q);
renderResults(ranked);
setStatus('Fertig.');
setProgress(null);
} catch(e){
err('Fehler', e);
setStatus('Fehler bei Erkennung.');
resetResultsBox('Fehler bei der Erkennung – bitte ein anderes Foto versuchen.');
setProgress(null);
} finally {
if(btnRun) btnRun.disabled = false;
}
}
function init(){
if(document.readyState==='loading'){
document.addEventListener('DOMContentLoaded', bindUI, { once: true });
} else {
bindUI();
}
loadIndex({ ui:false }).catch(err).finally(()=>{
setStatus('Bereit.');
resetResultsBox('Hier erscheinen Treffer.');
setProgress(null);
});
}
log('gadget file loaded');
init();
})();