llm-chat-demo项目介绍

前言介绍🌈

        Llm-Chat-Demo🔍是一个简单的自定义的大模型语言交互界面，目前后端使用通义千问的网络API提供数据，前端调用接口实现浏览器页面的流式输出。Llm-Chat-Demo旨在以简单、优雅的练习大模型语言交互界面。

---

---

       本项目的gitee代码地址为：https://gitee.com/St_hao/llm-chat-demo.git。

 

---

---

项目基础🔗

       Vue2实现流式输出–新手教程） --Vue基础

       该项目的后端代码的编写以及下面三个基础教学由 浩浩的科研笔记 提供。

       Flask框架初探-如何在本机发布一个web服务并通过requests访问自己发布的服务-简易入门版（Flask基础） --（Flask基础）

       Flask框架进阶-Flask流式输出和受访配置–纯净详解版 --（Flask基础）

       调用阿里通义千问大语言模型API-小白新手教程-python --（大模型基础）

---

技术架构

       简介：一款可以实现多轮对话，流式输出的大模型语言交互界面。
       系统架构：前端Vue + 后端Flask。
       输出形式： 流式输出。

---

前端启动流程

       前端使用Vue2并采用SSE技术实现流式输出，启动项目你需在前端的工程目录下执行以下命令。按照前端工程放在D:\llm-chat-demo\chat-frontend目录为例。Win+R，输入cmd，按下回车进入控制台。

C:\Users\Administrator>D: #进入D盘

D:\>cd D:\llm-chat-demo\chat-frontend #进入到前端的工程目录

D:\llm-chat-demo\flask_backend>npm install #安装依赖

D:\llm-chat-demo\flask_backend>npm run serve #启动命令

       前端代码启动后效果

---

后端启动流程

       后端代码运行appllm.py 文件，开启5000端口，便可以调用通义千问大语言模型API实现智能回答。
按照后端工程放在D:\llm-chat-demo\flask_backend目录为例。Win+R，输入cmd，按下回车进入控制台。

C:\Users\Administrator>D: #进入D盘

D:\>cd D:\llm-chat-demo\flask_backend #进入到后端的工程目录

D:\llm-chat-demo\flask_backend>pip install flask #使用pip命令安装flask。

D:\llm-chat-demo\flask_backend>python appllm.py #启动程序

       后端代码启动后效果

---

项目演示效果

                                          
        网站的请求地址为http://localhost:8080/#/ 。 在输入框中输入想要询问的问题，就可以得到通义千问大语言模型给出的智能回答。

---

总结

       本项目主要遇到的难点有两条。
       第一条：是对于后端返回的markdown格式的数据，前端如何进行格式解析并且展示出来,最终是利用markdown-it和highlight.js依赖库进行配合，才最终得以正确展示。
       第二条：是对于SSE (Server-Sent Events)技术的学习和了解。才能最终实现页面流式输出的效果。