PROJECT OVERVIEW:
The goal of this project is to create a single-page web application (SPA) that serves as an interactive simulation platform for learning and designing GPU architectures. The application, tentatively named 'GPU Tasarım Laboratuvarı' (GPU Design Lab), addresses the lack of accessible and hands-on resources for understanding complex GPU architectures. Users can virtually build their own GPUs by selecting, connecting, and configuring core components, then test their designs through simulations of basic parallel computing tasks. The core value proposition is to provide an intuitive, visual, and educational environment for anyone interested in GPU architecture, from students to professionals, making a complex topic more approachable and engaging.
TECH STACK:
- Frontend Framework: React (using Create React App for simplicity or Vite for faster development).
- Styling: Tailwind CSS for rapid UI development and consistent styling.
- State Management: Zustand or Jotai for efficient and scalable global state management.
- UI Components: Potentially a library like Radix UI for accessible and unstyled components, or build custom ones.
- Drag and Drop: `react-dnd` for the component placement and connection feature.
- Charting: `chart.js` or `recharts` for visualizing simulation results.
- Routing (if needed for future expansion, but aiming for SPA): Not strictly required for MVP but keep in mind for potential future features.
CORE FEATURES:
1. **Component Library & Placement:**
* **User Flow:** Users are presented with a sidebar or panel listing available GPU components (e.g., ALU, Register File, Cache, Scheduler, Memory Controller, Interconnect). They can drag these components onto a central canvas.
* **Details:** Each component in the library has a visual representation and a brief description. The canvas is the workspace where the GPU architecture is built.
* **Interaction:** Drag and drop functionality allows users to place components freely on the canvas. Components snap to a grid for easier alignment.
2. **Connection & Wiring:**
* **User Flow:** After placing components, users can draw connections (wires) between input/output ports of different components to define the data flow and control signals.
* **Details:** The system should visually represent these connections. Ports on components should highlight when a connection can be made. Error handling should prevent invalid connections (e.g., connecting two outputs).
* **Interaction:** Clicking on a port starts a connection line, which can then be clicked onto another compatible port to complete the connection. Users can delete connections.
3. **Simulation Engine:**
* **User Flow:** Once the GPU architecture is defined, the user initiates a simulation. They select a predefined computational task (e.g., matrix multiplication, vector addition) and the simulation runs on their custom-built GPU.
* **Details:** The engine interprets the component connections and simulates the data flow and processing. It calculates performance metrics like execution time, throughput, and identifies potential bottlenecks.
* **Interaction:** A 'Run Simulation' button triggers the process. A loading state is displayed during simulation. Results are then presented.
4. **Results Visualization:**
* **User Flow:** After a simulation completes, users view a dashboard or results screen displaying key performance indicators.
* **Details:** This includes graphs showing execution time breakdown by component, data transfer rates, and utilization metrics. Bottleneck identification should be highlighted.
* **Interaction:** Interactive charts allow users to hover over data points for more information.
5. **Template Library:**
* **User Flow:** Users can choose from pre-built GPU architecture templates to start with or to compare against their own designs.
* **Details:** Templates might include basic SIMD architectures, simple in-order pipelines, or rudimentary MIMD concepts.
* **Interaction:** Clicking a template loads it onto the canvas, allowing immediate simulation or modification.
UI/UX DESIGN:
- **Layout:** A three-column layout is proposed: Left sidebar for Component Library & Templates, Center Canvas for GPU design, Right sidebar for Simulation Controls & Results Dashboard. The layout must be responsive, collapsing sidebars on smaller screens.
- **Color Palette:** A clean, modern palette. Primary: A calm blue (`#4A90E2`). Secondary: A neutral gray (`#F5F5F5` for backgrounds, `#CCCCCC` for borders). Accent: A vibrant orange (`#F5A623`) for interactive elements and highlights. Error: Red (`#D0021B`). Success: Green (`#7ED321`). Use dark text on light backgrounds and vice versa.
- **Typography:** Use a sans-serif font like 'Inter' or 'Roboto' for readability. Clear hierarchy with distinct sizes for headings, subheadings, body text, and labels.
- **Responsive Design:** Mobile-first approach. Sidebars collapse into hamburger menus or drawers. Canvas and components scale appropriately. Touch interactions should be smooth.
DATA MODEL:
- **State Structure (Example using Zustand/Jotai):**
```javascript
// Store: gpuStore
{
components: [
{ id: 'comp-1', type: 'ALU', position: { x: 100, y: 50 }, config: { operation: 'add' } },
{ id: 'comp-2', type: 'RegisterFile', position: { x: 100, y: 200 }, config: { size: 16 } },
// ... other components
],
connections: [
{ id: 'conn-1', fromComponentId: 'comp-1', fromPort: 'out0', toComponentId: 'comp-2', toPort: 'in1' },
// ... other connections
],
selectedComponentId: null,
simulationResult: null,
currentTemplate: 'BasicSIMD' | null,
isLoadingSimulation: false,
// ... other states
}
```
- **Mock Data Format (Component Library):
```json
[
{
"id": "ALU",
"name": "Arithmetic Logic Unit",
"description": "Performs arithmetic and logical operations.",
"ports": [{"id": "in0", "type": "input"}, {"id": "in1", "type": "input"}, {"id": "out0", "type": "output"}],
"defaultConfig": {"operation": "add"},
"dimensions": {"width": 100, "height": 80}
},
// ... other component types
]
```
- **Mock Data Format (Simulation Task):
```json
{
"id": "matrixMul_10x10",
"name": "10x10 Matrix Multiplication",
"description": "Standard matrix multiplication algorithm.",
"inputData": {"matrixA": "(generated 10x10)", "matrixB": "(generated 10x10)"},
"expectedOutput": "(generated result matrix)"
}
```
COMPONENT BREAKDOWN:
- `App.js` (or `MainLayout.jsx`): Main container, sets up overall layout, theme, and state provider.
- `Sidebar.jsx`: Renders the left sidebar. Contains `ComponentLibrary` and `TemplateSelector` components.
* `ComponentLibrary.jsx`: Displays available components from mock data. Handles drag start events.
* `TemplateSelector.jsx`: Lists available templates, handles template selection.
- `Canvas.jsx`: The main design area. Renders placed components and connections.
* `ComponentNode.jsx`: Represents a single placed component on the canvas. Handles positioning, selection, and displays its ports.
* `Port.jsx`: Represents an input/output port on a `ComponentNode`. Handles connection start/end events.
* `ConnectionLine.jsx`: Renders the wire between two ports. Handles rendering and deletion.
- `RightPanel.jsx`: Renders the right sidebar. Contains `SimulationControls` and `ResultsDashboard`.
* `SimulationControls.jsx`: Buttons to run simulation, configuration options for the task.
* `ResultsDashboard.jsx`: Displays simulation results using charts and metrics.
* `PerformanceChart.jsx`: Renders performance-related charts.
* `BottleneckIndicator.jsx`: Highlights identified issues.
- `StateProvider.js` (e.g., using Zustand): Manages global state for components, connections, simulation status, etc.
ANIMATIONS & INTERACTIONS:
- **Drag and Drop:** Smooth visual feedback during dragging (component shadow, ghost image). Snap-to-grid animation.
- **Connections:** Animated line drawing when creating connections. Subtle pulse effect on active ports.
- **Simulation:** A clear loading state animation (e.g., spinner, progress bar). Potential for subtle 'active' animations on components being processed during simulation.
- **Hover Effects:** Subtle background color changes or slight scaling on interactive elements (buttons, components, ports) on hover.
- **Transitions:** Smooth transitions for sidebar opening/closing, panel visibility changes, and chart data loading.
- **Micro-interactions:** Visual feedback on successful connection, deletion, or simulation start.
EDGE CASES:
- **Empty Canvas:** Display a helpful message guiding the user to add components.
- **Invalid Connections:** Prevent or clearly indicate invalid port connections (e.g., output-to-output). Provide immediate visual feedback.
- **Simulation Errors:** Gracefully handle errors during simulation (e.g., infinite loops, undefined behavior). Display user-friendly error messages in the `ResultsDashboard`.
- **Component Overlap:** Allow overlapping but visually indicate it, or provide options to auto-arrange.
- **Performance:** Optimize rendering of many components and connections. Debounce or throttle frequent updates.
- **Accessibility (a11y):** Ensure keyboard navigation for essential interactions. Use ARIA attributes where necessary. Ensure sufficient color contrast.
- **Browser Compatibility:** Test across major modern browsers.
SAMPLE DATA:
- **Component Library (Partial):
```json
[
{
"id": "ALU", "name": "Arithmetic Logic Unit", "description": "Performs arithmetic and logical operations.",
"ports": [{"id": "inA", "type": "input"}, {"id": "inB", "type": "input"}, {"id": "out", "type": "output"}],
"defaultConfig": {"operation": "add"}, "dimensions": {"width": 120, "height": 80}
},
{
"id": "RegFile", "name": "Register File", "description": "Stores register values.",
"ports": [{"id": "readPort1", "type": "output"}, {"id": "readPort2", "type": "output"}, {"id": "writePort", "type": "input"}],
"defaultConfig": {"size": 32},
"dimensions": {"width": 100, "height": 150}
},
{
"id": "Cache", "name": "L1 Cache", "description": "Fast memory cache.",
"ports": [{"id": "cpuIn", "type": "input"}, {"id": "memOut", "type": "output"}],
"defaultConfig": {"size": 32768, "latency": 4},
"dimensions": {"width": 150, "height": 100}
},
{
"id": "Scheduler", "name": "Instruction Scheduler", "description": "Schedules instructions for execution units.",
"ports": [{"id": "instIn", "type": "input"}, {"id": "aluOut", "type": "output"}],
"defaultConfig": {"units": 4},
"dimensions": {"width": 180, "height": 70}
},
{
"id": "MemoryCtrl", "name": "Memory Controller", "description": "Manages access to main memory.",
"ports": [{"id": "reqIn", "type": "input"}, {"id": "respOut", "type": "output"}],
"defaultConfig": {"bandwidth": 256},
"dimensions": {"width": 160, "height": 90}
}
]
```
- **Templates (Partial):
```json
[
{
"id": "BasicSIMD",
"name": "Basic SIMD Unit",
"description": "A simple Single Instruction, Multiple Data unit.",
"components": [ /* component objects */ ], "connections": [ /* connection objects */ ]
}
]
```
- **Simulation Task (Example):
```json
{
"id": "vecAdd_1024",
"name": "Vector Addition (1024 elements)",
"description": "Adds two vectors of 1024 elements each.",
"type": "vector_add",
"vectorSize": 1024
}
```
DEPLOYMENT NOTES:
- **Build:** Use `npm run build` or `yarn build`. Ensure the output is optimized for static hosting.
- **Environment Variables:** Use `.env` files for configuration (e.g., API keys if external services are added later). For MVP, minimal environment variables are needed.
- **Performance Optimizations:** Code splitting (if using React Router or similar later), image optimization, lazy loading for components (especially in the library), memoization (React.memo, useMemo) for expensive calculations or renders.
- **Hosting:** Can be hosted on Netlify, Vercel, GitHub Pages, or any static web hosting service.
- **HTTPS:** Ensure deployment uses HTTPS for security.
- **CORS:** If interacting with a backend API, ensure CORS policies are correctly configured on the server.