diff --git a/README.md b/README.md index d4f56db..87b653b 100644 --- a/README.md +++ b/README.md @@ -1,73 +1,64 @@ -# Media Analyzer +# Real-Time Video AI Analysis Platform -Real-time video streaming and AI analysis platform that demonstrates modern cloud-native architecture and machine learning integration. The system ingests RTMP video streams (from sources like OBS), processes them with computer vision AI models, and provides live analysis results through a responsive web dashboard. +![Control Panel Overview](def/panel_capture.png) -## Features +A production-ready video streaming platform with real-time AI logo detection, demonstrating scalable microservices architecture and modern web technologies. -- **Video Ingestion**: Accept RTMP streams and convert to HLS for web playback -- **AI Processing**: Real-time object detection (YOLO) and scene analysis (CLIP) on video segments -- **Live Dashboard**: Angular frontend with WebSocket-powered real-time analysis overlays -- **Scalable Architecture**: Kubernetes-deployed microservices with configurable processing modes -- **Cloud Integration**: GCP services integration while maintaining platform agnostic design +## Quick Demo + +```bash +docker compose up +``` + +**Test the system:** +1. Open http://localhost:3000 (frontend) +2. Start webcam stream or use RTMP from OBS +3. Show logos from `/logos/` folder to camera for real-time detection +4. Watch live detection results and visual overlays + +## Architecture Overview + +![System Architecture](def/architecture/architecture_diagram.svg) + +**Key Design Patterns:** + +- **Source Adapters** (`streaming/source_adapters.py`) - Abstract webcam vs RTMP input +- **Execution Strategies** (`ai_processing/execution_strategies/`) - Local vs distributed processing +- **Analysis Adapters** (`ai_processing/adapters/`) - Pluggable AI models (CLIP, GCP Vision) +- **Queue Segregation** - Separate Celery workers for different analysis types + +## Code Organization + +``` +├── backend/ +│ ├── streaming/ # Video ingestion (RTMP/Webcam) +│ ├── ai_processing/ # AI analysis pipeline +│ │ ├── adapters/ # Pluggable AI models +│ │ ├── execution_strategies/ # Local/cloud/distributed +│ │ └── tasks.py # Celery workers +│ └── effects/ # Real-time video effects (future) +├── frontend/ # Angular 17+ SPA +├── k8s/ # Kubernetes manifests +└── logos/ # Test images (Apple, Nike, etc.) +``` ## Tech Stack -- **Backend**: Django + Django Channels, PostgreSQL, Redis, Celery -- **AI/ML**: OpenCV, YOLO, CLIP, Whisper (Hugging Face Transformers) -- **Frontend**: Angular 17+ with HLS.js video player and Canvas overlays -- **Infrastructure**: Docker containers, Kubernetes, NGINX -- **Streaming**: FFmpeg for RTMPHLS conversion, WebSocket for real-time data +- **Backend**: Django + Channels, Celery, PostgreSQL, Redis +- **AI/ML**: PyTorch + CLIP, OpenCV, GCP Vision API +- **Frontend**: Angular 17, WebSockets, HLS.js +- **Infrastructure**: Docker, Kubernetes, NGINX -## Quick Start +## Features Implemented -### Option 1: Docker Compose (Development) +✅ **Real-time logo detection** (CLIP + GCP Vision) +✅ **Live video streaming** (webcam/RTMP → HLS) +✅ **WebSocket overlays** (detection boxes, confidence scores) +✅ **Kubernetes deployment** (auto-scaling, health checks) +✅ **Modular architecture** (adapters, strategies, queues) -```bash -# Start all services -docker compose up +🔄 **In progress**: Visual properties, audio transcription, distributed processing -# Run migrations (in separate terminal) -docker compose --profile tools up migrate +--- -# Access the application -# Frontend: http://localhost:4200 -# Backend API: http://localhost:8000 -# RTMP Stream: rtmp://localhost:1935/live -# HLS Stream: http://localhost:8081/hls -``` - -### Option 2: Kubernetes (Production-ready) - -```bash -# Build and push images to local registry -./k8s/build-for-ctlptl.sh - -# Deploy to Kubernetes -kubectl apply -k k8s/overlays/development - -# Check deployment status -kubectl get pods -n media-analyzer - -# Access via port forwarding -kubectl port-forward service/frontend -n media-analyzer 4200:80 -``` - -## Architecture - -- **Django Backend**: Main API server with WebSocket support for real-time communication -- **Celery Workers**: Distributed task processing for AI analysis (logo detection, visual analysis) -- **PostgreSQL**: Primary database for application data and analysis results -- **Redis**: Cache and message broker for Celery tasks -- **Angular Frontend**: Single-page application with real-time video analysis overlays -- **NGINX RTMP**: Stream ingestion server for OBS and other RTMP sources - -## Development - -The system supports both local development with hot reload and production deployment: - -- **Development**: Uses Angular dev server and Django development server -- **Production**: Uses nginx for static files and optimized Docker images - -## Demo - -Stream video from OBS Studio to `rtmp://localhost:1935/live` and watch real-time AI analysis in the web dashboard with live object detection overlays. \ No newline at end of file +*This project demonstrates full-stack capabilities: AI/ML integration, real-time systems, cloud-native architecture, and modern web development.* \ No newline at end of file diff --git a/def/README.md b/def/README.md new file mode 100644 index 0000000..d4f56db --- /dev/null +++ b/def/README.md @@ -0,0 +1,73 @@ +# Media Analyzer + +Real-time video streaming and AI analysis platform that demonstrates modern cloud-native architecture and machine learning integration. The system ingests RTMP video streams (from sources like OBS), processes them with computer vision AI models, and provides live analysis results through a responsive web dashboard. + +## Features + +- **Video Ingestion**: Accept RTMP streams and convert to HLS for web playback +- **AI Processing**: Real-time object detection (YOLO) and scene analysis (CLIP) on video segments +- **Live Dashboard**: Angular frontend with WebSocket-powered real-time analysis overlays +- **Scalable Architecture**: Kubernetes-deployed microservices with configurable processing modes +- **Cloud Integration**: GCP services integration while maintaining platform agnostic design + +## Tech Stack + +- **Backend**: Django + Django Channels, PostgreSQL, Redis, Celery +- **AI/ML**: OpenCV, YOLO, CLIP, Whisper (Hugging Face Transformers) +- **Frontend**: Angular 17+ with HLS.js video player and Canvas overlays +- **Infrastructure**: Docker containers, Kubernetes, NGINX +- **Streaming**: FFmpeg for RTMPHLS conversion, WebSocket for real-time data + +## Quick Start + +### Option 1: Docker Compose (Development) + +```bash +# Start all services +docker compose up + +# Run migrations (in separate terminal) +docker compose --profile tools up migrate + +# Access the application +# Frontend: http://localhost:4200 +# Backend API: http://localhost:8000 +# RTMP Stream: rtmp://localhost:1935/live +# HLS Stream: http://localhost:8081/hls +``` + +### Option 2: Kubernetes (Production-ready) + +```bash +# Build and push images to local registry +./k8s/build-for-ctlptl.sh + +# Deploy to Kubernetes +kubectl apply -k k8s/overlays/development + +# Check deployment status +kubectl get pods -n media-analyzer + +# Access via port forwarding +kubectl port-forward service/frontend -n media-analyzer 4200:80 +``` + +## Architecture + +- **Django Backend**: Main API server with WebSocket support for real-time communication +- **Celery Workers**: Distributed task processing for AI analysis (logo detection, visual analysis) +- **PostgreSQL**: Primary database for application data and analysis results +- **Redis**: Cache and message broker for Celery tasks +- **Angular Frontend**: Single-page application with real-time video analysis overlays +- **NGINX RTMP**: Stream ingestion server for OBS and other RTMP sources + +## Development + +The system supports both local development with hot reload and production deployment: + +- **Development**: Uses Angular dev server and Django development server +- **Production**: Uses nginx for static files and optimized Docker images + +## Demo + +Stream video from OBS Studio to `rtmp://localhost:1935/live` and watch real-time AI analysis in the web dashboard with live object detection overlays. \ No newline at end of file diff --git a/def/architecture/architecture_diagram.svg b/def/architecture/architecture_diagram.svg new file mode 100644 index 0000000..95e20cb --- /dev/null +++ b/def/architecture/architecture_diagram.svg @@ -0,0 +1,489 @@ + + + + + + +MediaAnalyzer + + +cluster_legend + +Legend + + +cluster_sources + +Video Sources + + +cluster_adapters + +Source Adapters Pattern + + +cluster_core + +Core Platform + + +cluster_execution + +Execution Strategies Pattern + + +cluster_workers + +Celery Workers (Queue Segregation) + + +cluster_ai_adapters + +Analysis Adapters Pattern + + +cluster_storage + +Media Storage + + +cluster_frontend + +Frontend + + +cluster_cloud + +GCP Services + + + +implemented + +✓ Implemented + + + +planned + +○ Planned + + + + +webcam + +Webcam + + + +webcam_adapter + +WebcamAdapter + + + +webcam->webcam_adapter + + + + + +rtmp + +RTMP/OBS + + + +rtmp_adapter + +RtmpAdapter + + + +rtmp->rtmp_adapter + + + + + +files + +File Upload + + + +file_adapter + +FileAdapter + + + +files->file_adapter + + + + + +base_adapter + +BaseSourceAdapter +(Abstract) + + + +base_adapter->webcam_adapter + + + + + +base_adapter->rtmp_adapter + + + + + +base_adapter->file_adapter + + + + + +django + +Django API ++ Channels +:8000 + + + +webcam_adapter->django + + + + + +rtmp_adapter->django + + + + + +file_adapter->django + + + + + +postgres + +PostgreSQL +Database + + + +django->postgres + + + + + +redis + +Redis +Cache & Broker + + + +django->redis + + + + + +local_storage + +Local Files +(nginx-served) + + + +django->local_storage + + + + + +gcs_storage + +Google Cloud +Storage + + + +django->gcs_storage + + + + + +angular + +Angular 17 SPA ++ WebSocket +:4200 + + + +django->angular + + +WebSocket +API + + + +logo_worker + +Logo Detection +Worker +(logo_queue) + + + +redis->logo_worker + + + + + +visual_worker + +Visual Properties +Worker +(visual_queue) + + + +redis->visual_worker + + + + + +audio_worker + +Audio Transcript +Worker +(audio_queue) + + + +redis->audio_worker + + + + + +text_worker + +Text Recognition +Worker +(text_queue) + + + +redis->text_worker + + + + + +nginx + +NGINX +Reverse Proxy +:80 + + + +nginx->angular + + + + + +base_strategy + +BaseExecutionStrategy +(Abstract) + + + +local_strategy + +LocalStrategy + + + +base_strategy->local_strategy + + + + + +lan_strategy + +LANStrategy + + + +base_strategy->lan_strategy + + + + + +cloud_strategy + +CloudStrategy + + + +base_strategy->cloud_strategy + + + + + +clip_adapter + +CLIPAdapter +(Local) + + + +local_strategy->clip_adapter + + + + + +gcp_vision + +GCPVisionAdapter +(Cloud) + + + +local_strategy->gcp_vision + + + + + +yolo_adapter + +YOLOAdapter +(Planned) + + + +lan_strategy->yolo_adapter + + + + + +speech_api + +Speech-to-Text API +(Audio Transcript) + + + +cloud_strategy->speech_api + + + + + +logo_worker->local_strategy + + + + + +visual_worker->lan_strategy + + + + + +audio_worker->cloud_strategy + + + + + +text_worker->cloud_strategy + + + + + +base_ai + +DetectionAdapter +(Abstract) + + + +base_ai->clip_adapter + + + + + +base_ai->gcp_vision + + + + + +base_ai->yolo_adapter + + + + + +vision_api + +Cloud Vision API +(Logo Detection) + + + +gcp_vision->vision_api + + + + + +hls_player + +HLS.js Player ++ Canvas Overlays + + + +angular->hls_player + + + + + diff --git a/def/architecture/asciidiagram.md b/def/architecture/asciidiagram.md new file mode 100644 index 0000000..7c1f2c0 --- /dev/null +++ b/def/architecture/asciidiagram.md @@ -0,0 +1,153 @@ + + + + +-------+ + | OBS | RTMP stream + +---+---+ --------------+ + | | + v | + +-----+------+ | + | nginx-rtmp |-- HLS ───+ | + | (RTMP/HLS) | | | + +-----+------+ | | + | | | + HLS on /media | | + | | | + v | | + +----------+-----------+ | | + | Host “media/” dir |<----+ | + +----------+-----------+ | + | File watcher | + v | + +----------+-----------+ | + | Django Backend | | + | (REST + ASGI + WS) +<--WebSocket--+ + +---+------------------+ | + | | | + | +-------+ HTTP/API | + | v | + | +-------+------+ | + | | PostgreSQL | | + | +-------+------+ | + | | + | Celery tasks | + v | + +------+--------+ queue +------+--------+ + | celery-logo |<-----------| celery-default | + +---------------+ +---------------+ + | ^ + | | + +----> Redis (broker) <------+ + + Frontend: + +-----------+ + | Angular | + | (4200) | + +-----+-----+ + | + | HTTP/API (/api/…) + | + +-----v-----+ + | Nginx | + | (SSP) | + +-----------+ + +Legend: + +• OBS pushes RTMP into nginx-rtmp, which writes HLS (.m3u8/.ts) into the shared media/ folder. +• Django’s file-watcher polls media/ for new segments and enqueues Celery tasks. +• Django Backend serves REST API, WebSockets (via Channels → Redis), and hosts analysis logic. +• Celery Workers consume tasks from Redis: + – celery-logo for logo detection + – celery-default (or others) for visual analysis, etc. +• PostgreSQL holds application & analysis metadata. +• Angular (dev or static via Nginx) calls the Django API and listens on WebSockets. +• Nginx (frontend) proxies /api and /ws to Django and serves the Angular SPA. + +This layout keeps streaming, AI-processing, data storage, and UI layers cleanly separated. + + + + +codex +Below is an updated architecture sketch—with the local webcam path and AI execution‐strategy layer added. Each box is a service or component, and arrows show the main flows: + + +--------+ + | OBS | RTMP stream + +---+----+ --------+ + | | + v | + +-------+------+ | + | nginx-rtmp |-- HLS →| (writes .m3u8/.ts to host media/) + | (RTMP/HLS) | | + +-------+------+ | + | | + +------------+---------------+-------------+ + | HLS | + v | + +------+-------+ | + | Host “media/”|<-----------------------------------+ + | directory | (mount in backend & nginx-rtmp) + +------+-------+ + | + | (poll .ts files) + v + +------+-------+ + | File Watcher | → enqueues Celery tasks + +------+-------+ + | + v + +------+-------+ + | Django | REST API & WebSocket (ASGI) + | Backend | + | - RTMP/Webcam| + | Adapters | + +------+-------+ + | +--------------------------------+ + | WebSocket | | + +---------->+ Frontend Nginx (SPA + proxy) | + | | – Serves Angular app on 80 | + | | – Proxies /api → Django | + v | – Proxies /ws → Django | + +------+-------+ | – Proxies /streaming → nginx-rtmp + | PostgreSQL | +--------------------------------+ + +------+-------+ + | + v + +------+-------+ +------------------------+ + | Redis |<-----------+ Celery Workers | + | (broker) | tasks | – Worker queues: | + +------+-------+ | logo_detection, | + | | visual_analysis, | + | | default… | + +------------------→ | – Uses AnalysisEngine | + | with Execution | + | Strategies: | + | • local (in-worker) | + | • remote LAN (via | + | worker_host) | + | • cloud (via API) | + +------------------------+ + +--------+ + | Webcam | local device + +---+----+ + | + | via Django’s Webcam + |SourceAdapter (ffmpeg) + v + [ Django Backend ] + | + v + +------+-------+ + | Host “media/”| + +--------------+ + +Key points: + + • OBS → nginx-rtmp → host “media/” → Django file-watcher → Celery tasks + • Local Webcam → Django backend (WebcamSourceAdapter with ffmpeg) → host “media/” → same pipeline + • Django Backend (REST + ASGI/WebSocket) ↔ Angular (served by Frontend Nginx) + • Celery Workers pick up tasks from Redis, run AnalysisEngine → can execute locally, offload to remote LAN workers, or call cloud APIs + • PostgreSQL stores streams, queue, and analysis results + +This should give a clear bird’s-eye of how data and control flow through your streaming+AI stack. diff --git a/def/architecture/convo b/def/architecture/convo new file mode 100644 index 0000000..bda2bbb --- /dev/null +++ b/def/architecture/convo @@ -0,0 +1,172 @@ + +> generate a diagram of the architecture to include in readme, just the diagram output in /def. ask question if needed, suggest options which technology to use to generate them I need a graphviz like + diagram of how services connect and some of design decisions on the code, like adapter for sources, and strategy for execution (local, lan, cloud), how the │ + │ queue is organized in different analysis task, media storage, that could be media_root server by nginx or some cloud storage + +● I'll create an architecture diagram showing the service connections and design patterns. Let me ask a few questions to make it accurate: + + Questions: + 1. Current media storage: Are you currently using local nginx-served files or cloud storage? + 2. Queue organization: Do you have separate queues like logo_queue, visual_queue, etc., or task routing by queue names? + 3. GCP services: Which specific GCP services are you integrating (Cloud Vision, Cloud Storage, others)? + + Diagram tool options: + 1. Graphviz/DOT - Clean, professional, version-controllable + 2. PlantUML - Good for architectural diagrams, supports multiple output formats + 3. Mermaid - GitHub-friendly, can render directly in markdown + 4. Python + matplotlib/networkx - Programmatic, customizable + + My recommendation: Graphviz/DOT because it: + - Creates clean, professional diagrams + - Is text-based (version control friendly) + - Excellent for showing service connections and data flow + - Industry standard for technical architecture + + Should I proceed with Graphviz showing: + - Service containers (Django, Celery workers, Redis, PostgreSQL, nginx) + - Design patterns (Source Adapters, Execution Strategies) + - Queue segregation by analysis type + - Media storage options (local vs cloud) + - WebSocket connections for real-time updates + + What's your preference for the tool and any specific details to include/exclude? + +> even if not ready the idea is to include planed features, maybe use a different style or color to signal this, also maybe use something like svg so easily updetable for when they are done, 2. same thing + now is only logo detection, need default as base,3, GCS and Vision for now, extra.. about tool options can you give links for demos that are reprensetative of each to check the general feel. But I think + graphviz is the de facto, for super flexible and programable, not at all the usual WYSIWYG generic look which I'd like to avoid + +● Perfect! Here are representative demos to see the visual style: + + Tool Options with Demos: + + 1. Graphviz/DOT - https://graphviz.org/gallery/ + - Clean, programmatic, no WYSIWYG look + - Example: https://graphviz.org/Gallery/directed/cluster.html + 2. PlantUML - https://real-world-plantuml.com/ + - Architecture: https://plantuml.com/c4-plantuml + 3. Mermaid - https://mermaid.live/ + - Architecture: https://mermaid.live/edit#pako:eNptkk1PwzAMhv-K5QtIq6vCx9ZlqiAmEEKIwwSInBqaOG2mxqlWM9Gf6nO6hB3dN0_8vI8f2ccEJqFABKNQzFklUMsK3CrRkrOQF2h8Lk2nPXRt67DpeQHe90QKFNYzb8e4qFXt-Rc + 4. Python + networkx - https://networkx.org/documentation/stable/auto_examples/index.html + + Graphviz is definitely the best choice for your needs - professional, flexible, no generic look, SVG output, version-controllable. + + For the diagram, I'll include: + + ✅ Current (solid lines/colors): + - Django API, Celery logo workers, Redis, PostgreSQL + - Webcam/RTMP source adapters + - Local execution strategy + - GCS + Vision API integration + + 🔄 Planned (dashed lines/lighter colors): + - Additional analysis workers (visual, audio, text) + - LAN/Cloud execution strategies + - Advanced queue routing + - GPU effects pipeline + + Media storage: I'll show both nginx-served local and GCS options with a switch. + + Should I create the Graphviz DOT file now? It'll generate a clean SVG that you can easily update as features are implemented. + +> yes if you need to generate many files, use a folder inside /def + +● I'll create the architecture diagram using Graphviz. Let me create a folder and generate the files: + +● Bash(mkdir -p /home/mariano/wdir/snk/def/architecture) + ⎿  (No content) + +● Write(~/wdir/snk/def/architecture/system_architecture.dot) + ⎿  Wrote 175 lines to ../def/architecture/system_architecture.dot + digraph MediaAnalyzer { + // Graph settings + rankdir=TB; + bgcolor="white"; + fontname="Arial"; + fontsize=12; + // Node defaults + node [fontname="Arial", fontsize=10, shape=box, style=filled]; + edge [fontname="Arial", fontsize=8]; + … +165 lines (ctrl+r to expand) + +● Bash(cd /home/mariano/wdir/snk/def/architecture && dot -Tsvg system_architecture.dot -o architecture_diagram.svg) + ⎿  (No content) + +● Write(README.md) + ⎿  User rejected write to README.md + 1 + # Architecture Diagram Generation + 2 + + 3 + ## Files + 4 + - `system_architecture.dot` - Graphviz source file + 5 + - `architecture_diagram.svg` - Generated SVG diagram + 6 + + 7 + ## To Update Diagram + 8 + + 9 + ```bash + 10 + cd def/architecture + 11 + dot -Tsvg system_architecture.dot -o architecture_diagram.svg + 12 + ``` + 13 + + 14 + ## Design Patterns Shown + 15 + + 16 + 1. **Source Adapters** - Abstract different video input sources + 17 + 2. **Execution Strategies** - Local vs distributed processing + 18 + 3. **Queue Segregation** - Separate workers for different analysis types + 19 + 4. **Analysis Adapters** - Pluggable AI models + 20 + + 21 + ## Color Coding + 22 + + 23 + - **Green (✓)** - Currently implemented + 24 + - **Yellow (○)** - Planned features + 25 + - **Dotted lines** - Inheritance/abstraction + 26 + - **Dashed lines** - Planned connections + 27 + + 28 + ## Update Process + 29 + + 30 + When implementing new features: + 31 + 1. Change color from `#fff3cd` (yellow/planned) to `#d4edda` (green/implemented) + 32 + 2. Change edge style from `dashed` to `solid` + 33 + 3. Regenerate SVG + 34 \ No newline at end of file + +> dont step on the actual README !! in any case name it something like diagram md + +● Write(diagram.md) + ⎿  Wrote 33 lines to diagram.md + # Architecture Diagram Generation + ## Files + - `system_architecture.dot` - Graphviz source file + - `architecture_diagram.svg` - Generated SVG diagram + ## To Update Diagram + ```bash + cd def/architecture + … +23 lines (ctrl+r to expand) + +● Perfect! The architecture diagram is now generated at: + + - Source: /def/architecture/system_architecture.dot + - Generated SVG: /def/architecture/architecture_diagram.svg + - Instructions: /def/architecture/diagram.md + + The diagram shows: + ✅ Current implementation (green, solid lines) - Logo detection with CLIP/GCP Vision🔄 Planned features (yellow, dashed lines) - Additional analysis types, LAN/Cloud strategies📐 Design patterns - Source + adapters, execution strategies, queue segregation + + Now you can update the README to reference def/architecture/architecture_diagram.svg for the architecture diagram! + +> can we make it less wide without making square smallers, so it looks better in the main github + page, I think that the workers could be aligned verticaly to make a clearer separation with the + "core", media and frontend, also a bit more contrast in the colors, not much, especialy grouping + background squares + +● Update(system_architecture.dot) + ⎿  Updated system_architecture.dot with 2 additions + 4 bgcolor="white"; + 5 fontname="Arial"; + 6 fontsize=12; + 7 + ratio=fill; + 8 + size="12,16!"; + 9 + 10 // Node defaults + 11 node [fontname="Arial", fontsize=10, shape=box, style=filled]; + ⎿  5-hour limit reached ∙ resets 1pm + /upgrade to increase your usage limit. diff --git a/def/architecture/diagram.md b/def/architecture/diagram.md new file mode 100644 index 0000000..bf757b8 --- /dev/null +++ b/def/architecture/diagram.md @@ -0,0 +1,33 @@ +# Architecture Diagram Generation + +## Files +- `system_architecture.dot` - Graphviz source file +- `architecture_diagram.svg` - Generated SVG diagram + +## To Update Diagram + +```bash +cd def/architecture +dot -Tsvg system_architecture.dot -o architecture_diagram.svg +``` + +## Design Patterns Shown + +1. **Source Adapters** - Abstract different video input sources +2. **Execution Strategies** - Local vs distributed processing +3. **Queue Segregation** - Separate workers for different analysis types +4. **Analysis Adapters** - Pluggable AI models + +## Color Coding + +- **Green (✓)** - Currently implemented +- **Yellow (○)** - Planned features +- **Dotted lines** - Inheritance/abstraction +- **Dashed lines** - Planned connections + +## Update Process + +When implementing new features: +1. Change color from `#fff3cd` (yellow/planned) to `#d4edda` (green/implemented) +2. Change edge style from `dashed` to `solid` +3. Regenerate SVG \ No newline at end of file diff --git a/def/architecture/system_architecture.dot b/def/architecture/system_architecture.dot new file mode 100644 index 0000000..b405696 --- /dev/null +++ b/def/architecture/system_architecture.dot @@ -0,0 +1,177 @@ +digraph MediaAnalyzer { + // Graph settings + rankdir=TB; + bgcolor="white"; + fontname="Arial"; + fontsize=12; + ratio=fill; + size="12,16!"; + + // Node defaults + node [fontname="Arial", fontsize=10, shape=box, style=filled]; + edge [fontname="Arial", fontsize=8]; + + // Color scheme + subgraph cluster_legend { + label="Legend"; + style=filled; + color=lightgray; + node [shape=plaintext, style=filled]; + + implemented [label="✓ Implemented", fillcolor="#d4edda", color="#155724"]; + planned [label="○ Planned", fillcolor="#fff3cd", color="#856404"]; + + implemented -> planned [style=invis]; + } + + // Input Sources + subgraph cluster_sources { + label="Video Sources"; + style=filled; + color="#e3f2fd"; + + webcam [label="Webcam", fillcolor="#d4edda"]; + rtmp [label="RTMP/OBS", fillcolor="#d4edda"]; + files [label="File Upload", fillcolor="#fff3cd"]; + } + + // Source Adapters (Design Pattern) + subgraph cluster_adapters { + label="Source Adapters Pattern"; + style=filled; + color="#f3e5f5"; + + base_adapter [label="BaseSourceAdapter\n(Abstract)", fillcolor="#e1bee7"]; + webcam_adapter [label="WebcamAdapter", fillcolor="#d4edda"]; + rtmp_adapter [label="RtmpAdapter", fillcolor="#d4edda"]; + file_adapter [label="FileAdapter", fillcolor="#fff3cd"]; + } + + // Core Services + subgraph cluster_core { + label="Core Platform"; + style=filled; + color="#fff3e0"; + + django [label="Django API\n+ Channels\n:8000", fillcolor="#d4edda"]; + postgres [label="PostgreSQL\nDatabase", fillcolor="#d4edda"]; + redis [label="Redis\nCache & Broker", fillcolor="#d4edda"]; + nginx [label="NGINX\nReverse Proxy\n:80", fillcolor="#d4edda"]; + } + + // Execution Strategies (Design Pattern) + subgraph cluster_execution { + label="Execution Strategies Pattern"; + style=filled; + color="#e8f5e8"; + + base_strategy [label="BaseExecutionStrategy\n(Abstract)", fillcolor="#c8e6c9"]; + local_strategy [label="LocalStrategy", fillcolor="#d4edda"]; + lan_strategy [label="LANStrategy", fillcolor="#fff3cd"]; + cloud_strategy [label="CloudStrategy", fillcolor="#fff3cd"]; + } + + // Analysis Workers (Queue Segregation) + subgraph cluster_workers { + label="Celery Workers (Queue Segregation)"; + style=filled; + color="#e3f2fd"; + + logo_worker [label="Logo Detection\nWorker\n(logo_queue)", fillcolor="#d4edda"]; + visual_worker [label="Visual Properties\nWorker\n(visual_queue)", fillcolor="#fff3cd"]; + audio_worker [label="Audio Transcript\nWorker\n(audio_queue)", fillcolor="#fff3cd"]; + text_worker [label="Text Recognition\nWorker\n(text_queue)", fillcolor="#fff3cd"]; + } + + // AI Adapters (Design Pattern) + subgraph cluster_ai_adapters { + label="Analysis Adapters Pattern"; + style=filled; + color="#fce4ec"; + + base_ai [label="DetectionAdapter\n(Abstract)", fillcolor="#f8bbd9"]; + clip_adapter [label="CLIPAdapter\n(Local)", fillcolor="#d4edda"]; + gcp_vision [label="GCPVisionAdapter\n(Cloud)", fillcolor="#d4edda"]; + yolo_adapter [label="YOLOAdapter\n(Planned)", fillcolor="#fff3cd"]; + } + + // Storage Options + subgraph cluster_storage { + label="Media Storage"; + style=filled; + color="#f1f8e9"; + + local_storage [label="Local Files\n(nginx-served)", fillcolor="#d4edda"]; + gcs_storage [label="Google Cloud\nStorage", fillcolor="#d4edda"]; + } + + // Frontend + subgraph cluster_frontend { + label="Frontend"; + style=filled; + color="#e8eaf6"; + + angular [label="Angular 17 SPA\n+ WebSocket\n:4200", fillcolor="#d4edda"]; + hls_player [label="HLS.js Player\n+ Canvas Overlays", fillcolor="#d4edda"]; + } + + // Cloud Services + subgraph cluster_cloud { + label="GCP Services"; + style=filled; + color="#e0f2f1"; + + vision_api [label="Cloud Vision API\n(Logo Detection)", fillcolor="#d4edda"]; + speech_api [label="Speech-to-Text API\n(Audio Transcript)", fillcolor="#fff3cd"]; + } + + // Connections - Current Implementation (solid) + webcam -> webcam_adapter [color="#2e7d32"]; + rtmp -> rtmp_adapter [color="#2e7d32"]; + + webcam_adapter -> django [color="#2e7d32"]; + rtmp_adapter -> django [color="#2e7d32"]; + + django -> postgres [color="#2e7d32"]; + django -> redis [color="#2e7d32"]; + django -> local_storage [color="#2e7d32"]; + django -> gcs_storage [color="#2e7d32"]; + + redis -> logo_worker [color="#2e7d32"]; + logo_worker -> local_strategy [color="#2e7d32"]; + local_strategy -> clip_adapter [color="#2e7d32"]; + local_strategy -> gcp_vision [color="#2e7d32"]; + gcp_vision -> vision_api [color="#2e7d32"]; + + django -> angular [label="WebSocket\nAPI", color="#2e7d32"]; + angular -> hls_player [color="#2e7d32"]; + nginx -> angular [color="#2e7d32"]; + + // Planned Connections (dashed) + files -> file_adapter [color="#f57f17", style=dashed]; + file_adapter -> django [color="#f57f17", style=dashed]; + + redis -> visual_worker [color="#f57f17", style=dashed]; + redis -> audio_worker [color="#f57f17", style=dashed]; + redis -> text_worker [color="#f57f17", style=dashed]; + + visual_worker -> lan_strategy [color="#f57f17", style=dashed]; + audio_worker -> cloud_strategy [color="#f57f17", style=dashed]; + text_worker -> cloud_strategy [color="#f57f17", style=dashed]; + + cloud_strategy -> speech_api [color="#f57f17", style=dashed]; + lan_strategy -> yolo_adapter [color="#f57f17", style=dashed]; + + // Inheritance relationships (dotted) + base_adapter -> webcam_adapter [style=dotted, color=gray]; + base_adapter -> rtmp_adapter [style=dotted, color=gray]; + base_adapter -> file_adapter [style=dotted, color=gray]; + + base_strategy -> local_strategy [style=dotted, color=gray]; + base_strategy -> lan_strategy [style=dotted, color=gray]; + base_strategy -> cloud_strategy [style=dotted, color=gray]; + + base_ai -> clip_adapter [style=dotted, color=gray]; + base_ai -> gcp_vision [style=dotted, color=gray]; + base_ai -> yolo_adapter [style=dotted, color=gray]; +} \ No newline at end of file diff --git a/def/panel_capture.png b/def/panel_capture.png new file mode 100644 index 0000000..99ad491 Binary files /dev/null and b/def/panel_capture.png differ diff --git a/media-analyzer/frontend/angular.json b/media-analyzer/frontend/angular.json index ca86363..583fcf0 100644 --- a/media-analyzer/frontend/angular.json +++ b/media-analyzer/frontend/angular.json @@ -45,13 +45,13 @@ "budgets": [ { "type": "initial", - "maximumWarning": "500kb", - "maximumError": "1mb" + "maximumWarning": "1mb", + "maximumError": "2mb" }, { "type": "anyComponentStyle", - "maximumWarning": "2kb", - "maximumError": "4kb" + "maximumWarning": "4kb", + "maximumError": "8kb" } ], "outputHashing": "all" diff --git a/media-analyzer/frontend/nginx.conf b/media-analyzer/frontend/nginx.conf index 56cd595..4b6cda2 100644 --- a/media-analyzer/frontend/nginx.conf +++ b/media-analyzer/frontend/nginx.conf @@ -1,5 +1,3 @@ -worker_processes 1; - server { listen 80; listen [::]:80;