AnonyMate-frontend

AnonyMate is a modern web application for redacting sensitive information from free-form text and PDF documents. Users choose which entity types to detect and list terms that must stay visible; everything found is redacted until they say otherwise. Built with Nuxt 4 and TypeScript, the whole pipeline — document queue, review, and storage — runs client-side in the browser.

This repository contains the frontend application; the backend is built with Python FastAPI and available at https://github.com/DCC-BS/anony-mate-api.

DCC Documentation & Guidelines | DCC Website

• Text & PDF Review: Review detections either on the original text in the editor or directly on the uploaded PDF in the browser's viewer — the original file is kept and every detection arrives as a mark with its boxes on the page.
• Entity Type Management: Curated presets (default, legal, full) seeded on first run, plus custom entity types with display names, detector descriptions, and replacement templates ({name}, {label}, {subject}, {occurrence}).
• Detection Groups: Named sets of entity types chosen when a document is queued; swapping a group re-detects the document. Built-in groups can be copied into groups of your own.
• Never-Redact List: Terms exempt from redaction — they stay visible even when a detector matches them.
• Client-Owned Pipeline: The document queue (staged → converting → redacting → ready) lives entirely in IndexedDB; a reload picks up whatever is unfinished. Documents are cleaned up after a configurable retention period.
• Safe-By-Default Review: Every detection arrives redacted and stays that way unless explicitly un-redacted. A review wizard walks the redactions one at a time; a threshold slider raises the confidence floor per document.
• Hand Marking: File detections by hand — words selected in the editor or a rectangle drawn over a PDF page — each arriving as a redacted detection of the chosen entity type. Hand-drawn marks' guessed text is editable inline.
• Redaction Styles: Write redactions as the entity type's placeholder (e.g. Person-1) or as black bars (████).
• Annotated PDF Export: PDF reviews export the original with one redaction annotation (ISO 32000) per kept mark, ready for Kofax Power PDF or Acrobat to apply.
• Multilingual Support: German (de-CH) and English interface.

• Framework: Nuxt 4 (Vue 3 Composition API with <script setup lang="ts">)
• UI & Styling: Nuxt UI v4 & Tailwind CSS v4
• Icons: Lucide Icons via @iconify-json/lucide
• PDF Rendering: pdf.js via @dcc-bs/common-ui.bs.js
• Client Storage: Dexie (IndexedDB) for documents, detections, and entity groups
• Internationalization: @nuxtjs/i18n
• Environment & Secrets: Varlock with Proton Pass plugin
• Package Manager: Bun
• Tool Version Manager: Mise
• Linter & Formatter: Biome
• Testing: Vitest (Unit) & Playwright (E2E)

We recommend using mise to automatically manage tool versions (Bun, Node.js, Varlock, pass-cli):

mise install

Create a .env file in the project root with the basic environment mode:

APP_MODE=dev      # dev, ci, build, prod

Environment variables are validated using Varlock schemas (.env.schema, .env.runtime.schema, .env.buildtime.schema, .env.dev.schema):

We use varlock for schema-based validation and optional secret retrieval from Proton Pass:

# Validate and load secrets into the environment
mise run env

Start the development server (backend API expected at http://localhost:8000):

# Using mise
mise run dev

# Or via varlock directly
npx varlock run -- nuxt dev

mise run debug

Run the frontend with mocked backend responses (no Python backend or detection model required):

mise run dummy

app/
├── assets/                 # Main CSS styles
├── components/             # Vue components (PascalCase)
│   ├── documents/          # Document queue table & status badges
│   ├── entities/           # Entity type, group & never-redact editors
│   ├── new/                # New-document form (group & output selection)
│   └── review/             # Editor/PDF review, detection sidebar, wizard
├── composables/            # Reactive Vue composables (useXxx)
├── layouts/                # Page layouts
├── pages/                  # Route pages
├── plugins/                # Client plugins
├── stores/                 # Client-side state
├── types/                  # TypeScript models
└── utils/                  # Framework-agnostic utilities
server/
├── api/                    # Nitro API endpoints
└── assets/                 # Changelogs
shared/
└── types/                  # Shared TypeScript types (client & server)
i18n/
└── locales/                # de-CH & en translations
test/                       # Vitest config & setup
e2e/                        # Playwright E2E tests (*.spec.ts)
docker/                     # Docker compose files & Nginx config

# Run all unit tests
mise run test:unit

# Run tests in watch mode
mise run test:watch

# Run with coverage report
mise run test:coverage

# TypeScript strict type check
mise run tsc

# Biome code formatting
mise run lint

# Biome check & autofix
mise run check

# Build, serve and run all E2E tests
mise run e2e

# Run with Playwright interactive UI
mise run e2e:ui

# Generate tests via Playwright codegen (requires a running e2e:serve)
mise run e2e:codegen

# Build production bundle
mise run build

# Preview production build locally
mise run preview

Build and run using the multi-stage Dockerfile:

# Build Docker image
docker build -t anony-mate-frontend .

# Run container
docker run -p 3000:3000 anony-mate-frontend

MIT © Data Competence Center Basel-Stadt

Datenwissenschaften und KI
Developed with ❤️ by DCC - Data Competence Center