streamlit教程：加上文字段落和图片

现在首页加上一段介绍和图片，介绍的内容是：智能问答知识库是怎么做的，图片是智能问答知识库的架构图，

为了在首页增加一段介绍和智能问答知识库的架构图，你可以在现有的代码基础上扩展内容。以下是更新后的代码示例，包括介绍段落和一个图片（你需要将图片上传到Streamlit应用中）：

import streamlit as st

# 自定义CSS样式以美化导航栏和内容区
st.markdown("""
    <style>
    /* 设置导航栏的样式 */
    .sidebar .sidebar-content {
        background-color: #f8f9fa;
        padding: 20px;
    }
    .sidebar .sidebar-content button {
        font-size: 16px;
        font-weight: bold;
        color: #007bff;
        background-color: #f8f9fa;
        border: none;
        margin: 10px 0;
        padding: 10px 15px;
        text-align: left;
        cursor: pointer;
        width: 100%;
        border-radius: 5px;
    }
    .sidebar .sidebar-content button:hover {
        background-color: #007bff;
        color: white;
    }
    /* 设置展示区域的样式 */
    .main-content {
        padding: 40px;
        background-color: #fff;
        border-radius: 10px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }
    </style>
    """, unsafe_allow_html=True)

# 初始化 session_state
if 'page' not in st.session_state:
    st.session_state['page'] = '首页'

# 侧边导航栏点击事件
def navigate(page):
    st.session_state['page'] = page

# 设置侧边栏导航栏
with st.sidebar:
    st.title("导航栏")
    st.button("首页", on_click=navigate, args=("首页",))
    st.button("知识库", on_click=navigate, args=("知识库",))
    st.button("智能问答", on_click=navigate, args=("智能问答",))

# 右侧展示区域
st.markdown('<div class="main-content">', unsafe_allow_html=True)
if st.session_state['page'] == '首页':
    st.title("首页")
    st.write("欢迎来到智能问答知识库系统首页！")

    # 添加介绍段落
    st.write("""
        ### 智能问答知识库是怎么做的
        智能问答知识库是通过将用户的自然语言问题转化为结构化查询并在知识库中获取答案的系统。系统主要包括以下几个部分：
        1. **数据采集与知识库构建**：通过多种渠道获取数据，整理为知识库。
        2. **自然语言理解**：使用自然语言处理技术分析用户问题。
        3. **查询改写与优化**：对用户的问题进行查询优化，确保查询的高效性。
        4. **答案生成与反馈**：从知识库中提取相关信息并生成答案，返回给用户。
    """)

    # 显示智能问答知识库的架构图（需要替换为实际图片路径）
    st.image("path_to_your_image/knowledge_base_architecture.png", caption="智能问答知识库架构图", use_column_width=True)

elif st.session_state['page'] == '知识库':
    st.title("知识库")
    st.write("这里是知识库的内容展示区域，你可以在这里查看相关知识。")
elif st.session_state['page'] == '智能问答':
    st.title("智能问答")
    st.write("这里是智能问答区域，可以进行智能问题回答。")
st.markdown('</div>', unsafe_allow_html=True)

代码更新说明：

1. 介绍段落：在首页增加了一个详细的介绍，描述智能问答知识库的工作原理和主要模块。
2. 架构图：在介绍的下方添加了架构图的展示，使用 st.image() 函数加载图片。你需要将图片路径替换为实际路径（你可以通过Streamlit的文件上传功能或者本地图片路径来加载图片）。

如何替换图片：

1. 将架构图上传到你本地服务器上或通过 st.file_uploader() 上传图片，替换 path_to_your_image/knowledge_base_architecture.png 为实际的图片路径。
2. 确保 st.image() 使用了 use_column_width=True，这样图片会根据页面的宽度自动调整大小，看起来更加整洁。

现在首页将展示一段关于智能问答知识库的介绍，并在下方显示架构图，提升了用户的体验和界面的美观性。