リアルタイム物体検出Webアプリの映像に大きな遅れがある

前提

スマホでも動くリアルタイムの物体検出WebアプリをFlaskで作成しています。
一応動作はしましたが、リアルタイムのカメラ映像と比較して、物体検出後の映像は2~5秒以上の遅れがあります。
秒間2回の画像表示でも処理が間に合っておらず、時間が経てば経つほど遅れが大きくなります。
秒間1回なら2~5秒以上の遅れはありますが、時間が経てば経つほどという感じはありませんでした。
PythonAnywhereというサイトでサーバーを動かしています。

実現したいこと

運転中に道路標識等を検出するようなWebアプリのため、可能な限り遅れを減らしたいです。
何か些細なことでもアドバイス等ありましたら、ご教授いただければ幸いです。

該当のソースコード

index.html
1<!DOCTYPE html>
2<html>
3<head>
4<meta charset="utf-8">
5</head>
6<body>
7<video id="video" autoplay playsinline width=480 height=640></video>
8<canvas id="canvas"></canvas>
9<br>
10<img id="img" width=480 height=640>
11<script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
12<script>
13
14async function main() {
15    const screen = document.createElement("canvas");
16    screen.width = 480;
17    screen.height = 640;
18    const ctx = screen.getContext("2d");
19    const video = document.querySelector("video");
20    const stream = await navigator.mediaDevices.getUserMedia({
21        video: {
22            facingMode: { exact: "environment" }
23        }
24    });
25
26    var img = document.getElementById("img");
27    var base64;
28
29    video.srcObject = stream;
30    video.onloadedmetadata = () => {
31        tick();
32    };
33
34    var fps = 1;
35    function tick() {
36        ctx.drawImage(video, 0, 0);
37        base64 = screen.toDataURL("image/jpeg");
38        ajax_send();
39        setTimeout(tick,1000/fps);
40    }
41
42    function ajax_send(){
43        $.ajax({
44            url: "/default",
45            type: "POST",
46            data: base64
47        }).done(function(data){
48            img.src = data;
49        }).fail(function(){
50            alert("failed");
51        });
52    }
53
54}
55
56main();
57
58</script>
59</body>
60</html>

flask_app.py
1from flask import Flask, render_template, request
2import base64
3import numpy as np
4import cv2
5import detect
6
7app = Flask(__name__)
8
9@app.route('/')
10def index():
11    return render_template('index.html')
12
13@app.route("/default", methods=["POST"])
14def default():
15    img_path = "(物体検出前の画像path).jpg"
16    res_path = "(物体検出後の画像path).jpg"
17
18    if request.method == "POST":
19        data = request.get_data()
20        data = data.decode("utf-8")  #「b'data:image~~」を「data:image~~」にする
21        data = data[23:]             #「data:image/jpeg;base64,/9j/4AAQ~~」を「/9j/4AAQ~~」にする
22        bin = base64.b64decode(data)
23        jpg = np.frombuffer(bin, dtype=np.uint8)
24        img = cv2.imdecode(jpg, cv2.IMREAD_UNCHANGED)
25        cv2.imwrite(img_path, img)
26        detect.main()  #YOLOv5の処理(img_pathの画像を物体検出してres_pathに保存)
27        with open(res_path, "rb") as f:
28            encode = base64.b64encode(f.read())
29            encode = encode.decode("utf-8")
30            encode = "data:image/jpeg;base64," + str(encode)
31            return encode
32
33if __name__ == '__main__':
34    app.run()

GitHubにあるYOLOv5のコードを持ってきて、このWebアプリで動くように少しだけ変更しました。
26行目のdetectはYOLOv5のdetect.pyです。

試したこと

上記Pythonコード内で現在時刻のprint処理を挟んでPythonAnywhereのコンソールを見たところ、やはりYOLOv5の処理に時間がかかっていました。
YOLOv5のソースコードでは、物体検出するために画像をファイルから読み込み、検出後もファイルに保存するような処理をしているため、それに合わせてファイルへの入出力処理を書いていますが、それを省略してPython24行目辺りのデータから物体検出に繋げられたら処理時間を少し短縮できるかなとは思っています(実力不足でまだできていません)。