55 lines
3.4 KiB
HTML
55 lines
3.4 KiB
HTML
<h2>不同算法应该怎样被可视化？</h2>
|
||
<p class="subtitle">请选择生成策略。重点考虑：既要自动化，也要让不同算法的关键机制真正容易理解。</p>
|
||
|
||
<div class="cards">
|
||
<div class="card" data-choice="adaptive-visuals" onclick="toggleSelect(this)">
|
||
<div class="card-image">
|
||
<div class="label">A · 推荐：自适应图形族</div>
|
||
<div style="padding:12px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;background:#f6faf9">
|
||
<div style="padding:9px;background:white;border-top:3px solid #2b8872"><b>数据处理函数</b><br><small>输入 → 变换 → 校验 → 输出</small></div>
|
||
<div style="padding:9px;background:white;border-top:3px solid #497fa3"><b>搜索/规划算法</b><br><small>起点 ⇢ 扩展 ⇢ 代价 ⇢ 目标</small></div>
|
||
<div style="padding:9px;background:white;border-top:3px solid #9a68a8"><b>状态机</b><br><small>Idle ⇄ Running → Error</small></div>
|
||
<div style="padding:9px;background:white;border-top:3px solid #d18a26"><b>数值/几何算法</b><br><small>曲线、约束区间、异常峰值</small></div>
|
||
</div>
|
||
</div>
|
||
<div class="card-body">
|
||
<h3>根据算法特征自动选择主视图</h3>
|
||
<p>所有类型共享同一诊断叠加协议，但主图可以是流程、搜索路径、状态转移或数值曲线。表达力最强，同时保留统一点击体验。</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card" data-choice="universal-flowchart" onclick="toggleSelect(this)">
|
||
<div class="card-image">
|
||
<div class="label">B · 通用流程图</div>
|
||
<div style="padding:28px 12px;display:flex;align-items:center;justify-content:center;gap:7px;background:#faf8f4;flex-wrap:wrap">
|
||
<span style="padding:9px;border:1px solid #888;border-radius:6px;background:white">输入</span><b>→</b>
|
||
<span style="padding:9px;border:1px solid #888;border-radius:6px;background:white">步骤 A</span><b>→</b>
|
||
<span style="padding:9px;border:1px solid #c8463a;border-radius:6px;background:#fff0ee">步骤 B ⚠</span><b>→</b>
|
||
<span style="padding:9px;border:1px solid #888;border-radius:6px;background:white">输出</span>
|
||
</div>
|
||
</div>
|
||
<div class="card-body">
|
||
<h3>所有函数统一画成节点流程</h3>
|
||
<p>生成稳定、实现简单、读法一致；但数值曲线、状态跳转和搜索空间等算法特征会被压扁，可能仍停留在“文字方框”。</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card" data-choice="manual-visual-spec" onclick="toggleSelect(this)">
|
||
<div class="card-image">
|
||
<div class="label">C · 人工指定视图</div>
|
||
<div style="padding:16px;background:#f7f8fb">
|
||
<div class="mock-nav">日报输入中指定：visual_type = curve</div>
|
||
<div class="placeholder" style="height:115px;margin-top:8px">自定义节点、坐标、连线和交互说明</div>
|
||
</div>
|
||
</div>
|
||
<div class="card-body">
|
||
<h3>由 Agent 或用户提供专用图形描述</h3>
|
||
<p>定制能力最高，但生成成本大、输入要求高，也更依赖当次 Agent 是否完整理解算法，难以保证每份日报都有图。</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="section">
|
||
<p><strong>建议 A：</strong>使用“统一诊断协议 + 自适应主视图”。不管图形类型如何变化，点击节点后都固定展示源码、当前状态、原因、后果、修正方案和预期结果。</p>
|
||
</div>
|