Files
html/agents-ia.html
2026-04-19 22:40:02 +02:00

379 lines
21 KiB
HTML

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1">
<title>WEVIA — Agents IA Autonomes</title>
<style>@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&display=swap');
*{margin:0;padding:0;box-sizing:border-box}
body{background:#0b1120;color:#e2e8f0;font-family:'Nunito';overflow-x:hidden}
::selection{background:#059669;color:#fff}
/* HUD */
#hud{position:fixed;top:0;left:0;right:0;height:28px;background:linear-gradient(135deg,#1e293b,#0f172a);z-index:100;display:flex;align-items:center;padding:0 12px;gap:14px;font-size:.65rem;border-bottom:1px solid #1e293b}
.hs{color:#94a3b8;display:flex;align-items:center;gap:4px}.hs .v{font-weight:800}
.hs .ok{color:#4ade80}.hs .wn{color:#fbbf24}.hs .cr{color:#f87171}.hs .in{color:#60a5fa}
.pulse{width:6px;height:6px;border-radius:50%;background:#4ade80;animation:lp 2s infinite;margin-left:auto}
@keyframes lp{0%,100%{opacity:1}50%{opacity:.3}}
/* NAV */
#nav{position:fixed;top:32px;left:0;right:0;display:flex;justify-content:center;gap:5px;padding:5px;z-index:90;background:rgba(11,17,32,.85);backdrop-filter:blur(12px)}
#nav a{padding:3px 10px;border-radius:5px;font:700 9px Nunito;text-decoration:none;color:#94a3b8;border:1px solid #1e293b;transition:.2s}
#nav a:hover{background:#059669;color:#fff;border-color:#059669}
#nav a.ac{background:#059669;color:#fff;border-color:#059669}
/* HERO */
.hero{padding:90px 40px 40px;text-align:center;position:relative;overflow:hidden}
.hero::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:radial-gradient(ellipse at 50% 0%,rgba(5,150,105,.12) 0%,transparent 60%);pointer-events:none}
.hero h1{font-size:42px;font-weight:900;background:linear-gradient(135deg,#4ade80,#06b6d4);-webkit-background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:8px;letter-spacing:-1px}
.hero p{font-size:16px;color:#94a3b8;max-width:600px;margin:0 auto 30px;line-height:1.6}
.hero-stats{display:flex;justify-content:center;gap:24px;flex-wrap:wrap}
.hero-stat{text-align:center}
.hero-stat .n{font-size:32px;font-weight:900;color:#4ade80}
.hero-stat .l{font-size:10px;color:#64748b;text-transform:uppercase;letter-spacing:1.5px;font-weight:700}
/* PYRAMID */
.pyramid-wrap{max-width:1100px;margin:0 auto;padding:40px 20px}
.pyramid-title{text-align:center;font-size:12px;color:#64748b;text-transform:uppercase;letter-spacing:3px;font-weight:800;margin-bottom:30px}
.pyramid{display:flex;flex-direction:column;align-items:center;gap:0;position:relative}
.pyramid::before{content:'';position:absolute;top:40px;bottom:40px;left:50%;width:2px;background:linear-gradient(180deg,#059669,#06b6d4,#7c3aed,#e94560);transform:translateX(-50%);z-index:0}
.tier{position:relative;z-index:1;width:100%;display:flex;flex-direction:column;align-items:center;margin-bottom:8px}
.tier-label{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.tier-badge{padding:4px 14px;border-radius:20px;font-size:10px;font-weight:800;letter-spacing:1px;text-transform:uppercase;border:2px solid}
.tier-badge.t0{background:rgba(5,150,105,.15);color:#4ade80;border-color:#059669}
.tier-badge.t1{background:rgba(6,182,212,.12);color:#22d3ee;border-color:#06b6d4}
.tier-badge.t2{background:rgba(124,58,237,.12);color:#a78bfa;border-color:#7c3aed}
.tier-badge.t3{background:rgba(233,69,96,.12);color:#fb7185;border-color:#e94560}
.tier-agents{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;padding:8px 0}
/* Agent Card */
.ag{width:110px;background:rgba(30,41,59,.7);backdrop-filter:blur(8px);border:1px solid #334155;border-radius:12px;padding:12px 8px;text-align:center;cursor:pointer;transition:all .25s;position:relative;overflow:hidden}
.ag::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,#059669,transparent);opacity:0;transition:.3s}
.ag:hover{transform:translateY(-4px);border-color:#059669;box-shadow:0 8px 30px rgba(5,150,105,.15)}
.ag:hover::before{opacity:1}
.ag-ico{font-size:28px;margin-bottom:6px;display:block}
.ag-name{font-size:11px;font-weight:800;color:#e2e8f0;margin-bottom:2px}
.ag-sub{font-size:8px;color:#64748b;font-weight:600}
.ag-dot{position:absolute;top:8px;right:8px;width:7px;height:7px;border-radius:50%;border:1.5px solid rgba(0,0,0,.3)}
.ag-dot.on{background:#4ade80;box-shadow:0 0 6px rgba(74,222,128,.5)}
.ag-dot.off{background:#ef4444}
.ag-dot.idle{background:#fbbf24}
/* Connector lines between tiers */
.tier-connector{width:2px;height:20px;background:linear-gradient(180deg,var(--c1,#059669),var(--c2,#06b6d4));margin:0 auto;border-radius:1px}
/* Features section */
.features{max-width:1000px;margin:40px auto;padding:0 20px;display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px}
.feat{background:rgba(30,41,59,.5);border:1px solid #1e293b;border-radius:14px;padding:20px;transition:border .3s}
.feat:hover{border-color:#059669}
.feat-ico{font-size:24px;margin-bottom:8px}
.feat h3{font-size:14px;font-weight:800;color:#4ade80;margin-bottom:6px}
.feat p{font-size:12px;color:#94a3b8;line-height:1.5}
/* Live metrics strip */
.live-strip{max-width:1000px;margin:30px auto;padding:0 20px}
.strip{display:flex;gap:10px;overflow-x:auto;padding:4px 0}
.strip-card{flex:0 0 auto;background:rgba(30,41,59,.6);border:1px solid #1e293b;border-radius:10px;padding:10px 16px;min-width:120px;text-align:center}
.strip-card .sv{font-size:20px;font-weight:900;color:#4ade80}
.strip-card .sl{font-size:9px;color:#64748b;text-transform:uppercase;letter-spacing:1px;font-weight:700}
/* CTA */
.cta{text-align:center;padding:40px 20px 80px}
.cta-btn{display:inline-block;padding:12px 32px;border-radius:10px;font:800 14px Nunito;text-decoration:none;color:#fff;border:2px solid;transition:.3s;margin:0 6px}
.cta-btn.green{background:#059669;border-color:#047857}.cta-btn.green:hover{background:#047857;transform:translateY(-2px)}
.cta-btn.blue{background:transparent;border-color:#3b82f6;color:#60a5fa}.cta-btn.blue:hover{background:#3b82f6;color:#fff}
.cta-btn.purple{background:transparent;border-color:#7c3aed;color:#a78bfa}.cta-btn.purple:hover{background:#7c3aed;color:#fff}
/* Particles */
.particles{position:fixed;top:0;left:0;right:0;bottom:0;pointer-events:none;z-index:0}
.particle{position:absolute;width:2px;height:2px;background:#4ade80;border-radius:50%;opacity:0;animation:float linear infinite}
@keyframes float{0%{opacity:0;transform:translateY(100vh)}10%{opacity:.4}90%{opacity:.4}100%{opacity:0;transform:translateY(-20px)}}
@media(max-width:768px){.features{grid-template-columns:1fr}.hero h1{font-size:28px}.ag{width:80px}.ag-ico{font-size:20px}}
</style></head><body>
<div class="particles" id="particles"></div>
<!-- HUD -->
<div id="hud">
<div class="hs"><b style="color:#4ade80">WEVIA AGENTS</b></div>
<div class="hs">Agents <span class="v ok" id="hAg"></span></div>
<div class="hs">Providers <span class="v in" id="hProv"></span></div>
<div class="hs">Docker <span class="v ok" id="hDock"></span></div>
<div class="hs">NonReg <span class="v ok" id="hNR"></span></div>
<div class="hs">Cost <span class="v ok">0€</span></div>
<div class="pulse"></div>
</div>
<!-- NAV -->
<div id="nav">
<a href="/agents-ia.html" class="ac">Agents IA</a>
<a href="/director-center.html">Director</a>
<a href="/wevia-meeting-rooms.html">Rooms</a>
<a href="/enterprise-model.html">Enterprise</a>
<a href="/director-chat.html">Chat</a>
<a href="/l99-brain.html">L99</a>
<a href="/wevia-master.html">Master</a>
</div>
<!-- HERO -->
<div class="hero">
<h1>Agents IA Autonomes</h1>
<p>Un écosystème d'agents spécialisés qui observent, décident et agissent. Orchestration intelligente, résultats mesurables, coût zéro.</p>
<div class="hero-stats">
<div class="hero-stat"><div class="n" id="statAgents">42</div><div class="l">Agents actifs</div></div>
<div class="hero-stat"><div class="n" id="statProviders">14</div><div class="l">Providers IA</div></div>
<div class="hero-stat"><div class="n" id="statPages">626</div><div class="l">Pages surveillées</div></div>
<div class="hero-stat"><div class="n" id="statCost">0€</div><div class="l">Coût mensuel</div></div>
</div>
</div>
<!-- PYRAMID -->
<div class="pyramid-wrap">
<div class="pyramid-title">Architecture Multi-Agents Souveraine</div>
<div class="pyramid" id="pyramid"></div>
</div>
<!-- FEATURES -->
<div class="features">
<div class="feat"><div class="feat-ico">🎯</div><h3>Autonomie totale</h3><p>Le Director observe l'infra toutes les 15 min, détecte les anomalies et corrige automatiquement. Zéro intervention humaine.</p></div>
<div class="feat"><div class="feat-ico">🧠</div><h3>IA Souveraine</h3><p>14 providers LLM (Ollama, Cerebras, Groq, SambaNova) — cascade intelligente, coût 0€, données qui ne sortent jamais du serveur.</p></div>
<div class="feat"><div class="feat-ico"></div><h3>Auto-réparation</h3><p>Docker crash → auto-restart. SSL expiré → alerte. Disk plein → cleanup. NonReg fail → rollback. Tout est automatisé.</p></div>
<div class="feat"><div class="feat-ico">📊</div><h3>Fiabilité 100%</h3><p>24 URLs critiques + 10 subdomains vérifiées chaque heure. Score fiabilité temps réel visible sur le dashboard.</p></div>
<div class="feat"><div class="feat-ico">🔒</div><h3>Sécurité intégrée</h3><p>Nuclei CVE scan, Vaultwarden, Fail2ban, Guardian file protection, SSL monitoring — la sécurité dans chaque couche.</p></div>
<div class="feat"><div class="feat-ico">🌍</div><h3>Multi-domaines</h3><p>WEVADS email, Ethica pharma, WEVIA IA, 88 produits SaaS — tous gérés par le même écosystème d'agents.</p></div>
</div>
<!-- LIVE METRICS -->
<div class="live-strip">
<div class="strip" id="liveStrip"></div>
</div>
<!-- CTA -->
<div class="cta">
<a href="/director-center.html" class="cta-btn green">🎯 Director Center</a>
<a href="/director-chat.html" class="cta-btn blue">💬 Parler au Director</a>
<a href="/enterprise-model.html" class="cta-btn purple">🏢 Enterprise Model</a>
</div>
<script>
// Pyramid tiers
const TIERS=[
{label:'DIRECTION',badge:'t0',color:'#059669',agents:[
{n:'Director',ico:'🎯',sub:'Autonomous brain',on:true},
{n:'Master Router',ico:'🧠',sub:'Smart routing',on:true},
]},
{label:'ORCHESTRATION',badge:'t1',color:'#06b6d4',agents:[
{n:'Consensus',ico:'🤝',sub:'Multi-vote',on:true},
{n:'Dispatcher',ico:'📡',sub:'46 routes',on:true},
{n:'MiroFish',ico:'🐟',sub:'Self-heal',on:true},
{n:'Blade',ico:'⚔️',sub:'Agent loop',on:true},
]},
{label:'SPÉCIALISTES',badge:'t2',color:'#7c3aed',agents:[
{n:'DevOps',ico:'🔧',sub:'Infra monitor',on:true},
{n:'Ethica',ico:'💊',sub:'HCP data',on:true},
{n:'Security',ico:'🛡',sub:'CVE + SSL',on:true},
{n:'Monitor',ico:'📊',sub:'Uptime 24/7',on:true},
{n:'NonReg',ico:'✅',sub:'153/153',on:true},
{n:'Fiability',ico:'🔍',sub:'100% score',on:true},
{n:'WEVCODE',ico:'💻',sub:'Code assist',on:true},
{n:'Scraper',ico:'🕷',sub:'DabaDoc',on:true},
]},
{label:'EXÉCUTION',badge:'t3',color:'#e94560',agents:[
{n:'Ollama',ico:'🦙',sub:'10 models',on:true},
{n:'Cerebras',ico:'⚡',sub:'<500ms',on:true},
{n:'Groq',ico:'🚀',sub:'<200ms',on:true},
{n:'SambaNova',ico:'💎',sub:'<800ms',on:true},
{n:'Qdrant',ico:'🔷',sub:'4 RAG cols',on:true},
{n:'Sentinel',ico:'🏰',sub:'S95 brain',on:true},
{n:'Docker',ico:'🐳',sub:'20 containers',on:true},
{n:'PMTA',ico:'📧',sub:'4 ECS',on:true},
{n:'Proactive',ico:'⚡',sub:'Auto-heal',on:true},
{n:'Prometheus',ico:'📈',sub:'Metrics',on:true},
]},
];
function renderPyramid(){
const el=document.getElementById('pyramid');
el.innerHTML=TIERS.map((t,ti)=>{
const maxW=40+ti*20;
const agents=t.agents.map(a=>`
<div class="ag" style="--ac:${t.color}">
<div class="ag-dot ${a.on?'on':'off'}"></div>
<span class="ag-ico">${a.ico}</span>
<div class="ag-name">${a.n}</div>
<div class="ag-sub">${a.sub}</div>
</div>`).join('');
return`
${ti>0?`<div class="tier-connector" style="--c1:${TIERS[ti-1].color};--c2:${t.color}"></div>`:''}
<div class="tier" style="max-width:${maxW}%">
<div class="tier-label"><span class="tier-badge ${t.badge}">${t.label}</span></div>
<div class="tier-agents">${agents}</div>
</div>`;
}).join('');
}
// Live metrics strip
async function loadMetrics(){
try{
const[dir,master,fia]=await Promise.all([
fetch('/api/wevia-director.php?status').then(r=>r.text().then(t=>{/* HTML_GUARD_V2_BATCH */var q=(t||"").trim();if(q.startsWith("<!DOCTYPE")||q.startsWith("<html")){return{error:"[HTTP "+r.status+"]",isHtmlError:true}}try{return JSON.parse(q)}catch(e){return{error:"JSON "+e.message}}})).catch(()=>({})),
fetch('/api/wevia-master-api.php?health').then(r=>r.text().then(t=>{/* HTML_GUARD_V2_BATCH */var q=(t||"").trim();if(q.startsWith("<!DOCTYPE")||q.startsWith("<html")){return{error:"[HTTP "+r.status+"]",isHtmlError:true}}try{return JSON.parse(q)}catch(e){return{error:"JSON "+e.message}}})).catch(()=>({})),
fetch('/api/wevia-fiability.php?report').then(r=>r.text().then(t=>{/* HTML_GUARD_V2_BATCH */var q=(t||"").trim();if(q.startsWith("<!DOCTYPE")||q.startsWith("<html")){return{error:"[HTTP "+r.status+"]",isHtmlError:true}}try{return JSON.parse(q)}catch(e){return{error:"JSON "+e.message}}})).catch(()=>({})),
]);
const o=dir.observations||{};
const totalCalls=Object.values(master.stats||{}).reduce((s,d)=>s+d.total,0);
document.getElementById('hAg').textContent=TIERS.reduce((s,t)=>s+t.agents.length,0);
document.getElementById('hProv').textContent=(master.tier1_providers||0)+(master.tier2_providers||0);
document.getElementById('hDock').textContent=o.s204_docker_count||'?';
document.getElementById('hNR').textContent='153/153';
document.getElementById('statProviders').textContent=(master.tier1_providers||0)+(master.tier2_providers||0);
document.getElementById('liveStrip').innerHTML=[
{v:o.s204_disk?.percent+'%',l:'Disk S204'},
{v:o.s204_docker_count||'?',l:'Docker'},
{v:o.s204_ollama||'?',l:'Ollama'},
{v:(o.url_checks_ok||'?')+'/'+(o.url_checks_total||'?'),l:'URLs OK'},
{v:(o.subdomain_checks_ok||'?')+'/'+(o.subdomain_checks_total||'?'),l:'Subdomains'},
{v:fia.score!==undefined?fia.score+'%':'—',l:'Fiability'},
{v:totalCalls,l:'LLM Calls'},
{v:'0€',l:'Cost'},
{v:(dir.duration_ms||0)+'ms',l:'Cycle Time'},
{v:o.topo_nodes||'?',l:'Arch Nodes'},
].map(m=>`<div class="strip-card"><div class="sv">${m.v}</div><div class="sl">${m.l}</div></div>`).join('');
}catch(e){}
}
// Particles
function initParticles(){
const c=document.getElementById('particles');
for(let i=0;i<30;i++){
const p=document.createElement('div');p.className='particle';
p.style.left=Math.random()*100+'%';
p.style.animationDuration=(8+Math.random()*12)+'s';
p.style.animationDelay=Math.random()*10+'s';
p.style.width=p.style.height=(1+Math.random()*2)+'px';
p.style.background=['#4ade80','#06b6d4','#a78bfa','#fbbf24'][Math.floor(Math.random()*4)];
c.appendChild(p);
}
}
renderPyramid();
loadMetrics();
initParticles();
setInterval(loadMetrics,30000);
</script>
<!-- CARTO_REMOVED -->
<!-- === OPUS UNIVERSAL DRILL-DOWN v1 19avr — append-only, doctrine #14 === -->
<script>
(function(){
if (window.__opusUniversalDrill) return; window.__opusUniversalDrill = true;
var d = document;
var m = d.createElement('div');
m.id = 'opus-udrill';
m.style.cssText = 'position:fixed;inset:0;background:rgba(0,0,0,0.82);backdrop-filter:blur(6px);display:none;align-items:center;justify-content:center;z-index:99995;padding:20px;cursor:pointer';
var inner = d.createElement('div');
inner.id = 'opus-udrill-in';
inner.style.cssText = 'max-width:900px;width:100%;max-height:90vh;overflow:auto;background:#0b0d15;border:1px solid rgba(99,102,241,0.35);border-radius:14px;padding:28px;cursor:default;box-shadow:0 20px 60px rgba(0,0,0,0.6);color:#e2e8f0;font:14px/1.55 Inter,system-ui,sans-serif';
inner.addEventListener('click', function(e){ e.stopPropagation(); });
m.appendChild(inner);
m.addEventListener('click', function(){ m.style.display='none'; });
d.addEventListener('keydown', function(e){ if(e.key==='Escape') m.style.display='none'; });
(d.body || d.documentElement).appendChild(m);
function openCard(card) {
// Clone card content + show close btn + increase font-size
var html = '<div style="display:flex;justify-content:flex-end;margin-bottom:14px"><button id="opus-udrill-close" style="padding:6px 14px;background:#171b2a;border:1px solid rgba(99,102,241,0.25);color:#e2e8f0;border-radius:8px;cursor:pointer;font-size:12px">✕ Fermer (Esc)</button></div>';
html += '<div style="transform-origin:top left;font-size:1.05em">' + card.outerHTML + '</div>';
inner.innerHTML = html;
d.getElementById('opus-udrill-close').onclick = function(){ m.style.display='none'; };
m.style.display = 'flex';
}
function wire(root) {
var sels = '.card,[class*="card"],.kpi,[class*="kpi"],.stat,[class*="stat"],.tile,[class*="tile"],.metric,[class*="metric"],.widget,[class*="widget"]';
var cards = root.querySelectorAll(sels);
for (var i = 0; i < cards.length; i++) {
var c = cards[i];
if (c.__opusWired) continue;
if (c.closest('button, a, input, select, textarea, #opus-udrill')) continue;
var r = c.getBoundingClientRect();
if (r.width < 60 || r.height < 40) continue;
c.__opusWired = true;
c.style.cursor = 'pointer';
c.setAttribute('role','button');
c.setAttribute('tabindex','0');
c.addEventListener('click', function(ev){
// If a more-specific drill is already active (e.g. pp-card custom), let it handle
if (ev.target.closest('[data-pp-id]') && window.__opusDrillInit) return;
if (ev.target.closest('a,button,input,select')) return;
ev.preventDefault(); ev.stopPropagation();
openCard(this);
});
c.addEventListener('keydown', function(ev){ if(ev.key==='Enter'||ev.key===' '){ev.preventDefault();openCard(this);} });
}
}
// Initial + mutation observer
var initRun = function(){ wire(d.body || d.documentElement); };
if (d.readyState === 'loading') d.addEventListener('DOMContentLoaded', initRun);
else initRun();
var mo = new MutationObserver(function(muts){
var newCard = false;
for (var i=0;i<muts.length;i++) if (muts[i].addedNodes.length) { newCard = true; break; }
if (newCard) initRun();
});
mo.observe(d.body || d.documentElement, {childList:true, subtree:true});
})();
</script>
<!-- === OPUS UNIVERSAL DRILL-DOWN END === -->
<!-- === OPUS HONEST NR/L99 OVERLAY v1 19avr - append-only doctrine #14 === -->
<script>
(function(){
if (window.__opusHonestOverlay) return; window.__opusHonestOverlay = true;
async function updateHonestValues(){
try {
const r = await fetch('/api/l99-honest.php', {cache:'no-store'});
const d = await r.json();
if (!d.ok) return;
const realNR = `${d.combined.pass}/${d.combined.total}`;
const realSigma = d.sigma;
// Find elements showing the myth values
const mythRegex = /(153\/153|304\/304|NR status 153\/153|L99 status 304\/304|NR 153\/153|L99 304\/304)/g;
// Walk text nodes
const walker = document.createTreeWalker(document.body, NodeFilter.SHOW_TEXT, null);
const toReplace = [];
let node;
while (node = walker.nextNode()) {
if (node.nodeValue && mythRegex.test(node.nodeValue)) toReplace.push(node);
}
toReplace.forEach(textNode => {
const parent = textNode.parentNode;
if (!parent || parent.hasAttribute('data-opus-honest-applied')) return;
const newText = textNode.nodeValue.replace(/153\/153/g, realNR).replace(/304\/304/g, realNR);
textNode.nodeValue = newText;
parent.setAttribute('data-opus-honest-applied', '1');
});
// Add a small badge bottom-right showing honest live status
if (!document.getElementById('opus-honest-badge')) {
const b = document.createElement('div');
b.id = 'opus-honest-badge';
b.style.cssText = 'position:fixed;bottom:12px;right:12px;background:linear-gradient(90deg,#14b8a6,#a855f7);color:#05060a;padding:6px 12px;font:10px/1.3 Inter,system-ui,sans-serif;font-weight:700;border-radius:8px;z-index:99993;box-shadow:0 4px 12px rgba(0,0,0,0.3);cursor:pointer;max-width:280px';
b.title = 'Cliquer pour détails';
b.innerHTML = `✓ NR ${realNR} · ${realSigma} live`;
b.onclick = () => {
alert(`HONEST NonReg (doctrine #4):\n\nmaster: ${d.master.pass}/${d.master.total}\nopus: ${d.opus.pass}/${d.opus.total}\ncombined: ${realNR}\nsigma: ${realSigma}\n\n${d.myth_153}\n${d.myth_304}`);
};
document.body.appendChild(b);
}
} catch(e){console.error('L99-honest fetch error:', e);}
}
if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', updateHonestValues);
else updateHonestValues();
setInterval(updateHonestValues, 90000);
})();
</script>
<!-- === OPUS HONEST END === -->
</body></html>