Oracle of Delphi

Divine Strategist

Comment

Inspiration

The project was born from the realization that LoL matches are often won or lost in the draft phase. While most tools provide raw stats, they lack "vision." We wanted to build something that felt like a Prophetic War Room which is a sentient strategist that predicts enemy intent and visualizes the "Tide of Fate" (Win Probability) in real-time.

What it does

The Oracle of Delphi is a high-performance drafting intelligence platform designed for the most critical phase of competitive League of Legends: the Hero Select.

By fusing the ancient, prophetic aesthetic of the Delphic Oracle with the futuristic "Hextech" engineering of the game's lore, the project creates a unique atmospheric experience that treats data analysis as a divine revelation.

How we built it

The application is built on a modern, high-performance tech stack designed for speed and clarity: We use Gemini 3 Pro for deep structural analysis and Gemini 2.5 Flash for high-speed drafting recommendations. The AI analyzes compositional synergy, scaling curves, and potential counter-picks.

  • The Voice (Gemini TTS): Utilizing the gemini-2.5-flash-preview-tts model with a custom "Natural Language Directing" prompt, the Oracle literally speaks to the user, providing an immersive strategic introduction.

  • The Visualization (Recharts & Tailwind): Complex data like *"Spectral Composition" and "Enemy Intent Probability" is rendered through customized charting components that match the Hextech gold-and-blue aesthetic.

  • The Interface (React): A custom drafting engine that manages the complex turn-order of professional play, ensuring the AI is always synchronized with the current pick.

Challenges we ran into

  • Model Overloading (503 Errors): High-traffic intervals on the API originally caused "silent failures." We solved this by implementing a resilient retry logic and a fallback dummy-state system to keep the UI from breaking.

  • UI Complexity: Balancing a professional-grade dashboard with an atmospheric "Oracle" theme was difficult. We used image-rendering: pixelated on DDragon icons to give it a "Scanned Archive" look that feels both retro and high-tech.

  • Draft Logic: Mapping the 20-step pro draft order (Bans 1-3, Picks 1-3, Bans 4-5, Picks 4-5) required a strict state machine to ensure the AI always knew exactly who was picking and why.

Accomplishments that we're proud of

  • The "Oracle's Voice" (Multimodal Narration): We are incredibly proud of how we pushed the boundaries of standard AI interfaces. Instead of just showing text, we architected a seamless Multimodal Narration system using Gemini 2.5 Flash TTS. By utilizing "Natural Language Directing" in our prompts, we didn't just generate speech—we gave the Oracle a haunting, divine persona that reacts to the draft, transforming a simple tool into an immersive atmospheric experience.

  • Pro-Level Drafting State Machine: Mapping the 20-step sequential complexity of a professional League of Legends draft (Bans 1-3, Picks 1-3, Bans 4-5, Picks 4-5) was a significant technical feat. We successfully built a robust state machine that ensures the "Prophecy" updates instantly as champions are locked in, maintaining perfect synchronization between the user's actions and the AI's reasoning.

  • The "Hextech" Design Language: We managed to balance professional-grade data density with a heavy thematic aesthetic. We’re proud of our custom CSS architecture, which uses gold-leaf gradients, "scanner-eye" animations, and pixel-perfect rendering for champion assets to make the interface feel like a genuine piece of Hextech technology from the game's lore.

  • Turning Compositional Theory into Visual Data: Bridging the gap between high-level strategic theory and actionable insights was a major goal. We are proud of our "Spectral Composition" charts, which translate abstract concepts like "Scaling Curves" and "Engage Reliability" into clear, beautiful visualizations that a player can process in the split-second of a draft.

  • System Resilience (The "Divine Sanctum" Fallback): In the high-pressure environment of a hackathon, API stability can be volatile. We implemented a resilient error-handling layer with exponential backoff and "dummy-state" fallbacks. This ensures that even if the "divine connection" (the API) is under heavy load, the user experience remains smooth and the UI never breaks.

  • Multimodal Decoding Logic: We successfully solved the technical challenge of playing raw PCM 16-bit audio streams directly in the browser. Since Gemini's audio doesn't include standard file headers (like .mp3), we had to manually implement a base64-to-PCM audio decoder using the Web Audio API—a deep-dive into browser-native audio engineering that we are very proud of.

What we learned

  1. Multimodal Audio Streams: One of our biggest hurdles was handling the raw PCM 16-bit audio returned by the Gemini TTS model. Since it lacks a standard file header (like .wav), we had to implement a custom base64-to-PCM decoder using the Web Audio API to ensure the "Oracle's" voice played back smoothly.
  2. AI Latency vs. Draft Speed: Drafting is a high-pressure, timed event. We had to optimize our prompt engineering and implement robust error handling (exponential backoff) to ensure the AI insights arrived before the pick timer expired.
  3. JSON Schema Enforcement: Forcing a creative AI to strictly adhere to a complex JSON structure for data visualization required meticulous responseSchema configuration

We learned that the future of AI isn't just in the accuracy of the data, but in the modality of the delivery. By combining speech, visual charts, and predictive reasoning, we realized we could create a "Co-Pilot" experience that feels more like a teammate than a tool. We also gained deep experience in managing state-heavy React applications that rely on external multimodal LLMs.

The final result is a tool that doesn't just help you pick a champion but helps you see the future of the match.

Share this project:

Updates