GLM-4-9B-Chat-1M保姆级教程：WebUI中Latex公式渲染+图表生成能力开启

1. 引言：为什么你需要这个功能？

想象一下，你正在用本地部署的大模型分析一份复杂的学术论文，里面充满了数学公式和图表。模型虽然能理解内容，但回复给你的公式是一堆难懂的LaTeX代码，图表也只是用文字描述。你需要手动复制代码到编辑器里渲染，或者根据描述自己画图——这太麻烦了，完全失去了智能助手的便利性。

这正是我们今天要解决的问题。GLM-4-9B-Chat-1M本身是一个强大的本地长文本模型，但它的WebUI默认回复是纯文本。通过本教程，你将解锁两项核心增强能力：

1. LaTeX公式渲染：让模型回复中的数学公式直接以美观、标准的排版形式显示。
2. 图表生成能力：让模型不仅能描述数据，还能直接生成并展示对应的图表（如折线图、柱状图）。

简单说，就是让这个本地大模型的输出，从“能看懂的文字”升级为“既好看又实用的图文报告”。无论你是学生、研究员、数据分析师还是工程师，这个功能都能极大提升你与模型交互的效率和体验。

2. 环境准备与项目启动

在开启新功能前，我们需要先确保基础环境已经就绪。如果你已经成功部署并运行了GLM-4-9B-Chat-1M的WebUI，可以跳过2.1节，直接从2.2节开始。

2.1 基础部署（若未完成）

如果你还没有部署项目，请先完成以下步骤。这里我们提供一个最简化的流程。

步骤一：克隆项目与安装依赖 打开你的终端（命令行），执行以下命令来获取项目代码并安装必要的Python包。

# 1. 克隆项目仓库到本地
git clone https://github.com/THUDM/GLM-4-9B-Chat-1M-WebUI.git
cd GLM-4-9B-Chat-1M-WebUI

# 2. 创建并激活Python虚拟环境（推荐，避免包冲突）
python -m venv venv
# 在Windows上激活：
# venv\Scripts\activate
# 在Mac/Linux上激活：
# source venv/bin/activate

# 3. 安装项目依赖
pip install -r requirements.txt

说明：requirements.txt 文件包含了运行WebUI所需的核心库，如streamlit, torch, transformers等。安装过程可能需要几分钟。

步骤二：下载与配置模型 模型文件较大，你需要确保有足够的磁盘空间（约20GB），并正确配置模型路径。

# 本项目通常已集成模型下载脚本，运行以下命令（具体请查看项目README）
# 示例命令，请以项目实际说明为准
python download_model.py --model-name glm-4-9b-chat-1M

# 或者，如果你已从其他渠道下载了模型，只需在配置文件中指定模型本地路径
# 编辑 `config.yaml` 或 `app.py` 中的 `model_path` 变量

关键点：请务必查阅项目根目录下的 README.md 文件，里面会有最准确的模型下载和配置指引。

步骤三：启动基础WebUI 依赖安装和模型准备就绪后，就可以启动最基础的聊天界面了。

streamlit run app.py

运行成功后，终端会显示一个本地网络地址（通常是 http://localhost:8501）。用浏览器打开这个地址，你应该能看到一个简洁的聊天界面，此时已经可以和拥有百万上下文能力的GLM-4-9B-Chat-1M对话了，但还不支持公式渲染和图表。

2.2 安装增强功能依赖包

基础功能运行良好后，我们现在来安装实现公式渲染和图表生成的关键库。

保持你的虚拟环境处于激活状态，在项目根目录下，执行以下安装命令：

# 安装LaTeX数学公式渲染库
pip install latex2mathml

# 安装图表生成库 (Matplotlib是Python最常用的绘图库)
pip install matplotlib

安装说明：

• latex2mathml：这个库负责将LaTeX代码转换为浏览器能理解的MathML格式，从而实现网页上的精美公式渲染。
• matplotlib：这是Python生态中功能最强大、使用最广泛的绘图库。我们将利用它，根据模型对数据的描述或分析，动态生成图表。

安装过程通常很快。完成后，我们的“武器库”就准备好了。

3. 核心功能一：开启LaTeX公式渲染

现在进入实战环节。我们要修改WebUI的代码，让它在输出回答时，自动识别并渲染LaTeX公式。

3.1 理解原理

模型在输出包含数学公式的回答时，通常会用LaTeX语法包裹起来，比如 $E = mc^2$ 或 $$\int_a^b f(x)dx$$。默认的WebUI会把这些代码原样显示为文本。我们的目标是：

1. 识别：在模型返回的文本中，找到这些被 $...$ 或 $$...$$ 包裹的LaTeX片段。
2. 转换：使用 latex2mathml 库将LaTeX代码转换为MathML。
3. 渲染：利用Streamlit支持HTML的特性，将MathML嵌入到输出中，浏览器就会将其渲染为美观的公式。

3.2 修改WebUI代码

我们需要找到负责显示模型回复的代码部分。通常，这个逻辑在 app.py 或类似的主应用文件中。

步骤一：定位并修改显示函数

1. 用代码编辑器（如VSCode、PyCharm）打开 app.py。
2. 搜索包含 st.write、st.markdown 或 st.chat_message 的函数，这些是Streamlit用来显示内容的关键函数。特别是处理 assistant 角色消息的部分。
3. 我们需要编写一个辅助函数，用来处理包含LaTeX的文本。在文件开头或合适的位置添加以下函数：

import re
import latex2mathml.converter

def render_latex_in_text(text):
    """
    将文本中的LaTeX公式（$...$ 和 $$...$$）转换为HTML可渲染的格式。
    """
    # 处理行内公式：$...$
    def replace_inline(match):
        latex_code = match.group(1)
        try:
            mathml = latex2mathml.converter.convert(latex_code)
            return f'<span style="font-size: 1.1em;">{mathml}</span>'
        except:
            # 如果转换失败，返回原LaTeX代码
            return f'${latex_code}$'

    # 处理独立公式：$$...$$
    def replace_display(match):
        latex_code = match.group(1)
        try:
            mathml = latex2mathml.converter.convert(latex_code)
            # 独立公式居中显示
            return f'<div style="text-align: center; margin: 1em 0;">{mathml}</div>'
        except:
            return f'$${latex_code}$$'

    # 先替换独立公式，再替换行内公式，避免冲突
    text = re.sub(r'\$\$(.*?)\$\$', replace_display, text, flags=re.DOTALL)
    text = re.sub(r'\$(.*?)\$', replace_inline, text, flags=re.DOTALL)
    return text

步骤二：应用渲染函数 找到显示模型回复的地方。假设原来是这样写的：

with st.chat_message("assistant"):
    st.write(model_response) # 直接显示纯文本

将其修改为：

with st.chat_message("assistant"):
    # 使用自定义函数处理回复文本
    rendered_response = render_latex_in_text(model_response)
    st.markdown(rendered_response, unsafe_allow_html=True) # 关键：允许渲染HTML

关键改动：将 st.write 替换为 st.markdown(...， unsafe_allow_html=True)，并传入处理后的文本。unsafe_allow_html=True 参数是允许Streamlit渲染我们生成的HTML（即MathML）所必需的。

3.3 测试公式渲染

保存 app.py 文件，然后重启你的WebUI服务（在终端按 Ctrl+C 停止，再运行 streamlit run app.py）。

在重启后的WebUI中，向模型提问一个包含数学公式的问题，例如：

“请解释质能方程，并写出公式。”

如果一切配置正确，模型的回复中，类似 $E = mc^2$ 的部分将不再显示为纯文本，而是被渲染成一个标准、美观的数学公式：E = mc²。

4. 核心功能二：集成图表生成能力

接下来，我们让模型不仅能说，还能“画”。我们将赋予WebUI根据对话上下文或用户指令，动态生成图表的能力。

4.1 设计交互逻辑

我们不想让模型直接输出复杂的绘图代码让用户去执行。我们设计一个更优雅的方式：指令触发。 当用户在提问中明确包含如“画个图”、“生成图表”、“展示趋势”等关键词时，模型在文本回复的末尾，可以附加一个特殊的标记（例如 [CHART_DATA:...]），其中包含生成图表所需的数据和类型信息。然后，由WebUI前端解析这个标记并调用 matplotlib 生成图表。

步骤一：扩展模型回复处理逻辑 首先，我们需要升级之前写的 render_latex_in_text 函数（或新建一个处理函数），使其能同时处理公式和图表指令。

在 app.py 中添加图表生成函数：

import matplotlib.pyplot as plt
import io
import base64

def generate_and_display_chart(chart_data_str):
    """
    解析图表指令字符串并生成图表。
    假设指令格式为：[CHART_DATA: type=line, x=1,2,3, y=4,5,6, title=示例图]
    """
    try:
        # 简易解析逻辑，实际可根据需求复杂化
        params = {}
        for item in chart_data_str.split(','):
            if '=' in item:
                key, value = item.split('=', 1)
                params[key.strip()] = value.strip()

        chart_type = params.get('type', 'line')
        x_data = list(map(float, params.get('x', '').split(','))) if params.get('x') else []
        y_data = list(map(float, params.get('y', '').split(','))) if params.get('y') else []
        title = params.get('title', '生成的图表')

        fig, ax = plt.subplots()
        if chart_type == 'line':
            ax.plot(x_data, y_data, marker='o')
        elif chart_type == 'bar':
            ax.bar(range(len(x_data)), y_data, tick_label=x_data)
        # 可以扩展更多图表类型，如 scatter, pie 等

        ax.set_title(title)
        ax.set_xlabel(params.get('x_label', 'X轴'))
        ax.set_ylabel(params.get('y_label', 'Y轴'))
        plt.tight_layout()

        # 将图表转换为图片并嵌入HTML
        buf = io.BytesIO()
        plt.savefig(buf, format='png', dpi=100)
        plt.close(fig) # 关闭图形，释放内存
        buf.seek(0)
        data = base64.b64encode(buf.read()).decode('utf-8')
        return f'<img src="data:image/png;base64,{data}" alt="图表" style="max-width:100%;">'
    except Exception as e:
        return f'<p style="color: red;">图表生成失败: {e}</p>'

步骤二：创建综合内容处理函数 现在，创建一个总调度函数，它能按顺序处理文本中的公式和图表指令。

def process_model_response(full_response):
    """
    处理模型返回的完整文本，依次渲染公式和图表。
    """
    # 1. 分离出可能的图表指令
    chart_html = ""
    chart_pattern = r'\[CHART_DATA:(.*?)\]'
    chart_match = re.search(chart_pattern, full_response, re.DOTALL)

    if chart_match:
        chart_data = chart_match.group(1)
        chart_html = generate_and_display_chart(chart_data)
        # 从原文本中移除图表指令标记
        full_response = re.sub(chart_pattern, '', full_response, flags=re.DOTALL).strip()

    # 2. 渲染文本中的LaTeX公式
    rendered_text = render_latex_in_text(full_response)

    # 3. 组合文本和图表
    final_output = rendered_text
    if chart_html:
        final_output += f'<br><br><h4>📈 生成图表</h4>{chart_html}'

    return final_output

步骤三：应用新的处理流程 最后，在显示模型回复的地方，改用这个新的处理函数。

找到原来的显示部分，修改为：

with st.chat_message("assistant"):
    # 使用综合处理函数
    final_display_content = process_model_response(model_response)
    st.markdown(final_display_content, unsafe_allow_html=True)

4.2 测试图表生成

重启WebUI服务后，进行测试。由于当前版本的GLM-4-9B-Chat-1M可能不会主动输出我们预设的 [CHART_DATA:...] 指令格式，我们可以分两步走：

1. 初步功能测试：你可以暂时修改代码，在 process_model_response 函数中模拟一个图表指令，确保图表生成和显示的流程是通的。
2. 完整流程测试（进阶）：要实现真正的智能图表生成，你需要对模型的输入（Prompt）进行引导，或者在后端对模型的输出进行后处理。例如，你可以设计一个系统提示词，告诉模型：“当用户要求绘图时，请在你的回答末尾，以 [CHART_DATA: type=..., x=..., y=..., title=...] 的格式提供数据。” 这涉及到更深入的提示工程或模型输出解析，是本教程基础上的进阶玩法。

一个简单的测试方法是，直接在 process_model_response 函数里，如果检测到用户输入包含“画图”关键词，就自动附加一个测试图表。

5. 总结与进阶建议

5.1 功能回顾

通过本教程，我们为本地部署的GLM-4-9B-Chat-1M WebUI成功加装了两项实用“武器”：

• LaTeX公式渲染：利用 latex2mathml 库，将模型回复中的数学代码自动转换为网页上直观的公式，极大提升了阅读科技、学术类内容的体验。
• 图表生成能力：通过集成 matplotlib 和设计一个简单的指令解析流程，为模型赋予了“可视化”表达能力，使其分析结果更加一目了然。

5.2 可能遇到的问题与排查

• 公式不显示/显示代码：检查 latex2mathml 是否安装成功，以及 unsafe_allow_html=True 参数是否添加。浏览器的开发者工具（Console）中可能有错误信息。
• 图表不显示：检查 matplotlib 是否安装。确保 generate_and_display_chart 函数中的数据处理逻辑（字符串分割、类型转换）与模型输出的指令格式严格匹配。
• 页面布局错乱：复杂的HTML和图表可能会影响Streamlit的默认布局。可以考虑使用 st.columns 或容器来更好地组织内容。

5.3 下一步可以做什么？

你现在拥有的是一个功能增强版的本地智能助手。在此基础上，还可以继续探索：

• 美化界面：使用Streamlit的组件库（如 streamlit-aggrid, plotly）让图表交互性更强、界面更美观。
• 扩展图表类型：在 generate_and_display_chart 函数中增加对散点图、饼图、热力图等更多图表类型的支持。
• 优化交互逻辑：实现更自然的多轮对话图表生成，例如让模型可以基于上一轮对话生成的图表数据，在下一轮中进行修改或对比。
• 结合文件上传：允许用户上传CSV或Excel文件，让模型直接分析文件数据并生成图表。

---

获取更多AI镜像

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