当前位置：首页 > news >正文

Phi-3-mini-128k-instruct Chainlit美化：响应卡片布局、引用高亮与来源标注功能

news 2026/5/12 20:45:28

Phi-3-mini-128k-instruct Chainlit美化：响应卡片布局、引用高亮与来源标注功能

1. 模型简介

Phi-3-Mini-128K-Instruct是一个38亿参数的轻量级开放模型，属于Phi-3系列的最新成员。这个模型经过精心训练，特别擅长理解复杂指令和进行逻辑推理。

1.1 核心特点

轻量高效：仅38亿参数却能实现接近大模型的性能
超长上下文：支持128K tokens的超长文本处理
安全可靠：经过严格的安全对齐训练
多领域能力：在编程、数学、逻辑推理等方面表现优异

这个模型使用vLLM框架部署，配合Chainlit前端，可以快速搭建一个功能完善的AI对话系统。下面我们将重点介绍如何通过Chainlit实现更美观、更实用的交互界面。

2. Chainlit前端美化方案

2.1 响应式卡片布局实现

传统的文本对话界面往往显得单调，我们可以通过Chainlit的卡片功能让响应更加结构化：

import chainlit as cl @cl.on_message async def main(message: cl.Message): # 调用Phi-3模型获取响应 response = await get_phi3_response(message.content) # 创建响应卡片 card = cl.Card( title="模型响应", content=response, size="large", color="#4f46e5" ) await cl.Message(content="").send() await card.send()

这种布局方式有三大优势：

视觉上更清晰地区分问题和回答
可以灵活控制卡片大小和颜色
支持后续添加更多交互元素

2.2 引用内容高亮显示

对于包含引用或重要信息的文本，我们可以使用Markdown语法实现高亮：

from markdown import markdown def format_response(response): # 识别引用内容并添加高亮标记 highlighted = response.replace("[引用]", "**>>>**").replace("[/引用]", "**<<<**") return markdown(highlighted) @cl.on_message async def main(message: cl.Message): response = await get_phi3_response(message.content) formatted = format_response(response) await cl.Message(content=formatted).send()

效果展示：

>>>根据2023年AI安全研究报告显示...<<<

2.3 来源标注功能实现

对于需要标注信息来源的场合，可以在卡片底部添加来源说明：

async def send_response_with_source(message, response, source=None): elements = [] if source: elements.append(cl.Text(name="来源", content=source, display="inline")) await cl.Message( content=response, elements=elements ).send()

3. 完整实现示例

下面是一个完整的Chainlit美化实现方案：

import chainlit as cl from phi3_wrapper import Phi3Client phi3 = Phi3Client("http://localhost:8000") def format_response(text): # 高亮引用 text = text.replace("[引用]", "<span style='color:#4f46e5;font-weight:bold'>") text = text.replace("[/引用]", "</span>") # 识别来源 source = None if "[来源]" in text: parts = text.split("[来源]") text = parts[0] source = parts[1].strip() return text, source @cl.on_message async def main(message: cl.Message): # 获取模型原始响应 raw_response = phi3.generate(message.content) # 格式化响应 content, source = format_response(raw_response) # 创建消息元素 elements = [] if source: elements.append(cl.Text(name="数据来源", content=source, display="inline")) # 发送美化后的响应 await cl.Message( content=content, elements=elements ).send()