You are a seasoned AI application architect and senior full-stack developer tasked with creating a single-page React application (SPA) for 'Transformer İşlem Motoru' (Transformer Compute Engine). This application allows developers to execute programs within Transformer models, offering exponentially faster inference for complex computations. This prompt details the entire development process, from project overview to deployment considerations.
**1. PROJECT OVERVIEW:**
The 'Transformer İşlem Motoru' aims to revolutionize how we utilize Large Language Models (LLMs). Instead of just processing natural language, this platform empowers LLMs to function as general-purpose computers. It solves the problem of slow and inefficient execution of complex computational tasks by leveraging the inherent parallel processing capabilities of Transformer architectures. The core value proposition is providing developers with a powerful, optimized environment to run programs (initially Python scripts) inside Transformers, achieving significantly faster inference speeds compared to traditional execution methods. This unlocks new possibilities for AI-driven computation, simulation, and complex problem-solving.
**2. TECH STACK:**
- **Frontend Framework:** React (using functional components and Hooks)
- **Styling:** Tailwind CSS (for rapid, utility-first styling)
- **State Management:** Zustand (lightweight and performant for global and local state)
- **Routing:** React Router DOM (for navigation within the SPA)
- **API Communication:** Axios (for making HTTP requests to a hypothetical backend)
- **UI Components:** Radix UI (for accessible and unstyled primitives) or similar for modal, input, button components.
- **Icons:** Heroicons or similar.
- **Build Tool:** Vite (for fast development server and build times).
- **Deployment:** Netlify/Vercel (for easy CI/CD and hosting).
**3. CORE FEATURES:**
* **Program Upload Interface:**
* **User Flow:** Users navigate to the 'Upload Program' section. They are presented with a code editor area (e.g., using Monaco Editor or a simpler textarea for MVP). They can paste or type their Python code directly. A 'Run Program' button triggers the execution process. Input parameters for the program can be provided via a separate form or within the code itself (e.g., using environment variables or a configuration block).
* **Details:** The interface should support syntax highlighting for Python. It should have clear buttons for 'Save Draft', 'Run', and 'Clear'. Error messages during upload (e.g., file size limits, invalid syntax) should be displayed clearly.
* **Transformer-Based Execution Engine (Conceptual Backend Interaction):**
* **User Flow:** Upon clicking 'Run Program', the frontend sends the code and any parameters to the backend API. The backend initiates the execution within the Transformer model. The frontend then enters a 'loading' or 'processing' state, polling the backend for status updates or receiving real-time updates via WebSockets.
* **Details:** This feature is mostly represented by the frontend's interaction. It needs to handle different states: 'Pending', 'Running', 'Completed', 'Error'. The UI should reflect the current status accurately.
* **Results Display Dashboard:**
* **User Flow:** Once execution is complete, the user is redirected to the 'Results' page or a modal appears. This section displays the program's standard output, any generated files (e.g., CSV, JSON), error logs, and key performance metrics (execution time, inference cost, resource utilization). Users can copy output, download files, and view execution history.
* **Details:** The display should be clean and organized. Output can be shown in a scrollable text area. Metrics should be presented clearly, possibly with simple visualizations (e.g., bar charts for time comparison if history is implemented).
* **Execution History:**
* **User Flow:** A dedicated 'History' page lists all previously executed programs. Each entry shows the program name/ID, execution status, timestamp, and a link to view the full results.
* **Details:** This requires state management to store execution records. Filtering and sorting options (by date, status, name) would be beneficial for later iterations.
* **Program Management (Save/Load):**
* **User Flow:** Users can save their programs with a title and description. Later, they can access their saved programs from a 'My Programs' list and load them into the editor for re-execution or modification.
* **Details:** This involves local storage or a backend API for persistence. Each saved program needs a unique ID, title, description, and the code content.
**4. UI/UX DESIGN:**
* **Layout:** A clean, minimalist single-page application layout. A persistent sidebar for navigation (Dashboard, Upload Program, History, My Programs, Settings). The main content area displays the active view. A header might contain the app logo and user profile/logout options.
* **Color Palette:** Primary: A deep, sophisticated blue (#1a202c) or dark gray. Accent: A vibrant, tech-oriented color like electric blue (#3b82f6) or teal (#14b8a6) for interactive elements, buttons, and highlights. Secondary: Neutral grays (#4a5568, #cbd5e0) for text and borders. Background: Off-white (#f7fafc) or very light gray for the main content area, ensuring good contrast.
* **Typography:** A modern sans-serif font like Inter or Poppins for readability. Clear hierarchy using font weights and sizes (e.g., H1 for page titles, H2 for section titles, body text for descriptions and code).
* **Responsive Design:** Mobile-first approach. The layout should adapt gracefully to different screen sizes. Sidebar might collapse into a hamburger menu on smaller screens. Code editor and results display should be usable on mobile, possibly with horizontal scrolling for code.
* **Interactivity:** Clear visual feedback on hover states for buttons and links. Smooth transitions for route changes and modal appearances. Loading indicators (spinners, skeleton screens) should be present during data fetching or program execution.
**5. DATA MODEL & STATE MANAGEMENT (using Zustand):**
* **`programStore`:**
* `programs`: Array of saved program objects. `[{ id: string, title: string, description: string, code: string, createdAt: Date }]`
* `currentProgram`: Object representing the program currently being edited/viewed. `{ id?: string, title: string, description: string, code: string }`
* `saveProgram(programData)`: Function to add/update a program.
* `loadProgram(programId)`: Function to set `currentProgram` from saved programs.
* `deleteProgram(programId)`: Function to remove a program.
* `setEditorCode(code)`: Function to update the code in `currentProgram`.
* **`executionStore`:**
* `executions`: Array of execution history objects. `[{ id: string, programId: string, status: 'PENDING' | 'RUNNING' | 'COMPLETED' | 'ERROR', startTime: Date, endTime?: Date, output: string, errors?: string, metrics?: object }]`
* `currentExecution`: Object representing the currently running or last execution.
* `runProgram(programData)`: Function to initiate execution (calls backend API).
* `updateExecutionStatus(executionId, status, data)`: Function to update status and results (called via polling or WebSocket).
* `fetchHistory()`: Function to load past executions.
* **Local Storage:** Use `localStorage` to persist `programs` and `executions` for a truly offline-capable MVP experience before introducing a backend.
**6. COMPONENT BREAKDOWN:**
* **`App.jsx`:** Main application component, sets up routing and global layout.
* **`Layout.jsx`:** Contains the persistent sidebar and main content area.
* **`Sidebar.jsx`:** Navigation links (Dashboard, Upload, History, etc.). Uses `Link` from `react-router-dom`.
* **`Header.jsx`:** Top bar with logo, potentially user info.
* **`HomePage.jsx`:** Placeholder dashboard, maybe showing recent activity or quick links.
* **`ProgramEditorPage.jsx`:** Contains `CodeEditor` and `ParameterForm`. Manages `currentProgram` state via `programStore`.
* **`CodeEditor.jsx`:** (Uses a library like Monaco Editor or a styled `textarea`). Receives `code` and `onChange` handler as props. Responsible for syntax highlighting.
* **`ParameterForm.jsx`:** Input fields for program parameters. Receives `parameters` and `onChange` handler.
* **`EditorControls.jsx`:** Buttons for 'Save', 'Run', 'Clear'. Dispatches actions from `programStore` and `executionStore`.
* **`ExecutionStatusIndicator.jsx`:** Displays the current status ('Pending', 'Running', 'Completed', 'Error') with appropriate styling.
* **`ResultsDisplayPage.jsx`:** Shows program output, errors, and metrics. Receives `executionId` from route params.
* **`OutputViewer.jsx`:** Displays standard output (scrollable text area).
* **`ErrorViewer.jsx`:** Displays error logs.
* **`MetricsDisplay.jsx`:** Shows execution time, cost, etc.
* **`HistoryPage.jsx`:** Displays a table or list of past executions fetched from `executionStore`.
* **`ExecutionListItem.jsx`:** Represents a single row in the history table.
* **`MyProgramsPage.jsx`:** Lists saved programs, allows loading or deleting. Fetched from `programStore`.
* **`ProgramListItem.jsx`:** Represents a single saved program.
* **`Button.jsx`:** Reusable custom button component with hover effects.
* **`Modal.jsx`:** Reusable modal component for confirmations or displaying detailed info.
**7. ANIMATIONS & INTERACTIONS:**
* **Page Transitions:** Use `Framer Motion` or similar for smooth fade-in/fade-out transitions between pages.
* **Button Hover:** Subtle background color change or slight scale-up effect on button hovers using Tailwind CSS transitions.
* **Loading States:** Display spinners (e.g., using `react-spinners`) or pulsating loading indicators within buttons or around content areas that are being loaded or processed. Skeleton loaders for list items or dashboard widgets.
* **Code Editor:** Smooth scrolling. Potential subtle animation on syntax highlighting updates.
* **Execution Status:** Color-coded indicators that subtly animate (e.g., a pulsing animation for 'Running').
* **Form Interactions:** Smooth focus transitions on input fields.
**8. EDGE CASES & ACCESSIBILITY (a11y):
* **Empty States:** Design informative empty states for 'History', 'My Programs', and 'Results' when no data is available (e.g., 'You haven't run any programs yet. Try uploading one!').
* **Error Handling:**
* **Frontend Errors:** Use React Error Boundaries to catch rendering errors and display a user-friendly message.
* **API Errors:** Gracefully handle network errors or API-side failures (e.g., server down, invalid request). Display clear messages to the user.
* **Execution Errors:** Differentiate between program runtime errors (shown in `ErrorViewer`) and system/backend errors.
* **Validation:** Client-side validation for program names, descriptions, and parameters before submission.
* **Accessibility (a11y):**
* Use semantic HTML elements (`<nav>`, `<main>`, `<button>`, etc.).
* Ensure sufficient color contrast.
* Provide ARIA attributes where necessary, especially for custom interactive components.
* Ensure keyboard navigability for all interactive elements.
* Use `alt` text for images/icons where appropriate.
* Ensure code editor and results viewers are keyboard accessible.
**9. SAMPLE DATA (Mock Data Format):**
* **`programs` Array (in `programStore`):**
```json
[
{
"id": "prog_abc123",
"title": "Simple Adder",
"description": "Adds two numbers provided as parameters.",
"code": "def add(a, b):\n return a + b\n\nresult = add(params['num1'], params['num2'])\nprint(f'The sum is: {result}')",
"createdAt": "2023-10-27T10:00:00Z"
},
{
"id": "prog_xyz789",
"title": "Fibonacci Sequence",
"description": "Calculates the nth Fibonacci number.",
"code": "def fib(n):\n a, b = 0, 1\n for _ in range(n):\n a, b = b, a + b\n return a\n\nnum_terms = int(params['terms'])\nresult = fib(num_terms)\nprint(f'Fibonacci({num_terms}) is: {result}')",
"createdAt": "2023-10-26T15:30:00Z"
}
]
```
* **`executions` Array (in `executionStore`):**
```json
[
{
"id": "exec_001",
"programId": "prog_abc123",
"status": "COMPLETED",
"startTime": "2023-10-27T10:05:00Z",
"endTime": "2023-10-27T10:05:05Z",
"output": "The sum is: 42",
"errors": null,
"metrics": {
"executionTimeMs": 5000,
"inferenceCost": 0.001,
"gpuUtilization": 0.75
}
},
{
"id": "exec_002",
"programId": "prog_xyz789",
"status": "ERROR",
"startTime": "2023-10-27T11:00:00Z",
"endTime": "2023-10-27T11:00:03Z",
"output": null,
"errors": "ValueError: Invalid input for terms. Please provide a positive integer.",
"metrics": {
"executionTimeMs": 3000,
"inferenceCost": 0.0005,
"gpuUtilization": 0.60
}
},
{
"id": "exec_003",
"programId": "prog_abc123",
"status": "RUNNING",
"startTime": "2023-10-27T11:15:00Z",
"endTime": null,
"output": null,
"errors": null,
"metrics": {}
}
]
```
**10. DEPLOYMENT NOTES:**
* **Build Configuration:** Configure Vite for production builds (`vite build`). Ensure environment variables are handled correctly (e.g., API endpoints).
* **Environment Variables:** Use `.env` files (`.env.local`, `.env.production`) to manage API keys, base URLs, and other configuration settings. Prefix custom variables with `VITE_` (e.g., `VITE_API_URL`).
* **Performance Optimizations:**
* Code Splitting: Vite handles this automatically, but ensure components are logically grouped.
* Memoization: Use `React.memo`, `useMemo`, and `useCallback` judiciously to prevent unnecessary re-renders, especially in large lists or complex components.
* Image Optimization: If any static assets are used, ensure they are optimized.
* Bundle Analysis: Use tools like `rollup-plugin-visualizer` to analyze bundle size and identify potential optimizations.
* **Hosting:** Deploy to Netlify or Vercel for seamless Git integration, automatic builds, and global CDN.
* **HTTPS:** Ensure the deployment environment enforces HTTPS.
* **CORS:** Configure backend API (if applicable) to handle Cross-Origin Resource Sharing correctly from the deployed frontend domain.
This comprehensive prompt provides all necessary details for an AI to generate the 'Transformer İşlem Motoru' SPA. Ensure all components are created with reusability, maintainability, and accessibility in mind.