chatGPT界面
效果图：
代码：
<!DOCTYPE html>
<html>
<head><title>复选框样式示例</title>
</head>
<style>* {padding:0;margin: 0;}.chatpdf{display: flex;height: 100vh;flex-direction: row;}.chatpdf .pannel{width: 255px;background-color: rgb(0, 21, 41);}.chatpdfBox{display: flex;flex-direction: column;flex: 1;background: linear-gradient(to bottom right,#dbe6fb, #f3f4f8);background-size: cover;background-attachment: fixed;}.chatpdfLine{flex: 1;width: 100%;max-width: 98%;margin: 0 auto;overflow-y: auto;}.chatpdfRow{margin: 20px 10px;display: flex;}.chatpdfAsk{justify-content: flex-end;}.chatpdfContent{display: inline-block;border-radius: 8px;padding: 6px 12px;max-width: 500px;background: rgba(255, 255, 255, 0.6);font-size: 14px;box-shadow: 0px 0.3px 0.9px rgba(0, 0, 0, 0.12), 0px 1.6px 3.6px rgba(0, 0, 0, 0.16);}.chatpdfAsk .chatpdfContent{background: linear-gradient(90deg, #2870EA 10.79%, #1B4AEF 87.08%);;color: #fff;}.chatpdfArea{display: flex;padding: 5px 10px;max-width: 1000px;margin: 0 auto;width: 100%;}.chatpdfArea textarea{flex: 1;border-color: #d9d9d9;resize: none;outline: none;padding: 0px 5px;height: 35px;line-height: 30px;color: #404040;border-radius: 10px 0px 0px 10px;transition: all 0.3s,height 0s;}.chatpdfArea textarea:hover{border-color: #4096ff;}.chatpdfArea button{height: 35px;color: #fff;background: linear-gradient(90deg, #2870EA 10.79%, #1B4AEF 87.08%);box-shadow: 0 2px 0 rgba(5, 145, 255, 0.1);border: none;padding: 0 20px;border-radius: 0px 8px 8px 0px;cursor: pointer;}.chatpdfArea button:hover{background-color: #388aff;}.chatpdf .fileTitle{background-color: #1677ff;color: #fff;border-radius: 8px;padding: 10px;margin: 10px;font-size: 14px;cursor: pointer;}@media (max-width: 768px) {.pannel{display: none;}}
</style>
<body><div class="chatpdf"><div class="pannel"><div class="fileList"><div class="fileTitle">xxxx有限公司.docx</div><div class="fileTitle">xxxx有限公司.pdf</div><div class="fileTitle">xxxx有限公司.xlsx</div></div></div><div class="chatpdfBox"><div class="chatpdfLine"><div class="chatpdfRow"><div class="chatpdfContent">我是知识库机器人，一个专门响应人类指令的大模型我是知识库机器人，一个专门响应人类指令的大模型我是知识库机器人，一个专门响应人类指令的大模型我是知识库机器人，一个专门响应人类指令的大模型我是知识库机器人，一个专门响应人类指令的大模型我是知识库机器人，一个专门响应人类指令的大模型我是知识库机器人，一个专门响应人类指令的大模型我是知识库机器人，一个专门响应人类指令的大模型我是知识库机器人，一个专门响应人类指令的大模型我是知识库机器人，一个专门响应人类指令的大模型我是知识库机器人，一个专门响应人类指令的大模型我是知识库机器人，一个专门响应人类指令的大模型</div></div><div class="chatpdfRow"><div class="chatpdfContent">我服务于人类，致力于让生活更美好</div></div><div class="chatpdfRow"><div class="chatpdfContent">我是知识库机器人，一个专门响应人类指令的大模型</div></div><div class="chatpdfRow chatpdfAsk"><div class="chatpdfContent">自建私有数据知识库 · 与知识库AI聊天</div></div></div><div class="chatpdfArea"><textarea></textarea><button><svg t="1682141916531" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1271" width="16" height="16"><path d="M0 1024l106.496-474.112 588.8-36.864-588.8-39.936L0 0l1024 512z" fill="#ffffff" p-id="1272"></path></svg></button></div></div>
</div><script></script>
</body>
</html>
相关文章：
chatGPT界面
效果图： 代码： <!DOCTYPE html> <html> <head><title>复选框样式示例</title> </head> <style>* {padding:0;margin: 0;}.chatpdf{display: flex;height: 100vh;flex-direction: row;}.chatpdf .pannel{widt…...
windows一键启动jupyter
windows一键启动jupyter jupyter简介 Jupyter是一个开源的交互式计算环境，主要用于数据分析、数据可视化和科学计算。它的名字来源于三种编程语言的缩写：Julia、Python和R，这三种语言都可以在Jupyter环境中运行。如果您想进行数据分析、科学…...
树形结构的快速生成
背景 相信大家都遇到过树形结构，像是文件列表、多级菜单、评论区的设计等等，我们都发现它有很多层级，第一级可以有多个，下边的每一个层级也可以有多个；有的可以设计成无限层级的，有的只能设计成两级。那么…...
Android笔记(二十七)：自定义Dialog实现居中Toast
背景 记录实现符合项目需求的Toast弹窗 具体实现 class MyTipDialog private constructor(val context: Activity): Dialog(context, R.style.MyTipTheme) {val resId ObservableField(0)private val mainHandler Handler(Looper.getMainLooper())init {setCanceledOnTouc…...
css实现文字的渐变，适合大屏
1 在全局写一个全局样式，文字渐变 2 在组件中使用 CSS3利用-webkit-background-clip: text;实现文字渐变效果_css如何把盒子底部的文字变成透明渐变_I俩月亮的博客-CSDN博客 CSS 如何实现文字渐变色 ？_css字体颜色渐变_一个水瓶座程序猿.的博客-CSDN博客…...
软考高级系统架构设计师系列论文八十七：论企业应用集成
软考高级系统架构设计师系列论文八十七：论企业应用集成 一、企业应用集成相关知识点二、摘要三、正文四、总结一、企业应用集成相关知识点 软考高级系统架构设计师系列之：企业集成平台技术的应用和架构设计二、摘要 本文讨论了某公司的应用系统集成项目。某公司为了应对市场变…...
C++设计模式之适配器模式
一、适配器模式 适配器模式（Adapter Pattern）是一种结构型设计模式，用于将一个类的接口转换成另一个类所期望的接口，以便两个类能够协同工作。 适配器模式可以解决现有类接口与所需接口不匹配的问题，使得原本因接口不…...
山西电力市场日前价格预测【2023-08-24】
日前价格预测 预测明日（2023-08-24）山西电力市场全天平均日前电价为319.98元/MWh。其中，最高日前电价为370.78元/MWh，预计出现在19: 30。最低日前电价为272.42元/MWh，预计出现在12: 45。 价差方向预测 1： 实…...
一文速学-让神经网络不再神秘，一天速学神经网络基础（一）
前言 思索了很久到底要不要出深度学习内容，毕竟在数学建模专栏里边的机器学习内容还有一大半算法没有更新，很多坑都没有填满，而且现在深度学习的文章和学习课程都十分的多，我考虑了很久决定还是得出神经网络系列文章，…...
百度Q2财报：营收341亿元实现加速增长，净利润高速增长44%，增长强劲全线重构
北京时间8月22日，百度发布了截至2023年6月30日的第二季度未经审计的财务报告。第二季度，百度实现营收341亿元，同比增长15%；归属百度的净利润（non-GAAP）达到80亿元，同比增长44%。营收和利润双双实…...
ARM DIY（二）配置晶振频率
文章目录 前言串口乱码问题定位内核修改晶振频率uboot 修改晶振频率番外篇 前言 上篇文章《ARM DIY 硬件调试》介绍了 DIY ARM 板的基础硬件焊接，包括电源、SOC、SD 卡座等，板子已经可以跑起来了。 但是发现串口乱码，今天就来解决串口乱码问…...
高等数学：线性代数-第三章
文章目录 第3章 矩阵的初等变换与线性方程组3.1 矩阵的初等变换3.2 矩阵的秩3.3 方程组的解 第3章 矩阵的初等变换与线性方程组 3.1 矩阵的初等变换 矩阵的初等变换 下面三种变换称为矩阵的初等变换 对换两行（列），记作 r i ↔ r j ( c i …...
深入理解 SQL 注入攻击原理与防御措施
系列文章目录 文章目录 系列文章目录前言一、SQL 注入的原理二、防御 SQL 注入攻击的措施1. 使用参数化查询2.输入验证与过滤3.最小权限原则4.不要动态拼接 SQL5.ORM 框架6.转义特殊字符三、实例演示总结前言 SQL 注入是一种常见的网络攻击方式，攻击者通过在输入框等用户交互…...
QT5.12.12通过ODBC连接到GBase 8s数据库（CentOS）
本示例使用的环境如下： 硬件平台：x86_64（amd64）操作系统：CentOS 7.8 2003数据库版本（含CSDK）：GBase 8s V8.8 3.0.0_1 为什么使用QT 5.12.10？该版本包含QODBC。 1&#…...
爱校对发布全新PDF校对工具，为用户带来更为便捷的校正体验
随着数字化文档使用的普及，PDF格式已经成为最为广泛使用的文件格式之一。为满足广大用户对于高效、准确PDF文档校对的需求，爱校对团队经过深入研发，正式推出全新的PDF校对工具！ 这一全新工具针对PDF文件格式进行了深度优化&#…...
记录protocol buffers Mac安装
使用brew安装最新的protobuf 在Mac 上安装，使用brew 可以安装最新的protobuf。这个也比较简单，简单说一下。 首先先检查一下是否安装了brew。如果没有安装brew的话，请先安装brew.可以通过brew --version来检查 使用brew install protobuf 来…...
基于Jenkins自动打包并部署docker、PHP环境，ansible部署-------从小白到大神之路之学习运维第86天
第四阶段提升 时 间：2023年8月23日 参加人：全班人员 内 容： 基于Jenkins部署docker、PHP环境 目录 一、环境部署 （一）实验环境，服务器设置 （二）所有主机关闭防火墙和selinu…...
【附安装包】Midas Civil2019安装教程
软件下载 软件：Midas Civil版本：2019语言：简体中文大小：868.36M安装环境：Win11/Win10/Win8/Win7硬件要求：CPU2.5GHz 内存4G(或更高）下载通道①百度网盘丨64位下载链接：https://pan.…...
Apache StreamPark系列教程第一篇——安装和体验
一、StreamPark介绍 实时即未来,在实时处理流域 Apache Spark 和 Apache Flink 是一个伟大的进步,尤其是Apache Flink被普遍认为是下一代大数据流计算引擎, 我们在使用 Flink & Spark 时发现从编程模型, 启动配置到运维管理都有很多可以抽象共用的地方, 我们将一些好的经验…...
mysql replace insert update delete
目录 mysql replace && insert && update && delete replace mysql replace && insert && update && delete replace 我们在使用数据库时可能会经常遇到这种情况。如果一个表在一个字段上建立了唯一索引，当我们再向…...
实现SSM简易商城项目的商品查询功能
实现SSM简易商城项目的商品查询功能 介绍 在SSM（SpringSpringMVCMyBatis）框架下，我们可以轻松地实现一个简易商城项目。本博客将重点介绍如何实现商品查询功能，帮助读者了解并掌握该功能的开发过程。 步骤 1. 创建数据库表 首…...
视频批量剪辑矩阵分发系统源码开源分享----基于PHP语言
批量剪辑视频矩阵分发： 短视频seo主要基于抖音短视频平台，为企业实现多账号管理，视频分发，视频批量剪辑，抖音小程序搭建，企业私域转化等，本文主要介绍短视频矩阵系统抖音小程序开发详细及注意事…...
亚信科技AntDB数据库通过GB 18030-2022最高实现级别认证，荣膺首批通过该认证的产品之列
近日，亚信科技AntDB数据库通过GB 18030-2022《信息技术 中文编码字符集》最高实现级别（级别3）检测认证，成为首批通过该认证的数据库产品之一。 图1：AntDB通过GB 18030-2022最高实现级别认证 GB 18030《信息技术 中文编…...
第11章 优化多线程应用程序
对软件来说，为持续增长的CPU核数做好准备，对应用程序在未来的成功至关重要。 11.1 性能扩展和开销 通过可伸缩定律将计算单元（线程）之间的通信描述为影响性能的另一个门控因素。通用可伸缩定律描述性能劣化由多个因素导致&#…...
分布式下的session共享问题
首页我们确定在分布式的情况下session是不能共享的。 1.不同的服务，session不能共享，也就是微服务的情况下 2.同一服务在分布式情况，session同样不能共享，也会是分布式情况 分布式下session共享问题解决方案(域名相同) 1.session复…...
webrtc的Sdp中的Plan-b和UnifiedPlan
在一些类似于视频会议场景下，媒体会话参与者需要接收或者发送多个流，例如一个源端，同时发送多个左右音轨的音频，或者多个摄像头的视频流；在2013年，提出了2个不同的SDP IETF草案Plan B和Unified Plan&#x…...
LLM-Rec:基于提示大语言模型的个性化推荐
1. 基本信息 论文题目:LLM-Rec: Personalized Recommendation via Prompting Large Language Models 作者:Hanjia Lyu, Song Jiang, Hanqing Zeng, Yinglong Xia, Jiebo Luo 机构:University of Rochester, University of California Los Angeles, Meta AI, University of Ro…...
microsoft -en - us 无法卸载
因为office2013 有漏洞，要进行升级，弄了个office2016，提示无法安装， microsoft visio -en - us 即点即用的存在。点击各种卸载，都无法生效。 再去搜了下软件使用评论，里面提到geek 可以卸载，下…...
day43参与通信的服务器
1.题目描述 这里有一幅服务器分布图，服务器的位置标识在 m * n 的整数矩阵网格 grid 中，1 表示单元格上有服务器，0 表示没有。 如果两台服务器位于同一行或者同一列，我们就认为它们之间可以进行通信。 请你统计并返回能够与至少…...
K8S如何部署ZooKeeper以及如何进行ZooKeeper的平滑替换
前言 在之前的章节中，我们已经成功地将Dubbo项目迁移到了云环境。在这个过程中，我们选择了单机ZooKeeper作为注册中心。接下来，我们将探讨如何将单机ZooKeeper部署到云端，以及在上云过程中可能遇到的问题及解决方案。 ZooKeeper…...
办公空间设计案例ppt免费/淄博seo网站推广
function GetQueryString(param) {var reg new RegExp("(^|&)" param "([^&]*)(&|$)");var r window.location.search.substr(1).match(reg);if (r ! null)return decodeURI(r[2]);return null; }...
天津中小企业网站制作/网页搜索关键字
本文主要介绍Treble架构下的HAL&HIDL&Binder相关技术原理。Treble的详细资料文档，请参考Treble 官方文档。 1. Treble 简介 Android 8.0 版本的一项新元素是 Project Treble。这是 Android 操作系统框架在架构方面的一项重大改变，旨在让制造商…...
正规的网店平台有哪些/网站如何提升seo排名
torch.manual_seed(seed)设定生成随机数的种子，并返回一个torch._C.Generator对象，参数：seed(int or long):种子。torch.initial_seed()返回生成随机数的原始种子值（python long）。torch.get_rng_state() 返回随机生成…...
阳谷网站建设/近日发生的重大新闻
Java实现UDP之Echo客户端和服务端 代码内容 采用UDP协议编写服务器端代码(端口任意)编写客户机的代码访问该端口客户机按行输入服务器将收到的字符流和接收到的时间输出在服务器console原样返回给客户机在客户机console显示出来代码实现 /* UDPEchoClient.java */ import java.…...
视频的网站自助建站/广州做seo的公司
part 1--入门：1. xcode 版本下载 以及 iphone sdk 下载：最新版本在此下载：http://developer.apple.com/devcenter/ios/index.action其他版本请看http://connect.apple.com/cgi-bin ... 1.0.1.1.0.3.3.3.3.12. 入门教程：http://www…...
还有哪些网站可以做淘宝活动吗/深圳网站设计公司
使用RMAN备份与恢复数据库（2）——参数文件的备份与恢复 Oracle有两类参数文件： （1）pfile：文本格式的参数文件，文件名通常为init.ora； （2）spfile：…...