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
UI: clean ranking and remove keys from public view
2fa2f41
raw
history blame
11.4 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;max-width:900px;margin:0 auto}
.section-label{font-size:10px;letter-spacing:4px;color:#7a6228;border-bottom:1px solid #3a2a00;padding-bottom:6px;margin-bottom:1rem;margin-top:1.5rem}
.status-row{display:flex;gap:1rem;margin-bottom:1rem}
.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:1rem}
.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-row{display:flex;align-items:center;gap:8px;margin-top:6px}
.key-val{font-size:12px;color:#c8a84b;font-family:monospace}
.reveal-btn{background:#2a1e00;border:1px solid #c8a84b;color:#c8a84b;font-size:10px;padding:3px 10px;cursor:pointer;letter-spacing:2px;font-family:"Courier New"}
.reveal-btn:hover{background:#3a2a00}
.models-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:1rem}
.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:1rem}
.tank-title{font-size:13px;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:14px}
.tank-bar{height:100%;background:#cc0000}
.tank-era{font-size:10px;color:#7a6228;width:80px;text-align:right;flex-shrink:0}
.hoi4-section{background:#1a1200;border:1px solid #3a2a00;padding:1.5rem;margin-bottom:1rem}
.hoi4-title{font-size:13px;color:#cc0000;letter-spacing:3px;margin-bottom:1rem;font-weight:bold}
.op-row{display:flex;gap:8px;margin-bottom:8px;align-items:flex-start}
.op-name{font-size:11px;color:#e8c86b;width:160px;flex-shrink:0}
.op-desc{font-size:11px;color:#7a6228;line-height:1.5}
.commander-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:1rem}
.commander-card{background:#0d0d0d;border:1px solid #2a1e00;padding:8px 12px}
.cmd-name{font-size:12px;color:#e8c86b;font-weight:bold}
.cmd-trait{font-size:10px;color:#7a6228;margin-top:2px;letter-spacing:1px}
.focus-row{display:flex;flex-wrap:wrap;gap:6px;margin-top:1rem}
.focus-pill{background:#2a1000;border:1px solid #cc0000;color:#cc0000;font-size:9px;padding:3px 8px;letter-spacing:1px}
.quote-box{background:#0d0d0d;border-left:3px solid #cc0000;padding:0.75rem 1rem;margin-top:1rem;font-size:11px;color:#7a6228;font-style:italic}
.footer{border-top:1px solid #3a2a00;padding:1rem 2rem;text-align:center;font-size:10px;color:#4a3a10;letter-spacing:3px;margin-top:1rem}
.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 — NO STEP BACK — 1941-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">HF DEPLOY // GO v1.23</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">GLM-4.7</div><div class="lbl">MOTOR PRINCIPAL</div></div>
 </div>
<div class="section-label">// PUNTO DE ACCESO — CLASIFICADO</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-row">
 <span class="key-val">API KEY: </span>
 <span class="key-val" id="keyval">&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;</span>
 <button class="reveal-btn" onclick="toggleKey()">REVELAR</button>
 </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-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 class="model-item"><div class="model-dot glm"></div><div class="model-name">glm-4.5-air</div></div>
 </div>
<div class="section-label">// RAMA SOVIETICA — GUERRA FRIA // WAR THUNDER</div>
 <div class="tank-section">
 <div class="tank-title">&#9733; MODELOS MAS USADOS</div>
 <div class="tank-row"><div class="tank-name">claude-sonnet</div><div class="tank-bar-wrap"><div class="tank-bar" style="width:95%"></div></div><div class="tank-era">~12K tokens</div></div>
 <div class="tank-row"><div class="tank-name">glm-4.7</div><div class="tank-bar-wrap"><div class="tank-bar" style="width:80%"></div></div><div class="tank-era">~9K tokens</div></div>
 <div class="tank-row"><div class="tank-name">glm-5</div><div class="tank-bar-wrap"><div class="tank-bar" style="width:65%"></div></div><div class="tank-era">~7K tokens</div></div>
 <div class="tank-row"><div class="tank-name">claude-haiku</div><div class="tank-bar-wrap"><div class="tank-bar" style="width:50%"></div></div><div class="tank-era">~5K tokens</div></div>
 <div class="tank-row"><div class="tank-name">glm-4.7-think</div><div class="tank-bar-wrap"><div class="tank-bar" style="width:35%"></div></div><div class="tank-era">~3K tokens</div></div>
 <div style="margin-top:0.75rem;font-size:10px;color:#7a6228;letter-spacing:1px">&#9888; DATOS EN TIEMPO REAL PROXIMAMENTE</div>
 </div>
<div class="section-label">// HOI4 — NO STEP BACK — FRENTE ORIENTAL</div>
 <div class="hoi4-section">
<div class="tank-title" style="margin-top:1rem">&#9733; TOP USUARIOS</div>
 <div class="commander-grid">
 <div id="users-grid" style="display:contents">
 <div class="commander-card"><div class="cmd-name">Cargando...</div><div class="cmd-trait">CONECTANDO AL SERVIDOR</div></div>
 </div>
 </div>
<div class="tank-title" style="margin-top:1rem">&#9733; ARBOL DE ENFOQUE SOVIETICO</div>
 <div class="focus-row">
 <div class="focus-pill">INDUSTRIA DE GUERRA</div>
 <div class="focus-pill">COLLECTIVIZACION</div>
 <div class="focus-pill">PURGA MILITAR</div>
 <div class="focus-pill">LEND-LEASE</div>
 <div class="focus-pill">PACTO RIBBENTROP</div>
 <div class="focus-pill">RUTA COMUNISTA</div>
 <div class="focus-pill">DEFENSA EN PROFUNDIDAD</div>
 <div class="focus-pill">FRENTE POPULAR</div>
 </div>
<div class="quote-box">
 &ldquo;La victoria es para aquellos que no retroceden. Ni un paso atras.&rdquo;<br>
 <span style="color:#c8a84b;font-style:normal">— Orden No. 227, Stalin — 1942 — NO STEP BACK</span>
 </div>
 </div>
</div>
<div class="footer">
 <span class="classified">&#9733; CLASIFICADO &#9733;</span> &mdash; ROW-PROXY v1.0 &mdash; CCCP AI GATEWAY &mdash; HOI4 NO STEP BACK &mdash; <span class="classified">&#9733; CLASIFICADO &#9733;</span>
</div>
<script>
async function updateStats() {
 try {
 const r = await fetch("/stats");
 const data = await r.json();
 const keys = Object.values(data.keys || {});
 keys.sort((a, b) => b.tokens - a.tokens);
 const grid = document.querySelector(".commander-grid");
 if (!grid) return;
 grid.innerHTML = keys.slice(0, 5).map((u, i) => {
 return "<div class='commander-card'>" +
 "<div class='cmd-name'>" + u.name.toUpperCase() + " #" + (i+1) + "</div>" +
 "<div class='cmd-trait'>REQS: " + u.requests + " // TOKENS: " + u.tokens + "</div>" +
 "</div>";
 }).join("");
 } catch(e) { console.error("Error:", e); }
}
setInterval(updateStats, 10000);
updateStats();
</script>
<script>
async function updateStats() {
 try {
 const r = await fetch("/stats");
 const data = await r.json();
 const keys = Object.values(data.keys || {});
 keys.sort((a, b) => b.tokens - a.tokens);
 const grid = document.querySelector(".commander-grid");
 if (!grid) return;
 grid.innerHTML = keys.slice(0, 5).map((u, i) => {
 return "<div class='commander-card'>" +
 "<div class='cmd-name'>" + u.name.toUpperCase() + " #" + (i+1) + "</div>" +
 "<div class='cmd-trait'>REQS: " + u.requests + " // TOKENS: " + u.tokens + "</div>" +
 "</div>";
 }).join("");
 } catch(e) { console.error("Error:", e); }
}
setInterval(updateStats, 10000);
updateStats();
</script>
<script>
async function updateStats() {
 try {
 const r = await fetch("/stats");
 const data = await r.json();
 const keys = Object.values(data.keys || {});
 keys.sort((a, b) => b.tokens - a.tokens);
 const grid = document.querySelector(".commander-grid");
 if (!grid) return;
 grid.innerHTML = keys.slice(0, 5).map((u, i) => {
 return "<div class='commander-card'>" +
 "<div class='cmd-name'>" + u.name.toUpperCase() + " #" + (i+1) + "</div>" +
 "<div class='cmd-trait'>REQS: " + u.requests + " // TOKENS: " + u.tokens + "</div>" +
 "</div>";
 }).join("");
 } catch(e) { console.error("Error:", e); }
}
setInterval(updateStats, 10000);
updateStats();
</script></body>
</html>