Gradio/Streamlit:快速构建 AI 模型演示界面与交互式 Web 应用

好的,各位观众老爷,大家好!欢迎来到今天的“AI模型炫技速成班”,我是你们的导游,带大家一起用Gradio和Streamlit这两把瑞士军刀,快速打造让人眼前一亮的AI模型演示界面和交互式Web应用。

今天咱们的目标是:

  1. 理解Gradio和Streamlit是啥玩意儿,为啥它们能这么火。
  2. 学会用Gradio,像搭积木一样,把你的AI模型变成一个能互动的小玩具。
  3. 学会用Streamlit,像写PPT一样,把你的AI模型变成一个酷炫的Web应用。
  4. 最后,咱们来个实战演练,把一个简单的图像分类模型,分别用Gradio和Streamlit包装一下,看看哪个更适合你。

第一幕:Gradio和Streamlit的前世今生

首先,咱们先来聊聊Gradio和Streamlit的身世。它们都是Python界的明星,专门解决一个问题:如何让不懂代码的人,也能轻松玩转AI模型?

想象一下,你辛辛苦苦训练了一个图像识别模型,准确率高达99.9%,但是,你只能在命令行里输入一堆指令,才能看到结果。这…这就像你做了一桌满汉全席,却只能自己默默品尝,多寂寞啊!

Gradio和Streamlit就是来拯救你的。它们提供了一套简单的API,让你用几行代码,就能把你的AI模型变成一个Web界面,让所有人都能上传图片、输入文字,然后看到模型的预测结果。

Gradio:小巧玲珑,即插即用

Gradio就像一个万能插座,无论你的模型是什么类型,只要你定义好输入和输出,就能轻松接入Gradio的界面。它最大的优点是:简单、快速、易上手。

Streamlit:功能强大,灵活定制

Streamlit就像一个PPT制作工具,你可以用它来创建更复杂的Web应用,添加各种图表、表格、按钮,甚至还可以播放视频。它的优点是:功能丰富、可定制性强、用户体验好。

简单来说,Gradio适合快速原型验证和简单的演示,Streamlit适合构建更复杂的Web应用和数据可视化。

第二幕:Gradio:五分钟搭建AI模型演示界面

接下来,咱们来学习Gradio的基本用法。

安装Gradio

首先,你需要安装Gradio。打开你的终端,输入以下命令:

pip install gradio

一个简单的例子:问候语生成器

咱们先来一个最简单的例子:一个问候语生成器。

import gradio as gr

def greet(name):
    return "Hello, " + name + "!"

iface = gr.Interface(fn=greet, inputs="text", outputs="text")
iface.launch()

这段代码做了什么?

  1. import gradio as gr:导入Gradio库,并起个别名gr,方便使用。
  2. def greet(name):定义一个函数,接收一个名字作为输入,返回一个问候语。这个函数就是你的AI模型,只不过这里简化成了一个简单的字符串拼接。
  3. iface = gr.Interface(...):创建一个Gradio的界面对象。
    • fn=greet:指定要调用的函数是greet
    • inputs="text":指定输入类型是文本框。
    • outputs="text":指定输出类型是文本框。
  4. iface.launch():启动Web界面。

运行这段代码,你会看到一个网页弹出来,上面有一个文本框,你可以在里面输入你的名字,然后点击“Submit”按钮,就能看到生成的问候语。

是不是很简单?这就是Gradio的魅力所在。

更高级的例子:图像分类器

接下来,咱们来一个更高级的例子:一个图像分类器。

假设你已经训练好了一个图像分类模型,可以接收一张图片,然后返回图片的类别。这里咱们用一个假的图像分类模型来演示。

import gradio as gr
import numpy as np
from PIL import Image

# 假的图像分类模型
def classify_image(img):
    # 模拟图像分类结果
    if np.mean(img) > 128:
        return {"cat": 0.9, "dog": 0.1}
    else:
        return {"cat": 0.1, "dog": 0.9}

iface = gr.Interface(
    fn=classify_image,
    inputs=gr.Image(shape=(256, 256)),
    outputs=gr.Label(num_top_classes=2),
    examples=["images/cat1.jpg", "images/dog1.jpg"] #需要提前准备好图片
)

iface.launch()

这段代码做了什么?

  1. def classify_image(img):定义一个函数,接收一张图片作为输入,返回一个字典,表示图片的类别和概率。这里咱们用np.mean(img)来模拟图像分类的结果,如果图片的平均像素值大于128,就认为是猫,否则认为是狗。
  2. inputs=gr.Image(shape=(256, 256)):指定输入类型是图片,并指定图片的形状是256×256。
  3. outputs=gr.Label(num_top_classes=2):指定输出类型是标签,并指定显示最可能的两个类别。
  4. examples=["images/cat1.jpg", "images/dog1.jpg"]:指定一些示例图片,让用户可以直接点击这些图片来测试模型。(需要提前准备好图片)

运行这段代码,你会看到一个网页弹出来,上面有一个图片上传区域,你可以上传一张图片,然后点击“Submit”按钮,就能看到模型的分类结果。

常用的Gradio组件

Gradio提供了很多常用的组件,可以满足你各种各样的需求。

组件类型 描述 示例
Textbox 文本框,用于输入或输出文本。 inputs="text", outputs="text"
Number 数字输入框,用于输入或输出数字。 inputs="number", outputs="number"
Slider 滑动条,用于输入一个范围内的数字。 inputs=gr.Slider(minimum=0, maximum=100, value=50)
Checkbox 复选框,用于选择一个或多个选项。 inputs="checkbox", outputs="checkbox"
Radio 单选框,用于选择一个选项。 inputs=gr.Radio(["option1", "option2", "option3"])
Dropdown 下拉框,用于选择一个选项。 inputs=gr.Dropdown(["option1", "option2", "option3"])
Image 图片上传区域,用于上传或显示图片。 inputs=gr.Image(shape=(256, 256)), outputs="image"
Audio 音频上传区域,用于上传或播放音频。 inputs="audio", outputs="audio"
Video 视频上传区域,用于上传或播放视频。 inputs="video", outputs="video"
File 文件上传区域,用于上传文件。 inputs="file", outputs="file"
Label 标签,用于显示文本或数字。 outputs="label"
DataFrame 数据表格,用于显示数据。 outputs="dataframe"
Plot 图表,用于显示数据。 outputs="plot"

第三幕:Streamlit:打造酷炫的Web应用

接下来,咱们来学习Streamlit的基本用法。

安装Streamlit

首先,你需要安装Streamlit。打开你的终端,输入以下命令:

pip install streamlit

一个简单的例子:数据展示

咱们先来一个最简单的例子:一个数据展示应用。

import streamlit as st
import pandas as pd

# 创建一个DataFrame
data = pd.DataFrame({
    'col1': [1, 2, 3, 4, 5],
    'col2': [6, 7, 8, 9, 10]
})

# 在页面上显示DataFrame
st.write("Here's our first attempt at using data in Streamlit:")
st.write(data)

这段代码做了什么?

  1. import streamlit as st:导入Streamlit库,并起个别名st,方便使用。
  2. import pandas as pd:导入Pandas库,用于创建DataFrame。
  3. data = pd.DataFrame(...):创建一个DataFrame,包含两列数据。
  4. st.write("Here's our first attempt at using data in Streamlit:"):在页面上显示一段文字。
  5. st.write(data):在页面上显示DataFrame。

运行这段代码,你需要使用以下命令:

streamlit run your_script.py

其中,your_script.py是你保存这段代码的文件名。

运行之后,你会看到一个网页弹出来,上面显示了DataFrame的内容。

更高级的例子:图像分类器

接下来,咱们来一个更高级的例子:一个图像分类器。

import streamlit as st
import numpy as np
from PIL import Image

# 假的图像分类模型
def classify_image(img):
    # 模拟图像分类结果
    if np.mean(img) > 128:
        return {"cat": 0.9, "dog": 0.1}
    else:
        return {"cat": 0.1, "dog": 0.9}

st.title("Simple Image Classifier")

uploaded_file = st.file_uploader("Choose an image...", type=["jpg", "jpeg", "png"])

if uploaded_file is not None:
    image = Image.open(uploaded_file)
    st.image(image, caption='Uploaded Image.', use_column_width=True)
    st.write("")
    st.write("Classifying...")
    label = classify_image(np.array(image))
    st.write(label)

这段代码做了什么?

  1. st.title("Simple Image Classifier"):在页面上显示标题。
  2. uploaded_file = st.file_uploader(...):创建一个文件上传区域,允许用户上传jpg、jpeg、png格式的图片。
  3. if uploaded_file is not None::判断用户是否上传了文件。
    • image = Image.open(uploaded_file):打开上传的图片。
    • st.image(image, caption='Uploaded Image.', use_column_width=True):在页面上显示上传的图片。
    • st.write(""):添加一个空行。
    • st.write("Classifying..."):在页面上显示“Classifying…”字样。
    • label = classify_image(np.array(image)):调用图像分类模型,得到分类结果。
    • st.write(label):在页面上显示分类结果。

常用的Streamlit组件

Streamlit提供了很多常用的组件,可以满足你各种各样的需求。

组件类型 描述 示例
st.title 在页面上显示标题。 st.title("My Awesome App")
st.header 在页面上显示二级标题。 st.header("Introduction")
st.subheader 在页面上显示三级标题。 st.subheader("Data Analysis")
st.write 在页面上显示文本、数字、DataFrame、图表等。 st.write("Hello, world!"), st.write(123), st.write(df), st.write(fig)
st.markdown 在页面上显示Markdown格式的文本。 st.markdown("## This is a markdown header")
st.file_uploader 创建一个文件上传区域,允许用户上传文件。 uploaded_file = st.file_uploader("Choose a file...", type=["csv", "txt"])
st.image 在页面上显示图片。 st.image(image, caption='Uploaded Image.', use_column_width=True)
st.audio 在页面上播放音频。 st.audio(audio_file, format='audio/ogg')
st.video 在页面上播放视频。 st.video(video_file, format='video/mp4')
st.checkbox 创建一个复选框,允许用户选择一个选项。 agree = st.checkbox('I agree to the terms and conditions')
st.radio 创建一个单选框,允许用户选择一个选项。 option = st.radio('Choose an option:', ('Option 1', 'Option 2', 'Option 3'))
st.selectbox 创建一个下拉框,允许用户选择一个选项。 option = st.selectbox('Choose an option:', ('Option 1', 'Option 2', 'Option 3'))
st.slider 创建一个滑动条,允许用户选择一个范围内的数字。 age = st.slider('How old are you?', 0, 130, 25)
st.button 创建一个按钮,当用户点击按钮时,执行一些操作。 if st.button('Say hello'):
st.dataframe 在页面上显示DataFrame。 st.dataframe(data)
st.table 在页面上显示表格。 st.table(data)
st.line_chart 在页面上显示折线图。 st.line_chart(data)
st.bar_chart 在页面上显示柱状图。 st.bar_chart(data)
st.map 在页面上显示地图。 st.map(data)

第四幕:实战演练:图像分类模型演示

现在,咱们来个实战演练,把一个简单的图像分类模型,分别用Gradio和Streamlit包装一下。

模型准备

这里咱们用一个假的图像分类模型来演示,你可以把它替换成你自己的模型。

import numpy as np
from PIL import Image

# 假的图像分类模型
def classify_image(img):
    # 模拟图像分类结果
    if np.mean(img) > 128:
        return {"cat": 0.9, "dog": 0.1}
    else:
        return {"cat": 0.1, "dog": 0.9}

Gradio版本

import gradio as gr
import numpy as np
from PIL import Image

# 假的图像分类模型
def classify_image(img):
    # 模拟图像分类结果
    if np.mean(img) > 128:
        return {"cat": 0.9, "dog": 0.1}
    else:
        return {"cat": 0.1, "dog": 0.9}

iface = gr.Interface(
    fn=classify_image,
    inputs=gr.Image(shape=(256, 256)),
    outputs=gr.Label(num_top_classes=2),
    examples=["images/cat1.jpg", "images/dog1.jpg"] #需要提前准备好图片
)

iface.launch()

Streamlit版本

import streamlit as st
import numpy as np
from PIL import Image

# 假的图像分类模型
def classify_image(img):
    # 模拟图像分类结果
    if np.mean(img) > 128:
        return {"cat": 0.9, "dog": 0.1}
    else:
        return {"cat": 0.1, "dog": 0.9}

st.title("Simple Image Classifier")

uploaded_file = st.file_uploader("Choose an image...", type=["jpg", "jpeg", "png"])

if uploaded_file is not None:
    image = Image.open(uploaded_file)
    st.image(image, caption='Uploaded Image.', use_column_width=True)
    st.write("")
    st.write("Classifying...")
    label = classify_image(np.array(image))
    st.write(label)

运行这两个程序,你会发现它们的功能基本相同,但是界面风格略有不同。Gradio的界面更简洁,Streamlit的界面更灵活。

第五幕:总结与展望

今天咱们学习了Gradio和Streamlit的基本用法,并用它们分别包装了一个简单的图像分类模型。

Gradio和Streamlit都是非常强大的工具,可以帮助你快速构建AI模型演示界面和交互式Web应用。选择哪个工具,取决于你的具体需求。

  • Gradio:简单、快速、易上手,适合快速原型验证和简单的演示。
  • Streamlit:功能丰富、可定制性强、用户体验好,适合构建更复杂的Web应用和数据可视化。

未来,Gradio和Streamlit将会继续发展,提供更多的组件和功能,让AI模型的部署和演示更加简单、高效。

好了,今天的“AI模型炫技速成班”就到这里了。希望大家能够学以致用,用Gradio和Streamlit打造出更多酷炫的AI应用!

下课!

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注