Phi-4-mini-reasoning Chainlit实战：添加思维链（CoT）自动展开与折叠功能

Phi-4-mini-reasoning Chainlit实战添加思维链CoT自动展开与折叠功能1. 项目背景与目标Phi-4-mini-reasoning 是一个基于合成数据构建的轻量级开源模型专注于高质量、密集推理的数据并进一步微调以提高更高级的数学推理能力。该模型属于 Phi-4 模型家族支持 128K 令牌上下文长度。在实际使用中我们发现模型的思维链Chain of Thought, CoT输出往往较长直接展示会影响用户体验。本文将介绍如何在使用vllm部署的Phi-4-mini-reasoning文本生成模型基础上通过Chainlit前端实现CoT的自动展开与折叠功能。2. 环境准备与模型部署2.1 模型部署验证使用以下命令检查模型服务是否部署成功cat /root/workspace/llm.log如果看到类似下面的输出表示模型已成功加载Loading model weights... Model loaded successfully in 120.5s Ready for inference2.2 Chainlit基础调用Chainlit是一个强大的Python库可以快速构建AI应用的交互界面。基础调用代码如下import chainlit as cl from vllm import LLM, SamplingParams cl.on_chat_start async def on_chat_start(): llm LLM(modelphi-4-mini-reasoning) cl.user_session.set(llm, llm) cl.on_message async def on_message(message: cl.Message): llm cl.user_session.get(llm) sampling_params SamplingParams(temperature0.7, top_p0.9) response await llm.generate(message.content, sampling_params) await cl.Message(contentresponse).send()3. 实现CoT展开/折叠功能3.1 理解CoT输出结构Phi-4-mini-reasoning的CoT输出通常包含以下部分最终答案Final Answer推理步骤Reasoning Steps中间结论Intermediate Conclusions3.2 修改Chainlit消息处理我们需要修改消息处理函数将CoT输出解析为可折叠的结构from bs4 import BeautifulSoup import re def parse_cot_response(response): # 使用正则表达式分割CoT输出 final_answer re.search(rFinal Answer:(.*?)(?Reasoning Steps:), response, re.DOTALL) reasoning_steps re.search(rReasoning Steps:(.*?)(?Intermediate Conclusions:), response, re.DOTALL) intermediate re.search(rIntermediate Conclusions:(.*), response, re.DOTALL) # 构建HTML结构 html f div classcot-container div classfinal-answer{final_answer.group(1).strip() if final_answer else }/div details classreasoning-steps summary显示推理过程/summary div classsteps-content{reasoning_steps.group(1).strip() if reasoning_steps else }/div /details details classintermediate-conclusions summary显示中间结论/summary div classconclusions-content{intermediate.group(1).strip() if intermediate else }/div /details /div return html3.3 添加CSS样式在Chainlit的配置文件中添加CSS样式美化折叠面板cl.on_chat_start async def init_chat(): await cl.Message(content style .cot-container { font-family: Arial, sans-serif; line-height: 1.6; } details { margin: 10px 0; padding: 10px; border: 1px solid #ddd; border-radius: 4px; } summary { cursor: pointer; font-weight: bold; outline: none; } .steps-content, .conclusions-content { margin-top: 10px; padding: 10px; background-color: #f9f9f9; border-radius: 4px; } /style ).send()3.4 完整实现代码将以上部分组合起来完整的实现代码如下import chainlit as cl from vllm import LLM, SamplingParams import re cl.on_chat_start async def on_chat_start(): llm LLM(modelphi-4-mini-reasoning) cl.user_session.set(llm, llm) # 添加CSS样式 await cl.Message(content style .cot-container { font-family: Arial, sans-serif; line-height: 1.6; } details { margin: 10px 0; padding: 10px; border: 1px solid #ddd; border-radius: 4px; } summary { cursor: pointer; font-weight: bold; outline: none; } .steps-content, .conclusions-content { margin-top: 10px; padding: 10px; background-color: #f9f9f9; border-radius: 4px; } /style ).send() def parse_cot_response(response): final_answer re.search(rFinal Answer:(.*?)(?Reasoning Steps:), response, re.DOTALL) reasoning_steps re.search(rReasoning Steps:(.*?)(?Intermediate Conclusions:), response, re.DOTALL) intermediate re.search(rIntermediate Conclusions:(.*), response, re.DOTALL) html f div classcot-container div classfinal-answer{final_answer.group(1).strip() if final_answer else }/div details classreasoning-steps summary显示推理过程/summary div classsteps-content{reasoning_steps.group(1).strip() if reasoning_steps else }/div /details details classintermediate-conclusions summary显示中间结论/summary div classconclusions-content{intermediate.group(1).strip() if intermediate else }/div /details /div return html cl.on_message async def on_message(message: cl.Message): llm cl.user_session.get(llm) sampling_params SamplingParams(temperature0.7, top_p0.9) response await llm.generate(message.content, sampling_params) # 解析并格式化CoT输出 formatted_response parse_cot_response(response) await cl.Message(contentformatted_response, authorPhi-4-mini).send()4. 效果展示与使用技巧4.1 实际效果演示使用修改后的Chainlit前端用户将看到如下交互体验默认只显示最终答案点击显示推理过程可以展开详细的推理步骤点击显示中间结论可以查看模型生成的中间结论4.2 使用技巧优化提示词在提问时明确要求模型使用CoT格式输出例如请用Chain of Thought方式回答以下问题包含Final Answer、Reasoning Steps和Intermediate Conclusions部分。样式自定义可以通过修改CSS来调整折叠面板的外观例如改变颜色、边框等。响应式设计确保CSS样式在不同设备上都能良好显示。5. 总结通过本文介绍的方法我们成功实现了Phi-4-mini-reasoning模型CoT输出的自动展开与折叠功能大大提升了用户体验。这种方法不仅适用于Phi-4-mini-reasoning也可以应用于其他支持CoT输出的模型。关键实现要点包括使用正则表达式解析模型的标准CoT输出利用HTML5的details标签实现原生折叠功能通过CSS美化折叠面板的外观在Chainlit中发送HTML内容而非纯文本这种实现方式无需额外JavaScript代码完全依赖HTML和CSS既简单又高效。获取更多AI镜像想探索更多AI镜像和应用场景访问 CSDN星图镜像广场提供丰富的预置镜像覆盖大模型推理、图像生成、视频生成、模型微调等多个领域支持一键部署。