admin 管理员组

文章数量: 1184232

1 总体概述

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

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

项目开源地址 https://github/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，从而可以在页面上正确显示标题、列表、代码块等格式。

github.min.css: 引入一个 CSS 文件。这通常是 highlight.js 库的配套样式文件，用于美化代码块。

highlight.min.js: 可以自动检测并高亮显示代码块中的语法。

            
            
            

                本文标签：
                                                超轻
                                ChatGpt
                                AI
                                            


            

                

                    

                        版权声明：本文标题：打造超轻量的仿chatgpt的AI聊天应用 内容由网友自发贡献，该文观点仅代表作者本人，
                        转载请联系作者并注明出处：http://www.roclinux.cn/b/1765569893a3393723.html，
                        本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。