(null);
48 | const [isConnected, setIsConnected] = useState(false);
49 |
50 | useEffect(() => {
51 | // Connect to WebSocket when the hook is first used
52 | wsService.connect();
53 |
54 | // Handle WebSocket connection errors
55 | const handleError = (error: Error) => {
56 | setError('WebSocket connection error');
57 | setIsConnected(false);
58 | };
59 |
60 | // Handle max reconnection attempts reached
61 | const handleMaxReconnect = () => {
62 | setError('Unable to connect to server. Please refresh the page.');
63 | setIsConnected(false);
64 | };
65 |
66 | wsService.on('error', handleError);
67 | wsService.on('max_reconnect_attempts', handleMaxReconnect);
68 |
69 | return () => {
70 | wsService.off('error', handleError);
71 | wsService.off('max_reconnect_attempts', handleMaxReconnect);
72 | };
73 | }, []);
74 |
75 | useEffect(() => {
76 | // Subscribe to training updates for the specific task
77 | const handleUpdate = (update: TrainingUpdate) => {
78 | setProgress((prev) => {
79 | const newEvents = update.event
80 | ? [...prev.events, update.event]
81 | : prev.events;
82 |
83 | return {
84 | status: update.status as TrainingProgress['status'],
85 | metrics: update.metrics,
86 | events: newEvents,
87 | };
88 | });
89 | setIsConnected(true);
90 | setError(null);
91 | };
92 |
93 | const updateEventName = `training_update:${taskId}`;
94 | wsService.on(updateEventName, handleUpdate);
95 | wsService.subscribeToTrainingUpdates(taskId);
96 |
97 | return () => {
98 | wsService.off(updateEventName, handleUpdate);
99 | wsService.unsubscribeFromTrainingUpdates(taskId);
100 | };
101 | }, [taskId]);
102 |
103 | const startTraining = useCallback(async () => {
104 | try {
105 | await fetch(`/api/training/${taskId}/start`, {
106 | method: 'POST',
107 | });
108 | } catch (err) {
109 | setError('Failed to start training');
110 | }
111 | }, [taskId]);
112 |
113 | const stopTraining = useCallback(async () => {
114 | try {
115 | await fetch(`/api/training/${taskId}/stop`, {
116 | method: 'POST',
117 | });
118 | } catch (err) {
119 | setError('Failed to stop training');
120 | }
121 | }, [taskId]);
122 |
123 | const refreshProgress = useCallback(async () => {
124 | try {
125 | const response = await fetch(`/api/training/${taskId}/progress`);
126 | const data: TrainingUpdate = await response.json();
127 |
128 | setProgress((prev) => ({
129 | status: data.status as TrainingProgress['status'],
130 | metrics: data.metrics,
131 | events: data.event ? [...prev.events, data.event] : prev.events,
132 | }));
133 | } catch (err) {
134 | setError('Failed to refresh training progress');
135 | }
136 | }, [taskId]);
137 |
138 | return {
139 | ...progress,
140 | error,
141 | isConnected,
142 | startTraining,
143 | stopTraining,
144 | refreshProgress,
145 | };
146 | }
--------------------------------------------------------------------------------
/src/index.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { createRoot } from 'react-dom/client';
3 | import { App } from './App';
4 |
5 | const container = document.getElementById('root');
6 | if (!container) {
7 | throw new Error('Failed to find the root element');
8 | }
9 |
10 | const root = createRoot(container);
11 | root.render(
12 |
13 |
14 |
15 | );
--------------------------------------------------------------------------------
/src/layouts/MainLayout.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Box, AppBar, Toolbar, Typography, Drawer, List, ListItem, ListItemIcon, ListItemText, IconButton } from '@mui/material';
3 | import { styled } from '@mui/material/styles';
4 | import { useNavigate, useLocation } from 'react-router-dom';
5 | import {
6 | Menu as MenuIcon,
7 | Dataset as DatasetIcon,
8 | Psychology as TrainingIcon,
9 | Dashboard as DashboardIcon,
10 | } from '@mui/icons-material';
11 |
12 | const drawerWidth = 240;
13 |
14 | const Root = styled('div')({
15 | display: 'flex',
16 | });
17 |
18 | const StyledAppBar = styled(AppBar)(({ theme }) => ({
19 | zIndex: theme.zIndex.drawer + 1,
20 | }));
21 |
22 | const StyledDrawer = styled(Drawer)({
23 | width: drawerWidth,
24 | flexShrink: 0,
25 | '& .MuiDrawer-paper': {
26 | width: drawerWidth,
27 | boxSizing: 'border-box',
28 | },
29 | });
30 |
31 | const MainContent = styled('main')(({ theme }) => ({
32 | flexGrow: 1,
33 | padding: theme.spacing(3),
34 | marginTop: 64,
35 | }));
36 |
37 | interface MainLayoutProps {
38 | children: React.ReactNode;
39 | }
40 |
41 | export function MainLayout({ children }: MainLayoutProps) {
42 | const navigate = useNavigate();
43 | const location = useLocation();
44 | const [mobileOpen, setMobileOpen] = React.useState(false);
45 |
46 | const menuItems = [
47 | { text: 'Dashboard', icon: , path: '/' },
48 | { text: 'Datasets', icon: , path: '/datasets' },
49 | { text: 'Training Tasks', icon: , path: '/training' },
50 | ];
51 |
52 | const handleDrawerToggle = () => {
53 | setMobileOpen(!mobileOpen);
54 | };
55 |
56 | const drawer = (
57 |
58 |
59 |
60 | {menuItems.map((item) => (
61 | {
66 | navigate(item.path);
67 | setMobileOpen(false);
68 | }}
69 | >
70 | {item.icon}
71 |
72 |
73 | ))}
74 |
75 |
76 | );
77 |
78 | return (
79 |
80 |
81 |
82 |
89 |
90 |
91 |
92 | Cipher Nexus
93 |
94 |
95 |
96 |
97 |
98 |
109 | {drawer}
110 |
111 |
112 |
119 | {drawer}
120 |
121 |
122 |
123 |
124 | {children}
125 |
126 |
127 | );
128 | }
--------------------------------------------------------------------------------
/src/pages/auth/LoginPage.tsx:
--------------------------------------------------------------------------------
1 | import React, { useState } from 'react';
2 | import { Link as RouterLink } from 'react-router-dom';
3 | import {
4 | Container,
5 | Box,
6 | Typography,
7 | TextField,
8 | Button,
9 | Link,
10 | Alert,
11 | Paper,
12 | } from '@mui/material';
13 | import { useAuth } from '../../components/auth/AuthProvider';
14 |
15 | export function LoginPage() {
16 | const { login, error } = useAuth();
17 | const [email, setEmail] = useState('');
18 | const [password, setPassword] = useState('');
19 | const [isSubmitting, setIsSubmitting] = useState(false);
20 |
21 | const handleSubmit = async (e: React.FormEvent) => {
22 | e.preventDefault();
23 | setIsSubmitting(true);
24 | try {
25 | await login(email, password);
26 | } catch (err) {
27 | // Error is handled by AuthProvider
28 | } finally {
29 | setIsSubmitting(false);
30 | }
31 | };
32 |
33 | return (
34 |
35 |
43 |
53 |
54 | Sign in
55 |
56 | {error && (
57 |
58 | {error}
59 |
60 | )}
61 |
62 | setEmail(e.target.value)}
73 | />
74 | setPassword(e.target.value)}
85 | />
86 |
95 |
96 |
97 | {"Don't have an account? Sign Up"}
98 |
99 |
100 |
101 |
102 |
103 |
104 | );
105 | }
--------------------------------------------------------------------------------
/src/pages/auth/RegisterPage.tsx:
--------------------------------------------------------------------------------
1 | import React, { useState } from 'react';
2 | import { Link as RouterLink } from 'react-router-dom';
3 | import {
4 | Container,
5 | Box,
6 | Typography,
7 | TextField,
8 | Button,
9 | Link,
10 | Alert,
11 | Paper,
12 | } from '@mui/material';
13 | import { useAuth } from '../../components/auth/AuthProvider';
14 |
15 | export function RegisterPage() {
16 | const { register, error } = useAuth();
17 | const [username, setUsername] = useState('');
18 | const [email, setEmail] = useState('');
19 | const [password, setPassword] = useState('');
20 | const [confirmPassword, setConfirmPassword] = useState('');
21 | const [isSubmitting, setIsSubmitting] = useState(false);
22 | const [validationError, setValidationError] = useState(null);
23 |
24 | const validateForm = () => {
25 | if (password !== confirmPassword) {
26 | setValidationError('Passwords do not match');
27 | return false;
28 | }
29 | if (password.length < 8) {
30 | setValidationError('Password must be at least 8 characters long');
31 | return false;
32 | }
33 | setValidationError(null);
34 | return true;
35 | };
36 |
37 | const handleSubmit = async (e: React.FormEvent) => {
38 | e.preventDefault();
39 | if (!validateForm()) return;
40 |
41 | setIsSubmitting(true);
42 | try {
43 | await register(username, email, password);
44 | } catch (err) {
45 | // Error is handled by AuthProvider
46 | } finally {
47 | setIsSubmitting(false);
48 | }
49 | };
50 |
51 | return (
52 |
53 |
61 |
71 |
72 | Sign up
73 |
74 | {(error || validationError) && (
75 |
76 | {error || validationError}
77 |
78 | )}
79 |
80 | setUsername(e.target.value)}
91 | />
92 | setEmail(e.target.value)}
102 | />
103 | setPassword(e.target.value)}
114 | />
115 | setConfirmPassword(e.target.value)}
126 | />
127 |
136 |
137 |
138 | {'Already have an account? Sign in'}
139 |
140 |
141 |
142 |
143 |
144 |
145 | );
146 | }
--------------------------------------------------------------------------------
/src/services/websocket.ts:
--------------------------------------------------------------------------------
1 | import { EventEmitter } from 'events';
2 |
3 | interface WebSocketMessage {
4 | type: string;
5 | payload: any;
6 | }
7 |
8 | interface TrainingUpdate {
9 | taskId: string;
10 | status: string;
11 | metrics: {
12 | loss: number;
13 | accuracy: number;
14 | epoch: number;
15 | step: number;
16 | totalSteps: number;
17 | learningRate: number;
18 | };
19 | event?: {
20 | type: 'info' | 'warning' | 'error' | 'success';
21 | message: string;
22 | timestamp: string;
23 | };
24 | }
25 |
26 | class WebSocketService extends EventEmitter {
27 | private ws: WebSocket | null = null;
28 | private reconnectAttempts = 0;
29 | private maxReconnectAttempts = 5;
30 | private reconnectTimeout = 1000;
31 | private pingInterval: NodeJS.Timeout | null = null;
32 | private subscriptions: Set = new Set();
33 |
34 | constructor(private baseUrl: string) {
35 | super();
36 | }
37 |
38 | connect() {
39 | if (this.ws?.readyState === WebSocket.OPEN) return;
40 |
41 | this.ws = new WebSocket(this.baseUrl);
42 |
43 | this.ws.onopen = () => {
44 | console.log('WebSocket connected');
45 | this.reconnectAttempts = 0;
46 | this.startPingInterval();
47 | this.resubscribe();
48 | };
49 |
50 | this.ws.onclose = () => {
51 | console.log('WebSocket disconnected');
52 | this.cleanup();
53 | this.attemptReconnect();
54 | };
55 |
56 | this.ws.onerror = (error) => {
57 | console.error('WebSocket error:', error);
58 | this.emit('error', error);
59 | };
60 |
61 | this.ws.onmessage = (event) => {
62 | try {
63 | const message: WebSocketMessage = JSON.parse(event.data);
64 | this.handleMessage(message);
65 | } catch (error) {
66 | console.error('Error parsing WebSocket message:', error);
67 | }
68 | };
69 | }
70 |
71 | private handleMessage(message: WebSocketMessage) {
72 | switch (message.type) {
73 | case 'training_update':
74 | const update: TrainingUpdate = message.payload;
75 | this.emit(`training_update:${update.taskId}`, update);
76 | break;
77 | case 'pong':
78 | // Handle pong response
79 | break;
80 | default:
81 | console.warn('Unknown message type:', message.type);
82 | }
83 | }
84 |
85 | private startPingInterval() {
86 | this.pingInterval = setInterval(() => {
87 | this.send({ type: 'ping' });
88 | }, 30000);
89 | }
90 |
91 | private cleanup() {
92 | if (this.pingInterval) {
93 | clearInterval(this.pingInterval);
94 | this.pingInterval = null;
95 | }
96 | }
97 |
98 | private attemptReconnect() {
99 | if (this.reconnectAttempts >= this.maxReconnectAttempts) {
100 | console.error('Max reconnection attempts reached');
101 | this.emit('max_reconnect_attempts');
102 | return;
103 | }
104 |
105 | this.reconnectAttempts++;
106 | const timeout = this.reconnectTimeout * Math.pow(2, this.reconnectAttempts - 1);
107 |
108 | console.log(`Attempting to reconnect in ${timeout}ms (attempt ${this.reconnectAttempts})`);
109 | setTimeout(() => this.connect(), timeout);
110 | }
111 |
112 | private resubscribe() {
113 | this.subscriptions.forEach((taskId) => {
114 | this.send({
115 | type: 'subscribe',
116 | payload: { taskId },
117 | });
118 | });
119 | }
120 |
121 | subscribeToTrainingUpdates(taskId: string) {
122 | this.subscriptions.add(taskId);
123 | if (this.ws?.readyState === WebSocket.OPEN) {
124 | this.send({
125 | type: 'subscribe',
126 | payload: { taskId },
127 | });
128 | }
129 | }
130 |
131 | unsubscribeFromTrainingUpdates(taskId: string) {
132 | this.subscriptions.delete(taskId);
133 | if (this.ws?.readyState === WebSocket.OPEN) {
134 | this.send({
135 | type: 'unsubscribe',
136 | payload: { taskId },
137 | });
138 | }
139 | }
140 |
141 | private send(message: WebSocketMessage) {
142 | if (this.ws?.readyState === WebSocket.OPEN) {
143 | this.ws.send(JSON.stringify(message));
144 | } else {
145 | console.warn('WebSocket is not connected');
146 | }
147 | }
148 |
149 | disconnect() {
150 | this.cleanup();
151 | if (this.ws) {
152 | this.ws.close();
153 | this.ws = null;
154 | }
155 | }
156 | }
157 |
158 | // Create a singleton instance
159 | const wsService = new WebSocketService(process.env.REACT_APP_WS_URL || 'ws://localhost:8080/ws');
160 |
161 | export default wsService;
--------------------------------------------------------------------------------
/src/types/index.ts:
--------------------------------------------------------------------------------
1 | // Dataset types
2 | export interface Dataset {
3 | id: string;
4 | name: string;
5 | description: string;
6 | size: number;
7 | created: Date;
8 | updated: Date;
9 | status: 'active' | 'processing' | 'error';
10 | type: 'public' | 'private';
11 | owner: string;
12 | }
13 |
14 | // Training task types
15 | export interface TrainingTask {
16 | id: string;
17 | name: string;
18 | description: string;
19 | dataset: string;
20 | model: string;
21 | parameters: Record;
22 | status: 'pending' | 'running' | 'completed' | 'failed';
23 | progress: number;
24 | created: Date;
25 | updated: Date;
26 | owner: string;
27 | results?: Record;
28 | }
29 |
30 | // User types
31 | export interface User {
32 | id: string;
33 | username: string;
34 | email: string;
35 | role: 'admin' | 'user';
36 | created: Date;
37 | lastLogin: Date;
38 | }
39 |
40 | // API Response types
41 | export interface ApiResponse {
42 | success: boolean;
43 | data?: T;
44 | error?: string;
45 | message?: string;
46 | }
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "es5",
4 | "lib": ["dom", "dom.iterable", "esnext"],
5 | "allowJs": true,
6 | "skipLibCheck": true,
7 | "esModuleInterop": true,
8 | "allowSyntheticDefaultImports": true,
9 | "strict": true,
10 | "forceConsistentCasingInFileNames": true,
11 | "noFallthroughCasesInSwitch": true,
12 | "module": "esnext",
13 | "moduleResolution": "node",
14 | "resolveJsonModule": true,
15 | "isolatedModules": true,
16 | "noEmit": true,
17 | "jsx": "react-jsx",
18 | "baseUrl": "src"
19 | },
20 | "include": ["src"]
21 | }
22 |
--------------------------------------------------------------------------------
5 |