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 = {
indexTitle: (window.LabelScanConfig && window.LabelScanConfig.indexTitle) ||
'MediaWiki:Gadget-LabelScan-index.json',
topK: 8,
transformersURL: 'https://cdn.jsdelivr.net/npm/@xenova/transformers@2.15.0',
modelId: 'Xenova/clip-vit-base-patch32',
localModelPath: '/models', // du nutzt /models
maxSide: 1024,
debug: true
};
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 showPreview(file){
const url=URL.createObjectURL(file);
const prev=qs('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');
}
}
// ---------------- 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);
const withEmb = INDEX_EMB.filter(v=>v && v.length).length;
log('Index geladen:', INDEX.length, 'Einträge');
log('Embeddings vorhanden:', withEmb, '/', INDEX.length);
if(ui) setProgress(0.06);
return INDEX;
}
function base64ToFloat32(b64){
const bin=atob(b64), len=bin.length;
const buf=new ArrayBuffer(len);
const view=new Uint8Array(buf);
for(let i=0;i<len;i++) view[i]=bin.charCodeAt(i);
return new Float32Array(buf);
}
// ---------------- 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 von transformers-CDN (liefert ort-wasm-simd.wasm korrekt)
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;
}
// Datei -> Canvas -> Processor({images}) -> Model
async function embedFileImage(file){
function loadImage(f){
return new Promise((res,rej)=>{
const url=URL.createObjectURL(f);
const img=new Image();
img.crossOrigin='anonymous';
img.onload=()=>{URL.revokeObjectURL(url);res(img);};
img.onerror=e=>{URL.revokeObjectURL(url);rej(e);};
img.src=url;
});
}
function toCanvas(img,max){
const c=document.createElement('canvas');
let {width:w,height:h}=img;
const s=Math.min(1, max/Math.max(w,h));
w=Math.round(w*s); h=Math.round(h*s);
c.width=w; c.height=h;
c.getContext('2d').drawImage(img,0,0,w,h);
return c;
}
const { processor, model } = await ensureClipVision();
setStatus('Bild vorbereiten …'); setProgress(0.20);
const img = await loadImage(file);
const canvas = toCanvas(img, CFG.maxSide);
setStatus('Bild analysieren …'); setProgress(0.38);
// WICHTIG: Processor als Objekt mit { images: canvas } aufrufen
const inputs = await processor({ images: canvas }, { 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');
return normalize(vec);
}
function normalize(v){
let n=0; for(let i=0;i<v.length;i++) n+=v[i]*v[i];
n=Math.sqrt(n)||1;
const o=new Float32Array(v.length);
for(let i=0;i<v.length;i++) o[i]=v[i]/n;
return o;
}
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; }
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.slice(0, CFG.topK);
}
function renderResults(r){
const box=qs('ados-scan-results');
if(!box) return;
box.innerHTML='';
if(!r.length){
box.innerHTML='<div class="empty">Keine klaren Treffer.</div>';
return;
}
r.forEach(({ i, score })=>{
const it=INDEX[i];
const link = mw.util.getUrl((it.title||'').replace(/ /g,'_'));
const thumb = it.thumb || '';
box.innerHTML +=
`<div class="ados-hit" style="display:grid;grid-template-columns:60px 1fr auto;gap:10px;align-items:center;padding:.35rem 0;">
${thumb ? `<img src="${thumb}" style="width:60px;border-radius:6px;">` : `<div></div>`}
<div><b><a href="${link}">${mw.html.escape(it.title||'')}</a></b></div>
<div style="color:#666;font-variant-numeric:tabular-nums">${score.toFixed(3)}</div>
</div>`;
});
}
// ---------------- UI ----------------
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;
btnCam && btnCam.addEventListener('click', ()=> inCam.click());
btnGal && btnGal.addEventListener('click', ()=> inGal.click());
const pick = e => { const f=e.target.files?.[0]; if(f) showPreview(f); };
inCam.addEventListener('change', pick);
inGal.addEventListener('change', pick);
if(drop){
drop.addEventListener('dragover', ev => { ev.preventDefault(); drop.classList.add('is-over'); });
drop.addEventListener('dragleave', ()=> drop.classList.remove('is-over'));
drop.addEventListener('drop', ev => {
ev.preventDefault(); drop.classList.remove('is-over');
const f = ev.dataTransfer?.files?.[0];
if(f){
const dt=new DataTransfer(); dt.items.add(f);
inGal.files=dt.files; showPreview(f);
}
});
}
btnReset && btnReset.addEventListener('click', ()=>{
setStatus('Bereit.'); setProgress(null);
const p=qs('ados-scan-preview'); if(p) p.innerHTML='<div class="note">Noch keine Vorschau.</div>';
const r=qs('ados-scan-results'); if(r) r.innerHTML='<div class="empty">Hier erscheinen Treffer.</div>';
inCam.value=''; inGal.value='';
});
btnRun.addEventListener('click', onRunClick);
BOUND=true;
log('UI gebunden.');
}
async function onRunClick(){
try{
const btnRun = qs('ados-scan-run'); // <— hier neu holen (fix für ReferenceError)
const inCam = qs('ados-scan-file-camera');
const inGal = qs('ados-scan-file-gallery');
const file = inCam.files?.[0] || inGal.files?.[0];
if(!file){ alert('Bitte zuerst ein Foto auswählen.'); return; }
if(btnRun) btnRun.disabled = true;
await loadIndex({ ui:true });
// Sicherheitshalber: Modell vorab laden (optional)
await ensureClipVision();
const q = await embedFileImage(file);
setProgress(0.70);
setStatus('Abgleich …');
renderResults(rankByCosine(q));
setStatus('Fertig.');
setProgress(null);
} catch(e){
err('Fehler', e);
setStatus('Fehler bei Erkennung.');
setProgress(null);
} finally {
const btnRun = qs('ados-scan-run');
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.'); setProgress(null); });
}
log('gadget file loaded');
init();
})();