GLM-4-9B-Chat-1M保姆级教程Chainlit前端定制化Logo/主题/历史记录全步骤1. 环境准备与快速部署首先确保你已经通过vllm成功部署了GLM-4-9B-Chat-1M模型。这个模型支持1M上下文长度相当于约200万中文字符在多语言理解和长文本处理方面表现优异。检查模型部署状态很简单打开webshell输入cat /root/workspace/llm.log如果看到模型加载成功的日志信息说明部署已经完成。这时候你就可以开始使用chainlit来打造个性化的聊天前端了。需要准备的东西已经部署好的GLM-4-9B-Chat-1M模型服务基本的Python环境建议Python 3.8一个你喜欢的Logo图片建议尺寸256x256像素对前端样式的大致想法2. Chainlit基础配置2.1 安装与基础设置首先安装chainlit库pip install chainlit创建一个基本的app.py文件这是chainlit应用的入口import chainlit as cl import requests import json # 模型API地址根据你的实际部署调整 MODEL_API_URL http://localhost:8000/v1/chat/completions cl.on_chat_start async def start_chat(): # 初始化聊天设置 settings { model: glm-4-9b-chat-1m, temperature: 0.7, max_tokens: 4096 } cl.user_session.set(settings, settings)2.2 连接GLM-4-9B模型添加模型调用函数async def call_glm_model(messages, settings): 调用GLM-4-9B模型API payload { model: settings[model], messages: messages, temperature: settings[temperature], max_tokens: settings[max_tokens] } try: response requests.post( MODEL_API_URL, jsonpayload, headers{Content-Type: application/json}, timeout60 ) return response.json() except Exception as e: return {error: str(e)} cl.on_message async def main(message: cl.Message): # 获取用户消息 user_message message.content # 获取或初始化消息历史 messages cl.user_session.get(messages, []) messages.append({role: user, content: user_message}) # 获取模型设置 settings cl.user_session.get(settings) # 调用模型 response await call_glm_model(messages, settings) if error in response: await cl.Message(contentf请求出错: {response[error]}).send() return # 获取模型回复 model_reply response[choices][0][message][content] messages.append({role: assistant, content: model_reply}) # 保存消息历史 cl.user_session.set(messages, messages) # 发送回复 await cl.Message(contentmodel_reply).send()3. 前端界面定制化3.1 自定义Logo和标题在app.py同目录下创建chainlit.md文件来配置界面# 欢迎使用GLM-4智能助手 这里可以写下你的应用介绍和使用说明... span classcopyright© 2024 你的应用名称/span然后在app.py中添加配置# 在文件开头添加配置 cl.set_chat_profiles async def chat_profile(): return [ cl.ChatProfile( nameGLM-4智能助手, markdown_description基于GLM-4-9B-Chat-1M的多语言智能对话助手 ) ]3.2 自定义主题样式创建chainlit目录并在其中创建config.json{ theme: { primaryColor: #4F46E5, secondaryColor: #6366F1, backgroundColor: #FFFFFF, textColor: #1F2937, fontFamily: Inter, system-ui, sans-serif }, ui: { name: GLM-4智能助手, description: 支持1M上下文的多语言对话AI } }创建自定义CSS文件chainlit/static/style.css/* 自定义主题样式 */ .chat-container { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); } .message-user { background-color: #4F46E5; color: white; border-radius: 12px; } .message-assistant { background-color: #F3F4F6; color: #1F2937; border-radius: 12px; border: 1px solid #E5E7EB; }3.3 添加Logo图片将你的Logo图片比如logo.png放在chainlit/static/目录下然后在config.json中引用{ ui: { logo: /static/logo.png, logo_alt: GLM-4智能助手Logo, favicon: /static/logo.png } }4. 历史记录功能实现4.1 本地历史记录存储添加历史记录保存功能import json import os from datetime import datetime def save_chat_history(user_id, messages): 保存聊天历史到本地文件 history_dir chat_histories os.makedirs(history_dir, exist_okTrue) history_file os.path.join(history_dir, f{user_id}.json) # 只保存最近50条对话 if len(messages) 50: messages messages[-50:] with open(history_file, w, encodingutf-8) as f: json.dump({ last_updated: datetime.now().isoformat(), messages: messages }, f, ensure_asciiFalse, indent2) def load_chat_history(user_id): 从本地文件加载聊天历史 history_file os.path.join(chat_histories, f{user_id}.json) if os.path.exists(history_file): with open(history_file, r, encodingutf-8) as f: return json.load(f)[messages] return []4.2 集成到主程序修改消息处理函数来支持历史记录cl.on_message async def main(message: cl.Message): user_id cl.user_session.get(id, default_user) # 加载历史记录 messages load_chat_history(user_id) # 添加新消息 messages.append({role: user, content: message.content}) # 调用模型 settings cl.user_session.get(settings) response await call_glm_model(messages, settings) if error in response: await cl.Message(contentf请求出错: {response[error]}).send() return # 添加模型回复 model_reply response[choices][0][message][content] messages.append({role: assistant, content: model_reply}) # 保存历史记录 save_chat_history(user_id, messages) cl.user_session.set(messages, messages) await cl.Message(contentmodel_reply).send()5. 高级定制功能5.1 添加侧边栏设置创建可交互的设置面板cl.on_chat_start async def start_chat(): # 创建设置面板 settings await cl.ChatSettings( [ cl.input_widget.Slider( idtemperature, label创造性, initial0.7, min0, max1, step0.1 ), cl.input_widget.Slider( idmax_tokens, label最大生成长度, initial2048, min512, max4096, step256 ), cl.input_widget.Select( idlanguage, label回复语言, values[自动, 中文, 英文, 日文, 韩文], initial_index0 ) ] ).send() # 保存设置 cl.user_session.set(settings, { temperature: settings[temperature], max_tokens: settings[max_tokens], language: settings[language] })5.2 多语言支持利用GLM-4-9B的多语言能力def add_language_prompt(messages, language): 根据选择的语言添加提示词 if language 自动: return messages language_prompts { 中文: 请用中文回复, 英文: Please respond in English, 日文: 日本語で答えてください, 韩文: 한국어로 답변해 주세요 } if language in language_prompts: # 在最后一条用户消息后添加语言提示 last_user_message None for i in range(len(messages)-1, -1, -1): if messages[i][role] user: last_user_message messages[i] break if last_user_message: last_user_message[content] f\n\n{language_prompts[language]} return messages6. 完整示例代码这里是一个完整的app.py示例import chainlit as cl import requests import json import os from datetime import datetime # 配置 MODEL_API_URL http://localhost:8000/v1/chat/completions def save_chat_history(user_id, messages): 保存聊天历史 history_dir chat_histories os.makedirs(history_dir, exist_okTrue) history_file os.path.join(history_dir, f{user_id}.json) if len(messages) 50: messages messages[-50:] with open(history_file, w, encodingutf-8) as f: json.dump({ last_updated: datetime.now().isoformat(), messages: messages }, f, ensure_asciiFalse, indent2) def load_chat_history(user_id): 加载聊天历史 history_file os.path.join(chat_histories, f{user_id}.json) if os.path.exists(history_file): with open(history_file, r, encodingutf-8) as f: data json.load(f) return data.get(messages, []) return [] async def call_glm_model(messages, settings): 调用GLM模型 payload { model: glm-4-9b-chat-1m, messages: messages, temperature: settings[temperature], max_tokens: settings[max_tokens] } try: response requests.post( MODEL_API_URL, jsonpayload, headers{Content-Type: application/json}, timeout120 ) return response.json() except Exception as e: return {error: str(e)} cl.on_chat_start async def start_chat(): # 初始化设置 settings await cl.ChatSettings( [ cl.input_widget.Slider( idtemperature, label创造性, initial0.7, min0, max1, step0.1 ), cl.input_widget.Slider( idmax_tokens, label最大生成长度, initial2048, min512, max4096, step256 ) ] ).send() cl.user_session.set(settings, settings) cl.user_session.set(id, user_001) # 实际应用中应该使用唯一ID cl.on_message async def main(message: cl.Message): user_id cl.user_session.get(id) settings cl.user_session.get(settings) # 加载历史记录 messages load_chat_history(user_id) messages.append({role: user, content: message.content}) # 调用模型 response await call_glm_model(messages, settings) if error in response: await cl.Message(contentf出错: {response[error]}).send() return # 处理回复 model_reply response[choices][0][message][content] messages.append({role: assistant, content: model_reply}) # 保存历史 save_chat_history(user_id, messages) cl.user_session.set(messages, messages) await cl.Message(contentmodel_reply).send()7. 部署与运行7.1 启动Chainlit应用在终端中运行chainlit run app.py -w --port 8001-w参数启用自动重载开发时有用--port 8001指定端口号7.2 访问前端界面打开浏览器访问http://localhost:8001就能看到你定制化的聊天界面了。7.3 生产环境部署对于生产环境建议使用# 使用nohup后台运行 nohup chainlit run app.py --port 8001 chainlit.log 21 # 或者使用systemd服务8. 常见问题解决问题1连接模型失败检查MODEL_API_URL是否正确确认vllm服务是否正常运行查看防火墙设置问题2界面样式不生效确认chainlit目录和配置文件位置正确检查CSS文件路径和语法问题3历史记录无法保存检查文件写入权限确认chat_histories目录存在问题4响应速度慢调整max_tokens参数减少生成长度检查网络连接状况9. 总结通过这个教程你已经学会了如何基础搭建配置chainlit连接GLM-4-9B-Chat-1M模型界面定制修改Logo、主题样式、颜色方案功能增强实现聊天历史记录的保存和加载高级功能添加设置面板和多语言支持个性化建议尝试不同的颜色主题找到最适合你品牌风格的配色根据实际使用场景调整历史记录保存策略考虑添加文件上传功能充分利用GLM-4的长文本处理能力定期备份聊天历史数据现在你已经拥有了一个完全定制化的AI聊天前端既美观又实用。接下来可以继续探索chainlit的更多高级功能比如添加文件处理、多模态支持等让你的应用更加强大。获取更多AI镜像想探索更多AI镜像和应用场景访问 CSDN星图镜像广场提供丰富的预置镜像覆盖大模型推理、图像生成、视频生成、模型微调等多个领域支持一键部署。