打造超轻量的仿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