How to pass frames from inference pipeline to frontned?

[MubashirWaheed]

Here is the situation
I have implemented the inference pipeline and I want to show the stream on a webpage.
I am using a very basic flask server for now

// imports here 
from waitress import serve
from sink import CustomSink

custom_sink = CustomSink(// initialization here)

app = Flask(__name__)
CORS(app)


def generate_frames():
    # Convert frame to the required format and run inference
    # video_frame = VideoFrame(image=frame)
    pipeline = InferencePipeline.init_with_custom_logic(
        video_reference=<rtsp url here>,
        on_video_frame = custom_sink.infer,
        on_prediction = custom_sink.on_prediction
    )
    try:
        pipeline.start()
        pipeline.join()
    except (KeyboardInterrupt, SystemExit):
        pipeline.terminate()
        print("Program terminated.")


@app.route("/inference")
def inference_cam():
    return Response(generate_frames(), mimetype='multipart/x-mixed-replace; boundary=frame')


# integrate the camera feed so that anyone can see the feed throught the API
if __name__ == "__main__":
    print("starting the server....")
    serve(app, host="0.0.0.0", port=5555)
    print("started")

right now my on prediction looks like this

    
    def on_prediction(self, result: dict, frame: VideoFrame) -> None:
        self.fps_monitor.tick()
        fps = self.fps_monitor.fps
        detections = sv.Detections.from_ultralytics(result)
        detections = detections[find_in_list(detections.class_id, self.classes)]
        detections = self.tracker.update_with_detections(detections)

        annotated_frame = frame.image.copy()
        
        annotated_frame = sv.draw_text(
            scene=annotated_frame,
            text=f"{fps:.1f}",
            text_anchor=sv.Point(40, 30),
            background_color=sv.Color.from_hex("#A351FB"),
            text_color=sv.Color.from_hex("#000000"),
        )

        annotated_frame = self.process_zones(annotated_frame, detections)
        self.handle_window_display(annotated_frame)

    def handle_window_display(self, annotated_frame):
        window_info = cv2.getWindowImageRect('Resizable Window')
        width, height = window_info[2], window_info[3]

        if width <= 0 or height <= 0:
            print("Window is minimized or not properly visible, skipping frame.")
            return

        try:
            resized_frame = cv2.resize(annotated_frame, (width, height))
        except cv2.error as e:
            print(f"Error resizing frame: {e}")
            return

        cv2.imshow('Resizable Window', resized_frame)
        if cv2.waitKey(1) & 0xFF == ord('q'):
            cv2.destroyAllWindows()
            raise SystemExit("Program terminated by user")
                    

i want basically send the frames form the on prediction the the frontend How can this be done?
I plan on showing the frames inside a video player on a web page

[MubashirWaheed]

I have the network discovery on for my system and I will be able to see the stream by going the ip address eg 192.168.0.63:5555/inference

[MubashirWaheed]

Still stuck on this one