diff --git a/.gitattributes b/.gitattributes
index a6344aac8c09253b3b630fb776ae94478aa0275b..963b392215d89755147b223b21e70767a34fa015 100644
--- a/.gitattributes
+++ b/.gitattributes
@@ -33,3 +33,17 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
+web_demo/static/videos/Abuse.mp4 filter=lfs diff=lfs merge=lfs -text
+web_demo/static/videos/Arrest.mp4 filter=lfs diff=lfs merge=lfs -text
+web_demo/static/videos/Arson.mp4 filter=lfs diff=lfs merge=lfs -text
+web_demo/static/videos/Assault.mp4 filter=lfs diff=lfs merge=lfs -text
+web_demo/static/videos/Burglary.mp4 filter=lfs diff=lfs merge=lfs -text
+web_demo/static/videos/Explosion.mp4 filter=lfs diff=lfs merge=lfs -text
+web_demo/static/videos/Fighting.mp4 filter=lfs diff=lfs merge=lfs -text
+web_demo/static/videos/Normal.mp4 filter=lfs diff=lfs merge=lfs -text
+web_demo/static/videos/RoadAccidents.mp4 filter=lfs diff=lfs merge=lfs -text
+web_demo/static/videos/Robbery.mp4 filter=lfs diff=lfs merge=lfs -text
+web_demo/static/videos/Shooting.mp4 filter=lfs diff=lfs merge=lfs -text
+web_demo/static/videos/Shoplifting.mp4 filter=lfs diff=lfs merge=lfs -text
+web_demo/static/videos/Stealing.mp4 filter=lfs diff=lfs merge=lfs -text
+web_demo/static/videos/Vandalism.mp4 filter=lfs diff=lfs merge=lfs -text
diff --git a/web_demo/__pycache__/yolo_detection.cpython-311.pyc b/web_demo/__pycache__/yolo_detection.cpython-311.pyc
new file mode 100644
index 0000000000000000000000000000000000000000..2991a996555fe0d38a0c47f094068cc0b2b06845
Binary files /dev/null and b/web_demo/__pycache__/yolo_detection.cpython-311.pyc differ
diff --git a/web_demo/app.py b/web_demo/app.py
new file mode 100644
index 0000000000000000000000000000000000000000..e8e3a4a1b578cbf98b6d9bc92ca1387d83dba89c
--- /dev/null
+++ b/web_demo/app.py
@@ -0,0 +1,207 @@
+import os
+import cv2
+import torch
+import numpy as np
+import time
+from datetime import datetime
+import threading
+import base64
+from werkzeug.utils import secure_filename
+
+from flask import Flask, render_template, Response, request, jsonify
+from flask_socketio import SocketIO
+
+# Important: Make sure your custom utility scripts are accessible
+from utils.load_model import load_models
+from utils.utils import build_transforms
+from network.TorchUtils import get_torch_device
+from yolo_detection import analyze_video_with_yolo
+
+# ---- App Setup ----
+app = Flask(__name__)
+app.config['SECRET_KEY'] = 'your_secret_key!'
+
+# ADDED: Configuration for uploaded files
+UPLOAD_FOLDER = 'uploads'
+os.makedirs(UPLOAD_FOLDER, exist_ok=True)
+app.config['UPLOAD_FOLDER'] = UPLOAD_FOLDER
+
+socketio = SocketIO(app, async_mode='eventlet')
+
+# ---- Global Config & Model Loading ----
+print("[INFO] Loading models...")
+DEVICE = get_torch_device()
+FEATURE_EXTRACTOR_PATH = r"S:\\ano_dec_pro\\AnomalyDetectionCVPR2018-Pytorch\\pretrained\\c3d.pickle"
+AD_MODEL_PATH = r"S:\\ano_dec_pro\\AnomalyDetectionCVPR2018-Pytorch\\exps\\c3d\\models\\epoch_80000.pt"
+YOLO_MODEL_PATH = r"S:\\ano_dec_pro\\AnomalyDetectionCVPR2018-Pytorch\\yolo_my_model.pt"
+SAVE_DIR = "outputs/anomaly_frames"
+os.makedirs(SAVE_DIR, exist_ok=True)
+
+anomaly_detector, feature_extractor = load_models(
+    FEATURE_EXTRACTOR_PATH, AD_MODEL_PATH, features_method="c3d", device=DEVICE
+)
+feature_extractor.eval()
+anomaly_detector.eval()
+TRANSFORMS = build_transforms(mode="c3d")
+ANOMALY_THRESHOLD = 0.4
+print("[INFO] Models loaded successfully.")
+
+VIDEO_PATHS = {
+    "Abuse": r"S:\\ano_dec_pro\AnomalyDetectionCVPR2018-Pytorch\web_demo\static\\videos\\Abuse.mp4",
+    "Arrest": r"S:\\ano_dec_pro\AnomalyDetectionCVPR2018-Pytorch\web_demo\static\\videos\\Arrest.mp4",
+    "Arson": r"S:\\ano_dec_pro\AnomalyDetectionCVPR2018-Pytorch\web_demo\static\\videos\\Arson.mp4",
+    "Assault": r"S:\\ano_dec_pro\AnomalyDetectionCVPR2018-Pytorch\web_demo\static\\videos\\Assault.mp4",
+    "Burglary": r"S:\\ano_dec_pro\AnomalyDetectionCVPR2018-Pytorch\web_demo\static\\videos\\Burglary.mp4",
+    "Explosion": r"S:\\ano_dec_pro\AnomalyDetectionCVPR2018-Pytorch\web_demo\static\\videos\\Explosion.mp4",
+    "Fighting": r"S:\\ano_dec_pro\AnomalyDetectionCVPR2018-Pytorch\web_demo\static\\videos\\Fighting.mp4",
+    "RoadAccidents": r"S:\\ano_dec_pro\AnomalyDetectionCVPR2018-Pytorch\web_demo\static\\videos\\RoadAccidents.mp4",
+    "Robbery": r"S:\\ano_dec_pro\AnomalyDetectionCVPR2018-Pytorch\web_demo\static\\videos\\Robbery.mp4",
+    "Shooting": r"S:\\ano_dec_pro\AnomalyDetectionCVPR2018-Pytorch\web_demo\static\\videos\\Shooting.mp4",
+    "Shoplifting": r"S:\\ano_dec_pro\AnomalyDetectionCVPR2018-Pytorch\web_demo\static\\videos\\Shoplifting.mp4",
+    "Stealing": r"S:\\ano_dec_pro\AnomalyDetectionCVPR2018-Pytorch\web_demo\static\\videos\\Stealing.mp4",
+    "Vandalism": r"S:\\ano_dec_pro\AnomalyDetectionCVPR2018-Pytorch\web_demo\static\\videos\\Vandalism.mp4",
+    "Normal": r"S:\\ano_dec_pro\AnomalyDetectionCVPR2018-Pytorch\web_demo\static\\videos\\Normal.mp4"
+}
+
+# --- Threading control ---
+thread = None
+thread_lock = threading.Lock()
+stop_event = threading.Event()
+
+# (The `smooth_score` and `video_processing_task` functions remain unchanged from the previous version)
+def smooth_score(scores, new_score, window=5):
+    scores.append(new_score)
+    if len(scores) > window:
+        scores.pop(0)
+    return float(np.mean(scores))
+
+def video_processing_task(video_path):
+    global thread
+    try:
+        cap = cv2.VideoCapture(video_path)
+        if not cap.isOpened():
+            socketio.emit('processing_error', {'error': f'Could not open video file.'})
+            return
+        frame_buffer = []
+        last_save_time = 0
+        recent_scores = []
+        FRAME_SKIP = 4 
+        frame_count = 0
+        while cap.isOpened() and not stop_event.is_set():
+            socketio.sleep(0.001)
+            ret, frame = cap.read()
+            if not ret: break
+            frame_count += 1
+            if frame_count % (FRAME_SKIP + 1) != 0: continue
+            frame_buffer.append(frame.copy())
+            if len(frame_buffer) == 16:
+                frames_resized = [cv2.resize(f, (112, 112)) for f in frame_buffer]
+                clip_np = np.array(frames_resized, dtype=np.uint8)
+                clip_torch = torch.from_numpy(clip_np)
+                clip_torch = TRANSFORMS(clip_torch)
+                clip_torch = clip_torch.unsqueeze(0).to(DEVICE)
+                with torch.no_grad():
+                    features = feature_extractor(clip_torch).detach()
+                    score_tensor = anomaly_detector(features).detach()
+                    score = float(score_tensor.view(-1)[0].item())
+                score = smooth_score(recent_scores, score)
+                score = float(np.clip(score, 0, 1))
+                socketio.emit('update_graph', {'score': score})
+                if score > ANOMALY_THRESHOLD and (time.time() - last_save_time) >= 30:
+                    last_save_time = time.time()
+                    socketio.emit('update_status', {'status': 'Anomaly detected! Saving clip...'})
+                    timestamp = datetime.now().strftime("%Y%m%d_%H%M%S")
+                    clip_dir = os.path.join(SAVE_DIR, f"anomaly_{timestamp}")
+                    os.makedirs(clip_dir, exist_ok=True)
+                    first_frame_path = os.path.join(clip_dir, "anomaly_frame.jpg")
+                    cv2.imwrite(first_frame_path, frame_buffer[0])
+                    try:
+                        yolo_result = analyze_video_with_yolo(first_frame_path, model_path=YOLO_MODEL_PATH, return_class=True)
+                        socketio.emit('update_yolo_text', {'text': f"YOLO Class: {yolo_result}"})
+                        _, buffer = cv2.imencode('.jpg', frame_buffer[0])
+                        b64_str = base64.b64encode(buffer).decode('utf-8')
+                        socketio.emit('update_yolo_image', {'image_data': b64_str})
+                    except Exception as e:
+                        socketio.emit('update_yolo_text', {'text': f'YOLO Error: {e}'})
+                frame_buffer.clear()
+        cap.release()
+        if not stop_event.is_set():
+            socketio.emit('processing_finished', {'message': 'Video finished.'})
+    finally:
+        with thread_lock:
+            thread = None
+            stop_event.clear()
+
+@app.route('/')
+def index():
+    return render_template('index.html', anomaly_names=VIDEO_PATHS.keys())
+
+# ADDED: New route for handling video uploads
+@app.route('/upload', methods=['POST'])
+def upload_file():
+    if 'video' not in request.files:
+        return jsonify({'error': 'No video file found'}), 400
+    file = request.files['video']
+    if file.filename == '':
+        return jsonify({'error': 'No video file selected'}), 400
+    if file:
+        filename = secure_filename(file.filename)
+        # Add a timestamp to make filenames unique
+        unique_filename = f"{datetime.now().strftime('%Y%m%d%HM%S')}_{filename}"
+        save_path = os.path.join(app.config['UPLOAD_FOLDER'], unique_filename)
+        file.save(save_path)
+        return jsonify({'success': True, 'filename': unique_filename})
+    return jsonify({'error': 'File upload failed'}), 500
+
+# MODIFIED: This route now streams both demo and uploaded videos
+@app.route('/video_stream/<source>/<filename>')
+def video_stream(source, filename):
+    if source == 'demo':
+        path = VIDEO_PATHS.get(filename)
+    elif source == 'upload':
+        path = os.path.join(app.config['UPLOAD_FOLDER'], filename)
+    else:
+        return "Invalid source", 404
+
+    if not path or not os.path.exists(path):
+        return "Video not found", 404
+    
+    def generate():
+        with open(path, "rb") as f:
+            while chunk := f.read(1024 * 1024):
+                yield chunk
+                
+    return Response(generate(), mimetype="video/mp4")
+
+@socketio.on('start_processing')
+def handle_start_processing(data):
+    global thread
+    with thread_lock:
+        if thread is None:
+            stop_event.clear()
+            source = data.get('source')
+            filename = data.get('filename')
+            video_path = None
+
+            if source == 'demo':
+                video_path = VIDEO_PATHS.get(filename)
+            elif source == 'upload':
+                video_path = os.path.join(app.config['UPLOAD_FOLDER'], filename)
+
+            if video_path and os.path.exists(video_path):
+                print(f"[INFO] Starting processing for {filename} from {source}")
+                thread = socketio.start_background_task(target=video_processing_task, video_path=video_path)
+            else:
+                socketio.emit('processing_error', {'error': f'Video file not found!'})
+
+@socketio.on('reset_system')
+def handle_reset():
+    global thread
+    with thread_lock:
+        if thread is not None:
+            stop_event.set()
+    socketio.emit('system_reset_confirm')
+
+if __name__ == '__main__':
+    print("[INFO] Starting Flask server...")
+    socketio.run(app, debug=True)
\ No newline at end of file
diff --git a/web_demo/models/c3d.pickle b/web_demo/models/c3d.pickle
new file mode 100644
index 0000000000000000000000000000000000000000..c5e183e3297a0c3703dd520881d630d7fba2fea6
--- /dev/null
+++ b/web_demo/models/c3d.pickle
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:e082d1890be04df0600aebae68f8687f5f41ba7590d2556edaa9ca49513cadff
+size 319966434
diff --git a/web_demo/models/epoch_80000.pt b/web_demo/models/epoch_80000.pt
new file mode 100644
index 0000000000000000000000000000000000000000..a4f1487f8317e9c4c2e374293285ae768cc697fb
--- /dev/null
+++ b/web_demo/models/epoch_80000.pt
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:9cbffe0b8831ed2c5ac82be4b40f10699b1a27fba84226a40161c6a381832510
+size 8460133
diff --git a/web_demo/models/yolo_my_model.pt b/web_demo/models/yolo_my_model.pt
new file mode 100644
index 0000000000000000000000000000000000000000..5e690e40d8f7052c2665eb64b8176ecda3fb1aea
--- /dev/null
+++ b/web_demo/models/yolo_my_model.pt
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:ef4636cec13eb6e8f4f08aa10430acd25dabe394c0aadf97ad13e8f2c34074b6
+size 19187290
diff --git a/web_demo/network/MFNET.py b/web_demo/network/MFNET.py
new file mode 100644
index 0000000000000000000000000000000000000000..7990685cdadb043e77283b0259ec197c06c1b99b
--- /dev/null
+++ b/web_demo/network/MFNET.py
@@ -0,0 +1,278 @@
+"""Author: Yunpeng Chen."""
+
+import logging
+from collections import OrderedDict
+
+import torch
+from torch import nn
+
+
+class BN_AC_CONV3D(nn.Module):
+    def __init__(
+        self,
+        num_in,
+        num_filter,
+        kernel=(1, 1, 1),
+        pad=(0, 0, 0),
+        stride=(1, 1, 1),
+        g=1,
+        bias=False,
+    ):
+        super().__init__()
+        self.bn = nn.BatchNorm3d(num_in)
+        self.relu = nn.ReLU(inplace=True)
+        self.conv = nn.Conv3d(
+            num_in,
+            num_filter,
+            kernel_size=kernel,
+            padding=pad,
+            stride=stride,
+            groups=g,
+            bias=bias,
+        )
+
+    def forward(self, x):
+        h = self.relu(self.bn(x))
+        h = self.conv(h)
+        return h
+
+
+class MF_UNIT(nn.Module):
+    def __init__(
+        self,
+        num_in,
+        num_mid,
+        num_out,
+        g=1,
+        stride=(1, 1, 1),
+        first_block=False,
+        use_3d=True,
+    ):
+        super().__init__()
+        num_ix = int(num_mid / 4)
+        kt, pt = (3, 1) if use_3d else (1, 0)
+        # prepare input
+        self.conv_i1 = BN_AC_CONV3D(
+            num_in=num_in, num_filter=num_ix, kernel=(1, 1, 1), pad=(0, 0, 0)
+        )
+        self.conv_i2 = BN_AC_CONV3D(
+            num_in=num_ix, num_filter=num_in, kernel=(1, 1, 1), pad=(0, 0, 0)
+        )
+        # main part
+        self.conv_m1 = BN_AC_CONV3D(
+            num_in=num_in,
+            num_filter=num_mid,
+            kernel=(kt, 3, 3),
+            pad=(pt, 1, 1),
+            stride=stride,
+            g=g,
+        )
+        if first_block:
+            self.conv_m2 = BN_AC_CONV3D(
+                num_in=num_mid, num_filter=num_out, kernel=(1, 1, 1), pad=(0, 0, 0)
+            )
+        else:
+            self.conv_m2 = BN_AC_CONV3D(
+                num_in=num_mid, num_filter=num_out, kernel=(1, 3, 3), pad=(0, 1, 1), g=g
+            )
+        # adapter
+        if first_block:
+            self.conv_w1 = BN_AC_CONV3D(
+                num_in=num_in,
+                num_filter=num_out,
+                kernel=(1, 1, 1),
+                pad=(0, 0, 0),
+                stride=stride,
+            )
+
+    def forward(self, x):
+        h = self.conv_i1(x)
+        x_in = x + self.conv_i2(h)
+
+        h = self.conv_m1(x_in)
+        h = self.conv_m2(h)
+
+        if hasattr(self, "conv_w1"):
+            x = self.conv_w1(x)
+
+        return h + x
+
+
+class MFNET_3D(nn.Module):
+    """Original code: https://github.com/cypw/PyTorch-MFNet."""
+
+    def __init__(
+        self,
+        **_kwargs,
+    ):
+        super().__init__()
+
+        groups = 16
+        k_sec = {2: 3, 3: 4, 4: 6, 5: 3}
+
+        # conv1 - x224 (x16)
+        conv1_num_out = 16
+        self.conv1 = nn.Sequential(
+            OrderedDict(
+                [
+                    (
+                        "conv",
+                        nn.Conv3d(
+                            3,
+                            conv1_num_out,
+                            kernel_size=(3, 5, 5),
+                            padding=(1, 2, 2),
+                            stride=(1, 2, 2),
+                            bias=False,
+                        ),
+                    ),
+                    ("bn", nn.BatchNorm3d(conv1_num_out)),
+                    ("relu", nn.ReLU(inplace=True)),
+                ]
+            )
+        )
+        self.maxpool = nn.MaxPool3d(
+            kernel_size=(1, 3, 3), stride=(1, 2, 2), padding=(0, 1, 1)
+        )
+
+        # conv2 - x56 (x8)
+        num_mid = 96
+        conv2_num_out = 96
+        self.conv2 = nn.Sequential(
+            OrderedDict(
+                [
+                    (
+                        "B%02d" % i,
+                        MF_UNIT(
+                            num_in=conv1_num_out if i == 1 else conv2_num_out,
+                            num_mid=num_mid,
+                            num_out=conv2_num_out,
+                            stride=(2, 1, 1) if i == 1 else (1, 1, 1),
+                            g=groups,
+                            first_block=(i == 1),
+                        ),
+                    )
+                    for i in range(1, k_sec[2] + 1)
+                ]
+            )
+        )
+
+        # conv3 - x28 (x8)
+        num_mid *= 2
+        conv3_num_out = 2 * conv2_num_out
+        self.conv3 = nn.Sequential(
+            OrderedDict(
+                [
+                    (
+                        "B%02d" % i,
+                        MF_UNIT(
+                            num_in=conv2_num_out if i == 1 else conv3_num_out,
+                            num_mid=num_mid,
+                            num_out=conv3_num_out,
+                            stride=(1, 2, 2) if i == 1 else (1, 1, 1),
+                            g=groups,
+                            first_block=(i == 1),
+                        ),
+                    )
+                    for i in range(1, k_sec[3] + 1)
+                ]
+            )
+        )
+
+        # conv4 - x14 (x8)
+        num_mid *= 2
+        conv4_num_out = 2 * conv3_num_out
+        self.conv4 = nn.Sequential(
+            OrderedDict(
+                [
+                    (
+                        "B%02d" % i,
+                        MF_UNIT(
+                            num_in=conv3_num_out if i == 1 else conv4_num_out,
+                            num_mid=num_mid,
+                            num_out=conv4_num_out,
+                            stride=(1, 2, 2) if i == 1 else (1, 1, 1),
+                            g=groups,
+                            first_block=(i == 1),
+                        ),
+                    )
+                    for i in range(1, k_sec[4] + 1)
+                ]
+            )
+        )
+
+        # conv5 - x7 (x8)
+        num_mid *= 2
+        conv5_num_out = 2 * conv4_num_out
+        self.conv5 = nn.Sequential(
+            OrderedDict(
+                [
+                    (
+                        "B%02d" % i,
+                        MF_UNIT(
+                            num_in=conv4_num_out if i == 1 else conv5_num_out,
+                            num_mid=num_mid,
+                            num_out=conv5_num_out,
+                            stride=(1, 2, 2) if i == 1 else (1, 1, 1),
+                            g=groups,
+                            first_block=(i == 1),
+                        ),
+                    )
+                    for i in range(1, k_sec[5] + 1)
+                ]
+            )
+        )
+
+        # final
+        self.tail = nn.Sequential(
+            OrderedDict(
+                [("bn", nn.BatchNorm3d(conv5_num_out)), ("relu", nn.ReLU(inplace=True))]
+            )
+        )
+
+        self.globalpool = nn.Sequential(
+            OrderedDict(
+                [
+                    ("avg", nn.AvgPool3d(kernel_size=(1, 7, 7), stride=(1, 1, 1))),
+                    ("dropout", nn.Dropout(p=0.5)),  # only for fine-tuning
+                ]
+            )
+        )
+        # self.classifier = nn.Linear(conv5_num_out, num_classes)
+
+    def forward(self, x):
+        # assert x.shape[2] == 16
+
+        h = self.conv1(x)  # x224 -> x112
+        h = self.maxpool(h)  # x112 ->  x56
+
+        h = self.conv2(h)  # x56 ->  x56
+        h = self.conv3(h)  # x56 ->  x28
+        h = self.conv4(h)  # x28 ->  x14
+        h = self.conv5(h)  # x14 ->   x7
+
+        h = self.tail(h)
+        h = self.globalpool(h)
+
+        h = h.view(h.shape[0], -1)
+        # h = self.classifier(h)
+        # h = h.view(h.shape[0], -1)
+        return h
+
+    def load_state(self, state_dict):
+        # customized partialy load function
+        checkpoint = torch.load(state_dict, map_location=torch.device("cpu"))
+        state_dict = checkpoint["state_dict"]
+        net_state_keys = list(self.state_dict().keys())
+        for name, param in state_dict.items():
+            name = name.replace("module.", "")
+            if name in self.state_dict().keys():
+                dst_param_shape = self.state_dict()[name].shape
+                if param.shape == dst_param_shape:
+                    self.state_dict()[name].copy_(param.view(dst_param_shape))
+                    net_state_keys.remove(name)
+        # indicating missed keys
+        if net_state_keys:
+            logging.warning(f">> Failed to load: {net_state_keys}")
+
+        return self
diff --git a/web_demo/network/TorchUtils.py b/web_demo/network/TorchUtils.py
new file mode 100644
index 0000000000000000000000000000000000000000..fd5349052fdbcadf1cb0541e0a6a5d6ecd2ad977
--- /dev/null
+++ b/web_demo/network/TorchUtils.py
@@ -0,0 +1,284 @@
+"""Written by Eitan Kosman."""
+
+import logging
+import os
+import time
+from typing import List, Optional, Union
+
+import torch
+from torch import Tensor, nn
+from torch.optim import Optimizer
+from torch.utils.data import DataLoader
+
+from utils.callbacks import Callback
+from utils.types import Device
+import torch
+
+from network.anomaly_detector_model import AnomalyDetector
+
+# Use safe_globals context
+
+
+
+def get_torch_device() -> Device:
+    """
+    Retrieves the device to run torch models, with preferability to GPU (denoted as cuda by torch)
+    Returns: Device to run the models
+    """
+    return torch.device("cuda" if torch.cuda.is_available() else "cpu")
+
+
+def load_model(model_path: str) -> nn.Module:
+    """Loads a Pytorch model (CPU compatible, PyTorch >=2.6)."""
+    logging.info(f"Load the model from: {model_path}")
+    
+    from network.anomaly_detector_model import AnomalyDetector
+
+    # Wrap torch.load with safe_globals and weights_only=False
+    with torch.serialization.safe_globals([AnomalyDetector]):
+        model = torch.load(model_path, map_location="cpu", weights_only=False)
+
+    logging.info(model)
+    return model
+
+
+
+class TorchModel(nn.Module):
+    """Wrapper class for a torch model to make it comfortable to train and load
+    models."""
+
+    def __init__(self, model: nn.Module) -> None:
+        super().__init__()
+        self.device = get_torch_device()
+        self.iteration = 0
+        self.model = model
+        self.is_data_parallel = False
+        self.callbacks = []
+
+    def register_callback(self, callback_fn: Callback) -> None:
+        """
+        Register a callback to be called after each evaluation run
+        Args:
+            callback_fn: a callable that accepts 2 inputs (output, target)
+                            - output is the model's output
+                            - target is the values of the target variable
+        """
+        self.callbacks.append(callback_fn)
+
+    def data_parallel(self):
+        """Transfers the model to data parallel mode."""
+        self.is_data_parallel = True
+        if not isinstance(self.model, torch.nn.DataParallel):
+            self.model = torch.nn.DataParallel(self.model, device_ids=[0, 1])
+
+        return self
+
+    @classmethod
+    def load_model(cls, model_path: str):
+        """
+        Loads a pickled model
+        Args:
+            model_path: path to the pickled model
+
+        Returns: TorchModel class instance wrapping the provided model
+        """
+        return cls(load_model(model_path))
+
+    def notify_callbacks(self, notification, *args, **kwargs) -> None:
+        """Calls all callbacks registered with this class.
+
+        Args:
+            notification: The type of notification to be called.
+        """
+        for callback in self.callbacks:
+            try:
+                method = getattr(callback, notification)
+                method(*args, **kwargs)
+            except (AttributeError, TypeError) as e:
+                logging.error(
+                    f"callback {callback.__class__.__name__} doesn't fully implement the required interface {e}"  # pylint: disable=line-too-long
+                )
+
+    def fit(
+        self,
+        train_iter: DataLoader,
+        criterion: nn.Module,
+        optimizer: Optimizer,
+        eval_iter: Optional[DataLoader] = None,
+        epochs: int = 10,
+        network_model_path_base: Optional[str] = None,
+        save_every: Optional[int] = None,
+        evaluate_every: Optional[int] = None,
+    ) -> None:
+        """
+
+        Args:
+            train_iter: iterator for training
+            criterion: loss function
+            optimizer: optimizer for the algorithm
+            eval_iter: iterator for evaluation
+            epochs: amount of epochs
+            network_model_path_base: where to save the models
+            save_every: saving model checkpoints every specified amount of epochs
+            evaluate_every: perform evaluation every specified amount of epochs.
+                            If the evaluation is expensive, you probably want to
+                            choose a high value for this
+        """
+        criterion = criterion.to(self.device)
+        self.notify_callbacks("on_training_start", epochs)
+
+        for epoch in range(epochs):
+            train_loss = self.do_epoch(
+                criterion=criterion,
+                optimizer=optimizer,
+                data_iter=train_iter,
+                epoch=epoch,
+            )
+
+            if save_every and network_model_path_base and epoch % save_every == 0:
+                logging.info(f"Save the model after epoch {epoch}")
+                self.save(os.path.join(network_model_path_base, f"epoch_{epoch}.pt"))
+
+            val_loss = None
+            if eval_iter and evaluate_every and epoch % evaluate_every == 0:
+                logging.info(f"Evaluating after epoch {epoch}")
+                val_loss = self.evaluate(
+                    criterion=criterion,
+                    data_iter=eval_iter,
+                )
+
+            self.notify_callbacks("on_training_iteration_end", train_loss, val_loss)
+
+        self.notify_callbacks("on_training_end", self.model)
+        # Save the last model anyway...
+        if network_model_path_base:
+            self.save(os.path.join(network_model_path_base, f"epoch_{epoch + 1}.pt"))
+
+    def evaluate(self, criterion: nn.Module, data_iter: DataLoader) -> float:
+        """
+        Evaluates the model
+        Args:
+            criterion: Loss function for calculating the evaluation
+            data_iter: torch data iterator
+        """
+        self.eval()
+        self.notify_callbacks("on_evaluation_start", len(data_iter))
+        total_loss = 0
+
+        with torch.no_grad():
+            for iteration, (batch, targets) in enumerate(data_iter):
+                batch = self.data_to_device(batch, self.device)
+                targets = self.data_to_device(targets, self.device)
+
+                outputs = self.model(batch)
+                loss = criterion(outputs, targets)
+
+                self.notify_callbacks(
+                    "on_evaluation_step",
+                    iteration,
+                    outputs.detach().cpu(),
+                    targets.detach().cpu(),
+                    loss.item(),
+                )
+
+                total_loss += loss.item()
+
+        loss = total_loss / len(data_iter)
+        self.notify_callbacks("on_evaluation_end")
+        return loss
+
+    def do_epoch(
+        self,
+        criterion: nn.Module,
+        optimizer: Optimizer,
+        data_iter: DataLoader,
+        epoch: int,
+    ) -> float:
+        """Perform a whole epoch.
+
+        Args:
+            criterion (nn.Module): Loss function to be used.
+            optimizer (Optimizer): Optimizer to use for minimizing the loss function.
+            data_iter (DataLoader): Loader for data samples used for training the model.
+            epoch (int): The epoch number.
+
+        Returns:
+            float: Average training loss calculated during the epoch.
+        """
+        total_loss = 0
+        total_time = 0.0
+        self.train()
+        self.notify_callbacks("on_epoch_start", epoch, len(data_iter))
+        for iteration, (batch, targets) in enumerate(data_iter):
+            self.iteration += 1
+            start_time = time.time()
+            batch = self.data_to_device(batch, self.device)
+            targets = self.data_to_device(targets, self.device)
+
+            outputs = self.model(batch)
+
+            loss = criterion(outputs, targets)
+
+            # Backward and optimize
+            optimizer.zero_grad()
+            loss.backward()
+            optimizer.step()
+
+            total_loss += loss.item()
+
+            end_time = time.time()
+
+            total_time += end_time - start_time
+
+            self.notify_callbacks(
+                "on_epoch_step",
+                self.iteration,
+                iteration,
+                loss.item(),
+            )
+            self.iteration += 1
+
+        loss = total_loss / len(data_iter)
+
+        self.notify_callbacks("on_epoch_end", loss)
+        return loss
+
+    def data_to_device(
+        self, data: Union[Tensor, List[Tensor]], device: Device
+    ) -> Union[Tensor, List[Tensor]]:
+        """
+        Transfers a tensor data to a device
+        Args:
+            data: torch tensor
+            device: target device
+        """
+        if isinstance(data, list):
+            data = [d.to(device) for d in data]
+        elif isinstance(data, tuple):
+            data = tuple([d.to(device) for d in data])
+        else:
+            data = data.to(device)
+
+        return data
+
+    def save(self, model_path: str) -> None:
+        """Saves the model to the given path.
+
+        If currently using data parallel, the method
+        will save the original model and not the data parallel instance of it
+        Args:
+            model_path: target path to save the model to
+        """
+        if self.is_data_parallel:
+            torch.save(self.model.module, model_path)
+        else:
+            torch.save(self.model, model_path)
+
+    def get_model(self) -> nn.Module:
+        if self.is_data_parallel:
+            return self.model.module
+
+        return self.model
+
+    def forward(self, *args, **kwargs):
+        return self.model(*args, **kwargs)
diff --git a/web_demo/network/__init__.py b/web_demo/network/__init__.py
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/web_demo/network/__pycache__/MFNET.cpython-311.pyc b/web_demo/network/__pycache__/MFNET.cpython-311.pyc
new file mode 100644
index 0000000000000000000000000000000000000000..8be450842a4a35c11ba54e4f67bf2eea0f26167e
Binary files /dev/null and b/web_demo/network/__pycache__/MFNET.cpython-311.pyc differ
diff --git a/web_demo/network/__pycache__/TorchUtils.cpython-311.pyc b/web_demo/network/__pycache__/TorchUtils.cpython-311.pyc
new file mode 100644
index 0000000000000000000000000000000000000000..b30ba3c9c960ce7a99830ccf74d6c0c48c981455
Binary files /dev/null and b/web_demo/network/__pycache__/TorchUtils.cpython-311.pyc differ
diff --git a/web_demo/network/__pycache__/__init__.cpython-311.pyc b/web_demo/network/__pycache__/__init__.cpython-311.pyc
new file mode 100644
index 0000000000000000000000000000000000000000..889a0248b102d00ae12132b0b4654063d765ff1a
Binary files /dev/null and b/web_demo/network/__pycache__/__init__.cpython-311.pyc differ
diff --git a/web_demo/network/__pycache__/anomaly_detector_model.cpython-311.pyc b/web_demo/network/__pycache__/anomaly_detector_model.cpython-311.pyc
new file mode 100644
index 0000000000000000000000000000000000000000..a93afb7ca5369f313a0d41e0cf123f9bc1bc5cc1
Binary files /dev/null and b/web_demo/network/__pycache__/anomaly_detector_model.cpython-311.pyc differ
diff --git a/web_demo/network/__pycache__/c3d.cpython-311.pyc b/web_demo/network/__pycache__/c3d.cpython-311.pyc
new file mode 100644
index 0000000000000000000000000000000000000000..ccae07e64101bea292952f4903ec29b50fc23638
Binary files /dev/null and b/web_demo/network/__pycache__/c3d.cpython-311.pyc differ
diff --git a/web_demo/network/__pycache__/resnet.cpython-311.pyc b/web_demo/network/__pycache__/resnet.cpython-311.pyc
new file mode 100644
index 0000000000000000000000000000000000000000..47af8b5e1f9f0c41add4af1b8c651be759164e5b
Binary files /dev/null and b/web_demo/network/__pycache__/resnet.cpython-311.pyc differ
diff --git a/web_demo/network/anomaly_detector_model.py b/web_demo/network/anomaly_detector_model.py
new file mode 100644
index 0000000000000000000000000000000000000000..cd19ec8d99b2c29e1e9a24d16b0b49c0b72c9471
--- /dev/null
+++ b/web_demo/network/anomaly_detector_model.py
@@ -0,0 +1,142 @@
+"""This module contains an implementation of anomaly detector for videos."""
+
+from typing import Callable
+
+import torch
+from torch import Tensor, nn
+
+
+class AnomalyDetector(nn.Module):
+    """Anomaly detection model for videos."""
+
+    def __init__(self, input_dim=4096) -> None:
+        super().__init__()
+        self.fc1 = nn.Linear(input_dim, 512)
+        self.relu1 = nn.ReLU()
+        self.dropout1 = nn.Dropout(0.6)
+
+        self.fc2 = nn.Linear(512, 32)
+        self.dropout2 = nn.Dropout(0.6)
+
+        self.fc3 = nn.Linear(32, 1)
+        self.sig = nn.Sigmoid()
+
+        # In the original keras code they use "glorot_normal"
+        # As I understand, this is the same as xavier normal in Pytorch
+        nn.init.xavier_normal_(self.fc1.weight)
+        nn.init.xavier_normal_(self.fc2.weight)
+        nn.init.xavier_normal_(self.fc3.weight)
+
+    @property
+    def input_dim(self) -> int:
+        return self.fc1.weight.shape[1]
+
+    def forward(self, x: Tensor) -> Tensor:  # pylint: disable=arguments-differ
+        x = self.dropout1(self.relu1(self.fc1(x)))
+        x = self.dropout2(self.fc2(x))
+        x = self.sig(self.fc3(x))
+        return x
+
+
+def custom_objective(y_pred: Tensor, y_true: Tensor) -> Tensor:
+    """Calculate loss function with regularization for anomaly detection.
+
+    Args:
+        y_pred (Tensor): A tensor containing the predictions of the model.
+        y_true (Tensor): A tensor containing the ground truth.
+
+    Returns:
+        Tensor: A single dimension tensor containing the calculated loss.
+    """
+    # y_pred (batch_size, 32, 1)
+    # y_true (batch_size)
+    lambdas = 8e-5
+
+    normal_vids_indices = torch.where(y_true == 0)
+    anomal_vids_indices = torch.where(y_true == 1)
+
+    normal_segments_scores = y_pred[normal_vids_indices].squeeze(-1)  # (batch/2, 32, 1)
+    anomal_segments_scores = y_pred[anomal_vids_indices].squeeze(-1)  # (batch/2, 32, 1)
+
+    # get the max score for each video
+    normal_segments_scores_maxes = normal_segments_scores.max(dim=-1)[0]
+    anomal_segments_scores_maxes = anomal_segments_scores.max(dim=-1)[0]
+
+    hinge_loss = 1 - anomal_segments_scores_maxes + normal_segments_scores_maxes
+    hinge_loss = torch.max(hinge_loss, torch.zeros_like(hinge_loss))
+
+    # Smoothness of anomalous video
+    smoothed_scores = anomal_segments_scores[:, 1:] - anomal_segments_scores[:, :-1]
+    smoothed_scores_sum_squared = smoothed_scores.pow(2).sum(dim=-1)
+
+    # Sparsity of anomalous video
+    sparsity_loss = anomal_segments_scores.sum(dim=-1)
+
+    final_loss = (
+        hinge_loss + lambdas * smoothed_scores_sum_squared + lambdas * sparsity_loss
+    ).mean()
+    return final_loss
+
+
+class RegularizedLoss(torch.nn.Module):
+    """Regularizes a loss function."""
+
+    def __init__(
+        self,
+        model: AnomalyDetector,
+        original_objective: Callable,
+        lambdas: float = 0.001,
+    ) -> None:
+        super().__init__()
+        self.lambdas = lambdas
+        self.model = model
+        self.objective = original_objective
+
+    def forward(self, y_pred: Tensor, y_true: Tensor):  # pylint: disable=arguments-differ
+        # loss
+        # Our loss is defined with respect to l2 regularization, as used in the original keras code
+        fc1_params = torch.cat(tuple([x.view(-1) for x in self.model.fc1.parameters()]))
+        fc2_params = torch.cat(tuple([x.view(-1) for x in self.model.fc2.parameters()]))
+        fc3_params = torch.cat(tuple([x.view(-1) for x in self.model.fc3.parameters()]))
+
+        l1_regularization = self.lambdas * torch.norm(fc1_params, p=2)
+        l2_regularization = self.lambdas * torch.norm(fc2_params, p=2)
+        l3_regularization = self.lambdas * torch.norm(fc3_params, p=2)
+
+        return (
+            self.objective(y_pred, y_true)
+            + l1_regularization
+            + l2_regularization
+            + l3_regularization
+        )
+
+
+
+
+# ----------------------------------------------------------------------------------------------------------------------
+class AnomalyClassifier(nn.Module):
+    """
+    Multi-class anomaly classifier
+    Supports 13 categories: Normal + 12 anomaly classes
+    """
+
+    def __init__(self, input_dim=512, num_classes=13):
+        super(AnomalyClassifier, self).__init__()
+        self.fc1 = nn.Linear(input_dim, 256)
+        self.relu1 = nn.ReLU()
+        self.dropout1 = nn.Dropout(0.5)
+
+        self.fc2 = nn.Linear(256, 64)
+        self.relu2 = nn.ReLU()
+        self.dropout2 = nn.Dropout(0.5)
+
+        self.fc3 = nn.Linear(64, num_classes)  # ✅ 13 outputs
+
+    def forward(self, x: torch.Tensor) -> torch.Tensor:
+        """
+        x: (B, input_dim) feature vectors
+        returns: (B, num_classes) logits
+        """
+        x = self.dropout1(self.relu1(self.fc1(x)))
+        x = self.dropout2(self.relu2(self.fc2(x)))
+        return self.fc3(x)
diff --git a/web_demo/network/c3d.py b/web_demo/network/c3d.py
new file mode 100644
index 0000000000000000000000000000000000000000..2c76de6b1cc46800ac7dfc6d5e36b283af04d57e
--- /dev/null
+++ b/web_demo/network/c3d.py
@@ -0,0 +1,129 @@
+""" "This module contains an implementation of C3D model for video
+processing."""
+
+import itertools
+
+import torch
+from torch import Tensor, nn
+
+
+class C3D(nn.Module):
+    """The C3D network."""
+
+    def __init__(self, pretrained=None):
+        super().__init__()
+
+        self.pretrained = pretrained
+
+        self.conv1 = nn.Conv3d(3, 64, kernel_size=(3, 3, 3), padding=(1, 1, 1))
+        self.pool1 = nn.MaxPool3d(kernel_size=(1, 2, 2), stride=(1, 2, 2))
+
+        self.conv2 = nn.Conv3d(64, 128, kernel_size=(3, 3, 3), padding=(1, 1, 1))
+        self.pool2 = nn.MaxPool3d(kernel_size=(2, 2, 2), stride=(2, 2, 2))
+
+        self.conv3a = nn.Conv3d(128, 256, kernel_size=(3, 3, 3), padding=(1, 1, 1))
+        self.conv3b = nn.Conv3d(256, 256, kernel_size=(3, 3, 3), padding=(1, 1, 1))
+        self.pool3 = nn.MaxPool3d(kernel_size=(2, 2, 2), stride=(2, 2, 2))
+
+        self.conv4a = nn.Conv3d(256, 512, kernel_size=(3, 3, 3), padding=(1, 1, 1))
+        self.conv4b = nn.Conv3d(512, 512, kernel_size=(3, 3, 3), padding=(1, 1, 1))
+        self.pool4 = nn.MaxPool3d(kernel_size=(2, 2, 2), stride=(2, 2, 2))
+
+        self.conv5a = nn.Conv3d(512, 512, kernel_size=(3, 3, 3), padding=(1, 1, 1))
+        self.conv5b = nn.Conv3d(512, 512, kernel_size=(3, 3, 3), padding=(1, 1, 1))
+        self.pool5 = nn.MaxPool3d(
+            kernel_size=(2, 2, 2), stride=(2, 2, 2), padding=(0, 1, 1)
+        )
+
+        self.fc6 = nn.Linear(8192, 4096)
+        self.relu = nn.ReLU()
+        self.__init_weight()
+
+        if pretrained:
+            self.__load_pretrained_weights()
+
+    def forward(self, x: Tensor):
+        x = self.relu(self.conv1(x))
+        x = self.pool1(x)
+        x = self.relu(self.conv2(x))
+        x = self.pool2(x)
+        x = self.relu(self.conv3a(x))
+        x = self.relu(self.conv3b(x))
+        x = self.pool3(x)
+        x = self.relu(self.conv4a(x))
+        x = self.relu(self.conv4b(x))
+        x = self.pool4(x)
+        x = self.relu(self.conv5a(x))
+        x = self.relu(self.conv5b(x))
+        x = self.pool5(x)
+        # x = x.view(-1, 8192)
+        x = x.view(x.size(0), -1) # changed
+        x = self.relu(self.fc6(x))
+
+        return x
+
+    def __load_pretrained_weights(self):
+        """Initialiaze network."""
+        corresp_name = [
+            # Conv1
+            "conv1.weight",
+            "conv1.bias",
+            # Conv2
+            "conv2.weight",
+            "conv2.bias",
+            # Conv3a
+            "conv3a.weight",
+            "conv3a.bias",
+            # Conv3b
+            "conv3b.weight",
+            "conv3b.bias",
+            # Conv4a
+            "conv4a.weight",
+            "conv4a.bias",
+            # Conv4b
+            "conv4b.weight",
+            "conv4b.bias",
+            # Conv5a
+            "conv5a.weight",
+            "conv5a.bias",
+            # Conv5b
+            "conv5b.weight",
+            "conv5b.bias",
+            # fc6
+            "fc6.weight",
+            "fc6.bias",
+        ]
+
+        ignored_weights = [
+            f"{layer}.{type_}"
+            for layer, type_ in itertools.product(["fc7", "fc8"], ["bias", "weight"])
+        ]
+
+        p_dict = torch.load(self.pretrained)
+        s_dict = self.state_dict()
+        for name in p_dict:
+            if name not in corresp_name:
+                if name in ignored_weights:
+                    continue
+                print("no corresponding::", name)
+                continue
+            s_dict[name] = p_dict[name]
+        self.load_state_dict(s_dict)
+
+    def __init_weight(self):
+        """Initialize weights of the model."""
+        for m in self.modules():
+            if isinstance(m, nn.Conv3d):
+                torch.nn.init.kaiming_normal_(m.weight)
+            elif isinstance(m, nn.BatchNorm3d):
+                m.weight.data.fill_(1)
+                m.bias.data.zero_()
+
+
+if __name__ == "__main__":
+    inputs = torch.ones((1, 3, 16, 112, 112))
+    net = C3D(pretrained=False)
+
+    outputs = net.forward(inputs)
+    print(outputs.size())
+
diff --git a/web_demo/network/resnet.py b/web_demo/network/resnet.py
new file mode 100644
index 0000000000000000000000000000000000000000..64eb81f28a8f1f6dd3c9d43f8586d949e8d2d8ce
--- /dev/null
+++ b/web_demo/network/resnet.py
@@ -0,0 +1,232 @@
+""" "This module contains an implementation of ResNet model for video
+processing."""
+
+from functools import partial
+
+import torch
+import torch.nn.functional as F
+from torch import nn
+
+
+def get_inplanes():
+    return [64, 128, 256, 512]
+
+
+def conv3x3x3(in_planes, out_planes, stride=1):
+    return nn.Conv3d(
+        in_planes, out_planes, kernel_size=3, stride=stride, padding=1, bias=False
+    )
+
+
+def conv1x1x1(in_planes, out_planes, stride=1):
+    return nn.Conv3d(in_planes, out_planes, kernel_size=1, stride=stride, bias=False)
+
+
+class BasicBlock(nn.Module):
+    expansion = 1
+
+    def __init__(self, in_planes, planes, stride=1, downsample=None):
+        super().__init__()
+
+        self.conv1 = conv3x3x3(in_planes, planes, stride)
+        self.bn1 = nn.BatchNorm3d(planes)
+        self.relu = nn.ReLU(inplace=True)
+        self.conv2 = conv3x3x3(planes, planes)
+        self.bn2 = nn.BatchNorm3d(planes)
+        self.downsample = downsample
+        self.stride = stride
+
+    def forward(self, x):
+        residual = x
+
+        out = self.conv1(x)
+        out = self.bn1(out)
+        out = self.relu(out)
+
+        out = self.conv2(out)
+        out = self.bn2(out)
+
+        if self.downsample is not None:
+            residual = self.downsample(x)
+
+        out += residual
+        out = self.relu(out)
+
+        return out
+
+
+class Bottleneck(nn.Module):
+    expansion = 4
+
+    def __init__(self, in_planes, planes, stride=1, downsample=None):
+        super().__init__()
+
+        self.conv1 = conv1x1x1(in_planes, planes)
+        self.bn1 = nn.BatchNorm3d(planes)
+        self.conv2 = conv3x3x3(planes, planes, stride)
+        self.bn2 = nn.BatchNorm3d(planes)
+        self.conv3 = conv1x1x1(planes, planes * self.expansion)
+        self.bn3 = nn.BatchNorm3d(planes * self.expansion)
+        self.relu = nn.ReLU(inplace=True)
+        self.downsample = downsample
+        self.stride = stride
+
+    def forward(self, x):
+        residual = x
+
+        out = self.conv1(x)
+        out = self.bn1(out)
+        out = self.relu(out)
+
+        out = self.conv2(out)
+        out = self.bn2(out)
+        out = self.relu(out)
+
+        out = self.conv3(out)
+        out = self.bn3(out)
+
+        if self.downsample is not None:
+            residual = self.downsample(x)
+
+        out += residual
+        out = self.relu(out)
+
+        return out
+
+
+class ResNet(nn.Module):
+    def __init__(
+        self,
+        block,
+        layers,
+        block_inplanes,
+        n_input_channels=3,
+        conv1_t_size=7,
+        conv1_t_stride=1,
+        no_max_pool=False,
+        shortcut_type="B",
+        widen_factor=1.0,
+        n_classes=1039,
+    ):
+        super().__init__()
+
+        block_inplanes = [int(x * widen_factor) for x in block_inplanes]
+
+        self.in_planes = block_inplanes[0]
+        self.no_max_pool = no_max_pool
+
+        self.conv1 = nn.Conv3d(
+            n_input_channels,
+            self.in_planes,
+            kernel_size=(conv1_t_size, 7, 7),
+            stride=(conv1_t_stride, 2, 2),
+            padding=(conv1_t_size // 2, 3, 3),
+            bias=False,
+        )
+        self.bn1 = nn.BatchNorm3d(self.in_planes)
+        self.relu = nn.ReLU(inplace=True)
+        self.maxpool = nn.MaxPool3d(kernel_size=3, stride=2, padding=1)
+        self.layer1 = self._make_layer(
+            block, block_inplanes[0], layers[0], shortcut_type
+        )
+        self.layer2 = self._make_layer(
+            block, block_inplanes[1], layers[1], shortcut_type, stride=2
+        )
+        self.layer3 = self._make_layer(
+            block, block_inplanes[2], layers[2], shortcut_type, stride=2
+        )
+        self.layer4 = self._make_layer(
+            block, block_inplanes[3], layers[3], shortcut_type, stride=2
+        )
+
+        self.avgpool = nn.AdaptiveAvgPool3d((1, 1, 1))
+        # self.fc = nn.Linear(block_inplanes[3] * block.expansion, n_classes)
+
+        for m in self.modules():
+            if isinstance(m, nn.Conv3d):
+                nn.init.kaiming_normal_(m.weight, mode="fan_out", nonlinearity="relu")
+            elif isinstance(m, nn.BatchNorm3d):
+                nn.init.constant_(m.weight, 1)
+                nn.init.constant_(m.bias, 0)
+
+    def _downsample_basic_block(self, x, planes, stride):
+        out = F.avg_pool3d(x, kernel_size=1, stride=stride)
+        zero_pads = torch.zeros(
+            out.size(0), planes - out.size(1), out.size(2), out.size(3), out.size(4)
+        )
+        if isinstance(out.data, torch.cuda.FloatTensor):
+            zero_pads = zero_pads.cuda()
+
+        out = torch.cat([out.data, zero_pads], dim=1)
+
+        return out
+
+    def _make_layer(self, block, planes, blocks, shortcut_type, stride=1):
+        downsample = None
+        if stride != 1 or self.in_planes != planes * block.expansion:
+            if shortcut_type == "A":
+                downsample = partial(
+                    self._downsample_basic_block,
+                    planes=planes * block.expansion,
+                    stride=stride,
+                )
+            else:
+                downsample = nn.Sequential(
+                    conv1x1x1(self.in_planes, planes * block.expansion, stride),
+                    nn.BatchNorm3d(planes * block.expansion),
+                )
+
+        layers = []
+        layers.append(
+            block(
+                in_planes=self.in_planes,
+                planes=planes,
+                stride=stride,
+                downsample=downsample,
+            )
+        )
+        self.in_planes = planes * block.expansion
+        for _ in range(1, blocks):
+            layers.append(block(self.in_planes, planes))
+
+        return nn.Sequential(*layers)
+
+    def forward(self, x):
+        x = self.conv1(x)
+        x = self.bn1(x)
+        x = self.relu(x)
+        if not self.no_max_pool:
+            x = self.maxpool(x)
+
+        x = self.layer1(x)
+        x = self.layer2(x)
+        x = self.layer3(x)
+        x = self.layer4(x)
+
+        x = self.avgpool(x)
+
+        x = x.view(x.size(0), -1)
+        # x = self.fc(x)
+
+        return x
+
+
+def generate_model(model_depth, **kwargs):
+    assert model_depth in [10, 18, 34, 50, 101, 152, 200]
+
+    if model_depth == 10:
+        model = ResNet(BasicBlock, [1, 1, 1, 1], get_inplanes(), **kwargs)
+    elif model_depth == 18:
+        model = ResNet(BasicBlock, [2, 2, 2, 2], get_inplanes(), **kwargs)
+    elif model_depth == 34:
+        model = ResNet(BasicBlock, [3, 4, 6, 3], get_inplanes(), **kwargs)
+    elif model_depth == 50:
+        model = ResNet(Bottleneck, [3, 4, 6, 3], get_inplanes(), **kwargs)
+    elif model_depth == 101:
+        model = ResNet(Bottleneck, [3, 4, 23, 3], get_inplanes(), **kwargs)
+    elif model_depth == 152:
+        model = ResNet(Bottleneck, [3, 8, 36, 3], get_inplanes(), **kwargs)
+    elif model_depth == 200:
+        model = ResNet(Bottleneck, [3, 24, 36, 3], get_inplanes(), **kwargs)
+
+    return model
diff --git a/web_demo/requirements.txt b/web_demo/requirements.txt
new file mode 100644
index 0000000000000000000000000000000000000000..350b30f759e771bcd3b207bbf276bf2dc29cecf6
--- /dev/null
+++ b/web_demo/requirements.txt
@@ -0,0 +1,7 @@
+flask
+flask-socketio
+eventlet
+torch
+numpy
+opencv-python
+matplotlib
\ No newline at end of file
diff --git a/web_demo/static/css/style.css b/web_demo/static/css/style.css
new file mode 100644
index 0000000000000000000000000000000000000000..f8fce0f54efb87a93e0cd4abddb4e385940b3d6f
--- /dev/null
+++ b/web_demo/static/css/style.css
@@ -0,0 +1,112 @@
+body {
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+    background-color: #121212;
+    color: #e0e0e0;
+    margin: 0;
+    padding: 20px;
+    display: flex;
+    justify-content: center;
+}
+
+.container {
+    display: flex;
+    width: 100%;
+    max-width: 1600px;
+    gap: 20px;
+}
+
+/* CHANGED: Main content takes more space, sidebar takes less */
+.main-content {
+    flex: 4; /* Increased from 3 */
+    display: flex;
+    flex-direction: column;
+}
+
+.sidebar {
+    flex: 1; /* Stays at 1, making it proportionally smaller */
+    background-color: #1e1e1e;
+    padding: 20px;
+    border-radius: 8px;
+    height: fit-content;
+}
+
+.header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 10px;
+}
+
+h1 { border-bottom: none; padding-bottom: 0; }
+h2, h3 { color: #ffffff; border-bottom: 2px solid #333; padding-bottom: 10px; }
+
+/* CHANGED: Grid ratio adjusted to make the graph wider */
+.dashboard-grid {
+    display: grid;
+    grid-template-columns: 1.8fr 1.5fr; /* Video area vs Graph area */
+    gap: 20px;
+    align-items: flex-start;
+}
+
+.video-area {
+    display: flex;
+    flex-direction: column;
+}
+
+.video-wrapper {
+    width: 100%;
+    margin-bottom: 10px; /* Space between video and status label */
+}
+
+#videoPlayer {
+    background-color: #000;
+    border-radius: 8px;
+}
+
+/* CHANGED: Status label is now positioned under the video */
+#statusLabel {
+    margin-top: 0; /* Resets previous margin */
+    font-style: italic;
+    color: #f44336;
+    text-align: center; /* Center the text under the video */
+    min-height: 24px; /* Prevents layout shifts */
+}
+
+/* The chart and yolo containers are now styled independently */
+.chart-container {
+    background-color: #1e1e1e;
+    padding: 20px;
+    border-radius: 8px;
+}
+
+.yolo-container {
+    background-color: #1e1e1e;
+    padding: 20px;
+    border-radius: 8px;
+}
+
+#yoloTextLabel { font-size: 1.2em; font-weight: bold; color: #4CAF50; min-height: 25px; }
+#yoloImageFrame { width: 100%; height: auto; border-radius: 4px; background-color: #333; min-height: 150px; margin-top: 10px; }
+
+/* Styles for controls in the sidebar */
+.custom-select {
+    width: 100%;
+    padding: 12px 15px;
+    background-color: #3a3a3a;
+    color: #e0e0e0;
+    border: 1px solid #bb86fc;
+    border-radius: 4px;
+    font-size: 1em;
+    cursor: pointer;
+}
+.custom-select:hover { background-color: #4a4a4a; }
+
+.separator { border: none; border-top: 1px solid #333; margin: 20px 0; }
+.upload-section { display: flex; flex-direction: column; gap: 10px; }
+#videoUpload { color: #e0e0e0; }
+#videoUpload::file-selector-button { font-weight: bold; color: #bb86fc; background-color: #3a3a3a; padding: 8px 12px; border: 1px solid #bb86fc; border-radius: 4px; cursor: pointer; transition: background-color 0.2s; }
+#videoUpload::file-selector-button:hover { background-color: #4a4a4a; }
+#uploadButton { padding: 10px 20px; font-size: 16px; font-weight: bold; color: white; background-color: #03dac6; border: none; border-radius: 5px; cursor: pointer; transition: background-color 0.2s; }
+#uploadButton:hover { background-color: #018786; }
+#resetButton { padding: 10px 20px; font-size: 16px; font-weight: bold; color: white; background-color: #f44336; border: none; border-radius: 5px; cursor: pointer; transition: background-color 0.2s; }
+#resetButton:hover { background-color: #d32f2f; }
\ No newline at end of file
diff --git a/web_demo/static/js/main.js b/web_demo/static/js/main.js
new file mode 100644
index 0000000000000000000000000000000000000000..65586191113162131b3c6350946d42649e69cdc4
--- /dev/null
+++ b/web_demo/static/js/main.js
@@ -0,0 +1,108 @@
+document.addEventListener('DOMContentLoaded', () => {
+    const socket = io();
+
+    const videoPlayer = document.getElementById('videoPlayer');
+    const yoloTextLabel = document.getElementById('yoloTextLabel');
+    const yoloImageFrame = document.getElementById('yoloImageFrame');
+    const statusLabel = document.getElementById('statusLabel');
+    const resetButton = document.getElementById('resetButton');
+    const videoUploadInput = document.getElementById('videoUpload');
+    const uploadButton = document.getElementById('uploadButton');
+    
+    // CHANGED: Get the new dropdown selector
+    const anomalySelector = document.getElementById('anomalySelector');
+
+    let chart;
+
+    function initializeChart() {
+        const ctx = document.getElementById('anomalyChart').getContext('2d');
+        if (chart) { chart.destroy(); }
+        chart = new Chart(ctx, {
+            type: 'line', data: { labels: [], datasets: [{ label: 'Anomaly Score', data: [], borderColor: 'rgba(255, 99, 132, 1)', backgroundColor: 'rgba(255, 99, 132, 0.2)', borderWidth: 2, tension: 0.4, pointRadius: 0 }] }, options: { scales: { y: { beginAtZero: true, max: 1.0, ticks: { color: '#e0e0e0' }}, x: { ticks: { color: '#e0e0e0' }}}, plugins: { legend: { labels: { color: '#e0e0e0' }}}}
+        });
+    }
+
+    function resetUI() {
+        videoPlayer.pause();
+        videoPlayer.removeAttribute('src');
+        videoPlayer.load();
+        initializeChart();
+        yoloTextLabel.textContent = 'Waiting for anomaly...';
+        yoloImageFrame.src = '';
+        statusLabel.textContent = 'System reset. Select a video to begin.';
+        videoUploadInput.value = '';
+        anomalySelector.selectedIndex = 0; // Reset dropdown to the default option
+    }
+
+    // --- WebSocket Event Listeners (unchanged) ---
+    socket.on('connect', () => { statusLabel.textContent = 'Connected. Please select a video to start processing.'; });
+    socket.on('update_graph', (data) => {
+        const { score } = data;
+        if (!chart) return;
+        const newLabel = chart.data.labels.length + 1;
+        chart.data.labels.push(newLabel);
+        chart.data.datasets[0].data.push(score);
+        if (chart.data.labels.length > 100) { chart.data.labels.shift(); chart.data.datasets[0].data.shift(); }
+        chart.update();
+    });
+    socket.on('update_yolo_text', (data) => { yoloTextLabel.textContent = data.text; });
+    socket.on('update_yolo_image', (data) => { yoloImageFrame.src = `data:image/jpeg;base64,${data.image_data}`; });
+    socket.on('update_status', (data) => { statusLabel.textContent = data.status; });
+    socket.on('processing_error', (data) => { statusLabel.textContent = `Error: ${data.error}`; });
+    socket.on('processing_finished', (data) => { statusLabel.textContent = data.message; });
+    socket.on('system_reset_confirm', () => { resetUI(); });
+
+    // --- User Interaction ---
+
+    // CHANGED: Replaced the old event listener for links with one for the dropdown
+    anomalySelector.addEventListener('change', (event) => {
+        const anomalyName = event.target.value;
+        if (!anomalyName) return; // Do nothing if the default option is selected
+
+        resetUI();
+        statusLabel.textContent = `Requesting to process ${anomalyName}...`;
+        
+        videoPlayer.src = `/video_stream/demo/${anomalyName}`;
+        videoPlayer.play();
+        
+        socket.emit('start_processing', { 'source': 'demo', 'filename': anomalyName });
+    });
+
+    resetButton.addEventListener('click', () => { socket.emit('reset_system'); });
+
+    // Upload button logic (unchanged)
+    uploadButton.addEventListener('click', () => {
+        const file = videoUploadInput.files[0];
+        if (!file) {
+            alert('Please select a video file first!');
+            return;
+        }
+        
+        resetUI();
+        statusLabel.textContent = 'Uploading video...';
+        
+        const formData = new FormData();
+        formData.append('video', file);
+
+        fetch('/upload', { method: 'POST', body: formData })
+        .then(response => response.json())
+        .then(data => {
+            if (data.success) {
+                const uploadedFilename = data.filename;
+                statusLabel.textContent = `Upload successful. Starting analysis...`;
+                videoPlayer.src = `/video_stream/upload/${uploadedFilename}`;
+                videoPlayer.play();
+                socket.emit('start_processing', { 'source': 'upload', 'filename': uploadedFilename });
+            } else {
+                statusLabel.textContent = `Error: ${data.error}`;
+                alert(`Upload failed: ${data.error}`);
+            }
+        })
+        .catch(error => {
+            statusLabel.textContent = 'An error occurred during upload.';
+            console.error('Upload error:', error);
+        });
+    });
+
+    initializeChart();
+});
\ No newline at end of file
diff --git a/web_demo/static/script.js b/web_demo/static/script.js
new file mode 100644
index 0000000000000000000000000000000000000000..18209b4076a383cc4675b23f8d11ac258e6d374b
--- /dev/null
+++ b/web_demo/static/script.js
@@ -0,0 +1,41 @@
+const videoPlayer = document.getElementById("videoPlayer");
+const yoloResult = document.getElementById("yoloResult");
+
+// Dummy chart for anomaly graph
+const ctx = document.getElementById("anomalyGraph").getContext("2d");
+const graph = new Chart(ctx, {
+    type: "line",
+    data: {
+        labels: [],
+        datasets: [{
+            label: "Anomaly Score",
+            data: [],
+            borderColor: "red",
+            borderWidth: 2
+        }]
+    },
+    options: {
+        responsive: true,
+        scales: {
+            y: { min: 0, max: 1 }
+        }
+    }
+});
+
+async function playDemo(name) {
+    const response = await fetch("/get_video", {
+        method: "POST",
+        headers: {"Content-Type": "application/json"},
+        body: JSON.stringify({ name })
+    });
+
+    const data = await response.json();
+    if (data.error) {
+        alert(data.error);
+        return;
+    }
+
+    // Load video
+    videoPlayer.src = "file:///" + data.path;
+    yoloResult.innerText = `Playing demo: ${name}`;
+}
diff --git a/web_demo/static/videos/Abuse.mp4 b/web_demo/static/videos/Abuse.mp4
new file mode 100644
index 0000000000000000000000000000000000000000..0eeb538ccc01d0a8883479ef374756061439e548
--- /dev/null
+++ b/web_demo/static/videos/Abuse.mp4
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:425744aa3472e424d52d7ce97bf6d0bdd445ad62ad1be110095d2027a31550cc
+size 6250495
diff --git a/web_demo/static/videos/Arrest.mp4 b/web_demo/static/videos/Arrest.mp4
new file mode 100644
index 0000000000000000000000000000000000000000..c4571e284be173ba47cd4d2610e6a0c21867954b
--- /dev/null
+++ b/web_demo/static/videos/Arrest.mp4
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:faf0f08b1ee989545ad1de2edecdb56a24e65914194b8083f47d10481926c0e1
+size 11929804
diff --git a/web_demo/static/videos/Arson.mp4 b/web_demo/static/videos/Arson.mp4
new file mode 100644
index 0000000000000000000000000000000000000000..2a188e807bd9df2a0844318fa223fc59df8ae9e5
--- /dev/null
+++ b/web_demo/static/videos/Arson.mp4
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:902f3138fa8b839abd08bcd3e434e84756742fdf0c60bcc0769cd7106b1ac3a2
+size 12694369
diff --git a/web_demo/static/videos/Assault.mp4 b/web_demo/static/videos/Assault.mp4
new file mode 100644
index 0000000000000000000000000000000000000000..074baa365e727195f0f2ad84b7aef59f2cf726da
--- /dev/null
+++ b/web_demo/static/videos/Assault.mp4
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:3b83cf948fef884ede2b86a2d3fe68de779b9c81301a5c653fbb329bfc243274
+size 21066405
diff --git a/web_demo/static/videos/Burglary.mp4 b/web_demo/static/videos/Burglary.mp4
new file mode 100644
index 0000000000000000000000000000000000000000..cefe5d425a5e76c64222be5d023613bde4b18148
--- /dev/null
+++ b/web_demo/static/videos/Burglary.mp4
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:cd17094bfd2e5b73bcce767c434f14b715744eb3338fb80f1a213c1a337ce65d
+size 9857751
diff --git a/web_demo/static/videos/Explosion.mp4 b/web_demo/static/videos/Explosion.mp4
new file mode 100644
index 0000000000000000000000000000000000000000..d66892f10751815108520cf45255829c5ca59a77
--- /dev/null
+++ b/web_demo/static/videos/Explosion.mp4
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:b462f9241ab7521e98071b18e8956c5a921336140b4da68ddbf56a5684e87fb6
+size 5162883
diff --git a/web_demo/static/videos/Fighting.mp4 b/web_demo/static/videos/Fighting.mp4
new file mode 100644
index 0000000000000000000000000000000000000000..ee1fc4e6de83d4c3c6f4def7a1cfbe51db9dff57
--- /dev/null
+++ b/web_demo/static/videos/Fighting.mp4
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:a135cc99b9b7d1f314375cc5e29b6a38aa1131544bf0d9ca133a95644668abf6
+size 5519077
diff --git a/web_demo/static/videos/Normal.mp4 b/web_demo/static/videos/Normal.mp4
new file mode 100644
index 0000000000000000000000000000000000000000..c071d9c4c78d83c90f13fb562cad4c10b718f16d
--- /dev/null
+++ b/web_demo/static/videos/Normal.mp4
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:e7a4881043c8e9deefe11c65ed8663a281c8366a5baa91f091d67b98eb638018
+size 7205089
diff --git a/web_demo/static/videos/RoadAccidents.mp4 b/web_demo/static/videos/RoadAccidents.mp4
new file mode 100644
index 0000000000000000000000000000000000000000..2caedb046f8954605ea90d6b612a5d6af797dc4f
--- /dev/null
+++ b/web_demo/static/videos/RoadAccidents.mp4
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:0e6ccd7bac80120cfeac9a5ef3e726da29864fb8cfd218ea0ed42d696ce553ab
+size 14490312
diff --git a/web_demo/static/videos/Robbery.mp4 b/web_demo/static/videos/Robbery.mp4
new file mode 100644
index 0000000000000000000000000000000000000000..df5ab430048f6c9c4c776871e4936d5b68dc9967
--- /dev/null
+++ b/web_demo/static/videos/Robbery.mp4
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:ce7983bbb834708b8316c72cb916b9cab0105e2f283c7f8e636d38b36ddd6b48
+size 26631485
diff --git a/web_demo/static/videos/Shooting.mp4 b/web_demo/static/videos/Shooting.mp4
new file mode 100644
index 0000000000000000000000000000000000000000..6dd073fc8c7d4026c6b32a65b16c225182fb04db
--- /dev/null
+++ b/web_demo/static/videos/Shooting.mp4
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:b125ed267b82f514820cc568c7c820a0f04cd531500bd242003c8efd2f9bdcdf
+size 2198741
diff --git a/web_demo/static/videos/Shoplifting.mp4 b/web_demo/static/videos/Shoplifting.mp4
new file mode 100644
index 0000000000000000000000000000000000000000..e3710b57fe7ab8741e9c8470191d025281b618b0
--- /dev/null
+++ b/web_demo/static/videos/Shoplifting.mp4
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:717d68d3671d3f7638f80cc7db2e682599fceee21f15385431c569a1480d42ab
+size 22406639
diff --git a/web_demo/static/videos/Stealing.mp4 b/web_demo/static/videos/Stealing.mp4
new file mode 100644
index 0000000000000000000000000000000000000000..3784bd0e2541d44062bea1cc6f60f71b8f8a18a4
--- /dev/null
+++ b/web_demo/static/videos/Stealing.mp4
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:97ebf655ad4192fdfef01ec91c435f85d6e773257fe72a1458eacf5abdd2e04b
+size 27565440
diff --git a/web_demo/static/videos/Vandalism.mp4 b/web_demo/static/videos/Vandalism.mp4
new file mode 100644
index 0000000000000000000000000000000000000000..19dbff31f8f036fe7e760868f18649ae27fd59ef
--- /dev/null
+++ b/web_demo/static/videos/Vandalism.mp4
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:407508a2a3587caac3b3e4b165983f494692301e400ed4c4bbed504c47ba9e56
+size 2851411
diff --git a/web_demo/templates/index.html b/web_demo/templates/index.html
new file mode 100644
index 0000000000000000000000000000000000000000..385dec7dc975e178b1137281c4e109ac3edb45b9
--- /dev/null
+++ b/web_demo/templates/index.html
@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Real-Time Anomaly Detection</title>
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
+</head>
+<body>
+    <div class="container">
+        <main class="main-content">
+            <div class="header">
+                <h1>Anomaly Detection Dashboard</h1>
+                <button id="resetButton">Reset</button>
+            </div>
+
+            <div class="dashboard-grid">
+                
+                <div class="video-area">
+                    <div class="video-wrapper">
+                        <video id="videoPlayer" width="100%" controls muted>
+                            Your browser does not support the video tag.
+                        </video>
+                    </div>
+                    <p id="statusLabel">Select a video to begin.</p>
+                </div>
+                
+                <div class="chart-container">
+                    <h3>Live Anomaly Score</h3>
+                    <canvas id="anomalyChart"></canvas>
+                </div>
+
+            </div>
+        </main>
+
+        <aside class="sidebar">
+            <h2>Demo Videos</h2>
+            <select id="anomalySelector" class="custom-select">
+                <option value="" disabled selected>Select a Demo Video...</option>
+                {% for name in anomaly_names %}
+                <option value="{{ name }}">{{ name }}</option>
+                {% endfor %}
+            </select>
+            
+            <hr class="separator">
+            <h2>Upload Your Own</h2>
+            <div class="upload-section">
+                <input type="file" id="videoUpload" accept="video/mp4, video/mov, video/avi">
+                <button id="uploadButton">Analyze Uploaded Video</button>
+            </div>
+            
+            <hr class="separator">
+
+            <div class="yolo-container">
+                <h3>YOLO Detection Result</h3>
+                <p id="yoloTextLabel">Waiting for anomaly...</p>
+                <img id="yoloImageFrame" src="" alt="YOLO Frame Preview">
+            </div>
+        </aside>
+    </div>
+
+    <script src="https://cdn.socket.io/4.7.5/socket.io.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+    <script src="{{ url_for('static', filename='js/main.js') }}"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/web_demo/utils/__init__.py b/web_demo/utils/__init__.py
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/web_demo/utils/__pycache__/__init__.cpython-311.pyc b/web_demo/utils/__pycache__/__init__.cpython-311.pyc
new file mode 100644
index 0000000000000000000000000000000000000000..e841b950bccf62ce58e0e4ba494186ba737e69ac
Binary files /dev/null and b/web_demo/utils/__pycache__/__init__.cpython-311.pyc differ
diff --git a/web_demo/utils/__pycache__/callbacks.cpython-311.pyc b/web_demo/utils/__pycache__/callbacks.cpython-311.pyc
new file mode 100644
index 0000000000000000000000000000000000000000..706f86dd90587a8a458e05f95e20413c8d7c4fa7
Binary files /dev/null and b/web_demo/utils/__pycache__/callbacks.cpython-311.pyc differ
diff --git a/web_demo/utils/__pycache__/functional_video.cpython-311.pyc b/web_demo/utils/__pycache__/functional_video.cpython-311.pyc
new file mode 100644
index 0000000000000000000000000000000000000000..3f4c6355fa3cf3e29779b0767c2bd8dbffc20253
Binary files /dev/null and b/web_demo/utils/__pycache__/functional_video.cpython-311.pyc differ
diff --git a/web_demo/utils/__pycache__/load_model.cpython-311.pyc b/web_demo/utils/__pycache__/load_model.cpython-311.pyc
new file mode 100644
index 0000000000000000000000000000000000000000..b8561485bcd0fd8d9ca4c72cf17943fd3a1ddaa3
Binary files /dev/null and b/web_demo/utils/__pycache__/load_model.cpython-311.pyc differ
diff --git a/web_demo/utils/__pycache__/stack.cpython-311.pyc b/web_demo/utils/__pycache__/stack.cpython-311.pyc
new file mode 100644
index 0000000000000000000000000000000000000000..0cd38cbec55a90c6d17f12d9f97e51d744761945
Binary files /dev/null and b/web_demo/utils/__pycache__/stack.cpython-311.pyc differ
diff --git a/web_demo/utils/__pycache__/transforms_video.cpython-311.pyc b/web_demo/utils/__pycache__/transforms_video.cpython-311.pyc
new file mode 100644
index 0000000000000000000000000000000000000000..7ef58f92b5cf5c7e6be88da3aa97c9f33085ceb7
Binary files /dev/null and b/web_demo/utils/__pycache__/transforms_video.cpython-311.pyc differ
diff --git a/web_demo/utils/__pycache__/types.cpython-311.pyc b/web_demo/utils/__pycache__/types.cpython-311.pyc
new file mode 100644
index 0000000000000000000000000000000000000000..48c73e1a8165d73243cf77c73c776f1650a6b4f0
Binary files /dev/null and b/web_demo/utils/__pycache__/types.cpython-311.pyc differ
diff --git a/web_demo/utils/__pycache__/utils.cpython-311.pyc b/web_demo/utils/__pycache__/utils.cpython-311.pyc
new file mode 100644
index 0000000000000000000000000000000000000000..e7998167bbf602c3a3c35566cf47282dcf9127df
Binary files /dev/null and b/web_demo/utils/__pycache__/utils.cpython-311.pyc differ
diff --git a/web_demo/utils/callbacks.py b/web_demo/utils/callbacks.py
new file mode 100644
index 0000000000000000000000000000000000000000..7635f195b2fbbdc875c40f8ba0245698b0eeb5f2
--- /dev/null
+++ b/web_demo/utils/callbacks.py
@@ -0,0 +1,197 @@
+"""This module contains callbacks to be used along with `TorchModel`."""
+
+import datetime
+import logging
+import os
+import time
+from abc import ABC, abstractmethod
+
+import matplotlib.pyplot as plt
+
+
+class Callback(ABC):
+    @abstractmethod
+    def on_training_start(self, epochs) -> None:
+        pass
+
+    @abstractmethod
+    def on_training_end(self, model) -> None:
+        pass
+
+    @abstractmethod
+    def on_epoch_start(self, epoch_num, epoch_iterations) -> None:
+        pass
+
+    @abstractmethod
+    def on_epoch_step(self, global_iteration, epoch_iteration, loss) -> None:
+        pass
+
+    @abstractmethod
+    def on_epoch_end(self, loss) -> None:
+        pass
+
+    @abstractmethod
+    def on_evaluation_start(self, val_iterations) -> None:
+        pass
+
+    @abstractmethod
+    def on_evaluation_step(self, iteration, model_outputs, targets, loss) -> None:
+        pass
+
+    @abstractmethod
+    def on_evaluation_end(self) -> None:
+        pass
+
+    @abstractmethod
+    def on_training_iteration_end(self, train_loss, val_loss) -> None:
+        pass
+
+
+class DefaultModelCallback(Callback):
+    """A callback that simply logs the loss for epochs during training and
+    evaluation."""
+
+    def __init__(self, log_every=10, visualization_dir=None) -> None:
+        """
+        Args:
+            log_every (iterations): logging intervals
+        """
+        super().__init__()
+        self.visualization_dir = visualization_dir
+        self._log_every = log_every
+        self._epochs = 0
+        self._epoch = 0
+        self._epoch_iterations = 0
+        self._val_iterations = 0
+        self._start_time = 0.0
+        self._train_losses = []
+        self._val_loss = []
+
+    def on_training_start(self, epochs) -> None:
+        logging.info(f"Training for {epochs} epochs")
+        self._epochs = epochs
+        self._train_losses = []
+        self._val_loss = []
+
+    def on_training_end(self, model) -> None:
+        if self.visualization_dir is not None:
+            plt.figure()
+            plt.xlabel("Epoch")
+            plt.ylabel("Loss")
+
+            plt.plot(
+                range(1, self._epochs + 1), self._train_losses, label="Training loss"
+            )
+            if self._val_loss:
+                plt.plot(
+                    range(1, self._epochs + 1), self._val_loss, label="Validation loss"
+                )
+
+            plt.savefig(os.path.join(self.visualization_dir, "loss.png"))
+            plt.close()
+
+    def on_epoch_start(self, epoch_num: int, epoch_iterations: int) -> None:
+        self._epoch = epoch_num
+        self._epoch_iterations = epoch_iterations
+        self._start_time = time.time()
+
+    def on_epoch_step(
+        self, global_iteration: int, epoch_iteration: int, loss: float
+    ) -> None:
+        if epoch_iteration % self._log_every == 0:
+            average_time = round(
+                (time.time() - self._start_time) / (epoch_iteration + 1), 3
+            )
+
+            loss_string = f"loss: {loss}"
+
+            # pylint: disable=line-too-long
+            logging.info(
+                f"Epoch {self._epoch}/{self._epochs}      Iteration {epoch_iteration}/{self._epoch_iterations}    {loss_string}    Time: {average_time} seconds/iteration"
+            )
+
+    def on_epoch_end(self, loss) -> None:
+        self._train_losses.append(loss)
+
+    def on_evaluation_start(self, val_iterations) -> None:
+        self._val_iterations = val_iterations
+
+    def on_evaluation_step(self, iteration, model_outputs, targets, loss) -> None:
+        if iteration % self._log_every == 0:
+            logging.info(f"Iteration {iteration}/{self._val_iterations}")
+
+    def on_evaluation_end(self) -> None:
+        pass
+
+    def on_training_iteration_end(self, train_loss, val_loss) -> None:
+        # pylint: disable=line-too-long
+        train_loss_string = f"Train loss: {train_loss}"
+        if val_loss:
+            val_loss_string = f"Validation loss: {val_loss}"
+            logging.info(
+                f"""
+============================================================================================================================
+Epoch {self._epoch}/{self._epochs}     {train_loss_string}     {val_loss_string}        time: {datetime.timedelta(seconds=time.time() - self._start_time)}
+============================================================================================================================
+"""
+            )
+
+        else:
+            logging.info(
+                f"""
+============================================================================================================================
+Epoch {self._epoch}/{self._epochs}     {train_loss_string}        time: {datetime.timedelta(seconds=time.time() - self._start_time)}
+============================================================================================================================
+"""
+            )
+
+
+class TensorBoardCallback(Callback):
+    """A callback that simply logs the loss for epochs during training and
+    evaluation."""
+
+    def __init__(self, tb_writer) -> None:
+        """
+        Args:
+            tb_writer: tensorboard logger instance
+        """
+        super().__init__()
+        self.tb_writer = tb_writer
+        self.epoch = 0
+
+    def on_training_start(self, epochs) -> None:
+        pass
+
+    def on_training_end(self, model) -> None:
+        pass
+
+    def on_epoch_start(self, epoch_num, epoch_iterations) -> None:
+        self.epoch = epoch_num
+
+    def on_epoch_step(self, global_iteration, epoch_iteration, loss) -> None:
+        self.tb_writer.add_scalars(
+            "Train loss (iterations)", {"Loss": loss}, global_iteration
+        )
+
+    def on_epoch_end(self, loss) -> None:
+        pass
+
+    def on_evaluation_start(self, val_iterations) -> None:
+        pass
+
+    def on_evaluation_step(self, iteration, model_outputs, targets, loss) -> None:
+        pass
+
+    def on_evaluation_end(self) -> None:
+        pass
+
+    def on_training_iteration_end(self, train_loss, val_loss) -> None:
+        if train_loss is not None:
+            self.tb_writer.add_scalars(
+                "Epoch loss", {"Loss (train)": train_loss}, self.epoch
+            )
+
+        if val_loss is not None:
+            self.tb_writer.add_scalars(
+                "Epoch loss", {"Loss (validation)": val_loss}, self.epoch
+            )
diff --git a/web_demo/utils/functional_video.py b/web_demo/utils/functional_video.py
new file mode 100644
index 0000000000000000000000000000000000000000..16a76fab20f22120db6c9c26993edd59d34e9ff6
--- /dev/null
+++ b/web_demo/utils/functional_video.py
@@ -0,0 +1,104 @@
+import torch
+
+
+def _is_tensor_video_clip(clip):
+    if not torch.is_tensor(clip):
+        raise TypeError(f"clip should be Tesnor. Got {type(clip)}")
+
+    if not clip.ndimension() == 4:
+        raise ValueError(f"clip should be 4D. Got {clip.dim()}D")
+
+    return True
+
+
+def crop(clip, i, j, h, w):
+    """
+    Args:
+        clip (torch.tensor): Video clip to be cropped. Size is (C, T, H, W)
+    """
+    assert len(clip.size()) == 4, "clip should be a 4D tensor"
+    return clip[..., i : i + h, j : j + w]
+
+
+def resize(clip, target_size, interpolation_mode):
+    assert len(target_size) == 2, "target size should be tuple (height, width)"
+    # print(target_size)
+    return torch.nn.functional.interpolate(
+        clip, size=target_size, mode=interpolation_mode, align_corners=False
+    )
+
+
+def resized_crop(clip, i, j, h, w, size, interpolation_mode="bilinear"):
+    """
+    Do spatial cropping and resizing to the video clip
+    Args:
+        clip (torch.tensor): Video clip to be cropped. Size is (C, T, H, W)
+        i (int): i in (i,j) i.e coordinates of the upper left corner.
+        j (int): j in (i,j) i.e coordinates of the upper left corner.
+        h (int): Height of the cropped region.
+        w (int): Width of the cropped region.
+        size (tuple(int, int)): height and width of resized clip
+    Returns:
+        clip (torch.tensor): Resized and cropped clip. Size is (C, T, H, W)
+    """
+    assert _is_tensor_video_clip(clip), "clip should be a 4D torch.tensor"
+    clip = crop(clip, i, j, h, w)
+    clip = resize(clip, size, interpolation_mode)
+    return clip
+
+
+def center_crop(clip, crop_size):
+    assert _is_tensor_video_clip(clip), "clip should be a 4D torch.tensor"
+    h, w = clip.size(-2), clip.size(-1)
+    th, tw = crop_size
+    assert h >= th and w >= tw, "height and width must be no smaller than crop_size"
+
+    i = int(round((h - th) / 2.0))
+    j = int(round((w - tw) / 2.0))
+    return crop(clip, i, j, th, tw)
+
+
+def to_tensor(clip):
+    """
+    Convert tensor data type from uint8 to float, divide value by 255.0 and
+    permute the dimenions of clip tensor
+    Args:
+        clip (torch.tensor, dtype=torch.uint8): Size is (T, H, W, C)
+    Return:
+        clip (torch.tensor, dtype=torch.float): Size is (C, T, H, W)
+    """
+    _is_tensor_video_clip(clip)
+    if not clip.dtype == torch.uint8:
+        raise TypeError(
+            f"clip tensor should have data type uint8. Got {str(clip.dtype)}"
+        )
+    return clip.float().permute(3, 0, 1, 2) / 255.0
+
+
+def normalize(clip, mean, std, inplace=False):
+    """
+    Args:
+        clip (torch.tensor): Video clip to be normalized. Size is (C, T, H, W)
+        mean (tuple): pixel RGB mean. Size is (3)
+        std (tuple): pixel standard deviation. Size is (3)
+    Returns:
+        normalized clip (torch.tensor): Size is (C, T, H, W)
+    """
+    assert _is_tensor_video_clip(clip), "clip should be a 4D torch.tensor"
+    if not inplace:
+        clip = clip.clone()
+    mean = torch.as_tensor(mean, dtype=clip.dtype, device=clip.device)
+    std = torch.as_tensor(std, dtype=clip.dtype, device=clip.device)
+    clip.sub_(mean[:, None, None, None]).div_(std[:, None, None, None])
+    return clip
+
+
+def hflip(clip):
+    """
+    Args:
+        clip (torch.tensor): Video clip to be normalized. Size is (C, T, H, W)
+    Returns:
+        flipped clip (torch.tensor): Size is (C, T, H, W)
+    """
+    assert _is_tensor_video_clip(clip), "clip should be a 4D torch.tensor"
+    return clip.flip(-1)
diff --git a/web_demo/utils/load_model.py b/web_demo/utils/load_model.py
new file mode 100644
index 0000000000000000000000000000000000000000..d5047964aafbfe06306bd7cca2eeced1d0dec375
--- /dev/null
+++ b/web_demo/utils/load_model.py
@@ -0,0 +1,114 @@
+"""This module contains functions for loading models."""
+
+import logging
+from os import path
+from typing import Tuple
+
+import torch
+
+from network.anomaly_detector_model import AnomalyDetector
+from network.c3d import C3D
+from network.MFNET import MFNET_3D
+from network.resnet import generate_model
+from network.TorchUtils import TorchModel
+from utils.types import Device, FeatureExtractor
+
+
+def load_feature_extractor(
+    features_method: str, feature_extractor_path: str, device: Device
+) -> FeatureExtractor:
+    """Load feature extractor from given path.
+
+    Args:
+        features_method (str): The feature extractor model type to use. Either c3d | mfnet | r3d101 | r3d152.
+        feature_extractor_path (str): Path to the feature extractor model.
+        device (Union[torch.device, str]): Device to use for the model.
+
+    Raises:
+        FileNotFoundError: The path to the model does not exist.
+        NotImplementedError: The provided feature extractor method is not implemented.
+
+    Returns:
+        FeatureExtractor
+    """
+    if not path.exists(feature_extractor_path):
+        raise FileNotFoundError(
+            f"Couldn't find feature extractor {feature_extractor_path}.\n"
+            + r"If you are using resnet, download it first from:\n"
+            + r"r3d101: https://drive.google.com/file/d/1p80RJsghFIKBSLKgtRG94LE38OGY5h4y/view?usp=share_link"
+            + "\n"
+            + r"r3d152: https://drive.google.com/file/d/1irIdC_v7wa-sBpTiBlsMlS7BYNdj4Gr7/view?usp=share_link"
+        )
+    logging.info(f"Loading feature extractor from {feature_extractor_path}")
+
+    model: FeatureExtractor
+
+    if features_method == "c3d":
+        model = C3D(pretrained=feature_extractor_path)
+    elif features_method == "mfnet":
+        model = MFNET_3D()
+        model.load_state(state_dict=feature_extractor_path)
+    elif features_method == "r3d101":
+        model = generate_model(model_depth=101)
+        param_dict = torch.load(feature_extractor_path)["state_dict"]
+        param_dict.pop("fc.weight")
+        param_dict.pop("fc.bias")
+        model.load_state_dict(param_dict)
+    elif features_method == "r3d152":
+        model = generate_model(model_depth=152)
+        param_dict = torch.load(feature_extractor_path)["state_dict"]
+        param_dict.pop("fc.weight")
+        param_dict.pop("fc.bias")
+        model.load_state_dict(param_dict)
+    else:
+        raise NotImplementedError(
+            f"Features extraction method {features_method} not implemented"
+        )
+
+    return model.to(device).eval()
+
+
+def load_anomaly_detector(ad_model_path: str, device: Device) -> AnomalyDetector:
+    """Load anomaly detection model from given path.
+
+    Args:
+        ad_model_path (str): Path to the anomaly detection model.
+        device (Device): Device to use for the model.
+
+    Raises:
+        FileNotFoundError: The path to the model does not exist.
+
+    Returns:
+        AnomalyDetector
+    """
+    if not path.exists(ad_model_path):
+        raise FileNotFoundError(f"Couldn't find anomaly detector {ad_model_path}.")
+    logging.info(f"Loading anomaly detector from {ad_model_path}")
+
+    anomaly_detector = TorchModel.load_model(ad_model_path).to(device)
+    return anomaly_detector.eval()
+
+
+def load_models(
+    feature_extractor_path: str,
+    ad_model_path: str,
+    features_method: str = "c3d",
+    device: Device = "cuda",
+) -> Tuple[AnomalyDetector, FeatureExtractor]:
+    """Loads both feature extractor and anomaly detector from the given paths.
+
+    Args:
+        feature_extractor_path (str): Path of the features extractor weights to load.
+        ad_model_path (str): Path of the anomaly detector weights to load.
+        features_method (str, optional): Name of the model to use for features extraction.
+            Defaults to "c3d".
+        device (str, optional): Device to use for the models. Defaults to "cuda".
+
+    Returns:
+        Tuple[nn.Module, nn.Module]
+    """
+    feature_extractor = load_feature_extractor(
+        features_method, feature_extractor_path, device
+    )
+    anomaly_detector = load_anomaly_detector(ad_model_path, device)
+    return anomaly_detector, feature_extractor
diff --git a/web_demo/utils/stack.py b/web_demo/utils/stack.py
new file mode 100644
index 0000000000000000000000000000000000000000..f1b8b60da4da1c1b111d86cb24c4c4fdf6df8b9c
--- /dev/null
+++ b/web_demo/utils/stack.py
@@ -0,0 +1,33 @@
+"""This module contains an implementation of a stack that fits an online
+container for video clips."""
+
+import threading
+from typing import Any, List
+
+
+class Stack:
+    """Create a stack object with a given maximum size."""
+
+    def __init__(self, max_size: int) -> None:
+        self._stack = []
+        self._max_size = max_size
+        self._lock = threading.Lock()
+
+    def put(self, item: Any) -> None:
+        """Put an item into the stack."""
+        with self._lock:
+            self._stack.append(item)
+            if len(self._stack) > self._max_size:
+                del self._stack[0]
+
+    def get(self, size: int = -1) -> List[Any]:
+        """Get an item from the stack."""
+        if size == -1:
+            size = self._max_size
+        return self._stack[-size:]
+
+    def __len__(self) -> int:
+        return len(self._stack)
+
+    def full(self) -> bool:
+        return len(self._stack) == self._max_size
diff --git a/web_demo/utils/transforms_video.py b/web_demo/utils/transforms_video.py
new file mode 100644
index 0000000000000000000000000000000000000000..cd1bd32132f678e0a91b91a4f6bcb8d0a5e2c6a2
--- /dev/null
+++ b/web_demo/utils/transforms_video.py
@@ -0,0 +1,165 @@
+"""This module contains transforms for videos."""
+
+import numbers
+import random
+
+import numpy as np
+from torchvision.transforms import RandomResizedCrop
+
+from . import functional_video as F
+
+__all__ = [
+    "RandomResizedCropVideo",
+    "CenterCropVideo",
+    "NormalizeVideo",
+    "ToTensorVideo",
+    "RandomHorizontalFlipVideo",
+]
+
+
+class ResizeVideo:
+    def __init__(self, size, interpolation_mode="bilinear"):
+        self.size = size
+        self.interpolation_mode = interpolation_mode
+
+    def __call__(self, clip):
+        return F.resize(clip, self.size, self.interpolation_mode)
+
+
+class RandomResizedCropVideo(RandomResizedCrop):
+    def __init__(
+        self,
+        size,
+        crop,
+        interpolation_mode="bilinear",
+    ):
+        if isinstance(size, tuple):
+            assert len(size) == 2, "size should be tuple (height, width)"
+            self.size = size
+        else:
+            self.size = (size, size)
+
+        self.interpolation_mode = interpolation_mode
+        self.crop = crop
+
+    def __call__(self, clip):
+        """
+        Args:
+            clip (torch.tensor): Video clip to be cropped. Size is (C, T, H, W)
+        Returns:
+            torch.tensor: randomly cropped/resized video clip.
+                size is (C, T, H, W)
+        """
+        clip = F.resize(clip, self.size, self.interpolation_mode)
+        # print(clip.shape)
+        if clip.shape[2] - self.crop > 0:
+            i = np.random.randint(clip.shape[2] - self.crop)
+        else:
+            i = 0
+        if clip.shape[3] - self.crop > 0:
+            j = np.random.randint(clip.shape[3] - self.crop)
+        else:
+            j = 0
+        clip = clip[..., i : i + self.crop, j : j + self.crop]
+        return clip
+
+    def __repr__(self):
+        return (
+            self.__class__.__name__
+            + f"(size={self.size}, interpolation_mode={self.interpolation_mode}, "
+            + f"scale={self.scale}, ratio={self.ratio})"
+        )
+
+
+class CenterCropVideo:
+    def __init__(self, crop_size):
+        if isinstance(crop_size, numbers.Number):
+            self.crop_size = (int(crop_size), int(crop_size))
+        else:
+            self.crop_size = crop_size
+
+    def __call__(self, clip):
+        """
+        Args:
+            clip (torch.tensor): Video clip to be cropped. Size is (C, T, H, W)
+        Returns:
+            torch.tensor: central cropping of video clip. Size is
+            (C, T, crop_size, crop_size)
+        """
+        return F.center_crop(clip, self.crop_size)
+
+    def __repr__(self):
+        return self.__class__.__name__ + f"(crop_size={self.crop_size})"
+
+
+class NormalizeVideo:
+    """
+    Normalize the video clip by mean subtraction and division by standard deviation
+    Args:
+        mean (3-tuple): pixel RGB mean
+        std (3-tuple): pixel RGB standard deviation
+        inplace (boolean): whether do in-place normalization
+    """
+
+    def __init__(self, mean, std, inplace=False):
+        self.mean = mean
+        self.std = std
+        self.inplace = inplace
+
+    def __call__(self, clip):
+        """
+        Args:
+            clip (torch.tensor): video clip to be normalized. Size is (C, T, H, W)
+        """
+        return F.normalize(clip, self.mean, self.std, self.inplace)
+
+    def __repr__(self):
+        return (
+            self.__class__.__name__
+            + f"(mean={self.mean}, std={self.std}, inplace={self.inplace})"
+        )
+
+
+class ToTensorVideo:
+    """Convert tensor data type from uint8 to float, divide value by 255.0 and
+    permute the dimenions of clip tensor."""
+
+    def __init__(self):
+        pass
+
+    def __call__(self, clip):
+        """
+        Args:
+            clip (torch.tensor, dtype=torch.uint8): Size is (T, H, W, C)
+        Return:
+            clip (torch.tensor, dtype=torch.float): Size is (C, T, H, W)
+        """
+        return F.to_tensor(clip)
+
+    def __repr__(self):
+        return self.__class__.__name__
+
+
+class RandomHorizontalFlipVideo:
+    """
+    Flip the video clip along the horizonal direction with a given probability
+    Args:
+        p (float): probability of the clip being flipped. Default value is 0.5
+    """
+
+    def __init__(self, p=0.5):
+        self.p = p
+
+    def __call__(self, clip):
+        """
+        Args:
+            clip (torch.tensor): Size is (C, T, H, W)
+        Return:
+            clip (torch.tensor): Size is (C, T, H, W)
+        """
+        if random.random() < self.p:
+            clip = F.hflip(clip)
+        return clip
+
+    def __repr__(self):
+        return self.__class__.__name__ + f"(p={self.p})"
diff --git a/web_demo/utils/types.py b/web_demo/utils/types.py
new file mode 100644
index 0000000000000000000000000000000000000000..8be6077b2bce195533f7e88e0363f45ae2ea0454
--- /dev/null
+++ b/web_demo/utils/types.py
@@ -0,0 +1,12 @@
+"""This module contains new types used in this library."""
+
+from typing import Union
+
+from torch import device
+
+from network.c3d import C3D
+from network.MFNET import MFNET_3D
+from network.resnet import ResNet
+
+Device = Union[str, device]
+FeatureExtractor = Union[C3D, ResNet, MFNET_3D]
diff --git a/web_demo/utils/utils.py b/web_demo/utils/utils.py
new file mode 100644
index 0000000000000000000000000000000000000000..2d085d0efcbdbbaa14afec1c8b17b4573977a2f3
--- /dev/null
+++ b/web_demo/utils/utils.py
@@ -0,0 +1,87 @@
+"""This module contains utilities for anomaly detection."""
+
+import logging
+import sys
+from typing import List, Optional, Union
+
+from torchvision.transforms import transforms
+
+from . import transforms_video
+
+
+def register_logger(log_file: Optional[str] = None, stdout: bool = True) -> None:
+    """Register a logger.
+
+    Args:
+        log_file (str, optional): Path to the file where log should be written.
+            If `None`, log wouldn't be written to any file. Defaults to None.
+        stdout (bool, optional): If `True`, the log would be printed to stdout. Defaults to True.
+    """
+    log = logging.getLogger()  # root logger
+    for hdlr in log.handlers[:]:  # remove all old handlers
+        log.removeHandler(hdlr)
+
+    handlers: List[Union[logging.FileHandler, logging.StreamHandler]] = []
+
+    if stdout:
+        handlers.append(logging.StreamHandler(stream=sys.stdout))
+
+    if log_file is not None:
+        handlers.append(logging.FileHandler(log_file))
+
+    logging.basicConfig(
+        format="%(asctime)s %(message)s",
+        handlers=handlers,
+        level=logging.INFO,
+    )
+    logging.root.setLevel(logging.INFO)
+
+
+def build_transforms(mode: str = "c3d") -> transforms.Compose:
+    """Build transforms to use for training an anomaly detection model.
+
+    Args:
+        mode (str, optional): Mode for which transforms should be constructed.
+        Either c3d | i3d | mfnet | 3dResNet. Defaults to "c3d".
+
+    Raises:
+        NotImplementedError: The provided mode is not implemented.
+
+    Returns:
+        transforms.Compose
+    """
+    if mode == "c3d":
+        mean = [124 / 255, 117 / 255, 104 / 255]
+        std = [1 / (0.0167 * 255)] * 3
+        resize = 128, 171
+        crop = 112
+    elif mode == "i3d":
+        mean = [0, 0, 0]
+        std = [1, 1, 1]
+    elif mode == "mfnet":
+        mean = [0.485, 0.456, 0.406]
+        std = [0.229, 0.224, 0.225]
+    elif mode == "3dResNet":
+        mean = [0.4345, 0.4051, 0.3775]
+        std = [0.2768, 0.2713, 0.2737]
+    else:
+        raise NotImplementedError(f"Mode {mode} not implemented")
+
+    if mode == "c3d":
+        res = transforms.Compose(
+            [
+                transforms_video.ToTensorVideo(),
+                transforms_video.ResizeVideo(resize),
+                transforms_video.CenterCropVideo(crop),
+                transforms_video.NormalizeVideo(mean=mean, std=std),
+            ]
+        )
+    else:
+        res = transforms.Compose(
+            [
+                transforms_video.ToTensorVideo(),
+                transforms_video.NormalizeVideo(mean=mean, std=std),
+            ]
+        )
+
+    return res
diff --git a/web_demo/yolo_detection.py b/web_demo/yolo_detection.py
new file mode 100644
index 0000000000000000000000000000000000000000..f9e16e7d628e73c603357b93d0e7553396845909
--- /dev/null
+++ b/web_demo/yolo_detection.py
@@ -0,0 +1,123 @@
+import argparse
+import os
+import sys
+import cv2
+from ultralytics import YOLO
+import numpy as np
+
+# --- Configuration ---
+# Set the path for the YOLO model weights
+YOLO_MODEL_PATH = r"S:\ano_dec_pro\AnomalyDetectionCVPR2018-Pytorch\yolo_my_model.pt"
+
+# --- Main Detection Function ---
+def analyze_video_with_yolo(video_path: str, model_path: str = YOLO_MODEL_PATH, conf_threshold: float = 0.5,return_class=False):
+    """
+    Analyzes a video using a pre-trained YOLO model for object detection 
+    and prints the predicted anomaly class for frames with detections.
+
+    :param video_path: Path to the input video file.
+    :param model_path: Path to the trained YOLO model weights.
+    :param conf_threshold: Minimum confidence score required for a detection.
+    """
+    if not os.path.exists(video_path):
+        print(f"[ERROR] Video file not found at: {video_path}")
+        return
+
+    if not os.path.exists(model_path):
+        print(f"[ERROR] YOLO model not found at: {model_path}")
+        return
+
+    try:
+        # Load the YOLO model (Assumes it's trained for your 14 anomaly classes)
+        model = YOLO(model_path, task='detect')
+        labels = model.names
+        print(f"[INFO] YOLO Model loaded successfully with {len(labels)} classes.")
+    except Exception as e:
+        print(f"[FATAL] Failed to load YOLO model: {e}")
+        return
+
+    cap = cv2.VideoCapture(video_path)
+    if not cap.isOpened():
+        print(f"[ERROR] Could not open video stream for: {video_path}")
+        return
+
+    frame_num = 0
+    detections_found = 0
+
+    print("-" * 50)
+    print(f"Starting analysis of: {os.path.basename(video_path)}")
+    print("-" * 50)
+
+
+    detected_class = "None"
+    while cap.isOpened():
+        ret, frame = cap.read()
+        if not ret:
+            break
+        if frame_num % 10 == 0:
+            results = model(frame, conf=conf_threshold, verbose=False)
+            if results and len(results[0].boxes) > 0:
+                detections = results[0].boxes
+                best_detection = detections[detections.conf.argmax()]
+                class_idx = int(best_detection.cls.item())
+                class_name = labels.get(class_idx, "Unknown Class")
+                detected_class = class_name
+        frame_num += 1
+
+    cap.release()
+    cv2.destroyAllWindows()
+
+    if return_class:
+        return detected_class
+
+
+
+
+
+    # while cap.isOpened():
+    #     ret, frame = cap.read()
+    #     if not ret:
+    #         break
+
+    #     # Analyze every 10th frame to speed up testing and reduce redundancy
+    #     if frame_num % 10 == 0:
+            
+    #         # Run inference (set verbose=False to keep the output clean)
+    #         results = model(frame, conf=conf_threshold, verbose=False)
+            
+    #         # Process results
+    #         if results and len(results[0].boxes) > 0:
+    #             detections = results[0].boxes
+                
+    #             # We'll take the highest confidence detection in the frame
+    #             best_detection = detections[detections.conf.argmax()]
+                
+    #             class_idx = int(best_detection.cls.item())
+    #             class_name = labels.get(class_idx, "Unknown Class")
+    #             confidence = best_detection.conf.item()
+                
+    #             print(f"Frame {frame_num:05d}: DETECTED -> {class_name} ({confidence:.2f})")
+    #             detections_found += 1
+
+    #     frame_num += 1
+
+    # cap.release()
+    # cv2.destroyAllWindows()
+    
+    print("-" * 50)
+    print(f"Analysis complete. Total detections reported: {detections_found}")
+    print("-" * 50)
+
+
+# if __name__ == '__main__':
+#     # --- Example Usage (Run this command in your environment) ---
+#     # Change the video path to a file you want to test!
+#     example_video = r"S:\ano_dec_pro\dataset\Abuse\Abuse002_x264.mp4"
+    
+#     # NOTE: In a shell/CLI environment (like VS Code or PowerShell), you typically
+#     # run this by executing the script and passing arguments:
+#     # python yolo_detection.py --video_path "S:\ano_dec_pro\dataset\Abuse\Abuse002_x264.mp4" 
+    
+#     # We call the function directly for simple execution in Python interpreter
+#     print("NOTE: Running the detection script. Please change 'example_video' to your actual file path.")
+#     analyze_video_with_yolo(example_video)