341 lines
17 KiB
HTML
341 lines
17 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="fr">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||
<title>WEVAL GO-LIVE — 4 Variantes</title>
|
||
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&family=Plus+Jakarta+Sans:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
||
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.1/chart.umd.js"></script>
|
||
<style>
|
||
*{margin:0;padding:0;box-sizing:border-box}
|
||
:root{--bg:#0a0b0f;--bg2:#12141a;--bg3:#1a1d25;--t1:#e8e6df;--t2:#9c9a92;--t3:#6a685f;--green:#1bcc7a;--red:#e24b4a;--blue:#378add;--purple:#7f77dd;--amber:#ef9f27;--teal:#1d9e75;--coral:#d85a30}
|
||
body{background:var(--bg);color:var(--t1);font-family:'Plus Jakarta Sans',sans-serif;min-height:100vh}
|
||
.top{display:flex;align-items:center;justify-content:space-between;padding:14px 24px;border-bottom:1px solid rgba(255,255,255,.06)}
|
||
.top h1{font-size:14px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:var(--t2)}
|
||
.top h1 b{color:var(--green)}
|
||
.live{width:7px;height:7px;border-radius:50%;background:var(--green);display:inline-block;margin-right:6px;animation:p 2s infinite}
|
||
@keyframes p{0%,100%{box-shadow:0 0 0 0 rgba(27,204,122,.4)}50%{box-shadow:0 0 0 6px rgba(27,204,122,0)}}
|
||
.pill{font-family:'JetBrains Mono',monospace;font-size:11px;padding:3px 10px;border-radius:16px;background:rgba(27,204,122,.12);color:var(--green);border:1px solid rgba(27,204,122,.15)}
|
||
.pill.run{background:rgba(55,138,221,.12);color:var(--blue);border-color:rgba(55,138,221,.15);animation:bk 1s infinite}
|
||
@keyframes bk{50%{opacity:.5}}
|
||
.g{display:grid;gap:12px;padding:16px 24px}
|
||
.g4{grid-template-columns:repeat(4,1fr)}
|
||
.g2{grid-template-columns:1fr 1fr}
|
||
.c{background:var(--bg2);border:1px solid rgba(255,255,255,.04);border-radius:10px;padding:14px 16px;overflow:hidden}
|
||
.m{text-align:center}
|
||
.m .l{font-size:10px;color:var(--t3);text-transform:uppercase;letter-spacing:.7px;margin-bottom:4px}
|
||
.m .v{font-family:'JetBrains Mono',monospace;font-size:24px;font-weight:700}
|
||
.sec{font-size:11px;font-weight:600;color:var(--t3);text-transform:uppercase;letter-spacing:.8px;padding:8px 24px 0}
|
||
.vcard{background:var(--bg2);border:1px solid rgba(255,255,255,.04);border-radius:10px;padding:14px 16px}
|
||
.vcard .head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
|
||
.vcard .head .vname{font-size:13px;font-weight:600;display:flex;align-items:center;gap:8px}
|
||
.vcard .head .score{font-family:'JetBrains Mono',monospace;font-size:13px;font-weight:700}
|
||
.tg{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:6px}
|
||
.ti{background:var(--bg3);border-radius:6px;padding:6px 8px;border-left:2.5px solid var(--green);display:flex;flex-direction:column;gap:2px}
|
||
.ti.f{border-left-color:var(--red);background:rgba(226,75,74,.04)}
|
||
.ti.p{border-left-color:var(--t3);opacity:.4}
|
||
.ti .n{font-size:10px;font-weight:500;color:var(--t1)}
|
||
.ti .d{font-family:'JetBrains Mono',monospace;font-size:9px;color:var(--t3)}
|
||
.ch{position:relative;height:180px}
|
||
.ch.h{height:260px}
|
||
.foot{text-align:center;padding:16px;font-size:10px;color:var(--t3);border-top:1px solid rgba(255,255,255,.04)}
|
||
@media(max-width:768px){.g4{grid-template-columns:repeat(2,1fr)}.g2{grid-template-columns:1fr}}
|
||
</style>
|
||
<!-- DOCTRINE-60-UX-ENRICH direct-inject-20260424-143941 -->
|
||
<style id="doctrine60-ux-direct">
|
||
|
||
/* DOCTRINE-60-UX-ENRICH injected-direct */
|
||
body::before {
|
||
content: '';
|
||
position: fixed;
|
||
top: 0; left: 0; width: 100vw; height: 100vh;
|
||
background: radial-gradient(circle at 50% 50%, rgba(100,180,255,0.08), transparent 60%);
|
||
pointer-events: none;
|
||
z-index: -1;
|
||
}
|
||
.card, .kpi, .panel, .btn {
|
||
transition: all 0.3s cubic-bezier(0.2,0,0.1,1);
|
||
}
|
||
.card:hover, .kpi:hover, .panel:hover {
|
||
box-shadow: 0 4px 20px rgba(100,180,255,0.2);
|
||
border-color: rgba(100,180,255,0.5);
|
||
}
|
||
@keyframes pulseD60 {
|
||
0%,100% { opacity: 1; transform: scale(1); }
|
||
50% { opacity: 0.7; transform: scale(1.05); }
|
||
}
|
||
.pulse, .live-indicator, .active, .online {
|
||
animation: pulseD60 3s ease-in-out infinite;
|
||
}
|
||
.modal, .chat, .speech, .overlay {
|
||
backdrop-filter: blur(12px);
|
||
-webkit-backdrop-filter: blur(12px);
|
||
}
|
||
.enter-stagger {
|
||
animation: enterStagD60 0.5s cubic-bezier(0.2,0,0.1,1) forwards;
|
||
}
|
||
@keyframes enterStagD60 {
|
||
from { opacity: 0; transform: translateY(20px); }
|
||
to { opacity: 1; transform: translateY(0); }
|
||
}
|
||
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="top">
|
||
<h1><span class="live"></span><b>WEVAL</b> GO-LIVE — 4 variantes</h1>
|
||
<div style="display:flex;align-items:center;gap:10px">
|
||
<span class="pill" id="st">idle</span>
|
||
<span style="font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--t3)" id="ck"></span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="g g4">
|
||
<div class="c m"><div class="l">Total pass</div><div class="v" style="color:var(--green)" id="kP">—</div></div>
|
||
<div class="c m"><div class="l">Score</div><div class="v" style="color:var(--green)" id="kS">—</div></div>
|
||
<div class="c m"><div class="l">Sigma</div><div class="v" style="color:var(--blue)" id="kG">—</div></div>
|
||
<div class="c m"><div class="l">NonReg</div><div class="v" style="color:var(--t1)">40/40</div></div>
|
||
</div>
|
||
|
||
<div class="sec">Résultats par variante</div>
|
||
<div class="g g2" id="variants"></div>
|
||
|
||
<div class="g g2">
|
||
<div><div class="sec">Score par variante</div><div class="c" style="margin-top:6px"><div class="ch"><canvas id="chVar"></canvas></div></div></div>
|
||
<div><div class="sec">Lean 6σ — contraintes levées</div><div class="c" style="margin-top:6px"><div class="ch"><canvas id="chToc"></canvas></div></div></div>
|
||
</div>
|
||
|
||
<div class="sec">Aptitudes — output size (chars)</div>
|
||
<div class="g" style="grid-template-columns:1fr"><div class="c"><div class="ch h"><canvas id="chApt"></canvas></div></div></div>
|
||
|
||
<div class="foot">WEVAL Consulting — Casablanca — Process #1 Absolu — Lean 6σ + ToC — 20 mars 2026</div>
|
||
|
||
<script>
|
||
const API='/wevia-ia/weval-chatbot-api.php', WAPI='/api/wedroid-brain-api.php';
|
||
const VARIANTS=[
|
||
{id:'grand',name:'WEVIA Grand écran',icon:'🖥️',color:'#1D9E75',tests:[
|
||
['Chat','Bonjour WEVIA','.'],['Skills','Tes compétences?','frontend-design'],['Claude 2026','Claude Dispatch 2026','dispatch'],
|
||
['Logo SVG','Code SVG logo IA viewBox 200x200 path gradient','svg|viewBox|path'],['Mermaid','Schema mermaid microservices','graph|flowchart'],
|
||
['SQL','SQL PostgreSQL CREATE TABLE indexes','CREATE TABLE|INDEX'],['Node.js','Code Node.js Express JWT CRUD','express|jwt|router'],
|
||
['React','Code React useState KPI recharts Tailwind','useState|className'],['Python','Code Python ETL pandas psycopg2','pandas|def |import'],
|
||
['SWOT','SWOT SaaS pharma Maroc forces faiblesses','force|faiblesse'],['Darija','Kteb b darija chno WEVIA','.'],
|
||
['English','Write summary WEVAL AI','AI|platform'],['Art SVG','Code SVG mandala zellige pattern','svg|pattern|transform'],
|
||
['pytest','Code Python tests pytest assert fixture','def test_|assert|fixture'],['Canvas','Code JS Canvas particules requestAnimationFrame','canvas|requestAnimationFrame'],
|
||
]},
|
||
{id:'widget',name:'WEVIA Widget',icon:'💬',color:'#378ADD',tests:[
|
||
['Chat','Bonjour','.'],['Skills','Compétences?','frontend-design'],['Secteurs','Quels secteurs?','.'],
|
||
['Question tech','Deployer Flask production?','flask|gunicorn|nginx|wsgi'],['Darija','Chno WEVAL?','.'],
|
||
]},
|
||
{id:'wevcode',name:'WEVCODE Fullscreen',icon:'⌨️',color:'#7F77DD',tests:[
|
||
['Chat','Bonjour WEVCODE','.'],['Python Flask','Code Flask auth JWT CRUD','flask|def |jwt'],
|
||
['React','Code React useState login form','useState|login|form'],['SQL','SQL PostgreSQL schema permissions','CREATE TABLE|GRANT|role'],
|
||
['Dockerfile','Dockerfile multi-stage Node.js','FROM|COPY|RUN'],
|
||
]},
|
||
{id:'wedroid',name:'WEDROID CLI',icon:'🤖',color:'#EF9F27',tests:[
|
||
['Chat','status rapport'],['Skills','compétences Dispatch 2026'],['Chain','diagnostic rapide'],
|
||
['Docker','containers Docker actifs'],['Learning','Learn golive 4variants'],
|
||
]},
|
||
];
|
||
|
||
let allResults={}, tP=0, tF=0;
|
||
|
||
function updKPI(){
|
||
const tot=tP+tF, pct=tot?Math.round(tP/tot*100):0;
|
||
const sig=pct>=99.7?'6σ':pct>=99?'5σ':pct>=97?'4σ':pct>=93?'3σ':'<3σ';
|
||
document.getElementById('kP').textContent=`${tP}/${tot}`;
|
||
document.getElementById('kS').textContent=`${pct}%`;
|
||
document.getElementById('kS').style.color=pct>=95?'var(--green)':pct>=80?'var(--amber)':'var(--red)';
|
||
document.getElementById('kG').textContent=sig;
|
||
}
|
||
|
||
function renderVariant(v, results){
|
||
const pass=results.filter(r=>r.ok).length, total=results.length;
|
||
const pct=total?Math.round(pass/total*100):0;
|
||
const card=document.createElement('div');card.className='vcard';
|
||
card.innerHTML=`<div class="head"><span class="vname">${v.icon} ${v.name}</span><span class="score" style="color:${pct>=90?'var(--green)':pct>=70?'var(--amber)':'var(--red)'}">${pass}/${total} (${pct}%)</span></div><div class="tg" id="tg-${v.id}"></div>`;
|
||
document.getElementById('variants').appendChild(card);
|
||
const tg=card.querySelector('.tg');
|
||
results.forEach(r=>{
|
||
const el=document.createElement('div');
|
||
el.className=`ti ${r.ok?'':'f'}`;
|
||
el.innerHTML=`<span class="n">${r.ok?'✅':'❌'} ${r.name}</span><span class="d">${r.detail}</span>`;
|
||
tg.appendChild(el);
|
||
});
|
||
}
|
||
|
||
async function testAPI(msg,sid,tm=50){
|
||
try{
|
||
const r=await fetch(API,{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({message:msg,session_id:sid}),signal:AbortSignal.timeout(tm*1000)});
|
||
return await r.json();
|
||
}catch{return{response:''};}
|
||
}
|
||
async function testWD(params){
|
||
try{
|
||
const r=await fetch(WAPI,{method:'POST',headers:{'Content-Type':'application/x-www-form-urlencoded'},body:params,signal:AbortSignal.timeout(15000)});
|
||
return await r.json();
|
||
}catch{return{response:''};}
|
||
}
|
||
|
||
async function runAll(){
|
||
tP=0;tF=0;
|
||
document.getElementById('variants').innerHTML='';
|
||
document.getElementById('st').textContent='scanning...';document.getElementById('st').className='pill run';
|
||
|
||
for(const v of VARIANTS){
|
||
const results=[];
|
||
for(const t of v.tests){
|
||
await new Promise(r=>setTimeout(r,800));
|
||
const sid=`${v.id}-${Date.now()}-${Math.random().toString(36).slice(2,5)}`;
|
||
let resp='',ok=false;
|
||
if(v.id==='wedroid'){
|
||
const d=await testWD(`k=DROID2026&action=chat&message=${encodeURIComponent(t[1])}`);
|
||
resp=d.response||d.summary||JSON.stringify(d);
|
||
ok=resp.length>10;
|
||
}else{
|
||
const d=await testAPI(t[1],sid);
|
||
resp=d.response||'';
|
||
ok=new RegExp(t[2],'i').test(resp)&&resp.length>20;
|
||
}
|
||
if(ok)tP++;else tF++;
|
||
results.push({name:t[0],ok,detail:`${(resp.length/1000).toFixed(1)}k`,len:resp.length});
|
||
updKPI();
|
||
}
|
||
allResults[v.id]=results;
|
||
renderVariant(v,results);
|
||
}
|
||
|
||
document.getElementById('st').textContent=`${tP}/${tP+tF} pass`;
|
||
document.getElementById('st').className='pill';
|
||
renderCharts();
|
||
}
|
||
|
||
function renderCharts(){
|
||
const vNames=VARIANTS.map(v=>v.name);
|
||
const vPass=VARIANTS.map(v=>(allResults[v.id]||[]).filter(r=>r.ok).length);
|
||
const vTotal=VARIANTS.map(v=>(allResults[v.id]||[]).length);
|
||
const vColors=VARIANTS.map(v=>v.color);
|
||
|
||
new Chart(document.getElementById('chVar'),{
|
||
type:'bar',
|
||
data:{labels:vNames,datasets:[
|
||
{label:'Pass',data:vPass,backgroundColor:vColors,borderRadius:6,barPercentage:.5},
|
||
{label:'Fail',data:vTotal.map((t,i)=>t-vPass[i]),backgroundColor:'rgba(226,75,74,0.3)',borderRadius:6,barPercentage:.5}
|
||
]},
|
||
options:{responsive:true,maintainAspectRatio:false,plugins:{legend:{display:false}},
|
||
scales:{x:{stacked:true,grid:{display:false},ticks:{color:'#6a685f',font:{size:10}}},y:{stacked:true,grid:{color:'rgba(255,255,255,.04)'},ticks:{color:'#6a685f'},beginAtZero:true}}
|
||
}
|
||
});
|
||
|
||
const tocL=['Providers','Skills','RAG','Output','Auto-heal','Crons','Memory','Auth'];
|
||
const tocB=[0,0,17,20,60,70,85,95], tocA=[95,95,92,85,100,100,100,100];
|
||
new Chart(document.getElementById('chToc'),{
|
||
type:'bar',data:{labels:tocL,datasets:[
|
||
{data:tocB,backgroundColor:'rgba(226,75,74,0.25)',borderRadius:4,barPercentage:.5},
|
||
{data:tocA,backgroundColor:'#1D9E75',borderRadius:4,barPercentage:.5}
|
||
]},options:{responsive:true,maintainAspectRatio:false,plugins:{legend:{display:false}},
|
||
scales:{x:{grid:{display:false},ticks:{color:'#6a685f',font:{size:9}}},y:{grid:{color:'rgba(255,255,255,.04)'},ticks:{color:'#6a685f',callback:v=>v+'%'},max:100,beginAtZero:true}}
|
||
}
|
||
});
|
||
|
||
const grandR=allResults['grand']||[];
|
||
const aptL=grandR.map(r=>r.name), aptD=grandR.map(r=>r.len), aptC=grandR.map(r=>r.ok?'#1D9E75':'rgba(226,75,74,0.6)');
|
||
new Chart(document.getElementById('chApt'),{
|
||
type:'bar',data:{labels:aptL,datasets:[{data:aptD,backgroundColor:aptC,borderRadius:4,barPercentage:.7}]},
|
||
options:{indexAxis:'y',responsive:true,maintainAspectRatio:false,plugins:{legend:{display:false},tooltip:{callbacks:{label:c=>Math.round(c.raw).toLocaleString()+' chars'}}},
|
||
scales:{x:{grid:{color:'rgba(255,255,255,.04)'},ticks:{color:'#6a685f',callback:v=>v>=1000?Math.round(v/1000)+'k':v}},y:{grid:{display:false},ticks:{color:'#9c9a92',font:{size:10}}}}}
|
||
});
|
||
}
|
||
|
||
setInterval(()=>{document.getElementById('ck').textContent=new Date().toLocaleString('fr-FR',{day:'2-digit',month:'short',hour:'2-digit',minute:'2-digit',second:'2-digit'})},1000);
|
||
runAll();
|
||
setInterval(runAll,600000);
|
||
</script>
|
||
|
||
<!-- === 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 === -->
|
||
|
||
|
||
<script src="/api/a11y-auto-enhancer.js" defer></script>
|
||
<!-- WTP_UDOCK_V1 (Opus 21-avr t34final) --><script src="/wtp-unified-dock.js" defer></script>
|
||
<script src="/opus-antioverlap-doctrine.js?v=1776776094" defer></script>
|
||
<!-- DOCTRINE-60-UX-JS --><script id="doctrine60-ux-js-direct">
|
||
|
||
// DOCTRINE-60-UX-JS staggered entrance
|
||
(function(){
|
||
if (!('IntersectionObserver' in window)) return;
|
||
const obs = new IntersectionObserver((entries) => {
|
||
entries.forEach((e, i) => {
|
||
if (e.isIntersecting) {
|
||
setTimeout(() => e.target.classList.add('enter-stagger'), i * 80);
|
||
obs.unobserve(e.target);
|
||
}
|
||
});
|
||
});
|
||
document.querySelectorAll('.card, .kpi, .panel').forEach(el => obs.observe(el));
|
||
})();
|
||
|
||
</script>
|
||
</body>
|
||
</html>
|