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

使用DeepSeek AI开发智能问答网页应用

news 2025/9/14 7:03:18

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 URL
  const 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;
  }
  
  // 发送问题到API
  async 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

此外，还可以考虑添加以下功能来增强应用：