feat: add prototype-based annotation view with single-choice rating

This commit is contained in:
smaubio
2026-03-13 16:03:23 +01:00
parent d645f87f8e
commit 0d7e6ed19f
8 changed files with 779 additions and 126 deletions

View File

@@ -0,0 +1,9 @@
CREATE TABLE IF NOT EXISTS `annotation` (
`id` integer PRIMARY KEY AUTOINCREMENT NOT NULL,
`dataset_entry_id` integer NOT NULL,
`user_id` text NOT NULL,
`rating` integer NOT NULL,
`dialect_label` text NOT NULL,
`created_at` integer DEFAULT (unixepoch()) NOT NULL,
FOREIGN KEY (`dataset_entry_id`) REFERENCES `dataset_entry`(`id`) ON UPDATE no action ON DELETE no action
);

View File

@@ -0,0 +1,637 @@
{
"version": "6",
"dialect": "sqlite",
"id": "071a0744-4d6e-4657-948b-7eda495b9756",
"prevId": "4e72f679-ef9b-47d5-a6fb-a1c45d5cbe74",
"tables": {
"annotation": {
"name": "annotation",
"columns": {
"id": {
"name": "id",
"type": "integer",
"primaryKey": true,
"notNull": true,
"autoincrement": true
},
"dataset_entry_id": {
"name": "dataset_entry_id",
"type": "integer",
"primaryKey": false,
"notNull": true,
"autoincrement": false
},
"user_id": {
"name": "user_id",
"type": "text",
"primaryKey": false,
"notNull": true,
"autoincrement": false
},
"rating": {
"name": "rating",
"type": "integer",
"primaryKey": false,
"notNull": true,
"autoincrement": false
},
"dialect_label": {
"name": "dialect_label",
"type": "text",
"primaryKey": false,
"notNull": true,
"autoincrement": false
},
"created_at": {
"name": "created_at",
"type": "integer",
"primaryKey": false,
"notNull": true,
"autoincrement": false,
"default": "(unixepoch())"
}
},
"indexes": {},
"foreignKeys": {
"annotation_dataset_entry_id_dataset_entry_id_fk": {
"name": "annotation_dataset_entry_id_dataset_entry_id_fk",
"tableFrom": "annotation",
"tableTo": "dataset_entry",
"columnsFrom": [
"dataset_entry_id"
],
"columnsTo": [
"id"
],
"onDelete": "no action",
"onUpdate": "no action"
}
},
"compositePrimaryKeys": {},
"uniqueConstraints": {},
"checkConstraints": {}
},
"account": {
"name": "account",
"columns": {
"id": {
"name": "id",
"type": "text",
"primaryKey": true,
"notNull": true,
"autoincrement": false
},
"account_id": {
"name": "account_id",
"type": "text",
"primaryKey": false,
"notNull": true,
"autoincrement": false
},
"provider_id": {
"name": "provider_id",
"type": "text",
"primaryKey": false,
"notNull": true,
"autoincrement": false
},
"user_id": {
"name": "user_id",
"type": "text",
"primaryKey": false,
"notNull": true,
"autoincrement": false
},
"access_token": {
"name": "access_token",
"type": "text",
"primaryKey": false,
"notNull": false,
"autoincrement": false
},
"refresh_token": {
"name": "refresh_token",
"type": "text",
"primaryKey": false,
"notNull": false,
"autoincrement": false
},
"id_token": {
"name": "id_token",
"type": "text",
"primaryKey": false,
"notNull": false,
"autoincrement": false
},
"access_token_expires_at": {
"name": "access_token_expires_at",
"type": "integer",
"primaryKey": false,
"notNull": false,
"autoincrement": false
},
"refresh_token_expires_at": {
"name": "refresh_token_expires_at",
"type": "integer",
"primaryKey": false,
"notNull": false,
"autoincrement": false
},
"scope": {
"name": "scope",
"type": "text",
"primaryKey": false,
"notNull": false,
"autoincrement": false
},
"password": {
"name": "password",
"type": "text",
"primaryKey": false,
"notNull": false,
"autoincrement": false
},
"created_at": {
"name": "created_at",
"type": "integer",
"primaryKey": false,
"notNull": true,
"autoincrement": false,
"default": "(cast(unixepoch('subsecond') * 1000 as integer))"
},
"updated_at": {
"name": "updated_at",
"type": "integer",
"primaryKey": false,
"notNull": true,
"autoincrement": false
}
},
"indexes": {
"account_userId_idx": {
"name": "account_userId_idx",
"columns": [
"user_id"
],
"isUnique": false
}
},
"foreignKeys": {
"account_user_id_user_id_fk": {
"name": "account_user_id_user_id_fk",
"tableFrom": "account",
"tableTo": "user",
"columnsFrom": [
"user_id"
],
"columnsTo": [
"id"
],
"onDelete": "cascade",
"onUpdate": "no action"
}
},
"compositePrimaryKeys": {},
"uniqueConstraints": {},
"checkConstraints": {}
},
"session": {
"name": "session",
"columns": {
"id": {
"name": "id",
"type": "text",
"primaryKey": true,
"notNull": true,
"autoincrement": false
},
"expires_at": {
"name": "expires_at",
"type": "integer",
"primaryKey": false,
"notNull": true,
"autoincrement": false
},
"token": {
"name": "token",
"type": "text",
"primaryKey": false,
"notNull": true,
"autoincrement": false
},
"created_at": {
"name": "created_at",
"type": "integer",
"primaryKey": false,
"notNull": true,
"autoincrement": false,
"default": "(cast(unixepoch('subsecond') * 1000 as integer))"
},
"updated_at": {
"name": "updated_at",
"type": "integer",
"primaryKey": false,
"notNull": true,
"autoincrement": false
},
"ip_address": {
"name": "ip_address",
"type": "text",
"primaryKey": false,
"notNull": false,
"autoincrement": false
},
"user_agent": {
"name": "user_agent",
"type": "text",
"primaryKey": false,
"notNull": false,
"autoincrement": false
},
"user_id": {
"name": "user_id",
"type": "text",
"primaryKey": false,
"notNull": true,
"autoincrement": false
}
},
"indexes": {
"session_token_unique": {
"name": "session_token_unique",
"columns": [
"token"
],
"isUnique": true
},
"session_userId_idx": {
"name": "session_userId_idx",
"columns": [
"user_id"
],
"isUnique": false
}
},
"foreignKeys": {
"session_user_id_user_id_fk": {
"name": "session_user_id_user_id_fk",
"tableFrom": "session",
"tableTo": "user",
"columnsFrom": [
"user_id"
],
"columnsTo": [
"id"
],
"onDelete": "cascade",
"onUpdate": "no action"
}
},
"compositePrimaryKeys": {},
"uniqueConstraints": {},
"checkConstraints": {}
},
"user": {
"name": "user",
"columns": {
"id": {
"name": "id",
"type": "text",
"primaryKey": true,
"notNull": true,
"autoincrement": false
},
"name": {
"name": "name",
"type": "text",
"primaryKey": false,
"notNull": true,
"autoincrement": false
},
"email": {
"name": "email",
"type": "text",
"primaryKey": false,
"notNull": true,
"autoincrement": false
},
"email_verified": {
"name": "email_verified",
"type": "integer",
"primaryKey": false,
"notNull": true,
"autoincrement": false,
"default": false
},
"image": {
"name": "image",
"type": "text",
"primaryKey": false,
"notNull": false,
"autoincrement": false
},
"admin": {
"name": "admin",
"type": "integer",
"primaryKey": false,
"notNull": true,
"autoincrement": false,
"default": false
},
"created_at": {
"name": "created_at",
"type": "integer",
"primaryKey": false,
"notNull": true,
"autoincrement": false,
"default": "(cast(unixepoch('subsecond') * 1000 as integer))"
},
"updated_at": {
"name": "updated_at",
"type": "integer",
"primaryKey": false,
"notNull": true,
"autoincrement": false,
"default": "(cast(unixepoch('subsecond') * 1000 as integer))"
}
},
"indexes": {
"user_email_unique": {
"name": "user_email_unique",
"columns": [
"email"
],
"isUnique": true
}
},
"foreignKeys": {},
"compositePrimaryKeys": {},
"uniqueConstraints": {},
"checkConstraints": {}
},
"verification": {
"name": "verification",
"columns": {
"id": {
"name": "id",
"type": "text",
"primaryKey": true,
"notNull": true,
"autoincrement": false
},
"identifier": {
"name": "identifier",
"type": "text",
"primaryKey": false,
"notNull": true,
"autoincrement": false
},
"value": {
"name": "value",
"type": "text",
"primaryKey": false,
"notNull": true,
"autoincrement": false
},
"expires_at": {
"name": "expires_at",
"type": "integer",
"primaryKey": false,
"notNull": true,
"autoincrement": false
},
"created_at": {
"name": "created_at",
"type": "integer",
"primaryKey": false,
"notNull": true,
"autoincrement": false,
"default": "(cast(unixepoch('subsecond') * 1000 as integer))"
},
"updated_at": {
"name": "updated_at",
"type": "integer",
"primaryKey": false,
"notNull": true,
"autoincrement": false,
"default": "(cast(unixepoch('subsecond') * 1000 as integer))"
}
},
"indexes": {
"verification_identifier_idx": {
"name": "verification_identifier_idx",
"columns": [
"identifier"
],
"isUnique": false
}
},
"foreignKeys": {},
"compositePrimaryKeys": {},
"uniqueConstraints": {},
"checkConstraints": {}
},
"dataset_entry": {
"name": "dataset_entry",
"columns": {
"id": {
"name": "id",
"type": "integer",
"primaryKey": true,
"notNull": true,
"autoincrement": true
},
"external_id": {
"name": "external_id",
"type": "text",
"primaryKey": false,
"notNull": true,
"autoincrement": false
},
"speaker_id": {
"name": "speaker_id",
"type": "text",
"primaryKey": false,
"notNull": true,
"autoincrement": false
},
"model_name": {
"name": "model_name",
"type": "text",
"primaryKey": false,
"notNull": true,
"autoincrement": false
},
"utterance_id": {
"name": "utterance_id",
"type": "text",
"primaryKey": false,
"notNull": false,
"autoincrement": false
},
"utterance_text": {
"name": "utterance_text",
"type": "text",
"primaryKey": false,
"notNull": false,
"autoincrement": false
},
"dataset_id": {
"name": "dataset_id",
"type": "integer",
"primaryKey": false,
"notNull": true,
"autoincrement": false
},
"file_name": {
"name": "file_name",
"type": "text",
"primaryKey": false,
"notNull": true,
"autoincrement": false
},
"dialect": {
"name": "dialect",
"type": "text",
"primaryKey": false,
"notNull": true,
"autoincrement": false
},
"iteration": {
"name": "iteration",
"type": "integer",
"primaryKey": false,
"notNull": true,
"autoincrement": false
},
"duration_ms": {
"name": "duration_ms",
"type": "integer",
"primaryKey": false,
"notNull": false,
"autoincrement": false
},
"rms_value": {
"name": "rms_value",
"type": "real",
"primaryKey": false,
"notNull": false,
"autoincrement": false
},
"longest_pause": {
"name": "longest_pause",
"type": "real",
"primaryKey": false,
"notNull": false,
"autoincrement": false
},
"utmos_score": {
"name": "utmos_score",
"type": "real",
"primaryKey": false,
"notNull": false,
"autoincrement": false
},
"wer_score": {
"name": "wer_score",
"type": "real",
"primaryKey": false,
"notNull": false,
"autoincrement": false
},
"created_at": {
"name": "created_at",
"type": "integer",
"primaryKey": false,
"notNull": true,
"autoincrement": false,
"default": "(unixepoch())"
},
"updated_at": {
"name": "updated_at",
"type": "integer",
"primaryKey": false,
"notNull": true,
"autoincrement": false,
"default": "(unixepoch())"
}
},
"indexes": {},
"foreignKeys": {
"dataset_entry_dataset_id_dataset_id_fk": {
"name": "dataset_entry_dataset_id_dataset_id_fk",
"tableFrom": "dataset_entry",
"tableTo": "dataset",
"columnsFrom": [
"dataset_id"
],
"columnsTo": [
"id"
],
"onDelete": "no action",
"onUpdate": "no action"
}
},
"compositePrimaryKeys": {},
"uniqueConstraints": {},
"checkConstraints": {}
},
"dataset": {
"name": "dataset",
"columns": {
"id": {
"name": "id",
"type": "integer",
"primaryKey": true,
"notNull": true,
"autoincrement": true
},
"name": {
"name": "name",
"type": "text",
"primaryKey": false,
"notNull": true,
"autoincrement": false
},
"description": {
"name": "description",
"type": "text",
"primaryKey": false,
"notNull": false,
"autoincrement": false
},
"created_at": {
"name": "created_at",
"type": "integer",
"primaryKey": false,
"notNull": true,
"autoincrement": false,
"default": "(unixepoch())"
},
"updated_at": {
"name": "updated_at",
"type": "integer",
"primaryKey": false,
"notNull": true,
"autoincrement": false,
"default": "(unixepoch())"
}
},
"indexes": {},
"foreignKeys": {},
"compositePrimaryKeys": {},
"uniqueConstraints": {},
"checkConstraints": {}
}
},
"views": {},
"enums": {},
"_meta": {
"schemas": {},
"tables": {},
"columns": {}
},
"internal": {
"indexes": {}
}
}

View File

@@ -50,6 +50,13 @@
"when": 1773406006276, "when": 1773406006276,
"tag": "0006_special_junta", "tag": "0006_special_junta",
"breakpoints": true "breakpoints": true
},
{
"idx": 7,
"version": "6",
"when": 1773410584481,
"tag": "0007_light_spiral",
"breakpoints": true
} }
] ]
} }

View File

@@ -10,8 +10,7 @@ import { headers } from 'next/headers';
import type { AnnotationEntry } from '@/lib/dialects'; import type { AnnotationEntry } from '@/lib/dialects';
/** /**
* Returns shuffled unannotated entries for the given dataset and authenticated user. * Returns unannotated entries for the given dataset and authenticated user.
* Consecutive entries will never share the same externalId.
*/ */
export async function getAnnotationEntries(datasetId: number): Promise<AnnotationEntry[]> { export async function getAnnotationEntries(datasetId: number): Promise<AnnotationEntry[]> {
const session = await auth.api.getSession({ headers: await headers() }); const session = await auth.api.getSession({ headers: await headers() });
@@ -48,7 +47,7 @@ export async function getAnnotationEntries(datasetId: number): Promise<Annotatio
datasetId: e.datasetId, datasetId: e.datasetId,
})); }));
return shuffleWithConstraint(mapped); return mapped;
} }
/** /**
@@ -105,31 +104,3 @@ export async function getAnnotationProgress(
return { total: allEntries.length, done: annotated.length }; return { total: allEntries.length, done: annotated.length };
} }
// ---------------------------------------------------------------------------
// Helpers
// ---------------------------------------------------------------------------
/** Fisher-Yates shuffle with a greedy fix for consecutive same externalId. */
function shuffleWithConstraint(entries: AnnotationEntry[]): AnnotationEntry[] {
if (entries.length <= 1) return entries;
const arr = [...entries];
for (let i = arr.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[arr[i], arr[j]] = [arr[j], arr[i]];
}
// Single-pass greedy fix
for (let i = 1; i < arr.length; i++) {
if (arr[i].externalId === arr[i - 1].externalId) {
for (let j = i + 1; j < arr.length; j++) {
if (arr[j].externalId !== arr[i - 1].externalId) {
[arr[i], arr[j]] = [arr[j], arr[i]];
break;
}
}
}
}
return arr;
}

View File

@@ -0,0 +1,57 @@
import { redirect, notFound } from 'next/navigation';
import { headers } from 'next/headers';
import Link from 'next/link';
import { auth } from '@/lib/auth';
import { getAnnotationEntries } from '@/app/actions/annotations';
import SingleChoiceView from '@/components/AnnotationViews/SingleChoiceView';
interface Props {
params: Promise<{ datasetId: string; prototype: string }>;
}
export default async function AnnotatePage({ params }: Props) {
const session = await auth.api.getSession({ headers: await headers() });
if (!session) redirect('/user/sign-in');
const { datasetId: datasetIdStr, prototype } = await params;
const datasetId = parseInt(datasetIdStr, 10);
if (isNaN(datasetId)) {
return (
<div className="max-w-xl mx-auto py-16 text-center">
<p className="text-gray-600">Ungültige Dataset-ID.</p>
<Link href="/" className="text-blue-600 hover:underline mt-4 inline-block">
Startseite
</Link>
</div>
);
}
if (prototype !== 'single-choice') {
notFound();
}
const entries = await getAnnotationEntries(datasetId);
if (entries.length === 0) {
return (
<div className="max-w-xl mx-auto py-20 text-center">
<div className="text-5xl mb-4"></div>
<h1 className="text-2xl font-bold text-green-600 mb-3">
Alle Samples bewertet!
</h1>
<p className="text-gray-600 mb-8">
Sie haben alle Samples in diesem Dataset bereits bewertet. Danke für Ihre Mitarbeit!
</p>
<Link
href="/"
className="px-6 py-3 bg-blue-600 hover:bg-blue-700 text-white font-semibold rounded-lg transition-colors"
>
Zurück zur Startseite
</Link>
</div>
);
}
return <SingleChoiceView entries={entries} datasetId={datasetId} />;
}

View File

@@ -2,52 +2,52 @@ import { redirect } from 'next/navigation';
import { headers } from 'next/headers'; import { headers } from 'next/headers';
import Link from 'next/link'; import Link from 'next/link';
import { auth } from '@/lib/auth'; import { auth } from '@/lib/auth';
import { getAnnotationEntries } from '@/app/actions/annotations';
import AnnotationView from '@/components/AnnotationView'; const PROTOTYPES = [
{
id: 'single-choice',
name: 'Single Choice',
description: 'Bewerten Sie jedes Sample auf einer Skala von 15.',
},
];
interface Props { interface Props {
params: Promise<{ datasetId: string }>; params: Promise<{ datasetId: string }>;
} }
export default async function AnnotatePage({ params }: Props) { export default async function PrototypeSelectionPage({ params }: Props) {
const session = await auth.api.getSession({ headers: await headers() }); const session = await auth.api.getSession({ headers: await headers() });
if (!session) redirect('/user/sign-in'); if (!session) redirect('/user/sign-in');
const { datasetId: datasetIdStr } = await params; const { datasetId } = await params;
const datasetId = parseInt(datasetIdStr, 10);
if (isNaN(datasetId)) {
return ( return (
<div className="max-w-xl mx-auto py-16 text-center"> <div className="max-w-2xl mx-auto py-8">
<p className="text-gray-600">Ungültige Dataset-ID.</p> <Link href="/" className="text-sm text-gray-500 hover:text-gray-700 mb-6 inline-block">
<Link href="/" className="text-blue-600 hover:underline mt-4 inline-block"> Zurück zur Startseite
Startseite
</Link> </Link>
</div> <h1 className="text-2xl font-bold text-gray-800 mb-2">Prototyp auswählen</h1>
); <p className="text-gray-500 mb-8">
} Wählen Sie einen Annotationsprototyp aus, um mit der Bewertung zu beginnen.
const entries = await getAnnotationEntries(datasetId);
if (entries.length === 0) {
return (
<div className="max-w-xl mx-auto py-20 text-center">
<div className="text-5xl mb-4"></div>
<h1 className="text-2xl font-bold text-green-600 mb-3">
Alle Samples bewertet!
</h1>
<p className="text-gray-600 mb-8">
Sie haben alle Samples in diesem Dataset bereits bewertet. Danke für Ihre Mitarbeit!
</p> </p>
<div className="flex flex-col gap-4">
{PROTOTYPES.map((proto) => (
<Link <Link
href="/" key={proto.id}
className="px-6 py-3 bg-blue-600 hover:bg-blue-700 text-white font-semibold rounded-lg transition-colors" href={`/annotate/${datasetId}/${proto.id}`}
className="bg-white border border-gray-200 rounded-xl p-5 shadow-sm hover:border-blue-300 hover:shadow-md transition-all"
> >
Zurück zur Startseite <div className="flex items-center justify-between">
<div>
<h2 className="font-semibold text-gray-800">{proto.name}</h2>
<p className="text-sm text-gray-500 mt-0.5">{proto.description}</p>
</div>
<span className="text-gray-400 text-lg"></span>
</div>
</Link> </Link>
))}
</div>
</div> </div>
); );
} }
return <AnnotationView entries={entries} datasetId={datasetId} />;
}

View File

@@ -1,12 +1,13 @@
'use client'; 'use client';
import { useState, useTransition } from 'react'; import { useState, useEffect, useTransition } from 'react';
import Link from 'next/link'; import Link from 'next/link';
import WaveformPlayer from './WaveformPlayer'; import WaveformPlayer from '../WaveformPlayer';
import { saveAnnotations } from '@/app/actions/annotations'; import { saveAnnotations } from '@/app/actions/annotations';
import { type AnnotationEntry, DIALECT_LABELS } from '@/lib/dialects'; import { type AnnotationEntry, DIALECT_LABELS } from '@/lib/dialects';
const PAGE_SIZE = 5; const PAGE_SIZE = 1;
const AUTO_ADVANCE_DELAY_MS = 600;
const RATING_OPTIONS = (dialectLabel: string) => [ const RATING_OPTIONS = (dialectLabel: string) => [
{ value: 1, label: `Klingt überhaupt nicht nach ${dialectLabel}` }, { value: 1, label: `Klingt überhaupt nicht nach ${dialectLabel}` },
@@ -16,12 +17,12 @@ const RATING_OPTIONS = (dialectLabel: string) => [
{ value: 5, label: `Klingt eindeutig nach ${dialectLabel}` }, { value: 5, label: `Klingt eindeutig nach ${dialectLabel}` },
]; ];
interface AnnotationViewProps { interface SingleChoiceViewProps {
entries: AnnotationEntry[]; entries: AnnotationEntry[];
datasetId: number; datasetId: number;
} }
export default function AnnotationView({ entries, datasetId }: AnnotationViewProps) { export default function SingleChoiceView({ entries, datasetId }: SingleChoiceViewProps) {
const [isPending, startTransition] = useTransition(); const [isPending, startTransition] = useTransition();
@@ -29,7 +30,6 @@ export default function AnnotationView({ entries, datasetId }: AnnotationViewPro
const [answers, setAnswers] = useState<Record<number, number>>({}); const [answers, setAnswers] = useState<Record<number, number>>({});
const [fullyPlayed, setFullyPlayed] = useState<Set<number>>(new Set()); const [fullyPlayed, setFullyPlayed] = useState<Set<number>>(new Set());
const [activePlayerId, setActivePlayerId] = useState<number | null>(null); const [activePlayerId, setActivePlayerId] = useState<number | null>(null);
const [showHint, setShowHint] = useState(false);
const [isComplete, setIsComplete] = useState(false); const [isComplete, setIsComplete] = useState(false);
const totalPages = Math.ceil(entries.length / PAGE_SIZE); const totalPages = Math.ceil(entries.length / PAGE_SIZE);
@@ -40,13 +40,10 @@ export default function AnnotationView({ entries, datasetId }: AnnotationViewPro
pageEntries.length > 0 && pageEntries.length > 0 &&
pageEntries.every((e) => fullyPlayed.has(e.id) && answers[e.id] !== undefined); pageEntries.every((e) => fullyPlayed.has(e.id) && answers[e.id] !== undefined);
const handleWeiter = () => { useEffect(() => {
if (!allCurrentDone) { if (!allCurrentDone || isPending) return;
setShowHint(true);
return;
}
setShowHint(false);
const timer = setTimeout(() => {
const batch = pageEntries.map((e) => ({ entryId: e.id, rating: answers[e.id], dialectLabel: e.dialect })); const batch = pageEntries.map((e) => ({ entryId: e.id, rating: answers[e.id], dialectLabel: e.dialect }));
startTransition(async () => { startTransition(async () => {
await saveAnnotations(batch); await saveAnnotations(batch);
@@ -57,7 +54,11 @@ export default function AnnotationView({ entries, datasetId }: AnnotationViewPro
setActivePlayerId(null); setActivePlayerId(null);
} }
}); });
}; }, AUTO_ADVANCE_DELAY_MS);
return () => clearTimeout(timer);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [allCurrentDone]);
if (isComplete) { if (isComplete) {
return ( return (
@@ -80,10 +81,10 @@ export default function AnnotationView({ entries, datasetId }: AnnotationViewPro
return ( return (
<div className="max-w-3xl mx-auto"> <div className="max-w-3xl mx-auto">
{/* ── Top bar ─────────────────────────────────────────── */} {/* ── Top bar ─────────────────────────────────────────── */}
<div className="sticky top-[72px] z-40 bg-white border-b border-gray-200 pb-3 mb-6"> <div className="sticky top-[72px] z-40 bg-white border-b border-gray-200 pt-4 pb-3 mb-6">
<div className="flex items-center justify-between mb-2"> <div className="flex items-center justify-between mb-2">
<span className="text-sm text-gray-500"> <span className="text-sm text-gray-500">
Seite {currentPage + 1} von {totalPages} Sample {currentPage + 1} von {totalPages}
</span> </span>
<Link <Link
href="/" href="/"
@@ -114,7 +115,7 @@ export default function AnnotationView({ entries, datasetId }: AnnotationViewPro
return ( return (
<div <div
key={entry.id} key={entry.id}
className={`border rounded-xl p-5 bg-white shadow-sm transition-colors ${ className={`border rounded-xl p-5 bg-white shadow-sm transition-colors duration-300 ${
isListened && currentRating !== null isListened && currentRating !== null
? 'border-green-300' ? 'border-green-300'
: 'border-gray-200' : 'border-gray-200'
@@ -166,7 +167,7 @@ export default function AnnotationView({ entries, datasetId }: AnnotationViewPro
<div className="flex flex-col gap-2"> <div className="flex flex-col gap-2">
{RATING_OPTIONS(dialectLabel).map(({ value, label }) => { {RATING_OPTIONS(dialectLabel).map(({ value, label }) => {
const selected = currentRating === value; const selected = currentRating === value;
const disabled = !isListened; const disabled = !isListened || isPending;
return ( return (
<button <button
key={value} key={value}
@@ -200,28 +201,6 @@ export default function AnnotationView({ entries, datasetId }: AnnotationViewPro
); );
})} })}
</div> </div>
{/* ── Navigation ──────────────────────────────────────── */}
<div className="mt-8 mb-12 flex flex-col items-end gap-2">
{showHint && !allCurrentDone && (
<p className="text-sm text-red-600">
Bitte alle{' '}
{pageEntries.length < PAGE_SIZE ? pageEntries.length : PAGE_SIZE}{' '}
Samples vollständig anhören und bewerten, bevor Sie fortfahren.
</p>
)}
<button
onClick={handleWeiter}
disabled={isPending}
className={`px-8 py-3 rounded-lg font-semibold text-white transition-colors ${
allCurrentDone && !isPending
? 'bg-blue-600 hover:bg-blue-700 cursor-pointer'
: 'bg-gray-300 cursor-not-allowed'
}`}
>
{isPending ? 'Speichern…' : currentPage + 1 >= totalPages ? 'Abschließen' : 'Weiter →'}
</button>
</div>
</div> </div>
); );
} }

View File

@@ -15,14 +15,7 @@ export const annotation = sqliteTable(
createdAt: integer('created_at', { mode: 'timestamp' }) createdAt: integer('created_at', { mode: 'timestamp' })
.notNull() .notNull()
.default(sql`(unixepoch())`), .default(sql`(unixepoch())`),
}, }
(table) => [
uniqueIndex('annotation_user_entry_dialect_idx').on(
table.userId,
table.datasetEntryId,
table.dialectLabel
),
]
); );
export const annotationRelations = relations(annotation, ({ one }) => ({ export const annotationRelations = relations(annotation, ({ one }) => ({