基于OpenAI的Chatbot开发记录
Chatbot 开发记录
最近ChatGPT非常火，去体验之后确实有被惊艳到，也对OpenAI上的人工智能模型比较感兴趣，于是想着复刻一个ChatGPT，利用官方提供的包和api，可以非常简单地复刻出一个ChatGPT，下面是复盘开发过程的记录。
项目地址：https://github.com/Fangnan700/Chatbot
配置项目
我所使用的开发环境是Ubuntu22.04 + Python3.10 + Pycharm2022.3；
项目后端采用Flask框架，前端采用Bootstrap框架，前后端使用json进行交互。
项目结构：
编写代码
前端：
前端需要的框架文件：
- 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，你可以把你的问题写在下方，然后发送给我，我会尽力为你解答
基于OpenAI的Chatbot开发记录相关推荐
- 【二次开发】基于KLayout的PDK开发记录
软件简介:GDS文件时集成电路版图设计中最常用的图形数据描述语言文件格式,一般打开这种文件,需要使用KLayout软件,且该软件是开源的.源码网址:https://github.com/KLayout ...
- 吴恩达OpenAI基于ChatGPT的Prompt开发教程
吴恩达OpenAI基于ChatGPT的Prompt开发教程 1.如何给出清晰具体的提示 1.1大模型分类: Base LLM基础大语言模型来源于预训练模型:用已有单词推测下一个单词. Instruct ...
- 基于正点原子Linux开发板(ALIENTEK I.MX6U ALPHA V2.2)的个人自学记录
基于正点原子Linux开发板(ALIENTEK I.MX6U ALPHA V2.2)的个人自学记录 硬件环境 正点原子Linux开发板(ALIENTEK I.MX6U ALPHA V2.2) 底板+核 ...
- 基于小程序云开发的在线答题小程序源码含答题分类答题记录错题集适合学习适合毕业设计使用
基于小程序云开发开发的在线答题小程序源码 核心功能: 1.答题分类 2.开始答题 3.答题评分 4.答题记录 5.错题集 部分界面截图: 如有疑问,可联系博主!
- Rock派(基于瑞芯微RK3308B)开发记录-上篇
本文作者:Linux兵工厂,一个嵌入式软件领域的攻城狮. 欢迎指教 公一众-号:Linux兵工厂,获取硬核Linux资料和文章 前言 根据项目需求并且经过各方面评估最终选择了这款Rock Pi(Roc ...
- 基于FPGA的以太网开发
基于FPGA的以太网开发,在调试过的FPGA玩家开来,其实算不上很难的技术!但是如果只是菜鸟级别的选手,没有调试过的话,就有些头疼了!早在自己在实习的时候,就接触到XAUI(万兆以太网口)接口,但 ...
- 基于Servlet+JSP+JavaBean开发模式的用户登录注册
基于Servlet+JSP+JavaBean开发模式的用户登录注册 一.Servlet+JSP+JavaBean开发模式(MVC)介绍 Servlet+JSP+JavaBean模式(MVC)适合开发复 ...
- Anytime项目开发记录0
Anytime,中文名:我很忙. 开发者:孤独的猫咪神. 这个项目会持续更新,直到我决定不再维护这个APP. 2014年3月10日:近日有事,暂时断更.希望可以会尽快完事. 2014年3月27日:很抱 ...
- 基于ASP.Net Core开发的一套通用后台框架
基于ASP.Net Core开发一套通用后台框架 写在前面 这是本人在学习的过程中搭建学习的框架,如果对你有所帮助那再好不过.如果您有发现错误,请告知我,我会第一时间修改. 知其然,知其所以然,并非重 ...
最新文章
- html根据字段制作曲线图,canvas制作简单的HTML图表，折线或者矩形统计(原创)
- java c s测试_将Zlib Java与C进行基准测试
- Date、DateFormat、Calendar日期类
- 计算机无法弹出支付,windows7系统打不开支付宝功能导致付款与转账失败怎么办...
- magento 模块重写
- EditText 双击才能获取点击事件
- GitHub 撤销 commit
- java.lang.classnotfo_java.lang.ClassNotFoundException
- jquery 选择器 空格、大于、加号、波浪线区别
- js获取当前路径的url
- 项目启动管理、需求分析、可行性方案论证 IT项目管理
- Android静默安装实现方案，仿360手机助手秒装和智能安装功能
- 《Microsoft Word》进阶技巧：如何设置文档视图
- 【YOLOV5-5.x 源码解读】datasets.py
- python中import math用法_import的使用
- 安装dhcp服务器虚拟2012,windows server 2012 dhcp服务器安装
- linux桌面图标恢复,恢复Linux桌面下方面板上显示最小化的图标的方法
- iPhone手机使用iSH终端运行iperf3命令测试内网Wi-Fi网速
- c语言菜单即功能,C语言 菜单专题
- 破解G*L**d2021.1.3
热门文章