+
+
+ {t('settings.serverConfig')}
+
+
+
+
+
+
+
+ {t('settings.appearance')}
+
+
+
+
+
+
+
+ {t('settings.language')}
+
+
+
+
+
+
+
+ {t('settings.about')}
+
+
+
+
+
+
+ );
+}
diff --git a/edge-ai-platform/frontend/src/app/workspace/[deviceId]/page.tsx b/edge-ai-platform/frontend/src/app/workspace/[deviceId]/page.tsx
new file mode 100644
index 0000000..295f5b8
--- /dev/null
+++ b/edge-ai-platform/frontend/src/app/workspace/[deviceId]/page.tsx
@@ -0,0 +1,11 @@
+import WorkspaceClient from './workspace-client';
+
+// Provide a placeholder param for Next.js static export.
+// Actual routing is handled by Go SPA fallback — all dynamic paths serve index.html.
+export function generateStaticParams() {
+ return [{ deviceId: '_' }];
+}
+
+export default function WorkspacePage() {
+ return
+
+
+ {t('settings.title')}
+{t('settings.subtitle')}
+
+
+
+
+ setBackendUrlInput(e.target.value)}
+ placeholder={t('settings.backendUrlPlaceholder')}
+ className="flex-1"
+ />
+
+
+ + {t('settings.backendUrlHint')} +
+
+
+
+
+ setRelayTokenInput(e.target.value)}
+ placeholder={t('settings.relayTokenPlaceholder')}
+ className="flex-1 font-mono text-sm"
+ />
+
+
+
+ + {t('settings.relayTokenHint')} +
+
+
+
+
+
+
+
+
+ + {t('settings.serverNote')} +
+
+
+
+
+
+
+
+
+
+ {t('settings.versionLabel')}
+ {updateInfo?.currentVersion || 'v0.1.0'}
+
+
+ {t('settings.platform')}
+ Edge AI Development Platform
+
+
+
+
+ {t('settings.updateCheck.title')}
+
+
+ {updateInfo?.updateAvailable && (
+
+
+ )}
+ {updateInfo && !updateInfo.updateAvailable && updateInfo.latestVersion && (
+
+ {t('settings.updateCheck.updateAvailable')}
+ {updateInfo.latestVersion}
+
+ {updateInfo.releaseNotes && (
+ {updateInfo.releaseNotes}
+ )} + {updateInfo.releaseUrl && ( + + {t('settings.updateCheck.downloadUpdate')} → + + )} +{t('settings.updateCheck.upToDate')}
+ )} + {updateError && ( +{updateError}
+ )} +
+
+ );
+}
diff --git a/edge-ai-platform/frontend/src/app/workspace/cluster/[clusterId]/cluster-workspace-client.tsx b/edge-ai-platform/frontend/src/app/workspace/cluster/[clusterId]/cluster-workspace-client.tsx
new file mode 100644
index 0000000..1497d89
--- /dev/null
+++ b/edge-ai-platform/frontend/src/app/workspace/cluster/[clusterId]/cluster-workspace-client.tsx
@@ -0,0 +1,138 @@
+'use client';
+
+import { useEffect } from 'react';
+import Link from 'next/link';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { useClusterStore } from '@/stores/cluster-store';
+import { useClusterInferenceStream } from '@/hooks/use-cluster-inference-stream';
+import { ClusterPerformance } from '@/components/cluster/cluster-performance';
+import { useResolvedParams } from '@/hooks/use-resolved-params';
+import { useTranslation } from '@/lib/i18n';
+
+export default function ClusterWorkspaceClient() {
+ const { t } = useTranslation();
+ const { clusterId } = useResolvedParams();
+ const {
+ selectedCluster,
+ fetchCluster,
+ inferenceRunning,
+ startInference,
+ stopInference,
+ results,
+ clearResults,
+ } = useClusterStore();
+
+ useClusterInferenceStream(clusterId, inferenceRunning);
+
+ useEffect(() => {
+ if (clusterId) {
+ fetchCluster(clusterId);
+ }
+ return () => {
+ clearResults();
+ };
+ }, [clusterId, fetchCluster, clearResults]);
+
+ const handleStart = async () => {
+ await startInference(clusterId);
+ };
+
+ const handleStop = async () => {
+ await stopInference(clusterId);
+ };
+
+ const latestResult = results.length > 0 ? results[results.length - 1] : null;
+
+ return (
+
+
+
+
+
+
+
+
+ {/* Only show manual inference controls in camera mode */}
+ {!isMediaMode && (
+ + {t('inference.workspace') + ':'} {selectedDevice?.name || deviceId} +
+
+ {isRunning ? (
+
+ ) : (
+
+ )}
+
+ )}
+
+
+
+
+
+
+ );
+}
diff --git a/edge-ai-platform/frontend/src/app/workspace/cluster/[clusterId]/page.tsx b/edge-ai-platform/frontend/src/app/workspace/cluster/[clusterId]/page.tsx
new file mode 100644
index 0000000..b416506
--- /dev/null
+++ b/edge-ai-platform/frontend/src/app/workspace/cluster/[clusterId]/page.tsx
@@ -0,0 +1,9 @@
+import ClusterWorkspaceClient from './cluster-workspace-client';
+
+export function generateStaticParams() {
+ return [{ clusterId: '_' }];
+}
+
+export default function ClusterWorkspacePage() {
+ return
+
+
+
+
+
+
+
+ + {t('cluster.workspace')}: {selectedCluster?.name || clusterId} +
+
+ {inferenceRunning ? (
+
+ ) : (
+
+ )}
+
+
+
+
+
+
+ {t('inference.details')}
+
+
+ {latestResult ? (
+
+
+
+
+
+
+ ) : (
+
+
+ {latestResult.classifications && latestResult.classifications.length > 0 && (
+
+
+ {t('inference.task')}
+{latestResult.taskType}
+
+
+ {t('inference.latency')}
+{latestResult.latencyMs.toFixed(1)} ms
+
+
+ {t('cluster.devices')}
+{latestResult.deviceId || '-'}
+
+
+ )}
+ {latestResult.detections && latestResult.detections.length > 0 && (
+ {t('inference.classificationResults')}
+ {latestResult.classifications.map((c, i) => ( +
+ {c.label}
+
+ {(c.confidence * 100).toFixed(1)}%
+
+
+ ))}
+
+
+ )}
+ Detections
+ {latestResult.detections.map((d, i) => ( +
+ {d.label}
+
+ {(d.confidence * 100).toFixed(1)}%
+
+
+ ))}
+ + {inferenceRunning ? t('common.loading') : t('cluster.startInference')} +
+ )} +
+
+
+
+
+
+ );
+}
diff --git a/edge-ai-platform/frontend/src/components/camera/camera-controls.tsx b/edge-ai-platform/frontend/src/components/camera/camera-controls.tsx
new file mode 100644
index 0000000..ac82ea7
--- /dev/null
+++ b/edge-ai-platform/frontend/src/components/camera/camera-controls.tsx
@@ -0,0 +1,28 @@
+'use client';
+
+import { Button } from '@/components/ui/button';
+import { useCameraStore } from '@/stores/camera-store';
+import { useTranslation } from '@/lib/i18n';
+
+interface CameraControlsProps {
+ deviceId: string;
+}
+
+export function CameraControls({ deviceId }: CameraControlsProps) {
+ const { t } = useTranslation();
+ const { cameras, isStreaming, startPipeline, stopPipeline } = useCameraStore();
+
+ return (
+
+
+
+ {batchProcessedCount}/{batchImages.length}
+
+
+
+
+ {batchImages.map((img, i) => {
+ const hasResult = i in batchResults;
+ const isProcessing = i === batchProcessedCount && !hasResult;
+ const isSelected = i === batchSelectedIndex;
+
+ return (
+
+ );
+ })}
+
+
+ {isStreaming ? (
+
+ ) : (
+
+ )}
+
+ );
+}
diff --git a/edge-ai-platform/frontend/src/components/camera/camera-feed.tsx b/edge-ai-platform/frontend/src/components/camera/camera-feed.tsx
new file mode 100644
index 0000000..f4c8b9b
--- /dev/null
+++ b/edge-ai-platform/frontend/src/components/camera/camera-feed.tsx
@@ -0,0 +1,78 @@
+'use client';
+
+import { useRef, useEffect } from 'react';
+import type { SourceType } from '@/types/camera';
+import { useTranslation } from '@/lib/i18n';
+
+interface CameraFeedProps {
+ streamUrl: string;
+ width?: number;
+ height?: number;
+ sourceType?: SourceType | null;
+ batchImageUrl?: string;
+ onDimensionsChange?: (width: number, height: number) => void;
+ /** Rendered as an absolute overlay inside the feed container (e.g. CameraOverlay) */
+ overlay?: React.ReactNode;
+}
+
+export function CameraFeed({ streamUrl, width = 640, height = 480, sourceType, batchImageUrl, onDimensionsChange, overlay }: CameraFeedProps) {
+ const { t } = useTranslation();
+ const imgRef = useRef
+
+ );
+ }
+
+ const displayUrl = batchImageUrl || streamUrl;
+
+ const altText =
+ sourceType === 'image' || sourceType === 'batch_image'
+ ? t('camera.uploadedImage')
+ : sourceType === 'video'
+ ? t('camera.videoPlayback')
+ : t('camera.cameraFeed');
+
+ return (
+
+
+ {t('camera.noInputSource')}
+{t('camera.selectSourceHint')}
+
+ 
+ {overlay}
+ {sourceType && sourceType !== 'camera' && (
+
+ );
+}
diff --git a/edge-ai-platform/frontend/src/components/camera/camera-inference-view.tsx b/edge-ai-platform/frontend/src/components/camera/camera-inference-view.tsx
new file mode 100644
index 0000000..ff46a21
--- /dev/null
+++ b/edge-ai-platform/frontend/src/components/camera/camera-inference-view.tsx
@@ -0,0 +1,62 @@
+'use client';
+
+import { useState, useCallback } from 'react';
+import { CameraFeed } from './camera-feed';
+import { CameraOverlay } from './camera-overlay';
+import { SourceSelector } from './source-selector';
+import { BatchImageThumbnails } from './batch-image-thumbnails';
+import { useCameraStore } from '@/stores/camera-store';
+import { useInferenceStore } from '@/stores/inference-store';
+import { getBackendUrl, appendRelayToken } from '@/lib/constants';
+
+interface CameraInferenceViewProps {
+ deviceId: string;
+}
+
+export function CameraInferenceView({ deviceId }: CameraInferenceViewProps) {
+ const { isStreaming, streamUrl, sourceType, batchSelectedIndex } = useCameraStore();
+ const { result, batchResults, confidenceThreshold } = useInferenceStore();
+
+ const displayWidth = 640;
+ const [renderedSize, setRenderedSize] = useState({ w: 640, h: 480 });
+ const isBatchMode = sourceType === 'batch_image';
+
+ const handleDimensionsChange = useCallback((w: number, h: number) => {
+ setRenderedSize({ w, h });
+ }, []);
+
+ // In batch mode, show the selected image's detections
+ const selectedResult = isBatchMode
+ ? batchResults[batchSelectedIndex]
+ : result;
+ const detections = selectedResult?.detections || [];
+
+ // In batch mode, use static image endpoint for viewing selected image
+ const batchImageUrl = isBatchMode
+ ? appendRelayToken(`${getBackendUrl()}/api/media/batch-images/${batchSelectedIndex}`)
+ : undefined;
+
+ return (
+
+ {sourceType === 'image' ? t('camera.image') : sourceType === 'batch_image' ? t('camera.batchImages') : t('camera.video')}
+
+ )}
+
+
+ );
+}
diff --git a/edge-ai-platform/frontend/src/components/camera/camera-overlay.tsx b/edge-ai-platform/frontend/src/components/camera/camera-overlay.tsx
new file mode 100644
index 0000000..864ec3c
--- /dev/null
+++ b/edge-ai-platform/frontend/src/components/camera/camera-overlay.tsx
@@ -0,0 +1,63 @@
+'use client';
+
+import { useEffect, useRef } from 'react';
+import type { DetectionResult } from '@/types/inference';
+
+interface CameraOverlayProps {
+ detections: DetectionResult[];
+ width: number;
+ height: number;
+ confidenceThreshold: number;
+}
+
+const COLORS = ['#FF6B6B', '#4ECDC4', '#45B7D1', '#96CEB4', '#FFEAA7', '#DDA0DD', '#98D8C8', '#F7DC6F'];
+
+export function CameraOverlay({ detections, width, height, confidenceThreshold }: CameraOverlayProps) {
+ const canvasRef = useRef
+ setActiveTab(v as typeof activeTab)}
+ >
+
+
+ {t('camera.camera')}
+
+
+ {t('camera.image')}
+
+
+ {t('camera.video')}
+
+
+
+
+
+ );
+}
diff --git a/edge-ai-platform/frontend/src/components/cluster/cluster-card.tsx b/edge-ai-platform/frontend/src/components/cluster/cluster-card.tsx
new file mode 100644
index 0000000..77a70ef
--- /dev/null
+++ b/edge-ai-platform/frontend/src/components/cluster/cluster-card.tsx
@@ -0,0 +1,78 @@
+'use client';
+
+import Link from 'next/link';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { useClusterStore } from '@/stores/cluster-store';
+import { useTranslation } from '@/lib/i18n';
+import type { Cluster } from '@/types/cluster';
+
+interface ClusterCardProps {
+ cluster: Cluster;
+}
+
+const statusVariant: Record
+ {isStreaming ? (
+ <>
+
+ {sourceFilename && (
+
+ {sourceFilename}
+
+ )}
+
+ ) : (
+ <>
+ {activeTab === 'camera' && (
+ hasCameras ? (
+
+ ) : (
+
+ + {t('camera.noCameraDetected')} +
+ ) + )} + + {activeTab === 'image' && ( +
+
+ )}
+
+ {activeTab === 'video' && (
+
+
+
+ {t('camera.jpgPngMultiple')}
+
+
+ {isDragging && (
+ {t('camera.dropImagesHere')}
+ )} + +
+
+ )}
+
+ )}
+
+
+
+
+
+ {videoMode === 'file' ? (
+
+
+
+ {t('camera.mp4AviMov')}
+
+
+
+ ) : (
+
+
+ )}
+
+ setVideoUrl(e.target.value)}
+ onKeyDown={(e) => {
+ if (e.key === 'Enter') handleUrlSubmit();
+ }}
+ className="flex-1"
+ />
+
+
+ + {t('camera.urlHelpText')} +
+
+ {cluster.name}
+
+ {t(`cluster.status.${cluster.status}`)}
+
+
+
+
+
+
+ {t('cluster.devices')}
+{activeDevices.length}
+
+
+ {t('inference.model')}
+{cluster.modelId || t('common.na')}
+
+ {activeDevices.map((m) => (
+
+
+ {m.deviceName || m.deviceId}
+
+ {m.deviceType} (w={m.weight})
+
+
+ ))}
+
+
+
+
+
+
+
+ {Array.from({ length: 3 }).map((_, i) => (
+
+ ))}
+
+ );
+ }
+
+ if (clusters.length === 0) {
+ return (
+
+ {t('cluster.noClusters')}
+
+ );
+ }
+
+ return (
+
+ {clusters.map((cluster) => (
+
+ );
+}
diff --git a/edge-ai-platform/frontend/src/components/cluster/cluster-performance.tsx b/edge-ai-platform/frontend/src/components/cluster/cluster-performance.tsx
new file mode 100644
index 0000000..e1f413c
--- /dev/null
+++ b/edge-ai-platform/frontend/src/components/cluster/cluster-performance.tsx
@@ -0,0 +1,59 @@
+'use client';
+
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { useClusterStore } from '@/stores/cluster-store';
+import { useTranslation } from '@/lib/i18n';
+
+export function ClusterPerformance() {
+ const { t } = useTranslation();
+ const { perDeviceStats, aggregateFps, selectedCluster } = useClusterStore();
+
+ return (
+
+
+
+ {aggregateFps.toFixed(1)}
+{t('inference.fps')}
+
+
+ {t('cluster.perDeviceFps')}
+ {selectedCluster?.devices + .filter((d) => d.status !== 'removed') + .map((member) => { + const stats = perDeviceStats[member.deviceId]; + return ( +
+
+ );
+ })}
+ {Object.keys(perDeviceStats).length === 0 && (
+
+
+ + {member.deviceName || member.deviceId} +
++ {member.deviceType} (w={member.weight}) +
+
+
+ + {stats ? stats.fps.toFixed(1) : '0.0'} fps +
++ {stats ? stats.latencyMs.toFixed(0) : '-'} ms +
+-
+ )} +{t('dashboard.noActivity')}
+ ) : ( +
+ {activities.map((activity) => {
+ const Icon = activityIcons[activity.type];
+ const color = activityColors[activity.type];
+ return (
+
+ )}
+
+
+ );
+ })}
+
+
+ {activity.message}
++ {formatTime(activity.timestamp)} +
+{t('dashboard.noConnectedDevices')}
+ ) : ( +
+ {connectedDevices.map((device) => (
+
+ )}
+
+
+ ))}
+
+
+
+
+ {device.name}
+{device.type}
+
+
+ {device.status}
+
+
+
+
+
+ {value}
+ {subtitle && {subtitle}
} +
+
+
+ {displayName}
+ {prefs.alias && (
+
+ {device.name}
+ )} +
+
+
+
+ {t('devices.type')}
+{device.type}
+
+
+ {device.flashedModel && (
+ {t('devices.firmware')}
+{device.firmwareVersion || t('common.na')}
+
+
+ )}
+ {t('devices.flashedModel')}
+{device.flashedModel}
+
+ {isConnected ? (
+ <>
+
+
+
+
+
+ ) : (
+
+ )}
+
+ {t('devices.connectionLog.noEvents')}
+ ) : ( +
+ {deviceLogs.map((entry, i) => (
+
+
+
+ ))}
+
+
+ {entry.event === 'connected' ? t('devices.connectionLog.connected') : t('devices.connectionLog.disconnected')}
+
+
+ {new Date(entry.timestamp).toLocaleString()}
+
+
+ {t('devices.health.status')}
+
+
+ {t('devices.health.firmwareVersion')}
+ {device.firmwareVersion || t('common.na')}
+
+
+ {t('devices.health.uptime')}
+ {formatUptime(uptimeMs) || t('common.na')}
+
+
+ {t('devices.health.lastSeen')}
+
+ {lastSeen ? new Date(lastSeen).toLocaleString() : t('common.na')}
+
+
+
+ {Array.from({ length: 3 }).map((_, i) => (
+
+ ))}
+
+ );
+ }
+
+ if (devices.length === 0) {
+ return (
+
+ {devices.map((device) => (
+
+ );
+}
diff --git a/edge-ai-platform/frontend/src/components/devices/device-settings-card.tsx b/edge-ai-platform/frontend/src/components/devices/device-settings-card.tsx
new file mode 100644
index 0000000..34500f9
--- /dev/null
+++ b/edge-ai-platform/frontend/src/components/devices/device-settings-card.tsx
@@ -0,0 +1,65 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Input } from '@/components/ui/input';
+import { Button } from '@/components/ui/button';
+import { useDevicePreferencesStore } from '@/stores/device-preferences-store';
+import { useTranslation } from '@/lib/i18n';
+import { showSuccess } from '@/lib/toast';
+
+interface DeviceSettingsCardProps {
+ deviceId: string;
+}
+
+export function DeviceSettingsCard({ deviceId }: DeviceSettingsCardProps) {
+ const { t } = useTranslation();
+ const { getPreferences, setAlias, setNotes } = useDevicePreferencesStore();
+ const prefs = getPreferences(deviceId);
+
+ const [alias, setAliasLocal] = useState(prefs.alias);
+ const [notes, setNotesLocal] = useState(prefs.notes);
+
+ useEffect(() => {
+ const p = getPreferences(deviceId);
+ setAliasLocal(p.alias);
+ setNotesLocal(p.notes);
+ }, [deviceId, getPreferences]);
+
+ const handleSave = () => {
+ setAlias(deviceId, alias);
+ setNotes(deviceId, notes);
+ showSuccess(t('devices.settings.settingsSaved'));
+ };
+
+ return (
+
+
+ setAliasLocal(e.target.value)}
+ />
+
+
+
+