Streamlit渲染

### 使用Streamlit进行页面或组件渲染

#### 页面渲染基础
Streamlit 是一种用于构建机器学习和数据科学Web应用程序的强大工具。通过简单的Python脚本即可创建交互式的仪表板和其他类型的Web应用[^1]。

为了展示如何在 Streamlit 中实现页面渲染，下面是一个基本的例子：

import streamlit as st

st.title('欢迎来到我的第一个Streamlit App')
st.write('这是一个用来介绍如何使用Streamlit来渲染页面的小例子。')

# 添加一些文本输入框让用户可以互动
name = st.text_input('请输入您的名字', 'Type Here ...')
if st.button('提交'):
    result = f'你好, {name}'
    st.success(result)

这段代码展示了如何利用 `st.title` 和 `st.write` 方法向网页添加标题以及静态文本内容；同时也介绍了怎样借助 `st.text_input` 及按钮事件收集用户的输入并作出响应。

#### 组件渲染方法
除了标准UI元素外，还可以自定义更复杂的前端部件。这可以通过调用 `streamlit.components.v1` 来完成，它允许开发者嵌入任意HTML/CSS/JavaScript代码片段作为独立组件显示于界面上[^2]。

这里有一个简单实例说明了如何引入外部JS库并在其中操作DOM节点以绘制图表或其他动态效果:

import streamlit as st
from streamlit.components.v1 import html

html("""
<canvas id="myChart"></canvas>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ['Red', 'Blue', 'Yellow'],
        datasets: [{
            label: '# of Votes',
            data: [12, 19, 3],
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)'
            ],
            borderColor: [
                'rgba(255, 99, 132, 1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)'
            ],
            borderWidth: 1
        }]
    },
});
</script>
""")

此段代码实现了在一个Canvas标签内使用Chart.js库画柱状图的功能，并将其呈现给最终用户查看。