当前位置：首页 > news >正文

# 将本地UI生成器从VLLM迁移到DeepSeek API的完整指南

news 来源：原创 2025/6/5 15:00:42

## 前言

本文记录了将一个基于React + Node.js的UI生成器应用从本地VLLM部署迁移到DeepSeek官方API的完整过程。通过这次迁移，我们不仅提升了模型性能，还优化了用户体验。

## 项目背景

原项目使用本地部署的VLLM服务，支持"Tesslate/UIGEN-T2-7B-3600"等模型。为了获得更好的性能和稳定性，决定迁移到DeepSeek官方API。

## 迁移步骤详解

### 1. 前端修改 (App.jsx)

#### 1.1 更新支持的模型列表

将原有的本地模型替换为DeepSeek官方支持的模型：

```javascript:c:\Users\cool123\002\UIGEN-T2-Artifacts\client\src\App.jsx
const AVAILABLE_MODELS = [
{ id: 'deepseek-chat', name: 'DeepSeek-V3 Chat', description: 'DeepSeek最新聊天模型，适合对话和通用任务' },
{ id: 'deepseek-reasoner', name: 'DeepSeek-R1 Reasoner', description: 'DeepSeek推理模型，适合复杂逻辑推理任务' }
];
```

#### 1.2 实现动态系统消息

原系统消息是硬编码的，现在根据选择的模型动态生成：

```javascript:c:\Users\cool123\002\UIGEN-T2-Artifacts\client\src\App.jsx
const getSystemMessage = (modelId) => {
switch (modelId) {
case 'deepseek-reasoner':
return "You are DeepSeek-R1, an advanced reasoning AI specialized in UI generation. Think step by step and provide detailed explanations for your design decisions.";
case 'deepseek-chat':
return "You are DeepSeek-V3, a helpful AI assistant specialized in UI generation. Create clean, modern, and functional user interfaces.";
default:
return "You are a helpful assistant specialized in UI generation.";
}
};

// 使用useEffect监听模型变化并更新系统消息
useEffect(() => {
const systemMessage = {
role: 'system',
content: getSystemMessage(selectedModel)
};

setMessages(prevMessages => {
const nonSystemMessages = prevMessages.filter(msg => msg.role !== 'system');
return [systemMessage, ...nonSystemMessages];
});
}, [selectedModel]);
```

#### 1.3 修复重复声明错误

删除了重复的`selectedModel`状态声明，保留第一个声明。

### 2. 后端修改 (server.js)

#### 2.1 更新API配置

将VLLM相关配置替换为DeepSeek API配置：

```javascript:c:\Users\cool123\002\UIGEN-T2-Artifacts\server.js
// API配置
const DEEPSEEK_API_URL = process.env.DEEPSEEK_API_URL || 'https://api.deepseek.com';
const DEEPSEEK_API_KEY = process.env.DEEPSEEK_API_KEY;

// 环境变量检查
if (!DEEPSEEK_API_KEY) {
console.error('DEEPSEEK_API_KEY environment variable is required');
process.exit(1);
}
```

#### 2.2 更新API调用

修改fetch请求以使用DeepSeek API：

```javascript:c:\Users\cool123\002\UIGEN-T2-Artifacts\server.js
const deepseekResponse = await fetch(`${DEEPSEEK_API_URL}/chat/completions`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Authorization': `Bearer ${DEEPSEEK_API_KEY}`
},
body: JSON.stringify({
model: model,
messages: messages,
stream: true,
max_tokens: 4000,
temperature: 0.7
})
});
```