当前位置： 首页 > news >正文

chatGPT界面

news 2026/3/27 23:43:49

效果图：

代码：

<!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界面

效果图&#xff1a; 代码&#xff1a; <!DOCTYPE html> <html> <head><title>复选框样式示例</title> </head> <style>* {padding:0;margin: 0;}.chatpdf{display: flex;height: 100vh;flex-direction: row;}.chatpdf .pannel{widt…...

编程日记 2023/8/24 9:03:42

windows一键启动jupyter

windows一键启动jupyter jupyter简介 Jupyter是一个开源的交互式计算环境&#xff0c;主要用于数据分析、数据可视化和科学计算。它的名字来源于三种编程语言的缩写&#xff1a;Julia、Python和R&#xff0c;这三种语言都可以在Jupyter环境中运行。如果您想进行数据分析、科学…...

编程日记 2023/8/24 9:02:41

树形结构的快速生成

背景 相信大家都遇到过树形结构&#xff0c;像是文件列表、多级菜单、评论区的设计等等&#xff0c;我们都发现它有很多层级&#xff0c;第一级可以有多个&#xff0c;下边的每一个层级也可以有多个&#xff1b;有的可以设计成无限层级的&#xff0c;有的只能设计成两级。那么…...

编程日记 2023/8/24 9:01:38

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…...

编程日记 2023/8/24 9:00:36

css实现文字的渐变，适合大屏

1 在全局写一个全局样式&#xff0c;文字渐变 2 在组件中使用 CSS3利用-webkit-background-clip: text;实现文字渐变效果_css如何把盒子底部的文字变成透明渐变_I俩月亮的博客-CSDN博客 CSS 如何实现文字渐变色 &#xff1f;_css字体颜色渐变_一个水瓶座程序猿.的博客-CSDN博客…...

编程日记 2023/8/24 8:59:35

软考高级系统架构设计师系列论文八十七：论企业应用集成

软考高级系统架构设计师系列论文八十七：论企业应用集成 一、企业应用集成相关知识点二、摘要三、正文四、总结一、企业应用集成相关知识点 软考高级系统架构设计师系列之：企业集成平台技术的应用和架构设计二、摘要 本文讨论了某公司的应用系统集成项目。某公司为了应对市场变…...

编程日记 2023/8/24 8:58:34

C++设计模式之适配器模式

一、适配器模式 适配器模式&#xff08;Adapter Pattern&#xff09;是一种结构型设计模式&#xff0c;用于将一个类的接口转换成另一个类所期望的接口&#xff0c;以便两个类能够协同工作。 适配器模式可以解决现有类接口与所需接口不匹配的问题&#xff0c;使得原本因接口不…...

编程日记 2023/8/24 8:57:33

山西电力市场日前价格预测【2023-08-24】

日前价格预测 预测明日&#xff08;2023-08-24&#xff09;山西电力市场全天平均日前电价为319.98元/MWh。其中&#xff0c;最高日前电价为370.78元/MWh&#xff0c;预计出现在19: 30。最低日前电价为272.42元/MWh&#xff0c;预计出现在12: 45。 价差方向预测 1&#xff1a; 实…...

编程日记 2023/8/24 8:56:32

一文速学-让神经网络不再神秘，一天速学神经网络基础（一）

前言 思索了很久到底要不要出深度学习内容&#xff0c;毕竟在数学建模专栏里边的机器学习内容还有一大半算法没有更新&#xff0c;很多坑都没有填满&#xff0c;而且现在深度学习的文章和学习课程都十分的多&#xff0c;我考虑了很久决定还是得出神经网络系列文章&#xff0c;…...

编程日记 2023/8/24 8:55:30

百度Q2财报：营收341亿元实现加速增长，净利润高速增长44%，增长强劲全线重构

北京时间8月22日&#xff0c;百度发布了截至2023年6月30日的第二季度未经审计的财务报告。第二季度&#xff0c;百度实现营收341亿元&#xff0c;同比增长15%&#xff1b;归属百度的净利润&#xff08;non-GAAP&#xff09;达到80亿元&#xff0c;同比增长44%。营收和利润双双实…...

编程日记 2023/8/24 8:54:30

ARM DIY（二）配置晶振频率

文章目录 前言串口乱码问题定位内核修改晶振频率uboot 修改晶振频率番外篇 前言 上篇文章《ARM DIY 硬件调试》介绍了 DIY ARM 板的基础硬件焊接&#xff0c;包括电源、SOC、SD 卡座等&#xff0c;板子已经可以跑起来了。 但是发现串口乱码&#xff0c;今天就来解决串口乱码问…...

编程日记 2023/8/24 8:53:29

高等数学：线性代数-第三章

文章目录 第3章 矩阵的初等变换与线性方程组3.1 矩阵的初等变换3.2 矩阵的秩3.3 方程组的解 第3章 矩阵的初等变换与线性方程组 3.1 矩阵的初等变换 矩阵的初等变换 下面三种变换称为矩阵的初等变换 对换两行&#xff08;列&#xff09;&#xff0c;记作 r i ↔ r j ( c i …...

编程日记 2023/8/24 8:52:25

深入理解 SQL 注入攻击原理与防御措施

系列文章目录 文章目录 系列文章目录前言一、SQL 注入的原理二、防御 SQL 注入攻击的措施1. 使用参数化查询2.输入验证与过滤3.最小权限原则4.不要动态拼接 SQL5.ORM 框架6.转义特殊字符三、实例演示总结前言 SQL 注入是一种常见的网络攻击方式，攻击者通过在输入框等用户交互…...

编程日记 2023/8/24 8:51:24

QT5.12.12通过ODBC连接到GBase 8s数据库（CentOS）

本示例使用的环境如下&#xff1a; 硬件平台&#xff1a;x86_64&#xff08;amd64&#xff09;操作系统&#xff1a;CentOS 7.8 2003数据库版本&#xff08;含CSDK&#xff09;&#xff1a;GBase 8s V8.8 3.0.0_1 为什么使用QT 5.12.10&#xff1f;该版本包含QODBC。 1&#…...

编程日记 2023/8/24 8:50:21

爱校对发布全新PDF校对工具，为用户带来更为便捷的校正体验

随着数字化文档使用的普及&#xff0c;PDF格式已经成为最为广泛使用的文件格式之一。为满足广大用户对于高效、准确PDF文档校对的需求&#xff0c;爱校对团队经过深入研发&#xff0c;正式推出全新的PDF校对工具&#xff01; 这一全新工具针对PDF文件格式进行了深度优化&#…...

编程日记 2023/8/24 8:49:20

记录protocol buffers Mac安装

使用brew安装最新的protobuf 在Mac 上安装&#xff0c;使用brew 可以安装最新的protobuf。这个也比较简单&#xff0c;简单说一下。 首先先检查一下是否安装了brew。如果没有安装brew的话&#xff0c;请先安装brew.可以通过brew --version来检查 使用brew install protobuf 来…...

编程日记 2023/8/24 8:48:19

基于Jenkins自动打包并部署docker、PHP环境，ansible部署-------从小白到大神之路之学习运维第86天

第四阶段提升 时 间&#xff1a;2023年8月23日 参加人&#xff1a;全班人员 内 容&#xff1a; 基于Jenkins部署docker、PHP环境 目录 一、环境部署 &#xff08;一&#xff09;实验环境&#xff0c;服务器设置 &#xff08;二&#xff09;所有主机关闭防火墙和selinu…...

编程日记 2023/8/24 8:47:18

【附安装包】Midas Civil2019安装教程

软件下载 软件&#xff1a;Midas Civil版本&#xff1a;2019语言&#xff1a;简体中文大小&#xff1a;868.36M安装环境&#xff1a;Win11/Win10/Win8/Win7硬件要求&#xff1a;CPU2.5GHz 内存4G(或更高&#xff09;下载通道①百度网盘丨64位下载链接&#xff1a;https://pan.…...

编程日记 2023/8/24 8:46:16

Apache StreamPark系列教程第一篇——安装和体验

一、StreamPark介绍 实时即未来,在实时处理流域 Apache Spark 和 Apache Flink 是一个伟大的进步,尤其是Apache Flink被普遍认为是下一代大数据流计算引擎, 我们在使用 Flink & Spark 时发现从编程模型, 启动配置到运维管理都有很多可以抽象共用的地方, 我们将一些好的经验…...

编程日记 2023/8/24 8:45:14

mysql replace insert update delete

目录 mysql replace && insert && update && delete replace mysql replace && insert && update && delete replace 我们在使用数据库时可能会经常遇到这种情况。如果一个表在一个字段上建立了唯一索引&#xff0c;当我们再向…...

编程日记 2023/8/24 8:44:13

Java面向对象实战：从0到1手写奇偶判断工具类[特殊字符]新手保姆级教程

&#x1f338;你好呀&#xff01;我是断弦承露&#x1f31f;感谢陪伴&#xff5e; 小白博主在线求友&#x1f33f; 跟着小白学/Java/软件设计/鸿蒙开发/芯片开发&#x1f4d6;专栏汇总&#xff1a;《软件设计师》专栏 | 《Java》专栏 | 《 RISC-V 处理器实战》专栏 | 《Flutter…...

编程新知 2026/3/27 23:42:48

OpCore-Simplify：终极OpenCore EFI配置自动化解决方案

OpCore-Simplify&#xff1a;终极OpenCore EFI配置自动化解决方案 【免费下载链接】OpCore-Simplify A tool designed to simplify the creation of OpenCore EFI 项目地址: https://gitcode.com/GitHub_Trending/op/OpCore-Simplify 还在为复杂的黑苹果配置而烦恼吗&am…...

编程新知 2026/3/27 23:16:37

掌握Web AR开发：从痛点到实战的AR.js技术指南

掌握Web AR开发&#xff1a;从痛点到实战的AR.js技术指南 【免费下载链接】AR.js Image tracking, Location Based AR, Marker tracking. All on the Web. 项目地址: https://gitcode.com/gh_mirrors/arj/AR.js Web AR开发痛点与解决方案 开发增强现实应用时&#xff0…...

编程新知 2026/3/27 22:18:10

避坑指南：如何在torch 2.4.0 + CUDA 12.1环境下成功安装llamafactory及其依赖

深度避坑&#xff1a;PyTorch 2.4.0与CUDA 12.1环境下的Llamafactory全栈部署实战 当开发者尝试在PyTorch 2.4.0和CUDA 12.1环境下部署Llamafactory时&#xff0c;往往会陷入依赖地狱——从Torch版本误装到vllm模块缺失&#xff0c;每个环节都可能成为耗时数小时的深坑。本文将…...

编程新知 2026/3/27 21:39:57

PyFluent：重构CFD仿真流程的技术赋能与效能跃迁

PyFluent&#xff1a;重构CFD仿真流程的技术赋能与效能跃迁 【免费下载链接】pyfluent 项目地址: https://gitcode.com/gh_mirrors/pyf/pyfluent 在现代工程仿真领域&#xff0c;计算流体动力学&#xff08;CFD&#xff09;技术正经历着从手动操作向自动化流程的深刻转…...

编程新知 2026/3/27 21:27:50

ECharts Gallery弃用后，这4个替代网站让你轻松搞定数据可视化（附优缺点对比）

ECharts Gallery弃用后&#xff0c;这4个专业级替代方案深度评测 当ECharts官方Gallery宣布停止维护时&#xff0c;许多数据可视化开发者突然失去了一个重要的灵感来源和代码参考平台。作为国内最流行的可视化库之一&#xff0c;ECharts的生态系统中其实还隐藏着多个高质量的替…...

编程新知 2026/3/27 20:57:42

避坑指南：电商评论情感分析中常见的5大误区与解决方案

避坑指南&#xff1a;电商评论情感分析中常见的5大误区与解决方案 当你在深夜盯着屏幕上一堆杂乱无章的电商评论数据时&#xff0c;是否曾怀疑过自己的情感分析模型在"说谎"&#xff1f;那些看似完美的准确率数字背后&#xff0c;可能隐藏着连老手都会踩中的陷阱。本…...

编程新知 2026/3/27 20:55:42

OpenClaw办公自动化：GLM-4.7-Flash处理Excel与PDF文档

OpenClaw办公自动化&#xff1a;GLM-4.7-Flash处理Excel与PDF文档 1. 为什么需要AI处理办公文档&#xff1f; 上周五下午5点&#xff0c;我正对着电脑屏幕发愁——市场部发来的20份PDF调研报告需要提取关键数据&#xff0c;财务部的季度Excel报表等着合并分析&#xff0c;而我…...

编程新知 2026/3/27 20:41:37

告别‘阴阳屏’：深入MTK平台PQ底层，教你用代码实现多供应商屏幕色彩统一

MTK平台屏幕色彩统一实战&#xff1a;从Gamma参数调试到自动化加载 当你的项目同时采用三家不同供应商的屏幕模组时&#xff0c;用户滑动屏幕时可能看到三种截然不同的白色——这种"阴阳屏"现象在硬件采购多元化的今天越来越普遍。作为深耕显示领域多年的工程师&…...

编程新知 2026/3/27 19:36:58

[路径保护]解决中文路径乱码：从名称错乱到Unicode支持的实践指南

[路径保护]解决中文路径乱码&#xff1a;从名称错乱到Unicode支持的实践指南 【免费下载链接】calibre-do-not-translate-my-path Switch my calibre library from ascii path to plain Unicode path. 将我的书库从拼音目录切换至非纯英文&#xff08;中文&#xff09;命名 项…...

编程新知 2026/3/27 18:56:48