<div class="container">
        <div class="card">
            <h2><i class="fas fa-upload"></i> Upload Video</h2>
            
            <form id="uploadForm" action="/upload" method="post" enctype="multipart/form-data">
                <div id="uploadArea" class="upload-area">
                    <i class="fas fa-cloud-upload-alt"></i>
                    <p>Drag and drop your video file here or</p>
                    <input type="file" name="file" id="fileInput" class="file-input" accept="video/*" required>
                    <button type="button" id="browseButton" class="custom-button">
                        <i class="fas fa-folder-open"></i> Browse Files
                    </button>
                    <div id="selectedFile" class="selected-file">
                        Selected: <span id="fileName" class="file-name"></span>
                        <button type="button" id="clearFile" style="background: none; border: none; color: #dc3545; cursor: pointer; margin-left: 10px;">
                            <i class="fas fa-times"></i>
                        </button>
                    </div>
                </div>
                
                <button type="submit" id="processButton" class="custom-button" style="background-color: var(--secondary);">
                    <i class="fas fa-cogs"></i> Process Video
                </button>
            </form>
        </div>
        

this is my code where i will put the video and it will show the prediction the same way it shows using flask 


\from flask import Flask, render_template, Response, request
import cv2
import torch
from ultralytics import YOLO
from Utils import LIVE, MODEL, CLASSES, annotate, recorder
from Src import recognize_color, chooseOne, recognize_violation

app = Flask(__name__)

model = YOLO(MODEL)

def generate_frames(video_path):
    cap = cv2.VideoCapture(video_path)

    line_height = {'n': 0, 'x': 0, 'sum': 0, 'mean': 0}
    veh_set = torch.empty(0)

    while cap.isOpened():
        success, frame = cap.read()
        if not success:
            break

        if frame.shape[0] > 720:
            scale_factor = 720 / frame.shape[0]
            frame = cv2.resize(frame, None, fx=scale_factor, fy=scale_factor)

        result = model.track(frame, persist=True, classes=[n for n in CLASSES])[0]
        if result is not None and hasattr(result, 'boxes'):
            result = result.boxes.data
        else:
            result = torch.empty((0,))

        traffic_lights = result[result[:, -1] == 9] if len(result) > 0 else torch.empty((0,))
        vehicles = result[result[:, -1] != 9] if len(result) > 0 else torch.empty((0,))

        light_colors = recognize_color(frame, traffic_lights, print_info=False)
        chosen = chooseOne(light_colors)

        annotate(frame, traffic_lights, recognizedColor=light_colors)

        raw, pos, veh_set, violator = recognize_violation(
            frame, vehicles, traffic_lights[chosen[0]][:4] if len(traffic_lights) > 0 else [],
            line_height, veh_set, imaginary_line=True
        )

        if torch.any(violator):
            annotate(frame, violator, violationMode=True)

        _, buffer = cv2.imencode('.jpg', frame)
        frame_bytes = buffer.tobytes()
        yield (b'--frame\r\n'
               b'Content-Type: image/jpeg\r\n\r\n' + frame_bytes + b'\r\n')

    cap.release()

@app.route('/')
def index():
    return render_template('index.html')

@app.route('/upload', methods=['POST'])
def upload():
    if 'file' not in request.files:
        return "No file uploaded", 400

    file = request.files['file']
    if file.filename == '':
        return "No selected file", 400

    file_path = "static/uploaded_video.mp4"
    file.save(file_path)

    return Response(generate_frames(file_path), mimetype='multipart/x-mixed-replace; boundary=frame')

if __name__ == '__main__':
    app.run(debug=True)