基于OpenAI的Chatbot开发记录

最新推荐文章于 2024-05-17 15:07:22 发布
最新推荐文章于 2024-05-17 15:07:22 发布
阅读量1.6k 收藏 11
点赞数
分类专栏： Python 文章标签： 人工智能 gpt-3 python flask ajax
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/YV_LING/article/details/128358537
版权

Chatbot 开发记录

最近ChatGPT非常火，去体验之后确实有被惊艳到，也对OpenAI上的人工智能模型比较感兴趣，于是想着复刻一个ChatGPT，利用官方提供的包和api，可以非常简单地复刻出一个ChatGPT，下面是复盘开发过程的记录。

项目地址：https://github.com/Fangnan700/Chatbot

配置项目

  • 我所使用的开发环境是Ubuntu22.04 + Python3.10 + Pycharm2022.3；

  • 项目后端采用Flask框架，前端采用Bootstrap框架，前后端使用json进行交互。

项目结构：

image-20221217222120806

编写代码

前端：

前端需要的框架文件：

  • jquery-3.6.2.min.js
  • bootstrap.min.js
  • bootstrap.min.css

文件可以到官网直接下载。

index.html

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" maximum-scale="1.0" user-scalable="0">
    <title>Chatbot.</title>
    <script src="{{ url_for('static', filename='js/bootstrap.min.js') }}"></script>
    <script src="{{ url_for('static', filename='js/jquery-3.6.2.min.js') }}"></script>
    <link rel="icon" href="{{ url_for('static', filename='img/robot.png') }}">
    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/bootstrap.min.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/index.css') }}">
</head>
<body>

<div class="container-fluid">
    <div class="row-cols-auto">
        <div class="main">
            <img src="{{ url_for('static', filename='img/logo.png') }}" width="320px" height="100px">
        </div>
    </div>

    <div class="row-cols-auto">
        <div class="col" id="content">
            <div class="col" id="response"></div>
        </div>
    </div>

     <div class="row" id="loading_frame">
        <div class="spinner-border text-light" role="status">
            <span class="visually-hidden">Loading...</span>
        </div>
    </div>

    <div class="row-cols-auto">
        <div class="col textarea" id="input" contenteditable="true" onfocus="clear_input()">

        </div>
    </div>

    <div class="row-cols-auto" id="btn_group">
        <button class="btn btn-secondary" id="clear_btn" onclick="clear_history()" onmo>清 空</button>
        <button class="btn btn-secondary" id="send_btn" onclick="send()">发 送</button>
    </div>

    <div class="row-cols-auto" id="footer_frame">
        Copyright © 2022
        <a class="link-light" href="https://github.com/Fangnan700">Fang nan.</a>
        All rights reserved.
    </div>

</div>

</body>
<script src="{{ url_for('static', filename='js/index.js') }}"></script>
</html>

index.css

body {
    width: 100%;
    height: 100%;
    background: #333333;
}

.main {
    width: 100%;
    height: 100%;
    text-align: center;
}

#content {
    width: 100%;
    height: auto;
    min-height: 480px;
    margin-top: 20px;
    padding-top: 20px;
    padding-bottom: 80px;
    padding-left: 50px;
    padding-right: 50px;
    background: rgba(0,0,0, 1);
    backdrop-filter: blur(10px);
    border-radius: 15px;
}

#response {
    width: 100%;
    height: auto;
    min-height: 380px;
    color: #ffffff;
}

#loading_frame {
    width: 30px;
    height: 30px;
    margin-top: 20px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    visibility: hidden;
}

#input {
    width: 100%;
    height: auto;
    min-height: 50px;
    line-height: 50px;
    margin-top: 20px;
    padding-left: 30px;
    padding-right: 10px;
    border-radius: 15px;
    background: black;
    color: #ffffff;
}

#btn_group {
    margin-top: 20px;
    margin-bottom: 30px;
    text-align: right;
}

#clear_btn {
    width: 100px;
    margin-left: auto;
    margin-right: auto;
    border-radius: 10px;
}

#send_btn {
    width: 100px;
    margin-left: 10px;
    margin-right: auto;
    border-radius: 10px;
}


#footer_frame {
    width: 230px;
    height: 30px;
    line-height: 30px;
    margin-top: 20px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    color: #ffffff;
}

index.js


// 获取页面元素并创建全局变量
let loading_frame = document.getElementById("loading_frame");
let _input = document.getElementById("input");
let response = document.getElementById("response");
let clear_btn = document.getElementById("clear_btn");
let send_btn = document.getElementById("send_btn");
let history;

// 设置提示语
response.innerText = "hi～我是Chatbot，你可以把你的问题写在下方，然后发送给我，我会尽力为你解答😆"
_input.innerText = "请把你的问题写在这里"

// 发送请求
function send() {
    send_btn.blur();
    loading_frame.style.visibility = "visible";
    let value = _input.innerText;
    history = document.getElementById("response").innerText;
    response.innerText = history + "\n\nQ:\n\n" + value;
    let data = {"content": value};
    $.ajax({
        url: "/send",
        type: "post",
        contentType: 'application/json',
        data: JSON.stringify(data),
        success: function (result) {
            history = document.getElementById("response").innerText;
            response.innerText = history + "\n\nA:" + result;
            loading_frame.style.visibility = "hidden";
        },
        error: function () {
            loading_frame.style.visibility = "hidden";
            response.innerText = "好像出了点问题哦，稍后再试试吧～";
        }
    })
}

// 清除历史内容
function clear_input() {
    _input.innerText = "";
}

function clear_history() {
    clear_btn.blur();
    _input.innerText = "";
    response.innerText = "";
}

后端：

后端使用Python+Flask实现，同时需要引入几个包：

  • openai（OpenAI官方提供的包，可以非常方便地发送请求）
  • dotenv（用于读取环境变量，OpenAI的api-key将在环境变量文件中设置）

以上两个包可以直接用pip进行安装。

在项目根目录创建.flaskenv文件并写入配置：

FLASK_APP=app
FLASK_ENV=development
OPENAI_API_KEY=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

其中OPENAI_API_KEY填写的是从OpenAI官网申请到的api-key，申请网址：

https://beta.openai.com/api

app.py

from flask import *
import os
import openai

app = Flask(__name__)
openai.api_key = os.environ.get('OPENAI_API_KEY')


@app.route('/', methods=('GET', 'POST'))
def index():
    return render_template('index.html')


@app.route('/send', methods=('GET', 'POST'))
def send():
    # 解析前端发送的数据
    recv = request.json
    data = recv['content']
    
    # 核心代码，用于向OpenAI的服务器发送请求数据
    response = openai.Completion.create(
        model="text-davinci-003",	# 选择要使用的模型
        prompt=data + '.',			# 请求的数据，即向模型输入的语句，需要以"."结尾
        temperature=0.8,			# 参数，范围0～1，数值越大输出的数据更独特，数值越小输出更准确
        n=1,						# 为每个提示生成多少结果，默认为1
        max_tokens=2048				# 单次输出的最大令牌数，大多数模型支持的最大值为2048
    )
    return response.choices[0].text # 从服务器返回的数据中取出想要的结果


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

部署项目

这里推荐使用境外的服务器，国内可以通过http请求访问到，将输入的内容发送到服务器，再由服务器转发到OpenAI的服务器上，由此可以在不使用科学上网的情况下，实现与AI机器人的交互。

为了便于在服务器上启动项目，我使用shell脚本来完成项目的启动：

run.sh

#! /bin/bash
./venv/bin/python -m flask run --host 0.0.0.0 --port 80

编写好的脚本放在项目根目录下。

将项目连同虚拟环境一起打包，上传到服务器：

scp Chatbot.zip username@host:/path

上传完成后解压：

unzip Chatbot.zip

进入项目文件下并给脚本赋予权限：

cd Chatbot
chmod +x run.sh

开放80端口：

ufw allow 80

在后台不中断地启动项目：

setsid ./run.sh &

这么启动在ssh连接断开后项目不会停止。

1

至此，通过服务器的公网IP就可以访问到项目了，如果访问不到，就要到服务器的管理面板查看端口是否开放。

2

在不使用vpn的情况下也能正常使用：

3

手机端也能正常使用：

1EE60F238611E931B3ABCE4FCA1A182F

YV_LING
关注
  • 0
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
chatbot_Chatbot开发简介
编程故事的地方
01-03 867
chatbot 如今，聊天机器人在人类{个人和组织}的日常活动中起着至关重要的作用。 根据所做的调查，有27％的人使用AI聊天机器人（例如Google Assistant，Amazon Alexa，Cortana，Apple Siri等）来完成简单的任务或命令。 聊天机器人可以根据为其提供的培训为公司工作，并提高工作效率。 多种支持技术可帮助聊天机器人充当真正的助手。 例如，支持NLP，AI...
ChatBot开发思路
weixin_44867812的博客
07-07 283
幾天前，我收到了一份來自 San Jose 的 intern 邀請，對方正致力於用深度學習的相關技術，來開發商務用途的對話式介面，因此特別著重在「潛在語意分析」與「自學習」這兩個議題上，這剛好和我目前的研究方向挺類似的，而與對方攀談了不少開發與改進的方向，趁著現在記憶還算清楚，趕緊把這些想法記錄下來。 聊天機器人「眠寶」的雛形，目前仍在開發中 從最基本的出發 在切入聊天機器人的商務應用之前，我們先來談談怎麼開發一個聊天機器人吧！一般來說，實作上大抵脫離不了這三種模型： 樣板式模型 (Rule
OpenAI使用步骤详解
最新发布
m0_68422841的博客
05-17 1057
点击生成密钥，系统将为你提供一个独一无二的API密钥，用于后续的API调用。这包括设置你的API密钥、选择适当的模型版本、确定请求的方法（如GET或POST）以及准备必要的输入数据。使用你喜欢的HTTP客户端或者编程语言的HTTP库，向OpenAI的API端点发送请求。根据你的应用需求，你可以在OpenAI的模型库中浏览并选择最适合你的模型。你需要在你的代码中解析这个响应，提取出你需要的数据。根据API返回的结果，你可能需要对你的请求参数或输入数据进行调整，以优化模型的性能和输出质量。
chatbot开发心得
Eric_LH的博客专栏
09-11 877
这是一个正在不断增长的市场，当你找到很好的场景并不断打磨你的bot产品，你就会做出用户喜欢的chatbot.
LINE chatbot机器人开发
weixin_46127182的博客
12-01 856
因為是 LINE 提供的服務，所以需要先到 LINE Develpers 登入及註冊。 先到 https://developers.line.biz/en/ 登入 登入後，注册，填寫 Name 、Email，並發送信箱認證信 選擇要使用的服務： Messaging API for python。 ...
基于chatterbot制作聊天机器人
我开心呀的博客
09-03 4196
一、环境搭建 python 3.6 安装chatterbot 安装方式： 1.在项目目录下pip install chatterbot进行安装 2.下载源码，运行setup.py进行安装 本人尝试使用第一种安装方式失败后，下载源码进行安装成功。 报错信息： 根据刚才第一次安装的报错信息，查看requirement.txt中的版本要求，可以看到： 使用pip lis...
chatbot格式定义_ChatBot_
10-03
5. **对话系统框架（DSF）**：如Facebook的Wit.ai、Google的Dialogflow或Microsoft的LUIS等，提供了定义和管理ChatBot的平台，简化了开发流程。 在“chatbot格式定义.txt”文件中，可能包含了这些组件的详细描述，...
Chatbot-Python:AI Chatbot Python
04-09
AI Chatbot Python 通过Heroku将简单的Flask应用程序部署到云中 安装依赖 python --version pip install -r requirements.txt or pip list pip install flask pip uninstall flask pip show flask 训练模型 python...
在 Python 中使用 OpenAI 和 Gradio 创建聊天机器人
07-05
被称为聊天机器人的计算机程序可能会模仿人类用户的通信。...在 Python 中使用 OpenAI 和 Gradio 创建 ChatBot 的步骤 在这里，我们将看到使用 Python 中的 OpenAI 和 Gradio 创建聊天机器人的步骤。
基于微信测试号的ChatBot，对接OpenAI API.zip
03-02
基于微信测试号的ChatBot，对接OpenAI API.zip
AI_BOT:人工智能机器人
05-07
“ai chatbot”表明AI_BOT不仅是一个简单的聊天工具，还涉及到复杂的人工智能技术。Chatbots利用深度学习模型，如循环神经网络（RNN）、长短时记忆网络（LSTM）或者Transformer，进行语料学习，从而具备了理解和生成...
chatbot：基于人工智能的对话系统
02-14
聊天机器人 基于人工智能的对话系统
ChatbotProject:Chatbot 2021课程的最终项目
03-17
ChatbotProject:Chatbot 2021课程的最终项目
ChatBot framework 开发实践
allwefantasy的专栏
04-20 316
前言 通常而言，通用聊天机器人（比如小冰等）底层技术是采用类似Seq2Seq等“生成”技术的。但是这种机器人属于探索性质，无法 提供特定的服务。而Siri则是兼具闲聊以及垂直领域功能的，比如可以预约提醒，打电话，定餐厅等特定功能。相信Siri在实现特定预约提醒，打电话功能等，则是使用了“语言模板”匹配技术以及结合分类器来实现精度的控制和定向动作的执行。 对...
我开发了一个温柔的智能客服聊天机器人ChatBot，并回答为什么不是ChatGPT（附思路和代码）
一名高级工程师的博客
04-20 7277
本文是笔者设计实现智能客服机器人chatbot的思考和开发过程，使用了全文搜索技术、中文分词、nodejs、socketio等技术，虽然不是chatgpt却也是个温柔可人的客服小助理，是个可爱的聊天机器人，附有代码和演示网址。代码实现浅显易懂，适合入门级学习。
一份ChatBot开源工程介绍（H5 + WX + KOA）
weixin_30920091的博客
08-06 398
vue-mpvue-ChatRobot https://github.com/fanqingsong/vue-mpvue-ChatRobot 前端 : Vue + Mpvue（支持移动端与小程序） ; 后端 : koa（使用Koa2开发服务端） Vue 是一套用于构建用户界面的渐进式框架。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，...
Chatbot项目的剖析
大数据处理，智能搜索推荐，自然语言处理，AI机器人对话，数据库读写分离
03-27 566
聊天机器人已经从简单的脚本应答机器走了很长一段路。今天的聊天机器人非常聪明，可以吸引潜在客户，并确保人力客户服务和销售代理不会因为重复查询而浪费时间和资源。但这不是他们所做的全部。今天的企业以非常有趣的方式使用聊天机器人，展示了聊天机器人的全部功能和能力。 它们为企业带来了与客户沟通的新途径。机器人是一个新的用户界面。这个新的用户界面允许品牌和服务使用他们喜欢的消息应用程序与客户进行交互。在为您...
自己的chatgpt---chatbot项目实战
qq_60815011的博客
10-12 269
GitHub 是一个 基于 Git 的代码托管平台，它提供了代码存储、协作和版本控制功能。通过创建一个 GitHub 账号，我们可以将本地 Git 仓库与远程 GitHub 仓库关联起来，实现团队间的协作和代码共享。那么我们该如何为 ChatBot 项目创建一个 GitHub 远程仓库并与本地仓库进行关联呢？###创建 GitHub 远程仓库要将项目与 GitHub 关联，我们需要在 GitHub 上创建一个新的远程仓库。
开源的全文搜索引擎总结，chatbot和chatgpt项目必备资源
一名高级工程师的博客
04-16 1234
即使你已经在你的项目中使用了这样的引擎（实际上这是很有可能的），使用 Tantiny 仍然可能更容易，因为与 Solr 和 Elasticsearch 不同，它不需要任何东西来工作（没有单独的服务器或进程或其他什么），它是纯粹的可嵌入的。开发语言：Java FTServer (FTS) 是一个轻量精准全文搜索服务器，使用英文规则处理英文，使用中文规则处理中文，不需要切割中文为单词，可以支持中文字的任意排列，精准搜索中文长句子，轻松处理古文古诗词，写意句子不影响搜索，不依赖词库，搜索中文不漏词。
写一个能交互的前端页面
05-13
很好，我可以为您提供一些指导。 首先，您需要选择一个前端框架，例如React、Vue等。这些框架可以帮助您更轻松地构建动态交互式页面。 接下来，您需要确定您想要实现的功能，例如输入框、按钮、对话框等。您可以使用HTML和CSS来创建这些元素，并使用JavaScript来实现它们的交互。 例如，您可以创建一个输入框，让用户输入文本，并使用按钮触发一个函数来处理用户输入。该函数可以将用户输入发送到后端API，并从API获取响应。响应可以显示在页面上的对话框中，让用户与AI进行交互。 以下是一个简单的示例代码： ```javascript import React, { useState } from 'react'; import axios from 'axios'; function Chatbot() { const [input, setInput] = useState(''); const [response, setResponse] = useState(''); const handleSubmit = async (e) => { e.preventDefault(); const res = await axios.post('/api/chatbot', { input }); setResponse(res.data.response); setInput(''); } return ( <div> <h1>Chatbot</h1> <form onSubmit={handleSubmit}> <input type="text" value={input} onChange={(e) => setInput(e.target.value)} /> <button type="submit">Send</button> </form> {response && <div>{response}</div>} </div> ); } export default Chatbot; ``` 在这个示例中，我们使用React构建了一个简单的聊天机器人页面。当用户提交表单时，我们将其输入发送到后端API，并将响应显示在页面上。当然，这只是一个很简单的例子，您可以根据自己的需求进行修改和扩展。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

YV_LING

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值