# LLM Service Provider
[English Document](README_EN.md)
一个提供多种 LLM（大型语言模型）服务集成的前端组件库，支持 DeepSeek、Gemini、Groq、讯飞星火和 YouChat 等服务提供商。
[npm包地址](https://www.npmjs.com/package/llm-service-provider)
## 最新版本更新（v3.7.1）
- **讯飞服务修复**：在streamDefinition函数中添加了专门的讯飞服务case处理，修复了保存讯飞服务后错误请求youchat服务的问题
- **API密钥检测增强**：在hasApiKey()函数中添加了对讯飞API密钥的检查条件，确保讯飞服务能被正确识别
- **内容去重功能**：在cleanContent函数中新增正则表达式模式，自动检测并移除超过20个字符的重复句子或段落，有效解决内容生成中的重复问题
- **构建流程优化**：更新构建脚本，确保先构建llm-core核心模块，解决GitHub Actions构建中模块找不到的问题
- **模块引用修复**：优化了llm-core模块的引用方式，确保在本地和CI/CD环境中都能正确加载
- **服务配置统一管理**：新增getAllServiceConfigurations()函数，支持统一获取和管理所有服务提供商的配置数据
- **API密钥安全显示**：在配置数据展示中使用星号(*)替代API Key和API Secret的实际值，增强安全性
- **WebSocket错误处理增强**：优化了讯飞等服务的WebSocket连接错误处理，提供更详细的错误信息
- **统一的服务提供商配置**：创建了providerNamesConfig统一管理服务提供商名称和配置，简化代码结构
- **新增豆包服务支持**：集成了豆包（Doubao）大语言模型服务，用户可以通过配置豆包API密钥来使用该服务
- **样式重构**：将ApiKeyManager组件中的所有内联样式移动到CSS文件中，使代码结构更清晰，便于维护
- **主题样式支持**：新增基于Comic Sans MS字体的两种样式方案（活泼卡通风格和复古漫画风格）
- **样式切换功能**：通过styleVariant属性支持在默认样式、comic1和comic2样式之间切换
- **多语言支持**：支持中英文切换功能，所有界面文本和提示模板都可以根据用户选择的语言进行动态切换
## 功能展示
### LLM 服务集成 思维导图可视化
示例：
- [Revelation](https://github.com/qcgm1978/revelation)
- [Psychotherapy](https://github.com/qcgm1978/psychotherapy)
## 安装
```bash
npm install llm-service-provider
# 或
pnpm add llm-service-provider
# 或
yarn add llm-service-provider
```
## 使用方法
### 1. 使用 API 密钥管理组件
```tsx
import React, { useState } from 'react'
import { ApiKeyManager } from 'llm-service-provider'
function App() {
const [isApiKeyManagerOpen, setIsApiKeyManagerOpen] = useState(false)
const [apiKey, setApiKey] = useState('')
const handleSaveApiKey = (key: string) => {
setApiKey(key)
console.log('API key saved:', key)
}
return (
setIsApiKeyManagerOpen(false)}
language="zh" // 设置为"zh"使用中文界面，设置为"en"使用英文界面
styleVariant="default" // 可选值："default"（默认样式）、"comic1"（活泼卡通风格）、"comic2"（复古漫画风格）
/>
)
}
export default App
```
### 2. 使用流式内容生成
```tsx
import React, { useState, useEffect, useRef } from 'react'
import { streamDefinition, getSelectedServiceProvider, hasApiKey } from 'llm-service-provider'
function ContentGenerator({ topic }: { topic: string }) {
const [content, setContent] = useState('')
const [isGenerating, setIsGenerating] = useState(false)
const controllerRef = useRef(null)
useEffect(() => {
if (!topic || !hasApiKey()) return
const generateContent = async () => {
setIsGenerating(true)
setContent('')
controllerRef.current = new AbortController()
const signal = controllerRef.current.signal
try {
const provider = getSelectedServiceProvider()
const generator = streamDefinition(topic, 'zh', undefined, undefined)
for await (const chunk of generator) {
if (signal.aborted) break
setContent(chunk)
}
} catch (error) {
console.error('Error generating content:', error)
setContent(`生成内容时出错: ${error instanceof Error ? error.message : '未知错误'}`)
} finally {
setIsGenerating(false)
}
}
generateContent()
return () => {
if (controllerRef.current) {
controllerRef.current.abort()
}
}
}, [topic])
return (
{isGenerating &&
生成中...
}
{content}