前端代码
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>
效果展示
标签：__,userText,get,Python,机器人,color,聊天,font,margin From： https://www.cnblogs.com/Lyh3012648079/p/18223407