You are an expert AI engineer and application architect tasked with creating a single-page SPA (Single Page Application) that serves as a foundational platform for understanding and simulating physical world interactions using AI. This application will be built from scratch, leveraging a modern JavaScript ecosystem. The core idea is to provide a tool that can process real-world or simulated physical data, infer physical properties of objects, and simulate their interactions based on AI models that grasp the nuances of the physical world, inspired by Yann LeCun's vision.
**1. PROJECT OVERVIEW:**
The application, tentatively named 'Fiziksel Dünya Anlayışı Motoru' (Physical World Understanding Engine), aims to bridge the gap between abstract AI models and the concrete, physics-driven reality. It will ingest data representing physical objects and scenarios, process it using advanced AI techniques to understand underlying physical laws and properties, and allow users to simulate and visualize interactions. The primary value proposition is to provide developers and researchers with a powerful, AI-enhanced tool for building more intelligent robots, autonomous systems, and realistic simulations, reducing the need for purely rule-based physics engines and enabling AI to learn physical dynamics.
**2. TECH STACK:**
- **Frontend Framework:** React (v18+ with Hooks and Context API)
- **Styling:** Tailwind CSS (v3+) for rapid UI development and a utility-first approach.
- **State Management:** Zustand or Jotai for efficient and simple global state management. React Context API for localized state.
- **Routing:** React Router DOM for navigation within the SPA.
- **Data Fetching/API:** Axios for HTTP requests (if an external API is introduced later, though MVP will focus on local data processing).
- **UI Components:** Radix UI or Headless UI for accessible and unstyled UI primitives. Possibly a charting library like Recharts or Chart.js for data visualization.
- **Build Tool:** Vite for fast development server and optimized builds.
- **Language:** TypeScript for type safety.
**3. CORE FEATURES (MVP):**
* **A. Data Ingestion Module:**
* **Description:** Allows users to upload datasets representing physical scenarios. Initially, this will support common simulation file formats (e.g., `.json`, `.obj` with associated physics parameters) or pre-defined mock datasets.
* **User Flow:** User navigates to the 'Data Input' section. Clicks 'Upload File' or 'Select Mock Dataset'. The system validates the file format and size. Upon successful upload, the data is parsed and stored locally or prepared for processing.
* **B. Physical Property Inference:**
* **Description:** An AI model (simulated in MVP with mock data processing) analyzes the ingested data to infer fundamental physical properties like mass, shape, friction coefficients, elasticity, etc., for recognized objects.
* **User Flow:** After data ingestion, the user initiates the 'Analyze Properties' process. The system shows a loading indicator. Once complete, inferred properties are displayed alongside object information.
* **C. Interaction Simulation:**
* **Description:** Based on the inferred properties, the system simulates basic physical interactions (e.g., collisions, gravity, stacking). The simulation engine will be a simplified, AI-informed model.
* **User Flow:** User selects objects and an interaction type (e.g., 'Drop Object A', 'Collide Object A and B'). The system runs the simulation and updates the state representing the outcome.
* **D. Visualization Interface:**
* **Description:** A 2D or simple 3D (using a library like Three.js if scope permits, otherwise 2D representation) view that displays the objects, their states, and the simulation results in real-time or step-by-step.
* **User Flow:** The main dashboard displays the current scene. As data is ingested or simulations run, the visualization updates dynamically to show object positions, orientations, and interaction effects.
**4. UI/UX DESIGN:**
* **Layout:** A clean, modern, single-page application layout. A persistent sidebar for navigation (Data Input, Analysis, Simulation, Visualization, Settings). The main content area will dynamically display components related to the selected section.
* **Color Palette:** A sophisticated, professional palette. Primary: Deep Blue (`#1A202C`), Secondary: Muted Teal (`#4FD1C5`), Accent: Vibrant Orange (`#F56565`) for calls to action/errors, Neutrals: Grays (`#2D3748`, `#A0AEC0`, `#E2E8F0`).
* **Typography:** A clean sans-serif font family like Inter or Roboto. Clear hierarchy using font weights and sizes for headings, subheadings, and body text.
* **Responsive Design:** Mobile-first approach. The layout should adapt gracefully to different screen sizes. Sidebar might collapse into a hamburger menu on smaller screens. Main content sections should stack or resize appropriately.
* **Interactions:** Subtle hover effects on buttons and interactive elements. Smooth transitions for panel reveals and state changes. Clear loading indicators (spinners, progress bars) for all asynchronous operations.
**5. DATA MODEL:**
* **State Structure (Zustand/Jotai Example):**
```typescript
interface PhysicalObject {
id: string;
name: string;
position: { x: number; y: number; z: number };
rotation: { x: number; y: number; z: number };
velocity: { x: number; y: number; z: number };
properties: {
mass: number;
shape: 'sphere' | 'cube' | 'mesh';
friction: number;
restitution: number; // Elasticity
};
// ... other relevant physical states
}
interface SimulationState {
objects: PhysicalObject[];
currentScene: string; // Identifier for the loaded scene/dataset
isSimulating: boolean;
simulationLog: string[];
error: string | null;
}
// Store (e.g., using Zustand)
interface AppStore {
simulation: SimulationState;
// Actions for updating state, uploading data, running simulations etc.
uploadData: (data: any) => Promise<void>;
analyzeProperties: (objectId: string) => Promise<void>;
runSimulationStep: () => void;
resetSimulation: () => void;
}
```
* **Mock Data Format (JSON example):**
```json
{
"sceneName": "Simple Drop Test",
"objects": [
{
"id": "obj-1",
"name": "Red Cube",
"initialPosition": {"x": 0, "y": 5, "z": 0},
"initialRotation": {"x": 0, "y": 0, "z": 0},
"properties": {"mass": 1.0, "shape": "cube", "friction": 0.5, "restitution": 0.2}
},
{
"id": "obj-2",
"name": "Blue Sphere",
"initialPosition": {"x": -1, "y": 6, "z": 0},
"initialRotation": {"x": 0, "y": 0, "z": 0},
"properties": {"mass": 0.5, "shape": "sphere", "friction": 0.3, "restitution": 0.7}
}
]
}
```
**6. COMPONENT BREAKDOWN:**
* `App.tsx`: Root component, sets up routing and global layout.
* `Layout.tsx`: Main application shell, includes sidebar and header.
* `Sidebar.tsx`: Navigation menu component. Props: `items: { name: string, path: string }[]`.
* `DataInput.tsx`: Handles file uploads or mock dataset selection. Uses file input and buttons. State: `selectedFile`, `isUploading`.
* `ObjectList.tsx`: Displays a list of objects after data ingestion. Allows selection for analysis/simulation. Props: `objects: PhysicalObject[]`, `onSelectObject: (id: string) => void`.
* `PropertyInspector.tsx`: Shows inferred physical properties for a selected object. Props: `object: PhysicalObject`.
* `SimulationControls.tsx`: Buttons to start, pause, step, reset simulation. Props: `onStart: () => void`, `onPause: () => void`, etc.
* `VisualizationCanvas.tsx`: Renders the 2D/3D scene. Uses a library like PixiJS or Three.js. Receives `objects: PhysicalObject[]` as props.
* `SceneRenderer.tsx` (within `VisualizationCanvas`): Renders individual objects based on their state.
* `Logger.tsx`: Displays simulation logs or error messages.
* `LoadingSpinner.tsx`: Reusable spinner component.
**7. ANIMATIONS & INTERACTIONS:**
* **Hover Effects:** Subtle scaling or background color changes on sidebar items, buttons, and list items.
* **Transitions:** Smooth transitions for sidebar collapse/expand, panel loading, and object property updates using Tailwind CSS transitions.
* **Loading States:** Use `LoadingSpinner.tsx` within buttons or content areas during data upload, analysis, and simulation. Skeleton loaders for initial data display.
* **Micro-interactions:** Visual feedback on successful data upload (e.g., a checkmark animation). Smooth animation of objects moving and rotating during simulation steps.
**8. EDGE CASES:**
* **Empty State:** Display informative messages when no data is loaded or no objects are present (e.g., "Upload a dataset to begin.").
* **Error Handling:** Graceful handling of file upload errors (wrong format, size limits), analysis failures, and simulation errors. Display user-friendly error messages via `Logger.tsx`.
* **Validation:** Validate uploaded file structure and types. Validate input parameters for simulations if user-configurable.
* **Accessibility (a11y):** Ensure all interactive elements are keyboard-navigable. Use ARIA attributes where necessary. Ensure sufficient color contrast. Use semantic HTML tags.
**9. SAMPLE DATA:**
* **Mock Dataset 1 (Simple Drop):**
```json
{
"sceneName": "Drop Test",
"objects": [
{"id": "cube1", "name": "Heavy Cube", "initialPosition": {"x": 0, "y": 10, "z": 0}, "properties": {"mass": 5.0, "shape": "cube", "friction": 0.6, "restitution": 0.1}}
]
}
```
* **Mock Dataset 2 (Collision):**
```json
{
"sceneName": "Collision Test",
"objects": [
{"id": "sphere1", "name": "Ball A", "initialPosition": {"x": -2, "y": 1, "z": 0}, "velocity": {"x": 3, "y": 0, "z": 0}, "properties": {"mass": 1.0, "shape": "sphere", "friction": 0.4, "restitution": 0.8}},
{"id": "cube1", "name": "Block B", "initialPosition": {"x": 2, "y": 1, "z": 0}, "properties": {"mass": 2.0, "shape": "cube", "friction": 0.7, "restitution": 0.3}}
]
}
```
* **Mock Dataset 3 (Stacking):**
```json
{
"sceneName": "Stacking Test",
"objects": [
{"id": "cubeA", "name": "Base Cube", "initialPosition": {"x": 0, "y": 0.5, "z": 0}, "properties": {"mass": 3.0, "shape": "cube", "friction": 0.5, "restitution": 0.2}},
{"id": "cubeB", "name": "Mid Cube", "initialPosition": {"x": 0, "y": 1.5, "z": 0}, "properties": {"mass": 2.0, "shape": "cube", "friction": 0.5, "restitution": 0.2}},
{"id": "sphereC", "name": "Top Sphere", "initialPosition": {"x": 0, "y": 2.5, "z": 0}, "properties": {"mass": 1.0, "shape": "sphere", "friction": 0.4, "restitution": 0.5}}
]
}
```
*(Add 2-7 more varied mock datasets covering different shapes, properties, and basic interaction scenarios.)*
**10. DEPLOYMENT NOTES:**
* **Build Command:** `npm run build` (or `yarn build`). Vite will generate optimized static assets in a `dist` folder.
* **Environment Variables:** Use `.env` files for managing configurations (e.g., API endpoints if external services are integrated later). Vite supports `import.meta.env.VITE_VARIABLE_NAME`.
* **Performance Optimizations:** Vite offers built-in optimizations like code splitting and tree shaking. Ensure efficient state management to prevent unnecessary re-renders. Optimize image/asset loading. Consider lazy loading components if the app grows.
* **Hosting:** Deployable on static hosting platforms like Vercel, Netlify, or GitHub Pages.
* **HTTPS:** Always use HTTPS in production for security.
* **Caching:** Implement appropriate browser caching strategies for static assets.
This detailed prompt provides a comprehensive blueprint for building the initial version of the 'Fiziksel Dünya Anlayışı Motoru' application.