Studio Dispatch

CSS variables and hover/focus-visible interactive state styling.
CSS absolute positioning with 3D perspective and rotation.
CSS responsive media queries and flexbox layout properties.
CSS media query and flexbox layout with visible line numbers.
React state setup and Google GenAI API key validation.
Asynchronous Google GenAI API request with custom prompt instructions.
Token cost calculation, error handling, and JSX setup.
Tailwind-styled button with loading state and live feed section.
Dynamic status badges, preformatted text output, and observability section.
Conditional Lucide icons and live telemetry feedback messages.
UI input panel for Cinema Monitor prompt submission.
Web app running on localhost with execution button and idle agent.
Dashboard showing active operations, 0ms latency, and cost telemetry.

Inspiration

Modern film pre-production relies heavily on script readers, storyboard artists, and visual supervisors to evaluate narrative pacing, emotional beats, and visual tone. However, manual coverage reports take days to generate. Studio Dispatch was created to bridge high-concept cinematic storytelling—such as blending traditional Indian cultural ethos with futuristic cyberpunk tropes—with real-time, autonomous AI agent execution. The goal was to build a functional, responsive dashboard capable of analyzing narrative mechanics while monitoring real-time API execution metrics.

What it does

Studio Dispatch is a real-time cinema control room dashboard that acts as an automated script reader and visual consultant for film pitches and screenplays.

Automated Script Evaluation: Parses screenplays or story loglines (in English or Hinglish) and provides instant coverage across three core areas: Pacing & Tone: Evaluates genre consistency, contrast, and visual mood (e.g., contrasting Banaras' traditional Ganga Aarti smoke with 2080 cyberpunk neon lights).

Character & Conflict Dynamic: Analyzes character stakes, physical trauma, and narrative urgency.

Script Suggestion: Delivers actionable screenwriting advice based on the "Show, Don't Tell" rule (e.g., suggesting a character physically dodge an ambush before looking up to prove a time loop). across three core areas:

How we built it

The application is structured around a three-column control room layout: Dispatch Input Deck, Active Crew Operations, and Grafana Observability Panel.

Frontend Framework: Built with React, Vite, and Tailwind CSS v4 for a dark-mode control panel aesthetic.

Componentry: Utilizes lucide-react for status indicators, telemetry feeds, and interactive control elements.

AI Pipeline: Powered by @google/genai using the gemini-3.6-flash model to analyze Hinglish and English screenplay pitches under explicit system instructions.

Dynamic Environment Handling: Configured to retrieve API keys directly at runtime via import.meta.env.VITE_GEMINI_API_KEY to prevent premature module initialization errors.

📉 Mathematical & Telemetry Formulations To make the dashboard production-grade, an internal telemetry module calculates live request latency ($L$) and estimated execution cost ($C$) per payload.

Latency Calculation $$L = t_{\text{end}} - t_{\text{start}}$$ Where $t_{\text{start}}$ is captured via performance.now() immediately before the network request, and $t_{\text{end}}$ is captured upon payload receipt.
Cost Estimation Model Using token metadata returned in usageMetadata (promptTokenCount as $T_{\text{in}}$ and candidatesTokenCount as $T_{\text{out}}$), total cost $C$ (in USD) is estimated as: $$C = \left( T_{\text{in}} \times 0.000000075 \right) + \left( T_{\text{out}} \times 0.0000003 \right)$$

studio-dispatch/ ├── .env.local ├── package.json ├── vite.config.js └── src/ ├── App.jsx ├── main.jsx └── index.css

Challenges we ran into

I Key Lifecycle Errors: Instantiating the SDK globally at module load evaluated import.meta.env.VITE_GEMINI_API_KEY before Vite finished reading .env.local, resulting in missing key errors. Resolution: Moved SDK instantiation inside the handleExecute handler to read the key dynamically upon button click.

Model Endpoint Sunsetting: Attempting to call deprecated endpoint identifiers (gemini-2.5-flash or gemini-2.0-flash) triggered 404 network errors. Resolution: Updated the target model identifier across the codebase to gemini-3.6-flash.

Telemetry Data Precision: Capturing precise latency and API cost metrics without delaying UI execution. Resolution: Wrapped network requests with high-precision timers and parsed token usage metadata directly from the response object.

Accomplishments that we're proud of

Full-Stack Gemini 3.6 Flash Integration: Successfully connected Google's newest @google/genai SDK to execute live, real-time narrative evaluation of complex Hinglish sci-fi pitches directly within our client-side React pipeline.

Production-Grade Observability Engine: Built an in-app telemetry engine from scratch that captures exact network round-trip latency ($L = t_{\text{end}} - t_{\text{start}}$) in milliseconds alongside dynamic per-request API cost estimates based on real-time token counts.

Domain-Specific Script Coverage Prompting: Designed strict system instructions that force the model to enforce screenwriting principles ("Show, Don't Tell"), delivering actionable, structured suggestions (Pacing, Dynamics, Visual Tips) for filmmakers.

Resilient Client Architecture: Solved complex Vite module execution issues by dynamically retrieving API keys at runtime and ensuring smooth text rendering for agent feeds with specialized UI containers.

What we learned

Client-Side GenAI Integration: Mastered Google’s @google/genai SDK within a Vite-powered React architecture, learning how to handle dynamic runtime environment variable binding (import.meta.env.VITE_GEMINI_API_KEY) to secure client requests.

LLM Observability & Financial Engineering: Gained hands-on experience tracking real-time API execution telemetry, capturing exact network latency ($L = t_{\text{end}} - t_{\text{start}}$) and computing per-payload financial cost models ($C$) using raw usageMetadata token counts.

Domain-Specific Prompt Engineering: Learned how to instruct LLMs to act as specialized domain agents—enforcing screenwriting principles like "Show, Don't Tell" to deliver structured narrative coverage across Pacing, Character Dynamics, and Visual Tips.

State & Layout Resilience: Deepened our understanding of managing async UI states in React, handling model endpoint migrations (gemini-3.6-flash), and using Tailwind CSS to format raw multi-line LLM outputs cleanly without breaking fixed dashboard grids.

What's next for Studio Dispatch

Automated Multi-Modal Storyboarding Pipeline: Upgrade the current script analysis agent to automatically parse screenplays into individual scenes and stream generated visual frame prompts (t2i) directly into an interactive, multi-agent storyboard deck.

End-to-End Cost & Compute Aggregation: Expand our observability telemetry from single-query LLM cost estimation to a comprehensive "Cost per Rendered Scene" model, tracking total token usage, multimodal generation fees, and API compute overhead across the entire pre-production lifecycle.

Parallel Multi-Agent Architecture: Transition from a single script agent to an orchestrated multi-agent workflow featuring dedicated agents for Dialogue Polish, Camera Direction, and Budget Estimation running concurrently via serverless edge functions.

Fine-Tuned Domain Embeddings & RAG: Implement a Retrieval-Augmented Generation (RAG) vector store loaded with classic and contemporary screenplays to ground script suggestions in proven cinematic structures and genre-specific pacing rules.