# dabljaar/web architecture

> Architecture diagram of the GitHub repository dabljaar/web, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-10-01). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/dabljaar/web
- Repository: https://github.com/dabljaar/web

## Overview

DabljaAR is a web platform for turning uploaded or linked media—and, in some modes, text—into captions, Arabic translations, synthesized speech, or dubbed video. Users authenticate, submit content and a mode, follow asynchronous jobs in the dashboard, and retrieve the resulting artifacts. The documented processing path preprocesses media in the backend, then uses RabbitMQ and a Go orchestrator to coordinate independent AI and merge workers. Source excerpts provide detail for backend setup and NMT internals; service-to-service links and several worker capabilities are documented in the README rather than verified from worker source.

Main entry points: [`backend/app/main.py`](https://github.com/dabljaar/web/blob/main/backend/app/main.py) (FastAPI gateway), [`nmt-service/app/worker.py`](https://github.com/dabljaar/web/blob/main/nmt-service/app/worker.py) (Translation worker), [`backend/app/api/job_router.py`](https://github.com/dabljaar/web/blob/main/backend/app/api/job_router.py) (Job endpoints), [`orchestrator/internal/pipeline/manager.go`](https://github.com/dabljaar/web/blob/main/orchestrator/internal/pipeline/manager.go) (Pipeline saga)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_client["Web client"]
  node_webapp["Dashboard<br/>[App.jsx]"]
  node_webjobs["Job tracking<br/>[useJobPolling.ts]"]
  node_webapi["API client<br/>[jobService.js]"]
end

subgraph group_api["API and media"]
  node_gateway["FastAPI gateway<br/>[main.py]"]
  node_jobapi["Job endpoints<br/>[job_router.py]"]
  node_preprocess["Media preprocessing<br/>[service.py]"]
  node_mediafiles["Media storage<br/>[storage.py]"]
end

subgraph group_coordination["Pipeline coordination"]
  node_orchestrator["Pipeline saga<br/>[manager.go]"]
end

subgraph group_workers["Processing workers"]
  node_stt["Speech recognition<br/>[worker.py]"]
  node_nmt["Translation worker<br/>[worker.py]"]
  node_nmtmodel["NLLB model<br/>[model.py]"]
  node_tts["Speech synthesis<br/>[worker.py]"]
  node_merge["Video mux<br/>[worker.py]"]
end

subgraph group_platform["Persistence and messaging"]
  node_mq["RabbitMQ"]
  node_db[("PostgreSQL")]
  node_s3[("S3 / MinIO")]
end

node_user(("Content creator"))

node_user -->|"submits content"| node_webapp
node_webapp -.->|"requests jobs"| node_webapi
node_webapi -->|"REST requests"| node_gateway
node_gateway -->|"routes jobs"| node_jobapi
node_jobapi -->|"preprocesses media"| node_preprocess
node_preprocess -.->|"stores media"| node_mediafiles
node_gateway -->|"persists domain data"| node_db
node_gateway -->|"publishes job.created"| node_mq
node_mq -->|"dispatches events"| node_orchestrator
node_orchestrator -->|"publishes stage commands"| node_mq
node_mq -->|"dispatches stage"| node_stt
node_mq -->|"dispatches stage"| node_nmt
node_mq -->|"dispatches stage"| node_tts
node_mq -->|"dispatches stage"| node_merge
node_stt -->|"reads and writes jobs"| node_db
node_stt -->|"loads media"| node_s3
node_nmt -->|"translates segments"| node_nmtmodel
node_nmt -->|"reads and writes jobs"| node_db
node_nmt -->|"accesses artifacts"| node_s3
node_tts -->|"reads and writes jobs"| node_db
node_tts -->|"stores synthesized audio"| node_s3
node_merge -->|"reads merge inputs"| node_db
node_merge -->|"stores dubbed video"| node_s3
node_orchestrator -->|"tracks pipeline state"| node_db
node_jobapi -->|"exposes job status"| node_webjobs
node_webjobs -.->|"updates progress"| node_webapp

click node_webapp "https://github.com/dabljaar/web/blob/main/frontend/src/App.jsx"
click node_webjobs "https://github.com/dabljaar/web/blob/main/frontend/src/hooks/useJobPolling.ts"
click node_webapi "https://github.com/dabljaar/web/blob/main/frontend/src/services/jobService.js"
click node_gateway "https://github.com/dabljaar/web/blob/main/backend/app/main.py"
click node_jobapi "https://github.com/dabljaar/web/blob/main/backend/app/api/job_router.py"
click node_preprocess "https://github.com/dabljaar/web/blob/main/backend/app/media/service.py"
click node_mediafiles "https://github.com/dabljaar/web/blob/main/backend/app/media/storage.py"
click node_orchestrator "https://github.com/dabljaar/web/blob/main/orchestrator/internal/pipeline/manager.go"
click node_stt "https://github.com/dabljaar/web/blob/main/stt-service/app/worker.py"
click node_nmt "https://github.com/dabljaar/web/blob/main/nmt-service/app/worker.py"
click node_nmtmodel "https://github.com/dabljaar/web/blob/main/nmt-service/app/model.py"
click node_tts "https://github.com/dabljaar/web/blob/main/tts-service/app/worker.py"
click node_merge "https://github.com/dabljaar/web/blob/main/media-service/app/worker.py"

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_webapp,node_webjobs,node_webapi toneBlue
class node_gateway,node_jobapi,node_preprocess,node_mediafiles toneAmber
class node_orchestrator toneMint
class node_stt,node_nmt,node_nmtmodel,node_tts,node_merge toneRose
class node_mq,node_db,node_s3,node_user toneIndigo
```

## Components

### Web client

- [Dashboard](https://github.com/dabljaar/web/blob/main/frontend/src/App.jsx): `frontend/src/App.jsx`
- [Job tracking](https://github.com/dabljaar/web/blob/main/frontend/src/hooks/useJobPolling.ts): `frontend/src/hooks/useJobPolling.ts`
- [API client](https://github.com/dabljaar/web/blob/main/frontend/src/services/jobService.js): `frontend/src/services/jobService.js`

### API and media

- [FastAPI gateway](https://github.com/dabljaar/web/blob/main/backend/app/main.py): `backend/app/main.py`
- [Job endpoints](https://github.com/dabljaar/web/blob/main/backend/app/api/job_router.py): `backend/app/api/job_router.py`
- [Media preprocessing](https://github.com/dabljaar/web/blob/main/backend/app/media/service.py): `backend/app/media/service.py`
- [Media storage](https://github.com/dabljaar/web/blob/main/backend/app/media/storage.py): `backend/app/media/storage.py`

### Pipeline coordination

- [Pipeline saga](https://github.com/dabljaar/web/blob/main/orchestrator/internal/pipeline/manager.go): `orchestrator/internal/pipeline/manager.go`

### Processing workers

- [Speech recognition](https://github.com/dabljaar/web/blob/main/stt-service/app/worker.py): `stt-service/app/worker.py`
- [Translation worker](https://github.com/dabljaar/web/blob/main/nmt-service/app/worker.py): `nmt-service/app/worker.py`
- [NLLB model](https://github.com/dabljaar/web/blob/main/nmt-service/app/model.py): `nmt-service/app/model.py`
- [Speech synthesis](https://github.com/dabljaar/web/blob/main/tts-service/app/worker.py): `tts-service/app/worker.py`
- [Video mux](https://github.com/dabljaar/web/blob/main/media-service/app/worker.py): `media-service/app/worker.py`

### Persistence and messaging

- **RabbitMQ**
- **PostgreSQL**
- **S3 / MinIO**

### Other components

- **Content creator**

## Connections

- Content creator → Dashboard: submits content (evidence: `README.md`)
- Dashboard → API client: requests jobs
- API client → FastAPI gateway: REST requests (evidence: `README.md`)
- FastAPI gateway → Job endpoints: routes jobs (evidence: `backend/app/main.py`)
- Job endpoints → Media preprocessing: preprocesses media
- Media preprocessing → Media storage: stores media
- FastAPI gateway → PostgreSQL: persists domain data (evidence: `README.md`)
- FastAPI gateway → RabbitMQ: publishes job.created (evidence: `README.md`)
- RabbitMQ → Pipeline saga: dispatches events (evidence: `README.md`)
- Pipeline saga → RabbitMQ: publishes stage commands (evidence: `README.md`)
- RabbitMQ → Speech recognition: dispatches stage (evidence: `README.md`)
- RabbitMQ → Translation worker: dispatches stage (evidence: `README.md`)
- RabbitMQ → Speech synthesis: dispatches stage (evidence: `README.md`)
- RabbitMQ → Video mux: dispatches stage (evidence: `README.md`)
- Speech recognition → PostgreSQL: reads and writes jobs (evidence: `README.md`)
- Speech recognition → S3 / MinIO: loads media (evidence: `README.md`)
- Translation worker → NLLB model: translates segments (evidence: `nmt-service/app/worker.py`)
- Translation worker → PostgreSQL: reads and writes jobs (evidence: `README.md`)
- Translation worker → S3 / MinIO: accesses artifacts (evidence: `README.md`)
- Speech synthesis → PostgreSQL: reads and writes jobs (evidence: `README.md`)
- Speech synthesis → S3 / MinIO: stores synthesized audio (evidence: `README.md`)
- Video mux → PostgreSQL: reads merge inputs (evidence: `README.md`)
- Video mux → S3 / MinIO: stores dubbed video (evidence: `README.md`)
- Pipeline saga → PostgreSQL: tracks pipeline state (evidence: `README.md`)
- Job endpoints → Job tracking: exposes job status (evidence: `README.md`)
- Job tracking → Dashboard: updates progress