347 lines
13 KiB
HTML
347 lines
13 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="fr">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>WEVAL — Agents en Action</title>
|
|
<style>
|
|
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;700;900&family=JetBrains+Mono:wght@400;700&display=swap');
|
|
*{margin:0;padding:0;box-sizing:border-box}
|
|
body{background:#06080f;color:#c8d0e0;font-family:'Outfit',sans-serif;overflow-x:hidden;min-height:100vh}
|
|
canvas{display:block;width:100%;cursor:default}
|
|
#tooltip{position:fixed;pointer-events:none;background:#0c1025;border:1px solid #2a3560;border-radius:12px;padding:12px 16px;font-size:.82rem;color:#e0e8f0;display:none;z-index:99;max-width:260px;box-shadow:0 8px 32px rgba(0,0,0,.5)}
|
|
#tooltip .tn{font-weight:700;font-size:1rem;color:#fff;margin-bottom:2px}
|
|
#tooltip .tt{font-size:.7rem;text-transform:uppercase;letter-spacing:1px;color:#06b6d4;margin-bottom:6px}
|
|
#tooltip .td{color:#8899b0;font-size:.78rem;line-height:1.4;margin-bottom:4px}
|
|
#tooltip .tp{font-family:'JetBrains Mono',monospace;font-size:.68rem;color:#f59e0b}
|
|
header{position:fixed;top:0;left:0;right:0;padding:16px 24px;z-index:10;display:flex;justify-content:space-between;align-items:center;background:linear-gradient(180deg,#06080f 60%,transparent)}
|
|
h1{font-size:1.6rem;font-weight:900;letter-spacing:-1px}
|
|
h1 span{background:linear-gradient(135deg,#06b6d4,#a855f7);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
|
|
.legend{display:flex;gap:12px;flex-wrap:wrap}
|
|
.leg{display:flex;align-items:center;gap:4px;font-size:.7rem;color:#6a7590}
|
|
.leg i{width:10px;height:10px;border-radius:50%;display:inline-block}
|
|
#info{position:fixed;bottom:12px;left:50%;transform:translateX(-50%);font-size:.72rem;color:#4a5570;text-align:center;z-index:10}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<header>
|
|
<h1><span>WEVAL</span> Agents en Action</h1>
|
|
<div class="legend">
|
|
<div class="leg"><i style="background:#3b82f6"></i>Cognitive</div>
|
|
<div class="leg"><i style="background:#a855f7"></i>Autonomous</div>
|
|
<div class="leg"><i style="background:#22c55e"></i>Backend</div>
|
|
<div class="leg"><i style="background:#f59e0b"></i>Monitor</div>
|
|
<div class="leg"><i style="background:#ec4899"></i>Pharma</div>
|
|
<div class="leg"><i style="background:#06b6d4"></i>Research</div>
|
|
</div>
|
|
</header>
|
|
<canvas id="c"></canvas>
|
|
<div id="tooltip"></div>
|
|
<div id="info">Survolez un agent pour voir son rôle · Les agents se déplacent dans la value chain en temps réel</div>
|
|
|
|
<script>
|
|
const C = document.getElementById('c');
|
|
const ctx = C.getContext('2d');
|
|
const tip = document.getElementById('tooltip');
|
|
let W, H, mx=-1, my=-1, hovered=null;
|
|
|
|
function resize(){W=C.width=innerWidth;H=C.height=innerHeight;ZONES.forEach((z,i)=>{z.x=60+i*(W-120)/(ZONES.length-1);z.y=H*.52})}
|
|
addEventListener('resize',resize);
|
|
|
|
const ZONES = [
|
|
{id:'prospect',label:'🎯 Prospection',color:'#1e3a5f'},
|
|
{id:'consulting',label:'💼 Consulting',color:'#3a1e5f'},
|
|
{id:'dev',label:'⚡ Dev & Code',color:'#1e5f3a'},
|
|
{id:'infra',label:'🏗️ Infra',color:'#5f3a1e'},
|
|
{id:'security',label:'🛡️ Sécurité',color:'#5f1e1e'},
|
|
{id:'delivery',label:'🚀 Livraison',color:'#1e5f5f'},
|
|
{id:'pharma',label:'💊 Pharma',color:'#3a1e4f'},
|
|
{id:'monitor',label:'📡 Monitoring',color:'#4f4f1e'},
|
|
];
|
|
|
|
const AGENTS = [
|
|
// Prospection
|
|
{name:'Ethica Scraper',emoji:'💊',zone:0,type:'pharma',desc:'DabaDoc + LinkedIn HCP scraping',prod:'131K+ HCPs enrichis DZ/MA/TN'},
|
|
{name:'Analyst',emoji:'🔍',zone:0,type:'cognitive',desc:'Analyse besoins & requirements',prod:'Specs, analyses marché'},
|
|
{name:'Writer',emoji:'✍️',zone:0,type:'cognitive',desc:'Rédaction emails & proposals',prod:'Cold emails, content B2B'},
|
|
// Consulting
|
|
{name:'CEO',emoji:'👔',zone:1,type:'autonomous',desc:'Agent autonome — décisions stratégiques',prod:'Stratégie, hiring, budget'},
|
|
{name:'Architect',emoji:'🏗️',zone:1,type:'cognitive',desc:'Architecture technique & systèmes',prod:'Diagrammes, décisions archi'},
|
|
{name:'Planner',emoji:'📋',zone:1,type:'cognitive',desc:'Roadmaps, planning, milestones',prod:'Sprint plans, timelines'},
|
|
{name:'DeerFlow',emoji:'🦌',zone:1,type:'research',desc:'Recherche deep multi-sources',prod:'Synthèses, rapports R&D'},
|
|
{name:'Critic',emoji:'⚖️',zone:1,type:'cognitive',desc:'Validation plans & risques',prod:'Reviews, risques identifiés'},
|
|
// Dev
|
|
{name:'Executor',emoji:'⚡',zone:2,type:'cognitive',desc:'Exécution scripts & déploiements',prod:'Scripts, migrations, deploys'},
|
|
{name:'Debugger',emoji:'🐛',zone:2,type:'cognitive',desc:'Trace bugs, root cause analysis',prod:'Fixes, root cause reports'},
|
|
{name:'Code-Reviewer',emoji:'👁️',zone:2,type:'cognitive',desc:'Reviews code, severity ratings',prod:'PR reviews, qualité code'},
|
|
{name:'Designer',emoji:'🎨',zone:2,type:'cognitive',desc:'UI/UX, mockups, wireframes',prod:'Interfaces, design system'},
|
|
{name:'WEDROID',emoji:'🤖',zone:2,type:'backend',desc:'Backend auto-diagnostic v5.0',prod:'Fixes serveur, DB, API auto'},
|
|
{name:'Simplifier',emoji:'✂️',zone:2,type:'cognitive',desc:'Refactoring & clean code',prod:'Code optimisé, dette réduite'},
|
|
// Infra
|
|
{name:'Watchdog',emoji:'🐕',zone:3,type:'monitor',desc:'Service watchdog */3min',prod:'Auto-restart, alertes Telegram'},
|
|
{name:'Guardian',emoji:'🛡️',zone:3,type:'monitor',desc:'Protection fichiers chattr +i',prod:'8 fichiers protégés'},
|
|
{name:'Blade',emoji:'💻',zone:3,type:'monitor',desc:'Desktop agent Razer Blade',prod:'Tasks PowerShell, sync'},
|
|
{name:'Git-Master',emoji:'🌿',zone:3,type:'cognitive',desc:'Branches, merges, releases',prod:'Git flow, tags, deploys'},
|
|
// Security
|
|
{name:'Security',emoji:'🛡️',zone:4,type:'cognitive',desc:'Audit OWASP, vulnérabilités',prod:'Rapports audit, hardening'},
|
|
{name:'Verifier',emoji:'✅',zone:4,type:'cognitive',desc:'Conformité & validation',prod:'Checks ISO, RGPD, PCI'},
|
|
// Delivery
|
|
{name:'QA-Tester',emoji:'🧪',zone:5,type:'cognitive',desc:'Tests E2E, couverture qualité',prod:'148 NonReg, 41 Playwright'},
|
|
{name:'Test-Engineer',emoji:'🧰',zone:5,type:'cognitive',desc:'Suites de tests CI/CD',prod:'Pipelines, automatisation'},
|
|
{name:'Tracer',emoji:'🔦',zone:5,type:'cognitive',desc:'Trace logs, debug chain',prod:'Log analysis, stack traces'},
|
|
{name:'Scientist',emoji:'🔬',zone:5,type:'cognitive',desc:'Benchmarks & métriques',prod:'AI Benchmark 182 modèles'},
|
|
// Pharma
|
|
{name:'Explore',emoji:'🧭',zone:6,type:'cognitive',desc:'Exploration nouvelles sources',prod:'Nouvelles pistes, prototypes'},
|
|
{name:'Doc-Specialist',emoji:'📝',zone:6,type:'cognitive',desc:'Templates & documentation',prod:'Docs techniques, guides'},
|
|
{name:'MiroFish',emoji:'🐟',zone:6,type:'research',desc:'Contenu créatif multi-agent',prod:'Textes, idées, brainstorm'},
|
|
// Monitoring
|
|
{name:'Task-Mgr',emoji:'📋',zone:7,type:'cognitive',desc:'/sc:task_management',prod:'Suivi tâches, deadlines'},
|
|
{name:'Brainstorm',emoji:'💡',zone:7,type:'cognitive',desc:'/sc:brainstorming',prod:'Idées, exploration créative'},
|
|
{name:'Introspect',emoji:'🧠',zone:7,type:'cognitive',desc:'/sc:introspection',prod:'Méta-analyse, réflexion'},
|
|
{name:'Orchestrator',emoji:'🎯',zone:7,type:'cognitive',desc:'/sc:orchestration',prod:'Coordination multi-agent'},
|
|
];
|
|
|
|
const COLORS = {cognitive:'#3b82f6',autonomous:'#a855f7',backend:'#22c55e',monitor:'#f59e0b',pharma:'#ec4899',research:'#06b6d4'};
|
|
|
|
// Agent state
|
|
AGENTS.forEach((a,i)=>{
|
|
a.x=0;a.y=0;a.vx=0;a.vy=0;
|
|
a.bobPhase=Math.random()*Math.PI*2;
|
|
a.walkPhase=Math.random()*Math.PI*2;
|
|
a.targetX=0;a.targetY=0;
|
|
a.wanderTimer=Math.random()*200;
|
|
a.idx=i;
|
|
});
|
|
|
|
resize();
|
|
|
|
function drawStickman(x, y, color, emoji, phase, walkP, scale=1, glow=false){
|
|
const s = 14 * scale;
|
|
const bob = Math.sin(phase)*2;
|
|
const legSwing = Math.sin(walkP)*4;
|
|
|
|
ctx.save();
|
|
ctx.translate(x, y + bob);
|
|
|
|
if(glow){
|
|
ctx.shadowColor=color;
|
|
ctx.shadowBlur=16;
|
|
}
|
|
|
|
// Body
|
|
ctx.strokeStyle=color;
|
|
ctx.lineWidth=2*scale;
|
|
ctx.lineCap='round';
|
|
|
|
// Head circle
|
|
ctx.beginPath();
|
|
ctx.arc(0, -s*2.2, s*.55, 0, Math.PI*2);
|
|
ctx.stroke();
|
|
|
|
// Emoji face
|
|
ctx.font=`${Math.round(s*.7)}px sans-serif`;
|
|
ctx.textAlign='center';
|
|
ctx.textBaseline='middle';
|
|
ctx.fillText(emoji, 0, -s*2.2);
|
|
|
|
// Body line
|
|
ctx.beginPath();
|
|
ctx.moveTo(0, -s*1.6);
|
|
ctx.lineTo(0, -s*.3);
|
|
ctx.stroke();
|
|
|
|
// Arms
|
|
ctx.beginPath();
|
|
ctx.moveTo(-s*.7, -s*1.2 + Math.sin(walkP)*2);
|
|
ctx.lineTo(0, -s*1.3);
|
|
ctx.lineTo(s*.7, -s*1.2 - Math.sin(walkP)*2);
|
|
ctx.stroke();
|
|
|
|
// Legs
|
|
ctx.beginPath();
|
|
ctx.moveTo(-s*.5 + legSwing*.5, s*.5);
|
|
ctx.lineTo(0, -s*.3);
|
|
ctx.lineTo(s*.5 - legSwing*.5, s*.5);
|
|
ctx.stroke();
|
|
|
|
ctx.restore();
|
|
}
|
|
|
|
function drawZones(){
|
|
// Ground line
|
|
const gy = H*.52 + 30;
|
|
ctx.strokeStyle='#1a2040';
|
|
ctx.lineWidth=1;
|
|
ctx.setLineDash([4,8]);
|
|
ctx.beginPath();
|
|
ctx.moveTo(30,gy);
|
|
ctx.lineTo(W-30,gy);
|
|
ctx.stroke();
|
|
ctx.setLineDash([]);
|
|
|
|
// Flow arrows between zones
|
|
for(let i=0;i<ZONES.length-1;i++){
|
|
const z1=ZONES[i], z2=ZONES[i+1];
|
|
const mx=(z1.x+z2.x)/2;
|
|
ctx.strokeStyle='#1a2540';
|
|
ctx.lineWidth=1.5;
|
|
ctx.beginPath();
|
|
ctx.moveTo(z1.x+40,gy+4);
|
|
ctx.lineTo(z2.x-40,gy+4);
|
|
ctx.stroke();
|
|
// Arrow
|
|
ctx.fillStyle='#1a2540';
|
|
ctx.beginPath();
|
|
ctx.moveTo(z2.x-42,gy);
|
|
ctx.lineTo(z2.x-50,gy-4);
|
|
ctx.lineTo(z2.x-50,gy+8);
|
|
ctx.closePath();
|
|
ctx.fill();
|
|
}
|
|
|
|
// Zone labels + glow
|
|
ZONES.forEach(z=>{
|
|
// Glow circle
|
|
const g = ctx.createRadialGradient(z.x,z.y,0,z.x,z.y,80);
|
|
g.addColorStop(0, z.color+'30');
|
|
g.addColorStop(1, 'transparent');
|
|
ctx.fillStyle=g;
|
|
ctx.beginPath();
|
|
ctx.arc(z.x,z.y,80,0,Math.PI*2);
|
|
ctx.fill();
|
|
|
|
// Label
|
|
ctx.font='700 13px Outfit';
|
|
ctx.textAlign='center';
|
|
ctx.fillStyle='#6880a0';
|
|
ctx.fillText(z.label, z.x, gy+26);
|
|
});
|
|
}
|
|
|
|
function updateAgents(dt){
|
|
AGENTS.forEach(a=>{
|
|
const z = ZONES[a.zone];
|
|
a.bobPhase += dt*2.5;
|
|
a.walkPhase += dt*6;
|
|
a.wanderTimer -= dt*60;
|
|
|
|
if(a.wanderTimer <= 0){
|
|
a.wanderTimer = 100 + Math.random()*300;
|
|
// Wander near zone
|
|
const spread = 55;
|
|
const agentsInZone = AGENTS.filter(b=>b.zone===a.zone).length;
|
|
const myIdx = AGENTS.filter(b=>b.zone===a.zone).indexOf(a);
|
|
const angle = (myIdx / agentsInZone) * Math.PI * 1.5 - Math.PI*.75;
|
|
const dist = 25 + Math.random()*spread;
|
|
a.targetX = z.x + Math.cos(angle)*dist + (Math.random()-.5)*20;
|
|
a.targetY = z.y + Math.sin(angle)*dist*.6 + (Math.random()-.5)*15 - 15;
|
|
|
|
// Occasionally visit neighbor zone
|
|
if(Math.random()<0.06){
|
|
const nz = Math.max(0, Math.min(ZONES.length-1, a.zone + (Math.random()<.5?-1:1)));
|
|
const nzone = ZONES[nz];
|
|
a.targetX = nzone.x + (Math.random()-.5)*60;
|
|
a.targetY = nzone.y + (Math.random()-.5)*30 - 15;
|
|
}
|
|
}
|
|
|
|
// Smooth move
|
|
a.x += (a.targetX - a.x) * 0.015;
|
|
a.y += (a.targetY - a.y) * 0.015;
|
|
});
|
|
}
|
|
|
|
function checkHover(){
|
|
hovered = null;
|
|
AGENTS.forEach(a=>{
|
|
const dx=mx-a.x, dy=my-(a.y-20);
|
|
if(Math.abs(dx)<18 && Math.abs(dy)<28){
|
|
hovered = a;
|
|
}
|
|
});
|
|
if(hovered){
|
|
tip.style.display='block';
|
|
tip.style.left=Math.min(mx+16,W-280)+'px';
|
|
tip.style.top=(my-120)+'px';
|
|
tip.innerHTML=`<div class="tn">${hovered.emoji} ${hovered.name}</div><div class="tt">${hovered.type}</div><div class="td">${hovered.desc}</div><div class="tp">→ ${hovered.prod}</div>`;
|
|
} else {
|
|
tip.style.display='none';
|
|
}
|
|
}
|
|
|
|
// Title + stats at top
|
|
function drawHeader(){
|
|
// Stats bar
|
|
const active = AGENTS.length;
|
|
ctx.font='700 11px JetBrains Mono';
|
|
ctx.fillStyle='#3a4560';
|
|
ctx.textAlign='center';
|
|
ctx.fillText(`${active} agents actifs · 8 zones · ${ZONES.length} étapes value chain`, W/2, H-16);
|
|
}
|
|
|
|
// Particles
|
|
const particles=[];
|
|
for(let i=0;i<40;i++){
|
|
particles.push({x:Math.random()*2000,y:Math.random()*1200,s:Math.random()*1.5+.5,a:Math.random()*.3+.05,sp:Math.random()*.3+.1});
|
|
}
|
|
function drawParticles(dt){
|
|
particles.forEach(p=>{
|
|
p.y-=p.sp;
|
|
if(p.y<0){p.y=H;p.x=Math.random()*W;}
|
|
ctx.fillStyle=`rgba(6,182,212,${p.a})`;
|
|
ctx.beginPath();
|
|
ctx.arc(p.x,p.y,p.s,0,Math.PI*2);
|
|
ctx.fill();
|
|
});
|
|
}
|
|
|
|
let lastT=0;
|
|
function frame(t){
|
|
const dt = Math.min((t-lastT)/1000, .05);
|
|
lastT=t;
|
|
|
|
ctx.clearRect(0,0,W,H);
|
|
|
|
drawParticles(dt);
|
|
drawZones();
|
|
updateAgents(dt);
|
|
|
|
// Draw agents (non-hovered first, then hovered on top)
|
|
AGENTS.forEach(a=>{
|
|
if(a===hovered) return;
|
|
drawStickman(a.x, a.y, COLORS[a.type]||'#6080a0', a.emoji, a.bobPhase, a.walkPhase, 1, false);
|
|
});
|
|
if(hovered){
|
|
drawStickman(hovered.x, hovered.y, COLORS[hovered.type]||'#6080a0', hovered.emoji, hovered.bobPhase, hovered.walkPhase, 1.3, true);
|
|
}
|
|
|
|
// Name labels for larger screen
|
|
if(W > 900){
|
|
ctx.font='600 9px Outfit';
|
|
ctx.textAlign='center';
|
|
AGENTS.forEach(a=>{
|
|
ctx.fillStyle = a===hovered ? '#fff' : '#4a5a70';
|
|
ctx.fillText(a.name, a.x, a.y+22);
|
|
});
|
|
}
|
|
|
|
drawHeader();
|
|
checkHover();
|
|
|
|
requestAnimationFrame(frame);
|
|
}
|
|
|
|
C.addEventListener('mousemove', e=>{mx=e.clientX;my=e.clientY;});
|
|
C.addEventListener('mouseleave', ()=>{mx=-1;my=-1;});
|
|
|
|
// Init positions near zones
|
|
AGENTS.forEach(a=>{
|
|
const z=ZONES[a.zone];
|
|
if(z){a.x=z.x+(Math.random()-.5)*80;a.y=z.y+(Math.random()-.5)*40-15;a.targetX=a.x;a.targetY=a.y;}
|
|
});
|
|
|
|
requestAnimationFrame(frame);
|
|
</script>
|
|
</body>
|
|
</html>
|