2.4　交互式开发：探索Streamlit的强大功能

2.3节介绍的LangChain解决了与大模型进行交互的问题，它可以接入不同的大模型，将用户的提问与大模型的回应通过少量代码实现。解决了大模型交互之后，还需要解决用户交互界面的问题，这里选择Streamlit。Streamlit是一个开源的Python库，它使开发者能够快速创建和分享数据驱动的Web应用。Streamlit的设计简化了从程序脚本到Web应用的转换过程，是一种轻量级的开发工具。下面将详细介绍Streamlit的客户端-服务器架构，以及这种架构对应用设计的影响。

Streamlit应用采用客户端-服务器结构，服务器端（即Python后端）是通过执行streamlit run app.py命令来启动的。通常来说，Web界面的代码都会写在app.py文件中，在app.py文件中调用与大模型交互的代码。streamlit run app.py命令会告诉Streamlit去运行指定的Python脚本，使之成为应用服务器。在Streamlit中，服务器承担了所有计算和数据处理的任务，成为应用的运算核心。用户通过浏览器与Web应用交互，此时的浏览器就作为客户端直接与服务器交互。这种客户端-服务器的模式允许用户在没有安装任何特定软件的情况下，仅通过浏览器就能访问和使用应用。本书的项目案例会在本地启动Streamlit的服务器端，同时用本地的浏览器查看结果，此时本地的计算机既承担服务器的角色，又充当客户端。

Streamlit的工作原理提供了一种独特的方式来构建和渲染Web应用。当执行streamlit run app.py命令时，实际上并不是直接启动app.py脚本，而是Streamlit的启动脚本首先被调用，这个启动脚本负责读取和解析app.py文件。

在这个过程中，Streamlit逐行执行app.py中的代码。对于包含Streamlit方法的代码行，如st.write（）或st.dataframe（），Streamlit会将这些方法转化为前端代码，主要是HTML和JavaScript，以渲染相应的页面元素。这意味着每当使用Streamlit的API来定义一个界面元素时，Streamlit会将其转换成前端代码，不需要开发者拥有前端页面的编写经验。而对于其他的Python语句，如对大模型的调用，将由Python解释器正常执行。用户更多地专注于大模型应用的开发，将前端的开发工作交给Streamlit完成，而无须关注Web开发的复杂性。

下面通过一段简单的代码熟悉一下Streamlit的应用，在使用Streamlit之前需要对其进行安装，命令如下：

如果在2.2节中已经完成了依赖组件和库的安装，这里就不需要执行以上命令了。

在chapter02目录中创建streamlit_basic.py文件，通过简单的代码添加下拉列表框，选择不同的模型，选择之后会在页面中打印出模型的名字。代码如下：

在以上代码中，首先通过import streamlit as st引入Streamlit库，然后定义了models数组，包含三个模型的名称。其中，Qianfan-Chinese-Llama-2-7B来自百度千帆平台的模型，在前面的例子中介绍过它是百度千帆团队在Llama2模型的基础上利用中文语料微调出来的模型版本。gpt-3.5-turbo是来自OpenAI的模型，它是在GPT-3模型的基础上微调而来，具有function call的功能。qwen-plus通义千问模型行是来自阿里的灵积平台。

然后，将定义好的三个模型通过st的selectbox控件显示出来，同时将选择的模型名字通过write语句在Web页面上显示。这里selectbox是Streamlit自带的Web组件，后面的章节中会出现类似的组件，如选择框、按钮、输入框。

接着通过命令行运行以下代码：

通过以上输出内容可以发现两条重要信息，解释如下。

（1）Streamlit应用启动成功。

You can now view your Streamlit app in your browser.这条信息表示Streamlit已经成功启动了应用，并且已经在本地服务器上运行。

（2）访问URL。

Local URL: http://localhost:8502是本地URL，只能在运行Streamlit应用的计算机上访问。

Network URL: http://192.168.0.102:8502是网络URL，可以在同一局域网络中的其他设备上通过此地址访问用户的应用。

执行上述命令之后，Streamlit会自动打开默认浏览器，展示Web页面的内容，如果没有显示，可以通过http://localhost:8502地址直接访问。

如图2-8所示，Web页面中显示了一个下拉列表框，用户可以在其中选择对应的模型。

如图2-9所示，选择模型qwen-plus之后，在下拉列表框的下方会出现“你现在选择了qwen-plus大模型”字样。