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

实现chatGPT 聊天样式

news 2025/10/31 1:14:56

效果图在这里插入图片描述
代码：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Chat Example</title><link rel="stylesheet" href="./highlight/default.min.css"><script src="./highlight/highlight.min.js"></script><script src="./marked/marked.min.js"></script></head><body><div class="title"><span> 软件部测试，后端大模型使用claude2。计划接入gpt4</span></div><div id="chat-container"><div id="chat-messages"></div></div><div class="message-input-wrapper"><textarea type="text" id="message-input" placeholder="请输入您的内容"></textarea><div id="send-button">发送</div></div><script>console.log(window)// 获取需要的DOM元素const chatMessages = document.getElementById("chat-messages");const messageInput = document.getElementById("message-input");const sendButton = document.getElementById("send-button");// formateMarkdown("# Hello World")// 定义发送消息的函数function sendMessage() {const message = messageInput.value;if (message.trim() === "") {return;}// 创建一个新的消息元素，并添加到聊天框let messageElement = `<div class="flex-right"><div class="time-remark-wrapper mr10"><span class="time">${getNowTime()}</span><div class="message user-message" style="display: inline-block;">${message}</div></div><img src="./images/avatar.jpeg" class="avatar"/></div>`chatMessages.innerHTML += messageElement;messageInput.value = "";// 发送消息到服务器sendToServer(message);}function getNowTime() {var currentTime = new Date();var year = currentTime.getFullYear();var month = currentTime.getMonth() + 1; // 月份从 0 开始，所以要加 1var day = currentTime.getDate();var hours = currentTime.getHours();var minutes = currentTime.getMinutes();var seconds = currentTime.getSeconds();// 格式化为两位数if (month < 10) {month = '0' + month;}if (day < 10) {day = '0' + day;}if (hours < 10) {hours = '0' + hours;}if (minutes < 10) {minutes = '0' + minutes;}if (seconds < 10) {seconds = '0' + seconds;}var formattedTime = year + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ':' + seconds;return formattedTime;}function formateMarkdown(message) {var renderer = new marked.Renderer();renderer.code = function (code, language) {var highlightedCode = hljs.highlightAuto(code).value;return '<pre><code class="hljs ' + language + '">' + highlightedCode + '</code></pre>';};marked.setOptions({renderer: renderer,gfm: true,tables: true,breaks: true,pedantic: false,sanitize: false,smartLists: true,smartypants: false,})var parsedHTML = marked.parse(message);let messageHTML = ` <div class="flex-left"><img src="./images/chatGPT.png" class="avatar mr10"/><div class="time-remark-wrapper"><span class="time">${getNowTime()}</span><div class="message bot-message" style="display: inline-block;">${parsedHTML}</div></div></div>`chatMessages.innerHTML += messageHTML;}// 定义发送消息到服务器的函数function sendToServer(message) {// formateMarkdown(//     '好的,下面是用javascript实现冒泡排序的代码:\n\n```js\nfunction bubbleSort(arr) {\n  const len = arr.length;\n  for (let i = 0; i &lt; len; i++) {\n    for (let j = 0; j &lt; len - 1 - i; j++) {\n      if (arr[j] &gt; arr[j+1]) {\n        // 相邻元素两两对比\n        [arr[j], arr[j+1]] = [arr[j+1], arr[j]]; // 交换两个元素\n      } \n    }\n  }\n  return arr;\n}\n\n// 测试\nconst arr = [5, 4, 3, 2, 1];\nconsole.log(bubbleSort(arr)); // [1, 2, 3, 4, 5]\n```\n\n主要思路是:\n\n1. 从第一个元素开始,依次与后面的元素进行两两比较\n2. 如果顺序相反,则交换两个元素的位置\n3. 一轮比较下来,可以保证最后一个元素是最大的\n4. 下一轮继续比较到倒数第二个元素,以此类推\n5. 直到数组有序\n\n冒泡排序的时间复杂度为 O(n^2),是一种简单但不是很高效的排序算法。"'// )// 使用AJAX发送POST请求const xhr = new XMLHttpRequest();xhr.open("POST", "/chat", true);xhr.setRequestHeader("Content-Type", "application/json");xhr.onreadystatechange = function () {if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {try {// 解析服务器响应const response = JSON.parse(xhr.responseText);// 提取服务器回复的消息const botMessage = response.msg;// 创建回复消息的元素，并添加到聊天框formateMarkdown(botMessage);} catch (error) {console.error("Error parsing JSON response:", error);}}};xhr.send(JSON.stringify({message}));}// 绑定发送按钮的点击事件sendButton.addEventListener("click", sendMessage);</script><style>body {font-size: 14px;}html,body {width: 100%;height: 100%;padding: 0;margin: 0;display: flex;flex-direction: column;align-items: center;}.time-remark-wrapper {display: flex;flex-direction: column;}.mr10 {margin-right: 10px;}.time {color: rgba(180, 187, 196);font-size: 12px;margin-bottom: 5px;}.title {display: flex;justify-content: center;text-align: center;font-size: 16px;padding: 15px;}#chat-messages {padding: 30px;}#chat-container {width: 1000px;margin: 0 auto;border-width: 1px;border-style: solid;border-color: #e5e7eb;border-radius: 8px;height: calc(100% - 150px);box-sizing: content-box;position: relative;overflow: auto;}.message-input-wrapper {position: fixed;bottom: 20px;display: flex;align-items: center;max-width: 1280px;margin: 0 auto;width: 1000px;/* background-color: #fff; */}.flex-right .time-remark-wrapper {align-items: flex-end;}.message {padding: 8px;border-radius: 8px;}textarea:focus {outline: none;}#message-input {border: 1px solid #e5e7eb;border-top-left-radius: 4px;border-bottom-left-radius: 4px;padding: 10px;flex: 1;}#message-input>textarea {flex: 1;}.user-message {background-color: rgb(210, 249, 209);text-align: right;margin-bottom: 20px;padding: 10px 15px;}.avatar {width: 32px;height: 32px;border-radius: 50%;}.flex-right {display: flex;justify-content: end;}.flex-left {display: flex;justify-content: start;}#send-button {background: #0c7a43;color: #fff;padding: 16px 15px;border-top-right-radius: 4px;border-bottom-right-radius: 4px;cursor: pointer;}.bot-message {background-color: rgb(244, 246, 248);margin-bottom: 20px;padding: 10px 15px;}.hljs {background: #fff;border-radius: 8px;}</style>
</body></html>

实现思路：
1、因为GPT请求返回来得数据是markdown数据，主要是用marked解析markdown数据格式

marked.parse(message);

2、然后用highlight实现代码的高亮显示

https://www.jsdelivr.com/
在这里插入图片描述
最开始这里不晓得怎么引入， 然后用

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/highlight.js/styles/default.min.css">
<script src="https://cdn.jsdelivr.net/npm/highlight.js"></script>

提示没有require

然后下载了文档
在这里插入图片描述
在下载的文档中看README.md 文档
在这里插入图片描述
根据此链接，找到了正确的js文件和css样式文件

相关文章：

实现chatGPT 聊天样式

效果图 代码&#xff1a; <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>Chat Example</title&g…...

编程日记 2023/8/21 5:33:46

day9 STM32 I2C总线通信

I2C总线简介 I2C总线介绍 I2C&#xff08;Inter-Integrated Circuit&#xff09;总线&#xff08;也称IIC或I2C&#xff09;是由PHILIPS公司开发的两线式串行总线&#xff0c;用于连接微控制器及其外围设备&#xff0c;是微电子通信控制领域广泛采用的一种总线标准。 它是同步通…...

编程日记 2023/8/21 5:32:45

终极Shell：Zsh（CentOS7 安装 zsh 及 配置 Oh my zsh）

CentOS7 安装 zsh 及 配置 Oh my zsh 我们在通过Shell操作linux终端时&#xff0c;配置、颜色区分、命令提示大都达不到我们预期的效果或者操作较为繁琐。 今天就来介绍一款终极一个及其好用的类Linux系统中的终端软件,江湖称之为马车中的跑车,跑车中的飞行车,史称『终极 Shell…...

编程日记 2023/8/21 5:31:43

Redis的数据持久化

前言 本文主要介绍Redis的三种持久化方式、AOF持久化策略等 什么是持久化 持久化是指将数据在内存中的状态保存到非易失性介质&#xff08;如硬盘、固态硬盘等&#xff09;上的过程。在计算机中&#xff0c;内存中的数据属于易失性数据&#xff0c;一旦断电或重启系统&#…...

编程日记 2023/8/21 5:30:41

CSS 选择器

前言 基础选择器 以下是几种常见的基础选择器。 标签选择器&#xff1a;通过HTML标签名称选择元素。 例如&#xff1a; p {color: red; } 上述样式规则将选择所有<p>标签 &#xff0c;并将其文字颜色设置为红色。 类选择器&#xff1a;通过类名选择元素。使用类选择…...

编程日记 2023/8/21 5:29:40

上位机工作总结(2023.03-2023.08)

1.工作总结 不知不觉&#xff0c;已经从C#转为Qt开发快半年了。这半年内&#xff0c;也是学习了很多C相关的开发技能&#xff0c;同时自己的技术栈也是进一步丰富&#xff0c;以后跑路就更容易啦&#xff0c;哈哈&#xff01;自己之前就有Winform和一些简单的Qt项目实践&#…...

编程日记 2023/8/21 5:28:39

APSIM模型参数优化 批量模拟丨气象数据准备、物候发育和光合生产、物质分配与产量模拟、土壤水分平衡算法、土壤碳氮平衡模块、农田管理模块等

随着数字农业和智慧农业的发展&#xff0c;基于过程的农业生产系统模型在模拟作物对气候变化的响应与适应、农田管理优化、作物品种和株型筛选、农田固碳和温室气体排放等领域扮演着越来越重要的作用。APSIM (Agricultural Production Systems sIMulator)模型是世界知名的作物生…...

编程日记 2023/8/21 5:27:37

Azure防火墙

文章目录 什么是Azure防火墙如何部署和配置创建虚拟网络创建虚拟机创建防火墙创建路由表&#xff0c;关联子网、路由配置防火墙策略配置应用程序规则配置网络规则配置 DNAT 规则 更改 Srv-Work 网络接口的主要和辅助 DNS 地址测试防火墙 什么是Azure防火墙 Azure防火墙是一种用…...

编程日记 2023/8/21 5:26:35

【LeetCode】剑指 Offer Ⅱ 第4章：链表（9道题） -- Java Version

题库链接&#xff1a;https://leetcode.cn/problem-list/e8X3pBZi/ 类型题目解决方案双指针剑指 Offer II 021. 删除链表的倒数第 N 个结点双指针 哨兵 ⭐剑指 Offer II 022. 链表中环的入口节点&#xff08;环形链表&#xff09;双指针&#xff1a;二次相遇 ⭐剑指 Offer I…...

编程日记 2023/8/21 5:25:34

Android SDK 上手指南|| 第三章 IDE：Android Studio速览

第三章 IDE&#xff1a;Android Studio速览 Android Studio是Google官方提供的IDE&#xff0c;它是基于IntelliJ IDEA开发而来&#xff0c;用来替代Eclipse。不过目前它还属于早期版本&#xff0c;目前的版本是0.4.2&#xff0c;每个3个月发布一个版本&#xff0c;最近的版本…...

编程日记 2023/8/21 5:24:30

Vue--》打造个性化医疗服务的医院预约系统（七）完结篇

今天开始使用 vue3 + ts 搭建一个医院预约系统的前台页面，因为文章会将项目的每一个地方代码的书写都会讲解到，所以本项目会分成好几篇文章进行讲解，我会在最后一篇文章中会将项目代码开源到我的GithHub上，大家可以自行去进行下载运行，希望本文章对有帮助的朋友们能多多关…...

编程日记 2023/8/21 5:23:27

点亮一颗LED灯

TOC LED0 RCC_APB2PeriphClockCmd(RCC_APB2Periph_GPIOB,ENABLE);//使能APB2的外设时钟GPIO_InitTypeDef GPIO_Initstructure;GPIO_Initstructure.GPIO_Mode GPIO_Mode_Out_PP;//通用推挽输出GPIO_Initstructure.GPIO_Pin GPIO_Pin_5;GPIO_Initstructure.GPIO_Speed GPIO_S…...

编程日记 2023/8/21 5:22:25

SSH远程直连--------------Docker容器

文章目录 1. 下载docker镜像2. 安装ssh服务3. 本地局域网测试4. 安装cpolar5. 配置公网访问地址6. SSH公网远程连接测试7.固定连接公网地址8. SSH固定地址连接测试 在某些特殊需求下,我们想ssh直接远程连接docker 容器,下面我们介绍结合cpolar工具实现ssh远程直接连接docker容器…...

编程日记 2023/8/21 5:21:23

Python/Spring Cloud Alibaba开发--前端复习笔记（1）———— html5和css3.html基础

Python/Spring Cloud Alibaba开发–前端复习笔记&#xff08;1&#xff09;———— html5和css3.html基础 1)概述和基本结构 超文本标记语言。超文本指超链接&#xff0c;标记指的是标签。 基本结构&#xff1a; <!DOCTYPE html> 文档声明 <html lang”en”>…...

编程日记 2023/8/21 5:20:21

open cv学习 （十一）视频处理

视频处理 demo1 import cv2 # 打开笔记本内置摄像头 capture cv2.VideoCapture(0) # 笔记本内置摄像头被打开 while capture.isOpened():# 从摄像头中实时读取视频retval, image capture.read()# 在窗口中实时显示读取到的视频cv2.imshow("Video", image)# 等到用…...

编程日记 2023/8/21 5:19:20

函数栈帧理解

本文是从汇编角度来展示的函数调用&#xff0c;而且是在vs2013下根据调试展开的探究&#xff0c;其它平台在一些指令上会有点不同&#xff0c;指令不多&#xff0c;简单记忆一下即可&#xff0c;在我前些年的学习中&#xff0c;学的这几句汇编指令对我调试找错误起了不小的作用…...

编程日记 2023/8/21 5:18:19

【SA8295P 源码分析】70 - QAM8295P 原理图参考设计 之 DP、eDP 接口硬件原理分析

【SA8295P 源码分析】70 - QAM8295P 原理图参考设计 之 DP、eDP 接口硬件原理分析 一、DP 接口（Display Port）介绍二、高通参考硬件原理图分析2.1 高通 Display 接口框图介绍2.2 DP接口 Pin 定义介绍2.3 高通参考设计：DP2、DP3 硬件原理图2.4 高通参考设计：eDP0、eDP1 硬件…...

编程日记 2023/8/21 5:17:17

【CSS动画02--卡片旋转3D】

CSS动画02--卡片旋转3D 介绍代码HTMLCSS css动画02--旋转卡片3D 介绍 当鼠标移动到中间的卡片上会有随着中间的Y轴进行360的旋转&#xff0c;以下是几张图片的介绍&#xff0c;上面是鄙人自己录得一个供大家参考的小视频&#x1f92d; 代码 HTML <!DOCTYPE html>…...

编程日记 2023/8/21 5:16:16

数据结构＜树和二叉树＞顺序表存储二叉树实现堆排

✨Blog&#xff1a;&#x1f970;不会敲代码的小张:)&#x1f970; &#x1f251;推荐专栏&#xff1a;C语言&#x1f92a;、Cpp&#x1f636;‍&#x1f32b;️、数据结构初阶&#x1f480; &#x1f4bd;座右铭&#xff1a;“記住&#xff0c;每一天都是一個新的開始&#x1…...

编程日记 2023/8/21 5:15:15

理解docker命令

基础命令 帮助命令 docker --help&#xff08;帮助命令&#xff09; 用于获取某个命令的帮助信息 #命令帮助 docker 命令 --help 小技巧 换行符 \ 使用命令换符&#xff0c;可以让繁杂命令变得有条理 #命令换行&#xff0c;使用换行符 \ docker ... \... \ 镜像命令 d…...

编程日记 2023/8/21 5:14:14

RocketMQ延迟消息机制

两种延迟消息 RocketMQ中提供了两种延迟消息机制 指定固定的延迟级别 通过在Message中设定一个MessageDelayLevel参数&#xff0c;对应18个预设的延迟级别指定时间点的延迟级别 通过在Message中设定一个DeliverTimeMS指定一个Long类型表示的具体时间点。到了时间点后&#xf…...

编程新知 2025/10/30 8:11:19

Qt/C++开发监控GB28181系统/取流协议/同时支持udp/tcp被动/tcp主动

一、前言说明 在2011版本的gb28181协议中&#xff0c;拉取视频流只要求udp方式&#xff0c;从2016开始要求新增支持tcp被动和tcp主动两种方式&#xff0c;udp理论上会丢包的&#xff0c;所以实际使用过程可能会出现画面花屏的情况&#xff0c;而tcp肯定不丢包&#xff0c;起码…...

编程新知 2025/10/28 21:32:08

【力扣数据库知识手册笔记】索引

索引 索引的优缺点 优点1. 通过创建唯一性索引&#xff0c;可以保证数据库表中每一行数据的唯一性。2. 可以加快数据的检索速度&#xff08;创建索引的主要原因&#xff09;。3. 可以加速表和表之间的连接&#xff0c;实现数据的参考完整性。4. 可以在查询过程中&#xff0c;…...

编程新知 2025/10/30 16:04:20

【JVM】- 内存结构

引言 JVM&#xff1a;Java Virtual Machine 定义&#xff1a;Java虚拟机&#xff0c;Java二进制字节码的运行环境好处&#xff1a; 一次编写&#xff0c;到处运行自动内存管理&#xff0c;垃圾回收的功能数组下标越界检查&#xff08;会抛异常&#xff0c;不会覆盖到其他代码…...

编程新知 2025/10/28 21:57:50

React19源码系列之 事件插件系统

事件类别 事件类型 定义 文档 Event Event 接口表示在 EventTarget 上出现的事件。 Event - Web API | MDN UIEvent UIEvent 接口表示简单的用户界面事件。 UIEvent - Web API | MDN KeyboardEvent KeyboardEvent 对象描述了用户与键盘的交互。 KeyboardEvent - Web…...

编程新知 2025/10/26 6:16:31

ffmpeg（四）：滤镜命令

FFmpeg 的滤镜命令是用于音视频处理中的强大工具&#xff0c;可以完成剪裁、缩放、加水印、调色、合成、旋转、模糊、叠加字幕等复杂的操作。其核心语法格式一般如下&#xff1a; ffmpeg -i input.mp4 -vf "滤镜参数" output.mp4或者带音频滤镜&#xff1a; ffmpeg…...

编程新知 2025/10/16 23:42:48

Linux云原生安全：零信任架构与机密计算

Linux云原生安全&#xff1a;零信任架构与机密计算 构建坚不可摧的云原生防御体系 引言&#xff1a;云原生安全的范式革命 随着云原生技术的普及&#xff0c;安全边界正在从传统的网络边界向工作负载内部转移。Gartner预测&#xff0c;到2025年&#xff0c;零信任架构将成为超…...

编程新知 2025/8/17 17:11:47

Spring AI与Spring Modulith核心技术解析

Spring AI核心架构解析 Spring AI&#xff08;https://spring.io/projects/spring-ai&#xff09;作为Spring生态中的AI集成框架&#xff0c;其核心设计理念是通过模块化架构降低AI应用的开发复杂度。与Python生态中的LangChain/LlamaIndex等工具类似&#xff0c;但特别为多语…...

编程新知 2025/10/14 9:02:38

【碎碎念】宝可梦 Mesh GO : 基于MESH网络的口袋妖怪 宝可梦GO游戏自组网系统

目录 游戏说明《宝可梦 Mesh GO》 —— 局域宝可梦探索Pokmon GO 类游戏核心理念应用场景Mesh 特性 宝可梦玩法融合设计游戏构想要素1. 地图探索&#xff08;基于物理空间 广播范围&#xff09;2. 野生宝可梦生成与广播3. 对战系统4. 道具与通信5. 延伸玩法 安全性设计 技术选…...

编程新知 2025/10/25 21:41:56

Device Mapper 机制

Device Mapper 机制详解 Device Mapper&#xff08;简称 DM&#xff09;是 Linux 内核中的一套通用块设备映射框架&#xff0c;为 LVM、加密磁盘、RAID 等提供底层支持。本文将详细介绍 Device Mapper 的原理、实现、内核配置、常用工具、操作测试流程&#xff0c;并配以详细的…...

编程新知 2025/10/1 1:44:36