22.让 RAG Agent 更像真实产品：聊天页面优化、PDF 上传、知识库重建与检索片段展示

目 录前言优化页面UI完善视图逻辑在模版中添加CSS美化添加会话列表增加文档上传和数据库重建功能知识向量数据库重建增加知识向量数据库重建服务接口创建上传文件视图逻辑知识向量数据库重建加系统的可解释性显示检索到的Top-K内容前言前面已经将FastAPI封装的AI能力接入Django形成了一个比较基本的用户UI界面但是这个用户界面就好像毛坯房所以这篇博客的主要工作是对“毛坯房”进行简装过程中将会优化页面的UI、增加会话列表、增加文档上传和数据库重建功能以及增加系统的可解释性。优化页面UI完善视图逻辑前面已经实现Django可以调用FastAPIDjango可以存历史消息有session列表和详情今天对页面的UI进行优化使系统可以像ChatGPT或者Deepseek那样聊天页面用户信息和系统信息分开显示。首先修改chat/views.py让页面在会话页面会显示会话最近聊天的记录修改是在渲染之前增加defchat_home(request):...session_objChatSession.objects.filter(session_idcurrent_session_id).first()messages[]ifsession_obj:messagessession_obj.messages.all().order_by(created_at)returnrender(...)在模版中添加CSS美化这一步在原有的页面逻辑上增加一些CSS的修饰!DOCTYPEhtmlhtmllangzh-CNheadmetacharsetUTF-8titlePaper RAG Agent/titlestylebody{font-family:Arial,sans-serif;max-width:960px;margin:24px auto;padding:0 16px;background:#f7f8fa;}h1{margin-bottom:8px;}.nav{margin-bottom:20px;}.nav a{margin-right:16px;text-decoration:none;color:#2563eb;}.card{background:white;border-radius:12px;padding:16px;box-shadow:0 2px 10pxrgba(0,0,0,0.06);margin-bottom:20px;}.form-row{margin-bottom:12px;}input[typetext], textarea{width:100%;padding:10px;box-sizing:border-box;border:1px solid #d1d5db;border-radius:8px;font-size:14px;}button{background:#2563eb;color:white;border:none;padding:10px 18px;border-radius:8px;cursor:pointer;}button:hover{background:#1d4ed8;}.session-info{color:#666;margin-bottom:12px;}.chat-box{display:flex;flex-direction:column;gap:12px;}.message{max-width:78%;padding:12px 14px;border-radius:12px;white-space:pre-wrap;line-height:1.5;}.message.user{align-self:flex-end;background:#dbeafe;}.message.assistant{align-self:flex-start;background:#e5e7eb;}.meta{font-size:12px;color:#666;margin-bottom:4px;}.error{color:#b91c1c;margin-top:10px;}.empty{color:#666;}/style/headbodyh1Paper RAG Agent/h1p一个基于 Django 壳层 FastAPI 推理服务 LangGraph 编排的论文问答系统/pdivclassnavahref{% url chat_home %}Chat Home/aahref{% url session_list %}View Session History/aahref{% url upload_page %}Upload Papers/a/divdivclasscarddivclasssession-info当前会话strong{{ current_session_id }}/strong/divformmethodpost{% csrf_token %}divclassform-rowlabelSession ID:/labelinputtypetextnamesession_idvalue{{ current_session_id }}/divdivclassform-rowlabelQuestion:/labeltextareanamequestionrows5placeholder请输入你的问题例如What is the difference between paper1 and paper2?/textarea/divbuttontypesubmitAsk/button/form{% if error %}pclasserror{{ error }}/p{% endif %}/divdivclasscardh3Conversation/h3{% if messages %}divclasschat-box{% for msg in messages %}divclassmessage {{ msg.role }}divclassmeta{% if msg.role user %} User {% else %} AI Assistant {% endif %} · {{ msg.created_at }}/div{{ msg.content }}/div{% endfor %}/div{% else %}pclassempty当前会话还没有消息先问一个问题试试。/p{% endif %}/div/body/html随后可以得到一个稍微美化的对话页面添加会话列表下一步给UI界面增加会话列表让系统看着更像是用户产品在chat/views.py的chat_home函数返回值之前增加字段除了返回聊天信息还要返回最近会话有哪些。defchat_home(request):...session_objChatSession.objects.filter(session_idcurrent_session_id).first()messages[]ifsession_obj:messagessession_obj.messages.all().order_by(created_at)recent_sessionsChatSession.objects.all().order_by(-updated_at)[:5]returnrender(request,chat/chat_home.html,{error:error,current_session_id:current_session_id,messages:messages,recent_sessions:recent_sessions,# 新增})随后在chat_home.html的导航栏下增加divclasscardh3Recent Sessions/h3{% if recent_sessions %}ul{% for s in recent_sessions %}listylemargin-bottom:8px;ahref{% url chat_home %}?session_id{{ s.session_id }}{{ s.title|default:s.session_id }}/aspanstylecolor:gray;font-size:12px;({{ s.updated_at }})/span/li{% endfor %}/ul{% else %}pclassempty暂无历史会话/p{% endif %}/div增加了会话列表的聊天页如下增加文档上传和数据库重建功能前面的系统做RAG能检索到的知识还是解析本地提前放在root\data目录下的论文现在要做功能升级系统接受pdf文件到上传并且动态建立数据库。知识向量数据库重建增加知识向量数据库重建服务接口知识向量数据库重建功能属于AI内核的功能所以这部分业务需要在AI内核部分进行完善在FastAPI的服务借口部分增加一个重建数据库的服务app.post(/reload_kb)defreload_kb():globalragprint( Reloading knowledge base...)docsload_pdfs(data)chunksprocess_documents(docs)ragRAGSystem(chunks)rag.build_index()return{status:success,message:fKnowledge base reloaded. Total chunks:{len(chunks)}}创建上传文件视图逻辑在AI内核有了知识向量数据库重建的逻辑后接下来在Django部分增加文档上传逻辑我们在页面提交论文的pdf后需要让pdf文件存入我们的root\data目录下修改documents/views.pyimportosfromdjango.shortcutsimportrenderfromdjango.confimportsettings DATA_DIRos.path.abspath(os.path.join(settings.BASE_DIR.parent,data))defupload_page(request):messageNoneerrorNoneifrequest.methodPOST:filerequest.FILES.get(paper_file)# 接受前端paper_file标签传过来的文件iffile:try:save_pathos.path.join(DATA_DIR,file.name)withopen(save_path,wb)asf:forchunkinfile.chunks():f.write(chunk)messagefFile uploaded:{file.name}exceptExceptionase:errorstr(e)else:errorNo file selectedreturnrender(request,documents/upload.html,{message:message,error:error})知识向量数据库重建知识向量数据库的重建发生在文件上传之后所以的在刚刚的文件上传完成后增加重建FastAPI的请求这样就可以完成重建ifrequest.methodPOST:filerequest.FILES.get(paper_file)iffile:try:save_pathos.path.join(DATA_DIR,file.name)withopen(save_path,wb)asf:forchunkinfile.chunks():f.write(chunk)# 文件写入成功messagefFile uploaded:{file.name}# 在这里触发知识库重建importrequests FASTAPI_URLhttp://127.0.0.1:8000try:requests.post(f{FASTAPI_URL}/reload_kb,timeout10)exceptExceptionase:print(⚠️ reload_kb failed:,e)exceptExceptionase:errorstr(e)else:errorNo file selected这里补一个小功能就是在Django的文件上传页面显示现在的data目录下已经有哪些pdf文件files[]try:forfinos.listdir(DATA_DIR):iff.endswith(.pdf):files.append(f)exceptExceptionase:print(list files error:,e)returnrender(request,documents/upload.html,{message:message,error:error,files:files# 新增})然后在文件上传页面django_shell/templates/documents/upload.html添加一个文件列表hr h3Current Knowledge Base Files/h3 {% if files %} ul {% for f in files %} li {{ f }}/li {% endfor %} /ul {% else %} p暂无文件/p {% endif %}加系统的可解释性在科研工作中有一个现实痛点看论文、做实验、写论文周期往往比较长有的时候我论文产生了某一个Idea而等到我写论文的时候我往往就忘了这个Idea是出自哪一篇参考文献所以我希望有一个论文检索和分析智能体系统我可以通过对话的方式让它帮我回忆起我的想法是来自哪一篇参考文献。所以问答系统在做RAG的时候我需要他告诉我它是依据知识向量数据库中的哪些知识回答我的问题的这样我在看到哪些知识的时候能回忆起那篇工作的同时也能避免大模型瞎编回答。显示检索到的Top-K内容首先需要对最早的RAG系统的回答逻辑进行修改让他返回值不仅是一个最终结果还要包含召回的相关知识需要在rag_system.py的类中增加一个方法ask_with_trace方法defask_with_trace(self,question,chat_historyNone):ifchat_historyisNone:chat_history[]retrievedself.retrieve(question,kself.top_k)# rerank用 texttexts[c[text]forcinretrieved]sorted_indicesself.rerank(question,texts)best_chunks[retrieved[i]foriinsorted_indices[:self.rerank_k]]# 拼 context加来源contextforcinbest_chunks:contextf[Source:{c[source]}]\n{c[text]}\n\nmessages[{role:system,content:You are a helpful assistant. Answer based on context and conversation history.}]# 保留历史对话messages.extend(chat_history)messages.append({role:user,content:f{context}\n\nQuestion:{question}})responseclient.chat.completions.create(modelCHAT_MODEL,messagesmessages)answerresponse.choices[0].message.content retrieved_chunks[]forcinbest_chunks[:5]:retrieved_chunks.append({source:c[source],text:c[text]})return{answer:answer,retrieved_chunks:retrieved_chunks}这一步完成后工具层的工具当然也需要变不再调用以往只返回结果的ask()方法而是调用新方法defrag_tool(query,chat_historyNone):returnrag.ask_with_trace(query,chat_historychat_history)调整问题回答节点这里有个坑以前是这样写的tool_resultstate[tool_result]ifisinstance(tool_result[tool_output],dict):return{final_answer:tool_result.get(answer,),retrieved_chunks:tool_result.get(retrieved_chunks,)}但是现在的数据是这样包装的state └── tool_result └── tool_output ← 真正的 rag 返回所以需要对问题回答节点进行调整多取一层数据tool_resultstate[tool_result]outputtool_result[tool_output]# 关键ifisinstance(output,dict):return{final_answer:output.get(answer,),retrieved_chunks:output.get(retrieved_chunks,[])}return{final_answer:str(output),retrieved_chunks:[]}随后对编排层app/graph/workflow.py的输出也要进行相应的调整以前返回的是状态图的final_answer字段现在返回整张状态图classAgentWorkflow:def__init__(self,tools,ragNone):#传入一些构建编排层的外部依赖self.toolstools self.ragrag self.graphbuild_agent_graph(tools,ragrag)# 建立图definvoke(self,session_id:str,query:str,chat_historyNone):ifchat_historyisNone:chat_history[]state{session_id:session_id,query:query,chat_history:chat_history,}resultself.graph.invoke(state)#返回结果仍是状态图returnresult然后调整FastAPI加上返回的Top-Kresultworkflow.invoke(session_idreq.session_id,queryreq.question,chat_historyhistory)answerresult.get(final_answer,)chunksresult.get(retrieved_chunks,[])session_manager.append_turn(req.session_id,req.question,answer)return{session_id:req.session_id,question:req.question,answer:answer,chunks:chunks,}相应的调整django中chat/views.py的视图逻辑 接受chunk和回答结果resultask_ai(...)# 后面补充chunksresult.get(chunks,[])# rander也要加上对应字段chunks:chunks再在页面中增加{%ifchunks%}hrh3Retrieved Context(Top-K)/h3ul{%forcinchunks%}listrong{{c.source}}/strongbr{{c.text}}/li{%endfor%}/ul{%endif%}这里有个大坑状态图也要调整我在做的时候忘记修改状态图的定义了导致节点没有间没有传递retrieved_chunks: list[dict[str, Any]]状态所以要在状体图中补相应的定义。如果这篇文章对你有帮助可以点个赞完整代码地址https://github.com/1186141415/Paper-RAG-Agent-with-LangGraph