evalstone/webui/static/index.html

238 lines
8.7 KiB
HTML
Raw Permalink Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>EvalStone Launch</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="/static/styles.css" />
</head>
<body>
<div class="page">
<header class="top">
<div class="brand">
<span class="brand-mark"></span>
<div>
<h1>EvalStone Launch</h1>
<p>基于 <code>bash/run.py</code> 的评测启动台</p>
</div>
</div>
<div class="top-right">
<nav class="nav-tabs">
<a href="/" class="active">启动台</a>
<a href="/results">结果分析</a>
</nav>
<div class="health">
<span id="healthDot" class="dot"></span>
<span id="healthText">connecting…</span>
</div>
</div>
</header>
<!-- Top action bar -->
<section class="action-bar">
<label class="field-grow">
<span>Model</span>
<input id="model" placeholder="DeepSeek-V4-Flash-Int8" />
</label>
<label class="field-grow">
<span>API URL</span>
<input id="api_url" placeholder="http://localhost:30000/v1" />
</label>
<label>
<span>API Key</span>
<input id="api_key" type="password" placeholder="EMPTY" />
</label>
<label class="switch-inline">
<input type="checkbox" id="thinking" />
<span class="switch-slider"></span>
<span class="switch-label">Thinking</span>
</label>
<div class="action-btns">
<button type="button" id="launchBtn" class="primary">▶ 启动</button>
<button type="button" id="stopBtn" class="danger" disabled>■ 停止</button>
</div>
</section>
<main class="layout">
<!-- Left: configuration tabs -->
<section class="panel main-panel">
<div class="tabs" role="tablist">
<button type="button" class="tab active" data-tab="scope">评测范围</button>
<button type="button" class="tab" data-tab="config">路径配置</button>
<button type="button" class="tab" data-tab="advanced">高级参数</button>
</div>
<!-- Scope tab -->
<div id="scopeTab" class="tab-pane active">
<div class="mode-bar">
<span class="mode-label">选择方式</span>
<div class="mode-toggle">
<button type="button" class="mode-btn active" data-mode="suite">按 Suite</button>
<button type="button" class="mode-btn" data-mode="datasets">自选 Benchmark</button>
</div>
<span id="scopeEstimate" class="estimate"></span>
</div>
<div id="suitePane">
<div class="section-title">内置 Suite</div>
<div id="suiteList" class="suite-grid"></div>
<div class="section-title flex-between">
<span>自定义组合</span>
<span id="customSuiteHint" class="hint">在「自选」模式勾选并保存</span>
</div>
<div id="customSuiteList" class="suite-grid"></div>
</div>
<div id="datasetsPane" class="hidden">
<div class="bench-toolbar">
<input id="benchSearch" class="search" placeholder="搜索 benchmark…" />
<button type="button" id="selectAllBtn" class="ghost">全选</button>
<button type="button" id="clearAllBtn" class="ghost">清空</button>
<button type="button" id="saveCustomBtn" class="ghost">保存组合</button>
<span id="selectedCount" class="counter">已选 0</span>
</div>
<div id="categoryFilters" class="category-chips"></div>
<div id="benchmarkList" class="benchmark-grid"></div>
</div>
</div>
<!-- Config tab -->
<div id="configTab" class="tab-pane">
<div class="path-grid">
<label class="full">
<span>Dataset Dir <small class="muted">evalscope 会自动在其下找 datasets/</small></span>
<input id="dataset_dir" />
</label>
<label class="full">
<span>Output Dir</span>
<input id="output_dir" />
</label>
<label class="full">
<span>Config YAML</span>
<input id="config" />
</label>
<label class="full">
<span>Tokenizer Path</span>
<input id="tokenizer_path" />
</label>
</div>
<div class="preset-bar">
<span class="muted">路径预设</span>
<button type="button" class="ghost" id="presetDefaultBtn">默认</button>
<button type="button" class="ghost" id="presetCurrentBtn">保存当前</button>
<button type="button" class="ghost" id="presetLoadBtn">加载预设</button>
</div>
</div>
<!-- Advanced tab -->
<div id="advancedTab" class="tab-pane">
<div class="grid-4">
<label>
<span>Folder Name</span>
<input id="folder_name" placeholder="默认 model / model_THINKING" />
</label>
<label>
<span>Limit</span>
<input id="limit" placeholder="none" />
</label>
<label>
<span>Seed</span>
<input type="number" id="seed" value="42" />
</label>
<label>
<span>Batch Size</span>
<input type="number" id="batch_size" value="4" min="1" />
</label>
<label>
<span>max_tokens_add</span>
<input type="number" id="max_tokens_add" value="0" min="0" step="1024" />
</label>
<label>
<span>thinking scale</span>
<input type="number" id="thinking_max_tokens_scale" value="1.0" min="0.1" step="0.1" />
</label>
<label>
<span>Write Summary</span>
<select id="write_summary">
<option value="true" selected></option>
<option value="false"></option>
</select>
</label>
</div>
<details class="fold">
<summary>Judge 模型配置</summary>
<div class="grid-2 mt">
<label>
<span>Judge Model</span>
<input id="judge_model" />
</label>
<label>
<span>Judge API URL</span>
<input id="judge_api_url" />
</label>
<label>
<span>Judge API Key</span>
<input id="judge_api_key" type="password" />
</label>
<label>
<span>Judge Max Tokens</span>
<input type="number" id="judge_max_tokens" />
</label>
</div>
</details>
</div>
<div id="formMsg" class="form-msg"></div>
</section>
<!-- Right: status panel -->
<section class="panel status-panel">
<div class="active-head">
<h2>运行状态</h2>
<span id="activeStatus" class="badge idle">idle</span>
</div>
<div id="activeCard" class="active-card idle">
<div class="active-id"><code id="activeJobId"></code></div>
<div class="progress-wrap">
<div id="progressBar" class="progress-bar" style="width:0%"></div>
</div>
<div id="progressText" class="progress-text"></div>
</div>
<div class="cmd-wrap">
<div class="cmd-head">
<span>命令预览</span>
<button type="button" id="copyCmdBtn" class="ghost" disabled>复制</button>
</div>
<pre id="activeCmd" class="cmd">尚未启动任务</pre>
</div>
<div class="log-wrap">
<div class="log-head">
<span>实时日志</span>
<label class="check-inline">
<input type="checkbox" id="autoScroll" checked />
自动滚动
</label>
</div>
<pre id="logView" class="log-view"></pre>
</div>
<div class="jobs-wrap">
<div class="jobs-head">
<h3>历史任务</h3>
<button type="button" id="refreshJobsBtn" class="ghost">刷新</button>
</div>
<div id="jobList" class="job-list"></div>
</div>
</section>
</main>
</div>
<script src="/static/app.js?v=2"></script>
</body>
</html>