From 582e1a8f46a4ba3ce75253d2b52e3d5b30fb775d Mon Sep 17 00:00:00 2001
From: Carlo Ferriolo <carlo.ferriolo@seco.com>
Date: Fri, 10 Apr 2026 12:30:14 +0200
Subject: [PATCH 1/2] [OOBE] add new page for webcam analysis

In this patch has been added the integration of a new page which include
the same logic used before for Sample integrity, Quality Inspection and
Crowd and Fall detection improved by the use of webcam instead of images
and carousel. This gives the possbility to choose a more practical
application for who wants to use the OOBE on real environment.

Signed-off-by: Carlo Ferriolo <carlo.ferriolo@seco.com>
---
 oobe/src/App.tsx                              |  15 +
 oobe/src/pages/CrowdAndFallDetection.tsx      |  17 +-
 .../src/pages/CrowdAndFallDetectionWebcam.tsx | 359 ++++++++++++++++++
 oobe/src/pages/QualityInspection.tsx          |  17 +-
 oobe/src/pages/QualityInspectionWebcam.tsx    | 327 ++++++++++++++++
 oobe/src/pages/SampleIntegrityCheck.tsx       |  17 +-
 oobe/src/pages/SampleIntegrityCheckWebcam.tsx | 300 +++++++++++++++
 7 files changed, 1049 insertions(+), 3 deletions(-)
 create mode 100644 oobe/src/pages/CrowdAndFallDetectionWebcam.tsx
 create mode 100644 oobe/src/pages/QualityInspectionWebcam.tsx
 create mode 100644 oobe/src/pages/SampleIntegrityCheckWebcam.tsx

diff --git a/oobe/src/App.tsx b/oobe/src/App.tsx
index f3ecd16..0c98ccf 100644
--- a/oobe/src/App.tsx
+++ b/oobe/src/App.tsx
@@ -21,6 +21,9 @@ import SmartClinical from "./pages/SmartClinical";
 import QualityInspection from "./pages/QualityInspection";
 import HighResolutionVisuals from "./pages/HighResolutionVisuals";
 import CrowdAndFallDetection from "./pages/CrowdAndFallDetection";
+import QualityInspectionWebcam from "./pages/QualityInspectionWebcam";
+import SampleIntegrityCheckWebcam from "./pages/SampleIntegrityCheckWebcam";
+import CrowdAndFallDetectionWebcam from "./pages/CrowdAndFallDetectionWebcam";
 
 const HIDE_SIDEBAR_ROUTES = [
   "/medical-alert-management",
@@ -92,14 +95,26 @@ function App() {
               path="/quality-inspection"
               element={<QualityInspection apiClient={apiClient} />}
             />
+            <Route
+              path="/quality-inspection/webcam"
+              element={<QualityInspectionWebcam />}
+            />
             <Route
               path="/sample-integrity-check"
               element={<SampleIntegrityCheck apiClient={apiClient} />}
             />
+            <Route
+              path="/sample-integrity-check/webcam"
+              element={<SampleIntegrityCheckWebcam />}
+            />
             <Route
               path="/crowd-and-fall-detection"
               element={<CrowdAndFallDetection apiClient={apiClient} />}
             />
+            <Route
+              path="/crowd-and-fall-detection/webcam"
+              element={<CrowdAndFallDetectionWebcam />}
+            />
             <Route
               path="/smart-clinical"
               element={<SmartClinical apiClient={apiClient} />}
diff --git a/oobe/src/pages/CrowdAndFallDetection.tsx b/oobe/src/pages/CrowdAndFallDetection.tsx
index 6dcde33..5d5eb16 100644
--- a/oobe/src/pages/CrowdAndFallDetection.tsx
+++ b/oobe/src/pages/CrowdAndFallDetection.tsx
@@ -1,6 +1,6 @@
 import { Container, Image, Button, Alert } from "react-bootstrap";
 import { useState, useEffect, useRef, useLayoutEffect } from "react";
-import { useNavigate } from "react-router-dom";
+import { useLocation, useNavigate } from "react-router-dom";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faX, faExclamationTriangle } from "@fortawesome/free-solid-svg-icons";
 import { FormattedMessage, defineMessages } from "react-intl";
@@ -187,6 +187,14 @@ const CrowdAndFallDetection = ({ apiClient }: CrowdAndFallDetectionProps) => {
     return () => clearInterval(timer);
   }, []);
 
+  const location = useLocation();
+
+  useEffect(() => {
+    if (location.state?.autoStart) {
+      setStatus("analysis");
+    }
+  }, [location.state]);
+
   useEffect(() => {
     if (status !== "analysis") return;
     const processImage = async () => {
@@ -382,6 +390,13 @@ const CrowdAndFallDetection = ({ apiClient }: CrowdAndFallDetectionProps) => {
                 </span>
               </div>
               <div className="d-flex gap-2">
+                <Button
+                  variant="light"
+                  className="flex-grow-1 py-3 fw-bold"
+                  onClick={() => navigate("/crowd-and-fall-detection/webcam")}
+                >
+                  Live Webcam Analysis
+                </Button>
                 <Button
                   variant="outline-light"
                   className="flex-grow-1 py-3 fw-bold border-2"
diff --git a/oobe/src/pages/CrowdAndFallDetectionWebcam.tsx b/oobe/src/pages/CrowdAndFallDetectionWebcam.tsx
new file mode 100644
index 0000000..424a3f9
--- /dev/null
+++ b/oobe/src/pages/CrowdAndFallDetectionWebcam.tsx
@@ -0,0 +1,359 @@
+import React, { useRef, useState } from "react";
+import { Container, Button, Alert, Image } from "react-bootstrap";
+import { useNavigate } from "react-router-dom";
+import { APIClient } from "../api/APIClient";
+import { logo } from "../assets/images";
+
+const DETECTION_COLORS = [
+  "#00FF00",
+  "#FFD700",
+  "#00FFFF",
+  "#FF00FF",
+  "#1E90FF",
+  "#ADFF2F",
+  "#FF69B4",
+  "#00FA9A",
+  "#87CEEB",
+  "#FFFFFF",
+];
+
+export type PersonResult = {
+  categoryId: number;
+  bbox: number[];
+  score: number;
+};
+
+const CrowdAndFallDetectionWebcam = () => {
+  const streamRef = useRef<MediaStream | null>(null);
+  const videoRef = useRef<HTMLVideoElement>(null);
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+  const imageRef = useRef<HTMLImageElement>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  const [status, setStatus] = useState("greeting");
+  const [results, setResults] = useState<PersonResult[]>([]);
+  const [error, setError] = useState<string | null>(null);
+  const [captured, setCaptured] = useState<string | null>(null);
+  const [currentTime] = useState(new Date());
+
+  const navigate = useNavigate();
+  const apiClient = new APIClient();
+
+  React.useEffect(() => {
+    navigator.mediaDevices.getUserMedia({ video: true }).then((stream) => {
+      streamRef.current = stream;
+      if (videoRef.current) videoRef.current.srcObject = stream;
+    });
+    return () => {
+      if (streamRef.current) {
+        streamRef.current.getTracks().forEach((track) => track.stop());
+      }
+    };
+  }, []);
+
+  React.useEffect(() => {
+    if (status === "greeting" && videoRef.current && streamRef.current) {
+      videoRef.current.srcObject = streamRef.current;
+    }
+  }, [status]);
+
+  const dataURLtoFile = (dataurl: string, filename: string) => {
+    const arr = dataurl.split(",");
+    const mime = arr[0].match(/:(.*?);/)![1];
+    const bstr = atob(arr[1]);
+    const u8arr = new Uint8Array(bstr.length);
+    for (let i = 0; i < bstr.length; i++) u8arr[i] = bstr.charCodeAt(i);
+    return new File([u8arr], filename, { type: mime });
+  };
+
+  const handleCapture = async () => {
+    if (videoRef.current && canvasRef.current) {
+      const ctx = canvasRef.current.getContext("2d");
+      if (ctx) {
+        ctx.drawImage(videoRef.current, 0, 0, 960, 720);
+        const dataUrl = canvasRef.current.toDataURL("image/png");
+        setCaptured(dataUrl);
+        setStatus("analysis");
+        setError(null);
+
+        try {
+          const file = dataURLtoFile(dataUrl, "webcam.png");
+          const data = await apiClient.getPersonResult(file);
+          setResults(data);
+          setStatus("result");
+        } catch {
+          setError("Backend rejected the image format or analysis failed.");
+          setStatus("greeting");
+        }
+      }
+    }
+  };
+
+  const formatFullDate = (date: Date): string => {
+    const time = date.toLocaleTimeString("en-GB", { hour12: false });
+    const dayMonthYear = date.toLocaleDateString("en-GB", {
+      day: "2-digit",
+      month: "2-digit",
+      year: "numeric",
+    });
+    return `${time} - ${dayMonthYear}`;
+  };
+
+  const handleRestartWebcam = () => {
+    setCaptured(null);
+    setResults([]);
+    setError(null);
+    setStatus("greeting");
+  };
+
+  const handleCaptureAndAnalysis = () => {
+    setCaptured(null);
+    setResults([]);
+    setError(null);
+    setStatus("greeting");
+    setTimeout(() => handleCapture(), 100);
+  };
+
+  const handleReturnPage = () => {
+    if (videoRef.current && videoRef.current.srcObject) {
+      (videoRef.current.srcObject as MediaStream)
+        .getTracks()
+        .forEach((track) => track.stop());
+    }
+    navigate("/crowd-and-fall-detection", { state: { autoStart: true } });
+  };
+
+  return (
+    <Container
+      fluid
+      className="quality-inspection-container vh-100 d-flex flex-column p-4 bg-black text-white"
+    >
+      <div className="w-100 mb-4 d-flex align-items-center">
+        <div className="flex-grow-1"></div>
+
+        <div className="text-center">
+          <Image src={logo} alt="SECO" style={{ height: "30px" }} />
+        </div>
+
+        <div className="flex-grow-1 d-flex justify-content-end text-secondary small">
+          {formatFullDate(currentTime)}
+        </div>
+      </div>
+
+      {error && (
+        <Alert
+          onClose={() => setError(null)}
+          dismissible
+          variant="danger"
+          className="mb-3"
+        >
+          {error}
+        </Alert>
+      )}
+
+      <div className="row flex-grow-1 overflow-hidden">
+        <div className="col-md-7 d-flex flex-column h-100">
+          <div
+            className="position-relative flex-grow-1 bg-dark rounded-4 overflow-hidden border border-secondary shadow-lg d-flex align-items-center justify-content-center"
+            style={{ minHeight: 320 }}
+          >
+            {status === "greeting" && (
+              <div
+                style={{
+                  position: "absolute",
+                  left: 0,
+                  top: 0,
+                  width: "100%",
+                  height: "100%",
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                }}
+              >
+                <video
+                  ref={videoRef}
+                  width={960}
+                  height={720}
+                  autoPlay
+                  muted
+                  playsInline
+                  style={{
+                    background: "#222",
+                    maxWidth: "100%",
+                    maxHeight: "100%",
+                  }}
+                />
+                <canvas
+                  ref={canvasRef}
+                  width={960}
+                  height={720}
+                  style={{ display: "none" }}
+                />
+              </div>
+            )}
+
+            {captured && status !== "greeting" && (
+              <>
+                <div
+                  ref={containerRef}
+                  style={{
+                    position: "absolute",
+                    left: 0,
+                    top: 0,
+                    width: "100%",
+                    height: "100%",
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                  }}
+                >
+                  <Image
+                    ref={imageRef}
+                    src={captured}
+                    className="mw-100 mh-100 shadow-lg"
+                    style={{
+                      objectFit: "contain",
+                      maxWidth: "100%",
+                      maxHeight: "100%",
+                      width: 960,
+                      height: 720,
+                    }}
+                  />
+                </div>
+
+                {status === "result" &&
+                  results.map((r, i) => {
+                    const img = imageRef.current;
+                    const container = containerRef.current;
+                    if (!img || !container) return null;
+
+                    const rect = img.getBoundingClientRect();
+                    const containerRect = container.getBoundingClientRect();
+
+                    const scaleX = rect.width / 960;
+                    const scaleY = rect.height / 720;
+
+                    const offsetX = rect.left - containerRect.left;
+                    const offsetY = rect.top - containerRect.top;
+
+                    const isFall = r.categoryId === 1;
+                    const boxColor = isFall
+                      ? "#FF0000"
+                      : DETECTION_COLORS[i % DETECTION_COLORS.length];
+
+                    return (
+                      <div
+                        key={i}
+                        className="position-absolute"
+                        style={{
+                          left: offsetX + r.bbox[0] * scaleX,
+                          top: offsetY + r.bbox[1] * scaleY,
+                          width: r.bbox[2] * scaleX,
+                          height: r.bbox[3] * scaleY,
+                          border: `3px solid ${boxColor}`,
+                          boxShadow: isFall
+                            ? `0 0 15px #FF0000`
+                            : `0 0 5px ${boxColor}66`,
+                          pointerEvents: "none",
+                        }}
+                      ></div>
+                    );
+                  })}
+              </>
+            )}
+          </div>
+        </div>
+
+        <div className="col-md-5 d-flex flex-column ps-md-4 pb-3 h-100">
+          <div className="d-flex align-items-center gap-2 mb-3">
+            <div
+              className={`status-indicator ${results.some((r) => r.categoryId === 1) ? "bg-danger animate-pulse" : "bg-success"}`}
+            ></div>
+            <h2 className="fw-bold h5 text-uppercase m-0 text-white">
+              Live Webcam
+            </h2>
+          </div>
+
+          <div className="flex-grow-1 overflow-auto pe-2 custom-scrollbar mb-3">
+            {status === "analysis" ? (
+              <div className="d-flex align-items-center gap-3 text-info p-4 bg-dark bg-opacity-50 rounded-4 border border-info border-opacity-25">
+                <div className="spinner-border spinner-border-sm" />
+                Scanning in progress...
+              </div>
+            ) : (
+              <div className="list-group list-group-flush gap-1">
+                {results.length === 0 ? (
+                  <div className="p-4 text-center border border-secondary border-opacity-25 rounded-4">
+                    <p className="text-secondary small m-0">
+                      No people detected.
+                    </p>
+                  </div>
+                ) : (
+                  results.map((r, i) => (
+                    <div
+                      key={i}
+                      className="list-group-item bg-dark bg-opacity-25 text-white border-secondary border-opacity-10 px-3 py-2 rounded-3 d-flex justify-content-between align-items-center"
+                    >
+                      <div className="d-flex align-items-center gap-2">
+                        <span className="text-secondary smaller">#{i + 1}</span>
+                        <span className="fw-medium">Person detected</span>
+                      </div>
+                    </div>
+                  ))
+                )}
+              </div>
+            )}
+          </div>
+
+          <div className="pt-3 border-top border-secondary border-opacity-50">
+            <div className="d-flex justify-content-between align-items-end mb-3">
+              <span className="text-secondary text-uppercase small fw-bold tracking-wider">
+                PEOPLE COUNTER
+              </span>
+              <span
+                className={`display-3 fw-black ${
+                  results.some((r) => r.categoryId === 1)
+                    ? "text-danger"
+                    : results.length > 0
+                      ? "text-primary"
+                      : "text-white"
+                }`}
+                style={{ lineHeight: 1 }}
+              >
+                {results.length.toString().padStart(2, "0")}
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div className="pt-3 d-flex gap-2">
+        <Button
+          variant="light"
+          className="flex-grow-1 py-3 fw-bold"
+          onClick={handleReturnPage}
+        >
+          Gallery
+        </Button>
+        <Button
+          variant="outline-light"
+          className="flex-grow-1 py-3 fw-bold border-2"
+          onClick={handleCaptureAndAnalysis}
+          disabled={status === "analysis"}
+        >
+          {status === "analysis" ? "Scanning in progress..." : "Start Analysis"}
+        </Button>
+        <Button
+          variant="light"
+          className="flex-grow-1 py-3 fw-bold"
+          onClick={handleRestartWebcam}
+          disabled={status === "greeting"}
+        >
+          Live Webcam Feedback
+        </Button>
+      </div>
+    </Container>
+  );
+};
+
+export default CrowdAndFallDetectionWebcam;
diff --git a/oobe/src/pages/QualityInspection.tsx b/oobe/src/pages/QualityInspection.tsx
index 8fe7f24..ac95e95 100644
--- a/oobe/src/pages/QualityInspection.tsx
+++ b/oobe/src/pages/QualityInspection.tsx
@@ -1,7 +1,7 @@
 import { Container, Image, Button, Alert } from "react-bootstrap";
 import { logo } from "../assets/images";
 import "./QualityInspection.scss";
-import { useNavigate } from "react-router-dom";
+import { useLocation, useNavigate } from "react-router-dom";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faX } from "@fortawesome/free-solid-svg-icons";
 import { FormattedMessage, useIntl } from "react-intl";
@@ -122,6 +122,14 @@ const QualityInspection = ({ apiClient }: QualityInspectionProps) => {
     if (currentImage) processImage();
   }, [apiClient, currentImage, status, intl, analysisMode]);
 
+  const location = useLocation();
+
+  useEffect(() => {
+    if (location.state?.autoStart) {
+      setStatus("analysis");
+    }
+  }, [location.state]);
+
   const handleBBoxColor = (categoryId: number) => {
     switch (categoryId) {
       case 0:
@@ -297,6 +305,13 @@ const QualityInspection = ({ apiClient }: QualityInspectionProps) => {
             </div>
 
             <div className="d-flex flex-wrap justify-content-center gap-3 mt-auto mb-4">
+              <Button
+                variant="light"
+                className={`analyze-cpu-button py-2 px-5 fw-bold ${status === "analysis" && analysisMode === "cpu" ? "active-analysis" : ""}`}
+                onClick={() => navigate("/quality-inspection/webcam")}
+              >
+                Live webcam Analysis
+              </Button>
               <Button
                 variant="light"
                 disabled={status === "analysis"}
diff --git a/oobe/src/pages/QualityInspectionWebcam.tsx b/oobe/src/pages/QualityInspectionWebcam.tsx
new file mode 100644
index 0000000..7fadd7a
--- /dev/null
+++ b/oobe/src/pages/QualityInspectionWebcam.tsx
@@ -0,0 +1,327 @@
+import React, { useRef, useState } from "react";
+import { Container, Button, Alert, Image } from "react-bootstrap";
+import { useNavigate } from "react-router-dom";
+import { APIClient, type AnalysisMode } from "../api/APIClient";
+import { type DefectResult } from "./QualityInspection.tsx";
+import { logo } from "../assets/images";
+import { FormattedMessage } from "react-intl";
+
+const MISSING_HOLE_COLOR = "#FF0000";
+const SHORT_CIRCUIT_COLOR = "#FFC107";
+const DEFAULT_COLOR = "#222322";
+
+const QualityInspectionWebcam = () => {
+  const streamRef = useRef<MediaStream | null>(null);
+  const videoRef = useRef<HTMLVideoElement>(null);
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+  const imageRef = useRef<HTMLImageElement>(null);
+  const [status, setStatus] = useState("greeting");
+  const [defectResults, setDefectResults] = useState<DefectResult[]>([]);
+  const [inferenceTime, setInferenceTime] = useState<number | null>(null);
+  const [analysisMode, setAnalysisMode] = useState<AnalysisMode>("cpu");
+  const [error, setError] = useState<string | null>(null);
+  const [captured, setCaptured] = useState<string | null>(null);
+  const [scale] = useState({ x: 1, y: 1 });
+  const [currentTime] = useState(new Date());
+  const navigate = useNavigate();
+  const apiClient = new APIClient();
+
+  React.useEffect(() => {
+    navigator.mediaDevices.getUserMedia({ video: true }).then((stream) => {
+      streamRef.current = stream;
+      if (videoRef.current) videoRef.current.srcObject = stream;
+    });
+    return () => {
+      if (videoRef.current && videoRef.current.srcObject) {
+        (videoRef.current.srcObject as MediaStream)
+          .getTracks()
+          .forEach((track) => track.stop());
+      }
+    };
+  }, []);
+
+  React.useEffect(() => {
+    if (status === "greeting" && videoRef.current && streamRef.current) {
+      videoRef.current.srcObject = streamRef.current;
+    }
+  }, [status]);
+
+  const dataURLtoFile = (dataurl: string, filename: string) => {
+    const arr = dataurl.split(",");
+    const mime = arr[0].match(/:(.*?);/)![1];
+    const bstr = atob(arr[1]);
+    const u8arr = new Uint8Array(bstr.length);
+    for (let i = 0; i < bstr.length; i++) u8arr[i] = bstr.charCodeAt(i);
+    return new File([u8arr], filename, { type: mime });
+  };
+
+  const handleCapture = async (mode: AnalysisMode) => {
+    if (videoRef.current && canvasRef.current) {
+      const ctx = canvasRef.current.getContext("2d");
+      if (ctx) {
+        ctx.drawImage(videoRef.current, 0, 0, 960, 720);
+        const dataUrl = canvasRef.current.toDataURL("image/png");
+        setCaptured(dataUrl);
+        setStatus("analysis");
+        setError(null);
+        try {
+          const file = dataURLtoFile(dataUrl, "webcam.png");
+          const data = await apiClient.getDefectResult(file, mode);
+          setDefectResults(data.results);
+          setInferenceTime(data.inferenceTime);
+          setStatus("result");
+        } catch {
+          setError("Backend rejected the image format or analysis failed.");
+          setStatus("greeting");
+        }
+      }
+    }
+  };
+
+  const formatFullDate = (date: Date): string => {
+    const time = date.toLocaleTimeString("en-GB", { hour12: false });
+    const dayMonthYear = date.toLocaleDateString("en-GB", {
+      day: "2-digit",
+      month: "2-digit",
+      year: "numeric",
+    });
+    return `${time} - ${dayMonthYear}`;
+  };
+
+  const handleRestartWebcam = () => {
+    setCaptured(null);
+    setDefectResults([]);
+    setError(null);
+    setStatus("greeting");
+  };
+
+  const handleCaptureAndAnalysis = (mode: AnalysisMode) => {
+    setCaptured(null);
+    setDefectResults([]);
+    setError(null);
+    setAnalysisMode(mode);
+    setStatus("greeting");
+    setTimeout(() => handleCapture(mode), 100);
+  };
+
+  const handleReturnPage = () => {
+    if (videoRef.current && videoRef.current.srcObject) {
+      (videoRef.current.srcObject as MediaStream)
+        .getTracks()
+        .forEach((track) => track.stop());
+    }
+    navigate("/quality-inspection", { state: { autoStart: true } });
+  };
+
+  const handleBBoxColor = (categoryId: number) => {
+    switch (categoryId) {
+      case 0:
+        return MISSING_HOLE_COLOR;
+      case 3:
+        return SHORT_CIRCUIT_COLOR;
+      default:
+        return DEFAULT_COLOR;
+    }
+  };
+
+  return (
+    <Container
+      fluid
+      className="quality-inspection-container vh-100 d-flex flex-column p-4 bg-black text-white"
+    >
+      <div className="w-100 mb-4 d-flex align-items-center">
+        <div className="flex-grow-1"></div>
+
+        <div className="text-center">
+          <Image src={logo} alt="SECO" style={{ height: "30px" }} />
+        </div>
+
+        <div className="flex-grow-1 d-flex justify-content-end text-secondary small">
+          {formatFullDate(currentTime)}
+        </div>
+      </div>
+
+      {error && (
+        <Alert
+          onClose={() => setError(null)}
+          dismissible
+          variant="danger"
+          className="mb-3"
+        >
+          {error}
+        </Alert>
+      )}
+
+      <div className="row flex-grow-1 overflow-hidden">
+        <div className="col-md-7 d-flex flex-column h-100">
+          <div
+            className="position-relative flex-grow-1 bg-dark rounded-4 overflow-hidden border border-secondary shadow-lg d-flex align-items-center justify-content-center"
+            style={{ minHeight: 320 }}
+          >
+            {status === "greeting" && (
+              <div
+                style={{
+                  position: "absolute",
+                  left: 0,
+                  top: 0,
+                  width: "100%",
+                  height: "100%",
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                }}
+              >
+                <video
+                  ref={videoRef}
+                  width={960}
+                  height={720}
+                  autoPlay
+                  muted
+                  playsInline
+                  style={{
+                    background: "#222",
+                    maxWidth: "100%",
+                    maxHeight: "100%",
+                  }}
+                />
+                <canvas
+                  ref={canvasRef}
+                  width={960}
+                  height={720}
+                  style={{ display: "none" }}
+                />
+              </div>
+            )}
+            {captured && (status === "analysis" || status === "result") && (
+              <div className="position-relative d-inline-block mb-4">
+                <Image
+                  ref={imageRef}
+                  src={captured}
+                  className="mw-100 mh-100 shadow-lg"
+                  style={{ objectFit: "contain" }}
+                />
+                {status === "result" &&
+                  defectResults.map((defect, index) => (
+                    <div
+                      key={index}
+                      className="position-absolute"
+                      style={{
+                        zIndex: 10,
+                        left: `${defect.bbox[0] * scale.x}px`,
+                        top: `${defect.bbox[1] * scale.y}px`,
+                        width: `${defect.bbox[2] * scale.x}px`,
+                        height: `${defect.bbox[3] * scale.y}px`,
+                        border: `3px solid ${handleBBoxColor(defect.categoryId)}`,
+                        backgroundColor: "rgba(255, 0, 0, 0.1)",
+                        pointerEvents: "none",
+                      }}
+                    />
+                  ))}
+              </div>
+            )}
+          </div>
+        </div>
+        <div className="col-md-5 d-flex flex-column align-items-center justify-content-center">
+          <div className="mb-5 mt-5 text-center">
+            {status === "analysis" && (
+              <div className="spinner-border mb-5 spinner" role="status" />
+            )}
+            <h3 className="fw-bold d-flex flex-column align-items-start text-start">
+              {status === "analysis" ? (
+                <FormattedMessage
+                  id="qualityInspection.analyseMessage"
+                  defaultMessage="Scanning in progress..."
+                />
+              ) : (
+                <div className="d-flex flex-column align-items-start gap-1">
+                  <FormattedMessage
+                    id="qualityInspection.anomaliesDetectedMessage"
+                    defaultMessage="Anomalies detected"
+                  />
+
+                  {status === "result" && inferenceTime !== null && (
+                    <div
+                      className="mb-2"
+                      style={{
+                        fontSize: "1rem",
+                        color: "#fff",
+                        fontStyle: "italic",
+                      }}
+                    >
+                      Inference time:{" "}
+                      <strong>{inferenceTime.toFixed(2)} ms</strong>
+                    </div>
+                  )}
+
+                  <div className="d-flex align-items-center">
+                    <span
+                      className="status-box me-2"
+                      style={{ borderColor: MISSING_HOLE_COLOR }}
+                    ></span>
+                    <FormattedMessage
+                      id="qualityInspection.missingHole"
+                      defaultMessage="Missing hole"
+                    />
+                  </div>
+
+                  <div className="d-flex align-items-center">
+                    <span
+                      className="status-box me-2"
+                      style={{ borderColor: SHORT_CIRCUIT_COLOR }}
+                    ></span>
+                    <FormattedMessage
+                      id="qualityInspection.shortCircuit"
+                      defaultMessage="Short circuit"
+                    />
+                  </div>
+                </div>
+              )}
+            </h3>
+          </div>
+        </div>
+        <div></div>
+      </div>
+      <div className="mt-3 d-flex justify-content-center d-flex gap-2">
+        <Button
+          variant="light"
+          className=" analyze-cpu-button flex-grow-1 py-3 fw-bold"
+          onClick={handleReturnPage}
+        >
+          Gallery
+        </Button>
+        <Button
+          variant="light"
+          disabled={status === "analysis"}
+          className={`analyze-cpu-button py-2 px-5 fw-bold ${status === "analysis" && analysisMode === "cpu" ? "active-analysis" : ""}`}
+          onClick={() => handleCaptureAndAnalysis("cpu")}
+        >
+          <FormattedMessage
+            id="components.QualityInspection.cpuAnalysisButton"
+            defaultMessage="CPU Analysis"
+          />
+        </Button>
+        <Button
+          variant="light"
+          disabled={status === "analysis"}
+          className={`analyze-npu-button py-2 px-5 fw-bold ${status === "analysis" && analysisMode === "npu" ? "active-analysis" : ""}`}
+          onClick={() => handleCaptureAndAnalysis("npu")}
+        >
+          <FormattedMessage
+            id="components.QualityInspection.npuAnalysisButton"
+            defaultMessage="NPU Analysis"
+          />
+        </Button>
+        <Button
+          variant="light"
+          className=" analyze-npu-button flex-grow-1 py-3 fw-bold"
+          onClick={handleRestartWebcam}
+          disabled={status === "greeting"}
+        >
+          Live Webcam Feedback
+        </Button>
+      </div>
+    </Container>
+  );
+};
+
+export default QualityInspectionWebcam;
diff --git a/oobe/src/pages/SampleIntegrityCheck.tsx b/oobe/src/pages/SampleIntegrityCheck.tsx
index 0c836df..dbf6977 100644
--- a/oobe/src/pages/SampleIntegrityCheck.tsx
+++ b/oobe/src/pages/SampleIntegrityCheck.tsx
@@ -1,7 +1,7 @@
 import { Container, Image, Button, Alert } from "react-bootstrap";
 import { logo } from "../assets/images";
 import "./SampleIntegrityCheck.scss";
-import { useNavigate } from "react-router-dom";
+import { useLocation, useNavigate } from "react-router-dom";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faX } from "@fortawesome/free-solid-svg-icons";
 import { FormattedMessage, useIntl } from "react-intl";
@@ -125,6 +125,14 @@ const SampleIntegrityCheck = ({ apiClient }: SampleIntegrityCheckProps) => {
     if (currentImage) processImage();
   }, [apiClient, currentImage, status, intl]);
 
+  const location = useLocation();
+
+  useEffect(() => {
+    if (location.state?.autoStart) {
+      setStatus("analysis");
+    }
+  }, [location.state]);
+
   const handleBBoxColor = (categoryId: number) => {
     switch (categoryId) {
       case 1:
@@ -286,6 +294,13 @@ const SampleIntegrityCheck = ({ apiClient }: SampleIntegrityCheckProps) => {
             </div>
 
             <div className="d-flex flex-wrap justify-content-center gap-3 mt-auto mb-4">
+              <Button
+                variant="light"
+                className="analysis-result-button py-2 px-5 fw-bold"
+                onClick={() => navigate("/sample-integrity-check/webcam")}
+              >
+                Live webcam Analysis
+              </Button>
               <Button
                 variant="light"
                 className="analysis-result-button py-2 px-5 fw-bold"
diff --git a/oobe/src/pages/SampleIntegrityCheckWebcam.tsx b/oobe/src/pages/SampleIntegrityCheckWebcam.tsx
new file mode 100644
index 0000000..8ef72e6
--- /dev/null
+++ b/oobe/src/pages/SampleIntegrityCheckWebcam.tsx
@@ -0,0 +1,300 @@
+import React, { useRef, useState } from "react";
+import { Container, Button, Alert, Image } from "react-bootstrap";
+import { useNavigate } from "react-router-dom";
+import { APIClient } from "../api/APIClient";
+import { logo } from "../assets/images";
+import { FormattedMessage } from "react-intl";
+
+const EMPTY_BLISTER_COLOR = "#FF0000";
+const FULL_BLISTER_COLOR = "#FFC107";
+const DEFAULT_COLOR = "#222322";
+
+export type BlisterPackResult = {
+  categoryId: number;
+  bbox: number[];
+  score: number;
+};
+
+const SampleIntegrityCheckWebcam = () => {
+  const streamRef = useRef<MediaStream | null>(null);
+  const videoRef = useRef<HTMLVideoElement>(null);
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+  const imageRef = useRef<HTMLImageElement>(null);
+  const [status, setStatus] = useState("greeting");
+  const [blisterPackResults, setBlisterPackResults] = useState<
+    BlisterPackResult[]
+  >([]);
+  const [error, setError] = useState<string | null>(null);
+  const [captured, setCaptured] = useState<string | null>(null);
+  const [currentTime] = useState(new Date());
+  const [scale] = useState({ x: 1, y: 1 });
+  const navigate = useNavigate();
+  const apiClient = new APIClient();
+
+  React.useEffect(() => {
+    navigator.mediaDevices.getUserMedia({ video: true }).then((stream) => {
+      streamRef.current = stream;
+      if (videoRef.current) videoRef.current.srcObject = stream;
+    });
+    return () => {
+      if (streamRef.current) {
+        streamRef.current.getTracks().forEach((track) => track.stop());
+      }
+    };
+  }, []);
+
+  React.useEffect(() => {
+    if (status === "greeting" && videoRef.current && streamRef.current) {
+      videoRef.current.srcObject = streamRef.current;
+    }
+  }, [status]);
+
+  const dataURLtoFile = (dataurl: string, filename: string) => {
+    const arr = dataurl.split(",");
+    const mime = arr[0].match(/:(.*?);/)![1];
+    const bstr = atob(arr[1]);
+    const u8arr = new Uint8Array(bstr.length);
+    for (let i = 0; i < bstr.length; i++) u8arr[i] = bstr.charCodeAt(i);
+    return new File([u8arr], filename, { type: mime });
+  };
+
+  const handleCapture = async () => {
+    if (videoRef.current && canvasRef.current) {
+      const ctx = canvasRef.current.getContext("2d");
+      if (ctx) {
+        ctx.drawImage(videoRef.current, 0, 0, 960, 720);
+        const dataUrl = canvasRef.current.toDataURL("image/png");
+        setCaptured(dataUrl);
+        setStatus("analysis");
+        setError(null);
+        try {
+          const file = dataURLtoFile(dataUrl, "webcam.png");
+          const data = await apiClient.getBlisterPackResult(file);
+          setBlisterPackResults(data);
+          setStatus("result");
+        } catch {
+          setError("Backend rejected the image format or analysis failed.");
+          setStatus("greeting");
+        }
+      }
+    }
+  };
+
+  const formatFullDate = (date: Date): string => {
+    const time = date.toLocaleTimeString("en-GB", { hour12: false });
+    const dayMonthYear = date.toLocaleDateString("en-GB", {
+      day: "2-digit",
+      month: "2-digit",
+      year: "numeric",
+    });
+    return `${time} - ${dayMonthYear}`;
+  };
+
+  const handleRestartWebcam = () => {
+    setCaptured(null);
+    setBlisterPackResults([]);
+    setError(null);
+    setStatus("greeting");
+  };
+
+  const handleCaptureAndAnalysis = () => {
+    setCaptured(null);
+    setBlisterPackResults([]);
+    setError(null);
+    setStatus("greeting");
+    setTimeout(() => handleCapture(), 100);
+  };
+
+  const handleReturnPage = () => {
+    if (videoRef.current && videoRef.current.srcObject) {
+      (videoRef.current.srcObject as MediaStream)
+        .getTracks()
+        .forEach((track) => track.stop());
+    }
+    navigate("/sample-integrity-check", { state: { autoStart: true } });
+  };
+
+  const handleBBoxColor = (categoryId: number) => {
+    switch (categoryId) {
+      case 1:
+        return EMPTY_BLISTER_COLOR;
+      case 2:
+        return FULL_BLISTER_COLOR;
+      default:
+        return DEFAULT_COLOR;
+    }
+  };
+
+  return (
+    <Container
+      fluid
+      className="quality-inspection-container vh-100 d-flex flex-column p-4 bg-black text-white"
+    >
+      <div className="w-100 mb-4 d-flex align-items-center">
+        <div className="flex-grow-1"></div>
+
+        <div className="text-center">
+          <Image src={logo} alt="SECO" style={{ height: "30px" }} />
+        </div>
+
+        <div className="flex-grow-1 d-flex justify-content-end text-secondary small">
+          {formatFullDate(currentTime)}
+        </div>
+      </div>
+
+      {error && (
+        <Alert
+          onClose={() => setError(null)}
+          dismissible
+          variant="danger"
+          className="mb-3"
+        >
+          {error}
+        </Alert>
+      )}
+
+      <div className="row flex-grow-1 overflow-hidden">
+        <div className="col-md-7 d-flex flex-column h-100">
+          <div
+            className="position-relative flex-grow-1 bg-dark rounded-4 overflow-hidden border border-secondary shadow-lg d-flex align-items-center justify-content-center"
+            style={{ minHeight: 320 }}
+          >
+            {status === "greeting" && (
+              <div
+                style={{
+                  position: "absolute",
+                  left: 0,
+                  top: 0,
+                  width: "100%",
+                  height: "100%",
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                }}
+              >
+                <video
+                  ref={videoRef}
+                  width={960}
+                  height={720}
+                  autoPlay
+                  muted
+                  playsInline
+                  style={{
+                    background: "#222",
+                    maxWidth: "100%",
+                    maxHeight: "100%",
+                  }}
+                />
+                <canvas
+                  ref={canvasRef}
+                  width={960}
+                  height={720}
+                  style={{ display: "none" }}
+                />
+              </div>
+            )}
+
+            {captured && (status === "analysis" || status === "result") && (
+              <div className="position-relative d-inline-block mb-4">
+                <Image
+                  ref={imageRef}
+                  src={captured}
+                  className="mw-100 mh-100 shadow-lg"
+                  style={{ objectFit: "contain" }}
+                />
+                {status === "result" &&
+                  blisterPackResults.map((defect, index) => (
+                    <div
+                      key={index}
+                      className="position-absolute"
+                      style={{
+                        zIndex: 10,
+                        left: `${defect.bbox[0] * scale.x}px`,
+                        top: `${defect.bbox[1] * scale.y}px`,
+                        width: `${defect.bbox[2] * scale.x}px`,
+                        height: `${defect.bbox[3] * scale.y}px`,
+                        border: `3px solid ${handleBBoxColor(defect.categoryId)}`,
+                        backgroundColor: "rgba(255, 0, 0, 0.1)",
+                        pointerEvents: "none",
+                      }}
+                    />
+                  ))}
+              </div>
+            )}
+          </div>
+        </div>
+        <div className="col-md-5 d-flex flex-column align-items-center justify-content-center">
+          <div className="mb-5 mt-5 text-center">
+            {status === "analysis" && (
+              <div className="spinner-border mb-5 spinner" role="status" />
+            )}
+            <h3 className="fw-bold d-flex flex-column align-items-start text-start">
+              {status === "analysis" ? (
+                <FormattedMessage
+                  id="SampleIntegrityCheck.analyseMessage"
+                  defaultMessage="Scanning in progress..."
+                />
+              ) : (
+                <div className="d-flex flex-column align-items-start gap-1">
+                  <FormattedMessage
+                    id="SampleIntegrityCheck.anomaliesDetectedMessage"
+                    defaultMessage="Anomalies detected"
+                  />
+
+                  <div className="d-flex align-items-center">
+                    <span
+                      className="status-box me-2"
+                      style={{ borderColor: EMPTY_BLISTER_COLOR }}
+                    ></span>
+                    <FormattedMessage
+                      id="SampleIntegrityCheck.emptyBlister"
+                      defaultMessage="Empty blister"
+                    />
+                  </div>
+                  <div className="d-flex align-items-center">
+                    <span
+                      className="status-box me-2"
+                      style={{ borderColor: FULL_BLISTER_COLOR }}
+                    ></span>
+                    <FormattedMessage
+                      id="SampleIntegrityCheck.fullBlister"
+                      defaultMessage="Full blister"
+                    />
+                  </div>
+                </div>
+              )}{" "}
+            </h3>
+          </div>
+        </div>
+        <div></div>
+      </div>
+      <div className="pt-3 d-flex gap-2">
+        <Button
+          variant="light"
+          className="analysis-result-button flex-grow-1 py-3 fw-bold"
+          onClick={handleReturnPage}
+        >
+          Gallery
+        </Button>
+        <Button
+          variant="light"
+          className="analysis-result-button flex-grow-1 py-3 fw-bold border-2"
+          onClick={handleCaptureAndAnalysis}
+          disabled={status === "analysis"}
+        >
+          {status === "analysis" ? "Scanning in progress..." : "Start Analysis"}
+        </Button>
+        <Button
+          variant="light"
+          className="analysis-result-button flex-grow-1 py-3 fw-bold"
+          onClick={handleRestartWebcam}
+          disabled={status === "greeting"}
+        >
+          Live Webcam Feedback
+        </Button>
+      </div>
+    </Container>
+  );
+};
+
+export default SampleIntegrityCheckWebcam;

From 390b1ed24cb18dcc5c2aff51ec192d5637d60dec Mon Sep 17 00:00:00 2001
From: Carlo Ferriolo <carlo.ferriolo@seco.com>
Date: Mon, 20 Apr 2026 15:08:37 +0200
Subject: [PATCH 2/2] [OOBE] add new button for cpu, gpu and npu analysis

In this commit has been done few changes regarding the functioning of
main and webcam analysis.
In webcam pages there were already the possibility to access the camera
for the analysis but no mode (cpu, gpu or npu) can be chosen. To do so have
been added three more buttons which starts the live webcam analysis
with the corresponding endpoint and AI model.
Furthermore, to enhance the processor units this work has been done for
main analysis which does not require the webcam but only the carousel
part.
The newest endpoint created for blister and people detection are:

/people-detect-cpu
/people-detect-gpu
/people-detect-npu

/blister-pack-detect-cpu
/blister-pack-detect-gpu
/blister-pack-detect-npu

while the ones corresponding to the pcb don't change.

Signed-off-by: Carlo Ferriolo <carlo.ferriolo@seco.com>
---
 oobe/src/api/APIClient.ts                     |  49 ++-
 oobe/src/i18n/langs/en.json                   |  36 +-
 oobe/src/pages/CrowdAndFallDetection.scss     |  35 ++
 oobe/src/pages/CrowdAndFallDetection.tsx      | 381 +++++++++--------
 .../src/pages/CrowdAndFallDetectionWebcam.tsx | 390 ++++++++++--------
 oobe/src/pages/QualityInspection.scss         |   1 +
 oobe/src/pages/QualityInspection.tsx          | 358 +++++++---------
 oobe/src/pages/QualityInspectionWebcam.tsx    | 348 +++++++++-------
 oobe/src/pages/SampleIntegrityCheck.scss      |  20 +-
 oobe/src/pages/SampleIntegrityCheck.tsx       | 360 ++++++++--------
 oobe/src/pages/SampleIntegrityCheckWebcam.tsx | 342 +++++++++------
 11 files changed, 1231 insertions(+), 1089 deletions(-)

diff --git a/oobe/src/api/APIClient.ts b/oobe/src/api/APIClient.ts
index be261f1..26ada17 100644
--- a/oobe/src/api/APIClient.ts
+++ b/oobe/src/api/APIClient.ts
@@ -23,12 +23,6 @@ export type PersonResult = {
   score: number;
 };
 
-interface BackendPersonResult {
-  category_id: number;
-  bbox: number[];
-  score: number;
-}
-
 export type InverterStatus = "ready" | "fault";
 export type SmartUpdate =
   | { field: "plantStatus"; value: string }
@@ -110,7 +104,12 @@ type FaceRecognitionMessage = {
   data: FaceRecognitionUpdate[];
 };
 
-export type AnalysisMode = "cpu" | "npu";
+export type AnalysisMode = "cpu" | "gpu" | "npu";
+
+export interface DetectionResponse<T> {
+  results: T[];
+  inferenceTime: number;
+}
 
 export class APIClient {
   private config: Config;
@@ -160,9 +159,12 @@ export class APIClient {
     };
   }
 
-  async getBlisterPackResult(imageFile: File): Promise<BlisterPackResult[]> {
-    const response = await this.axiosInstance.post<AIDetectionResultItem[]>(
-      "/blister-pack-detect",
+  async getBlisterPackResult(
+    imageFile: File,
+    mode: AnalysisMode,
+  ): Promise<DetectionResponse<BlisterPackResult>> {
+    const response = await this.axiosInstance.post<AIDetectionResult>(
+      `/blister-pack-detect-${mode}`,
       imageFile,
       {
         headers: {
@@ -170,13 +172,14 @@ export class APIClient {
         },
       },
     );
-    return response.data.map(
-      (item): BlisterPackResult => ({
+    return {
+      results: response.data.items.map((item) => ({
         categoryId: item.category_id,
         bbox: item.bbox,
         score: item.score,
-      }),
-    );
+      })),
+      inferenceTime: response.data.inferenceTime,
+    };
   }
 
   async exitApp(): Promise<void> {
@@ -469,9 +472,12 @@ export class APIClient {
     };
   }
 
-  async getPersonResult(imageFile: File): Promise<PersonResult[]> {
-    const response = await this.axiosInstance.post<BackendPersonResult[]>(
-      "/people-detect",
+  async getPersonResult(
+    imageFile: File,
+    mode: AnalysisMode,
+  ): Promise<DetectionResponse<PersonResult>> {
+    const response = await this.axiosInstance.post<AIDetectionResult>(
+      `/people-detect-${mode}`,
       imageFile,
       {
         headers: {
@@ -480,13 +486,14 @@ export class APIClient {
       },
     );
 
-    return response.data.map(
-      (item): PersonResult => ({
+    return {
+      results: response.data.items.map((item) => ({
         categoryId: item.category_id,
         bbox: item.bbox,
         score: item.score,
-      }),
-    );
+      })),
+      inferenceTime: response.data.inferenceTime,
+    };
   }
 
   disconnectWebSocket(wsType?: string) {
diff --git a/oobe/src/i18n/langs/en.json b/oobe/src/i18n/langs/en.json
index b7c7a83..d0bf9b5 100644
--- a/oobe/src/i18n/langs/en.json
+++ b/oobe/src/i18n/langs/en.json
@@ -80,6 +80,15 @@
   "components.BloodCountMedical.unit": {
     "defaultMessage": "Unit"
   },
+  "components.CrowdAndFallDetection.cpuAnalysisButton": {
+    "defaultMessage": "CPU Analysis"
+  },
+  "components.CrowdAndFallDetection.gpuAnalysisButton": {
+    "defaultMessage": "GPU Analysis"
+  },
+  "components.CrowdAndFallDetection.npuAnalysisButton": {
+    "defaultMessage": "NPU Analysis"
+  },
   "components.DeviceDetailsCard.cpuArchitecture": {
     "defaultMessage": "CPU architecture"
   },
@@ -122,32 +131,23 @@
   "components.GeolocalizationCard.title": {
     "defaultMessage": "Geolocalization"
   },
-  "components.QualityInspection.analyzeNextMessage": {
-    "defaultMessage": "This is a demo environment, the camera feed is simulated. Click ‘CPU Analysis’ or 'NPU Analysis' to run inference"
-  },
   "components.QualityInspection.cpuAnalysisButton": {
     "defaultMessage": "CPU Analysis"
   },
+  "components.QualityInspection.gpuAnalysisButton": {
+    "defaultMessage": "GPU Analysis"
+  },
   "components.QualityInspection.npuAnalysisButton": {
     "defaultMessage": "NPU Analysis"
   },
-  "components.QualityInspection.startAnalysisButton": {
-    "defaultMessage": "Start analysis"
-  },
-  "components.QualityInspection.startAnalysisMessage": {
-    "defaultMessage": "This is a demo environment, the camera feed is simulated. Click ‘Start Analysis’ to run inference."
-  },
-  "components.SampleIntegrityCheck.analyzeNextButton": {
-    "defaultMessage": "Analyze next object"
-  },
-  "components.SampleIntegrityCheck.analyzeNextMessage": {
-    "defaultMessage": "This is a demo environment, the camera feed is simulated. Click ‘Analyze next object’ to run inference."
+  "components.SampleIntegrityCheck.cpuAnalysisButton": {
+    "defaultMessage": "CPU Analysis"
   },
-  "components.SampleIntegrityCheck.startAnalysisMessage": {
-    "defaultMessage": "This is a demo environment, the camera feed is simulated. Click ‘Start Analysis’ to run inference."
+  "components.SampleIntegrityCheck.gpuAnalysisButton": {
+    "defaultMessage": "GPU Analysis"
   },
-  "components.SampleIntegrityCheck.startButton": {
-    "defaultMessage": "Start analysis"
+  "components.SampleIntegrityCheck.npuAnalysisButton": {
+    "defaultMessage": "NPU Analysis"
   },
   "components.Sidebar.dashboard": {
     "defaultMessage": "Dashboard"
diff --git a/oobe/src/pages/CrowdAndFallDetection.scss b/oobe/src/pages/CrowdAndFallDetection.scss
index 260417b..1acca0e 100644
--- a/oobe/src/pages/CrowdAndFallDetection.scss
+++ b/oobe/src/pages/CrowdAndFallDetection.scss
@@ -37,6 +37,41 @@
     }
   }
 
+  .greeting-button {
+    background-color: #e2e5f3;
+    border: none;
+    border-radius: 6px;
+    color: #1a1a1a;
+    font-size: 1rem;
+    min-width: 200px;
+    height: 52px;
+
+    &:hover {
+      background-color: #d1d5e8;
+    }
+  }
+
+  .analyze-cpu-button,
+  .analyze-gpu-button,
+  .analyze-npu-button {
+    @extend .greeting-button;
+    height: 52px;
+    transition: all 0.3s ease;
+
+    &.active-analysis {
+      color: #919191 !important;
+      background-color: #e2e5f3 !important;
+      opacity: 0.6;
+      cursor: wait;
+    }
+
+    &:disabled:not(.active-analysis) {
+      opacity: 0.8;
+      background-color: #ffffff;
+      color: #ccc;
+    }
+  }
+
   @media (max-width: 768px) {
     overflow-y: auto !important;
     .vh-100 {
diff --git a/oobe/src/pages/CrowdAndFallDetection.tsx b/oobe/src/pages/CrowdAndFallDetection.tsx
index 5d5eb16..764881b 100644
--- a/oobe/src/pages/CrowdAndFallDetection.tsx
+++ b/oobe/src/pages/CrowdAndFallDetection.tsx
@@ -1,11 +1,11 @@
 import { Container, Image, Button, Alert } from "react-bootstrap";
 import { useState, useEffect, useRef, useLayoutEffect } from "react";
-import { useLocation, useNavigate } from "react-router-dom";
+import { useNavigate } from "react-router-dom";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faX, faExclamationTriangle } from "@fortawesome/free-solid-svg-icons";
 import { FormattedMessage, defineMessages } from "react-intl";
 import ImageCarousel from "./ImageCarousel";
-import { APIClient } from "../api/APIClient";
+import { APIClient, type AnalysisMode } from "../api/APIClient";
 import {
   logo,
   elevator_second_floor_1,
@@ -126,9 +126,11 @@ const urlToFile = async (url: string): Promise<File> => {
 
 const CrowdAndFallDetection = ({ apiClient }: CrowdAndFallDetectionProps) => {
   const [results, setResults] = useState<PersonResult[]>([]);
+  const [analysisMode, setAnalysisMode] = useState<AnalysisMode>("cpu");
+  const [inferenceTime, setInferenceTime] = useState<number | null>(null);
   const [error, setError] = useState<string | null>(null);
   const [status, setStatus] = useState<"greeting" | "analysis" | "result">(
-    "greeting",
+    "analysis",
   );
   const [currentTime, setCurrentTime] = useState(new Date());
   const [analysisTime, setAnalysisTime] = useState<Date | null>(null);
@@ -187,38 +189,25 @@ const CrowdAndFallDetection = ({ apiClient }: CrowdAndFallDetectionProps) => {
     return () => clearInterval(timer);
   }, []);
 
-  const location = useLocation();
-
-  useEffect(() => {
-    if (location.state?.autoStart) {
-      setStatus("analysis");
-    }
-  }, [location.state]);
-
   useEffect(() => {
     if (status !== "analysis") return;
     const processImage = async () => {
       try {
         setResults([]);
+        setInferenceTime(null);
         const file = await urlToFile(currentImage);
-        const data = await apiClient.getPersonResult(file);
-        setResults(data);
+        const data = await apiClient.getPersonResult(file, analysisMode);
+        setResults(data.results);
+        setInferenceTime(data.inferenceTime);
         setAnalysisTime(new Date());
         setStatus("result");
       } catch {
         setError("Error");
-        setStatus("greeting");
+        setStatus("analysis");
       }
     };
     processImage();
-  }, [apiClient, currentImage, status]);
-
-  const changeImage = (dir: number) => {
-    const idx = imageOptions.indexOf(currentImage);
-    const next = (idx + dir + imageOptions.length) % imageOptions.length;
-    setCurrentImage(imageOptions[next]);
-    setStatus("analysis");
-  };
+  }, [apiClient, currentImage, status, analysisMode]);
 
   return (
     <Container
@@ -234,188 +223,214 @@ const CrowdAndFallDetection = ({ apiClient }: CrowdAndFallDetectionProps) => {
           <FontAwesomeIcon icon={faX} size="lg" />
         </Button>
         <Image src={logo} alt="SECO" style={{ height: "30px" }} />
-        <div className="text-secondary small">
+        <div className="flex-grow-1 d-flex justify-content-end text-secondary small">
           {formatFullDate(currentTime)}
         </div>
       </div>
 
-      {status === "greeting" ? (
-        <div className="flex-grow-1 d-flex justify-content-center align-items-center">
-          <Button
-            variant="light"
-            size="lg"
-            className="fw-bold px-5 py-3 rounded-pill shadow-lg"
-            onClick={() => setStatus("analysis")}
+      <div className="row flex-grow-1 align-items-center mb-5">
+        <div className="col-md-6 d-flex flex-column align-items-center mx-auto">
+          <div
+            ref={containerRef}
+            className="position-relative flex-grow-1 bg-dark rounded-4 overflow-hidden border border-secondary shadow-lg d-flex align-items-center justify-content-center"
           >
-            <FormattedMessage {...messages.startAnalysis} />
-          </Button>
-        </div>
-      ) : (
-        <div className="row flex-grow-1 overflow-hidden">
-          <div className="col-md-7 d-flex flex-column h-100">
             <div
-              ref={containerRef}
-              className="position-relative flex-grow-1 bg-dark rounded-4 overflow-hidden border border-secondary shadow-lg d-flex align-items-center justify-content-center"
+              className="position-absolute"
+              style={{
+                width: imgRect.width,
+                height: imgRect.height,
+                left: imgRect.left,
+                top: imgRect.top,
+                pointerEvents: "none",
+                zIndex: 10,
+              }}
             >
-              <div
-                className="position-absolute"
-                style={{
-                  width: imgRect.width,
-                  height: imgRect.height,
-                  left: imgRect.left,
-                  top: imgRect.top,
-                  pointerEvents: "none",
-                  zIndex: 10,
-                }}
-              >
-                {status === "result" &&
-                  results.map((r, i) => {
-                    const scaleX =
-                      imgRect.width / (imageRef.current?.naturalWidth || 1);
-                    const scaleY =
-                      imgRect.height / (imageRef.current?.naturalHeight || 1);
-                    const isFall = r.categoryId === 1;
-                    const boxColor = isFall
-                      ? "#FF0000"
-                      : DETECTION_COLORS[i % DETECTION_COLORS.length];
+              {status === "result" &&
+                results.map((r, i) => {
+                  const scaleX =
+                    imgRect.width / (imageRef.current?.naturalWidth || 1);
+                  const scaleY =
+                    imgRect.height / (imageRef.current?.naturalHeight || 1);
+                  const isFall = r.categoryId === 1;
+                  const boxColor = isFall
+                    ? "#FF0000"
+                    : DETECTION_COLORS[i % DETECTION_COLORS.length];
 
-                    return (
-                      <div
-                        key={i}
-                        className="position-absolute"
-                        style={{
-                          left: r.bbox[0] * scaleX,
-                          top: r.bbox[1] * scaleY,
-                          width: r.bbox[2] * scaleX,
-                          height: r.bbox[3] * scaleY,
-                          border: `3px solid ${boxColor}`,
-                          boxShadow: isFall
-                            ? `0 0 15px #FF0000`
-                            : `0 0 5px ${boxColor}66`,
-                        }}
-                      ></div>
-                    );
-                  })}
-              </div>
-              <Image
-                ref={imageRef}
-                src={currentImage}
-                onLoad={updateLayout}
-                className="mw-100 mh-100 shadow-lg"
-                style={{ objectFit: "contain" }}
-              />
+                  return (
+                    <div
+                      key={i}
+                      className="position-absolute"
+                      style={{
+                        left: r.bbox[0] * scaleX,
+                        top: r.bbox[1] * scaleY,
+                        width: r.bbox[2] * scaleX,
+                        height: r.bbox[3] * scaleY,
+                        border: `3px solid ${boxColor}`,
+                        boxShadow: isFall
+                          ? `0 0 15px #FF0000`
+                          : `0 0 5px ${boxColor}66`,
+                      }}
+                    ></div>
+                  );
+                })}
             </div>
+            <Image
+              ref={imageRef}
+              src={currentImage}
+              onLoad={updateLayout}
+              className="mw-100 mh-100 shadow-lg"
+              style={{ objectFit: "contain" }}
+            />
+          </div>
 
-            <div className="py-3 mt-auto">
-              <ImageCarousel
-                images={imageOptions}
-                currentImage={currentImage}
-                onSelect={(img) => {
-                  setCurrentImage(img);
-                  setStatus("analysis");
-                }}
+          <div className="py-3 mt-3 w-100">
+            <ImageCarousel
+              images={imageOptions}
+              currentImage={currentImage}
+              onSelect={(img) => {
+                setCurrentImage(img);
+                setStatus("analysis");
+              }}
+            />
+          </div>
+        </div>
+
+        <div className="col-md-5 d-flex flex-column align-items-center justify-content-center h-100 ps-md-4">
+          <div className="d-flex align-items-center gap-2 mb-3">
+            <div
+              className={`status-indicator ${hasFall ? "bg-danger animate-pulse" : "bg-success"}`}
+            ></div>
+            <h2 className="fw-bold h5 text-uppercase m-0 text-white">
+              <FormattedMessage
+                id={getLocationTranslationId(currentImage)}
+                defaultMessage="Location"
               />
-            </div>
+            </h2>
           </div>
 
-          <div className="col-md-5 d-flex flex-column ps-md-4 pb-3 h-100">
-            <div className="d-flex align-items-center gap-2 mb-3">
-              <div
-                className={`status-indicator ${hasFall ? "bg-danger animate-pulse" : "bg-success"}`}
-              ></div>
-              <h2 className="fw-bold h5 text-uppercase m-0 text-white">
-                <FormattedMessage
-                  id={getLocationTranslationId(currentImage)}
-                  defaultMessage="Location"
-                />
-              </h2>
+          {status === "result" && inferenceTime !== null && (
+            <div
+              className="mb-2"
+              style={{
+                fontSize: "1rem",
+                color: "#fff",
+                fontStyle: "italic",
+              }}
+            >
+              Inference time: <strong>{inferenceTime.toFixed(2)} ms</strong>
             </div>
+          )}
 
-            <div className="flex-grow-1 overflow-auto pe-2 custom-scrollbar mb-3">
-              {status === "analysis" ? (
-                <div className="d-flex align-items-center gap-3 text-info p-4 bg-dark bg-opacity-50 rounded-4 border border-info border-opacity-25">
-                  <div className="spinner-border spinner-border-sm" />
-                  <FormattedMessage {...messages.scanningMessage} />
-                </div>
-              ) : (
-                <div className="list-group list-group-flush gap-1">
-                  {results.length === 0 ? (
-                    <div className="p-4 text-center border border-secondary border-opacity-25 rounded-4">
-                      <p className="text-secondary small m-0">
-                        <FormattedMessage {...messages.noPersonsDetected} />
-                      </p>
-                    </div>
-                  ) : (
-                    results.map((r, i) => (
-                      <div
-                        key={i}
-                        className="list-group-item bg-dark bg-opacity-25 text-white border-secondary border-opacity-10 px-3 py-2 rounded-3 d-flex justify-content-between align-items-center"
-                      >
-                        <div className="d-flex align-items-center gap-2">
-                          <span className="text-secondary smaller">
-                            #{i + 1}
-                          </span>
-                          <span className="fw-medium">
-                            <FormattedMessage {...messages.personDetected} />
-                          </span>
-                        </div>
-                        <div className="d-flex align-items-center gap-3">
-                          <span className="text-secondary smaller">
-                            {analysisTime ? formatFullDate(analysisTime) : ""}
+          <div className="flex-grow-1 overflow-auto pe-2 custom-scrollbar mb-3">
+            {status === "analysis" ? (
+              <div className="d-flex align-items-center gap-3 text-info p-4 bg-dark bg-opacity-50 rounded-4 border border-info border-opacity-25">
+                <div className="spinner-border spinner-border-sm" />
+                <FormattedMessage {...messages.scanningMessage} />
+              </div>
+            ) : (
+              <div className="list-group list-group-flush gap-1">
+                {results.length === 0 ? (
+                  <div className="p-4 text-center border border-secondary border-opacity-25 rounded-4">
+                    <p className="text-secondary small m-0">
+                      <FormattedMessage {...messages.noPersonsDetected} />
+                    </p>
+                  </div>
+                ) : (
+                  results.map((r, i) => (
+                    <div
+                      key={i}
+                      className="list-group-item bg-dark bg-opacity-25 text-white border-secondary border-opacity-10 px-3 py-2 rounded-3 d-flex justify-content-between align-items-center"
+                    >
+                      <div className="d-flex align-items-center gap-2">
+                        <span className="text-secondary smaller">#{i + 1}</span>
+                        <span className="fw-medium">
+                          <FormattedMessage {...messages.personDetected} />
+                        </span>
+                      </div>
+                      <div className="d-flex align-items-center gap-3">
+                        <span className="text-secondary smaller">
+                          {analysisTime ? formatFullDate(analysisTime) : ""}
+                        </span>
+                        {r.categoryId === 1 && (
+                          <span className="text-danger small fw-bold d-flex align-items-center gap-1">
+                            <FontAwesomeIcon icon={faExclamationTriangle} />
+                            <FormattedMessage {...messages.fallLabel} />
                           </span>
-                          {r.categoryId === 1 && (
-                            <span className="text-danger small fw-bold d-flex align-items-center gap-1">
-                              <FontAwesomeIcon icon={faExclamationTriangle} />
-                              <FormattedMessage {...messages.fallLabel} />
-                            </span>
-                          )}
-                        </div>
+                        )}
                       </div>
-                    ))
-                  )}
-                </div>
-              )}
-            </div>
-
-            <div className="pt-3 border-top border-secondary border-opacity-50">
-              <div className="d-flex justify-content-between align-items-end mb-3">
-                <span className="text-secondary text-uppercase small fw-bold tracking-wider">
-                  <FormattedMessage {...messages.peopleCounter} />
-                </span>
-                <span
-                  className={`display-3 fw-black ${hasFall ? "text-danger" : results.length > 0 ? "text-primary" : "text-white"}`}
-                  style={{ lineHeight: 1 }}
-                >
-                  {results.length.toString().padStart(2, "0")}
-                </span>
-              </div>
-              <div className="d-flex gap-2">
-                <Button
-                  variant="light"
-                  className="flex-grow-1 py-3 fw-bold"
-                  onClick={() => navigate("/crowd-and-fall-detection/webcam")}
-                >
-                  Live Webcam Analysis
-                </Button>
-                <Button
-                  variant="outline-light"
-                  className="flex-grow-1 py-3 fw-bold border-2"
-                  onClick={() => changeImage(-1)}
-                >
-                  <FormattedMessage {...messages.btnPrevious} />
-                </Button>
-                <Button
-                  variant="light"
-                  className="flex-grow-1 py-3 fw-bold"
-                  onClick={() => changeImage(1)}
-                >
-                  <FormattedMessage {...messages.btnNext} />
-                </Button>
+                    </div>
+                  ))
+                )}
               </div>
+            )}
+          </div>
+
+          <div className="pt-3 border-top border-secondary border-opacity-50">
+            <div className="d-flex justify-content-between align-items-end mb-3">
+              <span className="text-secondary text-uppercase small fw-bold tracking-wider">
+                <FormattedMessage {...messages.peopleCounter} />
+              </span>
+              <span
+                className={`display-3 fw-black ${hasFall ? "text-danger" : results.length > 0 ? "text-primary" : "text-white"}`}
+                style={{ lineHeight: 1 }}
+              >
+                {results.length.toString().padStart(2, "0")}
+              </span>
+            </div>
+            <div className="d-flex flex-wrap justify-content-center gap-3 mt-auto mb-4">
+              <Button
+                variant="light"
+                className={`analyze-cpu-button flex-grow-1 py-2 px-2 fw-bold`}
+                onClick={() => navigate("/crowd-and-fall-detection/webcam")}
+              >
+                Live Webcam Analysis
+              </Button>
+              <Button
+                variant="light"
+                disabled={status === "analysis"}
+                className={`analyze-cpu-button flex-grow-1 py-2 px-5 fw-bold ${status === "analysis" && analysisMode === "cpu" ? "active-analysis" : ""}`}
+                onClick={() => {
+                  setStatus("analysis");
+                  setAnalysisMode("cpu");
+                }}
+              >
+                <FormattedMessage
+                  id="components.CrowdAndFallDetection.cpuAnalysisButton"
+                  defaultMessage="CPU Analysis"
+                />
+              </Button>
+              <Button
+                variant="light"
+                disabled={status === "analysis"}
+                className={`analyze-gpu-button flex-grow-1 py-2 px-5 fw-bold ${status === "analysis" && analysisMode === "gpu" ? "active-analysis" : ""}`}
+                onClick={() => {
+                  setStatus("analysis");
+                  setAnalysisMode("gpu");
+                }}
+              >
+                <FormattedMessage
+                  id="components.CrowdAndFallDetection.gpuAnalysisButton"
+                  defaultMessage="GPU Analysis"
+                />
+              </Button>
+              <Button
+                variant="light"
+                disabled={status === "analysis"}
+                className={`analyze-npu-button flex-grow-1 py-2 px-5 fw-bold ${status === "analysis" && analysisMode === "npu" ? "active-analysis" : ""}`}
+                onClick={() => {
+                  setStatus("analysis");
+                  setAnalysisMode("npu");
+                }}
+              >
+                <FormattedMessage
+                  id="components.CrowdAndFallDetection.npuAnalysisButton"
+                  defaultMessage="NPU Analysis"
+                />
+              </Button>
             </div>
           </div>
         </div>
-      )}
+      </div>
       {error && (
         <Alert
           variant="danger"
diff --git a/oobe/src/pages/CrowdAndFallDetectionWebcam.tsx b/oobe/src/pages/CrowdAndFallDetectionWebcam.tsx
index 424a3f9..54e0aff 100644
--- a/oobe/src/pages/CrowdAndFallDetectionWebcam.tsx
+++ b/oobe/src/pages/CrowdAndFallDetectionWebcam.tsx
@@ -1,8 +1,9 @@
-import React, { useRef, useState } from "react";
+import React, { useRef, useState, useMemo } from "react";
 import { Container, Button, Alert, Image } from "react-bootstrap";
 import { useNavigate } from "react-router-dom";
-import { APIClient } from "../api/APIClient";
+import { APIClient, type AnalysisMode } from "../api/APIClient";
 import { logo } from "../assets/images";
+import { FormattedMessage } from "react-intl";
 
 const DETECTION_COLORS = [
   "#00FF00",
@@ -29,21 +30,20 @@ const CrowdAndFallDetectionWebcam = () => {
   const canvasRef = useRef<HTMLCanvasElement>(null);
   const imageRef = useRef<HTMLImageElement>(null);
   const containerRef = useRef<HTMLDivElement>(null);
+  const isAnalyzingRef = useRef(false);
 
-  const [status, setStatus] = useState("greeting");
+  const [status, setStatus] = useState("idle");
   const [results, setResults] = useState<PersonResult[]>([]);
+  const [inferenceTime, setInferenceTime] = useState<number | null>(null);
+  const [analysisMode, setAnalysisMode] = useState<AnalysisMode>("cpu");
   const [error, setError] = useState<string | null>(null);
   const [captured, setCaptured] = useState<string | null>(null);
   const [currentTime] = useState(new Date());
 
   const navigate = useNavigate();
-  const apiClient = new APIClient();
+  const apiClient = useMemo(() => new APIClient(), []);
 
   React.useEffect(() => {
-    navigator.mediaDevices.getUserMedia({ video: true }).then((stream) => {
-      streamRef.current = stream;
-      if (videoRef.current) videoRef.current.srcObject = stream;
-    });
     return () => {
       if (streamRef.current) {
         streamRef.current.getTracks().forEach((track) => track.stop());
@@ -51,43 +51,77 @@ const CrowdAndFallDetectionWebcam = () => {
     };
   }, []);
 
+  const startWebcam = async () => {
+    try {
+      const stream = await navigator.mediaDevices.getUserMedia({ video: true });
+      streamRef.current = stream;
+      setStatus("greeting");
+    } catch {
+      setError(
+        "Failed to access webcam. Please ensure you have given permission.",
+      );
+    }
+  };
+
   React.useEffect(() => {
     if (status === "greeting" && videoRef.current && streamRef.current) {
       videoRef.current.srcObject = streamRef.current;
     }
   }, [status]);
 
-  const dataURLtoFile = (dataurl: string, filename: string) => {
-    const arr = dataurl.split(",");
-    const mime = arr[0].match(/:(.*?);/)![1];
-    const bstr = atob(arr[1]);
-    const u8arr = new Uint8Array(bstr.length);
-    for (let i = 0; i < bstr.length; i++) u8arr[i] = bstr.charCodeAt(i);
-    return new File([u8arr], filename, { type: mime });
-  };
+  React.useEffect(() => {
+    let active = true;
+    const analyzeLoop = async () => {
+      if (
+        status !== "greeting" ||
+        !streamRef.current ||
+        !videoRef.current ||
+        !canvasRef.current
+      )
+        return;
+      if (isAnalyzingRef.current) return;
+
+      isAnalyzingRef.current = true;
+      try {
+        const ctx = canvasRef.current.getContext("2d", { alpha: false });
+        if (ctx) {
+          ctx.drawImage(videoRef.current, 0, 0, 980, 720);
 
-  const handleCapture = async () => {
-    if (videoRef.current && canvasRef.current) {
-      const ctx = canvasRef.current.getContext("2d");
-      if (ctx) {
-        ctx.drawImage(videoRef.current, 0, 0, 960, 720);
-        const dataUrl = canvasRef.current.toDataURL("image/png");
-        setCaptured(dataUrl);
-        setStatus("analysis");
-        setError(null);
-
-        try {
-          const file = dataURLtoFile(dataUrl, "webcam.png");
-          const data = await apiClient.getPersonResult(file);
-          setResults(data);
-          setStatus("result");
-        } catch {
-          setError("Backend rejected the image format or analysis failed.");
-          setStatus("greeting");
+          const blob = await new Promise<Blob | null>((resolve) =>
+            canvasRef.current?.toBlob((b) => resolve(b), "image/jpeg", 0.6),
+          );
+
+          if (blob && active && status === "greeting") {
+            const file = new File([blob], "webcam.jpg", { type: "image/jpeg" });
+            const data = await apiClient.getPersonResult(file, analysisMode);
+            if (active && status === "greeting") {
+              const url = URL.createObjectURL(blob);
+              setCaptured((prev) => {
+                if (prev && prev.startsWith("blob:")) URL.revokeObjectURL(prev);
+                return url;
+              });
+              setResults(data.results);
+              setInferenceTime(data.inferenceTime);
+            }
+          }
+        }
+      } catch (err) {
+        console.error("Loop analysis error:", err);
+      } finally {
+        isAnalyzingRef.current = false;
+        if (active && status === "greeting") {
+          setTimeout(analyzeLoop, 50);
         }
       }
+    };
+
+    if (status === "greeting") {
+      analyzeLoop();
     }
-  };
+    return () => {
+      active = false;
+    };
+  }, [status, analysisMode, apiClient]);
 
   const formatFullDate = (date: Date): string => {
     const time = date.toLocaleTimeString("en-GB", { hour12: false });
@@ -99,30 +133,58 @@ const CrowdAndFallDetectionWebcam = () => {
     return `${time} - ${dayMonthYear}`;
   };
 
-  const handleRestartWebcam = () => {
-    setCaptured(null);
-    setResults([]);
-    setError(null);
-    setStatus("greeting");
-  };
-
-  const handleCaptureAndAnalysis = () => {
-    setCaptured(null);
-    setResults([]);
-    setError(null);
-    setStatus("greeting");
-    setTimeout(() => handleCapture(), 100);
+  const handleAnalysisClick = (mode: AnalysisMode) => {
+    setAnalysisMode(mode);
+    if (status === "idle") {
+      startWebcam();
+    }
   };
 
   const handleReturnPage = () => {
-    if (videoRef.current && videoRef.current.srcObject) {
-      (videoRef.current.srcObject as MediaStream)
-        .getTracks()
-        .forEach((track) => track.stop());
+    if (streamRef.current) {
+      streamRef.current.getTracks().forEach((track) => track.stop());
     }
     navigate("/crowd-and-fall-detection", { state: { autoStart: true } });
   };
 
+  const renderBBoxes = () => {
+    const media = imageRef.current || videoRef.current;
+    const container = containerRef.current;
+    if (!media || !container || results.length === 0) return null;
+
+    const rect = media.getBoundingClientRect();
+    const containerRect = container.getBoundingClientRect();
+
+    const scaleX = rect.width / 980;
+    const scaleY = rect.height / 720;
+
+    const offsetX = rect.left - containerRect.left;
+    const offsetY = rect.top - containerRect.top;
+
+    return results.map((r, i) => {
+      const isFall = r.categoryId === 1;
+      const boxColor = isFall
+        ? "#FF0000"
+        : DETECTION_COLORS[i % DETECTION_COLORS.length];
+      return (
+        <div
+          key={i}
+          className="position-absolute"
+          style={{
+            left: offsetX + r.bbox[0] * scaleX,
+            top: offsetY + r.bbox[1] * scaleY,
+            width: r.bbox[2] * scaleX,
+            height: r.bbox[3] * scaleY,
+            border: `3px solid ${boxColor}`,
+            boxShadow: isFall ? `0 0 15px #FF0000` : `0 0 5px ${boxColor}66`,
+            pointerEvents: "none",
+            zIndex: 10,
+          }}
+        />
+      );
+    });
+  };
+
   return (
     <Container
       fluid
@@ -154,10 +216,42 @@ const CrowdAndFallDetectionWebcam = () => {
       <div className="row flex-grow-1 overflow-hidden">
         <div className="col-md-7 d-flex flex-column h-100">
           <div
+            ref={containerRef}
             className="position-relative flex-grow-1 bg-dark rounded-4 overflow-hidden border border-secondary shadow-lg d-flex align-items-center justify-content-center"
             style={{ minHeight: 320 }}
           >
+            {status === "idle" && (
+              <div className="text-secondary text-center">
+                <p>Webcam inactive.</p>
+                <p className="small">Click an analysis mode to start.</p>
+              </div>
+            )}
+
             {status === "greeting" && (
+              <video
+                ref={videoRef}
+                width={980}
+                height={720}
+                autoPlay
+                muted
+                playsInline
+                style={{
+                  position: "absolute",
+                  opacity: 0,
+                  pointerEvents: "none",
+                  maxWidth: "100%",
+                  maxHeight: "100%",
+                  width: "auto",
+                  height: "auto",
+                  aspectRatio: "980 / 720",
+                  top: "50%",
+                  left: "50%",
+                  transform: "translate(-50%, -50%)",
+                }}
+              />
+            )}
+
+            {(status === "greeting" || captured) && (
               <div
                 style={{
                   position: "absolute",
@@ -170,43 +264,7 @@ const CrowdAndFallDetectionWebcam = () => {
                   justifyContent: "center",
                 }}
               >
-                <video
-                  ref={videoRef}
-                  width={960}
-                  height={720}
-                  autoPlay
-                  muted
-                  playsInline
-                  style={{
-                    background: "#222",
-                    maxWidth: "100%",
-                    maxHeight: "100%",
-                  }}
-                />
-                <canvas
-                  ref={canvasRef}
-                  width={960}
-                  height={720}
-                  style={{ display: "none" }}
-                />
-              </div>
-            )}
-
-            {captured && status !== "greeting" && (
-              <>
-                <div
-                  ref={containerRef}
-                  style={{
-                    position: "absolute",
-                    left: 0,
-                    top: 0,
-                    width: "100%",
-                    height: "100%",
-                    display: "flex",
-                    alignItems: "center",
-                    justifyContent: "center",
-                  }}
-                >
+                {captured ? (
                   <Image
                     ref={imageRef}
                     src={captured}
@@ -215,52 +273,24 @@ const CrowdAndFallDetectionWebcam = () => {
                       objectFit: "contain",
                       maxWidth: "100%",
                       maxHeight: "100%",
-                      width: 960,
-                      height: 720,
+                      width: "auto",
+                      height: "auto",
+                      aspectRatio: "980 / 720",
                     }}
                   />
-                </div>
-
-                {status === "result" &&
-                  results.map((r, i) => {
-                    const img = imageRef.current;
-                    const container = containerRef.current;
-                    if (!img || !container) return null;
-
-                    const rect = img.getBoundingClientRect();
-                    const containerRect = container.getBoundingClientRect();
-
-                    const scaleX = rect.width / 960;
-                    const scaleY = rect.height / 720;
-
-                    const offsetX = rect.left - containerRect.left;
-                    const offsetY = rect.top - containerRect.top;
-
-                    const isFall = r.categoryId === 1;
-                    const boxColor = isFall
-                      ? "#FF0000"
-                      : DETECTION_COLORS[i % DETECTION_COLORS.length];
-
-                    return (
-                      <div
-                        key={i}
-                        className="position-absolute"
-                        style={{
-                          left: offsetX + r.bbox[0] * scaleX,
-                          top: offsetY + r.bbox[1] * scaleY,
-                          width: r.bbox[2] * scaleX,
-                          height: r.bbox[3] * scaleY,
-                          border: `3px solid ${boxColor}`,
-                          boxShadow: isFall
-                            ? `0 0 15px #FF0000`
-                            : `0 0 5px ${boxColor}66`,
-                          pointerEvents: "none",
-                        }}
-                      ></div>
-                    );
-                  })}
-              </>
+                ) : (
+                  <div className="spinner-border text-light" role="status" />
+                )}
+                <canvas
+                  ref={canvasRef}
+                  width={980}
+                  height={720}
+                  style={{ display: "none" }}
+                />
+              </div>
             )}
+
+            {renderBBoxes()}
           </div>
         </div>
 
@@ -274,35 +304,41 @@ const CrowdAndFallDetectionWebcam = () => {
             </h2>
           </div>
 
+          {inferenceTime !== null && (
+            <div
+              className="mb-2"
+              style={{
+                fontSize: "1rem",
+                color: "#fff",
+                fontStyle: "italic",
+              }}
+            >
+              Inference time: <strong>{inferenceTime.toFixed(2)} ms</strong>
+            </div>
+          )}
+
           <div className="flex-grow-1 overflow-auto pe-2 custom-scrollbar mb-3">
-            {status === "analysis" ? (
-              <div className="d-flex align-items-center gap-3 text-info p-4 bg-dark bg-opacity-50 rounded-4 border border-info border-opacity-25">
-                <div className="spinner-border spinner-border-sm" />
-                Scanning in progress...
-              </div>
-            ) : (
-              <div className="list-group list-group-flush gap-1">
-                {results.length === 0 ? (
-                  <div className="p-4 text-center border border-secondary border-opacity-25 rounded-4">
-                    <p className="text-secondary small m-0">
-                      No people detected.
-                    </p>
-                  </div>
-                ) : (
-                  results.map((r, i) => (
-                    <div
-                      key={i}
-                      className="list-group-item bg-dark bg-opacity-25 text-white border-secondary border-opacity-10 px-3 py-2 rounded-3 d-flex justify-content-between align-items-center"
-                    >
-                      <div className="d-flex align-items-center gap-2">
-                        <span className="text-secondary smaller">#{i + 1}</span>
-                        <span className="fw-medium">Person detected</span>
-                      </div>
+            <div className="list-group list-group-flush gap-1">
+              {results.length === 0 ? (
+                <div className="p-4 text-center border border-secondary border-opacity-25 rounded-4">
+                  <p className="text-secondary small m-0">
+                    No people detected.
+                  </p>
+                </div>
+              ) : (
+                results.map((r, i) => (
+                  <div
+                    key={i}
+                    className="list-group-item bg-dark bg-opacity-25 text-white border-secondary border-opacity-10 px-3 py-2 rounded-3 d-flex justify-content-between align-items-center"
+                  >
+                    <div className="d-flex align-items-center gap-2">
+                      <span className="text-secondary smaller">#{i + 1}</span>
+                      <span className="fw-medium">Person detected</span>
                     </div>
-                  ))
-                )}
-              </div>
-            )}
+                  </div>
+                ))
+              )}
+            </div>
           </div>
 
           <div className="pt-3 border-top border-secondary border-opacity-50">
@@ -327,29 +363,43 @@ const CrowdAndFallDetectionWebcam = () => {
         </div>
       </div>
 
-      <div className="pt-3 d-flex gap-2">
+      <div className="mt-3 d-flex justify-content-center d-flex gap-2">
         <Button
           variant="light"
-          className="flex-grow-1 py-3 fw-bold"
+          className="analyze-cpu-button flex-grow-1 py-3 px-5 fw-bold"
           onClick={handleReturnPage}
         >
           Gallery
         </Button>
         <Button
-          variant="outline-light"
-          className="flex-grow-1 py-3 fw-bold border-2"
-          onClick={handleCaptureAndAnalysis}
-          disabled={status === "analysis"}
+          variant="light"
+          className={`analyze-cpu-button flex-grow-1 py-2 px-5 fw-bold ${analysisMode === "cpu" && status !== "idle" ? "active-analysis" : ""}`}
+          onClick={() => handleAnalysisClick("cpu")}
+        >
+          <FormattedMessage
+            id="components.CrowdAndFallDetection.cpuAnalysisButton"
+            defaultMessage="CPU Analysis"
+          />
+        </Button>
+        <Button
+          variant="light"
+          className={`analyze-gpu-button flex-grow-1 py-2 px-5 fw-bold ${analysisMode === "gpu" && status !== "idle" ? "active-analysis" : ""}`}
+          onClick={() => handleAnalysisClick("gpu")}
         >
-          {status === "analysis" ? "Scanning in progress..." : "Start Analysis"}
+          <FormattedMessage
+            id="components.CrowdAndFallDetection.gpuAnalysisButton"
+            defaultMessage="GPU Analysis"
+          />
         </Button>
         <Button
           variant="light"
-          className="flex-grow-1 py-3 fw-bold"
-          onClick={handleRestartWebcam}
-          disabled={status === "greeting"}
+          className={`analyze-npu-button flex-grow-1 py-2 px-5 fw-bold ${analysisMode === "npu" && status !== "idle" ? "active-analysis" : ""}`}
+          onClick={() => handleAnalysisClick("npu")}
         >
-          Live Webcam Feedback
+          <FormattedMessage
+            id="components.CrowdAndFallDetection.npuAnalysisButton"
+            defaultMessage="NPU Analysis"
+          />
         </Button>
       </div>
     </Container>
diff --git a/oobe/src/pages/QualityInspection.scss b/oobe/src/pages/QualityInspection.scss
index c989d52..a8aded2 100644
--- a/oobe/src/pages/QualityInspection.scss
+++ b/oobe/src/pages/QualityInspection.scss
@@ -65,6 +65,7 @@
   }
 
   .analyze-cpu-button,
+  .analyze-gpu-button,
   .analyze-npu-button {
     @extend .greeting-button;
     height: 52px;
diff --git a/oobe/src/pages/QualityInspection.tsx b/oobe/src/pages/QualityInspection.tsx
index ac95e95..e2c6908 100644
--- a/oobe/src/pages/QualityInspection.tsx
+++ b/oobe/src/pages/QualityInspection.tsx
@@ -1,7 +1,7 @@
 import { Container, Image, Button, Alert } from "react-bootstrap";
 import { logo } from "../assets/images";
 import "./QualityInspection.scss";
-import { useLocation, useNavigate } from "react-router-dom";
+import { useNavigate } from "react-router-dom";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faX } from "@fortawesome/free-solid-svg-icons";
 import { FormattedMessage, useIntl } from "react-intl";
@@ -66,7 +66,7 @@ const QualityInspection = ({ apiClient }: QualityInspectionProps) => {
   const [analysisMode, setAnalysisMode] = useState<AnalysisMode>("cpu");
   const [inferenceTime, setInferenceTime] = useState<number | null>(null);
   const [error, setError] = useState<string | null>(null);
-  const [status, setStatus] = useState("greeting");
+  const [status, setStatus] = useState("analysis");
   const [currentImage, setCurrentImage] = useState(pcbMissingHole00);
   const [scale, setScale] = useState({ x: 1, y: 1 });
 
@@ -89,16 +89,6 @@ const QualityInspection = ({ apiClient }: QualityInspectionProps) => {
     return () => window.removeEventListener("resize", handleImageLoad);
   }, []);
 
-  useEffect(() => {
-    if (status !== "analysis") return;
-
-    const timer = setTimeout(() => {
-      if (status === "analysis") setStatus("result");
-    }, 2000);
-
-    return () => clearTimeout(timer);
-  }, [status, currentImage]);
-
   useEffect(() => {
     if (status !== "analysis") return;
     const processImage = async () => {
@@ -109,6 +99,7 @@ const QualityInspection = ({ apiClient }: QualityInspectionProps) => {
         const data = await apiClient.getDefectResult(file, analysisMode);
         setDefectResults(data.results);
         setInferenceTime(data.inferenceTime);
+        setStatus("result");
       } catch {
         setError(
           intl.formatMessage({
@@ -122,14 +113,6 @@ const QualityInspection = ({ apiClient }: QualityInspectionProps) => {
     if (currentImage) processImage();
   }, [apiClient, currentImage, status, intl, analysisMode]);
 
-  const location = useLocation();
-
-  useEffect(() => {
-    if (location.state?.autoStart) {
-      setStatus("analysis");
-    }
-  }, [location.state]);
-
   const handleBBoxColor = (categoryId: number) => {
     switch (categoryId) {
       case 0:
@@ -147,21 +130,15 @@ const QualityInspection = ({ apiClient }: QualityInspectionProps) => {
       className="quality-inspection-container vh-100 d-flex flex-column p-4 bg-black text-white"
     >
       <div className="d-flex justify-content-between align-items-start w-100 mb-4">
-        {status !== "greeting" && (
-          <Button
-            variant="link"
-            className="close-icon-button p-0"
-            onClick={() => navigate("/industrial")}
-          >
-            <FontAwesomeIcon icon={faX} size="lg" />
-          </Button>
-        )}
+        <Button
+          variant="link"
+          className="close-icon-button p-0"
+          onClick={() => navigate("/industrial")}
+        >
+          <FontAwesomeIcon icon={faX} size="lg" />
+        </Button>
         <div className="flex-grow-1 d-flex justify-content-center">
-          <Image
-            src={logo}
-            alt="SECO Logo"
-            className={status === "greeting" ? "logo-big" : "logo-small"}
-          />
+          <Image src={logo} alt="SECO Logo" className="logo-small" />
         </div>
         <div style={{ width: "24px" }}></div>
       </div>
@@ -177,192 +154,161 @@ const QualityInspection = ({ apiClient }: QualityInspectionProps) => {
         </Alert>
       )}
 
-      <div
-        className={
-          status === "greeting"
-            ? "flex-grow-1 d-flex align-items-center justify-content-center text-center"
-            : "flex-grow-1 d-flex align-items-left mb-4 mt-5 text-center"
-        }
-      >
-        <h2
-          className={
-            status === "greeting" ? "greeting-message" : "analysis-message"
-          }
-        >
-          {status === "greeting" ? (
-            <FormattedMessage
-              id="components.QualityInspection.startAnalysisMessage"
-              defaultMessage="This is a demo environment, the camera feed is simulated. Click ‘Start Analysis’ to run inference."
-            />
-          ) : (
-            <FormattedMessage
-              id="components.QualityInspection.analyzeNextMessage"
-              defaultMessage="This is a demo environment, the camera feed is simulated. Click ‘CPU Analysis’ or 'NPU Analysis' to run inference"
+      <div className="row flex-grow-1 align-items-center mb-5">
+        <div className="col-md-6 d-flex flex-column align-items-center mx-auto">
+          <div className="position-relative d-inline-block overflow-hidden">
+            {status === "result" &&
+              defectResults.map((defect, index) => (
+                <div
+                  key={index}
+                  className="position-absolute"
+                  style={{
+                    zIndex: 10,
+                    left: `${defect.bbox[0] * scale.x}px`,
+                    top: `${defect.bbox[1] * scale.y}px`,
+                    width: `${defect.bbox[2] * scale.x}px`,
+                    height: `${defect.bbox[3] * scale.y}px`,
+                    border: `3px solid ${handleBBoxColor(defect.categoryId)}`,
+                    backgroundColor: "rgba(255, 0, 0, 0.1)",
+                    pointerEvents: "none",
+                  }}
+                />
+              ))}
+            <Image
+              ref={imageRef}
+              src={currentImage}
+              alt="Sample"
+              fluid
+              onLoad={handleImageLoad}
+              className="image"
             />
-          )}
-        </h2>
-      </div>
-
-      {status !== "greeting" && (
-        <div className="row flex-grow-1 align-items-center justify-content-center mb-2">
-          <div className="col-md-7 d-flex flex-column align-items-center justify-content-center">
-            <div className="position-relative d-inline-block mb-4">
-              {status === "result" &&
-                defectResults.map((defect, index) => (
-                  <div
-                    key={index}
-                    className="position-absolute"
-                    style={{
-                      zIndex: 10,
-                      left: `${defect.bbox[0] * scale.x}px`,
-                      top: `${defect.bbox[1] * scale.y}px`,
-                      width: `${defect.bbox[2] * scale.x}px`,
-                      height: `${defect.bbox[3] * scale.y}px`,
-                      border: `3px solid ${handleBBoxColor(defect.categoryId)}`,
-                      backgroundColor: "rgba(255, 0, 0, 0.1)",
-                      pointerEvents: "none",
-                    }}
-                  />
-                ))}
-              <Image
-                ref={imageRef}
-                src={currentImage}
-                alt="Sample"
-                fluid
-                onLoad={handleImageLoad}
-                className="image"
-              />
-            </div>
+          </div>
 
-            <div className="mt-4 ms-5 w-100">
-              <ImageCarousel
-                images={imageOptions}
-                currentImage={currentImage}
-                onSelect={(img) => {
-                  setCurrentImage(img);
-                  setDefectResults([]);
-                }}
-              />
-            </div>
+          <div className="py-3 mt-3 w-100">
+            <ImageCarousel
+              images={imageOptions}
+              currentImage={currentImage}
+              onSelect={(img) => {
+                setCurrentImage(img);
+                setStatus("analysis");
+              }}
+            />
           </div>
+        </div>
 
-          <div className="col-md-5 d-flex flex-column align-items-center justify-content-center">
-            <div className="mb-5 mt-5 text-center">
-              {status === "analysis" && (
-                <div className="spinner-border mb-5 spinner" role="status" />
-              )}
-              <h3 className="fw-bold d-flex flex-column align-items-start text-start">
-                {status === "analysis" ? (
+        <div className="col-md-5 d-flex flex-column align-items-center justify-content-center">
+          <div className="mb-5 mt-5 text-center">
+            {status === "analysis" && (
+              <div className="spinner-border mb-5 spinner" role="status" />
+            )}
+            <h3 className="fw-bold d-flex flex-column align-items-start text-start">
+              {status === "analysis" ? (
+                <FormattedMessage
+                  id="qualityInspection.analyseMessage"
+                  defaultMessage="Scanning in progress..."
+                />
+              ) : (
+                <div className="d-flex flex-column align-items-start gap-1">
                   <FormattedMessage
-                    id="qualityInspection.analyseMessage"
-                    defaultMessage="Scanning in progress..."
+                    id="qualityInspection.anomaliesDetectedMessage"
+                    defaultMessage="Anomalies detected"
                   />
-                ) : (
-                  <div className="d-flex flex-column align-items-start gap-1">
-                    <FormattedMessage
-                      id="qualityInspection.anomaliesDetectedMessage"
-                      defaultMessage="Anomalies detected"
-                    />
-
-                    {status === "result" && inferenceTime !== null && (
-                      <div
-                        className="mb-2"
-                        style={{
-                          fontSize: "1rem",
-                          color: "#fff",
-                          fontStyle: "italic",
-                        }}
-                      >
-                        Inference time:{" "}
-                        <strong>{inferenceTime.toFixed(2)} ms</strong>
-                      </div>
-                    )}
 
-                    <div className="d-flex align-items-center">
-                      <span
-                        className="status-box me-2"
-                        style={{ borderColor: MISSING_HOLE_COLOR }}
-                      ></span>
-                      <FormattedMessage
-                        id="qualityInspection.missingHole"
-                        defaultMessage="Missing hole"
-                      />
+                  {status === "result" && inferenceTime !== null && (
+                    <div
+                      className="mb-2"
+                      style={{
+                        fontSize: "1rem",
+                        color: "#fff",
+                        fontStyle: "italic",
+                      }}
+                    >
+                      Inference time:{" "}
+                      <strong>{inferenceTime.toFixed(2)} ms</strong>
                     </div>
+                  )}
 
-                    <div className="d-flex align-items-center">
-                      <span
-                        className="status-box me-2"
-                        style={{ borderColor: SHORT_CIRCUIT_COLOR }}
-                      ></span>
-                      <FormattedMessage
-                        id="qualityInspection.shortCircuit"
-                        defaultMessage="Short circuit"
-                      />
-                    </div>
+                  <div className="d-flex align-items-center">
+                    <span
+                      className="status-box me-2"
+                      style={{ borderColor: MISSING_HOLE_COLOR }}
+                    ></span>
+                    <FormattedMessage
+                      id="qualityInspection.missingHole"
+                      defaultMessage="Missing hole"
+                    />
                   </div>
-                )}
-              </h3>
-            </div>
 
-            <div className="d-flex flex-wrap justify-content-center gap-3 mt-auto mb-4">
-              <Button
-                variant="light"
-                className={`analyze-cpu-button py-2 px-5 fw-bold ${status === "analysis" && analysisMode === "cpu" ? "active-analysis" : ""}`}
-                onClick={() => navigate("/quality-inspection/webcam")}
-              >
-                Live webcam Analysis
-              </Button>
-              <Button
-                variant="light"
-                disabled={status === "analysis"}
-                className={`analyze-cpu-button py-2 px-5 fw-bold ${status === "analysis" && analysisMode === "cpu" ? "active-analysis" : ""}`}
-                onClick={() => {
-                  setStatus("analysis");
-                  setAnalysisMode("cpu");
-                }}
-              >
-                <FormattedMessage
-                  id="components.QualityInspection.cpuAnalysisButton"
-                  defaultMessage="CPU Analysis"
-                />
-              </Button>
-
-              <Button
-                variant="light"
-                disabled={status === "analysis"}
-                className={`analyze-npu-button py-2 px-5 fw-bold ${status === "analysis" && analysisMode === "npu" ? "active-analysis" : ""}`}
-                onClick={() => {
-                  setStatus("analysis");
-                  setAnalysisMode("npu");
-                }}
-              >
-                <FormattedMessage
-                  id="components.QualityInspection.npuAnalysisButton"
-                  defaultMessage="NPU Analysis"
-                />
-              </Button>
-            </div>
+                  <div className="d-flex align-items-center">
+                    <span
+                      className="status-box me-2"
+                      style={{ borderColor: SHORT_CIRCUIT_COLOR }}
+                    ></span>
+                    <FormattedMessage
+                      id="qualityInspection.shortCircuit"
+                      defaultMessage="Short circuit"
+                    />
+                  </div>
+                </div>
+              )}
+            </h3>
           </div>
-        </div>
-      )}
 
-      {status === "greeting" && (
-        <div className="d-flex justify-content-center pb-5">
-          <Button
-            variant="light"
-            className="greeting-button py-2 px-5 fw-bold"
-            onClick={() => {
-              setStatus("analysis");
-              setAnalysisMode("cpu");
-            }}
-          >
-            <FormattedMessage
-              id="components.QualityInspection.startAnalysisButton"
-              defaultMessage="Start analysis"
-            />
-          </Button>
+          <div className="d-flex flex-wrap justify-content-center gap-3 mt-auto mb-4">
+            <Button
+              variant="light"
+              className={`analyze-cpu-button py-2 px-3 fw-bold`}
+              onClick={() => navigate("/quality-inspection/webcam")}
+            >
+              Live webcam Analysis
+            </Button>
+            <Button
+              variant="light"
+              disabled={status === "analysis"}
+              className={`analyze-cpu-button py-2 px-5 fw-bold ${status === "analysis" && analysisMode === "cpu" ? "active-analysis" : ""}`}
+              onClick={() => {
+                setStatus("analysis");
+                setAnalysisMode("cpu");
+              }}
+            >
+              <FormattedMessage
+                id="components.QualityInspection.cpuAnalysisButton"
+                defaultMessage="CPU Analysis"
+              />
+            </Button>
+
+            <Button
+              variant="light"
+              disabled={status === "analysis"}
+              className={`analyze-gpu-button py-2 px-5 fw-bold ${status === "analysis" && analysisMode === "gpu" ? "active-analysis" : ""}`}
+              onClick={() => {
+                setStatus("analysis");
+                setAnalysisMode("gpu");
+              }}
+            >
+              <FormattedMessage
+                id="components.QualityInspection.gpuAnalysisButton"
+                defaultMessage="GPU Analysis"
+              />
+            </Button>
+
+            <Button
+              variant="light"
+              disabled={status === "analysis"}
+              className={`analyze-npu-button py-2 px-5 fw-bold ${status === "analysis" && analysisMode === "npu" ? "active-analysis" : ""}`}
+              onClick={() => {
+                setStatus("analysis");
+                setAnalysisMode("npu");
+              }}
+            >
+              <FormattedMessage
+                id="components.QualityInspection.npuAnalysisButton"
+                defaultMessage="NPU Analysis"
+              />
+            </Button>
+          </div>
         </div>
-      )}
+      </div>
     </Container>
   );
 };
diff --git a/oobe/src/pages/QualityInspectionWebcam.tsx b/oobe/src/pages/QualityInspectionWebcam.tsx
index 7fadd7a..5538005 100644
--- a/oobe/src/pages/QualityInspectionWebcam.tsx
+++ b/oobe/src/pages/QualityInspectionWebcam.tsx
@@ -1,4 +1,4 @@
-import React, { useRef, useState } from "react";
+import React, { useRef, useState, useMemo } from "react";
 import { Container, Button, Alert, Image } from "react-bootstrap";
 import { useNavigate } from "react-router-dom";
 import { APIClient, type AnalysisMode } from "../api/APIClient";
@@ -15,68 +15,98 @@ const QualityInspectionWebcam = () => {
   const videoRef = useRef<HTMLVideoElement>(null);
   const canvasRef = useRef<HTMLCanvasElement>(null);
   const imageRef = useRef<HTMLImageElement>(null);
-  const [status, setStatus] = useState("greeting");
+  const containerRef = useRef<HTMLDivElement>(null);
+  const isAnalyzingRef = useRef(false);
+
+  const [status, setStatus] = useState("idle");
   const [defectResults, setDefectResults] = useState<DefectResult[]>([]);
   const [inferenceTime, setInferenceTime] = useState<number | null>(null);
   const [analysisMode, setAnalysisMode] = useState<AnalysisMode>("cpu");
   const [error, setError] = useState<string | null>(null);
   const [captured, setCaptured] = useState<string | null>(null);
-  const [scale] = useState({ x: 1, y: 1 });
   const [currentTime] = useState(new Date());
   const navigate = useNavigate();
-  const apiClient = new APIClient();
+  const apiClient = useMemo(() => new APIClient(), []);
 
   React.useEffect(() => {
-    navigator.mediaDevices.getUserMedia({ video: true }).then((stream) => {
-      streamRef.current = stream;
-      if (videoRef.current) videoRef.current.srcObject = stream;
-    });
     return () => {
-      if (videoRef.current && videoRef.current.srcObject) {
-        (videoRef.current.srcObject as MediaStream)
-          .getTracks()
-          .forEach((track) => track.stop());
+      if (streamRef.current) {
+        streamRef.current.getTracks().forEach((track) => track.stop());
       }
     };
   }, []);
 
+  const startWebcam = async () => {
+    try {
+      const stream = await navigator.mediaDevices.getUserMedia({ video: true });
+      streamRef.current = stream;
+      setStatus("greeting");
+    } catch {
+      setError(
+        "Failed to access webcam. Please ensure you have given permission.",
+      );
+    }
+  };
+
   React.useEffect(() => {
     if (status === "greeting" && videoRef.current && streamRef.current) {
       videoRef.current.srcObject = streamRef.current;
     }
   }, [status]);
 
-  const dataURLtoFile = (dataurl: string, filename: string) => {
-    const arr = dataurl.split(",");
-    const mime = arr[0].match(/:(.*?);/)![1];
-    const bstr = atob(arr[1]);
-    const u8arr = new Uint8Array(bstr.length);
-    for (let i = 0; i < bstr.length; i++) u8arr[i] = bstr.charCodeAt(i);
-    return new File([u8arr], filename, { type: mime });
-  };
+  React.useEffect(() => {
+    let active = true;
+    const analyzeLoop = async () => {
+      if (
+        status !== "greeting" ||
+        !streamRef.current ||
+        !videoRef.current ||
+        !canvasRef.current
+      )
+        return;
+      if (isAnalyzingRef.current) return;
+
+      isAnalyzingRef.current = true;
+      try {
+        const ctx = canvasRef.current.getContext("2d", { alpha: false });
+        if (ctx) {
+          ctx.drawImage(videoRef.current, 0, 0, 960, 720);
 
-  const handleCapture = async (mode: AnalysisMode) => {
-    if (videoRef.current && canvasRef.current) {
-      const ctx = canvasRef.current.getContext("2d");
-      if (ctx) {
-        ctx.drawImage(videoRef.current, 0, 0, 960, 720);
-        const dataUrl = canvasRef.current.toDataURL("image/png");
-        setCaptured(dataUrl);
-        setStatus("analysis");
-        setError(null);
-        try {
-          const file = dataURLtoFile(dataUrl, "webcam.png");
-          const data = await apiClient.getDefectResult(file, mode);
-          setDefectResults(data.results);
-          setInferenceTime(data.inferenceTime);
-          setStatus("result");
-        } catch {
-          setError("Backend rejected the image format or analysis failed.");
-          setStatus("greeting");
+          const blob = await new Promise<Blob | null>((resolve) =>
+            canvasRef.current?.toBlob((b) => resolve(b), "image/jpeg", 0.7),
+          );
+
+          if (blob && active && status === "greeting") {
+            const file = new File([blob], "webcam.jpg", { type: "image/jpeg" });
+            const data = await apiClient.getDefectResult(file, analysisMode);
+            if (active && status === "greeting") {
+              const url = URL.createObjectURL(blob);
+              setCaptured((prev) => {
+                if (prev && prev.startsWith("blob:")) URL.revokeObjectURL(prev);
+                return url;
+              });
+              setDefectResults(data.results);
+              setInferenceTime(data.inferenceTime);
+            }
+          }
+        }
+      } catch (err) {
+        console.error("Loop analysis error:", err);
+      } finally {
+        isAnalyzingRef.current = false;
+        if (active && status === "greeting") {
+          setTimeout(analyzeLoop, 100);
         }
       }
+    };
+
+    if (status === "greeting") {
+      analyzeLoop();
     }
-  };
+    return () => {
+      active = false;
+    };
+  }, [status, analysisMode, apiClient]);
 
   const formatFullDate = (date: Date): string => {
     const time = date.toLocaleTimeString("en-GB", { hour12: false });
@@ -88,27 +118,16 @@ const QualityInspectionWebcam = () => {
     return `${time} - ${dayMonthYear}`;
   };
 
-  const handleRestartWebcam = () => {
-    setCaptured(null);
-    setDefectResults([]);
-    setError(null);
-    setStatus("greeting");
-  };
-
-  const handleCaptureAndAnalysis = (mode: AnalysisMode) => {
-    setCaptured(null);
-    setDefectResults([]);
-    setError(null);
+  const handleAnalysisClick = (mode: AnalysisMode) => {
     setAnalysisMode(mode);
-    setStatus("greeting");
-    setTimeout(() => handleCapture(mode), 100);
+    if (status === "idle") {
+      startWebcam();
+    }
   };
 
   const handleReturnPage = () => {
-    if (videoRef.current && videoRef.current.srcObject) {
-      (videoRef.current.srcObject as MediaStream)
-        .getTracks()
-        .forEach((track) => track.stop());
+    if (streamRef.current) {
+      streamRef.current.getTracks().forEach((track) => track.stop());
     }
     navigate("/quality-inspection", { state: { autoStart: true } });
   };
@@ -124,6 +143,38 @@ const QualityInspectionWebcam = () => {
     }
   };
 
+  const renderBBoxes = () => {
+    const media = imageRef.current || videoRef.current;
+    const container = containerRef.current;
+    if (!media || !container || defectResults.length === 0) return null;
+
+    const rect = media.getBoundingClientRect();
+    const containerRect = container.getBoundingClientRect();
+
+    const scaleX = rect.width / 960;
+    const scaleY = rect.height / 720;
+
+    const offsetX = rect.left - containerRect.left;
+    const offsetY = rect.top - containerRect.top;
+
+    return defectResults.map((defect, index) => (
+      <div
+        key={index}
+        className="position-absolute"
+        style={{
+          zIndex: 10,
+          left: offsetX + defect.bbox[0] * scaleX,
+          top: offsetY + defect.bbox[1] * scaleY,
+          width: defect.bbox[2] * scaleX,
+          height: defect.bbox[3] * scaleY,
+          border: `3px solid ${handleBBoxColor(defect.categoryId)}`,
+          backgroundColor: "rgba(255, 0, 0, 0.1)",
+          pointerEvents: "none",
+        }}
+      />
+    ));
+  };
+
   return (
     <Container
       fluid
@@ -155,10 +206,34 @@ const QualityInspectionWebcam = () => {
       <div className="row flex-grow-1 overflow-hidden">
         <div className="col-md-7 d-flex flex-column h-100">
           <div
+            ref={containerRef}
             className="position-relative flex-grow-1 bg-dark rounded-4 overflow-hidden border border-secondary shadow-lg d-flex align-items-center justify-content-center"
             style={{ minHeight: 320 }}
           >
+            {status === "idle" && (
+              <div className="text-secondary text-center">
+                <p>Webcam inactive.</p>
+                <p className="small">Click an analysis mode to start.</p>
+              </div>
+            )}
+
             {status === "greeting" && (
+              <video
+                ref={videoRef}
+                width={960}
+                height={720}
+                autoPlay
+                muted
+                playsInline
+                style={{
+                  position: "absolute",
+                  opacity: 0,
+                  pointerEvents: "none",
+                }}
+              />
+            )}
+
+            {(status === "greeting" || captured) && (
               <div
                 style={{
                   position: "absolute",
@@ -171,19 +246,16 @@ const QualityInspectionWebcam = () => {
                   justifyContent: "center",
                 }}
               >
-                <video
-                  ref={videoRef}
-                  width={960}
-                  height={720}
-                  autoPlay
-                  muted
-                  playsInline
-                  style={{
-                    background: "#222",
-                    maxWidth: "100%",
-                    maxHeight: "100%",
-                  }}
-                />
+                {captured ? (
+                  <Image
+                    ref={imageRef}
+                    src={captured}
+                    className="mw-100 mh-100 shadow-lg"
+                    style={{ objectFit: "contain" }}
+                  />
+                ) : status === "greeting" ? (
+                  <div className="spinner-border text-light" role="status" />
+                ) : null}
                 <canvas
                   ref={canvasRef}
                   width={960}
@@ -192,108 +264,71 @@ const QualityInspectionWebcam = () => {
                 />
               </div>
             )}
-            {captured && (status === "analysis" || status === "result") && (
-              <div className="position-relative d-inline-block mb-4">
-                <Image
-                  ref={imageRef}
-                  src={captured}
-                  className="mw-100 mh-100 shadow-lg"
-                  style={{ objectFit: "contain" }}
-                />
-                {status === "result" &&
-                  defectResults.map((defect, index) => (
-                    <div
-                      key={index}
-                      className="position-absolute"
-                      style={{
-                        zIndex: 10,
-                        left: `${defect.bbox[0] * scale.x}px`,
-                        top: `${defect.bbox[1] * scale.y}px`,
-                        width: `${defect.bbox[2] * scale.x}px`,
-                        height: `${defect.bbox[3] * scale.y}px`,
-                        border: `3px solid ${handleBBoxColor(defect.categoryId)}`,
-                        backgroundColor: "rgba(255, 0, 0, 0.1)",
-                        pointerEvents: "none",
-                      }}
-                    />
-                  ))}
-              </div>
-            )}
+
+            {renderBBoxes()}
           </div>
         </div>
         <div className="col-md-5 d-flex flex-column align-items-center justify-content-center">
           <div className="mb-5 mt-5 text-center">
-            {status === "analysis" && (
-              <div className="spinner-border mb-5 spinner" role="status" />
-            )}
             <h3 className="fw-bold d-flex flex-column align-items-start text-start">
-              {status === "analysis" ? (
+              <div className="d-flex flex-column align-items-start gap-1">
                 <FormattedMessage
-                  id="qualityInspection.analyseMessage"
-                  defaultMessage="Scanning in progress..."
+                  id="qualityInspection.anomaliesDetectedMessage"
+                  defaultMessage="Anomalies detected"
                 />
-              ) : (
-                <div className="d-flex flex-column align-items-start gap-1">
-                  <FormattedMessage
-                    id="qualityInspection.anomaliesDetectedMessage"
-                    defaultMessage="Anomalies detected"
-                  />
 
-                  {status === "result" && inferenceTime !== null && (
-                    <div
-                      className="mb-2"
-                      style={{
-                        fontSize: "1rem",
-                        color: "#fff",
-                        fontStyle: "italic",
-                      }}
-                    >
-                      Inference time:{" "}
-                      <strong>{inferenceTime.toFixed(2)} ms</strong>
-                    </div>
-                  )}
-
-                  <div className="d-flex align-items-center">
-                    <span
-                      className="status-box me-2"
-                      style={{ borderColor: MISSING_HOLE_COLOR }}
-                    ></span>
-                    <FormattedMessage
-                      id="qualityInspection.missingHole"
-                      defaultMessage="Missing hole"
-                    />
+                {inferenceTime !== null && (
+                  <div
+                    className="mb-2"
+                    style={{
+                      fontSize: "1rem",
+                      color: "#fff",
+                      fontStyle: "italic",
+                    }}
+                  >
+                    Inference time:{" "}
+                    <strong>{inferenceTime.toFixed(2)} ms</strong>
                   </div>
+                )}
 
-                  <div className="d-flex align-items-center">
-                    <span
-                      className="status-box me-2"
-                      style={{ borderColor: SHORT_CIRCUIT_COLOR }}
-                    ></span>
-                    <FormattedMessage
-                      id="qualityInspection.shortCircuit"
-                      defaultMessage="Short circuit"
-                    />
-                  </div>
+                <div className="d-flex align-items-center">
+                  <span
+                    className="status-box me-2"
+                    style={{ borderColor: MISSING_HOLE_COLOR }}
+                  ></span>
+                  <FormattedMessage
+                    id="qualityInspection.missingHole"
+                    defaultMessage="Missing hole"
+                  />
+                </div>
+
+                <div className="d-flex align-items-center">
+                  <span
+                    className="status-box me-2"
+                    style={{ borderColor: SHORT_CIRCUIT_COLOR }}
+                  ></span>
+                  <FormattedMessage
+                    id="qualityInspection.shortCircuit"
+                    defaultMessage="Short circuit"
+                  />
                 </div>
-              )}
+              </div>
             </h3>
           </div>
         </div>
-        <div></div>
       </div>
       <div className="mt-3 d-flex justify-content-center d-flex gap-2">
         <Button
           variant="light"
-          className=" analyze-cpu-button flex-grow-1 py-3 fw-bold"
+          className="analyze-cpu-button flex-grow-1 py-3 px-5 fw-bold"
           onClick={handleReturnPage}
         >
           Gallery
         </Button>
         <Button
           variant="light"
-          disabled={status === "analysis"}
-          className={`analyze-cpu-button py-2 px-5 fw-bold ${status === "analysis" && analysisMode === "cpu" ? "active-analysis" : ""}`}
-          onClick={() => handleCaptureAndAnalysis("cpu")}
+          className={`analyze-cpu-button flex-grow-1 py-2 px-5 fw-bold ${analysisMode === "cpu" && status !== "idle" ? "active-analysis" : ""}`}
+          onClick={() => handleAnalysisClick("cpu")}
         >
           <FormattedMessage
             id="components.QualityInspection.cpuAnalysisButton"
@@ -302,22 +337,23 @@ const QualityInspectionWebcam = () => {
         </Button>
         <Button
           variant="light"
-          disabled={status === "analysis"}
-          className={`analyze-npu-button py-2 px-5 fw-bold ${status === "analysis" && analysisMode === "npu" ? "active-analysis" : ""}`}
-          onClick={() => handleCaptureAndAnalysis("npu")}
+          className={`analyze-gpu-button flex-grow-1 py-2 px-5 fw-bold ${analysisMode === "gpu" && status !== "idle" ? "active-analysis" : ""}`}
+          onClick={() => handleAnalysisClick("gpu")}
         >
           <FormattedMessage
-            id="components.QualityInspection.npuAnalysisButton"
-            defaultMessage="NPU Analysis"
+            id="components.QualityInspection.gpuAnalysisButton"
+            defaultMessage="GPU Analysis"
           />
         </Button>
         <Button
           variant="light"
-          className=" analyze-npu-button flex-grow-1 py-3 fw-bold"
-          onClick={handleRestartWebcam}
-          disabled={status === "greeting"}
+          className={`analyze-npu-button flex-grow-1 py-2 px-5 fw-bold ${analysisMode === "npu" && status !== "idle" ? "active-analysis" : ""}`}
+          onClick={() => handleAnalysisClick("npu")}
         >
-          Live Webcam Feedback
+          <FormattedMessage
+            id="components.QualityInspection.npuAnalysisButton"
+            defaultMessage="NPU Analysis"
+          />
         </Button>
       </div>
     </Container>
diff --git a/oobe/src/pages/SampleIntegrityCheck.scss b/oobe/src/pages/SampleIntegrityCheck.scss
index 8ee0e2b..4da6b43 100644
--- a/oobe/src/pages/SampleIntegrityCheck.scss
+++ b/oobe/src/pages/SampleIntegrityCheck.scss
@@ -56,7 +56,7 @@
     border-radius: 6px;
     color: #1a1a1a;
     font-size: 1rem;
-    min-width: 300px;
+    min-width: 200px;
     height: 52px;
 
     &:hover {
@@ -64,9 +64,25 @@
     }
   }
 
-  .analysis-result-button {
+  .analysis-result-button,
+  .analyze-gpu-button,
+  .analyze-npu-button {
     @extend .greeting-button;
     height: 52px;
+    transition: all 0.3s ease;
+
+    &.active-analysis {
+      color: #919191 !important;
+      background-color: #e2e5f3 !important;
+      opacity: 0.6;
+      cursor: wait;
+    }
+
+    &:disabled:not(.active-analysis) {
+      opacity: 0.8;
+      background-color: #ffffff;
+      color: #ccc;
+    }
   }
 
   .image {
diff --git a/oobe/src/pages/SampleIntegrityCheck.tsx b/oobe/src/pages/SampleIntegrityCheck.tsx
index dbf6977..a8c1851 100644
--- a/oobe/src/pages/SampleIntegrityCheck.tsx
+++ b/oobe/src/pages/SampleIntegrityCheck.tsx
@@ -1,7 +1,7 @@
 import { Container, Image, Button, Alert } from "react-bootstrap";
 import { logo } from "../assets/images";
 import "./SampleIntegrityCheck.scss";
-import { useLocation, useNavigate } from "react-router-dom";
+import { useNavigate } from "react-router-dom";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faX } from "@fortawesome/free-solid-svg-icons";
 import { FormattedMessage, useIntl } from "react-intl";
@@ -23,7 +23,7 @@ import {
   blisterPackPartial09,
   blisterPackPartial10,
 } from "../assets/images";
-import { APIClient } from "../api/APIClient";
+import { APIClient, type AnalysisMode } from "../api/APIClient";
 import ImageCarousel from "./ImageCarousel";
 
 const EMPTY_BLISTER_COLOR = "#FF0000";
@@ -52,8 +52,10 @@ const SampleIntegrityCheck = ({ apiClient }: SampleIntegrityCheckProps) => {
   const [blisterPackResults, setBlisterPackResults] = useState<
     BlisterPackResult[]
   >([]);
+  const [analysisMode, setAnalysisMode] = useState<AnalysisMode>("cpu");
+  const [inferenceTime, setInferenceTime] = useState<number | null>(null);
   const [error, setError] = useState<string | null>(null);
-  const [status, setStatus] = useState("greeting");
+  const [status, setStatus] = useState("analysis");
   const [currentImage, setCurrentImage] = useState(blisterPackEmpty00);
   const [scale, setScale] = useState({ x: 1, y: 1 });
 
@@ -94,24 +96,17 @@ const SampleIntegrityCheck = ({ apiClient }: SampleIntegrityCheckProps) => {
     return () => window.removeEventListener("resize", handleImageLoad);
   }, []);
 
-  useEffect(() => {
-    if (status !== "analysis") return;
-
-    const timer = setTimeout(() => {
-      if (status === "analysis") setStatus("result");
-    }, 5000);
-
-    return () => clearTimeout(timer);
-  }, [status, currentImage]);
-
   useEffect(() => {
     if (status !== "analysis") return;
     const processImage = async () => {
       try {
         setBlisterPackResults([]);
+        setInferenceTime(null);
         const file = await urlToFile(currentImage);
-        const data = await apiClient.getBlisterPackResult(file);
-        setBlisterPackResults(data);
+        const data = await apiClient.getBlisterPackResult(file, analysisMode);
+        setBlisterPackResults(data.results);
+        setInferenceTime(data.inferenceTime);
+        setStatus("result");
       } catch {
         setError(
           intl.formatMessage({
@@ -123,15 +118,7 @@ const SampleIntegrityCheck = ({ apiClient }: SampleIntegrityCheckProps) => {
     };
 
     if (currentImage) processImage();
-  }, [apiClient, currentImage, status, intl]);
-
-  const location = useLocation();
-
-  useEffect(() => {
-    if (location.state?.autoStart) {
-      setStatus("analysis");
-    }
-  }, [location.state]);
+  }, [apiClient, currentImage, status, intl, analysisMode]);
 
   const handleBBoxColor = (categoryId: number) => {
     switch (categoryId) {
@@ -150,21 +137,15 @@ const SampleIntegrityCheck = ({ apiClient }: SampleIntegrityCheckProps) => {
       className="integrity-container vh-100 d-flex flex-column p-4 bg-black text-white"
     >
       <div className="d-flex justify-content-between align-items-start w-100 mb-4">
-        {status !== "greeting" && (
-          <Button
-            variant="link"
-            className="close-icon-button p-0"
-            onClick={() => navigate("/medical")}
-          >
-            <FontAwesomeIcon icon={faX} size="lg" />
-          </Button>
-        )}
+        <Button
+          variant="link"
+          className="close-icon-button p-0"
+          onClick={() => navigate("/medical")}
+        >
+          <FontAwesomeIcon icon={faX} size="lg" />
+        </Button>
         <div className="flex-grow-1 d-flex justify-content-center">
-          <Image
-            src={logo}
-            alt="SECO Logo"
-            className={status === "greeting" ? "logo-big" : "logo-small"}
-          />
+          <Image src={logo} alt="SECO Logo" className="logo-small" />
         </div>
         <div style={{ width: "24px" }}></div>
       </div>
@@ -180,178 +161,161 @@ const SampleIntegrityCheck = ({ apiClient }: SampleIntegrityCheckProps) => {
         </Alert>
       )}
 
-      <div
-        className={
-          status === "greeting"
-            ? "flex-grow-1 d-flex align-items-center justify-content-center text-center"
-            : "flex-grow-1 d-flex align-items-left mb-4 mt-5 text-center"
-        }
-      >
-        <h2
-          className={
-            status === "greeting" ? "greeting-message" : "analysis-message"
-          }
-        >
-          {status === "greeting" ? (
-            <FormattedMessage
-              id="components.SampleIntegrityCheck.startAnalysisMessage"
-              defaultMessage="This is a demo environment, the camera feed is simulated. Click ‘Start Analysis’ to run inference."
-            />
-          ) : (
-            <FormattedMessage
-              id="components.SampleIntegrityCheck.analyzeNextMessage"
-              defaultMessage="This is a demo environment, the camera feed is simulated. Click ‘Analyze next object’ to run inference."
+      <div className="row flex-grow-1 align-items-center mb-5">
+        <div className="col-md-6 d-flex flex-column align-items-center mx-auto">
+          <div className="position-relative d-inline-block overflow-hidden">
+            {status === "result" &&
+              blisterPackResults.map((defect, index) => (
+                <div
+                  key={index}
+                  className="position-absolute"
+                  style={{
+                    zIndex: 10,
+                    position: "absolute",
+                    left: `${defect.bbox[0] * scale.x}px`,
+                    top: `${defect.bbox[1] * scale.y}px`,
+                    width: `${defect.bbox[2] * scale.x}px`,
+                    height: `${defect.bbox[3] * scale.y}px`,
+                    border: `3px solid ${handleBBoxColor(defect.categoryId)}`,
+                    backgroundColor: "rgba(255, 0, 0, 0.1)",
+                    pointerEvents: "none",
+                  }}
+                />
+              ))}
+            <Image
+              ref={imageRef}
+              src={currentImage}
+              alt="Sample"
+              fluid
+              onLoad={handleImageLoad}
+              className="image"
             />
-          )}
-        </h2>
-      </div>
-
-      {status !== "greeting" && (
-        <div className="row flex-grow-1 align-items-center mb-5">
-          <div className="col-md-6 d-flex flex-column align-items-center mx-auto">
-            <div className="position-relative d-inline-block overflow-hidden">
-              {status === "result" &&
-                blisterPackResults.map((defect, index) => (
-                  <div
-                    key={index}
-                    className="position-absolute"
-                    style={{
-                      zIndex: 10,
-                      position: "absolute",
-                      left: `${defect.bbox[0] * scale.x}px`,
-                      top: `${defect.bbox[1] * scale.y}px`,
-                      width: `${defect.bbox[2] * scale.x}px`,
-                      height: `${defect.bbox[3] * scale.y}px`,
-                      border: `3px solid ${handleBBoxColor(defect.categoryId)}`,
-                      backgroundColor: "rgba(255, 0, 0, 0.1)",
-                      pointerEvents: "none",
-                    }}
-                  />
-                ))}
-              <Image
-                ref={imageRef}
-                src={currentImage}
-                alt="Sample"
-                fluid
-                onLoad={handleImageLoad}
-                className="image"
-              />
-            </div>
+          </div>
 
-            <div className="py-3 mt-3 w-100">
-              <ImageCarousel
-                images={images}
-                currentImage={currentImage}
-                onSelect={(img) => {
-                  setCurrentImage(img);
-                  setStatus("analysis");
-                }}
-              />
-            </div>
+          <div className="py-3 mt-3 w-100">
+            <ImageCarousel
+              images={images}
+              currentImage={currentImage}
+              onSelect={(img) => {
+                setCurrentImage(img);
+                setStatus("analysis");
+              }}
+            />
           </div>
+        </div>
 
-          <div className="col-md-5 d-flex flex-column align-items-center justify-content-center">
-            <div className="mb-5 mt-5 text-center">
-              {status === "analysis" && (
-                <div className="spinner-border mb-5 spinner" role="status" />
-              )}
-              <h3 className="fw-bold d-flex flex-column align-items-start text-start">
-                {status === "analysis" ? (
+        <div className="col-md-5 d-flex flex-column align-items-center justify-content-center">
+          <div className="mb-5 mt-5 text-center">
+            {status === "analysis" && (
+              <div className="spinner-border mb-5 spinner" role="status" />
+            )}
+            <h3 className="fw-bold d-flex flex-column align-items-start text-start">
+              {status === "analysis" ? (
+                <FormattedMessage
+                  id="SampleIntegrityCheck.analyseMessage"
+                  defaultMessage="Scanning in progress..."
+                />
+              ) : (
+                <div className="d-flex flex-column align-items-start gap-1">
                   <FormattedMessage
-                    id="SampleIntegrityCheck.analyseMessage"
-                    defaultMessage="Scanning in progress..."
+                    id="SampleIntegrityCheck.anomaliesDetectedMessage"
+                    defaultMessage="Anomalies detected"
                   />
-                ) : (
-                  <div className="d-flex flex-column align-items-start gap-1">
-                    <FormattedMessage
-                      id="SampleIntegrityCheck.anomaliesDetectedMessage"
-                      defaultMessage="Anomalies detected"
-                    />
 
-                    <div className="d-flex align-items-center">
-                      <span
-                        className="status-box me-2"
-                        style={{ borderColor: EMPTY_BLISTER_COLOR }}
-                      ></span>
-                      <FormattedMessage
-                        id="SampleIntegrityCheck.emptyBlister"
-                        defaultMessage="Empty blister"
-                      />
-                    </div>
-                    <div className="d-flex align-items-center">
-                      <span
-                        className="status-box me-2"
-                        style={{ borderColor: FULL_BLISTER_COLOR }}
-                      ></span>
-                      <FormattedMessage
-                        id="SampleIntegrityCheck.fullBlister"
-                        defaultMessage="Full blister"
-                      />
+                  {status === "result" && inferenceTime !== null && (
+                    <div
+                      className="mb-2"
+                      style={{
+                        fontSize: "1rem",
+                        color: "#fff",
+                        fontStyle: "italic",
+                      }}
+                    >
+                      Inference time:{" "}
+                      <strong>{inferenceTime.toFixed(2)} ms</strong>
                     </div>
-                  </div>
-                )}{" "}
-              </h3>
-            </div>
+                  )}
 
-            <div className="d-flex flex-wrap justify-content-center gap-3 mt-auto mb-4">
-              <Button
-                variant="light"
-                className="analysis-result-button py-2 px-5 fw-bold"
-                onClick={() => navigate("/sample-integrity-check/webcam")}
-              >
-                Live webcam Analysis
-              </Button>
-              <Button
-                variant="light"
-                className="analysis-result-button py-2 px-5 fw-bold"
-                onClick={() => {
-                  const images = [
-                    blisterPackEmpty00,
-                    blisterPackEmpty01,
-                    blisterPackFull00,
-                    blisterPackFull01,
-                    blisterPackPartial00,
-                    blisterPackPartial01,
-                    blisterPackPartial02,
-                    blisterPackPartial03,
-                    blisterPackPartial04,
-                    blisterPackPartial05,
-                    blisterPackPartial06,
-                    blisterPackPartial07,
-                    blisterPackPartial08,
-                    blisterPackPartial09,
-                    blisterPackPartial10,
-                  ];
-                  const nextIdx =
-                    (images.indexOf(currentImage) + 1) % images.length;
-                  setCurrentImage(images[nextIdx]);
-                  setStatus("analysis");
-                }}
-              >
-                <FormattedMessage
-                  id="components.SampleIntegrityCheck.analyzeNextButton"
-                  defaultMessage="Analyze next object"
-                />
-              </Button>
-            </div>
+                  <div className="d-flex align-items-center">
+                    <span
+                      className="status-box me-2"
+                      style={{ borderColor: EMPTY_BLISTER_COLOR }}
+                    ></span>
+                    <FormattedMessage
+                      id="SampleIntegrityCheck.emptyBlister"
+                      defaultMessage="Empty blister"
+                    />
+                  </div>
+                  <div className="d-flex align-items-center">
+                    <span
+                      className="status-box me-2"
+                      style={{ borderColor: FULL_BLISTER_COLOR }}
+                    ></span>
+                    <FormattedMessage
+                      id="SampleIntegrityCheck.fullBlister"
+                      defaultMessage="Full blister"
+                    />
+                  </div>
+                </div>
+              )}{" "}
+            </h3>
           </div>
-        </div>
-      )}
 
-      {status === "greeting" && (
-        <div className="d-flex justify-content-center pb-5">
-          <Button
-            variant="light"
-            className="greeting-button py-2 px-5 fw-bold"
-            onClick={() => setStatus("analysis")}
-          >
-            <FormattedMessage
-              id="components.SampleIntegrityCheck.startButton"
-              defaultMessage="Start analysis"
-            />
-          </Button>
+          <div className="d-flex flex-wrap justify-content-center gap-3 mt-auto mb-4">
+            <Button
+              variant="light"
+              className={`analysis-result-button py-2 px-3 fw-bold`}
+              onClick={() => navigate("/sample-integrity-check/webcam")}
+            >
+              Live webcam Analysis
+            </Button>
+            <Button
+              variant="light"
+              disabled={status === "analysis"}
+              className={`analysis-result-button py-2 px-4 fw-bold ${status === "analysis" && analysisMode === "cpu" ? "active-analysis" : ""}`}
+              onClick={() => {
+                setStatus("analysis");
+                setAnalysisMode("cpu");
+              }}
+            >
+              <FormattedMessage
+                id="components.SampleIntegrityCheck.cpuAnalysisButton"
+                defaultMessage="CPU Analysis"
+              />
+            </Button>
+
+            <Button
+              variant="light"
+              disabled={status === "analysis"}
+              className={`analyze-gpu-button py-2 px-4 fw-bold ${status === "analysis" && analysisMode === "gpu" ? "active-analysis" : ""}`}
+              onClick={() => {
+                setStatus("analysis");
+                setAnalysisMode("gpu");
+              }}
+            >
+              <FormattedMessage
+                id="components.SampleIntegrityCheck.gpuAnalysisButton"
+                defaultMessage="GPU Analysis"
+              />
+            </Button>
+
+            <Button
+              variant="light"
+              disabled={status === "analysis"}
+              className={`analyze-npu-button py-2 px-4 fw-bold ${status === "analysis" && analysisMode === "npu" ? "active-analysis" : ""}`}
+              onClick={() => {
+                setStatus("analysis");
+                setAnalysisMode("npu");
+              }}
+            >
+              <FormattedMessage
+                id="components.SampleIntegrityCheck.npuAnalysisButton"
+                defaultMessage="NPU Analysis"
+              />
+            </Button>
+          </div>
         </div>
-      )}
+      </div>
     </Container>
   );
 };
diff --git a/oobe/src/pages/SampleIntegrityCheckWebcam.tsx b/oobe/src/pages/SampleIntegrityCheckWebcam.tsx
index 8ef72e6..0be48d1 100644
--- a/oobe/src/pages/SampleIntegrityCheckWebcam.tsx
+++ b/oobe/src/pages/SampleIntegrityCheckWebcam.tsx
@@ -1,7 +1,7 @@
-import React, { useRef, useState } from "react";
+import React, { useRef, useState, useMemo } from "react";
 import { Container, Button, Alert, Image } from "react-bootstrap";
 import { useNavigate } from "react-router-dom";
-import { APIClient } from "../api/APIClient";
+import { APIClient, type AnalysisMode } from "../api/APIClient";
 import { logo } from "../assets/images";
 import { FormattedMessage } from "react-intl";
 
@@ -20,22 +20,22 @@ const SampleIntegrityCheckWebcam = () => {
   const videoRef = useRef<HTMLVideoElement>(null);
   const canvasRef = useRef<HTMLCanvasElement>(null);
   const imageRef = useRef<HTMLImageElement>(null);
-  const [status, setStatus] = useState("greeting");
+  const containerRef = useRef<HTMLDivElement>(null);
+  const isAnalyzingRef = useRef(false);
+
+  const [status, setStatus] = useState("idle");
   const [blisterPackResults, setBlisterPackResults] = useState<
     BlisterPackResult[]
   >([]);
+  const [inferenceTime, setInferenceTime] = useState<number | null>(null);
+  const [analysisMode, setAnalysisMode] = useState<AnalysisMode>("cpu");
   const [error, setError] = useState<string | null>(null);
   const [captured, setCaptured] = useState<string | null>(null);
   const [currentTime] = useState(new Date());
-  const [scale] = useState({ x: 1, y: 1 });
   const navigate = useNavigate();
-  const apiClient = new APIClient();
+  const apiClient = useMemo(() => new APIClient(), []);
 
   React.useEffect(() => {
-    navigator.mediaDevices.getUserMedia({ video: true }).then((stream) => {
-      streamRef.current = stream;
-      if (videoRef.current) videoRef.current.srcObject = stream;
-    });
     return () => {
       if (streamRef.current) {
         streamRef.current.getTracks().forEach((track) => track.stop());
@@ -43,42 +43,80 @@ const SampleIntegrityCheckWebcam = () => {
     };
   }, []);
 
+  const startWebcam = async () => {
+    try {
+      const stream = await navigator.mediaDevices.getUserMedia({ video: true });
+      streamRef.current = stream;
+      setStatus("greeting");
+    } catch {
+      setError(
+        "Failed to access webcam. Please ensure you have given permission.",
+      );
+    }
+  };
+
   React.useEffect(() => {
     if (status === "greeting" && videoRef.current && streamRef.current) {
       videoRef.current.srcObject = streamRef.current;
     }
   }, [status]);
 
-  const dataURLtoFile = (dataurl: string, filename: string) => {
-    const arr = dataurl.split(",");
-    const mime = arr[0].match(/:(.*?);/)![1];
-    const bstr = atob(arr[1]);
-    const u8arr = new Uint8Array(bstr.length);
-    for (let i = 0; i < bstr.length; i++) u8arr[i] = bstr.charCodeAt(i);
-    return new File([u8arr], filename, { type: mime });
-  };
+  React.useEffect(() => {
+    let active = true;
+    const analyzeLoop = async () => {
+      if (
+        status !== "greeting" ||
+        !streamRef.current ||
+        !videoRef.current ||
+        !canvasRef.current
+      )
+        return;
+      if (isAnalyzingRef.current) return;
+
+      isAnalyzingRef.current = true;
+      try {
+        const ctx = canvasRef.current.getContext("2d", { alpha: false });
+        if (ctx) {
+          ctx.drawImage(videoRef.current, 0, 0, 960, 720);
+
+          const blob = await new Promise<Blob | null>((resolve) =>
+            canvasRef.current?.toBlob((b) => resolve(b), "image/jpeg", 0.7),
+          );
 
-  const handleCapture = async () => {
-    if (videoRef.current && canvasRef.current) {
-      const ctx = canvasRef.current.getContext("2d");
-      if (ctx) {
-        ctx.drawImage(videoRef.current, 0, 0, 960, 720);
-        const dataUrl = canvasRef.current.toDataURL("image/png");
-        setCaptured(dataUrl);
-        setStatus("analysis");
-        setError(null);
-        try {
-          const file = dataURLtoFile(dataUrl, "webcam.png");
-          const data = await apiClient.getBlisterPackResult(file);
-          setBlisterPackResults(data);
-          setStatus("result");
-        } catch {
-          setError("Backend rejected the image format or analysis failed.");
-          setStatus("greeting");
+          if (blob && active && status === "greeting") {
+            const file = new File([blob], "webcam.jpg", { type: "image/jpeg" });
+            const data = await apiClient.getBlisterPackResult(
+              file,
+              analysisMode,
+            );
+            if (active && status === "greeting") {
+              const url = URL.createObjectURL(blob);
+              setCaptured((prev) => {
+                if (prev && prev.startsWith("blob:")) URL.revokeObjectURL(prev);
+                return url;
+              });
+              setBlisterPackResults(data.results);
+              setInferenceTime(data.inferenceTime);
+            }
+          }
+        }
+      } catch (err) {
+        console.error("Loop analysis error:", err);
+      } finally {
+        isAnalyzingRef.current = false;
+        if (active && status === "greeting") {
+          setTimeout(analyzeLoop, 100);
         }
       }
+    };
+
+    if (status === "greeting") {
+      analyzeLoop();
     }
-  };
+    return () => {
+      active = false;
+    };
+  }, [status, analysisMode, apiClient]);
 
   const formatFullDate = (date: Date): string => {
     const time = date.toLocaleTimeString("en-GB", { hour12: false });
@@ -90,26 +128,16 @@ const SampleIntegrityCheckWebcam = () => {
     return `${time} - ${dayMonthYear}`;
   };
 
-  const handleRestartWebcam = () => {
-    setCaptured(null);
-    setBlisterPackResults([]);
-    setError(null);
-    setStatus("greeting");
-  };
-
-  const handleCaptureAndAnalysis = () => {
-    setCaptured(null);
-    setBlisterPackResults([]);
-    setError(null);
-    setStatus("greeting");
-    setTimeout(() => handleCapture(), 100);
+  const handleAnalysisClick = (mode: AnalysisMode) => {
+    setAnalysisMode(mode);
+    if (status === "idle") {
+      startWebcam();
+    }
   };
 
   const handleReturnPage = () => {
-    if (videoRef.current && videoRef.current.srcObject) {
-      (videoRef.current.srcObject as MediaStream)
-        .getTracks()
-        .forEach((track) => track.stop());
+    if (streamRef.current) {
+      streamRef.current.getTracks().forEach((track) => track.stop());
     }
     navigate("/sample-integrity-check", { state: { autoStart: true } });
   };
@@ -125,6 +153,38 @@ const SampleIntegrityCheckWebcam = () => {
     }
   };
 
+  const renderBBoxes = () => {
+    const media = imageRef.current || videoRef.current;
+    const container = containerRef.current;
+    if (!media || !container || blisterPackResults.length === 0) return null;
+
+    const rect = media.getBoundingClientRect();
+    const containerRect = container.getBoundingClientRect();
+
+    const scaleX = rect.width / 960;
+    const scaleY = rect.height / 720;
+
+    const offsetX = rect.left - containerRect.left;
+    const offsetY = rect.top - containerRect.top;
+
+    return blisterPackResults.map((defect, index) => (
+      <div
+        key={index}
+        className="position-absolute"
+        style={{
+          zIndex: 10,
+          left: offsetX + defect.bbox[0] * scaleX,
+          top: offsetY + defect.bbox[1] * scaleY,
+          width: defect.bbox[2] * scaleX,
+          height: defect.bbox[3] * scaleY,
+          border: `3px solid ${handleBBoxColor(defect.categoryId)}`,
+          backgroundColor: "rgba(255, 0, 0, 0.1)",
+          pointerEvents: "none",
+        }}
+      />
+    ));
+  };
+
   return (
     <Container
       fluid
@@ -156,10 +216,34 @@ const SampleIntegrityCheckWebcam = () => {
       <div className="row flex-grow-1 overflow-hidden">
         <div className="col-md-7 d-flex flex-column h-100">
           <div
+            ref={containerRef}
             className="position-relative flex-grow-1 bg-dark rounded-4 overflow-hidden border border-secondary shadow-lg d-flex align-items-center justify-content-center"
             style={{ minHeight: 320 }}
           >
+            {status === "idle" && (
+              <div className="text-secondary text-center">
+                <p>Webcam inactive.</p>
+                <p className="small">Click an analysis mode to start.</p>
+              </div>
+            )}
+
             {status === "greeting" && (
+              <video
+                ref={videoRef}
+                width={960}
+                height={720}
+                autoPlay
+                muted
+                playsInline
+                style={{
+                  position: "absolute",
+                  opacity: 0,
+                  pointerEvents: "none",
+                }}
+              />
+            )}
+
+            {(status === "greeting" || captured) && (
               <div
                 style={{
                   position: "absolute",
@@ -172,19 +256,16 @@ const SampleIntegrityCheckWebcam = () => {
                   justifyContent: "center",
                 }}
               >
-                <video
-                  ref={videoRef}
-                  width={960}
-                  height={720}
-                  autoPlay
-                  muted
-                  playsInline
-                  style={{
-                    background: "#222",
-                    maxWidth: "100%",
-                    maxHeight: "100%",
-                  }}
-                />
+                {captured ? (
+                  <Image
+                    ref={imageRef}
+                    src={captured}
+                    className="mw-100 mh-100 shadow-lg"
+                    style={{ objectFit: "contain" }}
+                  />
+                ) : status === "greeting" ? (
+                  <div className="spinner-border text-light" role="status" />
+                ) : null}
                 <canvas
                   ref={canvasRef}
                   width={960}
@@ -194,103 +275,94 @@ const SampleIntegrityCheckWebcam = () => {
               </div>
             )}
 
-            {captured && (status === "analysis" || status === "result") && (
-              <div className="position-relative d-inline-block mb-4">
-                <Image
-                  ref={imageRef}
-                  src={captured}
-                  className="mw-100 mh-100 shadow-lg"
-                  style={{ objectFit: "contain" }}
-                />
-                {status === "result" &&
-                  blisterPackResults.map((defect, index) => (
-                    <div
-                      key={index}
-                      className="position-absolute"
-                      style={{
-                        zIndex: 10,
-                        left: `${defect.bbox[0] * scale.x}px`,
-                        top: `${defect.bbox[1] * scale.y}px`,
-                        width: `${defect.bbox[2] * scale.x}px`,
-                        height: `${defect.bbox[3] * scale.y}px`,
-                        border: `3px solid ${handleBBoxColor(defect.categoryId)}`,
-                        backgroundColor: "rgba(255, 0, 0, 0.1)",
-                        pointerEvents: "none",
-                      }}
-                    />
-                  ))}
-              </div>
-            )}
+            {renderBBoxes()}
           </div>
         </div>
         <div className="col-md-5 d-flex flex-column align-items-center justify-content-center">
           <div className="mb-5 mt-5 text-center">
-            {status === "analysis" && (
-              <div className="spinner-border mb-5 spinner" role="status" />
-            )}
             <h3 className="fw-bold d-flex flex-column align-items-start text-start">
-              {status === "analysis" ? (
+              <div className="d-flex flex-column align-items-start gap-1">
                 <FormattedMessage
-                  id="SampleIntegrityCheck.analyseMessage"
-                  defaultMessage="Scanning in progress..."
+                  id="SampleIntegrityCheck.anomaliesDetectedMessage"
+                  defaultMessage="Anomalies detected"
                 />
-              ) : (
-                <div className="d-flex flex-column align-items-start gap-1">
-                  <FormattedMessage
-                    id="SampleIntegrityCheck.anomaliesDetectedMessage"
-                    defaultMessage="Anomalies detected"
-                  />
 
-                  <div className="d-flex align-items-center">
-                    <span
-                      className="status-box me-2"
-                      style={{ borderColor: EMPTY_BLISTER_COLOR }}
-                    ></span>
-                    <FormattedMessage
-                      id="SampleIntegrityCheck.emptyBlister"
-                      defaultMessage="Empty blister"
-                    />
-                  </div>
-                  <div className="d-flex align-items-center">
-                    <span
-                      className="status-box me-2"
-                      style={{ borderColor: FULL_BLISTER_COLOR }}
-                    ></span>
-                    <FormattedMessage
-                      id="SampleIntegrityCheck.fullBlister"
-                      defaultMessage="Full blister"
-                    />
+                {inferenceTime !== null && (
+                  <div
+                    className="mb-2"
+                    style={{
+                      fontSize: "1rem",
+                      color: "#fff",
+                      fontStyle: "italic",
+                    }}
+                  >
+                    Inference time:{" "}
+                    <strong>{inferenceTime.toFixed(2)} ms</strong>
                   </div>
+                )}
+
+                <div className="d-flex align-items-center">
+                  <span
+                    className="status-box me-2"
+                    style={{ borderColor: EMPTY_BLISTER_COLOR }}
+                  ></span>
+                  <FormattedMessage
+                    id="SampleIntegrityCheck.emptyBlister"
+                    defaultMessage="Empty blister"
+                  />
+                </div>
+                <div className="d-flex align-items-center">
+                  <span
+                    className="status-box me-2"
+                    style={{ borderColor: FULL_BLISTER_COLOR }}
+                  ></span>
+                  <FormattedMessage
+                    id="SampleIntegrityCheck.fullBlister"
+                    defaultMessage="Full blister"
+                  />
                 </div>
-              )}{" "}
+              </div>
             </h3>
           </div>
         </div>
-        <div></div>
       </div>
-      <div className="pt-3 d-flex gap-2">
+      <div className="mt-3 d-flex justify-content-center d-flex gap-2">
         <Button
           variant="light"
-          className="analysis-result-button flex-grow-1 py-3 fw-bold"
+          className="analyze-cpu-button flex-grow-1 py-3 px-5 fw-bold"
           onClick={handleReturnPage}
         >
           Gallery
         </Button>
         <Button
           variant="light"
-          className="analysis-result-button flex-grow-1 py-3 fw-bold border-2"
-          onClick={handleCaptureAndAnalysis}
-          disabled={status === "analysis"}
+          className={`analyze-cpu-button flex-grow-1 py-2 px-5 fw-bold ${analysisMode === "cpu" && status !== "idle" ? "active-analysis" : ""}`}
+          onClick={() => handleAnalysisClick("cpu")}
+        >
+          <FormattedMessage
+            id="components.SampleIntegrityCheck.cpuAnalysisButton"
+            defaultMessage="CPU Analysis"
+          />
+        </Button>
+        <Button
+          variant="light"
+          className={`analyze-gpu-button flex-grow-1 py-2 px-5 fw-bold ${analysisMode === "gpu" && status !== "idle" ? "active-analysis" : ""}`}
+          onClick={() => handleAnalysisClick("gpu")}
         >
-          {status === "analysis" ? "Scanning in progress..." : "Start Analysis"}
+          <FormattedMessage
+            id="components.SampleIntegrityCheck.gpuAnalysisButton"
+            defaultMessage="GPU Analysis"
+          />
         </Button>
         <Button
           variant="light"
-          className="analysis-result-button flex-grow-1 py-3 fw-bold"
-          onClick={handleRestartWebcam}
-          disabled={status === "greeting"}
+          className={`analyze-npu-button flex-grow-1 py-2 px-5 fw-bold ${analysisMode === "npu" && status !== "idle" ? "active-analysis" : ""}`}
+          onClick={() => handleAnalysisClick("npu")}
         >
-          Live Webcam Feedback
+          <FormattedMessage
+            id="components.SampleIntegrityCheck.npuAnalysisButton"
+            defaultMessage="NPU Analysis"
+          />
         </Button>
       </div>
     </Container>