基于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

你可能感兴趣的:(python,人工智能,腾讯云AI代码助手)