You just developed a cool ML model.

您刚刚开发了一个很酷的ML模型。

You are proud of it. You want to show it to your friends through a web demo so they can interact with your model and provide feedback.

您为此感到骄傲。 您希望通过网络演示将其展示给您的朋友，以便他们可以与您的模型进行交互并提供反馈。

However, you are not familiar with common frameworks such as Django and Flask.

但是，您对Django和Flask等常见框架不熟悉。

You start to ask yourself: Is there a way to build a quick web demo with minimal framework?

您开始问自己：有没有办法用最少的框架构建快速的Web演示？

好奇心表 (Table of Curiosities)

1. What is Streamlit?

   什么是Streamlit？

2. How to make the UI?

   如何制作UI？

3. How to create the image classification model?

   如何创建图像分类模型？

4. What does the result look like?

   结果是什么样的？

5. What can we do next?

   接下来我们该怎么办？

总览 (Overview)

In this post, I will walk through a quick example of how you can use Streamlit to build a simple web app.

在本文中，我将通过一个简单的示例演示如何使用Streamlit构建简单的Web应用程序。

Streamlit is an open-source Python library that makes it easy to build custom web apps for machine learning and data science [1]. Check out its gallery here to see some applications that other people have created.

Streamlit是一个开放源代码的Python库，可轻松构建用于机器学习和数据科学的自定义Web应用程序[1]。 在此处查看其图库，以查看其他人创建的一些应用程序。

I have chosen image classification here as an example because computer vision (CV) is one of the most popular areas of AI currently, powered by deep learning algorithms. It also has a wide range of applications, such as classifying medical images to help doctors in disease diagnosis [2]. Learn more about image classification with deep learning models here.

我在这里选择图像分类作为示例，因为计算机视觉(CV)是当前由深度学习算法提供支持的AI最受欢迎的领域之一。 它还具有广泛的应用，例如对医学图像进行分类以帮助医生进行疾病诊断[2]。 在此处了解有关使用深度学习模型进行图像分类的更多信息。

For demonstration purposes, I will use a pretrained ResNet model from PyTorch, and for the same task, you can always use other libraries (TensorFlow, Keras, etc.), other architecture, or even customize your own model.

出于演示目的，我将使用PyTorch中经过预训练的ResNet模型，并且对于同一任务，您始终可以使用其他库(TensorFlow，Keras等)，其他体系结构，甚至自定义您自己的模型。

To see my full Python code, check out my Github page.

要查看我的完整Python代码，请查看我的Github页面 。

Now without further ado, let’s get started!

现在，事不宜迟，让我们开始吧！

安装Streamlit (Install Streamlit)

The first step is to install the Streamlit library, and you can do that using the pip command. I recommend that you use a Python virtual environment to keep your dependencies separately for each project.

第一步是安装Streamlit库，您可以使用pip命令执行此操作。 我建议您使用Python虚拟环境为每个项目分别保留依赖项。

$ pip install streamlit

After it is installed successfully, you can do a quick check with a simple ‘Hello World’ app:

成功安装后，您可以使用简单的“ Hello World”应用进行快速检查：

$ streamlit hello

用户界面 (User Interface)

For our application, one key element is to enable users to upload images for the model to make predictions, and this can be done with the ‘file_uploader’ function:

对于我们的应用程序，一个关键要素是使用户能够上传图像以供模型进行预测，这可以通过' file_uploader '函数来完成：

import streamlit as stfile_up = st.file_uploader("Upload an image", type="jpg")

Make sure to specify the appropriate file type so it works properly with the classification model.

确保指定适当的文件类型，以便它与分类模型一起正常工作。

Then we can display this image:

然后我们可以显示此图像：

from PIL import Imageimage = Image.open(file_up)st.image(image, caption='Uploaded Image.', use_column_width=True)

Apart from that, we will also use ‘set_title’ to create a title for the app and ‘write’ to display prediction results.

除此之外，我们还将使用“ set_title”为应用创建标题，并使用“ write”显示预测结果。

分类模型 (Classification Model)

To use a pretrained model from PyTorch, make sure you have installed both ‘torch’ and ‘torchvision’ library. Now we can create a ResNet model:

要使用来自PyTorch的预训练模型，请确保已安装“ torch”和“ torchvision”库。 现在我们可以创建一个ResNet模型：

from torchvision import models, transformsimport torchresnet = models.resnet101(pretrained=True)

To put it in simpler terms, Residual Network (ResNet) is an improved Convolutional Neuron Network (CNN), trained in the well-known ImageNet database, and it has achieved great performance in CV tasks such as image classification and object detection. This particular model ‘resnet101’ means it has 101 layers (Deep!). Read more about ResNet and its variant here.

简而言之，残差网络(ResNet)是经过改进的卷积神经元网络(CNN)，在著名的ImageNet数据库中进行了训练，并且在CV任务(例如图像分类和对象检测)中取得了出色的性能 。 此特定模型'resnet101'表示它具有101层(深！)。 在此处阅读有关ResNet及其变体的更多信息。

After we create this model, we need to transform the input image through resizing, normalization, etc. Here we make use of the ‘transforms’ module in ‘torchvision’:

创建此模型后，我们需要通过调整大小，归一化等方法来变换输入图像。在这里，我们使用“ torchvision”中的“ transforms”模块：

transform = transforms.Compose([    transforms.Resize(256),    transforms.CenterCrop(224),    transforms.ToTensor(),    transforms.Normalize(    mean=[0.485, 0.456, 0.406],    std=[0.229, 0.224, 0.225]    )])

Note that the images are normalized according to its mean and standard deviation. See the documentation for details.

请注意，图像根据其平均值和标准偏差进行了归一化。 有关详细信息，请参见文档 。

Now we are able to load the image, pre-process it, and make predictions:

现在，我们可以加载图像，对其进行预处理并做出预测了：

img = Image.open(image_path)batch_t = torch.unsqueeze(transform(img), 0)resnet.eval()out = resnet(batch_t)

Next, we can return the top 5 predictions ranked by highest probabilities. Make sure the names of the 1000 categories from ImageNet are available so we can output the predictions through index:

接下来，我们可以返回按最高概率排名的前5个预测。 确保ImageNet的1000个类别的名称可用，以便我们可以通过索引输出预测：

prob = torch.nn.functional.softmax(out, dim=1)[0] * 100_, indices = torch.sort(out, descending=True)return [(classes[idx], prob[idx].item()) for idx in indices[0][:5]]

结果 (Results)

Now we can run the application by typing ‘streamlit run <the python file containing UI>’ in the command prompt/terminal. Let’s try two examples and see what the results look like.

现在，我们可以通过在命令提示符/终端中键入“ streamlit run <包含UI的python文件”来运行应用程序。 让我们尝试两个示例，看看结果如何。

First example:

第一个例子：

Great! Golden retriever is at the top of the list, with high confidence score (~97).

大！ 金毛寻回犬以较高的置信度得分(〜97)在列表中排名最高。

Let’s try another example:

让我们尝试另一个示例：

Green snake is at the top of the list! Again, its confidence score is quite high.

绿蛇在榜首！ 同样，它的置信度很高。

One thing to be cautious here is that since the model was trained on ImageNet, its performance might not be as good for images outside of the 1000 categories.

这里要注意的一件事是，由于该模型是在ImageNet上进行训练的，因此它的性能对于1000个类别以外的图像可能不太好。

下一步 (Next Steps)

The natural next step after you create a web app is to deploy and host it. As an example, I deployed an Iris Classification app through Heroku and you can check it out through this Github page.

创建Web应用程序后，自然的下一步就是部署和托管它。 例如，我通过Heroku部署了一个Iris分类应用程序，您可以通过此Github页面检出它。

In addition, if you are interested in other neural network models (VGG, Densenet, etc.), you can try upload different images and then compare their performances.

此外，如果您对其他神经网络模型(VGG，Densenet等)感兴趣，可以尝试上传不同的图像，然后比较它们的性能。

摘要 (Summary)

Let’s quickly recap.

让我们快速回顾一下。

We built a simple web app through Streamlit, and in this app, users can upload images to see the model’s top predictions as well as confidence scores. We also went through how to build a pretrained ResNet model through PyTorch.

我们通过Streamlit构建了一个简单的Web应用程序，在该应用程序中，用户可以上传图像以查看模型的最高预测以及置信度得分。 我们还介绍了如何通过PyTorch构建预训练的ResNet模型。

I hope you enjoy this blog post and please share any thought that you may have :)

希望您喜欢这篇博客文章，并分享您可能有的任何想法:)

Check out my other post on sentiment classification on Yelp reviews using logistic regression:

在Logistic回归上查看关于Yelp评论的情感分类的其他文章：