【项目实训】chat-chat开源项目代码解读

在项目实训过程中，我们希望搞清chat-chat是如何调用的大模型接口，以及如何实现的前后端交互，从而可以实现自己项目的页面编写，于是读chat-chat源码部分的前端页面webui_page部分

前端webui_page

前端页面实现webui.py

在前端中使用了streamlit库构建了一个前端页面，发现这个文件中只是写出了有两个部分：对话和知识库管理

然后具体的页面形式是在这两个函数中定义的，在webui_pages的dialogue.py中，所以webui_pages文件夹下是各个页面的代码。

如果我们要增加页面，也应该在这里增加代码。

utils.py 配置页面请求的相关函数

封装HTTP请求

文件中的ApiRequest 类的功能是封装 HTTP 请求，简化与 API 服务器的交互过程，所以编写了前端各个按钮对应函数。封装了前端的各种请求。

比如可以看到“重建向量库”使用的是如下函数：

• 该文件中首先调用了server.utils.py中的set_httpx_config，api_address函数

获取服务器api地址api_address()

然后调用了api_address():

在server_configl.py.example中有上述语句，表示设置绑定host。一般来说，如果绑定到0.0.0.0，则将监听所有可用的网络接口，并接受来自这些接口的连接请求，所以一开始设置为0.0.0.0

但是，我们是在本机上运行服务器，还不用监听其他网络接口，因此使用api_address把地址改为本地主机的IP地址127.0.0.1

这些步骤都是为了正确指向API服务器，使得APIReauest知道向哪个服务器地址发送请求

创建客户端实例

• 然后创建客户端实例，可以使用该实例进行HTTP请求

比如可以如下请求：

这段代码就会调用get请求获取指定url的数据

修改prompt prompt_config

• prompt_config中可以修改prompt，且不用重启服务

获取（查看）prompt模板 get_prompt_template

以下函数可以获取prompt，帮助我们查看我们目前的prompt是什么

前端与模型建立连接---与知识库对话

与后端模型建立连接：

连接后端服务器用ApiRequest类

首先函数需要传递一个ApiRequest类的参数api,用来通过此类完成与服务器交互的过程。所以ApiRequest中是一些前端可以调用的接口。比如get/post等方法

使用post方法调用后端的server中的knowledge_base_chat方法实现与知识库对话，所以，utils.py中的knowledge_base_chat（）函数可以在前后端之间建立连接，并通过知识库进行聊天对话，调用了名为knowledge_base_chat的接口，将相关参数传递给后端进行处理，通过post方法向后端发送HTTP请求。

• 前端会话系统的页面实现：

  • dialogue_page函数是对话系统的核心，在st.session_state中维护了一个conversation_ids字典，用于存储不同会话的唯一标识符。每个会话都有一个名称和对应的会话ID。

  • 通过调用api.get_default_llm_model()获取默认的语言模型名称，并在欢迎信息中展示该模型的名称。欢迎信息使用st.toast()函数进行显示。

• 在st.sidebar中显示会话相关的选项和控件。其中包括选择当前会话的下拉列表(conversation_name)、选择对话模式的下拉列表(dialogue_mode)以及一些与会话相关的状态和操作。
•  这里使用selectbox创建了一个下拉框。（可以借鉴，我们想要设置下拉框选择公司岗位时用如下代码）
• 这里之后默认使用知识库问答或者大模型的话改成默认值就好，不用设置下拉框

  有一些on_llm_change（换模型）等函数其实是我们在开发时需要展示的，等做成时，把这部分代码注释掉不展示这些就可以

• 设置聊天框的占位符文本：
  • 

  • 对于侧边栏的设置：

    

使用with st.sider表示设置侧边栏，

创建按钮使用cols[0],download_button用于创建下载按钮。

cols[1]创建一个”清空对话“按钮，当点击按钮时调用reset_history()函数清空对话记录，所以发现创建按钮使用cols[i]表示在一列创建第i个按钮，而点击按钮其实就是用该按钮.上点击时触发的函数。