Codename: Riddler's Challenge - An AI powered story experience
Tags: devchallenge, twiliochallenge, ai, challenge
Published: 2024-06-24 06:52:34

*This is a submission for the [Twilio Challenge ](https://dev.to/challenges/twilio)*

## What I Built
The Riddler’s Challenge is an interactive story-telling experience that uses AI to put you into the shoes of a Gotham Police Officer who has been called to protect the city in Batman's absence. You must rely on your phone and wit to complete the riddlers challenge and save Gotham City!

Players visit the site and begin the challenge by clicking the envelope and answering an initial riddle. A correct submission prompts the player to enter their phone number to receive a call from Commissioner Gordon, filling them in on the situation. From there, they will receive a riddle and have three tries to enter the correct answer. After each submission players receive a call to let them know if they answered correctly or need to try again.

## Demo

**The demo is best viewed using a Desktop Web browser.**

Scan below or [click the link](https://codename-riddlers-challenge-7663-dev.twil.io/index.html) to view our site.
[![QR code to demo site](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/51q75qkiysgje6kd7ibi.png)](https://codename-riddlers-challenge-7663-dev.twil.io/index.html)

Enjoy this video demonstrating how to embark on this interactive experience, and hear our generated riddles and voices!
{% embed https://youtu.be/9wmnGyGoflk %}

## Twilio and AI
This project utilizes Twilio Voice and Twilio Functions to progress the player through the game. The project also leverages [OpenAI](https://platform.openai.com/) GPT-4o, [ReplicaStudios](https://www.replicastudios.com/) Speech to Speech, and [ElevenLabs](https://elevenlabs.io/) Voice Lab.  

**System Design:**
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zsubxxq3qjpqi8xhlmgb.png)

**Here’s the breakdown:**

- 📞    Players submit their phone numbers on our site, triggering an initial call using Twilio Voice.

- 🤖 A riddle is generated by an OpenAI, GPT-4o Assistant, specialized to sound like The Riddler in tone.
- 🤖 The generated text is then converted to audio using a voice created with ElevenLabs Text-to-Speech.
    - 🎙️ &nbsp; &nbsp; We recorded audio with the character’s speech patterns, inflection, and dialogue in mind. Using ReplicaStudios Speech to Speech we created our Riddler character voice.
    - 🎙️ That voice was then cloned and tweaked for a more natural-sounding reading voice using ElevenLabs Voice Lab.
    - 🎙️ Once the audio files are generated from the voice lab, a media tools library called FFMPEG is used to layer backgrounds and sounds effects with the voice work, tweak the audio levels, and combine everything into 3 distinct audio files.
- 📲 &nbsp; Players receive phone calls to hear the riddle, read in the character's voice, using Twilio Voice. A Twilio Function sends a message containing the generated text, and players submit their answers on the site.
- ✅ &nbsp; The submission is verified against the riddle’s answer, and the player receives a call to confirm if they won or need to try again.

## Additional Prize Categories

* **Twilio Times Two**
  Twilio Voice and Functions are featured in this project.
* **Entertaining Endeavors**