Merge pull request #1 from averel10/prototyp-2-fabio
feat: add audio clip annotation view for dialect rating
This commit is contained in:
smaubio
9
drizzle/0007_light_spiral.sql
Normal file
9
drizzle/0007_light_spiral.sql
Normal 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
|
||||
);
|
||||
637
drizzle/meta/0007_snapshot.json
Normal file
637
drizzle/meta/0007_snapshot.json
Normal 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": {}
|
||||
}
|
||||
}
|
||||
@@ -50,6 +50,13 @@
|
||||
"when": 1773406006276,
|
||||
"tag": "0006_special_junta",
|
||||
"breakpoints": true
|
||||
},
|
||||
{
|
||||
"idx": 7,
|
||||
"version": "6",
|
||||
"when": 1773410584481,
|
||||
"tag": "0007_light_spiral",
|
||||
"breakpoints": true
|
||||
}
|
||||
]
|
||||
}
|
||||
106
src/app/actions/annotations.ts
Normal file
106
src/app/actions/annotations.ts
Normal file
@@ -0,0 +1,106 @@
|
||||
'use server';
|
||||
|
||||
import db from '@/lib/db';
|
||||
import { dataset_entry } from '@/lib/model/dataset_entry';
|
||||
import { dataset } from '@/lib/model/dataset';
|
||||
import { annotation } from '@/lib/model/annotation';
|
||||
import { eq, and } from 'drizzle-orm';
|
||||
import { auth } from '@/lib/auth';
|
||||
import { headers } from 'next/headers';
|
||||
import type { AnnotationEntry } from '@/lib/dialects';
|
||||
|
||||
/**
|
||||
* Returns unannotated entries for the given dataset and authenticated user.
|
||||
*/
|
||||
export async function getAnnotationEntries(datasetId: number): Promise<AnnotationEntry[]> {
|
||||
const session = await auth.api.getSession({ headers: await headers() });
|
||||
if (!session) throw new Error('Nicht angemeldet');
|
||||
|
||||
const allEntries = await db
|
||||
.select()
|
||||
.from(dataset_entry)
|
||||
.where(eq(dataset_entry.datasetId, datasetId));
|
||||
|
||||
if (allEntries.length === 0) return [];
|
||||
|
||||
// Find entries already annotated by this user in this dataset (via join)
|
||||
const annotated = await db
|
||||
.select({ entryId: annotation.datasetEntryId })
|
||||
.from(annotation)
|
||||
.innerJoin(dataset_entry, eq(annotation.datasetEntryId, dataset_entry.id))
|
||||
.where(
|
||||
and(
|
||||
eq(annotation.userId, session.user.id),
|
||||
eq(dataset_entry.datasetId, datasetId)
|
||||
)
|
||||
);
|
||||
|
||||
const annotatedIds = new Set(annotated.map((a) => a.entryId));
|
||||
const remaining = allEntries.filter((e) => !annotatedIds.has(e.id));
|
||||
|
||||
const mapped: AnnotationEntry[] = remaining.map((e) => ({
|
||||
id: e.id,
|
||||
externalId: e.externalId,
|
||||
fileName: e.fileName,
|
||||
dialect: e.dialect,
|
||||
durationMs: e.durationMs,
|
||||
datasetId: e.datasetId,
|
||||
}));
|
||||
|
||||
return mapped;
|
||||
}
|
||||
|
||||
/**
|
||||
* Persists a batch of ratings for the authenticated user.
|
||||
* Silently ignores duplicates (onConflictDoNothing).
|
||||
*/
|
||||
export async function saveAnnotations(
|
||||
ratings: { entryId: number; rating: number; dialectLabel: string }[]
|
||||
): Promise<void> {
|
||||
const session = await auth.api.getSession({ headers: await headers() });
|
||||
if (!session) throw new Error('Nicht angemeldet');
|
||||
|
||||
if (ratings.length === 0) return;
|
||||
|
||||
for (const { entryId, rating, dialectLabel } of ratings) {
|
||||
await db
|
||||
.insert(annotation)
|
||||
.values({ datasetEntryId: entryId, userId: session.user.id, rating, dialectLabel })
|
||||
.onConflictDoNothing();
|
||||
}
|
||||
}
|
||||
|
||||
/** Returns all datasets (for the home page). */
|
||||
export async function getAllDatasets() {
|
||||
return db.select().from(dataset).orderBy(dataset.name);
|
||||
}
|
||||
|
||||
/** Returns annotation progress for the current user in a dataset. */
|
||||
export async function getAnnotationProgress(
|
||||
datasetId: number
|
||||
): Promise<{ total: number; done: number }> {
|
||||
const session = await auth.api.getSession({ headers: await headers() });
|
||||
|
||||
const allEntries = await db
|
||||
.select({ id: dataset_entry.id })
|
||||
.from(dataset_entry)
|
||||
.where(eq(dataset_entry.datasetId, datasetId));
|
||||
|
||||
if (!session || allEntries.length === 0) {
|
||||
return { total: allEntries.length, done: 0 };
|
||||
}
|
||||
|
||||
const annotated = await db
|
||||
.select({ entryId: annotation.datasetEntryId })
|
||||
.from(annotation)
|
||||
.innerJoin(dataset_entry, eq(annotation.datasetEntryId, dataset_entry.id))
|
||||
.where(
|
||||
and(
|
||||
eq(annotation.userId, session.user.id),
|
||||
eq(dataset_entry.datasetId, datasetId)
|
||||
)
|
||||
);
|
||||
|
||||
return { total: allEntries.length, done: annotated.length };
|
||||
}
|
||||
|
||||
57
src/app/annotate/[datasetId]/[prototype]/page.tsx
Normal file
57
src/app/annotate/[datasetId]/[prototype]/page.tsx
Normal 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} />;
|
||||
}
|
||||
53
src/app/annotate/[datasetId]/page.tsx
Normal file
53
src/app/annotate/[datasetId]/page.tsx
Normal file
@@ -0,0 +1,53 @@
|
||||
import { redirect } from 'next/navigation';
|
||||
import { headers } from 'next/headers';
|
||||
import Link from 'next/link';
|
||||
import { auth } from '@/lib/auth';
|
||||
|
||||
const PROTOTYPES = [
|
||||
{
|
||||
id: 'single-choice',
|
||||
name: 'Single Choice',
|
||||
description: 'Bewerten Sie jedes Sample auf einer Skala von 1–5.',
|
||||
},
|
||||
];
|
||||
|
||||
interface Props {
|
||||
params: Promise<{ datasetId: string }>;
|
||||
}
|
||||
|
||||
export default async function PrototypeSelectionPage({ params }: Props) {
|
||||
const session = await auth.api.getSession({ headers: await headers() });
|
||||
if (!session) redirect('/user/sign-in');
|
||||
|
||||
const { datasetId } = await params;
|
||||
|
||||
return (
|
||||
<div className="max-w-2xl mx-auto py-8">
|
||||
<Link href="/" className="text-sm text-gray-500 hover:text-gray-700 mb-6 inline-block">
|
||||
← Zurück zur Startseite
|
||||
</Link>
|
||||
<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.
|
||||
</p>
|
||||
|
||||
<div className="flex flex-col gap-4">
|
||||
{PROTOTYPES.map((proto) => (
|
||||
<Link
|
||||
key={proto.id}
|
||||
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"
|
||||
>
|
||||
<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>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
110
src/app/page.tsx
110
src/app/page.tsx
@@ -1,5 +1,109 @@
|
||||
"use client";
|
||||
import Link from 'next/link';
|
||||
import { headers } from 'next/headers';
|
||||
import { auth } from '@/lib/auth';
|
||||
import { getAllDatasets, getAnnotationProgress } from '@/app/actions/annotations';
|
||||
|
||||
export default function Page() {
|
||||
return <h1>Hello Next.js!</h1>
|
||||
export default async function HomePage() {
|
||||
const session = await auth.api.getSession({ headers: await headers() });
|
||||
|
||||
if (!session) {
|
||||
return (
|
||||
<div className="max-w-xl mx-auto text-center py-20">
|
||||
<h1 className="text-3xl font-bold text-gray-800 mb-4">
|
||||
Willkommen zur Dialektannotation
|
||||
</h1>
|
||||
<p className="text-gray-600 mb-8">
|
||||
Bitte melden Sie sich an, um mit der Annotation zu beginnen.
|
||||
</p>
|
||||
<Link
|
||||
href="/user/sign-in"
|
||||
className="px-6 py-3 bg-blue-600 hover:bg-blue-700 text-white font-semibold rounded-lg transition-colors"
|
||||
>
|
||||
Anmelden
|
||||
</Link>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const datasets = await getAllDatasets();
|
||||
|
||||
if (datasets.length === 0) {
|
||||
return (
|
||||
<div className="max-w-xl mx-auto text-center py-20">
|
||||
<h1 className="text-2xl font-bold text-gray-800 mb-3">
|
||||
Keine Datasets verfügbar
|
||||
</h1>
|
||||
<p className="text-gray-500">
|
||||
Es wurden noch keine Datasets angelegt. Wenden Sie sich an einen Administrator.
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Fetch progress for all datasets in parallel
|
||||
const progressData = await Promise.all(
|
||||
datasets.map((ds) => getAnnotationProgress(ds.id))
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="max-w-2xl mx-auto py-8">
|
||||
<h1 className="text-2xl font-bold text-gray-800 mb-2">Datasets</h1>
|
||||
<p className="text-gray-500 mb-8">
|
||||
Wählen Sie ein Dataset aus, um mit der Annotation zu beginnen oder fortzufahren.
|
||||
</p>
|
||||
|
||||
<div className="flex flex-col gap-4">
|
||||
{datasets.map((ds, i) => {
|
||||
const { total, done } = progressData[i];
|
||||
const pct = total > 0 ? Math.round((done / total) * 100) : 0;
|
||||
const isFinished = total > 0 && done >= total;
|
||||
|
||||
return (
|
||||
<div
|
||||
key={ds.id}
|
||||
className="bg-white border border-gray-200 rounded-xl p-5 shadow-sm"
|
||||
>
|
||||
<div className="flex items-start justify-between gap-4">
|
||||
<div className="flex-1 min-w-0">
|
||||
<h2 className="font-semibold text-gray-800 truncate">{ds.name}</h2>
|
||||
{ds.description && (
|
||||
<p className="text-sm text-gray-500 mt-0.5">{ds.description}</p>
|
||||
)}
|
||||
|
||||
{/* Progress */}
|
||||
<div className="mt-3">
|
||||
<div className="flex justify-between text-xs text-gray-400 mb-1">
|
||||
<span>{done} / {total} bewertet</span>
|
||||
<span>{pct}%</span>
|
||||
</div>
|
||||
<div className="w-full bg-gray-200 rounded-full h-2">
|
||||
<div
|
||||
className={`h-2 rounded-full transition-all ${
|
||||
isFinished ? 'bg-green-500' : 'bg-blue-500'
|
||||
}`}
|
||||
style={{ width: `${pct}%` }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Link
|
||||
href={`/annotate/${ds.id}`}
|
||||
className={`flex-shrink-0 px-4 py-2 rounded-lg font-medium text-sm transition-colors ${
|
||||
isFinished
|
||||
? 'bg-green-100 text-green-700 hover:bg-green-200'
|
||||
: done > 0
|
||||
? 'bg-blue-600 hover:bg-blue-700 text-white'
|
||||
: 'bg-blue-600 hover:bg-blue-700 text-white'
|
||||
}`}
|
||||
>
|
||||
{isFinished ? '✓ Fertig' : done > 0 ? 'Fortsetzen' : 'Starten'}
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
206
src/components/AnnotationViews/SingleChoiceView.tsx
Normal file
206
src/components/AnnotationViews/SingleChoiceView.tsx
Normal file
@@ -0,0 +1,206 @@
|
||||
'use client';
|
||||
|
||||
import { useState, useEffect, useTransition } from 'react';
|
||||
import Link from 'next/link';
|
||||
import WaveformPlayer from '../WaveformPlayer';
|
||||
import { saveAnnotations } from '@/app/actions/annotations';
|
||||
import { type AnnotationEntry, DIALECT_LABELS } from '@/lib/dialects';
|
||||
|
||||
const PAGE_SIZE = 1;
|
||||
const AUTO_ADVANCE_DELAY_MS = 600;
|
||||
|
||||
const RATING_OPTIONS = (dialectLabel: string) => [
|
||||
{ value: 1, label: `Klingt überhaupt nicht nach ${dialectLabel}` },
|
||||
{ value: 2, label: `Klingt eher nicht nach ${dialectLabel}` },
|
||||
{ value: 3, label: 'Schwer zu beurteilen' },
|
||||
{ value: 4, label: `Klingt eher nach ${dialectLabel}` },
|
||||
{ value: 5, label: `Klingt eindeutig nach ${dialectLabel}` },
|
||||
];
|
||||
|
||||
interface SingleChoiceViewProps {
|
||||
entries: AnnotationEntry[];
|
||||
datasetId: number;
|
||||
}
|
||||
|
||||
export default function SingleChoiceView({ entries, datasetId }: SingleChoiceViewProps) {
|
||||
|
||||
const [isPending, startTransition] = useTransition();
|
||||
|
||||
const [currentPage, setCurrentPage] = useState(0);
|
||||
const [answers, setAnswers] = useState<Record<number, number>>({});
|
||||
const [fullyPlayed, setFullyPlayed] = useState<Set<number>>(new Set());
|
||||
const [activePlayerId, setActivePlayerId] = useState<number | null>(null);
|
||||
const [isComplete, setIsComplete] = useState(false);
|
||||
|
||||
const totalPages = Math.ceil(entries.length / PAGE_SIZE);
|
||||
const pageEntries = entries.slice(currentPage * PAGE_SIZE, (currentPage + 1) * PAGE_SIZE);
|
||||
const progressPct = Math.round((currentPage / totalPages) * 100);
|
||||
|
||||
const allCurrentDone =
|
||||
pageEntries.length > 0 &&
|
||||
pageEntries.every((e) => fullyPlayed.has(e.id) && answers[e.id] !== undefined);
|
||||
|
||||
useEffect(() => {
|
||||
if (!allCurrentDone || isPending) return;
|
||||
|
||||
const timer = setTimeout(() => {
|
||||
const batch = pageEntries.map((e) => ({ entryId: e.id, rating: answers[e.id], dialectLabel: e.dialect }));
|
||||
startTransition(async () => {
|
||||
await saveAnnotations(batch);
|
||||
if (currentPage + 1 >= totalPages) {
|
||||
setIsComplete(true);
|
||||
} else {
|
||||
setCurrentPage((p) => p + 1);
|
||||
setActivePlayerId(null);
|
||||
}
|
||||
});
|
||||
}, AUTO_ADVANCE_DELAY_MS);
|
||||
|
||||
return () => clearTimeout(timer);
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [allCurrentDone]);
|
||||
|
||||
if (isComplete) {
|
||||
return (
|
||||
<div className="max-w-xl mx-auto text-center py-20">
|
||||
<div className="text-5xl mb-4">✓</div>
|
||||
<h1 className="text-3xl font-bold text-green-600 mb-3">Fertig!</h1>
|
||||
<p className="text-gray-600 mb-8">
|
||||
Alle Samples wurden erfolgreich bewertet. Vielen Dank!
|
||||
</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 (
|
||||
<div className="max-w-3xl mx-auto">
|
||||
{/* ── Top bar ─────────────────────────────────────────── */}
|
||||
<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">
|
||||
<span className="text-sm text-gray-500">
|
||||
Sample {currentPage + 1} von {totalPages}
|
||||
</span>
|
||||
<Link
|
||||
href="/"
|
||||
className="text-sm px-3 py-1.5 bg-gray-100 hover:bg-gray-200 text-gray-700 rounded-md transition-colors"
|
||||
>
|
||||
← Zurück zur Startseite
|
||||
</Link>
|
||||
</div>
|
||||
{/* Progress bar */}
|
||||
<div className="w-full bg-gray-200 rounded-full h-2.5">
|
||||
<div
|
||||
className="bg-blue-500 h-2.5 rounded-full transition-all duration-500"
|
||||
style={{ width: `${progressPct}%` }}
|
||||
/>
|
||||
</div>
|
||||
<div className="text-xs text-gray-400 mt-1 text-right">{progressPct}% abgeschlossen</div>
|
||||
</div>
|
||||
|
||||
{/* ── Sample cards ────────────────────────────────────── */}
|
||||
<div className="flex flex-col gap-6">
|
||||
{pageEntries.map((entry, idx) => {
|
||||
const dialectLabel = DIALECT_LABELS[entry.dialect] ?? entry.dialect;
|
||||
const fileExt = entry.fileName.substring(entry.fileName.lastIndexOf('.'));
|
||||
const audioSrc = `/public/datasets/${datasetId}/${entry.externalId}${fileExt}`;
|
||||
const isListened = fullyPlayed.has(entry.id);
|
||||
const currentRating = answers[entry.id] ?? null;
|
||||
|
||||
return (
|
||||
<div
|
||||
key={entry.id}
|
||||
className={`border rounded-xl p-5 bg-white shadow-sm transition-colors duration-300 ${
|
||||
isListened && currentRating !== null
|
||||
? 'border-green-300'
|
||||
: 'border-gray-200'
|
||||
}`}
|
||||
>
|
||||
{/* Sample header */}
|
||||
<div className="flex items-center justify-between mb-3">
|
||||
<span className="text-xs font-medium text-gray-400 uppercase tracking-wide">
|
||||
Sample {currentPage * PAGE_SIZE + idx + 1}
|
||||
</span>
|
||||
{isListened && (
|
||||
<span className="text-xs text-green-600 font-medium">
|
||||
✓ Gehört
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Waveform player */}
|
||||
<WaveformPlayer
|
||||
src={audioSrc}
|
||||
durationMs={entry.durationMs}
|
||||
isActive={activePlayerId === entry.id}
|
||||
onPlay={() => setActivePlayerId(entry.id)}
|
||||
onFullyPlayed={() =>
|
||||
setFullyPlayed((prev) => {
|
||||
const next = new Set(prev);
|
||||
next.add(entry.id);
|
||||
return next;
|
||||
})
|
||||
}
|
||||
/>
|
||||
|
||||
{/* Must-listen hint */}
|
||||
{!isListened && (
|
||||
<p className="text-xs text-amber-600 mt-2">
|
||||
Bitte das Sample vollständig anhören, bevor Sie eine Bewertung abgeben.
|
||||
</p>
|
||||
)}
|
||||
|
||||
{/* Dialect + question */}
|
||||
<div className="mt-4 mb-3">
|
||||
<p className="text-sm font-semibold text-gray-700">
|
||||
Wie authentisch klingt dieses Sample nach dem Dialekt der Region{' '}
|
||||
<span className="text-blue-600">{dialectLabel}</span>?
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Rating buttons */}
|
||||
<div className="flex flex-col gap-2">
|
||||
{RATING_OPTIONS(dialectLabel).map(({ value, label }) => {
|
||||
const selected = currentRating === value;
|
||||
const disabled = !isListened || isPending;
|
||||
return (
|
||||
<button
|
||||
key={value}
|
||||
disabled={disabled}
|
||||
onClick={() =>
|
||||
setAnswers((prev) => ({ ...prev, [entry.id]: value }))
|
||||
}
|
||||
className={`flex items-center gap-3 w-full text-left px-4 py-2.5 rounded-lg border text-sm transition-colors ${
|
||||
disabled
|
||||
? 'opacity-40 cursor-not-allowed border-gray-200 bg-gray-50 text-gray-500'
|
||||
: selected
|
||||
? 'border-blue-500 bg-blue-50 text-blue-800 font-medium'
|
||||
: 'border-gray-200 hover:border-blue-300 hover:bg-blue-50 text-gray-700'
|
||||
}`}
|
||||
>
|
||||
<span
|
||||
className={`flex-shrink-0 w-6 h-6 rounded-full border-2 flex items-center justify-center text-xs font-bold ${
|
||||
selected
|
||||
? 'border-blue-500 bg-blue-500 text-white'
|
||||
: 'border-gray-300 text-gray-400'
|
||||
}`}
|
||||
>
|
||||
{value}
|
||||
</span>
|
||||
{label}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
187
src/components/WaveformPlayer.tsx
Normal file
187
src/components/WaveformPlayer.tsx
Normal file
@@ -0,0 +1,187 @@
|
||||
'use client';
|
||||
|
||||
import { useEffect, useRef, useState, useCallback } from 'react';
|
||||
|
||||
interface WaveformPlayerProps {
|
||||
src: string;
|
||||
durationMs?: number | null;
|
||||
/** When false the player should stop if it was playing */
|
||||
isActive: boolean;
|
||||
onPlay: () => void;
|
||||
onFullyPlayed: () => void;
|
||||
}
|
||||
|
||||
const BAR_COUNT = 120;
|
||||
|
||||
export default function WaveformPlayer({
|
||||
src,
|
||||
durationMs,
|
||||
isActive,
|
||||
onPlay,
|
||||
onFullyPlayed,
|
||||
}: WaveformPlayerProps) {
|
||||
const audioRef = useRef<HTMLAudioElement>(null);
|
||||
const canvasRef = useRef<HTMLCanvasElement>(null);
|
||||
const rafRef = useRef<number>(0);
|
||||
|
||||
const [isPlaying, setIsPlaying] = useState(false);
|
||||
const [currentTime, setCurrentTime] = useState(0);
|
||||
const [duration, setDuration] = useState<number>(durationMs ? durationMs / 1000 : 0);
|
||||
const [peaks, setPeaks] = useState<number[]>([]);
|
||||
const fullyPlayedRef = useRef(false);
|
||||
|
||||
// Stop if another player became active
|
||||
useEffect(() => {
|
||||
if (!isActive && isPlaying) {
|
||||
audioRef.current?.pause();
|
||||
cancelAnimationFrame(rafRef.current);
|
||||
setIsPlaying(false);
|
||||
}
|
||||
}, [isActive, isPlaying]);
|
||||
|
||||
// Decode audio and generate waveform peaks
|
||||
useEffect(() => {
|
||||
let cancelled = false;
|
||||
(async () => {
|
||||
try {
|
||||
const res = await fetch(src);
|
||||
const buf = await res.arrayBuffer();
|
||||
const actx = new AudioContext();
|
||||
const decoded = await actx.decodeAudioData(buf);
|
||||
if (cancelled) return;
|
||||
|
||||
const data = decoded.getChannelData(0);
|
||||
const blockSize = Math.floor(data.length / BAR_COUNT);
|
||||
const raw: number[] = [];
|
||||
for (let i = 0; i < BAR_COUNT; i++) {
|
||||
let sum = 0;
|
||||
for (let j = 0; j < blockSize; j++) {
|
||||
sum += Math.abs(data[i * blockSize + j]);
|
||||
}
|
||||
raw.push(sum / blockSize);
|
||||
}
|
||||
const max = Math.max(...raw, 0.001);
|
||||
if (!cancelled) setPeaks(raw.map((v) => v / max));
|
||||
await actx.close();
|
||||
} catch {
|
||||
if (!cancelled) setPeaks(Array(BAR_COUNT).fill(0.5));
|
||||
}
|
||||
})();
|
||||
return () => { cancelled = true; };
|
||||
}, [src]);
|
||||
|
||||
// Draw waveform on canvas whenever peaks or playback position change
|
||||
useEffect(() => {
|
||||
const canvas = canvasRef.current;
|
||||
if (!canvas || peaks.length === 0) return;
|
||||
const ctx = canvas.getContext('2d');
|
||||
if (!ctx) return;
|
||||
const { width, height } = canvas;
|
||||
ctx.clearRect(0, 0, width, height);
|
||||
const progress = duration > 0 ? Math.min(currentTime / duration, 1) : 0;
|
||||
const barW = Math.max(1, width / BAR_COUNT - 1);
|
||||
|
||||
peaks.forEach((peak, i) => {
|
||||
const x = (i / BAR_COUNT) * width;
|
||||
const barH = Math.max(2, peak * height * 0.85);
|
||||
const y = (height - barH) / 2;
|
||||
const played = i / BAR_COUNT < progress;
|
||||
ctx.fillStyle = played ? '#3b82f6' : '#d1d5db';
|
||||
ctx.beginPath();
|
||||
ctx.roundRect(x, y, barW, barH, 2);
|
||||
ctx.fill();
|
||||
});
|
||||
}, [peaks, currentTime, duration]);
|
||||
|
||||
const tick = useCallback(() => {
|
||||
const audio = audioRef.current;
|
||||
if (!audio) return;
|
||||
setCurrentTime(audio.currentTime);
|
||||
rafRef.current = requestAnimationFrame(tick);
|
||||
}, []);
|
||||
|
||||
const handlePlay = () => {
|
||||
const audio = audioRef.current;
|
||||
if (!audio) return;
|
||||
onPlay();
|
||||
audio.play();
|
||||
setIsPlaying(true);
|
||||
rafRef.current = requestAnimationFrame(tick);
|
||||
};
|
||||
|
||||
const handlePause = () => {
|
||||
const audio = audioRef.current;
|
||||
if (!audio) return;
|
||||
audio.pause();
|
||||
setIsPlaying(false);
|
||||
cancelAnimationFrame(rafRef.current);
|
||||
};
|
||||
|
||||
const handleEnded = () => {
|
||||
setIsPlaying(false);
|
||||
cancelAnimationFrame(rafRef.current);
|
||||
if (!fullyPlayedRef.current) {
|
||||
fullyPlayedRef.current = true;
|
||||
onFullyPlayed();
|
||||
}
|
||||
};
|
||||
|
||||
const handleLoadedMetadata = () => {
|
||||
if (audioRef.current) setDuration(audioRef.current.duration);
|
||||
};
|
||||
|
||||
const fmt = (s: number) => {
|
||||
const m = Math.floor(s / 60);
|
||||
const sec = Math.floor(s % 60);
|
||||
return `${m}:${sec.toString().padStart(2, '0')}`;
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-2">
|
||||
<audio
|
||||
ref={audioRef}
|
||||
src={src}
|
||||
onEnded={handleEnded}
|
||||
onLoadedMetadata={handleLoadedMetadata}
|
||||
preload="metadata"
|
||||
/>
|
||||
<div className="flex items-center gap-3">
|
||||
{/* Play / Pause button */}
|
||||
<button
|
||||
onClick={isPlaying ? handlePause : handlePlay}
|
||||
className={`flex-shrink-0 inline-flex items-center justify-center w-9 h-9 rounded-full transition-colors ${
|
||||
isPlaying
|
||||
? 'bg-red-500 hover:bg-red-600 text-white'
|
||||
: 'bg-blue-500 hover:bg-blue-600 text-white'
|
||||
}`}
|
||||
title={isPlaying ? 'Pause' : 'Abspielen'}
|
||||
>
|
||||
{isPlaying ? (
|
||||
<svg className="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
|
||||
<rect x="5" y="4" width="3" height="12" rx="1" />
|
||||
<rect x="12" y="4" width="3" height="12" rx="1" />
|
||||
</svg>
|
||||
) : (
|
||||
<svg className="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path d="M6.3 2.841A1.5 1.5 0 004 4.11v11.78a1.5 1.5 0 002.3 1.269l9.344-5.89a1.5 1.5 0 000-2.538L6.3 2.84z" />
|
||||
</svg>
|
||||
)}
|
||||
</button>
|
||||
|
||||
{/* Waveform canvas */}
|
||||
<canvas
|
||||
ref={canvasRef}
|
||||
width={480}
|
||||
height={48}
|
||||
className="flex-1 rounded"
|
||||
style={{ imageRendering: 'pixelated' }}
|
||||
/>
|
||||
|
||||
{/* Duration */}
|
||||
<span className="flex-shrink-0 text-sm text-gray-500 w-10 text-right tabular-nums">
|
||||
{fmt(duration)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
19
src/lib/dialects.ts
Normal file
19
src/lib/dialects.ts
Normal file
@@ -0,0 +1,19 @@
|
||||
export const DIALECT_LABELS: Record<string, string> = {
|
||||
ch_be: 'Bern',
|
||||
ch_bs: 'Basel',
|
||||
ch_gr: 'Graubünden',
|
||||
ch_in: 'Innerschweiz',
|
||||
ch_os: 'Ostschweiz',
|
||||
ch_vs: 'Wallis',
|
||||
ch_zh: 'Zürich',
|
||||
de: 'Deutsch',
|
||||
};
|
||||
|
||||
export type AnnotationEntry = {
|
||||
id: number;
|
||||
externalId: string;
|
||||
fileName: string;
|
||||
dialect: string;
|
||||
durationMs: number | null;
|
||||
datasetId: number;
|
||||
};
|
||||
29
src/lib/model/annotation.ts
Normal file
29
src/lib/model/annotation.ts
Normal file
@@ -0,0 +1,29 @@
|
||||
import { sqliteTable, text, integer, uniqueIndex } from 'drizzle-orm/sqlite-core';
|
||||
import { relations, sql } from 'drizzle-orm';
|
||||
import { dataset_entry } from './dataset_entry';
|
||||
|
||||
export const annotation = sqliteTable(
|
||||
'annotation',
|
||||
{
|
||||
id: integer('id').primaryKey({ autoIncrement: true }),
|
||||
datasetEntryId: integer('dataset_entry_id')
|
||||
.notNull()
|
||||
.references(() => dataset_entry.id),
|
||||
userId: text('user_id').notNull(),
|
||||
rating: integer('rating').notNull(), // 1–5
|
||||
dialectLabel: text('dialect_label').notNull(), // e.g. 'ch_be', 'ch_zh', …
|
||||
createdAt: integer('created_at', { mode: 'timestamp' })
|
||||
.notNull()
|
||||
.default(sql`(unixepoch())`),
|
||||
}
|
||||
);
|
||||
|
||||
export const annotationRelations = relations(annotation, ({ one }) => ({
|
||||
datasetEntry: one(dataset_entry, {
|
||||
fields: [annotation.datasetEntryId],
|
||||
references: [dataset_entry.id],
|
||||
}),
|
||||
}));
|
||||
|
||||
export type Annotation = typeof annotation.$inferSelect;
|
||||
export type NewAnnotation = typeof annotation.$inferInsert;
|
||||
Reference in New Issue
Block a user