Director's Eye

AI-powered cinematography mentor with end-to-end LLM observability - analyzes images, provides professional feedback, and demonstrates innovative Datadog monitoring for Gemini-powered applications.

Comment

Inspiration

The idea for Director's Eye was born from two intersecting problems I observed:

The Creative Gap: As a cinematography enthusiast, I've always wondered what makes certain film frames so captivating. Learning cinematography is expensive—professional courses cost thousands of dollars, and not everyone has access to a mentor who can provide real-time feedback on their work.

The Observability Gap: As LLM applications become mainstream, I noticed most teams deploy AI features as "black boxes" without understanding what's happening inside. They don't know their token costs, can't detect when AI quality degrades, and have no visibility into security threats like prompt injection.

On the first meet of the hackathon, around 1 AM, I remembered how legendary directors like Christopher Nolan and Roger Deakins always see things that ordinary people miss. That's when "The Director" persona was born—not just an AI analyzer, but an AI mentor with character, opinions, and a speaking style like a real cinematography expert.

But more importantly, I wanted to build this as a showcase for production-grade LLM observability. Every AI call is traced, every token is counted, every security threat is detected. This isn't observability as an afterthought—it's observability as a first-class citizen.

What It Does

Director's Eye is an AI Cinematography Mentor with end-to-end LLM observability powered by Google Gemini and Datadog.

✨ Core Features

1. Instant Visual Analysis

  • Upload any image and get a cinematography score (1-100) in seconds
  • Deep breakdown: Lighting (1-10), Composition (1-10), Mood (1-10)
  • Professional critique explaining visual strengths and areas for improvement
  • Auto-generated prompts for recreating the shot in AI tools

2. The Director Chat

  • AI chatbot with "The Director" persona—not a generic assistant, but a mentor with opinions
  • Multi-language support (responds in user's language automatically)
  • Contextual responses based on the specific image being analyzed
  • Markdown formatting for rich, readable responses

3. Magic Edit

  • AI-powered image remixing using Gemini's generative capabilities
  • Transform photos with text prompts ("make it cyberpunk", "golden hour lighting")
  • Two model options
  • Custom API key support for unlimited usage

4. Community Gallery

  • Share creations publicly to inspire others
  • Private history to track all your analyses
  • View full analysis details including scores, critique, and prompts
  • Download and remix other users' creations

LLM Observability Features (Datadog Integration)

1. Automatic LLM Tracing

2. Custom Business Metrics

3. Security Detection

4. 6 Detection Rules with Actionable Alerts

5. Comprehensive Dashboard

How We Built It

Tech Stack

Frontend:

  • React 18 + Vite - Blazing fast development and production builds
  • Tailwind CSS - Custom dark theme with glassmorphism aesthetic
  • Datadog - Real User Monitoring with session replay

Backend:

  • Node.js + Express - Serverless-ready architecture (Vercel compatible)
  • Firebase Firestore - Persistent storage for gallery and history
  • dd-trace - LLM Observability with automatic GenAI instrumentation

AI Integration:

  • *Google Gemini *
  • Custom Prompt Engineering - "The Director" persona with strict JSON output

Observability Stack:

  • Datadog APM - Distributed tracing from click to AI response
  • Datadog LLM Observability - Automatic GenAI instrumentation
  • Custom Metrics API - Token, cost, quality metrics sent directly
  • Datadog Logs - Centralized logging with security events
  • Datadog RUM - Frontend performance and user sessions

Design Philosophy

We chose a dark theme with indigo/purple accents because it mimics the atmosphere of a professional editing suite. Glassmorphism cards create a modern, premium feel. Every interaction has smooth animations—loading skeletons, hover effects, toast notifications—because details matter for user experience.

Challenges We Ran Into

LLM Observability Setup

Getting dd-trace to properly instrument Google GenAI calls was tricky. The documentation mentioned ESM loader (--import dd-trace/initialize.mjs), but our project uses CommonJS. After debugging path issues (folder name had spaces!), we discovered that dd-trace v5.81+ works with simple require('dd-trace').init() and the llmobs config option.

Gemini Response Inconsistency

Gemini often didn't follow the requested JSON format, sometimes returned responses in wrong languages, and added markdown wrappers that broke parsing.

Real-time State Sync

Settings in Navbar (API key, model selection) weren't syncing with AnalysisPage. localStorage changes in one component weren't detected by another. Solution: Polling every 500ms + custom events for same-tab communication.

Free Tier API Key Detection

Users adding their own Gemini API key still hit "daily limit" errors because free tier keys have zero quota for image generation models. Solution: Server-side validation endpoint that tests the key and detects quota errors, with clear UI feedback about free tier limitations.

Multi-Language AI Chat

Making "The Director" respond in the user's language naturally was harder than expected. The AI would sometimes mix languages or ignore the user's language entirely. Solution: Explicit language detection instructions in the system prompt with priority rules.

Accomplishments That We're Proud Of

Production-Grade LLM Observability

This isn't a demo with observability bolted on. Every AI call is traced, every token counted, every security threat detected. The dashboard shows real application health, not vanity metrics.

6 Actionable Detection Rules

Not just monitors that alert—monitors that provide context and route to the right team. Error rate goes to PagerDuty, security threats go to security team, cost anomalies go to finance.

The Director Persona

Successfully created an AI that feels like it has personality—consistent character, opinions on cinematography, adapts to user's language naturally. Not a generic "I'm an AI assistant" response.

Full Feature Set

Image analysis, AI chat, Magic Edit with image generation, community gallery, private history, custom API key support, skeleton loading, lazy images, caching—all working in production.

Security-First Approach

Prompt injection detection from day one. Not waiting for an incident to add security—it's built into the architecture with real-time alerting.

Beautiful, Responsive UI

Dark theme, glassmorphism, smooth animations, skeleton loading, toast notifications, modal dialogs—every detail polished for a premium feel.

What We Learned

**Google Gemini AI Integration*

First time working with Gemini API. Learned about multimodal inputs (text + image), different model variants (Flash vs Flash Lite), response parsing, and how to craft effective prompts. The @google/genai SDK is straightforward but prompt engineering is an art.

Datadog from Zero to Hero

Never used Datadog before this hackathon. Now I understand APM tracing, RUM for frontend, custom metrics via API, log forwarding, monitors, SLOs, and dashboards. The learning curve was steep but seeing all telemetry in one place is incredibly powerful.

LLM Observability Matters

You can't operate what you can't observe. Knowing token costs, response latency, and quality scores in real-time changes how you think about AI applications. It's not just "does it work?" but "how well does it work and at what cost?"

**Firebase Firestore*

Learned Firestore from scratch—collections, documents, queries, composite indexes, security rules, and the Admin SDK. The 1MB document limit taught me about data optimization and image compression.

Security for LLM Apps

Prompt injection is real. Learned to detect suspicious patterns, log security events, and alert without breaking user experience. Security should be built-in, not bolted on.

Production vs Development

So many things work locally but break in production. Environment variables, CORS, static files, serverless functions—each deployment taught something new.

What's Next for Director's Eye

Mobile App

Native mobile app for on-the-go analysis—imagine analyzing shots directly while filming.

Video Analysis

Expand from single frames to video—analyze entire sequences and provide per-scene feedback with timeline visualization.

Advanced Security

ML-based prompt injection detection instead of regex patterns. Anomaly detection for unusual user behavior.

Cost Optimization

Implement response caching for similar images. Predictive scaling based on usage patterns.

Style Presets

Train analysis on specific cinematography styles—"Analyze this like Christopher Nolan would" or "Give me Wes Anderson feedback."

Share this project:

Updates