GLM-4-9B-Chat-1M Chainlit定制教程：品牌Logo+主题色+隐私政策弹窗集成
1. 环境准备与快速部署
在开始定制Chainlit前端之前，我们需要先确保GLM-4-9B-Chat-1M模型已经成功部署。使用vLLM部署的模型可以通过以下命令检查服务状态：
cat /root/workspace/llm.log如果看到类似下面的输出，说明模型已成功加载并准备好接收请求：
Model loaded successfully Server started on port 80002. Chainlit基础配置
2.1 安装Chainlit
确保你的Python环境已安装Chainlit：
pip install chainlit2.2 创建基础应用
创建一个名为app.py的文件，包含最基本的Chainlit应用代码：
import chainlit as cl @cl.on_message async def main(message: cl.Message): # 这里将添加与GLM-4-9B-Chat-1M的交互逻辑 await cl.Message(content=f"收到消息: {message.content}").send()3. 品牌Logo集成
3.1 准备Logo文件
将你的品牌Logo图片（建议尺寸200x200像素）放在项目目录的assets文件夹中，命名为logo.png。
3.2 配置Chainlit使用自定义Logo
修改app.py文件，添加Logo配置：
import chainlit as cl @cl.on_chat_start async def start(): await cl.Avatar( name="Your Brand", path="./assets/logo.png" ).send() @cl.on_message async def main(message: cl.Message): # 模型交互逻辑 pass4. 主题色定制
4.1 创建主题配置文件
在项目根目录创建chainlit.md文件，添加以下内容配置主题色：
# 主题配置 theme: primaryColor: "#4F46E5" # 主色调 backgroundColor: "#FFFFFF" # 背景色 textColor: "#1F2937" # 文字颜色4.2 可用颜色变量
Chainlit支持以下CSS颜色变量定制：
primaryColor: 按钮、链接等主要交互元素backgroundColor: 应用背景色textColor: 主要文本颜色secondaryBackgroundColor: 次要背景区域borderColor: 边框颜色
5. 隐私政策弹窗实现
5.1 创建隐私政策内容
在assets文件夹中创建privacy_policy.html文件，包含你的隐私政策内容：
<div> <h2>隐私政策</h2> <p>我们重视您的隐私...</p> <!-- 详细隐私政策内容 --> </div>5.2 添加弹窗逻辑
修改app.py，在聊天开始时显示隐私政策弹窗：
@cl.on_chat_start async def start(): # 显示Logo await cl.Avatar(name="Your Brand", path="./assets/logo.png").send() # 隐私政策弹窗 with open("./assets/privacy_policy.html", "r") as f: policy = f.read() actions = [ cl.Action(name="accept", value="accept", label="同意"), cl.Action(name="decline", value="decline", label="拒绝") ] res = await cl.AskUserMessage( content=policy, actions=actions, timeout=300 ).send() if res and res.get("value") == "decline": await cl.Message(content="您需要同意隐私政策才能继续使用服务").send() raise cl.Error("用户拒绝隐私政策")6. 连接GLM-4-9B-Chat-1M模型
6.1 添加模型交互逻辑
更新app.py中的消息处理函数，连接vLLM部署的GLM模型：
import requests @cl.on_message async def main(message: cl.Message): # 调用GLM-4-9B-Chat-1M API response = requests.post( "http://localhost:8000/v1/chat/completions", json={ "model": "glm-4-9b-chat-1m", "messages": [{"role": "user", "content": message.content}] } ) if response.status_code == 200: result = response.json() await cl.Message(content=result["choices"][0]["message"]["content"]).send() else: await cl.Message(content="模型请求失败").send()6.2 添加对话历史支持
为了支持多轮对话，我们需要维护对话上下文：
@cl.on_chat_start async def start(): # 初始化对话历史 cl.user_session.set("conversation", []) # 其他初始化代码... @cl.on_message async def main(message: cl.Message): conversation = cl.user_session.get("conversation") conversation.append({"role": "user", "content": message.content}) response = requests.post( "http://localhost:8000/v1/chat/completions", json={ "model": "glm-4-9b-chat-1m", "messages": conversation } ) if response.status_code == 200: result = response.json() assistant_reply = result["choices"][0]["message"]["content"] conversation.append({"role": "assistant", "content": assistant_reply}) await cl.Message(content=assistant_reply).send()7. 运行与测试
7.1 启动Chainlit应用
使用以下命令启动定制后的Chainlit前端：
chainlit run app.py -w7.2 测试所有功能
- 检查品牌Logo是否正确显示
- 验证主题色是否应用成功
- 确认隐私政策弹窗在首次访问时出现
- 测试与GLM-4-9B-Chat-1M模型的对话功能
8. 总结
通过本教程，我们完成了以下定制工作：
- 品牌形象集成：添加了自定义Logo，增强品牌识别度
- UI主题定制：配置了符合品牌风格的主题颜色
- 隐私合规：实现了隐私政策弹窗，确保合规性
- 模型连接：完整对接了GLM-4-9B-Chat-1M大模型
这些定制不仅提升了用户体验，也使你的AI应用更具专业性和品牌一致性。你可以进一步扩展功能，如添加多语言支持、文件上传处理等，打造更强大的AI应用前端。
获取更多AI镜像
想探索更多AI镜像和应用场景？访问 CSDN星图镜像广场，提供丰富的预置镜像，覆盖大模型推理、图像生成、视频生成、模型微调等多个领域，支持一键部署。
