Skip to content

CPU/GPU/NPU and webcam live analysis implementation for all verticals #167

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
carlo-ferriolo wants to merge 2 commits into
base: main
Choose a base branch
from
Open

CPU/GPU/NPU and webcam live analysis implementation for all verticals #167

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
582e1a8
[OOBE] add new page for webcam analysis
carlo-ferriolo Apr 10, 2026
390b1ed
[OOBE] add new button for cpu, gpu and npu analysis
carlo-ferriolo Apr 20, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 15 additions & 0 deletions oobe/src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down Expand Up @@ -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} />}
Expand Down
49 changes: 28 additions & 21 deletions oobe/src/api/APIClient.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 }
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -160,23 +159,27 @@ 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: {
"Content-Type": imageFile.type,
},
},
);
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> {
Expand Down Expand Up @@ -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: {
Expand All @@ -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) {
Expand Down
36 changes: 18 additions & 18 deletions oobe/src/i18n/langs/en.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
},
Expand Down Expand Up @@ -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"
Expand Down
35 changes: 35 additions & 0 deletions oobe/src/pages/CrowdAndFallDetection.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
Loading
Loading