Compare commits
18 Commits
feat/front
...
7888d7995c
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
7888d7995c | ||
|
|
3689b1707a | ||
|
|
aac0e2f5b1 | ||
|
|
5bde4e3aa6 | ||
|
|
6832fbdebb | ||
|
|
37c07e468d | ||
|
|
a273f29e07 | ||
|
|
2f4239a83b | ||
|
|
3539a5f3eb | ||
|
|
e13b1ea2d5 | ||
|
|
26d879c82e | ||
|
|
66a2d647bb | ||
|
|
637f1540cf | ||
|
|
2c2fd3547c | ||
|
|
3568e2f008 | ||
|
|
71ef567d0d | ||
|
|
d8ff5f4bb1 | ||
|
|
3a448a5063 |
6
.env.example
Normal file
6
.env.example
Normal file
@@ -0,0 +1,6 @@
|
|||||||
|
DATABASE_URL=postgresql://postgres:postgres@localhost:5432/comparaison
|
||||||
|
BETTER_AUTH_SECRET=change-me-to-random-string
|
||||||
|
OPENAI_API_KEY=
|
||||||
|
PERPLEXITY_API_KEY=
|
||||||
|
TAVILY_API_KEY=
|
||||||
|
NEXT_PUBLIC_APP_URL=http://localhost:3000
|
||||||
6
.gitignore
vendored
6
.gitignore
vendored
@@ -32,6 +32,7 @@ yarn-error.log*
|
|||||||
|
|
||||||
# env files (can opt-in for committing if needed)
|
# env files (can opt-in for committing if needed)
|
||||||
.env*
|
.env*
|
||||||
|
!.env.example
|
||||||
|
|
||||||
# vercel
|
# vercel
|
||||||
.vercel
|
.vercel
|
||||||
@@ -39,3 +40,8 @@ yarn-error.log*
|
|||||||
# typescript
|
# typescript
|
||||||
*.tsbuildinfo
|
*.tsbuildinfo
|
||||||
next-env.d.ts
|
next-env.d.ts
|
||||||
|
|
||||||
|
# Worktrees (tracked via branches)
|
||||||
|
comparaison-backend/
|
||||||
|
comparaison-llm/
|
||||||
|
comparaison-ui/
|
||||||
|
|||||||
21
Dockerfile
Normal file
21
Dockerfile
Normal file
@@ -0,0 +1,21 @@
|
|||||||
|
FROM node:20-alpine AS base
|
||||||
|
|
||||||
|
FROM base AS deps
|
||||||
|
WORKDIR /app
|
||||||
|
COPY package.json package-lock.json ./
|
||||||
|
RUN npm ci
|
||||||
|
|
||||||
|
FROM base AS builder
|
||||||
|
WORKDIR /app
|
||||||
|
COPY --from=deps /app/node_modules ./node_modules
|
||||||
|
COPY . .
|
||||||
|
RUN npm run build
|
||||||
|
|
||||||
|
FROM base AS runner
|
||||||
|
WORKDIR /app
|
||||||
|
ENV NODE_ENV=production
|
||||||
|
COPY --from=builder /app/public ./public
|
||||||
|
COPY --from=builder /app/.next/standalone ./
|
||||||
|
COPY --from=builder /app/.next/static ./.next/static
|
||||||
|
EXPOSE 3000
|
||||||
|
CMD ["node", "server.js"]
|
||||||
152
README.md
152
README.md
@@ -1,36 +1,148 @@
|
|||||||
This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
|
# ComparAIson
|
||||||
|
|
||||||
## Getting Started
|
**AI-Powered Deep Research Comparison Platform**
|
||||||
|
|
||||||
First, run the development server:
|
Compare anything with intelligent, multi-dimensional analysis. ComparAIson uses LLM-powered research to generate comprehensive, visual comparisons — then saves them as shareable posts on your profile.
|
||||||
|
|
||||||
|
## Features
|
||||||
|
|
||||||
|
- **Deep Research Engine** — Multi-provider LLM pipeline (Tavily search → Perplexity/OpenAI synthesis) with automatic fallback
|
||||||
|
- **Interactive Visualizations** — Radar charts, grouped bar charts, feature comparison tables, score cards, pros/cons breakdowns
|
||||||
|
- **Real-Time Streaming** — Watch research progress live via Server-Sent Events
|
||||||
|
- **User Profiles** — Save comparisons to your profile, browse a public feed
|
||||||
|
- **Self-Hosted** — Docker Compose deployment, runs on a Raspberry Pi
|
||||||
|
|
||||||
|
## Tech Stack
|
||||||
|
|
||||||
|
| Layer | Technology |
|
||||||
|
|---|---|
|
||||||
|
| Framework | Next.js 15 (App Router, Server Components, Server Actions) |
|
||||||
|
| Language | TypeScript |
|
||||||
|
| Database | PostgreSQL 16 |
|
||||||
|
| ORM | Drizzle ORM |
|
||||||
|
| Auth | Better Auth (email + password) |
|
||||||
|
| UI | Tailwind CSS + shadcn/ui |
|
||||||
|
| Charts | Recharts |
|
||||||
|
| LLM | OpenAI GPT-4o-mini + Tavily Search + Perplexity Sonar |
|
||||||
|
| Deployment | Docker Compose + Traefik reverse proxy |
|
||||||
|
|
||||||
|
## Quick Start
|
||||||
|
|
||||||
|
### Prerequisites
|
||||||
|
|
||||||
|
- Node.js 20+
|
||||||
|
- PostgreSQL 16+ (or Docker)
|
||||||
|
- At least one LLM API key
|
||||||
|
|
||||||
|
### 1. Clone & Install
|
||||||
|
|
||||||
|
```bash
|
||||||
|
git clone https://gitea.tophermayor.com/TopherMayor/comparaison.git
|
||||||
|
cd comparaison
|
||||||
|
npm install
|
||||||
|
```
|
||||||
|
|
||||||
|
### 2. Configure Environment
|
||||||
|
|
||||||
|
```bash
|
||||||
|
cp .env.example .env.local
|
||||||
|
# Edit .env.local with your API keys and database URL
|
||||||
|
```
|
||||||
|
|
||||||
|
Required environment variables:
|
||||||
|
|
||||||
|
| Variable | Description | Required |
|
||||||
|
|---|---|---|
|
||||||
|
| `DATABASE_URL` | PostgreSQL connection string | Yes |
|
||||||
|
| `BETTER_AUTH_SECRET` | Random secret for session signing | Yes |
|
||||||
|
| `OPENAI_API_KEY` | OpenAI API key (GPT-4o-mini) | Yes* |
|
||||||
|
| `TAVILY_API_KEY` | Tavily search API key | Recommended |
|
||||||
|
| `PERPLEXITY_API_KEY` | Perplexity Sonar API key | Optional |
|
||||||
|
| `NEXT_PUBLIC_APP_URL` | Public URL of the app | Yes |
|
||||||
|
|
||||||
|
*At minimum, one LLM provider key is required. OpenAI works standalone; Tavily adds web search; Perplexity adds cheaper synthesis.
|
||||||
|
|
||||||
|
### 3. Database Setup
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# Generate migration
|
||||||
|
npx drizzle-kit generate
|
||||||
|
|
||||||
|
# Run migration
|
||||||
|
npx drizzle-kit migrate
|
||||||
|
```
|
||||||
|
|
||||||
|
### 4. Development
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
npm run dev
|
npm run dev
|
||||||
# or
|
# App runs at http://localhost:3000
|
||||||
yarn dev
|
|
||||||
# or
|
|
||||||
pnpm dev
|
|
||||||
# or
|
|
||||||
bun dev
|
|
||||||
```
|
```
|
||||||
|
|
||||||
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
|
### 5. Docker Deployment
|
||||||
|
|
||||||
You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
|
```bash
|
||||||
|
docker compose up -d
|
||||||
|
```
|
||||||
|
|
||||||
This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
|
## Project Structure
|
||||||
|
|
||||||
## Learn More
|
```
|
||||||
|
src/
|
||||||
|
├── app/
|
||||||
|
│ ├── (auth)/ # Auth route group
|
||||||
|
│ │ ├── sign-in/ # Sign in page
|
||||||
|
│ │ └── sign-up/ # Sign up page
|
||||||
|
│ ├── (main)/ # Main app route group (with nav)
|
||||||
|
│ │ ├── compare/ # Comparison input + results
|
||||||
|
│ │ ├── explore/ # Public comparisons feed
|
||||||
|
│ │ └── profile/ # User profile + saved comparisons
|
||||||
|
│ ├── api/
|
||||||
|
│ │ ├── auth/[...all]/ # Better Auth catch-all
|
||||||
|
│ │ └── compare/ # SSE streaming research endpoint
|
||||||
|
│ ├── layout.tsx # Root layout
|
||||||
|
│ └── page.tsx # Landing page
|
||||||
|
├── components/
|
||||||
|
│ ├── comparison/ # Visualization components
|
||||||
|
│ │ ├── radar-chart.tsx
|
||||||
|
│ │ ├── bar-chart.tsx
|
||||||
|
│ │ ├── comparison-table.tsx
|
||||||
|
│ │ ├── score-card.tsx
|
||||||
|
│ │ └── pros-cons-card.tsx
|
||||||
|
│ └── ui/ # shadcn/ui components
|
||||||
|
├── hooks/
|
||||||
|
│ └── use-comparison-stream.ts # SSE streaming hook
|
||||||
|
├── lib/
|
||||||
|
│ ├── auth.ts # Better Auth server config
|
||||||
|
│ ├── auth-client.ts # Better Auth client
|
||||||
|
│ ├── db/
|
||||||
|
│ │ ├── index.ts # Drizzle client
|
||||||
|
│ │ └── schema.ts # Database schema
|
||||||
|
│ ├── llm/
|
||||||
|
│ │ ├── index.ts # Research pipeline orchestrator
|
||||||
|
│ │ ├── types.ts # LLM type definitions
|
||||||
|
│ │ └── providers/
|
||||||
|
│ │ ├── index.ts # Provider fallback chain
|
||||||
|
│ │ ├── openai.ts # OpenAI GPT-4o-mini provider
|
||||||
|
│ │ ├── tavily.ts # Tavily search provider
|
||||||
|
│ │ └── perplexity.ts # Perplexity Sonar provider
|
||||||
|
│ ├── types.ts # Shared type definitions
|
||||||
|
│ └── utils.ts # Utility functions
|
||||||
|
└── middleware.ts # Auth middleware + route protection
|
||||||
|
```
|
||||||
|
|
||||||
To learn more about Next.js, take a look at the following resources:
|
## Architecture
|
||||||
|
|
||||||
- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
|
See [docs/architecture.md](docs/architecture.md) for detailed architecture documentation.
|
||||||
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
|
|
||||||
|
|
||||||
You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
|
## API Reference
|
||||||
|
|
||||||
## Deploy on Vercel
|
See [docs/api-reference.md](docs/api-reference.md) for endpoint documentation.
|
||||||
|
|
||||||
The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
|
## UI/UX Flow
|
||||||
|
|
||||||
Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.
|
See [docs/ui-ux-flow.md](docs/ui-ux-flow.md) for user journey and wireframe descriptions.
|
||||||
|
|
||||||
|
## License
|
||||||
|
|
||||||
|
MIT
|
||||||
|
|||||||
30
docker-compose.yml
Normal file
30
docker-compose.yml
Normal file
@@ -0,0 +1,30 @@
|
|||||||
|
version: "3.8"
|
||||||
|
services:
|
||||||
|
app:
|
||||||
|
build: .
|
||||||
|
ports:
|
||||||
|
- "3000:3000"
|
||||||
|
environment:
|
||||||
|
- DATABASE_URL=postgresql://postgres:postgres@db:5432/comparaison
|
||||||
|
depends_on:
|
||||||
|
db:
|
||||||
|
condition: service_healthy
|
||||||
|
restart: unless-stopped
|
||||||
|
db:
|
||||||
|
image: postgres:16-alpine
|
||||||
|
environment:
|
||||||
|
POSTGRES_USER: postgres
|
||||||
|
POSTGRES_PASSWORD: postgres
|
||||||
|
POSTGRES_DB: comparaison
|
||||||
|
ports:
|
||||||
|
- "5432:5432"
|
||||||
|
volumes:
|
||||||
|
- pgdata:/var/lib/postgresql/data
|
||||||
|
healthcheck:
|
||||||
|
test: ["CMD-SHELL", "pg_isready -U postgres"]
|
||||||
|
interval: 5s
|
||||||
|
timeout: 5s
|
||||||
|
retries: 5
|
||||||
|
restart: unless-stopped
|
||||||
|
volumes:
|
||||||
|
pgdata:
|
||||||
204
docs/api-reference.md
Normal file
204
docs/api-reference.md
Normal file
@@ -0,0 +1,204 @@
|
|||||||
|
# ComparAIson — API Reference
|
||||||
|
|
||||||
|
## Base URL
|
||||||
|
|
||||||
|
```
|
||||||
|
Development: http://localhost:3000
|
||||||
|
Production: https://comparaison.tophermayor.com
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Authentication
|
||||||
|
|
||||||
|
All authenticated endpoints use Better Auth session cookies.
|
||||||
|
|
||||||
|
### POST `/api/auth/sign-up`
|
||||||
|
Create a new account.
|
||||||
|
|
||||||
|
**Request:**
|
||||||
|
```json
|
||||||
|
{
|
||||||
|
"name": "Alex Johnson",
|
||||||
|
"email": "alex@example.com",
|
||||||
|
"password": "securepassword123"
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
**Response:** `200 OK` — Sets session cookie, returns user object
|
||||||
|
|
||||||
|
### POST `/api/auth/sign-in`
|
||||||
|
Sign in to existing account.
|
||||||
|
|
||||||
|
**Request:**
|
||||||
|
```json
|
||||||
|
{
|
||||||
|
"email": "alex@example.com",
|
||||||
|
"password": "securepassword123"
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
**Response:** `200 OK` — Sets session cookie, redirects to callbackUrl
|
||||||
|
|
||||||
|
### POST `/api/auth/sign-out`
|
||||||
|
Sign out, clears session.
|
||||||
|
|
||||||
|
**Response:** `200 OK` — Redirects to `/`
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Comparison Endpoints
|
||||||
|
|
||||||
|
### POST `/api/compare`
|
||||||
|
Start a new comparison research. Returns a Server-Sent Events stream.
|
||||||
|
|
||||||
|
**Authentication:** Required
|
||||||
|
|
||||||
|
**Request:**
|
||||||
|
```json
|
||||||
|
{
|
||||||
|
"query": "for modern web development",
|
||||||
|
"items": ["React", "Vue", "Svelte"],
|
||||||
|
"dimensions": ["Performance", "Developer Experience"]
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
| Field | Type | Required | Description |
|
||||||
|
|---|---|---|---|
|
||||||
|
| `query` | string | No | Context/focus for the comparison |
|
||||||
|
| `items` | string[] | Yes | Items to compare (2-10) |
|
||||||
|
| `dimensions` | string[] | No | Optional dimension hints |
|
||||||
|
|
||||||
|
**Response:** `200 OK` — `text/event-stream`
|
||||||
|
|
||||||
|
SSE event format:
|
||||||
|
```
|
||||||
|
event: progress
|
||||||
|
data: {"status":"researching","message":"Analyzing comparison request...","itemsCompleted":0,"totalItems":3,"currentStep":"Analyzing comparison request..."}
|
||||||
|
|
||||||
|
event: progress
|
||||||
|
data: {"status":"researching","message":"Researching React...","itemsCompleted":1,"totalItems":3,"currentStep":"Analyzing React"}
|
||||||
|
|
||||||
|
event: progress
|
||||||
|
data: {"status":"completed","message":"Research complete!","itemsCompleted":3,"totalItems":3,"currentStep":"Done"}
|
||||||
|
|
||||||
|
event: done
|
||||||
|
data: {"id":"clx123abc","slug":"react-vs-vue-vs-svelte-clx123","data":{...full comparison data...}}
|
||||||
|
```
|
||||||
|
|
||||||
|
**Error Response:** `400 Bad Request`
|
||||||
|
```json
|
||||||
|
{ "error": "At least 2 items are required" }
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Page Routes
|
||||||
|
|
||||||
|
### `GET /`
|
||||||
|
Landing page. Public. Shows hero, example comparisons, features.
|
||||||
|
|
||||||
|
### `GET /sign-in`
|
||||||
|
Sign in form. Public. Redirects to `/compare` on success.
|
||||||
|
|
||||||
|
### `GET /sign-up`
|
||||||
|
Sign up form. Public. Redirects to `/compare` on success.
|
||||||
|
|
||||||
|
### `GET /compare`
|
||||||
|
Comparison creation page. **Protected.** Shows item input form + streaming progress.
|
||||||
|
|
||||||
|
### `GET /compare/[slug]`
|
||||||
|
Comparison results page. Public (if comparison is public). Shows tabbed visualization layout.
|
||||||
|
|
||||||
|
**URL format:** `/compare/react-vs-vue-vs-svelte-clx123a`
|
||||||
|
|
||||||
|
### `GET /explore`
|
||||||
|
Public comparisons feed. Public. Grid layout with search + category filter.
|
||||||
|
|
||||||
|
### `GET /profile`
|
||||||
|
User profile page. **Protected.** Shows user info, stats, and saved comparisons.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## TypeScript Types
|
||||||
|
|
||||||
|
### ComparisonRequest
|
||||||
|
```typescript
|
||||||
|
interface ComparisonRequest {
|
||||||
|
query: string;
|
||||||
|
items: string[];
|
||||||
|
dimensions?: string[];
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### ComparisonResult
|
||||||
|
```typescript
|
||||||
|
interface ComparisonResult {
|
||||||
|
items: ItemResearch[];
|
||||||
|
dimensions: string[];
|
||||||
|
summary: string;
|
||||||
|
recommendation: string;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### ItemResearch
|
||||||
|
```typescript
|
||||||
|
interface ItemResearch {
|
||||||
|
name: string;
|
||||||
|
description: string;
|
||||||
|
overallScore: number;
|
||||||
|
dimensions: Record<string, DimensionResult>;
|
||||||
|
pros: string[];
|
||||||
|
cons: string[];
|
||||||
|
sources: { title: string; url: string; snippet: string }[];
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### DimensionResult
|
||||||
|
```typescript
|
||||||
|
interface DimensionResult {
|
||||||
|
score: number; // 1-10
|
||||||
|
summary: string;
|
||||||
|
details: string;
|
||||||
|
pros: string[];
|
||||||
|
cons: string[];
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### ResearchProgress (SSE)
|
||||||
|
```typescript
|
||||||
|
type ResearchProgress =
|
||||||
|
| { stage: "parsing"; message: string }
|
||||||
|
| { stage: "searching"; item: string; results: number }
|
||||||
|
| { stage: "researching"; item: string; progress: number }
|
||||||
|
| { stage: "synthesizing"; message: string }
|
||||||
|
| { stage: "complete"; result: ComparisonResult }
|
||||||
|
| { stage: "error"; error: string };
|
||||||
|
```
|
||||||
|
|
||||||
|
### ComparisonData (Frontend)
|
||||||
|
```typescript
|
||||||
|
interface ComparisonData {
|
||||||
|
id: string;
|
||||||
|
userId: string;
|
||||||
|
title: string;
|
||||||
|
query: string;
|
||||||
|
slug: string;
|
||||||
|
status: "researching" | "completed" | "failed";
|
||||||
|
summary: string;
|
||||||
|
items: {
|
||||||
|
name: string;
|
||||||
|
description: string;
|
||||||
|
overallScore: number;
|
||||||
|
dimensions: Record<string, DimensionResult>;
|
||||||
|
pros: string[];
|
||||||
|
cons: string[];
|
||||||
|
}[];
|
||||||
|
dimensions: string[];
|
||||||
|
tags: string[];
|
||||||
|
isPublic: boolean;
|
||||||
|
viewCount: number;
|
||||||
|
createdAt: string;
|
||||||
|
updatedAt: string;
|
||||||
|
}
|
||||||
|
```
|
||||||
129
docs/architecture.md
Normal file
129
docs/architecture.md
Normal file
@@ -0,0 +1,129 @@
|
|||||||
|
# ComparAIson — Architecture
|
||||||
|
|
||||||
|
## System Overview
|
||||||
|
|
||||||
|
```
|
||||||
|
┌─────────────┐ ┌──────────────┐ ┌─────────────┐
|
||||||
|
│ Browser │────▶│ Traefik │────▶│ Next.js │
|
||||||
|
│ (React SPA) │◀────│ (Reverse │◀────│ (Port 3000)│
|
||||||
|
│ │ │ Proxy) │ │ │
|
||||||
|
└─────────────┘ └──────────────┘ └──────┬──────┘
|
||||||
|
│
|
||||||
|
┌─────────────┼─────────────┐
|
||||||
|
▼ ▼ ▼
|
||||||
|
┌──────────┐ ┌──────────┐ ┌──────────┐
|
||||||
|
│PostgreSQL│ │ Tavily │ │ OpenAI │
|
||||||
|
│ (DB) │ │ (Search) │ │ (LLM) │
|
||||||
|
└──────────┘ └──────────┘ └──────────┘
|
||||||
|
┌──────────┐
|
||||||
|
│Perplexity│
|
||||||
|
│ (LLM) │
|
||||||
|
└──────────┘
|
||||||
|
```
|
||||||
|
|
||||||
|
## Component Architecture
|
||||||
|
|
||||||
|
### Frontend (Next.js App Router)
|
||||||
|
|
||||||
|
```
|
||||||
|
Route Groups:
|
||||||
|
├── (auth)/ — Unauthenticated pages (sign-in, sign-up)
|
||||||
|
├── (main)/ — Authenticated pages with shared nav layout
|
||||||
|
│ ├── compare/ — Comparison creation + results viewing
|
||||||
|
│ ├── explore/ — Public feed browsing
|
||||||
|
│ └── profile/ — User profile + comparison history
|
||||||
|
└── api/ — Server-side API routes
|
||||||
|
├── auth/ — Better Auth endpoints
|
||||||
|
└── compare/ — SSE research streaming endpoint
|
||||||
|
```
|
||||||
|
|
||||||
|
**Key patterns:**
|
||||||
|
- **Server Components** for data-fetching pages (profile, explore)
|
||||||
|
- **Client Components** for interactive UI (compare input, charts, streaming)
|
||||||
|
- **Server Actions** for mutations (save comparison, update profile)
|
||||||
|
- **SSE streaming** for real-time research progress
|
||||||
|
|
||||||
|
### Backend Services
|
||||||
|
|
||||||
|
#### Research Pipeline (`src/lib/llm/`)
|
||||||
|
Orchestrates the multi-stage research process:
|
||||||
|
1. **Input parsing** — Validate items, extract dimensions
|
||||||
|
2. **Provider detection** — Check available API keys, select best provider chain
|
||||||
|
3. **Web search** — Tavily API searches per item
|
||||||
|
4. **LLM synthesis** — Structured JSON generation via Perplexity or OpenAI
|
||||||
|
5. **Validation** — Runtime type checking of LLM output
|
||||||
|
6. **Persistence** — Store results in PostgreSQL via Drizzle ORM
|
||||||
|
|
||||||
|
#### Auth System (`src/lib/auth.ts`)
|
||||||
|
- Better Auth with Drizzle adapter
|
||||||
|
- Email + password authentication
|
||||||
|
- 7-day session expiry
|
||||||
|
- Middleware-based route protection
|
||||||
|
|
||||||
|
#### Database (`src/lib/db/`)
|
||||||
|
- Drizzle ORM with PostgreSQL
|
||||||
|
- 5 tables: users, sessions, comparisons, comparison_items, comparison_dimensions
|
||||||
|
- JSONB columns for flexible research data storage
|
||||||
|
- Indexed on userId, slug, status for query performance
|
||||||
|
|
||||||
|
## Data Flow
|
||||||
|
|
||||||
|
### Comparison Creation Flow
|
||||||
|
|
||||||
|
```
|
||||||
|
1. User enters items + query on /compare
|
||||||
|
2. Client calls POST /api/compare with { items, query, dimensions }
|
||||||
|
3. Server creates comparison record (status: "researching")
|
||||||
|
4. Server opens SSE stream to client
|
||||||
|
5. Research pipeline runs:
|
||||||
|
a. Parsing → emits SSE "parsing" event
|
||||||
|
b. For each item:
|
||||||
|
- Tavily search → emits SSE "searching" event
|
||||||
|
- Process results → emits SSE "researching" event with progress %
|
||||||
|
c. Synthesize all data → emits SSE "synthesizing" event
|
||||||
|
d. Validate + structure → emits SSE "complete" event with full data
|
||||||
|
6. Server persists results to comparisons + comparison_items tables
|
||||||
|
7. Client renders visualization components with result data
|
||||||
|
8. User redirected to /compare/[slug] with full results
|
||||||
|
```
|
||||||
|
|
||||||
|
### Comparison Viewing Flow
|
||||||
|
|
||||||
|
```
|
||||||
|
1. User navigates to /compare/[slug]
|
||||||
|
2. Server component fetches comparison from DB by slug
|
||||||
|
3. If status === "researching": show streaming progress UI
|
||||||
|
4. If status === "completed": render full results with all viz components
|
||||||
|
5. If status === "failed": show error with retry option
|
||||||
|
6. Increment viewCount on each visit
|
||||||
|
```
|
||||||
|
|
||||||
|
## Deployment Architecture
|
||||||
|
|
||||||
|
### Docker Compose
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
services:
|
||||||
|
app: # Next.js standalone (~150-300MB RAM)
|
||||||
|
db: # PostgreSQL 16 Alpine (~200-400MB RAM)
|
||||||
|
```
|
||||||
|
|
||||||
|
Total estimated RAM: **400-800MB** — fits comfortably on an 8GB Raspberry Pi.
|
||||||
|
|
||||||
|
### Traefik Integration
|
||||||
|
|
||||||
|
The app is exposed via Traefik reverse proxy with:
|
||||||
|
- HTTPS termination
|
||||||
|
- Domain routing (e.g., `comparaison.tophermayor.com`)
|
||||||
|
- Automatic SSL certificate management
|
||||||
|
|
||||||
|
## Error Handling
|
||||||
|
|
||||||
|
| Layer | Strategy |
|
||||||
|
|---|---|
|
||||||
|
| LLM API failures | 3x retry with exponential backoff |
|
||||||
|
| Provider unavailable | Automatic fallback to next provider in chain |
|
||||||
|
| Invalid LLM output | Runtime validation + retry with new prompt |
|
||||||
|
| Database errors | Transaction rollback, error logged, user sees "failed" status |
|
||||||
|
| SSE connection lost | Client auto-reconnects, polls comparison status from DB |
|
||||||
|
| Auth failures | Redirect to sign-in with callback URL |
|
||||||
86
docs/development.md
Normal file
86
docs/development.md
Normal file
@@ -0,0 +1,86 @@
|
|||||||
|
# ComparAIson — Development Guide
|
||||||
|
|
||||||
|
## Getting Started
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# Clone
|
||||||
|
git clone https://gitea.tophermayor.com/TopherMayor/comparaison.git
|
||||||
|
cd comparaison
|
||||||
|
|
||||||
|
# Install
|
||||||
|
npm install
|
||||||
|
|
||||||
|
# Environment
|
||||||
|
cp .env.example .env.local
|
||||||
|
# Edit .env.local with your keys
|
||||||
|
|
||||||
|
# Database
|
||||||
|
docker compose up db -d # Start just PostgreSQL
|
||||||
|
npx drizzle-kit generate # Generate migrations
|
||||||
|
npx drizzle-kit migrate # Apply migrations
|
||||||
|
|
||||||
|
# Dev server
|
||||||
|
npm run dev
|
||||||
|
```
|
||||||
|
|
||||||
|
## Commands
|
||||||
|
|
||||||
|
| Command | Description |
|
||||||
|
|---|---|
|
||||||
|
| `npm run dev` | Start dev server (port 3000) |
|
||||||
|
| `npm run build` | Production build (standalone output) |
|
||||||
|
| `npm run start` | Start production server |
|
||||||
|
| `npm run lint` | ESLint check |
|
||||||
|
| `npx tsc --noEmit` | Type check without building |
|
||||||
|
| `npx drizzle-kit generate` | Generate DB migrations from schema |
|
||||||
|
| `npx drizzle-kit migrate` | Apply migrations to database |
|
||||||
|
| `npx drizzle-kit studio` | Open Drizzle Studio (DB browser) |
|
||||||
|
|
||||||
|
## Branch Strategy
|
||||||
|
|
||||||
|
| Branch | Purpose |
|
||||||
|
|---|---|
|
||||||
|
| `main` | Stable, deployable code |
|
||||||
|
| `feat/backend` | DB schema, auth, Docker, config changes |
|
||||||
|
| `feat/llm-engine` | LLM provider changes, research pipeline |
|
||||||
|
| `feat/frontend` | UI components, pages, layouts |
|
||||||
|
|
||||||
|
Worktrees are used for parallel development:
|
||||||
|
```bash
|
||||||
|
git worktree add ../comparaison-backend -b feat/backend main
|
||||||
|
```
|
||||||
|
|
||||||
|
## Database Schema Changes
|
||||||
|
|
||||||
|
1. Edit `src/lib/db/schema.ts`
|
||||||
|
2. Run `npx drizzle-kit generate` to create migration SQL
|
||||||
|
3. Run `npx drizzle-kit migrate` to apply
|
||||||
|
4. Commit both schema.ts and the generated SQL in `drizzle/`
|
||||||
|
|
||||||
|
## Adding a New LLM Provider
|
||||||
|
|
||||||
|
1. Create `src/lib/llm/providers/your-provider.ts`
|
||||||
|
2. Implement the provider function matching the `Provider` interface:
|
||||||
|
```typescript
|
||||||
|
export async function synthesize(
|
||||||
|
request: ComparisonRequest,
|
||||||
|
searchResults: Record<string, SearchResult[]>
|
||||||
|
): Promise<ComparisonResult>
|
||||||
|
```
|
||||||
|
3. Register in `src/lib/llm/providers/index.ts` — add to the fallback chain
|
||||||
|
4. Add API key to `.env.example` and document in README
|
||||||
|
|
||||||
|
## Adding a New Visualization
|
||||||
|
|
||||||
|
1. Create `src/components/comparison/your-chart.tsx`
|
||||||
|
2. Accept `ComparisonData` as props (or relevant subset)
|
||||||
|
3. Use Recharts for chart components
|
||||||
|
4. Import and add to the tab layout in `results-client.tsx`
|
||||||
|
|
||||||
|
## Key Conventions
|
||||||
|
|
||||||
|
- **Server Components** by default, `"use client"` only when needed (hooks, interactivity)
|
||||||
|
- **Drizzle ORM** for all database queries — no raw SQL
|
||||||
|
- **shadcn/ui** for UI components — no external component libraries
|
||||||
|
- **Tailwind** for styling — no CSS modules or styled-components
|
||||||
|
- **TypeScript strict mode** — no `any` types
|
||||||
163
docs/specs.md
Normal file
163
docs/specs.md
Normal file
@@ -0,0 +1,163 @@
|
|||||||
|
# ComparAIson — Product Specification
|
||||||
|
|
||||||
|
## 1. Product Overview
|
||||||
|
|
||||||
|
**ComparAIson** is a self-hosted web application that enables users to compare two or more items using AI-powered deep research. The system performs multi-source research, generates structured comparison data, and presents results through interactive visualizations. Completed comparisons are saved as posts on user profiles, creating a browsable library of research.
|
||||||
|
|
||||||
|
## 2. Problem Statement
|
||||||
|
|
||||||
|
Comparing products, technologies, or services requires gathering data from multiple sources, synthesizing findings, and presenting them clearly. This is time-consuming and often produces inconsistent results. ComparAIson automates this process with LLM-powered research that produces structured, visual, and comparable outputs.
|
||||||
|
|
||||||
|
## 3. Target Users
|
||||||
|
|
||||||
|
- **Developers** comparing frameworks, tools, cloud services
|
||||||
|
- **Consumers** comparing products before purchase
|
||||||
|
- **Researchers** comparing methodologies, papers, or approaches
|
||||||
|
- **Teams** evaluating options for technical decisions
|
||||||
|
|
||||||
|
## 4. Core Features
|
||||||
|
|
||||||
|
### 4.1 AI Research Engine
|
||||||
|
- Multi-item comparison (2-10 items)
|
||||||
|
- Multi-dimensional scoring (5-8 dimensions per comparison)
|
||||||
|
- Web search integration via Tavily API
|
||||||
|
- LLM synthesis via OpenAI GPT-4o-mini or Perplexity Sonar
|
||||||
|
- Automatic provider fallback chain
|
||||||
|
- Structured JSON output with validation
|
||||||
|
- Server-Sent Events for real-time progress
|
||||||
|
|
||||||
|
### 4.2 Interactive Visualizations
|
||||||
|
- **Radar/Spider Chart** — Multi-dimensional overlay showing all items
|
||||||
|
- **Grouped Bar Chart** — Side-by-side metric comparison
|
||||||
|
- **Comparison Table** — Feature matrix with color-coded cells
|
||||||
|
- **Score Cards** — Animated progress bars with overall + per-dimension scores
|
||||||
|
- **Pros/Cons Cards** — Expandable per-item breakdown
|
||||||
|
|
||||||
|
### 4.3 User System
|
||||||
|
- Email + password authentication (Better Auth)
|
||||||
|
- Session management (7-day expiry)
|
||||||
|
- Protected routes for compare/profile actions
|
||||||
|
- Public profile pages with comparison history
|
||||||
|
|
||||||
|
### 4.4 Social/Feed Features
|
||||||
|
- Public comparisons feed (Explore page)
|
||||||
|
- Per-comparison view count tracking
|
||||||
|
- Tag-based categorization and filtering
|
||||||
|
- Search across public comparisons
|
||||||
|
- Shareable URLs for each comparison
|
||||||
|
|
||||||
|
## 5. Technical Constraints
|
||||||
|
|
||||||
|
| Constraint | Value |
|
||||||
|
|---|---|
|
||||||
|
| Deployment target | Raspberry Pi ARM64, 8GB RAM |
|
||||||
|
| Concurrent users | Low (homelab, <20) |
|
||||||
|
| Total RAM budget | ~500MB-1GB (app + DB + reverse proxy) |
|
||||||
|
| Cost target | Minimal (free tier APIs where possible) |
|
||||||
|
| Network | Behind Traefik reverse proxy with HTTPS |
|
||||||
|
|
||||||
|
## 6. Data Model
|
||||||
|
|
||||||
|
### 6.1 Users (Better Auth managed)
|
||||||
|
```
|
||||||
|
users: id, name, email, emailVerified, image, createdAt, updatedAt
|
||||||
|
sessions: id, userId (FK), token, expiresAt, createdAt, updatedAt
|
||||||
|
```
|
||||||
|
|
||||||
|
### 6.2 Comparisons
|
||||||
|
```
|
||||||
|
comparisons: id, userId (FK), title, query, slug, status (researching|completed|failed),
|
||||||
|
summary, overallData (JSONB), tags[], isPublic, viewCount, createdAt, updatedAt
|
||||||
|
```
|
||||||
|
|
||||||
|
### 6.3 Comparison Items
|
||||||
|
```
|
||||||
|
comparison_items: id, comparisonId (FK), name, description, imageUrl,
|
||||||
|
researchData (JSONB), scores (JSONB), pros[], cons[], order
|
||||||
|
```
|
||||||
|
|
||||||
|
### 6.4 Comparison Dimensions
|
||||||
|
```
|
||||||
|
comparison_dimensions: id, comparisonId (FK), name, description, weight, order
|
||||||
|
```
|
||||||
|
|
||||||
|
### 6.5 JSONB Schemas
|
||||||
|
|
||||||
|
**overallData (on comparisons):**
|
||||||
|
```json
|
||||||
|
{
|
||||||
|
"title": "React vs Vue vs Svelte",
|
||||||
|
"query": "for modern web development",
|
||||||
|
"status": "completed",
|
||||||
|
"summary": "...",
|
||||||
|
"items": [
|
||||||
|
{
|
||||||
|
"name": "React",
|
||||||
|
"description": "...",
|
||||||
|
"overallScore": 8.5,
|
||||||
|
"dimensions": {
|
||||||
|
"Performance": { "score": 8, "summary": "...", "details": "...", "pros": [], "cons": [] }
|
||||||
|
},
|
||||||
|
"pros": ["..."],
|
||||||
|
"cons": ["..."]
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"dimensions": ["Performance", "Developer Experience", "Ecosystem", ...]
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
**researchData (on comparison_items):**
|
||||||
|
Full `ItemResearch` object including dimensions, sources, and scores.
|
||||||
|
|
||||||
|
## 7. LLM Research Pipeline
|
||||||
|
|
||||||
|
### 7.1 Flow
|
||||||
|
```
|
||||||
|
User submits query
|
||||||
|
→ Parse request (validate items ≥ 2)
|
||||||
|
→ Detect available providers (Tavily? Perplexity? OpenAI?)
|
||||||
|
→ If Tavily available: search each item individually
|
||||||
|
→ Synthesize via best available provider:
|
||||||
|
Priority 1: Tavily search + Perplexity synthesis
|
||||||
|
Priority 2: Tavily search + OpenAI synthesis
|
||||||
|
Priority 3: OpenAI only (no web search)
|
||||||
|
→ Validate structured JSON output
|
||||||
|
→ Persist to database
|
||||||
|
→ Stream results to client
|
||||||
|
```
|
||||||
|
|
||||||
|
### 7.2 Provider Details
|
||||||
|
|
||||||
|
| Provider | Role | Model | Cost |
|
||||||
|
|---|---|---|---|
|
||||||
|
| Tavily | Web search | Search API | ~$0.005/search |
|
||||||
|
| Perplexity | Synthesis | Sonar | ~$0.002/query |
|
||||||
|
| OpenAI | Synthesis | GPT-4o-mini | ~$0.15/1M tokens |
|
||||||
|
|
||||||
|
### 7.3 Progress Stages (SSE)
|
||||||
|
1. `parsing` — Validating query and extracting items
|
||||||
|
2. `searching` — Running web search for each item (Tavily only)
|
||||||
|
3. `researching` — Processing research per item
|
||||||
|
4. `synthesizing` — LLM generating structured comparison
|
||||||
|
5. `complete` — Final result with all data
|
||||||
|
6. `error` — Failure with error message
|
||||||
|
|
||||||
|
## 8. Security Considerations
|
||||||
|
|
||||||
|
- Auth middleware protects `/compare` and `/profile` routes
|
||||||
|
- Session tokens stored in HTTP-only cookies
|
||||||
|
- API keys never exposed to client (server-only LLM calls)
|
||||||
|
- Input validation on all API endpoints (min 2 items, max 10)
|
||||||
|
- SQL injection prevented via Drizzle ORM parameterized queries
|
||||||
|
- CSRF protection via Better Auth
|
||||||
|
- Rate limiting placeholder in compare API route
|
||||||
|
|
||||||
|
## 9. Future Considerations
|
||||||
|
|
||||||
|
- [ ] OAuth providers (Google, GitHub)
|
||||||
|
- [ ] Comparison comments/likes
|
||||||
|
- [ ] Export to PDF/image
|
||||||
|
- [ ] Embeddable comparison widgets
|
||||||
|
- [ ] Comparison templates
|
||||||
|
- [ ] Batch comparison queue for heavy loads
|
||||||
|
- [ ] Local Ollama fallback for offline operation
|
||||||
343
docs/ui-ux-flow.md
Normal file
343
docs/ui-ux-flow.md
Normal file
@@ -0,0 +1,343 @@
|
|||||||
|
# ComparAIson — UI/UX Flow
|
||||||
|
|
||||||
|
## User Journeys
|
||||||
|
|
||||||
|
### Journey 1: New User Discovers → Signs Up → First Comparison
|
||||||
|
|
||||||
|
```
|
||||||
|
Landing Page (/)
|
||||||
|
│
|
||||||
|
▼ "Start Comparing" CTA or /compare URL
|
||||||
|
Sign In Page (/sign-in)
|
||||||
|
│ ─── "Don't have an account? Sign up"
|
||||||
|
▼
|
||||||
|
Sign Up Page (/sign-up)
|
||||||
|
│ User enters: name, email, password
|
||||||
|
│ On success → redirect to /compare
|
||||||
|
▼
|
||||||
|
Compare Page (/compare)
|
||||||
|
│ User enters items (2-10) + query
|
||||||
|
│ Clicks "Start Research"
|
||||||
|
▼
|
||||||
|
Streaming Progress
|
||||||
|
│ Progress bar + current step label
|
||||||
|
│ Steps: "Analyzing..." → "Searching React..." → "Synthesizing..."
|
||||||
|
▼
|
||||||
|
Results Page (/compare/[slug])
|
||||||
|
│ Tab layout: Overview | Charts | Table | Details
|
||||||
|
│ User explores visualizations
|
||||||
|
│ Comparison auto-saved to profile
|
||||||
|
▼
|
||||||
|
Profile Page (/profile)
|
||||||
|
│ Sees their first comparison in the grid
|
||||||
|
└── Can click to view again
|
||||||
|
```
|
||||||
|
|
||||||
|
### Journey 2: Returning User Quick Compare
|
||||||
|
|
||||||
|
```
|
||||||
|
Home (/) → already logged in
|
||||||
|
│
|
||||||
|
▼ Click "Compare" in nav
|
||||||
|
Compare Page (/compare)
|
||||||
|
│ Enter items + query → "Start Research"
|
||||||
|
▼
|
||||||
|
Results Page (/compare/[slug])
|
||||||
|
│ Review results, share URL
|
||||||
|
└── Return to profile or start new compare
|
||||||
|
```
|
||||||
|
|
||||||
|
### Journey 3: Anonymous User Browses Public Comparisons
|
||||||
|
|
||||||
|
```
|
||||||
|
Landing Page (/)
|
||||||
|
│
|
||||||
|
▼ "Explore" in nav or example comparison card
|
||||||
|
Explore Page (/explore)
|
||||||
|
│ Grid of public comparisons
|
||||||
|
│ Filter by category tags
|
||||||
|
│ Search by keyword
|
||||||
|
▼ Click a comparison card
|
||||||
|
Results Page (/compare/[slug])
|
||||||
|
│ View full results (read-only)
|
||||||
|
│ "Start Your Own Comparison" CTA if not logged in
|
||||||
|
└── Sign up flow from Journey 1
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Page Descriptions
|
||||||
|
|
||||||
|
### 1. Landing Page (`/`)
|
||||||
|
**Purpose:** First impression, explain the product, drive sign-ups
|
||||||
|
|
||||||
|
**Layout:**
|
||||||
|
```
|
||||||
|
┌─────────────────────────────────────────────┐
|
||||||
|
│ Header: Logo "ComparAIson" | [Sign In] │
|
||||||
|
├─────────────────────────────────────────────┤
|
||||||
|
│ │
|
||||||
|
│ ✨ AI-Powered Research │
|
||||||
|
│ │
|
||||||
|
│ Compare Anything with │
|
||||||
|
│ AI-Powered Deep Research │
|
||||||
|
│ │
|
||||||
|
│ [🚀 Start Comparing] [Explore Examples] │
|
||||||
|
│ │
|
||||||
|
├─────────────────────────────────────────────┤
|
||||||
|
│ Example Comparisons (2x2 grid) │
|
||||||
|
│ ┌──────────────┐ ┌──────────────┐ │
|
||||||
|
│ │ React vs Vue │ │ GPT-4 vs │ │
|
||||||
|
│ │ vs Svelte │ │ Claude vs │ │
|
||||||
|
│ │ ⭐ 8.5 │ │ Gemini ⭐ 8.8│ │
|
||||||
|
│ └──────────────┘ └──────────────┘ │
|
||||||
|
│ ┌──────────────┐ ┌──────────────┐ │
|
||||||
|
│ │ Notion vs │ │ AWS vs GCP │ │
|
||||||
|
│ │ Obsidian │ │ vs Azure │ │
|
||||||
|
│ └──────────────┘ └──────────────┘ │
|
||||||
|
├─────────────────────────────────────────────┤
|
||||||
|
│ Features (3 columns) │
|
||||||
|
│ 📊 Rich Viz 🔍 Deep Research 🔗 Share │
|
||||||
|
├─────────────────────────────────────────────┤
|
||||||
|
│ Footer │
|
||||||
|
└─────────────────────────────────────────────┘
|
||||||
|
```
|
||||||
|
|
||||||
|
### 2. Sign In Page (`/sign-in`)
|
||||||
|
**Purpose:** Authenticate existing users
|
||||||
|
|
||||||
|
**Layout:**
|
||||||
|
```
|
||||||
|
Centered card, max-w-md:
|
||||||
|
┌─────────────────────────────┐
|
||||||
|
│ Sign In │
|
||||||
|
│ Welcome back │
|
||||||
|
│ │
|
||||||
|
│ Email [______________] │
|
||||||
|
│ Password [______________] │
|
||||||
|
│ │
|
||||||
|
│ [ Sign In ] │
|
||||||
|
│ │
|
||||||
|
│ Don't have an account? │
|
||||||
|
│ [Sign Up] │
|
||||||
|
└─────────────────────────────┘
|
||||||
|
```
|
||||||
|
|
||||||
|
- Error state: Red text below form on invalid credentials
|
||||||
|
- Loading state: Spinner on button, disabled inputs
|
||||||
|
- Success: Redirect to callbackUrl or /compare
|
||||||
|
|
||||||
|
### 3. Sign Up Page (`/sign-up`)
|
||||||
|
**Purpose:** Register new users
|
||||||
|
|
||||||
|
**Layout:** Same as sign in but with Name field added
|
||||||
|
```
|
||||||
|
Name [______________]
|
||||||
|
Email [______________]
|
||||||
|
Password [______________]
|
||||||
|
[ Create Account ]
|
||||||
|
Already have an account? [Sign In]
|
||||||
|
```
|
||||||
|
|
||||||
|
### 4. Compare Page (`/compare`)
|
||||||
|
**Purpose:** Main comparison creation interface
|
||||||
|
|
||||||
|
**Layout:**
|
||||||
|
```
|
||||||
|
Centered card, max-w-2xl:
|
||||||
|
┌─────────────────────────────────────────┐
|
||||||
|
│ ✨ Start a Comparison │
|
||||||
|
│ Enter items to compare and let AI │
|
||||||
|
│ do deep research for you. │
|
||||||
|
│ │
|
||||||
|
│ What would you like to compare? │
|
||||||
|
│ [________________________________] │
|
||||||
|
│ (textarea for natural language query) │
|
||||||
|
│ │
|
||||||
|
│ Items to compare (min 2, max 10) │
|
||||||
|
│ [React ×] [Vue ×] [Svelte ×] [+ Add] │
|
||||||
|
│ [________________________] [Add] │
|
||||||
|
│ │
|
||||||
|
│ Comparison dimensions (optional) │
|
||||||
|
│ [________________________________] │
|
||||||
|
│ (comma-separated hints) │
|
||||||
|
│ │
|
||||||
|
│ [🚀 Start Research] │
|
||||||
|
│ │
|
||||||
|
│ ┌─ Progress (shown during research) ──┐ │
|
||||||
|
│ │ [████████████░░░░░░░] 60% │ │
|
||||||
|
│ │ 🔍 Researching Svelte... │ │
|
||||||
|
│ └─────────────────────────────────────┘ │
|
||||||
|
└─────────────────────────────────────────┘
|
||||||
|
```
|
||||||
|
|
||||||
|
**Interactions:**
|
||||||
|
- Tag-style item input: type + Enter to add, X to remove
|
||||||
|
- Minimum 2 items required to start
|
||||||
|
- Progress bar appears after "Start Research" clicked
|
||||||
|
- Cancel button during research
|
||||||
|
- Auto-redirect to results on completion
|
||||||
|
|
||||||
|
### 5. Results Page (`/compare/[slug]`)
|
||||||
|
**Purpose:** Display completed comparison with visualizations
|
||||||
|
|
||||||
|
**Layout:**
|
||||||
|
```
|
||||||
|
┌─────────────────────────────────────────────────┐
|
||||||
|
│ ← Back React vs Vue vs Svelte [Share] │
|
||||||
|
│ Overall: React ⭐ 8.5 | Vue ⭐ 7.8 | Svelte ⭐ 8.2│
|
||||||
|
├─────────────────────────────────────────────────┤
|
||||||
|
│ [Overview] [Charts] [Table] [Details] │
|
||||||
|
├─────────────────────────────────────────────────┤
|
||||||
|
│ │
|
||||||
|
│ ┌── Overview Tab ─────────────────────────────┐ │
|
||||||
|
│ │ │ │
|
||||||
|
│ │ Summary text from AI │ │
|
||||||
|
│ │ "React excels in ecosystem size..." │ │
|
||||||
|
│ │ │ │
|
||||||
|
│ │ ┌─ Score Cards ────────────────────────┐ │ │
|
||||||
|
│ │ │ React: ⭐ 8.5 │ │ │
|
||||||
|
│ │ │ [█████████░] Performance: 8/10 │ │ │
|
||||||
|
│ │ │ [████████░░] DX: 9/10 │ │ │
|
||||||
|
│ │ │ ... │ │ │
|
||||||
|
│ │ └──────────────────────────────────────┘ │ │
|
||||||
|
│ │ │ │
|
||||||
|
│ │ 🏆 Recommendation: "For most projects..." │ │
|
||||||
|
│ └──────────────────────────────────────────────┘ │
|
||||||
|
│ │
|
||||||
|
│ ┌── Charts Tab ──────────────────────────────┐ │
|
||||||
|
│ │ │ │
|
||||||
|
│ │ Radar Chart Bar Chart │ │
|
||||||
|
│ │ ┌─────────────┐ ┌──────────────┐ │ │
|
||||||
|
│ │ │ ╱ React ╲ │ │ ▓ ▓ ▓ │ │ │
|
||||||
|
│ │ │ │ Vue │ │ │ ▓ ▓ ▓ │ │ │
|
||||||
|
│ │ │ ╲Svelte╱ │ │ ▓ ▓ ▓ │ │ │
|
||||||
|
│ │ └─────────────┘ └──────────────┘ │ │
|
||||||
|
│ │ │ │
|
||||||
|
│ └──────────────────────────────────────────────┘ │
|
||||||
|
│ │
|
||||||
|
│ ┌── Table Tab ───────────────────────────────┐ │
|
||||||
|
│ │ │ React │ Vue │ Svelte │ │ │
|
||||||
|
│ │ Performance│ 8 │ 7 │ 9 │ │ │
|
||||||
|
│ │ DX │ 9 │ 8 │ 8 │ │ │
|
||||||
|
│ │ Ecosystem │ 10 │ 7 │ 6 │ │ │
|
||||||
|
│ │ Price │ 9 │ 9 │ 10 │ │ │
|
||||||
|
│ └──────────────────────────────────────────────┘ │
|
||||||
|
│ │
|
||||||
|
│ ┌── Details Tab ─────────────────────────────┐ │
|
||||||
|
│ │ Per-item expandable deep dives │ │
|
||||||
|
│ │ ▶ React - Performance (8/10) │ │
|
||||||
|
│ │ Pros: Virtual DOM, concurrent mode... │ │
|
||||||
|
│ │ Cons: Bundle size can grow... │ │
|
||||||
|
│ │ ▶ Vue - Performance (7/10) │ │
|
||||||
|
│ │ ... │ │
|
||||||
|
│ └──────────────────────────────────────────────┘ │
|
||||||
|
└─────────────────────────────────────────────────────┘
|
||||||
|
```
|
||||||
|
|
||||||
|
**Interactions:**
|
||||||
|
- Tab switching between Overview/Charts/Table/Details
|
||||||
|
- Hover tooltips on all charts
|
||||||
|
- Click legend items to toggle visibility on radar/bar charts
|
||||||
|
- Expandable rows in table for detailed breakdowns
|
||||||
|
- Share button copies URL to clipboard
|
||||||
|
- Trophy icon highlights the winner
|
||||||
|
|
||||||
|
### 6. Profile Page (`/profile`)
|
||||||
|
**Purpose:** User's personal comparison library
|
||||||
|
|
||||||
|
**Layout:**
|
||||||
|
```
|
||||||
|
┌─────────────────────────────────────────────┐
|
||||||
|
│ [Avatar] Alex Johnson │
|
||||||
|
│ alex@example.com │
|
||||||
|
│ │
|
||||||
|
│ ┌─ Stats ─────────┐ ┌─ Stats ──────────┐ │
|
||||||
|
│ │ 12 │ │ 8.2K │ │
|
||||||
|
│ │ Total Comparisons│ │ Total Views │ │
|
||||||
|
│ └──────────────────┘ └───────────────────┘ │
|
||||||
|
│ │
|
||||||
|
│ My Comparisons │
|
||||||
|
│ ┌──────────────┐ ┌──────────────┐ │
|
||||||
|
│ │ React vs Vue │ │ GPT-4 vs │ │
|
||||||
|
│ │ vs Svelte │ │ Claude │ │
|
||||||
|
│ │ ⭐ 8.5 | 👁 1.2K│ │ ⭐ 8.8 | 👁 3.9K│ │
|
||||||
|
│ │ Jan 15, 2024 │ │ Jan 10, 2024 │ │
|
||||||
|
│ └──────────────┘ └──────────────┘ │
|
||||||
|
│ │
|
||||||
|
│ [+ New Comparison] │
|
||||||
|
└─────────────────────────────────────────────┘
|
||||||
|
```
|
||||||
|
|
||||||
|
### 7. Explore Page (`/explore`)
|
||||||
|
**Purpose:** Browse public comparisons from all users
|
||||||
|
|
||||||
|
**Layout:**
|
||||||
|
```
|
||||||
|
┌─────────────────────────────────────────────────┐
|
||||||
|
│ Explore Comparisons │
|
||||||
|
│ [🔍 Search comparisons...] │
|
||||||
|
│ │
|
||||||
|
│ [All] [Tech] [Products] [AI] [Cloud] [Prod.] │
|
||||||
|
│ │
|
||||||
|
│ ┌─────────┐ ┌─────────┐ ┌─────────┐ │
|
||||||
|
│ │React vs │ │GPT-4 vs │ │iPhone vs│ │
|
||||||
|
│ │Vue vs │ │Claude vs │ │Samsung │ │
|
||||||
|
│ │Svelte │ │Gemini │ │S24 Ultra│ │
|
||||||
|
│ │⭐8.5 👁1.2K│ │⭐8.8 👁3.9K│ │⭐8.2 👁3.4K│ │
|
||||||
|
│ │by Alex │ │by Sarah │ │by James │ │
|
||||||
|
│ └─────────┘ └─────────┘ └─────────┘ │
|
||||||
|
│ ┌─────────┐ ┌─────────┐ ┌─────────┐ │
|
||||||
|
│ │AWS vs │ │Python vs│ │Notion vs│ │
|
||||||
|
│ │GCP vs │ │Rust vs │ │Obsidian │ │
|
||||||
|
│ │Azure │ │Go │ │vs Roam │ │
|
||||||
|
│ │⭐9.0 👁2.2K│ │⭐8.4 👁1.9K│ │⭐7.5 👁892 │ │
|
||||||
|
│ │by Emma │ │by Anna │ │by Mike │ │
|
||||||
|
│ └─────────┘ └─────────┘ └─────────┘ │
|
||||||
|
│ │
|
||||||
|
│ [Load More] │
|
||||||
|
└─────────────────────────────────────────────────┘
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Responsive Design
|
||||||
|
|
||||||
|
### Desktop (≥768px)
|
||||||
|
- Sidebar navigation on the left
|
||||||
|
- Full-width comparison tables
|
||||||
|
- Side-by-side charts on Charts tab
|
||||||
|
- 3-column grid on Explore page
|
||||||
|
|
||||||
|
### Mobile (<768px)
|
||||||
|
- Bottom navigation bar (fixed)
|
||||||
|
- Stacked charts (full width each)
|
||||||
|
- Single column cards on Explore
|
||||||
|
- Collapsible navigation menu
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Loading & Error States
|
||||||
|
|
||||||
|
### Research Progress
|
||||||
|
```
|
||||||
|
┌─ Research in Progress ──────────────┐
|
||||||
|
│ [████████████░░░░░░░░░] 60% │
|
||||||
|
│ 🔍 Researching Svelte... │
|
||||||
|
│ │
|
||||||
|
│ Items: React ✓ Vue ✓ Svelte ⟳ │
|
||||||
|
│ │
|
||||||
|
│ [Cancel] │
|
||||||
|
└──────────────────────────────────────┘
|
||||||
|
```
|
||||||
|
|
||||||
|
### Skeleton Loaders
|
||||||
|
- Used on results page while data loads
|
||||||
|
- Shimmer effect on card placeholders
|
||||||
|
- Chart skeleton rectangles
|
||||||
|
|
||||||
|
### Error States
|
||||||
|
- **API error:** Red banner with error message + "Try Again" button
|
||||||
|
- **Auth required:** Redirect to sign-in with callback
|
||||||
|
- **Not found:** 404 page with "Browse comparisons" link
|
||||||
|
- **Network error:** Toast notification + retry prompt
|
||||||
59
drizzle/0000_gorgeous_puma.sql
Normal file
59
drizzle/0000_gorgeous_puma.sql
Normal file
@@ -0,0 +1,59 @@
|
|||||||
|
CREATE TYPE "public"."comparison_status" AS ENUM('researching', 'completed', 'failed');--> statement-breakpoint
|
||||||
|
CREATE TABLE "comparison_dimensions" (
|
||||||
|
"id" text PRIMARY KEY NOT NULL,
|
||||||
|
"comparison_id" text NOT NULL,
|
||||||
|
"name" text NOT NULL,
|
||||||
|
"description" text,
|
||||||
|
"weight" integer DEFAULT 1 NOT NULL,
|
||||||
|
"order" integer DEFAULT 0 NOT NULL
|
||||||
|
);
|
||||||
|
--> statement-breakpoint
|
||||||
|
CREATE TABLE "comparison_items" (
|
||||||
|
"id" text PRIMARY KEY NOT NULL,
|
||||||
|
"comparison_id" text NOT NULL,
|
||||||
|
"name" text NOT NULL,
|
||||||
|
"description" text,
|
||||||
|
"image_url" text,
|
||||||
|
"research_data" jsonb,
|
||||||
|
"scores" jsonb,
|
||||||
|
"pros" text[],
|
||||||
|
"cons" text[],
|
||||||
|
"order" integer DEFAULT 0 NOT NULL
|
||||||
|
);
|
||||||
|
--> statement-breakpoint
|
||||||
|
CREATE TABLE "comparisons" (
|
||||||
|
"id" text PRIMARY KEY NOT NULL,
|
||||||
|
"user_id" text NOT NULL,
|
||||||
|
"title" text NOT NULL,
|
||||||
|
"query" text NOT NULL,
|
||||||
|
"slug" text NOT NULL,
|
||||||
|
"status" "comparison_status" DEFAULT 'researching' NOT NULL,
|
||||||
|
"summary" text,
|
||||||
|
"overall_data" jsonb,
|
||||||
|
"tags" text[],
|
||||||
|
"is_public" boolean DEFAULT true NOT NULL,
|
||||||
|
"view_count" integer DEFAULT 0 NOT NULL,
|
||||||
|
"created_at" timestamp with time zone DEFAULT now() NOT NULL,
|
||||||
|
"updated_at" timestamp with time zone DEFAULT now() NOT NULL,
|
||||||
|
CONSTRAINT "comparisons_slug_unique" UNIQUE("slug")
|
||||||
|
);
|
||||||
|
--> statement-breakpoint
|
||||||
|
CREATE TABLE "users" (
|
||||||
|
"id" text PRIMARY KEY NOT NULL,
|
||||||
|
"name" text,
|
||||||
|
"email" text NOT NULL,
|
||||||
|
"email_verified" timestamp with time zone,
|
||||||
|
"image" text,
|
||||||
|
"created_at" timestamp with time zone DEFAULT now() NOT NULL,
|
||||||
|
"updated_at" timestamp with time zone DEFAULT now() NOT NULL,
|
||||||
|
CONSTRAINT "users_email_unique" UNIQUE("email")
|
||||||
|
);
|
||||||
|
--> statement-breakpoint
|
||||||
|
ALTER TABLE "comparison_dimensions" ADD CONSTRAINT "comparison_dimensions_comparison_id_comparisons_id_fk" FOREIGN KEY ("comparison_id") REFERENCES "public"."comparisons"("id") ON DELETE cascade ON UPDATE no action;--> statement-breakpoint
|
||||||
|
ALTER TABLE "comparison_items" ADD CONSTRAINT "comparison_items_comparison_id_comparisons_id_fk" FOREIGN KEY ("comparison_id") REFERENCES "public"."comparisons"("id") ON DELETE cascade ON UPDATE no action;--> statement-breakpoint
|
||||||
|
ALTER TABLE "comparisons" ADD CONSTRAINT "comparisons_user_id_users_id_fk" FOREIGN KEY ("user_id") REFERENCES "public"."users"("id") ON DELETE no action ON UPDATE no action;--> statement-breakpoint
|
||||||
|
CREATE INDEX "comparison_dimensions_comparison_id_idx" ON "comparison_dimensions" USING btree ("comparison_id");--> statement-breakpoint
|
||||||
|
CREATE INDEX "comparison_items_comparison_id_idx" ON "comparison_items" USING btree ("comparison_id");--> statement-breakpoint
|
||||||
|
CREATE INDEX "comparisons_user_id_idx" ON "comparisons" USING btree ("user_id");--> statement-breakpoint
|
||||||
|
CREATE INDEX "comparisons_slug_idx" ON "comparisons" USING btree ("slug");--> statement-breakpoint
|
||||||
|
CREATE INDEX "comparisons_status_idx" ON "comparisons" USING btree ("status");
|
||||||
@@ -1,42 +0,0 @@
|
|||||||
CREATE TABLE "comparison_dimensions" (
|
|
||||||
"id" text PRIMARY KEY NOT NULL,
|
|
||||||
"comparison_id" text NOT NULL,
|
|
||||||
"name" text NOT NULL,
|
|
||||||
"description" text,
|
|
||||||
"weight" integer DEFAULT 1,
|
|
||||||
"order" integer NOT NULL
|
|
||||||
);
|
|
||||||
--> statement-breakpoint
|
|
||||||
CREATE TABLE "comparison_items" (
|
|
||||||
"id" text PRIMARY KEY NOT NULL,
|
|
||||||
"comparison_id" text NOT NULL,
|
|
||||||
"name" text NOT NULL,
|
|
||||||
"description" text,
|
|
||||||
"image_url" text,
|
|
||||||
"research_data" jsonb,
|
|
||||||
"scores" jsonb,
|
|
||||||
"pros" text[],
|
|
||||||
"cons" text[],
|
|
||||||
"order" integer NOT NULL
|
|
||||||
);
|
|
||||||
--> statement-breakpoint
|
|
||||||
CREATE TABLE "comparisons" (
|
|
||||||
"id" text PRIMARY KEY NOT NULL,
|
|
||||||
"user_id" text,
|
|
||||||
"title" text NOT NULL,
|
|
||||||
"query" text,
|
|
||||||
"slug" varchar(255) NOT NULL,
|
|
||||||
"status" text DEFAULT 'researching' NOT NULL,
|
|
||||||
"summary" text,
|
|
||||||
"overall_data" jsonb,
|
|
||||||
"tags" text[],
|
|
||||||
"is_public" boolean DEFAULT false,
|
|
||||||
"view_count" integer DEFAULT 0,
|
|
||||||
"created_at" timestamp DEFAULT now() NOT NULL,
|
|
||||||
"updated_at" timestamp DEFAULT now() NOT NULL,
|
|
||||||
CONSTRAINT "comparisons_slug_unique" UNIQUE("slug")
|
|
||||||
);
|
|
||||||
--> statement-breakpoint
|
|
||||||
ALTER TABLE "comparison_dimensions" ADD CONSTRAINT "comparison_dimensions_comparison_id_comparisons_id_fk" FOREIGN KEY ("comparison_id") REFERENCES "public"."comparisons"("id") ON DELETE cascade ON UPDATE no action;--> statement-breakpoint
|
|
||||||
ALTER TABLE "comparison_items" ADD CONSTRAINT "comparison_items_comparison_id_comparisons_id_fk" FOREIGN KEY ("comparison_id") REFERENCES "public"."comparisons"("id") ON DELETE cascade ON UPDATE no action;--> statement-breakpoint
|
|
||||||
CREATE INDEX "comparisons_user_id_idx" ON "comparisons" USING btree ("user_id");
|
|
||||||
@@ -1,5 +1,5 @@
|
|||||||
{
|
{
|
||||||
"id": "6cc67b11-8016-409b-9de9-8966593c97b0",
|
"id": "c719fbf4-6ed1-4b38-9a09-33a7e0799267",
|
||||||
"prevId": "00000000-0000-0000-0000-000000000000",
|
"prevId": "00000000-0000-0000-0000-000000000000",
|
||||||
"version": "7",
|
"version": "7",
|
||||||
"dialect": "postgresql",
|
"dialect": "postgresql",
|
||||||
@@ -36,17 +36,34 @@
|
|||||||
"name": "weight",
|
"name": "weight",
|
||||||
"type": "integer",
|
"type": "integer",
|
||||||
"primaryKey": false,
|
"primaryKey": false,
|
||||||
"notNull": false,
|
"notNull": true,
|
||||||
"default": 1
|
"default": 1
|
||||||
},
|
},
|
||||||
"order": {
|
"order": {
|
||||||
"name": "order",
|
"name": "order",
|
||||||
"type": "integer",
|
"type": "integer",
|
||||||
"primaryKey": false,
|
"primaryKey": false,
|
||||||
"notNull": true
|
"notNull": true,
|
||||||
|
"default": 0
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"indexes": {
|
||||||
|
"comparison_dimensions_comparison_id_idx": {
|
||||||
|
"name": "comparison_dimensions_comparison_id_idx",
|
||||||
|
"columns": [
|
||||||
|
{
|
||||||
|
"expression": "comparison_id",
|
||||||
|
"isExpression": false,
|
||||||
|
"asc": true,
|
||||||
|
"nulls": "last"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"isUnique": false,
|
||||||
|
"concurrently": false,
|
||||||
|
"method": "btree",
|
||||||
|
"with": {}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"indexes": {},
|
|
||||||
"foreignKeys": {
|
"foreignKeys": {
|
||||||
"comparison_dimensions_comparison_id_comparisons_id_fk": {
|
"comparison_dimensions_comparison_id_comparisons_id_fk": {
|
||||||
"name": "comparison_dimensions_comparison_id_comparisons_id_fk",
|
"name": "comparison_dimensions_comparison_id_comparisons_id_fk",
|
||||||
@@ -130,10 +147,27 @@
|
|||||||
"name": "order",
|
"name": "order",
|
||||||
"type": "integer",
|
"type": "integer",
|
||||||
"primaryKey": false,
|
"primaryKey": false,
|
||||||
"notNull": true
|
"notNull": true,
|
||||||
|
"default": 0
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"indexes": {
|
||||||
|
"comparison_items_comparison_id_idx": {
|
||||||
|
"name": "comparison_items_comparison_id_idx",
|
||||||
|
"columns": [
|
||||||
|
{
|
||||||
|
"expression": "comparison_id",
|
||||||
|
"isExpression": false,
|
||||||
|
"asc": true,
|
||||||
|
"nulls": "last"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"isUnique": false,
|
||||||
|
"concurrently": false,
|
||||||
|
"method": "btree",
|
||||||
|
"with": {}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"indexes": {},
|
|
||||||
"foreignKeys": {
|
"foreignKeys": {
|
||||||
"comparison_items_comparison_id_comparisons_id_fk": {
|
"comparison_items_comparison_id_comparisons_id_fk": {
|
||||||
"name": "comparison_items_comparison_id_comparisons_id_fk",
|
"name": "comparison_items_comparison_id_comparisons_id_fk",
|
||||||
@@ -169,7 +203,7 @@
|
|||||||
"name": "user_id",
|
"name": "user_id",
|
||||||
"type": "text",
|
"type": "text",
|
||||||
"primaryKey": false,
|
"primaryKey": false,
|
||||||
"notNull": false
|
"notNull": true
|
||||||
},
|
},
|
||||||
"title": {
|
"title": {
|
||||||
"name": "title",
|
"name": "title",
|
||||||
@@ -181,17 +215,18 @@
|
|||||||
"name": "query",
|
"name": "query",
|
||||||
"type": "text",
|
"type": "text",
|
||||||
"primaryKey": false,
|
"primaryKey": false,
|
||||||
"notNull": false
|
"notNull": true
|
||||||
},
|
},
|
||||||
"slug": {
|
"slug": {
|
||||||
"name": "slug",
|
"name": "slug",
|
||||||
"type": "varchar(255)",
|
"type": "text",
|
||||||
"primaryKey": false,
|
"primaryKey": false,
|
||||||
"notNull": true
|
"notNull": true
|
||||||
},
|
},
|
||||||
"status": {
|
"status": {
|
||||||
"name": "status",
|
"name": "status",
|
||||||
"type": "text",
|
"type": "comparison_status",
|
||||||
|
"typeSchema": "public",
|
||||||
"primaryKey": false,
|
"primaryKey": false,
|
||||||
"notNull": true,
|
"notNull": true,
|
||||||
"default": "'researching'"
|
"default": "'researching'"
|
||||||
@@ -218,26 +253,26 @@
|
|||||||
"name": "is_public",
|
"name": "is_public",
|
||||||
"type": "boolean",
|
"type": "boolean",
|
||||||
"primaryKey": false,
|
"primaryKey": false,
|
||||||
"notNull": false,
|
"notNull": true,
|
||||||
"default": false
|
"default": true
|
||||||
},
|
},
|
||||||
"view_count": {
|
"view_count": {
|
||||||
"name": "view_count",
|
"name": "view_count",
|
||||||
"type": "integer",
|
"type": "integer",
|
||||||
"primaryKey": false,
|
"primaryKey": false,
|
||||||
"notNull": false,
|
"notNull": true,
|
||||||
"default": 0
|
"default": 0
|
||||||
},
|
},
|
||||||
"created_at": {
|
"created_at": {
|
||||||
"name": "created_at",
|
"name": "created_at",
|
||||||
"type": "timestamp",
|
"type": "timestamp with time zone",
|
||||||
"primaryKey": false,
|
"primaryKey": false,
|
||||||
"notNull": true,
|
"notNull": true,
|
||||||
"default": "now()"
|
"default": "now()"
|
||||||
},
|
},
|
||||||
"updated_at": {
|
"updated_at": {
|
||||||
"name": "updated_at",
|
"name": "updated_at",
|
||||||
"type": "timestamp",
|
"type": "timestamp with time zone",
|
||||||
"primaryKey": false,
|
"primaryKey": false,
|
||||||
"notNull": true,
|
"notNull": true,
|
||||||
"default": "now()"
|
"default": "now()"
|
||||||
@@ -258,9 +293,53 @@
|
|||||||
"concurrently": false,
|
"concurrently": false,
|
||||||
"method": "btree",
|
"method": "btree",
|
||||||
"with": {}
|
"with": {}
|
||||||
|
},
|
||||||
|
"comparisons_slug_idx": {
|
||||||
|
"name": "comparisons_slug_idx",
|
||||||
|
"columns": [
|
||||||
|
{
|
||||||
|
"expression": "slug",
|
||||||
|
"isExpression": false,
|
||||||
|
"asc": true,
|
||||||
|
"nulls": "last"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"isUnique": false,
|
||||||
|
"concurrently": false,
|
||||||
|
"method": "btree",
|
||||||
|
"with": {}
|
||||||
|
},
|
||||||
|
"comparisons_status_idx": {
|
||||||
|
"name": "comparisons_status_idx",
|
||||||
|
"columns": [
|
||||||
|
{
|
||||||
|
"expression": "status",
|
||||||
|
"isExpression": false,
|
||||||
|
"asc": true,
|
||||||
|
"nulls": "last"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"isUnique": false,
|
||||||
|
"concurrently": false,
|
||||||
|
"method": "btree",
|
||||||
|
"with": {}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"foreignKeys": {
|
||||||
|
"comparisons_user_id_users_id_fk": {
|
||||||
|
"name": "comparisons_user_id_users_id_fk",
|
||||||
|
"tableFrom": "comparisons",
|
||||||
|
"tableTo": "users",
|
||||||
|
"columnsFrom": [
|
||||||
|
"user_id"
|
||||||
|
],
|
||||||
|
"columnsTo": [
|
||||||
|
"id"
|
||||||
|
],
|
||||||
|
"onDelete": "no action",
|
||||||
|
"onUpdate": "no action"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"foreignKeys": {},
|
|
||||||
"compositePrimaryKeys": {},
|
"compositePrimaryKeys": {},
|
||||||
"uniqueConstraints": {
|
"uniqueConstraints": {
|
||||||
"comparisons_slug_unique": {
|
"comparisons_slug_unique": {
|
||||||
@@ -274,9 +353,84 @@
|
|||||||
"policies": {},
|
"policies": {},
|
||||||
"checkConstraints": {},
|
"checkConstraints": {},
|
||||||
"isRLSEnabled": false
|
"isRLSEnabled": false
|
||||||
|
},
|
||||||
|
"public.users": {
|
||||||
|
"name": "users",
|
||||||
|
"schema": "",
|
||||||
|
"columns": {
|
||||||
|
"id": {
|
||||||
|
"name": "id",
|
||||||
|
"type": "text",
|
||||||
|
"primaryKey": true,
|
||||||
|
"notNull": true
|
||||||
|
},
|
||||||
|
"name": {
|
||||||
|
"name": "name",
|
||||||
|
"type": "text",
|
||||||
|
"primaryKey": false,
|
||||||
|
"notNull": false
|
||||||
|
},
|
||||||
|
"email": {
|
||||||
|
"name": "email",
|
||||||
|
"type": "text",
|
||||||
|
"primaryKey": false,
|
||||||
|
"notNull": true
|
||||||
|
},
|
||||||
|
"email_verified": {
|
||||||
|
"name": "email_verified",
|
||||||
|
"type": "timestamp with time zone",
|
||||||
|
"primaryKey": false,
|
||||||
|
"notNull": false
|
||||||
|
},
|
||||||
|
"image": {
|
||||||
|
"name": "image",
|
||||||
|
"type": "text",
|
||||||
|
"primaryKey": false,
|
||||||
|
"notNull": false
|
||||||
|
},
|
||||||
|
"created_at": {
|
||||||
|
"name": "created_at",
|
||||||
|
"type": "timestamp with time zone",
|
||||||
|
"primaryKey": false,
|
||||||
|
"notNull": true,
|
||||||
|
"default": "now()"
|
||||||
|
},
|
||||||
|
"updated_at": {
|
||||||
|
"name": "updated_at",
|
||||||
|
"type": "timestamp with time zone",
|
||||||
|
"primaryKey": false,
|
||||||
|
"notNull": true,
|
||||||
|
"default": "now()"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"indexes": {},
|
||||||
|
"foreignKeys": {},
|
||||||
|
"compositePrimaryKeys": {},
|
||||||
|
"uniqueConstraints": {
|
||||||
|
"users_email_unique": {
|
||||||
|
"name": "users_email_unique",
|
||||||
|
"nullsNotDistinct": false,
|
||||||
|
"columns": [
|
||||||
|
"email"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"policies": {},
|
||||||
|
"checkConstraints": {},
|
||||||
|
"isRLSEnabled": false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"enums": {
|
||||||
|
"public.comparison_status": {
|
||||||
|
"name": "comparison_status",
|
||||||
|
"schema": "public",
|
||||||
|
"values": [
|
||||||
|
"researching",
|
||||||
|
"completed",
|
||||||
|
"failed"
|
||||||
|
]
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"enums": {},
|
|
||||||
"schemas": {},
|
"schemas": {},
|
||||||
"sequences": {},
|
"sequences": {},
|
||||||
"roles": {},
|
"roles": {},
|
||||||
|
|||||||
@@ -5,8 +5,8 @@
|
|||||||
{
|
{
|
||||||
"idx": 0,
|
"idx": 0,
|
||||||
"version": "7",
|
"version": "7",
|
||||||
"when": 1777066133958,
|
"when": 1777066297133,
|
||||||
"tag": "0000_opposite_doomsday",
|
"tag": "0000_gorgeous_puma",
|
||||||
"breakpoints": true
|
"breakpoints": true
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
import type { NextConfig } from "next";
|
import type { NextConfig } from "next";
|
||||||
|
|
||||||
const nextConfig: NextConfig = {
|
const nextConfig: NextConfig = {
|
||||||
/* config options here */
|
output: "standalone",
|
||||||
};
|
};
|
||||||
|
|
||||||
export default nextConfig;
|
export default nextConfig;
|
||||||
|
|||||||
@@ -18,6 +18,10 @@ function slugify(text: string): string {
|
|||||||
.slice(0, 200);
|
.slice(0, 200);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// TODO: Implement rate limiting per IP/user
|
||||||
|
// Example: Use Upstash Ratelimit or a simple in-memory counter
|
||||||
|
// const ratelimit = new Ratelimit({ redis, limiter: slidingWindow(5, "1m") })
|
||||||
|
|
||||||
export async function POST(request: Request) {
|
export async function POST(request: Request) {
|
||||||
const body: { query?: string; items?: string[]; dimensions?: string[] } =
|
const body: { query?: string; items?: string[]; dimensions?: string[] } =
|
||||||
await request.json();
|
await request.json();
|
||||||
@@ -25,7 +29,21 @@ export async function POST(request: Request) {
|
|||||||
|
|
||||||
if (!items || items.length < 2) {
|
if (!items || items.length < 2) {
|
||||||
return Response.json(
|
return Response.json(
|
||||||
{ error: "At least 2 items are required" },
|
{ error: "At least 2 items are required for comparison" },
|
||||||
|
{ status: 400 }
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (items.length > 10) {
|
||||||
|
return Response.json(
|
||||||
|
{ error: "Maximum 10 items allowed per comparison" },
|
||||||
|
{ status: 400 }
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (items.some((item) => item.trim().length === 0)) {
|
||||||
|
return Response.json(
|
||||||
|
{ error: "Item names cannot be empty" },
|
||||||
{ status: 400 }
|
{ status: 400 }
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
@@ -70,6 +88,20 @@ export async function POST(request: Request) {
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
if (progress.stage === "searching") {
|
||||||
|
controller.enqueue(
|
||||||
|
encoder.encode(
|
||||||
|
serializeSSE("progress", {
|
||||||
|
status: "researching",
|
||||||
|
message: `Searching the web for ${progress.item}... (${progress.results} results found)`,
|
||||||
|
itemsCompleted,
|
||||||
|
totalItems: items.length,
|
||||||
|
currentStep: `Searching ${progress.item}`,
|
||||||
|
})
|
||||||
|
)
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
if (progress.stage === "researching") {
|
if (progress.stage === "researching") {
|
||||||
itemsCompleted++;
|
itemsCompleted++;
|
||||||
controller.enqueue(
|
controller.enqueue(
|
||||||
@@ -102,7 +134,17 @@ export async function POST(request: Request) {
|
|||||||
if (progress.stage === "complete") {
|
if (progress.stage === "complete") {
|
||||||
const result = progress.result;
|
const result = progress.result;
|
||||||
|
|
||||||
const comparisonData: Omit<ComparisonData, "id" | "userId" | "slug" | "tags" | "isPublic" | "viewCount" | "createdAt" | "updatedAt"> = {
|
const comparisonData: Omit<
|
||||||
|
ComparisonData,
|
||||||
|
| "id"
|
||||||
|
| "userId"
|
||||||
|
| "slug"
|
||||||
|
| "tags"
|
||||||
|
| "isPublic"
|
||||||
|
| "viewCount"
|
||||||
|
| "createdAt"
|
||||||
|
| "updatedAt"
|
||||||
|
> = {
|
||||||
title,
|
title,
|
||||||
query: query || "",
|
query: query || "",
|
||||||
status: "completed",
|
status: "completed",
|
||||||
@@ -177,7 +219,7 @@ export async function POST(request: Request) {
|
|||||||
encoder.encode(
|
encoder.encode(
|
||||||
serializeSSE("progress", {
|
serializeSSE("progress", {
|
||||||
status: "failed",
|
status: "failed",
|
||||||
message: progress.error,
|
message: `Comparison failed: ${progress.error}`,
|
||||||
itemsCompleted,
|
itemsCompleted,
|
||||||
totalItems: items.length,
|
totalItems: items.length,
|
||||||
currentStep: "Failed",
|
currentStep: "Failed",
|
||||||
@@ -192,11 +234,16 @@ export async function POST(request: Request) {
|
|||||||
.set({ status: "failed", updatedAt: new Date() })
|
.set({ status: "failed", updatedAt: new Date() })
|
||||||
.where(eq(comparisons.id, id));
|
.where(eq(comparisons.id, id));
|
||||||
|
|
||||||
|
const message =
|
||||||
|
error instanceof Error
|
||||||
|
? error.message
|
||||||
|
: "An unexpected error occurred during research";
|
||||||
|
|
||||||
controller.enqueue(
|
controller.enqueue(
|
||||||
encoder.encode(
|
encoder.encode(
|
||||||
serializeSSE("progress", {
|
serializeSSE("progress", {
|
||||||
status: "failed",
|
status: "failed",
|
||||||
message: error instanceof Error ? error.message : "Unknown error",
|
message: `Comparison failed: ${message}`,
|
||||||
itemsCompleted,
|
itemsCompleted,
|
||||||
totalItems: items.length,
|
totalItems: items.length,
|
||||||
currentStep: "Failed",
|
currentStep: "Failed",
|
||||||
|
|||||||
@@ -1,8 +1,10 @@
|
|||||||
import { betterAuth } from "better-auth";
|
import { betterAuth } from "better-auth";
|
||||||
import { drizzleAdapter } from "better-auth/adapters/drizzle";
|
import { drizzleAdapter } from "better-auth/adapters/drizzle";
|
||||||
import { db } from "./db";
|
import { db } from "./db";
|
||||||
|
import * as schema from "./db/schema";
|
||||||
|
|
||||||
export const auth = betterAuth({
|
export const auth = betterAuth({
|
||||||
database: drizzleAdapter(db, { provider: "pg" }),
|
database: drizzleAdapter(db, { provider: "pg", schema }),
|
||||||
emailAndPassword: { enabled: true },
|
emailAndPassword: { enabled: true },
|
||||||
|
session: { expiresIn: 60 * 60 * 24 * 7 },
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -1,40 +1,86 @@
|
|||||||
import {
|
import {
|
||||||
|
boolean,
|
||||||
|
index,
|
||||||
|
integer,
|
||||||
|
jsonb,
|
||||||
|
pgEnum,
|
||||||
pgTable,
|
pgTable,
|
||||||
text,
|
text,
|
||||||
timestamp,
|
timestamp,
|
||||||
jsonb,
|
|
||||||
integer,
|
|
||||||
boolean,
|
|
||||||
varchar,
|
|
||||||
index,
|
|
||||||
} from "drizzle-orm/pg-core";
|
} from "drizzle-orm/pg-core";
|
||||||
|
import { createId } from "@paralleldrive/cuid2";
|
||||||
|
|
||||||
|
export const users = pgTable("users", {
|
||||||
|
id: text("id").primaryKey(),
|
||||||
|
name: text("name"),
|
||||||
|
email: text("email").notNull().unique(),
|
||||||
|
emailVerified: timestamp("email_verified", { withTimezone: true }),
|
||||||
|
image: text("image"),
|
||||||
|
createdAt: timestamp("created_at", { withTimezone: true }).notNull().defaultNow(),
|
||||||
|
updatedAt: timestamp("updated_at", { withTimezone: true }).notNull().defaultNow(),
|
||||||
|
});
|
||||||
|
|
||||||
|
export const comparisonStatusEnum = pgEnum("comparison_status", [
|
||||||
|
"researching",
|
||||||
|
"completed",
|
||||||
|
"failed",
|
||||||
|
]);
|
||||||
|
|
||||||
|
export const users = pgTable("users", {
|
||||||
|
id: text("id").primaryKey(),
|
||||||
|
name: text("name"),
|
||||||
|
email: text("email").notNull().unique(),
|
||||||
|
emailVerified: boolean("email_verified").default(false),
|
||||||
|
image: text("image"),
|
||||||
|
createdAt: timestamp("created_at").defaultNow().notNull(),
|
||||||
|
updatedAt: timestamp("updated_at").defaultNow().notNull(),
|
||||||
|
});
|
||||||
|
|
||||||
|
export const sessions = pgTable("sessions", {
|
||||||
|
id: text("id").primaryKey(),
|
||||||
|
userId: text("user_id")
|
||||||
|
.notNull()
|
||||||
|
.references(() => users.id, { onDelete: "cascade" }),
|
||||||
|
token: text("token").notNull().unique(),
|
||||||
|
expiresAt: timestamp("expires_at").notNull(),
|
||||||
|
createdAt: timestamp("created_at").defaultNow().notNull(),
|
||||||
|
updatedAt: timestamp("updated_at").defaultNow().notNull(),
|
||||||
|
});
|
||||||
|
|
||||||
export const comparisons = pgTable(
|
export const comparisons = pgTable(
|
||||||
"comparisons",
|
"comparisons",
|
||||||
{
|
{
|
||||||
id: text("id").primaryKey(),
|
id: text("id")
|
||||||
userId: text("user_id"),
|
.primaryKey()
|
||||||
title: text("title").notNull(),
|
.$defaultFn(() => createId()),
|
||||||
query: text("query"),
|
userId: text("user_id")
|
||||||
slug: varchar("slug", { length: 255 }).notNull().unique(),
|
|
||||||
status: text("status", {
|
|
||||||
enum: ["researching", "completed", "failed"],
|
|
||||||
})
|
|
||||||
.notNull()
|
.notNull()
|
||||||
.default("researching"),
|
.references(() => users.id),
|
||||||
|
title: text("title").notNull(),
|
||||||
|
query: text("query").notNull(),
|
||||||
|
slug: text("slug").notNull().unique(),
|
||||||
|
status: comparisonStatusEnum("status").notNull().default("researching"),
|
||||||
summary: text("summary"),
|
summary: text("summary"),
|
||||||
overallData: jsonb("overall_data"),
|
overallData: jsonb("overall_data"),
|
||||||
tags: text("tags").array(),
|
tags: text("tags").array(),
|
||||||
isPublic: boolean("is_public").default(false),
|
isPublic: boolean("is_public").notNull().default(true),
|
||||||
viewCount: integer("view_count").default(0),
|
viewCount: integer("view_count").notNull().default(0),
|
||||||
createdAt: timestamp("created_at").defaultNow().notNull(),
|
createdAt: timestamp("created_at", { withTimezone: true }).notNull().defaultNow(),
|
||||||
updatedAt: timestamp("updated_at").defaultNow().notNull(),
|
updatedAt: timestamp("updated_at", { withTimezone: true }).notNull().defaultNow(),
|
||||||
},
|
},
|
||||||
(table) => [index("comparisons_user_id_idx").on(table.userId)]
|
(table) => [
|
||||||
|
index("comparisons_user_id_idx").on(table.userId),
|
||||||
|
index("comparisons_slug_idx").on(table.slug),
|
||||||
|
index("comparisons_status_idx").on(table.status),
|
||||||
|
],
|
||||||
);
|
);
|
||||||
|
|
||||||
export const comparisonItems = pgTable("comparison_items", {
|
export const comparisonItems = pgTable(
|
||||||
id: text("id").primaryKey(),
|
"comparison_items",
|
||||||
|
{
|
||||||
|
id: text("id")
|
||||||
|
.primaryKey()
|
||||||
|
.$defaultFn(() => createId()),
|
||||||
comparisonId: text("comparison_id")
|
comparisonId: text("comparison_id")
|
||||||
.notNull()
|
.notNull()
|
||||||
.references(() => comparisons.id, { onDelete: "cascade" }),
|
.references(() => comparisons.id, { onDelete: "cascade" }),
|
||||||
@@ -45,22 +91,24 @@ export const comparisonItems = pgTable("comparison_items", {
|
|||||||
scores: jsonb("scores"),
|
scores: jsonb("scores"),
|
||||||
pros: text("pros").array(),
|
pros: text("pros").array(),
|
||||||
cons: text("cons").array(),
|
cons: text("cons").array(),
|
||||||
order: integer("order").notNull(),
|
order: integer("order").notNull().default(0),
|
||||||
});
|
},
|
||||||
|
(table) => [index("comparison_items_comparison_id_idx").on(table.comparisonId)],
|
||||||
|
);
|
||||||
|
|
||||||
export const comparisonDimensions = pgTable("comparison_dimensions", {
|
export const comparisonDimensions = pgTable(
|
||||||
id: text("id").primaryKey(),
|
"comparison_dimensions",
|
||||||
|
{
|
||||||
|
id: text("id")
|
||||||
|
.primaryKey()
|
||||||
|
.$defaultFn(() => createId()),
|
||||||
comparisonId: text("comparison_id")
|
comparisonId: text("comparison_id")
|
||||||
.notNull()
|
.notNull()
|
||||||
.references(() => comparisons.id, { onDelete: "cascade" }),
|
.references(() => comparisons.id, { onDelete: "cascade" }),
|
||||||
name: text("name").notNull(),
|
name: text("name").notNull(),
|
||||||
description: text("description"),
|
description: text("description"),
|
||||||
weight: integer("weight").default(1),
|
weight: integer("weight").notNull().default(1),
|
||||||
order: integer("order").notNull(),
|
order: integer("order").notNull().default(0),
|
||||||
});
|
},
|
||||||
|
(table) => [index("comparison_dimensions_comparison_id_idx").on(table.comparisonId)],
|
||||||
export type Comparison = typeof comparisons.$inferSelect;
|
);
|
||||||
export type NewComparison = typeof comparisons.$inferInsert;
|
|
||||||
export type ComparisonItem = typeof comparisonItems.$inferSelect;
|
|
||||||
export type NewComparisonItem = typeof comparisonItems.$inferInsert;
|
|
||||||
export type ComparisonDimension = typeof comparisonDimensions.$inferSelect;
|
|
||||||
|
|||||||
@@ -3,7 +3,9 @@ import type {
|
|||||||
ComparisonResult,
|
ComparisonResult,
|
||||||
ResearchProgress,
|
ResearchProgress,
|
||||||
} from "./types";
|
} from "./types";
|
||||||
import { generateComparison } from "./providers/openai";
|
import { searchItem, type SearchResult } from "./providers/tavily";
|
||||||
|
import { generateComparisonWithResearch } from "./providers/openai";
|
||||||
|
import { getActiveProvider } from "./providers";
|
||||||
|
|
||||||
export type {
|
export type {
|
||||||
ComparisonRequest,
|
ComparisonRequest,
|
||||||
@@ -24,6 +26,28 @@ export async function* runResearch(
|
|||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const provider = getActiveProvider();
|
||||||
|
const searchResults: Record<string, SearchResult[]> = {};
|
||||||
|
|
||||||
|
if (provider.hasSearch) {
|
||||||
|
for (let i = 0; i < request.items.length; i++) {
|
||||||
|
const item = request.items[i];
|
||||||
|
const results = await searchItem(item, request.query);
|
||||||
|
searchResults[item] = results;
|
||||||
|
|
||||||
|
yield {
|
||||||
|
stage: "searching",
|
||||||
|
item,
|
||||||
|
results: results.length,
|
||||||
|
};
|
||||||
|
|
||||||
|
yield {
|
||||||
|
stage: "researching",
|
||||||
|
item,
|
||||||
|
progress: Math.round(((i + 1) / request.items.length) * 50),
|
||||||
|
};
|
||||||
|
}
|
||||||
|
} else {
|
||||||
for (let i = 0; i < request.items.length; i++) {
|
for (let i = 0; i < request.items.length; i++) {
|
||||||
yield {
|
yield {
|
||||||
stage: "researching",
|
stage: "researching",
|
||||||
@@ -31,14 +55,15 @@ export async function* runResearch(
|
|||||||
progress: Math.round(((i + 0.5) / request.items.length) * 80),
|
progress: Math.round(((i + 0.5) / request.items.length) * 80),
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
yield {
|
yield {
|
||||||
stage: "synthesizing",
|
stage: "synthesizing",
|
||||||
message: "Synthesizing research into structured comparison...",
|
message: `Synthesizing research into structured comparison using ${provider.name}...`,
|
||||||
};
|
};
|
||||||
|
|
||||||
try {
|
try {
|
||||||
const result = await generateComparison(request);
|
const result = await provider.synthesize(request, searchResults);
|
||||||
yield { stage: "complete", result };
|
yield { stage: "complete", result };
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
yield {
|
yield {
|
||||||
|
|||||||
63
src/lib/llm/providers/index.ts
Normal file
63
src/lib/llm/providers/index.ts
Normal file
@@ -0,0 +1,63 @@
|
|||||||
|
import type { ComparisonRequest, ComparisonResult } from "../types";
|
||||||
|
import type { SearchResult } from "./tavily";
|
||||||
|
import { generateComparisonWithResearch, generateComparison } from "./openai";
|
||||||
|
import { synthesizeResearch } from "./perplexity";
|
||||||
|
|
||||||
|
export interface Provider {
|
||||||
|
name: string;
|
||||||
|
hasSearch: boolean;
|
||||||
|
synthesize: (
|
||||||
|
request: ComparisonRequest,
|
||||||
|
searchResults: Record<string, SearchResult[]>
|
||||||
|
) => Promise<ComparisonResult>;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function getActiveProvider(): Provider {
|
||||||
|
const hasTavily = !!process.env.TAVILY_API_KEY;
|
||||||
|
const hasPerplexity = !!process.env.PERPLEXITY_API_KEY;
|
||||||
|
const hasOpenAI = !!process.env.OPENAI_API_KEY;
|
||||||
|
|
||||||
|
if (hasTavily && hasPerplexity) {
|
||||||
|
console.log("[llm] Using provider: Tavily search + Perplexity synthesis");
|
||||||
|
return {
|
||||||
|
name: "Tavily + Perplexity",
|
||||||
|
hasSearch: true,
|
||||||
|
synthesize: synthesizeResearch,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
if (hasTavily && hasOpenAI) {
|
||||||
|
console.log("[llm] Using provider: Tavily search + OpenAI synthesis");
|
||||||
|
return {
|
||||||
|
name: "Tavily + OpenAI",
|
||||||
|
hasSearch: true,
|
||||||
|
synthesize: generateComparisonWithResearch,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
if (hasOpenAI) {
|
||||||
|
console.log("[llm] Using provider: OpenAI only (no web search)");
|
||||||
|
return {
|
||||||
|
name: "OpenAI",
|
||||||
|
hasSearch: false,
|
||||||
|
synthesize: async (request) => generateComparison(request),
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
console.warn(
|
||||||
|
"[llm] No API keys configured. Research will fail at synthesis."
|
||||||
|
);
|
||||||
|
return {
|
||||||
|
name: "None",
|
||||||
|
hasSearch: false,
|
||||||
|
synthesize: async () => {
|
||||||
|
throw new Error(
|
||||||
|
"No LLM provider configured. Set OPENAI_API_KEY, TAVILY_API_KEY, or PERPLEXITY_API_KEY."
|
||||||
|
);
|
||||||
|
},
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
export { searchItem, type SearchResult } from "./tavily";
|
||||||
|
export { generateComparison, generateComparisonWithResearch } from "./openai";
|
||||||
|
export { synthesizeResearch } from "./perplexity";
|
||||||
@@ -5,10 +5,16 @@ import type {
|
|||||||
DimensionResult,
|
DimensionResult,
|
||||||
ItemResearch,
|
ItemResearch,
|
||||||
} from "../types";
|
} from "../types";
|
||||||
|
import type { SearchResult } from "./tavily";
|
||||||
|
|
||||||
const client = new OpenAI({
|
let _client: OpenAI | null = null;
|
||||||
apiKey: process.env.OPENAI_API_KEY,
|
|
||||||
});
|
function getClient(): OpenAI {
|
||||||
|
if (!_client) {
|
||||||
|
_client = new OpenAI({ apiKey: process.env.OPENAI_API_KEY });
|
||||||
|
}
|
||||||
|
return _client;
|
||||||
|
}
|
||||||
|
|
||||||
const SYSTEM_PROMPT = `You are an expert research analyst. Your job is to compare items across multiple dimensions and produce structured, insightful comparison data.
|
const SYSTEM_PROMPT = `You are an expert research analyst. Your job is to compare items across multiple dimensions and produce structured, insightful comparison data.
|
||||||
|
|
||||||
@@ -105,7 +111,7 @@ Provide a comprehensive comparison with scores, pros/cons, and a recommendation.
|
|||||||
|
|
||||||
for (let attempt = 1; attempt <= MAX_RETRIES; attempt++) {
|
for (let attempt = 1; attempt <= MAX_RETRIES; attempt++) {
|
||||||
try {
|
try {
|
||||||
const response = await client.chat.completions.create({
|
const response = await getClient().chat.completions.create({
|
||||||
model: "gpt-4o-mini",
|
model: "gpt-4o-mini",
|
||||||
messages: [
|
messages: [
|
||||||
{ role: "system", content: SYSTEM_PROMPT },
|
{ role: "system", content: SYSTEM_PROMPT },
|
||||||
@@ -140,3 +146,75 @@ Provide a comprehensive comparison with scores, pros/cons, and a recommendation.
|
|||||||
`Failed to generate comparison after ${MAX_RETRIES} attempts: ${lastError?.message}`
|
`Failed to generate comparison after ${MAX_RETRIES} attempts: ${lastError?.message}`
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export async function generateComparisonWithResearch(
|
||||||
|
request: ComparisonRequest,
|
||||||
|
searchResults: Record<string, SearchResult[]>
|
||||||
|
): Promise<ComparisonResult> {
|
||||||
|
const allResults = Object.values(searchResults).flat();
|
||||||
|
if (allResults.length === 0) {
|
||||||
|
return generateComparison(request);
|
||||||
|
}
|
||||||
|
|
||||||
|
let researchContext = "Web research data:\n\n";
|
||||||
|
for (const [itemName, results] of Object.entries(searchResults)) {
|
||||||
|
if (results.length === 0) continue;
|
||||||
|
researchContext += `=== ${itemName} ===\n`;
|
||||||
|
for (const r of results) {
|
||||||
|
researchContext += `- ${r.title}: ${r.content}\n Source: ${r.url}\n`;
|
||||||
|
}
|
||||||
|
researchContext += "\n";
|
||||||
|
}
|
||||||
|
|
||||||
|
const userPrompt = `Compare the following items: ${request.items.join(", ")}
|
||||||
|
${request.query ? `Focus: ${request.query}` : ""}
|
||||||
|
${request.dimensions?.length ? `Specific dimensions to include: ${request.dimensions.join(", ")}` : ""}
|
||||||
|
|
||||||
|
${researchContext}
|
||||||
|
|
||||||
|
Use the web research data above to provide factual, data-driven insights. Reference specific data points in your analysis. Provide a comprehensive comparison with scores, pros/cons, and a recommendation.`;
|
||||||
|
|
||||||
|
let lastError: Error | null = null;
|
||||||
|
|
||||||
|
for (let attempt = 1; attempt <= MAX_RETRIES; attempt++) {
|
||||||
|
try {
|
||||||
|
const response = await client.chat.completions.create({
|
||||||
|
model: "gpt-4o-mini",
|
||||||
|
messages: [
|
||||||
|
{ role: "system", content: SYSTEM_PROMPT },
|
||||||
|
{
|
||||||
|
role: "system",
|
||||||
|
content:
|
||||||
|
"You have access to real web search results. Use them to ground your comparison in factual data. Cite specific findings from the research when scoring and analyzing items.",
|
||||||
|
},
|
||||||
|
{ role: "user", content: userPrompt },
|
||||||
|
],
|
||||||
|
response_format: { type: "json_object" },
|
||||||
|
temperature: 0.3,
|
||||||
|
});
|
||||||
|
|
||||||
|
const content = response.choices[0]?.message?.content;
|
||||||
|
if (!content) {
|
||||||
|
throw new Error("Empty response from OpenAI");
|
||||||
|
}
|
||||||
|
|
||||||
|
const parsed: unknown = JSON.parse(content);
|
||||||
|
|
||||||
|
if (!validateComparisonResult(parsed)) {
|
||||||
|
throw new Error("Invalid comparison result structure from OpenAI");
|
||||||
|
}
|
||||||
|
|
||||||
|
return parsed;
|
||||||
|
} catch (error) {
|
||||||
|
lastError = error instanceof Error ? error : new Error(String(error));
|
||||||
|
|
||||||
|
if (attempt < MAX_RETRIES) {
|
||||||
|
await sleep(RETRY_DELAY_MS * attempt);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
throw new Error(
|
||||||
|
`Failed to generate comparison with research after ${MAX_RETRIES} attempts: ${lastError?.message}`
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|||||||
117
src/lib/llm/providers/perplexity.ts
Normal file
117
src/lib/llm/providers/perplexity.ts
Normal file
@@ -0,0 +1,117 @@
|
|||||||
|
import type { ComparisonRequest, ComparisonResult } from "../types";
|
||||||
|
import type { SearchResult } from "./tavily";
|
||||||
|
import { generateComparisonWithResearch } from "./openai";
|
||||||
|
|
||||||
|
const PERPLEXITY_API_URL = "https://api.perplexity.ai/chat/completions";
|
||||||
|
|
||||||
|
const SYSTEM_PROMPT = `You are a research synthesis engine. Given web search results for multiple items, produce a structured JSON comparison.
|
||||||
|
|
||||||
|
You MUST respond with valid JSON matching this exact structure:
|
||||||
|
{
|
||||||
|
"items": [
|
||||||
|
{
|
||||||
|
"name": "item name",
|
||||||
|
"description": "brief overview",
|
||||||
|
"overallScore": 7.5,
|
||||||
|
"dimensions": {
|
||||||
|
"Dimension Name": {
|
||||||
|
"score": 8,
|
||||||
|
"summary": "brief assessment",
|
||||||
|
"details": "detailed analysis",
|
||||||
|
"pros": ["pro 1"],
|
||||||
|
"cons": ["con 1"]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"pros": ["overall pro 1"],
|
||||||
|
"cons": ["overall con 1"],
|
||||||
|
"sources": [{ "title": "source", "url": "https://...", "snippet": "excerpt" }]
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"dimensions": ["Dimension 1", "Dimension 2"],
|
||||||
|
"summary": "comparison summary",
|
||||||
|
"recommendation": "clear recommendation"
|
||||||
|
}`;
|
||||||
|
|
||||||
|
export async function synthesizeResearch(
|
||||||
|
request: ComparisonRequest,
|
||||||
|
searchResults: Record<string, SearchResult[]>
|
||||||
|
): Promise<ComparisonResult> {
|
||||||
|
const apiKey = process.env.PERPLEXITY_API_KEY;
|
||||||
|
if (!apiKey) {
|
||||||
|
return generateComparisonWithResearch(request, searchResults);
|
||||||
|
}
|
||||||
|
|
||||||
|
const allResults = Object.values(searchResults).flat();
|
||||||
|
if (allResults.length === 0) {
|
||||||
|
return generateComparisonWithResearch(request, searchResults);
|
||||||
|
}
|
||||||
|
|
||||||
|
let researchContext = "Search results for each item:\n\n";
|
||||||
|
for (const [itemName, results] of Object.entries(searchResults)) {
|
||||||
|
if (results.length === 0) continue;
|
||||||
|
researchContext += `=== ${itemName} ===\n`;
|
||||||
|
for (const r of results) {
|
||||||
|
researchContext += `- ${r.title}: ${r.content}\n Source: ${r.url}\n`;
|
||||||
|
}
|
||||||
|
researchContext += "\n";
|
||||||
|
}
|
||||||
|
|
||||||
|
const userPrompt = `Compare: ${request.items.join(", ")}
|
||||||
|
${request.query ? `Focus: ${request.query}` : ""}
|
||||||
|
${request.dimensions?.length ? `Dimensions: ${request.dimensions.join(", ")}` : ""}
|
||||||
|
|
||||||
|
${researchContext}`;
|
||||||
|
|
||||||
|
try {
|
||||||
|
const response = await fetch(PERPLEXITY_API_URL, {
|
||||||
|
method: "POST",
|
||||||
|
headers: {
|
||||||
|
Authorization: `Bearer ${apiKey}`,
|
||||||
|
"Content-Type": "application/json",
|
||||||
|
},
|
||||||
|
body: JSON.stringify({
|
||||||
|
model: "sonar",
|
||||||
|
messages: [
|
||||||
|
{ role: "system", content: SYSTEM_PROMPT },
|
||||||
|
{ role: "user", content: userPrompt },
|
||||||
|
],
|
||||||
|
temperature: 0.3,
|
||||||
|
}),
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!response.ok) {
|
||||||
|
console.error(
|
||||||
|
`Perplexity API error: ${response.status} ${response.statusText}`
|
||||||
|
);
|
||||||
|
return generateComparisonWithResearch(request, searchResults);
|
||||||
|
}
|
||||||
|
|
||||||
|
const data = await response.json();
|
||||||
|
const content = data.choices?.[0]?.message?.content;
|
||||||
|
|
||||||
|
if (!content) {
|
||||||
|
console.error("Empty response from Perplexity");
|
||||||
|
return generateComparisonWithResearch(request, searchResults);
|
||||||
|
}
|
||||||
|
|
||||||
|
const parsed: unknown = JSON.parse(content);
|
||||||
|
|
||||||
|
if (
|
||||||
|
!parsed ||
|
||||||
|
typeof parsed !== "object" ||
|
||||||
|
!Array.isArray((parsed as Record<string, unknown>).items) ||
|
||||||
|
!Array.isArray((parsed as Record<string, unknown>).dimensions)
|
||||||
|
) {
|
||||||
|
console.error("Invalid structure from Perplexity, falling back to OpenAI");
|
||||||
|
return generateComparisonWithResearch(request, searchResults);
|
||||||
|
}
|
||||||
|
|
||||||
|
return parsed as ComparisonResult;
|
||||||
|
} catch (error) {
|
||||||
|
console.error(
|
||||||
|
"Perplexity synthesis failed, falling back to OpenAI:",
|
||||||
|
error instanceof Error ? error.message : error
|
||||||
|
);
|
||||||
|
return generateComparisonWithResearch(request, searchResults);
|
||||||
|
}
|
||||||
|
}
|
||||||
69
src/lib/llm/providers/tavily.ts
Normal file
69
src/lib/llm/providers/tavily.ts
Normal file
@@ -0,0 +1,69 @@
|
|||||||
|
export interface SearchResult {
|
||||||
|
title: string;
|
||||||
|
url: string;
|
||||||
|
content: string;
|
||||||
|
score: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
const TAVILY_API_URL = "https://api.tavily.com/search";
|
||||||
|
|
||||||
|
export async function searchItem(
|
||||||
|
itemName: string,
|
||||||
|
context: string
|
||||||
|
): Promise<SearchResult[]> {
|
||||||
|
const apiKey = process.env.TAVILY_API_KEY;
|
||||||
|
if (!apiKey) {
|
||||||
|
return [];
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
const query = `${itemName} ${context}`.trim();
|
||||||
|
|
||||||
|
const response = await fetch(TAVILY_API_URL, {
|
||||||
|
method: "POST",
|
||||||
|
headers: {
|
||||||
|
"Content-Type": "application/json",
|
||||||
|
},
|
||||||
|
body: JSON.stringify({
|
||||||
|
api_key: apiKey,
|
||||||
|
query,
|
||||||
|
max_results: 5,
|
||||||
|
include_answer: false,
|
||||||
|
search_depth: "advanced",
|
||||||
|
}),
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!response.ok) {
|
||||||
|
console.error(
|
||||||
|
`Tavily API error: ${response.status} ${response.statusText}`
|
||||||
|
);
|
||||||
|
return [];
|
||||||
|
}
|
||||||
|
|
||||||
|
const data = await response.json();
|
||||||
|
|
||||||
|
if (!data.results || !Array.isArray(data.results)) {
|
||||||
|
return [];
|
||||||
|
}
|
||||||
|
|
||||||
|
return data.results.map(
|
||||||
|
(result: {
|
||||||
|
title?: string;
|
||||||
|
url?: string;
|
||||||
|
content?: string;
|
||||||
|
score?: number;
|
||||||
|
}) => ({
|
||||||
|
title: result.title ?? "",
|
||||||
|
url: result.url ?? "",
|
||||||
|
content: result.content ?? "",
|
||||||
|
score: result.score ?? 0,
|
||||||
|
})
|
||||||
|
);
|
||||||
|
} catch (error) {
|
||||||
|
console.error(
|
||||||
|
`Tavily search failed for "${itemName}":`,
|
||||||
|
error instanceof Error ? error.message : error
|
||||||
|
);
|
||||||
|
return [];
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -31,6 +31,7 @@ export interface ComparisonResult {
|
|||||||
|
|
||||||
export type ResearchProgress =
|
export type ResearchProgress =
|
||||||
| { stage: "parsing"; message: string }
|
| { stage: "parsing"; message: string }
|
||||||
|
| { stage: "searching"; item: string; results: number }
|
||||||
| { stage: "researching"; item: string; progress: number }
|
| { stage: "researching"; item: string; progress: number }
|
||||||
| { stage: "synthesizing"; message: string }
|
| { stage: "synthesizing"; message: string }
|
||||||
| { stage: "complete"; result: ComparisonResult }
|
| { stage: "complete"; result: ComparisonResult }
|
||||||
|
|||||||
@@ -1,20 +1,29 @@
|
|||||||
import { NextRequest, NextResponse } from "next/server";
|
import { NextRequest, NextResponse } from "next/server";
|
||||||
import { auth } from "@/lib/auth";
|
import { auth } from "@/lib/auth";
|
||||||
|
|
||||||
const publicPaths = ["/sign-in", "/sign-up", "/api/auth"];
|
const publicPaths = ["/", "/explore", "/sign-in", "/sign-up", "/api/auth"];
|
||||||
|
const protectedPaths = ["/compare", "/profile"];
|
||||||
|
|
||||||
export async function middleware(request: NextRequest) {
|
export async function middleware(request: NextRequest) {
|
||||||
const { pathname } = request.nextUrl;
|
const { pathname } = request.nextUrl;
|
||||||
|
|
||||||
|
if (
|
||||||
|
pathname.startsWith("/_next") ||
|
||||||
|
pathname.startsWith("/favicon") ||
|
||||||
|
pathname.includes(".")
|
||||||
|
) {
|
||||||
|
return NextResponse.next();
|
||||||
|
}
|
||||||
|
|
||||||
const isPublic = publicPaths.some(
|
const isPublic = publicPaths.some(
|
||||||
(path) => pathname === path || pathname.startsWith(path + "/"),
|
(path) => pathname === path || pathname.startsWith(path + "/"),
|
||||||
);
|
);
|
||||||
|
|
||||||
if (isPublic) {
|
const isProtected = protectedPaths.some(
|
||||||
return NextResponse.next();
|
(path) => pathname === path || pathname.startsWith(path + "/"),
|
||||||
}
|
);
|
||||||
|
|
||||||
if (pathname.startsWith("/_next") || pathname.startsWith("/favicon")) {
|
if (isPublic && !isProtected) {
|
||||||
return NextResponse.next();
|
return NextResponse.next();
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -22,7 +31,7 @@ export async function middleware(request: NextRequest) {
|
|||||||
headers: request.headers,
|
headers: request.headers,
|
||||||
});
|
});
|
||||||
|
|
||||||
if (!session) {
|
if (!session && isProtected) {
|
||||||
const signInUrl = new URL("/sign-in", request.url);
|
const signInUrl = new URL("/sign-in", request.url);
|
||||||
signInUrl.searchParams.set("callbackUrl", pathname);
|
signInUrl.searchParams.set("callbackUrl", pathname);
|
||||||
return NextResponse.redirect(signInUrl);
|
return NextResponse.redirect(signInUrl);
|
||||||
|
|||||||
Reference in New Issue
Block a user