GLM-4-9B-Chat-1M Chainlit定制教程：品牌Logo+主题色+隐私政策弹窗集成-开发者社区

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 8000

2. Chainlit基础配置

2.1 安装Chainlit

确保你的Python环境已安装Chainlit：

pip install chainlit

2.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): # 模型交互逻辑 pass

4. 主题色定制

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 -w

7.2 测试所有功能

检查品牌Logo是否正确显示
验证主题色是否应用成功
确认隐私政策弹窗在首次访问时出现
测试与GLM-4-9B-Chat-1M模型的对话功能

8. 总结

通过本教程，我们完成了以下定制工作：

品牌形象集成：添加了自定义Logo，增强品牌识别度
UI主题定制：配置了符合品牌风格的主题颜色
隐私合规：实现了隐私政策弹窗，确保合规性
模型连接：完整对接了GLM-4-9B-Chat-1M大模型

这些定制不仅提升了用户体验，也使你的AI应用更具专业性和品牌一致性。你可以进一步扩展功能，如添加多语言支持、文件上传处理等，打造更强大的AI应用前端。

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

GLM-4-9B-Chat-1M Chainlit定制教程：品牌Logo+主题色+隐私政策弹窗集成