小白入手实现AI客服机器人demo

2024-06-18 02:44

本文主要是介绍小白入手实现AI客服机器人demo,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

一、环境准备

1 安装python
2 安装vscode
3 安装相关python库
pip install flask flask_cors openai

4.在vscode里安装TONGYI Lingma(AI编程助手)
在这里插入图片描述

二、后端搭建

创建一个后端文件夹chatbot,再新建一个app.py的python文件

from flask import Flask, request, jsonify
from flask_cors import CORS
from openai import OpenAI
import osfrom dotenv import load_dotenv, find_dotenv
_ = load_dotenv(find_dotenv())client = OpenAI()app = Flask(__name__)
CORS(app, resources={r"/*":{"origins": "*"}}) # 这会为所有端点添加跨源头部分@app.route('/ask', methods=['POST'])def ask():user_question = request.json['message']answer = get_answer_from_model(user_question)return jsonify({'answer': answer})def get_answer_from_model(message):response = client.completions.create(model="gpt-3.5-turbo-instruct",prompt=message,max_tokens=512,# stream=Falsestream=True)print('response:',response)# answer = response.choices[0].text.strip()answer = ""for chunk in response:answer += chunk.choices[0].textreturn answerif __name__ == '__main__':app.run(debug=True, port=5000)

三、前端搭建

1 创建前端文件夹chatbot-interface
2 创建三个前端的文件index.html styles.css srcript.js

index.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>AI Chatbot</title><link rel="stylesheet" href="styles.css">
</head>
<body><div class="chat-container"><div class="chat-header"><h3>AI Chatbot</h3></div><div class="chat-box" id="chat-box"><!-- 聊天消息将在这里显示 --></div><div class="chat-input"><input type="text" id="user-input" placeholder="Type your message..."><button id="send-button" onclick="sendMessage()">Send</button></div></div><script src="script.js"></script>
</body>
</html>

styles.css

body, html {margin: 0;padding: 0;font-family: Arial, sans-serif;
}.chat-container {max-width: 1080px;margin: 30px auto;border: 1px solid #ccc;border-radius: 5px;
}.chat-header {background-color: #f4f4f4;padding: 10px;border-top-left-radius: 5px;border-top-right-radius: 5px;
}.chat-box {height: 720px;overflow-y: scroll;padding: 15px;background-color: #fff;
}.chat-input {padding: 10px;display: flex;justify-content: space-between;
}.chat-input input {flex-grow: 1;padding: 5px;border: 1px solid #ccc;border-radius: 5px;
}.chat-input button {padding: 5px 15px;background-color: #007bff;color: white;border: none;border-radius: 5px;cursor: pointer;
}/* 简单的动画效果 */
.chat-box::-webkit-scrollbar {width: 6px;
}.chat-box::-webkit-scrollbar-thumb {background-color: #ccc;
}

script.js

var inputBox = document.getElementById('user-input');
var sendButton = document.getElementById('send-button');
inputBox.addEventListener('keydown', function(event) {if (event.keyCode === 13 || event.key === 'Enter') {event.preventDefault();sendMessage();}
});function sendMessage() {//var userInput = document.getElementById('user-input').value;var userInput = inputBox.value;if (userInput.trim() === '') return;// 将用户输入添加到聊天框addToChatBox('baiyang', userInput);// 清空输入框document.getElementById('user-input').value = '';// 假设这里发送请求到服务器,并获取AI的回复fetch('http://127.0.0.1:5000/ask', {method: 'POST',headers: {'Content-Type': 'application/json',},body: JSON.stringify({ message: userInput })}).then(response => {if (!response.ok){throw new Error('Network response was not ok');}return response.json()}).then(data => {// 将AI的回复添加到聊天框if (data && data.answer){console.log(data.answer);addToChatBox("douwan", data.answer);}else{console.error('Invalid response data:', data);}// addToChatBox('AI', data.reply);}).catch((error) => {console.error('Error:', error);});
}function addToChatBox(sender, message) {var chatBox = document.getElementById('chat-box');var div = document.createElement('div');div.innerHTML = `<strong>${sender}:</strong> ${message}`;chatBox.appendChild(div);chatBox.scrollTop = chatBox.scrollHeight; // 自动滚动到底部
}

四、效果展示

1 首先运行app.py文件,在vscode中运行,如
在这里插入图片描述

2 浏览器打开index文件,在输入框中输入相关文件,发送可返回信息。
在这里插入图片描述

这篇关于小白入手实现AI客服机器人demo的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1071090

相关文章

python实现svg图片转换为png和gif

《python实现svg图片转换为png和gif》这篇文章主要为大家详细介绍了python如何实现将svg图片格式转换为png和gif,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录python实现svg图片转换为png和gifpython实现图片格式之间的相互转换延展:基于Py

Python利用ElementTree实现快速解析XML文件

《Python利用ElementTree实现快速解析XML文件》ElementTree是Python标准库的一部分,而且是Python标准库中用于解析和操作XML数据的模块,下面小编就来和大家详细讲讲... 目录一、XML文件解析到底有多重要二、ElementTree快速入门1. 加载XML的两种方式2.

Java的栈与队列实现代码解析

《Java的栈与队列实现代码解析》栈是常见的线性数据结构,栈的特点是以先进后出的形式,后进先出,先进后出,分为栈底和栈顶,栈应用于内存的分配,表达式求值,存储临时的数据和方法的调用等,本文给大家介绍J... 目录栈的概念(Stack)栈的实现代码队列(Queue)模拟实现队列(双链表实现)循环队列(循环数组

C++如何通过Qt反射机制实现数据类序列化

《C++如何通过Qt反射机制实现数据类序列化》在C++工程中经常需要使用数据类,并对数据类进行存储、打印、调试等操作,所以本文就来聊聊C++如何通过Qt反射机制实现数据类序列化吧... 目录设计预期设计思路代码实现使用方法在 C++ 工程中经常需要使用数据类,并对数据类进行存储、打印、调试等操作。由于数据类

Python实现图片分割的多种方法总结

《Python实现图片分割的多种方法总结》图片分割是图像处理中的一个重要任务,它的目标是将图像划分为多个区域或者对象,本文为大家整理了一些常用的分割方法,大家可以根据需求自行选择... 目录1. 基于传统图像处理的分割方法(1) 使用固定阈值分割图片(2) 自适应阈值分割(3) 使用图像边缘检测分割(4)

Android实现在线预览office文档的示例详解

《Android实现在线预览office文档的示例详解》在移动端展示在线Office文档(如Word、Excel、PPT)是一项常见需求,这篇文章为大家重点介绍了两种方案的实现方法,希望对大家有一定的... 目录一、项目概述二、相关技术知识三、实现思路3.1 方案一:WebView + Office Onl

C# foreach 循环中获取索引的实现方式

《C#foreach循环中获取索引的实现方式》:本文主要介绍C#foreach循环中获取索引的实现方式,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧... 目录一、手动维护索引变量二、LINQ Select + 元组解构三、扩展方法封装索引四、使用 for 循环替代

Spring Security+JWT如何实现前后端分离权限控制

《SpringSecurity+JWT如何实现前后端分离权限控制》本篇将手把手教你用SpringSecurity+JWT搭建一套完整的登录认证与权限控制体系,具有很好的参考价值,希望对大家... 目录Spring Security+JWT实现前后端分离权限控制实战一、为什么要用 JWT?二、JWT 基本结构

Java实现优雅日期处理的方案详解

《Java实现优雅日期处理的方案详解》在我们的日常工作中,需要经常处理各种格式,各种类似的的日期或者时间,下面我们就来看看如何使用java处理这样的日期问题吧,感兴趣的小伙伴可以跟随小编一起学习一下... 目录前言一、日期的坑1.1 日期格式化陷阱1.2 时区转换二、优雅方案的进阶之路2.1 线程安全重构2

Android实现两台手机屏幕共享和远程控制功能

《Android实现两台手机屏幕共享和远程控制功能》在远程协助、在线教学、技术支持等多种场景下,实时获得另一部移动设备的屏幕画面,并对其进行操作,具有极高的应用价值,本项目旨在实现两台Android手... 目录一、项目概述二、相关知识2.1 MediaProjection API2.2 Socket 网络