Fable✨Friend: Your own AI story🔮

I honestly did not even know that I could write devlogs on a shipped project so that why this devlog is so distant from the others, but to make up for that mistake this one is more comprehensive. I did lots of vital but subtle changes:

1. Before my website would literally not function because the Hugging Face Spaces would give me a 429 error because the crystal ball animation was checking every tenth of a second if it was triggered yet. When I designed the timer as a workaround from Gradio’s harsh animation limits, I did not see this coming, but I have deleted the timer entirely.
2. The crystal ball used to block everything on mobile, so the app would become messy for laptop users and unusable for phone users. There was no heavy code edits but just me going on different devices and trying it out.
3. Turns out while I was on another device it was on light mode, none of the text was fully readable, so everyone on light mode couldn’t use it. I just used a neutral color so both light and dark text work on it (after some research and testing Rebecca Purple) because I did not want to create a whole new palette for light and dark.
4. I have made a reference sheet with hints and story assets to help the ai out. Even though this is not fully implemented, I have slowly starting exposing it to it, and plan to upgrade the sheet
5. Other model switching and small testing and bug fixing to enhance the experience and try different things
   I know each of those should have been their own devlog but I had no idea I could add a devlog on a shipped project.

I made some final touches like allowing the user to pick their own image style. I also have a fallback from the image model to another image model - just in case my credits for the first one expire. The final logic and the UI have been implemented and everything is working as expected. I am very happy with how the overall project has turned out.

It’s amazing how much the UI has progressed and how much challenges it’s overcome - just as complex as the backend with Langgraph. I got Loading… over and over again but it turns out that it was just js issues again. I am experimenting with the crystal ball to see how it can be changed. I think I am going to work on the logic and take a UI break.

I made lots of UI updates on the crystal ball screen and the chat screen. I am using workarounds like making the ball’s index 999 in CSS adding a fake component that is just transparent for padding and putting what I want to say in Markdown instead of gr.Textbox. So that and more tricks was how I worked with gradio. Unfortunately some of my biggest errors like the blurred title and no return button are returning so the UI is not perfect. I am also going to try to add roles.

I am just making the UI look better now. I am getting more crystal ball themed ui because thats what the app’s icon is. I have completely resigned chat. In logic changes, I have muted image generation and the initial intro because they are unnecessary when I am just changing UI. When deploying this to the website, I faced some import errors and dependencies but my editing requirements, secrets, and code accordingly I could fix them.

I am having this huge dead space error there is just lots of empty space under the chat. I have literally tried everything to fix this, CSS, explicit heights but nothing is working. So, I am going to delete all of the chat screen’s UI and restart from square one. Hopefully this will work and laer I can get the image in also, but right now this error is very frustrating.

I added image generation to Fable Friend! Now there is also an image of whatever is happening in your story. I used FLUX.1-schnell because it fitted my speed and quality constraints. The way the image is generated is also through intermediary llm prompts. My only concern is that the free hugging face inference only supports 0.1 dollars of inference a month so once I hit that, image generation will stop working. I will also update the UI better for the image.

I finally finished the main storyline logic. It took LOTS of prompting upgrades - I needed to refine the prompt again and again and again. The information I used to refine the prompt has three categories: basic (genre and player name), game mechanics (world and lore, specific things), and invisible controllers (progress, is_key_event). These controllers really elevated the prompts. I have so many big prompts there is a file called file_of_prompts that just has prompts in it. I am very happy with how the logic turned out. I am trying to add image generation even though that is pretty hard.

I made sure that the new variables like the raw action and the progress work good. I entirely removed the hp factor because all that was doing was messing up gameplay. This mostly included just changing prompts and how the llms interact with them. Next I am adding features like a rewind to improve ux.

I updated the prompts for all llms so that it is a lot more accurate. I also added lots of new things to state like a world and progress checker. And there is a continue button that just expands on the story because I felt that the story was going too fast, the structural changes I made last really helped me do these changes properly. These are mechanics that really make the story seem alive. I still need to remove or comment out some old harded values and debug statements though. So that’s the type of cleaning I am going to do next.

After lots of trying, the genres work and the general storytelling is also improved. I did this by asking the llm to generate the prompt for the prompt to generate the story. This extra step doubled the intro quality. Also it turns out the crystal ball’s animation was somehow causing the button (which triggers it) to lose track of genre so it kept returning None. So now that the crystal ball has its own separate trigger with the button that issue has been resolved. I also adjusted the creativity - temperature - down a little because gptoss was going too crazy.

I continued working on the genre error. And I have made lots of progress on it. I also made some small tweaks like setting the llms’ creativity to the maximum and changing the dropdown menu. It seems these changes have payed off because the output is much better. Particularly, this one cyberpunk chat was very good.

I am still trying to figure out why the themes won’t work. I just realized that I told it it was a fantasy storyteller in all of my prompts so it keeps default to fantasy. I know I need a better way to keep track of genre than just prompts so I am going to put it in state, a permanent location that all the llms can always access. I am going to consider other changes once I finish fixing this genre error.

I am just doing more frontend work. The crystal ball finally works. I am just going to continue working on the website UI. The title is always blurred and that is very annoying. I need to fix the title page but at least the crystal ball is fixed. I didn’t really change the backend flow, I just edited UI.

I got the website to look a lot better and I got new genres. One of these genres was cyberpunk which I have attached. Additionally, I made some functions because gradio requires that to help connect the website to the chat. One of this was having a new generation when the story starts. I am still trying to get the crystal ball 🔮onto the website but its a lottie animation so its harder. gpt oss continues to give results without giving me any rate limits, so that’s way better than openrouter. I am going to continue to try to make the website better and add small features like that.

I am trying to improve the gradio frontend by bringing the crystal ball 🔮 back. Additionally the switch to gpt has actually benefited me a lot because it’s a lot faster than the old olmo model. I finally fixed the list issue also. It turns out that instead of slicing lists to get lists over and over again using [][][] I should have just went in with a for loop and gotten whatever message I wanted.
I am going to continue making small improvements like these.

I switched the model to use gpt120b and I added another model. I have gotten back to just changing the logic. But I am having a huge type problem. I don’t know whether the what happened in the story is a message, list of messages, or some combination. I have gotten lots of out of index and attribute errors. It’s very tricky because there’s lists of messages of lists and I need to figure out how to work with them.

I finally got Fable Friend out of the terminal and into a web interface! Now there is a clean chatbot-like web UI for interacting with it. Now I can get back to modifying the original logic flow and continuing improving it. My biggest focus next is making sure it does not dwell on the initial situation too much and move on. Gradio was actually exactly what I was looking for.

I decided that html and Flask just wouldn’t work so I have switched to gradio now. At this point, I am just trying to get ANY frontend so I can get back to building more logic for Fable Friend. I might switch to another framework. Now I am just experimenting until I find something that works. In the picture I interact with a local model using a simple gradio chat interface. The question I asked smollm was “What are elephants?”.

I made lots of frontend advancements and I starting using Flask so I am building a simple REST web API because I have a separate frontend and backend. I am using a crystal ball 🔮 just like it my project title in my title page in the website. The color palette is yellow with purple. I am relearning Flask and GET and POST methods also. All of this is to make sure that Fable Friend is presentable (right now it just runs in the terminal).

I updated Fable Friend to NOT forget everything that happens. Now there is a clean loop between you and Fable Friend, and its ability to see what’s happening in the story and remember and generate storylies has greatly improved. The only problem is that it focuses on the initial situation too much instead of just moving on. I also investigated frontend options such as Github pages and digital ocean backend hosting, and starting working on it, but nothing is confirmed yet.

I am trying to make the AI not forgot everything so I need to create a list of what happened before and what it said. But that is a list of the previous messages, and its hard to then tell it exactly what to remember and what not. I am also getting can’t append a list to str errors, so my biggest problem is memory. So I need to fix its memory. Hopefully it recovers, but I do have an excerpt of a storyline generated - you can tell that it can’t remember what happened first.

Fable Friend is actually interacting like a dungeon master. I updated Fable Friend to behave more like a real storyteller and I gave it a memory, so it does not forget its entire conversation immediately. I have a state - which is just a container that the AI sees. And I have the situation that the user is in on that state, I also tested the memory which summarizes previous interactions. Next, I need to link everything together better and ensure a better prompt.

I started configured the base AI model and experimented with memory. I am going to be using Openroutuer for the llm. The biggest problem that I faced here was getting the api key to load because I tried to manually edit environment variable but my os.getenv would just return None. I tried doing the same thing in powershell tried the ‘echo’ command and more to debug but it just would not load. After closing vs code multiple times, and leaving it it turns out it was not updating and when the update screen showed up it was fixed. With memory I just made a checkpoint that would automatically summarize the last text and giving it to the llm so it has memory. Next is telling it that it is a storyteller.