185 lines
11 KiB
HTML
185 lines
11 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="fr">
|
|
<head>
|
|
<meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1">
|
|
<title>WEVIA API Key Hub</title>
|
|
<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700&family=JetBrains+Mono:wght@400&display=swap" rel="stylesheet">
|
|
<style>
|
|
*{margin:0;padding:0;box-sizing:border-box}
|
|
:root{--bg:#06060c;--bg2:#0c0c18;--bg3:#14142a;--fg:#e4e4f0;--fg2:#9898b8;--fg3:#5a5a78;--cy:#06d6a0;--rd:#ef4444;--go:#f59e0b;--bl:#3b82f6;--vi:#8b5cf6;--bd:#1e1e40;--r:10px}
|
|
body{font-family:'Outfit',sans-serif;background:var(--bg);color:var(--fg);min-height:100vh;padding:20px}
|
|
.container{max-width:900px;margin:0 auto}
|
|
h1{font-size:28px;font-weight:700;margin-bottom:4px;background:linear-gradient(135deg,var(--cy),var(--bl));-webkit-background-clip:text;-webkit-text-fill-color:transparent}
|
|
.sub{color:var(--fg3);font-size:13px;margin-bottom:24px}
|
|
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:24px}
|
|
.kpi{background:var(--bg2);border:1px solid var(--bd);border-radius:var(--r);padding:16px;text-align:center}
|
|
.kpi-v{font-size:28px;font-weight:700;font-family:'JetBrains Mono',monospace}
|
|
.kpi-l{font-size:11px;color:var(--fg3);margin-top:4px}
|
|
.card{background:var(--bg2);border:1px solid var(--bd);border-radius:var(--r);padding:16px;margin:8px 0;transition:.2s}
|
|
.card:hover{border-color:var(--bl)55}
|
|
.card-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
|
|
.card-name{font-size:15px;font-weight:600}
|
|
.badge{padding:3px 10px;border-radius:12px;font-size:11px;font-weight:600}
|
|
.badge.ok{background:var(--cy)22;color:var(--cy)}
|
|
.badge.fail{background:var(--rd)22;color:var(--rd)}
|
|
.badge.warn{background:var(--go)22;color:var(--go)}
|
|
.card-row{display:flex;gap:10px;align-items:center;margin:6px 0;font-size:12px}
|
|
.card-row label{color:var(--fg3);min-width:70px}
|
|
.card-row a{color:var(--bl);text-decoration:none}
|
|
.card-row a:hover{text-decoration:underline}
|
|
.key-input{flex:1;background:var(--bg3);border:1px solid var(--bd);border-radius:6px;padding:7px 10px;color:var(--fg);font-family:'JetBrains Mono',monospace;font-size:11px;outline:none}
|
|
.key-input:focus{border-color:var(--cy)}
|
|
.save-btn{padding:7px 16px;background:var(--cy);border:none;border-radius:6px;color:#000;font-weight:600;font-size:12px;cursor:pointer;font-family:inherit;transition:.2s}
|
|
.save-btn:hover{filter:brightness(1.2)}
|
|
.save-btn:disabled{opacity:.4;cursor:not-allowed}
|
|
.test-result{font-size:11px;padding:4px 8px;border-radius:4px;font-family:'JetBrains Mono',monospace}
|
|
.bar{height:3px;background:var(--bg3);border-radius:2px;margin-top:8px;overflow:hidden}
|
|
.bar-f{height:100%;border-radius:2px;transition:.5s}
|
|
.section-title{font-size:12px;font-weight:700;color:var(--fg3);text-transform:uppercase;letter-spacing:1px;margin:20px 0 8px;padding-top:12px;border-top:1px solid var(--bd)}
|
|
.info-box{background:var(--bg3);border:1px solid var(--bd);border-radius:var(--r);padding:12px;font-size:12px;color:var(--fg2);line-height:1.6;margin:8px 0}
|
|
.refresh-btn{padding:8px 20px;background:var(--bl);border:none;border-radius:8px;color:#fff;font-weight:600;cursor:pointer;font-family:inherit;font-size:13px;margin-bottom:16px}
|
|
.refresh-btn:hover{filter:brightness(1.2)}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<h1>⚡ WEVIA API Key Hub</h1>
|
|
<p class="sub">Gestion automatique des clés API — Coller → Sauvegarder → Auto-test</p>
|
|
|
|
<div class="kpis">
|
|
<div class="kpi"><div class="kpi-v" style="color:var(--cy)" id="kOk">—</div><div class="kpi-l">Actifs</div></div>
|
|
<div class="kpi"><div class="kpi-v" style="color:var(--rd)" id="kFail">—</div><div class="kpi-l">Expirés</div></div>
|
|
<div class="kpi"><div class="kpi-v" style="color:var(--vi)" id="kTotal">—</div><div class="kpi-l">Total</div></div>
|
|
<div class="kpi"><div class="kpi-v" style="color:var(--cy)">0€</div><div class="kpi-l">Coût</div></div>
|
|
</div>
|
|
|
|
<button class="refresh-btn" onclick="loadStatus()">🔄 Rafraîchir le statut</button>
|
|
|
|
<div id="providers"></div>
|
|
|
|
<div class="section-title">📋 Instructions rapides</div>
|
|
<div class="info-box">
|
|
<strong>Pour renouveler une clé:</strong><br>
|
|
1. Cliquer sur le lien "Renouveler" du provider<br>
|
|
2. Créer/copier la nouvelle clé sur le site du provider<br>
|
|
3. Coller dans le champ ci-dessus<br>
|
|
4. Cliquer "Sauvegarder + Tester"<br>
|
|
5. Le système auto-test et met à jour /etc/weval/secrets.env
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
const PROVIDERS = [
|
|
{name:"GitHub",key:"GITHUB_TOKEN",renew:"https://github.com/settings/tokens/new?scopes=repo,workflow&description=WEVIA-Bot",icon:"🐙",critical:true,info:"Scope: repo + workflow. Expiry: 90 jours."},
|
|
{name:"Groq",key:"GROQ_KEY",renew:"https://console.groq.com/keys",icon:"🚀",info:"Free: 100K tokens/jour. Llama-3.3-70B."},
|
|
{name:"Cerebras",key:"CEREBRAS_API_KEY",renew:"https://cloud.cerebras.ai/platform",icon:"⚡",info:"Free unlimited. Ultra-fast 7ms."},
|
|
{name:"Gemini",key:"GEMINI_KEY",renew:"https://aistudio.google.com/apikey",icon:"🌟",info:"Free: Gemini 2.5 Flash + Pro. Google AI Studio."},
|
|
{name:"SambaNova",key:"SAMBANOVA_KEY",renew:"https://cloud.sambanova.ai/apis",icon:"🔮",info:"Free: DeepSeek-R1, V3.2, Llama-4. Créer nouveau compte si expiré."},
|
|
{name:"Mistral",key:"MISTRAL_KEY",renew:"https://console.mistral.ai/api-keys",icon:"🌊",info:"Free tier. open-mistral-nemo."},
|
|
{name:"OpenRouter",key:"OPENROUTER_KEY",renew:"https://openrouter.ai/keys",icon:"🔗",info:"Free models: Llama, Gemma, etc."},
|
|
{name:"DeepSeek API",key:"DEEPSEEK_KEY",renew:"https://platform.deepseek.com/api_keys",icon:"🔍",info:"Payant. Alternative: DeepSeek Web gratuit."},
|
|
{name:"HuggingFace",key:"HF_TOKEN",renew:"https://huggingface.co/settings/tokens",icon:"🤗",info:"Free inference API."},
|
|
{name:"Anthropic",key:"ANTHROPIC_KEY",renew:"https://console.anthropic.com/settings/keys",icon:"🧠",info:"Claude API. Free tier limité."},
|
|
];
|
|
|
|
let statusData = {};
|
|
|
|
async function loadStatus() {
|
|
try {
|
|
const res = await fetch('/api/api-key-hub.php');
|
|
/* HTML_GUARD_V2_BATCH */ const _t_data=await res.text(); const data=null; {var _q=(_t_data||"").trim();if(_q.startsWith("<!DOCTYPE")||_q.startsWith("<html")){data={error:"[HTTP "+(res.status||"?")+"] Backend indisponible",isHtmlError:true};}else{try{data=JSON.parse(_q)}catch(e){data={error:"[JSON] "+e.message}}}}
|
|
statusData = {};
|
|
(data.providers||[]).forEach(p => statusData[p.name] = p);
|
|
document.getElementById('kOk').textContent = data.ok || 0;
|
|
document.getElementById('kFail').textContent = (data.total||0) - (data.ok||0);
|
|
document.getElementById('kTotal').textContent = data.total || 0;
|
|
renderProviders();
|
|
} catch(e) {
|
|
document.getElementById('providers').innerHTML = '<div class="info-box" style="color:var(--rd)">Erreur: ' + e + '</div>';
|
|
}
|
|
}
|
|
|
|
function renderProviders() {
|
|
let html = '';
|
|
for (const p of PROVIDERS) {
|
|
const st = statusData[p.name] || {};
|
|
const status = st.status || 'UNKNOWN';
|
|
const isOk = ['OK','ACTIVE','RATE_LIMITED'].includes(status);
|
|
const badgeClass = isOk ? 'ok' : status === 'RATE_LIMITED' ? 'warn' : 'fail';
|
|
const critical = p.critical ? ' style="border-color:var(--rd)55"' : '';
|
|
|
|
html += `<div class="card"${critical}>
|
|
<div class="card-h">
|
|
<span class="card-name">${p.icon} ${p.name}</span>
|
|
<span class="badge ${badgeClass}">${status}</span>
|
|
</div>
|
|
<div class="card-row"><label>Clé:</label><code style="color:var(--fg3);font-size:11px">${p.key}</code></div>
|
|
<div class="card-row"><label>Renouveler:</label><a href="${p.renew}" target="_blank">${p.renew.replace('https://','').slice(0,40)}</a></div>
|
|
<div class="card-row"><label>Info:</label><span style="color:var(--fg2)">${p.info}</span></div>
|
|
<div class="card-row" style="margin-top:8px">
|
|
<input class="key-input" id="key_${p.key}" placeholder="Coller la nouvelle clé ici...">
|
|
<button class="save-btn" onclick="saveKey('${p.key}',this)">💾 Sauvegarder + Tester</button>
|
|
<span class="test-result" id="result_${p.key}"></span>
|
|
</div>
|
|
<div class="bar"><div class="bar-f" style="width:${isOk?100:0}%;background:${isOk?'var(--cy)':'var(--rd)'}"></div></div>
|
|
</div>`;
|
|
}
|
|
document.getElementById('providers').innerHTML = html;
|
|
}
|
|
|
|
async function saveKey(keyName, btn) {
|
|
const input = document.getElementById('key_' + keyName);
|
|
const result = document.getElementById('result_' + keyName);
|
|
const newKey = input.value.trim();
|
|
if (!newKey) { result.textContent = '❌ Clé vide'; result.style.color = 'var(--rd)'; return; }
|
|
|
|
btn.disabled = true;
|
|
result.textContent = '⏳ Sauvegarde...';
|
|
result.style.color = 'var(--go)';
|
|
|
|
try {
|
|
const res = await fetch('/api/api-key-manager.php', {
|
|
method: 'POST',
|
|
headers: {'Content-Type': 'application/json'},
|
|
body: JSON.stringify({action: 'update_key', key: 'WEVADS2026', provider: keyName, new_key: newKey})
|
|
});
|
|
/* HTML_GUARD_V2_BATCH */ const _t_data=await res.text(); const data=null; {var _q=(_t_data||"").trim();if(_q.startsWith("<!DOCTYPE")||_q.startsWith("<html")){data={error:"[HTTP "+(res.status||"?")+"] Backend indisponible",isHtmlError:true};}else{try{data=JSON.parse(_q)}catch(e){data={error:"[JSON] "+e.message}}}}
|
|
if (data.test && data.test.ok) {
|
|
result.textContent = '✅ Sauvegardé + Testé OK (HTTP ' + data.test.code + ')';
|
|
result.style.color = 'var(--cy)';
|
|
input.value = '';
|
|
} else {
|
|
result.textContent = '⚠️ Sauvegardé mais test échoué (HTTP ' + (data.test?.code||'?') + ')';
|
|
result.style.color = 'var(--go)';
|
|
}
|
|
} catch(e) {
|
|
result.textContent = '❌ Erreur: ' + e;
|
|
result.style.color = 'var(--rd)';
|
|
}
|
|
btn.disabled = false;
|
|
setTimeout(loadStatus, 2000);
|
|
}
|
|
|
|
loadStatus();
|
|
</script>
|
|
<!-- CARTO_REMOVED -->
|
|
<!-- CARTO_BANNER_V1 -->
|
|
<div style="position:fixed;bottom:20px;right:20px;z-index:9999;background:linear-gradient(135deg,#141931,#2d1b5e);border:1px solid #64ffda;border-radius:12px;padding:12px 18px;box-shadow:0 4px 20px rgba(100,255,218,.3);font-family:-apple-system,Segoe UI,sans-serif;font-size:13px">
|
|
<a href="/cartographie-screens.html" style="color:#64ffda;text-decoration:none;font-weight:600;display:flex;align-items:center;gap:8px" title="Cartographie exhaustive de tous les ecrans live">
|
|
<span style="font-size:18px">🗺</span> Cartographie live
|
|
<span id="carto-banner-count" style="color:#8892b0;font-size:11px">3914 ecrans</span>
|
|
</a>
|
|
</div>
|
|
<script>
|
|
(function(){
|
|
fetch('/api/screens-health.php?_='+Date.now(),{cache:'no-store'}).then(r=>r.json()).then(d=>{
|
|
const c=d.counts||{}; const up=c.UP||0; const slow=c.SLOW||0; const br=c.BROKEN||0;
|
|
const el=document.getElementById('carto-banner-count');
|
|
if(el) el.innerHTML=`<span style="color:#22c55e">${up} UP</span> / <span style="color:#f59e0b">${slow} Lent</span> / <span style="color:#ef4444">${br} 5xx</span>`;
|
|
}).catch(()=>{});
|
|
})();
|
|
</script>
|
|
<!-- /CARTO_BANNER_V1 -->
|
|
</body>
|
|
</html>
|