> 自媒体 > (AI)人工智能 > (续)chatgpt怎么构建web页面聊天
(续)chatgpt怎么构建web页面聊天
来源:网络技术分享
2023-08-29 08:18:28
663
管理

怎么把chatgpt安装到自己电脑上一篇文章已经讲完,没看的朋友可以先看完,本篇接着讲把chatgpt安装好了,不想在命令提示符框聊天,我做了一个简单的页面web聊天操作如下:

1) 首先你要在还是哪个目录的文件夹里面新建一个命名为templates文件夹,和一个app.txt文档,

打开app.txt粘贴以下代码保存:

from Flask import Flask, render_template, request, jsonify

from generate_response import generate_response

app = Flask(__name__)

@app.route('/', methods=['GET', 'POST'])

def index():

if request.method == 'POST':

user_input = request.form['user_input']

generated_response = generate_response(user_input)

# 将生成的响应传递给前端

return jsonify(response=generated_response)

return render_template('index.html')

if __name__ == '__main__':

app.run(debug=True)

然后把app.txt文件后缀改成.py,变成app.py

2)再在app.py同目录下新建一个generate_response.py文件,老规矩,先建成文档txt格式,粘贴以下代码后,后缀再改成 .py

import openai

openai.api_key = "用你的OpenAI API密钥替换这里"

def generate_response(user_input):

prompt = f"与用户聊天: {user_input}"

response = openai.Completion.create(

engine="text-davinci-002",

prompt=prompt,

max_tokens=3000,

n=1,

stop=None,

temperature=0.3,

top_p=0.5, # 采样概率阈值

)

message = response.choices[0].text.strip()

return message

3) 打开templates文件夹,然后新建一个index.txt文档文件,打开后粘贴以下代码保存:

AI Chatbot

body {

display: flex;

flex-direction: column;

min-height: 100vh;

background-color: #f8f9fa;

}

#chat-container {

flex: 1;

padding: 20px;

display: flex;

flex-direction: column;

justify-content: flex-end;

}

#chat-history {

border: 1px solid #ced4da;

border-radius: 5px;

padding: 15px;

background-color: #ffffff;

max-height: 400px;

overflow-y: auto;

margin-bottom: 20px;

}

#chat-form {

display: flex;

flex-direction: row;

}

#user_input {

flex: 1;

border-radius: 5px;

border: 1px solid #ced4da;

padding: 5px;

margin-right: 10px;

}

然后把index.txt文档文件后缀改成 .py 变成index.html

然后运行先用命令提示符打开根目录,命令:cd C:Users777AppDataRoamingPythonPython37(划线部分换成你自己的相应路径),回车;

之后再输入命令:Python app.py, 出现下面图片的情况就说明你又成功了,

然后在浏览器打开:http://127.0.0.1:5000 看看浏览去是不是出来了的聊天框,我只是做了一个简单聊天页面,当然你也可以自己再设计一个自己喜欢的风格,好!我看看效果:

恭喜你!你又成功了!!!!!!就是这个简单粗暴!!!

0
点赞
赏礼
赏钱
0
收藏
免责声明:本文仅代表作者个人观点,与本站无关。其原创性以及文中陈述文字和内容未经本网证实,对本文以及其中全部或者 部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。 凡本网注明 “来源:XXX(非本站)”的作品,均转载自其它媒体,转载目的在于传递更多信息,并不代表本网赞同其观点和对 其真实性负责。 如因作品内容、版权和其它问题需要同本网联系的,请在一周内进行,以便我们及时处理。 QQ:617470285 邮箱:617470285@qq.com
关于作者
仓莫以北(普通会员)
文章
677
关注
0
粉丝
0
点击领取今天的签到奖励!
签到排行

成员 网址收录40369 企业收录2981 印章生成216707 电子证书945 电子名片57 自媒体34015

@2022 All Rights Reserved 浙ICP备19035174号-7
0
0
分享
请选择要切换的马甲:

个人中心

每日签到

我的消息

内容搜索