使用Stream实现Web应用,使用YOLOv8模型对图像进行目标检测为例。

简介: 使用Stream实现Web应用,使用YOLOv8模型对图像进行目标检测为例。

Streamlit是一个开源的Python框架,专门设计用于快速构建和共享数据应用程序。它使数据科学家和机器学习工程师能够通过编写简单的Python脚本,轻松创建美观、功能强大的Web应用程序,而无需具备前端开发的经验。
其他框架或web应用可以看下面两篇博客介绍
1.使用gradio库实现Web应用,允许用户上传图像,并使用YOLOv8模型对图像进行目标检测。
2.python常用Web框架介绍

以下是Streamlit的一些关键特性和功能:

简单易用:

只需几行代码即可创建一个应用程序。
不需要HTML、CSS或JavaScript知识。
实时更新:

应用程序可以在代码更改时实时更新,无需手动刷新浏览器。
交互式小部件:

提供多种交互式小部件,如滑块、按钮、下拉菜单等,用户可以与应用程序进行互动。
集成数据可视化:

支持多种数据可视化库,如Matplotlib、Seaborn、Plotly、Altair等,轻松将数据可视化集成到应用程序中。
Markdown支持:

支持Markdown语法,方便用户在应用程序中添加文本、标题、链接等内容。
部署方便:

可以轻松地将应用程序部署到云端,分享给他人使用。
示例代码
下面是一个简单的Streamlit应用程序示例,展示如何使用Streamlit创建一个基本的Web应用程序:

import streamlit as st
import pandas as pd
import numpy as np

标题

st.title('我的第一个 Streamlit 应用')

文本输入

user_input = st.text_input("输入你的名字")

显示用户输入

st.write(f"你好,{user_input}!")

显示数据框

df = pd.DataFrame({
'列A': np.random.randn(10),
'列B': np.random.randn(10)
})
st.write("数据框示例:", df)

显示图表

st.line_chart(df)

交互式小部件

if st.button('点击我'):
st.write("按钮已点击!")

下拉菜单

option = st.selectbox(
'选择一个选项',
['选项1', '选项2', '选项3']
)
st.write('你选择了:', option)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
如何运行Streamlit应用程序
安装Streamlit:

pip install streamlit
1
创建一个Python脚本,例如app.py,并将上述示例代码复制到该文件中。

运行Streamlit应用程序:

streamlit run app.py
1
在浏览器中打开显示的URL,即可看到Streamlit应用程序。

Streamlit通过简单的API和实时的反馈,极大地简化了数据应用程序的开发和分享过程,适合快速原型设计和数据展示。

YOLOv8-检测实例
完整代码如下:

import streamlit as st

设置页面配置

st.set_page_config(page_title="YOLOv8 图像检测", layout="wide")

import cv2
import numpy as np
import os
from ultralytics import YOLO
from PIL import Image

设置上传和结果文件夹

UPLOAD_FOLDER = 'uploads'
RESULT_FOLDER = 'results'
os.makedirs(UPLOAD_FOLDER, exist_ok=True)
os.makedirs(RESULT_FOLDER, exist_ok=True)

加载模型

model = YOLO('yolov8n.pt')

def process_image(image):

# 将PIL图像转换为OpenCV格式
image = np.array(image)
image = cv2.cvtColor(image, cv2.COLOR_RGB2BGR)

# 保存上传的图像
filename = 'uploaded_image.jpg'
file_path = os.path.join(UPLOAD_FOLDER, filename)
cv2.imwrite(file_path, image)

# 处理图像
results = model(image)
detection_results = []
for result in results:
    boxes = result.boxes
    for box in boxes:
        x1, y1, x2, y2 = box.xyxy[0]
        conf = box.conf[0]
        cls = box.cls[0]
        class_name = model.names[int(cls)]
        cv2.rectangle(image, (int(x1), int(y1)), (int(x2), int(y2)), (0, 255, 0), 2)
        cv2.putText(image, f'{class_name}:{conf:.2f}', (int(x1), int(y1) - 10), cv2.FONT_HERSHEY_SIMPLEX, 0.9,
                    (36, 255, 12), 2)
        detection_results.append(f'Class: {class_name}, Confidence: {conf:.2f}, Box: ({x1}, {y1}), ({x2}, {y2})')

# 保存处理后的图像
result_filename = 'result_image.jpg'
result_path = os.path.join(RESULT_FOLDER, result_filename)
cv2.imwrite(result_path, image)

# 将处理后的图像转换回PIL格式
result_image = cv2.cvtColor(image, cv2.COLOR_BGR2RGB)
result_image = Image.fromarray(result_image)

return result_image, detection_results

创建Streamlit界面

st.title("YOLOv8 图像检测")
st.write("上传图像并使用YOLOv8模型进行检测")

uploaded_file = st.file_uploader("上传图像", type=["jpg", "jpeg", "png"])

if uploaded_file is not None:

# 加载上传的图像
image = Image.open(uploaded_file)
# st.image(image, caption='上传的图像', use_column_width=True)
st.image(image, caption='上传的图像', width=600)

# 处理图像
result_image, detection_results = process_image(image)

# 显示处理后的图像和检测结果
# st.image(result_image, caption='处理后的图像', use_column_width=True)
st.image(result_image, caption='处理后的图像', width=600)
st.write("检测结果:")
for result in detection_results:
    st.write(result)

启动Streamlit应用

if name == 'main':
pass

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
运行Streamlit应用:
将上述代码保存为 yolo8_Streamlit.py,在命令行运行以下命令启动Streamlit应用:

streamlit run yolo8_Streamlit.py
1
Streamlit会自动在浏览器中打开应用程序,你可以上传图像并查看YOLOv8模型的检测结果。
注意一点:
运行这段代码,必须在终端下面运行上述命令行,若在pycharm下右击运行代码,会报警告,而且有如下错误:

相关文章
|
18天前
|
前端开发 JavaScript 安全
前端性能调优:HTTP/2与HTTPS在Web加速中的应用
【10月更文挑战第27天】本文介绍了HTTP/2和HTTPS在前端性能调优中的应用。通过多路复用、服务器推送和头部压缩等特性,HTTP/2显著提升了Web性能。同时,HTTPS确保了数据传输的安全性。文章提供了示例代码,展示了如何使用Node.js创建一个HTTP/2服务器。
32 3
|
24天前
|
移动开发 开发者 HTML5
构建响应式Web界面:Flexbox与Grid的实战应用
【10月更文挑战第22天】随着互联网的普及,用户对Web界面的要求越来越高,不仅需要美观,还要具备良好的响应性和兼容性。为了满足这些需求,Web开发者需要掌握一些高级的布局技术。Flexbox和Grid是现代Web布局的两大法宝,它们分别由CSS3和HTML5引入,能够帮助开发者构建出更加灵活和易于维护的响应式Web界面。本文将深入探讨Flexbox和Grid的实战应用,并通过具体实例来展示它们在构建响应式Web界面中的强大能力。
34 3
|
1月前
|
存储 安全 关系型数据库
后端技术:构建高效稳定的现代Web应用
【10月更文挑战第5天】后端技术:构建高效稳定的现代Web应用
53 1
|
6天前
|
缓存 安全 网络安全
HTTP/2与HTTPS在Web加速中的应用
HTTP/2与HTTPS在Web加速中的应用
|
9天前
|
SQL 安全 前端开发
PHP与现代Web开发:构建高效的网络应用
【10月更文挑战第37天】在数字化时代,PHP作为一门强大的服务器端脚本语言,持续影响着Web开发的面貌。本文将深入探讨PHP在现代Web开发中的角色,包括其核心优势、面临的挑战以及如何利用PHP构建高效、安全的网络应用。通过具体代码示例和最佳实践的分享,旨在为开发者提供实用指南,帮助他们在不断变化的技术环境中保持竞争力。
|
19天前
|
前端开发 安全 应用服务中间件
前端性能调优:HTTP/2与HTTPS在Web加速中的应用
【10月更文挑战第26天】随着互联网的快速发展,前端性能调优成为开发者的重要任务。本文探讨了HTTP/2与HTTPS在前端性能优化中的应用,介绍了二进制分帧、多路复用和服务器推送等特性,并通过Nginx配置示例展示了如何启用HTTP/2和HTTPS,以提升Web应用的性能和安全性。
17 3
|
19天前
|
前端开发 JavaScript API
前端框架新探索:Svelte在构建高性能Web应用中的优势
【10月更文挑战第26天】近年来,前端技术飞速发展,Svelte凭借独特的编译时优化和简洁的API设计,成为构建高性能Web应用的优选。本文介绍Svelte的特点和优势,包括编译而非虚拟DOM、组件化开发、状态管理及响应式更新机制,并通过示例代码展示其使用方法。
33 2
|
19天前
|
测试技术 持续交付 PHP
PHP在Web开发中的应用与最佳实践###
【10月更文挑战第25天】 本文将深入探讨PHP在现代Web开发中的应用及其优势,并分享一些最佳实践来帮助开发者更有效地使用PHP。无论是初学者还是有经验的开发者,都能从中受益。 ###
41 1
|
20天前
|
负载均衡 监控 算法
论负载均衡技术在Web系统中的应用
【11月更文挑战第4天】在当今高并发的互联网环境中,负载均衡技术已经成为提升Web系统性能不可或缺的一环。通过有效地将请求分发到多个服务器上,负载均衡不仅能够提高系统的响应速度和处理能力,还能增强系统的可扩展性和稳定性。本文将结合我参与的一个实际软件项目,从项目概述、负载均衡算法原理以及实际应用三个方面,深入探讨负载均衡技术在Web系统中的应用。
48 2
|
24天前
|
JavaScript 前端开发 持续交付
构建现代Web应用:Vue.js与Node.js的完美结合
【10月更文挑战第22天】随着互联网技术的快速发展,Web应用已经成为了人们日常生活和工作的重要组成部分。前端技术和后端技术的不断创新,为Web应用的构建提供了更多可能。在本篇文章中,我们将探讨Vue.js和Node.js这两大热门技术如何完美结合,构建现代Web应用。
21 4