# kazuke7/media-compression-backend architecture

> Architecture diagram of the GitHub repository kazuke7/media-compression-backend, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-29). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/kazuke7/media-compression-backend
- Repository: https://github.com/kazuke7/media-compression-backend

## Overview

This is a web application for quality-constrained image and video compression before file transfer. Users select media, submit it with optimization settings, review compression and quality results, then preview or download optimized files individually or as a ZIP. The frontend API route proxies optimization requests to Flask; Flask stores uploads and outputs and delegates media-specific work through a shared controller. The image compressor implementation and several frontend components were not sampled, so their internal behavior and unverified wiring are omitted.

Main entry points: [`frontend/app/page.tsx`](https://github.com/kazuke7/media-compression-backend/blob/main/frontend/app/page.tsx) (Optimization page), [`backend/app.py`](https://github.com/kazuke7/media-compression-backend/blob/main/backend/app.py) (Flask API), [`frontend/app/api/optimize/route.ts`](https://github.com/kazuke7/media-compression-backend/blob/main/frontend/app/api/optimize/route.ts) (Optimization proxy), [`backend/framework.py`](https://github.com/kazuke7/media-compression-backend/blob/main/backend/framework.py) (Media controller)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_frontend["Web interface"]
  node_page["Optimization page<br/>[page.tsx]"]
  node_upload["Media upload<br/>[upload-zone.tsx]"]
  node_settings["Compression settings<br/>[settings-panel.tsx]"]
  node_results["Result cards<br/>[result-card.tsx]"]
  node_summary["Transfer summary"]
end

subgraph group_api["Request and delivery"]
  node_proxy["Optimization proxy<br/>[route.ts]"]
  node_flask["Flask API<br/>[app.py]"]
  node_download["Download endpoints<br/>[app.py]"]
  node_preview["Preview endpoint<br/>[app.py]"]
end

subgraph group_compression["Media optimization"]
  node_framework["Media controller<br/>[framework.py]"]
  node_image["Image optimizer<br/>[image_module.py]"]
  node_video["Video optimizer<br/>[video_module.py]"]
end

subgraph group_storage["File storage"]
  node_uploads["Uploaded files"]
  node_outputs["Optimized files"]
end

node_user(("User"))
node_ffmpeg["FFmpeg tools"]
node_browser(("Browser"))

node_user -->|"uses"| node_page
node_page -->|"renders"| node_upload
node_page -->|"renders"| node_settings
node_page -->|"renders"| node_results
node_page -->|"renders"| node_summary
node_page -->|"posts files"| node_proxy
node_proxy -->|"forwards request"| node_flask
node_flask -->|"saves uploads"| node_uploads
node_flask -->|"detects and optimizes"| node_framework
node_framework -->|"dispatches images"| node_image
node_framework -->|"dispatches videos"| node_video
node_image -->|"writes results"| node_outputs
node_video -->|"writes results"| node_outputs
node_video -->|"runs tools"| node_ffmpeg
node_flask -->|"cleans and reads"| node_outputs
node_flask -->|"returns results"| node_proxy
node_proxy -->|"returns JSON"| node_page
node_page -->|"provides results"| node_results
node_results -->|"opens download link"| node_browser
node_browser -->|"requests file"| node_download
node_download -->|"reads files"| node_outputs
node_browser -->|"requests preview"| node_preview
node_preview -->|"serves file"| node_outputs
node_page -->|"requests ZIP"| node_download

click node_page "https://github.com/kazuke7/media-compression-backend/blob/main/frontend/app/page.tsx"
click node_upload "https://github.com/kazuke7/media-compression-backend/blob/main/frontend/components/upload-zone.tsx"
click node_settings "https://github.com/kazuke7/media-compression-backend/blob/main/frontend/components/settings-panel.tsx"
click node_results "https://github.com/kazuke7/media-compression-backend/blob/main/frontend/components/result-card.tsx"
click node_summary "https://github.com/kazuke7/media-compression-backend/blob/main/frontend/components/transfer-summary.tsx"
click node_proxy "https://github.com/kazuke7/media-compression-backend/blob/main/frontend/app/api/optimize/route.ts"
click node_flask "https://github.com/kazuke7/media-compression-backend/blob/main/backend/app.py"
click node_framework "https://github.com/kazuke7/media-compression-backend/blob/main/backend/framework.py"
click node_image "https://github.com/kazuke7/media-compression-backend/blob/main/backend/compression/image_module.py"
click node_video "https://github.com/kazuke7/media-compression-backend/blob/main/backend/compression/video_module.py"
click node_download "https://github.com/kazuke7/media-compression-backend/blob/main/backend/app.py"
click node_preview "https://github.com/kazuke7/media-compression-backend/blob/main/backend/app.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_page,node_upload,node_settings,node_results,node_summary,node_user,node_browser toneBlue
class node_proxy,node_flask,node_download,node_preview toneAmber
class node_framework,node_image,node_video toneMint
class node_uploads,node_outputs toneRose
class node_ffmpeg toneIndigo
```

## Components

### Web interface

- [Optimization page](https://github.com/kazuke7/media-compression-backend/blob/main/frontend/app/page.tsx): `frontend/app/page.tsx`
- [Media upload](https://github.com/kazuke7/media-compression-backend/blob/main/frontend/components/upload-zone.tsx): `frontend/components/upload-zone.tsx`
- [Compression settings](https://github.com/kazuke7/media-compression-backend/blob/main/frontend/components/settings-panel.tsx): `frontend/components/settings-panel.tsx`
- [Result cards](https://github.com/kazuke7/media-compression-backend/blob/main/frontend/components/result-card.tsx): `frontend/components/result-card.tsx`
- [Transfer summary](https://github.com/kazuke7/media-compression-backend/blob/main/frontend/components/transfer-summary.tsx): `frontend/components/transfer-summary.tsx`

### Request and delivery

- [Optimization proxy](https://github.com/kazuke7/media-compression-backend/blob/main/frontend/app/api/optimize/route.ts): `frontend/app/api/optimize/route.ts`
- [Flask API](https://github.com/kazuke7/media-compression-backend/blob/main/backend/app.py): `backend/app.py`
- [Download endpoints](https://github.com/kazuke7/media-compression-backend/blob/main/backend/app.py): `backend/app.py`
- [Preview endpoint](https://github.com/kazuke7/media-compression-backend/blob/main/backend/app.py): `backend/app.py`

### Media optimization

- [Media controller](https://github.com/kazuke7/media-compression-backend/blob/main/backend/framework.py): `backend/framework.py`
- [Image optimizer](https://github.com/kazuke7/media-compression-backend/blob/main/backend/compression/image_module.py): `backend/compression/image_module.py`
- [Video optimizer](https://github.com/kazuke7/media-compression-backend/blob/main/backend/compression/video_module.py): `backend/compression/video_module.py`

### File storage

- **Uploaded files**
- **Optimized files**

### Other components

- **User**
- **FFmpeg tools**
- **Browser**

## Connections

- User → Optimization page: uses
- Optimization page → Media upload: renders
- Optimization page → Compression settings: renders
- Optimization page → Result cards: renders
- Optimization page → Transfer summary: renders
- Optimization page → Optimization proxy: posts files
- Optimization proxy → Flask API: forwards request
- Flask API → Uploaded files: saves uploads
- Flask API → Media controller: detects and optimizes
- Media controller → Image optimizer: dispatches images
- Media controller → Video optimizer: dispatches videos
- Image optimizer → Optimized files: writes results
- Video optimizer → Optimized files: writes results
- Video optimizer → FFmpeg tools: runs tools
- Flask API → Optimized files: cleans and reads
- Flask API → Optimization proxy: returns results
- Optimization proxy → Optimization page: returns JSON
- Optimization page → Result cards: provides results
- Result cards → Browser: opens download link
- Browser → Download endpoints: requests file
- Download endpoints → Optimized files: reads files
- Browser → Preview endpoint: requests preview
- Preview endpoint → Optimized files: serves file
- Optimization page → Download endpoints: requests ZIP