index.html
2.93 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>MiniMax 视频生成测试台</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<header class="topbar">
<h1>MiniMax 视频生成测试台</h1>
<div class="spacer"></div>
<label class="small">API Key</label>
<input type="password" id="apiKeyInput" placeholder="sk-api-..." />
<button class="secondary" id="saveKeyBtn">保存</button>
</header>
<div class="layout">
<aside class="sidebar">
<div class="toolbar">
<input type="search" id="searchInput" placeholder="搜索 prompt..." />
<select id="statusFilter">
<option value="">全部状态</option>
<option value="Processing">生成中</option>
<option value="succeeded">成功</option>
<option value="failed">失败</option>
<option value="cancelled">取消</option>
</select>
<select id="modelFilter">
<option value="">全部模型</option>
<option value="MiniMax-H3">MiniMax-H3</option>
<option value="MiniMax-H3-Max">MiniMax-H3-Max</option>
</select>
<select id="sortSelect">
<option value="created_desc">创建时间 ↓</option>
<option value="created_asc">创建时间 ↑</option>
<option value="elapsed_asc">耗时 ↑</option>
<option value="elapsed_desc">耗时 ↓</option>
</select>
<button id="newTaskBtn">+ 新建任务</button>
</div>
<div class="task-list" id="taskList"></div>
</aside>
<main class="main">
<div class="stat-grid" id="statGrid"></div>
<div class="empty-hint">点击左侧任务查看详情，或新建一个任务。</div>
</main>
</div>
<script src="app.js"></script>
<script>
const apiKeyInput = document.getElementById("apiKeyInput");
apiKeyInput.value = getApiKey();
document.getElementById("saveKeyBtn").onclick = (e) => {
setApiKey(apiKeyInput.value);
const btn = e.currentTarget;
const old = btn.textContent;
btn.textContent = "已保存 ✓";
setTimeout(() => (btn.textContent = old), 1200);
};
function renderStats() {
const tasks = getTasks();
const done = tasks.filter((t) => t.status === "succeeded" && t.submittedAt && t.completedAt);
const byModel = {};
done.forEach((t) => {
(byModel[t.model] ||= []).push(t.completedAt - t.submittedAt);
});
const cards = [
{ label: "任务总数", value: tasks.length },
{ label: "生成中", value: tasks.filter((t) => t.status === "Processing").length },
{ label: "成功", value: done.length },
];
Object.entries(byModel).forEach(([model, arr]) => {
const avg = arr.reduce((a, b) => a + b, 0) / arr.length;
cards.push({ label: `${model} 平均耗时`, value: fmtElapsed(avg) });
});
document.getElementById("statGrid").innerHTML = cards
.map((c) => `<div class="stat-card"><div class="label">${c.label}</div><div class="value">${c.value}</div></div>`)
.join("");
}
initSidebar(null, renderStats);
</script>
</body>
</html>