PM-pinou
185 lines
11 KiB
HTML
185 lines
11 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-hans">
|
||
<head><meta charset="UTF-8"><title>运行详情 — 预览</title>
|
||
<style>
|
||
*{margin:0;padding:0;box-sizing:border-box}
|
||
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;background:#f5f7fa;color:#1a1a2e;padding:1rem 2rem}
|
||
.card{background:#fff;border-radius:8px;padding:1.5rem;margin-bottom:1rem;box-shadow:0 1px 3px rgba(0,0,0,.1)}
|
||
h2{font-size:1.2rem;margin:0}h3{font-size:1rem;margin-bottom:.5rem}
|
||
.badge{display:inline-block;padding:.15rem .5rem;border-radius:12px;font-size:.75rem;font-weight:600}
|
||
.badge-success{background:#d4edda;color:#155724}
|
||
.badge-danger{background:#f8d7da;color:#721c24}
|
||
.badge-info{background:#d1ecf1;color:#0c5460}
|
||
.stat{font-size:2rem;font-weight:700;color:#1a1a2e}
|
||
.stat-label{font-size:.85rem;color:#666;margin-top:.25rem}
|
||
.grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1.5rem}
|
||
.grid-svd{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}
|
||
.svd-card{background:#f8f9fa;border:1px solid #e0e0e0;border-radius:8px;padding:.8rem}
|
||
.svd-card h4{margin:0 0 .3rem;font-size:.9rem}
|
||
.var-bar{height:8px;border-radius:4px;background:#4361ee;margin:.2rem 0}
|
||
.feat-tag{display:inline-block;background:#e8f0fe;padding:.1rem .4rem;border-radius:3px;font-size:.75rem;margin:.1rem;color:#333}
|
||
.small{font-size:.8rem;color:#888}
|
||
.btn{display:inline-block;padding:.4rem .8rem;border-radius:6px;text-decoration:none;font-size:.85rem;background:#4361ee;color:#fff}
|
||
.tl-step{margin-bottom:.5rem}.tl-step .hdr{font-weight:700;font-size:.85rem;color:#4361ee;padding:.4rem 0 .2rem;border-top:1px solid #eee}
|
||
.tl-think{background:#eef2ff;padding:.5rem;border-radius:6px;font-size:.78rem;line-height:1.6;color:#333;border:1px solid #d0d8f0;margin-bottom:.3rem}
|
||
.tl-tool{border:1px solid #e0e0e0;border-radius:6px;margin-bottom:.3rem;overflow:hidden}
|
||
.tl-tool .hd{background:#f8f9fa;padding:.35rem .6rem;cursor:pointer;display:flex;justify-content:space-between;align-items:center;font-size:.8rem;font-weight:600}
|
||
.tl-tool .bd{display:none;padding:.4rem .6rem;background:#fafbfc;font-size:.72rem}
|
||
.tl-tool .bd pre{background:#1a1a2e;color:#e0e0e0;padding:.4rem;border-radius:4px;font-size:.65rem;overflow:auto;margin:.2rem 0}
|
||
.cluster-table{width:100%;border-collapse:collapse;font-size:.85rem;margin-top:.5rem}
|
||
.cluster-table th{background:#f5f5f5;padding:.3rem .5rem;text-align:left;font-weight:600;border-bottom:2px solid #ddd}
|
||
.cluster-table td{padding:.3rem .5rem;border-bottom:1px solid #eee}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="card">
|
||
<div style="display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:.5rem">
|
||
<div>
|
||
<h2>运行 #9</h2>
|
||
<p style="color:#666;font-size:.9rem;margin-top:.25rem">2024-01-15 08:23 — 状态: <span class="badge badge-success">完成</span></p>
|
||
</div>
|
||
<a href="#" class="btn">聚类概览 →</a>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="grid-3">
|
||
<div class="card" style="text-align:center"><div class="stat">1,284,592</div><div class="stat-label">总流数</div></div>
|
||
<div class="card" style="text-align:center"><div class="stat">1,284,592</div><div class="stat-label">行数</div></div>
|
||
<div class="card" style="text-align:center"><div class="stat">3</div><div class="stat-label">聚类数</div></div>
|
||
</div>
|
||
|
||
<!-- 全域 SVD 特征分析 -->
|
||
<div class="card">
|
||
<div style="display:flex;justify-content:space-between;align-items:center">
|
||
<h3>🔬 全域 SVD 特征分析 <span class="small">基于 1,284,592 行数据</span></h3>
|
||
</div>
|
||
<p style="font-size:.82rem;color:#666;margin-top:.3rem">奇异值分解 (TruncatedSVD) 降维后的各主成分解释方差比例与贡献特征。</p>
|
||
<div class="grid-svd" style="margin-top:.75rem">
|
||
<div class="svd-card">
|
||
<h4>PC1</h4>
|
||
<div style="display:flex;justify-content:space-between;font-size:.78rem;color:#555"><span>解释方差: 42.3%</span><span>累积: 42.3%</span></div>
|
||
<div class="var-bar" style="width:42%"></div>
|
||
<div style="margin-top:.4rem">
|
||
<span class="feat-tag">8pak: 0.321</span>
|
||
<span class="feat-tag">8ack: 0.284</span>
|
||
<span class="feat-tag">4dur: 0.198</span>
|
||
<span class="feat-tag">8ses: 0.156</span>
|
||
<span class="feat-tag">2tmo: 0.112</span>
|
||
</div>
|
||
</div>
|
||
<div class="svd-card">
|
||
<h4>PC2</h4>
|
||
<div style="display:flex;justify-content:space-between;font-size:.78rem;color:#555"><span>解释方差: 28.7%</span><span>累积: 71.0%</span></div>
|
||
<div class="var-bar" style="width:29%"></div>
|
||
<div style="margin-top:.4rem">
|
||
<span class="feat-tag">:prd: 0.412</span>
|
||
<span class="feat-tag">:prs: 0.334</span>
|
||
<span class="feat-tag">1ipp: 0.187</span>
|
||
<span class="feat-tag">0ver: 0.098</span>
|
||
<span class="feat-tag">4dbn: 0.045</span>
|
||
</div>
|
||
</div>
|
||
<div class="svd-card">
|
||
<h4>PC3</h4>
|
||
<div style="display:flex;justify-content:space-between;font-size:.78rem;color:#555"><span>解释方差: 15.2%</span><span>累积: 86.2%</span></div>
|
||
<div class="var-bar" style="width:15%"></div>
|
||
<div style="margin-top:.4rem">
|
||
<span class="feat-tag">0ver: 0.502</span>
|
||
<span class="feat-tag">4ksz: 0.321</span>
|
||
<span class="feat-tag">0cph: 0.145</span>
|
||
<span class="feat-tag">0crv: 0.088</span>
|
||
<span class="feat-tag">cnam: 0.032</span>
|
||
</div>
|
||
</div>
|
||
<div class="svd-card">
|
||
<h4>PC4</h4>
|
||
<div style="display:flex;justify-content:space-between;font-size:.78rem;color:#555"><span>解释方差: 8.9%</span><span>累积: 95.1%</span></div>
|
||
<div class="var-bar" style="width:9%"></div>
|
||
<div style="margin-top:.4rem">
|
||
<span class="feat-tag">snam: 0.432</span>
|
||
<span class="feat-tag">cnam: 0.356</span>
|
||
<span class="feat-tag">ecdhe: 0.178</span>
|
||
<span class="feat-tag">:ips: 0.089</span>
|
||
<span class="feat-tag">:ipd: 0.034</span>
|
||
</div>
|
||
</div>
|
||
<div class="svd-card">
|
||
<h4>PC5</h4>
|
||
<div style="display:flex;justify-content:space-between;font-size:.78rem;color:#555"><span>解释方差: 4.9%</span><span>累积: 100%</span></div>
|
||
<div class="var-bar" style="width:5%"></div>
|
||
<div style="margin-top:.4rem">
|
||
<span class="feat-tag">timestamp: 0.523</span>
|
||
<span class="feat-tag">8dbd: 0.312</span>
|
||
<span class="feat-tag">8seq: 0.145</span>
|
||
<span class="feat-tag">8did: 0.067</span>
|
||
<span class="feat-tag">row: 0.021</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<p style="font-size:.78rem;color:#888;margin-top:.5rem">前 3 个主成分解释了 86.2% 的方差。SVD 去噪保留 95% 方差，去除 ~5% 作为底噪。</p>
|
||
</div>
|
||
|
||
<!-- LLM 自动分析流程 -->
|
||
<div class="card">
|
||
<h3>🧠 LLM 自动分析流程</h3>
|
||
<div>
|
||
<div class="tl-step">
|
||
<div class="hdr">步骤 0</div>
|
||
<div class="tl-think">💭 思考：先对数据集进行概要分析，了解列类型和分布后再决定下一步。</div>
|
||
<div class="tl-tool">
|
||
<div class="hd"><span>🔧 profile_data</span><span>▶</span></div>
|
||
<div class="bd"><div>输入:</div><pre>{"dataset_id": "upload_9"}</pre><div>输出:</div><pre>{"columns": 57, "numeric": 28, "string": 20, ...}</pre></div>
|
||
</div>
|
||
</div>
|
||
<div class="tl-step">
|
||
<div class="hdr">步骤 1</div>
|
||
<div class="tl-think">💭 思考：数据包含 28 个数值列，选择聚类相关的特征列进行分析。</div>
|
||
<div class="tl-tool">
|
||
<div class="hd"><span>🔧 filter_data</span><span>▶</span></div>
|
||
<div class="bd"><div>输入:</div><pre>{"dataset_id": "upload_9", "filters": [...]}</pre><div>输出:</div><pre>{"row_count": 1284592, "columns": 57}</pre></div>
|
||
</div>
|
||
</div>
|
||
<div class="tl-step">
|
||
<div class="hdr">步骤 2</div>
|
||
<div class="tl-think">💭 思考：数据准备完成，对原始行进行聚类分析（KMeans，3 个簇）。</div>
|
||
<div class="tl-tool">
|
||
<div class="hd"><span>🔧 run_clustering</span><span>▶</span></div>
|
||
<div class="bd"><div>输入:</div><pre>{"dataset_id": "upload_9", "algorithm": "kmeans", "cluster_columns": [...], "_timeout": 300}</pre><div>输出:</div><pre>{"n_clusters": 3, "n_noise": 0, "silhouette": 0.68}</pre></div>
|
||
</div>
|
||
</div>
|
||
<div class="tl-step">
|
||
<div class="hdr">步骤 3</div>
|
||
<div class="tl-think">💭 思考：✅ 分析完成。聚类产生 3 个簇，轮廓系数 0.68。簇 #0（66%，低延迟大数据包）、簇 #1（24%，高TLS1.3短会话）、簇 #2（9%，高频非标准端口）。</div>
|
||
<div style="background:#e8f5e9;padding:.5rem;border-radius:6px;font-size:.82rem;line-height:1.7;color:#333;border:1px solid #c8e6c9">
|
||
<span style="font-weight:600;color:#2e7d32;display:block;margin-bottom:.25rem">✅ 回答</span>
|
||
<strong>聚类分析完成</strong>，数据划分为 3 个行为簇：<br>
|
||
• <strong>簇 #0</strong>（847,293 条，66%）：低延迟、大数据包、目标端口集中于443 —— 典型的 <strong>正常HTTPS流量</strong><br>
|
||
• <strong>簇 #1</strong>（311,482 条，24%）：高TLS1.3比例、短会话、ECDHE X25519 —— <strong>现代浏览器访问</strong><br>
|
||
• <strong>簇 #2</strong>（112,970 条，9%）：高连接频率、非标准端口、多域名 —— <strong>API/微服务调用</strong>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 聚类列表 -->
|
||
<div class="card">
|
||
<h3>📊 聚类结果</h3>
|
||
<table class="cluster-table">
|
||
<thead><tr><th>簇</th><th>大小</th><th>比例</th><th>轮廓系数</th><th></th></tr></thead>
|
||
<tbody>
|
||
<tr><td><span class="badge badge-info">#0</span></td><td>847,293</td><td>0.66</td><td>0.7100</td><td><a href="#" class="btn" style="padding:.2rem .5rem;font-size:.75rem;">详情</a></td></tr>
|
||
<tr><td><span class="badge badge-info">#1</span></td><td>311,482</td><td>0.24</td><td>0.6500</td><td><a href="#" class="btn" style="padding:.2rem .5rem;font-size:.75rem;">详情</a></td></tr>
|
||
<tr><td><span class="badge badge-info">#2</span></td><td>112,970</td><td>0.09</td><td>0.5200</td><td><a href="#" class="btn" style="padding:.2rem .5rem;font-size:.75rem;">详情</a></td></tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
<script>
|
||
// Toggle tool details on click
|
||
document.querySelectorAll('.tl-tool .hd').forEach(function(el){
|
||
el.onclick=function(){var b=this.nextElementSibling;if(b)b.style.display=b.style.display==='block'?'none':'block';};
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|