639 lines
28 KiB
HTML
639 lines
28 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="fr" data-theme="dark">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>IA Cascade Mechanics · WEVAL Technology Platform</title>
|
||
<meta name="description" content="Mécanique cascade IA : Claude instances + API + Web + Blade + Ollama + GPU free + Multi-server orchestration">
|
||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@500;700&family=Playfair+Display:wght@400;700&display=swap" rel="stylesheet">
|
||
<style>
|
||
:root{
|
||
--bg-0:#05060a;--bg-1:#0a0c14;--bg-2:#11141f;--bg-3:#181c2b;--bg-card:#0e111c;
|
||
--border:#1f2436;--border-hover:#3a425f;
|
||
--text-0:#f1f5f9;--text-1:#cbd5e1;--text-2:#94a3b8;--text-3:#64748b;
|
||
--accent:#6366f1;--accent-hover:#818cf8;
|
||
--success:#10b981;--warning:#f59e0b;--danger:#ef4444;--info:#06b6d4;
|
||
--gold:#f6d572;--mint:#5cdb95;--violet:#a78bfa;--coral:#ff6b6b;--cyan:#4ecdc4;
|
||
--shadow-lg:0 16px 48px rgba(99,102,241,.2);
|
||
--radius:14px;--radius-sm:10px;
|
||
--trans:.18s cubic-bezier(.4,0,.2,1);
|
||
--font-sans:"Inter",-apple-system,system-ui,sans-serif;
|
||
--font-mono:"JetBrains Mono",Monaco,monospace;
|
||
--font-serif:"Playfair Display",Georgia,serif;
|
||
}
|
||
*{box-sizing:border-box;margin:0;padding:0}
|
||
body{
|
||
background:var(--bg-0);color:var(--text-0);font-family:var(--font-sans);min-height:100vh;
|
||
background-image:
|
||
radial-gradient(ellipse at 15% 15%,rgba(99,102,241,.08) 0%,transparent 60%),
|
||
radial-gradient(ellipse at 85% 85%,rgba(6,182,212,.06) 0%,transparent 60%),
|
||
radial-gradient(ellipse at 50% 50%,rgba(167,139,250,.04) 0%,transparent 70%);
|
||
overflow-x:hidden;
|
||
}
|
||
|
||
/* ===== HEADER ===== */
|
||
header.topbar{
|
||
display:flex;align-items:center;justify-content:space-between;
|
||
padding:14px 28px;border-bottom:1px solid var(--border);
|
||
background:rgba(10,12,20,.85);backdrop-filter:blur(24px);
|
||
position:sticky;top:0;z-index:100;
|
||
}
|
||
.brand{display:flex;align-items:center;gap:14px}
|
||
.brand-logo{
|
||
width:38px;height:38px;border-radius:10px;
|
||
background:linear-gradient(135deg,var(--accent),var(--violet));
|
||
display:flex;align-items:center;justify-content:center;
|
||
font-weight:900;font-size:18px;color:#fff;
|
||
box-shadow:0 4px 20px rgba(99,102,241,.4);
|
||
}
|
||
.brand-text{display:flex;flex-direction:column}
|
||
.brand-title{font-size:14px;font-weight:700;letter-spacing:.08em;color:var(--text-0)}
|
||
.brand-sub{font-size:10px;letter-spacing:.2em;color:var(--text-3);text-transform:uppercase;font-weight:600}
|
||
.header-crumbs{display:flex;align-items:center;gap:8px;color:var(--text-2);font-size:12px}
|
||
.header-crumbs a{color:var(--accent-hover);text-decoration:none;font-weight:500}
|
||
.header-crumbs a:hover{color:var(--text-0)}
|
||
.health-bar{display:flex;gap:18px;align-items:center}
|
||
.h-item{display:flex;align-items:center;gap:7px;font-size:11px;color:var(--text-2);font-weight:500;font-family:var(--font-mono)}
|
||
.h-dot{width:7px;height:7px;border-radius:50%;display:inline-block}
|
||
.h-dot.ok{background:var(--mint);box-shadow:0 0 8px var(--mint)}
|
||
.h-val{color:var(--text-0);font-weight:700}
|
||
|
||
/* ===== PAGE ===== */
|
||
.page{max-width:1680px;margin:0 auto;padding:28px;display:flex;flex-direction:column;gap:24px}
|
||
.page-head{display:flex;align-items:center;justify-content:space-between}
|
||
.page-title-wrap{display:flex;align-items:center;gap:18px}
|
||
.page-icon{
|
||
width:58px;height:58px;border-radius:14px;
|
||
background:linear-gradient(135deg,rgba(99,102,241,.2),rgba(6,182,212,.15));
|
||
border:1px solid rgba(99,102,241,.3);
|
||
display:flex;align-items:center;justify-content:center;font-size:28px;
|
||
}
|
||
.page-title{font-size:28px;font-weight:800;letter-spacing:-.02em;color:var(--text-0)}
|
||
.page-title .mono{font-family:var(--font-mono);color:var(--accent-hover);font-weight:700}
|
||
.page-sub{font-size:13px;color:var(--text-2);margin-top:4px;font-weight:500;max-width:720px;line-height:1.5}
|
||
.page-actions{display:flex;gap:10px}
|
||
.btn{
|
||
padding:10px 16px;border-radius:10px;background:var(--bg-2);border:1px solid var(--border);
|
||
color:var(--text-1);font-size:12px;font-weight:600;letter-spacing:.04em;
|
||
cursor:pointer;transition:var(--trans);display:flex;align-items:center;gap:7px;
|
||
font-family:var(--font-sans);text-decoration:none;
|
||
}
|
||
.btn:hover{background:var(--bg-3);border-color:var(--border-hover);color:var(--text-0)}
|
||
.btn-primary{background:linear-gradient(135deg,var(--accent),var(--violet));border:none;color:#fff}
|
||
.btn-primary:hover{opacity:.9;transform:translateY(-1px)}
|
||
|
||
/* ===== HERO STATS ===== */
|
||
.hero-stats{
|
||
display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;
|
||
}
|
||
.hs-card{
|
||
background:linear-gradient(135deg,var(--bg-card),var(--bg-1));
|
||
border:1px solid var(--border);border-radius:var(--radius);padding:20px;
|
||
position:relative;overflow:hidden;transition:var(--trans);
|
||
}
|
||
.hs-card:hover{border-color:var(--border-hover);transform:translateY(-2px);box-shadow:var(--shadow-lg)}
|
||
.hs-card::before{
|
||
content:"";position:absolute;top:0;left:0;right:0;height:3px;
|
||
background:linear-gradient(90deg,var(--accent),var(--violet));opacity:.6;
|
||
}
|
||
.hs-card.mint::before{background:linear-gradient(90deg,var(--mint),var(--success))}
|
||
.hs-card.gold::before{background:linear-gradient(90deg,var(--gold),var(--warning))}
|
||
.hs-card.cyan::before{background:linear-gradient(90deg,var(--cyan),var(--info))}
|
||
.hs-card.coral::before{background:linear-gradient(90deg,var(--coral),var(--danger))}
|
||
.hs-card.violet::before{background:linear-gradient(90deg,var(--violet),var(--accent))}
|
||
.hs-label{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-3);font-weight:700;margin-bottom:8px;display:flex;align-items:center;gap:6px}
|
||
.hs-value{font-size:28px;font-weight:900;letter-spacing:-.03em;color:var(--text-0);line-height:1;font-family:var(--font-mono)}
|
||
.hs-sub{font-size:11px;color:var(--text-2);margin-top:6px;font-weight:500}
|
||
|
||
/* ===== LAYER CARDS ===== */
|
||
.section{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
|
||
.section-head{
|
||
padding:18px 24px;border-bottom:1px solid var(--border);
|
||
display:flex;align-items:center;justify-content:space-between;
|
||
background:linear-gradient(180deg,rgba(99,102,241,.04),transparent);
|
||
}
|
||
.section-title{font-size:14px;font-weight:700;letter-spacing:.02em;color:var(--text-0);display:flex;align-items:center;gap:10px}
|
||
.section-title::before{content:"";width:3px;height:18px;background:var(--accent);border-radius:2px}
|
||
.section-meta{font-size:11px;color:var(--text-3);font-family:var(--font-mono)}
|
||
.section-body{padding:20px 24px}
|
||
|
||
/* ===== CASCADE FLOW (stepper) ===== */
|
||
.cascade-flow{position:relative;padding:20px 0}
|
||
.flow-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
|
||
.flow-step{
|
||
background:var(--bg-2);border:1px solid var(--border);border-radius:var(--radius-sm);
|
||
padding:16px;position:relative;transition:var(--trans);cursor:default;
|
||
}
|
||
.flow-step:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:0 8px 32px rgba(99,102,241,.2)}
|
||
.fs-num{
|
||
position:absolute;top:-10px;left:14px;
|
||
width:28px;height:28px;border-radius:50%;
|
||
background:linear-gradient(135deg,var(--accent),var(--violet));
|
||
display:flex;align-items:center;justify-content:center;
|
||
font-size:12px;font-weight:800;color:#fff;font-family:var(--font-mono);
|
||
box-shadow:0 4px 14px rgba(99,102,241,.5);
|
||
}
|
||
.fs-name{font-size:13px;font-weight:700;color:var(--text-0);margin:6px 0 8px 24px}
|
||
.fs-actor{font-size:10px;color:var(--cyan);font-family:var(--font-mono);letter-spacing:.05em;margin-bottom:6px}
|
||
.fs-where{font-size:10px;color:var(--text-3);margin-bottom:8px;font-family:var(--font-mono)}
|
||
.fs-what{font-size:11px;color:var(--text-2);line-height:1.5}
|
||
|
||
/* ===== INSTANCE CARDS ===== */
|
||
.inst-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px}
|
||
.inst-card{
|
||
background:var(--bg-2);border:1px solid var(--border);border-radius:var(--radius-sm);
|
||
padding:16px 18px;transition:var(--trans);position:relative;overflow:hidden;
|
||
}
|
||
.inst-card:hover{border-color:var(--border-hover);transform:translateY(-1px);box-shadow:0 8px 24px rgba(0,0,0,.3)}
|
||
.inst-card::before{
|
||
content:"";position:absolute;top:0;left:0;bottom:0;width:3px;
|
||
background:var(--accent);
|
||
}
|
||
.inst-card.gold::before{background:var(--gold)}
|
||
.inst-card.mint::before{background:var(--mint)}
|
||
.inst-card.cyan::before{background:var(--cyan)}
|
||
.inst-card.coral::before{background:var(--coral)}
|
||
.inst-card.violet::before{background:var(--violet)}
|
||
.inst-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:8px}
|
||
.inst-name{font-size:14px;font-weight:700;color:var(--text-0);font-family:var(--font-serif)}
|
||
.inst-status{
|
||
font-size:9px;padding:3px 8px;border-radius:100px;font-weight:700;
|
||
text-transform:uppercase;letter-spacing:.08em;font-family:var(--font-mono);
|
||
background:rgba(16,185,129,.12);color:var(--mint);border:1px solid rgba(16,185,129,.3);
|
||
}
|
||
.inst-status.warn{background:rgba(246,213,114,.12);color:var(--gold);border-color:rgba(246,213,114,.3)}
|
||
.inst-status.off{background:rgba(100,116,139,.12);color:var(--text-3);border-color:rgba(100,116,139,.3)}
|
||
.inst-role{font-size:11px;color:var(--text-1);margin-bottom:8px;line-height:1.45;font-weight:500}
|
||
.inst-meta{display:flex;flex-direction:column;gap:3px}
|
||
.inst-row{font-size:10px;color:var(--text-3);font-family:var(--font-mono);display:flex;gap:6px}
|
||
.inst-row b{color:var(--text-2);font-weight:600;min-width:70px}
|
||
|
||
/* ===== PROVIDERS TABLE ===== */
|
||
.prov-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px}
|
||
.prov-chip{
|
||
background:var(--bg-2);border:1px solid var(--border);border-radius:var(--radius-sm);
|
||
padding:12px 14px;display:flex;flex-direction:column;gap:4px;
|
||
transition:var(--trans);
|
||
}
|
||
.prov-chip:hover{border-color:var(--border-hover)}
|
||
.prov-chip.live{border-color:rgba(16,185,129,.3)}
|
||
.prov-chip.live::after{
|
||
content:"";display:inline-block;width:6px;height:6px;border-radius:50%;
|
||
background:var(--mint);box-shadow:0 0 6px var(--mint);
|
||
position:absolute;top:12px;right:12px;
|
||
}
|
||
.prov-chip{position:relative}
|
||
.prov-name{font-size:12px;font-weight:700;color:var(--text-0)}
|
||
.prov-model{font-size:10px;color:var(--text-2);font-family:var(--font-mono)}
|
||
.prov-stats{font-size:9px;color:var(--text-3);font-family:var(--font-mono);letter-spacing:.04em;margin-top:2px}
|
||
|
||
/* ===== SERVERS ===== */
|
||
.srv-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px}
|
||
.srv-card{
|
||
background:var(--bg-2);border:1px solid var(--border);border-radius:var(--radius-sm);
|
||
padding:14px 16px;transition:var(--trans);
|
||
}
|
||
.srv-card:hover{border-color:var(--border-hover)}
|
||
.srv-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
|
||
.srv-name{font-size:13px;font-weight:700;color:var(--text-0)}
|
||
.srv-ip{font-size:10px;color:var(--cyan);font-family:var(--font-mono)}
|
||
.srv-role{font-size:11px;color:var(--text-2);margin-bottom:6px;line-height:1.4}
|
||
.srv-specs{font-size:10px;color:var(--text-3);font-family:var(--font-mono)}
|
||
|
||
/* ===== BLADE / MCP BIG CARD ===== */
|
||
.blade-card{
|
||
background:linear-gradient(135deg,rgba(246,213,114,.06),rgba(6,182,212,.04));
|
||
border:1px solid rgba(246,213,114,.3);border-radius:var(--radius);
|
||
padding:20px 24px;position:relative;overflow:hidden;
|
||
}
|
||
.blade-card::before{
|
||
content:"";position:absolute;top:0;left:0;right:0;height:3px;
|
||
background:linear-gradient(90deg,var(--gold),var(--cyan));
|
||
}
|
||
.blade-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:12px;flex-wrap:wrap;gap:10px}
|
||
.blade-title{font-size:18px;font-weight:800;color:var(--gold);font-family:var(--font-serif)}
|
||
.blade-meta{font-size:11px;color:var(--text-2);font-family:var(--font-mono)}
|
||
.blade-endpoint{
|
||
font-size:11px;color:var(--cyan);font-family:var(--font-mono);
|
||
background:var(--bg-2);padding:6px 10px;border-radius:6px;border:1px solid var(--border);
|
||
display:inline-block;margin:6px 0;
|
||
}
|
||
.blade-pattern{font-size:12px;color:var(--text-1);margin-top:10px;line-height:1.6}
|
||
.blade-pattern code{
|
||
background:var(--bg-2);padding:2px 7px;border-radius:4px;
|
||
font-family:var(--font-mono);font-size:11px;color:var(--accent-hover);
|
||
}
|
||
.blade-providers{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
|
||
.blade-prov-tag{
|
||
font-size:10px;padding:4px 10px;border-radius:100px;
|
||
background:rgba(246,213,114,.1);color:var(--gold);border:1px solid rgba(246,213,114,.25);
|
||
font-family:var(--font-mono);font-weight:600;
|
||
}
|
||
|
||
/* ===== ROUTING DISPATCHER ===== */
|
||
.disp-list{display:flex;flex-direction:column;gap:6px}
|
||
.disp-item{
|
||
background:var(--bg-2);border:1px solid var(--border);border-radius:var(--radius-sm);
|
||
padding:10px 14px;font-size:11px;color:var(--text-1);font-family:var(--font-mono);
|
||
display:flex;align-items:center;gap:10px;
|
||
}
|
||
.disp-num{
|
||
font-weight:800;color:var(--accent-hover);min-width:20px;
|
||
}
|
||
.disp-arrow{color:var(--text-3)}
|
||
|
||
/* ===== ANIM / UTIL ===== */
|
||
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
|
||
.pulse{animation:pulse 2s ease-in-out infinite}
|
||
@keyframes slideUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
|
||
.section{animation:slideUp .45s ease-out backwards}
|
||
.section:nth-child(1){animation-delay:.05s}
|
||
.section:nth-child(2){animation-delay:.1s}
|
||
.section:nth-child(3){animation-delay:.15s}
|
||
.section:nth-child(4){animation-delay:.2s}
|
||
.section:nth-child(5){animation-delay:.25s}
|
||
.section:nth-child(6){animation-delay:.3s}
|
||
|
||
@keyframes flow{
|
||
0%{transform:translateX(-100%);opacity:0}
|
||
10%{opacity:1}
|
||
90%{opacity:1}
|
||
100%{transform:translateX(100%);opacity:0}
|
||
}
|
||
|
||
footer{text-align:center;padding:24px;color:var(--text-3);font-size:11px;font-family:var(--font-mono);border-top:1px solid var(--border);margin-top:24px}
|
||
footer a{color:var(--accent-hover);text-decoration:none}
|
||
|
||
@media (max-width:720px){
|
||
.page{padding:14px}
|
||
.page-head{flex-direction:column;align-items:flex-start;gap:12px}
|
||
.health-bar{display:none}
|
||
.hero-stats{grid-template-columns:repeat(2,1fr);gap:10px}
|
||
.hs-card{padding:14px}
|
||
.hs-value{font-size:22px}
|
||
}
|
||
</style>
|
||
|
||
<!-- DOCTRINE-60-UX-ENRICH solutions-doctrine196 -->
|
||
<style id="wtp-doctrine60-ux-premium">
|
||
:root {
|
||
--wtp-bg-start:#0a0f1c; --wtp-bg-end:#0f172a;
|
||
--wtp-surface:rgba(15,23,42,.85); --wtp-surface-hover:rgba(30,41,59,.9);
|
||
--wtp-border:rgba(99,102,241,.25); --wtp-border-hover:rgba(99,102,241,.5);
|
||
--wtp-text:#e2e8f0; --wtp-text-dim:#94a3b8; --wtp-text-bright:#f1f5f9;
|
||
--wtp-primary:#6366f1; --wtp-primary-hover:#7c7feb;
|
||
--wtp-accent:#8b5cf6; --wtp-success:#10b981; --wtp-warning:#f59e0b; --wtp-danger:#ef4444;
|
||
--wtp-radius:12px; --wtp-shadow:0 4px 24px rgba(99,102,241,.15);
|
||
--wtp-transition:all .2s cubic-bezier(.4,0,.2,1);
|
||
--wtp-font:'Inter',-apple-system,sans-serif;
|
||
}
|
||
.wtp-card{background:var(--wtp-surface);border:1px solid var(--wtp-border);border-radius:var(--wtp-radius);padding:20px;transition:var(--wtp-transition)}
|
||
.wtp-card:hover{border-color:var(--wtp-border-hover);box-shadow:var(--wtp-shadow)}
|
||
.wtp-btn{background:linear-gradient(135deg,var(--wtp-primary),var(--wtp-accent));color:#fff;padding:10px 20px;border:none;border-radius:8px;cursor:pointer;font-weight:600;transition:var(--wtp-transition)}
|
||
.wtp-btn:hover{transform:translateY(-1px);box-shadow:var(--wtp-shadow)}
|
||
@media (max-width:768px){#weval-bot-widget{bottom:100px !important;right:16px !important;z-index:10001 !important}#weval-bot-btn{width:48px !important;height:48px !important}#weval-bot-btn svg{width:22px !important;height:22px !important}#footer_banner,.footer-banner,[class*="footer-bandeau"]{z-index:9990 !important}}
|
||
|
||
/* ===== WEVIA-OVERLAP-FIX-24AVR-PAGES - reserve top-right for nginx Logout ===== */
|
||
header.topbar{padding-right:130px !important}
|
||
#weval-global-logout{top:10px !important;right:12px !important;z-index:99995 !important;opacity:0.6 !important}
|
||
#weval-global-logout:hover{opacity:1 !important}
|
||
@media (max-width:900px){header.topbar .header-crumbs{display:none !important}}
|
||
/* ===== END WEVIA-OVERLAP-FIX-24AVR-PAGES ===== */
|
||
</style>
|
||
|
||
</head>
|
||
<body>
|
||
|
||
<header class="topbar">
|
||
<div class="brand">
|
||
<div class="brand-logo">W</div>
|
||
<div class="brand-text">
|
||
<span class="brand-title">WEVAL Technology Platform</span>
|
||
<span class="brand-sub">IA Cascade Mechanics</span>
|
||
</div>
|
||
</div>
|
||
<div class="header-crumbs">
|
||
<a href="/weval-technology-platform.html">WTP</a>
|
||
<span>›</span>
|
||
<a href="/wevia-master.html">WEVIA Master</a>
|
||
<span>›</span>
|
||
<span style="color:var(--text-0);font-weight:600">Cascade Mechanics</span>
|
||
</div>
|
||
<div class="health-bar">
|
||
<div class="h-item"><span class="h-dot ok pulse"></span><span>LIVE</span></div>
|
||
<div class="h-item">Agents · <span class="h-val" id="h-agents">—</span></div>
|
||
<div class="h-item">Intents · <span class="h-val" id="h-intents">—</span></div>
|
||
<div class="h-item">Cost · <span class="h-val" style="color:var(--mint)">0 €</span></div>
|
||
</div>
|
||
</header>
|
||
|
||
<div class="page">
|
||
|
||
<!-- PAGE HEAD -->
|
||
<div class="page-head">
|
||
<div class="page-title-wrap">
|
||
<div class="page-icon">⚡</div>
|
||
<div>
|
||
<h1 class="page-title">IA Cascade <span class="mono">Mechanics</span></h1>
|
||
<p class="page-sub">
|
||
Mécanique complète du routage multi-IA : <b>Claude instances</b> (Opus, Ambre, Yanis, Yacine, Claude Code) +
|
||
<b>18 providers API free</b> (Cerebras, Groq, Gemini, SambaNova…) +
|
||
<b>7 modèles Ollama local</b> + <b>5 GPU free</b> (HF, Kaggle, Colab) +
|
||
<b>8 Chrome CDP web</b> + <b>Blade MCP 17 tools</b> orchestrés par <b>WEVIA Master</b> sur <b>7 serveurs</b>.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div class="page-actions">
|
||
<a href="/wevia-master.html" class="btn">💬 WEVIA Master</a>
|
||
<a href="/wevia-cockpit.html" class="btn btn-primary">⚡ Cockpit</a>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- HERO STATS -->
|
||
<div class="hero-stats">
|
||
<div class="hs-card gold">
|
||
<div class="hs-label">🧠 Claude Instances</div>
|
||
<div class="hs-value" id="kpi-claude">—</div>
|
||
<div class="hs-sub">Opus · Ambre · Yanis · Yacine · CC</div>
|
||
</div>
|
||
<div class="hs-card mint">
|
||
<div class="hs-label">🔌 API Providers Free</div>
|
||
<div class="hs-value" id="kpi-api">—</div>
|
||
<div class="hs-sub">Cerebras · Groq · Gemini · …</div>
|
||
</div>
|
||
<div class="hs-card cyan">
|
||
<div class="hs-label">🦙 Ollama Local</div>
|
||
<div class="hs-value" id="kpi-ollama">—</div>
|
||
<div class="hs-sub">Qwen · Llama · weval-brain-v4</div>
|
||
</div>
|
||
<div class="hs-card violet">
|
||
<div class="hs-label">🚀 GPU Free</div>
|
||
<div class="hs-value" id="kpi-gpu">—</div>
|
||
<div class="hs-sub">HF Zero · Kaggle · Colab</div>
|
||
</div>
|
||
<div class="hs-card">
|
||
<div class="hs-label">🌐 Web CDP</div>
|
||
<div class="hs-value" id="kpi-cdp">—</div>
|
||
<div class="hs-sub">ChatGPT · Claude · Gemini web</div>
|
||
</div>
|
||
<div class="hs-card coral">
|
||
<div class="hs-label">🖥️ Serveurs</div>
|
||
<div class="hs-value" id="kpi-srv">—</div>
|
||
<div class="hs-sub">S204 · S95 · S151 · PMTAs</div>
|
||
</div>
|
||
<div class="hs-card gold">
|
||
<div class="hs-label">🤖 Total Agents</div>
|
||
<div class="hs-value" id="kpi-total">—</div>
|
||
<div class="hs-sub">nodes orchestrés</div>
|
||
</div>
|
||
<div class="hs-card mint">
|
||
<div class="hs-label">💰 Coût mensuel</div>
|
||
<div class="hs-value" style="font-size:24px">0 €</div>
|
||
<div class="hs-sub">cascade free + existants</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- CASCADE FLOW -->
|
||
<div class="section">
|
||
<div class="section-head">
|
||
<div class="section-title">🔄 Cascade Flow — les 12 étapes</div>
|
||
<div class="section-meta" id="flow-meta">—</div>
|
||
</div>
|
||
<div class="section-body">
|
||
<div class="flow-grid" id="flow-grid"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- CLAUDE INSTANCES -->
|
||
<div class="section">
|
||
<div class="section-head">
|
||
<div class="section-title">🧠 Layer 1 — Claude Instances humaines</div>
|
||
<div class="section-meta">7 identités actives · ZERO duplication intention</div>
|
||
</div>
|
||
<div class="section-body">
|
||
<div class="inst-grid" id="claude-grid"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- API PROVIDERS -->
|
||
<div class="section">
|
||
<div class="section-head">
|
||
<div class="section-title">🔌 Layer 2 — Sovereign API Cascade (0 €)</div>
|
||
<div class="section-meta">port 4000 · 18 providers fallback automatique</div>
|
||
</div>
|
||
<div class="section-body">
|
||
<div class="prov-grid" id="api-grid"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- OLLAMA -->
|
||
<div class="section">
|
||
<div class="section-head">
|
||
<div class="section-title">🦙 Layer 3 — Ollama Local (offline, HCP-sensitive)</div>
|
||
<div class="section-meta">port 11434 · 0 € · latency local</div>
|
||
</div>
|
||
<div class="section-body">
|
||
<div class="prov-grid" id="ollama-grid"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- GPU FREE -->
|
||
<div class="section">
|
||
<div class="section-head">
|
||
<div class="section-title">🚀 Layer 4 — GPU Free (Kaggle / HF / Colab)</div>
|
||
<div class="section-meta">Jobs longs, training, fine-tune — via job async</div>
|
||
</div>
|
||
<div class="section-body">
|
||
<div class="prov-grid" id="gpu-grid"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- WEB CDP + BLADE -->
|
||
<div class="section">
|
||
<div class="section-head">
|
||
<div class="section-title">🌐 Layer 5 + 6 — Web CDP & Blade MCP</div>
|
||
<div class="section-meta">Chrome logged-in cookies illimités · 0 € · ZERO API token</div>
|
||
</div>
|
||
<div class="section-body">
|
||
<!-- BLADE BIG CARD -->
|
||
<div class="blade-card" id="blade-card">
|
||
<div class="blade-head">
|
||
<div>
|
||
<div class="blade-title">⚔️ Blade IA · MCP Server</div>
|
||
<div class="blade-meta" id="blade-meta">—</div>
|
||
</div>
|
||
<div class="inst-status">LIVE</div>
|
||
</div>
|
||
<div class="blade-endpoint" id="blade-endpoint">—</div>
|
||
<div class="blade-pattern">
|
||
<b>Pattern :</b> WEVIA chat → intent <code>ask_blade_<provider></code> → MCP tool <code>blade_open_url</code> + <code>blade_send_keys</code> → Chrome Yacine déjà loggé → réponse streaming
|
||
</div>
|
||
<div class="blade-providers" id="blade-providers"></div>
|
||
</div>
|
||
|
||
<div style="margin-top:18px">
|
||
<div style="font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-3);font-weight:700;margin-bottom:10px">Chrome CDP Profiles (fallback local)</div>
|
||
<div class="prov-grid" id="cdp-grid"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ROUTING ENGINE -->
|
||
<div class="section">
|
||
<div class="section-head">
|
||
<div class="section-title">🧭 Layer 7 — Routing Engine (ordre dispatchers)</div>
|
||
<div class="section-meta" id="routing-meta">—</div>
|
||
</div>
|
||
<div class="section-body">
|
||
<div class="disp-list" id="disp-list"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- SERVERS -->
|
||
<div class="section">
|
||
<div class="section-head">
|
||
<div class="section-title">🖥️ Layer 8 — Infrastructure Multi-Server (Doctrine 314)</div>
|
||
<div class="section-meta">S204 router + S95 data + S151 tracking + 4 PMTAs</div>
|
||
</div>
|
||
<div class="section-body">
|
||
<div class="srv-grid" id="srv-grid"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<footer>
|
||
IA Cascade Mechanics · v1.0 · Doctrine 314 + 186 + 188 · <span id="gen-at">—</span>
|
||
· <a href="/api/ia-cascade-mechanics.json" target="_blank">raw JSON</a>
|
||
· <a href="/release-train-dashboard.html">🚂 Release Train</a>
|
||
· <a href="/wevia-master.html">💬 WEVIA chat</a>
|
||
</footer>
|
||
|
||
</div>
|
||
|
||
<script>
|
||
async function loadData(){
|
||
try{
|
||
const r = await fetch("/api/ia-cascade-mechanics.json?t="+Date.now(),{cache:"no-store"});
|
||
const d = await r.json();
|
||
render(d);
|
||
document.getElementById("gen-at").textContent = new Date(d.generated_at).toLocaleString("fr-FR");
|
||
}catch(e){console.error(e)}
|
||
}
|
||
|
||
function esc(s){return String(s||"").replace(/[<>&"]/g,c=>({'<':'<','>':'>','&':'&','"':'"'}[c]))}
|
||
|
||
function render(d){
|
||
const s=d.summary;
|
||
document.getElementById("kpi-claude").textContent=s.total_claude_instances;
|
||
document.getElementById("kpi-api").textContent=s.total_api_providers_free;
|
||
document.getElementById("kpi-ollama").textContent=s.total_ollama_models;
|
||
document.getElementById("kpi-gpu").textContent=s.total_gpu_free;
|
||
document.getElementById("kpi-cdp").textContent=s.total_cdp_profiles;
|
||
document.getElementById("kpi-srv").textContent=s.total_servers;
|
||
document.getElementById("kpi-total").textContent=s.grand_total_agents;
|
||
document.getElementById("h-agents").textContent=s.grand_total_agents;
|
||
document.getElementById("h-intents").textContent=s.total_intents;
|
||
|
||
// Cascade flow
|
||
document.getElementById("flow-meta").textContent=d.cascade_flow.length+" étapes";
|
||
const fg=document.getElementById("flow-grid");
|
||
fg.innerHTML=d.cascade_flow.map(f=>`
|
||
<div class="flow-step">
|
||
<div class="fs-num">${f.step}</div>
|
||
<div class="fs-name">${esc(f.name)}</div>
|
||
<div class="fs-actor">▸ ${esc(f.actor)}</div>
|
||
<div class="fs-where">@ ${esc(f.where)}</div>
|
||
<div class="fs-what">${esc(f.what)}</div>
|
||
</div>`).join("");
|
||
|
||
// Claude instances
|
||
const cg=document.getElementById("claude-grid");
|
||
cg.innerHTML=d.layers["1_claude_instances"].map(c=>{
|
||
const stCls=c.status.includes("active")?"":c.status.includes("retir")?"warn":"off";
|
||
return `<div class="inst-card ${c.color||''}">
|
||
<div class="inst-head">
|
||
<div class="inst-name">${esc(c.name)}</div>
|
||
<div class="inst-status ${stCls}">${esc(c.status)}</div>
|
||
</div>
|
||
<div class="inst-role">${esc(c.role)}</div>
|
||
<div class="inst-meta">
|
||
<div class="inst-row"><b>Type</b> ${esc(c.type)}</div>
|
||
<div class="inst-row"><b>Access</b> ${esc(c.access)}</div>
|
||
<div class="inst-row"><b>Capability</b> ${esc(c.capability)}</div>
|
||
<div class="inst-row"><b>Cost</b> ${esc(c.cost)}</div>
|
||
</div>
|
||
</div>`;
|
||
}).join("");
|
||
|
||
// API providers
|
||
const ag=document.getElementById("api-grid");
|
||
ag.innerHTML=d.layers["2b_api_providers"].map(p=>`
|
||
<div class="prov-chip live">
|
||
<div class="prov-name">${esc(p.name)}</div>
|
||
<div class="prov-model">${esc(p.model||'')}</div>
|
||
<div class="prov-stats">${p.latency_ms?'⚡ '+p.latency_ms+'ms · ':''}0€</div>
|
||
</div>`).join("");
|
||
|
||
// Ollama
|
||
const og=document.getElementById("ollama-grid");
|
||
og.innerHTML=d.layers["3_ollama_local"].map(p=>`
|
||
<div class="prov-chip live">
|
||
<div class="prov-name">${esc(p.name)}</div>
|
||
<div class="prov-model">ollama · ${esc(p.id)}</div>
|
||
<div class="prov-stats">⚡ ${p.latency_ms}ms · local</div>
|
||
</div>`).join("");
|
||
|
||
// GPU
|
||
const gg=document.getElementById("gpu-grid");
|
||
gg.innerHTML=d.layers["4_gpu_free"].map(p=>`
|
||
<div class="prov-chip ${p.status==='LIVE'?'live':''}">
|
||
<div class="prov-name">${esc(p.name)}</div>
|
||
<div class="prov-model">${esc(p.hardware||'')}</div>
|
||
<div class="prov-stats">${esc(p.quota||'')} · ${esc(p.use_case||'')}</div>
|
||
</div>`).join("");
|
||
|
||
// Blade + CDP
|
||
const blade=d.layers["6_blade_mcp"];
|
||
document.getElementById("blade-meta").textContent=`${blade.tools_exposed} tools exposed · token masked`;
|
||
document.getElementById("blade-endpoint").textContent=blade.endpoint;
|
||
document.getElementById("blade-providers").innerHTML=(blade.providers_supported||[]).map(p=>`<span class="blade-prov-tag">ask_blade_${p}</span>`).join("");
|
||
|
||
const cdpG=document.getElementById("cdp-grid");
|
||
cdpG.innerHTML=d.layers["5_web_cdp"].map(c=>`
|
||
<div class="prov-chip ${c.status==='RUNNING'?'live':''}">
|
||
<div class="prov-name">${esc(c.name)}</div>
|
||
<div class="prov-model">port ${c.port} · ${esc(c.status)}</div>
|
||
<div class="prov-stats">cookies Yacine · 0€</div>
|
||
</div>`).join("");
|
||
|
||
// Routing
|
||
const rt=d.layers["7_routing"];
|
||
document.getElementById("routing-meta").textContent=`${rt.total_intents} intents · ${rt.nl_priority_intents} NL-priority patterns`;
|
||
const dl=document.getElementById("disp-list");
|
||
dl.innerHTML=rt.dispatchers_ordered.map((x,i)=>`
|
||
<div class="disp-item">
|
||
<span class="disp-num">${i+1}.</span>
|
||
<span>${esc(x)}</span>
|
||
</div>`).join("");
|
||
|
||
// Servers
|
||
const sg=document.getElementById("srv-grid");
|
||
sg.innerHTML=d.layers["8_servers"].map(s=>`
|
||
<div class="srv-card">
|
||
<div class="srv-head">
|
||
<div class="srv-name">${esc(s.name)}</div>
|
||
<div class="srv-ip">${esc(s.ip||'')}</div>
|
||
</div>
|
||
<div class="srv-role">${esc(s.role)}</div>
|
||
<div class="srv-specs">
|
||
${s.cpu?'CPU '+esc(s.cpu)+' · ':''}${s.ram?'RAM '+esc(s.ram)+' · ':''}${esc(s.status)}
|
||
${s.data?' · '+esc(s.data):''}
|
||
</div>
|
||
</div>`).join("");
|
||
}
|
||
loadData();
|
||
setInterval(loadData,120000);
|
||
</script>
|
||
|
||
</body>
|
||
</html>
|