# kotaharsha25/yolov8-image-and-video-processing-application architecture

> Architecture diagram of the GitHub repository kotaharsha25/yolov8-image-and-video-processing-application, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-07-31). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/kotaharsha25/yolov8-image-and-video-processing-application
- Repository: https://github.com/kotaharsha25/yolov8-image-and-video-processing-application

## Overview

#### Purpose and Entry Point
NexVision AI is a Flask-based computer-vision application for YOLOv8 object detection, instance segmentation, and pose estimation across uploaded media and live video sources. The runtime entry point is `app.py`, launched with `python app.py` and serving the browser UI on port 7860.

#### Application Shell and UI Routing
`app.py` is the backend composition point: it hosts the Flask application, exposes page/API behavior, and connects input sources to inference streaming. The UI is organized by source-specific templates:
- `templates/index.html`
- `templates/local.html`
- `templates/yt.html`
- `templates/rtsp.html`
- `templates/cams.html`

The frontend uses browser-side JavaScript/AJAX behavior described in the README to switch sources and models without full-page reloads. Shared visual styling resides in `static/css/theme.css`.

#### Input Source Boundary
The system accepts four materially different acquisition modes: local image/video uploads, YouTube streams, RTSP/IP-camera streams, and local webcam feeds. These converge in the backend into a common frame-processing/inference path, while source-specific UI pages collect the relevant URL, device, or uploaded-media input.

Bundled sample media is held under:
- `data/raw/temp_video.mp4`
- `data/raw/video_1.mp4`

#### YOLOv8 Inference Orchestration
The core ML boundary is Python/OpenCV frame handling feeding Ultralytics YOLOv8 models backed by PyTorch. The application supports dynamically choosing detection, segmentation, or pose-estimation models from the UI. Model loading is intentionally lazy according to the README, reducing memory pressure by avoiding eager loading of all model variants—important for constrained hosted deployment.

Primary implementation location:
- `app.py`

#### Streaming and Result Delivery
For video-capable sources, control flow is: browser starts a source → Flask acquires frames → OpenCV/YOLO processes frames → annotated output is streamed back for native browser playback. Start/stop behavior is intended to be asynchronous from the user experience, with frontend AJAX separating UI state from inference execution.

This creates two important boundaries: source acquisition may fail independently (camera, RTSP, YouTube), and model inference is the compute-heavy stage that must remain isolated from template rendering and request navigation.

#### Data and Model Metadata
YOLO dataset/model class metadata is represented by YAML files under `data/`, including:
- `data/coco.yaml`
- `data/coco128.yaml`
- `data/coco128-seg.yaml`

These files provide detection/segmentation dataset definitions rather than being application UI data stores. There is no database or persistent business-data layer evident in the repository tree.

#### Runtime, Packaging, and Deployment
The material runtime is Python with Flask, PyTorch, OpenCV, and Ultralytics YOLOv8; dependency installation is defined by `requirements.txt`. Container deployment is supported by `Dockerfile`. The README identifies Render as the hosted target and specifically motivates lazy model orchestration to stay within Render memory limits. Utility-level shared backend behavior is separated into:
- `utils/general.py`

Main entry points: [`app.py`](https://github.com/kotaharsha25/yolov8-image-and-video-processing-application/blob/main/app.py) (Flask Application), [`templates/index.html`](https://github.com/kotaharsha25/yolov8-image-and-video-processing-application/blob/main/templates/index.html) (Source Pages), [`Dockerfile`](https://github.com/kotaharsha25/yolov8-image-and-video-processing-application/blob/main/Dockerfile) (Container Build), [`static/css/theme.css`](https://github.com/kotaharsha25/yolov8-image-and-video-processing-application/blob/main/static/css/theme.css) (Shared Theme)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_ui["Browser UI"]
  node_browser["Browser UI<br/>web client"]
  node_source_templates["Source Pages<br/>Flask templates<br/>[index.html]"]
  node_theme["Shared Theme<br/>CSS<br/>[theme.css]"]
end

subgraph group_sources["Media Sources"]
  node_uploads["Local Uploads<br/>image/video source"]
  node_youtube["YouTube Streams<br/>remote stream source"]
  node_rtsp["RTSP/IP Cameras<br/>camera stream source"]
  node_webcam["Local Webcam<br/>device source"]
  node_sample_media["Sample Video<br/>bundled media<br/>[temp_video.mp4]"]
end

subgraph group_runtime["Python Runtime"]
  node_flask_app{{"Flask Application<br/>runtime entry point<br/>[app.py]"}}
  node_frame_acquisition["Frame Acquisition<br/>OpenCV pipeline<br/>[app.py]"]
  node_lazy_models["Lazy YOLO Models<br/>model orchestration<br/>[app.py]"]
  node_inference["Frame Inference<br/>YOLOv8 + PyTorch<br/>[app.py]"]
  node_result_stream["Annotated Stream<br/>browser video delivery<br/>[app.py]"]
  node_general_utils["Shared Utilities<br/>Python utilities<br/>[general.py]"]
  node_dataset_metadata["Dataset Class Metadata<br/>YOLO YAML<br/>[coco.yaml]"]
end

subgraph group_deploy["Packaging &amp; Deployment"]
  node_dependencies["Python Dependencies<br/>package manifest<br/>[requirements.txt]"]
  node_container["Container Build<br/>Docker deployment"]
  node_render["Render Hosting<br/>hosted target"]
end

node_browser -->|"renders pages"| node_source_templates
node_theme -->|"styles"| node_source_templates
node_browser -->|"AJAX requests"| node_flask_app
node_source_templates -->|"form/source controls"| node_flask_app
node_uploads -->|"media input"| node_frame_acquisition
node_youtube -->|"stream input"| node_frame_acquisition
node_rtsp -->|"stream input"| node_frame_acquisition
node_webcam -->|"device frames"| node_frame_acquisition
node_sample_media -.->|"example input"| node_uploads
node_flask_app -->|"starts source"| node_frame_acquisition
node_frame_acquisition -->|"frames"| node_inference
node_flask_app -->|"selects model task"| node_lazy_models
node_lazy_models -->|"loaded model"| node_inference
node_dataset_metadata -.->|"class definitions"| node_lazy_models
node_inference -->|"annotated frames"| node_result_stream
node_result_stream -->|"streamed playback"| node_browser
node_general_utils -->|"shared backend support"| node_flask_app
node_dependencies -.->|"runtime packages"| node_flask_app
node_container -->|"packages application"| node_flask_app
node_container -->|"deploys to"| node_render

click node_source_templates "https://github.com/kotaharsha25/yolov8-image-and-video-processing-application/blob/main/templates/index.html"
click node_theme "https://github.com/kotaharsha25/yolov8-image-and-video-processing-application/blob/main/static/css/theme.css"
click node_sample_media "https://github.com/kotaharsha25/yolov8-image-and-video-processing-application/blob/main/data/raw/temp_video.mp4"
click node_flask_app "https://github.com/kotaharsha25/yolov8-image-and-video-processing-application/blob/main/app.py"
click node_frame_acquisition "https://github.com/kotaharsha25/yolov8-image-and-video-processing-application/blob/main/app.py"
click node_lazy_models "https://github.com/kotaharsha25/yolov8-image-and-video-processing-application/blob/main/app.py"
click node_inference "https://github.com/kotaharsha25/yolov8-image-and-video-processing-application/blob/main/app.py"
click node_result_stream "https://github.com/kotaharsha25/yolov8-image-and-video-processing-application/blob/main/app.py"
click node_general_utils "https://github.com/kotaharsha25/yolov8-image-and-video-processing-application/blob/main/utils/general.py"
click node_dataset_metadata "https://github.com/kotaharsha25/yolov8-image-and-video-processing-application/blob/main/data/coco.yaml"
click node_dependencies "https://github.com/kotaharsha25/yolov8-image-and-video-processing-application/blob/main/requirements.txt"
click node_container "https://github.com/kotaharsha25/yolov8-image-and-video-processing-application/blob/main/Dockerfile"

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_browser,node_source_templates,node_theme toneBlue
class node_uploads,node_youtube,node_rtsp,node_webcam,node_sample_media toneAmber
class node_flask_app,node_frame_acquisition,node_lazy_models,node_inference,node_result_stream,node_general_utils,node_dataset_metadata toneMint
class node_dependencies,node_container,node_render toneRose
```

## Components

### Browser UI

- **Browser UI**: web client · AJAX switches sources and models without full page reloads.
- [Source Pages](https://github.com/kotaharsha25/yolov8-image-and-video-processing-application/blob/main/templates/index.html): Flask templates · Pages collect source-specific media, URL, or camera input. · `templates/index.html`
- [Shared Theme](https://github.com/kotaharsha25/yolov8-image-and-video-processing-application/blob/main/static/css/theme.css): CSS · `static/css/theme.css`

### Media Sources

- **Local Uploads**: image/video source
- **YouTube Streams**: remote stream source
- **RTSP/IP Cameras**: camera stream source
- **Local Webcam**: device source
- [Sample Video](https://github.com/kotaharsha25/yolov8-image-and-video-processing-application/blob/main/data/raw/temp_video.mp4): bundled media · `data/raw/temp_video.mp4`

### Python Runtime

- [Flask Application](https://github.com/kotaharsha25/yolov8-image-and-video-processing-application/blob/main/app.py): runtime entry point · Hosts routes, APIs, source control, and inference streaming on port 7860. · `app.py`
- [Frame Acquisition](https://github.com/kotaharsha25/yolov8-image-and-video-processing-application/blob/main/app.py): OpenCV pipeline · Normalizes frames from uploads and live sources; acquisition failures remain source-specific. · `app.py`
- [Lazy YOLO Models](https://github.com/kotaharsha25/yolov8-image-and-video-processing-application/blob/main/app.py): model orchestration · Loads selected detection, segmentation, or pose model on demand to limit memory use. · `app.py`
- [Frame Inference](https://github.com/kotaharsha25/yolov8-image-and-video-processing-application/blob/main/app.py): YOLOv8 + PyTorch · Runs selected model and produces annotated frames. · `app.py`
- [Annotated Stream](https://github.com/kotaharsha25/yolov8-image-and-video-processing-application/blob/main/app.py): browser video delivery · Returns processed video frames for native browser playback. · `app.py`
- [Shared Utilities](https://github.com/kotaharsha25/yolov8-image-and-video-processing-application/blob/main/utils/general.py): Python utilities · `utils/general.py`
- [Dataset Class Metadata](https://github.com/kotaharsha25/yolov8-image-and-video-processing-application/blob/main/data/coco.yaml): YOLO YAML · Detection and segmentation dataset definitions, not application data storage. · `data/coco.yaml`

### Packaging & Deployment

- [Python Dependencies](https://github.com/kotaharsha25/yolov8-image-and-video-processing-application/blob/main/requirements.txt): package manifest · Defines Flask, PyTorch, OpenCV, and Ultralytics runtime dependencies. · `requirements.txt`
- [Container Build](https://github.com/kotaharsha25/yolov8-image-and-video-processing-application/blob/main/Dockerfile): Docker deployment · `Dockerfile`
- **Render Hosting**: hosted target · Constrained deployment target motivating lazy model loading.

## Connections

- Browser UI → Source Pages: renders pages
- Shared Theme → Source Pages: styles
- Browser UI → Flask Application: AJAX requests
- Source Pages → Flask Application: form/source controls
- Local Uploads → Frame Acquisition: media input
- YouTube Streams → Frame Acquisition: stream input
- RTSP/IP Cameras → Frame Acquisition: stream input
- Local Webcam → Frame Acquisition: device frames
- Sample Video → Local Uploads: example input
- Flask Application → Frame Acquisition: starts source
- Frame Acquisition → Frame Inference: frames
- Flask Application → Lazy YOLO Models: selects model task
- Lazy YOLO Models → Frame Inference: loaded model
- Dataset Class Metadata → Lazy YOLO Models: class definitions
- Frame Inference → Annotated Stream: annotated frames
- Annotated Stream → Browser UI: streamed playback
- Shared Utilities → Flask Application: shared backend support
- Python Dependencies → Flask Application: runtime packages
- Container Build → Flask Application: packages application
- Container Build → Render Hosting: deploys to