proper docs folder
This commit is contained in:
buenosairesam
|
Before Width: | Height: | Size: 40 KiB After Width: | Height: | Size: 40 KiB |
128
docs/index.html
Normal file
128
docs/index.html
Normal 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>
|
||||||
360
docs/styles.css
Normal file
360
docs/styles.css
Normal file
@@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
38
thevideo.MD
38
thevideo.MD
@@ -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 (?
|
|
||||||
|
|
||||||
|
|
||||||
Reference in New Issue
Block a user