关于如何使用DeepSeek API，可以查看本地AI搭建

Node.js 实现的局域网AI对话Web应用#

以下是用Node.js实现的版本，使用Express作为Web框架：

项目结构#

1
ai-chat-app/
2
├── public/
3
│   ├── styles.css
4
│   └── script.js
5
├── views/
6
│   └── index.html
7
├── app.js
8
├── package.json
9
└── .env

1. 安装依赖#

首先创建package.json：

1
{
2
  "name": "ai-chat-app",
3
  "version": "1.0.0",
4
  "description": "局域网AI对话应用",
5
  "main": "app.js",
6
  "scripts": {
7
    "start": "node app.js",
8
    "dev": "nodemon app.js"
9
  },
10
  "dependencies": {
11
    "express": "^4.18.2",
12
    "openai": "^4.28.0",
13
    "dotenv": "^16.3.1",
14
    "cors": "^2.8.5"
15
  },
16
  "devDependencies": {
17
    "nodemon": "^3.0.2"
18
  }
19
}

运行 npm install 安装依赖。

2. 主程序 (app.js)#

1
require('dotenv').config()
2
const express = require('express')
3
const {OpenAI} = require('openai')
4
const path = require('path')
5
const cors = require('cors')
6

7
const app = express()
8
const port = process.env.PORT || 5000
9

10
// 中间件
11
app.use(cors())
12
app.use(express.json())
13
app.use(express.static(path.join(__dirname, 'public')))
14

15
// 初始化对话历史
16
let messages = [{role: 'system', content: '你是一个乐于助人的AI助手'}]
17

18
// 初始化OpenAI客户端
19
const openai = new OpenAI({
20
  apiKey: process.env.DEEPSEEK_API_KEY,
21
  baseURL: 'https://api.deepseek.com',
22
})
23

24
// 路由
25
app.get('/', (req, res) => {
26
  res.sendFile(path.join(__dirname, 'views', 'index.html'))
27
})
28

29
app.post('/chat', async (req, res) => {
30
  const userMessage = req.body.message
31
  if (!userMessage) {
32
    return res.status(400).json({error: '消息不能为空'})
33
  }
34

35
  // 添加用户消息到历史
36
  messages.push({role: 'user', content: userMessage})
37

38
  try {
39
    // 获取AI回复
40
    const response = await openai.chat.completions.create({
41
      model: 'deepseek-reasoner',
42
      messages: messages,
43
      stream: false,
44
    })
45

46
    const assistantOutput = response.choices[0].message.content
47

48
    // 添加AI回复到历史
49
    messages.push({role: 'assistant', content: assistantOutput})
50

51
    return res.json({response: assistantOutput})
52
  } catch (error) {
53
    console.error('Error:', error)
54
    return res.status(500).json({error: error.message})
55
  }
56
})
57

58
// 启动服务器
59
app.listen(port, '0.0.0.0', () => {
60
  console.log(`Server running at http://localhost:${port}`)
61
  console.log(`局域网访问: http://${getIPAddress()}:${port}`)
62
})
63

64
// 获取本机IP地址
65
function getIPAddress() {
66
  const interfaces = require('os').networkInterfaces()
67
  for (const devName in interfaces) {
68
    const iface = interfaces[devName]
69
    for (let i = 0; i < iface.length; i++) {
70
      const alias = iface[i]
71
      if (alias.family === 'IPv4' && alias.address !== '127.0.0.1' && !alias.internal) {
72
        return alias.address
73
      }
74
    }
75
  }
76
  return 'localhost'
77
}

3. 前端HTML (views/index.html)#

1
<!doctype html>
2
<html lang="zh-CN">
3
  <head>
4
    <meta charset="UTF-8" />
5
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
    <title>AI对话助手</title>
7
    <link rel="stylesheet" href="/styles.css" />
8
  </head>
9
  <body>
10
    <div class="container">
11
      <h1>AI对话助手</h1>
12
      <div class="chat-container" id="chat-container">
13
        <!-- 消息将在这里动态添加 -->
14
      </div>
15
      <div class="input-area">
16
        <input type="text" id="user-input" placeholder="输入你的问题..." autocomplete="off" />
17
        <button id="send-button">发送</button>
18
      </div>
19
    </div>
20
    <script src="/script.js"></script>
21
  </body>
22
</html>

4. CSS样式 (public/styles.css)#

1
body {
2
  font-family: 'Arial', sans-serif;
3
  background-color: #f5f5f5;
4
  margin: 0;
5
  padding: 20px;
6
  display: flex;
7
  justify-content: center;
8
}
9

10
.container {
11
  width: 100%;
12
  max-width: 800px;
13
  background-color: white;
14
  border-radius: 10px;
15
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
16
  padding: 20px;
17
}
18

19
h1 {
20
  text-align: center;
21
  color: #333;
22
}
23

24
.chat-container {
25
  height: 500px;
26
  overflow-y: auto;
27
  padding: 15px;
28
  margin-bottom: 20px;
29
  background-color: #f9f9f9;
30
  border-radius: 8px;
31
}
32

33
.message {
34
  margin-bottom: 15px;
35
  padding: 10px 15px;
36
  border-radius: 18px;
37
  max-width: 70%;
38
  word-wrap: break-word;
39
}
40

41
.user-message {
42
  background-color: #e3f2fd;
43
  margin-left: auto;
44
  border-bottom-right-radius: 5px;
45
}
46

47
.assistant-message {
48
  background-color: #f1f1f1;
49
  margin-right: auto;
50
  border-bottom-left-radius: 5px;
51
}
52

53
.input-area {
54
  display: flex;
55
  gap: 10px;
56
}
57

58
#user-input {
59
  flex-grow: 1;
60
  padding: 10px 15px;
61
  border-radius: 20px;
62
  border: 1px solid #ddd;
63
  font-size: 16px;
64
}
65

66
#send-button {
67
  padding: 10px 20px;
68
  background-color: #4caf50;
69
  color: white;
70
  border: none;
71
  border-radius: 20px;
72
  cursor: pointer;
73
  font-size: 16px;
74
}
75

76
#send-button:hover {
77
  background-color: #45a049;
78
}
79

80
.typing-indicator {
81
  display: inline-block;
82
  padding: 10px 15px;
83
  background-color: #f1f1f1;
84
  border-radius: 18px;
85
  margin-bottom: 15px;
86
  border-bottom-left-radius: 5px;
87
}
88

89
.typing-dot {
90
  display: inline-block;
91
  width: 8px;
92
  height: 8px;
93
  border-radius: 50%;
94
  background-color: #888;
95
  margin: 0 2px;
96
  animation: typing-animation 1.4s infinite ease-in-out;
97
}
98

99
.typing-dot:nth-child(1) {
100
  animation-delay: 0s;
101
}
102
.typing-dot:nth-child(2) {
103
  animation-delay: 0.2s;
104
}
105
.typing-dot:nth-child(3) {
106
  animation-delay: 0.4s;
107
}
108

109
@keyframes typing-animation {
110
  0%,
111
  60%,
112
  100% {
113
    transform: translateY(0);
114
  }
115
  30% {
116
    transform: translateY(-5px);
117
  }
118
}

5. 前端JavaScript (public/script.js)#

1
document.addEventListener('DOMContentLoaded', () => {
2
  const chatContainer = document.getElementById('chat-container')
3
  const userInput = document.getElementById('user-input')
4
  const sendButton = document.getElementById('send-button')
5

6
  // 发送消息函数
7
  async function sendMessage() {
8
    const message = userInput.value.trim()
9
    if (!message) return
10

11
    // 显示用户消息
12
    displayMessage(message, 'user')
13
    userInput.value = ''
14

15
    // 显示打字指示器
16
    showTypingIndicator()
17

18
    try {
19
      // 发送到服务器
20
      const response = await fetch('/chat', {
21
        method: 'POST',
22
        headers: {
23
          'Content-Type': 'application/json',
24
        },
25
        body: JSON.stringify({message}),
26
      })
27

28
      if (!response.ok) {
29
        throw new Error('网络响应不正常')
30
      }
31

32
      const data = await response.json()
33

34
      // 隐藏打字指示器
35
      hideTypingIndicator()
36

37
      // 显示AI回复
38
      if (data.response) {
39
        displayMessage(data.response, 'assistant')
40
      } else if (data.error) {
41
        displayMessage(`错误: ${data.error}`, 'assistant')
42
      }
43
    } catch (error) {
44
      hideTypingIndicator()
45
      displayMessage(`抱歉，发生了错误: ${error.message}`, 'assistant')
46
      console.error('Error:', error)
47
    }
48
  }
49

50
  // 显示消息
51
  function displayMessage(content, role) {
52
    const messageDiv = document.createElement('div')
53
    messageDiv.classList.add('message', `${role}-message`)
54
    messageDiv.textContent = content
55
    chatContainer.appendChild(messageDiv)
56
    chatContainer.scrollTop = chatContainer.scrollHeight
57
  }
58

59
  // 显示打字指示器
60
  function showTypingIndicator() {
61
    const typingDiv = document.createElement('div')
62
    typingDiv.id = 'typing-indicator'
63
    typingDiv.className = 'typing-indicator'
64
    typingDiv.innerHTML = `
65
            <span class="typing-dot"></span>
66
            <span class="typing-dot"></span>
67
            <span class="typing-dot"></span>
68
        `
69
    chatContainer.appendChild(typingDiv)
70
    chatContainer.scrollTop = chatContainer.scrollHeight
71
  }
72

73
  // 隐藏打字指示器
74
  function hideTypingIndicator() {
75
    const typingDiv = document.getElementById('typing-indicator')
76
    if (typingDiv) {
77
      typingDiv.remove()
78
    }
79
  }
80

81
  // 事件监听
82
  sendButton.addEventListener('click', sendMessage)
83
  userInput.addEventListener('keypress', e => {
84
    if (e.key === 'Enter') {
85
      sendMessage()
86
    }
87
  })
88
})

6. 环境变量 (.env)#

1
DEEPSEEK_API_KEY=sk-134d0ba94323448ba8f715f1970d7c18
2
PORT=5000

运行说明#

安装依赖：npm install
启动开发服务器：npm run dev (使用nodemon自动重启)
或者启动生产服务器：npm start
访问：
- 本地：http://localhost:5000
- 局域网：http://[你的IP地址]:5000 (控制台会显示具体地址)

功能特点#

使用Express构建的Node.js后端
分离的前端HTML/CSS/JavaScript
响应式设计，适配各种设备
实时打字指示器
完整的对话历史记录
错误处理和用户反馈
自动获取并显示局域网访问地址

这个实现与之前的Python版本功能相同，但使用了Node.js技术栈，更适合JavaScript开发者。

参考资料#

DeepSeek

Lovely March7th!

本地AI搭建-nodejs

Node.js 实现的局域网AI对话Web应用#

项目结构#

1. 安装依赖#

2. 主程序 (app.js)#

3. 前端HTML (views/index.html)#

4. CSS样式 (public/styles.css)#

5. 前端JavaScript (public/script.js)#

6. 环境变量 (.env)#

运行说明#

功能特点#

参考资料#

目录