This is a submission for the Cloudflare AI Challenge.
What I Built
(Honestly, I don't know how this isn't the priority when we talk about AIs, I mean, the storytelling potential is infinite...)
Being a kid from the '80s, I loved the series of "Choose Your Own Adventure" books - even in Brazil, they had some niche fans and translated editions. And text games from the past were also cool. Obviously, videogames and group RPGs took their place, but it is still something nice to waste time have fun.
I had this idea when AI started blooming, but most of the services had a prohibitive cost for a "fun only" project. The CloudFlare Challenge and the free tier gave me the chance to remove this code from my "brain cabinet labeled STUPID IDEAS" and put it into action. And for that, I'm truly grateful.
And how does it work? Select the type of adventure you want, then enter the name of your character and his class. The AI will start creating a story and give you three different actions so you can proceed. Then he will create a new part of the adventure based on your choice.
Oh! Fans of Easter Eggs: there's a nice one when you start playing 🥷🏽
Demo
You can test and play it here
My Code
Choose Your Own AIdventure
A retro-style "Choose Your Own Adventure" RPG powered by Cloudflare Workers AI.
Features
- AI-Powered Dungeon Master: Dynamically generated stories based on your choices.
- AI Image Generation: Visualizes the scene based on the story progress.
- Retro Aesthetic: NES-style UI using `nes.css`.
- Cloudflare Native: Optimized for Cloudflare Pages and Workers AI.
Recent Milestones
- Pacing Engine: Implemented a tight 10-turn story arc. The AI now plans for a beginning, middle, climax, and a definitive ending based on your performance.
- High-Stakes Gameplay: Added "Hidden Trap" logic starting from Turn 4. Some choices now lead to major setbacks or immediate Game Overs, making decision-making more meaningful.
- Scenario Engine: Unified game logic by moving individual scenarios into `lib/scenarios.ts` using a standardized prompt template.
- Cinematic Visuals: Upgraded scene generation to 16:9 widescreen (1024x576) using SDXL Lightning with increased sampling steps and negative prompting for sharper…
Journey
By the sweet JC in the sky, what a ride! First I got confused by how Workers, well, "worked", and I tried to scramble everything into a single file. When I finally noticed that Workers can act as an API and I can host the layout in CloudFlare pages, everything was a breeze - mostly. NextJS building in CloudFlare is a nuisance, but nothing that some questions to my beloved LLM couldn't solve.
I love how CloudFlare lets me create different endpoints with a single Worker. It's the best practice? Probably not, but for starters and proof of concepts it's wonderful.
There is a lot that I want to do with the idea behind the "Choose your own AIdventure", but I had less time this week to finish the project. The layout is bad, and I would love to make the system prompt better. Maybe after the challenge CloudFlare can sponsor the idea 👀
Multiple Models and/or Triple Task Types
Models Used:
llama-2-7b-chat-fp16 - for interaction with the user while playing
dreamshaper-8-lcm - each interaction brings an image so the user can "feel" the story.
Top comments (0)