当我第一次发现 Streamlit 时,我很高兴我可以用 Python 快速构建应用程序。我做的第一件事就是看看将 Jupyter notebook 转换为 Streamlit 需要多快,所以我重建了Timbre Transfer 演示。虽然我喜欢这样做的简单和快速 - 我在使用我的 Streamlit 应用程序时一直遇到的一个问题是每次我与滑块交互时它们将如何重新运行。

[](https://res.cloudinary.com/practicaldev/image/fetch/s--gI5gCIp7--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://dev-to -uploads.s3.amazonaws.com/i/bp5fobi6sy2518rye4qb.gif)

在这个手动回归演示中,每次更改滑块的值时,Streamlit 都会重新运行脚本。如果计算变得过于复杂,那么动画往往会落后于滑块交互。

想象一下,如果您想使用滑块对机器学习模型进行参数化,但每次移动滑块时都会对模型进行训练......这将非常耗时!不幸的是,Streamlit Slider 在 Streamlit 代码库中根深蒂固,因此进行这样的更改说起来容易做起来难。

然而,Streamlit 版本 0.63 引入了个 Streamlit 组件现在使我们能够将任意 HTML/CSS/JS 代码集成到我们的应用程序中。然后可以发布扩展,以便其他用户可以从此自定义功能中受益。

我们的滑块问题是这个新扩展点的完美用例!

[](https://res.cloudinary.com/practicaldev/image/fetch/s--GH-Nj1oS--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://dev- to-uploads.s3.amazonaws.com/i/mxe916hoypwxnpcyfsdn.gif)

这个深入的教程将教您构建您的第一个 Streamlit 组件的所有技术,方法是渲染一个滑块,该滑块在鼠标释放而不是值更改时重新运行 Streamlit。

作为预告片,以下Chart.js交互式 Streamlit 应用程序是用不到 50 行 Python+React 代码构建的,并使用了本教程中的所有构建块。

[](https://res.cloudinary.com/practicaldev/image/fetch/s--UIhCZbfu--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://dev-to- uploads.s3.amazonaws.com/i/wobsu31ey0fr1bn91rq2.gif)

感兴趣的 ?前往我的Streamlit 组件教程!在本教程结束时,您将能够将新的小部件插入 Streamlit 并重用此工作流程以将任何自定义 Web 功能包装到您的应用程序中。