该版与 https://scriptcat.org/zh-CN/script-show-page/4569 的区别是：该版不支持非流式请求，更加轻量级。
LLMStream 是一个轻量级的 JavaScript 库，用于处理大语言模型（LLM）的流式请求和 Markdown 实时渲染。它支持 SSE（Server-Sent Events）流式响应、自动 Markdown 渲染、错误处理等功能。
<script src="path/to/llmstream.js"></script>
或使用 ES6 模块：
import LLMStream from './llmstream.js';
<div id="output" style="min-height: 200px; padding: 20px; border: 1px solid #ccc;"></div>
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 | ❌ | - | 发生错误时的回调 |
start()开始流式请求。
await stream.start();
stop()停止当前的流式请求。
stream.stop();
getContent()获取当前已接收的完整内容。
const content = stream.getContent();
console.log('当前内容长度:', content.length);
clear()清空当前内容和显示区域。
stream.clear();
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();
<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>
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();
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();
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。
<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);
});
需要支持 Fetch API 和 ReadableStream。
MIT License
如有问题或建议，欢迎提交反馈！