As an expert AI and full-stack developer, your task is to generate a fully functional, multi-page Next.js MVP application based on the provided concept. This application should allow users to run and optimize AI coding models locally on their own GPUs, leveraging techniques similar to A.T.L.A.S to achieve high performance without external API calls.
**1. PROJECT OVERVIEW:**
The application, codenamed "Local Code AI", aims to democratize access to high-performance AI coding assistance. It solves the problem of expensive API calls, data privacy concerns, and vendor lock-in associated with cloud-based AI models. Users can leverage their own consumer-grade GPUs (e.g., RTX 5060 Ti 16GB) to run and optimize powerful language models for code generation and analysis. The core value proposition is providing a secure, cost-effective, and high-performance AI coding environment that runs entirely on the user's local machine. This MVP will focus on enabling users to load compatible open-source models, apply sophisticated optimization techniques (inspired by A.T.L.A.S), and benchmark their performance against industry standards like LiveCodeBench, all without data leaving their system.
**2. TECH STACK:**
- **Framework:** Next.js (App Router)
- **UI Library:** shadcn/ui (for accessible and customizable components)
- **Styling:** Tailwind CSS
- **ORM:** Drizzle ORM (PostgreSQL - via Vercel Postgres or similar)
- **Authentication:** NextAuth.js (for secure user management)
- **State Management:** React Context API / Zustand (for global state, e.g., user settings)
- **Background Tasks:** Node.js child processes or a task queue for running intensive model operations (optimization, benchmarking).
- **Model Interaction:** A Python backend/service (managed via IPC or API calls from Next.js) using libraries like `transformers`, `ctranslate2`, or similar for loading and running quantized models. Quantization libraries like `llama.cpp` bindings might be considered.
- **Other:** TypeScript, ESLint, Prettier
**3. DATABASE SCHEMA (PostgreSQL):**
We'll use Drizzle ORM for type-safe database interactions.
* **`users` Table:**
* `id` (UUID, Primary Key)
* `name` (Text)
* `email` (Text, Unique)
* `emailVerified` (Timestamp)
* `image` (Text, nullable)
* `createdAt` (Timestamp, default: now())
* `updatedAt` (Timestamp, default: now())
* **`accounts` Table (for NextAuth.js):**
* `id` (UUID, Primary Key)
* `userId` (UUID, Foreign Key to `users.id`)
* `type` (Text)
* `provider` (Text)
* `providerAccountId` (Text)
* `refresh_token` (Text, nullable)
* `access_token` (Text, nullable)
* `expires_at` (Timestamp, nullable)
* `token_type` (Text, nullable)
* `scope` (Text, nullable)
* `id_token` (Text, nullable)
* `session_state` (Text, nullable)
* **`sessions` Table (for NextAuth.js):**
* `id` (UUID, Primary Key)
* `userId` (UUID, Foreign Key to `users.id`)
* `expires` (Timestamp)
* `sessionToken` (Text, Unique)
* **`verificationTokens` Table (for NextAuth.js):**
* `identifier` (Text)
* `token` (Text)
* `expires` (Timestamp)
* **`userModels` Table:**
* `id` (UUID, Primary Key)
* `userId` (UUID, Foreign Key to `users.id`)
* `modelName` (Text) // e.g., "Qwen3-14B-Q4_K_M"
* `modelPath` (Text) // Local file path or identifier
* `quantizationType` (Text) // e.g., "Q4_K_M"
* `isFrozen` (Boolean, default: true)
* `optimizationParams` (JSONB, nullable) // Stores parameters for techniques like PlanSearch, self-verified refinement
* `createdAt` (Timestamp, default: now())
* `updatedAt` (Timestamp, default: now())
* **`benchmarkRuns` Table:**
* `id` (UUID, Primary Key)
* `userId` (UUID, Foreign Key to `users.id`)
* `modelId` (UUID, Foreign Key to `userModels.id`)
* `benchmarkName` (Text) // e.g., "LiveCodeBench v5", "GPQA Diamond"
* `score` (Float)
* `details` (JSONB, nullable) // Detailed results, pass@k, k value etc.
* `runTimestamp` (Timestamp, default: now())
* `status` (Enum: "pending", "running", "completed", "failed")
**4. CORE FEATURES & USER FLOW:**
* **User Authentication:**
* Flow: User lands on the app -> Clicks "Sign In" -> Presented with email/password or OAuth (Google) option -> Logs in via NextAuth.js -> Redirected to Dashboard.
* Handles registration and login securely.
* Protects all routes except landing page and auth pages.
* **Model Management:**
* Flow: User navigates to "Models" page -> Clicks "Add New Model" -> Enters model details (name, path, quantization type) -> Clicks "Save". System validates path and compatibility (basic checks).
* Displays a list of added models on the "Models" page with their details.
* Allows users to select a primary model for benchmarking.
* **Future MVP+:** Model download/management interface.
* **Optimization Settings:**
* Flow: User selects a model from the "Models" list -> Navigates to "Optimization Settings" -> Adjusts parameters for techniques like "Constraint-Driven Generation", "Self-Verified Refinement" (toggle on/off, input fields for specific parameters like 'budget' or 'temperature' if applicable). -> Clicks "Save Settings".
* These settings are stored in the `userModels` table.
* **Benchmarking:**
* Flow: User navigates to the "Benchmark" page -> Selects a model (if not already selected) -> Selects a benchmark task (e.g., "LiveCodeBench v5") -> Clicks "Start Benchmark".
* The request is sent to a Next.js API route (`/api/benchmark/start`).
* This API route initiates a background process (e.g., a Python script using `subprocess` or a dedicated task queue).
* The background process loads the selected model, applies optimization settings, runs the benchmark (e.g., using provided test cases or generating them), and collects results.
* The `benchmarkRuns` table is updated with `status: 'running'` initially, and then `status: 'completed'` or `status: 'failed'` with the score and details upon completion.
* The "Benchmark" page displays the status and, once completed, the results (score, pass@k, etc.) fetched from the `benchmarkRuns` table.
* A history of benchmark runs is available on the "Benchmark History" page.
* **Settings Page:**
* Flow: User navigates to "Settings" -> Can update profile information (name, email - email change might require re-verification) -> Can manage connected accounts (if OAuth is used).
**5. API & DATA FETCHING:**
* **Authentication Endpoints (NextAuth.js):** Handles `/api/auth/[...nextauth]` for sign-in, sign-out, session management.
* **Model Management API (`/api/models`):**
* `POST /api/models`: Add a new model. Request Body: `{ modelName: string, modelPath: string, quantizationType: string, isFrozen: boolean, optimizationParams?: object }`. Returns: `{ success: boolean, model: UserModel }`.
* `GET /api/models`: Get all models for the current user. Returns: `{ models: UserModel[] }`.
* `GET /api/models/:id`: Get a specific model. Returns: `{ model: UserModel }`.
* `PUT /api/models/:id`: Update optimization settings for a model. Request Body: `{ optimizationParams: object }`. Returns: `{ success: boolean }`.
* **Benchmark API (`/api/benchmark`):**
* `POST /api/benchmark/start`: Start a benchmark run. Request Body: `{ modelId: string, benchmarkName: string }`. Returns: `{ success: boolean, runId: string }`.
* `GET /api/benchmark/status/:runId`: Get the status and results of a specific run. Returns: `{ status: string, score?: number, details?: object }`.
* `GET /api/benchmark/history`: Get all benchmark runs for the current user. Returns: `{ runs: BenchmarkRun[] }`.
* **Data Fetching:** Use Server Components for initial page loads where possible (e.g., Dashboard, Model List). Use Client Components with `fetch` or libraries like SWR/React Query for dynamic data (e.g., benchmark status updates, forms). Server Actions can be used for mutations (e.g., adding models, saving settings).
**6. COMPONENT BREAKDOWN (Next.js App Router):**
* **`app/` Directory Structure:**
* **`layout.tsx`:** Root layout (includes global styles, AuthProvider setup).
* **`page.tsx`:** Landing Page (Marketing content, features overview).
* **`dashboard/page.tsx`:** Main dashboard after login. Shows overview of models, recent benchmarks, quick actions.
* **`dashboard/models/page.tsx`:** List of user's local models. Add/Edit functionality.
* **`dashboard/models/[modelId]/page.tsx`:** Detail view for a specific model, including optimization settings.
* **`dashboard/benchmark/page.tsx`:** Interface to start a new benchmark run (model selection, benchmark task selection).
* **`dashboard/benchmark/history/page.tsx`:** Table displaying past benchmark runs.
* **`dashboard/settings/page.tsx`:** User profile and account settings.
* **`auth/signin/page.tsx`:** Sign-in page.
* **UI Components (`components/ui/` - using shadcn/ui):**
* `Button`
* `Input`
* `Card`
* `Table`
* `Tabs`
* `Dialog` (for confirmations, detailed results)
* `Alert` / `AlertDescription`
* `Spinner` / `Progress` (for loading/status indication)
* `Select` (for choosing models, benchmarks)
* `Switch` (for toggling optimization features)
* `Label`
* `Form` (using shadcn/ui's form integration with `react-hook-form`)
* **Core Custom Components (`components/`):**
* `Navbar`: Top navigation bar (links, user avatar, sign-out button).
* `Sidebar`: Navigation panel for dashboard sections.
* `ModelForm`: Form for adding/editing models.
* `OptimizationPanel`: UI elements for configuring optimization parameters.
* `BenchmarkRunner`: Component to initiate and display benchmark progress/results.
* `BenchmarkHistoryTable`: Displays the list of benchmark runs.
* `ModelCard`: Displays summary information for a model.
**7. UI/UX DESIGN & VISUAL IDENTITY:**
* **Design Style:** "Minimalist Tech" - Clean, modern, with a focus on clarity and performance. Subtle use of gradients and soft shadows to add depth.
* **Color Palette:**
* Primary: `#6366F1` (Vibrant Indigo/Blue - for primary actions, highlights)
* Secondary: `#8B5CF6` (Purple - for accents, secondary highlights)
* Background: `#111827` (Dark Slate Gray - for main background)
* Surface/Card Background: `#1F2937` (Slightly lighter dark gray)
* Text (Primary): `#E5E7EB` (Light Gray)
* Text (Secondary): `#9CA3AF` (Medium Gray)
* Accent (Success): `#22C55E` (Green)
* Accent (Warning/Error): `#EF4444` (Red)
* **Typography:**
* Font: Inter (or a similar sans-serif like Roboto).
* Headings: Bold, varying sizes (e.g., `text-4xl`, `text-3xl`).
* Body Text: Regular weight, comfortable line height (`leading-relaxed`).
* **Layout:** Sidebar navigation on the left for authenticated users. Main content area on the right. Clear separation of sections using cards and subtle dividers. Responsive design adapting to desktop, tablet, and mobile.
* **Visual Elements:** Use icons from `lucide-react` (used by shadcn/ui). Subtle loading spinners and progress bars for background tasks. Minimalistic charts for benchmark results if possible in MVP.
* **Responsive Rules:** Mobile-first approach. Sidebar collapses into a hamburger menu on smaller screens. Content sections stack vertically. Ensure forms and tables are usable on small viewports.
**8. SAMPLE/MOCK DATA:**
* **User Model Example:**
```json
{
"id": "uuid-user-model-1",
"userId": "uuid-user-1",
"modelName": "Qwen3-14B-Q4_K_M",
"modelPath": "/path/to/models/qwen3-14b-q4_k_m.gguf",
"quantizationType": "Q4_K_M",
"isFrozen": true,
"optimizationParams": {
"constraintDrivenGeneration": true,
"selfVerifiedRefinement": {
"enabled": true,
"testCaseGenerationBudget": 5
}
},
"createdAt": "2023-10-27T10:00:00Z",
"updatedAt": "2023-10-27T10:05:00Z"
}
```
* **Benchmark Run (Completed):**
```json
{
"id": "uuid-run-1",
"userId": "uuid-user-1",
"modelId": "uuid-user-model-1",
"benchmarkName": "LiveCodeBench v5",
"score": 74.6,
"details": {
"pass@k": "pass@1-v(k=3)",
"tasksCompleted": 599,
"methodology": "V3 pipeline: PlanSearch + self-verified PR-CoT repair"
},
"runTimestamp": "2023-10-27T11:30:00Z",
"status": "completed"
}
```
* **Benchmark Run (Running):**
```json
{
"id": "uuid-run-2",
"userId": "uuid-user-1",
"modelId": "uuid-user-model-1",
"benchmarkName": "GPQA Diamond",
"score": null,
"details": null,
"runTimestamp": "2023-10-27T12:00:00Z",
"status": "running"
}
```
* **User Example:**
```json
{
"id": "uuid-user-1",
"name": "Alex Smith",
"email": "alex.smith@example.com",
"emailVerified": "2023-10-26T09:00:00Z",
"image": "/path/to/avatar.png"
}
```
* **Model (Simple):**
```json
{
"id": "uuid-user-model-2",
"userId": "uuid-user-1",
"modelName": "LLaMA-3-8B-Instruct-Q5_K_M",
"modelPath": "/path/to/models/llama3-8b-q5_k_m.gguf",
"quantizationType": "Q5_K_M",
"isFrozen": false, // Example of a non-frozen model
"optimizationParams": null,
"createdAt": "2023-10-27T10:15:00Z",
"updatedAt": "2023-10-27T10:15:00Z"
}
```
**9. TURKISH TRANSLATIONS:**
* **App Title:** Local Code AI
* **Navbar:** Ana Sayfa (Dashboard), Modellerim (My Models), Benchmark, Ayarlar (Settings)
* **Buttons:** Yeni Model Ekle (Add New Model), Ayarları Kaydet (Save Settings), Benchmark Başlat (Start Benchmark), Geçmişi Gör (View History), Oturumu Kapat (Sign Out)
* **Labels:** Model Adı (Model Name), Model Yolu (Model Path), Nicemleme Tipi (Quantization Type), Dondurulmuş (Frozen), Optimizasyon Parametreleri (Optimization Parameters)
* **Page Titles:** Kontrol Paneli (Dashboard), Modeller (Models), Benchmark Ayarları (Benchmark Settings), Benchmark Geçmişi (Benchmark History), Kullanıcı Ayarları (User Settings)
* **Descriptions:** Yerel GPU'nuzda yapay zeka kodlama modellerini çalıştırın ve optimize edin. Verileriniz güvende kalır. (Run and optimize AI coding models on your local GPU. Your data stays private.)
* **Status Messages:** Benchmark başlatılıyor... (Starting benchmark...), Benchmark tamamlandı! (Benchmark completed!), Hata oluştu. (An error occurred.)
**10. ANIMATIONS:**
* **Page Transitions:** Subtle fade-in/fade-out using Next.js `AnimatePresence` (if using `framer-motion`) or CSS transitions.
* **Hover Effects:** Slight scale-up or background color change on interactive elements (buttons, cards).
* **Loading States:** Use shadcn/ui `Spinner` or `Progress` components with smooth transitions. Skeleton loaders for data tables before data arrives.
* **Form Feedback:** Animate success/error messages briefly.
**11. EDGE CASES:**
* **No Models Added:** The "Models" page and Benchmark selection should display a clear message encouraging the user to add their first model.
* **Invalid Model Path:** The system should validate local paths during model addition and provide clear error feedback.
* **GPU Memory Insufficient:** The background process for running models should handle Out-Of-Memory errors gracefully, updating the benchmark status to 'failed' with an appropriate message.
* **Benchmark Process Interruption:** If the user navigates away or closes the app during a benchmark, the status should be updated to 'failed' or have a mechanism to resume if feasible (though MVP focuses on simple completion/failure).
* **Authentication Errors:** Handle expired sessions, incorrect credentials, etc., redirecting to the sign-in page.
* **File System Access:** Ensure the Next.js server/backend process has the necessary permissions to access the specified model file paths.
* **Initial State:** Default states for forms and settings should be sensible.
* **Validation:** Implement robust client-side and server-side validation for all form inputs (model paths, parameters, user profile info).