Streamlit是面向无前端基础开发者的工具，可快速构建美观且支持交互的网站，官方文档：https://docs.streamlit.io/https://docs.streamlit.io/

作者有话说：作为一名AI驻场工程师，这个的作用是给客户快速做出来的一个小demo的

一、安装

安装命令

pip install streamlit==1.53.1
pip install pandas
pip install requests
pip install python-docx
pip install pypdf

第一个程序 hello streamlit

import streamlit as st
st.write("Hello World")
# streamlit run .\hello_streamlit.py  启动方式1
# python -m streamlit run  启动方式2

二、数据展示

1.标题

import streamlit as st

# 一级标题
st.title("欢迎")
# 二级标题
st.header("第一章：streamlit入门")
# 三级标题
st.subheader("第一节：展示文本")

2. 展示文本

• 普通文本：st.text()

• JSON字符串：st.json()

st.text("streamlit是一个很好用的网页开发库")
st.json({"username": "张三", "password": "111111"})

3. 展示数据集

通过st.dataframe或st.table展示Pandas的DataFrame：

df=pd.DataFrame({"姓名": ["张三", "李四", "王五"], "年龄": [25, 30, 35]})
st.dataframe(df)
st.table(df)

4. 展示图片

st.image("小男孩.png", caption="小男孩")

三、表单组件

1. 文本输入框

user_input = st.text_input("请输入姓名")
if user_input:
    st.success("姓名输入成功")
    st.text(f"姓名输入成功:{user_input}")
 
st.text_input("请输入密码",type="password")

2. 下拉框

st.selectbox("请选择性别", ["男", "女"])
st.radio("请选择性别", ["男", "女"])

3. 单选组件

st.selectbox("请选择性别", ["男", "女"])
st.radio("请选择性别", ["男", "女"])

4. 复选框

remember_me = st.checkbox("记住我")
if remember_me:
    st.success("记住我已选中")

5. 文件上传

#上传照片文件
file =st.file_uploader("请上传文件",type=["jpg","png","jpeg"])
if file:
    st.success("文件上传成功")
    st.text(f"文件上传成功:{file.name}")
    st.image(file,caption="上传的照片")

6. 按钮

submitted = st.button("登录")
if submitted:
  st.write("点击了登录按钮")

四、布局

1. 侧边栏

with st.sidebar:
  st.text_input("请输入关键字")

2. 分栏布局

column1, column2 = st.columns([1,2])
with column1:
  # 一级标题
  st.text_input("用户名")
with column2:
  # 二级标题
  st.text_area("留言")

3. Tab栏

tab1, tab2, tab3 = st.tabs(["Python", "人工智能", "前端"])
with tab1:
  with st.container():
    st.header("Python页面")
with tab2:
  with st.container():
    st.header("人工智能页面")
with tab3:
  with st.container():
    st.header("前端页面")

五、会话管理

通过st.session_state保存状态（避免代码重运行导致状态丢失）：

import streamlit as st
username = st.text_input("用户名：")
st.session_state['username'] = username
st.write(f"用户名为：{st.session_state['username']}")

六、实现简单的页面布局

import streamlit as st
with st.sidebar:
    st.file_uploader(
        label="上传文件",
        type=['pdf', 'txt', 'doc', "docx"],)
    st.button("立即提交",use_container_width= True)
       
        

st.title("欢迎！")
st.chat_message("assistant").write("我是小助手，请上传文件,和我对话")
st.chat_input("请输入你的问题")

七、流式输出

import time
import numpy as np
import pandas as pd
import streamlit as st
wel_text = """
欢迎 大家 到来 ！！！
"""


def stream_data():
    for word in wel_text.split(" "):
        yield word + " "
        time.sleep(0.05)

    yield pd.DataFrame(
        np.random.randn(5, 10),
        columns=["a", "b", "c", "d", "e", "f", "g", "h", "i", "j"],
    )

    for word in wel_text.split(" "):
        yield word + " "
        time.sleep(0.02)


if st.button("Stream data"):
    st.write_stream(stream_data)

七、逐步实现一个简单智能体

问答机器人

import streamlit as st
from openai import OpenAI  # 导入 OpenAI 官方库
import json  # 导入 JSON 库，用于读取配置文件

# 从配置文件中读取API配置
with open('config.json', 'r') as f:
    config = json.load(f)
    API_KEY = config['api_key']
    BASE_URL = config['base_url']
    MODEL = config['model']

# ------------------------------
# API 调用函数（分离部分）
# ------------------------------
def call_ai_api(user_input, system_prompt="你是一个 helpful 的 AI 助手"):
    """
    调用 OpenAI API 获取 AI 回复
    
    参数：
        user_input: 用户输入的问题
        system_prompt: 系统提示词，定义 AI 的角色和行为
    
    返回：
        生成器：逐块返回 AI 回复的内容
    """
    try:
        # 初始化 OpenAI 客户端
        client = OpenAI(
            api_key=API_KEY,
            base_url=BASE_URL,
        )
        
        # 调用 API 并启用流式响应
        response = client.chat.completions.create(
            model=MODEL,
            messages=[
                {"role": "system", "content": system_prompt},
                {"role": "user", "content": user_input}
            ],
            temperature=0.7,
            stream=True  # 启用流式响应
        )
        
        # 逐块返回响应内容
        for chunk in response:
            if chunk.choices[0].delta.content:
                yield chunk.choices[0].delta.content
                
    except Exception as e:
        # 捕获错误并返回错误信息
        yield f"API 调用失败：{str(e)}"

# ------------------------------
# 主应用逻辑（对话部分）
# ------------------------------
def main():
    """主应用函数，处理 UI 和对话逻辑"""
    # 设置页面标题
    st.title("AI 聊天机器人", text_alignment="center")
    
    # 初始化对话历史
    if "messages" not in st.session_state:  # 检查会话状态中是否存在对话历史
        st.session_state.messages = [       # 如果不存在，初始化对话历史
            {"role": "assistant", "content": "你好！有什么我可以帮助你的吗？"}  # 初始化助手欢迎消息
        ]
    
    # 显示对话历史
    for message in st.session_state.messages:   # 遍历会话状态中的所有消息
        with st.chat_message(message["role"]):  # 根据消息角色创建聊天消息容器
            st.markdown(message["content"])  # 显示消息内容
    
    # 获取用户输入
    user_input = st.chat_input("请输入你的问题...")# 从用户输入框获取用户问题
    
    if user_input:
        # 添加用户消息到对话历史
        st.session_state.messages.append({"role": "user", "content": user_input}) # 将用户输入添加到对话历史
        
        # 显示用户消息
        with st.chat_message("user"):  # 创建用户消息容器
            st.markdown(user_input)  # 显示用户输入 
        
        # 显示 AI 思考状态
        with st.chat_message("assistant"):  # 创建助手消息容器
            message_placeholder = st.empty()# 创建空容器，用于后续更新 AI 回复
            message_placeholder.markdown("思考中...")# 显示思考中状态
            
            # 存储完整回复
            full_response = ""
            
            # 调用 API 并处理流式响应
            for chunk in call_ai_api(user_input):
                full_response += chunk
                # 实时更新显示，添加空格防止Markdown渲染问题
                message_placeholder.markdown(full_response + " ")
            
            # 最后更新为完整响应（去掉末尾空格）
            message_placeholder.markdown(full_response)
            
            # 添加完整回复到对话历史
            st.session_state.messages.append({"role": "assistant", "content": full_response})

# 运行主函数
if __name__ == "__main__":
    main()