Send detecction to client in Real Time and diaply for client not work for me. using Django,React,Yolov5

Question

i'am trying to get the precent of detection in real time,for every moment that is happen and then send it to client and display it,but it's not work for me. using django,react and yolov5 for detection.

i'am using this fuction to get the detection in real,while i send only result i actully get this data and i see it, in the cliet ,but when i'am trying to get the precent of detection(0-1) it's not send the data for client . My goal is a function that send the data for client for every moment that have a detection and then i'll disply it for my client.

views.py

`

def stream():
    cap = cv2.VideoCapture(source)
    model.iou=0.5
    model.conf=0.15
    while (True):
        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')
        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(): 

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 using react

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([]);

  //Datetime
  const date = new Date();
  const showTime =
    date.getHours() + ":" + date.getMinutes() + ":" + date.getSeconds();

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

  useEffect(() => {
     sendGetRequest();
  }, [data]);

  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>
  );
};
```
`