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 我们在使用数据库时可能会经常遇到这种情况。如果一个表在一个字段上建立了唯一索引,当我们再向…...

XML Group端口详解
在XML数据映射过程中,经常需要对数据进行分组聚合操作。例如,当处理包含多个物料明细的XML文件时,可能需要将相同物料号的明细归为一组,或对相同物料号的数量进行求和计算。传统实现方式通常需要编写脚本代码,增加了开…...
Python爬虫实战:研究MechanicalSoup库相关技术
一、MechanicalSoup 库概述 1.1 库简介 MechanicalSoup 是一个 Python 库,专为自动化交互网站而设计。它结合了 requests 的 HTTP 请求能力和 BeautifulSoup 的 HTML 解析能力,提供了直观的 API,让我们可以像人类用户一样浏览网页、填写表单和提交请求。 1.2 主要功能特点…...

CTF show Web 红包题第六弹
提示 1.不是SQL注入 2.需要找关键源码 思路 进入页面发现是一个登录框,很难让人不联想到SQL注入,但提示都说了不是SQL注入,所以就不往这方面想了 先查看一下网页源码,发现一段JavaScript代码,有一个关键类ctfs…...

阿里云ACP云计算备考笔记 (5)——弹性伸缩
目录 第一章 概述 第二章 弹性伸缩简介 1、弹性伸缩 2、垂直伸缩 3、优势 4、应用场景 ① 无规律的业务量波动 ② 有规律的业务量波动 ③ 无明显业务量波动 ④ 混合型业务 ⑤ 消息通知 ⑥ 生命周期挂钩 ⑦ 自定义方式 ⑧ 滚的升级 5、使用限制 第三章 主要定义 …...

以下是对华为 HarmonyOS NETX 5属性动画(ArkTS)文档的结构化整理,通过层级标题、表格和代码块提升可读性:
一、属性动画概述NETX 作用:实现组件通用属性的渐变过渡效果,提升用户体验。支持属性:width、height、backgroundColor、opacity、scale、rotate、translate等。注意事项: 布局类属性(如宽高)变化时&#…...
前端倒计时误差!
提示:记录工作中遇到的需求及解决办法 文章目录 前言一、误差从何而来?二、五大解决方案1. 动态校准法(基础版)2. Web Worker 计时3. 服务器时间同步4. Performance API 高精度计时5. 页面可见性API优化三、生产环境最佳实践四、终极解决方案架构前言 前几天听说公司某个项…...

PPT|230页| 制造集团企业供应链端到端的数字化解决方案:从需求到结算的全链路业务闭环构建
制造业采购供应链管理是企业运营的核心环节,供应链协同管理在供应链上下游企业之间建立紧密的合作关系,通过信息共享、资源整合、业务协同等方式,实现供应链的全面管理和优化,提高供应链的效率和透明度,降低供应链的成…...
linux 下常用变更-8
1、删除普通用户 查询用户初始UID和GIDls -l /home/ ###家目录中查看UID cat /etc/group ###此文件查看GID删除用户1.编辑文件 /etc/passwd 找到对应的行,YW343:x:0:0::/home/YW343:/bin/bash 2.将标红的位置修改为用户对应初始UID和GID: YW3…...

用docker来安装部署freeswitch记录
今天刚才测试一个callcenter的项目,所以尝试安装freeswitch 1、使用轩辕镜像 - 中国开发者首选的专业 Docker 镜像加速服务平台 编辑下面/etc/docker/daemon.json文件为 {"registry-mirrors": ["https://docker.xuanyuan.me"] }同时可以进入轩…...

第 86 场周赛:矩阵中的幻方、钥匙和房间、将数组拆分成斐波那契序列、猜猜这个单词
Q1、[中等] 矩阵中的幻方 1、题目描述 3 x 3 的幻方是一个填充有 从 1 到 9 的不同数字的 3 x 3 矩阵,其中每行,每列以及两条对角线上的各数之和都相等。 给定一个由整数组成的row x col 的 grid,其中有多少个 3 3 的 “幻方” 子矩阵&am…...