# harshithan1706nh/video_to_blog architecture

> Architecture diagram of the GitHub repository harshithan1706nh/video_to_blog, 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/harshithan1706nh/video_to_blog
- Repository: https://github.com/harshithan1706nh/video_to_blog

## Overview

video_to_blog is presented as a tool for turning videos into blog content. The visible workflow selects and validates an MP4, then sends it to a processing endpoint; the endpoint and subsequent transcription, blog-generation, and result stages are not present in the supplied tree or excerpts. The sampled backend implements account registration, login, and session handling. Evidence for transcript persistence is limited to a database helper; no connection from it to processing is shown.

Main entry points: [`frontend/upload.html`](https://github.com/harshithan1706nh/video_to_blog/blob/main/frontend/upload.html) (Upload page), [`frontend/upload.js`](https://github.com/harshithan1706nh/video_to_blog/blob/main/frontend/upload.js) (Upload client), [`frontend/auth.js`](https://github.com/harshithan1706nh/video_to_blog/blob/main/frontend/auth.js) (Auth client), [`backend/app.py`](https://github.com/harshithan1706nh/video_to_blog/blob/main/backend/app.py) (Flask API)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_video["Video workflow"]
  node_upload_page["Upload page<br/>[upload.html]"]
  node_upload_client["Upload client<br/>[upload.js]"]
  node_processing_endpoint["Upload endpoint"]
  node_browser_store[("Browser store<br/>[app.js]")]
end

subgraph group_accounts["Accounts"]
  node_auth_pages["Login and register<br/>[login.html]"]
  node_auth_client["Auth client<br/>[auth.js]"]
  node_backend_api["Flask API<br/>[app.py]"]
  node_user_db[("User database<br/>[db.py]")]
  node_postgres[("PostgreSQL")]
end

subgraph group_transcripts["Transcript storage"]
  node_transcript_cleaner["Transcript cleaner"]
  node_transcript_store["Transcript writer<br/>[db.py]"]
end

node_creator(("Video creator"))

node_creator -->|"selects video"| node_upload_page
node_upload_page -->|"loads"| node_upload_client
node_upload_client -->|"posts video"| node_processing_endpoint
node_auth_pages -->|"loads"| node_auth_client
node_auth_client -->|"requests auth"| node_backend_api
node_backend_api -->|"queries users"| node_user_db
node_user_db -->|"connects"| node_postgres
node_transcript_store -->|"writes transcripts"| node_postgres

click node_upload_page "https://github.com/harshithan1706nh/video_to_blog/blob/main/frontend/upload.html"
click node_upload_client "https://github.com/harshithan1706nh/video_to_blog/blob/main/frontend/upload.js"
click node_browser_store "https://github.com/harshithan1706nh/video_to_blog/blob/main/frontend/app.js"
click node_auth_pages "https://github.com/harshithan1706nh/video_to_blog/blob/main/frontend/login.html"
click node_auth_client "https://github.com/harshithan1706nh/video_to_blog/blob/main/frontend/auth.js"
click node_backend_api "https://github.com/harshithan1706nh/video_to_blog/blob/main/backend/app.py"
click node_user_db "https://github.com/harshithan1706nh/video_to_blog/blob/main/backend/db.py"
click node_transcript_cleaner "https://github.com/harshithan1706nh/video_to_blog/blob/main/backend/transcript_cleaner.py"
click node_transcript_store "https://github.com/harshithan1706nh/video_to_blog/blob/main/backend/db.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_upload_page,node_upload_client,node_processing_endpoint,node_browser_store toneBlue
class node_auth_pages,node_auth_client,node_backend_api,node_user_db,node_postgres toneAmber
class node_transcript_cleaner,node_transcript_store toneMint
class node_creator toneIndigo
```

## Components

### Video workflow

- [Upload page](https://github.com/harshithan1706nh/video_to_blog/blob/main/frontend/upload.html): `frontend/upload.html`
- [Upload client](https://github.com/harshithan1706nh/video_to_blog/blob/main/frontend/upload.js): `frontend/upload.js`
- **Upload endpoint**
- [Browser store](https://github.com/harshithan1706nh/video_to_blog/blob/main/frontend/app.js): `frontend/app.js`

### Accounts

- [Login and register](https://github.com/harshithan1706nh/video_to_blog/blob/main/frontend/login.html): `frontend/login.html`
- [Auth client](https://github.com/harshithan1706nh/video_to_blog/blob/main/frontend/auth.js): `frontend/auth.js`
- [Flask API](https://github.com/harshithan1706nh/video_to_blog/blob/main/backend/app.py): `backend/app.py`
- [User database](https://github.com/harshithan1706nh/video_to_blog/blob/main/backend/db.py): `backend/db.py`
- **PostgreSQL**

### Transcript storage

- [Transcript cleaner](https://github.com/harshithan1706nh/video_to_blog/blob/main/backend/transcript_cleaner.py): `backend/transcript_cleaner.py`
- [Transcript writer](https://github.com/harshithan1706nh/video_to_blog/blob/main/backend/db.py): `backend/db.py`

### Other components

- **Video creator**

## Connections

- Video creator → Upload page: selects video
- Upload page → Upload client: loads
- Upload client → Upload endpoint: posts video
- Login and register → Auth client: loads
- Auth client → Flask API: requests auth
- Flask API → User database: queries users
- User database → PostgreSQL: connects
- Transcript writer → PostgreSQL: writes transcripts