溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
今天小編給大家分享一下YOLOv5部署到web端的方法是什么的相關知識點，內容詳細，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。
首先，寫了三個路由函數，分別是主界面、檢測函數、檢測結果顯示。如下所示
# 定義路由
@app.route('/', methods=['GET', 'POST'])
def upload():
if request.method == 'POST':
# 從表單中獲取上傳的文件
f = request.files['file']
global filename
filename = f.filename
global file_path
# 將文件保存到服務器本地
file_path = os.path.join(os.getcwd(), filename)
print(file_path)
f.save(file_path)
# 返回文件路徑
# return file_path
return render_template('index1.html')#檢測函數
@app.route('/det', methods=['GET','POST'])
def my_flask_function():
#print('測試一下！')
opt = parse_opt()
main(opt)
# return jsonify({'message': 'Hello from Flask!'})
return render_template('123.html')@app.route('/sh', methods=['GET', 'POST'])
def hello_world():
img_path = 'runs\\detect\\exp\\' + str(filename)
img_stream = return_img_stream(img_path)
return render_template('showimage.html', img_stream=img_stream)
#獲取圖片并展現到前端頁面
def return_img_stream(img_local_path):
"""
工具函數:
獲取本地圖片流
: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最后，我把detect文件中的函數，parse_out函數直接放到app.py文件中了，因為這樣傳遞圖片路徑比較方便。其中的main函數直接是調用的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到這里，后端實現就基本寫完了。接下來，看看前端頁面 很簡單，我都不好意思寫????
主要就兩個頁面，分別是主頁面index1.html和showimage.html。
index1.html就是主界面，顯示的一些操作按鈕。代碼如下：
<!DOCTYPE html> <html lang="en"> <head> <title>簡單實現</title> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script> </head> <body> <h3>選擇圖片上傳檢測</h3> <br /> <br /> <img id="imageDisplay" width="500" height="500" /> <br /> <form method="POST" enctype="multipart/form-data"> <input type="file" name="file"> <input 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 Detect() { $.ajax({ type: 'POST', url: '/det', success: function(response) { console.log(response); }, error: function(error) { console.log(error); } }); } function Show() { var img = document.getElementById('img'); img.src = '/sh'; } </script> <button id="my-button" onclick="Detect()">檢測</button> <a href="http://127.0.0.1:5000/sh"> <button id="my-button1" onclick="Show()">顯示圖片</button> </a> </body> </html>
然后就是 showiamge.html，該頁面是在點擊顯示圖片按鈕之后，進行跳轉，然后顯示檢測結果的圖片。代碼如下所示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>檢測結果顯示</title>
</head>
<body>
<img src="data:;base64,{{ img_stream }}">
</body>
</html>以上就是“YOLOv5部署到web端的方法是什么”這篇文章的所有內容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學習更多的知識，請關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
