Phi-3.5-mini-instruct保姆级教学：Chainlit中集成TypingIndicator与Loading动画

Phi-3.5-mini-instruct保姆级教学：Chainlit中集成TypingIndicator与Loading动画

1. 模型简介与环境准备

Phi-3.5-mini-instruct是一个轻量级的开放模型，基于高质量数据集构建，支持128K令牌的上下文长度。这个模型经过严格的训练过程，包括监督微调、近端策略优化和直接偏好优化，能够精确遵循指令并具备强大的安全措施。

1.1 环境检查

在开始集成前，我们需要确认模型服务已成功部署。通过以下命令检查日志：

cat /root/workspace/llm.log

如果看到类似下面的输出，说明模型已成功加载：

Loading model weights... Model initialized successfully Ready for inference

2. Chainlit基础集成

2.1 安装必要依赖

首先确保已安装chainlit和必要的Python包：

pip install chainlit vllm

2.2 创建基础应用

创建一个简单的chainlit应用来调用Phi-3.5-mini-instruct模型：

import chainlit as cl from vllm import LLM, SamplingParams @cl.on_chat_start async def on_chat_start(): llm = LLM(model="Phi-3.5-mini-instruct") 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(temperature=0.7, top_p=0.9) response = await llm.generate(message.content, sampling_params) await cl.Message(content=response[0].outputs[0].text).send()

3. 添加TypingIndicator动画

3.1 实现基本打字指示器

Chainlit提供了内置的TypingIndicator功能，可以在模型处理请求时显示打字动画：

@cl.on_message async def on_message(message: cl.Message): llm = cl.user_session.get("llm") # 显示打字指示器 async with cl.Step(type="run", name="Phi-3.5-mini-instruct"): cl.context.current_step.input = message.content # 实际生成响应 sampling_params = SamplingParams(temperature=0.7, top_p=0.9) response = await llm.generate(message.content, sampling_params) # 发送响应 await cl.Message(content=response[0].outputs[0].text).send()

3.2 自定义打字动画样式

可以通过CSS自定义打字指示器的外观：

@cl.on_chat_start async def on_chat_start(): # 添加自定义CSS await cl.Message( content="", elements=[ cl.Html( content=""" <style> .typing-indicator { background-color: #f0f0f0; border-radius: 15px; padding: 10px 15px; } </style> """ ) ] ).send() llm = LLM(model="Phi-3.5-mini-instruct") cl.user_session.set("llm", llm)

4. 实现Loading动画

4.1 基础Loading动画

在模型处理请求时显示加载动画：

@cl.on_message async def on_message(message: cl.Message): llm = cl.user_session.get("llm") # 显示加载消息 loading_msg = cl.Message(content="") await loading_msg.send() # 添加加载动画 await loading_msg.stream_token("⌛ 正在处理您的请求...") # 实际生成响应 sampling_params = SamplingParams(temperature=0.7, top_p=0.9) response = await llm.generate(message.content, sampling_params) # 更新消息内容 await loading_msg.stream_token(response[0].outputs[0].text) await loading_msg.update()

4.2 高级Loading效果

结合进度条和状态更新：

@cl.on_message async def on_message(message: cl.Message): llm = cl.user_session.get("llm") # 创建进度条 progress_bar = cl.ProgressBar( total=100, label="模型推理进度", show_percentage=True ) await progress_bar.start() # 模拟进度更新 for i in range(0, 101, 10): await progress_bar.update(i) await asyncio.sleep(0.1) # 实际生成响应 sampling_params = SamplingParams(temperature=0.7, top_p=0.9) response = await llm.generate(message.content, sampling_params) # 完成进度条 await progress_bar.finish() # 发送响应 await cl.Message(content=response[0].outputs[0].text).send()

5. 完整实现与效果展示

5.1 完整代码示例

import chainlit as cl from vllm import LLM, SamplingParams import asyncio @cl.on_chat_start async def on_chat_start(): # 添加自定义CSS await cl.Message( content="", elements=[ cl.Html( content=""" <style> .typing-indicator { background-color: #f0f0f0; border-radius: 15px; padding: 10px 15px; } .progress-container { margin: 10px 0; } </style> """ ) ] ).send() llm = LLM(model="Phi-3.5-mini-instruct") cl.user_session.set("llm", llm) @cl.on_message async def on_message(message: cl.Message): llm = cl.user_session.get("llm") # 显示打字指示器 async with cl.Step(type="run", name="Phi-3.5-mini-instruct"): cl.context.current_step.input = message.content # 创建进度条 progress_bar = cl.ProgressBar( total=100, label="模型推理进度", show_percentage=True ) await progress_bar.start() # 模拟进度更新 for i in range(0, 101, 10): await progress_bar.update(i) await asyncio.sleep(0.1) # 实际生成响应 sampling_params = SamplingParams(temperature=0.7, top_p=0.9) response = await llm.generate(message.content, sampling_params) # 完成进度条 await progress_bar.finish() # 发送响应 await cl.Message(content=response[0].outputs[0].text).send()

5.2 效果展示

运行上述代码后，你将看到：

1. 用户输入问题后立即显示打字指示器
2. 进度条显示模型推理进度
3. 最终结果显示在聊天界面中

6. 总结与进阶建议

通过本教程，我们实现了在Chainlit应用中集成Phi-3.5-mini-instruct模型，并添加了TypingIndicator和Loading动画来提升用户体验。这些视觉反馈元素让用户清楚地知道模型正在处理请求，而不是卡住或无响应。

6.1 进阶优化建议

1. 自定义动画样式：通过CSS进一步美化指示器和加载动画
2. 真实进度反馈：根据模型实际处理进度更新进度条
3. 多状态指示：区分模型加载、推理中等不同状态
4. 错误处理：添加错误状态下的视觉反馈

6.2 性能考虑

1. 动画效果应轻量级，不影响主要功能性能
2. 避免过于复杂的动画导致界面卡顿
3. 确保动画与模型处理时间匹配，避免过快或过慢

---

获取更多AI镜像

想探索更多AI镜像和应用场景？访问 CSDN星图镜像广场，提供丰富的预置镜像，覆盖大模型推理、图像生成、视频生成、模型微调等多个领域，支持一键部署。