Python——聊天机器人

前端代码

 1 # 导入需要的包和库
 2 from chatterbot import ChatBot
 3 from chatterbot.trainers import ListTrainer, ChatterBotCorpusTrainer
 4 from flask import Flask, render_template, request
 5 
 6 # 创建Flask应用
 7 app = Flask(__name__)
 8 
 9 # 创建一个聊天机器人实例
10 bot = ChatBot("chatbot", read_only=False,
11               logic_adapters=[{
12                   "import_path": "chatterbot.logic.BestMatch",
13                   "default_response": "sorry,I don't know the answer",
14                   "maximum_similarity_threshold": 0.9
15               }]
16               )
17 
18 # 使用ChatterBotCorpusTrainer训练机器人
19 trainer = ChatterBotCorpusTrainer(bot)
20 trainer.train("chatterbot.corpus.english")
21 
22 # 首页路由
23 @app.route("/")
24 def main():
25     return render_template("index.html")  # 渲染主页模板
26 
27 # 处理与聊天机器人的交互
28 @app.route("/get")
29 def get_chatbot_response():
30     userText = request.args.get('userMessage')  # 获取用户输入的文本
31     return str(bot.get_response(userText))  # 返回机器人对用户文本的回复
32 
33 # 启动Flask应用
34 if __name__ == "__main__":
35     app.run(debug=True)

后端代码

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6     <title>Document</title>
  7     <script src="https://code.jquery.com/jquery-3.7.1.js" integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4=" crossorigin="anonymous"></script>
  8 
  9     <style>
 10 
 11 
 12           body{
 13             font-family: monospace;
 14           }
 15 
 16           #chatbox{
 17             margin-left: auto;
 18             margin-right: auto;
 19             width: 80%;
 20             margin-top: 50px;
 21           }
 22 
 23           .botText{
 24             font-family: monospace;
 25             font-size: 16px;
 26             text-align: left;
 27             line-height: 25px;
 28             color: green;
 29           }
 30 
 31           #userInput{
 32             margin-left: auto;
 33             margin-right: auto;
 34             width: 80%;
 35             text-align: center;
 36             margin-top: 50px;
 37           }
 38 
 39           #textInput{
 40             border: 3px solid white;
 41             border-bottom: 3px dotted #657889;
 42             font-family: monospace;
 43             font-size: 16px;
 44             width: 60%;
 45             padding: 20px;
 46             color: blue;
 47           }
 48 
 49           #buttonInput{
 50             padding: 5px;
 51             font-family: monospace;
 52             font-size: 16px;
 53             padding: 10px;
 54             border: 3px solid #58ff7c;
 55             background-color: green;
 56             color: white;
 57             border-radius: 10px;
 58           }
 59 
 60           h1{
 61             text-align: center;
 62             color: green;
 63           }
 64 
 65           .userText{
 66             text-align: right;
 67           }
 68 
 69 
 70     </style>
 71 
 72 </head>
 73 <body>
 74 
 75     <h1>Chatbot App</h1>
 76     <div>
 77         <div id="chatbox">
 78             <p class="botText"><span>Hi there!</span></p>
 79         </div>
 80         <div id="userInput">
 81             <input id="textInput" type="text" name="userMessage" placeholder="Type your message"/>
 82             <input id="buttonInput" type="submit" value="Send"/>
 83         </div>
 84 
 85     </div>
 86 
 87     <script>
 88 
 89       function getUserResponse(){
 90 
 91         var userText = $('#textInput').val();
 92         var userHTML = "<p class = 'userText'> User: <span>"+userText+"</span></p>";
 93         $('#textInput').val("");
 94         $('#chatbox').append(userHTML);
 95         document.getElementById("userInput").scrollIntoView({block:'start',behavior:"smooth"});
 96         $.get("/get",{userMessage: userText}).done(function(data){
 97           var botHTML = "<p class='botText'> Chatbot: <span>"+data+"</span></p>"
 98           $('#chatbox').append(botHTML);
 99 
100         });
101 
102 
103       }
104 
105       $("#textInput").keypress(function(e){
106         if(e.which == 13){
107           getUserResponse();
108         }
109       });
110 
111       $('#buttonInput').click(function(){
112         getUserResponse();
113       })
114 
115 
116 
117 
118     </script>
119 
120 
121 </body>
122 </html>