手机网站建设哪家强,遂昌建设局网站,杭州pc网站制作公司,贵阳能做网站的公司有哪些写在前面
在创建个人的 GPT网页之前#xff0c;我登录了 Git 并尝试了一些开源项目#xff0c;但是没有找到满足我个性化需求的设计。虽然许多收费的 GPT网页提供了一些免费额度#xff0c;足够我使用#xff0c;但是公司的安全策略会屏蔽这些网页。因此#xff0c;我决定…写在前面
在创建个人的 GPT网页之前我登录了 Git 并尝试了一些开源项目但是没有找到满足我个性化需求的设计。虽然许多收费的 GPT网页提供了一些免费额度足够我使用但是公司的安全策略会屏蔽这些网页。因此我决定自己创建一个既可以从公司访问又能满足个性化需求的 聊天机器人网页服务以提高我的工作效率。
经过一段时间的摸索我成功搭建了自己的 GPT网页服务并且这个服务整体来说非常稳定。在使用了几个月的时间里只出现了一次网页崩溃的情况而且只需重启服务就可以继续使用。
接下来我将介绍我是如何搭建我的 GPT网页服务的。 需求分析
我的GPT网页服务主要是为个人使用目的是为了提高工作效率所以整体设计比较简单主要包含
登录页面防止其他人访问网页网页被攻击。聊天机器人页面类似于聊天机器人官网的页面向聊天机器人提交问题。 English Helper个性化页面因为工作中每天都要接触到英语所以创建该页面加强自己对英文词汇的理解。
技术实现
整体使用的是最基础的页面架构前端用的是HTMLCSSJS,以及Bootstrap后端用的是Flask。这样的好处是代码编写快捷简单只需要一个Pycharm编辑器就可以了。网页服务是搭建在Gunicorn上的整体配置简单方便。
就代码而言整体结构也比较简单。主要分为一个Template包里面包含的是一些前端的页面。后端服务的代码都写在了app.py里面。另外因为这里的所有需求都需要和聊天机器人进行交互所以将和聊天机器人进行交互的逻辑单独写在了gpt_untils里面用户配额和用户权限管理也是相对独立的一部分将用户的相关逻辑写在了userconfig.py里面因为这个网页只提供给少数人使用用户的信息保存在userconfig.json文件里而不是数据库里面。
服务器选择的是阿里云服务器因为阿里云服务器价格较为优惠而且遇到问题有较多的参考文档。因为服务器是国内的所以调用ChatGpt接口的时候需要使用代理我使用过的代理有https://api.openai-proxy.com/v1和https://api2d.com使用openai-proxy还需要自己去open-ai官网申请gpt账号申请账号所花的成本大概为15块钱使用https://api2d.com可以自己在上面充值价格如下充值一次有6个月的有效期根据自己的需要选择即可。
代码详细解释
登录页面和首页面
登录页面代码如下采用常用的登录页面的结构失败后会给消息提示页面的结构设计继承自base.html.
{% extends base.html %}{% block content %}h3用户登录/h3
form action/login methodpostdiv classrowdiv classcol-8请输入用户名input typetext classform-control nameusernamebr /请输入密码input typepassword classform-control namepasswordbr /div idresult{{message}}/divbr /button typesubmit idsubmitbtn classbtn btn-primary登录/button/div/div
/form
{% endblock %}以下为base.html的页面主要定义了整个网页的框架结构。需要注意页面中的JS部分show_quota_info和gpt_show_stream_info方法一个是显示用户配额信息一个是显示GPT返回的结果。
show_quota_info函数使用jQuery库中的ajax方法发送GET请求到/show_quotas路径。请求成功后将返回的数据使用$(“#quota_info”).html(data)方法插入到id为quota_info的HTML元素中。
gpt_show_stream_info函数首先禁用id为submitbtn的HTML元素按钮然后将id为result的HTML元素的内容设置为ChatGPT正在请求中加载中…。接下来创建一个EventSource实例其中的参数是传入的url。通过该实例可以与服务器建立一个持久化的连接以接收来自服务器的事件。
在EventSource的onmessage事件处理程序中首先检查变量begin_output如果为false表示第一次收到消息则将begin_output设置为true并清空id为result的HTML元素的内容。
然后通过检查接收到的消息的内容如果内容为[DONE]表示流式输出结束关闭EventSource连接启用id为submitbtn的HTML元素按钮并调用show_quota_info函数刷新配额信息。
如果接收到的消息不是[DONE]则将该消息追加到id为result的HTML元素的内容中。
!doctype html
html langzh-CN
head!-- 必须的 meta 标签 --meta charsetutf-8meta nameviewport contentwidthdevice-width, initial-scale1, shrink-to-fitno!-- Bootstrap 的 CSS 文件 --link hrefhttps://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.3/css/bootstrap.min.css relstylesheetlink hrefhttps://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.3/css/bootstrap.css.map relstylesheettitleDaPengGPT/titlestyle#topnav {background-color:#000;color: #fff;padding-top: 10px;padding-bottom: 10px;margin-bottom: 20px;}#topnav2{background-color:#000;color: #fff;padding-top: 10px;padding-bottom: 10px;margin-bottom: 20px;}#topnav2 a{color: #fff;font-size: 18px;}/style
/head
bodydiv idtopnav classcontainer-fluiddiv classrowdiv classcol-7h2DaPengChatGPT/h2/divdiv classcol-5 d-flex justify-content-end align-items-centerdiv classml-auto pr-3h4span{{session[username]}}/span{% if session[username] is defined %}nbsp;nbsp;|nbsp;nbsp;a href/logoutlogout/a{% endif %}/h4/div/div/div/brh5a href/MyChatGPT/anbsp;nbsp;nbsp;nbsp;a href/english_helperEnglish Helper/a/h5/divdiv classcontainer-fluiddiv idcontent{% block content %}{% endblock %}/div
/div!-- JavaScript 文件是可选的。从以下两种建议中选择一个即可 --!-- 选项 1jQuery 和 Bootstrap 集成包集成了 Popper --
script srchttps://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.js/script
script srchttps://cdn.bootcdn.net/ajax/libs/bootstrap/5.5.0/js/bootstrap.bundle.min.js/scriptscript// 展示最新的配额信息function show_quota_info(){$.ajax({url:/show_quotas,type:GET,success:function(data){$(#quota_info).html(data)}})}// 使用流式的方法展示gpt的结果function gpt_show_stream_info(url){$(#submitbtn).prop(disabled, true)$(#result).html(ChatGPT正在请求中加载中...)var source new EventSource(url)var begin_output falsesource.onmessage function(event){if (begin_output false){begin_output true$(#result).html()}if(event.data [DONE]){source.close()$(#submitbtn).prop(disabled, false)show_quota_info()} else {$(#result).html($(#result).html() event.data)}}}
/script{% block myjavascript %}{% endblock %}!-- 选项 2Popper 和 Bootstrap 的 JS 插件各自独立 --
!--
script srchttps://cdn.jsdelivr.net/npm/jquery3.5.1/dist/jquery.slim.min.js integritysha384-DfXdz2htPH0lsSSs5nCTpuj/zy4COGpamoFVy38MVBnEIbbVYUewOrCXaRkfj crossoriginanonymous/script
script srchttps://cdn.jsdelivr.net/npm/popper.js1.16.1/dist/umd/popper.min.js integritysha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU6BZp6G7niu735Sk7lN crossoriginanonymous/script
script srchttps://cdn.jsdelivr.net/npm/bootstrap4.6.2/dist/js/bootstrap.min.js integritysha384-sLIOodYLS7CIrQpBjlC7nPvqqFbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P crossoriginanonymous/script
--
/body
/html
html
如上代码中的show_quota_info和gpt_show_stream_info被主页面使用到主页面的代码如下html
{% extends base.html %}{% block content %}
style#result{padding: 10px;background-color: #eee;margin-top: 10px;margin-bottom: 100px;word-wrap: break-word;}#rendered-content {display: none;
}/style
form action/chatgpt-clone methodpostdiv classalert alert-success idquota_info/divdivtextarea classform-control rows2 cols20 namequestion idquestion/textarea/divdiv stylemargin-top: 10px; classtext-rightbutton typebutton idsubmitbtn classbtn btn-primary提交问题/button/divdiv idrendered-content/divdiv idresult返回的结果/div
/form
{% endblock %}{% block myjavascript %}script srchttps://cdn.bootcdn.net/ajax/libs/marked/3.0.2/marked.min.js/scriptscriptvar questionTextarea document.getElementById(question); // 获取 textarea 元素var renderedContent document.getElementById(rendered-content); // 获取渲染后内容的目标元素questionTextarea.addEventListener(input, function() {var inputValue questionTextarea.value; // 获取 textarea 的输入值var renderedHTML marked(inputValue); // 使用 marked 库解析输入的 HTML 代码renderedContent.innerHTML renderedHTML; // 将解析后的 HTML 渲染到目标元素中});/scriptscript typetext/javascript$(function(){show_quota_info()$(#submitbtn).click(function(){var questionText $(#question).val(); // 获取 textarea 的值var formattedQuestion questionText.replace(/\n/g, br); // 将换行符转换为 br 标签var url /chatgpt-clone?question encodeURIComponent(formattedQuestion);gpt_show_stream_info(url)})})/script{% endblock %}代码中有两个JS其中第一个JS处理提交问题的表单数据防止前端页面的代码不被识别第二个JS用于处理表单传过来的值传给chatgpt-clone函数。
如上前端页面代码中对应的登录代码的逻辑如下获取前端提交过来的用户名和密码使用userconfig.check_user(方法和配置文件中存取的用户名和密码进行对比。
app.route(/login, methods[GET, POST])
def login():message if request.method POST:username request.form.get(username)password request.form.get(password)if userconfig.check_user(username, password):session[username] usernamereturn redirect(/)else:message 用户名或者密码错误return render_template(login.html, messagemessage)对应页面MyChatGPT 后端代码处理逻辑如下
app.route(/chatgpt-clone, methods[POST, GET])
def chatgpt_clone():if username not in session:return redirect(/login)username session[username]question request.args.get(question, )question str(question).strip()if question:new_question questionif J: in question[:2]:new_question f我们店的名字叫做茶园路-重庆鸡公煲,现在我们店新出了菜品{question[2:]}请帮我生成不少于100字的广告语包含我们店的名字强调菜品好吃实惠量大特别有满足感吃了还想吃elif C: in question[:2]:new_question f请帮我指出以下代码的问题并优化代码{question[2:]}return flask.Response(gpt_utils.gpt_stream(username, new_question),mimetypetext/event-stream)return 没有内容代码中除了单纯将前端提交的问题转给聊天机器人另外当提交的问题有J:,C:前缀的时候代码中会对前端提交的问题进行二次处理然后转给聊天机器人。
类似于MyChatGPT 页面的后端代码english_helper的后端代码如下
app.route(/english_helper, methods[POST, GET])
def english_helper():if username not in session:return redirect(/login)# 获取用户上传过的文件列表username session[username]if request.args.get(word, ):word request.args.get(word, )my_understanding request.args.get(my_understanding, )if O: in word:new_word word.replace(O:, )sentence fI want to use the following expressions in my email and meetings, but I am not sure if they are appropriate. Please help me optimize the expressions using declarative sentences and techniques from the book Nonviolent Communication”.{new_word}else:sentence fIm an IT guy works in english environment, i want to know the meaning of {word} used in meeting or email,and how to pronounce itif my_understanding ! :sentence sentence fper my understanding it means {my_understanding}, is that correct?print(sentence)return flask.Response(gpt_utils.gpt_stream(username, sentence),mimetypetext/event-stream)return render_template(english_helper.html)这段代码是将MyChatGPT 的表单分成两个输入框根据数据框中输入的内容进行不同的处理然后传给GPT接口。 现在市面上有很多GPT应用其实都是换汤不换药仅仅是改了前端页面和业务范围后端处理的逻辑与上方后端代码处理类似。
整体项目中有一段核心代码如下所示
def gpt_stream(username, question):try:userconfig.check_quota(username)except Exception as e:yield data: %s\n\n % str(e)yield data: [DONE]\n\nreturnopenai.api_key os.getenv(OPENAI_API_KEY)openai.api_base https://api.openai-proxy.com/v1result openai.ChatCompletion.create(modelgpt-3.5-turbo,messages[{role: user, content: question}],streamTrue,userusername)for chunk in result:if chunk[choices][0][finish_reason] is not None:data [DONE]else:data chunk[choices][0][delta].get(content, )yield data: %s\n\n % data.replace(\n, br/).replace( , nbsp;)这段代码从open-ai官网获取并调试的是个人项目和open-ai接口交互的部分向接口传入提问的问题并按照一定格式返回GPT的答案。
最后在terminal敲入便可以运行项目。
写在后面
尽管自己搭建的chatgpt相比其他网站还存在一些不足之处但它能够满足个性化需求并且可以在公司内网访问显著提高了工作效率。在开发chatGpt个人网页的过程中我进一步巩固了自己的前后端知识并为将来快速开发增强了信心。在开发过程中遇到了一些问题但通过chatGpt工具我得到了很多解答进而提高了开发效率。同时我还能够推测出市面上其他AI工具背后的逻辑。以下是项目的代码请自行获取 链接https://pan.baidu.com/s/1UREj4rPbZn18lqe1cGaSlg?pwd8hzg 提取码8hzg
