mariano/media-analyzer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

proper docs folder

Browse Source
This commit is contained in:
buenosairesam
2026-01-22 12:26:30 -03:00
parent 4dee2860f5
commit f741323984
8 changed files with 488 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

128
docs/index.html Normal file
View File

@@ -0,0 +1,128 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Media Analyzer - Documentation</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>Media Analyzer</h1>
<p class="subtitle">Real-Time Video Analysis Platform</p>
</header>
<main>
<section class="graph-section" id="system-architecture">
<div class="graph-header-row">
<h2>System Architecture</h2>
<a href="architecture/architecture_diagram.svg" class="view-btn" target="_blank">View Full</a>
</div>
<a href="architecture/architecture_diagram.svg" class="graph-preview" target="_blank">
<img src="architecture/architecture_diagram.svg" alt="System Architecture Diagram">
</a>
<div class="graph-details">
<p>Complete system overview showing video ingestion, AI processing pipeline, and real-time dashboard components.</p>
<h4>Components</h4>
<ul>
<li><strong>Video Ingestion</strong>: RTMP streams from OBS, FFmpeg HLS conversion</li>
<li><strong>AI Processing</strong>: CLIP/YOLO for logo detection and scene analysis</li>
<li><strong>Real-time Communication</strong>: Django Channels WebSocket for live updates</li>
<li><strong>Frontend</strong>: Angular 17+ with HLS.js video player and Canvas overlays</li>
</ul>
</div>
</section>
<section class="findings-section">
<h2>Key Features</h2>
<div class="findings-grid">
<article class="finding-card">
<h3>Video Streaming</h3>
<ul>
<li>RTMP ingestion from OBS Studio</li>
<li>FFmpeg HLS conversion</li>
<li>Event-driven segment detection</li>
<li>WebSocket-powered live updates</li>
</ul>
</article>
<article class="finding-card">
<h3>AI Analysis</h3>
<ul>
<li>Logo/brand detection (CLIP)</li>
<li>Object detection (YOLO)</li>
<li>Real-time vs batch processing modes</li>
<li>Switchable local/cloud backends</li>
</ul>
</article>
<article class="finding-card">
<h3>Infrastructure</h3>
<ul>
<li>Docker containerized services</li>
<li>Kubernetes orchestration</li>
<li>GCP integration (Storage, Vision)</li>
<li>Celery task queue with Redis</li>
</ul>
</article>
</div>
</section>
<section class="tech-section">
<h2>Technology Stack</h2>
<div class="tech-grid">
<div class="tech-column">
<h3>Backend</h3>
<ul>
<li>Django + Channels</li>
<li>Django REST Framework</li>
<li>PostgreSQL</li>
<li>Celery + Redis</li>
<li>FFmpeg</li>
</ul>
</div>
<div class="tech-column">
<h3>AI/ML</h3>
<ul>
<li>OpenCV</li>
<li>CLIP (scene analysis)</li>
<li>YOLO (object detection)</li>
<li>Hugging Face Transformers</li>
<li>GCP Vision API</li>
</ul>
</div>
<div class="tech-column">
<h3>Frontend</h3>
<ul>
<li>Angular 17+</li>
<li>HLS.js video player</li>
<li>Canvas overlays</li>
<li>WebSocket client</li>
<li>Standalone components</li>
</ul>
</div>
</div>
</section>
<section class="findings-section">
<h2>Architecture Goals</h2>
<div class="findings-grid">
<article class="finding-card">
<h3>Event-Driven Design</h3>
<p>File system watchers detect new HLS segments, triggering AI processing and real-time WebSocket notifications.</p>
</article>
<article class="finding-card">
<h3>Scalable Processing</h3>
<p>Celery workers handle AI tasks with configurable queues for real-time vs batch processing modes.</p>
</article>
<article class="finding-card">
<h3>Cloud-Native</h3>
<p>Kubernetes manifests for local (KIND) and production (GKE) deployment with easy environment switching.</p>
</article>
</div>
</section>
</main>
<footer>
<p>Media Analyzer - Real-Time Video Analysis Platform</p>
</footer>
</body>
</html>