You are an expert AI assistant tasked with generating a single-page React SPA for a novel AI optimization platform. The application, named 'BitModeller', focuses on enabling users to easily convert and run large language models (LLMs) using 1-bit quantization techniques, making them accessible on resource-constrained devices. This prompt will guide the AI in creating a functional MVP.
### PROJECT OVERVIEW:
BitModeller aims to democratize the use of advanced Large Language Models (LLMs) by significantly reducing their computational and memory footprint. The core problem it solves is the high barrier to entry for deploying and running LLMs due to their substantial hardware requirements. BitModeller leverages cutting-edge 1-bit quantization (specifically inspired by the BitNet paper) to allow users, from individual developers to small businesses, to run powerful AI models locally or on minimal infrastructure. The value proposition is accessibility, cost-efficiency, and enhanced privacy through local inference.
### TECH STACK:
- **Frontend Framework:** React (using Create React App or Vite for a lean setup)
- **Styling:** Tailwind CSS for rapid UI development and a clean, utility-first approach.
- **State Management:** Zustand for efficient and simple global state management, suitable for a single-page application.
- **Routing:** React Router DOM for client-side navigation.
- **API/Data Fetching:** Axios for HTTP requests (mocked initially).
- **UI Components:** Potentially use a lightweight component library like Headless UI for accessible, unstyled components, or build custom ones with Tailwind.
- **Build Tool:** Vite (recommended for speed).
### CORE FEATURES (MVP):
1. **Model Hub Integration/Upload:**
* **User Flow:** Users can browse a curated list of popular, compatible LLMs available via a public model repository (e.g., Hugging Face inference API or simplified links) OR upload their own model files (e.g., `.safetensors`, `.bin`, configuration files like `config.json`).
* **Functionality:** The UI should present a clear selection mechanism. For uploads, a drag-and-drop area or file input is required. Basic validation (file type, size limits) should be implemented.
2. **1-Bit Quantization Conversion:**
* **User Flow:** Once a model is selected or uploaded, the user initiates the quantization process via a prominent "Convert to 1-Bit" button. A loading indicator or progress bar should be displayed during conversion.
* **Functionality:** This is a backend-heavy process, but for the MVP, we'll simulate it. The frontend will trigger a `POST` request to a hypothetical `/convert` endpoint, passing model details. The response simulates a successful conversion, making the model available for download/testing.
3. **Optimized Inference Engine (Simulated):**
* **User Flow:** After conversion, the user can access an "Inference" or "Test Model" section. They can input text prompts into a chat-like interface.
* **Functionality:** The frontend sends the user's prompt along with the converted model identifier to a hypothetical `/infer` endpoint. The backend (simulated) processes the prompt using the 1-bit model and returns a generated text response.
4. **Model Management & Download:**
* **User Flow:** Users can view a list of their converted models. Each model has options to "Download" the converted files (simulated download) or "Delete" it from their dashboard.
* **Functionality:** Store converted model metadata (name, size, conversion date) in local state. The download action triggers a file download of mock converted model data.
### UI/UX DESIGN:
- **Layout:** A clean, modern, single-page application layout. A persistent sidebar for navigation (Model Hub, My Models, Settings) and a main content area. A header with the app logo and user information (if applicable later).
- **Color Palette:** A sophisticated, tech-oriented palette. Primary: Dark charcoal/deep blue (#1a202c). Secondary: A vibrant accent color like electric blue or teal (#4299e1 or #22d3ee) for buttons, highlights, and interactive elements. Neutrals: Grays for text and backgrounds (#e2e8f0, #a0aec0).
- **Typography:** Clean sans-serif fonts. Use a variable font like Inter or a robust option like Roboto for body text and headings. Ensure good readability and hierarchy.
- **Responsive Design:** Mobile-first approach using Tailwind's responsive modifiers (e.g., `sm:`, `md:`, `lg:`). The layout should adapt seamlessly from small mobile screens to large desktop monitors. Sidebar might collapse into a hamburger menu on smaller screens.
- **Key Components:** Navigation Menu, Model Card (for browsing), File Upload Zone, Progress Indicator, Chat Interface (Input area, Message display), Button components, Input fields, Modal dialogs (for confirmations).
### COMPONENT BREAKDOWN:
- `App.jsx`: Main application component, sets up routing and global layout.
- `Header.jsx`: Top navigation bar (logo, user status).
- `Sidebar.jsx`: Navigation links (Model Hub, My Models, Settings).
- `ModelHubPage.jsx`: Displays available models, handles selection/upload.
- `ModelCard.jsx`: Represents a single model in the hub (name, description, size, action buttons).
- `FileUploadComponent.jsx`: Handles drag-and-drop and file input for model uploads.
- `MyModelsPage.jsx`: Lists user's converted models.
- `ConvertedModelRow.jsx`: Represents a row in the My Models table (name, status, actions).
- `InferencePage.jsx`: The testing interface for converted models.
- `ChatWindow.jsx`: Displays conversation history.
- `ChatInput.jsx`: Text input area for user prompts.
- `LoadingSpinner.jsx`: Reusable loading indicator component.
- `ProgressBar.jsx`: Visual progress indicator for conversion.
- `ConfirmationModal.jsx`: For delete confirmations.
**Props Examples:**
- `ModelCard.jsx`: `props: { modelName: string, description: string, size: string, onSelect: function, onUpload: function }`
- `ChatInput.jsx`: `props: { onSubmit: function, isLoading: boolean }`
- `ConvertedModelRow.jsx`: `props: { model: object, onDownload: function, onDelete: function }`
### DATA MODEL:
- **Global State (Zustand):**
```javascript
{
models: [ // List of models available in the Hub
{ id: 'model-001', name: 'TinyLLaMA-1.3B', description: 'A small LLaMA variant.', size: '2.6 GB', type: 'public' },
{ id: 'model-002', name: 'GPT-2-small', description: 'OpenAI GPT-2 small version.', size: '500 MB', type: 'public' }
],
convertedModels: [ // List of models converted by the user
{ id: 'conv-123', originalId: 'model-001', name: 'TinyLLaMA-1.3B-1bit', size: '650 MB', status: 'completed', conversionDate: '2023-10-27T10:00:00Z' },
{ id: 'conv-456', originalId: 'model-002', name: 'GPT-2-small-1bit', size: '125 MB', status: 'completed', conversionDate: '2023-10-27T10:05:00Z' }
],
currentModelToConvert: null, // { id: '...', name: '...' }
isConverting: false,
conversionProgress: 0,
inferenceHistory: [], // For the chat window
isInferenceLoading: false,
userSettings: { /* ... */ }
}
```
- **Mock Data Formats:**
- **Model Object:** `{ id: string, name: string, description: string, size: string, type: 'public' | 'uploaded' }`
- **Converted Model Object:** `{ id: string, originalId: string, name: string, size: string, status: 'processing' | 'completed' | 'failed', conversionDate: string, downloadUrl?: string }`
- **Inference Message:** `{ sender: 'user' | 'bot', text: string, timestamp: string }`
### ANIMATIONS & INTERACTIONS:
- **Page Transitions:** Subtle fade-in/fade-out transitions between pages using React Router's `CSSTransition` or similar.
- **Button Hovers:** Slight scale-up or background color change on button hover states.
- **Loading States:** Use `LoadingSpinner.jsx` for asynchronous operations (fetching models, conversion). `ProgressBar.jsx` specifically for the conversion process.
- **Micro-interactions:** Subtle animations on adding/removing items from lists. Input field focus states.
- **Chat Bubbles:** Smooth entry animation for new chat messages.
### EDGE CASES:
- **No Models:** Display a clear message and CTA when the Model Hub or My Models list is empty.
- **Conversion Failure:** Handle API errors gracefully. Update model status to 'failed' and provide user feedback. Allow retry.
- **Invalid Uploads:** Provide clear error messages for unsupported file types or exceeding size limits during upload.
- **Network Errors:** Implement basic error handling for API requests (e.g., display a toast notification).
- **Empty Inference Input:** Disable the send button or show a warning if the user tries to send an empty prompt.
- **Accessibility (a11y):** Ensure proper ARIA attributes, keyboard navigation support, semantic HTML, and sufficient color contrast.
- **State Persistence:** Use `localStorage` to persist `convertedModels` and `userSettings` so data isn't lost on page refresh (consider Zustand middleware for persistence).
### SAMPLE DATA (Mock):
(These would be part of the initial state or fetched from mock APIs)
```javascript
// Sample models for Model Hub
[
{ id: 'llama-7b', name: 'LLaMA-7B', description: 'Meta AI foundational model.', size: '13 GB', type: 'public' },
{ id: 'mistral-7b', name: 'Mistral-7B', description: 'High-performance transformer.', size: '14 GB', type: 'public' },
{ id: 'phi-2', name: 'Phi-2', description: 'Microsoft research model (2.7B params).', size: '5.4 GB', type: 'public' }
]
// Sample converted models for My Models
[
{ id: 'conv-789', originalId: 'phi-2', name: 'Phi-2-1bit', size: '1.3 GB', status: 'completed', conversionDate: '2023-10-27T11:30:00Z', downloadUrl: '/mock/phi-2-1bit.zip' },
{ id: 'conv-101', originalId: 'llama-7b', name: 'LLaMA-7B-1bit', size: '3.2 GB', status: 'processing', conversionDate: '2023-10-27T12:00:00Z' }
]
// Sample inference messages
[
{ sender: 'bot', text: 'Hello! How can I help you today?', timestamp: '2023-10-27T12:05:00Z' },
{ sender: 'user', text: 'Explain the concept of 1-bit quantization.', timestamp: '2023-10-27T12:05:30Z' }
]
```
### DEPLOYMENT NOTES:
- **Build Command:** Use `npm run build` or `yarn build` (Vite's command).
- **Environment Variables:** Configure essential variables like `NODE_ENV` (development/production). API endpoints could be managed via `.env` files (e.g., `VITE_API_BASE_URL`).
- **Static Hosting:** The built application is a set of static files, suitable for deployment on platforms like Netlify, Vercel, GitHub Pages, or any static web server.
- **Performance Optimizations:** Vite offers built-in optimizations. Ensure code splitting is handled effectively by the router. Lazy load components where appropriate. Optimize image assets (though minimal in this SPA).
- **Mock API Simulation:** For the MVP, backend logic will be simulated. This can be done using `msw` (Mock Service Worker) or by simply handling API calls within the frontend components, updating the Zustand store directly, and adding delays (`setTimeout`) to mimic network latency and processing time.