GLM-4-9B-Chat-1M Chainlit集成教程：WebSocket流式传输+前端Token计数器实现

优质文章学习记录

— 8 min read

GLM-4-9B-Chat-1M Chainlit集成教程：WebSocket流式传输+前端Token计数器实现

1. 项目概述与学习目标

今天我们来学习如何将强大的GLM-4-9B-Chat-1M大模型与Chainlit前端框架完美集成，实现WebSocket流式传输和前端Token计数功能。这个教程特别适合想要快速搭建AI对话应用的开发者。

通过本教程，你将学会：

  • 如何部署GLM-4-9B-Chat-1M大模型
  • 如何使用Chainlit构建美观的Web界面
  • 如何实现WebSocket流式传输让回复逐字显示
  • 如何在前端实时统计Token使用情况
  • 如何解决实际部署中的常见问题

不需要深厚的技术背景，只要会基本的Python编程就能跟着做。我们用的GLM-4-9B-Chat-1M支持惊人的100万上下文长度，相当于约200万中文字符，这在长文档处理方面表现非常出色。

2. 环境准备与模型部署

2.1 系统要求与依赖安装

首先确保你的环境满足以下要求：

  • Python 3.8或更高版本
  • 足够的GPU内存（建议至少24GB）
  • 基本的Python包管理知识

安装必要的依赖包：

pip install chainlit transformers torch vllm

2.2 验证模型部署状态

部署完成后，我们需要确认模型服务是否正常运行。通过以下命令检查部署状态：

cat /root/workspace/llm.log

如果看到类似下面的输出，说明模型部署成功：

Model loaded successfully Service started on port 8000 Inference engine ready

这个日志文件会显示模型加载的详细过程，包括内存占用、加载时间等关键信息。如果遇到问题，首先检查这个日志文件。

3. Chainlit前端集成基础

3.1 创建Chainlit应用

Chainlit是一个专门为AI应用设计的Python框架，可以快速构建交互式界面。创建一个基本的app.py文件：

import chainlit as cl from vllm import LLM, SamplingParams # 初始化模型 llm = LLM(model="/path/to/glm-4-9b-chat-1m") @cl.on_chat_start async def start_chat(): # 初始化会话状态 await cl.Message(content="欢迎使用GLM-4-9B聊天助手！").send() @cl.on_message async def main(message: cl.Message): # 处理用户消息 response = "这是模型的回复" await cl.Message(content=response).send()

3.2 启动Chainlit服务

运行以下命令启动前端服务：

chainlit run app.py -w

-w参数表示自动重新加载，在开发时特别有用。启动后，在浏览器中打开显示的地址（通常是http://localhost:8000）就能看到聊天界面了。

4. WebSocket流式传输实现

4.1 配置流式响应

传统的API调用需要等待完整响应，而流式传输可以让回复逐字显示，用户体验更好。修改之前的代码：

@cl.on_message async def main(message: cl.Message): # 设置采样参数 sampling_params = SamplingParams( temperature=0.7, max_tokens=1024, stream=True ) # 创建消息对象用于流式更新 msg = cl.Message(content="") await msg.send() # 流式生成回复 stream = llm.generate(message.content, sampling_params, stream=True) for chunk in stream: if chunk.text: await msg.stream_token(chunk.text) await msg.update()

4.2 处理流式数据

流式传输的关键在于逐步发送数据而不是一次性发送完整响应。这种方法有几个好处：

  • 用户不用长时间等待空白屏幕
  • 可以实时看到生成过程
  • 如果生成了不满意的内容，可以提前停止

在实际应用中，你可能会遇到网络延迟或中断的情况，建议添加重试机制和超时处理。

5. 前端Token计数器实现

5.1 Token统计原理

Token是模型处理文本的基本单位，了解Token使用情况有助于控制成本和优化体验。我们需要在前后端都进行统计：

import tiktoken # 用于Token计数 def count_tokens(text): """统计文本的Token数量""" encoding = tiktoken.get_encoding("cl100k_base") return len(encoding.encode(text)) @cl.on_message async def main(message: cl.Message): # 统计输入Token input_tokens = count_tokens(message.content) msg = cl.Message(content="") await msg.send() stream = llm.generate(message.content, sampling_params, stream=True) for chunk in stream: if chunk.text: await msg.stream_token(chunk.text) full_response += chunk.text # 统计输出Token output_tokens = count_tokens(full_response) # 发送Token统计信息 token_info = f"\n\n---\n*输入Token: {input_tokens} | 输出Token: {output_tokens} | 总计: {input_tokens + output_tokens}*" await cl.Message(content=token_info).send()

5.2 实时显示Token计数

为了让用户实时看到Token使用情况，我们可以创建更高级的显示方式：

@cl.on_message async def main(message: cl.Message): # 创建Token计数显示 token_display = cl.Message(content="计算中...") await token_display.send() input_tokens = count_tokens(message.content) total_tokens = input_tokens # 更新Token显示 await token_display.update(content=f"输入Token: {input_tokens} | 输出Token: 0 | 总计: {total_tokens}") msg = cl.Message(content="") await msg.send() stream = llm.generate(message.content, sampling_params, stream=True) for chunk in stream: if chunk.text: await msg.stream_token(chunk.text) full_response += chunk.text # 实时更新Token计数 output_tokens = count_tokens(full_response) total_tokens = input_tokens + output_tokens await token_display.update(content=f"输入Token: {input_tokens} | 输出Token: {output_tokens} | 总计: {total_tokens}")

6. 完整集成示例代码

下面是一个完整的集成示例，包含了所有功能：

import chainlit as cl from vllm import LLM, SamplingParams import tiktoken import asyncio # 初始化模型和编码器 llm = LLM(model="/path/to/glm-4-9b-chat-1m") encoding = tiktoken.get_encoding("cl100k_base") def count_tokens(text): """统计文本的Token数量""" return len(encoding.encode(text)) @cl.on_chat_start async def start_chat():"欢迎使用GLM-4-9B-Chat-1M聊天助手！ 特性： - 支持100万上下文长度 - 流式响应，逐字显示 - 实时Token计数 - 多语言支持 开始对话吧！""" await cl.Message(content=welcome_msg).send() @cl.on_message async def main(message: cl.Message): # 统计输入Token input_tokens = count_tokens(message.content) # 创建Token计数显示 token_display = cl.Message(content=f"输入Token: {input_tokens} | 输出Token: 0 | 总计: {input_tokens}") await token_display.send() # 创建回复消息 msg = cl.Message(content="") await msg.send() # 设置生成参数 sampling_params = SamplingParams( temperature=0.7, max_tokens=1024, top_p=0.9, stream=True ) # 流式生成回复 try: stream = llm.generate(message.content, sampling_params, stream=True) for chunk in stream: if chunk.text: await msg.stream_token(chunk.text) full_response += chunk.text # 更新Token计数（每秒更新一次，避免过于频繁） output_tokens = count_tokens(full_response) total_tokens = input_tokens + output_tokens await token_display.update(content=f"输入Token: {input_tokens} | 输出Token: {output_tokens} | 总计: {total_tokens}") # 稍微延迟以避免过于频繁的更新 await asyncio.sleep(0.1) except Exception as e: error_msg = f"生成过程中出现错误: {str(e)}" await msg.update(content=error_msg) await msg.update() # 最终更新Token计数 output_tokens = count_tokens(full_response) total_tokens = input_tokens + output_tokens await token_display.update(content=f"输入Token: {input_tokens} | 输出Token: {output_tokens} | 总计: {total_tokens}") # Chainlit配置 cl.integration_settings.auto_scroll = True cl.integration_settings.show_sidebar = True

7. 部署与优化建议

7.1 性能优化技巧

在实际部署中，可以考虑以下优化措施：

内存优化：

# 使用量化模型减少内存占用 llm = LLM( model="/path/to/glm-4-9b-chat-1m", quantization="awq", # 使用AWQ量化 gpu_memory_utilization=0.8 # 控制GPU内存使用率 )

响应速度优化：

# 调整生成参数平衡速度和质量 sampling_params = SamplingParams( temperature=0.7, max_tokens=512, # 限制生成长度 skip_special_tokens=True, # 跳过特殊Token stop=[".", "!", "?"] # 设置停止条件 )

7.2 常见问题解决

模型加载失败：

  • 检查模型路径是否正确
  • 确认有足够的GPU内存
  • 查看llm.log获取详细错误信息

流式传输中断：

  • 检查网络连接稳定性
  • 增加超时设置
  • 添加重试机制

Token计数不准：

  • 确保使用正确的编码器
  • 检查文本预处理步骤

8. 总结

通过这个教程，我们完整实现了GLM-4-9B-Chat-1M模型与Chainlit的集成，包括WebSocket流式传输和前端Token计数器。这种集成方式不仅提升了用户体验，还提供了实用的Token统计功能。

关键收获：

  • Chainlit让AI应用前端开发变得简单
  • 流式传输显著改善用户等待体验
  • Token计数帮助监控使用成本和效率
  • GLM-4-9B-Chat-1M的长上下文能力开启了许多新应用场景

下一步建议：

  • 尝试添加对话历史管理功能
  • 探索模型的多语言能力
  • 添加自定义工具调用功能
  • 优化前端界面和用户体验

现在你已经掌握了构建现代化AI聊天应用的核心技能，可以在此基础上继续扩展功能，打造更强大的应用了。

获取更多AI镜像

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

Read more

解锁AIGC新时代：通义万相2.1与蓝耘智算平台的完美结合引领AI内容生成革命

解锁AIGC新时代：通义万相2.1与蓝耘智算平台的完美结合引领AI内容生成革命

前言 通义万相2.1作为一个开源的视频生成AI模型，在发布当天便荣登了VBench排行榜的榜首，超越了Sora和Runway等业内巨头，展现出惊人的潜力。模型不仅能够生成1080P分辨率的视频，而且没有时长限制，能够模拟自然动作，甚至还可以还原物理规律，这在AIGC领域中简直堪称革命性突破。通过蓝耘智算平台，我们能够轻松部署这个模型，创建属于自己的AI视频生成工具。今天，我将为大家深入探讨通义万相2.1的强大功能，并分享如何利用蓝耘智算平台快速入门。 蓝耘智算平台 1. 平台概述 蓝耘智算平台是一个为高性能计算需求设计的云计算平台，提供强大的计算能力与灵活服务。平台基于领先的基础设施和大规模GPU算力，采用现代化的Kubernetes架构，专为大规模GPU加速工作负载而设计，满足用户多样化的需求。 2. 核心优势 * 硬件层： 蓝耘智算平台支持多型号GPU，包括NVIDIA A100、V100、H100等高性能显卡，能够通过高速网络实现多机多卡并行计算，突破单机算力瓶颈。 * 软件层： 集成Kubernetes与Docker技术，便于任务迁移与隔离；支持PyTo
AIGC带来数据革命：R语言如何成为数据科学家的秘密武器？

AIGC带来数据革命：R语言如何成为数据科学家的秘密武器？

文章目录 * 一、R语言的基础特性 * 1.1 R语言的起源与发展 * 1.2 R语言的核心优势 * 二、R语言在AIGC中的应用场景 * 2.1 数据预处理与清洗 * 2.2 文本分析与生成 * 2.3 机器学习与模型构建 * 2.4 数据可视化与报告生成 * 三、R语言在AIGC中的具体案例 * 3.1 金融数据分析与预测 * 3.2 医疗数据分析与建模 * 3.3 社交媒体数据分析与情感分析 * 四、R语言在AIGC中的未来展望 * 4.1 与深度学习框架的集成 * 4.2 与云计算平台的集成 * 4.3 与自动化工具的集成 * 《R语言统计分析与可视化从入门到精通宣传文案》 * 亮点 * 内容简介 * 作者简介 * 目录

Jetson Orin NX 上部署 Ollama + Llama 3.2

Jetson Orin NX 上部署 Ollama + Llama 3.2 关键词： Jetson Orin NX, JetPack 5, Ubuntu 20.04, Ollama, Llama 3.2, CUDA, GPU推理, 边缘计算, ARM64 阅读时长： 约15分钟 📋 文章导航 * 前言 * 一、环境准备与系统要求 * 二、系统环境检查 * 三、安装Ollama（JetPack 5专用版） * 四、配置运行环境 * 五、启动Ollama服务与GPU验证 * 六、部署Llama 3.2模型 * 七、HTTP API接口调用 * 八、性能优化与调优