基于python快速部署属于你自己的页面智能助手

文章目录

前言
一、实现目标
二、代码解析
- 2.1目录结构
- 2.2 后端：Flask 服务器的搭建
- - 2.2.1 安装 Flask
  - 2.2.2 创建 Flask 应用
- 2.3 实现聊天界面与消息交互
- - 2.3.1 创建聊天界面
- 三、跨域问题的解决
- - 3.1 安装 flask-cors
  - 3.2 在 Flask 中启用 CORS
- 五效果展示

前言

AI 聊天机器人已经成为了许多应用场景中的重要组成部分。通过与用户的对话，聊天机器人不仅能够提升用户体验，还能通过不断学习与优化，提高互动的精准性和智能化水平。

一、实现目标

本次实现的目标是创建一个简单的网页聊天机器人，用户通过输入消息与 AI 进行交互。系统将通过与后端 API 的请求交互，将用户的消息传递给服务器，获取 AI 的回答，并实时展示聊天内容。

具体实现步骤包括：

创建聊天框和用户输入区域。
实现用户消息的发送和显示。
将用户消息发送到后端 API。
获取后端返回的 AI 回复并显示。
增加消息加载时的提示（“AI 正在思考中…”）。
处理可能的请求错误。

二、代码解析

2.1目录结构

ai-chatbot-project/
│
├── backend/                    # 后端目录
│   ├── app.py                  # 后端主文件 (Flask / FastAPI)
│   ├── requirements.txt        # 后端依赖 (Flask/FastAPI等)
│   ├── ai_model.py             # 集成大模型的文件
│   └── config.py               # 配置文件
│
├── frontend/                   # 前端目录
│   ├── index.html              # 主页 HTML 文件
│   ├── script.js               # 前端交互逻辑 (JS)
│   ├── style.css               # 页面样式
│   └── package.json            # 前端依赖 (Node.js)
│
└── README.md                   # 项目说明

2.2 后端：Flask 服务器的搭建

使用 Python 的 Flask 框架搭建后端服务器，用于接收前端发来的请求并返回 AI 的回应。首先，需要创建一个 app.py 文件，其中定义路由 /api/chat 来处理聊天请求。

2.2.1 安装 Flask

首先，确保你已经安装了 Flask。如果没有安装，可以通过以下命令进行安装：

pip install flask

2.2.2 创建 Flask 应用

在 app.py 文件中，创建了一个基本的 Flask 应用，并且设置了一个 API 接口 /api/chat 用于处理 POST 请求。代码如下：

from flask import Flask, request, jsonify
from flask_cors import CORS

app = Flask(__name__)
CORS(app)

@app.route('/api/chat', methods=['POST'])
def chat():
    user_message = request.json.get('message')
    if user_message:
        # 假设你有 AI 模型的接口来处理用户消息
        ai_response = "这是AI的回应：" + user_message
        return jsonify({'response': ai_response})
    else:
        return jsonify({'response': '没有收到消息'}), 400

if __name__ == '__main__':
    app.run(debug=True)

2.3 实现聊天界面与消息交互

前端部分使用纯 HTML 和 JavaScript 来实现用户界面，并通过 fetch API 向后端发送请求。需要一个简单的聊天框，用户可以在其中输入消息，点击按钮后消息会发送到后端并返回 AI 的回答。

2.3.1 创建聊天界面

在 index.html 文件中，创建了一个简单的聊天界面，并使用 JavaScript 来控制消息的发送和显示。HTML 代码如下：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI 聊天机器人</title>
    <style>
        body {
            font-family: 'Arial', sans-serif;
            background-color: #f5f5f5;
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }

        .chat-container {
            width: 100%;
            max-width: 500px;
            background-color: #fff;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            overflow: hidden;
        }

        #chat-box {
            height: 350px;
            overflow-y: auto;
            padding: 20px;
            border-bottom: 1px solid #eee;
            background-color: #fafafa;
        }

        .user, .ai {
            margin-bottom: 15px;
            padding: 10px;
            border-radius: 5px;
        }

        .user {
            background-color: #e0f7fa;
            color: #00796b;
            text-align: right;
        }

        .ai {
            background-color: #f1f8e9;
            color: #388e3c;
            text-align: left;
        }

        .input-container {
            padding: 10px;
            display: flex;
            border-top: 1px solid #eee;
            background-color: #fff;
        }

        #user-input {
            flex-grow: 1;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 20px;
            font-size: 14px;
        }

        button {
            padding: 10px 20px;
            margin-left: 10px;
            background-color: #00796b;
            color: white;
            border: none;
            border-radius: 20px;
            cursor: pointer;
            font-size: 14px;
        }

        button:hover {
            background-color: #004d40;
        }

        button:active {
            background-color: #004d40;
        }

        /* 滚动条样式 */
        #chat-box::-webkit-scrollbar {
            width: 8px;
        }

        #chat-box::-webkit-scrollbar-thumb {
            background-color: #ccc;
            border-radius: 4px;
        }

        #chat-box::-webkit-scrollbar-thumb:hover {
            background-color: #888;
        }

        .loading {
            text-align: center;
            color: #00796b;
            font-size: 14px;
        }
    </style>
</head>
<body>

<div class="chat-container">
    <div id="chat-box"></div>
    <div class="input-container">
        <input type="text" id="user-input" placeholder="请输入消息..." onkeypress="handleKeyPress(event)">
        <button onclick="sendMessage()">发送</button>
    </div>
</div>

<script>
    function sendMessage() {
        const userMessage = document.getElementById('user-input').value;

        if (userMessage.trim() !== '') {
            // 显示用户消息
            appendMessage('用户：' + userMessage, 'user');

            // 清空输入框
            document.getElementById('user-input').value = '';

            // 显示AI正在处理中
            const loadingElement = document.createElement('div');
            loadingElement.classList.add('loading');
            loadingElement.innerText = 'AI 正在思考中...';
            appendMessage(loadingElement.outerHTML, 'ai');

            // 向后端发送请求
            fetch('http://localhost:5000/api/chat', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({ message: userMessage })
            })
            .then(response => response.json())
            .then(data => {
                const aiMessage = data.response || '抱歉，我无法理解你的问题。';

                // 确保加载提示被替换
                const lastAiMessage = document.querySelector('.ai:last-child');
                if (lastAiMessage && lastAiMessage.querySelector('.loading')) {
                    lastAiMessage.innerHTML = aiMessage;
                } else {
                    appendMessage('AI：' + aiMessage, 'ai');
                }
            })
            .catch(error => {
                console.error('Error:', error);
                // 处理请求失败的情况
                const lastAiMessage = document.querySelector('.ai:last-child');
                if (lastAiMessage && lastAiMessage.querySelector('.loading')) {
                    lastAiMessage.innerHTML = 'AI：请求失败，请稍后再试。';
                }
            });
        }
    }

    // 按下回车键发送消息
    function handleKeyPress(event) {
        if (event.key === 'Enter') {
            sendMessage();
        }
    }

    // 将消息添加到聊天框
    function appendMessage(message, sender) {
        const chatBox = document.getElementById('chat-box');
        const messageElement = document.createElement('div');
        messageElement.classList.add(sender);
        messageElement.innerHTML = message; // 使用innerHTML以便渲染HTML标签
        chatBox.appendChild(messageElement);
        chatBox.scrollTop = chatBox.scrollHeight; // 滚动到底部
    }
</script>

</body>
</html>

三、跨域问题的解决

在开发过程中，如果前端和后端不在同一域名或端口上运行，浏览器会限制跨域请求。为了避免这种问题，我们可以在 Flask 中使用 flask-cors 库来启用跨域资源共享（CORS）。

3.1 安装 flask-cors

通过以下命令安装 flask-cors：

pip install flask-cors

3.2 在 Flask 中启用 CORS

在 app.py 中导入并启用 CORS，如下所示：

from flask_cors import CORS
app = Flask(__name__)
CORS(app)  # 允许跨域请求

四、大模型调用
在ai_model.py中使用ollama调用qwen大模型。首先ollama sever启动ollama。

import requests
import json

def get_ai_response(user_message):
    try:
        messages = [{"role": "system", "content": '你是我的专属人工智能助手，你的名字是贾维斯'}]

        messages.append({"role": "user", "content": user_message})
        res = requests.post(
                url="http://localhost:11434/api/chat",
                json={"model": "qwen2.5:7b", "messages": messages, "stream": False},
            )
        res.raise_for_status()
        data = res.json()  # 使用.json()方法直接解析JSON
        context = data['message']['content']
        return f"AI 响应: {context}"
    except Exception as e:
        return f"AI 错误: {str(e)}"