Hugging Face's logo

Spaces:
Moge-Row
/
Row-proxy
Paused

App Files Community
4
Row-proxy / internal /handler /index.html
Moge-Row's picture
Moge-Row
Update internal/handler/index.html (#2)
6bb9441
raw
history blame
7.22 kB
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ROW-PROXY // CCCP</title>
<style>
*{box-sizing:border-box;margin:0;padding:0}
body{background:#0d0d0d;font-family:"Courier New",monospace;color:#c8a84b}
.header{background:#1a1200;border-bottom:2px solid #c8a84b;padding:1.5rem 2rem;display:flex;align-items:center;gap:1rem}
.star{color:#cc0000;font-size:28px}
.header-title{font-size:22px;font-weight:bold;letter-spacing:4px;color:#c8a84b}
.header-sub{font-size:11px;letter-spacing:3px;color:#7a6228;margin-top:2px}
.red-bar{height:4px;background:#cc0000}
.content{padding:2rem}
.section-label{font-size:10px;letter-spacing:4px;color:#7a6228;border-bottom:1px solid #3a2a00;padding-bottom:6px;margin-bottom:1rem}
.status-row{display:flex;gap:1rem;margin-bottom:2rem}
.status-card{flex:1;background:#1a1200;border:1px solid #3a2a00;border-left:3px solid #c8a84b;padding:1rem}
.status-card .val{font-size:18px;color:#c8a84b;font-weight:bold;margin-bottom:2px}
.status-card .lbl{font-size:10px;color:#7a6228;letter-spacing:2px}
.online{color:#44aa99}
.url-box{background:#111;border:1px solid #3a2a00;border-left:3px solid #cc0000;padding:1rem 1.25rem;margin-bottom:2rem}
.url-label{font-size:10px;color:#7a6228;letter-spacing:3px;margin-bottom:6px}
.url-val{font-size:13px;color:#e8c86b;word-break:break-all}
.key-val{font-size:12px;color:#c8a84b;margin-top:4px}
.models-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:2rem}
.model-item{background:#1a1200;border:1px solid #2a1e00;padding:8px 12px;display:flex;align-items:center;gap:8px}
.model-dot{width:6px;height:6px;background:#44aa99;border-radius:50%;flex-shrink:0}
.model-dot.glm{background:#c8a84b}
.model-name{font-size:11px;color:#c8a84b}
.tank-section{background:#1a1200;border:1px solid #3a2a00;padding:1.5rem;margin-bottom:2rem}
.tank-title{font-size:14px;color:#cc0000;letter-spacing:3px;margin-bottom:1rem;font-weight:bold}
.tank-row{display:flex;gap:1rem;margin-bottom:8px;align-items:center}
.tank-name{font-size:12px;color:#e8c86b;width:80px;flex-shrink:0}
.tank-bar-wrap{flex:1;background:#0d0d0d;height:16px}
.tank-bar{height:100%;background:#cc0000}
.tank-era{font-size:10px;color:#7a6228;width:80px;text-align:right}
.footer{border-top:1px solid #3a2a00;padding:1rem 2rem;text-align:center;font-size:10px;color:#4a3a10;letter-spacing:3px}
.classified{color:#cc0000}
</style>
</head>
<body>
<div class="header">
 <div class="star">&#9733;</div>
 <div>
 <div class="header-title">ROW-PROXY // CCCP</div>
 <div class="header-sub">SOVIET ARMORED DIVISION — AI GATEWAY SYSTEM — 1960-1985</div>
 </div>
 <div style="margin-left:auto;text-align:right">
 <div style="font-size:10px;color:#44aa99;letter-spacing:2px">&#9679; SISTEMA ACTIVO</div>
 <div style="font-size:10px;color:#7a6228;margin-top:2px">HUGGING FACE DEPLOY</div>
 </div>
</div>
<div class="red-bar"></div>
<div class="content">
 <div class="section-label">// ESTADO DEL SISTEMA</div>
 <div class="status-row">
 <div class="status-card"><div class="val online">&#9679; ONLINE</div><div class="lbl">PROXY STATUS</div></div>
 <div class="status-card"><div class="val">24</div><div class="lbl">MODELOS ACTIVOS</div></div>
 <div class="status-card"><div class="val">FREE</div><div class="lbl">API KEY</div></div>
 </div>
 <div class="section-label">// PUNTO DE ACCESO</div>
 <div class="url-box">
 <div class="url-label">BASE URL — PRODUCCION</div>
 <div class="url-val">https://moge-row-row-proxy.hf.space/v1</div>
 <div class="key-val">API KEY: free</div>
 </div>
 <div class="section-label">// MODELOS DISPONIBLES</div>
 <div class="models-grid">
 <div class="model-item"><div class="model-dot"></div><div class="model-name">claude-sonnet-4-6</div></div>
 <div class="model-item"><div class="model-dot"></div><div class="model-name">claude-haiku-4-5</div></div>
 <div class="model-item"><div class="model-dot"></div><div class="model-name">claude-opus-4-6</div></div>
 <div class="model-item"><div class="model-dot"></div><div class="model-name">claude-3-5-sonnet</div></div>
 <div class="model-item"><div class="model-dot glm"></div><div class="model-name">glm-4.7</div></div>
 <div class="model-item"><div class="model-dot glm"></div><div class="model-name">glm-4.7-thinking</div></div>
 <div class="model-item"><div class="model-dot glm"></div><div class="model-name">glm-5</div></div>
 <div class="model-item"><div class="model-dot glm"></div><div class="model-name">glm-5-thinking</div></div>
 </div>
 <div class="section-label">// RAMA SOV</div>
 <div class="tank-section">
 <div class="tank-title">&#9733; COMANDANTES </div>
 <div id="top-users-bars">
 <div style="font-size:11px;color:#7a6228;letter-spacing:1px">CARGANDO DATOS...</div>
 </div>
<div style="margin-top:1rem;font-size:10px;color:#7a6228;letter-spacing:1px">&#9888; INFORMACION AL SERVICIO PUBLICO DE LA COMUNIDAD</div>
 </div>
</div>
<div class="footer"><span class="classified">&#9733; CLASIFICADO &#9733;</span> &mdash; ROW-PROXY v1.0 &mdash; CCCP AI GATEWAY &mdash; <span class="classified">&#9733; CLASIFICADO &#9733;</span></div>
<script>
function loadStats() {
 fetch('/stats')
 .then(r => r.json())
 .then(data => {
 var keys = Object.values(data.keys || {});
 keys.sort(function(a,b){ return b.requests - a.requests; });
 var grid = document.getElementById('users-grid');
 if (grid) {
 if (keys.length === 0) {
 grid.innerHTML = '<div class="commander-card"><div class="cmd-name">Sin usuarios aun</div><div class="cmd-trait">SE EL PRIMERO EN USAR LA PROXY</div></div>';
 } else {
 grid.innerHTML = keys.slice(0,4).map(function(k){
 return '<div class="commander-card"><div class="cmd-name">' + k.name + '</div><div class="cmd-trait">SOLICITUDES: ' + k.requests + ' // TOKENS: ' + k.tokens + '</div></div>';
 }).join('');
 }
 }
 var freeEl = document.getElementById('free-count');
 if (freeEl) freeEl.textContent = (data.free_reqs || 0) + '/340';
 // TOP usuarios por tokens en barras
 var barsEl = document.getElementById('top-users-bars');
 if (barsEl) {
 var top = keys.slice(0, 5);
 var maxTokens = top.length > 0 ? Math.max.apply(null, top.map(function(k){ return k.tokens || 0; })) : 1;
 if (maxTokens === 0) maxTokens = 1;
 if (top.length === 0) {
 barsEl.innerHTML = '<div style="font-size:11px;color:#7a6228">SIN DATOS AUN</div>';
 } else {
 barsEl.innerHTML = top.map(function(k){
 var pct = Math.round(((k.tokens || 0) / maxTokens) * 100);
 return '<div class="tank-row">' +
 '<div class="tank-name">' + k.name + '</div>' +
 '<div class="tank-bar-wrap"><div class="tank-bar" style="width:' + pct + '%"></div></div>' +
 '<div class="tank-era">' + (k.tokens || 0) + ' tok</div>' +
 '</div>';
 }).join('');
 }
 }
 })
 .catch(function(){ });
}
loadStats();
setInterval(loadStats, 30000);
</script>
</body>
</html>