mizcausevic-dev/watermark-stress-test

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.