# mizcausevic-dev/watermark-stress-test architecture

> Architecture diagram of the GitHub repository mizcausevic-dev/watermark-stress-test, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-26). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/mizcausevic-dev/watermark-stress-test
- Repository: https://github.com/mizcausevic-dev/watermark-stress-test

## Overview

**Purpose and principal workflow.** Watermark Stress Test is a static, browser-only teaching lab that demonstrates how edits can weaken a synthetic image or text watermark and contrasts fragile embedded signals with cryptographic provenance. A **Browser user** initiates the workflow by opening the app and selecting a lab or briefing; the React interface runs the simulations locally and renders their results. It does not connect to production watermark detectors, upload user media, or provide a C2PA integration.

**Components**

*Application shell and teaching material*
- **React mount** — `src/main.tsx`: mounts the React application into the page root, wrapped in `StrictMode`.
- **Lab shell and navigation** — `src/App.tsx`: presents the educational-scope notice and switches among the app’s tabbed lab and briefing content; sampled code shows image, pipeline, credential-showdown, and glossary views.
- **Educational reference content** — `src/components/CredentialShowdown.tsx`: a credential/provenance teaching view, included as a tab in the app shell. The sampled excerpt does not establish its internal behavior.
- **Briefing and glossary UI** — `src/components/Glossary.tsx`: renders the technical reference section used to explain watermarking and provenance concepts.
- **Shared teaching material** — `src/data.ts`: supplies image-lab methods, research topics, and initial pipeline node/edge data; `src/data/glossary.ts`: holds glossary definitions shared by inline terms and the full glossary view.

*Image simulation and analysis*
- **Image lab** — `src/components/ImageSandbox.tsx`: manages the image exercise’s local controls and results, including watermark strength, bypass method, view/comparison modes, and detection state; its sampled code injects the synthetic signal into image buffers.
- **Image signal-processing toolkit** — `src/utils/imageFilters.ts`: implements browser-side synthetic watermark injection, scanning, and image transformations such as frequency filtering, jitter, quantization, and denoising.
- **Attack analysis lab** — `src/components/AnalysisLab.tsx`: compares simulated attacks by scanning transformed images and calculating image similarity; the excerpt shows detection and SSIM results.
- **Image metrics** — `src/utils/metrics.ts`: calculates image-quality and difference metrics, including MSE, PSNR, SSIM, changed-pixel percentage, and difference heatmaps; also exposes a Web Crypto SHA-256 helper.
- **Live perturbation pipeline** — `src/components/ComfyUIWorkflow.tsx`: runs an in-browser, node-configurable image pipeline; sampled code injects and scans a synthetic watermark, then applies notch filtering and quantization stages.

*Text, audio, and supporting UI*
- **Text watermark sandbox** — `src/components/TextBypassSandbox.tsx`: presents a token-bias simulation, text-edit controls, and a Z-score-based detection display. The excerpt does not establish the precise implementation of its scoring logic.
- **Audio lab** — `src/components/AudioLab.tsx`: a distinct audio-oriented lab is present in the source tree; its behavior and connection to the app shell are not established by the sampled code.
- **Shared interface helpers** — `src/components/GlossaryTerm.tsx`: renders inline glossary references; `src/components/Tooltip.tsx`: provides explanatory tooltip UI used by lab components.

*External runtime*
- **Browser user** — `null` repository path: the person operating the teaching lab; the README describes a client-side experience with no backend, API key, or telemetry.

**Relationships**
- **Browser user -> React mount:** opens the static app in a browser; the README describes the browser-run product.
- **React mount -> Lab shell and navigation:** renders the root React component; `src/main.tsx` imports and mounts `App`.
- **Lab shell and navigation -> Image lab:** displays the image exercise as a selectable view; the app excerpt shows an images tab.
- **Lab shell and navigation -> Live perturbation pipeline:** displays the pipeline view; the app excerpt shows a `comfy` tab.
- **Lab shell and navigation -> Credential/provenance teaching view:** displays the credential-showdown view; the app excerpt renders `CredentialShowdown`.
- **Lab shell and navigation -> Briefing and glossary UI:** renders the glossary view; the app excerpt includes `Glossary`.
- **Image lab -> Image signal-processing toolkit:** injects the synthetic watermark into image data; the sampled image-lab code calls `injectSynthIDWatermark`.
- **Attack analysis lab -> Image signal-processing toolkit:** applies simulated attacks and scans transformed images; sampled imports and calculations call the image utilities.
- **Attack analysis lab -> Image metrics:** calculates SSIM for transformed images; sampled code calls `ssim`.
- **Live perturbation pipeline -> Image signal-processing toolkit:** injects and scans the synthetic signal and applies pipeline transforms; sampled code calls the corresponding functions.
- **Image lab -> Browser:** reads and renders image data locally; the README describes client-side canvas processing and states that loaded content is not uploaded.
- **Briefing and glossary UI -> Shared teaching material:** renders the glossary entries; the glossary module documents the full and inline renderers as its consumers.

**Coverage limits.** Several source excerpts are partial, and most component implementations were not supplied. The exact tab wiring and behavior of the audio lab, credential view, and text scoring are therefore not established. No server, remote API, telemetry, or production watermark service is evidenced; the README explicitly describes the app as browser-only.

Main entry points: [`src/App.tsx`](https://github.com/mizcausevic-dev/watermark-stress-test/blob/main/src/App.tsx) (Lab shell), [`src/components/ImageSandbox.tsx`](https://github.com/mizcausevic-dev/watermark-stress-test/blob/main/src/components/ImageSandbox.tsx) (Image lab), [`src/utils/imageFilters.ts`](https://github.com/mizcausevic-dev/watermark-stress-test/blob/main/src/utils/imageFilters.ts) (Image toolkit), [`src/components/AnalysisLab.tsx`](https://github.com/mizcausevic-dev/watermark-stress-test/blob/main/src/components/AnalysisLab.tsx) (Attack analysis)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_application["Application"]
  node_react_mount["React mount<br/>React entry point"]
  node_lab_shell["Lab shell<br/>Navigation UI"]
  node_credential_view["Credential showdown<br/>Teaching view"]
end

subgraph group_image["Image simulation"]
  node_image_lab["Image lab<br/>Image exercise"]
  node_image_toolkit["Image toolkit<br/>Signal processing"]
  node_attack_analysis["Attack analysis<br/>Analysis lab"]
  node_image_metrics["Image metrics<br/>[metrics.ts]"]
  node_live_pipeline["Live pipeline<br/>Image pipeline"]
end

subgraph group_reference["Teaching reference"]
  node_briefing_glossary["Briefing and glossary<br/>Reference UI"]
  node_teaching_material["Shared teaching material<br/>Glossary data"]
end

node_browser_user["Browser user<br/>External actor"]

node_browser_user -->|"opens app"| node_react_mount
node_react_mount -->|"mounts"| node_lab_shell
node_lab_shell -->|"displays"| node_image_lab
node_lab_shell -->|"displays"| node_live_pipeline
node_lab_shell -->|"displays"| node_credential_view
node_lab_shell -->|"renders"| node_briefing_glossary
node_image_lab -->|"injects signal"| node_image_toolkit
node_attack_analysis -->|"attacks and scans"| node_image_toolkit
node_attack_analysis -->|"calculates SSIM"| node_image_metrics
node_live_pipeline -->|"processes signal"| node_image_toolkit
node_image_lab -->|"renders locally"| node_browser_user
node_briefing_glossary -->|"renders entries"| node_teaching_material

click node_react_mount "https://github.com/mizcausevic-dev/watermark-stress-test/blob/main/src/main.tsx"
click node_lab_shell "https://github.com/mizcausevic-dev/watermark-stress-test/blob/main/src/App.tsx"
click node_image_lab "https://github.com/mizcausevic-dev/watermark-stress-test/blob/main/src/components/ImageSandbox.tsx"
click node_image_toolkit "https://github.com/mizcausevic-dev/watermark-stress-test/blob/main/src/utils/imageFilters.ts"
click node_attack_analysis "https://github.com/mizcausevic-dev/watermark-stress-test/blob/main/src/components/AnalysisLab.tsx"
click node_image_metrics "https://github.com/mizcausevic-dev/watermark-stress-test/blob/main/src/utils/metrics.ts"
click node_live_pipeline "https://github.com/mizcausevic-dev/watermark-stress-test/blob/main/src/components/ComfyUIWorkflow.tsx"
click node_credential_view "https://github.com/mizcausevic-dev/watermark-stress-test/blob/main/src/components/CredentialShowdown.tsx"
click node_briefing_glossary "https://github.com/mizcausevic-dev/watermark-stress-test/blob/main/src/components/Glossary.tsx"
click node_teaching_material "https://github.com/mizcausevic-dev/watermark-stress-test/blob/main/src/data/glossary.ts"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_react_mount,node_lab_shell,node_credential_view,node_browser_user toneBlue
class node_image_lab,node_image_toolkit,node_attack_analysis,node_image_metrics,node_live_pipeline toneAmber
class node_briefing_glossary,node_teaching_material toneMint
```

## Components

### Application

- [React mount](https://github.com/mizcausevic-dev/watermark-stress-test/blob/main/src/main.tsx): React entry point · `src/main.tsx`
- [Lab shell](https://github.com/mizcausevic-dev/watermark-stress-test/blob/main/src/App.tsx): Navigation UI · `src/App.tsx`
- [Credential showdown](https://github.com/mizcausevic-dev/watermark-stress-test/blob/main/src/components/CredentialShowdown.tsx): Teaching view · `src/components/CredentialShowdown.tsx`

### Image simulation

- [Image lab](https://github.com/mizcausevic-dev/watermark-stress-test/blob/main/src/components/ImageSandbox.tsx): Image exercise · `src/components/ImageSandbox.tsx`
- [Image toolkit](https://github.com/mizcausevic-dev/watermark-stress-test/blob/main/src/utils/imageFilters.ts): Signal processing · `src/utils/imageFilters.ts`
- [Attack analysis](https://github.com/mizcausevic-dev/watermark-stress-test/blob/main/src/components/AnalysisLab.tsx): Analysis lab · `src/components/AnalysisLab.tsx`
- [Image metrics](https://github.com/mizcausevic-dev/watermark-stress-test/blob/main/src/utils/metrics.ts): Metrics · `src/utils/metrics.ts`
- [Live pipeline](https://github.com/mizcausevic-dev/watermark-stress-test/blob/main/src/components/ComfyUIWorkflow.tsx): Image pipeline · `src/components/ComfyUIWorkflow.tsx`

### Teaching reference

- [Briefing and glossary](https://github.com/mizcausevic-dev/watermark-stress-test/blob/main/src/components/Glossary.tsx): Reference UI · `src/components/Glossary.tsx`
- [Shared teaching material](https://github.com/mizcausevic-dev/watermark-stress-test/blob/main/src/data/glossary.ts): Glossary data · `src/data/glossary.ts`

### Other components

- **Browser user**: External actor

## Connections

- Browser user → React mount: opens app
- React mount → Lab shell: mounts
- Lab shell → Image lab: displays
- Lab shell → Live pipeline: displays
- Lab shell → Credential showdown: displays
- Lab shell → Briefing and glossary: renders
- Image lab → Image toolkit: injects signal
- Attack analysis → Image toolkit: attacks and scans
- Attack analysis → Image metrics: calculates SSIM
- Live pipeline → Image toolkit: processes signal
- Image lab → Browser user: renders locally
- Briefing and glossary → Shared teaching material: renders entries