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

【前端】自己从头实现一个gpt聊天页面

news 来源：原创 2025/5/9 14:15:19

预览

在这里插入图片描述

最小化功能点

主界面：侧边栏会话历史、聊天窗口发送和断开。
侧边栏：展示会话列表，每个会话包含多条聊天记录，通过localstorage本地储存和恢复，会话需要重命名和删除。
聊天框：区分一下发送者和回答者的布局（对于代码可以加入高亮功能）。
流式请求对接：通过fetch读取text/oct-stream格式的请求。
历史记录：折叠gpt的回答，点击展开可弹框查看全部内容，防止页面卡顿。

gpt总结的步骤

制作一个 ChatGPT 界面涉及多个功能点和步骤，以下是一个简要的总结，涵盖了前端和后端的基本构建要求。1. 基本功能点
a. 用户输入
输入框：用户可以在文本框中输入问题或消息。
提交按钮：点击按钮提交输入，或实现键盘快捷键（例如回车键）。
b. 显示对话
消息显示区：用于展示用户和 ChatGPT 的对话内容。
滚动效果：确保聊天框可以自动滚动，显示最新消息。
c. 响应生成
ChatGPT 交互：根据用户输入，通过后端调用 OpenAI API 或类似的 AI 服务来生成回应。
异步显示：响应从 API 获取后实时更新，支持流式响应。
d. 输入和响应格式
文本和富文本：支持文本消息和可能的富文本（例如图片、链接等）。
加载指示器：当 AI 正在处理请求时，显示加载动画或提示。
e. 断开/停止功能
停止按钮：允许用户停止流式响应，关闭连接。
2. 功能细节实现步骤
a. 前端开发
UI 设计：设计清晰简洁的用户界面，包括输入框、聊天历史显示区域、发送按钮、加载指示器等。
输入框及事件监听：实现输入框，监听 enter 键或发送按钮的点击事件，将用户输入发送到后端。
显示聊天历史：使用滚动条或自动滚动功能显示聊天记录，确保对话内容实时更新。
异步请求与响应显示：通过 fetch 或 WebSocket 与后端交互，接收并显示生成的回答。
加载指示器：当请求正在处理中，显示加载指示器（例如转圈或 “typing...”）。
b. 后端开发
API 请求处理：实现一个处理前端请求的接口，接收用户消息并传递给 AI 服务。
OpenAI API 或其他聊天引擎：使用 OpenAI 的 API 或自定义 AI 模型生成响应。需要处理 API 密钥和认证。
流式响应：支持长时间的流式响应，利用 ReadableStream、WebSocket 或 Server-Sent Events (SSE) 实现实时响应。
消息缓存和处理：存储聊天历史，确保会话状态得以保留。可能需要简单的缓存机制。
断开和中断请求：实现 API 连接的中断功能（例如使用 AbortController 取消正在进行的请求），以支持停止和断开流式响应。
c. 流式响应与断开连接
前端：通过 fetch 与流数据接口交互，逐步显示响应内容。
后端：实现流式 API 响应，处理客户端请求并逐步推送数据。支持连接中断。
断开连接：通过前端按钮或事件监听来停止流式请求。确保前后端能够优雅地断开连接（例如通过 AbortController 或 WebSocket 的 close() 方法）。
3. 进阶功能（可选）
a. 身份认证和权限管理
用户身份认证：如果需要，可以添加用户身份验证功能（如 OAuth、JWT 等）。
权限控制：根据用户角色控制访问不同功能。
b. 消息翻译
语言切换：支持多语言输入和输出，自动或手动切换对话语言。
翻译功能：在不同语言环境下，自动翻译用户输入和 AI 的回应。
c. 聊天存档
历史记录：实现会话历史的保存，用户可以查看过去的聊天记录。
导出功能：提供导出聊天记录的选项（如文本文件、PDF 等）。
d. UI/UX优化
自定义主题：支持不同的主题切换（如浅色/深色模式）。
语音输入与输出：实现语音识别和语音合成功能，提升用户体验。
聊天气泡样式：美化聊天框，增强交互感。
4. 技术栈选择
a. 前端技术
HTML/CSS：用于布局和样式，确保界面简洁美观。
JavaScript/TypeScript：前端逻辑，处理用户输入、与后端交互、展示响应。
React/Vue/Angular：现代前端框架，用于构建高效的交互式应用。
WebSocket 或 Server-Sent Events (SSE)：用于实时双向通信。
b. 后端技术
Node.js + Express/Koa：用于处理 HTTP 请求，管理与 AI 服务的交互。
Python + Flask/Django：如果使用 Python 提供 AI 服务，可以选择 Flask 或 Django。
OpenAI API：与 OpenAI 的 GPT 接口交互，生成响应。
c. 其他工具
Redis：用于存储用户会话历史和缓存数据。
数据库：例如 MySQL、PostgreSQL 或 MongoDB，用于存储用户信息和聊天记录。
总结
用户界面设计：包含消息显示区、输入框、按钮和加载提示。
与后端交互：通过异步请求与 AI 服务交互，支持流式响应。
消息显示和流式响应：实时显示消息并更新 UI，支持停止和断开流式响应。
断开功能：优雅地处理连接的断开和请求的取消。
通过以上功能点和步骤，你可以实现一个基本的 ChatGPT 界面，并在此基础上进行扩展和优化。

【前端】自己从头实现一个gpt聊天页面

预览最小化功能点主界面：侧边栏会话历史、聊天窗口发送和断开。侧边栏：展示会话列表，每个会话包含多条聊天记录， 通过localstorage本地储存和恢复，会话需要重命名和删除。聊天框：区分一下发送者和回答者…...

编程日记 2025/5/9 14:15:19

浅说树形dp

文章目录前言树形dp的转移方式树形dp的使用的场景小结初步感知——简单的树形dp例题1例题2 深入分析——树形dp的经典模型最大独立集最小点覆盖最小支配集树上直径前言因为树的形式非常适合递归，他所带来的访问顺序也是非常符合拓扑排序的，故而在处…...

编程日记 2025/5/7 12:14:23

Matlab 多项式曲线拟合（三维）

文章目录一、简介二、实现代码三、实现效果参考资料一、简介对于高维空间曲线的拟合，参数化是一种非常好的方式，可以让我们很容易得到我们想要的目标曲线。假设给定一组数据点 ( u i , x i ) 、 ( u i ...

编程日记 2025/5/9 13:50:58

大语言模型推理中的显存优化有哪些

大语言模型推理中的显存优化有哪些目录大语言模型推理中的显存优化有哪些显存优化背景Offloading/Checkpoint原理举例显存优化背景在大语言模型推理时，显存是显著瓶颈。以开源的BLOOM 176B模型为例，在8张A100计算卡上，通常对话设置下仅能进行批量为10左右的推理。为缓…...

编程日记 2025/5/8 22:24:50

机器学习：k均值

所有代码和文档均在golitter/Decoding-ML-Top10: 使用 Python 优雅地实现机器学习十大经典算法。 (github.com)，欢迎查看。在“无监督学习”中，训练样本的标记信息是未知的，目标是通过对无标记训练样本的学习来揭示数据的内在性质及规律&…...

编程日记 2025/5/9 13:53:34

【图像加密解密】空间混沌序列的图像加密解密算法复现（含相关性检验）【Matlab完整源码 2期】

1、说明本文给出详细完整代码、完整的实验报告和PPT。环境：MATLAB2019a 复现文献：[1]孙福艳,吕宗旺.Digital image encryption with chaotic map lattices[J].Chinese Physics B,2011,20(04):136-142. 2、部分报告内容 3 部分源码与运行步骤 3.1 部…...

编程日记 2025/5/1 11:32:52

此为b站视频【【Unity教程】零基础带你从小白到超神】 https://www.bilibili.com/video/BV1gQ4y1e7SS/?p55&share_sourcecopy_web&vd_source6e7a3cbb802eb986578ad26fae1eeaab的笔记 1、反向动力学打开ik处理 public class PlayerMoveController : MonoBehaviour {…...

编程日记 2025/5/6 5:15:56

【2025最新版】软件测试面试题总结（150道题含答案解析）

接口测试面试题 1：你平常做接口测试的过程中发现过哪些 bug? 2：平常你是怎么测试接口的？ 3：平常用什么工具测接口? 4: webService 接口是如何测试的? 5：没有接口文档，如何做接口测试？ 6&…...

编程日记 2025/5/6 17:35:48

双轴伺服电机驱动控制器AGV、AMR专用双伺服电机驱动控制器解决方案

工业机器人数控机床XY机械手双轴机器人堆垛机专用双轴伺服电机驱动控制器48V 14ARMS带有STO功能，隔离高压CAN/RS485/USB通讯支持编码器和霍尔输入双伺服电机驱动控制器TMCM2611功能介绍集成2个伺服电机的控制和驱动于一体供电电压48V，驱动电流14A RM…...

编程日记 2025/5/3 17:23:24

知识图谱数据库 Neo4j in Docker笔记

下载 docker pull neo4j:community官方说明 https://neo4j.com/docs/operations-manual/2025.01/docker/introduction/ 启动 docker run \--restart always \--publish7474:7474 --publish7687:7687 \--env NEO4J_AUTHneo4j/your_password \--volumeD:\files\knowledgegrap…...

编程日记 2025/5/6 2:10:51

Kubernetes实战教程：基于Vue前端与Java后端的应用部署

在云原生时代，Kubernetes 已成为管理容器化应用的核心平台。本文不仅详细介绍了 Kubernetes 的背景、架构和核心特性，还将通过一个具体的案例——基于 Vue 前端和 Java 后端的应用部署，带你一步步了解如何在 Kubernetes 集群中构建和运行一个…...

编程日记 2025/5/9 13:40:33

完全数和质数算法详解

完全数是指一个正整数，它等于其所有真约数（即除了自身以外的所有正因数）之和。例如，6 是一个完全数，因为它的真约数是 1、2 和 3，且 1 2 3 6。 1 计算约数和 1.1 遍历遍历其所有可能的约数并计算它们…...

编程日记 2025/5/5 15:23:27

PHP本地商家卡券管理系统

本地商家卡券管理系统 —— 引领智慧消费新时代本地商家卡券管理系统，是基于ThinkPHPUni-appuView尖端技术匠心打造的一款微信小程序，它彻底颠覆了传统优惠方式，开创了多商家联合发行优惠卡、折扣券的全新模式，发卡类型灵活多变…...

编程日记 2025/5/9 1:46:52

使用动态规划解决 0/1 背包问题

1. 背景背包问题是计算机科学和优化领域中的经典问题之一，它被广泛应用于资源分配、任务调度等问题。在最简单的形式下，0/1背包问题描述的是：你有一个背包，能够容纳一定的重量，而你有若干个物品，每个物品都有一个重量和价值，问你应该如何选择物品，使得在不超过背包…...

编程日记 2025/5/9 13:54:24

探索Java中的集合类_特性与使用场景

1. 引言 1.1 Java集合框架概述 Java集合框架（Java Collections Framework, JCF）是Java中用于存储和操作一组对象的类和接口的统称。它提供了多种数据结构来满足不同的需求，如列表、集合、映射等。JCF的核心接口包括Collection、List、Set、Queue和Map，以及它们的各种实现…...

编程日记 2025/4/29 21:00:12

动态DNS神器nip.io使用指南：快速实现域名与IP的动态映射--告别配置本地hosts

动态DNS神器nip.io使用指南：快速实现域名与IP的动态映射--告别配置本地hosts 一、项目简介二、快速入门三、进阶配置四、典型应用场景本文基于开源项目 v1.2.1版本撰写，适用于开发测试、CI/CD等场景一、项目简介 nip.io 是由Exentrique Solutions开发…...

编程日记 2025/5/8 13:36:50

Obsidian及Zotero常用的插件

Obsidian插件 Minimal Theme Settings（Life，zotero）【必需】界面样式设置所需插件 Style Settings（Life，zotero）【必需】界面样式设置所需插件 Recent Files（Life，zotero&#xf…...

编程日记 2025/5/8 0:19:02

自学Java-面向对象高级（final、单例类、枚举类、抽象类、接口）

自学Java-面向对象高级（final、单例类、枚举类、抽象类、接口） 一、final关键字1、认识final关键字2、final修饰变量的注意3、常量二、单例类（设计模式）1、设计模式的概念2、单例设计模式3、单例类有很多形式4、懒汉式单例类5、小…...

编程日记 2025/5/4 14:00:17

数据结构与算法之排序算法-归并排序

排序算法是数据结构与算法中最基本的算法之一，其作用就是将一些可以比较大小的数据进行有规律的排序，而想要实现这种排序就拥有很多种方法~ 那么我将通过几篇文章，将排序算法中各种算法细化的，详尽的为大家呈现出来： …...

编程日记 2025/5/5 6:46:09

Springboot整合ES

添加依赖在 pom.xml 中添加以下依赖： <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-data-elasticsearch</artifactId> </dependency>配置 Elasticsearch 在 application.proper…...

编程日记 2025/5/8 13:53:54

文件夹上传到github分支最后github上面还是没有文件和文件夹

环境： github 问题描述： 文件夹上传到github分支最后github上面还是没有文件和文件夹, 和这样一样解决方案： 从 git ls-tree -r HEAD 的输出中可以看到，metahuman-stream 文件夹显示为如下内容： 160000 commi…...

编程日记 2025/5/6 22:59:47

生成式聊天机器人 -- 基于Transformer实现的SeqToSeq模型 -- 上

生成式聊天机器人 -- 基于Transformer实现的SeqToSeq模型 -- 上引言数据预处理下载并处理数据数据加载 Transformer模型嵌入层&位置编码层多头注意力机制EncoderLayerDecoderLayerPoint-wise Feed Forward NetworkTransformer 引言在此之前，我们已经了解了如…...

编程日记 2025/5/1 23:24:14

【Java 面试八股文】Spring Cloud 篇

Spring Cloud 篇 1. Spring Cloud 5大组件有哪些？2. 服务注册和发现是什么意思？Spring Cloud 如何实现服务注册发现？3. 我看你之前也用过nacos，你能说下nacos与eureka的区别？4. 你们项目负载均衡如何实现的&#xff1f…...

编程日记 2025/5/6 0:07:17

CAS单点登录（第7版）10.多因素身份验证

如有疑问，请看视频：CAS单点登录（第7版） 多因素身份验证概述多因素身份验证 （MFA） 多因素身份验证（Multifactor Authentication MFA）是一种安全机制，要求用户提供两种…...

编程日记 2025/5/8 9:25:30

【16】思科AireOS：创建使用 LWA 认证的 WLAN

1. 概述 LWA（Local Web Authentication）是一种基于 Web 认证的方式，允许无线客户端在连接 WLAN 后，使用 Web 认证页面进行身份验证。该方法适用于访客网络或需要身份认证的场景。本指南详细介绍如何在 Cisco AireOS 无线控制器（WLC）上配置 LWA 认证的 WLAN，并确保认证…...

编程日记 2025/5/4 4:56:00

webassembly009 transformers.js 网页端侧推理 whisper-web

whisper-web https://github.com/xenova/whisper-web 页面结构 AudioManager: 该组件负责音频的录制和处理。它会使用 Web API 来访问麦克风，录制音频数据，并将其传递给 transcriber 进行转录。它通过 transcriber 管理转录状态，音频数据将…...

编程日记 2025/4/25 8:13:02

vscode使用常见问题处理合集

目录一、使用vite创建的vue3项目，script和style首行代码不会缩进,且格式化属性字段等会换行问题首行缩进情况如下： 属性、参数格式化换行情况如下： 解决方式： 一、使用vite创建的vue3项目，script和style首行代码不…...

编程日记 2025/5/8 17:10:03

EasyExcel提取excel文档

目录一、前言二、提取excel文档2.1、所有sheet----获取得到headerList和总行数2.2、所有sheet----获取合并单元格信息2.3、读取某个sheet的每行数据一、前言 EasyExcel 是阿里巴巴开源的一个高性能 Excel 读写库，相比于 Apache POI 和 JXL，它有明显的优势，特别是在处理大数…...

编程日记 2025/5/9 7:49:02

DeepSeek v3 技术报告阅读笔记

注本文参考 DeepSeek-v3 / v2 / v1 Technical Report 及相关参考模型论文本文不包括基础的知识点讲解，为笔记/大纲性质而非教程，建议阅读技术报告原文交流可发送至邮箱 henryhua0721foxmail.com 架构核心核心： MLA 高效推理DeepSeekMOE 更…...

编程日记 2025/4/30 5:54:43

Python爬虫-猫眼电影的影院数据

前言本文是该专栏的第46篇，后面会持续分享python爬虫干货知识，记得关注。本文笔者以猫眼电影为例子，获取猫眼的影院相关数据。废话不多说，具体实现思路和详细逻辑，笔者将在正文结合完整代码进行详细介绍。接下来，跟着笔者直接往下看正文详细内容。（附带完整代码） …...

编程日记 2025/5/6 17:48:30

每天五分钟深度学习框架pytorch：搭建谷歌的Inception网络模块

本文重点前面我们学习了VGG，从现在开始我们将学习谷歌公司推出的GoogLeNet。当年ImageNet竞赛的第二名是VGG，而第一名就是GoogLeNet,它的模型设计拥有很多的技巧，这个model证明了一件事：用更多的卷积，更深的层次可以得到更好的结构 GoogLeNet的网络结构如图所示就是Go…...

编程日记 2025/5/4 11:13:08

export default与export区别

1.定义： export default‌：用于导出模块中的默认成员。一个模块中只能有一个export default，通常用于导出模块的主要功能或对象。导入时可以使用任意名称，因为它没有具体的名称‌ ‌export‌：用于导出模块中的多个成…...

编程日记 2025/5/1 11:34:50

当Ollama遇上划词翻译：我的Windows本地AI服务搭建日记

🚀 实现Windows本地大模型翻译服务 - 基于OllamaFlask的划词翻译实践 🛠️ 步骤概要1️⃣ python 环境准备2️⃣ Ollama 安装3️⃣ 一个 Flask 服务4️⃣ Windows 服务化封装5️⃣ 测试本地接口6️⃣ 配置划词翻译自定义翻译源7️⃣ 效果展示8️⃣ debug…...

编程日记 2025/5/8 20:34:44

5G与物联网的协同发展：打造智能城市的未来

引言随着科技的不断进步，智能城市的概念已经不再是科幻小说中的幻想，它正在逐步走进我们的生活。而这背后的两大驱动力无疑是 5G和物联网（IoT）。5G网络以其高速率、低延迟、大容量的优势，与物联网的强大连接能力相结…...

编程日记 2025/4/29 1:29:30

并发编程---synchronized关键字，以及synchronized同步锁

文章目录 Synchronized 的使用synchronized 在普通方法上的使用（对象锁）synchronized 在静态方法上的使用（类锁）synchronized 在代码块上的使用 JVM 中锁的优化锁的类型自旋锁与自适应自旋锁自旋锁（Spin Lock&#xff…...

编程日记 2025/5/4 17:53:43

Vue学习笔记5（Vue3）

Vue3学习笔记一、create-vue搭建vue3项目 create-vue是vue官方新的脚手架工具，底层切换到了vite 步骤： 查看环境条件 node -v版本需要在16.0及以上创建一个vue应用 npm init vuelatest 这一指令会安装并执行create-vue 二、项目目录和关键文件 in…...

编程日记 2025/5/5 4:45:58

VoIP之音视频会议中的混音技术

在VoIP音视频会议中，需要将多路参会方音频流混合成一路音频流再发送给各参会方，以达到参会方可以听到每个与会人声音的目的，这种技术叫混音。一、混音基础原理在实际生活中，我们所处的生活和工作环境就是一个自然的混音场&…...

编程日记 2025/5/2 23:42:55

Baklib一站式云平台：全场景赋能企业知识资产激活

内容概要在数字化浪潮推动下，企业知识资产的高效管理与价值释放成为核心议题。Baklib作为一站式云平台，以全场景赋能为核心定位，通过构建知识中台架构，为企业提供从资源整合到应用落地的闭环解决方案。该平台不仅支持文本、图像…...

编程日记 2025/5/2 10:56:19

基于nuScenes数据集和DeepSeek模型的端到端自动驾驶解决方案

结合DeepSeek模型进行知识蒸馏，以提高模型性能。这需要将nuScenes中的多模态数据（如摄像头图像、雷达点云、车辆状态等）整合到模型中，同时使用DeepSeek的生成能力进行蒸馏。接下来，我需要考虑用户可能的背景。用户可能…...

编程日记 2025/5/4 3:52:32

《AI大模型开发笔记》deepseek提示词技巧

为什么你的 AI 助手总是答非所问？ 「写篇产品分析」 → 收到一堆不知所云的文字「做个竞品对比」 → 得到几页没有重点的废话揭秘：不是 AI 不够聪明，而是你的指令太“高冷”！ 一、新手进阶： 5 大法则，让…...

编程日记 2025/5/6 1:55:16

学习笔记-人脸识别相关编程基础

通过编程实现人脸识别功能，需要掌握一定的技术基础，包括编程语言、图像处理、机器学习以及相关的库和框架： 1. 编程语言 Python：Python 是实现人脸识别最常用的语言之一，因为它有大量的库和框架支持，如 Op…...

编程日记 2025/5/5 12:42:41

Java发展史

JavaEE的由来语言的诞生 Java的前身是Oak语言，其目的是搞嵌入式开发开发智能面包机叮~~~🍞🍞🍞 产品以失败告终巅峰网景公司需要网景浏览器打开网页，Oak->Java，进行前端开发（相关技…...

编程日记 2025/5/2 10:13:50

SAP-ABAP：SAP中REPORT程序和online程序的区别对比

在SAP中，REPORT程序和Online程序（通常指Dialog程序）是两种常见的ABAP程序类型，它们在用途、结构和用户交互方式上有显著区别。以下是它们的详细对比： 1. 用途 REPORT程序Online程序主要用于数据查询、报表生成和批量数…...

编程日记 2025/5/7 5:55:25

【第2章：神经网络基础与实现——2.1 前馈神经网络的结构与工作原理】

老铁们好！今天我们要来一场长达两万字的超详细技术探险，我会像拆解乐高积木一样把前馈神经网络（Feedforward Neural Network）的每个零件摆在台面上，用最接地气的方式让你彻底搞懂这个深度学习基石的工作原理。准备好了吗？我们开始吧！第一章：神经网络的 “乐高积木” 1…...

编程日记 2025/5/6 0:14:17

Pythong 解决Pycharm 运行太慢

Pythong 解决Pycharm 运行太慢官方给Pycharm自身占用的最大内存设低估了限制,我的Pycharm刚开始默认是256mb。首先找到自己的Pycharm安装目录根据合适自己的改保存，重启Pycharm...

编程日记 2025/4/26 1:51:43

P6792 [SNOI2020] 区间和 Solution

Description 给定序列 a ( a 1 , a 2 , ⋯ , a n ) a(a_1,a_2,\cdots,a_n) a(a1,a2,⋯,an)，有 m m m 个操作分两种： chmax ⁡ ( l , r , v ) \operatorname{chmax}(l,r,v) chmax(l,r,v)：对每个 i ∈ [ l , r ] i \in [l,r] i∈[l,…...

编程日记 2025/5/9 13:53:34

基于ArduPilot开发无人机飞控自动驾驶仪

目录 1、项目参数 2、硬件设计解析 2.1、主控与协处理器架构 2.2、高精度传感器集成 2.3、数据存储与恢复 2.4、电源管理与保护 2.5、通信与接口本项目基于开源飞行控制固件 ArduPilot 开发，设计并实现了一款高度集成的自动驾驶仪，可广泛应用于…...

编程日记 2025/5/5 11:13:58

Kotlin Lambda

Kotlin Lambda 在探索Kotlin Lambda之前，我们先回顾下Java中的Lambda表达式，Java 的 Lambda 表达式是 Java 8 引入的一项强大的功能，它使得函数式编程风格的代码更加简洁和易于理解。Lambda 表达式允许你以一种更简洁的方式表示实现接口&…...

编程日记 2025/5/8 9:25:18

UniApp 中制作一个横向滚动工具栏

前言最近在用 UniApp 开发项目时，需要一个横向滑动的工具栏。常见的工具栏一般都是竖着的，但横向滑动的工具栏不仅能展示更多内容，还能让界面看起来更加丰富。不过很多朋友可能会发现，如何让内容“横着”展示又不变形、能流畅滚…...

编程日记 2025/5/9 13:44:50

Qt的QListWidget样式设置

以下是关于QListWidget样式设置的详细说明，包含常用样式配置和进阶技巧： 1. 基础列表样式 // 设置整体列表容器样式 listWidget->setStyleSheet("QListWidget {"" background-color: #f5f5f5;" // 背景颜色" borde…...

编程日记 2025/5/6 3:44:41

预览

最小化功能点

gpt总结的步骤

相关文章：