说明

该版与 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();

配置选项

构造函数参数

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。

注意事项

1. API Key 安全：不要在前端代码中硬编码 API Key，建议通过后端代理
2. 跨域问题：确保 API 服务器支持 CORS 或使用代理
3. 网络超时：长时间无响应时建议添加超时处理
4. 内存管理：处理大量内容时注意清理旧内容

License

MIT License

如有问题或建议，欢迎提交反馈！