Spaces:

looknicemm1
/

stagewise-2api

Paused

File size: 19,976 Bytes

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Stagewise-2API</title>
<style>
:root{--bg:#0f1117;--card:#1a1d27;--border:#2a2d3a;--text:#e1e4e8;--muted:#8b949e;--accent:#58a6ff;--green:#3fb950;--red:#f85149;--yellow:#d29922}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;background:var(--bg);color:var(--text);display:flex;min-height:100vh}
.sidebar{width:220px;background:var(--card);padding:16px 0;border-right:1px solid var(--border);display:flex;flex-direction:column;gap:2px;flex-shrink:0}
.sidebar .logo{font-size:18px;font-weight:700;padding:12px 16px;color:var(--accent)}
.sidebar a{color:var(--muted);text-decoration:none;padding:10px 16px;display:flex;align-items:center;gap:8px;font-size:14px;transition:all 0.2s;border-radius:0}
.sidebar a:hover,.sidebar a.active{color:var(--text);background:var(--bg)}
.sidebar .icon{font-size:16px;width:20px;text-align:center}
.main{flex:1;padding:24px;overflow-y:auto;max-width:1000px}
.header h1{font-size:24px;margin-bottom:16px}
.stats{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px;margin-bottom:24px}
.stat-card{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:16px}
.stat-card .label{font-size:12px;color:var(--muted);margin-bottom:6px}
.stat-card .value{font-size:28px;font-weight:700}.stat-card .sub{font-size:11px;color:var(--muted)}
.green{color:var(--green)}.red{color:var(--red)}.yellow{color:var(--yellow)}.muted{color:var(--muted)}.accent{color:var(--accent)}
.panel{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:20px;margin-bottom:16px}
.panel h2{font-size:16px;margin-bottom:12px}
table{width:100%;border-collapse:collapse;font-size:13px}
th,td{text-align:left;padding:8px 12px;border-bottom:1px solid var(--border)}
th{color:var(--muted);font-weight:600;font-size:11px;text-transform:uppercase}
tr:hover{background:rgba(88,166,255,0.05)}
.form-group{margin-bottom:12px}
.form-group label{display:block;font-size:13px;margin-bottom:4px;color:var(--muted)}
input,textarea,select{width:100%;background:var(--bg);border:1px solid var(--border);color:var(--text);padding:8px 12px;border-radius:6px;font-size:13px}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--accent)}
button{cursor:pointer;background:var(--accent);color:#fff;border:none;padding:8px 20px;border-radius:6px;font-size:13px;font-weight:600;transition:opacity 0.2s}
button:hover{opacity:0.85}button:disabled{opacity:0.5;cursor:default}
button.danger{background:var(--red)}button.small{padding:4px 10px;font-size:11px}
.chat-box{background:var(--bg);border:1px solid var(--border);border-radius:10px;padding:16px;min-height:300px;max-height:500px;overflow-y:auto;margin-bottom:12px;font-size:14px;line-height:1.6;white-space:pre-wrap}
.chat-input-row{display:flex;gap:8px}.chat-input-row input{flex:1}
.chat-toolbar{display:flex;gap:8px;margin-bottom:8px;align-items:center}
.chat-toolbar select{width:auto;min-width:180px}
#toast{position:fixed;top:16px;right:16px;z-index:999;opacity:0;transition:opacity 0.3s}
#toast.show{opacity:1}#toast .msg{padding:10px 20px;border-radius:8px;font-size:13px;background:var(--green);color:#fff}
#toast .msg.error{background:var(--red)}
.api-key-box{background:var(--bg);border:1px dashed var(--border);border-radius:8px;padding:12px;margin:8px 12px;font-size:11px}
.api-key-box input{font-size:11px;padding:4px 6px}
.usage-bar{height:4px;background:var(--border);border-radius:2px;overflow:hidden;margin-top:4px}
.usage-bar div{height:100%;border-radius:2px;transition:width 0.3s}
</style>
</head>
<body>

<div class="sidebar">
  <div class="logo">⚡ Stagewise-2API</div>
  <div class="api-key-box">
    <div style="color:var(--muted);margin-bottom:4px">🔑 API Key</div>
    <input id="apikeyInput" type="password" placeholder="sk-..." onchange="setApiKey(this.value)">
    <div style="display:flex;justify-content:space-between;margin-top:4px">
      <span style="color:var(--accent);cursor:pointer;font-size:10px" onclick="const e=document.getElementById('apikeyInput');e.type=e.type==='text'?'password':'text'">👁 显示</span>
      <span style="color:var(--muted);font-size:10px" id="keyStatus">未设置</span>
    </div>
  </div>
  <a href="#dashboard" class="active" onclick="showTab('dashboard')"><span class="icon">📊</span>仪表盘</a>
  <a href="#accounts" onclick="showTab('accounts')"><span class="icon">👥</span>账号池</a>
  <a href="#register" onclick="showTab('register')"><span class="icon">📧</span>注册</a>
  <a href="#models" onclick="showTab('models')"><span class="icon">🧠</span>模型 (31)</a>
  <a href="#playground" onclick="showTab('playground')"><span class="icon">💬</span>对话</a>
  <a href="#keys" onclick="showTab('keys')"><span class="icon">🔑</span>API Keys</a>
  <a href="#api" onclick="showTab('api')"><span class="icon">🔌</span>API 文档</a>
</div>

<div class="main" id="main-content"></div>
<div id="toast"><div class="msg"></div></div>

<script>
const API='';
let API_KEY=localStorage.getItem('sw_api_key')||'';
function setApiKey(v){
  API_KEY=v;localStorage.setItem('sw_api_key',v);
  document.getElementById('keyStatus').textContent=v?'✅ 已设置':'未设置';
  // re-render the active tab so data endpoints reload now that auth is set
  if(v){const a=document.querySelector('.sidebar a.active');if(a)renderTab(a.getAttribute('href').slice(1));}
}
if(API_KEY){document.getElementById('apikeyInput').value=API_KEY;setApiKey(API_KEY)}

async function fetchJSON(url,opts={}){
  const headers={...(opts.headers||{})};
  if(API_KEY)headers['Authorization']='Bearer '+API_KEY;
  const r=await fetch(API+url,{...opts,headers});
  const t=await r.text();try{return JSON.parse(t)}catch(e){return{error:{message:t.substring(0,200)}}}
}

function toast(msg,type='success'){const t=document.getElementById('toast');t.className='show';const m=t.querySelector('.msg');m.className='msg '+(type==='error'?'error':'success');m.textContent=msg;setTimeout(()=>t.className='',3000)}

function showTab(name){
  document.querySelectorAll('.sidebar a').forEach(a=>a.classList.remove('active'));
  document.querySelector('a[href="#'+name+'"]').classList.add('active');
  renderTab(name);
}

async function renderTab(name){
  const m=document.getElementById('main-content');
  switch(name){
    case'dashboard':m.innerHTML=await dashHTML();break;
    case'accounts':m.innerHTML=await acctsHTML();break;
    case'register':m.innerHTML=regHTML();break;
    case'models':m.innerHTML=modelsHTML();break;
    case'playground':m.innerHTML=playHTML();initPlay();break;
    case'keys':m.innerHTML=await keysHTML();break;
    case'api':m.innerHTML=apiHTML();break;
  }
}

function fmtPct(v){return(v||0).toFixed(1)+'%'}
function fmtCtx(v){return v>=1e6?(v/1e6).toFixed(1)+'M':v>=1000?(v/1000).toFixed(0)+'K':v}
function barColor(v){return v>80?'var(--red)':v>50?'var(--yellow)':'var(--green)'}

// ── Dashboard ──
async function dashHTML(){
  const[health,accts]=await Promise.all([fetchJSON('/health'),fetchJSON('/admin/accounts').catch(()=>({accounts:[]}))]);
  const list=accts.accounts||[];const active=list.filter(a=>a.status==='active');
  const totalCalls=list.reduce((s,a)=>s+(a.callCount||0),0);
  const totalFail=list.reduce((s,a)=>s+(a.failCount||0),0);
  return `<div class="header"><h1>📊 仪表盘</h1></div>
  <div class="stats">
    <div class="stat-card"><div class="label">活跃账号</div><div class="value green">${active.length}</div></div>
    <div class="stat-card"><div class="label">总账号</div><div class="value">${list.length}</div></div>
    <div class="stat-card"><div class="label">总调用</div><div class="value yellow">${totalCalls}</div></div>
    <div class="stat-card"><div class="label">失败</div><div class="value ${totalFail>0?'red':''}">${totalFail}</div></div>
    <div class="stat-card"><div class="label">网关版本</div><div class="value" style="font-size:20px">${health.version||'?'}</div></div>
    <div class="stat-card"><div class="label">运行时间</div><div class="value" style="font-size:20px">${Math.floor((health.uptime||0)/60)}m</div></div>
  </div>
  <div class="panel"><h2>账号用量一览</h2>
  <table><tr><th>邮箱</th><th>调用</th><th>失败</th><th>日配额</th><th>周配额</th><th>月配额</th><th>状态</th></tr>
  ${list.map(a=>`<tr>
    <td>${a.email}</td><td>${a.callCount||0}</td><td>${a.failCount||0}</td>
    <td><div style="display:flex;align-items:center;gap:4px"><div class="usage-bar" style="flex:1"><div style="width:${a.quotaDaily||0}%;background:${barColor(a.quotaDaily||0)}"></div></div>${fmtPct(a.quotaDaily)}</div></td>
    <td>${fmtPct(a.quotaWeekly)}</td><td>${fmtPct(a.quotaMonthly)}</td>
    <td><span class="${a.status==='active'?'green':'red'}">${a.status}</span></td>
  </tr>`).join('')}</table></div>`;}

// ── Accounts ──
async function acctsHTML(){
  const data=await fetchJSON('/admin/accounts').catch(()=>({accounts:[]}));
  const list=data.accounts||[];
  return `<div class="header"><h1>👥 账号池 (${list.length})</h1></div>
  <div class="panel"><h2>📥 批量导入账号</h2>
    <div class="form-group"><label>JSON 格式 — {"accounts":[{"email":"...","token":"..."}]} 或直接数组 [{...}]</label>
    <textarea id="bulkImportText" rows="6" placeholder='{"accounts":[{"email":"a@x.com","token":"eyJ..."},{"email":"b@x.com","token":"eyJ..."}]}' style="font-family:monospace;font-size:12px"></textarea></div>
    <button onclick="bulkImport()">批量导入</button>
    <span id="bulkImportHint" class="muted" style="margin-left:12px;font-size:12px"></span>
  </div>
  <div class="panel"><table>
  <tr><th>邮箱</th><th>Token</th><th>调用</th><th>失败</th><th>日配额</th><th>周配额</th><th>月配额</th><th>冷却</th><th>操作</th></tr>
  ${list.map(a=>`<tr>
    <td>${a.email}</td><td style="font-family:monospace;font-size:11px">${(a.token||'').substring(0,16)}...</td>
    <td>${a.callCount||0}</td><td>${a.failCount||0}</td>
    <td>${fmtPct(a.quotaDaily)}</td><td>${fmtPct(a.quotaWeekly)}</td><td>${fmtPct(a.quotaMonthly)}</td>
    <td>${(data.cooldowns||{})[a.email]||0}m</td>
    <td><button class="small danger" onclick="deleteAcct('${a.email}')">删除</button></td>
  </tr>`).join('')}</table></div>`;}
async function deleteAcct(email){await fetchJSON('/admin/accounts?email='+email,{method:'DELETE'});toast('已删除');showTab('accounts')}
async function bulkImport(){
  const raw=document.getElementById('bulkImportText').value.trim();
  if(!raw)return toast('请粘贴 JSON','error');
  let parsed;
  try{parsed=JSON.parse(raw)}catch(e){return toast('JSON 解析失败: '+e.message,'error')}
  const body=Array.isArray(parsed)?{accounts:parsed}:parsed;
  if(!Array.isArray(body.accounts))return toast('需要 accounts 数组','error');
  const r=await fetchJSON('/admin/import',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify(body)});
  if(r.success){toast(`✅ 导入 ${r.imported} 个，跳过 ${r.skipped}`);showTab('accounts')}
  else toast(r.error?.message||'导入失败','error');
}

// ── Register ──
function regHTML(){return `<div class="header"><h1>📧 注册账号</h1></div>
<div class="panel"><h2>发送验证码</h2>
<div class="form-group"><label>邮箱</label><input id="regEmail" placeholder="user@domain.com"></div>
<button onclick="sendOTP()">发送验证码</button></div>
<div class="panel"><h2>验证并添加</h2>
<div class="form-group"><label>邮箱</label><input id="verEmail"></div>
<div class="form-group"><label>验证码</label><input id="verOTP" placeholder="6位数字"></div>
<button onclick="verifyOTP()">验证并导入</button></div>`;}
async function sendOTP(){
  const e=document.getElementById('regEmail').value.trim();
  if(!e)return toast('请输入邮箱','error');
  const r=await fetchJSON('/admin/register',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({email:e})});
  if(r.success)toast('验证码已发送');else toast(r.error?.message||r.message,'error');
}
async function verifyOTP(){
  const email=document.getElementById('verEmail').value.trim();
  const otp=document.getElementById('verOTP').value.trim();
  if(!email||!otp)return toast('请填写完整','error');
  const r=await fetchJSON('/admin/verify',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({email,otp})});
  if(r.success)toast('✅ 已添加: '+r.tokenPreview);else toast(r.error?.message||r.message,'error');
}

// ── Models ──
async function modelsHTML(){
  const data=await fetchJSON('/v1/models');
  const models=data.data||[];
  const groups={};models.forEach(m=>{const p=m.owned_by;if(!groups[p])groups[p]=[];groups[p].push(m)});
  return `<div class="header"><h1>🧠 模型列表 (${models.length})</h1></div>
  ${Object.entries(groups).map(([prov,list])=>`<div class="panel">
    <h2>${prov.toUpperCase()} (${list.length})</h2>
    <table><tr><th>ID</th><th>上下文</th><th>Input/M</th><th>Output/M</th><th>推理</th></tr>
    ${list.map(m=>`<tr>
      <td>${m.id}</td><td>${fmtCtx(m.ctx||0)}</td>
      <td>$${m.pricing?.prompt||0}</td><td>$${m.pricing?.completion||0}</td>
      <td>${m.reasoning?'✅':''}</td>
    </tr>`).join('')}</table></div>`).join('')}`;}

// ── Playground ──
let chatHistory=[];
function playHTML(){
  return `<div class="header"><h1>💬 对话测试</h1></div>
  <div class="panel">
    <div class="chat-toolbar">
      <select id="chatModel">${MODEL_IDS.map(id=>`<option value="${id}">${id}</option>`).join('')}</select>
      <button class="small" onclick="clearChat()">清空</button>
    </div>
    <div class="chat-box" id="chatBox"><div class="muted" style="text-align:center;padding:40px">输入消息开始测试</div></div>
    <div class="chat-input-row"><input id="chatInput" placeholder="输入消息..." onkeydown="if(event.key==='Enter')sendChat()"><button id="sendBtn" onclick="sendChat()">发送</button></div>
  </div>`;}
function initPlay(){chatHistory=[];document.getElementById('chatModel').value='claude-haiku-4-5'}
async function sendChat(){
  const input=document.getElementById('chatInput');const text=input.value.trim();if(!text)return;
  const model=document.getElementById('chatModel').value;
  input.disabled=true;document.getElementById('sendBtn').disabled=true;
  const box=document.getElementById('chatBox');const mid=Date.now();
  box.innerHTML+=`<div style="margin:8px 0"><span class="accent">You:</span> ${text}</div>`;
  box.innerHTML+=`<div id="msg-${mid}" style="margin:8px 0"><span class="green">AI:</span> <span class="muted">...</span></div>`;
  box.scrollTop=box.scrollHeight;chatHistory.push({role:'user',content:text});
  try{
    const r=await fetchJSON('/v1/chat/completions',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({model,messages:chatHistory,stream:false})});
    if(r.error){document.getElementById('msg-'+mid).innerHTML=`<span class="red">Error:</span> ${r.error.message}`}
    else{
      const reply=r.choices?.[0]?.message?.content||'(empty)';
      document.getElementById('msg-'+mid).innerHTML=`<span class="green">AI:</span> ${reply.replace(/\n/g,'<br>')}`;
      chatHistory.push({role:'assistant',content:reply});
    }
  }catch(e){document.getElementById('msg-'+mid).innerHTML=`<span class="red">Error:</span> ${e.message}`}
  box.scrollTop=box.scrollHeight;input.disabled=false;document.getElementById('sendBtn').disabled=false;input.focus();
}
function clearChat(){chatHistory=[];document.getElementById('chatBox').innerHTML='<div class="muted" style="text-align:center;padding:40px">已清空</div>'}

// ── API Keys ──
async function keysHTML(){
  const data=await fetchJSON('/admin/keys').catch(()=>({keys:[]}));
  const keys=data.keys||[];
  return `<div class="header"><h1>🔑 API Keys (${keys.length})</h1></div>
  <div class="panel"><h2>创建新 Key</h2>
    <div class="form-group"><label>名称</label><input id="newKeyName" placeholder="例如: my-app"></div>
    <button onclick="createKey()">生成 Key</button>
  </div>
  <div class="panel"><h2>已有 Keys</h2>
  <table><tr><th>名称</th><th>Key</th><th>创建时间</th><th>最后使用</th><th>操作</th></tr>
  ${keys.map(k=>`<tr>
    <td>${k.name}</td>
    <td style="font-family:monospace;font-size:11px">${k.key}</td>
    <td>${(k.createdAt||'').substring(0,10)}</td>
    <td>${k.lastUsed?k.lastUsed.substring(0,16):'未使用'}</td>
    <td><button class="small" onclick="navigator.clipboard.writeText('${k.key}');toast('已复制')">📋</button>
        <button class="small danger" onclick="deleteKey('${k.id}')">删除</button></td>
  </tr>`).join('')}</table></div>`;}
async function createKey(){
  const n=document.getElementById('newKeyName').value.trim()||'api-key';
  const r=await fetchJSON('/admin/keys',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({name:n})});
  if(r.key){toast('✅ 已创建: '+r.key);showTab('keys')}else toast('创建失败','error');
}
async function deleteKey(id){await fetchJSON('/admin/keys?id='+id,{method:'DELETE'});toast('已删除');showTab('keys')}

// ── API Doc ──
function apiHTML(){const key=API_KEY||'(未设置)';return`<div class="header"><h1>🔌 API 文档</h1></div>
<div class="panel"><h2>认证</h2><p class="muted">所有 /v1 端点需要 API Key</p>
<pre style="background:var(--bg);padding:12px;border-radius:6px;font-size:12px;overflow-x:auto">Authorization: Bearer ${key}</pre></div>
<div class="panel"><h2>对话补全</h2><pre style="background:var(--bg);padding:12px;border-radius:6px;font-size:12px;overflow-x:auto">curl http://127.0.0.1:${location.port}/v1/chat/completions \\
  -H "Authorization: Bearer ${key}" \\
  -H "Content-Type: application/json" \\
  -d '{"model":"claude-haiku-4-5","messages":[{"role":"user","content":"Hello"}]}'</pre></div>
<div class="panel"><h2>模型列表</h2><pre style="background:var(--bg);padding:12px;border-radius:6px;font-size:12px;overflow-x:auto">curl http://127.0.0.1:${location.port}/v1/models -H "Authorization: Bearer ${key}"</pre></div>
<div class="panel"><h2>健康检查 (无需认证)</h2><pre style="background:var(--bg);padding:12px;border-radius:6px;font-size:12px;overflow-x:auto">curl http://127.0.0.1:${location.port}/health</pre></div>
<div class="panel"><h2>注册账号</h2><pre style="background:var(--bg);padding:12px;border-radius:6px;font-size:12px;overflow-x:auto"># 发送 OTP
curl -X POST http://127.0.0.1:${location.port}/admin/register \\
  -H "Content-Type: application/json" \\
  -d '{"email":"user@domain.com"}'

# 验证并导入
curl -X POST http://127.0.0.1:${location.port}/admin/verify \\
  -H "Content-Type: application/json" \\
  -d '{"email":"user@domain.com","otp":"123456"}'</pre></div>
<div class="panel"><h2>批量导入账号</h2><pre style="background:var(--bg);padding:12px;border-radius:6px;font-size:12px;overflow-x:auto">curl -X POST http://127.0.0.1:${location.port}/admin/import \\
  -H "Content-Type: application/json" \\
  -d '{"accounts":[{"email":"a@x.com","token":"eyJ..."},{"email":"b@x.com","token":"eyJ..."}]}'
# 返回: {"success":true,"imported":2,"skipped":0,"total":2}</pre></div>`}

const MODEL_IDS=['claude-fable-5','claude-opus-4-8','claude-opus-4-7','claude-opus-4-6','claude-sonnet-4-6','claude-haiku-4-5','gpt-5.5','gpt-5.4','gpt-5.3-codex','gpt-5.3-chat','gpt-5.4-mini','gpt-5.4-nano','gemini-3.1-pro','gemini-3.5-flash','gemini-3-flash','gemini-3.1-flash-lite','deepseek-v4-pro','deepseek-v4-flash','kimi-k2.7-code','kimi-k2.6','kimi-k2.5','qwen3-32b','qwen3-coder','glm-5.2','glm-5.1','glm-5v-turbo','minimax-m3','minimax-m2.7','minimax-m2','mimo-v2.5-pro','mimo-v2.5'];

showTab('dashboard');
</script>
</body>
</html>