前言
最近，老板讓寫一個程序把yolov5檢測模型部署到web端，在網(wǎng)頁直接進行目標檢測。經(jīng)過1個星期的努力，終于實現(xiàn)基本功能??（累暈了）。網(wǎng)上查閱了很多資料，發(fā)現(xiàn)很多的技術比較復雜，當然他們的頁面都比較漂亮，然后我打算自己寫一篇簡單記錄一下哈哈。進入正題，該項目完全由Python的輕量級web框架flask完成，其實有一點js代碼，簡單易懂??
最終實現(xiàn)效果圖
先看項目的效果圖吧哈哈，比較辣雞，但是功能實現(xiàn)了！
檢測結果顯示：
哈哈 可以看到檢測結果還是可以的??
后端實現(xiàn)
首先，寫了二個路由函數(shù)，分別是主界面、檢測函數(shù)結果顯示。如下所示
主界面
# 定義路由
@app.route('/', methods=['GET', 'POST'])
def upload():
if request.method == 'POST': #post是一種請求方式
# 從表單中獲取上傳的文件
f = request.files['file'] #request.files 函數(shù)作用就是獲取前端名為 'file'的文件信息
global filename # 定義全局變量，方便其他地方調用filename，如果不定義全局變量，其他地方無法調用
filename = f.filename # 獲取前端上傳圖片名字
global file_path #同理，定義全局變量
# 將文件保存到服務器本地
file_path = os.path.join(os.getcwd(), filename) #本地路徑+圖片名字= 文件路徑（file-path)
print(file_path) # 當時只是為了測試程序
f.save(file_path) # 保存上傳的圖片到本地目錄下，方便后續(xù)推理，直接找到圖片
# 返回文件路徑
# return file_path
#進行檢測
opt = parse_opt()
main(opt)
return render_template('index.html')
檢測函數(shù)+檢測結果顯示
# 檢測結果顯示
def return_img_stream(img_local_path):
"""
工具函數(shù):
獲取本地圖片流
:param img_local_path:文件單張圖片的本地絕對路徑
:return: 圖片流
"""
import base64
img_stream = ''
with open(img_local_path, 'rb') as img_f:
img_stream = img_f.read()
img_stream = base64.b64encode(img_stream).decode()
return img_stream
@app.route('/sh', methods=['GET', 'POST']) #定義新路由，顯示圖片
def hello_world():
#圖片路徑，推理完之后，默認保存的就是runs\\detect\\exp，這里加上filename，是變成完整的圖片路徑，然后才能獲取顯示
img_path = 'runs\\detect\\exp\\' + str(filename)
img_stream = return_img_stream(img_path) #獲取圖片流
return render_template('index.html', img_stream=img_stream)
最后，我把detect文件中的函數(shù)，parse_out函數(shù)直接放到app.py文件中了，因為這樣傳遞圖片路徑比較方便。其中的main函數(shù)直接是調用的detect文件，如下所示：
# 檢測圖片的
def parse_opt():
parser = argparse.ArgumentParser()
parser.add_argument('--weights', nargs='+', type=str, default= 'yolov5s.pt', help='model path or triton URL')
#parser.add_argument('--source', type=str, default=0, help='file/dir/URL/glob/screen/0(webcam)')
parser.add_argument('--source', type=str, default= file_path, help='file/dir/URL/glob/screen/0(webcam)')
parser.add_argument('--data', type=str, default= 'models/yolov5s.yaml', help='(optional) dataset.yaml path')
parser.add_argument('--imgsz', '--img', '--img-size', nargs='+', type=int, default=[640], help='inference size h,w')
parser.add_argument('--conf-thres', type=float, default=0.25, help='confidence threshold')
parser.add_argument('--iou-thres', type=float, default=0.45, help='NMS IoU threshold')
parser.add_argument('--max-det', type=int, default=1000, help='maximum detections per image')
parser.add_argument('--device', default='', help='cuda device, i.e. 0 or 0,1,2,3 or cpu')
parser.add_argument('--project', default= 'runs/detect', help='save results to project/name')
parser.add_argument('--name', default='exp', help='save results to project/name')
parser.add_argument('--exist-ok', action='store_true', help='existing project/name ok, do not increment')
parser.add_argument('--vid-stride', type=int, default=1, help='video frame-rate stride')
opt = parser.parse_args()
opt.imgsz *= 2 if len(opt.imgsz) == 1 else 1 # expand
#print_args(vars(opt))
args = parser.parse_args(args=[])
print(args)
return opt
到這里，后端實現(xiàn)就基本寫完了。接下來，看看前端頁面 很簡單，我都不好意思寫??
前端實現(xiàn)
主要就兩個頁面，分別是主頁面index1.html和showimage.html。
主界面(index.html）+顯示圖片界面
index1.html就是主界面，顯示的一些操作按鈕。代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<title>目標檢測系統(tǒng)</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<!-- <link rel="stylesheet" href="D:\WEB\static\style.css"> -->
</head>
<body>
<h2 id="title">目標檢測系統(tǒng)</h2>
<br />
<br />
<img id="imageDisplay" width="500" height="500" />
<img id="result_show" src="data:;base64,{{ img_stream }}">
<br />
<form method="POST" enctype="multipart/form-data">
<br />
<input type="file" id="imageFile" onchange="displayImage()"
<input type="file" name="file">
<br />
<input id=button_detect type="submit" value="開始檢測">
</form>
<br />
<div id="imagePath"></div>
<script>
function displayImage() {
var fileInput = document.getElementById("imageFile");
var imagePath = document.getElementById("imagePath");
var imageDisplay = document.getElementById("imageDisplay");
var file = fileInput.files[0];
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function (e) {
//imagePath.innerHTML = "Image Path: " + fileInput.value;
imageDisplay.src = e.target.result;
};
}
function Show() {
var img = document.getElementById('img');
img.src = '/sh';
}
</script>
<!-- <button id="my-button" οnclick="Detect()">檢測</button> -->
<a href="http://127.0.0.1:5000/sh">
<button id="button_show" onclick="Show()">顯示圖片</button>
</a>
</body>
<style>
#title{
text-align: center;
color: black;
font-size: xx-large;
background-color: cadetblue;
}
#imageDisplay{
margin-left: 350px;
position: relative;
}
#button_detect{
width: 100px;
height: 40px;
background-color: skyblue;
font-size: larger;
margin-left: 900px;
margin-top: auto;
}
#button_show{
width: 100px;
height: 40px;
background-color: skyblue;
font-size: larger;
margin-left:900px;
margin-top: auto;
}
#imageFile{
width: 300px;
height: 40px;
background-color:white;
font-size: larger;
margin-left:900px;
margin-top: auto;
}
#result_show{
height: 500px;
width: 500px;
margin-left: 200px;
}
</style>
</html>
總結
寫的比較潦草，代碼的功能不難理解，相對比較基礎。有什么問題可以在評論直接問。然后就是代碼基本上都放上來了，可以直接復制然后用。文章來源：http://www.zghlxwxcb.cn/news/detail-428923.html
5.22 更新了一下代碼文章來源地址http://www.zghlxwxcb.cn/news/detail-428923.html
- 更加簡潔了，沒有那么多繁瑣的步驟
- 加了一點點樣式，增加了一些代碼注釋（不少人私信問我一些代碼問題，之前忘記寫了，不好意思）
- 然后大家可以根據(jù)自己的需要進行改進
·······························
如果覺得有用，就點點贊哈哈??
我看代碼需要的同學比較多，我直接把代碼上傳到github了，就不一個個私發(fā)你們了。
大家?guī)臀尹c點贊或關注哈哈哈??，然后自己下載吧??
源碼鏈接：https://github.com/Jss666/yolo_web
到了這里，關于YOLOv5部署到web端（flask+js簡單易懂）的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！
