实现chatGPT 聊天样式

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

<!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样式文件

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/48090.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

SpringBoot解决mysql 连接8小时问题

SpringBoot解决mysql 连接8小时问题 问题&#xff1a; 服务连接mysql数据库&#xff0c;8小时没有数据库的操作时候&#xff0c;数据库会主动断开连接释放资源 解决办法总共4种方法 MySQL 5版本之前可以通过在URL后面加入autoReconnecttrue application.properties文件中加入…

第6天----【位运算进阶之-----位与()】七夕特别版

今天我们来学习C语言的位与。 ❤️C语言的位与&#xff08;&&#xff09;操作是一种按位运算符&#xff0c;用于对两个操作数的每个对应位执行逻辑与操作。它的操作规则如下&#xff1a; 如果两个操作数的对应位都为1&#xff0c;则结果的对应位也为1。&#xff08;全1才…

【Cadence】差分管噪声贡献差别很大的可能原因

举例&#xff1a;M2 M3是一对差分管&#xff0c;噪声贡献差别很大。 理想电感下二者贡献相同&#xff0c; 但在实际电磁仿真后&#xff0c;一个17.6%&#xff0c;一个5.6% 原因是&#xff1a; 电磁仿真存在交叉&#xff0c;不对称&#xff0c;中心抽头不是理想的交流地&#x…

初识C语言

目录 一、C语言的概念 二、第一个C语言程序 三、数据类型 四、变量和常量 4.1 变量定义方法 4.2 变量的命名 4.3 变量的分类 4.4 变量的作用域和生命周期 4.5 常量 五、字符串和转义字符 5.1 字符串 5.2 转义字符 六、注释 七、选择语句 八、循环语句 九、函数 十、数…

如何使用CSS实现一个全屏滚动效果(Fullpage Scroll)?

聚沙成塔每天进步一点点 ⭐ 专栏简介⭐ 实现全屏滚动效果的CSS和JavaScript示例⭐ HTML 结构⭐ CSS 样式 (styles.css)⭐ JavaScript 代码 (script.js)⭐ 实现说明⭐ 写在最后 ⭐ 专栏简介 前端入门之旅&#xff1a;探索Web开发的奇妙世界 记得点击上方或者右侧链接订阅本专栏哦…

node_modules.cache是什么东西

一开始没明白这是啥玩意&#xff0c;还以为是npm的属性&#xff0c;网上也没说过具体的来源出处 .cache文件的产生是由webpack4的插件cache-loader生成的&#xff0c;node_modules里下载了cache-loader插件&#xff0c;很多朋友都是vuecli工具生成的项目&#xff0c;内置了这部…

以创新点亮前路,戴尔科技开辟数实融合新格局

编辑&#xff1a;阿冒 设计&#xff1a;沐由 2023年&#xff0c;对于戴尔科技而言是特殊的一年&#xff0c;这是戴尔科技进入中国市场第25个年头——“巧合”的是&#xff0c;这25年也是中国产业经济发展最快&#xff0c;人们工作与生活发生变化最大的四分之一个世纪。 2023年&…

《Go 语言第一课》课程学习笔记(九)

常量&#xff1a;Go 在“常量”设计上的创新有哪些&#xff1f; Go 语言在常量方面的创新包括下面这几点&#xff1a; 支持无类型常量&#xff1b;支持隐式自动转型&#xff1b;可用于实现枚举。 常量 Go 语言的常量是一种在源码编译期间被创建的语法元素。这是在说这个元素…

mysql全文检索使用

数据库数据量10万左右&#xff0c;使用like %test%要耗费30秒左右&#xff0c;放弃该办法 使用mysql的全文检索 第一步:建立索引 首先修改一下设置: my.ini中ngram_token_size 1 可以通过 show variables like %token%;来查看 接下来建立索引:alter table 表名 add f…

RocketMQ与Kafka对比(18项差异)

淘宝内部的交易系统使用了淘宝自主研发的Notify消息中间件,使用MySQL作为消息存储媒介,可完全水平扩容,为了进一步降低成本,我们认为存储部分可以进一步优化,2011年初,Linkin开源了Kafka这个优秀的消息中间件,淘宝中间件团队在对Kafka做过充分Review之后,Kafka无限消息…

Python 离线环境下批量安装第三方模块

当前环境&#xff1a;Win10 x64 Python 3.7 ,准备将这些包安装到 Win7 x86 Python 3.7 机器上。 1 查看安装好 Python 后的包C:\Users\lenovo>pip list Package Version ---------- ------- pip 23.2.1 setuptools 47.1.0 wheel 0.40.02 pip 安装所需要的…

8.18 校招 内推 面经

绿泡泡&#xff1a; neituijunsir 交流裙&#xff0c;内推/实习/校招汇总表格 1、校招 | 小米集团2024届全球校园招聘正式启动&#xff08;内推&#xff09; 校招 | 小米集团2024届全球校园招聘正式启动&#xff08;内推&#xff09; 2、2023校招总结--软件测试岗位 - 2 2…

.Net程序调试时接受外部命令行参数方式

1.对项目右键&#xff0c;属性 2.在调试中打开常规&#xff0c;打开调试启动配置文件UI 3.输入需要的命令行参数

el-table数据更新了,但是展示并没有更新

这是因为有时候vue无法监听到数据的变化&#xff0c;导致数据变化但是视图没有变化 解决办法&#xff1a;&#xff08;可以从上往下一条一条进行尝试&#xff09; 法一&#xff1a;使用this.$set进行数据的更新 法二&#xff1a;在数据更新完后执行this.$forceUpdate();进行强制…

交叉编译工具链arm-linux-gnueabihf的安装-ubuntu 20.04

前面下载安装步骤参考该博主的文章 http://t.csdn.cn/ZbjFX 另&#xff1a;本人对所遇到的环境变量的配置问题作补充 1.修改环境变量 建议直接在.bashrc文件作修改 &#xff0c;修改方式相同 ( vi :视自己的编辑器而定) sudo vi ~/.bashrc 2.修改环境变量后&#xff0c;可…

网络安全领域的常见攻击方式及防御手段

目录 重放攻击&#xff08;Replay Attack&#xff09;防御手段 SQL 注入&#xff08;SQL Injection&#xff09;防御手段 跨站脚本攻击&#xff08;Cross-Site Scripting&#xff0c;XSS&#xff09;防御手段 跨站请求伪造&#xff08;Cross-Site Request Forgery&#xff0c;C…

idea 左下角的Git(Version Control)中显示Local Changes窗口

打开Local Changes窗口来查看当前Git仓库的本地变更。 使用快捷键: - Windows: Alt9 - Mac: Cmd9 解决&#xff1a; &#xff08;1&#xff09;idea打开settings &#xff08;2&#xff09;点击Version Control窗口选项卡&#xff0c;选择Commit选项&#xff0c;对 Use.... in…

springBoot防止重复提交

自定义注解AOPRedis 自定义注解 package com.wzw.config.anno;import java.lang.annotation.*;/*** 自定义注解防止表单重复提交*/ Target(ElementType.METHOD) // 注解只能用于方法 Retention(RetentionPolicy.RUNTIME) // 修饰注解的生命周期 Documented public interface …

【微服务学习笔记】认识微服务

【微服务学习笔记】认识微服务 单体架构 分布式架构 微服务架构 SpringCloud 服务拆分和注意事项 服务拆分的案例demo 各个服务之间的数据库都是相互独立的&#xff0c;你不能直接访问对方的数据库&#xff0c;只能从一个服务像另外一个服务发起远程调用 在订单模块的服务中 …

深入浅出Pytorch函数——torch.nn.Linear

分类目录&#xff1a;《深入浅出Pytorch函数》总目录 对输入数据做线性变换 y x A T b yxA^Tb yxATb 语法 torch.nn.Linear(in_features, out_features, biasTrue, deviceNone, dtypeNone)参数 in_features&#xff1a;[int] 每个输入样本的大小out_features &#xff1a;…