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

打造超轻量的仿chatgpt的AI聊天应用

1 总体概述

在这里插入图片描述

使用纯 HTML、CSS 和 JavaScript实现了一个类似 ChatGPT 的聊天界面。支持 Markdown 渲染(AI 回复)、代码高亮、图片上传和预览、全局搜索、对话切换等。

左侧边栏:显示历史对话列表,可以新建对话。主聊天区:显示用户与 AI 的消息流。顶部工具栏:包含侧边栏开关、模型选择器和全局搜索功能。底部输入区:用户可以在此输入文本、上传图片,并发送。

项目开源地址 https://github.com/jiaxin576/LightAIChat

2 HTML的代码片段

  <script src="{{ url_for('static', filename='js/marked.min.js') }}"></script><script src="{{ url_for('static', filename='js/highlight.min.js') }}"></script><link rel="stylesheet" href="{{ url_for('static', filename='js/github.min.css') }}">

marked.min.js: 引入 marked 库。用于将 AI 返回的 Markdown 格式文本转换为 HTML

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

相关文章:

  • android studio底部导航栏
  • HarmonyOS运动开发:如何选择并上传运动记录
  • Flutter Container 组件详解
  • 斐讯N1部署Armbian与CasaOS实现远程存储管理
  • 深入解析XXE漏洞利用:Base64编码的PHP过滤器+回调回传攻击
  • CentOS Stream 9——RustDesk基础版自建教程(Docker)
  • 【Typst】自定义模块mDateTime
  • ESP32 004 Thonny 配置简单的轻量级MicroPython开发IDE
  • 提升iOS开发效率:通过KeyMob等工具进行全面性能分析与调试
  • .NET 的IOC框架Unity代码示例
  • 游戏引擎学习第315天:取消排序键的反向顺序
  • 2025.6.11总结
  • 中科院1区|IF6.7:基于PCA/OPLS-DA和KEGG通路分析的多组学整合,揭示沙棘-水飞蓟复方改善高脂血症的分子基础
  • 【QT】窗口详解
  • FanControl:智能散热,稳定运行
  • JS 原型与原型链详解
  • CMO增加人工智能投资:数据表明了什么
  • 广东食品安全管理员证有哪些,怎么考的呢
  • const auto 和 auto
  • 第二节:Vben Admin v5 (vben5) Python-Flask 后端开发详解(附源码)
  • MySQL基础知识(DDL、DML)
  • Docker:修改已有容器的端口映射
  • 树莓派超全系列教程文档--(63)rpicam-apps可用选项介绍之常用选项
  • 芯伯乐XBLW GT712选型及应用设计指南
  • Redis:极速缓存与数据结构存储揭秘
  • MySQL:Prepared Statement 预处理语句
  • 软考 系统架构设计师系列知识点之杂项集萃(87)
  • Qt Connections详解:信号与槽的核心机制
  • 【华为Pura80系列】鸿蒙生态再升级:Pura 80 系列影像突破,WATCH 5 开启智能手表新纪元
  • LeetCode - 1047. 删除字符串中的所有相邻重复项