DeepSeek AI编程生成智能问答网页应用实践
1. 项目概述
利用DeepSeek AI强大的自然语言处理和代码生成能力，我们可以快速构建一个智能问答网页应用。DeepSeek模型在编程方面表现出色，特别是在多语言编程能力上超越了Claude等知名模型。
2. 开发环境准备
首先，我们需要设置适当的开发环境。DeepSeek提供了Web、App和API接口，我们将使用API接口来构建我们的应用。[1]
# 安装必要的依赖
npm install express axios cors dotenv
# 或使用Python环境
pip install flask requests python-dotenv
3. 后端API实现
以下是使用Node.js和Express构建后端API的示例代码：
// app.js
const express = require('express');
const axios = require('axios');
const cors = require('cors');
require('dotenv').config();const app = express();
app.use(cors());
app.use(express.json());// DeepSeek API配置
const DEEPSEEK_API_KEY = process.env.DEEPSEEK_API_KEY;
const DEEPSEEK_API_URL = 'https://api.deepseek.com/v1/chat/completions';// 智能问答API端点
app.post('/api/ask', async (req, res) => {try {const { question } = req.body;const response = await axios.post(DEEPSEEK_API_URL,{model: "deepseek-r1",messages: [{ role: "user", content: question }],temperature: 0.7},{headers: {'Content-Type': 'application/json','Authorization': `Bearer ${DEEPSEEK_API_KEY}`}});res.json({ answer: response.data.choices[0].message.content });} catch (error) {console.error('Error:', error.response?.data || error.message);res.status(500).json({ error: 'Failed to get response from DeepSeek API' });}
});const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {console.log(`Server running on port ${PORT}`);
});
DeepSeek-R1模型在数学、代码、自然语言推理等任务上表现出色，适合用于构建智能问答系统。[10]
4. 前端界面实现
以下是使用HTML、CSS和JavaScript构建简洁美观的前端界面：
<!-- index.html -->
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>DeepSeek智能问答系统</title><link rel="stylesheet" href="styles.css">
</head>
<body><div class="container"><header><h1>DeepSeek AI 智能问答系统</h1><p>基于DeepSeek-R1模型构建的智能问答应用</p></header><div class="chat-container"><div id="chat-messages" class="chat-messages"></div><div class="input-area"><textarea id="user-input" placeholder="请输入您的问题..."></textarea><button id="send-btn">发送</button></div></div></div><script src="script.js"></script>
</body>
</html>
/* styles.css */
* {box-sizing: border-box;margin: 0;padding: 0;
}body {font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;background-color: #f5f5f5;color: #333;
}.container {max-width: 800px;margin: 0 auto;padding: 20px;
}header {text-align: center;margin-bottom: 30px;
}header h1 {color: #2c3e50;margin-bottom: 10px;
}header p {color: #7f8c8d;
}.chat-container {background-color: #fff;border-radius: 10px;box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);overflow: hidden;
}.chat-messages {height: 400px;padding: 20px;overflow-y: auto;
}.message {margin-bottom: 15px;padding: 10px 15px;border-radius: 18px;max-width: 80%;word-wrap: break-word;
}.user-message {background-color: #3498db;color: white;margin-left: auto;border-bottom-right-radius: 5px;
}.ai-message {background-color: #f1f1f1;color: #333;border-bottom-left-radius: 5px;
}.input-area {display: flex;padding: 15px;border-top: 1px solid #eee;
}#user-input {flex: 1;padding: 12px;border: 1px solid #ddd;border-radius: 4px;resize: none;height: 60px;font-family: inherit;
}#send-btn {margin-left: 10px;padding: 0 20px;background-color: #2c3e50;color: white;border: none;border-radius: 4px;cursor: pointer;transition: background-color 0.3s;
}#send-btn:hover {background-color: #1a252f;
}
// script.js
document.addEventListener('DOMContentLoaded', () => {const chatMessages = document.getElementById('chat-messages');const userInput = document.getElementById('user-input');const sendBtn = document.getElementById('send-btn');// API URLconst API_URL = 'http://localhost:3000/api/ask';// 添加消息到聊天界面function addMessage(content, isUser) {const messageDiv = document.createElement('div');messageDiv.classList.add('message');messageDiv.classList.add(isUser ? 'user-message' : 'ai-message');messageDiv.textContent = content;chatMessages.appendChild(messageDiv);chatMessages.scrollTop = chatMessages.scrollHeight;}// 发送问题到APIasync function sendQuestion(question) {try {addMessage(question, true);// 显示加载状态const loadingDiv = document.createElement('div');loadingDiv.classList.add('message', 'ai-message');loadingDiv.textContent = '思考中...';chatMessages.appendChild(loadingDiv);const response = await fetch(API_URL, {method: 'POST',headers: {'Content-Type': 'application/json'},body: JSON.stringify({ question })});if (!response.ok) {throw new Error('API请求失败');}const data = await response.json();// 移除加载状态chatMessages.removeChild(loadingDiv);// 显示AI回答addMessage(data.answer, false);} catch (error) {console.error('Error:', error);chatMessages.removeChild(chatMessages.lastChild); // 移除加载状态addMessage('抱歉，出现了错误，请稍后再试。', false);}}// 发送按钮点击事件sendBtn.addEventListener('click', () => {const question = userInput.value.trim();if (question) {sendQuestion(question);userInput.value = '';}});// 按Enter键发送userInput.addEventListener('keypress', (e) => {if (e.key === 'Enter' && !e.shiftKey) {e.preventDefault();sendBtn.click();}});// 初始化欢迎消息addMessage('你好！我是基于DeepSeek AI的智能助手，有什么可以帮助你的吗？', false);
});
DeepSeek模型在IDEA等开发环境中已有集成，可以提供智能问答功能，帮助开发者快速解决编程问题。[9]
5. 运行结果示例
当用户访问网页应用并与DeepSeek AI交互时，可能会得到如下结果：
用户提问：如何使用JavaScript实现一个简单的排序算法？
DeepSeek AI回答：
JavaScript中实现排序算法有多种方式，以下是几种常见的排序算法实现：1. 冒泡排序：
```javascript
function bubbleSort(arr) {const len = arr.length;for (let i = 0; i < len; i++) {for (let j = 0; j < len - i - 1; j++) {if (arr[j] > arr[j + 1]) {// 交换元素[arr[j], arr[j + 1]] = [arr[j + 1], arr[j]];}}}return arr;
}
- 快速排序：
function quickSort(arr) {if (arr.length <= 1) return arr;const pivot = arr[Math.floor(arr.length / 2)];const left = arr.filter(x => x < pivot);const middle = arr.filter(x => x === pivot);const right = arr.filter(x => x > pivot);return [...quickSort(left), ...middle, ...quickSort(right)];
}
你可以根据需要选择合适的算法。对于小数据集，冒泡排序可能足够了；对于大数据集，快速排序通常更高效。
DeepSeek Coder在编程领域表现出色，能够提供准确的代码示例和解释，帮助用户解决编程问题。[7]### 6. 部署与扩展完成开发后，可以将应用部署到云服务器或容器平台上。DeepSeek提供了灵活的API接口，可以根据需求进行扩展：```bash
# 使用Docker部署
docker build -t deepseek-qa-app .
docker run -p 80:3000 -e DEEPSEEK_API_KEY=your_api_key deepseek-qa-app
此外，还可以考虑添加以下功能来增强应用：
- 用户认证系统
- 对话历史保存
- 多语言支持
- 代码高亮显示
- 文件上传分析
推荐
