在宝塔面板上免费搭建一个接入Deepseek API的AI交互网页

欢迎加入白芸资源网交流QQ群:929535908

前言

在宝塔面板上免费搭建一个接入Deepseek API的AI交互网页

最近DeepSeek很火,那么怎么自己创建一个AI网页接入Deepseek的API呢?白芸资源网为您提供一份全面的教程。

一、准备工作

1.获取Deepseek API密钥

登录Deepseek官网→进入开发者控制台→ 创建应用→获取API Key(保存备用)

2.服务器环境检查

确保您的服务器已安装Nginx/Apache、MySQL/MariaDB(可选)、PHP/Python

二、创建网站

在宝塔面板操作:

  • 点击「网站」→「添加站点」
  • 输入域名/IP(如无域名用服务器IP)
  • 选择「PHP项目」建议PHP 7.4+(或Python项目)
  • 创建数据库(可选,若需存储数据)

三、后端开发(以Python为例)

1、确保安装Python环境

2、编写API对接代码(app.py

from flask import Flask, request, jsonify
   import requests

   app = Flask(__name__)
   DEEPSEEK_API_KEY = "your_api_key_here"
   API_ENDPOINT = "https://api.deepseek.com/v1/chat/completions"  # 替换实际API地址

   @app.route('/chat', methods=['POST'])
   def chat():
       user_input = request.json.get('message')
       headers = {
           "Authorization": f"Bearer {DEEPSEEK_API_KEY}",
           "Content-Type": "application/json"
       }
       data = {
           "model": "deepseek-chat",
           "messages": [{"role": "user", "content": user_input}]
       }
       response = requests.post(API_ENDPOINT, json=data, headers=headers)
       return jsonify(response.json())

   if __name__ == '__main__':
       app.run(host='0.0.0.0', port=5000)

3、安装依赖

# 项目目录下执行
   pip install flask requests

4、配置反向代理

  • 宝塔网站设置 → 「反向代理」→ 添加代理
  • 目标URL:http://127.0.0.1:5000

四、前端开发

1、创建HTML页面(index.html

也可使用其它HTML代码,以下仅为示例与参考:

<!DOCTYPE html>
   <html>
   <head>
       <title>Deepseek AI Chat</title>
       <style>
           /* 添加自定义CSS样式 */
       </style>
   </head>
   <body>
       <div class="container">
           <div id="chat-box"></div>
           <input type="text" id="user-input" placeholder="输入消息...">
           <button onclick="sendMessage()">发送</button>
       </div>

       <script>
           async function sendMessage() {
               const input = document.getElementById('user-input');
               const chatBox = document.getElementById('chat-box');
               
               // 显示用户输入
               chatBox.innerHTML += `<div class='user-msg'>${input.value}</div>`;
               
               try {
                   const response = await fetch('/chat', {
                       method: 'POST',
                       headers: {'Content-Type': 'application/json'},
                       body: JSON.stringify({message: input.value})
                   });
                   const data = await response.json();
                   chatBox.innerHTML += `<div class='ai-msg'>${data.choices[0].message.content}</div>`;
               } catch (error) {
                   chatBox.innerHTML += `<div class='error'>请求失败: ${error}</div>`;
               }
               input.value = '';
           }
       </script>
   </body>
   </html>

五、部署配置

1、文件权限设置

chmod -R 755 /www/wwwroot/your_site
   chown -R www:www /www/wwwroot/your_site

2、安全配置

  • 宝塔面板「安全」→ 放行所需端口(80/443/5000)
  • 启用SSL(Let's Encrypt免费证书)
  • 配置防火墙限制IP访问(可选)

六、测试与调试

1、启动服务

在宝塔面板中用Python管理器启动。

2、访问测试

  •  浏览器访问您创建的网站域名/IP地址
  •  打开开发者工具(F12)查看网络请求

3、日志查看

  • Python日志:/www/wwwroot/your_site/logs
  • Nginx日志:宝塔面板「网站」→ 对应站点「日志」

七、常见问题解决

1、API返回401错误

  •  检查API密钥是否正确
  •  确认请求头Authorization格式正确

2、跨域问题(CORS)

# Flask中安装flask-cors
   from flask_cors import CORS
   CORS(app)

3、超时处理

# 增加超时设置
   response = requests.post(API_ENDPOINT, json=data, headers=headers, timeout=30)
    © 版权声明
    THE END
    本站一切内容不代表本站立场
    赞赏 分享
    评论 抢沙发

    请登录后发表评论

      暂无评论内容