好的,各位观众老爷,大家好!欢迎来到今天的“AI模型炫技速成班”,我是你们的导游,带大家一起用Gradio和Streamlit这两把瑞士军刀,快速打造让人眼前一亮的AI模型演示界面和交互式Web应用。
今天咱们的目标是:
- 理解Gradio和Streamlit是啥玩意儿,为啥它们能这么火。
- 学会用Gradio,像搭积木一样,把你的AI模型变成一个能互动的小玩具。
- 学会用Streamlit,像写PPT一样,把你的AI模型变成一个酷炫的Web应用。
- 最后,咱们来个实战演练,把一个简单的图像分类模型,分别用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()
这段代码做了什么?
import gradio as gr
:导入Gradio库,并起个别名gr
,方便使用。def greet(name)
:定义一个函数,接收一个名字作为输入,返回一个问候语。这个函数就是你的AI模型,只不过这里简化成了一个简单的字符串拼接。iface = gr.Interface(...)
:创建一个Gradio的界面对象。fn=greet
:指定要调用的函数是greet
。inputs="text"
:指定输入类型是文本框。outputs="text"
:指定输出类型是文本框。
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()
这段代码做了什么?
def classify_image(img)
:定义一个函数,接收一张图片作为输入,返回一个字典,表示图片的类别和概率。这里咱们用np.mean(img)
来模拟图像分类的结果,如果图片的平均像素值大于128,就认为是猫,否则认为是狗。inputs=gr.Image(shape=(256, 256))
:指定输入类型是图片,并指定图片的形状是256×256。outputs=gr.Label(num_top_classes=2)
:指定输出类型是标签,并指定显示最可能的两个类别。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)
这段代码做了什么?
import streamlit as st
:导入Streamlit库,并起个别名st
,方便使用。import pandas as pd
:导入Pandas库,用于创建DataFrame。data = pd.DataFrame(...)
:创建一个DataFrame,包含两列数据。st.write("Here's our first attempt at using data in Streamlit:")
:在页面上显示一段文字。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)
这段代码做了什么?
st.title("Simple Image Classifier")
:在页面上显示标题。uploaded_file = st.file_uploader(...)
:创建一个文件上传区域,允许用户上传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...")
:在页面上显示“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应用!
下课!