mirror of
https://github.com/JMP-MS/ASPIC.git
synced 2026-10-27 16:07:10 +00:00
79 lines
2.9 KiB
HTML
79 lines
2.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="fr">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>ASPIC — BackOffice — Coût IA</title>
|
|
<link rel="icon" href="mevelia-icone.png">
|
|
<link rel="stylesheet" href="backoffice.css">
|
|
<style>
|
|
section{background:#111;border:1px solid #262626;border-radius:6px;padding:16px 18px;margin-bottom:18px;max-width:900px;}
|
|
.total{font-size:28px;color:#bdf7bd;font-weight:700;}
|
|
table{width:100%;border-collapse:collapse;font-size:12px;}
|
|
th{text-align:left;color:#888;font-weight:normal;padding:6px 8px;border-bottom:1px solid #333;}
|
|
td{padding:6px 8px;border-bottom:1px solid #1e1e1e;color:#ccc;}
|
|
td.num{text-align:right;font-family:"Courier New",Consolas,monospace;}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="bo-cadre">
|
|
<div id="bo-corps">
|
|
<nav id="bo-menu"></nav>
|
|
<main id="bo-contenu">
|
|
<h1>Coût IA</h1>
|
|
<p class="sous-titre">Chaque appel réel à l'API Anthropic, journalisé — jamais deviné depuis la seule facture.</p>
|
|
|
|
<section>
|
|
<div class="total" id="total"></div>
|
|
<div id="parOrigine" style="margin-top:10px;font-size:12px;color:#999;"></div>
|
|
</section>
|
|
|
|
<section>
|
|
<h2 style="font-size:12px;color:#888;text-transform:uppercase;">50 derniers appels</h2>
|
|
<table>
|
|
<thead><tr>
|
|
<th>Date</th><th>Origine</th><th>Collaborateur</th><th>Modèle</th>
|
|
<th class="num">Entrée (frais)</th><th class="num">Entrée (cache)</th><th class="num">Sortie</th><th class="num">Coût ($)</th>
|
|
</tr></thead>
|
|
<tbody id="lignesAppels"></tbody>
|
|
</table>
|
|
</section>
|
|
</main>
|
|
</div>
|
|
<footer id="bo-pied"></footer>
|
|
</div>
|
|
<script src="backoffice.js"></script>
|
|
<script>
|
|
initBackoffice({ cibleEchap: 'backoffice.html' });
|
|
|
|
async function charger() {
|
|
const r = await fetch('appels_ia.php');
|
|
const data = await r.json();
|
|
|
|
document.getElementById('total').textContent = '$' + Number(data.total_usd).toFixed(4) + ' au total';
|
|
|
|
document.getElementById('parOrigine').innerHTML = (data.par_origine || []).map(function (o) {
|
|
return o.AIA_Origine + ' : ' + o.nb_appels + ' appel(s), $' + Number(o.cout_usd).toFixed(4);
|
|
}).join(' — ');
|
|
|
|
const corps = document.getElementById('lignesAppels');
|
|
corps.innerHTML = '';
|
|
(data.derniers || []).forEach(function (a) {
|
|
const tr = document.createElement('tr');
|
|
tr.innerHTML =
|
|
'<td>' + a.AIA_Date + '</td>' +
|
|
'<td>' + a.AIA_Origine + '</td>' +
|
|
'<td>' + (a.AGN_Prenom || '—') + '</td>' +
|
|
'<td>' + a.AIA_Modele + '</td>' +
|
|
'<td class="num">' + a.AIA_TokensEntreeFrais + '</td>' +
|
|
'<td class="num">' + a.AIA_TokensEntreeCache + '</td>' +
|
|
'<td class="num">' + a.AIA_TokensSortie + '</td>' +
|
|
'<td class="num">$' + Number(a.AIA_CoutEstimeUsd).toFixed(5) + '</td>';
|
|
corps.appendChild(tr);
|
|
});
|
|
}
|
|
charger();
|
|
</script>
|
|
</body>
|
|
</html>
|