3个构建AI应用UI的Python框架
构建用户友好的AI聊天界面，这对于无缝交互、演示和测试至关重要。使用领先的Python框架为AI创建直观的聊天UI。
开发人员在构建AI应用时可以使用多种模型提供商API。流行的AI模型解决方案包括OpenAI、Anthropic、Mistral、Grok和DeepSeek。通常，开发人员使用LlamaIndex、LangChain、PydanticAI、Embedchain、LangGraph、CrewAI等平台构建这些AI解决方案和代理。通过命令行测试和调试这些应用程序是很棒的。
然而，需要一个直观的界面来与底层AI功能进行交互，以便执行特定任务、用真实用户进行测试或通过世界共享它们以获取反馈。此外，您用Python构建的AI应用可能需要连接到其他外部服务以访问知识库、执行任务的工具、监控性能等。
为什么使用Python库来构建AI聊天UI？
为AI应用构建UI涉及许多考虑因素，例如文本生成风格、响应流、输出结构化以及所有用户-AI交互如何创造连贯的体验。根据您选择构建AI应用前端的平台，有许多内置功能和AI聊天组件可以开箱即用。
- 输出流：如果需要从头开始实现LLM的响应流，这将非常复杂。尽管许多AI模型默认实现了该功能，但大多数UI构建平台都提供了轻松启用输出流的方法，除非需要自定义流。
- 聊天机器人动画：您可以使用一些库免费获得聊天机器人响应动画，例如打字指示和思考。
- 反馈：它们有助于快速获得项目改进的反馈。
- 监控和可视化性能：例如，Chainlit使用Literal AI（AI可观察性服务）游乐场来观察底层LLM的性能、管理提示并查看分析。
- 易于测试：这些库提供了轻松测试和演示AI应用的方式。
AI聊天UI构建器及其应用场景
你可以根据应用程序的目标为许多用途构建AI应用的前端。一般来说，您可能想要制作的AI聊天UI会落入以下几类之一。
- 多模态AI：这一类别的AI应用包括音频-文本到文本、图像-文本到文本、视觉问答、文档问答、视频-文本到文本、视觉文档检索等。
- 计算机视觉：在这个类别中，您可以构建AI应用，用于聊天消息应用中的文本和图像分类、会议应用中的视频分类，例如Zoom，以及文本到视频生成。
- 自然语言处理：在自然语言处理类别中，开发人员可以在视频通话应用中构建AI应用UI用于摘要、在聊天应用中用于翻译、以及用于问答和文本生成的AI聊天机器人。
- 音频：在这个类别中，您可以轻松创建前端UI用于文本到语音、文本到音频、自动语音识别用于视频会议、音频分类用于语音消息、以及语音活动检测AI应用。
用于在Python中构建AI聊天UI的工具
根据项目的对象，有几种方式和UI样式可以构建AI应用。例如，允许用户发送文本、语音和图像输入的多模态AI应用可能与仅支持语音克隆的应用不同。对于基于Python的AI项目，您可以使用Gradio、Streamlit和Chainlit等框架构建前端。还有其他基于Python的框架用于构建Web和数据应用程序。然而，这些超出了本文的范围。
我们的主要重点是为AI应用创建前端界面。这里提到的工具各有其优点和局限性，因此我们在以下部分讨论它们，并展示示例代码和实现示例，帮助您为下一个AI应用选择合适的框架。
1、Gradio：构建用于测试和部署AI应用的UI
Gradio是来自Hugging Face的一个开源Python库，它允许开发人员为LLM、代理和实时AI语音和视频应用创建UI。它提供了一种快速且简便的方法，通过网络界面测试和共享AI应用程序。Gradio为构建无限AI用途的UI提供了一个易于使用且低代码的平台。
- 易于开始：您可以快速开始使用Gradio，并用几行Python代码设置一个功能齐全的AI应用界面。
- 展示和共享：轻松将UI嵌入Jupyter Notebook、Google Colab或通过公共链接在Hugging Face上共享。
- 部署到生产环境：您可以永久托管由Gradio驱动的AI项目的UI在Hugging Face Spaces上。
1.1 Gradio的关键特性和优势
Gradio是用于构建机器学习（ML）应用前端的最受欢迎的Python库之一。其受欢迎程度和广泛使用源于丰富的功能组件和构建块，可以以最少的努力构建AI聊天界面。以下是Gradio的主要特性。
- 自定义组件：创建定制的组件作为UI库，并将其集成到由Gradio UI驱动的AI应用中。自定义组件可以作为Python包发布并分发给开发者社区。
- 代理UI：使用Hugging Face的transformers.agents轻松创建Gradio界面，用于文本到图像生成等。
- 对领先AI构建平台的支持：Gradio很好地集成了创建AI和代理应用的领先Python框架，如LangChain、LlamaIndex、Embedchain等。
- 原生中间思维支持：利用内置的链式思维（CoT）支持，为实现推理LLM的项目构建界面和演示。
- 支持不同的AI应用用途：寻找AI应用UI构建框架时的一个重要特征是平台处理不同应用用途的能力。幸运的是，Gradio的gradio.Interface类允许开发人员围绕四种不同的用途创建界面。标准用途允许您构建具有输入和输出的UI。这种界面类型非常适合创建图像分类器或语音到文本的AI应用。您可以创建仅支持输出用途的界面，例如图像生成。它还支持仅输入界面，可用于构建存储上传图像到外部数据库的LLM应用。通过统一界面选项，您可以创建输入和输出不区分的UI。在这种选项中，输出覆盖输入。一个很好的例子是在这个类别中的AI UI，它可以自动完成文本或代码。
- 自定义界面：Gradio中的Blocks允许您快速为AI项目实现定制UI。
- 聊天机器人UI：使用Gradio的高级抽象
gr.ChatInterface快速构建聊天机器人和助手界面。
1.2 Gradio安装和快速入门
本节使用Gradio的构建块创建上面显示的聊天机器人UI。首先，在您最喜欢的IDE中，应该设置一个Python虚拟环境并使用以下命令安装Gradio的Python包。
python -m venv venv
source venv/bin/activate
pip install gradio
接下来，创建一个名为grok_ui.py的Python文件并替换其内容为以下示例代码。
import gradio as gr
import os
from dotenv import load_dotenv
# 从.env文件加载环境变量
load_dotenv()
# 处理聊天交互的函数
def chat_with_grok(message, history, system_message, model_name, temperature, max_tokens):
# 在实际实现中，这将调用Grok API
# 目前，我们将简单地回显输入以演示UI是否正常工作
bot_message = f"你选择了模型: {model_name}\n系统消息: {system_message}\n温度: {temperature}\n最大令牌数: {max_tokens}\n\n你的消息: {message}"
return bot_message
# 创建Gradio界面
with gr.Blocks(theme=gr.themes.Soft(primary_hue="blue")) as demo:
gr.Markdown("# Grok AI聊天界面")
with gr.Row():
with gr.Column(scale=3):
# 主聊天界面
chatbot = gr.Chatbot(
height=600,
show_copy_button=True,
avatar_images=("👤", "🤖"),
bubble_full_width=False,
)
# 消息输入
msg = gr.Textbox(
placeholder="发送消息...",
container=False,
scale=7,
show_label=False,
)
with gr.Row():
submit_btn = gr.Button("发送", variant="primary", scale=1)
clear_btn = gr.Button("清除", variant="secondary", scale=1)
with gr.Column(scale=1):
# 模型设置侧边栏
gr.Markdown("### 模型设置")
model_dropdown = gr.Dropdown(
choices=["grok-1", "grok-2", "grok-3-beta"],
value="grok-3-beta",
label="模型"
)
system_message = gr.Textbox(
placeholder="你是一个有用的AI助手...",
label="系统消息",
lines=4
)
with gr.Accordion("高级设置", open=False):
temperature = gr.Slider(
minimum=0.0,
maximum=1.0,
value=0.7,
step=0.01,
label="温度"
)
max_tokens = gr.Slider(
minimum=100,
maximum=4000,
value=1000,
step=100,
label="最大令牌数"
)
# 设置事件处理器
submit_btn.click(
chat_with_grok,
inputs=[msg, chatbot, system_message, model_dropdown, temperature, max_tokens],
outputs=[chatbot],
).then(
lambda: "",
None,
msg,
queue=False
)
msg.submit(
chat_with_grok,
inputs=[msg, chatbot, system_message, model_dropdown, temperature, max_tokens],
outputs=[chatbot],
).then(
lambda: "",
None,
msg,
queue=False
)
clear_btn.click(lambda: None, None, chatbot, queue=False)
# 启动应用
if __name__ == "__main__":
demo.launch()
在此示例中，我们使用Gradio的gr.Blocks()组件创建了一个聊天机器人UI，用于从AI发送和生成文本输出。使用内置的blocks，我们可以将UI划分为消息输入和输出、模型设置和高级设置部分。
运行Python文件grok_ui.py将在您的本地URL:http://127.0.0.1:7860显示上述聊天机器人界面。
太棒了！👏 使用Gradio创建了您的第一个AI聊天UI。如前所述，Gradio不仅限于构建文本和图像生成界面。您可以轻松地与其他AI应用开发平台集成，为任何用途创建UI。让我们在下一节中使用Gradio创建实时语音界面，让您能够与AI进行实时语音对话。
1.3 Gradio：构建实时语音UI
Gradio是构建对话AI UI的绝佳选择。让我们使用其内置组件，利用Hugging Face的FastRTC创建一个实时语音应用。将FastRTC视为OpenAI的实时API的直接竞争对手和替代品。它是一个Python库，允许开发人员为AI构建实时通信应用。本节的界面很简单。我们使用Gradio创建一个语音UI，允许您输入语音并使用FastRTC将其输出回传为回声。
与前面的例子类似，我们创建一个虚拟环境并安装Gradio、FastRTC Python库以及可选依赖项，使用以下终端命令。
python -m venv venv
source venv/bin/activate
pip install gradio
pip install fastrtc
# 安装vad、stt和tts附加组件
pip install "fastrtc[vad, stt, tts]"
接下来，创建一个新的Python文件gradio_fastrtc_voice_ui.py并将以下内容填充到其中。
from fastrtc import Stream, ReplyOnPause
import numpy as np
def echo(audio: tuple[int, np.ndarray]):
# 该函数将被传递直到用户暂停的音频
# 实现任何迭代器以产生音频
# 查看“LLM语音聊天”以获取更完整的示例
yield audio
stream = Stream(
handler=ReplyOnPause(echo),
modality="audio",
mode="send-receive",
)
stream.ui.launch()
在上面的示例代码中，stream.ui.launch()方法启动了一个内置的Gradio UI，用于快速测试和共享您的实时流。运行Python文件后，您应该在终端看到此信息：正在本地URL上运行: http://127.0.0.1:7860。在浏览器中打开http://127.0.0.1:7860以查看类似于上面图片的Gradio语音界面。要启动实时通信，您应该授予访问摄像头的权限。享受😊您的第一个Gradio实时语音UI。
1.4 Gradio：与流行的API和LLM库集成
当与OpenAI、Anthropic、xAI等流行的LLM API以及Embedchain和LlamaIndex等库一起工作时，您可以轻松使用Gradio构建项目的前端。参考以下指南和示例开始。
- Gradio与Llama Index
- Gradio与Enbedchain
- Gradio与LangChain
- Gradio与OpenAI
- Gradio与SambaNova
- Gradio与Hyperbolic
- Gradio与Anthropic的Claude
2、Streamlit：在云端构建和共享AI应用
除了Gradio，另一个构建AI项目UI的优秀开源应用框架是Streamlit。它以其神奇的易用性而闻名。想创建运行LLM的UI吗？将Streamlit与Ollama连接起来，以访问像QwQ-32这样的开源推理模型。
2.1 Streamlit的关键特性和优势
使用Streamlit，只需五行Python代码就可以开始一个完全工作的应用。它允许开发人员通过预构建的小部件扩展他们的应用，并支持即时部署到Web。以下是Streamlit的主要功能亮点。
- 本地LLM支持：Streamlit与本地和开源模型无缝集成。这意味着您可以快速运行来自Hugging Face的任何GGUF模型，或者使用Llama.cpp、Llamafile等运行模型。
- 流式传输和模型进度动画：免费获得漂亮的文本流动画用于输出生成，以及模型生成响应时的加载/状态动画。
- 组件：超越Streamlit的可能性，通过扩展和集成第三方工具来扩展和整合您的AI应用和LLM。
- 部署：快速构建可共享的Web应用，无需前端经验即可让用户体验任何浏览器。Streamlit为您的AI应用提供了一个漂亮的Web UI。
- 使用LLM构建Streamlit UI：由于Streamlit的流行和GitHub上的大量共享代码示例，您可以使用最先进的LLM生成Streamlit代码，以创建多模态AI应用UI。
- 聊天界面：构建具有交互式实时可视化的生成AI应用UI。
- LLM构建工具无关：Streamlit支持所有流行的AI应用构建应用程序，如LangChain、Embedchain、LlamaIndex和代理框架。
2.2 构建Streamlit UI以本地运行模型
本地LLM工具如LmStudio或Ollama非常适合通过应用程序界面和命令行离线运行模型，如DeepSeek R1。然而，在大多数情况下，您可能更喜欢拥有一个自己构建的UI来与LLM本地交互。在这种情况下，您可以创建一个Streamlit UI并将其与GGUF或任何Ollama支持的模型连接。
本节采用隐私优先、本地优先的方法克隆DeepSeek Chat UI并在自定义的Streamlit离线界面中运行DeepSeek R1模型，该界面由Ollama提供动力。请随意下载并使用本节中的代码示例运行其他Ollama支持的模型。总之，我们希望：
- 构建本地Streamlit界面以运行和测试开源模型，避免数据共享的担忧。
- 利用Streamlit的流式处理（打字动画）功能为答案生成提供便利。
- 免费获得一个动画旋转器，当聊天机器人正在生成响应时显示。
- 增强等待答案生成的用户体验，使用动画计时器。
首先，您应该安装以下必需和可选依赖项。
# 设置您喜欢的Python虚拟环境
python -m venv venv
source venv/bin/activate
# 安装依赖项
pip install streamlit
pip install ollama
# 使用Ollama下载开源模型
ollama run deepseek-r1:8b
在这里，我们设置了Python虚拟环境，安装了Streamlit和Ollama，并拉取了DeepSeek R1的一个精简版本。
接下来，创建一个Python文件并命名为您想要的名称，local_deepseek_r1_streamlit.py。将以下代码添加到您刚刚创建的文件中。
import streamlit as st
import ollama
import time
def stream_data(text, delay: float=0.02):
for word in text.split():
yield word + " "
time.sleep(delay)
# 提示输入
prompt = st.chat_input("询问DeepSeek R1")
# 如果不存在，则在会话状态中初始化聊天历史记录
if "messages" not in st.session_state:
st.session_state.messages = []
# 显示聊天历史记录
for message in st.session_state.messages:
with st.chat_message(message["role"]):
st.markdown(message["content"])
if prompt:
# 将用户消息添加到聊天历史记录中
st.session_state.messages.append({"role": "user", "content": prompt})
# 显示用户的输入提示
with st.chat_message("user"):
st.markdown(prompt)
# 处理
with st.chat_message("assistant"):
message_placeholder = st.empty()
full_response = ""
# 在等待初始响应时，使用旋转器流式传输响应
with st.spinner("思考...", show_time=True):
response = ollama.chat(
model="deepseek-r1:8b",
messages=[{"role": m["role"], "content": m["content"]} for m in st.session_state.messages],
stream=True # 如果您的ollama版本支持，请启用流式传输
)
# 如果支持流式传输
if hasattr(response, '__iter__'):
for chunk in response:
if chunk and "message" in chunk and "content" in chunk["message"]:
content = chunk["message"]["content"]
full_response += content
message_placeholder.markdown(full_response + "▌")
message_placeholder.markdown(full_response)
else:
# 非流式响应的后备方案
full_response = response["message"]["content"]
# 为了更好的用户体验模拟流式传输
for word in stream_data(full_response):
message_placeholder.markdown(full_response[:len(word)] + "▌")
message_placeholder.markdown(full_response)
# 将助手响应添加到聊天历史记录中
st.session_state.messages.append({"role": "assistant", "content": full_response})
上述示例代码创建了一个简单的输入字段来捕获用户提示。一旦用户发送提示，我们将流式传输响应生成，使其具有打字效果。聊天机器人在生成响应时显示一个旋转器。Streamlit旋转器还显示一个动画计时器，以模拟输出生成的持续时间。
使用streamlit run命令并指定您的Python文件名streamlit run local_deepseek_r1_streamlit.py，在http://localhost:8501/上查看您的本地AI聊天应用。现在，您可以使用任何提示生成类似于下面预览的响应。
感谢Streamlit 🙏，我们免费获得了漂亮的流式传输、旋转器和动画计时器。查看Streamlit网站以获取更多关于构建AI聊天和其他框架的LLM应用的集成示例。
3、Chainlit：构建对话AI的UI
与Streamlit类似，您可以使用Chainlit创建美观且实用的UI，与AI系统和LLM进行交互。Streamlit可以用于纯Python构建通用的Web应用程序，用于数据操作和AI。然而，Chainlit有一个主要重点，那就是创建AI和LLM应用。如果您想用Python构建通用的Web应用而不是专注于AI，Chainlit可能不适合您。
3.1 使用Chainlit的关键特性和优势
Chainlit与外部第三方应用程序和部署选项的广泛集成使其成为构建AI聊天UI的绝佳选择。通过利用Chainlit的监控、可观察性和身份验证机制，与团队更高效地合作，构建安全且可扩展的AI应用。
- 内置监控和分析：在美丽的仪表板和提示游乐场上监控对Anthropic和OpenAI等模型提供商的API调用。
- 定制：Chainlit提供了不同的定制选项，帮助您定制创建的UI外观和感觉。执行基本修改，如交换标志和favicon。您可以进行高级主题定制Chainlit的UI，也可以使用自定义CSS来主题界面组件。
- 身份验证：使用行业标准协议（如OAuth）对用户进行身份验证。这意味着您可以使用Google或GitHub等第三方授权服务对用户进行身份验证。Chainlit的另一个很棒的功能是其通过密码/登录对用户进行身份验证的能力。
- 支持的功能：通过消息、流式传输、音频、聊天历史记录、聊天配置文件、反馈（对LLM的响应进行点赞或点踩，就像在ChatGPT和Grok中一样）等方式与您的AI应用进行交互。
- 集成：构建Chainlit UI并将其与流行的Python库和API集成，如Mistral AI、Autogen和Haystack。
- 部署：创建Chainlit UI并将其用作独立的AI Web应用，或作为Slack、Discord和Microsoft Teams等应用程序中的功能。
3.2 构建Chainlit UI以访问100+ LLM
在本节中，我们创建了一个由LiteLLM平台支持的本地Chainlit UI。LiteLLM是一个网关，以OpenAI兼容格式提供对数百个LLM的模型访问和支出跟踪。本示例使用Ollama支持的一个DeepSeek R1精简模型进行本地访问。
首先，按照前面章节中的说明安装Ollama，并执行以下操作。
pip install chainlit
pip install litellm
接下来，在您喜欢的编辑器中创建一个新的Python文件，并使用以下代码样本填充其内容。
import chainlit as cl
import litellm
@cl.on_message
async def on_message(message: cl.Message):
msg = cl.Message(content="")
await msg.send()
system_message = {
"role": "system",
"content": """你是由deepseek-r1:8b模型驱动的先进AI助手。
你的优势：
- 提供清晰、准确且深思熟虑的回复
- 将复杂主题分解为易于理解的解释
- 对问题提供平衡的观点
- 在提供帮助的同时承认自己的局限性
指导方针：
- 如果不确定某些事情，请承认而不是编造信息
- 在适当的情况下，建议用户可能想问的相关问题
- 保持友好、尊重的态度
- 当提高可读性时，使用Markdown格式化回复
"""
}
response = await litellm.acompletion(
model="ollama/deepseek-r1:8b",
messages = [
system_message,
{"role": "user", "content": message.content}
],
api_base="http://localhost:11434",
stream=True
)
async for chunk in response:
if chunk:
content = chunk.choices[0].delta.content
if content:
await msg.stream_token(content)
await msg.update()
运行上述Python代码将显示类似于以下预览的Chainlit AI聊天界面。您现在已准备好使用Ollama和LiteLLM支持的DeepSeek R1模型。要测试不同的AI聊天和内容生成模型，例如拉取最新的推理模型QwQ-32，您可以在终端中使用ollama run qwq。
4、其他用于在Python中构建AI应用UI的框架
如本文前面所述，您可以使用许多不同的解决方案为基于Python的AI应用构建前端。除了上述三种领先库之外，您还可以使用以下框架和其他平台（如Flask）来为AI应用创建Web UI，尽管有些具有比单纯AI更广泛的用途。
- Messop：类似于Chainlit和Streamlit，Messop允许开发人员快速使用数十个UI组件在Python中创建AI应用。虽然它不像上述UI构建框架那样广泛使用和功能丰富，但其Github仓库表明Google的一个工程团队正在使用它。
- FastHTML允许开发人员完全使用Python构建现代Web应用程序，而不必接触JavaScript或React。顾名思义，开始使用FastHTML更快。然而，它没有预构建的UI组件和样式。要充分利用此框架，需要了解HTMX并使用CSS库（如Tailwind和Bootstrap）进行UI样式设计。
- Reflex：使用Python构建AI应用的前端和后端。Reflex网站上有AI图像生成和聊天机器人的实现示例。
5、结束语
为AI应用程序构建聊天UI的框架选择需要考虑许多因素，包括功能、可扩展性、与其他AI技术和平台的集成以及部署选项。
本文探讨了使用行业领先的平台（如Gradio、Streamlit和Chainlit）构建AI应用程序聊天UI的实际示例。希望您享受了每个AI UI构建框架解锁的不同用途和能力。
原文链接：The 3 Best Python Frameworks To Build UIs for AI Apps
汇智网翻译整理，转载请标明出处