GLM-4-9B-Chat-1M Chainlit UI美化：主题切换、Markdown渲染、代码高亮配置

1. 项目介绍与环境准备

今天我们来聊聊如何给GLM-4-9B-Chat-1M大模型配上一个漂亮好用的聊天界面。如果你已经用vLLM部署好了这个强大的翻译大模型，但觉得默认的Chainlit界面有点朴素，那么这篇文章就是为你准备的。

GLM-4-9B-Chat-1M是智谱AI推出的新一代大模型，支持惊人的100万token上下文长度，相当于约200万中文字符。这意味着它可以处理超长文档，进行深度对话，而且在多语言翻译方面表现特别出色。

学习目标：

• 掌握Chainlit界面美化的基本方法
• 学会配置主题切换功能
• 实现Markdown内容的优雅渲染
• 配置代码高亮显示
• 打造专业级的AI对话界面

前置准备：

• 已经部署好的GLM-4-9B-Chat-1M模型服务
• 基本的Python编程知识
• Chainlit基础使用经验

2. Chainlit基础配置与美化

2.1 安装必要依赖

首先确保你的环境中有这些必要的Python包：

pip install chainlit>=1.0.0
pip install pygments  # 代码高亮支持
pip install markdown  # Markdown解析

2.2 创建美化配置文件

在项目根目录创建chainlit.md文件，这是Chainlit的配置文件：

# GLM-4-9B-Chat-1M 智能翻译助手

欢迎使用增强版聊天界面！本系统支持：
- 🌙 深色/浅色主题切换
- 📝 Markdown内容渲染
- 💻 代码语法高亮
- 🎨 现代化UI设计

体验更智能的多语言对话和翻译服务。

这个文件会显示在聊天界面的侧边栏，给用户提供使用指引。

3. 主题切换功能实现

3.1 配置主题选项

在chainlit配置中设置主题支持：

# chainlit配置示例
import chainlit as cl

@cl.on_chat_start
async def start_chat():
    # 设置默认主题为深色
    await cl.ChatSettings(
        [
            cl.Setting(
                name="theme",
                type="choice",
                choices=["light", "dark", "auto"],
                default="dark",
                description="选择界面主题"
            )
        ]
    ).send()

3.2 自定义CSS样式

创建assets文件夹，在里面添加custom.css文件：

/* 自定义主题样式 */
:root {
  --primary-color: #6366f1;
  --secondary-color: #818cf8;
  --background-color: #1f2937;
  --text-color: #f3f4f6;
}

[data-theme="light"] {
  --primary-color: #3b82f6;
  --secondary-color: #60a5fa;
  --background-color: #f9fafb;
  --text-color: #1f2937;
}

.chat-container {
  background: var(--background-color);
  color: var(--text-color);
}

.message {
  border-radius: 12px;
  padding: 16px;
  margin: 8px 0;
}

.user-message {
  background: var(--primary-color);
  color: white;
}

.assistant-message {
  background: var(--secondary-color);
  color: var(--text-color);
}

4. Markdown内容渲染优化

4.1 配置Markdown解析

Chainlit默认支持Markdown，但我们可以进一步优化显示效果：

import markdown
from pygments import highlight
from pygments.lexers import get_lexer_by_name
from pygments.formatters import HtmlFormatter

def render_enhanced_markdown(content):
    """增强的Markdown渲染函数"""
    # 转换Markdown为HTML
    html_content = markdown.markdown(content)
    
    # 这里可以添加自定义处理逻辑
    return html_content

@cl.on_message
async def main(message: cl.Message):
    # 处理用户消息
    user_input = message.content
    
    # 调用GLM-4模型获取回复
    response = await get_model_response(user_input)
    
    # 发送美化后的回复
    await cl.Message(
        content=response,
        language="markdown"  # 告诉Chainlit这是Markdown内容
    ).send()

4.2 处理复杂Markdown内容

对于模型返回的复杂Markdown内容，我们可以进行预处理：

def preprocess_markdown(text):
    """
    预处理Markdown文本，确保渲染效果
    """
    # 处理代码块
    text = text.replace("```python", "```python\n")
    
    # 确保列表格式正确
    lines = text.split('\n')
    processed_lines = []
    
    for line in lines:
        if line.startswith('- ') or line.startswith('* '):
            processed_lines.append(line)
        else:
            processed_lines.append(line)
    
    return '\n'.join(processed_lines)

5. 代码高亮配置

5.1 配置代码高亮主题

在Chainlit中配置代码高亮支持：

# 在Chainlit配置中添加代码高亮设置
@cl.on_chat_start
async def setup_code_highlighting():
    # 设置代码高亮样式
    await cl.run_sync(
        cl.set_code_theme("github-dark")  # 支持多种主题
    )

5.2 自定义代码块样式

在CSS中添加代码高亮样式：

/* 代码块样式 */
pre code {
  border-radius: 8px;
  padding: 16px;
  font-family: 'Fira Code', 'Monaco', monospace;
  font-size: 14px;
  line-height: 1.5;
}

/* 行号样式 */
.line-numbers {
  color: #6b7280;
  padding-right: 16px;
  border-right: 1px solid #374151;
}

/* 不同语言的代码块 */
.language-python {
  background: #1e1e1e;
}

.language-javascript {
  background: #2b2b2b;
}

.language-html {
  background: #272822;
}

6. 完整的美化配置示例

6.1 完整的app.py配置

import chainlit as cl
import requests
import json
import markdown
from typing import Optional

# GLM-4模型API配置
MODEL_API_URL = "http://localhost:8000/v1/chat/completions"
HEADERS = {"Content-Type": "application/json"}

@cl.on_chat_start
async def setup_chat():
    """聊天初始化配置"""
    # 设置主题选项
    settings = await cl.ChatSettings(
        [
            cl.Setting(
                name="theme",
                type="choice",
                choices=["light", "dark", "auto"],
                default="dark",
                description="选择界面主题"
            ),
            cl.Setting(
                name="font_size",
                type="slider",
                min=12,
                max=18,
                step=1,
                default=14,
                description="字体大小"
            )
        ]
    ).send()
    
    # 欢迎消息
    welcome_msg = """## 🎉 欢迎使用GLM-4-9B-Chat-1M增强版
    
**特色功能：**
- 🌙 支持主题切换
- 📝 Markdown完美渲染  
- 💻 代码语法高亮
- 🎨 现代化界面设计

开始您的多语言对话体验吧！"""
    
    await cl.Message(content=welcome_msg).send()

@cl.on_message
async def handle_message(message: cl.Message):
    """处理用户消息"""
    # 显示加载状态
    msg = cl.Message(content="")
    await msg.send()
    
    try:
        # 准备请求数据
        payload = {
            "model": "glm-4-9b-chat-1m",
            "messages": [{"role": "user", "content": message.content}],
            "temperature": 0.7,
            "max_tokens": 2000
        }
        
        # 调用模型API
        response = requests.post(MODEL_API_URL, json=payload, headers=HEADERS)
        response.raise_for_status()
        
        # 解析响应
        result = response.json()
        model_response = result['choices'][0]['message']['content']
        
        # 预处理Markdown内容
        processed_response = preprocess_markdown(model_response)
        
        # 更新消息内容
        msg.content = processed_response
        await msg.update()
        
    except Exception as e:
        error_msg = f"❌ 请求出错: {str(e)}"
        msg.content = error_msg
        await msg.update()

def preprocess_markdown(text: str) -> str:
    """预处理Markdown文本"""
    # 这里可以添加自定义处理逻辑
    return text

# 启动应用
if __name__ == "__main__":
    cl.run(main=handle_message)

6.2 运行和测试

启动美化后的Chainlit应用：

# 启动应用
chainlit run app.py -w

# 或者指定端口
chainlit run app.py --port 7860

打开浏览器访问显示地址，你应该能看到一个功能丰富、界面美观的聊天界面。

7. 实用技巧与问题解决

7.1 常见问题解决

问题1：主题切换不生效

# 确保在chat start中正确设置了主题选项
@cl.on_chat_start
async def setup_theme():
    settings = await cl.ChatSettings([
        cl.Setting(
            name="theme",
            type="choice",
            choices=["light", "dark", "auto"],
            default="dark"
        )
    ]).send()

问题2：代码高亮显示异常

/* 检查CSS中代码块样式是否正确 */
pre code {
  display: block;
  overflow-x: auto;
  padding: 1em;
}

7.2 性能优化建议

对于长文本处理，建议添加分块处理：

async def stream_response(message: cl.Message):
    """流式响应处理"""
    msg = cl.Message(content="")
    await msg.send()
    
    # 模拟流式输出
    response_text = "这是模型的响应内容..."
    for char in response_text:
        msg.content += char
        await msg.update()
        # 添加短暂延迟，模拟流式效果
        await asyncio.sleep(0.01)

8. 总结

通过今天的配置，我们成功将GLM-4-9B-Chat-1M模型的Chainlit界面从一个基础聊天窗口升级为了功能丰富、视觉美观的专业级应用。

主要改进点：

• ✅ 实现了深色/浅色主题切换功能
• ✅ 优化了Markdown内容的渲染效果
• ✅ 配置了代码语法高亮显示
• ✅ 添加了自定义CSS样式美化
• ✅ 完善了用户交互体验

下一步建议：

1. 尝试添加更多自定义主题颜色
2. 探索Chainlit的更多高级功能（如文件上传、图表显示等）
3. 根据实际使用反馈持续优化界面设计
4. 考虑添加对话历史管理功能

现在你的GLM-4大模型不仅能力强大，还有一个配得上它实力的漂亮界面了！

---

获取更多AI镜像

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