init layout

2025-08-15 16:17:59 -03:00
commit 05224c712b
147 changed files with 15028 additions and 0 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -0,0 +1,3 @@
+venv
+node_modules
+__pycache__
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -0,0 +1,327 @@
+Real-Time Video Analysis Platform
+Project Overview
+A scalable 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.
+Core Functionality
+
+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
+
+Technical 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
+Cloud: Google Cloud Platform integration (Storage, Vision API, Build, Logging)
+Streaming: FFmpeg for RTMP→HLS conversion, WebSocket for real-time data
+
+Key Features
+
+Dual processing modes (real-time vs batch) with runtime switching
+Live video analysis overlays (bounding boxes, object labels, confidence scores)
+OBS Studio integration for testing with various video sources
+Kubernetes auto-scaling based on processing queue depth
+Performance monitoring and benchmarking for 1080p30 video streams
+Platform-agnostic design with cloud-specific optimizations
+
+Architecture Goals
+
+Demonstrate event-driven microservices architecture
+Showcase AI model deployment and inference at scale
+Implement real-time data streaming and WebSocket communication
+Show proficiency with modern web frameworks and container orchestration
+Prove understanding of video processing pipelines and streaming protocols
+
+This project serves as a technical showcase for backend development, AI/ML integration, cloud platform expertise, and modern web application architecture - directly addressing the requirements for a streaming media and AI-focused development role.
+
+
+
+Master Implementation Checklist
+Core Infrastructure Setup
+
+ Django project structure - Create apps: streaming, ai_processing, api, dashboard
+ Database models - Stream, MediaSegment, VideoAnalysis, ObjectDetection tables
+ Docker containers - Django app, PostgreSQL, Redis, Nginx
+ Basic Kubernetes manifests - Deployments, services, configmaps, PVCs
+ RTMP ingestion endpoint - Accept OBS streams, trigger ffmpeg HLS conversion
+ HLS segment monitoring - File watcher to detect new video segments
+
+AI Processing Pipeline
+
+ Video analysis models setup - CLIP for scene understanding, YOLO for object detection
+ Frame extraction service - Extract keyframes from HLS segments
+ Real-time vs batch processing abstraction - Strategy pattern implementation
+ AI processing worker - Celery tasks for video analysis
+ Results storage - Store detection results with timestamps and confidence scores
+ Processing queue management - Handle backlog and prioritization
+
+Real-Time Video Effects Pipeline
+
+ GPU-accelerated shader pipeline - OpenGL/CUDA integration with FFmpeg
+ AI-triggered effects system - Apply shaders based on detection results
+ Custom filter development - Face blur, object highlighting, scene-based color grading
+ WebGL frontend effects - Client-side shader preview and control
+
+Angular Frontend
+
+ Angular 17+ project setup - Standalone components, signals, new control flow
+ WebSocket service - Real-time communication with Django Channels
+ Video player component - HLS.js integration for stream playback
+ Analysis overlay component - Canvas-based bounding boxes and labels
+ Stream control dashboard - Start/stop streams, processing mode toggle
+ Real-time results panel - Live object detection and scene analysis display
+
+Real-time Communication
+
+ Django Channels setup - WebSocket consumers for live data streaming
+ WebSocket message protocols - Define message types for analysis results
+ Frontend WebSocket integration - Angular service for real-time updates
+ Overlay synchronization - Match analysis results with video timeline
+
+GCP Integration Features
+
+ Cloud Storage integration - Store processed video segments and analysis results
+ Cloud Vision API comparison - Benchmark against local models (within free tier)
+ Cloud Logging - Structured logging for monitoring and debugging
+ Cloud Build CI/CD - Automated Docker builds and deployments
+ GKE-specific configurations - Node selectors, resource requests/limits
+ Cloud Load Balancer - External access to the application
+
+Video Processing & Effects
+
+ FFmpeg integration - HLS generation with proper segment duration
+ Video quality optimization - Handle 1080p streams efficiently
+ Frame rate analysis - Detect motion and activity levels
+ Color analysis - Dominant colors and scene brightness
+ Performance monitoring - Track processing latency and throughput
+
+Kubernetes Production Setup
+
+ Resource management - CPU/memory limits for AI processing
+ Auto-scaling configuration - HPA based on processing queue length
+ Persistent storage - Claims for video segments and database
+ Service mesh setup - Istio for traffic management (optional)
+ Monitoring stack - Prometheus and Grafana integration
+ Ingress configuration - NGINX ingress with SSL termination
+
+Testing & Validation
+
+ OBS integration testing - Verify RTMP stream ingestion
+ AI model accuracy testing - Validate object detection results
+ Performance benchmarking - Process 1080p30 streams in real-time
+ WebSocket stress testing - Multiple concurrent viewers
+ End-to-end pipeline testing - OBS → Processing → Angular display
+
+Documentation & Deployment
+
+ API documentation - OpenAPI/Swagger specs
+ Kubernetes deployment guide - Step-by-step cluster setup
+ GCP setup instructions - Service account, IAM, and resource creation
+ Architecture diagrams - System overview and data flow
+ Performance metrics documentation - Benchmarks and optimization notes
+
+
+
+Suggested Implementation Order:
+Phase 1 (Foundation): Infrastructure Setup → Django + Models → Docker Setup
+Phase 2 (Core Features): RTMP Ingestion → AI Processing Pipeline → Results Storage
+Phase 3 (Frontend): Angular Setup → WebSocket Service → Video Player
+Phase 4 (Integration): Real-time Communication → Analysis Overlays → Stream Control
+Phase 5 (Cloud): GCP Services → Kubernetes Production → Monitoring
+Phase 6 (Polish): Testing → Documentation → Performance Optimization
+This order ensures each component builds on the previous ones and you can test functionality incrementally. The GCP integration is spread throughout to demonstrate platform knowledge without being overwhelming.
+Ready to start with the foundation phase?
+
+
+
+Media Analyzer - Complete Project Structure
+media-analyzer/
+├── README.md
+├── docker-compose.yml              # Development environment
+├── requirements.txt                # Python dependencies
+├── manage.py                      # Django management
+│
+├── backend/                       # Django application root
+│   ├── media_analyzer/           # Main Django project
+│   │   ├── __init__.py
+│   │   ├── settings/
+│   │   │   ├── __init__.py
+│   │   │   ├── base.py           # Base settings
+│   │   │   ├── development.py    # Dev overrides
+│   │   │   └── production.py     # Prod overrides
+│   │   ├── urls.py               # Main URL routing
+│   │   ├── wsgi.py              # WSGI application
+│   │   └── asgi.py              # ASGI for Django Channels
+│   │
+│   ├── streaming/                # RTMP/HLS handling app
+│   │   ├── __init__.py
+│   │   ├── models.py            # Stream, MediaSegment models
+│   │   ├── views.py             # RTMP endpoints
+│   │   ├── consumers.py         # WebSocket consumers
+│   │   ├── rtmp_handler.py      # RTMP server logic
+│   │   ├── hls_monitor.py       # File system watcher
+│   │   └── urls.py
+│   │
+│   ├── ai_processing/            # AI analysis app
+│   │   ├── __init__.py
+│   │   ├── models.py            # Analysis results models
+│   │   ├── processors/
+│   │   │   ├── __init__.py
+│   │   │   ├── base.py          # Processing strategy interface
+│   │   │   ├── realtime.py      # Real-time processor
+│   │   │   ├── batch.py         # Batch processor
+│   │   │   └── video_analyzer.py # CLIP/YOLO integration
+│   │   ├── tasks.py             # Celery tasks
+│   │   └── apps.py              # App configuration
+│   │
+│   ├── effects/                  # Real-time video effects app
+│   │   ├── __init__.py
+│   │   ├── models.py            # Effect presets, shader configs
+│   │   ├── processors/
+│   │   │   ├── __init__.py
+│   │   │   ├── gpu_pipeline.py  # OpenGL/CUDA processing
+│   │   │   ├── ffmpeg_filters.py # FFmpeg custom filters
+│   │   │   └── effect_engine.py  # Main effects orchestrator
+│   │   ├── shaders/             # GLSL shader files
+│   │   │   ├── vertex/          # Vertex shaders
+│   │   │   ├── fragment/        # Fragment shaders
+│   │   │   ├── blur.glsl       # Face blur shader
+│   │   │   ├── highlight.glsl   # Object highlight shader
+│   │   │   └── color_grade.glsl # Scene-based color grading
+│   │   ├── triggers/
+│   │   │   ├── __init__.py
+│   │   │   ├── ai_triggers.py   # AI detection → effect mapping
+│   │   │   └── manual_triggers.py # User-controlled effects
+│   │   ├── tasks.py             # GPU processing Celery tasks
+│   │   └── apps.py
+│   │
+│   └── api/                     # REST API app
+│       ├── __init__.py
+│       ├── serializers.py       # DRF serializers
+│       ├── views.py            # API endpoints
+│       └── urls.py
+│
+├── frontend/                    # Angular application
+│   ├── package.json
+│   ├── angular.json
+│   ├── src/
+│   │   ├── app/
+│   │   │   ├── app.component.ts
+│   │   │   ├── app.config.ts    # Angular 17+ config
+│   │   │   │
+│   │   │   ├── components/
+│   │   │   │   ├── stream-viewer/
+│   │   │   │   │   ├── stream-viewer.component.ts
+│   │   │   │   │   ├── stream-viewer.component.html
+│   │   │   │   │   └── stream-viewer.component.scss
+│   │   │   │   ├── analysis-panel/
+│   │   │   │   │   └── analysis-panel.component.ts
+│   │   │   │   ├── stream-control/
+│   │   │   │   │   └── stream-control.component.ts
+│   │   │   │   └── effects-panel/
+│   │   │   │       ├── effects-panel.component.ts
+│   │   │   │       ├── effects-panel.component.html
+│   │   │   │       └── shader-editor.component.ts
+│   │   │   │
+│   │   │   ├── services/
+│   │   │   │   ├── websocket.service.ts
+│   │   │   │   ├── stream.service.ts
+│   │   │   │   ├── analysis.service.ts
+│   │   │   │   └── effects.service.ts
+│   │   │   │
+│   │   │   ├── webgl/            # Client-side effects engine
+│   │   │   │   ├── shader.service.ts
+│   │   │   │   ├── effects-engine.ts
+│   │   │   │   ├── webgl-utils.ts
+│   │   │   │   └── shaders/      # WebGL shaders
+│   │   │   │       ├── overlay.vert.glsl
+│   │   │   │       ├── overlay.frag.glsl
+│   │   │   │       ├── particle.vert.glsl
+│   │   │   │       └── particle.frag.glsl
+│   │   │   │
+│   │   │   └── models/
+│   │   │       ├── stream.interface.ts
+│   │   │       ├── analysis.interface.ts
+│   │   │       └── effects.interface.ts
+│   │   │
+│   │   └── main.ts              # Angular bootstrap
+│   └── ...
+│
+├── docker/                     # Docker configurations
+│   ├── Dockerfile.django       # Django app container
+│   ├── Dockerfile.nginx        # Nginx for HLS serving
+│   └── docker-compose.override.yml
+│
+├── k8s/                        # Kubernetes manifests
+│   ├── base/                   # Base configurations
+│   │   ├── namespace.yaml
+│   │   ├── django-deployment.yaml
+│   │   ├── nginx-deployment.yaml
+│   │   ├── postgres-statefulset.yaml
+│   │   ├── redis-deployment.yaml
+│   │   ├── services.yaml
+│   │   └── configmaps.yaml
+│   │
+│   ├── overlays/              # Environment-specific
+│   │   ├── development/
+│   │   │   └── kustomization.yaml
+│   │   └── production/
+│   │       ├── kustomization.yaml
+│   │       └── gcp-specific.yaml
+│   │
+│   └── scripts/
+│       ├── deploy.sh
+│       └── setup-cluster.sh
+│
+├── media/                     # Media storage (mounted volume)
+│   ├── segments/             # HLS video segments
+│   ├── playlists/           # HLS playlists
+│   └── uploads/             # Uploaded content
+│
+├── scripts/                  # Helper scripts
+│   ├── setup-dev.sh         # Development environment setup
+│   ├── start-rtmp-server.sh # RTMP server startup
+│   └── load-ai-models.py    # Download and setup AI models
+│
+└── docs/                    # Documentation
+    ├── api.md              # API documentation
+    ├── deployment.md       # Deployment guide
+    └── architecture.md     # System architecture
+
+
+
+
+
+vertical separation instead of phases
+
+Slice 1: Basic Stream Ingestion
+
+RTMP endpoint (basic)
+HLS conversion (minimal)
+Stream model + API
+Simple Angular video player
+Basic K8s deployment
+
+Slice 2: AI Processing Foundation
+
+Video segment detection
+Single AI model integration (YOLO)
+Processing strategy abstraction
+Results storage + API
+Analysis display component
+
+Slice 3: Real-time Communication
+
+WebSocket setup
+Live analysis streaming
+Frontend overlay system
+Processing queue monitoring
+
+Slice 4: GCP Integration
+
+Cloud Storage for segments
+GKE deployment
+Monitoring integration
--- a/init.sh
+++ b/init.sh
@@ -0,0 +1,120 @@
+# Media Analyzer Project Setup Commands
+
+# ===== PROJECT ROOT SETUP =====
+mkdir media-analyzer
+cd media-analyzer
+
+# Create main directories
+mkdir -p {docker,k8s/{base,overlays/{development,production}},media/{segments,playlists,uploads},scripts,docs}
+
+# ===== DJANGO BACKEND SETUP =====
+cd backend
+
+# Create Django project
+django-admin startproject media_analyzer .
+
+# Create Django apps with proper structure
+python manage.py startapp streaming
+python manage.py startapp ai_processing  
+python manage.py startapp effects
+python manage.py startapp api
+
+# Create settings directory structure
+mkdir media_analyzer/settings
+touch media_analyzer/settings/__init__.py
+mv media_analyzer/settings.py media_analyzer/settings/base.py
+touch media_analyzer/settings/{development.py,production.py}
+
+# Create subdirectories for complex apps
+mkdir -p ai_processing/processors
+touch ai_processing/processors/{__init__.py,base.py,realtime.py,batch.py,video_analyzer.py}
+
+mkdir -p effects/{processors,shaders/{vertex,fragment},triggers}
+touch effects/processors/{__init__.py,gpu_pipeline.py,ffmpeg_filters.py,effect_engine.py}
+touch effects/shaders/{blur.glsl,highlight.glsl,color_grade.glsl}
+touch effects/triggers/{__init__.py,ai_triggers.py,manual_triggers.py}
+
+# ===== ANGULAR FRONTEND SETUP =====
+# Create Angular 17+ project (this creates the frontend directory)
+ng new frontend --routing --style=scss --standalone --skip-git
+
+# NOW enter the created Angular project directory
+cd frontend
+
+# Generate components (must be run inside Angular project)
+ng generate component components/stream-viewer --standalone
+ng generate component components/analysis-panel --standalone  
+ng generate component components/stream-control --standalone
+ng generate component components/effects-panel --standalone
+ng generate component components/effects-panel/shader-editor --standalone
+
+# Generate services (must be run inside Angular project)
+ng generate service services/websocket
+ng generate service services/stream
+ng generate service services/analysis
+ng generate service services/effects
+ng generate service webgl/shader
+ng generate service webgl/effects-engine
+
+# Create interfaces (must be run inside Angular project)
+ng generate interface models/stream
+ng generate interface models/analysis
+ng generate interface models/effects
+
+# Create WebGL utilities directory (can use mkdir here)
+mkdir -p src/app/webgl/shaders
+touch src/app/webgl/{webgl-utils.ts,effects-engine.ts}
+touch src/app/webgl/shaders/{overlay.vert.glsl,overlay.frag.glsl,particle.vert.glsl,particle.frag.glsl}
+
+# ===== ADDITIONAL SETUP =====
+cd ..
+
+# Create Docker files
+touch docker/{Dockerfile.django,Dockerfile.nginx,docker-compose.override.yml}
+touch docker-compose.yml
+
+# Create Kubernetes manifests
+touch k8s/base/{namespace.yaml,django-deployment.yaml,nginx-deployment.yaml,postgres-statefulset.yaml,redis-deployment.yaml,services.yaml,configmaps.yaml}
+touch k8s/overlays/development/kustomization.yaml
+touch k8s/overlays/production/{kustomization.yaml,gcp-specific.yaml}
+
+# Create scripts
+touch scripts/{setup-dev.sh,start-rtmp-server.sh,load-ai-models.py}
+chmod +x scripts/*.sh
+
+# Create requirements and config files
+touch {requirements.txt,README.md}
+
+# ===== DJANGO ADDITIONAL SETUP =====
+cd backend
+
+# Create Django Channels routing
+touch media_analyzer/routing.py
+
+# Create consumers for WebSocket
+touch streaming/consumers.py
+
+# Create custom management commands
+mkdir -p streaming/management/commands
+touch streaming/management/__init__.py
+touch streaming/management/commands/{__init__.py,start_rtmp_server.py}
+
+mkdir -p ai_processing/management/commands  
+touch ai_processing/management/__init__.py
+touch ai_processing/management/commands/{__init__.py,load_models.py}
+
+# Create Celery configuration
+touch media_analyzer/celery.py
+
+# ===== VERIFICATION COMMANDS =====
+echo "=== DJANGO STRUCTURE VERIFICATION ==="
+cd ../backend  # Go back to backend from frontend
+find . -name "*.py" | head -20
+
+echo "=== ANGULAR STRUCTURE VERIFICATION ==="
+cd ../frontend  # Go to frontend from backend
+find src/app -type f | head -20
+
+echo "=== PROJECT ROOT VERIFICATION ==="
+cd ..  # Go to project root
+tree -I 'node_modules|__pycache__|*.pyc' -L 3
--- a/media-analyzer/README.md
+++ b/media-analyzer/README.md
--- a/media-analyzer/backend/ai_processing/init.py
+++ b/media-analyzer/backend/ai_processing/init.py
--- a/media-analyzer/backend/ai_processing/admin.py
+++ b/media-analyzer/backend/ai_processing/admin.py
@@ -0,0 +1,3 @@
+from django.contrib import admin
+
+# Register your models here.
--- a/media-analyzer/backend/ai_processing/apps.py
+++ b/media-analyzer/backend/ai_processing/apps.py
@@ -0,0 +1,6 @@
+from django.apps import AppConfig
+
+
+class AiProcessingConfig(AppConfig):
+    default_auto_field = 'django.db.models.BigAutoField'
+    name = 'ai_processing'
--- a/media-analyzer/backend/ai_processing/management/init.py
+++ b/media-analyzer/backend/ai_processing/management/init.py
--- a/media-analyzer/backend/ai_processing/management/commands/init.py
+++ b/media-analyzer/backend/ai_processing/management/commands/init.py
--- a/media-analyzer/backend/ai_processing/management/commands/load_models.py
+++ b/media-analyzer/backend/ai_processing/management/commands/load_models.py
--- a/media-analyzer/backend/ai_processing/migrations/init.py
+++ b/media-analyzer/backend/ai_processing/migrations/init.py
--- a/media-analyzer/backend/ai_processing/models.py
+++ b/media-analyzer/backend/ai_processing/models.py
@@ -0,0 +1,3 @@
+from django.db import models
+
+# Create your models here.
--- a/media-analyzer/backend/ai_processing/processors/init.py
+++ b/media-analyzer/backend/ai_processing/processors/init.py
--- a/media-analyzer/backend/ai_processing/processors/base.py
+++ b/media-analyzer/backend/ai_processing/processors/base.py
--- a/media-analyzer/backend/ai_processing/processors/batch.py
+++ b/media-analyzer/backend/ai_processing/processors/batch.py
--- a/media-analyzer/backend/ai_processing/processors/realtime.py
+++ b/media-analyzer/backend/ai_processing/processors/realtime.py
--- a/media-analyzer/backend/ai_processing/processors/video_analyzer.py
+++ b/media-analyzer/backend/ai_processing/processors/video_analyzer.py
--- a/media-analyzer/backend/ai_processing/tests.py
+++ b/media-analyzer/backend/ai_processing/tests.py
@@ -0,0 +1,3 @@
+from django.test import TestCase
+
+# Create your tests here.
--- a/media-analyzer/backend/ai_processing/views.py
+++ b/media-analyzer/backend/ai_processing/views.py
@@ -0,0 +1,3 @@
+from django.shortcuts import render
+
+# Create your views here.
--- a/media-analyzer/backend/api/init.py
+++ b/media-analyzer/backend/api/init.py
--- a/media-analyzer/backend/api/admin.py
+++ b/media-analyzer/backend/api/admin.py
@@ -0,0 +1,3 @@
+from django.contrib import admin
+
+# Register your models here.
--- a/media-analyzer/backend/api/apps.py
+++ b/media-analyzer/backend/api/apps.py
@@ -0,0 +1,6 @@
+from django.apps import AppConfig
+
+
+class ApiConfig(AppConfig):
+    default_auto_field = 'django.db.models.BigAutoField'
+    name = 'api'
--- a/media-analyzer/backend/api/migrations/init.py
+++ b/media-analyzer/backend/api/migrations/init.py
--- a/media-analyzer/backend/api/models.py
+++ b/media-analyzer/backend/api/models.py
@@ -0,0 +1,3 @@
+from django.db import models
+
+# Create your models here.
--- a/media-analyzer/backend/api/tests.py
+++ b/media-analyzer/backend/api/tests.py
@@ -0,0 +1,3 @@
+from django.test import TestCase
+
+# Create your tests here.
--- a/media-analyzer/backend/api/views.py
+++ b/media-analyzer/backend/api/views.py
@@ -0,0 +1,3 @@
+from django.shortcuts import render
+
+# Create your views here.
--- a/media-analyzer/backend/effects/init.py
+++ b/media-analyzer/backend/effects/init.py
--- a/media-analyzer/backend/effects/admin.py
+++ b/media-analyzer/backend/effects/admin.py
@@ -0,0 +1,3 @@
+from django.contrib import admin
+
+# Register your models here.
--- a/media-analyzer/backend/effects/apps.py
+++ b/media-analyzer/backend/effects/apps.py
@@ -0,0 +1,6 @@
+from django.apps import AppConfig
+
+
+class EffectsConfig(AppConfig):
+    default_auto_field = 'django.db.models.BigAutoField'
+    name = 'effects'
--- a/media-analyzer/backend/effects/migrations/init.py
+++ b/media-analyzer/backend/effects/migrations/init.py
--- a/media-analyzer/backend/effects/models.py
+++ b/media-analyzer/backend/effects/models.py
@@ -0,0 +1,3 @@
+from django.db import models
+
+# Create your models here.
--- a/media-analyzer/backend/effects/processors/init.py
+++ b/media-analyzer/backend/effects/processors/init.py
--- a/media-analyzer/backend/effects/processors/effect_engine.py
+++ b/media-analyzer/backend/effects/processors/effect_engine.py
--- a/media-analyzer/backend/effects/processors/ffmpeg_filters.py
+++ b/media-analyzer/backend/effects/processors/ffmpeg_filters.py
--- a/media-analyzer/backend/effects/processors/gpu_pipeline.py
+++ b/media-analyzer/backend/effects/processors/gpu_pipeline.py
--- a/media-analyzer/backend/effects/shaders/blur.glsl
+++ b/media-analyzer/backend/effects/shaders/blur.glsl
--- a/media-analyzer/backend/effects/shaders/color_grade.glsl
+++ b/media-analyzer/backend/effects/shaders/color_grade.glsl
--- a/media-analyzer/backend/effects/shaders/highlight.glsl
+++ b/media-analyzer/backend/effects/shaders/highlight.glsl
--- a/media-analyzer/backend/effects/tests.py
+++ b/media-analyzer/backend/effects/tests.py
@@ -0,0 +1,3 @@
+from django.test import TestCase
+
+# Create your tests here.
--- a/media-analyzer/backend/effects/triggers/init.py
+++ b/media-analyzer/backend/effects/triggers/init.py
--- a/media-analyzer/backend/effects/triggers/ai_triggers.py
+++ b/media-analyzer/backend/effects/triggers/ai_triggers.py
--- a/media-analyzer/backend/effects/triggers/manual_triggers.py
+++ b/media-analyzer/backend/effects/triggers/manual_triggers.py
--- a/media-analyzer/backend/effects/views.py
+++ b/media-analyzer/backend/effects/views.py
@@ -0,0 +1,3 @@
+from django.shortcuts import render
+
+# Create your views here.
--- a/media-analyzer/backend/manage.py
+++ b/media-analyzer/backend/manage.py
@@ -0,0 +1,22 @@
+#!/usr/bin/env python
+"""Django's command-line utility for administrative tasks."""
+import os
+import sys
+
+
+def main():
+    """Run administrative tasks."""
+    os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'media_analyzer.settings')
+    try:
+        from django.core.management import execute_from_command_line
+    except ImportError as exc:
+        raise ImportError(
+            "Couldn't import Django. Are you sure it's installed and "
+            "available on your PYTHONPATH environment variable? Did you "
+            "forget to activate a virtual environment?"
+        ) from exc
+    execute_from_command_line(sys.argv)
+
+
+if __name__ == '__main__':
+    main()
--- a/media-analyzer/backend/media_analyzer/init.py
+++ b/media-analyzer/backend/media_analyzer/init.py
--- a/media-analyzer/backend/media_analyzer/asgi.py
+++ b/media-analyzer/backend/media_analyzer/asgi.py
@@ -0,0 +1,16 @@
+"""
+ASGI config for media_analyzer project.
+
+It exposes the ASGI callable as a module-level variable named ``application``.
+
+For more information on this file, see
+https://docs.djangoproject.com/en/5.2/howto/deployment/asgi/
+"""
+
+import os
+
+from django.core.asgi import get_asgi_application
+
+os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'media_analyzer.settings')
+
+application = get_asgi_application()
--- a/media-analyzer/backend/media_analyzer/celery.py
+++ b/media-analyzer/backend/media_analyzer/celery.py
--- a/media-analyzer/backend/media_analyzer/routing.py
+++ b/media-analyzer/backend/media_analyzer/routing.py
--- a/media-analyzer/backend/media_analyzer/settings/init.py
+++ b/media-analyzer/backend/media_analyzer/settings/init.py
@@ -0,0 +1,11 @@
+# Import environment-specific settings
+import os
+
+from .base import *
+
+env = os.environ.get("DJANGO_ENV", "development")
+
+if env == "production":
+    from .production import *
+else:
+    from .development import *
--- a/media-analyzer/backend/media_analyzer/settings/base.py
+++ b/media-analyzer/backend/media_analyzer/settings/base.py
@@ -0,0 +1,128 @@
+"""
+Django settings for media_analyzer project.
+
+Generated by 'django-admin startproject' using Django 5.2.5.
+
+For more information on this file, see
+https://docs.djangoproject.com/en/5.2/topics/settings/
+
+For the full list of settings and their values, see
+https://docs.djangoproject.com/en/5.2/ref/settings/
+"""
+
+from pathlib import Path
+
+# Build paths inside the project like this: BASE_DIR / 'subdir'.
+BASE_DIR = Path(__file__).resolve().parent.parent
+
+
+# Quick-start development settings - unsuitable for production
+# See https://docs.djangoproject.com/en/5.2/howto/deployment/checklist/
+
+# SECURITY WARNING: keep the secret key used in production secret!
+SECRET_KEY = "django-insecure-n=jmw6r)102f0mytr7m1q5qwk^v$fd8gyokqpglsd&rl$d(^0="
+
+# SECURITY WARNING: don't run with debug turned on in production!
+DEBUG = True
+
+ALLOWED_HOSTS = []
+
+
+# Application definition
+
+INSTALLED_APPS = [
+    "django.contrib.admin",
+    "django.contrib.auth",
+    "django.contrib.contenttypes",
+    "django.contrib.sessions",
+    "django.contrib.messages",
+    "django.contrib.staticfiles",
+    "channels",  # For WebSocket
+    "rest_framework",  # For API
+    "streaming",
+    "ai_processing",
+    "effects",
+    "api",
+]
+
+MIDDLEWARE = [
+    "django.middleware.security.SecurityMiddleware",
+    "django.contrib.sessions.middleware.SessionMiddleware",
+    "django.middleware.common.CommonMiddleware",
+    "django.middleware.csrf.CsrfViewMiddleware",
+    "django.contrib.auth.middleware.AuthenticationMiddleware",
+    "django.contrib.messages.middleware.MessageMiddleware",
+    "django.middleware.clickjacking.XFrameOptionsMiddleware",
+]
+
+ROOT_URLCONF = "media_analyzer.urls"
+
+TEMPLATES = [
+    {
+        "BACKEND": "django.template.backends.django.DjangoTemplates",
+        "DIRS": [],
+        "APP_DIRS": True,
+        "OPTIONS": {
+            "context_processors": [
+                "django.template.context_processors.request",
+                "django.contrib.auth.context_processors.auth",
+                "django.contrib.messages.context_processors.messages",
+            ],
+        },
+    },
+]
+
+WSGI_APPLICATION = "media_analyzer.wsgi.application"
+
+
+# Database
+# https://docs.djangoproject.com/en/5.2/ref/settings/#databases
+
+DATABASES = {
+    "default": {
+        "ENGINE": "django.db.backends.sqlite3",
+        "NAME": BASE_DIR / "db.sqlite3",
+    }
+}
+
+
+# Password validation
+# https://docs.djangoproject.com/en/5.2/ref/settings/#auth-password-validators
+
+AUTH_PASSWORD_VALIDATORS = [
+    {
+        "NAME": "django.contrib.auth.password_validation.UserAttributeSimilarityValidator",
+    },
+    {
+        "NAME": "django.contrib.auth.password_validation.MinimumLengthValidator",
+    },
+    {
+        "NAME": "django.contrib.auth.password_validation.CommonPasswordValidator",
+    },
+    {
+        "NAME": "django.contrib.auth.password_validation.NumericPasswordValidator",
+    },
+]
+
+
+# Internationalization
+# https://docs.djangoproject.com/en/5.2/topics/i18n/
+
+LANGUAGE_CODE = "en-us"
+
+TIME_ZONE = "UTC"
+
+USE_I18N = True
+
+USE_TZ = True
+
+
+# Static files (CSS, JavaScript, Images)
+# https://docs.djangoproject.com/en/5.2/howto/static-files/
+
+STATIC_URL = "static/"
+
+# Default primary key field type
+# https://docs.djangoproject.com/en/5.2/ref/settings/#default-auto-field
+
+DEFAULT_AUTO_FIELD = "django.db.models.BigAutoField"
--- a/media-analyzer/backend/media_analyzer/settings/development.py
+++ b/media-analyzer/backend/media_analyzer/settings/development.py
--- a/media-analyzer/backend/media_analyzer/settings/production.py
+++ b/media-analyzer/backend/media_analyzer/settings/production.py
--- a/media-analyzer/backend/media_analyzer/urls.py
+++ b/media-analyzer/backend/media_analyzer/urls.py
@@ -0,0 +1,22 @@
+"""
+URL configuration for media_analyzer project.
+
+The `urlpatterns` list routes URLs to views. For more information please see:
+    https://docs.djangoproject.com/en/5.2/topics/http/urls/
+Examples:
+Function views
+    1. Add an import:  from my_app import views
+    2. Add a URL to urlpatterns:  path('', views.home, name='home')
+Class-based views
+    1. Add an import:  from other_app.views import Home
+    2. Add a URL to urlpatterns:  path('', Home.as_view(), name='home')
+Including another URLconf
+    1. Import the include() function: from django.urls import include, path
+    2. Add a URL to urlpatterns:  path('blog/', include('blog.urls'))
+"""
+from django.contrib import admin
+from django.urls import path
+
+urlpatterns = [
+    path('admin/', admin.site.urls),
+]
--- a/media-analyzer/backend/media_analyzer/wsgi.py
+++ b/media-analyzer/backend/media_analyzer/wsgi.py
@@ -0,0 +1,16 @@
+"""
+WSGI config for media_analyzer project.
+
+It exposes the WSGI callable as a module-level variable named ``application``.
+
+For more information on this file, see
+https://docs.djangoproject.com/en/5.2/howto/deployment/wsgi/
+"""
+
+import os
+
+from django.core.wsgi import get_wsgi_application
+
+os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'media_analyzer.settings')
+
+application = get_wsgi_application()
--- a/media-analyzer/backend/streaming/init.py
+++ b/media-analyzer/backend/streaming/init.py
--- a/media-analyzer/backend/streaming/admin.py
+++ b/media-analyzer/backend/streaming/admin.py
@@ -0,0 +1,3 @@
+from django.contrib import admin
+
+# Register your models here.
--- a/media-analyzer/backend/streaming/apps.py
+++ b/media-analyzer/backend/streaming/apps.py
@@ -0,0 +1,6 @@
+from django.apps import AppConfig
+
+
+class StreamingConfig(AppConfig):
+    default_auto_field = 'django.db.models.BigAutoField'
+    name = 'streaming'
--- a/media-analyzer/backend/streaming/consumers.py
+++ b/media-analyzer/backend/streaming/consumers.py
--- a/media-analyzer/backend/streaming/management/init.py
+++ b/media-analyzer/backend/streaming/management/init.py
--- a/media-analyzer/backend/streaming/management/commands/init.py
+++ b/media-analyzer/backend/streaming/management/commands/init.py
--- a/media-analyzer/backend/streaming/management/commands/start_rtmp_server.py
+++ b/media-analyzer/backend/streaming/management/commands/start_rtmp_server.py
--- a/media-analyzer/backend/streaming/migrations/init.py
+++ b/media-analyzer/backend/streaming/migrations/init.py
--- a/media-analyzer/backend/streaming/models.py
+++ b/media-analyzer/backend/streaming/models.py
@@ -0,0 +1,3 @@
+from django.db import models
+
+# Create your models here.
--- a/media-analyzer/backend/streaming/tests.py
+++ b/media-analyzer/backend/streaming/tests.py
@@ -0,0 +1,3 @@
+from django.test import TestCase
+
+# Create your tests here.
--- a/media-analyzer/backend/streaming/views.py
+++ b/media-analyzer/backend/streaming/views.py
@@ -0,0 +1,3 @@
+from django.shortcuts import render
+
+# Create your views here.
--- a/media-analyzer/docker-compose.yml
+++ b/media-analyzer/docker-compose.yml
--- a/media-analyzer/docker/Dockerfile.django
+++ b/media-analyzer/docker/Dockerfile.django
--- a/media-analyzer/docker/Dockerfile.nginx
+++ b/media-analyzer/docker/Dockerfile.nginx
--- a/media-analyzer/docker/docker-compose.override.yml
+++ b/media-analyzer/docker/docker-compose.override.yml
--- a/media-analyzer/frontend/.editorconfig
+++ b/media-analyzer/frontend/.editorconfig
@@ -0,0 +1,16 @@
+# Editor configuration, see https://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.ts]
+quote_type = single
+
+[*.md]
+max_line_length = off
+trim_trailing_whitespace = false
--- a/media-analyzer/frontend/.gitignore
+++ b/media-analyzer/frontend/.gitignore
@@ -0,0 +1,42 @@
+# See https://docs.github.com/get-started/getting-started-with-git/ignoring-files for more about ignoring files.
+
+# Compiled output
+/dist
+/tmp
+/out-tsc
+/bazel-out
+
+# Node
+/node_modules
+npm-debug.log
+yarn-error.log
+
+# IDEs and editors
+.idea/
+.project
+.classpath
+.c9/
+*.launch
+.settings/
+*.sublime-workspace
+
+# Visual Studio Code
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+.history/*
+
+# Miscellaneous
+/.angular/cache
+.sass-cache/
+/connect.lock
+/coverage
+/libpeerconnection.log
+testem.log
+/typings
+
+# System files
+.DS_Store
+Thumbs.db
--- a/media-analyzer/frontend/.vscode/extensions.json
+++ b/media-analyzer/frontend/.vscode/extensions.json
@@ -0,0 +1,4 @@
+{
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=827846
+  "recommendations": ["angular.ng-template"]
+}
--- a/media-analyzer/frontend/.vscode/launch.json
+++ b/media-analyzer/frontend/.vscode/launch.json
@@ -0,0 +1,20 @@
+{
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "name": "ng serve",
+      "type": "chrome",
+      "request": "launch",
+      "preLaunchTask": "npm: start",
+      "url": "http://localhost:4200/"
+    },
+    {
+      "name": "ng test",
+      "type": "chrome",
+      "request": "launch",
+      "preLaunchTask": "npm: test",
+      "url": "http://localhost:9876/debug.html"
+    }
+  ]
+}
--- a/media-analyzer/frontend/.vscode/tasks.json
+++ b/media-analyzer/frontend/.vscode/tasks.json
@@ -0,0 +1,42 @@
+{
+  // For more information, visit: https://go.microsoft.com/fwlink/?LinkId=733558
+  "version": "2.0.0",
+  "tasks": [
+    {
+      "type": "npm",
+      "script": "start",
+      "isBackground": true,
+      "problemMatcher": {
+        "owner": "typescript",
+        "pattern": "$tsc",
+        "background": {
+          "activeOnStart": true,
+          "beginsPattern": {
+            "regexp": "(.*?)"
+          },
+          "endsPattern": {
+            "regexp": "bundle generation complete"
+          }
+        }
+      }
+    },
+    {
+      "type": "npm",
+      "script": "test",
+      "isBackground": true,
+      "problemMatcher": {
+        "owner": "typescript",
+        "pattern": "$tsc",
+        "background": {
+          "activeOnStart": true,
+          "beginsPattern": {
+            "regexp": "(.*?)"
+          },
+          "endsPattern": {
+            "regexp": "bundle generation complete"
+          }
+        }
+      }
+    }
+  ]
+}
--- a/media-analyzer/frontend/README.md
+++ b/media-analyzer/frontend/README.md
@@ -0,0 +1,27 @@
+# Frontend
+
+This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 17.3.17.
+
+## Development server
+
+Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The application will automatically reload if you change any of the source files.
+
+## Code scaffolding
+
+Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
+
+## Build
+
+Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory.
+
+## Running unit tests
+
+Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
+
+## Running end-to-end tests
+
+Run `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.
+
+## Further help
+
+To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.
--- a/media-analyzer/frontend/angular.json
+++ b/media-analyzer/frontend/angular.json
@@ -0,0 +1,109 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "frontend": {
+      "projectType": "application",
+      "schematics": {
+        "@schematics/angular:component": {
+          "style": "scss"
+        }
+      },
+      "root": "",
+      "sourceRoot": "src",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:application",
+          "options": {
+            "outputPath": "dist/frontend",
+            "index": "src/index.html",
+            "browser": "src/main.ts",
+            "polyfills": [
+              "zone.js"
+            ],
+            "tsConfig": "tsconfig.app.json",
+            "inlineStyleLanguage": "scss",
+            "assets": [
+              "src/favicon.ico",
+              "src/assets",
+              {
+                "glob": "**/*.glsl",
+                "input": "src/app/webgl/shaders",
+                "output": "/assets/shaders/"
+              }
+            ],
+            "styles": [
+              "src/styles.scss"
+            ],
+            "scripts": []
+          },
+          "configurations": {
+            "production": {
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "500kb",
+                  "maximumError": "1mb"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "2kb",
+                  "maximumError": "4kb"
+                }
+              ],
+              "outputHashing": "all"
+            },
+            "development": {
+              "optimization": false,
+              "extractLicenses": false,
+              "sourceMap": true
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "configurations": {
+            "production": {
+              "buildTarget": "frontend:build:production"
+            },
+            "development": {
+              "buildTarget": "frontend:build:development"
+            }
+          },
+          "defaultConfiguration": "development"
+        },
+        "extract-i18n": {
+          "builder": "@angular-devkit/build-angular:extract-i18n",
+          "options": {
+            "buildTarget": "frontend:build"
+          }
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "polyfills": [
+              "zone.js",
+              "zone.js/testing"
+            ],
+            "tsConfig": "tsconfig.spec.json",
+            "inlineStyleLanguage": "scss",
+            "assets": [
+              "src/favicon.ico",
+              "src/assets"
+            ],
+            "styles": [
+              "src/styles.scss"
+            ],
+            "scripts": []
+          }
+        }
+      }
+    }
+  },
+  "cli": {
+    "analytics": "1bae9ab4-6348-45ca-9cac-98667ba0d327"
+  }
+}
--- a/media-analyzer/frontend/package-lock.json
+++ b/media-analyzer/frontend/package-lock.json
--- a/media-analyzer/frontend/package.json
+++ b/media-analyzer/frontend/package.json
@@ -0,0 +1,38 @@
+{
+  "name": "frontend",
+  "version": "0.0.0",
+  "scripts": {
+    "ng": "ng",
+    "start": "ng serve",
+    "build": "ng build",
+    "watch": "ng build --watch --configuration development",
+    "test": "ng test"
+  },
+  "private": true,
+  "dependencies": {
+    "@angular/animations": "^17.3.0",
+    "@angular/common": "^17.3.0",
+    "@angular/compiler": "^17.3.0",
+    "@angular/core": "^17.3.0",
+    "@angular/forms": "^17.3.0",
+    "@angular/platform-browser": "^17.3.0",
+    "@angular/platform-browser-dynamic": "^17.3.0",
+    "@angular/router": "^17.3.0",
+    "rxjs": "~7.8.0",
+    "tslib": "^2.3.0",
+    "zone.js": "~0.14.3"
+  },
+  "devDependencies": {
+    "@angular-devkit/build-angular": "^17.3.17",
+    "@angular/cli": "^17.3.17",
+    "@angular/compiler-cli": "^17.3.0",
+    "@types/jasmine": "~5.1.0",
+    "jasmine-core": "~5.1.0",
+    "karma": "~6.4.0",
+    "karma-chrome-launcher": "~3.2.0",
+    "karma-coverage": "~2.2.0",
+    "karma-jasmine": "~5.1.0",
+    "karma-jasmine-html-reporter": "~2.1.0",
+    "typescript": "~5.4.2"
+  }
+}
--- a/media-analyzer/frontend/src/app/app.component.html
+++ b/media-analyzer/frontend/src/app/app.component.html
@@ -0,0 +1,336 @@
+<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
+<!-- * * * * * * * * * * * The content below * * * * * * * * * * * -->
+<!-- * * * * * * * * * * is only a placeholder * * * * * * * * * * -->
+<!-- * * * * * * * * * * and can be replaced.  * * * * * * * * * * -->
+<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
+<!-- * * * * * * * * * Delete the template below * * * * * * * * * -->
+<!-- * * * * * * * to get started with your project! * * * * * * * -->
+<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
+
+<style>
+  :host {
+    --bright-blue: oklch(51.01% 0.274 263.83);
+    --electric-violet: oklch(53.18% 0.28 296.97);
+    --french-violet: oklch(47.66% 0.246 305.88);
+    --vivid-pink: oklch(69.02% 0.277 332.77);
+    --hot-red: oklch(61.42% 0.238 15.34);
+    --orange-red: oklch(63.32% 0.24 31.68);
+
+    --gray-900: oklch(19.37% 0.006 300.98);
+    --gray-700: oklch(36.98% 0.014 302.71);
+    --gray-400: oklch(70.9% 0.015 304.04);
+
+    --red-to-pink-to-purple-vertical-gradient: linear-gradient(
+      180deg,
+      var(--orange-red) 0%,
+      var(--vivid-pink) 50%,
+      var(--electric-violet) 100%
+    );
+
+    --red-to-pink-to-purple-horizontal-gradient: linear-gradient(
+      90deg,
+      var(--orange-red) 0%,
+      var(--vivid-pink) 50%,
+      var(--electric-violet) 100%
+    );
+
+    --pill-accent: var(--bright-blue);
+
+    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+      Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
+      "Segoe UI Symbol";
+    box-sizing: border-box;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+
+  h1 {
+    font-size: 3.125rem;
+    color: var(--gray-900);
+    font-weight: 500;
+    line-height: 100%;
+    letter-spacing: -0.125rem;
+    margin: 0;
+    font-family: "Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+      Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
+      "Segoe UI Symbol";
+  }
+
+  p {
+    margin: 0;
+    color: var(--gray-700);
+  }
+
+  main {
+    width: 100%;
+    min-height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 1rem;
+    box-sizing: inherit;
+    position: relative;
+  }
+
+  .angular-logo {
+    max-width: 9.2rem;
+  }
+
+  .content {
+    display: flex;
+    justify-content: space-around;
+    width: 100%;
+    max-width: 700px;
+    margin-bottom: 3rem;
+  }
+
+  .content h1 {
+    margin-top: 1.75rem;
+  }
+
+  .content p {
+    margin-top: 1.5rem;
+  }
+
+  .divider {
+    width: 1px;
+    background: var(--red-to-pink-to-purple-vertical-gradient);
+    margin-inline: 0.5rem;
+  }
+
+  .pill-group {
+    display: flex;
+    flex-direction: column;
+    align-items: start;
+    flex-wrap: wrap;
+    gap: 1.25rem;
+  }
+
+  .pill {
+    display: flex;
+    align-items: center;
+    --pill-accent: var(--bright-blue);
+    background: color-mix(in srgb, var(--pill-accent) 5%, transparent);
+    color: var(--pill-accent);
+    padding-inline: 0.75rem;
+    padding-block: 0.375rem;
+    border-radius: 2.75rem;
+    border: 0;
+    transition: background 0.3s ease;
+    font-family: var(--inter-font);
+    font-size: 0.875rem;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 1.4rem;
+    letter-spacing: -0.00875rem;
+    text-decoration: none;
+  }
+
+  .pill:hover {
+    background: color-mix(in srgb, var(--pill-accent) 15%, transparent);
+  }
+
+  .pill-group .pill:nth-child(6n + 1) {
+    --pill-accent: var(--bright-blue);
+  }
+  .pill-group .pill:nth-child(6n + 2) {
+    --pill-accent: var(--french-violet);
+  }
+  .pill-group .pill:nth-child(6n + 3),
+  .pill-group .pill:nth-child(6n + 4),
+  .pill-group .pill:nth-child(6n + 5) {
+    --pill-accent: var(--hot-red);
+  }
+
+  .pill-group svg {
+    margin-inline-start: 0.25rem;
+  }
+
+  .social-links {
+    display: flex;
+    align-items: center;
+    gap: 0.73rem;
+    margin-top: 1.5rem;
+  }
+
+  .social-links path {
+    transition: fill 0.3s ease;
+    fill: var(--gray-400);
+  }
+
+  .social-links a:hover svg path {
+    fill: var(--gray-900);
+  }
+
+  @media screen and (max-width: 650px) {
+    .content {
+      flex-direction: column;
+      width: max-content;
+    }
+
+    .divider {
+      height: 1px;
+      width: 100%;
+      background: var(--red-to-pink-to-purple-horizontal-gradient);
+      margin-block: 1.5rem;
+    }
+  }
+</style>
+
+<main class="main">
+  <div class="content">
+    <div class="left-side">
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 982 239"
+        fill="none"
+        class="angular-logo"
+      >
+        <g clip-path="url(#a)">
+          <path
+            fill="url(#b)"
+            d="M388.676 191.625h30.849L363.31 31.828h-35.758l-56.215 159.797h30.848l13.174-39.356h60.061l13.256 39.356Zm-65.461-62.675 21.602-64.311h1.227l21.602 64.311h-44.431Zm126.831-7.527v70.202h-28.23V71.839h27.002v20.374h1.392c2.782-6.71 7.2-12.028 13.255-15.956 6.056-3.927 13.584-5.89 22.503-5.89 8.264 0 15.465 1.8 21.684 5.318 6.137 3.518 10.964 8.673 14.319 15.382 3.437 6.71 5.074 14.81 4.992 24.383v76.175h-28.23v-71.92c0-8.019-2.046-14.237-6.219-18.819-4.173-4.5-9.819-6.791-17.102-6.791-4.91 0-9.328 1.063-13.174 3.272-3.846 2.128-6.792 5.237-9.001 9.328-2.046 4.009-3.191 8.918-3.191 14.728ZM589.233 239c-10.147 0-18.82-1.391-26.103-4.091-7.282-2.7-13.092-6.382-17.511-10.964-4.418-4.582-7.528-9.655-9.164-15.219l25.448-6.136c1.145 2.372 2.782 4.663 4.991 6.954 2.209 2.291 5.155 4.255 8.837 5.81 3.683 1.554 8.428 2.291 14.074 2.291 8.019 0 14.647-1.964 19.884-5.81 5.237-3.845 7.856-10.227 7.856-19.064v-22.665h-1.391c-1.473 2.946-3.601 5.892-6.383 9.001-2.782 3.109-6.464 5.645-10.965 7.691-4.582 2.046-10.228 3.109-17.101 3.109-9.165 0-17.511-2.209-25.039-6.545-7.446-4.337-13.42-10.883-17.757-19.474-4.418-8.673-6.628-19.473-6.628-32.565 0-13.091 2.21-24.301 6.628-33.383 4.419-9.082 10.311-15.955 17.839-20.7 7.528-4.746 15.874-7.037 25.039-7.037 7.037 0 12.846 1.145 17.347 3.518 4.582 2.373 8.182 5.236 10.883 8.51 2.7 3.272 4.746 6.382 6.137 9.327h1.554v-19.8h27.821v121.749c0 10.228-2.454 18.737-7.364 25.447-4.91 6.709-11.538 11.7-20.048 15.055-8.509 3.355-18.165 4.991-28.884 4.991Zm.245-71.266c5.974 0 11.047-1.473 15.302-4.337 4.173-2.945 7.446-7.118 9.573-12.519 2.21-5.482 3.274-12.027 3.274-19.637 0-7.609-1.064-14.155-3.274-19.8-2.127-5.646-5.318-10.064-9.491-13.255-4.174-3.11-9.329-4.746-15.384-4.746s-11.537 1.636-15.792 4.91c-4.173 3.272-7.365 7.772-9.492 13.418-2.128 5.727-3.191 12.191-3.191 19.392 0 7.2 1.063 13.745 3.273 19.228 2.127 5.482 5.318 9.736 9.573 12.764 4.174 3.027 9.41 4.582 15.629 4.582Zm141.56-26.51V71.839h28.23v119.786h-27.412v-21.273h-1.227c-2.7 6.709-7.119 12.191-13.338 16.446-6.137 4.255-13.747 6.382-22.748 6.382-7.855 0-14.81-1.718-20.783-5.237-5.974-3.518-10.72-8.591-14.075-15.382-3.355-6.709-5.073-14.891-5.073-24.464V71.839h28.312v71.921c0 7.609 2.046 13.664 6.219 18.083 4.173 4.5 9.655 6.709 16.365 6.709 4.173 0 8.183-.982 12.111-3.028 3.927-2.045 7.118-5.072 9.655-9.082 2.537-4.091 3.764-9.164 3.764-15.218Zm65.707-109.395v159.796h-28.23V31.828h28.23Zm44.841 162.169c-7.61 0-14.402-1.391-20.457-4.091-6.055-2.7-10.883-6.791-14.32-12.109-3.518-5.319-5.237-11.946-5.237-19.801 0-6.791 1.228-12.355 3.765-16.773 2.536-4.419 5.891-7.937 10.228-10.637 4.337-2.618 9.164-4.664 14.647-6.055 5.4-1.391 11.046-2.373 16.856-3.027 7.037-.737 12.683-1.391 17.102-1.964 4.337-.573 7.528-1.555 9.574-2.782 1.963-1.309 3.027-3.273 3.027-5.973v-.491c0-5.891-1.718-10.391-5.237-13.664-3.518-3.191-8.51-4.828-15.056-4.828-6.955 0-12.356 1.473-16.447 4.5-4.009 3.028-6.71 6.546-8.183 10.719l-26.348-3.764c2.046-7.282 5.483-13.336 10.31-18.328 4.746-4.909 10.638-8.59 17.511-11.045 6.955-2.455 14.565-3.682 22.912-3.682 5.809 0 11.537.654 17.265 2.045s10.965 3.6 15.711 6.71c4.746 3.109 8.51 7.282 11.455 12.6 2.864 5.318 4.337 11.946 4.337 19.883v80.184h-27.166v-16.446h-.9c-1.719 3.355-4.092 6.464-7.201 9.328-3.109 2.864-6.955 5.237-11.619 6.955-4.828 1.718-10.229 2.536-16.529 2.536Zm7.364-20.701c5.646 0 10.556-1.145 14.729-3.354 4.173-2.291 7.364-5.237 9.655-9.001 2.292-3.763 3.355-7.854 3.355-12.273v-14.155c-.9.737-2.373 1.391-4.5 2.046-2.128.654-4.419 1.145-7.037 1.636-2.619.491-5.155.9-7.692 1.227-2.537.328-4.746.655-6.628.901-4.173.572-8.019 1.472-11.292 2.781-3.355 1.31-5.973 3.11-7.855 5.401-1.964 2.291-2.864 5.318-2.864 8.918 0 5.237 1.882 9.164 5.728 11.782 3.682 2.782 8.51 4.091 14.401 4.091Zm64.643 18.328V71.839h27.412v19.965h1.227c2.21-6.955 5.974-12.274 11.292-16.038 5.319-3.763 11.456-5.645 18.329-5.645 1.555 0 3.355.082 5.237.163 1.964.164 3.601.328 4.91.573v25.938c-1.227-.41-3.109-.819-5.646-1.146a58.814 58.814 0 0 0-7.446-.49c-5.155 0-9.738 1.145-13.829 3.354-4.091 2.209-7.282 5.236-9.655 9.164-2.373 3.927-3.519 8.427-3.519 13.5v70.448h-28.312ZM222.077 39.192l-8.019 125.923L137.387 0l84.69 39.192Zm-53.105 162.825-57.933 33.056-57.934-33.056 11.783-28.556h92.301l11.783 28.556ZM111.039 62.675l30.357 73.803H80.681l30.358-73.803ZM7.937 165.115 0 39.192 84.69 0 7.937 165.115Z"
+          />
+          <path
+            fill="url(#c)"
+            d="M388.676 191.625h30.849L363.31 31.828h-35.758l-56.215 159.797h30.848l13.174-39.356h60.061l13.256 39.356Zm-65.461-62.675 21.602-64.311h1.227l21.602 64.311h-44.431Zm126.831-7.527v70.202h-28.23V71.839h27.002v20.374h1.392c2.782-6.71 7.2-12.028 13.255-15.956 6.056-3.927 13.584-5.89 22.503-5.89 8.264 0 15.465 1.8 21.684 5.318 6.137 3.518 10.964 8.673 14.319 15.382 3.437 6.71 5.074 14.81 4.992 24.383v76.175h-28.23v-71.92c0-8.019-2.046-14.237-6.219-18.819-4.173-4.5-9.819-6.791-17.102-6.791-4.91 0-9.328 1.063-13.174 3.272-3.846 2.128-6.792 5.237-9.001 9.328-2.046 4.009-3.191 8.918-3.191 14.728ZM589.233 239c-10.147 0-18.82-1.391-26.103-4.091-7.282-2.7-13.092-6.382-17.511-10.964-4.418-4.582-7.528-9.655-9.164-15.219l25.448-6.136c1.145 2.372 2.782 4.663 4.991 6.954 2.209 2.291 5.155 4.255 8.837 5.81 3.683 1.554 8.428 2.291 14.074 2.291 8.019 0 14.647-1.964 19.884-5.81 5.237-3.845 7.856-10.227 7.856-19.064v-22.665h-1.391c-1.473 2.946-3.601 5.892-6.383 9.001-2.782 3.109-6.464 5.645-10.965 7.691-4.582 2.046-10.228 3.109-17.101 3.109-9.165 0-17.511-2.209-25.039-6.545-7.446-4.337-13.42-10.883-17.757-19.474-4.418-8.673-6.628-19.473-6.628-32.565 0-13.091 2.21-24.301 6.628-33.383 4.419-9.082 10.311-15.955 17.839-20.7 7.528-4.746 15.874-7.037 25.039-7.037 7.037 0 12.846 1.145 17.347 3.518 4.582 2.373 8.182 5.236 10.883 8.51 2.7 3.272 4.746 6.382 6.137 9.327h1.554v-19.8h27.821v121.749c0 10.228-2.454 18.737-7.364 25.447-4.91 6.709-11.538 11.7-20.048 15.055-8.509 3.355-18.165 4.991-28.884 4.991Zm.245-71.266c5.974 0 11.047-1.473 15.302-4.337 4.173-2.945 7.446-7.118 9.573-12.519 2.21-5.482 3.274-12.027 3.274-19.637 0-7.609-1.064-14.155-3.274-19.8-2.127-5.646-5.318-10.064-9.491-13.255-4.174-3.11-9.329-4.746-15.384-4.746s-11.537 1.636-15.792 4.91c-4.173 3.272-7.365 7.772-9.492 13.418-2.128 5.727-3.191 12.191-3.191 19.392 0 7.2 1.063 13.745 3.273 19.228 2.127 5.482 5.318 9.736 9.573 12.764 4.174 3.027 9.41 4.582 15.629 4.582Zm141.56-26.51V71.839h28.23v119.786h-27.412v-21.273h-1.227c-2.7 6.709-7.119 12.191-13.338 16.446-6.137 4.255-13.747 6.382-22.748 6.382-7.855 0-14.81-1.718-20.783-5.237-5.974-3.518-10.72-8.591-14.075-15.382-3.355-6.709-5.073-14.891-5.073-24.464V71.839h28.312v71.921c0 7.609 2.046 13.664 6.219 18.083 4.173 4.5 9.655 6.709 16.365 6.709 4.173 0 8.183-.982 12.111-3.028 3.927-2.045 7.118-5.072 9.655-9.082 2.537-4.091 3.764-9.164 3.764-15.218Zm65.707-109.395v159.796h-28.23V31.828h28.23Zm44.841 162.169c-7.61 0-14.402-1.391-20.457-4.091-6.055-2.7-10.883-6.791-14.32-12.109-3.518-5.319-5.237-11.946-5.237-19.801 0-6.791 1.228-12.355 3.765-16.773 2.536-4.419 5.891-7.937 10.228-10.637 4.337-2.618 9.164-4.664 14.647-6.055 5.4-1.391 11.046-2.373 16.856-3.027 7.037-.737 12.683-1.391 17.102-1.964 4.337-.573 7.528-1.555 9.574-2.782 1.963-1.309 3.027-3.273 3.027-5.973v-.491c0-5.891-1.718-10.391-5.237-13.664-3.518-3.191-8.51-4.828-15.056-4.828-6.955 0-12.356 1.473-16.447 4.5-4.009 3.028-6.71 6.546-8.183 10.719l-26.348-3.764c2.046-7.282 5.483-13.336 10.31-18.328 4.746-4.909 10.638-8.59 17.511-11.045 6.955-2.455 14.565-3.682 22.912-3.682 5.809 0 11.537.654 17.265 2.045s10.965 3.6 15.711 6.71c4.746 3.109 8.51 7.282 11.455 12.6 2.864 5.318 4.337 11.946 4.337 19.883v80.184h-27.166v-16.446h-.9c-1.719 3.355-4.092 6.464-7.201 9.328-3.109 2.864-6.955 5.237-11.619 6.955-4.828 1.718-10.229 2.536-16.529 2.536Zm7.364-20.701c5.646 0 10.556-1.145 14.729-3.354 4.173-2.291 7.364-5.237 9.655-9.001 2.292-3.763 3.355-7.854 3.355-12.273v-14.155c-.9.737-2.373 1.391-4.5 2.046-2.128.654-4.419 1.145-7.037 1.636-2.619.491-5.155.9-7.692 1.227-2.537.328-4.746.655-6.628.901-4.173.572-8.019 1.472-11.292 2.781-3.355 1.31-5.973 3.11-7.855 5.401-1.964 2.291-2.864 5.318-2.864 8.918 0 5.237 1.882 9.164 5.728 11.782 3.682 2.782 8.51 4.091 14.401 4.091Zm64.643 18.328V71.839h27.412v19.965h1.227c2.21-6.955 5.974-12.274 11.292-16.038 5.319-3.763 11.456-5.645 18.329-5.645 1.555 0 3.355.082 5.237.163 1.964.164 3.601.328 4.91.573v25.938c-1.227-.41-3.109-.819-5.646-1.146a58.814 58.814 0 0 0-7.446-.49c-5.155 0-9.738 1.145-13.829 3.354-4.091 2.209-7.282 5.236-9.655 9.164-2.373 3.927-3.519 8.427-3.519 13.5v70.448h-28.312ZM222.077 39.192l-8.019 125.923L137.387 0l84.69 39.192Zm-53.105 162.825-57.933 33.056-57.934-33.056 11.783-28.556h92.301l11.783 28.556ZM111.039 62.675l30.357 73.803H80.681l30.358-73.803ZM7.937 165.115 0 39.192 84.69 0 7.937 165.115Z"
+          />
+        </g>
+        <defs>
+          <radialGradient
+            id="c"
+            cx="0"
+            cy="0"
+            r="1"
+            gradientTransform="rotate(118.122 171.182 60.81) scale(205.794)"
+            gradientUnits="userSpaceOnUse"
+          >
+            <stop stop-color="#FF41F8" />
+            <stop offset=".707" stop-color="#FF41F8" stop-opacity=".5" />
+            <stop offset="1" stop-color="#FF41F8" stop-opacity="0" />
+          </radialGradient>
+          <linearGradient
+            id="b"
+            x1="0"
+            x2="982"
+            y1="192"
+            y2="192"
+            gradientUnits="userSpaceOnUse"
+          >
+            <stop stop-color="#F0060B" />
+            <stop offset="0" stop-color="#F0070C" />
+            <stop offset=".526" stop-color="#CC26D5" />
+            <stop offset="1" stop-color="#7702FF" />
+          </linearGradient>
+          <clipPath id="a"><path fill="#fff" d="M0 0h982v239H0z" /></clipPath>
+        </defs>
+      </svg>
+      <h1>Hello, {{ title }}</h1>
+      <p>Congratulations! Your app is running. 🎉</p>
+    </div>
+    <div class="divider" role="separator" aria-label="Divider"></div>
+    <div class="right-side">
+      <div class="pill-group">
+        @for (item of [
+          { title: 'Explore the Docs', link: 'https://angular.dev' },
+          { title: 'Learn with Tutorials', link: 'https://angular.dev/tutorials' },
+          { title: 'CLI Docs', link: 'https://angular.dev/tools/cli' },
+          { title: 'Angular Language Service', link: 'https://angular.dev/tools/language-service' },
+          { title: 'Angular DevTools', link: 'https://angular.dev/tools/devtools' },
+        ]; track item.title) {
+          <a
+            class="pill"
+            [href]="item.link"
+            target="_blank"
+            rel="noopener"
+          >
+            <span>{{ item.title }}</span>
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              height="14"
+              viewBox="0 -960 960 960"
+              width="14"
+              fill="currentColor"
+            >
+              <path
+                d="M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h280v80H200v560h560v-280h80v280q0 33-23.5 56.5T760-120H200Zm188-212-56-56 372-372H560v-80h280v280h-80v-144L388-332Z"
+              />
+            </svg>
+          </a>
+        }
+      </div>
+      <div class="social-links">
+        <a
+          href="https://github.com/angular/angular"
+          aria-label="Github"
+          target="_blank"
+          rel="noopener"
+        >
+          <svg
+            width="25"
+            height="24"
+            viewBox="0 0 25 24"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+            alt="Github"
+          >
+            <path
+              d="M12.3047 0C5.50634 0 0 5.50942 0 12.3047C0 17.7423 3.52529 22.3535 8.41332 23.9787C9.02856 24.0946 9.25414 23.7142 9.25414 23.3871C9.25414 23.0949 9.24389 22.3207 9.23876 21.2953C5.81601 22.0377 5.09414 19.6444 5.09414 19.6444C4.53427 18.2243 3.72524 17.8449 3.72524 17.8449C2.61064 17.082 3.81137 17.0973 3.81137 17.0973C5.04697 17.1835 5.69604 18.3647 5.69604 18.3647C6.79321 20.2463 8.57636 19.7029 9.27978 19.3881C9.39052 18.5924 9.70736 18.0499 10.0591 17.7423C7.32641 17.4347 4.45429 16.3765 4.45429 11.6618C4.45429 10.3185 4.9311 9.22133 5.72065 8.36C5.58222 8.04931 5.16694 6.79833 5.82831 5.10337C5.82831 5.10337 6.85883 4.77319 9.2121 6.36459C10.1965 6.09082 11.2424 5.95546 12.2883 5.94931C13.3342 5.95546 14.3801 6.09082 15.3644 6.36459C17.7023 4.77319 18.7328 5.10337 18.7328 5.10337C19.3942 6.79833 18.9789 8.04931 18.8559 8.36C19.6403 9.22133 20.1171 10.3185 20.1171 11.6618C20.1171 16.3888 17.2409 17.4296 14.5031 17.7321C14.9338 18.1012 15.3337 18.8559 15.3337 20.0084C15.3337 21.6552 15.3183 22.978 15.3183 23.3779C15.3183 23.7009 15.5336 24.0854 16.1642 23.9623C21.0871 22.3484 24.6094 17.7341 24.6094 12.3047C24.6094 5.50942 19.0999 0 12.3047 0Z"
+            />
+          </svg>
+        </a>
+        <a
+          href="https://twitter.com/angular"
+          aria-label="Twitter"
+          target="_blank"
+          rel="noopener"
+        >
+          <svg
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+            alt="Twitter"
+          >
+            <path
+              d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"
+            />
+          </svg>
+        </a>
+        <a
+          href="https://www.youtube.com/channel/UCbn1OgGei-DV7aSRo_HaAiw"
+          aria-label="Youtube"
+          target="_blank"
+          rel="noopener"
+        >
+          <svg
+            width="29"
+            height="20"
+            viewBox="0 0 29 20"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+            alt="Youtube"
+          >
+            <path
+              fill-rule="evenodd"
+              clip-rule="evenodd"
+              d="M27.4896 1.52422C27.9301 1.96749 28.2463 2.51866 28.4068 3.12258C29.0004 5.35161 29.0004 10 29.0004 10C29.0004 10 29.0004 14.6484 28.4068 16.8774C28.2463 17.4813 27.9301 18.0325 27.4896 18.4758C27.0492 18.9191 26.5 19.2389 25.8972 19.4032C23.6778 20 14.8068 20 14.8068 20C14.8068 20 5.93586 20 3.71651 19.4032C3.11363 19.2389 2.56449 18.9191 2.12405 18.4758C1.68361 18.0325 1.36732 17.4813 1.20683 16.8774C0.613281 14.6484 0.613281 10 0.613281 10C0.613281 10 0.613281 5.35161 1.20683 3.12258C1.36732 2.51866 1.68361 1.96749 2.12405 1.52422C2.56449 1.08095 3.11363 0.76113 3.71651 0.596774C5.93586 0 14.8068 0 14.8068 0C14.8068 0 23.6778 0 25.8972 0.596774C26.5 0.76113 27.0492 1.08095 27.4896 1.52422ZM19.3229 10L11.9036 5.77905V14.221L19.3229 10Z"
+            />
+          </svg>
+        </a>
+      </div>
+    </div>
+  </div>
+</main>
+
+<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
+<!-- * * * * * * * * * * * The content above * * * * * * * * * * * * -->
+<!-- * * * * * * * * * * is only a placeholder * * * * * * * * * * * -->
+<!-- * * * * * * * * * * and can be replaced.  * * * * * * * * * * * -->
+<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
+<!-- * * * * * * * * * * End of Placeholder  * * * * * * * * * * * * -->
+<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
+
+
+<router-outlet />
--- a/media-analyzer/frontend/src/app/app.component.scss
+++ b/media-analyzer/frontend/src/app/app.component.scss
--- a/media-analyzer/frontend/src/app/app.component.spec.ts
+++ b/media-analyzer/frontend/src/app/app.component.spec.ts
@@ -0,0 +1,29 @@
+import { TestBed } from '@angular/core/testing';
+import { AppComponent } from './app.component';
+
+describe('AppComponent', () => {
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [AppComponent],
+    }).compileComponents();
+  });
+
+  it('should create the app', () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.componentInstance;
+    expect(app).toBeTruthy();
+  });
+
+  it(`should have the 'frontend' title`, () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.componentInstance;
+    expect(app.title).toEqual('frontend');
+  });
+
+  it('should render title', () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    fixture.detectChanges();
+    const compiled = fixture.nativeElement as HTMLElement;
+    expect(compiled.querySelector('h1')?.textContent).toContain('Hello, frontend');
+  });
+});
--- a/media-analyzer/frontend/src/app/app.component.ts
+++ b/media-analyzer/frontend/src/app/app.component.ts
@@ -0,0 +1,13 @@
+import { Component } from '@angular/core';
+import { RouterOutlet } from '@angular/router';
+
+@Component({
+  selector: 'app-root',
+  standalone: true,
+  imports: [RouterOutlet],
+  templateUrl: './app.component.html',
+  styleUrl: './app.component.scss'
+})
+export class AppComponent {
+  title = 'frontend';
+}
--- a/media-analyzer/frontend/src/app/app.config.ts
+++ b/media-analyzer/frontend/src/app/app.config.ts
@@ -0,0 +1,8 @@
+import { ApplicationConfig } from '@angular/core';
+import { provideRouter } from '@angular/router';
+
+import { routes } from './app.routes';
+
+export const appConfig: ApplicationConfig = {
+  providers: [provideRouter(routes)]
+};
--- a/media-analyzer/frontend/src/app/app.routes.ts
+++ b/media-analyzer/frontend/src/app/app.routes.ts
@@ -0,0 +1,3 @@
+import { Routes } from '@angular/router';
+
+export const routes: Routes = [];
--- a/media-analyzer/frontend/src/app/components/analysis-panel/analysis-panel.component.html
+++ b/media-analyzer/frontend/src/app/components/analysis-panel/analysis-panel.component.html
@@ -0,0 +1 @@
+<p>analysis-panel works!</p>
--- a/media-analyzer/frontend/src/app/components/analysis-panel/analysis-panel.component.scss
+++ b/media-analyzer/frontend/src/app/components/analysis-panel/analysis-panel.component.scss
--- a/media-analyzer/frontend/src/app/components/analysis-panel/analysis-panel.component.spec.ts
+++ b/media-analyzer/frontend/src/app/components/analysis-panel/analysis-panel.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AnalysisPanelComponent } from './analysis-panel.component';
+
+describe('AnalysisPanelComponent', () => {
+  let component: AnalysisPanelComponent;
+  let fixture: ComponentFixture<AnalysisPanelComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [AnalysisPanelComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(AnalysisPanelComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
--- a/media-analyzer/frontend/src/app/components/analysis-panel/analysis-panel.component.ts
+++ b/media-analyzer/frontend/src/app/components/analysis-panel/analysis-panel.component.ts
@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-analysis-panel',
+  standalone: true,
+  imports: [],
+  templateUrl: './analysis-panel.component.html',
+  styleUrl: './analysis-panel.component.scss'
+})
+export class AnalysisPanelComponent {
+
+}
--- a/media-analyzer/frontend/src/app/components/effects-panel/effects-panel.component.html
+++ b/media-analyzer/frontend/src/app/components/effects-panel/effects-panel.component.html
@@ -0,0 +1 @@
+<p>effects-panel works!</p>
--- a/media-analyzer/frontend/src/app/components/effects-panel/effects-panel.component.scss
+++ b/media-analyzer/frontend/src/app/components/effects-panel/effects-panel.component.scss
--- a/media-analyzer/frontend/src/app/components/effects-panel/effects-panel.component.spec.ts
+++ b/media-analyzer/frontend/src/app/components/effects-panel/effects-panel.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { EffectsPanelComponent } from './effects-panel.component';
+
+describe('EffectsPanelComponent', () => {
+  let component: EffectsPanelComponent;
+  let fixture: ComponentFixture<EffectsPanelComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [EffectsPanelComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(EffectsPanelComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
--- a/media-analyzer/frontend/src/app/components/effects-panel/effects-panel.component.ts
+++ b/media-analyzer/frontend/src/app/components/effects-panel/effects-panel.component.ts
@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-effects-panel',
+  standalone: true,
+  imports: [],
+  templateUrl: './effects-panel.component.html',
+  styleUrl: './effects-panel.component.scss'
+})
+export class EffectsPanelComponent {
+
+}
--- a/media-analyzer/frontend/src/app/components/effects-panel/shader-editor/shader-editor.component.html
+++ b/media-analyzer/frontend/src/app/components/effects-panel/shader-editor/shader-editor.component.html
@@ -0,0 +1 @@
+<p>shader-editor works!</p>
--- a/media-analyzer/frontend/src/app/components/effects-panel/shader-editor/shader-editor.component.scss
+++ b/media-analyzer/frontend/src/app/components/effects-panel/shader-editor/shader-editor.component.scss
--- a/media-analyzer/frontend/src/app/components/effects-panel/shader-editor/shader-editor.component.spec.ts
+++ b/media-analyzer/frontend/src/app/components/effects-panel/shader-editor/shader-editor.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ShaderEditorComponent } from './shader-editor.component';
+
+describe('ShaderEditorComponent', () => {
+  let component: ShaderEditorComponent;
+  let fixture: ComponentFixture<ShaderEditorComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ShaderEditorComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(ShaderEditorComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
--- a/media-analyzer/frontend/src/app/components/effects-panel/shader-editor/shader-editor.component.ts
+++ b/media-analyzer/frontend/src/app/components/effects-panel/shader-editor/shader-editor.component.ts
@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-shader-editor',
+  standalone: true,
+  imports: [],
+  templateUrl: './shader-editor.component.html',
+  styleUrl: './shader-editor.component.scss'
+})
+export class ShaderEditorComponent {
+
+}
--- a/media-analyzer/frontend/src/app/components/stream-control/stream-control.component.html
+++ b/media-analyzer/frontend/src/app/components/stream-control/stream-control.component.html
@@ -0,0 +1 @@
+<p>stream-control works!</p>
--- a/media-analyzer/frontend/src/app/components/stream-control/stream-control.component.scss
+++ b/media-analyzer/frontend/src/app/components/stream-control/stream-control.component.scss
--- a/media-analyzer/frontend/src/app/components/stream-control/stream-control.component.spec.ts
+++ b/media-analyzer/frontend/src/app/components/stream-control/stream-control.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { StreamControlComponent } from './stream-control.component';
+
+describe('StreamControlComponent', () => {
+  let component: StreamControlComponent;
+  let fixture: ComponentFixture<StreamControlComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [StreamControlComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(StreamControlComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
--- a/media-analyzer/frontend/src/app/components/stream-control/stream-control.component.ts
+++ b/media-analyzer/frontend/src/app/components/stream-control/stream-control.component.ts
@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-stream-control',
+  standalone: true,
+  imports: [],
+  templateUrl: './stream-control.component.html',
+  styleUrl: './stream-control.component.scss'
+})
+export class StreamControlComponent {
+
+}
--- a/Show More
+++ b/Show More