PORTFOLIO

FUNDAMENTAL DATUM

A distributed systems demonstration: live video streaming, event-driven AI pipelines, real-time WebSocket synchronization, and vector search — orchestrated across Cloudflare's edge network.

Cloudflare Workers R2 Stream Durable Objects Vectorize D1 UX Design UI Design Vanilla JS


OVERVIEW

A real-time data pipeline that ingests a 24/7 live video stream, runs scheduled computer vision inference, embeds scene descriptions into vector storage, and synchronizes AI-generated dialogue to all connected clients via WebSockets — all orchestrated on Cloudflare's global edge network.

USER EXPERIENCE

  • PRESS PLAY: A Cloudflare Stream embed (HLS/DASH) delivers a resilient, device‑friendly live feed.
  • SOUNDTRACK: A time‑based rotation selects tracks for sunrise, sunset, and top‑of‑hour moments. In production, audio is delivered via per‑request signed URLs from R2; local dev seamlessly falls back to a proxy stream.
  • OSCILLOSCOPE: A full‑screen 4×4 waveform grid renders the soundtrack in realtime. Switch among oscilloscope, bars, radial, and area modes—always behind the UI, always crisp.
  • LIVE COMMENTARY: Two contrasting LLM personas provide synchronized, line‑by‑line commentary over WebSockets. Everyone hears the same "show" in the same moment.
  • CHANNELS: Pick a topic channel to change tone and subject; the system hot‑starts the conversation with the latest scene.

HOW IT WORKS

  • EDGE APP: A single Cloudflare Worker handles routes, directory normalization, and static delivery via env.ASSETS, with CSP and security headers applied.
  • SCHEDULED CAPTIONS: Every few minutes, a cron Worker grabs a thumbnail from Stream, describes the scene with Workers AI (Vision), and stores the snapshot in R2.
  • EMBEDDINGS & EVENTS: Scene text is embedded with @cf/baai/bge‑small‑en‑v1.5 and indexed in Vectorize. A structured "strange event" record lands in D1 for analytics and search.
  • GLOBAL DIALOGUE: A Durable Object (global instance) turns the latest scene into a two‑line debate and broadcasts it to all visitors via WebSockets, with budget/cadence controls to keep costs predictable.
  • AUDIO DELIVERY: The soundtrack endpoint chooses a track using SunCalc heuristics (sunrise/sunset, even/odd hour) and returns a signed URL (prod) or dev proxy—no UI changes required.
  • MEDIA PIPELINE: Private objects stream with Range (206), ETag/Last‑Modified, and immutable caching; filenames are allowlisted to block traversal.

WHAT MAKES IT DIFFERENT

  • Edge‑Native, Zero‑Ops: All delivery, logic, AI, and storage run on Cloudflare's edge—low‑latency and low‑maintenance.
  • Synchronized Personas: Commentary is global and consistent—one Durable Object, one conversation, shared by everyone.
  • Prompt Discipline: Persona prompts are strictly constrained (including the recurring clause "the fundamental datum is") and sanitized before broadcast to preserve tone and safety.
  • Time‑Aware Sound: Sunrise/sunset and hourly events subtly change the score so the site "breathes" throughout the day.
  • Robust Media: Signed URLs in production, dev fallbacks, and immutable caching policies make private media fast and reliable.

MY DESIGN APPROACH

  • System architecture, data flow design, and infrastructure planning
  • Distributed systems engineering (Workers, Durable Objects, Vectorize, D1), media delivery, and security headers
  • Frontend (vanilla JS), real‑time visualizer, and commentary client UX (typewriter, channel switching)
  • AI/ML pipeline engineering: scheduled inference, embedding generation, cost/budget controls, and output sanitization
  • Event storage and semantic search via vector embeddings and structured event taxonomy

OUTCOME

A production-grade, always‑on distributed system demonstrating edge compute patterns, AI orchestration, and event-driven architecture. The system is extensible (new inference models, richer event taxonomy, expanded state coordination) while remaining zero-ops through Cloudflare's serverless infrastructure.

TECH STACK

  • Cloudflare: Workers, Durable Objects, Stream, R2, Workers AI, Vectorize, D1
  • Frontend: Vanilla JS (commentary client, carousel, badges), Canvas‑based 4×4 visualizer
  • AI Models: Vision (LLaVA‑1.5 family), @cf/baai/bge‑small‑en‑v1.5 embeddings, LLM for dialogue
  • Scheduling: Cron Worker for snapshot → caption → embedding → DO trigger
  • Media: Range (206), ETag/Last‑Modified, immutable caching, allowlisted filenames
  • Utilities: SunCalc for sunrise/sunset and top‑of‑hour logic; Wrangler for dev/deploy