PROJECT OVERVIEW:
This project aims to build a single-page application (SPA) that leverages the TinyLoRA technique, enabling users to train highly accurate reasoning models with a minimal number of parameters. The core value proposition is democratizing advanced AI reasoning capabilities by drastically reducing computational resource requirements. Users can upload their datasets, configure training parameters based on the TinyLoRA methodology, and train models that can achieve state-of-the-art performance on benchmarks like GSM8K, AIME, and MATH500 using as few as 13 trained parameters. The application will provide a user-friendly interface for managing training jobs, monitoring progress, visualizing results, and testing trained models via a simple API endpoint. This makes sophisticated AI reasoning accessible to researchers, developers, and students with limited hardware or budget.
TECH STACK:
- Frontend Framework: React (using Vite for fast development server and build)
- Styling: Tailwind CSS for rapid UI development and responsive design
- State Management: Zustand for global state management (simple, performant)
- Routing: React Router DOM for navigation within the SPA
- API Client: Axios for making requests to a potential backend or mock API
- UI Components: Radix UI primitives for accessible and customizable UI elements (e.g., Dialog, Select, Button)
- Icons: Heroicons
- Charting Library: Chart.js or Recharts for visualizing training metrics
- Form Handling: React Hook Form for efficient form management
- Deployment: Vercel or Netlify for seamless deployment
CORE FEATURES:
1. **Dataset Upload & Management**:
* User Flow: User navigates to the 'Dataset' section. Clicks 'Upload Dataset'. A modal appears allowing file selection (e.g., .csv, .jsonl). User provides a dataset name. Upon successful upload, the dataset appears in a list. User can view details, delete, or select a dataset for training.
* Details: Supports common data formats for reasoning tasks (e.g., problem-solution pairs). Basic validation for file type and size.
2. **Model Training Configuration**:
* User Flow: User navigates to the 'Train Model' section. Selects a previously uploaded dataset. Chooses a base model (if applicable, e.g., Qwen2.5). Configures TinyLoRA parameters: target parameter count (e.g., 13, 26), LoRA rank (1), learning rate, batch size, epochs. Selects a benchmark task (e.g., GSM8K). Clicks 'Start Training'. A confirmation modal appears. Upon confirmation, the training job is initiated.
* Details: Pre-defined settings for common benchmarks. Input fields for custom parameters with sensible defaults and validation.
3. **Training Monitoring & Visualization**:
* User Flow: User navigates to the 'Training Jobs' section. Sees a list of active and completed training jobs with status (e.g., 'Running', 'Completed', 'Failed'). Clicking on a specific job shows real-time or historical metrics: accuracy over epochs, loss curves, parameter efficiency. Charts are displayed dynamically.
* Details: Real-time updates for active jobs. Historical data displayed using charting libraries. Clear visual indicators for success or failure.
4. **Model Testing & Inference**:
* User Flow: User navigates to the 'Test Model' section. Selects a trained model. Enters a new reasoning problem (text input) or uploads a test file. Clicks 'Infer'. The application displays the model's predicted reasoning steps and final answer.
* Details: Simple text input for quick tests. Option to upload a batch of test cases. Displays output clearly, highlighting the reasoning process and the final result.
5. **User Dashboard**:
* User Flow: Upon login, the user sees a dashboard summarizing their recent activities: active training jobs, available datasets, trained models, and overall usage statistics.
* Details: Provides a quick overview and quick links to key sections.
UI/UX DESIGN:
- **Layout**: A clean, sidebar-navigation based SPA layout. The main content area displays the active section (Dashboard, Datasets, Train, Monitor, Test). A top header might contain user profile and notifications.
- **Color Palette**: Primary: Deep Blue (#1E3A8A), Secondary: Teal (#14B8A6), Accent: Orange (#F97316), Neutral: Grays (#F3F4F6, #6B7280, #1F2937). Use dark mode variant.
- **Typography**: Modern sans-serif font like Inter or Poppins. Clear hierarchy with distinct heading sizes and body text.
- **Responsive Design**: Mobile-first approach. Sidebar collapses into a hamburger menu on smaller screens. Content adjusts fluidly. Ensure usability across devices (desktop, tablet, mobile).
- **Component Styling**: Tailwind CSS utility classes applied directly. Use `prose` for any text-heavy areas. Consistent spacing, padding, and margins.
COMPONENT BREAKDOWN:
- `App.jsx`: Main application component, sets up routing.
- `Layout.jsx`: Wrapper component containing Sidebar and Header.
- `Sidebar.jsx`: Navigation links, responsive toggle button. Props: `isOpen`, `onClose`, `routes`.
- `Header.jsx`: User info, notifications. Props: `user`.
- `DashboardPage.jsx`: Displays summary cards. Props: `userStats`, `recentJobs`.
- `StatCard.jsx`: Displays a single metric. Props: `title`, `value`, `icon`.
- `JobList.jsx`: Displays a list of training jobs. Props: `jobs`.
- `DatasetsPage.jsx`: Manages dataset uploads and listings.
- `DatasetList.jsx`: Renders `DatasetListItem`. Props: `datasets`, `onSelect`, `onDelete`.
- `DatasetListItem.jsx`: Displays a single dataset. Props: `dataset`, `isSelected`, `onSelect`, `onDelete`.
- `UploadDatasetModal.jsx`: Modal for file upload. Props: `isOpen`, `onClose`, `onSubmit`.
- `TrainPage.jsx`: Configuration form for training jobs.
- `TrainingForm.jsx`: Main form component. Props: `datasets`, `baseModels`, `onSubmit`.
- `DatasetSelector.jsx`: Selects dataset. Props: `datasets`, `onChange`.
- `ParameterInput.jsx`: Input for numeric params. Props: `label`, `value`, `onChange`, `min`, `max`, `step`.
- `BenchmarkSelector.jsx`: Selects benchmark. Props: `benchmarks`, `onChange`.
- `MonitorPage.jsx`: Displays training job status and metrics.
- `JobStatusTable.jsx`: Table view of jobs. Props: `jobs`, `onRowClick`.
- `TrainingMetricsChart.jsx`: Displays charts. Props: `metrics` (data), `type` ('accuracy', 'loss').
- `TestPage.jsx`: Interface for testing trained models.
- `ModelSelector.jsx`: Selects a trained model. Props: `trainedModels`, `onChange`.
- `InferenceForm.jsx`: Input for test data and inference button. Props: `onSubmit`.
- `InferenceResult.jsx`: Displays model output. Props: `result`.
DATA MODEL:
- **Global State (Zustand)**:
```javascript
{
user: { id: string, name: string, email: string },
datasets: Dataset[],
trainingJobs: TrainingJob[],
trainedModels: TrainedModel[],
config: {
// Default settings, user preferences
}
}
```
- **Dataset Object**:
```javascript
{
id: string,
name: string,
uploadDate: string,
sizeBytes: number,
format: 'csv' | 'jsonl',
// pointer to actual data if stored, or metadata
}
```
- **TrainingJob Object**:
```javascript
{
id: string,
datasetId: string,
modelName: string, // e.g., 'Qwen2.5'
trainingParams: {
targetParams: number,
loraRank: 1,
learningRate: number,
batchSize: number,
epochs: number
},
benchmark: string, // e.g., 'GSM8K'
status: 'queued' | 'running' | 'completed' | 'failed',
startDate: string | null,
endDate: string | null,
metrics: {
accuracyHistory: Array<{ epoch: number, value: number }],
lossHistory: Array<{ epoch: number, value: number }>
},
errorMessage: string | null
}
```
- **TrainedModel Object**:
```javascript
{
id: string,
name: string,
trainingJobId: string,
trainedParamsCount: number,
performance: { accuracy: number, ... } // Summary from job
// Pointer to model weights or API endpoint
}
```
- **Mock Data Format (for local testing/initialization)**:
```javascript
// datasets.json
[
{ "id": "ds_1", "name": "GSM8K Subset", "uploadDate": "2024-07-27T10:00:00Z", "sizeBytes": 102400, "format": "csv" },
{ "id": "ds_2", "name": "MATH500 Sample", "uploadDate": "2024-07-27T11:00:00Z", "sizeBytes": 512000, "format": "jsonl" }
]
// trainingJobs.json
[
{ "id": "job_1", "datasetId": "ds_1", "modelName": "Qwen2.5", "trainingParams": { "targetParams": 13, "loraRank": 1, "learningRate": 0.0001, "batchSize": 8, "epochs": 5 }, "benchmark": "GSM8K", "status": "completed", "startDate": "2024-07-26T12:00:00Z", "endDate": "2024-07-26T13:00:00Z", "metrics": { "accuracyHistory": [{"epoch": 1, "value": 0.85}, {"epoch": 5, "value": 0.91}], "lossHistory": [...] }, "errorMessage": null },
{ "id": "job_2", "datasetId": "ds_1", "modelName": "Qwen2.5", "trainingParams": { "targetParams": 26, "loraRank": 1, "learningRate": 0.0001, "batchSize": 8, "epochs": 5 }, "benchmark": "GSM8K", "status": "running", "startDate": "2024-07-27T14:00:00Z", "endDate": null, "metrics": {"accuracyHistory": [{"epoch": 1, "value": 0.88}], "lossHistory": [...] }, "errorMessage": null }
]
```
ANIMATIONS & INTERACTIONS:
- **Page Transitions**: Subtle fade-in/fade-out transitions between pages using `Framer Motion` or CSS transitions.
- **Button Hover Effects**: Slight scale-up or background color change on button hover.
- **Loading States**: Use spinners or skeleton loaders for data fetching and model training progress. Indicate loading clearly for API calls.
- **Form Feedback**: Visual cues for input validation (e.g., red border for errors). Success messages upon form submission.
- **Sidebar Toggle**: Smooth slide animation for the sidebar.
- **Chart Interactions**: Tooltips on hover for chart data points.
- **Micro-interactions**: Subtle animations on list item expansion/collapse, button clicks.
EDGE CASES:
- **Empty States**: Display user-friendly messages and clear calls to action when datasets, training jobs, or models lists are empty (e.g., 'No datasets uploaded yet. Click here to upload your first dataset.').
- **Error Handling**: Gracefully handle API errors, network failures, and invalid user inputs. Display informative error messages to the user without crashing the application.
- **Validation**: Implement robust client-side validation for all user inputs (dataset names, parameter ranges, file types). Server-side validation should also be considered if a backend is implemented.
- **Accessibility (a11y)**:
- Use semantic HTML5 elements.
- Ensure sufficient color contrast.
- Provide ARIA attributes where necessary.
- Ensure keyboard navigability for all interactive elements.
- Use `Radix UI` primitives which are built with accessibility in mind.
- **Large Datasets**: Consider strategies for handling large dataset uploads (e.g., chunking, progress indicators, server-side processing). For MVP, limit file size.
- **Training Failures**: Provide clear error messages and logs for failed training jobs.
SAMPLE DATA:
1. **User Object**: `{ "id": "user_123", "name": "Alice", "email": "alice@example.com" }`
2. **Dataset List**: (See DATA MODEL section for `Dataset[]` structure)
* `{ "id": "ds_gsm8k_train", "name": "GSM8K Training Data", "uploadDate": "2024-07-27T10:00:00Z", "sizeBytes": 150000, "format": "jsonl" }`
* `{ "id": "ds_math500_dev", "name": "MATH500 Dev Set", "uploadDate": "2024-07-27T11:00:00Z", "sizeBytes": 750000, "format": "csv" }`
3. **Training Job List**: (See DATA MODEL section for `TrainingJob[]` structure)
* `{ "id": "job_gsm8k_tiny_1", "datasetId": "ds_gsm8k_train", "modelName": "Qwen2.5", "trainingParams": { "targetParams": 13, "loraRank": 1, "learningRate": 0.0001, "batchSize": 16, "epochs": 10 }, "benchmark": "GSM8K", "status": "completed", "startDate": "2024-07-26T12:00:00Z", "endDate": "2024-07-26T13:30:00Z", "metrics": { "accuracyHistory": [{"epoch": 1, "value": 0.85}, {"epoch": 5, "value": 0.90}, {"epoch": 10, "value": 0.915}], "lossHistory": [{"epoch": 1, "value": 0.2}, {"epoch": 5, "value": 0.1}, {"epoch": 10, "value": 0.08}] }, "errorMessage": null }`
* `{ "id": "job_math_tiny_1", "datasetId": "ds_math500_dev", "modelName": "Qwen2.5", "trainingParams": { "targetParams": 26, "loraRank": 1, "learningRate": 0.0002, "batchSize": 8, "epochs": 15 }, "benchmark": "MATH500", "status": "running", "startDate": "2024-07-27T14:00:00Z", "endDate": null, "metrics": {"accuracyHistory": [{"epoch": 1, "value": 0.70}, {"epoch": 5, "value": 0.75}], "lossHistory": [{"epoch": 1, "value": 0.3}, {"epoch": 5, "value": 0.25}] }, "errorMessage": null }`
* `{ "id": "job_fail_1", "datasetId": "ds_gsm8k_train", "modelName": "Qwen2.5", "trainingParams": { "targetParams": 13, "loraRank": 1, "learningRate": 0.0001, "batchSize": 16, "epochs": 10 }, "benchmark": "GSM8K", "status": "failed", "startDate": "2024-07-25T09:00:00Z", "endDate": "2024-07-25T09:15:00Z", "metrics": null, "errorMessage": "CUDA out of memory error during training batch 15." }`
4. **Trained Model Object**: (Assume created upon successful job completion)
* `{ "id": "model_tiny_gsm_1", "name": "Qwen2.5-TinyLoRA-GSM8K-13P", "trainingJobId": "job_gsm8k_tiny_1", "trainedParamsCount": 13, "performance": { "accuracy": 0.915 } }`
5. **Inference Request/Response**:
* Request: `{ "modelId": "model_tiny_gsm_1", "prompt": "The price of a book is $12. If a discount of 10% is applied, what is the new price?" }`
* Response: `{ "modelId": "model_tiny_gsm_1", "prediction": "The original price is $12. The discount is 10% of $12, which is $1.20. The new price is $12 - $1.20 = $10.80.", "finalAnswer": "$10.80" }`
DEPLOYMENT NOTES:
- **Build Configuration**: Use Vite's build command (`vite build`) for optimized production builds. Configure `base` path in `vite.config.js` if deploying to a sub-directory.
- **Environment Variables**: Use `.env` files for managing environment variables (e.g., API endpoints if a backend is used, feature flags). Prefix variables with `VITE_` for client-side access.
- **Performance Optimizations**:
- Code splitting with React Lazy and Suspense for faster initial load.
- Image optimization (if any).
- Memoization using `React.memo`, `useMemo`, `useCallback` where appropriate.
- Bundle analysis to identify large dependencies.
- **Static Assets**: Place static assets (e.g., mock data files) in the `public/` directory.
- **CORS**: If a separate backend API is used, ensure CORS is properly configured on the server to allow requests from the deployed frontend origin.
- **Offline Support (Optional)**: Consider using Service Workers for basic offline capabilities or caching.
- **Error Reporting**: Integrate a service like Sentry for client-side error tracking.