저는 비디오 이미지 압축 연구자입니다. 새로운 데이터가 나올 때마다 RD 곡선을 그리기 위해 파이썬 코드를 작성하는 것이 너무 번거롭습니다. 아래 기능을 수행하는 웹 페이지를 작성해 주세요.
better-auth를 사용하여 이메일 등록 및 로그인을 구현합니다.
로그인 후 사용자는 데이터셋을 새로 만들고 이름과 설명을 작성할 수 있습니다.
데이터셋 내에서 사용자는 "JPEG"와 같은 방법을 새로 만들고 설명을 작성할 수 있습니다.
사용자는 해당 방법 또는 방법의 모든 RD 데이터 포인트를 편집(삭제 포함)할 수 있습니다.
사용자는 임의 형식의 데이터 파일(예: txt, csv 등)을 업로드하거나 실험 결과 텍스트를 직접 붙여넣을 수 있으며, AI가 이를 파싱하여 {"name": "JPEG", "description": "some description", "data":[{bpp: float, psnr: float, ms_ssim: float}, ...]} 형식의 표준 JSON 데이터로 변환하여 표시합니다. 사용자가 데이터베이스에 삽입할지 판단하며, 동일한 이름이 있는 경우 bpp 기준으로 정렬하여 데이터 포인트를 병합하고 다른 내용은 업데이트하지 않습니다.
name 또는 description이 파싱되지 않은 경우 사용자가 입력하도록 하며, name은 비워둘 수 없습니다.
각 포인트는 반드시 bpp를 가져야 하며, 이는 가로축을 나타냅니다. PSNR, MS-SSIM 등은 선택 사항이며 세로축을 나타냅니다. 또한 사용자가 LPIPS 등 다른 세로축을 사용자 정의할 수 있으며, 두 개의 기본 세로축은 사용자가 삭제할 수 있습니다.
각 세로축 데이터에는 매핑 함수가 있으며, 사용자가 정의해야 하며 그림 상의 수치를 나타냅니다. 예를 들어 MS-SSIM의 범위는 0-1이지만 그림에 표시할 때는 -10*log10(1 - ms_ssim)이 필요합니다. 사용자는 이 매핑 함수를 입력할 수 있지만, 위험한 함수를 입력하지 않도록 주의해야 합니다.
AI는 OpenAI 형식의 API를 사용하여 데이터를 파싱하며, 환경 변수를 통해 엔드포인트, API 키, 모델 등의 매개변수를 지정할 수 있습니다.
사용자는 데이터셋 인터페이스에서 각 방법의 RD 곡선을 직접 볼 수 있으며, 특정 방법의 곡선이나 방법 내 특정 포인트의 표시를 취소할 수 있습니다. 이러한 표시 정보는 브라우저 로컬에 저장하여 다음 방문 시 복원할 수 있습니다.
모든 API 응답 및 페이지 콘텐츠는 영어를 사용합니다.
제품 이름은 "RD Curve AI"입니다.
프론트엔드는 shadcn/ui 컴포넌트 라이브러리와 lucide 아이콘 라이브러리를 사용합니다.
데이터베이스는 Drizzle ORM을 사용하여 PostgreSQL에 연결합니다.
패키지 관리 도구로 pnpm을 사용하며, shadcn/ui 컴포넌트 라이브러리는 npx 명령어로 설치 및 초기화합니다.
타입은 zod를 사용하여 검증 및 변환하며, lib/types.ts 파일에 통합하여 저장합니다.
환경 변수는 lib/config.ts 파일을 통해 통합 관리 및 내보내기를 수행합니다.
필요한 경우 shadcn mcp를 호출하여 컴포넌트 라이브러리를 검색하고, lucide-icons mcp를 호출하여 아이콘 라이브러리를 검색하며, context7 mcp를 호출하여 사용된 기술 스택의 최신 자료 및 문서를 검색할 수 있습니다.
가능한 한 기존 lib 폴더의 코드를 재사용합니다.
모든 API 정보 및 프론트엔드 텍스트는 영어를 사용합니다.
# 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은 실제로 단 하루 만에 완료되었으며, 개인적으로는 매우 순조로웠다고 생각합니다. 대략적인 과정은 다음과 같습니다:
마지막으로 말씀드리고 싶은 것은, Vibe Coding은 여전히 초보자가 비교적 복잡한 시스템 작업을 완료하는 데 도움을 줄 수 없다는 점입니다. 사람이 AI가 작성한 코드를 완전히 읽을 필요는 없지만, 반드시 시스템 프레임워크에 대해 비교적 포괄적으로 파악하고 있어야 합니다. 여기서 하나의 과격한 주장을 인용합니다: “AI는 (거의) 당신이 할 줄 모르는 작업을 완수하도록 도울 수 없다”. 제가 Next.js 프레임워크에 익숙해진 것은 이 1년 동안 독학하고 AI의 도움을 받아 작은 프로젝트를 완성하거나 일부 오픈소스 프로젝트를 개선하면서 점차 성장한 결과입니다. 이러한 경험이 쌓이면 AI는 효율성을 높여주는 훌륭한 도구가 될 수 있습니다.