163 lines
9.6 KiB
HTML
163 lines
9.6 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="fr"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1">
|
||
<title>WEVIA — Agent Avatar Picker</title>
|
||
<link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@700;900&family=Nunito:wght@600;700;800&display=swap" rel="stylesheet">
|
||
<style>
|
||
*{margin:0;padding:0;box-sizing:border-box}
|
||
body{background:#050a18;color:#e2e8f0;font-family:Nunito,sans-serif}
|
||
.hdr{background:linear-gradient(135deg,#0f1629,#1a2035);padding:14px 20px;border-bottom:1px solid rgba(6,182,212,.2);position:sticky;top:0;z-index:50;display:flex;justify-content:space-between;align-items:center}
|
||
.hdr h1{font:900 15px Orbitron;color:#06b6d4;letter-spacing:1px}
|
||
.nav{display:flex;gap:8px;font-size:11px}
|
||
.nav a{color:#94a3b8;text-decoration:none;padding:4px 10px;border-radius:6px;border:1px solid rgba(255,255,255,.08)}
|
||
.nav a:hover,.nav a.ac{color:#06b6d4;border-color:#06b6d4}
|
||
.filters{padding:10px 20px;display:flex;gap:6px;border-bottom:1px solid rgba(255,255,255,.04)}
|
||
.fb{padding:4px 14px;border-radius:6px;border:1px solid rgba(255,255,255,.1);background:none;color:#94a3b8;font:700 10px Nunito;cursor:pointer;letter-spacing:1px}
|
||
.fb.ac{border-color:#06b6d4;background:rgba(6,182,212,.12);color:#06b6d4}
|
||
.grid{padding:16px;display:grid;grid-template-columns:repeat(auto-fill,minmax(360px,1fr));gap:12px}
|
||
.card{background:#0f1629;border:1px solid rgba(255,255,255,.06);border-radius:10px;padding:14px}
|
||
.card.pk{border-color:#ffd700;box-shadow:0 0 12px rgba(255,215,0,.08)}
|
||
.ch{display:flex;align-items:center;gap:10px;margin-bottom:10px}
|
||
.ch img{width:40px;height:40px;border-radius:8px;border:2px solid rgba(255,255,255,.1)}
|
||
.ch .nm{font-weight:800;font-size:13px}
|
||
.ch .rl{font-size:9px;color:#64748b}
|
||
.ch .pk-lbl{margin-left:auto;font-size:9px;color:#ffd700;background:rgba(255,215,0,.1);padding:2px 8px;border-radius:4px}
|
||
.opts{display:flex;gap:5px;flex-wrap:wrap}
|
||
.opt{display:flex;flex-direction:column;align-items:center;gap:2px;padding:4px;border-radius:8px;border:2px solid transparent;background:rgba(255,255,255,.02);cursor:pointer;width:68px;transition:.15s}
|
||
.opt:hover{background:rgba(255,255,255,.06);transform:scale(1.06)}
|
||
.opt.sel{border-color:#ffd700;background:rgba(255,215,0,.06)}
|
||
.opt img{width:50px;height:50px;border-radius:6px;background:#1a2035}
|
||
.opt span{font-size:7px;color:#94a3b8;text-align:center;line-height:1.1}
|
||
.bar{padding:8px 20px;background:#0a0f1e;border-bottom:1px solid rgba(255,215,0,.15);font-size:10px;color:#94a3b8;display:flex;gap:6px;flex-wrap:wrap;align-items:center}
|
||
.tag{display:inline-flex;align-items:center;gap:3px;background:rgba(255,215,0,.08);border:1px solid rgba(255,215,0,.2);border-radius:5px;padding:2px 6px;font-size:9px;color:#ffd700}
|
||
.tag img{width:14px;height:14px;border-radius:3px}
|
||
.copy{padding:8px 20px;border:none;border-radius:8px;background:linear-gradient(135deg,#06b6d4,#8b5cf6);color:#fff;font:700 12px Nunito;cursor:pointer}
|
||
</style></head><body>
|
||
<div class="hdr">
|
||
<h1>🎨 AGENT AVATAR PICKER</h1>
|
||
<div class="nav">
|
||
<a href="/agents-archi.html">← Architecture 3D</a>
|
||
<a href="/wevia-meeting-rooms.html">Meeting Rooms</a>
|
||
<a href="/enterprise-model.html">Enterprise</a>
|
||
</div>
|
||
</div>
|
||
<div class="filters" id="F"></div>
|
||
<div class="bar" id="B" style="display:none"></div>
|
||
<div class="grid" id="G"></div>
|
||
<script>
|
||
var A=[
|
||
{n:"WEVIA Master",t:"STRATÉGIE",y:"robot",c:"#06b6d4",r:"Head of AI — Orchestrateur Suprême"},
|
||
{n:"Director",t:"DIRECTION",y:"robot",c:"#8b5cf6",r:"Cerveau autonome"},
|
||
{n:"Master Router",t:"DIRECTION",y:"robot",c:"#8b5cf6",r:"46 routes · 14 providers"},
|
||
{n:"Consensus",t:"DIRECTION",y:"robot",c:"#8b5cf6",r:"Vote multi-provider"},
|
||
{n:"Dispatcher",t:"DIRECTION",y:"robot",c:"#8b5cf6",r:"Moteur de routes"},
|
||
{n:"MiroFish",t:"DIRECTION",y:"robot",c:"#8b5cf6",r:"WePredict auto-guérison"},
|
||
{n:"Blade",t:"DIRECTION",y:"robot",c:"#8b5cf6",r:"Agent desktop Razer"},
|
||
{n:"DeerFlow",t:"DIRECTION",y:"robot",c:"#8b5cf6",r:"Deep research 12+ sources"},
|
||
{n:"AutoFix",t:"DIRECTION",y:"robot",c:"#8b5cf6",r:"Docker heal 16 containers"},
|
||
{n:"Fiability",t:"DIRECTION",y:"robot",c:"#8b5cf6",r:"Santé 24 URLs"},
|
||
{n:"DevOps",t:"TACTIQUE",y:"human",c:"#f59e0b",r:"CI/CD · 4 serveurs"},
|
||
{n:"Ethica",t:"TACTIQUE",y:"human",c:"#f59e0b",r:"HCP Pharma · 141K+ contacts"},
|
||
{n:"Security",t:"TACTIQUE",y:"human",c:"#f59e0b",r:"CVE+SSL+Nuclei"},
|
||
{n:"Monitor",t:"TACTIQUE",y:"human",c:"#f59e0b",r:"Uptime 24/7"},
|
||
{n:"NonReg",t:"TACTIQUE",y:"human",c:"#f59e0b",r:"Régression 151/153"},
|
||
{n:"WEVCODE",t:"TACTIQUE",y:"human",c:"#f59e0b",r:"Code IA · 4 modes"},
|
||
{n:"L99 Pilot",t:"TACTIQUE",y:"human",c:"#f59e0b",r:"Qualité Lean 6σ"},
|
||
{n:"Scraper",t:"TACTIQUE",y:"robot",c:"#f59e0b",r:"DabaDoc MA+TN+DZ"},
|
||
{n:"ArchScan",t:"TACTIQUE",y:"robot",c:"#f59e0b",r:"Topologie 52 nœuds"},
|
||
{n:"CrowdSec",t:"TACTIQUE",y:"human",c:"#f59e0b",r:"IDS/IPS"},
|
||
{n:"Fail2Ban",t:"TACTIQUE",y:"human",c:"#f59e0b",r:"SSH protect"},
|
||
{n:"Registry",t:"TACTIQUE",y:"human",c:"#f59e0b",r:"Registre 626 pages"},
|
||
{n:"Ollama",t:"EXÉCUTION",y:"robot",c:"#ef4444",r:"LLM LOCAL souverain"},
|
||
{n:"Groq",t:"EXÉCUTION",y:"robot",c:"#ef4444",r:"<200ms Llama-3.3"},
|
||
{n:"Cerebras",t:"EXÉCUTION",y:"robot",c:"#ef4444",r:"Qwen-3 235B"},
|
||
{n:"SambaNova",t:"EXÉCUTION",y:"robot",c:"#ef4444",r:"Meta-Llama"},
|
||
{n:"Paperclip",t:"EXÉCUTION",y:"robot",c:"#ef4444",r:"Fleet 669 agents"},
|
||
{n:"Sentinel",t:"EXÉCUTION",y:"robot",c:"#ef4444",r:"Relais S95"},
|
||
{n:"Docker",t:"EXÉCUTION",y:"robot",c:"#ef4444",r:"16 containers"},
|
||
{n:"PMTA",t:"EXÉCUTION",y:"robot",c:"#ef4444",r:"MTA sacré port 25"}
|
||
];
|
||
|
||
function opts(a){
|
||
var s=encodeURIComponent(a.n);
|
||
if(a.y==="robot") return [
|
||
{u:"https://robohash.org/"+s+"?set=set1&size=150x150",l:"Robot"},
|
||
{u:"https://robohash.org/"+s+"-v2?set=set1&size=150x150",l:"Robot V2"},
|
||
{u:"https://robohash.org/"+s+"-v3?set=set1&size=150x150",l:"Robot V3"},
|
||
{u:"https://robohash.org/"+s+"?set=set2&size=150x150",l:"Monster"},
|
||
{u:"https://robohash.org/"+s+"?set=set3&size=150x150",l:"Head"},
|
||
{u:"https://robohash.org/"+s+"?set=set4&size=150x150",l:"Cat"},
|
||
{u:"https://ui-avatars.com/api/?background=random&color=fff&size=64&name="+s,l:"Bottts"},
|
||
{u:"https://ui-avatars.com/api/?background=random&color=fff&size=64&name="+s,l:"Emoji"}
|
||
];
|
||
return [
|
||
{u:"https://ui-avatars.com/api/?background=random&color=fff&size=64&name="+s,l:"Adventurer"},
|
||
{u:"https://ui-avatars.com/api/?background=random&color=fff&size=64&name="+s+"-v2",l:"Advent. V2"},
|
||
{u:"https://ui-avatars.com/api/?background=random&color=fff&size=64&name="+s+"-v3",l:"Advent. V3"},
|
||
{u:"https://ui-avatars.com/api/?background=random&color=fff&size=64&name=avataaars/svg?seed="+s,l:"Avataaars"},
|
||
{u:"https://ui-avatars.com/api/?background=random&color=fff&size=64&name=big-smile/svg?seed="+s,l:"Big Smile"},
|
||
{u:"https://ui-avatars.com/api/?background=random&color=fff&size=64&name=lorelei/svg?seed="+s,l:"Lorelei"},
|
||
{u:"https://ui-avatars.com/api/?background=random&color=fff&size=64&name=notionists/svg?seed="+s,l:"Notionists"},
|
||
{u:"https://ui-avatars.com/api/?background=random&color=fff&size=64&name=open-peeps/svg?seed="+s,l:"Open Peeps"},
|
||
{u:"https://ui-avatars.com/api/?background=random&color=fff&size=64&name=pixel-art/svg?seed="+s,l:"Pixel Art"},
|
||
{u:"https://robohash.org/"+s+"?set=set5&size=150x150",l:"RH Human"}
|
||
];
|
||
}
|
||
|
||
var P={},CF="ALL";
|
||
function render(){
|
||
var fl=A;if(CF!=="ALL")fl=A.filter(function(a){return a.t===CF});
|
||
var fh="";["ALL","STRATÉGIE","DIRECTION","TACTIQUE","EXÉCUTION"].forEach(function(t){
|
||
fh+='<button class="fb'+(CF===t?" ac":"")+'" onclick="CF=\''+t+'\';render()">'+t+'</button>';
|
||
});
|
||
document.getElementById("F").innerHTML=fh;
|
||
var n=Object.keys(P).length;
|
||
if(n>0){
|
||
var bh='<b style="color:#ffd700">'+n+' choix</b> ';
|
||
for(var k in P){bh+='<span class="tag"><img src="'+P[k].u+'">'+k+' ('+P[k].l+')</span> ';}
|
||
bh+=' <button class="copy" onclick="doCopy()">📋 Copier</button>';
|
||
document.getElementById("B").style.display="flex";
|
||
document.getElementById("B").innerHTML=bh;
|
||
}else{document.getElementById("B").style.display="none";}
|
||
var gh="";
|
||
fl.forEach(function(a){
|
||
var o=opts(a);var pk=P[a.n];
|
||
gh+='<div class="card'+(pk?" pk":"")+'"><div class="ch">';
|
||
if(pk)gh+='<img src="'+pk.u+'">';
|
||
gh+='<div><div class="nm" style="color:'+a.c+'">'+a.n+'</div><div class="rl">'+a.r+'</div></div>';
|
||
if(pk)gh+='<span class="pk-lbl">✓ '+pk.l+'</span>';
|
||
gh+='</div><div class="opts">';
|
||
o.forEach(function(op){
|
||
var sel=pk&&pk.u===op.u;
|
||
gh+='<div class="opt'+(sel?" sel":"")+'" onclick="pick(\''+a.n.replace(/'/g,"\\'")+'\',\''+op.u.replace(/'/g,"\\'")+'\',\''+op.l+'\')">';
|
||
gh+='<img src="'+op.u+'" loading="lazy" onerror="this.style.opacity=0.2"><span>'+op.l+'</span></div>';
|
||
});
|
||
gh+='</div></div>';
|
||
});
|
||
document.getElementById("G").innerHTML=gh;
|
||
}
|
||
function pick(n,u,l){if(P[n]&&P[n].u===u)delete P[n];else P[n]={u:u,l:l};render();}
|
||
function doCopy(){
|
||
var t="";for(var k in P)t+=k+": "+P[k].l+" → "+P[k].u+"\n";
|
||
if(navigator.clipboard)navigator.clipboard.writeText(t);
|
||
alert(Object.keys(P).length+" choix copiés !\n\n"+t);
|
||
}
|
||
render();
|
||
</script>
|
||
|
||
<script>
|
||
// WAVE 165 — avatar-picker: fix broken dicebear.com images
|
||
window.__avatar_fix_v165=true;
|
||
document.addEventListener("DOMContentLoaded",function(){
|
||
const placeholder='data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2NCIgaGVpZ2h0PSI2NCI+PHJlY3Qgd2lkdGg9IjY0IiBoZWlnaHQ9IjY0IiBmaWxsPSIjMWUyOTNiIi8+PHRleHQgeD0iMzIiIHk9IjM4IiBmb250LWZhbWlseT0ic2Fucy1zZXJpZiIgZm9udC1zaXplPSIyNCIgZmlsbD0iIzA2YjZkNCIgdGV4dC1hbmNob3I9Im1pZGRsZSI+QTwvdGV4dD48L3N2Zz4=';
|
||
Array.from(document.querySelectorAll("img")).forEach(img=>{
|
||
img.addEventListener("error",function(){this.onerror=null;this.src=placeholder;},false);
|
||
// Preemptively check
|
||
if(img.src.indexOf("dicebear.com")>-1){
|
||
const orig=img.src;
|
||
img.onerror=function(){this.src=placeholder;};
|
||
}
|
||
});
|
||
});
|
||
</script>
|
||
</body></html>
|