278 lines
6.7 KiB
Markdown
278 lines
6.7 KiB
Markdown
# Les 15 — Lesopdracht
|
|
## PDF Q&A app opzetten + eerste embeddings
|
|
|
|
**Vak:** AI-Assisted Development
|
|
**Opleiding:** NOVI Hogeschool Utrecht
|
|
**Duur:** 30 min in-class
|
|
**Status:** Tijdens de les afronden — daarna huiswerk uitbreiden
|
|
|
|
---
|
|
|
|
## Doel
|
|
|
|
Aan het einde van deze opdracht heb je een werkende **PDF Q&A app**: je uploadt een PDF, hij wordt gechunked + embedded + opgeslagen in Supabase pgvector, en je kunt er vragen aan stellen die accuraat beantwoord worden op basis van de PDF.
|
|
|
|
---
|
|
|
|
## Vereisten
|
|
|
|
- Node 20+, pnpm, git
|
|
- Supabase account
|
|
- OpenAI API key
|
|
|
|
---
|
|
|
|
## Stap 1 — Nieuwe Next.js app
|
|
|
|
```bash
|
|
pnpm create next-app@latest pdf-qa \
|
|
--typescript --tailwind --app --no-src-dir --import-alias "@/*"
|
|
cd pdf-qa
|
|
pnpm add ai @ai-sdk/openai zod @supabase/supabase-js unpdf
|
|
```
|
|
|
|
`.env.local`:
|
|
|
|
```
|
|
OPENAI_API_KEY=sk-...
|
|
NEXT_PUBLIC_SUPABASE_URL=https://...supabase.co
|
|
NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJ...
|
|
```
|
|
|
|
---
|
|
|
|
## Stap 2 — Supabase: pgvector + schema
|
|
|
|
In Supabase SQL Editor:
|
|
|
|
```sql
|
|
-- 1. Extension activeren
|
|
create extension if not exists vector;
|
|
|
|
-- 2. Chunks tabel
|
|
create table chunks (
|
|
id bigserial primary key,
|
|
source text not null,
|
|
page int,
|
|
content text not null,
|
|
embedding vector(1536),
|
|
created_at timestamp default now()
|
|
);
|
|
|
|
-- 3. HNSW index voor snelle search
|
|
create index on chunks
|
|
using hnsw (embedding vector_cosine_ops);
|
|
|
|
-- 4. RLS open voor demo
|
|
alter table chunks enable row level security;
|
|
create policy "demo open" on chunks
|
|
for all to anon using (true) with check (true);
|
|
|
|
-- 5. Match function
|
|
create or replace function match_chunks(
|
|
query_embedding vector(1536),
|
|
match_count int default 5
|
|
)
|
|
returns table (id bigint, content text, source text, similarity float)
|
|
language sql stable as $$
|
|
select chunks.id, chunks.content, chunks.source,
|
|
1 - (chunks.embedding <=> query_embedding) as similarity
|
|
from chunks
|
|
order by chunks.embedding <=> query_embedding
|
|
limit match_count;
|
|
$$;
|
|
```
|
|
|
|
---
|
|
|
|
## Stap 3 — lib/embeddings.ts
|
|
|
|
```typescript
|
|
import { embed, embedMany } from "ai";
|
|
import { openai } from "@ai-sdk/openai";
|
|
|
|
export const embedModel = openai.textEmbeddingModel("text-embedding-3-small");
|
|
|
|
export async function embedOne(text: string) {
|
|
const { embedding } = await embed({ model: embedModel, value: text });
|
|
return embedding;
|
|
}
|
|
|
|
export async function embedBatch(texts: string[]) {
|
|
const { embeddings } = await embedMany({ model: embedModel, values: texts });
|
|
return embeddings;
|
|
}
|
|
|
|
export function chunkText(text: string, size = 500, overlap = 50): string[] {
|
|
const chunks: string[] = [];
|
|
let i = 0;
|
|
while (i < text.length) {
|
|
chunks.push(text.slice(i, i + size).trim());
|
|
i += size - overlap;
|
|
}
|
|
return chunks.filter((c) => c.length > 0);
|
|
}
|
|
```
|
|
|
|
---
|
|
|
|
## Stap 4 — lib/supabase.ts
|
|
|
|
```typescript
|
|
import { createClient } from "@supabase/supabase-js";
|
|
|
|
export const supabase = createClient(
|
|
process.env.NEXT_PUBLIC_SUPABASE_URL!,
|
|
process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
|
|
);
|
|
```
|
|
|
|
---
|
|
|
|
## Stap 5 — Index endpoint
|
|
|
|
`app/api/index/route.ts`:
|
|
|
|
```typescript
|
|
import { extractText } from "unpdf";
|
|
import { embedBatch, chunkText } from "@/lib/embeddings";
|
|
import { supabase } from "@/lib/supabase";
|
|
|
|
export async function POST(req: Request) {
|
|
const formData = await req.formData();
|
|
const file = formData.get("file") as File;
|
|
if (!file) return Response.json({ error: "No file" }, { status: 400 });
|
|
|
|
const buffer = new Uint8Array(await file.arrayBuffer());
|
|
const { text } = await extractText(buffer, { mergePages: true });
|
|
|
|
const chunks = chunkText(text, 500, 50);
|
|
const embeddings = await embedBatch(chunks);
|
|
|
|
const { error } = await supabase.from("chunks").insert(
|
|
chunks.map((content, i) => ({
|
|
source: file.name,
|
|
content,
|
|
embedding: embeddings[i],
|
|
}))
|
|
);
|
|
|
|
if (error) return Response.json({ error: error.message }, { status: 500 });
|
|
return Response.json({ chunks: chunks.length, source: file.name });
|
|
}
|
|
```
|
|
|
|
---
|
|
|
|
## Stap 6 — Ask endpoint
|
|
|
|
`app/api/ask/route.ts`:
|
|
|
|
```typescript
|
|
import { embedOne } from "@/lib/embeddings";
|
|
import { supabase } from "@/lib/supabase";
|
|
import { generateText } from "ai";
|
|
import { openai } from "@ai-sdk/openai";
|
|
|
|
export async function POST(req: Request) {
|
|
const { question } = await req.json();
|
|
const embedding = await embedOne(question);
|
|
|
|
const { data: chunks } = await supabase.rpc("match_chunks", {
|
|
query_embedding: embedding,
|
|
match_count: 5,
|
|
});
|
|
|
|
if (!chunks?.length) {
|
|
return Response.json({ answer: "Geen relevante info gevonden." });
|
|
}
|
|
|
|
const context = chunks
|
|
.map((c: any, i: number) => `[Source ${i + 1}: ${c.source}]\n${c.content}`)
|
|
.join("\n\n---\n\n");
|
|
|
|
const { text } = await generateText({
|
|
model: openai("gpt-4o-mini"),
|
|
prompt: `Beantwoord op basis van deze context. Als geen antwoord staat, zeg dat eerlijk.
|
|
|
|
CONTEXT:
|
|
${context}
|
|
|
|
VRAAG: ${question}
|
|
|
|
ANTWOORD:`,
|
|
});
|
|
|
|
return Response.json({ answer: text, sources: chunks });
|
|
}
|
|
```
|
|
|
|
---
|
|
|
|
## Stap 7 — Test in terminal
|
|
|
|
`pnpm dev` in één terminal. In een ander:
|
|
|
|
```bash
|
|
# Index een PDF (Tim deelt voorbeeld-PDF in de les)
|
|
curl -X POST http://localhost:3000/api/index \
|
|
-F "file=@./polderfest-lineup.pdf"
|
|
# {"chunks": 30, "source": "polderfest-lineup.pdf"}
|
|
|
|
# Stel een vraag
|
|
curl -X POST http://localhost:3000/api/ask \
|
|
-H "Content-Type: application/json" \
|
|
-d '{"question": "Wie zijn de headliners?"}' \
|
|
| jq
|
|
```
|
|
|
|
Verwacht: JSON met `answer` (accuraat antwoord) en `sources` (welke chunks gebruikt).
|
|
|
|
---
|
|
|
|
## Eisen
|
|
|
|
- [ ] pgvector extension actief in Supabase
|
|
- [ ] `chunks` tabel + HNSW index + match_chunks function
|
|
- [ ] 1 PDF succesvol geïndexeerd
|
|
- [ ] 3 vragen werken met correcte antwoorden
|
|
- [ ] In Supabase Table Editor: chunks zichtbaar met embedding kolom
|
|
|
|
---
|
|
|
|
## Tijdsindeling (30 min)
|
|
|
|
| Stap | Tijd |
|
|
|------|------|
|
|
| 1 — Setup | 3 min |
|
|
| 2 — Supabase schema | 5 min |
|
|
| 3-4 — lib files | 5 min |
|
|
| 5 — Index endpoint | 7 min |
|
|
| 6 — Ask endpoint | 5 min |
|
|
| 7 — Test | 5 min |
|
|
|
|
---
|
|
|
|
## Veelvoorkomende problemen
|
|
|
|
| Symptoom | Oplossing |
|
|
|----------|-----------|
|
|
| `extension "vector" does not exist` | Supabase: Database → Extensions → enable vector |
|
|
| `dimension mismatch` | Embed model en `vector(N)` moeten matchen — gebruik altijd `text-embedding-3-small` (1536) |
|
|
| `match_chunks does not exist` | SQL function niet aangemaakt — stap 2 stuk 5 |
|
|
| `embedMany` slow | Normaal voor grote PDFs — geduld of split batches |
|
|
| RLS error op insert | `create policy` niet uitgevoerd — stap 2 stuk 4 |
|
|
| PDF parsing leeg | Scan-PDF (image-based)? unpdf werkt op text-PDFs |
|
|
|
|
---
|
|
|
|
## Klaar? Verder met huiswerk
|
|
|
|
Het huiswerk bouwt voort:
|
|
|
|
- Eigen PDF + UI + RAG-tool in een agent
|
|
- `RAG.md` met analyse + fail case
|
|
- Bonus: hybrid search of streaming antwoord
|
|
|
|
Zie `Les15-Huiswerk.md` of `Les15-Huiswerk.pdf`.
|