feat(report): 重构统计报告，增加效率分析并采用MD3设计
本次更新对统计报告进行了全面的重构和视觉升级，旨在提供更深入的数据洞察和更现代化的用户体验。 主要变更包括： - **新增效率分析模块**: 引入了一系列关键的大模型效率指标，如单条消息成本、Token效率（输出/输入比）、每小时成本/请求数等，并通过新的表格进行详细展示。 - **全新UI设计**: 整体界面采用Material Design 3 (MD3) 风格重新设计，优化了色彩、字体、间距和卡片样式，提升了报告的专业性和可读性。 - **图表功能增强**: 动态图表和静态图表均进行了美化，更新了配色方案，增加了平滑的加载动画和交互效果。饼图升级为更易读的甜甜圈图，并优化了工具提示信息。 - **内容和布局优化**: 增加了更多的摘要卡片以快速概览核心数据。为各个板块标题添加了 Emoji 图标，使信息层次更清晰，并优化了整体布局。
This commit is contained in:
minecraft1024a
@@ -135,27 +135,123 @@ class HTMLReportGenerator:
|
||||
for chat_id, count in sorted(stat_data[MSG_CNT_BY_CHAT].items())
|
||||
]
|
||||
)
|
||||
|
||||
# 先计算基础数据
|
||||
total_tokens = sum(stat_data.get(TOTAL_TOK_BY_MODEL, {}).values())
|
||||
total_requests = stat_data.get(TOTAL_REQ_CNT, 0)
|
||||
total_cost = stat_data.get(TOTAL_COST, 0)
|
||||
total_messages = stat_data.get(TOTAL_MSG_CNT, 0)
|
||||
online_seconds = stat_data.get(ONLINE_TIME, 0)
|
||||
online_hours = online_seconds / 3600 if online_seconds > 0 else 0
|
||||
|
||||
# 大模型相关效率指标
|
||||
avg_cost_per_req = (total_cost / total_requests) if total_requests > 0 else 0
|
||||
avg_cost_per_msg = (total_cost / total_messages) if total_messages > 0 else 0
|
||||
avg_tokens_per_msg = (total_tokens / total_messages) if total_messages > 0 else 0
|
||||
avg_tokens_per_req = (total_tokens / total_requests) if total_requests > 0 else 0
|
||||
msg_to_req_ratio = (total_messages / total_requests) if total_requests > 0 else 0
|
||||
cost_per_hour = (total_cost / online_hours) if online_hours > 0 else 0
|
||||
req_per_hour = (total_requests / online_hours) if online_hours > 0 else 0
|
||||
|
||||
# Token效率 (输出/输入比率)
|
||||
total_in_tokens = sum(stat_data.get(IN_TOK_BY_MODEL, {}).values())
|
||||
total_out_tokens = sum(stat_data.get(OUT_TOK_BY_MODEL, {}).values())
|
||||
token_efficiency = (total_out_tokens / total_in_tokens) if total_in_tokens > 0 else 0
|
||||
|
||||
# 生成效率指标表格数据
|
||||
efficiency_data = [
|
||||
("💸 平均每条消息成本", f"{avg_cost_per_msg:.6f} ¥", "处理每条用户消息的平均AI成本"),
|
||||
("🎯 平均每条消息Token", f"{avg_tokens_per_msg:.0f}", "每条消息平均消耗的Token数量"),
|
||||
("📊 平均每次请求Token", f"{avg_tokens_per_req:.0f}", "每次AI请求平均消耗的Token数"),
|
||||
("🔄 消息/请求比率", f"{msg_to_req_ratio:.2f}", "平均每个AI请求处理的消息数"),
|
||||
("⚡ Token效率(输出/输入)", f"{token_efficiency:.3f}x", "输出Token与输入Token的比率"),
|
||||
("💵 每小时运行成本", f"{cost_per_hour:.4f} ¥/h", "在线每小时的AI成本"),
|
||||
("🚀 每小时请求数", f"{req_per_hour:.1f} 次/h", "在线每小时的AI请求次数"),
|
||||
("💰 每千Token成本", f"{(total_cost / total_tokens * 1000) if total_tokens > 0 else 0:.4f} ¥", "平均每1000个Token的成本"),
|
||||
("📈 Token/在线小时", f"{(total_tokens / online_hours) if online_hours > 0 else 0:.0f}", "每在线小时处理的Token数"),
|
||||
("💬 消息/在线小时", f"{(total_messages / online_hours) if online_hours > 0 else 0:.1f}", "每在线小时处理的消息数"),
|
||||
]
|
||||
|
||||
efficiency_rows = "\n".join(
|
||||
[
|
||||
f"<tr><td style='font-weight: 500;'>{metric}</td><td style='color: #1976D2; font-weight: 600; font-size: 1.1em;'>{value}</td><td style='color: #546E7A;'>{desc}</td></tr>"
|
||||
for metric, value, desc in efficiency_data
|
||||
]
|
||||
)
|
||||
|
||||
# 计算活跃聊天数和最活跃聊天
|
||||
msg_by_chat = stat_data.get(MSG_CNT_BY_CHAT, {})
|
||||
active_chats = len(msg_by_chat)
|
||||
most_active_chat = ""
|
||||
if msg_by_chat:
|
||||
most_active_id = max(msg_by_chat, key=msg_by_chat.get)
|
||||
most_active_chat = self.name_mapping.get(most_active_id, (most_active_id, 0))[0]
|
||||
most_active_count = msg_by_chat[most_active_id]
|
||||
most_active_chat = f"{most_active_chat} ({most_active_count}条)"
|
||||
|
||||
avg_msg_per_chat = (total_messages / active_chats) if active_chats > 0 else 0
|
||||
|
||||
summary_cards = f"""
|
||||
<div class="summary-cards">
|
||||
<div class="card">
|
||||
<h3>总花费</h3>
|
||||
<p>{stat_data.get(TOTAL_COST, 0):.4f} ¥</p>
|
||||
<h3>💰 总花费</h3>
|
||||
<p>{total_cost:.4f} ¥</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<h3>总请求数</h3>
|
||||
<p>{stat_data.get(TOTAL_REQ_CNT, 0)}</p>
|
||||
<h3>📞 AI请求数</h3>
|
||||
<p>{total_requests:,}</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<h3>总Token数</h3>
|
||||
<p>{sum(stat_data.get(TOTAL_TOK_BY_MODEL, {}).values())}</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<h3>总消息数</h3>
|
||||
<p>{stat_data.get(TOTAL_MSG_CNT, 0)}</p>
|
||||
<h3>🎯 总Token数</h3>
|
||||
<p>{total_tokens:,}</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<h3>总在线时间</h3>
|
||||
<p>{format_online_time(int(stat_data.get(ONLINE_TIME, 0)))}</p>
|
||||
<h3>💬 总消息数</h3>
|
||||
<p>{total_messages:,}</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<h3>⏱️ 在线时间</h3>
|
||||
<p>{format_online_time(int(online_seconds))}</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<h3>💸 每条消息成本</h3>
|
||||
<p>{avg_cost_per_msg:.4f} ¥</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<h3>📊 每请求Token</h3>
|
||||
<p>{avg_tokens_per_req:.0f}</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<h3><3E> 消息/请求比</h3>
|
||||
<p>{msg_to_req_ratio:.2f}</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<h3>⚡ Token效率</h3>
|
||||
<p>{token_efficiency:.2f}x</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<h3>💵 每小时成本</h3>
|
||||
<p>{cost_per_hour:.4f} ¥</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<h3>🚀 每小时请求</h3>
|
||||
<p>{req_per_hour:.1f}</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<h3>👥 活跃聊天数</h3>
|
||||
<p>{active_chats}</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<h3>🔥 最活跃聊天</h3>
|
||||
<p style="font-size: 1.2em;">{most_active_chat if most_active_chat else "无"}</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<h3>📈 平均消息/聊天</h3>
|
||||
<p>{avg_msg_per_chat:.1f}</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<h3>🎯 每消息Token</h3>
|
||||
<p>{avg_tokens_per_msg:.0f}</p>
|
||||
</div>
|
||||
</div>
|
||||
"""
|
||||
@@ -173,6 +269,7 @@ class HTMLReportGenerator:
|
||||
module_rows=module_rows,
|
||||
type_rows=type_rows,
|
||||
chat_rows=chat_rows,
|
||||
efficiency_rows=efficiency_rows,
|
||||
)
|
||||
|
||||
def _generate_chart_tab(self, chart_data: dict) -> str:
|
||||
|
||||
@@ -61,3 +61,18 @@ PIE_CHART_COST_BY_PROVIDER = "pie_chart_cost_by_provider"
|
||||
PIE_CHART_REQ_BY_PROVIDER = "pie_chart_req_by_provider"
|
||||
BAR_CHART_COST_BY_MODEL = "bar_chart_cost_by_model"
|
||||
BAR_CHART_REQ_BY_MODEL = "bar_chart_req_by_model"
|
||||
|
||||
# 新增消息分析指标
|
||||
MSG_CNT_BY_USER = "messages_by_user" # 按用户的消息数
|
||||
ACTIVE_CHATS_CNT = "active_chats_count" # 活跃聊天数
|
||||
MOST_ACTIVE_CHAT = "most_active_chat" # 最活跃的聊天
|
||||
AVG_MSG_PER_CHAT = "avg_messages_per_chat" # 平均每个聊天的消息数
|
||||
|
||||
# 新增大模型效率指标
|
||||
AVG_COST_PER_MSG = "avg_cost_per_message" # 平均每条消息成本
|
||||
AVG_TOKENS_PER_MSG = "avg_tokens_per_message" # 平均每条消息Token数
|
||||
AVG_TOKENS_PER_REQ = "avg_tokens_per_request" # 平均每次请求Token数
|
||||
MSG_TO_REQ_RATIO = "message_to_request_ratio" # 消息/请求比率
|
||||
COST_PER_ONLINE_HOUR = "cost_per_online_hour" # 每小时在线成本
|
||||
REQ_PER_ONLINE_HOUR = "requests_per_online_hour" # 每小时请求数
|
||||
TOKEN_EFFICIENCY = "token_efficiency" # Token效率 (输出/输入比率)
|
||||
|
||||
@@ -1,16 +1,27 @@
|
||||
<div id="charts" class="tab-content">
|
||||
<h2>数据图表</h2>
|
||||
<div style="margin: 20px 0; text-align: center;">
|
||||
<label style="margin-right: 10px; font-weight: bold;">时间范围:</label>
|
||||
<h2>📈 数据图表</h2>
|
||||
<p class="info-item">
|
||||
<strong>📊 动态图表:</strong> 选择不同的时间范围查看数据趋势变化
|
||||
</p>
|
||||
<div style="margin: 30px 0; text-align: center;">
|
||||
<label style="margin-right: 15px; font-weight: 600; font-size: 16px; color: var(--md-sys-color-primary);">⏰ 时间范围:</label>
|
||||
<button class="time-range-btn" onclick="switchTimeRange('6h')">6小时</button>
|
||||
<button class="time-range-btn" onclick="switchTimeRange('12h')">12小时</button>
|
||||
<button class="time-range-btn" onclick="switchTimeRange('24h')">24小时</button>
|
||||
<button class="time-range-btn" onclick="switchTimeRange('48h')">48小时</button>
|
||||
</div>
|
||||
<div style="margin-top: 20px;">
|
||||
<div style="margin-bottom: 40px;"><canvas id="totalCostChart" width="800" height="400"></canvas></div>
|
||||
<div style="margin-bottom: 40px;"><canvas id="costByModuleChart" width="800" height="400"></canvas></div>
|
||||
<div style="margin-bottom: 40px;"><canvas id="costByModelChart" width="800" height="400"></canvas></div>
|
||||
<div><canvas id="messageByChatChart" width="800" height="400"></canvas></div>
|
||||
<div style="margin-top: 30px; display: flex; flex-direction: column; gap: 32px;">
|
||||
<div class="chart-wrapper">
|
||||
<canvas id="totalCostChart" style="max-height: 350px;"></canvas>
|
||||
</div>
|
||||
<div class="chart-wrapper">
|
||||
<canvas id="costByModuleChart" style="max-height: 350px;"></canvas>
|
||||
</div>
|
||||
<div class="chart-wrapper">
|
||||
<canvas id="costByModelChart" style="max-height: 350px;"></canvas>
|
||||
</div>
|
||||
<div class="chart-wrapper">
|
||||
<canvas id="messageByChatChart" style="max-height: 350px;"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,111 +1,164 @@
|
||||
/* Material Design 3 - Blue White Gray Theme */
|
||||
:root {
|
||||
--md-sys-color-primary: #1976D2;
|
||||
--md-sys-color-primary-container: #E3F2FD;
|
||||
--md-sys-color-on-primary: #FFFFFF;
|
||||
--md-sys-color-secondary: #546E7A;
|
||||
--md-sys-color-secondary-container: #ECEFF1;
|
||||
--md-sys-color-surface: #FFFFFF;
|
||||
--md-sys-color-surface-variant: #F5F5F5;
|
||||
--md-sys-color-background: #FAFAFA;
|
||||
--md-sys-color-on-surface: #1C1B1F;
|
||||
--md-sys-color-outline: #BDBDBD;
|
||||
--md-sys-color-shadow: rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
/* General Body Styles */
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
||||
font-family: 'Roboto', -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
|
||||
margin: 0;
|
||||
padding: 20px;
|
||||
background-color: #f0f4f8; /* Light blue-gray background */
|
||||
color: #333; /* Darker text for better contrast */
|
||||
background: var(--md-sys-color-background);
|
||||
color: var(--md-sys-color-on-surface);
|
||||
line-height: 1.6;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
/* Main Container */
|
||||
.container {
|
||||
max-width: 95%; /* Make container almost full-width */
|
||||
max-width: 95%;
|
||||
margin: 20px auto;
|
||||
background-color: #FFFFFF; /* Pure white background */
|
||||
padding: 30px;
|
||||
border-radius: 12px; /* Slightly more rounded corners */
|
||||
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.07); /* Softer, deeper shadow */
|
||||
background-color: var(--md-sys-color-surface);
|
||||
padding: 40px;
|
||||
border-radius: 28px;
|
||||
box-shadow: 0 4px 16px var(--md-sys-color-shadow);
|
||||
animation: slideIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
@keyframes slideIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-8px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
/* Dashboard Layout */
|
||||
.dashboard-layout {
|
||||
display: flex;
|
||||
gap: 30px;
|
||||
flex-direction: column;
|
||||
gap: 32px;
|
||||
}
|
||||
|
||||
.main-content {
|
||||
flex: 65%;
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.sidebar-content {
|
||||
flex: 35%;
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
/* Responsive Design for Mobile */
|
||||
@media (max-width: 992px) {
|
||||
.dashboard-layout {
|
||||
flex-direction: column;
|
||||
}
|
||||
.main-content, .sidebar-content {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
/* Typography */
|
||||
/* Typography - Material Design 3 */
|
||||
h1, h2 {
|
||||
color: #212529;
|
||||
color: var(--md-sys-color-on-surface);
|
||||
padding-bottom: 10px;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
h1 {
|
||||
text-align: center;
|
||||
font-size: 2.2em;
|
||||
margin-bottom: 20px;
|
||||
color: #2A6CB5; /* A deeper, more professional blue */
|
||||
font-size: 2.5em;
|
||||
margin-bottom: 30px;
|
||||
color: var(--md-sys-color-primary);
|
||||
font-weight: 500;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.5em;
|
||||
margin-top: 40px;
|
||||
margin-bottom: 15px;
|
||||
border-bottom: 2px solid #DDE6ED; /* Lighter border color */
|
||||
margin-bottom: 20px;
|
||||
border-bottom: 2px solid var(--md-sys-color-primary);
|
||||
padding-bottom: 12px;
|
||||
color: var(--md-sys-color-on-surface);
|
||||
font-weight: 500;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
/* Info Banners */
|
||||
/* Info Banners - MD3 Style */
|
||||
.info-item {
|
||||
background-color: #E9F2FA; /* Light blue background */
|
||||
padding: 12px 18px;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 20px;
|
||||
background: var(--md-sys-color-primary-container);
|
||||
padding: 16px 24px;
|
||||
border-radius: 16px;
|
||||
margin-bottom: 24px;
|
||||
font-size: 0.95em;
|
||||
border: 1px solid #D1E3F4; /* Light blue border */
|
||||
border-left: 4px solid var(--md-sys-color-primary);
|
||||
box-shadow: 0 1px 3px var(--md-sys-color-shadow);
|
||||
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.info-item:hover {
|
||||
box-shadow: 0 2px 6px var(--md-sys-color-shadow);
|
||||
}
|
||||
|
||||
.info-item strong {
|
||||
color: #2A6CB5; /* Deeper blue for emphasis */
|
||||
color: var(--md-sys-color-primary);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* Tabs */
|
||||
/* Tabs - MD3 Style */
|
||||
.tabs {
|
||||
border-bottom: 2px solid #DEE2E6;
|
||||
border-bottom: 1px solid var(--md-sys-color-outline);
|
||||
display: flex;
|
||||
margin-bottom: 20px;
|
||||
margin-bottom: 32px;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.tabs button {
|
||||
background: none;
|
||||
border: none;
|
||||
outline: none;
|
||||
padding: 14px 20px;
|
||||
padding: 16px 24px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
font-size: 16px;
|
||||
color: #6C757D;
|
||||
border-bottom: 3px solid transparent;
|
||||
margin-bottom: -2px; /* Align with container border */
|
||||
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
font-size: 14px;
|
||||
color: var(--md-sys-color-on-surface);
|
||||
border-radius: 16px 16px 0 0;
|
||||
margin-bottom: -1px;
|
||||
font-weight: 500;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.tabs button::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 3px;
|
||||
background: var(--md-sys-color-primary);
|
||||
transform: scaleX(0);
|
||||
transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.tabs button:hover {
|
||||
color: #2A6CB5;
|
||||
background-color: #f0f4f8; /* Subtle hover background */
|
||||
background: var(--md-sys-color-surface-variant);
|
||||
}
|
||||
|
||||
.tabs button.active {
|
||||
color: #2A6CB5; /* Active tab color */
|
||||
border-bottom-color: #2A6CB5; /* Active tab border color */
|
||||
color: var(--md-sys-color-primary);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.tabs button.active::after {
|
||||
transform: scaleX(1);
|
||||
}
|
||||
|
||||
.tab-content {
|
||||
@@ -117,83 +170,277 @@ h2 {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Summary Cards */
|
||||
/* Summary Cards - MD3 Style */
|
||||
.summary-cards {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
|
||||
gap: 20px;
|
||||
margin: 20px 0;
|
||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||
gap: 16px;
|
||||
margin: 32px 0;
|
||||
}
|
||||
|
||||
.card {
|
||||
background-color: #FFFFFF;
|
||||
padding: 20px;
|
||||
border-radius: 8px;
|
||||
background: var(--md-sys-color-surface);
|
||||
padding: 24px;
|
||||
border-radius: 16px;
|
||||
text-align: center;
|
||||
border: 1px solid #DDE6ED; /* Lighter border */
|
||||
transition: all 0.3s ease;
|
||||
border: 1px solid var(--md-sys-color-outline);
|
||||
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
box-shadow: 0 1px 3px var(--md-sys-color-shadow);
|
||||
}
|
||||
|
||||
.card:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 6px 15px rgba(0,0,0,0.08);
|
||||
box-shadow: 0 4px 12px var(--md-sys-color-shadow);
|
||||
transform: translateY(-4px);
|
||||
border-color: var(--md-sys-color-primary);
|
||||
}
|
||||
|
||||
.card h3 {
|
||||
margin: 0 0 10px;
|
||||
font-size: 1em;
|
||||
color: #6C757D;
|
||||
margin: 0 0 16px;
|
||||
font-size: 0.875rem;
|
||||
color: var(--md-sys-color-secondary);
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.1px;
|
||||
}
|
||||
|
||||
.card p {
|
||||
margin: 0;
|
||||
font-size: 1.8em;
|
||||
font-weight: bold;
|
||||
color: #212529;
|
||||
font-size: 2rem;
|
||||
font-weight: 600;
|
||||
color: var(--md-sys-color-primary);
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
/* Tables */
|
||||
/* Tables - MD3 Style */
|
||||
table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
margin-top: 15px;
|
||||
font-size: 0.9em;
|
||||
margin-top: 24px;
|
||||
font-size: 0.875rem;
|
||||
border-radius: 16px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 1px 3px var(--md-sys-color-shadow);
|
||||
border: 1px solid var(--md-sys-color-outline);
|
||||
}
|
||||
|
||||
th, td {
|
||||
padding: 12px 15px;
|
||||
padding: 16px;
|
||||
text-align: left;
|
||||
border-bottom: 1px solid #EAEAEA;
|
||||
border-bottom: 1px solid var(--md-sys-color-outline);
|
||||
}
|
||||
|
||||
th {
|
||||
background-color: #4A90E2; /* Main theme blue */
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
font-size: 0.95em;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
background: var(--md-sys-color-primary);
|
||||
color: var(--md-sys-color-on-primary);
|
||||
font-weight: 500;
|
||||
font-size: 0.875rem;
|
||||
letter-spacing: 0.1px;
|
||||
}
|
||||
|
||||
tbody tr {
|
||||
transition: background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
tr:nth-child(even) {
|
||||
background-color: #F7FAFC; /* Very light blue for alternate rows */
|
||||
background-color: var(--md-sys-color-surface-variant);
|
||||
}
|
||||
|
||||
tr:hover {
|
||||
background-color: #E9F2FA; /* Light blue for hover */
|
||||
tbody tr:hover {
|
||||
background-color: var(--md-sys-color-primary-container);
|
||||
}
|
||||
|
||||
/* Chart Container in Sidebar */
|
||||
/* Chart Container - MD3 Style */
|
||||
.chart-container {
|
||||
position: relative;
|
||||
height: 300px; /* Adjust height as needed */
|
||||
width: 100%;
|
||||
margin-bottom: 20px;
|
||||
padding: 24px;
|
||||
background: var(--md-sys-color-surface);
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 1px 3px var(--md-sys-color-shadow);
|
||||
border: 1px solid var(--md-sys-color-outline);
|
||||
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
/* Footer */
|
||||
.chart-container:hover {
|
||||
box-shadow: 0 4px 12px var(--md-sys-color-shadow);
|
||||
}
|
||||
|
||||
.chart-container canvas {
|
||||
max-width: 100%;
|
||||
height: auto !important;
|
||||
}
|
||||
|
||||
/* Chart Wrapper for dynamic charts */
|
||||
.chart-wrapper {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 350px;
|
||||
padding: 24px;
|
||||
background: var(--md-sys-color-surface);
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 1px 3px var(--md-sys-color-shadow);
|
||||
border: 1px solid var(--md-sys-color-outline);
|
||||
}
|
||||
|
||||
.chart-wrapper canvas {
|
||||
max-height: 300px !important;
|
||||
}
|
||||
|
||||
.chart-grid {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24px;
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
/* Time Range Buttons - MD3 Filled Button */
|
||||
.time-range-btn {
|
||||
background: var(--md-sys-color-primary);
|
||||
color: var(--md-sys-color-on-primary);
|
||||
border: none;
|
||||
padding: 10px 24px;
|
||||
margin: 0 8px;
|
||||
border-radius: 20px;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
box-shadow: 0 1px 3px var(--md-sys-color-shadow);
|
||||
}
|
||||
|
||||
.time-range-btn:hover {
|
||||
box-shadow: 0 2px 6px var(--md-sys-color-shadow);
|
||||
}
|
||||
|
||||
.time-range-btn.active {
|
||||
background: var(--md-sys-color-secondary);
|
||||
box-shadow: 0 2px 6px var(--md-sys-color-shadow);
|
||||
}
|
||||
|
||||
/* Statistics Badge - MD3 */
|
||||
.stat-badge {
|
||||
display: inline-block;
|
||||
padding: 4px 12px;
|
||||
background: var(--md-sys-color-primary-container);
|
||||
color: var(--md-sys-color-primary);
|
||||
border-radius: 16px;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
/* Loading Animation */
|
||||
@keyframes pulse {
|
||||
0%, 100% {
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
.loading {
|
||||
animation: pulse 1.5s ease-in-out infinite;
|
||||
}
|
||||
|
||||
/* Scrollbar Styling - MD3 */
|
||||
::-webkit-scrollbar {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: var(--md-sys-color-surface-variant);
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: var(--md-sys-color-primary);
|
||||
border-radius: 8px;
|
||||
border: 2px solid var(--md-sys-color-surface-variant);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: var(--md-sys-color-secondary);
|
||||
}
|
||||
|
||||
/* Footer - MD3 */
|
||||
.footer {
|
||||
text-align: center;
|
||||
margin-top: 40px;
|
||||
font-size: 0.85em;
|
||||
color: #6C757D;
|
||||
margin-top: 48px;
|
||||
padding-top: 24px;
|
||||
border-top: 1px solid var(--md-sys-color-outline);
|
||||
font-size: 0.875rem;
|
||||
color: var(--md-sys-color-secondary);
|
||||
}
|
||||
|
||||
.footer p {
|
||||
margin: 8px 0;
|
||||
}
|
||||
|
||||
/* Responsive Design */
|
||||
@media (max-width: 768px) {
|
||||
.container {
|
||||
padding: 20px;
|
||||
border-radius: 16px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.25em;
|
||||
}
|
||||
|
||||
.summary-cards {
|
||||
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.card {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.card h3 {
|
||||
font-size: 0.8rem;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.card p {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
table {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
th, td {
|
||||
padding: 12px 8px;
|
||||
}
|
||||
|
||||
.tabs button {
|
||||
padding: 12px 16px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.time-range-btn {
|
||||
padding: 8px 16px;
|
||||
margin: 4px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.chart-wrapper,
|
||||
.chart-container {
|
||||
height: 250px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.summary-cards {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
|
||||
.card p {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -4,15 +4,21 @@
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>{{ report_title }}</title>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
|
||||
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
||||
<style>{{ report_css }}</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<h1>{{ report_title }}</h1>
|
||||
<p class="info-item"><strong>统计截止时间:</strong> {{ generation_time }}</p>
|
||||
<p class="info-item"><strong>📅 统计截止时间:</strong> {{ generation_time }}</p>
|
||||
<div class="tabs">{{ tab_list }}</div>
|
||||
{{ tab_content }}
|
||||
<div class="footer">
|
||||
<p>💡 提示: 点击图表上的图例可以切换数据显示 | 🔄 数据每5分钟自动更新一次</p>
|
||||
<p style="margin-top: 10px; color: #999;">Powered by MoFox-Bot Statistics Engine</p>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
const all_chart_data_json_string = `{{ all_chart_data|safe }}`;
|
||||
|
||||
@@ -3,10 +3,17 @@ tab_content = document.getElementsByClassName("tab-content");
|
||||
tab_links = document.getElementsByClassName("tab-link");
|
||||
if (tab_content.length > 0) tab_content[0].classList.add("active");
|
||||
if (tab_links.length > 0) tab_links[0].classList.add("active");
|
||||
|
||||
function showTab(evt, tabName) {
|
||||
for (i = 0; i < tab_content.length; i++) tab_content[i].classList.remove("active");
|
||||
for (i = 0; i < tab_links.length; i++) tab_links[i].classList.remove("active");
|
||||
for (i = 0; i < tab_content.length; i++) {
|
||||
tab_content[i].classList.remove("active");
|
||||
tab_content[i].style.animation = '';
|
||||
}
|
||||
for (i = 0; i < tab_links.length; i++) {
|
||||
tab_links[i].classList.remove("active");
|
||||
}
|
||||
document.getElementById(tabName).classList.add("active");
|
||||
document.getElementById(tabName).style.animation = 'slideIn 0.5s ease-out';
|
||||
evt.currentTarget.classList.add("active");
|
||||
}
|
||||
|
||||
@@ -22,10 +29,10 @@ document.addEventListener('DOMContentLoaded', function () {
|
||||
|
||||
let currentCharts = {};
|
||||
const chartConfigs = {
|
||||
totalCost: { id: 'totalCostChart', title: '总花费', yAxisLabel: '花费 (¥)', dataKey: 'total_cost_data', fill: true },
|
||||
costByModule: { id: 'costByModuleChart', title: '各模块花费', yAxisLabel: '花费 (¥)', dataKey: 'cost_by_module', fill: false },
|
||||
costByModel: { id: 'costByModelChart', title: '各模型花费', yAxisLabel: '花费 (¥)', dataKey: 'cost_by_model', fill: false },
|
||||
messageByChat: { id: 'messageByChatChart', title: '各聊天流消息数', yAxisLabel: '消息数', dataKey: 'message_by_chat', fill: false }
|
||||
totalCost: { id: 'totalCostChart', title: '总花费趋势', yAxisLabel: '花费 (¥)', dataKey: 'total_cost_data', fill: true },
|
||||
costByModule: { id: 'costByModuleChart', title: '各模块花费对比', yAxisLabel: '花费 (¥)', dataKey: 'cost_by_module', fill: false },
|
||||
costByModel: { id: 'costByModelChart', title: '各模型花费对比', yAxisLabel: '花费 (¥)', dataKey: 'cost_by_model', fill: false },
|
||||
messageByChat: { id: 'messageByChatChart', title: '各聊天流消息统计', yAxisLabel: '消息数', dataKey: 'message_by_chat', fill: false }
|
||||
};
|
||||
|
||||
window.switchTimeRange = function(timeRange) {
|
||||
@@ -43,25 +50,107 @@ document.addEventListener('DOMContentLoaded', function () {
|
||||
function createChart(chartType, data, timeRange) {
|
||||
const config = chartConfigs[chartType];
|
||||
if (!data || !data[config.dataKey]) return;
|
||||
const colors = ['#3498db', '#e74c3c', '#2ecc71', '#f39c12', '#9b59b6', '#1abc9c', '#34495e', '#e67e22', '#95a5a6', '#f1c40f'];
|
||||
// Material Design 3 Blue/Gray Color Palette
|
||||
const colors = ['#1976D2', '#546E7A', '#42A5F5', '#90CAF9', '#78909C', '#B0BEC5', '#1565C0', '#607D8B', '#2196F3', '#CFD8DC'];
|
||||
let datasets = [];
|
||||
if (chartType === 'totalCost') {
|
||||
datasets = [{ label: config.title, data: data[config.dataKey], borderColor: colors[0], backgroundColor: 'rgba(52, 152, 219, 0.1)', tension: 0.4, fill: config.fill }];
|
||||
datasets = [{
|
||||
label: config.title,
|
||||
data: data[config.dataKey],
|
||||
borderColor: '#1976D2',
|
||||
backgroundColor: 'rgba(25, 118, 210, 0.1)',
|
||||
tension: 0.3,
|
||||
fill: config.fill,
|
||||
borderWidth: 2,
|
||||
pointRadius: 3,
|
||||
pointHoverRadius: 5,
|
||||
pointBackgroundColor: '#1976D2',
|
||||
pointBorderColor: '#fff',
|
||||
pointBorderWidth: 2
|
||||
}];
|
||||
} else {
|
||||
let i = 0;
|
||||
Object.entries(data[config.dataKey]).forEach(([name, chartData]) => {
|
||||
datasets.push({ label: name, data: chartData, borderColor: colors[i % colors.length], backgroundColor: colors[i % colors.length] + '20', tension: 0.4, fill: config.fill });
|
||||
datasets.push({
|
||||
label: name,
|
||||
data: chartData,
|
||||
borderColor: colors[i % colors.length],
|
||||
backgroundColor: colors[i % colors.length] + '30',
|
||||
tension: 0.4,
|
||||
fill: config.fill,
|
||||
borderWidth: 2,
|
||||
pointRadius: 3,
|
||||
pointHoverRadius: 5,
|
||||
pointBackgroundColor: colors[i % colors.length],
|
||||
pointBorderColor: '#fff',
|
||||
pointBorderWidth: 1
|
||||
});
|
||||
i++;
|
||||
});
|
||||
}
|
||||
currentCharts[chartType] = new Chart(document.getElementById(config.id), {
|
||||
const canvas = document.getElementById(config.id);
|
||||
if (!canvas) return;
|
||||
|
||||
currentCharts[chartType] = new Chart(canvas, {
|
||||
type: 'line',
|
||||
data: { labels: data.time_labels, datasets: datasets },
|
||||
options: {
|
||||
responsive: true,
|
||||
plugins: { title: { display: true, text: `${timeRange}内${config.title}趋势`, font: { size: 16 } }, legend: { display: chartType !== 'totalCost', position: 'top' } },
|
||||
scales: { x: { title: { display: true, text: '时间' }, ticks: { maxTicksLimit: 12 } }, y: { title: { display: true, text: config.yAxisLabel }, beginAtZero: true } },
|
||||
interaction: { intersect: false, mode: 'index' }
|
||||
maintainAspectRatio: true,
|
||||
aspectRatio: 2.5,
|
||||
plugins: {
|
||||
title: {
|
||||
display: true,
|
||||
text: `${config.title}`,
|
||||
font: { size: 16, weight: '500' },
|
||||
color: '#1C1B1F',
|
||||
padding: { top: 8, bottom: 16 }
|
||||
},
|
||||
legend: {
|
||||
display: chartType !== 'totalCost',
|
||||
position: 'top',
|
||||
labels: {
|
||||
usePointStyle: true,
|
||||
padding: 15,
|
||||
font: { size: 12 }
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.8)',
|
||||
padding: 12,
|
||||
titleFont: { size: 14 },
|
||||
bodyFont: { size: 13 },
|
||||
cornerRadius: 8
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
x: {
|
||||
title: {
|
||||
display: true,
|
||||
text: '⏰ 时间',
|
||||
font: { size: 13, weight: 'bold' }
|
||||
},
|
||||
ticks: { maxTicksLimit: 12 },
|
||||
grid: { color: 'rgba(0, 0, 0, 0.05)' }
|
||||
},
|
||||
y: {
|
||||
title: {
|
||||
display: true,
|
||||
text: config.yAxisLabel,
|
||||
font: { size: 13, weight: 'bold' }
|
||||
},
|
||||
beginAtZero: true,
|
||||
grid: { color: 'rgba(0, 0, 0, 0.05)' }
|
||||
}
|
||||
},
|
||||
interaction: {
|
||||
intersect: false,
|
||||
mode: 'index'
|
||||
},
|
||||
animation: {
|
||||
duration: 1000,
|
||||
easing: 'easeInOutQuart'
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
@@ -96,21 +185,64 @@ document.addEventListener('DOMContentLoaded', function () {
|
||||
const providerCtx = document.getElementById(`providerCostPieChart_${period_id}`);
|
||||
if (providerCtx && providerCostData && providerCostData.data && providerCostData.data.length > 0) {
|
||||
new Chart(providerCtx, {
|
||||
type: 'pie',
|
||||
type: 'doughnut',
|
||||
data: {
|
||||
labels: providerCostData.labels,
|
||||
datasets: [{
|
||||
label: '按供应商花费',
|
||||
data: providerCostData.data,
|
||||
backgroundColor: colors,
|
||||
borderColor: '#FFFFFF',
|
||||
borderWidth: 2,
|
||||
hoverOffset: 8
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
maintainAspectRatio: true,
|
||||
aspectRatio: 1.5,
|
||||
plugins: {
|
||||
title: { display: true, text: '按供应商花费分布', font: { size: 16 } },
|
||||
legend: { position: 'top' }
|
||||
title: {
|
||||
display: true,
|
||||
text: '按供应商花费分布',
|
||||
font: { size: 14, weight: '500' },
|
||||
color: '#1C1B1F',
|
||||
padding: { top: 8, bottom: 16 }
|
||||
},
|
||||
legend: {
|
||||
position: 'right',
|
||||
labels: {
|
||||
usePointStyle: true,
|
||||
padding: 15,
|
||||
font: { size: 12 }
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.8)',
|
||||
padding: 12,
|
||||
titleFont: { size: 14 },
|
||||
bodyFont: { size: 13 },
|
||||
cornerRadius: 8,
|
||||
callbacks: {
|
||||
label: function(context) {
|
||||
let label = context.label || '';
|
||||
if (label) {
|
||||
label += ': ';
|
||||
}
|
||||
label += context.parsed.toFixed(4) + ' ¥';
|
||||
const total = context.dataset.data.reduce((a, b) => a + b, 0);
|
||||
const percentage = ((context.parsed / total) * 100).toFixed(2);
|
||||
label += ` (${percentage}%)`;
|
||||
return label;
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
animation: {
|
||||
animateRotate: true,
|
||||
animateScale: true,
|
||||
duration: 1000,
|
||||
easing: 'easeInOutQuart'
|
||||
}
|
||||
}
|
||||
});
|
||||
@@ -127,17 +259,55 @@ document.addEventListener('DOMContentLoaded', function () {
|
||||
label: '按模型花费',
|
||||
data: modelCostData.data,
|
||||
backgroundColor: colors,
|
||||
borderColor: colors,
|
||||
borderWidth: 2,
|
||||
borderRadius: 8,
|
||||
hoverBackgroundColor: colors.map(c => c + 'dd')
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
maintainAspectRatio: true,
|
||||
aspectRatio: 1.5,
|
||||
plugins: {
|
||||
title: { display: true, text: '按模型花费排行', font: { size: 16 } },
|
||||
legend: { display: false }
|
||||
title: {
|
||||
display: true,
|
||||
text: '按模型花费排行',
|
||||
font: { size: 14, weight: '500' },
|
||||
color: '#1C1B1F',
|
||||
padding: { top: 8, bottom: 16 }
|
||||
},
|
||||
legend: { display: false },
|
||||
tooltip: {
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.8)',
|
||||
padding: 12,
|
||||
titleFont: { size: 14 },
|
||||
bodyFont: { size: 13 },
|
||||
cornerRadius: 8,
|
||||
callbacks: {
|
||||
label: function(context) {
|
||||
return context.dataset.label + ': ' + context.parsed.y.toFixed(4) + ' ¥';
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
y: { beginAtZero: true, title: { display: true, text: '花费 (¥)' } }
|
||||
x: {
|
||||
grid: { display: false }
|
||||
},
|
||||
y: {
|
||||
beginAtZero: true,
|
||||
title: {
|
||||
display: true,
|
||||
text: '💰 花费 (¥)',
|
||||
font: { size: 13, weight: 'bold' }
|
||||
},
|
||||
grid: { color: 'rgba(0, 0, 0, 0.05)' }
|
||||
}
|
||||
},
|
||||
animation: {
|
||||
duration: 1000,
|
||||
easing: 'easeInOutQuart'
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
<h2>数据总览</h2>
|
||||
<div class="chart-grid">
|
||||
<div class="chart-container">
|
||||
<h2>📊 数据总览</h2>
|
||||
<div style="display: flex; flex-direction: column; gap: 24px;">
|
||||
<div class="chart-container" style="height: 300px;">
|
||||
<canvas id="providerCostPieChart_{{ period_id }}"></canvas>
|
||||
</div>
|
||||
<div class="chart-container">
|
||||
<div class="chart-container" style="height: 300px;">
|
||||
<canvas id="modelCostBarChart_{{ period_id }}"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
@@ -2,24 +2,24 @@
|
||||
<div class="dashboard-layout">
|
||||
<div class="main-content">
|
||||
<p class="info-item">
|
||||
<strong>统计时段: </strong>
|
||||
<strong>📅 统计时段: </strong>
|
||||
{{ start_time }} ~ {{ end_time }}
|
||||
</p>
|
||||
{{ summary_cards }}
|
||||
|
||||
<h2>按模型分类统计</h2>
|
||||
<h2>🤖 按模型分类统计</h2>
|
||||
<table>
|
||||
<tr><th>模型名称</th><th>调用次数</th><th>平均Token数</th><th>Token总量</th><th>TPS</th><th>每K Token成本</th><th>累计花费</th><th>平均耗时(秒)</th></tr>
|
||||
<tbody>{{ model_rows }}</tbody>
|
||||
</table>
|
||||
|
||||
<h2>按供应商分类统计</h2>
|
||||
<h2>🏢 按供应商分类统计</h2>
|
||||
<table>
|
||||
<tr><th>供应商名称</th><th>调用次数</th><th>Token总量</th><th>TPS</th><th>每K Token成本</th><th>累计花费</th></tr>
|
||||
<tbody>{{ provider_rows }}</tbody>
|
||||
</table>
|
||||
|
||||
<h2>按模块分类统计</h2>
|
||||
<h2>🔧 按模块分类统计</h2>
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>模块名称</th><th>调用次数</th><th>输入Token</th><th>输出Token</th><th>Token总量</th><th>累计花费</th><th>平均耗时(秒)</th><th>标准差(秒)</th></tr>
|
||||
@@ -27,7 +27,7 @@
|
||||
<tbody>{{ module_rows }}</tbody>
|
||||
</table>
|
||||
|
||||
<h2>按请求类型分类统计</h2>
|
||||
<h2>📝 按请求类型分类统计</h2>
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>请求类型</th><th>调用次数</th><th>输入Token</th><th>输出Token</th><th>Token总量</th><th>累计花费</th><th>平均耗时(秒)</th><th>标准差(秒)</th></tr>
|
||||
@@ -35,16 +35,32 @@
|
||||
<tbody>{{ type_rows }}</tbody>
|
||||
</table>
|
||||
|
||||
<h2>聊天消息统计</h2>
|
||||
<h2>💬 聊天消息统计</h2>
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>联系人/群组名称</th><th>消息数量</th></tr>
|
||||
</thead>
|
||||
<tbody>{{ chat_rows }}</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="sidebar-content">
|
||||
{{ static_charts }}
|
||||
|
||||
<h2>🎓 大模型效率分析</h2>
|
||||
<div class="info-item">
|
||||
<strong>💡 提示:</strong> Token效率表示输出Token与输入Token的比率,比率越高说明模型输出越丰富
|
||||
</div>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>指标</th>
|
||||
<th>数值</th>
|
||||
<th>说明</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>{{ efficiency_rows }}</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="sidebar-content">
|
||||
{{ static_charts }}
|
||||
</div>
|
||||
</div>
|
||||
Reference in New Issue
Block a user