Problem with Detection in real time using - Yolov5 & Django & React

Question

I am trying to get the percent of detection that showing in the video (when having a detection) that I am Streaming, to the client and display it on a table for every moment and in the same second that detection happening, but for now I get only a little part of the data and it’s happening after a few seconds

I using Django to stream a video with, detection using yolov5 , and I display the video in the client using react. my problem is that I create a function that give me the percent of the detection for my custom object when it's show in the video. I want to use this data and display beside the video.

i need that every time and in the same moment ,that have a detect I’ll get this data and display It.but now it’s not work for me, it’s only send the data and display it for one/two times , and after few seconds . I’m sure that I have some problem with detection() function and maybe with the detection_percentage()

but unfortunately I am not found a way to solve it

views.py

def stream():
    cap = cv2.VideoCapture(source)
    model.iou=0.5
    model.conf=0.15
    while (cap.isOpened()):
        ret, frame = cap.read()
        if not ret:
            print("Error: failed to capture image")
            break
        results = model(frame,augment=False,size=640)

        for i in results.render():
            data=im.fromarray(i)
            data.save('demo.jpg')

        det = results.pred[0]


        annotator = Annotator(frame, line_width=2, pil=not ascii)

        im0 = annotator.result()
        image_bytes = cv2.imencode('.jpg', im0)[1].tobytes()
        yield (b'--frame\r\n'
               b'Content-Type: image/jpeg\r\n\r\n' + image_bytes + b'\r\n')
    cap.release()
    cv2.destroyAllWindows()

def detection():
    model.iou=0.5
    model.conf=0.15
    cap = cv2.VideoCapture(source)
    while (True):
        ret, frame = cap.read()
        if not ret:
            print("Error: failed to capture image")
            break
        results = model(frame, augment=False,size=640)
        det = results.pred[0]

        if det is not None and len(det):
            xywhs = xyxy2xywh(det[:, 0:4])
            confs = det[:, 4]
            clss = det[:, 5]
            outputs = deepsort.update(xywhs.cpu(), confs.cpu(), clss.cpu(), frame)

            for j, (output, conf) in enumerate(zip(outputs, confs)):
                    label = f'{conf:.2f}'
                    print(label)
                    return label
    cap.release()
    cv2.destroyAllWindows()


if __name__ == '__main__':
    p1 = Process(target = stream)
    p2 = Process(target = detection)

    p1.start()
    p2.start()

    p1.join()
    p2.join()


def video_feed(request):
    return StreamingHttpResponse(stream(), content_type='multipart/x-mixed-replace; boundary=frame')

def detection_percentage(request):
    return HttpResponse(detection())

client side

const Streamvideo = () => {
  const urlStream = "http://127.0.0.1:8000/video_feed";
  const urlDetaction="http://127.0.0.1:8000/detection_percentage";

  const [data, setData] = useState("None");
  const [children, setChildren] = useState([]);


  const getPrecentOfDetection = async () => {
    try {
      const resp = await axios.get(urlDetaction);
      console.log(resp.data);
      setData(resp.data);
    } catch (err) {
      // Handle Error Here
      console.error(err);
    }
  };

  useEffect(() => {
    getPrecentOfDetection ();
  }, []);

  useEffect(() => {
    setChildren((prev) => [
      ...prev,
      <div>
        <h6>Detection:{data}</h6>
        <h6> Cureent Time:{showTime}</h6>
      </div>,
    ]);
  }, [data, showTime]);

  return (
    <div>
      <img className={css.img} src={urlStream} alt="" />
      <div>
        <div className={css.cat}>{children}</div>
      </div>
    </div>
  );
};

export default Streamvideo;