轻松学-Streamlit-Web-应用开发-全-

轻松学 Streamlit Web 应用开发（全）

原文：annas-archive.org/md5/192a910d838b60ca938add36e6856be6

译者：飞龙

协议：CC BY-NC-SA 4.0

前言

在网页应用开发的快速变化中，将创新理念转化为功能性网页应用的需求前所未有地迫切。简化网页应用开发，借助 Streamlit 是一本为那些希望轻松、自信地在这一动态领域中航行的人们而诞生的指南。这本书精心制作，面向各类专业人士，帮助他们实现一个共同目标——快速将代码转化为可工作的网页应用。

本书核心内容是，简化网页应用开发，借助 Streamlit 不仅仅是一本指南，它是一次旅程。它带你从 Streamlit 的基础知识开始，Streamlit 是一个简化网页应用开发的强大工具，直到你学会如何将解决方案部署到云服务中。这个过程旨在让你轻松掌握，并帮助你将应用程序轻松呈现给全球观众，减少不必要的麻烦。

本书内容贯穿了理论知识与实际应用的和谐结合。章节的结构旨在提供清晰、逐步的指导，确保即便是初学者也能轻松跟随。更重要的是，本书中穿插了大量实际案例和实例，帮助你切实理解如何在各种场景中运用 Streamlit。

当你深入阅读本书的每一页时，准备好迎接一次变革性的学习体验。你将不仅获得开发网页应用的技能，还能获得在数字世界中看到你代码潜力的视野。本书将成为你解锁 Streamlit 力量、简化网页应用开发并将创意带向全球舞台的得力伙伴。

本书适合谁阅读

本书专为 Python 程序员量身打造，帮助他们将脚本转化为互动网页应用。对于希望通过 Streamlit 的直观框架简化原型制作过程的网页开发者，本书是一本必备资源。计算机科学专业的学生将会发现，本书是将他们的理论知识应用到实际网页应用开发中的实用指南。IT 专业人员和爱好者，尤其是那些渴望快速高效部署应用程序的人，将从中获得宝贵的见解。本书本质上是一本全面的工具包，适合任何热衷于通过简单且快速的方式将网页应用创意付诸实践的人。

本书的内容

第一章，了解 Streamlit – 简要概述，介绍了 Streamlit 在网页应用开发中的角色。本章概述了 Streamlit 易用的功能和能力，并且提供了关于使用 Streamlit 进行快速开发的见解。

第二章，设置 Python 编码环境，包括 Python 环境设置的逐步指南。本章包含了高效集成 Streamlit 的技巧，重点是创建流畅的开发工作流程。

第三章，探索 Streamlit 的功能和特性，详细探讨了 Streamlit 的功能。包括展示其多功能性的实际示例。本章还提供了对 Streamlit 独特功能集的见解。

第四章，Streamlit 基础 - 配置环境、管理包和更多，描述了 Streamlit 环境配置的关键技术以及高效的包管理最佳实践。包括优化 Streamlit 设置的技巧。

第五章，使用列、扩展器和 NLP 技术组织和展示内容，探讨了利用 Streamlit 工具进行内容组织的策略。本章介绍了自然语言处理（NLP）技术，以增强内容管理，并描述了有效数据展示的方法。

第六章，在 Streamlit 中实施 NLP 技术进行文本分析和处理，教授了如何在 Streamlit 中应用 NLP 进行文本分析。包括 NLP 集成的逐步指南和展示 NLP 在 Web 应用开发中的案例研究。

第七章，使用 Streamlit Share 共享和部署应用到云端，描述了通过 Streamlit Share 进行云端部署的指南。包括让应用全球可访问的技巧。本章还提供了基于云的应用共享的见解。

第八章，为构建 AI 驱动的 Web 应用进行高级环境设置和包管理，教授了为 AI 驱动的 Web 应用进行高级设置的技术。详细解释了 AI 集成的包管理和高效的 AI Web 应用环境设置策略。

第九章，通过定制和 UI 功能优化 Streamlit Web 应用的用户体验，解释了如何通过 Streamlit 定制来增强用户体验。本章还探讨了功能美学的 UI 特性，并描述了基于 UI 的应用优化技术。

第十章，利用预训练模型 创建 专业化和个性化的 Web 应用程序，深入探讨了在 Web 应用中集成预训练模型的内容。本章解释了如何创建专业化的、以用户为中心的应用程序。描述了使用 AI 模型进行个性化的策略。

第十一章，在 Streamlit Share 上部署和管理复杂的库，探讨了在 Streamlit Share 上部署复杂库的技术。包括管理应用程序性能和复杂库集成的策略。

第十二章，智能文件上传——为专业 Web 应用程序提供高级技术，解释了专业化的文件上传方法。本章将教你如何简化文件上传，提高用户体验，并通过高效的文件管理增强 Web 应用程序。

第十三章，为 Web 应用程序创建安全的登录和注册流程，向你展示如何设计安全的身份验证流程，确保用户数据保护，并实现强大的登录/注册系统。

第十四章，自定义页面、个性化主题以及实现多页面，描述了独特页面定制的技术。本章将教你如何为品牌标识个性化主题，并利用多页面布局创建复杂的应用程序。

第十五章，通过表单、会话状态和可定制子域增强 Web 应用程序，教你如何使用表单和会话状态处理动态内容。本章还介绍了如何为品牌定制子域。探讨了通过高级功能增强 Web 应用程序的策略。

第十六章，要点与总结，总结了本书的核心见解以及你所学到的内容，回顾了 Streamlit 对 Web 应用程序开发的影响，并就未来的趋势提供了结语。

为了从本书中获得最大的收益

你需要了解 Python 编程和 Linux 终端的基础知识。

书中涵盖的软件/硬件	操作系统要求
Python 3.X	Linux 终端

如果你使用的是本书的数字版，我们建议你自己输入代码，或者从本书的 GitHub 仓库访问代码（下节会提供链接）。这样可以帮助你避免与复制粘贴代码相关的潜在错误。

下载示例代码文件

你可以从 GitHub 下载本书的示例代码文件，网址为 github.com/PacktPublishing/Web-App-Development-Made-Simple-with-Streamlit。如果代码有更新，它将在 GitHub 仓库中进行更新。

我们还提供了来自我们丰富的图书和视频目录中的其他代码包，网址为 github.com/PacktPublishing/。快去看看吧！

使用的约定

本书中使用了多种文本约定。

文本中的代码：表示文本中的代码词、数据库表名、文件夹名、文件名、文件扩展名、路径名、虚拟 URL、用户输入和 Twitter 用户名。以下是一个例子：“让我们检查一下pip是否已安装在我们的 Ubuntu 系统中。”

一段代码如下所示：

st.header("This is a header")
st.subheader("This is a subheader")
st.text("This is a simple text")
st.write("This is a write dimension")

任何命令行输入或输出均如下所示：

pip --version (or pip3 --version)

粗体：表示新术语、重要单词或您在屏幕上看到的文字。例如，菜单或对话框中的文字通常以粗体显示。以下是一个例子：“我们还完成了菜单中的文本分析和关于部分。”

提示或重要注意事项

显示如下。

与我们联系

我们始终欢迎读者的反馈。

一般反馈：如果您对本书的任何方面有疑问，请通过 customercare@packtpub.com 给我们发送电子邮件，并在邮件主题中注明书名。

勘误：尽管我们已经尽力确保内容的准确性，但错误仍然会发生。如果您在本书中发现错误，请报告给我们。请访问 www.packtpub.com/support/errata 并填写表格。

盗版：如果您在互联网上发现我们作品的任何非法副本，我们将非常感谢您提供该副本的地址或网站名称。请通过 copyright@packtpub.com 与我们联系，并附上材料链接。

如果您有兴趣成为作者：如果您在某个领域有专长，并且有兴趣写书或为书籍做贡献，请访问 authors.packtpub.com。

分享您的想法

阅读完《使用 Streamlit 简化 Web 应用开发》后，我们很想听听您的想法！请访问 packt.link/r/1835086314 分享您的反馈。

您的评论对我们和技术社区都非常重要，将帮助我们确保提供优质的内容。

下载本书的免费 PDF 副本

感谢购买本书！

喜欢随时随地阅读，但又无法随身携带纸质书籍？

您的电子书购买是否与您的设备不兼容？

不用担心，现在购买每本 Packt 图书时，您都可以免费获得该书的无 DRM PDF 版本。

随时随地，在任何设备上阅读。直接将您最喜爱的技术书中的代码搜索、复制并粘贴到您的应用程序中。

福利不仅仅是这些，您还可以获得独家折扣、新闻通讯以及每日送达您收件箱的精彩免费内容

按照这些简单步骤获取福利：

1. 扫描二维码或访问以下链接

packt.link/free-ebook/9781835086315

1. 提交您的购买证明

2. 就是这样！我们会将您的免费 PDF 和其他福利直接发送到您的电子邮件

第一部分：Streamlit 入门

第一部分为你踏入 Streamlit 的旅程奠定基础。它从对 Streamlit 的全面介绍开始，突出了它在 web 应用开发领域的重要性。接着，你将学习如何设置所需的 Python 编程环境，以确保顺利开始。最后，部分内容深入探讨了 Streamlit 的各种功能与特性，为你构建自己的 web 应用提供了坚实的理解基础。本部分对建立后续章节所涉及的更高级概念所需的知识和技能至关重要。

本部分包含以下章节：

• 第一章，了解 Streamlit——简要概述

• 第二章，设置 Python 编程环境

• 第三章，探索 Streamlit 的功能与特性

第一章：了解 Streamlit —— 简介

Streamlit 是一个 Python 库，允许开发者快速创建互动式 Web 应用程序，支持绘图、控件、主题等功能。它提供了一个直观且易于使用的界面，使得创建自定义 Web 应用程序变得简单，并且只需最少的编码工作。它提供了一系列内置的控件和组件，如滑块、下拉框和文本输入框，可用于创建互动式可视化和仪表盘。该库还支持实时数据更新，并且能够与流行的数据科学工具集成，如 pandas、Matplotlib 和 TensorFlow。

与其他 Python Web 应用程序库（如 Flask 和 Django）相比，Streamlit 更注重提供一个直观的界面，用以以简单且快速的方式创建互动式可视化和仪表盘。Flask 和 Django 是更通用的 Web 框架，适用于更广泛的 Web 应用程序，但它们需要更多的编码工作来设置和定制。Streamlit 主要用于原型制作和创建小型至中型 Web 应用程序，它使得加速开发过程成为可能，帮助程序员以用户友好和引人入胜的方式与他人分享成果。

在本章中，我们将首先了解计算方法的变化，并介绍 Web 应用程序的一些关键优势。接下来，我们将了解 Python Web 框架的重要性。之后，我们将重点讨论何时使用本地方法，何时使用云计算。然后，我们将学习 Streamlit 的一些非常有趣的功能。最后，我们将强调将创意转化为原型的重要性。

在本章中，我们将涵盖以下主要内容：

• 计算方法的变化

• 完整 Python Web 框架的重要性

• 本地与云计算

• 用于 Web 应用程序的 Python 库（Flask 和 Django）

• Streamlit 功能的示例

将创意转化为原型的重要性 —— 计算方法的变化

计算在过去几十年中取得了巨大进展。早期的系统依赖于在个人计算机上安装和运行的程序。用户购买软件许可证，自行安装程序，然后从桌面访问这些应用程序。如果你想在另一台计算机上使用某个应用程序，你也需要在那里安装它。

这种模型主导了计算领域多年，但其局限性明显且静态。它缺乏互联互通，不促进机器之间的真实协作或数据共享。用户只能使用自己本地安装的特定软件，并且需要在每台计算机上管理独立的文件和设置副本。

网络的崛起、改进的连接性以及早期互联网的出现开始改变这一局面。分布式软件、实时协作以及跨设备同步信息的新可能性不断涌现。用户不再需要安装和管理多个重复的软件。应用程序可以从任何有互联网连接的地方访问。

基于 Web 的服务推动了这一转变，加速了向更以云为中心、支持移动设备的计算方式的过渡。应用程序开始直接在 Web 浏览器中启动，而不再需要安装。数据和文件可以存储在中央云平台中，而不是本地存储，新设备如智能手机、平板电脑和笔记本电脑使得云计算和 Web 更加具有吸引力。

现在，人们的数字生活通过 Web 服务、移动应用程序和云平台在云端进行。从商业软件、媒体、生产力工具、教育资源到更多领域，几乎所有的内容现在都有以云为基础和 Web 为中心的替代品。云计算提供了在任何连接设备上的无处不在的访问，服务间的持续集成和互操作性，自动更新、可扩展的资源、协作功能、移动优化和成本效益。

本地软件在某些情况下仍然被使用，但它正逐渐被视为受限或过时。向云计算和 Web 计算的过渡是迅速且具有巨大影响的。它重塑了我们的工作、学习、娱乐、沟通、媒体消费等方式。这一转型可能还会随着增强型 AI 技术、物联网设备、虚拟现实/增强现实系统以及其他创新深度融入 Web 服务和云平台而加速。

我们已经远远走出了过去的软件下载时代，但未来的潜力巨大。云计算正在重新构想技术，以适应我们现代高度互联和日益移动化的生活方式。而这种无处不在的、以 Web 为主的计算新时代将会持续下去。

但是，考虑到本书讨论的是 Web 应用程序，那么到底什么是 Web 应用程序呢？

Web 应用程序是运行在Web 浏览器中的软件应用程序。

它通过网络访问，并通过 Web 浏览器提供互动的用户体验。

Web 应用程序的目的是通过使用标准的 Web 技术，在网络上提供软件功能和数据的访问。它们允许用户从任何连接互联网的设备上，通过 Web 浏览器访问功能和内容。

当你需要为大量用户提供软件和数据访问时，Web 应用程序非常有用，可能是在一个组织内，或是向外部客户和合作伙伴提供服务。它们提供了一个便捷、一致的界面，可以跨设备和位置使用。

下面是 Web 应用程序的一些主要优点：

• 可访问性：只要有互联网连接和 Web 浏览器，随时随地都能使用。

• 一致性：在任何设备上都可以使用相同的界面和功能。外观和体验在各平台间（桌面、移动设备、平板等）保持一致。

• 集中管理：可以同时更新所有用户的 Web 应用程序。新功能和增强会自动推送到所有用户。

• 集成：可以通过标准 Web 技术与其他 Web 服务、数据库、API 等进行集成。

• 可扩展性：能够支持大量的同时用户，且额外的开销最小。可以根据需要分配额外的计算资源。

• 成本效益：通常，相较于独立软件应用程序，开发和部署 Web 应用程序更加实惠且经济。

总结来说，当你需要通过网络向大量用户提供应用程序及其数据时，使用 Web 应用程序是最佳选择，因为它们具备 Web 应用程序所提供的可访问性、一致性、集成性和可扩展性。这是一种非常高效且受欢迎的软件解决方案。

现在我们已经了解了 Web 应用程序的好处，我们可以进入下一部分，理解完整的基于 Python 的框架的重要性。

完整 Python Web 框架的重要性

今天，在云端构建和发布 Web 应用程序依赖于几个关键框架、语言和技术。以下是一些最重要的：

• Web 框架：像 React、Angular 和 Node.js 这样的框架使 Web 应用程序的开发变得更加简单高效。它们处理一些关键任务，如路由、状态管理、构建组件和处理事件。开发人员可以专注于编写特定应用程序的代码，而无需构建基础设施。

• 服务器端语言：如 PHP、Ruby on Rails、Python、Java 和 C# 等语言用于服务器端，处理请求、访问数据库、构建 API 和生成动态 Web 内容。Node.js 使用 JavaScript，也已成为服务器端开发中非常流行的选择。

• JavaScript：JavaScript 是前端 Web 的主要语言。它用于构建客户端界面、动画和创建交互式内容、处理用户输入、通过 HTTP 请求获取数据等。现代 JavaScript 框架也促进了单页应用程序的崛起。

• 版本控制：像 Git 这样的工具帮助开发人员协作并保持项目的代码和文件历史同步。它们提供了诸如分支、合并、提交、推送到远程仓库和回滚更改等有用的功能。

• 部署：有多种部署 Web 应用程序的选项，包括服务器管理服务，如 AWS EC2、托管服务如 Firebase、虚拟私人服务器（VPS）和裸机服务器。持续集成和部署帮助快速、无缝地上线新功能和代码。

• 容器化：Docker 容器将 Web 应用及其所有依赖项打包到隔离的、可移植的、轻量级的环境中。它们帮助保持开发、预发布和生产环境的一致性和优化。容器简化了 Web 应用的部署和扩展。

• 应用程序接口（APIs）：这些接口允许 Web 应用与外部服务集成，并无缝地传递数据。API 为用户认证、支付处理、定位服务、社交网络等功能提供支持，而无需多个 Web 应用共享代码库。

正如我们所看到的，今天有许多工具和技术可以帮助我们专业高效地构建、部署、扩展和集成 Web 应用。通过有效组合，它们能够实现快速、强大的开发周期、优化的性能以及服务之间的无缝连接。此外，随着技术的不断发展，这些最佳实践和技术栈将适应新的需求。

这种丰富多样的框架、语言和技术是我们手中的强大武器，它使我们能够实现几乎任何想法。然而，这也要求我们不断学习，并具备对许多不同主题的深入了解。

因此，如果有一个完全可用的Python框架，作为一种简单的编程语言，能够帮助我们快速开发 Web 应用，并使部署过程变得简单流畅，那就再好不过了。这个问题的答案就是Streamlit。

所以，用几句话总结，Streamlit 使我们更容易开发、实现和部署我们的想法，并将其转化为精彩的 Web 应用。但该产品是应该在本地机器上提供，还是在云端提供呢？

本地与云端

在开发软件应用程序与基于云的 Web 应用程序时，有一些关键的区别需要注意：

• 安装：传统软件需要在本地计算机或服务器上安装。这包括复制文件、设置权限、可能需要配置设置以及其他安装步骤。托管在 AWS、GCP 和 Azure 等云平台上的 Web 应用由云服务提供商部署和管理，无需本地安装。

• 更新：软件更新通常需要在安装了该应用程序的所有机器上手动安装。托管在云上的 Web 应用会在开发者推送新代码时自动更新，用户始终能获得最新版本，无需手动操作。

• 可扩展性：托管传统软件应用的服务器需要手动配置，才能根据需要扩展资源。云基础设施可以通过 API 调用或自动扩展策略按需无限扩展。可以通过编程方式分配更多或更少的 CPU、内存、磁盘空间等资源。

• 可用性：传统软件的正常运行时间取决于本地基础设施。由于个别服务器、网络设备、数据库服务器等问题，可能会发生停机。Web 应用得益于可扩展云基础设施的高可用性。区域、可用区和复制有助于减少停机。

• 移动性：传统软件通过专用的桌面或移动应用访问。Web 应用可以通过任何现代浏览器在任何连接互联网的设备上访问，包括笔记本、手机、平板、电视、手表等。

• 协作：多个开发者可以同时协作，编辑代码并将更新部署到托管在版本控制库和云托管服务上的 web 应用程序中。通过 Git 等源代码版本控制系统，代码库的修改可以轻松同步。并发编辑可能会导致传统开发工作流程中的冲突机会。

• 成本：传统基础设施通常需要购买和维护硬件以及软件许可证，这会带来较大的前期成本。云计算采用按需付费模式，可以通过缩减或关闭未使用的资源来降低成本。不需要大额资本支出。资源可以根据需求变化按需扩展。

总结一下，在云平台上开发 web 应用程序与构建传统软件安装有显著不同。Web 应用通常更容易部署、更新、扩展，并且具有高度可用性和移动性，支持更多的并发协作，且具有较低的前期成本和更灵活的定价模式。

正如我们所见，云平台具有许多优势，应该成为我们的首选。现在，让我们深入了解一下最流行的 Python web 应用库的差异和具体功能。

用于 web 应用的 Python 库（Flask 和 Django）。

这里是一些流行的 Python 库用于构建 web 应用的概览：

• Flask：一个轻量级且灵活的 web 框架，非常适合构建小型到中型的应用程序。它的一些主要特点如下：

  • 它具有一个简洁且直观的核心，可以轻松扩展。这使得它适合任何希望创建 web 应用程序的人。

  • 它支持扩展并与许多 Python 库集成。这使得你可以轻松扩展其功能。

  • 它内建支持路由、模板、文件上传等功能，这意味着构建 API 和渲染 HTML 模板非常简单。

  • 它适用于小型和大型项目。许多大公司，如 Airbnb 和 Pinterest，都使用 Flask。

  让我们看看一些应该使用 Flask 的场景：

  • 构建一个小型到中型的网站或 web 应用。

  • 当我们需要比微框架提供的更多灵活性和控制时。

  • 需要支持扩展和与其他库的集成。

  • 当我们熟悉 Python 并且想要一个易于上手的框架时

• Django：一个高级 Python web 框架，鼓励快速开发和清晰的设计。它适用于大型项目和应用程序。以下是它的一些主要特点：

  • 它具有一个对象关系映射器（ORM），支持多种数据库。

  • 它具有权限系统，并内建对用户、组、权限等的支持。

  • 它具有良好的扩展性，并且被 Instagram、Netflix、Spotify 等大公司使用。

  • 它有许多可用的插件库和集成。

  • 它强制执行一定的结构和最佳实践。对于新手来说，这可能是好的，但也可能带有一定的限制。

  让我们来看一下什么时候应该使用 Django：

  • 用于构建大型复杂网站或 web 应用

  • 当我们需要一个结构化且可扩展的框架时

  • 当我们需要开箱即用的高级功能，如身份验证、权限管理、管理员等时

  • 当我们需要一个能够良好扩展并支持大量流量和负载的框架时

  • 当我们偏好强制执行的严格结构和最佳实践时

总结来说，对于小到中型 web 应用，选择 Flask；对于大型、复杂的 web 应用，具有高级功能的选择 Django。

如果你想轻松编写具有美观且实用的仪表板的 web 应用，选择 Streamlit。在我们迄今描述的所有工具和解决方案中，它是一个重要的 Python web 应用框架，具有以下几个关键原因：

• 便捷性和易用性：Streamlit 极大简化了在 Python 中构建 web 应用的过程。它在幕后处理复杂任务，如设置服务器、路由、模板、数据库等，使开发人员可以专注于应用程序逻辑。这使得开发过程更快、更易于访问。

• 集成 Python 支持：Streamlit 允许你仅使用 Python 代码构建完整的 web 应用。无需额外的模板、路由设置或数据库配置。开发人员可以利用 Python 的所有库和特性，无需学习额外的语言或框架。

• 快速原型设计：Streamlit 的便捷和轻量特性使其非常适合快速构建原型、仪表板、演示和最小可行产品。新想法可以非常迅速地转化为可分享的 web 应用。

• 可重用组件：Streamlit 拥有一个预构建的前端和后端组件库，如下拉框、文件上传、搜索栏、分页等。这些组件有助于加快开发进度，并确保一致的用户体验。

• 云部署：Streamlit web 应用可以部署在主要的云提供商上，包括 AWS、GCP、Azure 和 Docker。这提供了可扩展的基础设施、全球覆盖和随着应用程序增长而灵活调整资源使用的能力。通过无缝集成，部署变得更加简化。

• 互动仪表板：Streamlit 专注于互动应用程序和仪表板。数据科学家和分析师使用它来创建富有洞察力的探索性数据分析工具和报告。用户可以过滤、排序、透视、搜索、选择特征，并从多个角度检查数据。

• 社区与支持：Streamlit 拥有一个活跃的社区和团队，支持使用问题、贡献文档、接受拉取请求并及时处理安全问题。该项目还得到了主要科技公司和研究人员的支持。

总结来说，Streamlit 提供了一个易于使用、集成化和可扩展的框架，用于构建和部署完整的 Python Web 应用程序。它使你能够更快地将创意转化为应用程序，简化低级别设置，促进原型开发和实验，支持互动可视化和仪表板，并支持来自开放社区的自定义和贡献。总体而言，Streamlit 使得 Python Web 开发更加易于访问、高效和有影响力。

到目前为止，我们已经介绍了主要的 Python Web 应用程序库及其特点。由于本书将重点介绍 Streamlit，让我们看看它的能力。

Streamlit 功能示例

这里有一些 Streamlit 功能的有用示例：

• 互动数据探索：Streamlit 非常适合构建允许用户互动探索数据集的仪表板。用户可以过滤、排序、透视、搜索、选择特征，并从多个角度分析数据。

• 原型设计最小可行产品（MVPs）：Streamlit 易于使用，非常适合快速构建原型和 MVP。新想法可以在没有复杂设置的情况下快速转化为可共享的 Web 应用程序。这种“先写代码”方法加速了迭代和反馈。

• 模型部署：Streamlit 应用程序可以将训练好的机器学习（ML）模型作为 Web 服务进行公开。这使得其他应用程序、脚本或用户能够与模型进行交互并进行预测。应用程序变得可部署，成为高效的机器学习应用和平台。

• 嵌入：Streamlit 代码和小部件可以嵌入到 Jupyter 笔记本、JupyterLab 和 Jupyter Notebook 界面中。这种与数据科学生态系统的紧密集成简化了从笔记本构建应用程序以及从应用程序返回笔记本的过程。

• 协作编辑：Streamlit 实时流式传输编辑，支持无缝共同编辑代码库。多个开发者可以同时在同一个 Streamlit 应用上协作，修改内容即时显示。避免冲突，实现高效协作。

• 自动化测试：Streamlit 包含用于编写自动化测试的工具，包括测试套件、单个测试函数、夹具、存根、模拟等。测试覆盖率报告确保新功能不会破坏现有功能。持续集成工作流会在每次提交时运行测试，从而确保代码的稳定性和高质量。

• 用户界面（UIs）作为代码：Streamlit 的语法基于 Python，视用户界面为代码。这种“UI 作为代码”的方法相比图形化工具提供了许多优势，包括版本控制、可复现性、协作以及与应用程序其余代码库的集成。Streamlit 的用户界面灵活、可编程，并且在构建时得到了优化。

• 可复现的研究：Streamlit 的应用程序是逐行执行的，构建了一个完整的、互动的、可分享的环境。所有的输入、代码、输出和小部件值都会被记录下来，允许任何人复现分析和结果。应用程序可以被打包和归档，然后重新打开并继续使用。Streamlit 促进了透明和可复现的数据科学。

• 自动化实验：Streamlit 支持模块化函数、类、循环、条件语句等，可以帮助你自动化实验工作流程。基础设施可以通过编程进行扩展和缩减，可以系统地测试不同的模型和超参数，同时 A/B 测试功能和用户体验元素变得可行。自动化减少了人工工作量，并能够更快地发现最佳的组合。

Streamlit 是一个极其多功能的工具，可以帮助我们在相对较短的时间内，以可承受的努力创建几乎任何我们心中设想的应用程序。考虑到这一巨大优势，让我们来理解为什么在短时间内将我们的想法转化为可工作的原型，可能是我们手中最有用的武器。

将一个想法转化为原型的重要性

将一个想法转化为具体的原型越快，机会和优势就越大。尽可能快速地构建粗略原型有几个关键的好处：

• 尽早获取客户反馈：通过创建体现某个想法的原型，即使是一个基础版本，你也可以更早地获得真实的用户反馈。客户可以体验这个想法，评论他们喜欢和不喜欢的地方，并提出重要的改进意见，使最终产品更有用、更具吸引力。尽早采纳反馈可以避免在开发不符合客户需求的功能或设计时浪费时间和资源。

• 尽早发现缺陷和问题：早期原型可以突出显示一个想法在实际操作中可能出现的问题。那些概念上难以识别的问题，在开发原型时会变得一目了然。这些问题随后可以得到解决，替代方案可以在投入大量时间之前进行探索。相比于几乎完成的产品，改变原型的方向要容易得多。

• 评估可行性和热情：通过向其他人展示原型，包括团队成员、经理、导师和投资者，你可以了解它们看起来有多么引人注目和激动人心。在早期阶段的热情和验证能提供信心，证明一个想法具有真正的潜力和吸引力。缺乏热情则表明这个想法可能不像人们最初想的那样有前景。

• 快速迭代与改进：原型设计本质上是一种迭代式方法。你构建原型，获取反馈，做出修改，重新构建，然后继续完善。每一次迭代都会改善原型，使其更加吸引人和实用。从一个基础的模型开始，通过持续的反馈和开发，它能迅速发展成一个引人入胜的产品概念。

尽可能快速且频繁地将想法转化为原型，能带来更好的产品、更开心的客户、更高的团队与合作伙伴热情，并且更有可能打造出最终在市场上成功的产品。早期的迭代原型设计为每个开发阶段和产品设计带来了机会和优势。有了快速的原型设计，你可以灵活调整、改进和创新，走向成功。

总结

在本章中，我们从理论角度介绍了 Streamlit，并探讨了几条使这一框架成为快速且轻松地创建 Web 应用程序和原型的绝佳工具的理由。将一个想法快速、轻松、无痛地转化为原型——甚至更好，转化为一个可工作的 Web 应用程序——是我们手中的一项强大武器。只有通过使用这样的库，才能真正发挥其强大功能，因此我们不再等待，开始设置我们的编码环境吧！

要开始编码，我们仍然需要一些东西：一个良好的操作系统，安装了 Python，集成开发环境（IDE），虚拟环境等等。

在下一章，我们将确保我们所需的一切都能可用并完全正常运行。别担心——这次安装将为我们未来的所有开发打下基础！

第二章：设置 Python 编程环境

在开始使用 Streamlit 编程之前，我们需要准备好开发环境。设置 Python 编程环境，特别是在 Linux 系统中（例如 Ubuntu），可以通过几个简单的步骤完成：更新（或安装）Python，安装代码编辑器或 IDE（可以选择免费的，例如Sublime Text），设置虚拟环境（本书中使用的是pipenv，但其他工具也可以），安装依赖项。完成这些步骤后，我们应该能拥有一个完全可用的 Python 编程环境（无论是在 Ubuntu 还是其他任何操作系统（OS）上），可以用于开发我们的 Web 应用。

本章将介绍环境配置。我们需要准备好所有工具，以便顺利、高效地使用 Streamlit 进行开发。因此，首先，我们需要选择操作系统（OS），可以是物理机或虚拟机，支持 Windows、macOS 或 Linux（我们首选的解决方案）。接下来，我们需要决定使用哪种编辑器或集成开发环境（IDE）来进行编码。某些编辑器非常高级且昂贵，而其他一些则简单但免费的。最后，我们将讨论虚拟环境及其使用优势。

在本章中，我们将讨论以下主要内容：

• 设置操作系统

• IDE 选择

• 什么是虚拟环境？

技术要求

在本章中，我们将使用以下库、包和工具：

• VirtualBox

• Ubuntu

• Python 3

  • Sublime Text

  • pipenv

  • pipenv-管道

设置操作系统

拥有一个高效的环境是至关重要的。操作系统是所有内容运行的地方。即使我们首先需要选择操作系统，从这个角度来看，我们其实是幸运的，因为 Streamlit 是基于 Python 的框架。这个编程语言几乎可以在任何操作系统上运行，所以我们可以自由选择我们想要的操作系统——例如 macOS、Windows、任何 Linux 发行版，或者如果你喜欢，甚至是任何 BSD 系统。

出于几个我们稍后会解释的原因，我们首选 Ubuntu。如果你对其使用或安装有所顾虑，请放轻松，因为首先，Ubuntu 使用起来非常简单。而且，如果你不想将其作为唯一操作系统安装在机器上，你完全可以使用虚拟化软件，这是一种非常有用的工具，可以让你在一个操作系统内部运行另一个操作系统！此外，掌握如何管理虚拟化工具并在其上安装任何操作系统，将是未来非常有用的技能！

由于我们不仅需要操作系统，还需要其他工具（如 IDE），因此最佳选择可能是采用免费工具以保持成本尽可能低。因此，为了最小化开支，我建议你使用 Ubuntu，这是一款非常用户友好、易于使用和安装的 Linux 发行版。你可以从 Ubuntu 的官方网站（ubuntu.com/）下载并安装到你的计算机上：

图 2.1：Ubuntu 首页

如果你不想将 Ubuntu 与主操作系统并行安装（即不使用“双重启动”模式），并且想避免在启动计算机时需要选择 Linux 发行版，那么可以考虑使用虚拟化软件。最终的选择取决于你的个人喜好。主要目标是使你能够在主操作系统中运行 Ubuntu，将其视为一个普通的软件程序。一种非常有效且免费的解决方案是 Oracle VirtualBox，它适用于任何类型的操作系统：

图 2.2：VirtualBox 首页

无论你是使用真实的 Ubuntu 操作系统还是虚拟化版本，都没有关系；关键是你能够启动并使用它。当你运行新安装的 Linux Ubuntu 时，请在终端中输入以下命令进行更新：

sudo apt update

现在，是时候检查系统是否安装了 Python 了，因此打开终端并简单输入以下命令：

python3

你应该得到一些内容，类似于以下图片：

图 2.3：Ubuntu 终端中的 Python 3

如我们所见，Python 3 已经在 Ubuntu 中安装，当我们输入python3时，可以进入 Python 并开始编程。在图 2.3中，我们只打印了一个漂亮的Hello Streamlit!消息，然后退出。

如果在输入python3时遇到错误，可能是你的系统将 Python 作为python而不是python3。在这种情况下，你应该使用python而不是python3。

让我们检查一下pip是否安装在我们的 Ubuntu 系统中。输入以下命令：

pip --version (or pip3 --version)

如果pip没有安装，我们可以通过输入以下命令来安装它：

sudo apt install python3-pip

在下图中，我们可以看到pip安装是多么简单：

图 2.4：pip3 安装

现在，为了熟悉pip，我们将安装几个将来非常有用的工具：tree和terminator。

tree是一个简单的工具，用于在终端中以树状图形式可视化文件和文件夹。我们可以通过输入以下命令来安装它：

sudo apt install tree

安装完成后，只需输入tree，你就能看到工作目录的漂亮树状图，如下图所示：

图 2.5：“tree”命令

terminator是一个替代终端，具有一些高级功能，比如水平和垂直分屏、焦点切换、缩放和偏好设置，但最重要的功能肯定是可以根据需要将屏幕分割成多个分屏。让我们通过输入以下命令来安装它：

sudo apt install terminator

然后，安装完成后，只需输入terminator。如下面的图所示，通过右键点击，你可以创建任意数量的新的终端分屏，无论是垂直的还是水平的：

图 2.6：Terminator 及其分屏

最后，最重要的是要确保 Python 能够运行。我们更倾向于在 Ubuntu 上运行它，这样既便宜又简单，但如果你想使用自己的操作系统，也完全没有问题。只需要再次确认你是否已经安装了 Python 3 版本，如果没有，请从 Python 的官方网站下载并安装它（www.python.org/），并选择与你的操作系统相匹配的版本：

图 2.7：Python 官方网站

到这个阶段，我们已经完成了大约 50%的工作，因为我们已经有了一个新鲜的操作系统，并且安装了 Python 和pip，同时还准备了一些很不错的工具，比如 terminator 和 tree。我们现在缺少的就是一个漂亮的编辑器，所以让我们来安装一个吧！

IDE 选择

拥有一个好的 IDE 对于 Python 编程非常重要。它提供了许多有用的功能，帮助你更快速、更少出错地编写代码，并保持代码整洁且结构良好。例如，自动完成功能可以通过在你输入时建议代码补全，从而节省大量时间。这减少了打字错误。语法高亮使代码更易读，通过为不同的元素上色来区分。IDE 中的强大调试工具使得调试变得更加轻松和高效。重构功能有助于保持代码的结构清晰和可读。代码风格检查（Linting）可以检查你的代码是否符合风格规范，提高代码质量。

市面上有一些优秀的工具，比如 PyCharm 和 VSCode，但这些工具通常比较重且价格略贵。为了我们的编程会话，我们可以使用一款相对轻量的应用程序，至少在开始阶段，它可以免费安装和使用：Sublime Text。

Sublime Text 拥有许多不错的功能，你可以自行探索，包括编程语言识别和语法高亮。你可以直接从它的主页安装（www.sublimetext.com/），并仔细按照说明进行操作：

图 2.8：Sublime Text 主页

现在，在 Terminator 的工作目录中，只需输入subl .，Sublime Text 就会打开。请在右下角的扩展列表中选择Python：

图 2.9：在 Sublime Text 中选择 Python 语法

考虑到 Python 已安装且 Sublime Text 已配置，我们可以立即开始使用 Streamlit 进行编码，但这不是最佳选择。在 Python 中，每次开始一个新项目时，我们倾向于安装一些特定的包和库，如果每次都把这些新的东西安装到相同的基本环境中，迟早我们环境会变得一团糟。避免这种潜在混乱的一个非常干净的方式就是使用虚拟环境，接下来我们来看看它们是什么。

什么是虚拟环境？

虚拟环境是 Python 开发中的有用工具，它允许你将与特定项目相关的包安装与系统的 Python 安装隔离开来。这意味着你可以为不同的项目创建具有不同包依赖项的独立环境。

使用 Python 标准库中的 venv 模块创建虚拟环境非常简单。基本步骤如下：

1. 通过运行以下命令创建虚拟环境：

   venv folder that contains the isolated environment.
   

2. 激活虚拟环境。

   在 Unix/Linux 系统中，运行以下命令：

   pip:
   
   

   pip install package-name

3. 完成后，你可以通过以下命令停用环境并切换回全局 Python 安装：

   deactivate
   

虚拟环境使你能够轻松尝试不同的包组合，而不会影响全局的 Python 安装或其他虚拟环境。

若要全面了解 Python 中的虚拟环境，请查看 Real Python 网站 (realpython.com/python-virtual-environments-a-primer/#use-third-party-tools)：

图 2.10：Real Python 网站上的 Python 虚拟环境

除了内置的 venv 模块外，还有一些第三方工具，如 virtualenv 和 pipenv，用于管理 Python 中的虚拟环境。以下是使用这些第三方工具的各种好处：

• virtualenv 和 pipenv 工具具有一些附加的便捷功能，使它们比 venv 模块更易于使用。例如，pipenv 会自动创建一个 Pipfile 来跟踪包的依赖关系和版本。

• pipenv 同时管理环境和包依赖关系，使你的设置完全可重现。

• venv 和 pipenv 都有帮助将开发依赖项与生产依赖项分开管理的功能。

• venv 模块是 Python 标准库中的一个较新添加的功能。

• virtualenv 和 pipenv 是第三方工具，它们可以与不同版本的 Python 一起使用，不像 venv 只能与特定的 Python 安装版本兼容。

因此，总结一下，虽然venv模块是 Python 标准库的一部分，但像poetry``pipenv这样的第三方工具提供了更多功能、灵活性和兼容性，用于管理您的虚拟环境。但对于简单的需求，venv模块运作良好，并且具有内置于 Python 中的优点。

在前面列表中提到的所有原因足以使pipenv成为我们管理和创建虚拟环境的选择。

现在，我们将继续进行pipenv的安装，并描述其主要命令。

我们可以通过输入以下命令一起安装pipenv和pipenv-pipes：

sudo python3 –m pip install pipenv pipenv-pipes

接下来，让我们创建一个名为pipenvtest1的测试目录：

mkdir pipenvtest1 && cd pipenvtest1

使用列表或树，我们可以检查此文件夹是否为空：

pipenv --venv

我们将得到显示在图 2**.11中的输出。它告诉我们，目前没有虚拟环境：

图 2.11：pipenv --venv

在此时执行pipenv shell命令时，pipenv将在当前目录中搜索名为Pipfile的文件。此文件是创建虚拟环境所必需的。如果没有 Pipfile，则将与虚拟环境一起创建，并且我们将在屏幕上得到成功创建虚拟环境的消息：

图 2.12：虚拟环境创建

现在，通过从工作目录启动 Sublime Text，我们可以看到已创建了一个Pipfile，我们可以探索其内容。它包含有关虚拟环境的所有信息，例如 Python 版本、已安装的软件包（目前为空），以及开发软件包（同样为空）：

图 2.13：Pipfile 内容

要在我们的新虚拟环境中安装任何软件包，我们只需输入以下内容：

pipenv install <package_name>

例如，我们可以尝试使用numpy：

图 2.14：软件包安装

正如我们可以在屏幕上读到的那样，软件包已成功安装，Pipfile已更新，现在包含numpy，并且已创建和更新了一个新的包含所有哈希和依赖项列表的Pipfile.lock文件。让我们在 Sublime Text 中看看它：

图 2.15：具有软件包和 Pipfile.lock 的 Pipfile

另一个非常有趣的选项是在Pipfile.lock文件中创建一个需求文件，在我们部署 Web 应用程序时非常有用。因此，要创建一个requirements.txt文件，我们只需输入以下内容：

pipenv lock –r > requirements.txt

请注意，从pipenv版本 2022.8.13 开始，上述命令已更改为以下内容：

pipenv requirements > requirements.txt

在pipenv内部，我们可以通过使用run指令运行任何类型的命令。因此，如果我们想要运行 Python，我们只需输入以下内容：

pipenv run python

通过运行 pipenv check 命令，可以检查包的更新，如果发现有更新，将会相应地执行更新。

卸载一个包（并从 Pipfile 中移除它）非常简单。实际上，我们只需要输入以下命令：

pipenv uninstall <package_name>

除了 pipenv，我们还安装了 pipenv-pipes，这是一款很有趣的工具。通过在终端中输入 pipes，我们可以获取已安装虚拟环境的列表。然后，我们可以使用光标在列表中浏览，选择所需的虚拟环境进行激活，如下图所示：

图 2.16：管道

当我们处于虚拟环境中并想要退出，恢复到原始状态时，只需在终端输入 exit。

要删除一个虚拟环境，我们可以进入它的目录并执行以下命令：

pipenv --rm

这个命令会移除虚拟环境，但不会删除目录中的文件：

图 2.17：虚拟环境删除

如果我们想要删除目录及其所有文件，则需要手动操作。

总结

在这一章中，我们为接下来的活动做好了准备。我们学会了如何创建一个开发环境，同时保持低成本（几乎是免费的）。因此，我们决定使用 Ubuntu 作为我们的主要操作系统。随后，我们确保已经安装了 Python，并安装了 pip。选择 IDE 也很简单，因为我们选择了 Sublime Text，一个轻量级、功能强大且先进的文本编辑器。

之后，我们集中在 Python 的虚拟环境上。在这种情况下，我们选择了 pipenv，因为它功能强大、易于使用，并且拥有许多高级功能。我们花了一些时间对这个工具及其主要功能和使用说明进行了较为全面的概述。

现在，一切准备就绪，所以在下一章，我们将进行一个关于 Streamlit 基本功能的速成课程。你准备好了吗？

第三章：探索 Streamlit 的特性和功能

本章是一个面向初学者的教程，介绍了 Streamlit Python 框架的核心功能，旨在帮助您快速轻松地开始使用该库。本章涵盖了 Streamlit 的基本概念，如创建和自定义小部件、布局用户界面，以及添加可视化和图表。

到本章结束时，您应该能够创建并运行 Streamlit 应用程序，并且对该库的功能和特性有深入的理解。这是我们共同激动人心的旅程的第一步！

在本章中，我们将涵盖以下主要主题：

• 安装并启动 Streamlit

• Streamlit 特性和小部件

• 数据框、图表和可视化

• 日期、时间等

技术要求

• 在本章中，我们将使用以下库、包和工具：

  • Sublime Text

  • Python 3

  • pipenv

  • streamlit

  • CSV 文件

• 本章的代码可以在本书的 GitHub 仓库中找到：github.com/PacktPublishing/Web-App-Development-Made-Simple-with-Streamlit/tree/fcb2bd740a2df7263b4470164805926fee3157a1/Chapter03

安装并启动 Streamlit

最后，我们准备好编写代码来创建美丽的 Web 应用程序了！我们从哪里开始？我们必须做的第一件事是安装 Streamlit。

所以，让我们创建一个新的目录——我们将其命名为 streamlit_course。进入该目录后，通过输入常用的 pipenv shell 命令来准备一个新的虚拟环境。运行 pipenv shell 命令后，您将看到如下输出：

图 3.1：创建 streamlit_course 虚拟环境

安装 Streamlit 非常简单——只需使用一个简单的命令，如其官方网站上所示 (www.streamlit.io)：

图 3.2：安装 Streamlit

由于我们正在使用 pipenv 和刚刚创建的 streamlit_course 虚拟环境，我们需要稍微修改图 3.2中建议的指令，如下所示：

pipenv install streamlit

您将得到以下结果：

图 3.3：使用 pipenv 安装 Streamlit

这样，Streamlit 将轻松安装，并且 Pipfile 会被更新。

现在，让我们通过输入以下命令来创建一个空文件，用作我们的 Python 脚本：

touch app.py

如我们所见，在 streamlit_course 目录中，我们有三个文件：

图 3.4：streamlit_course 目录中的文件

到目前为止，我们已经安装了 Streamlit，并且有一个空的 Python 文件。虽然这并不多，但我们已经准备好启动我们的第一个 Web 应用了！

启动 Streamlit 的指令非常简单——只需键入 streamlit run <python_file_name.py>，在我们的例子中，Python 文件就是我们刚刚创建的空白 app.py 文件。然而，由于我们处在一个 pipenv 虚拟环境中，我们必须告诉 pipenv 我们希望启动某个应用。因此，我们需要写下以下内容：

pipenv run streamlit run app.py

通过这种方式，pipenv 启动了 Streamlit，运行 app.py 文件。我们的浏览器会打开一个空白页面，但如果我们仔细查看地址栏，会看到 localhost:8501 上有东西在运行。我们的 Streamlit Web 应用在本地机器上运行，使用的是标准的 8501 端口（如果终端要求你输入电子邮件，直接按 Enter 键即可）：

图 3.5：Streamlit 运行在 localhost:8501

此时，我们的 Web 应用可以通过添加控件和元素来进行改进。在我们的 terminator 中打开另一个终端（另一个平铺窗口），进入虚拟环境，并用 "``subl ." 启动我们的 Sublime Text 编辑器。

Streamlit 特性和控件

第一步已经完成：Streamlit 已经启动并运行。现在我们需要做的是添加文本、控件、元素等，制作既美观又能正常运行的内容。

要开始用漂亮且实用的控件填充我们的 Web 应用，我们需要编写一些 Python 代码。最佳方式是将 Sublime Text 和浏览器并排放置，正如下图所示：

图 3.6：Sublime Text 和浏览器并排显示

这种可视化非常方便，因为我们可以立即看到我们对代码所做的任何更改（实时显示，只要我们保存代码更改），在编辑器中直接显示，在浏览器中只需从 Web 应用的右上角菜单中选择 Always Rerun：

图 3.7：代码更改和 Always Rerun

所以，让我们导入 Streamlit（使用 st 作为别名）并开始处理一些文本。我们可以编写以下代码：

import streamlit as st
st.title("Streamlit Basics")

结果如 图 3.8 所示：

图 3.8：代码更改及其对 Web 应用的影响

st.title 返回一长串文本。我们可以在 Sublime Text 中使用许多其他文本维度。例如，我们可以编写并保存以下代码：

st.header("This is a header")
st.subheader("This is a subheader")
st.text("This is a simple text")
st.write("This is a write dimension")

由于我们已经选择了 Always Rerun，我们会立即看到浏览器中的 Web 应用发生变化，展示出我们希望可视化的标题、副标题、文本以及写入文本的维度：

图 3.9：不同的文本维度

Streamlit 甚至可以直接管理 markdown。这非常简单，因为我们只需要使用 markdown 并将文本传递给括号。例如，我们可以编写如下内容：

st.markdown("[Streamlit](https://www.streamlit.io)")

这样，我们可以在屏幕上写下“Streamlit”一词，作为指向官方 Streamlit 网站的超链接。如果我们希望将链接直接显示在屏幕上，可以写如下内容：

st.markdown("https://www.streamlit.io")

在 Streamlit 中，我们可以非常简单地使用 HTML —— 只需要创建一个包含所有 HTML 代码的变量，然后将其放入一个带有 unsafe_allow_html 参数设置为 True 的 markdown 指令中。让我们来看一下：

html_page = """
<div style="background-color:blue;padding:50px">
<p style="color:yellow;font-size:50px">Enjoy Streamlit!</p>
</div>
"""
st.markdown(html_page, unsafe_allow_html=True)

这是我们得到的结果：

图 3.10：Markdown 与 HTML

查看将 unsafe_allow_html 设置为 False 时会发生什么。

彩色文本框

在文本方面，我们可以使用不同颜色的文本框来指示警告、错误等。这样的颜色编码在构建网页应用时非常有用。让我们看一下代码：

st.success("Success!")
st.info("Information")
st.warning("This is a warning!")
st.error("This is an error!")

第一个代码块返回一个绿色框，里面有一些文字；第二个返回一个浅蓝色框，包含文字；第三个返回一个黄色框，里面有文字；最后一个是一个包含错误信息的红色框：

图 3.11：彩色文本框

彩色文本框非常有趣，因为我们可以用它们来提醒某些问题，比如使用红色调表示错误，或者用绿色调表示成功案例。此外，我们还可以利用这一特性为文本增添一些生气。

图片、音频和视频

在 Streamlit 中，管理多媒体（如图片、音频和视频）非常简单。首先，处理图片时，我们需要导入 PIL 库，然后添加几行代码：

from PIL import Image
img = Image.open("packt.jpeg")
st.image(img, width=300, caption="Packt Logo")

这是输出结果：

图 3.12：st.image

请注意，JPEG 图像与我们的 app.py 文件在同一目录中。如果需要，我们可以更改图像的宽度和标题。

使用视频的方式与此类似——我们可以将视频文件放在与 app.py 文件相同的目录中并打开它：

video_file = open("SampleVideo_1280x720_1mb.mp4","rb")
video_bytes = video_file.read()
st.video(video_bytes)

在框中，有播放/暂停、音量控制和全屏按钮：

图 3.13：来自文件的 st.video 小部件

我们还可以通过使用 URL 和 st.video 小部件直接从网络打开视频。例如，我们可以编写如下内容：

st.video("https://www.youtube.com/watch?v=q2EqJW8VzJo")

结果如下所示：

图 3.14：来自 URL 的 st.video 小部件

对于音频文件，我们也可以做差不多的操作。我们可以编写如下内容：

audio_file = open("sample1.mp3", "rb")
audio_bytes = audio_file.read()
st.audio(audio_bytes, format="audio/mp3")

请注意，这次我们需要指定格式。再次强调，默认情况下，我们会得到播放/暂停按钮和音量控制：

图 3.15：st.audio 小部件

现在，让我们看一下另一个在接下来的章节中非常有用的小部件。首先是“按钮”小部件。因此，请注释掉我们到目前为止写的所有代码（我们可以通过在要忽略的代码行前面加上#来创建注释），除了导入 Streamlit 的指令，然后继续。我们可以先写一个简单的指令：

st.button("Play")

这个指令给我们一个漂亮的按钮，标签上写着播放。然而，当我们点击它时，什么也不会发生！

图 3.16：st.button 小部件

什么也不会发生，因为没有与按钮相关的代码，所以如果我们稍微修改前一行代码，情况就会发生变化，如下所示：

if st.button("Play"):
      st.text("Hello world!")

如我们所见，当点击播放按钮时，一段漂亮的文本Hello World!将会出现：

图 3.17：与 st.button 关联的事件

许多其他小部件的工作方式与此相同，例如"Checkbox"。假设我们写下以下代码：

if st.checkbox("Checkbox"):
      st.text("Checkbox selected")

我们将得到图 3.18所示的结果：

图 3.18：st.checkbox 小部件

单选按钮的工作方式有点不同——我们必须指定一个选项列表，然后决定选择每个选项时发生什么：

radio_but = st.radio("Your Selection", ["A", "B"])
if radio_but == "A":
      st.info("You selected A")
else:
      st.info("You selected B")

上述代码将给我们以下结果：

图 3.19：st.radio 小部件

此外，在 selectbox 中，我们需要指定一个选项列表：

city = st.selectbox("Your City", ["Napoli", "Palermo", "Catania"])

我们选择了一个选项（在这种情况下是一个意大利城市），它将保存在city变量中：

图 3.20：st.selectbox 小部件

在这种情况下，我们希望进行多选。我们可以通过以下方式使用multiselect小部件：

occupation = st.multiselect("Your Occupation", ["Programmer", "Data Scientist", "IT Consultant", "DBA"])

代码与之前的非常相似，但这次我们可以选择多个选项。可以通过下图看到，我们选择了两个职位（如果需要，我们可以点击x按钮取消已选择的选项）：

图 3.21：st.multiselect 小部件

Multiselect 是一种非常优雅的多选方式，保持界面简洁且功能完善。

输入文本和数字

我们的网页应用程序中的另一个极其有用的功能是输入，即输入一些信息的过程。在这种情况下，我们有许多开箱即用的小部件可供使用。

在text_input小部件中，我们只需指定一个标签或标题和一个占位符，非常简单！

Name = st.text_input("Your Name", "Write something…")
st.text(name)

我们写的所有内容将保存在name变量中，并通过st.text()打印到屏幕上：

图 3.22：st.text_input 小部件

以同样简单的方式，我们也可以输入数字。这次，可以直接写入数字或使用 st.number_input：

Age = st.number_input("Input a number")

这是输出结果：

图 3.23：st.number_input 小部件

回到文本输入，如果需要输入多行文本，我们可以使用 text_area 小部件，像这样：

message = st.text_area("Your Message", "Write something...")

如我们所见，这次将显示一个更宽的文本区域：

图 3.24：st.text_area 小部件

text_area 是当我们需要输入长文本时的完美工具，它可以根据我们的需求进行配置。

滑块

另一个非常棒的输入小部件是滑块（slider），我们只需要指定起始值和结束值，就能在屏幕上得到一个很好的选择器。语法非常简单：

select_val = st.slider("Select a Value", 1, 10)

这是输出结果：

图 3.25：st.slider 小部件

滑块非常好看，并且在完成任务方面非常有效。

气球

一个非常好用的小部件是 balloons。想象一下你希望在某个好事情发生后表达喜悦的情景。在这种情况下，你可以通过点击按钮来使用它，如下面的代码所示：

if st.button("Balloons"):
      st.balloons()

看看点击按钮后会发生什么！

DataFrame、图表和可视化

现在，是时候处理 DataFrame 了，让我们来注释一些内容，并继续探索小部件。

DataFrame 是 pandas 库给其数据命名的名称。当一个文件（如 CSV 文件）被导入 pandas 时，结果将是一个 DataFrame。我们可以把 DataFrame 想象成 Excel 或 Google Sheets 表格——即由列和行组成的数据。列是特征或变量，行是记录或案例。因此，为了简化，我们可以说 DataFrame 是由列和行组成的数据结构。

首先，我们需要安装 pandas，使用以下命令：

pipenv install pandas

如果你按照我们的建议，使用 pipenv 进行虚拟环境管理，可以运行以下命令：

pip install pandas

如果你使用的是标准的 Python 安装，那么请写下以下代码：

st.header("Dataframes and Tables")
import pandas as pd
df = pd.read_csv("auto.csv")
st.dataframe(df.head(10))

首先，请注意，本书中使用的所有文件都可以在其 GitHub 仓库中找到，包括 auto.csv 文件。现在，让我们来注释一下代码。

首先，我们导入 pandas，这是一种强大的数据/数据集管理库，使用 pd 别名。之后，我们将 auto.csv 文件加载到一个名为 df（即 DataFrame）的变量中，然后我们通过 dataframe 小部件可视化 DataFrame 的前 10 行（即它的头部）。

结果如图所示：

图 3.26：st.dataframe 小部件

如我们所见，得益于 st.dataframe，我们可以以非常美观的格式查看 CSV 文件，所有列和行都类似于 Microsoft Excel 表格。如果我们滚动到最底部或右侧部分，我们可以左右滚动，向上/向下滚动。此外，我们还可以最大化 DataFrame！

如果我们更喜欢的话，也可以以 表格 格式查看 DataFrame，因为我们还提供了一个非常不错的 table 小部件。不过，不幸的是，在这种情况下，我们无法滚动数据。

所以，假设我们编写以下代码：

st.table(df.head(10))

然后，我们将得到如下表格：

图 3.27：st.table 小部件

Streamlit 开箱即用地也可以管理绘图——例如，我们可以显示面积图、条形图和折线图。我们需要做的就是拥有一个 DataFrame。

Streamlit 会与图表一起，自动显示所有可视化变量的列表（以不同的颜色显示）（请注意，我们只使用了“mpg”和“cylinders”）。

在这里，我们可以使用我们在前一个示例中加载的数据框。

所以，让我们编写以下代码：

st.area_chart(df[["mpg","cylinders"]])

我们将得到如下的面积图：

图 3.28：st.area_chart 小部件

让我们编写以下代码：

st.bar_chart(df[["mpg","cylinders"]].head(20))

然后，我们将得到如下的条形图：

图 3.29：st.bar_chart 小部件

让我们编写以下代码：

st.line_chart(df[["mpg","cylinders"]].head(20))

接下来，我们将得到如下的折线图：

图 3.30：st.line_chart 小部件

如果进入图表部分，我们可以进行放大和缩小。点击每个图表右上角的三个点，我们可以将图表保存为 PNG 文件，查看源代码，进行其他操作：

图 3.31：开箱即用的绘图功能

最后，正如我们在 DataFrame 中看到的那样，我们可以最大化所有图表，查看它们的全屏效果：

图 3.32：全屏绘图

使用 Streamlit，我们可以通过 matplotlib 和 seaborn Python 包绘制更加美观的图表。因此，首先，我们需要安装这些包：

pipenv install matplotlib seaborn

如果我们在一个纯 Python 环境中，我们可以运行以下代码：

pip install matplotlib seaborn

此时，我们可以像这样导入这些包：

import matplotlib.pyplot as plt
import seaborn as sns

现在，我们已经准备好开始绘制图表。在这里，我们正在绘制数据框的相关矩阵的热图：

fig, ax = plt.subplots()
corr_plot = sns.heatmap(df[["mpg","cylinders", "displacement"]].corr(), annot= True)
st.pyplot(fig)

第一行指令创建了一个空的图形。第二行利用 seaborn 创建了一个热图（带注释），用于绘制来自 df 数据框的相关矩阵。最后，第三条命令使用 matplotlib.pyplot 绘制图形，Streamlit 会直接管理它。以下是结果：

图 3.33：使用 Seaborn 绘制热图

请注意，我们已经显示了带标签的相关性图和带颜色和注释的热图。

日期、时间等等

另一个我们可以在 Streamlit 中轻松管理的非常有用的元素是日期和时间——即日期、小时等。

例如，要在屏幕上打印今天的日期，我们只需要写出以下内容：

import datetime
today = st.date_input("Today is",datetime.datetime.now())

这里，第一行简单地导入了 datetime 包，而第二行通过 Streamlit 的 date_input 提示用户选择一个日期。此日期将保存在 today 变量中：

图 3.34：st.date_input 小部件

继续处理日期和时间，我们也可以以类似的方式处理时间，如下所示：

import time
hour = st.time_input("The time is",datetime.time(12,30))

这一次，我们导入了 time 模块并使用 time_input，其中我们指定时间为 12:30。在屏幕上，我们可以选择任何想要的时间：

图 3.35：st.time_input 小部件

Streamlit 功能强大且易于使用，我们甚至可以管理 JSON 格式或编程语言格式（如 Julia 或 Python）的文本。

让我们输入以下内容：

data = {"name":"John","surname":"Wick"}
st.json(data)

在这里，我们创建了一个名为 data 的变量，包含两个键值对，通过 st.json 小部件以 JSON 格式显示在屏幕上——简单清晰：

图 3.36：st.json 小部件

如果我们点击箭头，就可以关闭/最小化 JSON。

显示代码也非常简单——我们只需使用 st.code 并指定编程语言作为参数（对于 Python，这不是必要的，因为它是默认值）。以下是一个例子：

st.code("import pandas as pd")

我们将看到以下输出：

图 3.37：Python 的 st.code 小部件

在 Julia 的情况下，我们必须指定编程语言，因此可以写出以下内容：

julia_code = """
function doit(num::int)
      println(num)
end
"""
st.code(julia_code, language='julia')

这是结果：

图 3.38：Julia 的 st.code 小部件

我们还可以将进度条和旋转器作为标准小部件使用。让我们看看它们是如何工作的。

例如，要创建一个从 0 到 100 的进度条，每 0.1 秒增加 1，我们可以写出以下内容：

import time
my_bar = st.progress(0)
for value in range(100):
      time.sleep(0.1)
      my_bar.progress(value+1)

结果非常好。对于更快的进度条，我们可以使用 time.sleep(0.01)，而对于更慢的进度条，我们可以使用 time.sleep(1)。以下是结果：

图 3.39：st.progress 小部件

旋转器的工作方式与进度条差不多，因此我们可以写出以下内容：

import time
with st.spinner("Please wait..."):
      time.sleep(10)
st.success("Done!")

非常简单，我们可以设置一个初始消息 等待 10 秒钟，如下所示：

图 3.40：st.spinner 小部件在等待时间中的状态

最后，我们可以打印 完成!（绿色表示成功），如下所示：

图 3.41：st.spinner 小部件完成后的状态

非常好！

现在我们已经介绍了进度条和加载动画，可以结束这个对 Streamlit 主要功能和小部件的简短介绍，它充当了一个全身心投入的速成课程。

总结

在本章中，我们探讨了 Streamlit 的主要开箱即用功能和小部件。我们从创建一个空的 Python 文件和启动 Streamlit 开始，展示了如何使用“重新运行”功能管理其 Web 界面，并利用其实时更新功能。

接着，我们学习了如何以不同方式处理文本，涉及文本的大小、颜色和格式。我们还探索了多媒体小部件，如图像、音频和视频。

许多元素，如按钮、复选框、单选按钮等，也得到了说明和应用。

本地原生支持许多不同种类的输入——输入文本、数字、日期、时间等非常简单。像文本区域或滑块这样的控件也可以直接使用。

正如我们所见，数据图表的创建非常简单——我们可以使用数据框架（DataFrames）并用一行代码绘制条形图、折线图或面积图。即使是热力图也是一个清晰且整洁的选择。

即使是以编程语言风格格式化文本，如 Python 或 Julia，也只需要几行代码。

最后，我们看到，如果我们需要等待一些计算或活动来处理我们的应用程序，我们可以使用进度条或加载动画在屏幕上创建一个“请稍等...”的效果。

所有这些组件都是我们将要使用的工具箱的基本元素，从下一章开始，我们将用它们来构建我们的实际 Web 应用程序。通过这样做，我们将扩展对 Streamlit 更高级功能的了解！

第二部分：构建一个基本的 Web 应用程序以掌握 Streamlit 的基本技能

第二部分深入探索了 Streamlit 的实践部分，重点是构建一个基本但强大的 Web 应用程序。它从配置 Streamlit 环境和管理软件包的基本知识开始，为应用程序开发奠定了实际基础。接着，本节展示了如何有效地组织和显示内容，结合了诸如列、折叠框和自然语言处理（NLP）技术等高级元素。随后，你将探讨如何实现 NLP 进行文本分析和处理，将这些技能应用于增强你的 Web 应用程序。本部分最后提供了一个全面的指南，介绍了如何使用 Streamlit Share 分享和部署这些应用程序到云端，帮助你将应用程序提供给更广泛的受众。本部分旨在增强你对 Streamlit 技能的信心，为后续更复杂的应用开发做好准备。

本部分包括以下章节：

• 第四章，Streamlit 基础 – 配置环境、管理软件包等

• 第五章，使用列、折叠框和 NLP 技术组织和显示内容

• 第六章，在 Streamlit 中实现自然语言处理技术用于文本分析和处理

• 第七章，使用 Streamlit Share 共享和部署您的应用程序到云端

第四章：Streamlit Essentials – 配置环境、管理软件包等

本章介绍了使用 Streamlit 框架构建 Python Web 应用程序的基础知识。它是为想要从零开始学习如何开发 Web 应用程序的初学者设计的，涵盖了几个重要的主题，包括设置虚拟环境、安装和管理软件包、创建应用程序框架，以及为应用程序添加菜单和装饰。

本章是一个由四个章节组成的部分的第一章。在这些章节中，我们将学习如何在开发基本 Streamlit 技能的同时构建基础的 Web 应用程序。我们采用的是一种边做边学的方法，因此我们将从零开始构建、测试和部署一个真正工作的 Web 应用程序——一个自然语言处理（NLP）应用程序。那么，让我们开始吧！

本章首先回顾了虚拟环境的概念，并解释了它们在 Python 开发中的重要性。一旦开发环境设置完成，焦点将转向创建应用程序框架，这涉及到定义应用程序的结构和布局。这样的框架是一个非常有价值的资源，可以用于未来的 Web 应用程序开发。之后，我们将介绍如何为应用程序添加菜单和装饰，以创建一个漂亮、好看且用户友好的 Web 界面。

到本章结束时，你应该对如何使用 Streamlit 构建 Python Web 应用程序有一个基本的理解，并且能够利用你创建的框架，创建一个带有自定义菜单和装饰的应用程序。

在本章中，我们将涵盖以下主要内容：

• 配置我们的环境

• 安装和导入软件包

• 应用程序框架构建

• 构建菜单并添加装饰

技术要求

• 在本章中，我们将使用以下库、软件包和工具：

  • Sublime Text

  • Python 3

  • pipenv

  • streamlit

  • textblob

  • spacy

  • neattext

  • matplotlib

  • wordcloud

• 本章的代码可以在本书的 GitHub 仓库中找到：github.com/PacktPublishing/Web-App-Development-Made-Simple-with-Streamlit/tree/4306036e2ddf9a714f2f058f76363aac5b402d5b/Chapter04

配置我们的环境

我们终于到了这里，正在从零开始构建我们的第一个 Web 应用程序！从零开始意味着从一开始就工作，甚至在空的 Python 文件之前。方法很简单——我们从坐下来一起编码开始。让我们先创建我们的虚拟环境，这个环境将专门用于我们将要开发的这个新应用程序：

1. 正如我们在前面的章节中所学到的，我们必须启动我们的 Terminator 终端，并使用以下指令创建一个名为 web_app1 的空目录：

   mkdir web_app1
   

2. 然后，我们必须在终端中输入以下指令：

   cd web_app1
   

3. 最后，我们必须编写以下内容：

   pipenv shell
   

如我们之前所见并且已经知道，最后的指令将通过 pipenv 创建虚拟环境，如 图 4.1 所示：

图 4.1：在 pipenv 中创建虚拟环境

由于它能大大帮助我们管理代码和 Streamlit 的执行，我们将 Terminator 终端分成两部分，水平分割。

1. 在下方的窗口中写入以下内容：

   web_app1 by moving the cursor up or down, then hitting *Enter*:
   

图 4.2：选择虚拟环境

一旦进入虚拟环境，你的终端提示符中会看到其名称，位于括号中（在我们的例子中是 web_app1）。

1. 我们在 web_app1 内，所以可以通过输入以下内容来打开我们的编辑器 Sublime Text：

   subl .
   

注意

请注意空格后的点（.）；换句话说，subl 和点（.）之间有一个空格。

通过这样做，Sublime Text 将从我们的工作文件夹中启动：

图 4.3：从虚拟环境启动 Sublime Text

有了这个，我们的虚拟环境就正常工作了，编辑器也准备好了。这意味着现在可以处理网络应用程序所需的所有包。我们需要安装这些包，以使 Web 应用程序正常工作。

安装和导入包

为了使我们的网络应用程序正常工作，我们需要以下 Python 包：

• streamlit：这是核心——即使魔法发生的框架

• textblob：这是一个用于基本情感分析和其他一些基本 NLP 任务的不错包（NLP 是计算机理解人类语言、其含义、语法等的方式）

• spacy：这是一个相当先进的包；它是最先进的技术，可以用于几乎任何 NLP 任务

• neattext：一个非常简单的文本清理包

• matplotlib：Python 最著名的用于绘制图表、图形等的包

• wordcloud：一个专注于美观词云创建和可视化的包

我们可以通过输入以下唯一指令，在我们的虚拟环境中安装所有这些包（所以我们必须已经进入虚拟环境）：

pipenv install streamlit textblob spacy neattext matplotlib wordcloud

请注意，此操作可能需要几分钟才能完成：

图 4.4：包安装

如果你检查 Sublime Text 中的 Pipfile，你会看到所有包都已正确安装，如 图 4.5 所示：

图 4.5：包含已安装包的 Pipfile

spaCy 是一个非常强大的 NLP 包，并且需要为每种我们要管理的语言下载专门的语言模型。因此，在我们开始编码之前，我们需要下载英语语言模型。让我们在终端中输入以下指令：

pipenv run python –m spacy download en_core_web_sm

该指令将下载en_core_web_sm英语语言模型，文件大小为 12.8MB。文件名非常自解释：en表示英语，core_web表示该模型是在一个包含来自网络的文本数据集上训练的，sm表示小型（如果你想了解所有语言、模型及其大小，可以查看 spaCy 的官方网站）：

图 4.6：下载 spaCy 语言模型

现在，我们拥有了开始编码所需的一切。只差一个东西：Python 文件！没有它，我们无法编码。让我们通过输入一个简单的指令来创建它：

touch app.py

以下是输出：

图 4.7：app.py 文件

到目前为止，一切准备就绪：我们的环境已经设置好，包已经安装完毕，我们的空app.py文件也已经存在。

我们现在已经准备好开始编写第一个真正的 Web 应用代码了。

第一步是打开app.py文件，使用 Sublime Text 导入我们已经安装的所有库，以便编写代码，如图 4.8所示：

图 4.8：导入必要的库

上面的代码导入了streamlit并使用st别名，同时导入了所有的 NLP 包（textblob、spacy和neattext）以及所有的可视化库。请注意，对于matplotlib，我们使用了Agg引擎，因为在 Streamlit 中，它比默认引擎表现得更好。

导入完成后，我们终于准备好编写第一个真正的 Web 应用代码了。现在就开始吧！

应用框架搭建

首先，我们需要一个主函数——一个包含应用所有业务逻辑和前端内容的函数。这就是 Streamlit 的强大之处——可以直接在 Python 代码中构建前端。无需使用不同的编程语言、文件等；一切都在同一个地方，使用相同的语言编写。编写这个函数非常简单——我们可以添加图 4.9所示的代码：

图 4.9：导入必要的库和主函数

代码的第一部分是非常自解释的——我们只是导入了前面几页中介绍的所有库。需要注意的是，当我们导入matplotlib（绘图所需的库）时，我们指定了希望使用Agg引擎（如果没有这个指令，matplotlib会使用默认的引擎）。在 Streamlit 的早期版本中，这个Agg引擎表现得更好，但在最近的版本中，matplotlib的标准引擎也表现良好。所以，建议是尝试有无这个指令，并且只有在真正有改进的情况下才使用它。

所以，感谢 def，我们可以创建一个名为 main 的函数。目前，这个函数只是将一个标题打印到屏幕上（st.title）：NLP Web App。

就是这样——我们已经准备好启动我们用 Streamlit 制作的 Web 应用程序。在浏览器中，我们将看到我们的漂亮标题：NLP Web App。

要在终端中运行应用程序，我们应该输入 streamlit run app.py。然而，由于我们处于 pipenv 环境中，我们需要输入以下命令：

pipenv run streamlit run app.py

这条指令启动了一个 Web 服务器，将我们的 Streamlit 应用程序运行在 8501 端口上。我们的 Streamlit 应用程序是 app.py 文件中的代码。

浏览器将立即在 localhost port 8501 上打开，我们将看到 Web 应用程序，如 图 4.10 所示：

图 4.10：Web 应用程序在 localhost:8501 上运行

此时，Web 应用程序什么也不做，只是显示 NLP Web App 标题，并在右上角显示 汉堡菜单。请探索菜单中的所有选项。

现在需要理解的是，通常所有应用程序都会执行一组任务，假设是三四个任务或 N（任何数字），因此所有应用程序都有相同的 框架，即一个通用的结构或支撑骨架，使每个任务得以实现。这些任务可以包含在应用程序菜单中，并通过 选择框 构建，允许用户选择要执行的操作。我们可以将这个选择框放在应用程序的左侧。所以，假设 NLP Web App 的任务是 st.title 这一行：

activity = ["Text Analysis", "Translation", "Sentiment Analysis", "About"]
choice = st.sidebar.selectbox("Menu", activity)

现在，保存 app.py 文件并点击 Web 应用程序中的 Always rerun（右上角）；这样，一旦我们保存新代码，所有新代码行都会立即执行。如 图 4.11 所示，我们在 Web 应用程序的左侧添加了菜单。这个菜单包含了我们在 活动 列表中包含的四个任务。如果需要，你可以点击 x 按钮以最小化左侧栏：

图 4.11：左侧菜单

为了让我们的菜单执行某些操作，我们必须为每个菜单项添加一些逻辑。我们可以通过在主函数中添加以下代码来实现。此时，当我们选择菜单中的某个特定选项时，我们只会显示一些子标题：

图 4.12：向主菜单添加一些逻辑

图 4.12中的代码相当简单：我们创建了一个包含四个项目的列表（activity变量），并用它来填充侧边栏中的selectbox。这意味着这个 selectbox 只会显示四个选项。当我们选择其中一个选项时（例如，ifs（四个 if 语句，因为我们有四个选项）来理解选择框中的值）。简单来说，我们检查if我们在选择框中的选择等于菜单中的任何一项；如果是，我们就打印一个子标题（目前，相关操作只是打印一个子标题；未来我们会编写更复杂的操作），子标题包含该项的名称和一个空白行。所以，如果我们选择情感分析，我们会在屏幕上打印一个情感分析的子标题，如图 4.13所示：

图 4.13：“情感分析”选项来自左侧菜单

到此为止，应该清楚，任何类型的逻辑都必须应用在main函数中的特定if条件下。例如，如果我们希望关于部分做一些比仅仅显示包含关于文本的子标题更复杂的操作，我们可以按以下方式编写其业务逻辑代码：

图 4.14：“关于”部分中的业务逻辑

总结来说，当choice变量等于st.write("")时，接下来是一些使用 Markdown 语言格式化的文本。

我们用st.markdown指令编写的代码非常容易理解；我们只是在屏幕上打印（使用 Markdown 格式）关于我们网站应用的一些信息，并提供一个可以点击的链接指向 Streamlit 网站，考虑到streamlit)`指令只是 Markdown 语法，用于在文本中插入超链接：

图 4.15：我们网站应用的“关于”部分

到目前为止，我们已经为网站应用创建了一个非常整洁的框架（即结构），导入了我们将使用的所有库，创建了一个主函数，在该函数中我们创建了一个菜单（...，该菜单将在应用的左侧显示，并且是可折叠的），其中包含我们网站应用将要涵盖的所有任务，并且创建了if条件。

真令人惊讶的是，这个简单的框架可以应用于我们今后构建的所有网站应用。我们需要更改或调整的只是任务列表（左侧菜单中的列表）以及每个项目的业务逻辑。

重点是，即使现在网站应用运行良好，它也并不吸引人。因此，让我们尝试添加一些装饰。

构建菜单并添加装饰

NLP Web App 可能是一个不错的应用程序标题，但说实话，它现在只是一些黑色文字在白色背景上，因此并不是非常吸引人。

Streamlit 的一个伟大特点是我们可以非常轻松地使用 HTML。所以，让我们在 main 函数中添加一些简单的 HTML 代码，来让一切看起来更加时尚！我们可以将位于主函数声明之后的旧代码 st.title("NLP Web App") 替换为以下代码：

图 4.16：向我们的标题中添加一些 HTML

在 title_template 中，我们指定了 背景颜色（蓝色）、填充大小 和 文本样式（h1）及其 颜色（青色）。通过 st.markdown 指令，正如我们之前学到的，我们只是将 HTML 进行可视化；你可以通过更改背景和文本颜色、填充、文本等来自由调整。这是最终效果：

图 4.17：我们应用程序的彩色标题

效果非常棒。

现在，让我们创建一个副标题。为此，我们可以使用副标题并使用几乎相同的 HTML 代码。我们只需要再添加几行代码，如下图所示：

图 4.18：标题和副标题的最终代码

我们以与处理 title_template 在 图 4.16 中的方式相同的方式来处理这个问题：我们在一个变量中定义了一些 HTML（在这个例子中是 subheader_template），然后通过 st.markdown 和设置 unsafe_allow_html 参数为 True 来进行可视化。

如前所述，一切都可以根据你的想法完全自定义。这是最终的效果：

图 4.19：最终的彩色标题和副标题

由于我们把这些装饰代码放在了主函数的最前面，也就是在创建左侧菜单和负责选择各种任务的 if 条件语句之前，因此，当我们切换各种菜单项时，彩色 HTML 标题和头部不会发生变化，因为它们固定在屏幕顶部，并且为我们的网页应用程序提供了非常好的 样式一致性。简而言之，由于我们将这段 HTML 代码放在了主函数的开头，它将应用于整个网页应用程序，而不是某个特定的任务——一切都会受到这个标题的影响。这个标题将成为我们网页应用程序的固定元素。

如果我们在浏览器中查看我们的网页应用程序面板，我们会看到图标和标题是默认的，因为图标是 Streamlit 的，而标题则是我们 Python 文件的名称（app.py）：

图 4.20：网页应用在浏览器中的默认图标和标题

让我们定制这两个非常重要的特性。在 Streamlit 中，确实有一个专门用于这个目的的指令——但这是非常重要的——它必须紧接在streamlit import行后面。这条指令是set_page_config。让我们将它添加到我们的app.py文件中，然后解释它是如何工作的：

图 4.21：set_page_config 指令

set_page_config接受以下几个参数：

• page_title：我们的页面标题；这是一个字符串

• page_icon：一个图标（图像文件）或一个表情符号（表情符号本身或其代码）

• layout：这可以是centered或wide

• initial_sidebar_state：这可以是wide、expanded或collapsed

你可以尝试不同的配置，并且可以轻松找到 Streamlit 文档部分中的相关信息，其中包含输入参数和输出结果。

下图解释了set_page_config()指令。如你所见，这里有一些我们没有探讨的不同配置，你可以将它们结合起来，以完全自定义你的 Web 应用程序。因此，请务必仔细查看 Streamlit 的官方文档，以便从这个令人惊叹的框架中获得最大价值：

图 4.22：Streamlit 的官方文档

现在我们已经查看了 Streamlit 的官方文档，接下来让我们看看具有新页面标题和图标的 Web 应用程序：

图 4.23：浏览器面板中的图标和标题定制

如你所见，在浏览器的与我们 Web 应用程序相关的标签上，我们有一整套定制化内容：一个代表拇指的图标和一个个性化的标题，显示为NLP Web App。这就是我们在图 4.21中看到的代码的结果。

如果你愿意，你可以尝试替换我们用作图标的👍表情符号，改为你喜欢的 PNG 文件等图像。你还可以查看当我们将initial_sidebar_state设置为wide、expanded或collapsed，并将layout设置为 wide 时，Web 应用程序的表现。

我们为 Web 应用程序框架添加的装饰简洁、整洁且美观，但直到现在，除了关于部分（可以认为已经完成），其余部分需要通过一些业务逻辑来完成，以便让各种文本分析、翻译和情感分析任务正常工作。这正是我们将在下一章中做的事情。

下图展示了我们所编写的所有代码。值得一提的是，在仅仅 64 行代码的情况下（包括空行和注释），我们已经构建了一个可以在网页上运行的 Web 应用程序，它可以被浏览器使用，并且包含菜单、一些部分、HTML、标题和装饰：

图 4.24：app.py 文件

最棒的是，你可以根据需要随时重用它！

总结

在这一章中，我们从零开始。首先，我们准备了pipenv环境，安装了 web 应用所需的所有包，最后创建了一个空的 Python 文件。

然后，我们构建了一个可以随时重用的骨架，用于开发新的 web 应用程序。这个骨架由一个初始化部分组成，我们在其中导入所有需要的包，以及一个主函数，用来包含我们 web 应用的所有业务逻辑。

在主函数的第一部分，必须应用一些功能到整个 web 应用中，比如标题和副标题，我们通过非常漂亮且丰富多彩的 HTML 创建了它们，还有网页浏览器的面板图标和标题。

在主函数的第二部分，我们创建了一个菜单，显示在我们 web 应用的左侧，让用户从我们 web 应用可以执行的各种任务中进行选择。选择菜单中的一个任务后，web 应用将展示相应的部分，并执行其特定的任务。我们之所以实现这个功能，是因为我们想从一个非常简单的案例开始。关于部分现在运行良好，展示了 web 应用的名称/标题以及一些有用的信息——在这个案例中，是指向 Streamlit 网站的有效链接。

一切运作良好，并根据我们的意愿和未来需求进行了定制。这表明这个骨架是我们开发者工具包中的一大利器！

在下一章中，我们将开始构建我们应用程序的完整业务逻辑，使用并学习一些非常强大的控件，比如列和展开器，以及一些 NLP 技术！

第五章：使用列、扩展器和 NLP 技术组织和显示内容

在本章中，我们将开发所有实现第四章中所构建的骨架应用所需的业务逻辑。我们将学习 Streamlit 的一些极其重要的功能。

列和扩展器是 Streamlit 框架中的两个布局功能，它们允许在 Web 应用程序中更灵活、有序地显示内容。

列允许将屏幕水平分为多个部分，每个部分包含自己的内容。这对于并排显示多个可视化图表或数据表，或将应用程序界面的不同部分分开非常有用。扩展器则允许在列内折叠和展开内容部分。这对于隐藏不太重要或不常用的应用界面部分非常有用，用户只有在需要时才会展开它们。

在 NLP 中，标记是通过空格或标点符号分割的单个文本单元。词元则是单词的基本或词典形式，它可能与文本中出现的屈折或派生形式不同。

到本章结束时，我们的第一个 Web 应用应该看起来更加完整，您也应该对如何使用 Streamlit 构建 Python Web 应用有更广泛的了解。

在本章中，我们将讨论以下主要主题：

• 在 Web 应用程序中组织和排列内容

• 根据重要性隐藏和显示内容

• 介绍 NLP 概念——标记和词元

技术要求

• 在本章中，我们将使用以下库、包和工具：

  • Sublime Text

  • Python 3

  • pipenv

  • Streamlit

  • Spacy

  • neattext

  • matplotlib

• 本章中的代码可以通过以下 GitHub 链接访问：github.com/PacktPublishing/Web-App-Development-Made-Simple-with-Streamlit/tree/bd70c6ee45d046134e71c3c8a93c3d97172bf3f9/Chapter05

在 Web 应用程序中组织和排列内容

在第四章中，我们建立了第一个 Web 应用的基础，并编写了一些 Python 代码，执行后会得到以下结果：

图 5.1: 第五章起始点

我们完成了关于部分，对颜色进行了一些装饰，并为 Web 浏览器页面添加了一个图标（即所谓的favicon）和标题。

现在是时候完成菜单中的三个剩余功能：文本分析、翻译和情感分析。

添加装饰

然而，在完成菜单中的三个功能之前，让我们先给 Web 应用的侧边栏添加一些装饰。因此，再次打开 Sublime Text 编辑器并重新开始编写代码。

我们需要在代码中 第 35-36 行 的标题后立即向侧边栏添加一张图片。这是一个简单的编码任务，如下图所示：

图 5.2: st.sidebar.image

这个过程非常简单：我们正在将一个图片添加到侧边栏 (st.sidebar) 中。我们只需要在 Google 中输入 NLP，下载一张图片，并将其保存为 nlp.jpg，放在与 Python 脚本相同的文件夹中。由于我们将 unsafe_allow_width 参数设置为 True，所以图片的宽度将与侧边栏中所有其他元素的宽度完全相同。如果你愿意，可以使用 width 参数来代替 unsafe_allow_width，具体方式如下：

width = 200

你可以尝试不同的宽度（如 100、300 等）并观察不同的效果。

在 图 5.3 中，我们可以看到上次装饰的结果：

图 5.3: 侧边栏中的图片

我们的 web 应用开始变得吸引人了！现在我们可以进入文本分析部分了。

添加文本分析部分

在这一部分，我们将使用 textblob，一个处理文本数据的 Python 库。它提供了一个简单的 API，可以处理常见的自然语言处理任务，如词性标注、情感分析、分类等。欲了解更多详情，请访问 pypi.org（著名的 Python 包索引）。

和往常一样，我们需要通过输入以下命令来在我们的虚拟环境中安装该包：

pipenv install textblob

然后，我们将其导入到 Python 脚本中，在 importing libraries 部分的最开头添加以下行：

from textblob import TextBlob

无论如何，如果你仔细阅读了 第四章，你应该已经完成了这部分，但为了保险起见，还是最好再重复一遍。

让我们跳转到脚本中的 文本分析 部分，最终添加其特定的业务逻辑。正如我们在编码过程中看到的那样，文本分析 是一个专注于文本统计（如长度、单词数等）、停用词、词干和标记等功能的函数。我们将在接下来的页面中快速解释这些概念。此外，除了自然语言处理（NLP）概念之外，这里非常重要的是理解如何使用各种 Streamlit 小部件、函数和技术细节，以便创建和构建稳健、高效的 Web 应用。

添加文本框

目前，在这一部分，我们只有一个标题和一个子标题。为了进行文本分析，我们当然需要一些文本，因此作为第一步，让我们添加一个文本框，以便输入所有我们想要的文本：

图 5.4: st.text_area

我们使用 text_area 获取一些文本，并将其存储在名为 raw_text 的变量中。尝试稍微调整 st.text_area 的参数，特别是试试看如果不使用 height 会发生什么。

添加分析按钮

我们想对在 text_area 中输入的文本做点什么。所以，为了更好地理解它是如何工作的，我们来添加一个名为 Analyze 的按钮，当点击该按钮时，会将我们的文本显示在屏幕上。代码非常简单，如下图所示：

图 5.5：用于显示文本的按钮

为了保持界面的整洁，我们在文本区域输入一些内容——例如 Hello everybody!——然后点击按钮，看看我们写的内容显示在屏幕上。结果如下：

图 5.6：大家好！

要执行任何自然语言处理任务，TextBlob 需要将任何文本转换为一个 Blob 对象，这是这个优秀库的一个特定功能。让我们来看看如何操作。

创建 Blob 对象

要使用 TextBlob 执行所有自然语言处理任务，我们必须确保能够创建这个 Blob 对象，而 Blob 只有在文本区域包含一些文本时才能创建——换句话说，文本区域不能是空的。

让我们稍微修改一下前面的代码，确保文本区域不是空的，并且 Blob 对象可以顺利创建：

图 5.7：TextBlob 在实际应用中

所以，如果 text_area 中没有文本，它的长度（len）就为零，我们会显示一个警告信息；否则（else），我们会创建一个 TextBlob 对象，将其保存为名为 blob 的变量，并显示一个确认信息（OK）。

现在，我们的 TextBlob 对象已经开始工作了。

添加基本功能

到目前为止，我们已经正确编辑了所有代码，准备实现一些真正的文本分析功能。实际上，我们稍后会使用 TextBlob 来进行情感分析功能。现在，我们只是用它来检查应用程序是否正常运行，如果你愿意，可以像这样注释掉下面这一行代码：

#blob = TextBlob(raw_text)

我们从 st.write("OK") 这一行开始，代码如下：

st.info("Basic Function")

到目前为止，我们处于如下截图所示的阶段：

图 5.8：基本功能

现在是时候理解如何使用列、展开器和更高级的编码来在屏幕上显示和隐藏信息了。

根据重要性隐藏和显示部分内容

从一个非常广泛的角度来看，应用程序只是用来可视化、转换和保存信息的一种方式。并非总是同时显示所有可用信息是一个明智的做法。例如，将所有信息显示在一个屏幕上可能会让我们的应用程序显得非常拥挤。在其他情况下，我们并不希望同时展示所有信息，因为我们只想看到某个特定的信息，这些信息是我们关心的。因此，在我们的 web 应用中隐藏和正确显示信息是一项非常有价值的技能。

添加列、展开器和文本框

列非常有用，因为它们允许我们创建一些层或不同的部分。这意味着，通过使用列，我们可以将屏幕分成任意多的垂直部分，并将这些部分（或列）用于我们认为应该在特定——或者说专用——容器中展示的任何特定目的。我们需要做的就是创建或声明这些小部件。

我们通过使用with指令开始使用它们。让我们详细看看：

图 5.9：列和扩展器

col1, col2 = st.columns(2)这一行仅仅创建了两个名为col1和col2的列。在接下来的两行with中，我们使用这些列。在每一列中，我们创建一个扩展器；每个扩展器都有自己的标签（Basic Info和Processed Text）。扩展器是可点击的，因为它们有上箭头和下箭头符号。点击这些符号，我们可以展开或收起这些小部件以显示它们的内容——在我们的示例中，仅包含st.write和st.success指令。浏览器中的效果非常漂亮：

图 5.10：我们网页应用中的列和扩展器

由于我们还希望在我们的网页应用中包含一些高级功能，让我们复制最新的代码部分，以便创建另外一对列和扩展器，再加上一个info文本框：

图 5.11：新的列和扩展器

我们添加的代码与之前已经评论过的相同。它对网页应用的影响如下：

图 5.12：我们的应用布局即将完成

总结一下，到目前为止我们已经有了两层、两个扩展器和每层两个列；效果非常干净且平衡。现在我们可以处理四个功能：两个基本功能和两个高级功能。

添加两个基本功能

让我们从第一个基本功能开始：neattext包，它对我们的统计非常有用，因为它有一个名为word_stats的函数。如果你还没有导入它，是时候这么做了。

word_stats返回一个字典，所以是一个key:value数据结构；我们需要做的就是从中获取信息（将其放入word_desc变量中），然后将所有内容在适当的列中显示。以下截图显示的代码显然属于col1：

图 5.13：文本统计信息

我们可以通过一个简单的key:value组合来访问统计信息。然而，所需代码的逻辑超出了本书的范围，本书专注于 Streamlit。需要理解的关键点是，任何特定的功能必须在正确的列部分中进行编码。这就是我们在网页应用中看到的：

图 5.14：文本统计功能在屏幕上的效果

现在，让我们添加第二个基本功能：nexttext库对处理过的文本也非常有用，且这个任务相当简单。我们可以跳到代码的处理过的文本部分，并添加一个非常简单的指令，如下图所示：

图 5.15：处理过的文本扩展器

我们可以使用neattext的remove_stopwords()方法去除输入文本中的停用词，然后将其转换为字符串（str），并保存在名为processed_text的变量中；最后，我们将处理过的文本显示在屏幕上。结果如下：

图 5.16：处理过的文本功能在屏幕上的效果

结果很好，但我们还可以做得更好——例如，在屏幕上显示我们从文本中移除的停用词列表。请注意，停用词是指那些常见的单词，它们并没有为我们的原始文本添加任何信息。

我们可以将这个列表添加到第一列，再添加一个扩展器，正好位于第一个扩展器下方；以下是代码：

图 5.17：提取停用词的代码

所以，我们添加了第二个扩展器(st.expander()"Stopwords")，并再次使用neattext提取stopwords (extract_stopwords)并将其放入一个变量(stop_w)中，然后使用st.error在屏幕上打印这个变量。结果如下：

图 5.18：停用词可视化

一切正常：文本统计告诉我们有多少停用词，停用词列表以列表形式显示这些停用词，而处理后的文本则显示去除这些项后的文本。

添加词云

由于Wordcloud库，如第四章中所建议的那样。这一次，我们可以在第二列中再添加一个扩展器，并编写几行代码，如下图所示：

图 5.19：词云绘制代码

几行代码后，词云就会出现！所以，我们添加了另一个扩展器，然后使用generate方法从原始文本中创建词云，再定义一个图形及其大小。最后，使用plt（我们已导入pyplot）绘制不带轴的词云。我们使用了更长的原始文本，以便生成更丰富的词云。词云中出现的单词越大，说明它们在文本中出现得越频繁。结果如下：

图 5.20：屏幕上的词云

现在我们的基础功能部分真的完成了。我们有一段美观的文本，展示了章节的开始，以及两列内容，每列中有两个展开器，所有功能都运行良好且流畅。现在是时候处理一些高级功能了，如处理令牌、词元和摘要功能。我们将在本章稍后详细讨论这些内容。

引入 NLP 概念——令牌和词元

让我们通过在 Python 和 Streamlit 中创建一个简单的摘要函数来开始探索高级功能。尽管许多包和库提供强大的摘要功能，本书更侧重于 web 应用开发，而非 NLP 或摘要技术。

添加摘要函数

虽然名字很直观，summarization 函数是一个用来总结句子或文本的代码段，它只提取最重要的部分。这项任务可以通过许多方法实现——一些非常简单，比如我们提出的这个函数，旨在展示如何使用 Streamlit 开发复杂的 web 应用，而一些方法则非常复杂，利用人工智能和神经网络。图 5.21 展示了我们如何添加 summarize_text 函数的代码：

图 5.21：summarize_text 函数

一个注意点是，在引入 NLP 包后，我们导入了两个新库：

from collections import Counter
import re

它们都是 Python 标准库；第一个是包含计数器的集合，第二个是正则表达式包。

在完成这个导入操作后，我们通过编写以下代码来定义 summarize_text 函数：

def summarize_text(text, num_sentences=3):

这个函数非常简单：它接受文本作为输入，通过将其转换为小写来清洗文本，接着将文本分割为单词，计算每个单词的频率（这就是我们需要计数器的原因），根据频率对单词进行排序，提取最频繁的单词，然后通过将这些高频词汇连接起来生成总结。

这个函数可以在摘要的展开器中使用，示例如下：

图 5.22：Summarize 展开器

在 col4 的展开器中，我们只是使用 summarize_text 函数，传入文本 (raw_text)，并将结果显示在屏幕上，如下所示：

图 5.23：总结操作

好吧，这个功能并不是最完美的，但为什么不尝试自己改进它呢？例如，你可以通过 API 调用，添加许多公司在线提供的高级摘要功能。

接下来，让我们了解什么是令牌和词元。

令牌和词元

Tokens 和 lemmas 是 NLP 中非常经典的概念。Tokens 是文本中最小的 单位，通常用单词来表示。所以，如果我们说 I write code，我们有三个 tokens：I、write 和 code。根据粒度的不同，事情可能变得更复杂，因为有时 tokens 可以由单个字母表示。但我们并不考虑字母，只关注单词。请注意，即使是单词，tokenization 也可能充满挑战；例如，在句子 I’m writing code 中，我们有多个 tokens —— 三个或四个。在第一种情况下，I’m 是一个独特的 token，而在第二种情况下，我们可以将 I’m 视为两个单词，拥有两个不同的 tokens。

其实并没有标准的对错方法，所有的东西都取决于语言和要考虑的使用场景。Lemmas 是由所谓的 纯文本 组成的，所以如果我们说 code、coding 或 coder，我们可以假设这三个词的词根都是 code。

对于 Tokens&Lemmas，我们可以使用 spacy，这是一个非常强大的 NLP 库，之前在 第四章 中我们已经导入了它。也许你还记得，在 第四章 中，我们还下载了 spaCy 使用的英文模型（en_core_web_sm）。现在，我们正在同时使用这个库和模型。

就像我们做总结时一样，让我们编写一个函数来处理 tokens 和 lemmas。我们可以在总结函数后立即写下类似的代码：

图 5.24：Lemmas 和 tokens 功能

首先，我们加载 spaCy 的英文模型，然后从文本中创建一个 nlp 对象（这是 spacy 库特有的对象）（doc=nlp(text)），通过这个对象，我们可以提取 tokens 和 lemmas（token.text 和 token.lemma_），并将它们保存到一个字典中（键值对结构），命名为 allData。最后，我们返回这个 allData 变量。

请注意我们函数开头的奇怪 @st.cache_data。这是一个 装饰器，它告诉 Streamlit 将此函数管理的数据保存到缓存中，因此除非函数的输入发生变化，否则每次我们调用这个函数时，响应都会非常快速。

请查看 Streamlit 的官方文档关于缓存的内容（docs.streamlit.io/library/advanced-features/caching），因为这确实是一个可以大大提升响应速度的功能：

图 5.25：Streamlit 官方文档关于缓存的内容

我们的 Tokens&Lemmas 函数已经准备好，可以在我们的最终扩展器中使用。

使用 text_analysis 函数

在使用 Tokens&Lemmas 功能之前，我们先稍微清理一下文本；让我们看看如何操作：

图 5.26：Tokens&Lemmas 扩展器

在使用我们刚才讨论的text_analysis函数之前，我们将使用neattext来清理文本。首先，我们将删除停用词，然后删除标点符号，最后删除特殊字符，如"@"、"#"等。

我们将把清理后的文本传递给text_analyzer，然后将结果打印到屏幕上。

请注意，由于text_analyzer函数返回的是一个字典——更确切地说，是一个字典的列表——我们以 JSON 格式打印它（st.json(tandl)）；这是结果：

图 5.27：屏幕上的 Tokens&Lemmas

为了更清楚地说明，tokens 是我们清理文本后的单词，而 lemmas 是被称为标准形态的单词；例如，我们可以看到单词spending的 lemma 是spend，tokentraveling的 lemma 是travel，依此类推。

最后，为了测试一切是否正常工作，我们可以从网络上复制一些文本——例如，来自 CNN 网站的某篇文章摘录——并将其放入我们的网络应用程序中。这是关于旅行和旅程的文章的结果：

图 5.28：文本分析测试

结果相当令人印象深刻；请注意，使用仅仅是 Python、Streamlit 和一些库，我们已经制作出了一个非常漂亮且可用的 web 应用程序，可以直接在线使用。我们所需要的只是一个浏览器！

如果可能的话，尽量从设备上使用应用程序——例如，平板电脑或智能手机——并且确保它们和你编码的计算机在同一个（Wi-Fi）网络上。这就是这些 web 应用程序的优点：可以随时随地访问！我们一次编写代码，随时随地使用，无需本地安装、管理补丁、更新版本等等。一切都在一个地方，用户通过浏览器访问。如果有变更或新版本，我们只需更新服务器端的代码，这样用户就不用为此操心了。顺畅、简洁、易用！

像往常一样，下面是到目前为止所写代码的截图：

图 5.29：代码 – 第一部分

在第一部分中，我们导入了相关包，设置了页面配置，并定义了"summarize_text"和"text_analyzer"函数。

图 5.30：代码 – 第二部分

在第二部分中，我们编写了"main"函数，用来可视化应用程序的主标题，侧边栏中的菜单使用IF语句使得菜单选项能够被选择，并使用了一些有趣的小部件，例如列和展开器。

图 5.31：代码 – 第三部分

在第三部分，我们完成了"main"函数，然后为翻译和情感分析功能创建了占位符，最后利用简单的 Markdown 创建了一个美丽的关于部分。

让我们再次强调 Streamlit 的强大，因为只需要几行代码，我们就能创建一个完整的包含后端和前端部分的网页应用。

总结

在本章中，我们开始通过在侧边栏添加一张美丽的图片来完成装饰。应用程序应始终正常工作，但赋予它一个相当美观的外观总是一个不错的主意。

装饰完成后，我们集中关注菜单的第一个选项：文本分析。文本分析是一个相当复杂的部分，为了使其既清晰、美观又高效，我们决定将我们的网页应用分为不同的部分，每个部分覆盖不同的主题。实现这一目标的最佳方法是学习如何使用列和扩展器。我们创建的文本分析部分有两层，一层是基础功能，另一层是高级功能，通过使用列和扩展器，我们可以以非常有效和优雅的方式管理这两层。

列允许我们将任何内容放置到不同的列中，而扩展器则允许我们展开或收起任何想要展示或隐藏的内容。

拥有外观美观且布局合理的部分和主题对我们的应用程序非常重要，但一个极为重要的点是拥有性能优良的代码。

代码应该以快速、流畅的方式运行，加载并展示信息的时间不应过长。这也是我们在 Streamlit 中首次考虑缓存的原因。

在下一章，我们将完成菜单中剩余的两个选项：翻译和情感分析。

第六章：在 Streamlit 中实现 NLP 技术进行文本分析和处理

翻译和情感分析是自然语言处理（NLP）中用于分析和处理文本数据的非常重要的技术。

翻译是将文本从一种语言转换为另一种语言的过程。情感分析是识别一段文本的情感色调或情感的过程。它用于分析客户反馈、社交媒体情感和产品评价。

这两者都是强大的技术，能够使 NLP 应用程序处理和分析文本数据，并从中提取有价值的见解。在本章中，我们将继续探索 Streamlit Web 应用程序的创建，同时学习更多关于这些技术的知识。在上一章中，我们完成了 Web 应用程序菜单中的文本分析部分，现在，我们终于准备好完成这个应用程序的所有部分。

到本章结束时，我们的第一个 Web 应用程序基本完成，你将充分理解如何使用 Streamlit 按步骤、非常简单地构建 Python Web 应用程序。

在本章中，我们将涵盖以下主要主题：

• 深入探讨 NLP 技术

• 学习更多关于语言翻译的知识

• 深入了解情感分析

• 我们第一个 Web 应用程序的回顾

技术要求

• 在本章中，我们将使用以下库、包和工具：

  • Sublime Text

  • Python 3

  • pipenv

  • Streamlit

  • spacy

  • textblob

  • neattext

  • deep_translator

• 本章中的代码可以通过以下 GitHub 链接访问：github.com/PacktPublishing/Web-App-Development-Made-Simple-with-Streamlit/tree/c51973f13b69b94065544c4a33057412986e9b99/Chapter06

深入探讨 NLP 技术

我们的 Web 应用程序已经有了一个结构良好的框架，可以应用于未来的应用程序，这一点非常重要。此外，我们的应用程序提供了高度的自定义功能，例如可以在浏览器中设置标题和图标。我们还完成了菜单中的文本分析和关于部分。要查看我们开发的当前状态，请参阅图 6.1。

图 6.1：第六章的起点

当我们点击翻译或情感分析时，我们仅在 Web 应用程序的主界面看到一个子标题，提醒我们当前所在的部分，除此之外没有其他内容。所以，现在是时候编写这两个功能了。

在深入代码之前，让我们先尝试理解翻译和情感分析到底是什么。

什么是翻译？

自然语言处理中的翻译是自动将文本或语音从一种语言转换为另一种语言的任务。它有助于消除语言障碍，促进全球交流。机器翻译（MT）的进展彻底改变了这一领域，统计机器翻译（SMT）和神经机器翻译（NMT）发挥了关键作用。由深度学习和 Transformer 模型驱动的 NMT 捕捉上下文并生成更流畅的翻译。挑战包括保留风格、处理习语和适应特定领域。未来有望进一步推进准确和文化敏感的翻译系统，促进跨文化理解。

什么是情感分析？

情感分析，或称为意见挖掘，是自然语言处理中旨在从文本中提取情感或主观信息的任务。它涉及将文本分类为积极、消极或中立的情感。传统方法依赖于规则和词汇表，而包括深度学习和预训练模型（如 BERT）在内的机器学习技术已经彻底改变了情感分析的方式。挑战包括细粒度分析和基于方面的情感分析。未来将在准确性、语言覆盖和伦理考虑方面取得进展。情感分析为各种应用的决策提供了宝贵的见解。

情感分析提供了对文本中表达的意见和情感的见解。它帮助企业了解客户反馈、市场趋势和公众情绪。通过分析情感，公司可以改进产品、量身定制营销策略并做出数据驱动的决策。情感分析还应用于社交媒体监控、声誉管理和公众意见分析。

结合起来，翻译和情感分析提供了增强的客户理解能力。企业可以跨语言分析情感，从多语言来源中获取见解。这种整合使得能够全面了解市场上客户的情感，帮助识别模式、改进领域和文化上下文的适应。

这些工具还有助于社会和政治分析。通过跨语言分析情感，研究人员和决策者可以更广泛地理解公众对各种主题、政策和社会运动的情感。这有助于有效沟通和知情决策。

让我们从菜单上的翻译选项开始。

深入探讨语言翻译

翻译打破语言障碍，促进全球交流和跨文化理解。它使企业能够在国际上扩展业务，与不同的受众建立联系并促进文化交流。机器翻译的进步使得准确和可访问的翻译服务广泛可用，改变了我们在日益互联的世界中交流的方式。

要将翻译功能添加到我们的网页应用程序中，我们必须按照非常精确的顺序添加几行代码。

添加文本区域

正如你所想，执行翻译的第一步是引入一个文本区域，在这里我们可以写下需要翻译的文本。我们很清楚，这个操作非常简单，因为它只需要一行代码。所以，第一步是将我们的代码放置在菜单的适当位置，如图 6.2所示：

图 6.2：翻译部分

然后，添加text_area，如图 6.3所示：

图 6.3：一个新的文本区域

现在，通过在浏览器中重新运行我们的网页应用，新的文本区域将会显示出来。我们放入这个新text_area中的文本会存储在一个名为raw_text的变量中。在处理文本时，检查我们是否有要处理的文本或者内容是否为空总是一个好主意，所以我们可以向代码中添加一个简单的if语句，如下所示：

图 6.4：文本长度检查

现在，如果文本长度少于三个字符，我们希望打印一条警告信息。这是因为许多翻译库需要一定的最小字符数才能处理文本。所以，如果我们写了，比如hi，我们会得到以下结果：

图 6.5：浏览器端的文本长度检查

现在要翻译的文本已经准备好，我们需要处理翻译本身。

执行翻译任务

执行翻译任务时，我们将使用一个名为deep_translator的新库。所以，首先，我们只需输入以下命令来安装它：

pipenv install deep_translator

之后，我们通过输入以下内容来导入这个库：

from deep_translator import GoogleTranslator

如你所见，我们正在利用GoogleTranslator服务。

如果你想了解更多关于deep_translator的信息，请查看其在 PyPI 上的专属页面(pypi.org/project/deep-translator/)。你将发现许多非常有价值的功能可以探索。

图 6.6：PyPI 上的 Deep-translator

定义翻译的语言非常重要。因此，我们将创建一个select_box，让用户选择特定的语言：

图 6.7：文本语言选择

这段代码非常简单：我们只是从一个小的子集（实际上是一个列表）中选择一个语言，并为其分配正确的代码（de代表德语，es代表西班牙语，等等）。

最后，现在我们有了目标语言，我们只需要执行翻译操作，并且可以通过点击翻译按钮来完成；这是完整的代码：

图 6.8：翻译功能代码

所以，当deep_translator包中的GoogleTranslator功能（之前已导入）将结果放入translated_text变量中时，再将其显示在屏幕上。

这是浏览器端的结果：

图 6.9：翻译功能运行中

一切都非常整洁清晰，且运行完美！当然，你可以根据需要个性化这个功能，例如，添加更多目标语言或对输入文本执行不同类型的检查。

图 6**.10 显示了目标语言选择的运行情况：

图 6.10：目标语言选择

到目前为止，我们写的代码不到 200 行，我们的网页应用已经运行得非常好。通过少量的代码，我们就能搭建一个后台和前端，业务逻辑在服务器上运行，展示层则位于浏览器上。一切都是用 Python 实现的，非常简单。这就是 Streamlit 的强大之处。

接下来，我们进入最后一个自然语言处理任务：情感分析。正如我们在介绍中发现的那样，这是一个非常有趣的话题。

深入情感分析

情感分析任务相当简单，因为我们可以利用已经导入的TextBlob。所以，让我们从目前非常简单的代码开始，它现在只是将一个子标题打印到屏幕上：

图 6.11：情感分析部分

目前，当我们从网页应用菜单中选择情感分析时，我们只是得到一个子标题和下面的一些空白区域。

图 6.12：情感分析起点

让我们从创建一个文本区域开始，因为我们需要一个地方来添加我们想要分析的文本，以便提取其情感。现在添加一个text_area对我们来说非常简单：

图 6.13：用于情感分析的text_area

这是先前更改后的浏览器端结果：

图 6.14：浏览器中的文本区域

现在，我们可以在文本区域中输入一些内容，并将其存储在一个名为raw_data的变量中。

像往常一样，我们有一个很好的选项，那就是添加一个按钮——我们可以叫它例如raw_text长度，在文本缺失的情况下，我们可以打印一个警告信息。

这是我们可以使用的简单代码示例：

图 6.15：评估按钮和检查raw_text长度

如果raw_text不为空，我们可以使用TextBlob来创建一个blob对象。之后，我们可以使用 blob 的sentiment方法来获取我们刚刚写的文本的情感，最后可以将结果写到屏幕上。以下是代码：

图 6.16：TextBlob 提供的情感方法

图 6.17 和 图 6.18 显示了浏览器中最新代码修改的结果。

第一个案例是积极情感，因为极性值非常高。

图 6.17：积极情感示例

第二种情况是负面情感，基于相当低的极性值。

图 6.18：负面情感示例

在图 6.19中，我们可以看到点击Evaluate按钮时出现的警告，但没有文本可以考虑。

图 6.19：输入文本... 警告

如我们所见，TextBlob 的情感分析返回了两个值：极性和主观性。让我们更详细地了解这些术语的含义：

• –1 到 +1。具体来说，-1表示非常负面的情感，+1表示非常积极的情感，所有接近0的值通常被认为是中性结果。

• 0 到 1。值接近0表示非常客观的结果，而接近1的值表示非常主观的结果。

因此，对于句子I loved that movie, it’s really great!，我们得到的结果如下：

图 6.20：高极性和高主观性

这部电影获得了0.85的高极性分数，并由于使用了第一人称代词I loved，使得主观性分数也很高。这表明这是一个高度主观的观点。让我们写点不一样的内容，例如以下内容：

图 6.21：中性情感

我们的语句的极性为0.26，表示中立，因为我们陈述的是一个事实性声明。主观性几乎平衡，因为事实既包含个人视角也包含普遍视角。

就这样！我们的第一个 Web 应用程序真的完成了！我们仅仅使用 Python、纯 Python 和一些免费的库，就实现了所有我们在一开始定义的任务！

让我们花点时间回顾一下到目前为止所做的工作。

我们的第一个 Web 应用程序回顾

这真是令人难以置信，但我们真的做到了！从零开始，从一个空白文件出发，我们创建了一个功能良好的 Web 应用程序，完成了许多任务，并为我们提供了非常不错的输出。

首先，我们创建了一个 Python 环境，并在其中安装了所有必需的库。然后，我们开始构建应用程序的框架。这一点非常重要，因为这个框架包含一个菜单，里面有我们 web 应用程序的所有主要功能以及管理这些功能的代码部分，这些内容可以在我们每次创建新应用程序时重用。

该应用程序的代码是使用 Streamlit 中的基本控件创建的，即标题、副标题、按钮、文本框、警告、信息等，还有一些非常有趣的组件，例如列和扩展器。

我们还学会了如何在 web 应用程序中添加一些基本的 HTML，以及一些基本的 Markdown。我们利用这些技术对标题进行了美化。接着，我们继续讨论了自定义功能。我们还看到了一种方式，可以为应用程序的网页浏览器窗口关联一个漂亮的图标和有意义的标题或名称。

我们深入探讨了一些 NLP 的基础概念：词元、词形、停用词、词云、文本摘要、情感分析、极性和客观性。我们的 web 应用程序现在还包含一个非常有用的关于部分，里面有信息和工作链接，可以根据需要进行自定义。

下面是我们应用程序最终版本的一些截图：

图 6.22：文本分析

在图 6.22中，我们可以看到屏幕左侧的完整菜单，以及应用于文本框中短句的文本分析功能的结果，主界面显示了这些信息。

图 6.23：翻译

图 6.23展示了翻译功能的行为。这一点非常直观：在文本框中输入句子，选择目标语言，然后点击翻译按钮，翻译任务便会执行，结果会显示在屏幕上。

图 6.24：情感分析

图 6.24展示了一个情感分析的例子，在此例中，显示了非常高的极性。

我们在 NLP web 应用程序的截图序列中，以关于部分作为结尾，如图 6.25所示。

图 6.25：关于部分

关于部分非常有用，因为它包含关于作者的信息、外部网页的链接等。

下面是我们到目前为止一起编写的所有代码：

图 6.26：NLP web 应用程序代码部分 1

在第一部分中，我们导入了必要的包，设置了页面配置，并定义了summarize_text函数。

图 6.27：NLP web 应用程序代码部分 2

在第二部分中，我们编写了text_analyzer函数，然后是main函数，该函数包含了应用程序的主标题、副标题以及侧边栏中的菜单。

图 6.28：NLP 网页应用程序代码第三部分

在第三部分中，我们使用if循环和许多高级控件（如列和扩展器）开发了main函数。

图 6.29：NLP 网页应用程序代码第四部分

在第四部分中，我们主要开发了翻译功能，使得可以插入文本并选择语言。

图 6.30：NLP 网页应用程序代码第五部分

在第五部分中，我们实现了TextBlob库，然后通过添加关于部分完成了网页应用程序的开发。

我们网页应用程序的完整代码清单明确展示了 Streamlit 的强大之处。不到 200 行代码就足以创建一个功能完备、界面相当漂亮的网页应用程序。我们仅使用了标准的 Python，而不需要 HTML、CSS、JavaScript 等技术。

总结

我们的 NLP 网页应用程序已经完成并且运行了，你应该为此感到非常骄傲！

我们还回顾了主要的要点和收获。那么，我们还能做些什么呢？

如果我们仔细考虑一下，虽然我们的应用程序运行得很好，但它仅限于本地，或者至少是在与我们编写代码的机器处于同一网络内。

要把一个网页应用程序定义为真正的网页应用程序，它需要是公开的。这意味着它必须能够在任何地方访问。

为了能够在任何地方访问，我们的网页应用程序需要托管在互联网上的一个服务器上，并拥有一个真正的公共 URL。

要将我们的网页应用程序部署到互联网上的真实服务器上，我们需要进行部署，而这正是我们将在下一章中做的事情。

第七章：使用 Streamlit Share 在云端分享和部署你的应用

Streamlit Share 是 Streamlit 框架提供的一项服务，允许用户通过几次点击将其使用 Streamlit 构建的 Web 应用程序部署到云端。Streamlit Share 提供了一种免费且简便的方式，可以与他人共享我们的 Web 应用程序，并让它们在任何有互联网连接的地方都能访问。

要在 Streamlit Share 上部署 Streamlit 应用，用户必须将其 GitHub 仓库连接到 Streamlit Share 平台。Streamlit Share 会处理其余的部分，自动在云端构建并部署应用。Streamlit Share 为用户提供了几个好处，包括无缝部署、自动扩展和简便的协作。

总体而言，在 Streamlit Share 上部署是一种便捷且用户友好的方式，可以将 Streamlit Web 应用程序部署到云端并与他人共享。

在上一章中，我们已经完成并测试了我们的 NLP Web 应用程序，现在是通过 Streamlit Share 部署它的最佳时机，也许还能展示给我们的朋友和同事，让他们用任何浏览器尝试和玩转我们的创作。

以这种方式部署的 Web 应用程序甚至是一个很好的“作品集”，可以展示给他人，证明我们的能力！

在本章中，我们将涵盖以下主要主题：

• 理解部署的重要性

• GitHub 简要介绍

• 熟悉 Streamlit Share 服务

技术要求

• 在本章中，我们将使用以下库、包和工具：

  • Sublime Text

  • Python 3

  • pipenv

  • Streamlit

  • GitHub

  • Streamlit Cloud

• 本章的代码可以在本书的 GitHub 仓库中找到：github.com/PacktPublishing/Web-App-Development-Made-Simple-with-Streamlit/tree/8d935899f9f128c8cd62d93627711de7c9388b15/Chapter07。

理解部署的重要性

Web 应用程序部署是指将 Web 应用程序提供给用户的过程。这包括将应用程序的代码、数据和配置文件复制到 Web 服务器，并配置服务器以运行该应用程序。

Web 应用程序部署的重要性有很多原因，以下是其中的一些：

• 部署确保你的应用程序对用户可用：一旦你的应用程序被部署，它将可以通过互联网访问。这意味着用户可以使用你的应用程序进行任务操作，比如购物、浏览或与企业互动。

• 部署使得更新你的 Web 应用程序变得简单：当你对 Web 应用程序进行更改时，可以通过几次点击将它们部署到生产环境中。这使得你能够快速且轻松地向用户交付新功能和修复 bug。

• 部署有助于提高 web 应用程序的安全性：在部署 web 应用程序时，您可以采取措施提高其安全性，例如配置防火墙和实施安全最佳实践。这有助于保护您的应用程序免受攻击和数据泄露。

• 部署可以帮助您提高 web 应用程序的性能：在部署 web 应用程序时，您可以通过配置服务器、优化代码和使用缓存来优化其性能。这可以帮助改善用户体验并减少服务器负载。

简而言之，web 应用程序部署是开发过程中的一个重要环节。接下来，让我们学习一些关于 web 应用程序部署的最佳实践。

Web 应用程序部署的最佳实践

通过遵循这些最佳实践，您可以确保您的 web 应用程序具有高可用性、安全性和性能：

• 使用预发布环境：预发布环境是您的生产环境的副本，您可以在将更改部署到生产环境之前在其中测试这些更改。这有助于确保您的更改在发布给用户之前是稳定且正常工作的。

• 自动化部署过程：自动化可以帮助减少部署 web 应用程序所需的时间和资源。有许多不同的工具可帮助您自动化部署过程。

• 使用版本控制系统：版本控制系统帮助您跟踪 web 应用程序代码的更改。这使得在部署过程中如果出现问题时，可以轻松回滚更改。

• 彻底测试您的应用程序：在部署 web 应用程序之前，彻底测试它非常重要。这包括测试应用程序的功能、性能和安全性。

• 部署后监控您的应用程序：一旦您的 web 应用程序被部署，监控其性能和可用性非常重要。这帮助您识别并解决可能发生的任何问题。

通过遵循这些实践，您的 web 应用程序可以顺利并成功地部署。

Web 应用程序部署的其他好处

这里是 web 应用程序部署的其他好处：

• 提高可扩展性：通过将 web 应用程序部署到可扩展的基础设施，您可以轻松应对流量的增加。这对在销售或营销活动期间经历流量激增的企业尤为重要。

• 降低成本：通过自动化部署过程，您可以减少部署 web 应用程序所需的时间和资源。这从长远来看可以为您节省资金。

• 提高灵活性：通过可重复的自动化部署过程，您可以快速、轻松地将新功能和修复补丁部署到您的 web 应用程序。这为您提供了应对不断变化的客户需求的灵活性。

总的来说，web 应用程序的部署是开发过程中一个关键的部分。那么，有没有办法简化这些最佳实践的采用呢？

我们非常幸运，因为 Streamlit Share 采用了我们提到的最佳实践，从定义上来说，我们可以确保以最佳方式部署我们的 web 应用程序。

拥有一个采纳所有这些最佳实践的服务对我们来说是一个巨大的优势，因为我们可以专注于 web 应用程序的实际业务逻辑。我们的主要任务将是编写代码并确保我们的 web 应用程序正常工作，满足并实现我们所有的需求和目标，同时可以确保部署和分享方式是完美的，而我们无需过多担心这些问题。

在接下来的部分，我们将学习关于 Streamlit Share 和 Streamlit Cloud 的内容。

什么是 Streamlit Share 和 Streamlit Cloud？

Streamlit Share 是一项免费服务，它允许你仅用几次点击就能将 Streamlit 应用部署到 web 上。一旦你创建了 Streamlit 应用，你可以通过点击 Streamlit 应用中的 Share 按钮将其分享至 Streamlit Share。这将为你的应用创建一个独特的 URL，你可以将其与任何人分享。

Streamlit Cloud 是一个服务，它允许你部署一个私人应用和无限制的公共应用，因此比 Streamlit Share 提供更多的功能和灵活性。使用 Streamlit Cloud，你可以将你的 Streamlit 应用部署到可扩展的基础设施上，添加自定义域名，并与其他服务集成。请访问官方页面获取最新信息：streamlit.io/cloud。

为了结束这一部分，让我们再次强调部署的重要性。这是使我们的 web 应用程序对任何人都可用的最简单方法。Streamlit 提供了一个非常易于管理的云服务。除了应用程序代码，我们所需要的唯一东西就是一个 GitHub 仓库。

GitHub 简介

GitHub 是一个用于版本控制和协作的代码托管平台。它允许你将代码存储在一个中心位置，跟踪代码随时间的变化，并与他人合作完成项目。

使用 GitHub 有很多理由，以下是其中的一些：

• 版本控制：GitHub 允许你跟踪代码随时间的变化。这对任何项目都是至关重要的，因为它使你能够在需要时回退到先前的代码版本。

• 协作：GitHub 使得与他人合作项目变得非常简单。你可以创建一个仓库并邀请他人与你合作。这是一个很好的方式来获取对你代码的反馈和其他人的帮助。

• 文档：GitHub 可以用来存储项目的文档。这是一个很好的方式来跟踪项目的需求、设计和实施。

• 托管：GitHub 也可以用来托管你的项目。这意味着你可以让其他人查看和下载你的代码。

• 免费：GitHub 是免费的，你可以选择将你的仓库设置为公开或私有。如果你需要更多的资源，可以选择付费计划并查看 github.com/pricing。

• 受欢迎的：GitHub 是全球最受欢迎的代码托管平台。这意味着有一个庞大的用户和开发者社区，可以帮助你解决项目中的问题。

• 功能丰富的：GitHub 提供了广泛的功能，使你可以轻松跟踪更改、与他人协作并托管项目。

• 安全的：GitHub 使用行业标准的安全措施来保护你的代码。

你应该使用 GitHub 来管理任何你想跟踪更改、协作或托管的项目。这包括个人项目、工作项目和开源项目。

尽管如此，使用 GitHub 仍然有一些缺点：

• 可能会很复杂：GitHub 对初学者来说可能有些复杂。

• 可能会很慢：GitHub 有时会很慢，尤其是当流量很大时。

这些缺点可以很容易克服：

• 首先，通过学习 GitHub 的语法和功能，可以缓解其复杂性。经过几次操作后，一切都会更加顺畅。

• 对于需要保护的敏感信息，我们始终可以创建私有仓库——只要了解何时真正需要这样做即可。

• 最后，在大流量情况下，服务可能会稍微变慢，但全天的某些时段，速度和响应性都不会是问题。

GitHub 是 Streamlit 生态系统中的关键部分。GitHub 与 Streamlit Share 有几种关联方式：

• Streamlit 应用托管在 GitHub 上：当你创建一个 Streamlit 应用时，可以选择将其托管在 GitHub 上。这意味着你的应用代码将存储在 GitHub 仓库中。这是一个很好的方式，可以让其他人查看并下载你的应用。

• Streamlit Share 使用 GitHub OAuth：Streamlit Share 允许你与他人分享应用，而无需分享你的 GitHub 用户名和密码。当你使用 Streamlit Share 时，Streamlit 会请求你授权访问你的 GitHub 账户。这样，Streamlit 就可以为你的应用创建一个新的 GitHub 仓库，并将应用部署到 GitHub Pages 上。

• Streamlit 的 Community Cloud 与 GitHub 集成：正如我们之前所解释的，Streamlit 的 Community Cloud 是一个让你轻松部署、管理和分享 Streamlit 应用的平台。当你在 Community Cloud 中创建 Streamlit 应用时，可以选择将其链接到你的 GitHub 账户。这使你可以轻松管理应用的代码，并与他人协作。

总之，如果你想创建、分享并协作开发 Streamlit 应用，你就需要使用 GitHub。

现在我们已经掌握了所有理论信息，准备以非常有效的方式开始分享我们的 Web 应用，让我们不要犹豫，开始吧！

熟悉 Streamlit Share 服务

现在我们已经讲解了理论，接下来让我们以一种非常简单顺利的方式，了解如何部署我们的 NLP Web 应用！

首先，你需要访问 share.streamlit.io：

图 7.1: Streamlit Share 网页

当你进入页面时，必须使用你的 GitHub 账号登录，使用你 GitHub 账号的邮箱（或用户名）和密码。如果你还没有 GitHub 账号，你需要注册一个（github.com）。

现在，在登录之前，我强烈建议你仔细阅读 Streamlit 官方文档，了解如何分享应用，因为你可以找到关于如何分享私人和公开应用的非常详细的信息：

图 7.2: Streamlit 官方“分享你的应用”文档

一旦你使用 GitHub 账号登录，你将看到一个类似下面的页面（在我的页面中，有很多已经发布/部署的应用；而刚开始时，你的页面会是空的）：

图 7.3: 登录后显示的页面

页面左上角有 Streamlit 的 logo，而右侧则是菜单中的分析和设置区域，以及你的账户名。

为了能够正常工作，我们将要部署的 Web 应用需要代码中包含所有必需的库。有多种方法可以收集所有这些必需包的列表，但最简单的一种方法是使用 pipreqs 包。所以，在命令行中，我们可以输入以下内容：

pip install pipreqs

这个安装过程非常快。安装完成后，你可以在命令行中再次输入一个非常简单的指令：

pipreqs my_application_folder_name

这里，my_application_folder_name是你的应用程序 Python 文件所在的文件夹。

该指令将生成一个名为requirements.txt的文件。如果你打开它，你会看到它包含了我们将要部署的 Python Web 应用所需的所有包/库的列表：

图 7.4: “requirements.txt”文件

很好——我们已经准备好所有所需的东西！在正式部署之前，你必须上传 Web 应用的 Python 文件，也就是 app.py 或 whatevername.py 文件，以及你刚刚生成的 requirements.txt 文件，还有我们在侧边栏中使用的 nlp.jpg 图片文件（如果不更新图片文件，程序会报运行时错误）。你的 GitHub 应该包含这两个文件，并且应该像这样：

图 7.5: GitHub 上需要的部署文件

如果您处于图 7.5所示的阶段，一切已经准备好进行部署。请返回 Streamlit Share 页面，点击新应用，然后选择从现有仓库，如图 7.6所示：

图 7.6：从现有仓库创建“新应用”

现在，系统将要求您提供有关仓库的一些信息，包括其名称（在仓库下）、分支、主文件路径和应用程序 URL（可选），如图 7.7所示：

图 7.7：部署应用所需的信息

所需的信息取决于您如何将文件上传到 GitHub。然而，提供这些信息是很简单的。您需要提供仓库的名称，它将作为表单中的一个备选项显示。您还需要提供分支的名称，通常为main。另外，您需要提供应用程序代码文件的名称，应该是app.py或您的 Python 文件名。最后，强烈建议您填写所有人将用来连接您的 web 应用程序的公共 URL 名称。差不多就是这些！然后，您可以点击部署！，然后静静等待奇迹发生。

在 web 应用程序部署过程中，您应该会看到一条很棒的消息，写着您的应用程序正在烘焙中，并附带一些由精美甜点图片组成的动画：

图 7.8：您的应用正在烘焙中

一会儿后，您的 web 应用程序将在云端上线运行！

图 7.9：NLP web 应用已部署

这非常简单且整洁。一旦我们的应用在云端运行，我们可能需要对其进行管理。让我们看看通过点击 web 应用程序右下角的管理应用，我们可以访问哪些功能：

图 7.10：部署“终端”

首先，我们会看到类似安装终端的界面——即一个报告我们部署过程中所有进展的终端。此外，我们还可以点击右上角的三个点，获取一些非常重要的功能：

图 7.11：Streamlit Share 中的功能

首先，通过选择下载日志，我们可以下载部署日志，这在出现问题时非常有用。之后，我们可以访问应用程序的分析数据，重启 web 应用程序，删除它，或者进入一些设置。此外，我们还可以查看所有已经部署的 web 应用程序，并检查文档或请求支持。

如果我们选择设置，我们将能访问三个额外的选项，如图 7.10所示：

图 7.12: 应用程序设置

在常规部分，我们可以修改我们应用的 URL，在共享部分，我们可以决定我们的 Web 应用是私有的还是公开的，在机密部分，我们可以指定——如果我们使用它们——外部服务的 API 密钥，而无需与每个人共享。

现在，我们可以做一些其他既简单又非常有用的事情：我们可以在 GitHub 仓库中添加一个写着在 Streamlit 中打开的徽章或按钮。这样，任何人只需点击这个徽章，就可以轻松直接访问我们已部署的 Web 应用程序。

这个操作非常直接，因为我们只需要向我们的仓库中添加一个包含几行代码的README.md文件。

因此，让我们将包含以下截图中显示的代码的README.md文件添加到我们的 GitHub 仓库中：

图 7.13: README.md 文件的内容

第一个 URL，也就是第一个https://，是指向徽章或图片的链接，而第二个 URL，也就是第二个https://，只是我们刚刚部署的 Web 应用程序的 URL，请用你应用的真实 URL 进行自定义。

下图展示了我们在 GitHub 仓库中的效果：

图 7.14: “在 Streamlit 中打开”徽章

正如我们之前提到的，点击徽章后，你将被重定向到我们刚刚部署的 Web 应用程序。

在关闭本章之前，请注意，当我们在安装所有所需的 Python 包后开发我们的 NLP 应用程序时，我们使用以下命令下载了spaCy 英语模型：

python -m spacy download en_core_web_sm

当我们在 Streamlit Share 上部署应用程序时，我们只需要一个requirements.txt文件。那么，我们怎么获得我们的 spaCy 英语模型呢？

如果我们遇到与NOT FOUND en_core_web_sm相关的错误，要修复它，我们需要在requirements.txt文件中做一个非常简单的更改——只需要用以下两行替换与spacy相关的那一行：

spacy>=2.2.0,<3.0.0
https://github.com/explosion/spacy-models/releases/download/en_core_web_sm-2.2.0/en_core_web_sm-2.2.0.tar.gz#egg=en_core_web_sm

通过这种方式，英语模型将被下载到我们的工作空间，一切将顺利运行！

如果我们停下来几秒钟，仔细思考一下，我们会明白在这一部分，我们取得了一个令人难以置信的成果。一个之前只存在于我们小环境中的 Web 应用（我们的计算机或本地网络），现在可以被任何有互联网连接的人访问。任何地方的人都可以与我们的 Web 应用进行交互并使用它。这种技能是非常宝贵的。我们不仅可以开发漂亮的 Web 应用程序，还可以让它们面向任何人。我们的应用程序现在可以服务于一个极其广泛的受众。

总结

恭喜！你已经部署了你的第一个 Web 应用程序，现在，任何人都可以通过你指定的 URL 访问并享受它！

如果现在回顾一下，你可以想象我们已经走了多远。从一个完全空白的文件和空文件夹开始，我们已经构建了一个拥有许多功能的完整 Web 应用程序。

关键在于，这个新开发的 Web 应用程序只存在于开发者的计算机或私人网络中，除非它被部署到云端。

本章中我们学习了将其部署到云端。应用程序的部署是一个真正的“大事”，因为我们可以让我们的创作随时随地都能访问！

对已经部署的内容进行更改和改进非常简单，因为我们只需根据新的想法修改代码、进行测试并将其上传到 GitHub 仓库。之后，Streamlit Share 会以一种神奇的方式自动无缝更新部署。

我们可以将代码上传到 GitHub，Streamlit Share 会处理其余的事情：简单！

从下章开始，我们将实现一个比我们刚完成的更复杂的新 Web 应用。通过这个过程，我们将学习并掌握 Streamlit 的所有主要高级功能！

第三部分：使用 Covid-19 检测工具开发高级技能

在第三部分，本书将重点转向更高级的 Streamlit 功能，并以 Covid-19 检测工具的开发为实际案例研究。首先，书中将引导您完成针对构建人工智能（AI）驱动 Web 应用的高级环境设置和包管理，特别适合集成复杂的 AI 模型。接着，它深入探讨了通过定制和 UI 功能优化 Streamlit Web 应用的用户体验（UX），强调直观且富有吸引力的界面设计的重要性。然后，书中讨论了如何利用预训练模型，展示了如何创建专业化和个性化的应用程序，这在 AI 和机器学习时代是至关重要的技能。最后，它涵盖了在 Streamlit Share 上部署和管理复杂库的内容，确保你能熟练处理复杂的应用需求。本部分内容是将你的技能从中级提升到高级的关键，为你提供了专业级 Streamlit 开发的准备。

本部分包含以下章节：

• 第八章，构建 AI 驱动 Web 应用的高级环境设置与包管理

• 第九章，通过定制和 UI 功能优化 Streamlit Web 应用的用户体验（UX）

• 第十章，利用预训练模型 创建 专业化和个性化的 Web 应用

• 第十一章，在 Streamlit Share 上部署和管理复杂的库

第八章：构建 AI 驱动的 Web 应用的高级环境设置与包管理

在第八章到第十二章中，我们将一起构建一个新的网络应用：一个可以从图像中检测 COVID-19 存在与否的工具。为此，我们将利用一个预训练的模型（我们不深入探讨 AI 和模型训练，而是直接使用一个预训练的卷积神经网络），通过这种方式，我们将学习如何将 AI 模型集成到我们的 Web 应用中，并围绕它们构建一整套服务！

简单来说，预训练模型是一个已经由别人提前训练好的 AI 模型，用来进行预测——例如分类或回归。为了训练该模型，通常需要一个与所研究问题相关的数据集。因此，在 COVID-19 检测的案例中，一个二分类模型（二分类意味着只有两种可能的解决方案：COVID 或非 COVID）已经在过去被训练，现在可以在我们的 Web 应用中使用。

本章深入讲解了我们在第四章中看到的内容。本章旨在帮助你更好地理解如何从零开始开发一个 Web 应用，添加需要更高技能的更多功能。因此，我们将再次设置一个虚拟环境，安装和管理包，创建应用框架，并为应用添加菜单和装饰。在这一部分，我们将一起构建一个新的 Web 应用，获得更多高级技能。

本章将覆盖以下主要内容：

• 配置我们的环境

• 安装和导入包

• 构建应用框架

• 构建菜单并添加装饰

技术要求

• 在本章中，我们将使用以下库、包和工具：

  • Sublime Text

  • Python 3

  • pipenv

  • Streamlit

• 本章中的代码可以通过以下 GitHub 链接访问：github.com/PacktPublishing/Web-App-Development-Made-Simple-with-Streamlit/tree/d5860f2916d79752d4b03c615da68f5bbdb4ed63/Chapter08

配置我们的环境

事实上，我们已经在前一个项目的开始创建了一个虚拟环境，在第四章中，因此我们应该对这项任务非常熟练。让我们从创建一个空目录开始，可以简单地命名为covid。那么，让我们在终端中输入以下指令：

mkdir covid

然后，我们可以通过输入以下命令进入新目录：

cd covid

现在是创建我们虚拟环境的时候了。我们知道这项操作非常简单，因为我们可以使用pipenv，就像在第四章中做的那样。所以，再次提醒，在我们的目录中输入以下命令（非常重要的是要在covid目录内）：

pipenv shell

虚拟环境将很快创建完成，我们应该进入一个类似于下图所示的阶段：

图 8.1: 创建虚拟环境

如图 8.1所示，创建了一个名为covid的新目录。然后，我们进入该目录，并通过输入pipenv shell来创建虚拟环境，虚拟环境的名称与目录名相同。我们使用的工具（pipenv）提供了一个积极的输出（绿色文本），并自动打开了新的虚拟环境。实际上，在截图的最后一行开始部分，括号中的covid表明我们处于虚拟环境中。

此时，环境已经准备好，但仍然是空的，因为我们还缺少在代码中使用的所有库。让我们来看一下需要哪些包。

安装和导入包

现在，我们已经进入了covid目录，并且虚拟环境已经创建完成，是时候安装我们在网页应用中要用到的所有包了。

我们需要五个不同的库：

• Streamlit，我们用于网页应用的神奇框架

• numpy，一个用于高级数值计算的库

• tensorflow，用于管理神经网络的包

• Pillow，一个用于图像管理的库

• opencv-python，计算机视觉包

让我们通过依次输入以下指令来安装所有内容：

pipenv install streamlit numpy tensorflow Pillow opencv-python

这个安装过程可能会花一些时间。当它完成时，我们的屏幕上应该会显示如下内容：

图 8.2: 包安装

现在我们可以启动编辑器 Sublime Text。你会看到，在covid目录中，现在有两个著名的文件，Pipfile和Pipfile.lock，它们包含了我们虚拟环境的配置、已安装的库以及依赖列表：

图 8.3: Pipfile

现在我们可以创建一个新文件，并像往常一样命名为app.py，然后我们可以写下以下内容：

   touch app.py

一切终于准备好开始编写代码了。

显然，我们必须从导入库开始，这非常简单，正如下图所示：

图 8.4: 导入库

和之前的网页应用一样，我们需要创建一个主函数。我们可以通过添加一些html代码来实现，目的是为我们的应用设置标题。由于我们已经导入了 Streamlit，像往常一样，在import streamlit as st这一行之后，作为第一条指令添加页面配置的代码（我们设置了标题、图标——你可以使用任何图片——以及初始的侧边栏状态）。完整代码如下：

图 8.5: 第一个应用草图

目前，我们只导入了库并添加了非常少的代码行，但网页应用已经可以启动了。我们可以通过输入以下常见的指令来启动：

pipenv run streamlit run app.py

在下图中，可以看到在本地浏览器打开8501端口后获得的结果：

图 8.6：应用首次启动

没有错误！现在我们可以继续构建应用框架。

构建应用框架

到此为止，我们应该已经相当擅长构建应用的框架了，因为我们之前开发的 NLP 网页应用做得非常好。事实上，如果你还记得，我们首先定义并构建了一个简单的框架，只包含一个菜单，菜单中有所有网页应用应包含的功能，然后才一步一步地实现这些功能。现在，我们将采用同样的方法。

在构建COVID应用的框架之前，让我们先为应用添加一些装饰——例如，标题下方的文本和侧边栏中的一张图片。

带有两行新代码的代码如下所示：

图 8.7：标题下方的文本和侧边栏创建

正如我们已经知道的，第三行的代码负责网页应用的配置，设置页面标题（Covid-19 Detection Tool）、页面图标（covid19.jpeg image）和页面布局（centered）。

网页端产生的结果如下：

图 8.8：侧边栏中的图片和标题下方的文本

现在，让我们在侧边栏中添加一个非常重要的小部件：file_uploader。我们将使用的指令如下：

image_file = st.sidebar.file_uploader("Upload an X-Ray Image (jpg, png or jpeg)", type=["jpg", "png", "jpeg"])

正如我们在网页端所看到的，image_file。第一个参数只是一个标签（文本type），包含了一个允许用户选择的文件类型列表。

紧接着file_uploader，最好插入一个检查（一个if语句），以确保已经上传了图片，只有在这种情况下才打开它（利用我们一开始导入的Pillow库）。

一旦我们有了图片，并且只有当上传的图片可以被打开时，我们才可以执行其他操作——例如，在前面的if语句内部添加一个if语句。最终，我们的主函数中的代码将如下所示：

图 8.9：如何管理图片

非常简单地，我们可以选择一张图片，当我们点击图片预览按钮时，就可以在屏幕上、侧边栏中看到它，如下图所示：

图 8.10：在侧边栏中上传并预览图片

到这时，我们已经有了一个完整的应用框架，并且能够上传并在侧边栏中显示图片。我们现在准备开始构建菜单了。

构建菜单并添加装饰

现在，我们可以在侧边栏中添加一个选择框，这将是 web 应用程序的菜单，并提供开发指南。这个菜单将有三个选项——if 子句，内部的那个，因为它只有在已经上传有效图像时才有意义。肯定地，选择框后面我们可以放置三个选项（三个 if 子句），它们将包含每个菜单选项的代码。

我们已经在 NLP web 应用程序中以相同的方式构建了一个菜单；代码非常简单：

图 8.11: 菜单（选择项）及其选项部分

这是我们正在做的：

• 在第 38 行，我们创建了一个包含所有菜单选项的列表

• 然后，在第 39 行，我们在侧边栏中添加了一个选择框，以便可视化此列表中包含的所有项目。

• 然后，从第 41 行到第 48 行，我们检查哪个菜单选项已被选中，并仅将信息打印到屏幕上——例如，st.subheader（pass）。

我们使用 st.subheader 或 pass 函数（它只是一个什么都不做的函数）打印的消息是简单的占位符，在接下来的章节中，我们将开发与它们相关的代码。到目前为止，应用程序菜单看起来是这样的：

图 8.12: 浏览器中的菜单

作为最终装饰，在关闭本章之前，我们可以在侧边栏添加一个关于作者按钮，以此显示所有关于 web 应用程序作者的信息，包括他们的网站链接、电子邮件等。以下是代码：

图 8.13: 关于作者按钮代码

这是浏览器中的效果：

图 8.14: 关于作者的详细信息

在本节中，我们为我们的新 web 应用程序创建了菜单。现在，在侧边栏中有多个选项，用户可以清晰地选择他们想做的操作。这种方法非常有用，因为它可以在我们开始开发新应用时随时应用。在左侧的侧边栏中，我们有一个菜单，列出了 web 应用程序中所有可用的功能，在主界面部分，我们展示了标题和信息，并让用户从他们的案例中插入数据。

总结

在本章中，我们巩固了关于虚拟环境和包安装的知识。之后，像往常一样，我们从一个空文件开始，开发了我们应用程序的框架。

首先，我们导入了所有库并创建了一个主函数。我们还创建了一些漂亮的装饰，比如 HTML 中的标题、一个美丽的图标和侧边栏中非常有趣的图片。我们还发现了如何通过筛选文件类型来上传文件，并且一旦文件导入后，我们学会了如何利用 Pillow 库来可视化这些图片。

另一个重要步骤是建立我们应用程序的菜单，包含所有的语音，最后我们创建了一个按钮，显示有关作者的所有信息，并包含一些可链接的元素，比如他们的网站和电子邮件地址。

从下一章开始，我们将专注于开发菜单的三种声音，目前它们只是空的容器：图像增强、诊断和免责声明 及信息。

第九章：通过自定义和 UI 功能优化 Streamlit 网页应用的用户体验

在第八章中，我们开始开发一个新的网页应用——Covid-19 检测工具。我们已经创建了虚拟环境和应用骨架，并做了一些基本的装饰。现在是时候集中精力于我们新工具的三个主要部分：图像增强、诊断和免责声明 及信息。

对比度和亮度是 UI 元素，允许用户调整图像的对比度和亮度。这些功能有助于改善显示图像的可见性和清晰度。滑块和单选按钮是小部件，允许用户与网页应用中的数据互动和操作。滑块允许用户通过拖动滑块按钮设置一个范围内的值，而单选按钮允许用户从一组选项中选择一个选项。总体而言，对比度、亮度、滑块和单选按钮是强大的 UI 功能，使我们能够创建非常吸引人和互动性强的网页应用，适用于 COVID-19 检测。在像我们正在一起构建的这种进行预测或预测的应用中，添加免责声明非常重要，以免向用户传达任何错误信息。

通过开发这些新功能，我们有机会学习如何使用 Streamlit 的更高级技巧和技能。

本章我们将涵盖以下主要内容：

• 处理更高级的网页应用功能

• 使用 Pillow 库添加图像增强部分

• 添加免责声明和信息部分

技术要求

• 本章我们将使用以下库、包和工具：

  • Sublime Text

  • Python 3

  • pipenv

  • Streamlit

  • Pillow

  • numpy

• 本章的代码可以通过以下 GitHub 链接访问：github.com/PacktPublishing/Web-App-Development-Made-Simple-with-Streamlit/tree/f1bd9c354072092c268f27621680c858ce93c823/Chapter09

处理更高级的网页应用功能

在第八章中，我们的开发停留在下图所示的位置：

图 9.1：第九章起始点

那么，让我们开始处理菜单的三个选项：图像增强、诊断和免责声明及信息。在此之前，既然我们要进入一些 Streamlit 的高级功能，并且考虑到新版本更新频繁，非常重要的一点是记住，Streamlit 的官方文档（docs.streamlit.io/）永远是获取所有可用组件和 API 详细信息的最佳地方；例如，如果你对 图像 小部件有任何疑问，你只需在官方文档页面左侧的 API 参考 菜单中搜索，或者直接在右上角的搜索框中搜索，查看所有相关结果。

图 9.2：Streamlit 的官方文档

让我们在 Sublime Text 中打开代码，继续我们的开发，因为此时我们只有一个空菜单。

我们已经定义了一个名为 activities 的菜单选项列表，并定义了一个 if 语句来检查这些选项中哪个被选中，并将其存入名为 choice 的变量；现在我们的任务是为这三种可能性中的每一种编写业务逻辑：

图 9.3：需要插入业务逻辑的点

我们非常清楚 pass 只是一个占位符，因此我们可以从菜单选项中的第一个开始编码：图像增强。

图像可以通过多种方式增强——例如，通过调整亮度或对比度。所以我们可以在侧边栏使用一些单选按钮，让用户选择他们想要执行的增强类型。

正如我们应该知道的，单选按钮有几个必填的参数：一个标签（标题）和一个可选择的项目列表：

图 9.4：图像增强的单选按钮

像往常一样，单选按钮中的项目列表包含我们想在屏幕上展示的所有功能：

图 9.5：浏览器中的单选按钮

很明显，现在我们需要一些 if 语句。因为如果 enhance_type 变量是 原始，我们需要做某些事情；如果是 对比度，我们需要做不同的事情；如果是 亮度，我们还需要做其他事情：

图 9.6：“图像增强”的 if 语句

如前所述，pass 只是一个占位符，因此让我们逐个处理这些 if 语句。第一个是 对比度。

使用 Pillow 库添加图像增强部分

在我们最初导入的库中，ImageEnhance 实际上负责所有与图像增强相关的功能。这意味着我们可以使用 Pillow 的 ImageEnhance 模块中已包含的 Contrast 和 Brightness 方法，因为我们所需的所有功能以及许多其他功能都已经为我们实现了。

Pillow，或称 Python Imaging Library，是一个非常强大的库，它能够做的不仅仅是本书中展示的这些功能。基于这个原因，我们建议你浏览其在 PyPI 上的官方页面（pypi.org/project/Pillow/），并阅读那里包含的所有文档。

图 9.7：PyPI 上的 Pillow 页面

让我们从 Contrast 开始。

对比度

如 图 9.8 所示，使用 Pillow 的方法管理 Contrast 实际上非常简单：

图 9.8：对比度功能

在子标题后的 if 语句中，我们首先添加了一个 滑块。这个滑块的值范围从 0.5 到 5.0；你可以调整这个范围，观察不同的效果。

添加滑块后，我们需要使用之前通过 file_uploader 打开的图像（our_image）实例化一个 ImageEnhance.Contrast 对象。然后，使用滑块选择的值应用 enhance 方法到这张图像上。

最终，结果通过 st.image 打印到屏幕上，这是 Streamlit 的经典控件之一。

这是从浏览器的角度看到的结果：

图 9.9：对比度功能演示

结果非常好，并且使用 Pillow 管理这种图像增强非常简单。

如我们刚才看到的，Pillow 默认包含了 Contrast 功能。因此，可以想象它也包含了 Brightness 功能。

亮度

事实上，针对 Brightness 功能所需编写的代码与 Contrast 功能差不多。我们可以输入以下内容：

图 9.10：亮度功能

前面的代码与我们为 Contrast 编写的代码完全相同，不过这次我们使用了 ImageEnhance.Brightness 方法，而不是 ImageEnhance.Contrast 方法。

所以，再一次地，我们通过滑块设置亮度值，创建一个从 file_uploader 打开的图像中获取的 enhancer 对象，应用亮度到这张图像，并将结果打印到屏幕上。

这是我们在网页应用中的结果：

图 9.11：亮度功能演示

在亮度和对比度的两种情况下，你可以通过使用滑块选择不同的值来改变效果的强度，如果你不喜欢结果，也可以随时更改我们设置的范围，从0.5到5.0。

我们可以通过选择单选按钮来选择的最后一个选项是Original。

原始

在file_uploader的情况下并将其显示在屏幕上。代码如下：

图 9.12：原始图像功能

如果你愿意，你可以尝试将st.image中的use_column_width参数设置为False并查看结果，或者如果你更喜欢的话，可以指定一个不同于600的宽度。

这是浏览器中的效果：

图 9.13：原始图像功能的实际效果

使用原始图像功能后，我们可以认为菜单中的图像增强选项已完成。感谢 Pillow 库，我们可以非常顺畅地实现该选项的所有功能。这是 Python 最棒的地方之一，你总能找到一个已经具备所有所需功能的优秀库！

让我们继续看免责声明和信息部分。诊断部分稍微复杂一些，我们将在下一章讨论它。

添加免责声明和信息部分

处理提供预测的应用程序，特别是健康预测，可能有些危险，因此一个好的做法是写下免责声明，以避免任何误解。

该网页应用的免责声明，名为免责声明和信息，还起到提供一些关于用于从图像预测 COVID-19 的模型以及训练该模型所用数据集的信息的作用。

简而言之，免责声明的主要目的是澄清该应用程序只是 Streamlit 功能的一个示范，从医学角度来看没有任何价值。此外，免责声明还包含了一些关于用于进行预测的 AI 模型的信息。

在第十章中，我们将看到每当我们需要进行预测时，一个好的策略是使用机器学习模型。

特别地，我们的网页应用中使用的模型是所谓的tensorflow，并且使用了一个包含 206 张受影响人员和 206 张健康个体图像的数据集。

附加信息

CNN 是特别的神经网络架构，在图像相关问题（如图像分类）中表现非常好。我们在这个应用中要做的，正是图像分类，特别是胸部 X 光图像，来发现它们是否显示 COVID-19 病例。确定给定图像是否代表 COVID-19 病例是一个典型的二分类问题，这意味着判断某件事情是否为真或假。CNN 在这种任务中是非常好的分类器。然而，为了更好的性能，它们需要大量的图像，因此需要一个大的数据集来训练这些模型。

我们使用的 CNN 表现相当不错，即使它是用有限数量的图像训练的。该模型在分类 COVID-19 病例和健康个体的图像时表现良好，但在分类 SARS 病例的图像时预测性能较差（SARS 与 COVID-19 相似）。

免责声明必须插入到与菜单相关的if语句的else部分，如下图所示：

图 9.14：免责声明的插入点

我们可以选择以多种方式编写这个免责声明，但最简单的一种方式就是使用一些st.write对象。通过这种方式，我们可以得到非常清晰、格式良好的文本，并且可以添加指向一些可以作为参考的网站链接。我们使用的是Markdown语法，因此可以使用粗体、斜体、项目符号、列表等。

注意

文本中链接的网站是真实的，它们启发作者在第一次 COVID-19 封锁期间创建了这个工具。如果你想了解它们，它们非常有趣！

这是我们可以用来添加免责声明的代码：

图 9.15：免责声明部分使用的代码

实际上，这段代码只是一个提议。你不需要在你版本的COVID-19 检测工具网页应用中复制它。你可以根据自己的需求进行修改，如果你决定使用其他模型进行预测（如今，在线可以轻松找到多个预训练的模型，例如，ieeexplore.ieee.org/document/9340145 或 www.nature.com/articles/s41598-023-33685-z），你可以插入关于你自己版本和新模型的信息，并附上其性能和准确度的解释。

这是我版本应用的免责声明部分：

图 9.16：浏览器中的免责声明

结果非常干净整洁，因为我们使用了标题、粗体、带有项目符号的列表和指向外部网站的超链接。

像往常一样，让我们打印出到目前为止我们实现的代码，以确保我们的 Web 应用程序的所有内容都已正确编写且没有错误：

图 9.17：代码的第一部分

回顾一下，在图 9.17中，我们有代码的第一部分，在这一部分中，我们导入了所有相关的库，设置了页面标题和图标，定义了main函数，并在其中将图像放入侧边栏，同时添加了应用程序的菜单。

这个菜单包含了三个功能：图像增强、诊断和免责声明及信息。在图像增强部分，我们可以选择三种选项：原始、对比度和亮度。

图 9.18：代码的第二部分

在代码的第二部分，如图 9.18所示，我们完成了免责声明及信息和关于作者部分，而将诊断部分暂时留空。

总结

在本章中，我们完成了构成我们COVID-19 检测工具 Web 应用程序菜单的三个功能中的两个。

为了处理图像增强功能，我们利用了 Pillow 库，这是一个非常强大的库，使得通过很少的代码行就能管理一些非常强大的功能，例如图像对比度和亮度。

我们还为用户创建了多个选择，采用了单选按钮和if语句。单选按钮是一种非常简洁且强大的选择方式，确保了在整个过程中不会产生任何歧义。

将滑块与图像可视化结合使用，是调整各种参数（如对比度和亮度）的强大工具。滑块让用户能够精确且连续地选择任何给定参数的所需值。

另一个需要强调的重要技巧是，每次我们修改图像（例如进行亮度调整）时，我们都在其副本上进行操作，而不是在原始图像上。通过这种方式，我们可以很简单地返回到原始状态，只需展示通过file_uploader加载的图像即可。

我们还了解到，利用 Markdown 语法格式良好的文本可以为用户提供丰富的信息——例如，展示使用的技术和灵感来源的文档。毫无疑问，这种简洁且格式规范的文本是创建免责声明的完美方式，有助于避免未来的任何问题。

在下一章，我们将学习如何将人工智能和机器学习模型集成到我们的 Web 应用程序中。

第十章：利用预训练模型创建专门化和个性化的 Web 应用程序

到目前为止，我们已经使用了 Streamlit 的组件和库（由 Python 编写）来创建和构建我们的 Web 应用程序。然而，使用 Streamlit，我们可以做得更多。

这个令人难以置信的框架在与人工智能（AI）模型结合进行预测时极为强大。开发机器学习（ML）模型或神经网络是一个非常复杂的过程，超出了本书的范围，但考虑到有许多表现优秀的预训练模型可以为不同的使用场景提供解决方案，了解如何在我们的 Web 应用程序中使用这些模型，以提高其效果和实用性，是非常重要的。

简单来说，在 Streamlit 中导入并使用预训练 ML 模型是一种高级技术，可以创建非常强大的 Web 应用程序。用户可以导入任何类型的预训练模型，并使用它在 Streamlit Web 应用程序中对新数据进行预测。这为开发者开启了一个全新的、更具定制化和专门化的应用世界，可以根据特定需求量身定制。

在本章中，我们将涵盖以下主要主题：

• 理解预训练 ML 模型的好处

• 创建定制的 Web 应用程序以改善用户体验

• 利用机器学习（ML）的预测

技术要求

• 在本章中，我们将使用以下库、包和工具：

  • Sublime Text

  • Python 3

  • pipenv

  • Streamlit

  • OpenCV

  • Pillow

  • numpy

  • tensorflow

• 本章的代码可以在本书的 GitHub 仓库中找到：github.com/PacktPublishing/Web-App-Development-Made-Simple-with-Streamlit/tree/7c29f4eca8b189b4f711cc8f724c6dee9dba60ab/Chapter10。

理解预训练 ML 模型的好处

在这一简短部分中，我将尝试阐明为什么在我们的 Web 应用程序中使用预训练的 ML 模型是一个非常好的、有价值的想法。

近年来，机器学习（ML）迅速发展，为增强 Web 应用程序提供了前所未有的机会，能够为其增加智能和预测功能。Streamlit 是一个流行的 Python 库，用于创建交互式 Web 应用程序，因其简单性和灵活性而受到广泛欢迎。当与预训练的 ML 模型结合时，Streamlit 可以帮助开发人员构建能够利用 AI 巨大潜力的 Web 应用程序。

预训练的 ML 模型是已经在大规模数据集上训练好的模型，用于处理各种任务，如图像识别、自然语言处理等。这些模型已经学习到丰富的数据表示，并且可以针对特定应用进行微调。将预训练模型集成到 Streamlit Web 应用程序中，可以显著增强其功能并提供无缝的用户体验。

以下是使用预训练 AI 模型的一些关键好处：

• 高效开发：使用预训练模型的主要好处之一是减少了开发时间。开发者不需要从零开始训练模型，而是可以利用现有的预训练模型，节省时间和资源。Streamlit 简单的界面增强了这一效率，使开发者能够快速将这些模型集成到他们的应用中。

• 改善用户体验：预训练模型将最先进的能力带入 Web 应用，启用图像识别、情感分析和语言翻译等功能。用户可以更自然地与应用互动，使其更加吸引人且易于使用。例如，由预训练模型驱动的产品推荐系统可以增强基于 Streamlit 构建的电子商务网站的购物体验。

• 可扩展性和性能：预训练模型通常被设计用于处理复杂任务，使其适用于广泛的应用场景。Streamlit 高效地提供 Web 应用的能力，使其成为预训练模型的完美搭档。无论是处理大型数据集，还是执行实时预测，Streamlit 和预训练模型的结合确保了高可扩展性和性能。

• 定制和微调：虽然预训练模型提供了坚实的基础，开发者仍然可以对这些模型进行微调，以适应特定需求。Streamlit 的灵活性使得定制化模型和量身定制的用户界面的集成变得更加容易。这一结合使开发者能够创建独特且高度专业化的应用程序。

预训练机器学习模型在基于 Streamlit 的 Web 应用中的潜在应用广泛且多样。以下是一些例子：

• 医疗健康：Streamlit 应用可以利用预训练模型进行医学图像分析、疾病诊断和患者风险预测，为医疗专业人员提供有价值的工具。

• 电子商务：由预训练模型驱动的推荐系统可以提升产品发现，推动销售并提高用户满意度。

• 自然语言处理：情感分析、聊天机器人和语言翻译可以提升各类应用中的用户互动，从客户支持到社交媒体平台。

• 金融：欺诈检测、信用评分和股市预测可以从预训练模型的预测能力中受益，帮助企业做出明智的决策。

总结来说，预训练的机器学习模型与基于 Streamlit 的网页应用程序的融合代表了 AI 驱动开发领域的一个有前景的前沿。这种协同作用使开发者能够快速高效地创建智能互动的网页应用程序。随着技术的进步，这种结合的潜在应用仅限于我们的想象力。通过在 Streamlit 中利用预训练模型的强大功能，我们可以提供前沿的解决方案，改变我们与网页应用程序的交互方式，使它们变得更智能、更具吸引力，也更有用，适用于各个领域的用户。

创建定制化的网页应用程序以改善用户体验

现在，是时候完成我们的Covid-19 检测工具网页应用程序了。到目前为止，我们已经实现了几个功能，比如图像增强和免责声明及信息，但我们仍然缺少诊断部分。图 10.1展示了我们目前为止完成的部分：

图 10.1：到目前为止我们开发的 Covid-19 检测工具网页应用程序

正如我在第九章中提到的，诊断的任务是从图片，特别是从胸部 X 光片中，判断一个病人是否患有 Covid-19。

这种预测可以通过使用预训练的 AI 模型来执行，在我们的案例中是卷积神经网络（CNN）。CNN 是一种具有特殊结构或形状的神经网络，在计算机视觉相关任务上表现非常出色。计算机视觉简而言之就是让计算机理解图片中发生了什么，它的内容、其中表示的物体等等。

那么，让我们看看如何在 Streamlit 中使用预训练的 AI 模型来执行计算机视觉任务，在这种情况下是进行预测。

我们需要从我们在第九章停止的地方继续：与菜单中诊断选项相关的if语句，如下图所示：

图 10.2：菜单中的“诊断”选项

第一步是在侧边栏中添加一个按钮。这样，当用户点击该按钮（其标签为诊断）时，工具将执行二元分类，利用预训练模型预测 X 光图像是否代表 Covid-19 病例。

添加按钮我们知道是非常简单的——只需要在choice=='Diagnosis'之后立即输入以下几行代码：

if st.sidebar.button('Diagnosis'):

我们将使用的 CNN 是通过黑白图像训练的。因此，首先，当用户点击numpy时，这是我们已经导入的一个库。我们需要的三行代码如下：

new_img = np.array(our_image.convert('RGB'))
new_img = cv2.cvtColor(new_img, 1) #0 is original, 1 is grayscale
Gray = cv2.cvtColor(new_img, cv2.COLOR_BGR2GRAY)

第一行代码将图像转换为数组，第二行将图像转换为灰度域，最后一行将其转换为纯黑白图像。请注意，我们正在使用 cv2，这是文件开头导入的 Python 计算机视觉库。

这张黑白图像保存在一个名为 gray 的变量中。

注意

学习我们正在导入并使用的几个 Python 包超出了本书的范围；然而，查看 cv2（OpenCV）官方网站 opencv.org/ 可能是一个非常有趣的活动。

在转换上传的图像后，我们已经准备好在屏幕上写一些文本（"Chest X-Ray"）来为我们的操作提供一些上下文，并打印出黑白图像：

st.text("Chest X-Ray")
st.image(gray, width=400, use_column_width= True)

到目前为止，我们已经添加的代码如下：

图 10.3：我们已添加到诊断菜单的代码

从浏览器的角度来看，您应该看到如下内容：

图 10.4：诊断按钮和黑白图像

由于 CNN 是用特定格式的黑白图像进行训练的，包括大小和数值，在进行预测之前，我们必须对感兴趣的图像进行预处理，以获得神经网络所期望的相同格式。

神经网络是用大小为 200 像素乘 200 像素，数值范围从 0 到 1 的图像进行训练的，其中 0 表示黑色，1 表示白色。

我们需要编写的代码，以确保上传的图像符合神经网络所需的格式如下：

IMG_SIZE = (200, 200)
img = cv2.equalizeHist(gray)
img = cv2.resize(img, IMG_SIZE)
img = img/255 #normalization

第一行仅是一个图像大小定义，保存在常量中。第二行执行图像均衡化操作，这个操作可能会提高图像的清晰度。第三行根据保存在常量中的 IMG_SIZE 尺寸调整图像大小，最后一行对图像进行归一化处理（通常，灰度值从 0（黑色）到 255（白色）；将所有值除以 255，得到的值范围是 0 到 1，分别表示黑色和白色）。

图 10.5 显示了我们刚才解释的代码行：

图 10.5：X 光图像的预处理

我们用来管理神经网络的库名为 tensorflow，它要求图像以精确的格式（n,m,p,q）提供，其中 n、m、p 和 q 都是整数。不幸的是，我们的图像的形状仅为 (200,200)。因此，在我们使用它进行预测之前，必须先调整它的大小；这是我们应该使用的指令：

X_Ray = img.reshape(1, 200, 200, 1)

通过这种方式处理图像，我们为机器学习分类器提供了非常好的输入。我们将在下一节学习如何处理这个任务。

利用机器学习的预测结果

到目前为止，一切准备就绪。现在，为了能够根据 X 光图像进行 Covid-19 的预测，我们需要加载我们预训练的模型（该模型可以在本章的 GitHub 仓库中找到；链接可以在技术要求部分找到），并将其与上传的图片一起使用（图片经过我们在创建定制化 Web 应用程序以改善用户体验部分中编写的代码处理）。正如在理解预训练机器学习模型的优势部分中所解释的，使用预训练模型是一种轻松快速的解决问题的方法，无需自己花时间开发 AI 模型。在我们具体的案例中，我们只需要加载并使用他人开发并提供的模型，就可以从图像中预测是否存在 Covid-19。

让我们开始编写代码：

model = tf.keras.models.load_model("./models/Covid19_CNN_Classifier.h5")

在前面的代码中，tf是tensorflow的别名，keras是它的一个模块。所以，我们只需将预训练模型的路径传递给load_model方法（请注意，tensorflow模型的文件类型是h5），并将其保存到一个名为model的变量中。请注意，预训练的 CNN 被放置在一个名为models的目录中，所以如果你改变了它的位置，请相应地更新代码中的路径。

这是我们到目前为止实现的代码：

图 10.6：图像重塑和模型加载

我们的模型变量有一个名为predict的方法，该方法返回一个包含两个元素的列表：没有 Covid 的概率和 Covid 的概率。由于我们进行的是二分类（真或假，也就是没有 Covid 或有 Covid），我们需要知道图片是否代表 Covid 病例；我们可以通过使用 np（numpy）的 argmax 方法来实现这一点。argmax 检查列表中的值，并提供最大值的索引，在我们的情况下是0或1（0表示没有 Covid，1表示有 Covid）。所以，如果预测结果是一个列表，如[0.70, 0.30]，argmax将返回0；索引从0开始（因为0.70大于0.30），这意味着诊断结果是没有 Covid，因为没有 Covid 的概率是70%，而 Covid 的概率是30%。

为了完成菜单中的诊断选项，我们可以添加以下代码：

diagnosis_proba = model.predict(X_Ray)
diagnosis = np.argmax(diagnosis_proba, axis=1)

下面是我们实现的代码：

图 10.7：我们是如何获取预测结果的

到此为止，我们已经拥有了显示结果所需的一切。

现在，作为第一个前端元素，我们必须在侧边栏创建一个进度条，用于显示诊断预测的状态。为此，我们可以编写以下代码：

my_bar = st.sidebar.progress(0)

进度条总是与定时器一起工作的，因此我们应该在 Python 文件的开头就导入时间模块。这就是我们在开始这个项目时所做的（见第八章中的图 8.4）。让我们继续添加以下代码：

for percent_complete in range(100):
time.sleep(0.05)
my_bar.progress(percent_complete + 1)

通过这种方式，我们创建了一个for循环，每次暂停0.05秒后激活进度条，延伸1个单位（进度条初始值为0），由于进度条的范围从0到100单位，因此此操作会重复100次。

该进度条表示预测正在进行中，直到它达到最大值并停止延伸。

当进度条完全展开时，我们可以在屏幕上打印诊断结果，解释我们正在处理哪种预测。为此，我们可以输入以下内容：

if diagnosis == 0:
st.sidebar.success("DIAGNOSIS: NO COVID-19")
else:
st.sidebar.error ("DIAGNOSIS: COVID-19")

这是我们为前端部分添加的代码——也就是在浏览器中可视化的部分：

图 10.8：我们如何获得预测并将其可视化到屏幕上

这是浏览器中没有 Covid 预测时的结果：

图 10.9：没有 Covid 的诊断结果

由于我们用来执行预测的模型仅仅是一个玩具模型，并且通过它做出的诊断没有临床价值，因此最好在我们的应用中添加一个最终的免责声明。

让我们添加类似这样的内容：

st.warning("This Web App is just a DEMO about Streamlit and Artificial Intelligence and there is no clinical value in its diagnosis!")

我们的菜单中诊断选项的最终代码如下：

图 10.10：菜单中“诊断”选项的完整代码

这是浏览器中的免责声明：

图 10.11：带免责声明的预测

请记住，这里重点不是要获得一个高性能的模型来预测 Covid-19 病例，而是理解如何将 AI 模型集成到 Streamlit 中。

让我们更深入地探讨我们在这一章中取得的成就。

首先，除了tensorflow，像我们在网页应用中使用的那样，AI 模型还可以使用其他包进行训练，如scikit-learn。因此，在将模型加载到您的 Streamlit 网页应用之前，仔细阅读用于训练模型的特定包的文档是非常重要的。不同的包通常采用不同的语法来加载它们的模型。这意味着，根据您决定采用的模型，您必须在代码中使用不同的语法。

第二个也是最重要的点是，我们刚刚实现的这个网页应用非常强大，因为它执行了多个复杂的任务，如图像增强、诊断等。尽管它很复杂，但当我们统计写下的代码行数时，会发现从头到尾我们只写了大约 130 行 Python 代码（包括注释）。这正是 Python 和 Streamlit 结合的真正力量。在几行代码中，我们实现了一个执行多个复杂任务的网页应用，甚至利用了 AI。更重要的是，我们还具备了所有典型的部件，这些部件通常包含在非常专业的应用中，如各种文本、按钮、进度条等。

像往常一样，考虑到这次代码更加复杂，下面是我们刚刚完成的网页应用的完整代码截图：

图 10.12：Covid-19 检测工具网页应用第一部分

首先，我们导入了库并定义了主函数。主函数从创建一个美观的标题开始，然后继续显示一个file_uploader小部件。之后，出现了一个包含三种声音的菜单——图像增强、诊断和免责声明及信息：

图 10.13：Covid-19 检测工具网页应用第二部分

然后，我们主要处理了图像增强功能，并完成了诊断部分。在这部分中，我们对图像进行了预处理，为 ML 模型做准备，加载了分类模型和预训练的 CNN，执行了预测，并引入了一些漂亮的小部件，如进度条：

图 10.14：Covid-19 检测工具网页应用第三部分

最后，我们为免责声明及信息部分提供了简单的文本，并创建了关于作者的信息页面。

摘要

本章非常重要，因为我们学会了如何将 AI 集成到我们的网页应用中。

AI 是一项具有高度颠覆性的技术，当在我们的应用程序中得到妥善管理和利用时，能够彻底改变游戏规则。在这一章中，我们学到了如何将独立开发和训练的 AI 模型集成到 Streamlit 中。许多包和工具可以创建 AI 模型，几乎所有这些模型都可以被集成到 Streamlit 中；这只是一个检查适当文档并遵循规则的问题。

将 AI 模型加载到我们的网页应用程序中只是这个过程的一部分，因为每个模型都需要以特定格式输入信息。因此，我们提供给模型的所有数据必须进行预处理，以确保符合该特定格式。这就是为什么我们花费了大量时间处理并转换我们上传的 X 光图像，使其兼容我们使用的 CNN 模型的原因。上传的图像被转换为黑白图像，接着进行了调整大小和形状转换。

输入以正确格式提供非常重要；否则，模型将无法理解该做什么，并会生成运行时错误。在预处理图像之后，我们专注于预测；我们学习了如何进行预测并进行解读。最后，我们涵盖了前端部分，并利用进度条等美丽的效果在网页浏览器中展示预测结果。我们观察到，在处理诸如健康等敏感话题时，包含免责声明是良好的实践，以避免潜在问题。

拥有一个可用的应用程序是一个很好的起点，但这并不是我们工作的真正结论。正如我们在自然语言处理网页应用程序中所做的那样，我们仍然需要将我们的新工具部署到云端，因为只有通过部署，才能构建出一个做得好、表现优异的应用程序，并且能够为广泛的客户群体提供服务。这正是我们将在下一章中完成的任务。

第十一章：在 Streamlit Share 上部署和管理复杂库

让我们继续探索在 Streamlit Share 上的部署，Streamlit 框架提供的一个服务，允许用户通过简单的几次点击将他们使用 Streamlit 实现的网页应用程序部署到云端。这一次，我们需要打包Covid-19 检测工具应用并尝试部署它。这里将涉及许多大型库，因此任务稍微复杂一些。

当我们处理大型文件时，部署任务变得更加困难，因为 GitHub 在文件大小上有一些限制；实际上，不能直接上传大于 25MB 的文件。在我们的Covid-19 检测工具应用中，不幸的是，AI 模型的文件大小超过了 25MB。上传到 GitHub 的文件不能大于这个大小，至少在撰写本书时是这样的。

我们可以使用一些技巧来绕过这个限制；在本章中，我将展示一个相当聪明的方法来做到这一点。

在本章中，我们将讨论以下主要主题：

• 巩固云部署技能

• 避免不良行为

• 管理困难的库

• 在 Streamlit Cloud 上部署应用

技术要求

• 在本章中，我们将使用以下库、包和工具：

  • Sublime Text

  • Python 3

  • pipenv

  • Streamlit

  • GitHub

  • Streamlit Cloud

• 本章的代码可以在本书的 GitHub 仓库中找到：github.com/PacktPublishing/Web-App-Development-Made-Simple-with-Streamlit/tree/8e8d3b20f3de84b5ce02bc2352f86ad1c8018a4a/Chapter11

巩固云部署技能

考虑到我们已经进入本书的第十一章，我们应该意识到，实施一个网页应用程序只是过程的一部分，过程直到网页应用程序被部署和共享后才算结束。

我们已经理解了网页应用程序部署的重要性，因为我们在本书的第一部分创建 NLP 网页应用程序时已经涉及过这个话题，而且因为它是我们在访问 Streamlit 网站时看到的第一个内容之一：

图 11.1：Streamlit 关于应用程序共享的标语

当我们点击主菜单中的Cloud语音时，我们会被重定向到一个页面，页面包含一个关于部署的快速视频和一条重要声明：直接从 Streamlit 部署、管理并分享你的应用程序，与世界分享——全部 免费：

图 11.2：Streamlit Cloud

这里最重要的信息是与世界分享你的应用程序。网页应用程序是一种存在于网络上的东西——这才是它的真正本质。

当我们部署 NLP 应用程序时，我们采用了相当顺畅的流程：

1. 我们创建了一个需求文件。

2. 我们将 Web 应用程序托管在 GitHub 上。

3. 我们已登录 Streamlit Cloud。

4. 我们通过 Streamlit Cloud/GitHub 连接共享了 Web 应用程序。

这个过程与我们的Covid-19 检测工具应用程序相同，但有一个重要区别：我们必须管理一个外部的大型文件——也就是用于检测 Covid-19 病例的 CNN 预训练模型。让我们学习如何处理这种大文件。

避免不良行为

不良行为是指任何缺失、错误或不完整的操作，导致部署时出现运行时问题，最终导致部署任务失败。出于这个原因，在本节中，我们将学习完成任何部署所需的步骤。

创建一个列出所有安装并用于开发 Python 代码的包的列表

运行我们的 Web 应用程序所需的第一件事是列出所有安装和用于开发 Python 代码的包。正如我们所知，有多种方法可以获取这个列表，但最简单的方式是使用pipreqs。让我们来看一下：

1. 首先，让我们通过在终端中输入以下命令来安装pipreqs：

   requirements.txt file with the following simple instruction:
   
   

   covid 是包含我们 Web 应用程序所有代码的目录名称。

2. 最后，我们只需通过写入以下指令来检查需求文件是否包含所有内容：

   cat ./covid/requirements.txt
   

图 11.3 显示了requirements.txt文件的内容：

图 11.3：requirements.txt 文件

现在我们已经拥有了所有代码和需求文件，我们准备在 GitHub 上创建一个专门的仓库。

创建一个 GitHub 仓库

让我们使用稍后将用于连接 Streamlit Cloud 的同一账户登录 GitHub。

一旦进入 GitHub，我们可以按照以下步骤创建一个新仓库：

1. 在Repositories页面点击New标签。我们应该看到以下屏幕：

图 11.4：在 GitHub 上创建新仓库

1. 输入仓库名称，例如covid19-book，并添加描述（这不是必需的）。

2. 保持仓库为公开，并勾选添加 README 文件。

3. 最后，点击创建仓库。

稍等片刻，我们会看到以下页面：

图 11.5：新仓库为空

如我们所见，新的仓库是空的。我们必须将 Python 文件和requirements.txt文件添加到其中。这个操作非常简单——我们只需要点击Add file并上传我们感兴趣的文件。

原则上，我们已经准备好前往 Streamlit Cloud 部署应用程序并与全世界分享它。

然而，每当我们处于部署过程的这一阶段时，我们必须特别注意我们的操作。如果我们尝试将新创建的仓库中的文件部署到 Streamlit Cloud，我们将遇到运行时错误，应用程序将无法运行。让我们学习如何修复这个问题。

避免运行时错误

为了避免部署过程中出现运行时错误，我们必须考虑我们的 Web 应用程序正常运行所需的内容。

我们需要的第一个项是 Covid-19 图像，该图像显示在Covid-19 检测工具应用程序的左侧边栏中。这个操作非常简单，因为我们只需将covid19.jpeg文件添加到我们的仓库中。

第二个需要注意的事项是，目前编写本书时，Streamlit 版本存在与opencv库相关的一些问题：在尝试导入该库时会出现问题。为了解决此问题，我们必须通过点击packages.txt在仓库中创建一个新文件。该文件必须包含以下指令：

libgl1

通过这种方式，Streamlit Cloud 将在部署时安装所有正确的依赖项。

当使用Covid-19 检测工具应用程序时，我们必须特别注意的第三个事项如下。当我们上传 X 射线图像并点击诊断以确定是否为 Covid-19 病例时，预训练的 CNN 模型将被运行。如果 Web 应用程序无法找到该模型，我们可能会遇到问题。

这里需要注意的一点是，上传 AI 模型文件并不足够，因为如果我们仔细检查我们在第 81 行编写的代码，我们会看到该模型必须放在一个名为models的目录中，并且该目录与app.py文件处于同一层级。简而言之，我们必须在 GitHub 仓库中重新创建与 Python 代码中指示的相同文件和目录结构；否则，我们需要的文件——特别是 CNN 模型——将永远找不到：

图 11.6：第 81 行显示了我们需要放置 CNN 模型文件的位置

最后，出现了一个相当大的问题。当我们尝试上传Covid19_CNN_Classifier.h5时，我们发现由于文件大于 25 MB，GitHub 网页只能接受小于此大小的文件，因此无法进行此操作。

在下一节中，我们将学习如何解决这个问题。

管理困难的库

为了解决文件大小问题，我们必须安装 GitHub 桌面应用程序，目前该应用程序仅适用于 Windows 或 macOS。因此，请按照以下步骤操作：

1. 从desktop.github.com下载并安装 GitHub 桌面应用程序。

2. 然后，登录到你的 GitHub 账户并授权。你应该会看到以下窗口：

图 11.7：GitHub 桌面应用程序

1. 现在，选择covid19-book仓库（如果你使用了其他名称，必须寻找该名称）并点击克隆...。

   仓库的克隆副本将创建在你的机器上，如图 11.8所示：

图 11.8：在本地克隆 GitHub 仓库

1. 克隆操作完成后，打开你在 Mac Finder 或 Windows 文件资源管理器中的本地仓库文件夹，如图 11.9所示：

图 11.9：本地仓库文件夹

1. 现在，创建models目录并将Covid19_CNN_Classifier.h5文件复制到其中：

图 11.10：大文件已复制到正确的目录中

1. 返回 GitHub Desktop 应用程序，在这里你会看到我们刚刚添加的大文件。在adding cnn model中写一些内容，然后点击提交 到主分支：

图 11.11：大文件已复制到正确的目录中

1. 现在，选择推送原始数据，如图 11.12所示：

图 11.12：推送原始数据

现在，你可以在浏览器中检查大文件是否已包含在你的 GitHub 仓库中：

图 11.13：包含所有必要文件的 GitHub 仓库

我们在这里学到的非常重要，因为处理复杂的库或大文件的情况非常常见，知道如何正确管理这些问题能够带来很大差异。处理这种问题使得我们能够部署任何我们可能开发的 Web 应用程序。

在 Streamlit Cloud 上部署应用程序

最难的部分已经过去。从现在起，我们可以按照与 NLP Web 应用相同的程序进行操作。以下是步骤：

1. 通过选择继续使用 Github并授权，使用你用于 GitHub 的相同帐户登录 Streamlit Cloud。

2. 进入后，选择新应用。

在部署的应用程序中，你应该只看到我们在第七章中创建的应用。窗口应该像图 11.14所示：

图 11.14：在 Streamlit Cloud 上创建新应用

1. 在选择app.py后，为应用程序的 URL 指定一个有意义的名称，如图 11.15所示：

图 11.15：在 Streamlit Cloud 上部署 Web 应用程序

1. 当一切准备好时，点击部署！并等待，因为你的应用正在烘焙中：

图 11.16：部署动画

在此过程结束时，你的Covid-19 检测工具应用程序将被部署，并准备好与大家分享。

这是部署过程完成后我们新的网页应用的样子：

图 11.17：部署在 Streamlit Cloud 上的 Covid-19 检测工具应用程序

如图 11.17所示，应用程序现在已经在网络上运行，其 URL 一目了然，因为它包含了covid19-book-chapter11。

再次强调，正确的部署能力在网页应用程序开发过程中是至关重要的。只有当网页应用程序部署到云端并且任何人都可以使用时，我们才能认为这个过程已经完成。本章内容使我们能够部署任何类型的网页应用，甚至包括那些包含复杂库和大文件的应用。

重要说明

根据你安装的软件包版本，可能还需要安装opencv-python库。如果在部署过程中收到此建议，只需像往常一样安装该库（使用pipenv install...），将其添加到requirements.txt文件中，然后按照 GitHub 的标准部署流程完成部署。

总结

干得好！部署Covid-19 检测工具应用程序是一个复杂的过程。正如我们所见，有许多潜在问题需要避免。

首先，我们需要重新创建与 Python 代码中相同的文件和目录结构，并且不能忘记将图片文件也包含在 GitHub 仓库中。

第二个问题是允许 Streamlit Cloud 管理与opencv相关的所有依赖项。为此，需要向仓库中添加一个packages.txt文件，其中包含获取这些依赖项的指令。

最后，我们发现 GitHub——至少是它的在线版本——仅管理小于 25 MB 的文件，但有时，比如使用 CNN AI 模型时，我们需要上传更大的文件。这项操作要求我们安装 GitHub Desktop 应用程序，并在本地（在我们的计算机上）克隆仓库。一旦我们将仓库克隆到本地，就可以添加这个大文件并将其推送回源（Git 服务器）。这样，即使是超过 50 MB 的 AI 模型文件，也可以存储在 GitHub 仓库中。

一旦我们解决了所有这些问题，就准备好将网页应用程序部署到 Streamlit Cloud 并与大家共享了。

从下一章开始，我们将讨论一些非常高级的话题，如智能文件上传、为我们的网页应用添加登录和注册功能、管理数据库等。

第四部分：安全且可定制网页应用的高级技术

本书的第四部分致力于掌握创建安全且高度可定制的 Web 应用所需的高级技术。首先，介绍了智能文件上传方法，专为专业级 Web 应用定制，确保高效且用户友好的文件管理。接着，本节探讨了安全性问题，提供了关于如何创建安全的登录和注册流程的深入指导，这是任何涉及用户数据的 Web 应用的基石。然后，本部分讲解了页面定制、主题个性化以及多页面布局的实现，旨在提供更具针对性和吸引力的用户体验。此外，还涵盖了通过表单、会话状态管理和自定义子域来增强 Web 应用，为 Web 应用增添了一层复杂性和功能性。最后，本书以关键要点总结和深刻的结论收尾，总结了所学内容，并为 Web 应用开发的未来做好准备。此部分对于那些希望将 Web 应用从基础功能提升至卓越水平的开发者至关重要，重点关注定制、安全性和高级用户参与。

本部分包含以下章节：

• 第十二章，智能文件上传——专业 Web 应用的高级技巧

• 第十三章，为 Web 应用创建安全的登录和注册流程

• 第十四章，页面定制、主题个性化与多页面实现

• 第十五章，通过表单、会话状态和自定义子域增强 Web 应用

• 第十六章，总结与结论

第十二章：智能文件上传 – 专业 Web 应用程序的高级技术

到了这一步，我们几乎掌握了实现和部署高效、美观的 Web 应用程序所需的所有技能。尽管如此，我们的 Web 应用程序仍然有些“天真”，离专业应用还有一定距离。从本章开始，我们将处理一些高级技术，帮助使我们的产品看起来更加完善和专业。

我们从文件上传器开始，这是我们在Covid-19 检测工具应用程序中已经使用过的小部件，当时我们需要上传胸部 X 光图像。

我们现在想做的是将文件上传器提升到一个新的层次，深入定制它，自动检测我们要打开的文件类型，并采取适当的操作。这种行为赋予我们的 Web 应用程序非常专业的形象，并使其易于使用。

在本章中，我们将讨论以下主要主题：

• 理解文件上传器的定制功能

• 为 Web 应用程序创建合适的文件上传器

• 使用智能组件简化 Web 应用程序

技术要求

• 在本章中，我们将使用以下库、包和工具：

  • Sublime Text

  • Python 3

  • pipenv

  • Streamlit

  • docx2txt

  • pdfplumber

• 本章的代码可以在本书的 GitHub 仓库中找到：github.com/PacktPublishing/Web-App-Development-Made-Simple-with-Streamlit/tree/57674ee5b5c58769120051cfb466f4b4d658c20c/Chapter12。

理解文件上传器的定制功能

上传文件是一个简单的任务。实现方式有很多种，不同的方法会对所谓的用户体验产生不同的影响：用户对应用程序本身的感知方式。此外，更好地实现上传功能可以加速整个应用程序，使用户的操作更加便捷。假设我们要上传一个包含文本的文件。它可能是一个.txt文件，即纯文本文件，也可能是.docx文件，Microsoft Word 文件，甚至是.pdf文件。一种方法是询问客户，你需要上传哪种文件（.txtx，.docx，.pdf）？ 如果用户回答.txt，应用程序将启动为此文件格式定制的file_uploader小部件；如果答案是.docx，则会执行为 Microsoft Word 定制的file_uploader小部件，依此类推。这个方法效果很好，但有点过于复杂。

如果用户更新了文件，而 Web 应用程序能在没有人工干预的情况下自动识别文件类型，怎么办？

让我们学习如何根据两种方法实现这一功能，一种需要用户提供信息，另一种则完全自动化。

创建一个新的虚拟环境

首先，我们将创建一个专门用于本章的新虚拟环境。请按照以下步骤进行：

1. 创建一个新文件夹，并命名为FileUploader。

2. 接下来，进入新创建的文件夹，一旦进入，像往常一样输入pipenv shell以创建虚拟环境。

   这些指令如图 12.1所示：

图 12.1：为本章创建新的虚拟环境

1. 之后，我们唯一需要的库是 Streamlit，所以我们输入以下内容：

   pipenv install streamlit
   

   几秒钟后，我们的环境将配备最新的 Streamlit 版本。

2. 像往常一样，在开始编写代码之前，我们需要创建一个空的 Python 文件，这是一项非常简单的操作。我们可以通过输入以下指令来完成：

   touch app.py
   

这里，app.py是我们文件的名称。

我们可以使用自己喜欢的 IDE（例如 Sublime Text）打开app.py文件。

构建应用程序骨架

当我们拥有一个空文件时，最佳的起始选项总是使用我们之前在两个 Web 应用程序中采用的骨架。因此，我们可以导入库——在这种情况下，仅是 streamlit——然后定义一个包含菜单的主函数。本章应用程序的菜单非常简洁，仅包含两个选项：Dropfiles和About。

在下图中，我们可以看到用于此特定情况的骨架是多么简洁：

图 12.2：我们的应用程序骨架

以下是图 12.2中展示的代码的详细说明：

• 在第 1 行，我们导入了库（此处为streamlit），而在第 4 行，我们定义了main函数——即包含我们应用程序业务逻辑的函数。

• 在第 5 行，我们有一个名为menu的列表，包含了 Web 应用程序菜单中的值（这个 Web 应用程序可以提供的功能）。

• 在第 6 行，我们从侧边栏的菜单列表开始创建一个下拉框。

• 在第 8 行和第 13 行，我们添加了一个if语句，根据在第 6 行的下拉框中选择的选项，进入适当的代码执行。

到此，我们已经完成了应用程序的骨架。现在，我们可以在终端中输入以下指令：

pipenv run streamlit run app.py

到此为止，我们可以启动 Web 应用程序并在浏览器中查看：

图 12.3：首次执行我们的新 Web 应用

如我们所见，在侧边栏中，有一个下拉框提供了菜单中的两个选项。

让我们专注于菜单中的Dropfile选项。

为应用程序菜单创建单选按钮

我们可以使用单选按钮让用户选择他们想要上传的文件类型。我们来添加以下代码：

file_selection = st.radio("Select the file type", ['TXT', 'DOCX', 'PDF'])

这样，文件选择会存储在一个名为file_selection的变量中。到目前为止，我们的应用程序如下所示：

图 12.4：使用单选按钮选择文件类型

一旦用户选择了一个选项，我们就准备使用所选文件类型来打开file_uploader。在这种情况下，可以采用以下代码：

raw_text_file = st.file_uploader("Upload File", type=['txt'])
if raw_text_file is not None:
try:
raw_text = str(raw_text_file.read(),"utf-8")
st.info("Text from TXT file")
st.write(raw_text)
except:
st.warning("TXT File Fetching Problem...")

很容易，在上传文件（类型为txt）后，我们可以检查文件是否为空，使用utf-8编码读取文件，并将其显示在屏幕上。如果上传的文件为空，我们只需在屏幕上打印一个警告，显示TXT 文件 获取问题...。

图 12**.5 显示了在 IDE 中的代码：

图 12.5：上传 .txt 文件

当我们切换到浏览器时，会发生一些有趣的事情。即使我们的目录中有三个不同的文本文件——即'txt'、'docx'和'pdf'——由于我们指定了txt作为文件类型，文件上传工具只能看到并打开.txt文件：

图 12.6：在左侧的目录中，有三种不同的文件，但我们只能打开 .txt 文件

此时，为了管理其他文件类型，我们应该编写与处理txt类型时几乎相同的代码，但还需要指定不同的文件类型。因此，代码可以演变成如下所示：

图 12.7：询问用户文件类型

图 12**.7中的代码包含了一些pass调用，用于处理.docx和.pdf文件。如果你想完成相关功能，必须导入适当的库并读取文件内容。

这里的重点是，当以这种方式处理文件上传时，即使代码在技术上运行得很好，我们也不得不执行一些我们不太喜欢的操作：

• 在开始时询问用户文件类型

• 重复（我们只是复制和粘贴）很多冗余代码

现在我们已经探讨了这个解决方案，让我们尝试实现一些更优雅、更简洁的方法，能够自动读取文件类型，而不需要询问用户。

为 web 应用程序创建一个合适的文件上传器

正如你所想，这次我们没有使用单选按钮。相反，我们直接上传文件。因此，参考图 12**.7，让我们注释掉第 11 行到第 31 行之间的所有代码。

立刻在子标题中，在第 10 行，我们可以添加file_uploader，这次包括所有三种类型：

raw_text_file = st.file_uploader('Upload File', type=['txt', 'docx', 'pdf'])

当我们尝试从浏览器上传文件时，这时在我们的目录中，我们将看到所有三种类型的文件，并且能够选择其中一个。

正如我们在图 12**.5中的第 15 行所做的，我们可以通过编写以下代码来检查文件是否为空：

if raw_text_file is not None:

在这个if语句之后，我们必须获取文件的详细信息。我们需要这些信息来理解我们选择的是哪种类型的文件，以及如何管理它。通过使用包含我们上传文件的raw_file_text变量，我们可以使用三个方法，分别是name、type和size，来收集我们需要的详细信息。

这些详细信息将被放入一个字典中，我们称之为file_details。让我们在代码中看到它：

图 12.8: 文件上传与文件详细信息检测的代码

这是浏览器中的结果：

图 12.9: 浏览器中的文件上传与文件详细信息检测

正如我们所看到的，在目录中，我们有三种类型的文件，并且可以选择其中任何一个，因为文件的详细信息已经正确截取。在.txt文件的情况下，我们得到了正确的文件名、text/plain类型及其大小。

让我们看看.docx和.pdf文件的类型。这里显示的.docx文件具有一个非常长的类型：

图 12.10: .docx 文件

与此同时，.pdf文件的名字较短：

图 12.11: .pdf 文件

这三种不同类型的文件是我们管理文件自动上传所需的全部内容。要打开.pdf和.docx文件，我们需要安装合适的库（pdfplumber和docx2txt）。因此，请在终端中键入以下命令：

pipenv install pdfplumber docx2txt

第一个包处理.pdf文件，而第二个包处理.docx文件。

安装完成后，我们必须将这些库导入到app.py文件中，方法是键入以下内容：

import docx2txt
import pdfplumber

这样，我们就有了所有需要的信息。因此，参考图 12.8，从第 15 行继续，我们可以编写如下代码：

if raw_text_file.type == "text/plain":
try:
      raw_text = str(raw_text_file.read(), "utf-8")
st.info("Text from TXT file")
except:
st.write("TXT File Fetching Problem...")

上面的代码检查我们上传的文件类型是否为text/plain。在这种情况下，它读取文件内容，将其存储在名为raw_text的变量中，并在屏幕上显示标签“来自 TXT 文件的文本”。这个检查发生在一个 try 循环中，因此，如果发生错误，屏幕上会打印一个简单的异常。

我们为.txt文件所使用的代码也适用于其他类型的文件；唯一的区别是文件类型和读取文件内容所需的库（即我们刚刚导入的pdfplumber和docx2txt）。

让我们看一下图 12.12中展示的代码：

图 12.12: 自动上传文件的代码

在第 27 行，我们使用了pdfplumber，因为文件类型是"application/pdf"，而在第 35 行，我们使用了docx2txt，因为需要打开的是.docx文件。

最后，在第 42 行，我们自动将打开的文件内容打印到屏幕上。

这是在.docx文件情况下的结果；请注意文件类型的非常长的名称：

图 12.13：.docx 文件被自动识别并打开

.pdf文件的应用行为是相同的：

图 12.14：.pdf 文件被自动识别并打开

到目前为止，我们已经学习了两种文件上传方式：一种是询问用户文件类型，另一种是让文件上传过程自动化。两种方法都是有效的，选择哪种取决于具体情况。使用智能组件简化网页应用应该始终是首选方案。

使用智能组件简化网页应用

到目前为止，我们已经学习了有效的网页应用设计原理。现在，我们可以开始关注用户体验，用户体验应该始终是简单、直观且美观的。

带有单选按钮的方法，从功能角度来看，效果很好，但使得事情变得有点复杂，因为它需要用户在开始时进行干预，并在屏幕上显示一个难看的单选按钮。

另一种方法非常整洁且极其干净，因为屏幕上仅显示一个文件上传小部件，用户只需点击（或使用拖放）即可选择文件，无需任何其他干预。

这是因为网页应用拦截了文件类型属性，并利用它打开文件，通过选择合适的库来读取文件内容。

这种方法相当聪明，区分了一个新手开发的应用和一个看起来非常专业的应用之间的差异。

总结

在本章中，我们学习了如何通过不同方式和不同方法管理文件上传：第一种是随时指定文件类型以触发适当的功能，第二种是使文件类型检测自动化并无缝进行。

第一个方法涉及用户，而第二个方法使我们的应用使用非常流畅。

在下一章中，我们将继续探索先进的功能和解决方案，以使我们的网页应用更加专业。

第十三章：为 Web 应用程序创建安全的登录和注册过程

让我们继续探索一些高级技巧，让我们的网页应用看起来更专业、运行得更顺畅。

在本章中，我们将学习如何实现一个登录和注册页面，该页面使用安全散列算法 256（SHA-256）加密，并以安全且用户友好的方式连接到数据库。通过采用这种方法，我们将能够验证我们的网页应用用户并永久存储他们的凭据。登录和注册页面通常由一个表单组成，用户可以在其中输入用户名和密码以访问网页应用。当用户登录时，他们的凭据会使用 SHA-256 进行哈希处理，并与数据库中存储的哈希值进行比较（在本例中，我们使用的是SQLite3）。如果哈希值匹配，用户将通过身份验证并获得访问应用的权限。注册页面允许新用户通过输入所需的用户名和密码来创建帐户。

在本章中，我们将讨论以下主要内容：

• 理解登录和注册页面背后的逻辑

• 什么是 SHA-256，为什么我们应该使用它？

• 连接到关系型数据库并与其交互

• 从数据库中检索或保存凭据

技术要求

• 在本章中，我们将使用以下库、包和工具：

  • Sublime Text

  • Python 3

  • pipenv

  • Streamlit

  • Pillow

  • Sqlite3

  • hashlib

• 本章的代码可以在本书的 GitHub 仓库中找到：github.com/PacktPublishing/Web-App-Development-Made-Simple-with-Streamlit/tree/main/Chapter13。

理解登录和注册页面背后的逻辑

当用户在网站或应用程序上创建帐户时，通常会要求提供用户名和密码。用户名是用户的唯一标识符，而密码是只有用户自己应该知道的秘密。

网站或应用程序随后将用户名和密码存储在数据库中。然而，密码不会以明文形式存储。相反，它会被转换为哈希。哈希是一种单向函数，这意味着计算密码的哈希值很容易，但反向操作、从哈希值计算密码却非常困难。

这样做是出于安全考虑。如果黑客获取了数据库的访问权限，他们将无法读取明文密码。他们只能读取哈希值。即使黑客知道使用的哈希算法，破解密码仍然是非常困难的。

当用户登录时，他们需要输入用户名和密码。然后，网站或应用程序会计算用户输入密码的哈希值，并与数据库中存储的哈希值进行比较。如果两个哈希值匹配，用户便成功登录。

下面是关于登录和注册页面背后逻辑的逐步解释：

1. 用户在注册页面输入他们的用户名和密码。

2. 网站或应用程序将密码转换为哈希值。

3. 网站或应用程序将用户名和密码的哈希值保存到数据库中。

4. 用户将被重定向到登录页面。

5. 用户在登录页面输入他们的用户名和密码。

6. 网站或应用程序会计算用户输入的密码的哈希值，并将其与存储在数据库中的哈希值进行比较。

7. 如果这两个哈希值匹配，用户就成功登录。

8. 如果这两个哈希值不匹配，用户就没有成功登录。

将用户名和密码的哈希值永久存储在数据库中很重要，原因有几点：

• 允许用户登录他们的账户

• 允许用户在忘记密码时恢复密码

• 预防未经授权访问用户账户

如果用户名和密码的哈希值没有永久存储在数据库中，用户将无法登录账户或在忘记密码时恢复密码。此外，未经授权的用户也能通过猜测正确的用户名和密码来访问用户账户。

需要注意的是，尽管密码以哈希值的形式存储在数据库中，但黑客仍然有可能破解它们。然而，破解哈希值比破解明文密码要困难得多。

下面是创建强密码的一些提示：

• 使用大小写字母、数字和符号的组合

• 请确保您的密码至少包含 12 个字符

• 避免在密码中使用常见的单词或短语，例如qwerty、12345678、user、admin等

• 不要在密码中使用您的名字、生日或其他个人信息

• 为每个网站或应用程序使用不同的密码

现在，注册/登录页面的重要性应该已经很明确，同时也意识到避免使用弱密码的重要性。接下来是时候了解什么是安全哈希算法了。

什么是 SHA-256，为什么我们应该使用它？

SHA-256 是一种加密哈希函数，它根据数据输入生成一个 256 位的哈希值。它是SHA-2 哈希函数族的一部分（更多详情请查看justcryptography.com/sha-2/），该哈希函数族由美国国家安全局（NSA）设计，并由美国国家标准与技术研究院（NIST）于 2001 年发布。

SHA-256 是一种广泛使用的哈希函数，适用于多种应用场景，包括以下内容：

• 密码存储：SHA-256 用于安全地存储密码。当用户在网站或应用程序上创建帐户时，密码会被转换为 SHA-256 哈希并存储在数据库中。当用户登录时，他们的密码会被转换为 SHA-256 哈希，并与存储在数据库中的哈希进行比较。如果两个哈希匹配，则用户成功登录。

• 数字签名：SHA-256 可以用来创建数字签名。数字签名是一种加密技术，允许消息的发送者验证自己的身份和消息的完整性。为了创建数字签名，发送者计算消息的 SHA-256 哈希，然后用他们的私钥加密该哈希。然后，发送者将消息和加密的哈希一起发送给接收者。接收者计算消息的 SHA-256 哈希，并用发送者的公钥解密加密的哈希。如果两个哈希匹配，则接收者可以确认消息是有效的且没有被篡改。

• 文件完整性验证：SHA-256 可以用来验证文件的完整性。为此，首先计算文件的 SHA-256 哈希并存储起来。当需要文件时，再次计算该文件的 SHA-256 哈希，并与存储的哈希进行比较。如果两个哈希匹配，则文件被认为是完整的。

SHA-256 被认为是一个非常安全的哈希函数。它能抵抗碰撞攻击，这意味着很难找到两个不同的输入产生相同的哈希值。它还能够抵抗预映像攻击，即很难找到一个输入，产生给定的哈希值。

下面是使用 SHA-256 的一些理由：

• 它是一个非常安全的哈希函数

• 它被广泛使用并得到支持

• 它相对容易实现

• 它是免费的

如果你需要一种安全的方式来存储密码、创建数字签名或验证文件的完整性，那么 SHA-256 是一个不错的选择。

现在我们已经拥有了所有需要的信息，让我们开始编码。像往常一样，我们必须遵循一些典型的步骤来设置一个新的虚拟环境：

1. 创建一个名为Login_Skeleton的新目录。

2. 进入这个目录并输入pipenv shell来创建一个新的虚拟环境。

3. 安装streamlit和pillow包。

4. 创建一个名为app.py的空 Python 文件。

5. 启动你的 IDE（Sublime Text）。

图 13.1 显示了从创建新目录到安装所需库的所有步骤：

图 13.1: 虚拟环境与 app.py 文件准备

现在，我们准备编辑app.py文件中的 Python 代码。

在 Sublime Text 中，我们可以开始为我们新的登录/注册网页应用编写代码，如图 13.2所示：

图 13.2：启动代码

前面的代码应该非常熟悉。以下是我们所做的事情的分解：

• 一开始，在第 1 行和第 2 行，我们导入所需的库——在这种情况下是streamlit和Pillow。

• 之后，在第 5 行，我们创建了一个main()函数：

  • 在main()函数中，我们在html_temp变量（第 8 行）中编写一些 HTML 代码，以设置 Web 应用中的大标题，指定背景颜色、内边距和文本颜色

  • 然后，我们使用st.markdown指令可视化 HTML 代码（第 14 行）

• 接下来，我们在第 16 行创建一个包含我们想要显示的菜单选项的列表，并在屏幕左侧的侧边栏中添加一个选择框。

• 然后，我们检查选择项（第 19 行），如果它是Home，我们做某些事情：目前，我们只是将一些文本写入subheader格式。同时，如果选择项是Login（第 25 行），我们跳过（我们将在创建登录菜单小节中开发这部分代码）；Signup（第 28 行）也是如此。

• 最后，我们添加了一个About部分（第 32 行），在这里我们可以自由地写任何我们想写的内容。

请注意，在st.image指令中，这张名为login.png的图片必须与app.py文件位于同一目录中，如图 13.2中的编辑器的Folder部分所示。

和往常一样，当我们执行以下命令时，Web 应用程序将被执行：

pipenv run streamlit run app.py

浏览器中的结果非常简单和干净：

图 13.3：浏览器中的登录/注册 Web 应用

在左侧，我们有带有菜单的侧边栏，而中间是Home部分，里面有一张漂亮的图片。

框架已经准备好。现在是时候将我们的 Web 应用程序连接到数据库，以便我们可以保存所有的用户名/密码数据并在合适的时候使用它。

连接到关系数据库并与之交互

正如在理解登录和注册页面背后的逻辑部分中解释的那样，我们希望将账户信息保存在数据库中。因此，我们必须导入数据库库。如前所述，我们使用的是SQLite3数据库。所以，首先，让我们通过输入以下命令来安装它的 Python 库：

pipenv install sqlite3

然后，只需通过在app.py文件中写入import sqlite3来导入该库。

让 SQLite3 数据库为我们工作是一个非常简单的任务。为此，我们需要通过指定数据库的名称（在我们的例子中是userdata.db）作为参数来打开一个连接，并创建一个游标来执行其中的操作。

在第 6 行和第 7 行中（在图 13.4中），连接和游标被创建：

图 13.4：连接到数据库及其游标

总结一下，连接（conn）打开与数据库的连接，而游标（c）使我们能够在数据库中进行操作。本质上，我们需要三个不同的操作：

• 表格创建

• 数据插入

• 数据检索

实现这些操作的最佳方式是为每个操作创建一个专门的函数，如下图所示：

图 13.5：数据库函数

让我们仔细看看这三个函数：

• 第一个函数名为create_table。简单来说，这个函数创建一个名为userstable的表，但仅当该表在数据库中不存在时才会创建。userstable表有两列，分别是username和password，每列都包含文本类型的数据。需要理解的是，CREATE TABLE指令是通过我们在图 13.4中创建的光标传递给数据库的。因此，光标利用打开的连接，使得我们能够将操作（或函数）传递给数据库。

• 第二个函数名为add_data，因为它负责在我们通过create_table函数创建的userstable表中插入数据或值。因此，我们将两个值——用户名和密码——作为参数传递给add_data函数，它按以下顺序将这两个值插入到userstable表中：将用户名值插入到username列，将密码值插入到password列。同样，光标负责执行该指令。conn.commit()非常重要，因为如果没有这个commit，新的用户名和数据将不会被存储到数据库中。

• 第三个函数名为login_user，与add_data函数类似，它有两个参数：username和password。它接收这两个值并在userstable表中查找，然后检索（fetchall）所有结果并将它们放入一个名为data的变量中。这个data变量作为函数的最终输出返回。通过这种方式，我们可以检查用户名和密码是否存在于数据库中。同样，光标负责执行这些命令。

有了这三个函数，我们可以继续处理app.py文件。

创建登录菜单

首先，我们需要两个文本输入框，一个用于用户名，一个用于密码，然后我们可以将它们放入侧边栏中。接下来，我们在以下图示的第 46 行和第 47 行中添加两行代码：

图 13.6：用户名和密码的文本输入框

在第 47 行指定type='password'后，我们输入的密码将被隐藏；点击眼睛图标，我们可以在浏览器中清楚地看到密码，如下图所示：

图 13.7：密码是隐藏的

到此为止，登录的逻辑应该已经相当清晰：我们输入用户名和密码，并在数据库中查找它们，以了解特定用户是否被允许登录我们的应用程序。

和往常一样，让我们看一下执行此功能的代码：

图 13.8：登录部分的代码

这是图13.8中代码的详细说明：

• 在第 49 行，我们添加了一个复选框；当它被选中时，在 Web 应用的main部分打印一个新的副标题。

• 在此之后，第 51 行，我们执行了前面描述的create_table函数。这样，一个名为userstable的新表将被创建在数据库中，但仅当它不存在时。

• 在第 53 行，执行login_user函数，并使用第 46和第 47 行上的两个text_inputs小部件输入的用户名和密码作为参数。

• 如果数据获取的结果是积极的，我们将打印带有成功标志的已登录...消息，并显示一个带有一些占位符的选择框；否则，我们将打印一个警告，指出用户名/密码不正确消息。

如果现在尝试登录，您将收到用户名/密码不正确消息，因为数据库中没有数据。

要填充数据库，我们必须实现SignUp函数。让我们看看如何实现。

创建注册菜单

逻辑与Login函数相同，但我们必须进行一些更改，如下面的代码所示：

图 13.9：注册部分的代码

这里是我们所做的事情的详细说明：

• 在第 66和第 67 行，我们有两个text_input小部件来收集用户名和密码，但这次，我们将它们放在 Web 应用程序的main部分而不是侧边栏中。

• 在此之后，第 68 行，我们添加一个带有Sign Up标签的按钮。当按下此按钮时，我们执行create_table函数（我们必须确保userstable表存在；否则，我们将获得运行时错误）。

• 在第 71 行，我们执行了add_data函数。我们已经解释过这个函数（参见图 13.5），所以我们知道通过将text_input小部件输入的用户名和密码传递给它，我们在数据库中创建了一个新记录。这个新记录将包含新的用户名和密码。

• 最后，在第 73 行，我们打印一个美丽的成功消息来确认帐户的创建。

让我们看看 Web 应用程序的实际操作。

运行应用程序

在菜单中选择user1，以及密码，例如12345（请记住，在实际使用中，您应该使用更强的密码）：

图 13.10：使用注册创建新帐户

然后，点击Sign Up按钮；您将收到一个您已成功创建一个帐户消息。

有了这个，我们已经将我们的第一个帐户插入到我们的数据库中。这意味着我们可以尝试登录。

从菜单中选择登录，输入用户名（user1）和密码（12345），并进入网页应用。我们会看到登录为：user1的消息和任务列表（我重复一下，这些只是占位符）：

图 13.11：使用“登录”进入网页应用

当我们尝试使用错误的用户名或密码登录时，系统会显示以下输出：

图 13.12：使用错误的用户名/密码登录

我们输入了 user100，但该用户名在数据库中不存在，因此无法登录。我们无法进入网页应用，因此无法查看任务列表。

网页应用运行得非常顺利。接下来，我们将为我们的应用添加一个漂亮的图形用户界面。

添加图形用户界面

在命令行中，请安装SQLite 的 DB 浏览器，这是一个非常好用的 SQLite 数据库管理图形界面。输入以下命令：

sudo apt install sqlitebrowser

安装完成后，请启动应用程序；图形用户界面将如以下图所示：

图 13.13：SQLite 的 DB 浏览器

这样，我们就可以准备好打开在我们网页应用中创建的数据库了：

1. 点击文件 | 打开数据库。

2. 如 Login_Skeleton 目录所示，其中有一个名为 userdata.db 的文件。选择它并打开：

图 13.14：打开 userdata.db 数据库

你应该能看到你数据库的结构，如下图所示：

图 13.15：数据库结构

如我们所知，数据库中有一个名为 userstable 的表，该表有两列文本：username 和 password。

1. 选择 Browse Data 标签。

   如下图所示，userstable 表包含我们之前创建的账户——用户名为 user1，密码为 12345：

图 13.16：我们表格中保存的账户

这里有一个与安全性相关的大问题：密码是明文存储的。任何能够访问我们数据库中 userdata.db 文件的人都可以读取它。这就是我们必须在代码中引入哈希加密的原因——为了让任何人几乎不可能以这么简单的方式发现我们的密码。我们将在下一节中看到如何做。

从数据库中获取或保存凭据

从理论角度来看，我们已经讨论了哈希是什么，以及为什么我们需要使用哈希。从实践角度来看，有很多 Python 库可以使用（例如，sha256和pycrypto），但最容易使用且非常有效的是hashlib。这个库在 Python 中默认安装，因此我们不需要在虚拟环境中安装它；只需将其导入到app.py文件中即可。

在利用hashlib时，我们只需使用它的sha256方法来创建密码的哈希加密。再次强调，SHA-256从安全角度来看是一种非常强大的加密方式。

这些是我们需要的哈希处理过程中的新代码行：

图 13.17：make_hashes 函数

下面是我们所做的操作的分解：

• 在第 5 行，我们导入了hashlib。

• 在第 12 行和第 13 行，我们创建了一个新函数make_hashes。这个函数只有一个输入参数：密码。这个密码被传递给sha256方法，生成哈希值。该哈希值会被转换为十六进制并返回。

正如我们所知，哈希值是无法解码的。这意味着，一旦我们将密码转换为哈希，就无法再将其转换回来。因此，为了完成用户的身份验证/登录，我们必须在text_input中输入密码，将其转换为哈希，然后将结果与数据库中存储的哈希进行比较。如果两个哈希码相同，则意味着输入的密码正确；否则，表示密码与保存的密码不同。

实现此过程需要对我们的代码进行一些修改：

1. 首先，我们必须将输入的密码转换为哈希。这可以通过我们刚才讨论的make_hashes函数来完成。

2. 然后，我们需要将这个哈希值与数据库中保存的哈希进行比较。

第一个代码更改影响了登录部分，如下图所示：

图 13.18：输入密码的哈希处理

以下是我们在前面的代码中所做的事情：

• 在第 60 行，我们对输入的密码进行哈希处理。

• 在第 61 行，利用check_hashes函数，我们将哈希过的密码与数据库中保存的哈希密码进行比较。如果它们相同，则表示登录过程成功。

让我们编写check_hashes函数；代码非常简短，如下图所示：

图 13.19：“check_hashes”函数

以下是我们在前面的代码中所做的事情：

• 在第 15 行，我们定义了一个新函数，只有两个参数：密码（明文）和哈希文本（保存在数据库中的密码哈希）。

• 在第 16 行，我们可以看到，如果密码的哈希值（通过make_hashes函数得到）与数据库中存储的哈希值相同，我们将返回哈希文本（密码的哈希版本）；否则，我们将返回False。

因此，回到图 13.18中显示的第 61 行代码，当check_hashes返回哈希密码时，result变量为True，代码进入if循环的success部分。否则，当check_hashes返回False时，result变量也为False，代码进入if循环的else部分，拒绝登录。

现在，如果我们尝试使用之前保存的账户（user1，12345）登录到 Web 应用程序，我们将失败并收到警告。原因是，在我们的数据库中，我们保存的密码没有进行哈希处理，因此密码是以明文存储的。

为了完成所有的登录/注册 Web 应用程序代码，我们必须稍微修改注册部分，确保账户的密码以哈希版本保存：

图 13.20：最终的“注册”部分

以下是我们在前面的代码中所做的操作：

• 在第 84 行，我们创建了输入密码的哈希值

• 在第 85 行，我们将其与相关的用户名一起保存到数据库中

到此为止，我们已经完成了编码。我们可以尝试使用 Web 应用程序的全部功能，从创建一个用户名为user2、密码为09876的新账户开始：

图 13.21：创建新账户

如我们所见，在数据库浏览器中，新密码已经作为哈希代码被保存：

图 13.22：新密码的哈希版本

任何获取数据库文件的人都可以读取其内容，但无法理解密码是什么，因为从哈希值中获取明文密码几乎是不可能的。

让我们尝试登录：

图 13.23：使用新账户登录

输入的密码被转换为哈希值，并与存储在数据库中的哈希值进行比较；由于两个哈希值匹配，我们得到了以下结果：

图 13.24：登录成功

登录过程已成功完成，用户可以访问应用程序的任务。

很有趣的是，理解即使给定的文本与另一个文本只有微小差异，它的哈希值也会完全不同。向数据库中添加另一个账户，这次使用密码如09875，并检查它的哈希值与来自09876密码的哈希值有多么不同。

本章充满了复杂的信息，但我们得到的结果非常有价值：一个完整的应用骨架，可以用于所有需要管理注册、登录、哈希和永久保存数据的网页应用。

一如既往，以下是我们开发的所有代码：

图 13.25: 注册/登录骨架 – 第一部分

在代码的第一部分，我们开始导入库（第 1-5 行），然后创建了与数据库的连接和游标（第 6-7 行）。之后，我们导入了hashlib库（第 10 行）并创建了make_hashes和check_hashes函数（第 12 行和第 15 行）。在第 22 行和第 26 行，我们定义了两个函数，用于创建新表并向数据库添加数据，而在第 31 行，我们定义了管理用户登录的函数。

在第 37 行，我们定义了main函数，添加了一些 HTML 代码以使应用更美观，并实现了应用程序菜单：

图 13.26: 注册/登录骨架 – 第二部分

在代码的第二部分，我们管理了菜单。因此，如果用户选择登录，我们实现了相应的代码（第 57-74 行）。当用户选择注册时，我们实现了专门处理此功能的代码（第 77-87 行）。最后，在第 90 行，我们有关于部分。

本章非常重要，因为一个应用几乎总是需要管理账户，因此需要用户名和密码。为了正确完成这项任务，加密密码非常安全是关键。

总结

在本章中，我们理解了登录和注册页面背后的逻辑，并根据这里总结的最佳实践学到了一个非常可靠的账户实现和管理方式。

当用户在我们的网页应用中注册时，他们提供用户名和密码。用户名作为唯一标识符，而密码是只有用户自己知道的秘密。为了安全起见，这些凭证存储在数据库中，但密码不会以明文形式保存。相反，它们会被转换为哈希值，这是一种从密码中容易计算但难以逆转的单向函数。这确保了即使黑客访问了数据库，他们也无法轻易破解密码。

在登录过程中，用户输入的密码会被哈希处理并与存储的哈希值进行比较；如果匹配，用户将获得访问权限。存储这些哈希值对于允许用户登录和恢复密码至关重要。尽管破解这些哈希值是可能的，但比破解明文密码要困难得多。

实现强健的业务代码是任何 Web 应用程序的主要目标，因为通过这样做，可以解决代码应当解决的任何问题。为客户提供更美观的界面、设计精良的应用程序以及高度定制的工具，是一个真正的 Web 应用程序设计师应该具备的另一项关键技能。这正是我们将在下一章讨论的内容。

第十四章：自定义页面、个性化主题和实现多页面

Streamlit 最近增加了许多高级功能，使得定制我们的应用程序变得更加简便和精准。现在，我们可以配置我们的页面，比如隐藏汉堡菜单或页脚。例如，可以更改许多标准链接，并深度个性化主题、颜色和样式。最后，我们可以本地处理多页面，使用非常特定的方式命名和配置文件夹。

所有这些新特性是深度自定义我们网页应用程序的一种非常强大的方式，使它们的外观和行为完全符合我们在项目设计阶段的设想。

在本章中，我们将涵盖以下主要内容：

• 了解与深度自定义相关的新特性

• 创建深度定制页面

• 了解主题和.toml文件

• 探索多页面功能

技术要求

• 在本章中，我们将使用以下库、包和工具：

  • Sublime Text

  • Python 3

  • pipenv

  • Streamlit

• 本章节的代码可以在本书的 GitHub 仓库找到：github.com/PacktPublishing/Web-App-Development-Made-Simple-with-Streamlit/tree/e54d7b3d8840a3971ab8241acf6a1a6212e51f77/Chapter14

了解与深度自定义相关的新特性

本章节不需要新的包——我们只需要 Streamlit。首先，创建一个新的空 Python 文件；如常，你可以将其命名为app.py。然后，打开 IDE。我们可以通过仅仅导入streamlit并在侧边栏和网页应用的主部分添加一个标题来开始编程，如图 14.1所示：

图 14.1：启动代码

启动应用程序会在8501端口的 localhost 上打开浏览器，通常我们会看到类似这样的界面：

图 14.2：启动网页应用

这非常简单：我们在侧边栏和网页应用的主部分都得到相同的标题。仔细观察，我们可以发现一些非常有趣的元素可以进行定制：

图 14.3：应用标题与图标、页脚及菜单

在图 14.3中，我们可以看到以下内容：

• 在红色部分，我们可以看到我们网页应用的标题和图标。此时，这些是默认的：Streamlit 的图标和我们的 Python 文件名。

• 在绿色部分，我们可以看到所谓的页脚。

• 在黄色部分，我们可以看到三个点菜单。在 Streamlit 的早期版本中，这就是所谓的汉堡菜单。

从三个点菜单开始，点击它。我们将看到如下弹出菜单：

图 14.4：三个点菜单

在这个弹出菜单中，有几个选项：

• 重新运行，在代码更改后重新运行 Web 应用

• 打印，打印屏幕内容

• 录制屏幕录像，录制我们的 Web 应用

• 清除缓存，一键清除缓存

另外两个选项，关于和设置，非常有趣，因为它们可以自定义，帮助我们个性化应用程序的外观和感觉。

让我们打开设置，我们将看到以下新窗口：

图 14.5：设置

从这个菜单中，我们可以在底层代码更新时自动更新应用程序。我们还可以选择以宽屏或正常模式运行，并设置主题；可以选择浅色、深色，或者与系统设置相同（使用系统设置）。

自定义级别甚至更深。实际上，点击编辑活动主题后，我们将看到以下窗口：

图 14.6：编辑活动主题窗口

在这个窗口中，我们可以自定义主色、文本颜色、背景色和次背景色的值。此外，我们可以从列表中选择字体，并将配置复制到剪贴板。

如字体选择下方的注释所示，如果我们希望这些选择永久生效，我们必须编辑.streamlit目录下名为config.toml的文件；这是一个隐藏文件夹。我们将在理解主题和 .toml 文件部分处理这个文件。

现在，是时候看看如何自定义我们的页面了。

创建深度自定义页面

现在，让我们回到代码，处理图 14.3中标红的标题和图标：

图 14.7：set_page_config 方法

在第 3 行，紧接着import streamlit as st后，我们使用st.set_page_config方法设置页面配置。通过这种方式，我们可以自定义页面标题和图标（支持表情符号，甚至是 PNG 或 ICO 文件），设置主区域内容的布局（可以是宽屏或居中），并决定侧边栏在启动时是展开还是折叠。

根据图 14.7中报告的配置，结果如下：

图 14.8：自定义页面

你可以尝试不同的设置，使用所有可用的参数。

使用set_page_config方法，我们可以做得更多。事实上，通过添加图 14.9中显示的几行代码，我们可以修改三点菜单和关于部分：

图 14.9：使用 set_page_config 的完整自定义

下面是我们在前面的代码中所做的工作：

• 在第 9 行和第 10 行，我们为三点菜单添加了两个选项，分别是获取帮助和报告 Bug。它们分别将用户引导到 Streamlit 网站和 GitHub。你可以在这里插入任何你想要的 URL。

• 在第 11 行，我们添加了一个注释，将在菜单的关于选项中显示；这个注释支持标准的 Markdown 语法。

图 14.10 显示了新的三点菜单和定制的关于部分并排展示：

图 14.10：定制的三点菜单和关于部分

接下来，参考图 14.3中显示的页脚，让我们通过一个非常简短的指令来学习如何去除它：

图 14.11：去除页脚的指令

以下是我们在前面代码中所做的操作：

• 在第 19 行，我们添加了非常简单的 HTML 代码，将页脚的可见性设置为隐藏

• 在第 25 行，像往常一样，使用 st.markdown 和 unsafe_allow_html，我们使用了那个 html 代码

非常有趣的是，只需在 footer 行之前再添加一行代码，我们就可以轻松去除三点菜单。最终的代码如下：

图 14.12：去除页脚和主菜单的指令

网页应用如下所示：

图 14.13：没有页脚和主菜单的网页应用

在这一部分，我们学习了如何利用 set_page_config 指令来定制页面。此外，我们还学会了如何从 Streamlit 页面中去除 footer 行和三点菜单。在下一部分，我们将学习如何处理主题。

理解主题和 .toml 文件

在本章开始时，在理解与深度定制相关的新功能部分，我们学习了如何直接从浏览器更改网页应用的主题。Streamlit 自版本 0.79.0 起原生支持自定义主题，这意味着我们可以直接从后台定制主题，而无需在浏览器中进行操作。

我们已经看到有一个隐藏的目录叫 .streamlit，并且在这个目录中，有一个名为 config.toml 的文件。

如果我们想定制主题，首先必须打开这个 config.toml 文件，然后向其中添加以下指令：

图 14.14：使用 config.toml 文件进行主题配置

图 14.14中的配置是经典的浅色主题。如果你想要完全不同的效果，可以使用你喜欢的颜色代码，并在无衬线、衬线或等宽字体之间选择。要快速查看颜色代码，可以在互联网上搜索HTML 颜色代码，或者访问像html-color.codes/这样的站点。

例如，假设我们采用以下 HTML 颜色代码：

图 14.15：一个完全不同的主题配置

我们将得到一个相当强烈的结果，如下图所示：

图 14.16：一个相当强烈的主题，使用了等宽字体

非常简单！定制主题只需使用 HTML 颜色代码和一个 TOML 文件。现在，让我们来了解什么是多页面。

探索多页面功能

Streamlit 中的多页面是将你的应用组织成多个页面的一种方式，每个页面有其独立的内容。这对于功能丰富的大型应用或需要为不同用户划分不同部分的应用非常有用。

要在 Streamlit 中创建一个多页面应用，只需要在与你的主应用文件同一文件夹下创建一个名为pages的新文件夹。然后，在pages文件夹中创建新的 Python 文件，每个文件将代表你应用中的一个不同页面。

一旦创建了页面，你就可以开始为它们添加内容。你可以使用任何你想要的 Streamlit 小部件和函数，就像在常规的 Streamlit 应用中一样。

当你运行你的应用时，Streamlit 将自动检测pages文件夹中的页面，并将它们添加到侧边栏的导航栏中。用户可以点击不同的页面在它们之间导航。

根据前面的解释，一切听起来都很简单；正如我们将看到的，确实如此。

创建多页面

让我们构建一个简单的多页面网页应用。像往常一样，我们将从构建应用的框架开始：

1. 首先，我们将创建一个新文件，命名为app.py。

2. 然后，在 Sublime Text 中打开app.py文件并导入streamlit。

3. 现在，创建一个main函数，只显示标题，如图 14.17所示：

图 14.17：我们“多页面”网页应用的基本框架

如你所见，前面的代码会在浏览器中生成一个相当简单的网页应用。结果如下：

图 14.18：起始点

请注意，主题仍然是我们在理解主题和.toml 文件部分配置的主题。

现在，让我们创建一个名为pages的目录。这个目录必须与我们的主文件处于同一级别——也就是说，它必须与app.py文件在同一个文件夹中。我们可以在终端中输入以下指令：

mkdir pages

现在，我们可以进入pages目录，然后创建一个名为page1.py的新文件。为此，我们必须在终端中输入以下指令：

cd pages
touch page1.py

我们文件夹的结构如图 14.19所示：

图 14.19：我们文件夹和文件的结构

有一个包含app.py文件的root目录和一个名为pages的目录。pages目录中还有一个名为page1.py的文件。

如果我们查看浏览器，会看到 Streamlit 自动识别出了两个页面——一个名为app，另一个名为page1：

图 14.20：侧边栏中的两个页面

侧边栏中的两个页面名称与我们目录中 Python 文件的名称相同，只是没有.py后缀。

点击page1后，我们会看到一个空白页面，因为page1.py文件仍然为空。让我们返回到 Sublime Text 并添加一些代码：

图 14.21：一些简单的代码，添加到 page1.py 文件中

新的代码非常简单——它只是将Page1打印到屏幕上。结果是：

图 14.22：点击page1后的结果

我们可以继续按照相同的方式，在pages目录中创建一个名为page2.py的新文件。在终端中，我们只需输入以下内容：

cd pages
touch page2.py

然后，进入 Sublime Text，我们可以像编辑page1.py那样编辑page2.py文件，如下图所示：

图 14.23：一些简单的代码，添加到 page2.py 文件中

这是在 Web 应用中的结果：

图 14.24：我们多页面 Web 应用中的新页面

正如我们所看到的，侧边栏中的列表中有一个新页面。点击page2后，Web 应用程序的主界面中将显示一个新页面。

让我们在pages目录中创建另一个文件，这次命名为new_feature.py。我们将把与page1.py和page2.py相同的代码添加到其中。浏览器中的结果是：

图 14.25：侧边栏中的页面按字母顺序排列

我们可以看到侧边栏中的页面是按字母顺序排列的。如果我们想更改页面的顺序，必须以特定的方式更改它们的名称。

在终端中，输入以下内容：

mv page1.py 01_page1.py

通过这种方式，我们将旧的page1.py重命名为01_page1.py。

同样，我们可以将旧的page2.py重命名为02_page2.py，并将旧的new_feature.py重命名为03_new_feature.py：

mv page2.py 02_page2.py
mv new_feature.py 03_new_feature.py

如果我们现在检查浏览器，我们会看到页面顺序发生了变化：

图 14.26：侧边栏中的页面现在按照自定义顺序排列

侧边栏中页面的顺序现在遵循我们对文件所做的更改，因为我们将 01、02 和 03 放在它们名称的开头。

如我们所见，Streamlit 非常智能，因为它没有将编号放在页面名称的开头，而只是显示它们的真实名称。

如果我们检查图 14.26中显示的浏览器地址栏，我们会看到 new feature 页面的 URL 是 localhost:8501/new_feature。因此，Streamlit 使用页面名称相应地更改 URL。

从一个页面传递变量到另一个页面

多页功能非常强大，因为可以将变量从一个页面传递到另一个页面。让我们学习如何利用这个功能。

让我们对 app.py 文件（即主页）做一个小修改，如下图所示：

图 14.27：在“app.py”文件中添加的新变量

在第 3 行，我们创建了一个名为 my_variable 的文本变量，并在第 8 行将其打印到屏幕上。以下是在 Web 应用中的结果：

图 14.28：在应用页面上显示的新变量

在主页上——即在app.py文件中创建的my_variable。

现在，在 Sublime Text 中，我们将更改01_page1.py代码，如下图所示：

图 14.29：“01_page1.py”文件中的代码更改

这里是我们正在做的事情：

• 在第 4 行，我们从 app 文件中导入了 my_variable。

  请注意，根据特定语法，我们不需要写 from app.py，只需写 from app —— 即文件名中省略 .py 后缀。

• 然后，在第 7 行，我们将导入的变量打印到屏幕上。

这是在 web 应用中的结果：

图 14.30：在 page1 页面上显示的新变量

结果非常有趣：在这里，我们展示了在另一个页面上创建的变量的内容，在page1页面上！

我们还将以下面方式修改 02_page2.py 文件：

图 14.31：在 02_page2.py 文件中添加的新变量

在第 3 行，我们引入了一个新变量，并在第 6 行打印它。以下是在 Web 应用中的结果：

图 14.32：在 page2 页面上显示的新变量

现在，让我们尝试在 page1 中打印我们在 page2 中创建的变量。为此，我们这次需要对 01_page1.py 文件使用稍微不同的代码，如下图所示：

图 14.33： “01_page1.py” 文件的新代码

这是我们所做的：

• 在 第 5 行，我们从 02_page2.py 文件导入了 my_variable_page2。然而，由于该文件位于 pages 文件夹内，我们必须写 from pages.02_page2 import...。

• 在 第 9 行，我们打印了 my_variable_page2 变量。

当我们切换到浏览器时，我们会遇到以下错误：

图 14.34：脚本执行错误

正如错误所解释的那样，我们遇到了 无效的十进制字面量。这意味着当我们尝试从 pages.02_page2… 导入时，如 图 14.33 所示，Streamlit 无法处理文件名开头的 02。

要解决此问题，我们必须按以下方式重命名文件：

mv 02_page2.py page2.py

因此，我们必须按照如下方式更改 01_page1.py 文件中的代码：

图 14.35：对 01_page1.py 文件的最终代码更改

现在，我们已经正确地从 pages.page2 导入了内容。检查浏览器后，我们会看到一切正常：

图 14.36：page1 显示来自其他页面的变量

app.py）和来自 page2.app 的变量，这意味着变量在不同页面之间正确交换。

这证明了要在文件之间交换变量，我们不必在文件名中使用数字。

我们的主要任务是实现完全满足特定需求的 Web 应用程序，例如我们使用 Covid-19 检测工具 应用程序实现的疾病检测。然而，使这些应用程序既美观又易于使用也是非常重要的。深度定制是让我们应用程序既具有吸引力又易于使用的方式。

总结

在本章中，我们专注于 Streamlit 中的高级定制技术。我们深入探讨了那些可以实现深度定制的新功能，允许开发更具个性化和复杂性的网页。本章指导你创建高度定制的页面，强调根据特定需求量身定制用户界面和功能的能力。

本章的大部分内容都致力于理解主题和使用 TOML 文件。这涉及到探索如何操作主题以改变 Streamlit 应用程序的外观，使其更加吸引人并符合品牌要求。TOML 文件的使用也被详细解释，展示了如何有效地使用它们来定义和管理这些主题。

最后，本章探讨了 Streamlit 的多页面功能。我们学习了如何将 Streamlit 应用程序结构化为多个页面，从而增强其组织性和用户导航性。我们提供了实际示例和最佳实践，帮助您实现多页面应用程序，确保您能够有效地将复杂的 Streamlit 项目组织成更易管理和用户友好的格式。本章内容使您能够将 Streamlit 应用程序提升到更高的定制化和复杂度水平。

在下一章，我们将学习如何使用 Streamlit 的表单、会话状态和可自定义子域功能来增强我们的 Web 应用程序。

第十五章：使用表单、会话状态和可自定义子域名增强 Web 应用

在 Streamlit 中，表单、会话状态和可自定义子域名都是可以提供更多高级定制和功能的特性，适用于 Web 应用程序。

表单允许用户在 Streamlit 网页应用中创建交互式表单，可以用来收集用户输入并根据特定的一组输入执行操作。表单可以包含多种输入元素，如文本字段、下拉菜单和复选框。

会话状态是一个功能，允许用户在他们的 Web 应用的不同会话之间存储和持久化数据。这对于存储用户偏好或应用设置非常有用。

最后，可自定义子域名允许用户为他们的 Streamlit 应用创建一个自定义子域名，这对于品牌化或创建更易记的 URL（而不是使用自动生成的标准匿名 URL）非常有用。

在这一章中，我们将涵盖以下主要内容：

• 什么是表单，我们在什么情况下以及为什么使用它们？

• 什么是会话状态（Session State），我们在什么情况下使用它？

• 什么是可自定义子域名，它们提供了什么可能性？

技术要求

• 在这一章中，我们将使用以下库、包和工具：

  • Sublime Text

  • Python 3

  • pipenv

  • Streamlit

• 这章中的代码可以通过以下 GitHub 链接访问：github.com/PacktPublishing/Web-App-Development-Made-Simple-with-Streamlit/tree/217479d2112ded99cfdd820a85709296ba5356b2/Chapter15

什么是表单，我们在什么情况下以及为什么使用它们？

Streamlit 表单是一个功能，允许你在 Streamlit 应用中创建交互式网页表单。这些表单可以通过各种小部件（如文本框、选择框、复选框等）收集用户输入。当用户提交表单时，Streamlit 会自动捕获输入值，并使其可用于你的 Python 代码。

使用 Streamlit 表单非常简单。你可以通过 st.form() 定义表单的边界，并在其中添加小部件。Streamlit 提供了多种输入组件，使得用户可以轻松输入信息，如文本输入、数字输入等。这种与 Python 的集成消除了手动处理表单的需求。

Streamlit 表单提供了定制选项，以改善用户体验。你可以添加标签、默认值和提示信息来引导用户。此外，你还可以控制表单的布局和样式，以匹配你的应用设计。

表单提交总是通过提交按钮触发，这样你就可以捕获用户输入并根据它执行操作。

总结来说，表单是小部件的组合，我们可以独立运行不同组合的表单。让我们写一些简单的代码来展示这一特性：

图 15.1：表单的起始点

上述代码非常简单：在导入streamlit后，我们仅仅在屏幕上打印了一个标题。结果如下：

图 15.2：从浏览器角度的起始点

在我们的代码中引入表单时，基本上有两种方法。让我们一一看看它们。

上下文管理器方法

引入表单的第一种方式是上下文管理器方法，这是一种优雅的方法，使用with语句。with语句使得我们可以在代码块的开头（第 8 行，见图 15.3）声明表单，然后以常规方式使用指令，输入st.并加上小部件的名称。所以，写下这个代码：

图 15.3：上下文管理器方法

以下是图 15.3中展示的代码解析：

• 在第 8 行，我们使用with语句创建了一个表单。请注意，表单的唯一参数是它的键，可以是任何类型的文本。

• 之后，在第 9 行和第 10 行，我们在新表单中插入了几个小部件，具体来说是两个text_input实例，用于保存假设用户的名字和姓氏。

• 在第 11 行，我们将名字和姓氏合并在一起。

• 第 13 行非常重要，因为每个表单都需要通过提交按钮激活，该按钮必须使用form_submit_button方法创建。在这种情况下，作为参数，我们使用要在表单中显示的标签。

• 最后，在第 15 行，我们使用了一个if语句来重新检查按钮是否已被按下；如果是的话，我们会打印一个成功信息。

这是浏览器中的结果：

图 15.4：使用上下文管理器方法在浏览器中的结果

当我们点击text_input实例和按钮时。

为了将信息从表单中移除，我们可以稍微修改代码，如下图所示：

图 15.5：将成功信息保持在表单外

现在，if语句的缩进已更改为准确地位于with语句下方，也就是说，位于表单外部——也就是它的代码块之外。结果是：

图 15.6：问候信息的不同位置

现在，让我们看看第二种方法，一种经典的方法，用来引入表单。

经典方法

经典方法相当直接，因为它不需要with语句：

图 15.7：在我们的代码中引入表单的经典方法

这次我们做的事情是：

• 在第 19 行，我们直接引入了表单。

• 之后，在第 20 行和第 21 行，我们分别创建了两个新小部件，text_input和selectbox。

• 在第 22 行，我们创建了一个提交按钮。和往常一样，一个if语句检查提交按钮是否被点击。需要理解的是，在这种情况下，if语句的缩进始终与表单的缩进保持在同一层级，因此成功消息将始终位于表单框之外。

下面是使用这两种方法创建的两个表单在浏览器中的展示效果：

图 15.8：使用上下文管理器和经典方法创建的两个表单

请注意，我们可以独立地将数据（这意味着使用小部件）插入到这两个表单中。实际上，这两个提交按钮是完全不相关的。

表单是将小部件和组件分隔在我们 web 应用的特定区域中的一种非常强大的方式。现在让我们看看如何处理所谓的会话。

什么是会话状态，我们何时使用它？

Streamlit 于 2019 年发布，而有状态性在相当长的一段时间里是一个小问题，因为状态没有本地管理。然而，从 0.8.4 版本开始，情况发生了变化，官方声明（blog.streamlit.io/session-state-for-streamlit/）如下：

现在你可以跨应用交互存储信息 并重新运行！

老实说，这个声明真的很完美，因为它传达了关于会话的一切。Streamlit 的会话状态功能提供了一种高效而复杂的会话管理方法。此功能支持在多次重新运行之间存储变量，促进在输入小部件上创建交互事件，并允许使用回调函数有效地管理这些事件。

会话状态的强大功能增强了各种应用程序的开发。这些功能包括以下几点：

• 集成相互依赖的小部件

• 开发引人入胜的有状态游戏，如战舰和井字棋

• 进行数据和图像标注任务

• 扩展功能以应对多样化和复杂的需求，如在多个请求之间持久化用户数据以及高效管理资源和数据

通常，使用没有会话状态的 Streamlit 意味着与小部件交互时会触发重新运行，导致脚本中定义的变量在每次执行时都会重置。相反，使用会话状态可以跨重新运行保留变量值，这在需要保持变量状态而无需重新初始化时特别有用。

让我们使用以下代码来看一个小示例并进一步理解。首先编写以下代码：

图 15.9：代码中的会话状态

Session State 的核心思想既简单又巧妙：Streamlit 每次迭代时都会从上到下执行，因此我们检查我们关注的变量（示例中的 count）是否已经在 st.session_state 中初始化。如果尚未初始化，我们将其初始化为一个特定的值（在我们的例子中是 0）；否则，我们什么都不做。

因此，st.session_state 就是一种 集合，用于保存我们不希望每次都初始化的变量。

前面的代码非常简单。下面是详细的解析：

• 在 第 13 行，我们检查 count 变量是否不在 session_state 中；如果不在，我们将其初始化为 0。

• 在 第 19 行，我们创建了一个按钮来递增 count 变量，并通过 st.session_state.count 执行此操作；这样，我们就能记住 count 变量的值。

• 在 第 24 行，我们做了相同的操作，但是是对 count 变量进行递减。

• 最后，在 第 28 行，我们在屏幕上可视化显示 count 变量的值。

这是浏览器中的结果：

图 15.10：Session State 的应用

请验证每次点击 递增 或 递减 按钮时，Count 的值是否会自动更新。

图 15.9 中的代码展示了值在重新运行时的持久性。然而，让我们探讨一个更复杂的场景。在 Streamlit 中，可以将 回调 分配给不同的小部件，如 st.button 或 st.slider。这通过使用 on_change 参数实现，允许更高级的互动和功能。

回调函数，通常称为 回调后 函数，是一段可执行的代码，作为参数传递给另一段代码。这个安排预期接收代码会在指定的时刻执行回调函数。此类执行的典型场景包括用户交互，如点击按钮或调整滑块 —— 本质上是每当检测到变化时。

使用 Session State 可以通过回调函数管理与小部件修改或按钮点击相关的事件。这意味着，当一个回调函数与小部件关联时，小部件的任何变化都会启动一个特定的序列：首先执行回调函数，然后应用程序会从上到下地执行。

让我们看看回调函数的实际应用：

图 15.11：代码中的回调函数

下面是 图 15.11 中代码的详细解析：

• 在 第 32 行，我们定义了一个名为 update_first 的回调函数。这个函数将 session_state 小部件中 第二个 变量的值更新为始终存储在 session_state 小部件中的 第一个 变量的值。

• 在 第 35 行，我们定义了第二个回调函数，它与第一个完全相同，但会根据 第二个 变量的值更新 第一个 变量的值。

• 在第 39 行和 40 行，我们引入了两个text_input小部件。在它们的参数中，像往常一样，我们可以找到标签和键，但这次有一个新内容：on_change。

  在这里，当小部件中发生变化（比如插入文本）时，回调函数开始起作用，update_first函数在第 39 行执行，而update_second函数在第 40 行执行。

通过这种方式，我们创建了两个具有镜像值的小部件。浏览器中的结果如下：

图 15.12：回调操作的结果

如我们所见，每次在第一个输入框中插入文本时，第二个输入框也会被更新，反之亦然。

会话状态可能是 Streamlit 最强大的功能之一。请仔细学习如何利用它。

现在让我们来看一下自定义子域名所带来的优势。

什么是自定义子域名，它们提供了哪些可能性？

我们已经在 Streamlit Cloud 上部署了两个应用程序：NLP 应用和COVID-19 检测工具。因此，我们对这个过程非常熟悉，甚至知道如何解决因大文件或需要非常规库而出现的问题。

在我们将应用程序部署到 Community Cloud 后，它会分配一个自动生成的子域名，结构基于我们的 GitHub 仓库。这个子域名是应用程序独有的，用于与他人分享该应用。然而，默认的子域名往往很笨重，并且不太友好。例如，下面这样的子域名可能并不容易记住：

https://streamlit-demo-self-driving-streamlit-app-8jya0g.streamlit.app

为了增强共享性和识别度，我们可以选择建立一个自定义子域名。这一自定义使得子域名能够更好地代表我们应用的内容、个人品牌或其他任何偏好方面。自定义 URL 的格式如下：

<your-custom-subdomain>.streamlit.app

要定制你应用在 Streamlit Cloud 工作区内的子域名，请按照以下简单步骤操作：

1. 导航至你应用的右侧，点击︙溢出菜单，然后选择设置：

图 15.13：在 Streamlit Cloud 上的部署应用设置

1. 在应用设置模态框中，访问常规标签。这里，你会看到你应用的当前唯一子域名。

2. 为你的应用 URL 选择一个长度在6到63个字符之间的自定义子域名。

3. 点击保存以确认：

图 15.14：我们应用的新子域名

这个过程既快速又高效。完成后，你的应用将通过新设置的自定义子域名 URL 进行访问。如果所选的自定义子域名不可用（例如已经被使用），系统会显示错误消息，提示你选择其他子域名，下面的截图演示了这一点：

图 15.15：“该子域名已被占用”错误信息

能够选择一个完美符合我们网页应用目标的子域名是一个非常强大的自定义功能。

总结

在本章中，我们讨论了一些能够真正提升我们网页应用水平的主题。

首先，我们了解了什么是表单以及如何使用它们，发现将独立的小部件组放入我们的网页应用中会带来很大不同。我们需要做的就是定义这些表单，并在其中包含一些小部件，使用按钮来触发这些小部件。甚至按钮也是可以自定义的，因为它可以放在表单内，也可以放在表单外。

此外，我们还学到了 Session State 是我们手中的一个极其强大的工具。最终，我们可以保存变量的值，这为我们打开了一个令人难以置信的使用场景。而且，借助回调，我们可以决定在用户与小部件交互时该做什么，调用完全自定义的函数，完美契合我们的需求。

最后，通过自定义我们部署的网页应用的子域名，我们实现了两个目标：让它们更容易记住，并为它们增添了一丝专业感！

在接下来的最后一章中，我们将总结我们共同经历的这段长旅程，重点讨论 Streamlit 框架的相关考虑事项，分析重要的收获，并提出一些下一步的建议。

第十六章：总结与结论

我们一起走过了相当长的一段路。从学习如何创建工作环境开始，我们经历了 Streamlit 使用的基础知识。之后，我们成为了更高级的用户，并学习了创建 Web 应用程序的非常专业的方法。

此外，我们还看到如何将我们的创作部署并发布到云端。从宏观角度来看，我们还掌握了一些非常有用的技能，例如自动文件检测和上传、数据库连接、登录和注册页面创建与账户管理、主题设置、会话状态、表单以及子域名——一段非常漫长的旅程！

还有很多可供总结的要点，这些可以使未来 Web 应用的创建更加轻松：

• 创建一个非常便宜（免费的）且有效的开发环境的技能

• 带有菜单和装饰的 Web 应用框架工作模板

• 在云端部署和上传 Web 应用的技能

• 关于 Web 应用的有用知识（带有工作框架模板）和图片

• 创建、填充和在 Web 应用中使用数据库的非常强大的技术

• 实现会话状态和多页面应用程序的非常重要的技能（带有工作代码示例）

• 对主要和高级 Streamlit 小部件的深入了解

• 容易理解框架的未来版本和改进的能力

在本章中，我们将涵盖以下主要主题：

• 如何以及何时使用我们的 Web 应用工作模板

• 如何以及何时使用数据库和高级技能

• 如何将 Web 应用部署到云端

如何以及何时使用我们的 Web 应用工作模板

有一些操作是我们必须始终进行的，例如准备虚拟环境并安装所有适当的库。这些操作是我们进行 Web 应用创建活动的真正基础。

一旦我们的环境准备好，我们就可以开始编写代码了。这项活动需要对我们要解决的问题有深刻的理解，并且要有明确的实现策略。在这一阶段，我们一起开发并用来构建 NLP 应用和 Covid-19 检测工具的模板或框架成为了我们最强大的伙伴。它非常适合将问题分解为多个子问题，并将每个子问题分配给特定的函数。所有必需函数的列表将在侧边栏的菜单中显示，用户可以选择特定的函数并继续执行。我们还看到，在模板中，已经包含了一些非常好的装饰器，例如标题、图标和图片。

如果我们想更具体一点，可以说，了解如何以及何时使用 Web 应用模板，比如我们一起制作的这个模板，对于高效和有效的 Web 应用开发至关重要。

下面是如何使用此类模板的步骤：

• 安装和设置：打开模板后，你会找到库的安装和设置说明。按照这些步骤创建项目目录，安装依赖项，并在需要时配置你的开发环境。

• 定制内容：根据你的具体需求修改模板。这可能包括更改用户界面、添加或删除功能，或者更改默认内容。模板通常设计为可定制的，因此你可以根据项目需求进行调整。

• 添加应用逻辑：实现应用程序的业务逻辑，这是使你的项目与其他项目区分开来的核心功能。这可能包括数据处理、计算、数据可视化或任何与你的应用程序相关的任务。

• 样式和主题：定制应用程序的视觉元素，例如颜色、字体和布局，以符合你的品牌或设计偏好。许多模板提供样式和主题的选项。

• 测试：彻底测试你的应用程序，确保它按预期工作，并且没有任何漏洞或问题。这包括测试用户交互、数据处理和响应性。

• 持续改进：随着你的应用程序不断发展，你可以重新审视模板以进行更新或改进。模板被设计为灵活可变，能够适应项目的变化。

了解如何使用网页应用模板后，接下来我们来看何时使用它：

• 原型设计：模板非常适合快速原型设计。你可以将模板作为起点，来可视化你的概念并收集反馈。

• 学习与教育：如果你是网页开发或某个特定框架（如 Streamlit）的新手，模板可以作为一种教育工具。你可以分析模板的代码，学习不同组件和功能是如何工作的。

• 快速开发：当时间有限时，使用模板可以帮助加速开发。你可以利用预先构建的组件和功能，更快地启动你的应用程序。

• 项目间的一致性：如果你参与多个项目或在团队中工作，使用模板可以确保设计和结构的一致性。在维护应用程序组合时，这一点尤为重要。

• 关注独特功能：模板处理常见的任务和功能，让你可以专注于实现独特的功能或解决与你的项目相关的特定问题。

总结来说，网页应用模板/骨架是一个有价值的开发工具，提供了一个结构化且高效的方法来构建网页应用。当你想节省时间、确保一致性、进行原型设计或加速开发时，使用它。并且，可以根据你的具体项目需求进行定制。模板特别适用于与你的项目目标相符，并减少重新发明常见组件和功能的需求。

模板是保持组织和加速工作的一种基本方式。另一个极为重要的功能是将信息保存到数据库中。

如何以及何时使用数据库和高级技能

在 第十三章 中，当我们讨论登录和注册时，我们解释了如何在 Streamlit 中处理数据库，而在 第十四章 和 第十五章 中，我们介绍了自定义页面、多页面、主题、表单、子域和会话状态等主题。

现在，这听起来可能微不足道，但当您需要为 Web 应用程序存储和管理数据时，应考虑在 Streamlit 中使用数据库。数据库在以下情况下非常有用：

• 持久化数据：保存信息（如用户档案、用户生成的内容或应用程序设置），以便即使关闭 Web 应用程序后仍然可用。

• 访问大量数据：高效地处理和检索大量数据，例如销售数据库中的记录或网站上的用户评论。

• 协作：在多个用户或设备之间共享和更新数据。数据库帮助您保持信息一致并及时更新。

在 Streamlit 或任何 Web 应用程序中处理数据库时，遵循最佳安全实践非常重要，以下是一些关键做法：

• sqlite3 允许您处理数据库。

• 安全存储数据库凭证：将您的数据库凭证（如用户名和密码）存储在安全的环境中，如环境变量或配置文件中。切勿将其硬编码到代码中。

• 实施认证：如果您的应用程序允许用户访问或修改数据，请实施用户身份验证和授权，以控制谁能在您的应用程序中执行什么操作。

• 定期更新和修补：保持您的数据库软件和库是最新的，以修复安全漏洞。这对您的应用程序和数据库系统本身都非常重要。

• 数据加密：如果数据库中存储了敏感数据，请确保在静态存储（存储在服务器上时）和传输过程中（数据在应用程序和数据库之间传输时）都对其进行加密。

简而言之，数据库就像是您应用程序数据的有组织存储空间。它们对于安全地保存、访问和管理信息非常有用。为了在 Streamlit 中安全地使用数据库，请遵循最佳实践，以保护您的数据并确保应用程序顺利运行。避免常见的错误，如未处理错误、暴露敏感数据或使数据库超负荷。

这是一些高级 Streamlit 功能的简要回顾：

• 自定义页面：Streamlit 允许您在 Web 应用程序中创建自定义页面。每个页面可以具有独特的内容、布局和功能。当您想将应用程序组织成不同的部分，例如主页、仪表板和设置页面时，这个功能非常有用。您可以使用 Streamlit 的布局组件来设计和构建每个页面。

• 多页面：Streamlit 提供了创建具有多个互联页面的 Web 应用程序的功能。这使得你可以构建具有不同视图、导航和交互的复杂应用程序。你可以使用 Streamlit 内建的导航元素，例如按钮或链接，在应用的不同页面之间切换。多页面应用程序非常适合创建具有层次结构的应用，或者在你需要引导用户通过不同步骤时使用。

• 主题：Streamlit 提供了通过主题定制应用程序外观的功能。主题是预定义样式和颜色的集合，你可以将其应用到你的应用程序中。这个功能让你能够创建一致且具有视觉吸引力的设计，与你的品牌或个人偏好相匹配。

• 表单：Streamlit 允许你在 Web 应用程序中创建互动表单。表单是通过文本输入框、滑块和复选框等小部件收集用户输入的一种方式。你可以使用表单收集用户的数据、设置或偏好，并在应用程序中处理这些信息。

• 子域名：Streamlit 中的子域名让你可以从网站的不同子域名提供不同的应用程序或应用部分。当你希望在不同的 URL 下托管多个 Streamlit 应用程序，每个应用具有不同的功能或内容时，这一点尤其有用。子域名有助于为你的 Web 应用程序创建模块化和有序的结构，允许高效的导航和可扩展性。

• 会话状态：Streamlit 中的会话状态让你能够在用户的会话期间跨不同的交互和页面存储和管理数据。它是一种保持变量或用户特定数据的方式，这些数据会随着用户与应用的交互而持续存在。如果你希望应用记住用户的设置、选择或其他在用户访问期间获得的信息，这个功能非常有用。它可以提供更个性化和动态的用户体验。

总结一下，Streamlit 提供了多种功能来增强 Web 应用程序的功能和外观。你可以为不同部分创建定制的页面，设计具有导航功能的多页面应用程序，使用主题来美化应用，利用表单收集用户输入，使用子域名实现模块化，并通过 Session State 维护会话特定的数据。这些功能为你提供了构建互动和用户友好的 Web 应用程序所需的灵活性和工具。

在开发我们的 Web 应用程序并使用数据库保存信息后，是时候将其部署到云端了。

如何将 Web 应用程序部署到云端

一个 Web 应用程序存在于网络上，经过自然语言处理应用和 COVID-19 检测工具的实现后，我们完成了将这两个 Web 应用程序部署到 Streamlit Cloud 上的工作。

让我们回顾一下为什么将 Web 应用程序部署到云端如此重要。

将 Web 应用程序部署到云端具有几个显著的优势：

• 全球可访问性：托管在云上的应用可以在任何有互联网连接的地方访问，拓宽了用户的覆盖范围。用户无需在本地安装即可访问您的应用。

• 可扩展性：云平台可以轻松扩展应用，以应对增加的流量或需求。这意味着即使在流量激增时，您的应用依然保持响应迅速。

• 可靠性与冗余：云服务提供商提供高可用性和冗余，减少了停机的风险。数据通常会在多个数据中心进行备份和复制。

• 安全性：云服务提供商在安全措施上投入大量资金，包括数据加密、防火墙和身份管理。您的应用可以从这些强大的安全功能中受益。

• 简化的维护：云服务提供商负责基础设施管理，例如服务器维护和更新。这使得开发者可以专注于应用开发，而非服务器管理。

Streamlit Cloud 是一个专为部署和分享 Streamlit 应用而设计的云平台。Streamlit Cloud 致力于简化这些应用的部署过程。

除了通用云部署的常见优势外，Streamlit 的云服务还提供一些更为特定的功能：

• 无缝部署：Streamlit Cloud 简化了部署过程，免去了复杂的服务器配置需求。开发者可以轻松部署他们的 Streamlit 应用。

• 实时更新：Streamlit Cloud 会在您推送代码库更改时自动更新您的应用。用户始终看到最新版本，无需人工干预。

• 协作：开发者可以轻松地与特定的协作者共享应用，或将其保持私密。这对于面向公众和内部项目都非常有价值。

• 分析与监控：Streamlit Cloud 提供了用于跟踪应用使用情况、性能和错误的工具。这些数据对于随着时间推移优化和改进应用非常有价值。

总结来说，将 Web 应用部署到云端，尤其是通过 Streamlit Cloud，可以为全球观众提供简化且用户友好的应用分享方式。全球可访问性、可扩展性、成本效益和简化的维护等优势，使得云托管成为 Web 应用部署的热门选择。Streamlit Cloud 专为 Streamlit 应用量身定制，简化了部署过程，并增强了数据驱动 Web 应用的可访问性和可用性。

再见！

最后，当我们走到本书最后一章时，我想衷心感谢您与我们一起踏上探索 Streamlit 的旅程。我们一起走过了这段不短的路程，深入了解了这个令人惊叹的 Python 库中的 Web 应用开发。您对掌握 Streamlit 及其众多功能的执着精神，值得我们由衷的赞赏。

记住，科技是不断发展的，新的功能和改进也在持续推出。为了始终处于 web 应用开发的前沿，我鼓励你们定期访问 Streamlit 的官方网站。在那里，你们将找到最新的更新、功能以及资源，帮助你们在 web 应用项目中保持信息更新和赋能。

在我们告别之际，我想向你们，亲爱的读者们，表达我最诚挚的祝愿。感谢你们的时间、你们对学习的热情以及你们探索 Streamlit 世界的决心。愿你们在 web 应用开发的未来努力中充满创意和成功。祝你们的编码旅程好运，也感谢你们成为这次 Streamlit 激动人心的探索的一部分。告别！