说明
该版与 https://scriptcat.org/zh-CN/script-show-page/4569 的区别是：该版不支持非流式请求，更加轻量级。
LLMStream 使用说明文档（by Claude Sonnet4.5）
简介
LLMStream 是一个轻量级的 JavaScript 库，用于处理大语言模型（LLM）的流式请求和 Markdown 实时渲染。它支持 SSE（Server-Sent Events）流式响应、自动 Markdown 渲染、错误处理等功能。
特性
- ✅ 流式响应处理 - 支持 SSE 格式的流式数据
- ✅ Markdown 实时渲染 - 自动加载 marked.js 并实时渲染
- ✅ 代码高亮支持 - 可选集成 highlight.js
- ✅ 自动滚动 - 内容更新时自动滚动到底部
- ✅ 请求控制 - 支持取消和停止请求
- ✅ 灵活的回调 - 提供 onChunk、onComplete、onError 回调
- ✅ 零依赖 - 自动按需加载外部库
快速开始
1. 引入库
<script src="path/to/llmstream.js"></script>
或使用 ES6 模块：
import LLMStream from './llmstream.js';
2. 准备 HTML 容器
<div id="output" style="min-height: 200px; padding: 20px; border: 1px solid #ccc;"></div>
3. 基础使用
const stream = new LLMStream({
url: 'https://api-inference.modelscope.cn/v1/chat/completions',
method: 'POST',
headers: {
'Authorization': 'Bearer YOUR_API_KEY',
'Content-Type': 'application/json'
},
body: {
model: "Qwen/Qwen3-Coder-480B-A35B-Instruct",
messages: [
{ role: "user", content: "请用 Markdown 写一个快速排序的 Python 实现，并解释步骤。" }
],
stream: true,
temperature: 0.7
},
target: '#output',
markdown: true
});
stream.start();
配置选项
构造函数参数
| 参数 |
类型 |
必填 |
默认值 |
说明 |
url |
String |
✅ |
- |
API 请求地址 |
method |
String |
❌ |
'POST' |
HTTP 请求方法 |
headers |
Object |
❌ |
{} |
请求头信息 |
body |
Object |
❌ |
{} |
请求体数据 |
target |
String |
❌ |
- |
渲染目标元素的 CSS 选择器 |
markdown |
Boolean |
❌ |
true |
是否启用 Markdown 渲染 |
onChunk |
Function |
❌ |
- |
每次接收到数据块时的回调 |
onComplete |
Function |
❌ |
- |
流式传输完成时的回调 |
onError |
Function |
❌ |
- |
发生错误时的回调 |
API 方法
start()
开始流式请求。
await stream.start();
stop()
停止当前的流式请求。
stream.stop();
getContent()
获取当前已接收的完整内容。
const content = stream.getContent();
console.log('当前内容长度:', content.length);
clear()
清空当前内容和显示区域。
stream.clear();
使用示例
示例 1: 完整功能演示
const stream = new LLMStream({
url: 'https://api-inference.modelscope.cn/v1/chat/completions',
method: 'POST',
headers: {
'Authorization': 'Bearer yourtoken',
'Content-Type': 'application/json'
},
body: {
model: "Qwen/Qwen3-Coder-480B-A35B-Instruct",
messages: [
{ role: "user", content: "请用 Markdown 写一个快速排序的 Python 实现，并解释步骤。" }
],
stream: true,
temperature: 0.7
},
target: '#output',
markdown: true,
onChunk: (delta, fullContent) => {
console.log('新接收:', delta);
console.log('总长度:', fullContent.length);
},
onComplete: (content) => {
console.log('完成！总字数:', content.length);
alert('生成完成！');
},
onError: (error) => {
console.error('发生错误:', error);
alert('错误: ' + error.message);
}
});
stream.start();
示例 2: 带停止按钮
<div id="output"></div>
<button id="startBtn">开始</button>
<button id="stopBtn">停止</button>
<script>
let stream = null;
document.getElementById('startBtn').addEventListener('click', () => {
stream = new LLMStream({
url: 'https://your-api.com/chat',
headers: {
'Authorization': 'Bearer YOUR_API_KEY',
'Content-Type': 'application/json'
},
body: {
messages: [{ role: "user", content: "介绍一下人工智能" }],
stream: true
},
target: '#output',
markdown: true
});
stream.start();
});
document.getElementById('stopBtn').addEventListener('click', () => {
if (stream) {
stream.stop();
}
});
</script>
示例 3: 纯文本模式（不使用 Markdown）
const stream = new LLMStream({
url: 'https://your-api.com/chat',
headers: {
'Content-Type': 'application/json'
},
body: {
prompt: "讲个笑话",
stream: true
},
target: '#output',
markdown: false, // 禁用 Markdown 渲染
onComplete: (content) => {
console.log('纯文本内容:', content);
}
});
stream.start();
示例 4: 自定义处理（不使用目标元素）
const stream = new LLMStream({
url: 'https://your-api.com/chat',
headers: {
'Content-Type': 'application/json'
},
body: {
messages: [{ role: "user", content: "你好" }],
stream: true
},
// 不指定 target，完全自定义处理
onChunk: (delta, fullContent) => {
// 自定义渲染逻辑
const customElement = document.getElementById('myCustomDiv');
customElement.innerHTML = `<p>已接收: ${fullContent.length} 字符</p>`;
},
onComplete: (content) => {
console.log('最终内容:', content);
}
});
stream.start();
示例 5: 多轮对话
let conversationHistory = [];
function sendMessage(userMessage) {
conversationHistory.push({ role: "user", content: userMessage });
const stream = new LLMStream({
url: 'https://your-api.com/chat',
headers: {
'Authorization': 'Bearer YOUR_API_KEY',
'Content-Type': 'application/json'
},
body: {
model: "your-model",
messages: conversationHistory,
stream: true
},
target: '#chatOutput',
markdown: true,
onComplete: (content) => {
// 将助手回复添加到对话历史
conversationHistory.push({ role: "assistant", content: content });
}
});
stream.start();
}
// 使用
sendMessage("你好，请介绍一下你自己");
高级配置
添加代码高亮
如果需要代码高亮功能，可以引入 highlight.js：
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/default.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
LLMStream 会自动检测并使用 highlight.js。
自定义 Markdown 样式
<style>
#output {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
line-height: 1.6;
padding: 20px;
background: #f9f9f9;
border-radius: 8px;
max-height: 600px;
overflow-y: auto;
}
#output h1, #output h2, #output h3 {
color: #333;
margin-top: 1.5em;
}
#output code {
background: #e8e8e8;
padding: 2px 6px;
border-radius: 3px;
font-family: 'Courier New', monospace;
}
#output pre {
background: #2d2d2d;
color: #f8f8f2;
padding: 15px;
border-radius: 5px;
overflow-x: auto;
}
</style>
错误处理
LLMStream 提供了完善的错误处理机制：
const stream = new LLMStream({
url: 'https://your-api.com/chat',
headers: { 'Content-Type': 'application/json' },
body: { prompt: "测试" },
target: '#output',
onError: (error) => {
if (error.message.includes('HTTP错误')) {
alert('服务器错误，请稍后重试');
} else if (error.name === 'AbortError') {
console.log('用户取消了请求');
} else {
alert('未知错误: ' + error.message);
}
}
});
stream.start().catch(err => {
console.error('启动失败:', err);
});
浏览器兼容性
- ✅ Chrome 42+
- ✅ Firefox 39+
- ✅ Safari 10.1+
- ✅ Edge 14+
需要支持 Fetch API 和 ReadableStream。
注意事项
- API Key 安全：不要在前端代码中硬编码 API Key，建议通过后端代理
- 跨域问题：确保 API 服务器支持 CORS 或使用代理
- 网络超时：长时间无响应时建议添加超时处理
- 内存管理：处理大量内容时注意清理旧内容
License
MIT License
如有问题或建议，欢迎提交反馈！
