diff --git a/def/architecture/architecture_diagram.svg b/docs/architecture/architecture_diagram.svg similarity index 100% rename from def/architecture/architecture_diagram.svg rename to docs/architecture/architecture_diagram.svg diff --git a/def/architecture/asciidiagram.md b/docs/architecture/asciidiagram.md similarity index 100% rename from def/architecture/asciidiagram.md rename to docs/architecture/asciidiagram.md diff --git a/def/architecture/convo b/docs/architecture/convo similarity index 100% rename from def/architecture/convo rename to docs/architecture/convo diff --git a/def/architecture/diagram.md b/docs/architecture/diagram.md similarity index 100% rename from def/architecture/diagram.md rename to docs/architecture/diagram.md diff --git a/def/architecture/system_architecture.dot b/docs/architecture/system_architecture.dot similarity index 100% rename from def/architecture/system_architecture.dot rename to docs/architecture/system_architecture.dot diff --git a/docs/index.html b/docs/index.html new file mode 100644 index 0000000..8d1d013 --- /dev/null +++ b/docs/index.html @@ -0,0 +1,128 @@ + + + + + + Media Analyzer - Documentation + + + +
+

Media Analyzer

+

Real-Time Video Analysis Platform

+
+ +
+
+
+

System Architecture

+ View Full +
+ + System Architecture Diagram + +
+

Complete system overview showing video ingestion, AI processing pipeline, and real-time dashboard components.

+

Components

+
    +
  • Video Ingestion: RTMP streams from OBS, FFmpeg HLS conversion
    • +
  • AI Processing: CLIP/YOLO for logo detection and scene analysis
    • +
  • Real-time Communication: Django Channels WebSocket for live updates
    • +
  • Frontend: Angular 17+ with HLS.js video player and Canvas overlays
    • +
+
+
+ +
+

Key Features

+
+
+

Video Streaming

+
    +
  • RTMP ingestion from OBS Studio
    • +
  • FFmpeg HLS conversion
    • +
  • Event-driven segment detection
    • +
  • WebSocket-powered live updates
    • +
+
+
+

AI Analysis

+
    +
  • Logo/brand detection (CLIP)
    • +
  • Object detection (YOLO)
    • +
  • Real-time vs batch processing modes
    • +
  • Switchable local/cloud backends
    • +
+
+
+

Infrastructure

+
    +
  • Docker containerized services
    • +
  • Kubernetes orchestration
    • +
  • GCP integration (Storage, Vision)
    • +
  • Celery task queue with Redis
    • +
+
+
+
+ +
+

Technology Stack

+
+
+

Backend

+
    +
  • Django + Channels
    • +
  • Django REST Framework
    • +
  • PostgreSQL
    • +
  • Celery + Redis
    • +
  • FFmpeg
    • +
+
+
+

AI/ML

+
    +
  • OpenCV
    • +
  • CLIP (scene analysis)
    • +
  • YOLO (object detection)
    • +
  • Hugging Face Transformers
    • +
  • GCP Vision API
    • +
+
+
+

Frontend

+
    +
  • Angular 17+
    • +
  • HLS.js video player
    • +
  • Canvas overlays
    • +
  • WebSocket client
    • +
  • Standalone components
    • +
+
+
+
+ +
+

Architecture Goals

+
+
+

Event-Driven Design

+

File system watchers detect new HLS segments, triggering AI processing and real-time WebSocket notifications.

+
+
+

Scalable Processing

+

Celery workers handle AI tasks with configurable queues for real-time vs batch processing modes.

+
+
+

Cloud-Native

+

Kubernetes manifests for local (KIND) and production (GKE) deployment with easy environment switching.

+
+
+
+
+ + + + diff --git a/docs/styles.css b/docs/styles.css new file mode 100644 index 0000000..640e114 --- /dev/null +++ b/docs/styles.css @@ -0,0 +1,360 @@ +/* Reset and base */ +*, *::before, *::after { + box-sizing: border-box; +} + +:root { + --color-bg: #0f0f0f; + --color-surface: #1a1a1a; + --color-surface-hover: #252525; + --color-border: #333; + --color-text: #e0e0e0; + --color-text-muted: #888; + --color-accent: #4A90D9; + --color-accent-light: #6BA3E0; + --radius: 8px; + --shadow: 0 2px 8px rgba(0,0,0,0.3); +} + +html { + font-size: 16px; +} + +body { + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, sans-serif; + background: var(--color-bg); + color: var(--color-text); + line-height: 1.6; + margin: 0; + padding: 0; + min-height: 100vh; +} + +/* Header */ +header { + background: var(--color-surface); + border-bottom: 1px solid var(--color-border); + padding: 2rem; + text-align: center; +} + +header h1 { + margin: 0; + font-size: 2rem; + font-weight: 600; + color: var(--color-text); +} + +header .subtitle { + margin: 0.5rem 0 0; + color: var(--color-text-muted); + font-size: 1rem; +} + +/* Main content */ +main { + max-width: 1400px; + margin: 0 auto; + padding: 2rem; +} + +section { + margin-bottom: 3rem; +} + +section h2 { + font-size: 1.5rem; + font-weight: 600; + margin: 0 0 1.5rem; + padding-bottom: 0.5rem; + border-bottom: 2px solid var(--color-border); +} + +/* Card Grid */ +.card-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + gap: 1.5rem; +} + +@media (min-width: 1000px) { + .card-grid { + grid-template-columns: repeat(3, 1fr); + } +} + +@media (min-width: 700px) and (max-width: 999px) { + .card-grid { + grid-template-columns: repeat(2, 1fr); + } +} + +/* Graph Cards */ +.card { + display: block; + background: var(--color-surface); + border: 1px solid var(--color-border); + border-radius: var(--radius); + overflow: hidden; + text-decoration: none; + color: inherit; + transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s; +} + +.card:hover { + transform: translateY(-2px); + box-shadow: var(--shadow); + border-color: var(--color-accent); +} + +.card-preview { + aspect-ratio: 4/3; + background: #fff; + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + padding: 1rem; +} + +.card-preview img { + max-width: 100%; + max-height: 100%; + object-fit: contain; +} + +.card-content { + padding: 1rem; +} + +.card-content h3 { + margin: 0 0 0.5rem; + font-size: 1.1rem; + font-weight: 600; + color: var(--color-accent-light); +} + +.card-content p { + margin: 0; + font-size: 0.9rem; + color: var(--color-text-muted); +} + +/* Findings Grid */ +.findings-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + gap: 1.5rem; +} + +@media (min-width: 1000px) { + .findings-grid { + grid-template-columns: repeat(3, 1fr); + } +} + +.finding-card { + background: var(--color-surface); + border: 1px solid var(--color-border); + border-radius: var(--radius); + padding: 1.25rem; +} + +.finding-card h3 { + margin: 0 0 0.75rem; + font-size: 1rem; + font-weight: 600; + color: var(--color-accent-light); +} + +.finding-card p, +.finding-card ul { + margin: 0 0 0.75rem; + font-size: 0.9rem; +} + +.finding-card ul { + padding-left: 1.25rem; +} + +.finding-card li { + margin-bottom: 0.25rem; +} + +.finding-card code { + background: #2a2a2a; + padding: 0.1em 0.4em; + border-radius: 3px; + font-size: 0.85em; + color: #f0f0f0; +} + +.finding-card pre { + background: var(--color-bg); + padding: 1rem; + border-radius: 4px; + overflow-x: auto; + margin-top: 0.5rem; + font-size: 0.85rem; +} + +/* Tech Stack Grid */ +.tech-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); + gap: 1.5rem; +} + +@media (min-width: 700px) { + .tech-grid { + grid-template-columns: repeat(3, 1fr); + } +} + +.tech-column { + background: var(--color-surface); + border: 1px solid var(--color-border); + border-radius: var(--radius); + padding: 1.25rem; +} + +.tech-column h3 { + margin: 0 0 0.75rem; + font-size: 1rem; + font-weight: 600; + color: var(--color-accent-light); +} + +.tech-column ul { + margin: 0; + padding-left: 1.25rem; + font-size: 0.9rem; +} + +.tech-column li { + margin-bottom: 0.25rem; +} + +/* Graph Section */ +.graph-section { + background: var(--color-surface); + border: 1px solid var(--color-border); + border-radius: var(--radius); + margin-bottom: 2rem; + overflow: hidden; +} + +.graph-header-row { + display: flex; + justify-content: space-between; + align-items: center; + padding: 1rem 1.5rem; + border-bottom: 1px solid var(--color-border); +} + +.graph-header-row h2 { + margin: 0; + padding: 0; + border: none; + font-size: 1.25rem; +} + +.view-btn { + background: var(--color-accent); + color: #fff; + text-decoration: none; + padding: 0.5rem 1rem; + border-radius: 4px; + font-size: 0.85rem; + font-weight: 500; +} + +.view-btn:hover { + background: var(--color-accent-light); +} + +.graph-section .graph-preview { + display: block; + background: #fff; + max-height: 400px; + overflow: hidden; +} + +.graph-section .graph-preview img { + width: 100%; + height: auto; + object-fit: contain; + object-position: top left; +} + +.graph-details { + padding: 1.5rem; + border-top: 1px solid var(--color-border); +} + +.graph-details p { + margin: 0 0 1rem; + color: var(--color-text-muted); +} + +.graph-details h4 { + margin: 1.5rem 0 0.75rem; + font-size: 0.95rem; + font-weight: 600; + color: var(--color-accent-light); +} + +.graph-details h4:first-child { + margin-top: 0; +} + +.graph-details ul { + margin: 0; + padding-left: 1.25rem; + font-size: 0.9rem; +} + +.graph-details li { + margin-bottom: 0.35rem; +} + +.graph-details code { + background: #2a2a2a; + padding: 0.1em 0.4em; + border-radius: 3px; + font-size: 0.85em; +} + +/* Footer */ +footer { + background: var(--color-surface); + border-top: 1px solid var(--color-border); + padding: 1.5rem 2rem; + text-align: center; + color: var(--color-text-muted); + font-size: 0.9rem; +} + +footer p { + margin: 0.25rem 0; +} + +/* Mobile adjustments */ +@media (max-width: 600px) { + main { + padding: 1rem; + } + + header { + padding: 1.5rem 1rem; + } + + header h1 { + font-size: 1.5rem; + } + + .card-grid, + .findings-grid { + grid-template-columns: 1fr; + } +} diff --git a/thevideo.MD b/thevideo.MD deleted file mode 100644 index c3fb523..0000000 --- a/thevideo.MD +++ /dev/null @@ -1,38 +0,0 @@ -goals of the video - show what I know of the stack thoroughly - show how how I deal with stuff I don't know - show my thought process and development workflow - show the current state of my use of AI tools - managing context - how I "code-review" it as it goes (def/whyclaudewhy, def/improvements, relevant discussions) - - -video structure - introduction - what you are about see - - - - - - - - where I come from - keyboards (early days) - music vs coding (the gap gets wider) - recurrent back to basics - behind the scenes - the setup - deskmeter - timelapses/ffmpeg - demo - phase 1 - phase 2 - phase 3 - extras - opinions - bootcamps - pimp-up-your-profile new trend - show the current state of my use of AI tools - motivations - im not in it (just) for the money - video processing is my passion (? - -