# RD Curve AI - Copilot Instructions
You are assisting with "RD Curve AI", a Next.js 16 application for video/image compression researchers to manage datasets and plot Rate-Distortion (RD) curves.
## Tech Stack & Key Libraries
- **Framework:** Next.js 16 (App Router), React 19
- **Database:** PostgreSQL, Drizzle ORM (`lib/schema.ts`, `lib/db.ts`)
- **Auth:** Better-Auth (`lib/auth.ts`, `lib/auth-client.ts`)
- **UI:** Tailwind CSS, shadcn/ui, Recharts (`components/rd-chart.tsx`)
- **Validation:** Zod (`lib/types.ts`)
- **AI:** OpenAI (for data parsing)
## Architecture Overview
### Data Model (`lib/schema.ts`)
The core hierarchy is **Dataset -> Method -> DataPoint**.
- **Dataset:** A collection of methods (e.g., "Kodak Dataset").
- **Method:** A specific algorithm (e.g., "JPEG", "HEVC").
- **DataPoint:** A single result with `bpp` (x-axis) and dynamic `metrics` (y-axis) stored in a `jsonb` column.
- **Metric:** Custom definitions for y-axis values (e.g., "PSNR", "MS-SSIM") with a `mapping_function` string for display transformation.
### Authentication Pattern
- **Server-side:** Use `auth.api.getSession({ headers: await headers() })` in API routes/Server Components.
- **Client-side:** Use `authClient` hooks (e.g., `useSession`).
- **Protection:** Always check `if (!session)` in API routes before sensitive operations.
### API Route Pattern (`app/api/**`)
Follow this pattern for Route Handlers:
1. **Auth Check:** Verify session immediately.
2. **Validation:** Parse request body with Zod schemas from `lib/types.ts`.
3. **DB Operation:** Use Drizzle to query/mutate.
4. **Response:** Return `NextResponse.json`.
## Critical Conventions
### Database & Drizzle
- **Schema:** Define all tables in `lib/schema.ts`.
- **IDs:** Use `uuid` with `.defaultRandom()`.
- **Relations:** Use `drizzle-orm` relations for cleaner queries.
- **JSONB:** Use the `metrics` jsonb column in `data_point` for flexible metric storage.
### Frontend Components
- **UI:** Use `components/ui` (shadcn) for primitives, install new ones with `npx shadcn@latest add <component>`.
- **Charts:** Use `Recharts` in `components/rd-chart.tsx`. Handle the `mapping_function` logic (likely via `lib/safe-eval.ts`) when rendering axes.
- **Icons:** Use `lucide-react`.
- **MCP:** Use `context7` mcp for documentation if needed. Use `shadcn` mcp for UI components. Use `lucide-icons` mcp for searching icons.
### Configuration
- **Env Vars:** Access via `lib/config.ts` (e.g., `CONFIG.OPENAI_API_KEY`), NOT `process.env` directly.
- **Types:** Keep shared Zod schemas and TS interfaces in `lib/types.ts`.
### Language
- All API responses and frontend text must be in English.
## Developer Workflows
- **Migrations:** Run `pnpm db:generate` and `pnpm db:migrate` when changing schema.
- **AI Parsing:** The parsing logic (converting text to JSON) should handle unstructured input and map it to the `data_point` structure.
AIでフロントエンドとバックエンドのアプリケーションを再び構築——RD Curve AI
AIでフロントエンドとバックエンドのアプリケーションを再び構築——RD Curve AI
年初に大規模言語モデルを使ってフロントエンドとバックエンドのプロジェクトを完成させようと試みました。詳細は「AIを使ってフロントエンドとバックエンドのプロジェクト全体を完成させた記録」をご覧ください。
当時の見解は、たとえ他の言語で書かれた既存のコードを参考にしても再現は難しく、かなりの部分で人間がコードの記述に関与する必要がある(特にコンパイルの問題や実行時バグに対して)というものでした。
しかし今年に入り、エージェントの急速な進歩がVibe Codingの急速な発展を後押しし、さらに私自身がNext.jsフレームワークに徐々に慣れてきたことで、この作業はずっと簡単になったように思います。
圧縮分野の研究者として、新しいRD曲線図を描くたびに、過去の実験データから旧手法の実験結果を探し出し、matplotlibのコードを書いて描画しなければならないことにずっと悩まされてきました。ここ数日、ついに我慢できなくなり、関連する実験データを管理し可視化するアプリケーション——RD Curve AIを作り始めました。ぜひお試しいただき、改善のご提案をいただければ幸いです。
今回のVibe Codingは実際にはわずか1日で完了し、個人的には非常にスムーズだったと思います。大まかな流れは以下の通りです。
最後に述べておきたいのは、Vibe Codingは依然として初心者が比較的複雑なシステムタスクを完了するのを助けることはできないということです。人間はAIが書いたコードを完全に理解する必要は必ずしもありませんが、システムフレームワークについては比較的全体的な把握が必要です。ここで一つの過激な意見を引用します:「AIは(ほとんど)あなたができないタスクを手助けできない」。私のNext.jsフレームワークへの習熟は、この1年間独学し、AIの助けを借りて小さなプロジェクトを完成させたり、いくつかのオープンソースプロジェクトを改善したりする中で徐々に培われてきました。こうした経験の蓄積があって初めて、AIは効率を向上させる優れたツールとなるのです。