26.Paper RAG Agent 展示面收口：截图与项目表达更新记录

今天完成了什么

经过前面工作的完善现在后端已经可以返回的信息有：

reason
fallback_used
context_sufficient
retry_count
workflow_path
error

但是这些信息还需要在Django中的页面中反馈给用户才可以，这样用户能清楚的知道系统是如果工作的，以及判断给出的问答结果是否可靠。今天的改进属于：

Django 展示层
Agent Trace 展示层

需要修改的核心文件主要是chat_home.html，核心改动有：

html 复制代码

<!--修改久的Agent Trace内容，增加相应的信息片段-->
{% if agent_trace %}
<div class="card trace-card">
    <h3>Agent Trace</h3>
    <p class="section-desc">
        展示本轮问答中 LangGraph Agent 的工具选择、路由理由、fallback 状态和实际执行路径。
    </p>

    <div class="trace-grid">
        <div class="trace-item">
            <span class="trace-label">Tool Used</span>
            <span class="trace-value">{{ agent_trace.tool_used }}</span>
        </div>

        <div class="trace-item">
            <span class="trace-label">Tool Input</span>
            <span class="trace-value">{{ agent_trace.tool_input }}</span>
        </div>

        <div class="trace-item">
            <span class="trace-label">Route Reason</span>
            <span class="trace-value">
                {{ agent_trace.route_decision.reason|default:"No reason provided." }}
            </span>
        </div>

        <div class="trace-item">
            <span class="trace-label">Fallback Used</span>
            {% if agent_trace.fallback_used %}
                <span class="badge warning">True</span>
            {% else %}
                <span class="badge success">False</span>
            {% endif %}
        </div>

        <div class="trace-item">
            <span class="trace-label">Context Sufficient</span>
            {% if agent_trace.context_sufficient == True %}
                <span class="badge success">True</span>
            {% elif agent_trace.context_sufficient == False %}
                <span class="badge danger">False</span>
            {% else %}
                <span class="badge">N/A</span>
            {% endif %}
        </div>

        <div class="trace-item">
            <span class="trace-label">Retry Count</span>
            <span class="trace-value">{{ agent_trace.retry_count|default:0 }}</span>
        </div>

        <div class="trace-item">
            <span class="trace-label">Workflow Path</span>
            <span class="trace-value">
                {% for step in agent_trace.workflow %}
                    {{ step }}{% if not forloop.last %} → {% endif %}
                {% endfor %}
            </span>
        </div>

        <div class="trace-item">
            <span class="trace-label">Error</span>
            {% if agent_trace.error %}
                <span class="badge danger">{{ agent_trace.error }}</span>
            {% else %}
                <span class="badge success">None</span>
            {% endif %}
        </div>
    </div>

    <details style="margin-top: 14px;">
        <summary>Route Decision Raw Data</summary>
        <pre>{{ agent_trace.route_decision }}</pre>
    </details>
</div>
{% endif %}

<!--在 Conversation 卡片后面新增 Retrieved Context 卡片-->
{% if chunks %}
<div class="card">
    <h3>Retrieved Context (Top-K)</h3>
    <p class="section-desc">
        展示 RAG 检索阶段命中的论文片段，用于说明回答依据。
    </p>

    {% for c in chunks %}
        <div class="chunk-card">
            <div class="chunk-source">{{ c.source }}</div>
            <div class="chunk-text">{{ c.text }}</div>
        </div>
    {% endfor %}
</div>
{% endif %}

最后给页面增加美化元素：

css 复制代码

.section-desc {
    color: #666;
    font-size: 14px;
    margin-top: -6px;
    margin-bottom: 14px;
    line-height: 1.6;
}

.trace-card {
    border-left: 4px solid #2563eb;
}

.trace-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

.trace-item {
    background: #f3f4f6;
    border-radius: 10px;
    padding: 12px;
}

.trace-label {
    display: block;
    color: #6b7280;
    font-size: 12px;
    margin-bottom: 4px;
}

.trace-value {
    color: #111827;
    font-weight: bold;
    word-break: break-word;
}

.badge {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: bold;
    background: #e5e7eb;
    color: #374151;
}

.badge.success {
    background: #dcfce7;
    color: #166534;
}

.badge.warning {
    background: #fef3c7;
    color: #92400e;
}

.badge.danger {
    background: #fee2e2;
    color: #991b1b;
}

.chunk-card {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 12px;
    margin-bottom: 12px;
}

.chunk-source {
    font-weight: bold;
    color: #2563eb;
    margin-bottom: 6px;
}

.chunk-text {
    color: #374151;
    line-height: 1.6;
    white-space: pre-wrap;
}

pre {
    background: #111827;
    color: #f9fafb;
    padding: 12px;
    border-radius: 8px;
    overflow-x: auto;
}

当前项目展示面有什么变化

Agent Trace

经过调整后，页面有了更为完整的 Agent Trace 信息，这样用户可以判断智能体的工作是否可靠。

Retrieved Context

调整后的检索上下文比最早的版本文段更长，基于检索到的信息可以帮助用户回忆以往的研究内容，同时这样的内容让用户看到后能感觉心里放心，知道模型回答的结果是有依据的。

26.Paper RAG Agent 展示面收口：截图与项目表达更新记录

目 录

今天完成了什么

当前项目展示面有什么变化

Agent Trace

Retrieved Context

目录