90 lines
7.0 KiB
HTML
90 lines
7.0 KiB
HTML
<h2>修订方向：展示算法的真实领域效果</h2>
|
|
<p class="subtitle">下面以泊车路径规划为例。主画面直接呈现规划场景与算法结果，流程和文字只负责解释“为什么”。</p>
|
|
|
|
<div class="mockup">
|
|
<div class="mockup-header">路径规划诊断 · Parking Scenario #08</div>
|
|
<div class="mockup-body" style="padding:0">
|
|
<div class="mock-nav" style="display:flex;gap:8px;flex-wrap:wrap">
|
|
<span>正常机制</span>
|
|
<strong style="color:#b7352c">● 当前问题</strong>
|
|
<span>○ 候选修正预演</span>
|
|
<span>✓ 已验证结果</span>
|
|
<span style="margin-left:auto">播放搜索 逐步执行 重置视角</span>
|
|
</div>
|
|
|
|
<div style="display:grid;grid-template-columns:minmax(0,1.8fr) minmax(250px,1fr);gap:0">
|
|
<div style="padding:12px;background:#edf1f2;border-right:1px solid #cbd5d8">
|
|
<svg viewBox="0 0 560 310" role="img" aria-label="泊车路径规划实际效果示意" style="width:100%;height:auto;background:#2c3438;border-radius:8px">
|
|
<defs>
|
|
<pattern id="grid" width="28" height="28" patternUnits="userSpaceOnUse"><path d="M 28 0 L 0 0 0 28" fill="none" stroke="#3b464b" stroke-width="1"/></pattern>
|
|
<marker id="arrow-red" markerWidth="8" markerHeight="8" refX="6" refY="3" orient="auto"><path d="M0,0 L0,6 L7,3 z" fill="#ff7065"/></marker>
|
|
<marker id="arrow-green" markerWidth="8" markerHeight="8" refX="6" refY="3" orient="auto"><path d="M0,0 L0,6 L7,3 z" fill="#5ed5a5"/></marker>
|
|
</defs>
|
|
<rect width="560" height="310" fill="url(#grid)"/>
|
|
<g stroke="#839096" stroke-width="2" fill="none">
|
|
<path d="M360 18V110H520V18"/><path d="M400 18V110"/><path d="M440 18V110"/><path d="M480 18V110"/>
|
|
</g>
|
|
<g fill="#77848a" stroke="#aeb8bc">
|
|
<rect x="365" y="28" width="30" height="68" rx="5"/><rect x="445" y="28" width="30" height="68" rx="5"/>
|
|
</g>
|
|
<rect x="405" y="24" width="30" height="76" rx="5" fill="rgba(94,213,165,.12)" stroke="#5ed5a5" stroke-dasharray="5 4"/>
|
|
<text x="420" y="119" fill="#b9f3da" font-size="11" text-anchor="middle">目标车位</text>
|
|
|
|
<g opacity=".38" fill="#9eb2ba">
|
|
<circle cx="95" cy="235" r="3"/><circle cx="140" cy="222" r="3"/><circle cx="185" cy="206" r="3"/><circle cx="230" cy="183" r="3"/><circle cx="275" cy="154" r="3"/><circle cx="320" cy="125" r="3"/><circle cx="355" cy="92" r="3"/>
|
|
</g>
|
|
|
|
<g transform="translate(72 220) rotate(-3)"><rect x="-28" y="-15" width="56" height="30" rx="7" fill="#4e9ec5" stroke="#bce8fa" stroke-width="2"/><path d="M10 0H32" stroke="#bce8fa" stroke-width="2"/><text x="0" y="-23" fill="#d8f2ff" font-size="11" text-anchor="middle">起始姿态</text></g>
|
|
<g transform="translate(420 61) rotate(-90)"><rect x="-28" y="-15" width="56" height="30" rx="7" fill="#319470" stroke="#b9f3da" stroke-width="2"/><path d="M10 0H32" stroke="#b9f3da" stroke-width="2"/></g>
|
|
|
|
<path d="M72 220 C185 226 278 196 341 138 C376 106 388 85 420 61" fill="none" stroke="#ff7065" stroke-width="5" marker-end="url(#arrow-red)"/>
|
|
<path d="M72 220 C175 245 295 225 350 170 C397 124 392 88 420 61" fill="none" stroke="#5ed5a5" stroke-width="4" stroke-dasharray="9 7" marker-end="url(#arrow-green)"/>
|
|
|
|
<circle cx="347" cy="132" r="17" fill="rgba(255,112,101,.18)" stroke="#ff7065" stroke-width="3"/>
|
|
<path d="M347 115V149M330 132H364" stroke="#ff7065" stroke-width="2"/>
|
|
<path d="M350 130 L282 82" stroke="#ffb2aa" stroke-width="1.5"/>
|
|
<rect x="150" y="48" width="142" height="48" rx="6" fill="#fff7f5" stroke="#ff7065"/>
|
|
<text x="160" y="67" fill="#8f2f29" font-size="12" font-weight="700">最小间距失效</text>
|
|
<text x="160" y="85" fill="#5b4542" font-size="11">车体包络进入障碍膨胀区</text>
|
|
|
|
<g transform="translate(22 18)">
|
|
<rect width="185" height="28" rx="5" fill="rgba(20,25,28,.82)"/>
|
|
<line x1="10" y1="10" x2="35" y2="10" stroke="#ff7065" stroke-width="4"/><text x="42" y="14" fill="#eee" font-size="10">当前轨迹</text>
|
|
<line x1="102" y1="10" x2="127" y2="10" stroke="#5ed5a5" stroke-width="4" stroke-dasharray="6 4"/><text x="134" y="14" fill="#eee" font-size="10">修正预演</text>
|
|
</g>
|
|
</svg>
|
|
|
|
<div style="display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;margin-top:9px;font-size:12px;text-align:center">
|
|
<div style="padding:7px;background:white;border-top:3px solid #4289aa">环境建模</div>
|
|
<div style="padding:7px;background:white;border-top:3px solid #4289aa">状态扩展</div>
|
|
<div style="padding:7px;background:#fff1ef;border-top:3px solid #c8463a">碰撞检查 ⚠</div>
|
|
<div style="padding:7px;background:white;border-top:3px solid #d18a26">路径平滑</div>
|
|
<div style="padding:7px;background:white;border-top:3px solid #777">安全验证</div>
|
|
</div>
|
|
</div>
|
|
|
|
<aside style="padding:14px;background:white">
|
|
<div class="label">点击异常位置后的诊断面板</div>
|
|
<h3 style="margin-top:7px">碰撞检查 · clearance gate</h3>
|
|
<div style="display:grid;gap:9px;font-size:13px">
|
|
<div style="padding:8px;border-left:3px solid #c8463a;background:#fff7f5"><b>目前状况</b><br>规划轨迹在倒车转向段进入障碍物膨胀边界。</div>
|
|
<div style="padding:8px;border-left:3px solid #d18a26;background:#fffaf0"><b>出错原因</b><br>搜索代价采用点模型间距，未覆盖完整车体包络。</div>
|
|
<div style="padding:8px;border-left:3px solid #9f624e;background:#fff8f3"><b>导致结果</b><br>轨迹数值可达，但实际车辆存在擦碰风险，安全门应拒绝。</div>
|
|
<div style="padding:8px;border-left:3px solid #3b8d75;background:#f2fbf7"><b>纠正方案</b><br>扩展节点时使用车辆多边形包络，并对障碍物增加安全裕量。</div>
|
|
<div style="padding:8px;border-left:3px dashed #3b8d75;background:#f7fcfa"><b>预期结果 · 尚未验证</b><br>候选轨迹绕开膨胀区，最小间距满足阈值后再进入平滑阶段。</div>
|
|
</div>
|
|
<p style="margin-top:10px;font-size:12px;color:#68777d"><b>证据下钻：</b>点击可查看函数、源码行、输入样本、约束值、测试输出与证据等级。</p>
|
|
</aside>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="options">
|
|
<div class="option" data-choice="confirm-domain-visual" onclick="toggleSelect(this)">
|
|
<div class="letter">✓</div><div class="content"><h3>就是这个方向</h3><p>算法主区域展示真实业务对象和运行结果，诊断信息与源码证据随点击联动。</p></div>
|
|
</div>
|
|
<div class="option" data-choice="adjust-domain-visual" onclick="toggleSelect(this)">
|
|
<div class="letter">↺</div><div class="content"><h3>还需要调整</h3><p>保留领域可视化方向，但需要改变内容层次或交互方式。</p></div>
|
|
</div>
|
|
</div>
|