Mainly just patches and README

UI Upgrade & README

UI Upgrade

The theme has had a complete makeover and I have replaced all of the Chainlit defaults with Rawv. Now the AI chat avatar and favicon is custom, it’s a smiling microscope. Like the icons I’ve made for past projects, I used emoji kitchen and combined smile and microscope. And now the theme is new. There’s a baby blue and silver theme. When I first got it the chat text that you would type blended in with the chat box color - also white - so I needed to change that manually to prevent the clash.

Home Screen

Before, because of research settings, the thread would start early for no reason, and so what would end up happening is that once the app loads, the chat window would pop-up in one second. But now it’s been stabilized to not send signals immediately, and there are options in the page itself. There is a start button and a button to enable and disable research mode. And of course I have the microscope mascot to bring character to the page.

README

Has all the tech stack, research flow, used models, ai transparency, and future upgrades. For reference, the core brain model is llama 8b, and the TTS model is en-US-AriaNeural and the STT model is whisper-large-v3-turbo. And the main python libraries in the tech stack are Langchain for wiring those models up and the main logic - backend, and then Chainlit for frontend designed for chatbots like Rawv. And of course the README talks about transcribe -> search -> browse -> synthesize -> quality check -> speak
I should be ready to ship soon

One of the largest times I’ve taken in 1 devlog, so I’m gonna use markdown

Big Jump - Research!

I made many changes to the core loop. The research has switched to DuckDuckGo mainly and the stuff that I had before in running chrome has finally made its way over to the main app. I already finished all of the heavy lifting in the other directory so this was just plugging it in. chainlit has prebuilt tools so I could easily display ‘researching now’ - just like audio.

Research Specifics

The summary is what is spoken

1. Concise answer
   A quick paragraph answer to the research question.
2. Bullet Points
   Main takeaways and what was found in research - usually 7
3. Contradictions/Gaps
   Important part of research to know what is still not confirmed yet
4. Summary
   what is spoken and for the ‘tl;dr’ people
5. Sources
   must always stay transparent and can go back to source to check
   The steps taken like tools, browse, and synthesize are displayed

Other tries

I have other projects linked like ‘frosty-study’ and other seemingly unrelated projects. But that is not the case. They main ideas in rawv come from them. I built a language audio app named frosty and this helped me master the back and forth audio loop. and the other projects were tries for a model provider. I tried Github models by using a github PAT token and then sending requests to their endpoint with my token. But it was too slow and the rate limits were too low and it was too complex to set up. So I just stuck with groq. But if groq fails I have github models

UI & UX

Very great. From the chain of thought to the little icons But I need to mostly think chainlits pre-built parts for this. Because I did not go and hunt for this myself, and the icons and spaces were already there. And for each research step I used emojis like I always like to do like🔬🌐for a polished feel.
I needed this for the extra work I did and I’m proud of this devlog

The issue with lockers was due to 2 things:
1 - the button counted 2 clicks so it spun up 2 animations leading to wrong results
2 - speed was slow even when at max

1. Now after the button is clicked, until the animation is over, the button is completed disabled.
   So no more clicks can accidently start it again. Now it becomes greyed, unclickable, and just says ‘🚫 Simulation Running…’ until the animation finishes and it opens up again.
2. Before speed was at 0.1 / speed leading to a weak slider that barely enforced speed. Now speed is at speed * speed so the slider is very powerful and speed has greatly increased.
   And now when it speed goes up near max (40 and above), animations are skipped entirely and the students just teleport so the entire simulation ends in a few seconds.
   Just a few quick patches to fix little bugs in lockers

This is most likely my last devlog before shipping.
Just got done with the final setup and ship requirements:

1. README - I have it fully done with a list of all the topics and modules for each. After that I have some more pictures of DataArrays.java and a detailed description for each topic and how it works in Java. Then I have how I made it: what tools/IDEs I used, where I got the art, etc. The hardest pic to get was the one at the front - the same one I used for the banner - I could not get the title page and the page with the projects on the same screenshot, so I had two different pics of the project. So, to make one comprehensive one I went on Canva, and on a new design cropped and formatted tem into one pic. I also needed to go to the README official docs because I was violating some rules by not putting <> around links or using - + interchangeably for bullet points but I read their docs and figured it out.
2. Art - before index.html had spaces for each module, but those cards were still barren. They needed thumbnail pictures or emojis for thumbnails to be complete. I used emoji strings to represent many modules. For example: 🔒👣²🔓 is 100 Lockers and 🔢✂️⬇️🔗📊 is Merge Sort. For the various different teacup emotions in Hangman - Emoji Kitchen - each different emotion of the teacup I combined the teacup with that specific face. I also made a spiral juggler and file printer. One of the most fun parts in the project I had - getting creative with the emojis.
3. Final Code & UI Polishes - Needed to adjust the old placeholders in my index.html. Got in some final java files that I forgot. I tested out every single module so it’s right. I tested it out on my phone to make sure that it works across devices. I ran through the html, making slight fixes in positioning of elements & text. I just got the entire project finally ready - one final check on all my code.
   I’m really happy with how this turned out because I really gave it my best.

I added Data Collection/Sorting.

1. In Java, this is where the most algorithmic code was involved. I coded binary search (already in the recursion module), and the 3 sorts: selection sort, sort insertion sort, and merge sort. Then I actually coded a custom Stopwatch class and recorded the time it took each to go through an array with 10,000 unsorted random numbers. I found that selection took around 830ms, insertion took around 1870ms, and merge took only around 35ms. And that told me something about each sorting method - for fully random data like the data that I used selection sort is faster, but because of the more efficient way that insertion sort operates if the data was half-sorted, then insertion sort would have gone faster so when comparing those 2, it depends on the randomness of the data. But merge sort is always way way faster due to its ‘divide and conquer’ strategy.
2. I made 3 pages for data collections. One for each sort. I tried to get the same format for each sort: explanation, code, demo, pros&cons/outro. Each sort had its own animation that you can see:

• Selection picking up elements to compare then switching then moving on and repeating with the new min going l to r then coming back to where it left off
• Insertion looking at elements then switching then pushing that element down from r to l until its at it’s right spot then moving up to where it left off and continuing
• Merge dividing everything up into paris and comparing each in the pair, then 4s and comparing and sorting, then 8s and so on until the entire array has been built up again and has been sorted.
  I used teal and coral and black to represent specific parts so you could exactly see what each did.
  ++ I think that this is the last major topic and I need to get working on repo setup

I greatly improved index.html.
The landing page has had a complete makeover.

1. made this the 2nd ‘module lab’ (the first was my last project) and this uses a large variety of fonter - mono, inter, and more - the footer and header all have different fonts to get index.html the character and pop of personality it was missing
2. color strategy kept with teal as primary highlight and coral as secondary highlight. Additionally, in every single text I injected little differences in color or font to make the website appear more detailed and purposeful.
3. In the hero, I have a picture of a teacup coding. This brings some needed action to a bare place. I also built this one on emoji kitchen. And its area has its own background too to stand out too.
4. I categorized into 5 categories I’ve done.

• Arrays
• Text I/O
• Recursion
• ArrayLists
• Data Manipulation
  ++ What’s left is just some final wiring and scripts to do, and setup like readme and github

I added Hangman - one of the main array games.

1. Java code: the way hangman works is that there are 2 arrays of strings. One with s in the place of not guessed words so it looks like ’’, ‘’, ’’, ‘’, ’’, ‘’, ’’, ‘’, ’’ initially and then whenever anything is guessed - lets say there was an e at index 1 ‘’, ‘e’, ’’, ‘’, ’’, ‘’, ’’, ‘’, ’’, is what it becomes. The other array is the word itself like ‘r’, ‘e’, ‘v’, ‘o’, ‘l’, ‘u’, ‘t’, ‘i’, ‘o’, ‘n’. When determining if guesses are in the word or already guessed or not in the word, its just a matter of boolean variables and updating the array and checking with .equals(). Usually I try to use while loops with if blocks to get repeated games, but this time I used a do while loop as seen here
   ‘do {play_hangman(get_word());} while (!input.nextLine().equals(“n”));’
   I am really proud of myself for figuring out this new syntax and getting it to work. It just says ‘do play hangman, then do play hangman while the user does not say no’.
2. The hangman page. Here I used a cup to act as the hangman (java logo is a cup). So I had the same cup character, but 6 different forms of that cup character - from the first happy to the last one dead. I made this cute cartoon cup character in emoji kitchen by combining whatever face for expression I wanted with the cup emoji. This produced some really good final results. I left out big chunks of text except a couple tiny lines because this activity was meant to be more of a game and less of an educative lesson. The pole and noose are animated over the cup. I spent a VERY LONG TIME manually adjusting the % and px values of the coordinates to make them match to try to get it as perfect as possible. I would edit a little value then have to crtl+s then go back to the page and lose purposefully, then make another microscopic edit then repeat. But the result was a very polished visual scene.

I added Recursion. It’s one of my favorite topics in Java.
It’s just whenever a method calls itself with different parameters.

1. I learnt about recursion and then coded some examples in Java.
   My biggest challenge in recursion was understanding which way the call stack went - I understood modified parameters but where the code was going was hard to track. Before I used to think that it went bottom up but I was wrong. It actually goes top down from the most recent call LIFO - last in first out. So chronologically 1 -> 3 -> 5 would print as “531” if those values were printed.
   I remade previous java projects using recursion.

• Finding Palindromes - GCD
• Consecutive Sum - Square Sum
• Numbers to Binary - Binary Search
• Experimenting with other euclidean algorithms
  Each project had its own challenges - I needed to handle String while checking Palindromes, and in binary conversion recursion the difference between n / 2 and n % 2 was important. And GCD has many different ways to implement so I tried different approaches and compared with old tries.

1. Making the actual page for it. It has a real natural call stack to visualize recursion in action.
   I needed to make some html title edits again. The page starts of with a quick definition and intro to recursion. then there is an interactive call stack activity for consecutive and square sums where you can literally watch recursion as it’s happening. Then there are java code snippets for recursion, with base cases and method calls annotated. Then there is a binary search visualizer, where you can see the call stack alive, thought process, and the way it is actually halving and eliminating numbers from the long list in the sorted array. This time I just have html and no css.

The text I/O activity is done. This was entirely different syntax from just arrays and arraylist because of using Scanner entirely different and PrintWriter - a new aspects of Java.

1. Problems while Java Coding - handling the IOException when the specified file already exists using 2 methods: the method itself throwing the error and then a try{} catch{} block. I used both to make sure and test that oth work. Something that was very repetitive was right-clicking the Eclipse panel and then clicking ‘Refresh’ for my new file to show up.

• The main java exercise I made for this was data about cereal being stored in files with a custom Cereal class and then putting real cereal data in a file then reading it and combining previous knowledge of arraylists and custom class creation to store it
• PrintWriter is used to create new files and Scanner is used to read with ‘Scanner scan = new Scanner(new File(path))’ - unlike normal Scanner for getting user input with ‘Scanner input = new Scanner(System.in);’

1. Making the page - the biggest issue here was that during the conversion the model got the main title from a main function name and then storing it a variable at the top - to try to dynamically change it but all the other simulations just have it hard coded so for this its just simpler to hardcode it in HTML. But, the problem was that I whenever I changed the dynamic name, the rest of the js stopped funcitioning. So I kept the dynamic const variable, but I instead of getting a real value from document, I just made it ‘placeholder’ and then put real stuff next to the dynamic call in the HTML - this workaround kept the dummy dynamic structure but the allowed hard coded title.
   ++ the rest of the page was just standard stuff like definitions, methods, common mistakes, simulations with loading, writing, and reading files, and of course java code snippets. It’s meant to be interactive and educative. This page particularly has many panels for the activity/game.

I added ArrayLists and Grades. I needed to really understand how arraylists work and how to fix issues like the ‘shifting problem’.

1. Grades minigame has been completed. The biggest issue in grades was getting the difficulty levels to show up. I can generate how many random numbers I want and find anything like mean or mode but getting them into categories is tricky. So, I just determined what category the test would be and then made random numbers for that. Additionality, the probabilities of a difficulties appearing are weighted - average and hard have around 40% chance of showing up but impossible and very easy only have a 10% chance.
2. Handling ArrayList logic was confusing because of the SHIFTING PROBLEM. Whenever an element is removed the index goes left so the current index accidently becomes one right or one greater so the next index is skipped. if index 2 is removed then the next element becomes index 2 but now current index is 3 so the new element at index 2 is skipped. For each loops won’t work because they just gave me a ‘ConcurrentModificationException’ for modifying it mid-loop.

• solution 1: go backwards so index just shifts left and you go left
• solution 2: decrement every time it is removed so you don’t go right too fast
  ++ I made the visuals for the ArrayLists website in a very creative way. For the picture I actually 1. went to word, 2. colored the tiles ‘Bad’ to make them red, 3. put in random values, 4. took a pic of the column, 5. took another pic of that pic with a little blank black space on the side, 6. with the pen made little annotations of arraylist methods on the blank space. The end result was a good png I am very happy with. I considered an animation but then this high quality drawing was better.
  ++ interactive and clean UI of course - maintaining color theme and emojis

I got lots of simulations on the frontend and ready. How I did this for each app was slightly different though:

1. Lockers - full description is that there are hundred students and hundred lockers from 1 to 100 each student toggles the locker that is a multiple of their number (ex: student 3 toggles 3, 6, 9, 12 and so on) and each of these students come and two for loops traverse the array and change it from True and False to dynamically represent them - this time the animation of getting the coral dots to run across the screen was hard so I needed to adjust the slider weights and px positioning but after some testing it worked
2. Grades - grades are randomly generated and put in an array then, they are sorted by each students grade and are compared then put using if and else statements
3. Merge - compare and then put into new array strangely tried user input as comma separated values
4. Math - buttons for Standard Deviation, Min, Max, Mean, Mode, Median and a ‘Grand Summary’
5. Shift Shuffle - shuffle the array L or R or Random - displayed by shifting table in html

• some have CSS and some are multiple java files sharing one app but all have HTML and JS
  ++ Hangman is a big game that still must happen
  ++ Data simulations still waiting and I am brainstorming how to show different data sorting clearly

I finished all of the Java games and simulations on arrays (1D) specifically.
Java Games/simulations laid out:

1. Hangman - temp array [] is loaded with word.length - continuously compared - if match updated
2. Lockers - All lockers are open and then students of intervals n + 1 close each locker updating boolean (makes more sense when you play the game because there explanation is detailed)
3. Distinct numbers are counted via a for each loop count is incremented and numbers are stored
4. Grades of students can be a A, a B, a C and so on and then loop goes through array to see
5. Standard Devotion, Mean, Average, Mode are calculated with formulas by looking at elements
6. Shift & Shuffle - all elements move Left or Right and all the elements can be shuffled randomly
7. Merge => BOTH values in index are compared simultaneously then whichever is > is handled
   Problems I had to fix:

• I needed to decide whether to make the method headers ‘void’ and directly manipulate the array or to make then return the result array
• Lockers was very frustrating to get the logic right because every student coming next has a different order of lockers they are going to use so n number of locker touches was Outer Loop above Inner loop and it was difficult knowing where to put the change
• Hangman required 3 booleans to see if game is going or its right or the current state of the man

• I completed Hangman and made some array simulations in Java and overcame array element logic

I added the final touches and finally got it onto Github.

1. Committing it on repo

• Tried Dev Editor but copy pasting did not work and I thought that I could escape that by making a zip then opening that inside the dev editor but that also did not work
• Moved irrelevent stuff inside other
• No longer using the .jars they are just there just in case I give cheerpj a hundredth chance

1. Organizing files

• Weird naming issues and errors with relative imports and how many ’.’s and ’/’s to use. I just tried many combinations of ‘../../’ and ‘..’ or just ‘.’ for imports and references until it worked but that was a serious problem because I would have to go alll the way back to EACH file that went and used it before and change it
• Tic Tac Toe was missing a button to go back home so you were just stuck at the board but I fixed that
• Converter messed up many times like on random array there were just strange blank white box divs and I don’t know what it was trying to do but I needed to go in and clean what it got wrong so that was annoying

1. Art Design

• Lots of emojis
• I can hit command v on my laptop and quickly paste them in and for the icons for the tic tac toe difficulties, I used emoji kitchen to make those images
• For the card thumbnails on index.html it was 2 emojis a card
• I used lots of symbols for matrices but honestly I should have spent more time on code and less time on this

1. Other

• I went in and went inside each card/app and went out but it turns out I forgot to renovate latin square so I had to go back for it
• I am sure the website is working fine now

Have to make the index.html and links work out right. I finished converting everything but still need to polish it and make the inks work out. I keep having a problem where the main files are inside subdirectories so I dont know how to get the index.html which is all the way in the root, but I will figure that out on github pages. Right now I also got a home page but need to fully populate it with all of the apps. I also have a ‘simple java 2d array’ where its just a simple page that says what they are. Surprisingly the random array was the hardest to convert because values kept swithing to “NaN” for some reason and everything was in its own line, but I decided just reran the converter and worked with what I got. The way the apps work is that each one is like a card and I just copy paste the format over and over. I still haven’t faced the github specific problems that might happen so I really need to do a commit.

I just continued making more files like sum& mirroring multiplying rows columns diagonals and more. The converter did really bad for the random array so I am running it through again. One time I accidently deleted the core instructions when I meant to just delete the special instructions I gave it so I lost some time just fixing that and recalibrating it. Usually styles say similar because I use the same exact model and I use the same exact prompt that says ’add these js snippets on the back: {…}”. The neon green div is the closest you can get to java console on the browser. It updates it with the same stuff I coded in Java. right now I still need to get this on Github so I will do that.

Every time after the java is converted, I need to fix it up and put it in places (and adjust the converter for each convert). I combined my java files for summing matrices and mirroring them into one file. Also each time that I put a new file onto my converter I always add some app-specific lines like ‘this has 2 matrices and the user needs to have a table’ or there is this problem or something like that to help the AI model in the converter. The JDK sometimes gives me problems because I just refactor my java code a lot and don’t specifically manage my packages, but I just use that for testing anyways. I like how each file is consistent and simple with the html design and it remains true to the original java.

I spent a lot of time just trying to fix this annoying ValueError. Once I figured out what it was I realized how simple the fix was. In python variables are passed in strings with {} but js and java also use {} so the doc string had lots of curly brackets. And the converter thought that the js’s {}s were variables. I thought it was my format or my model issue but it wasn’t. I also organized the converter outputs and actually tested the HTML live with Live Server. I needed to manually move all of the code that was created and create a .html .js and .java file in each subfolder and wire them together (.java was just for testing) but everything worked out in the end.

I have found a workaround for cheerpj and that is converting java to js. I am going to programmatically use an ai model to covert the java into js then make a specific html file for that js. This is NOT asking chatgpt to just generate a js games. All of the ideas and logic I hand coded myself (10 hours) and I am programmatically using a specific model with specific prompts and logic in a converter mechanism I coded myself. It’s basically java => converter model => js then js => converter model => html. Then organizing what it gives me. First I got some Value Errors because I did not know the properties of the prompt template but then I figured out that you input the prompt as a python dict {“key”: “value”} instead of an f string so it worked out.

I tried to get java on the browser directly - jars and cheepj repeatedly without any success. the jar format is just the way cheerpj, a framework for java directly on the browser, needs to work.
I tried:

1. Compiling the jar in java 8 instead of 21 to see if cheerpj needs older versions
2. Putting each class into its separate folder and compiling, but nothing changed
3. jar command but it says that jar can’t be recognized
   The chrome browser console keeps telling me ‘error at line 1920’ where str output blocks are turned into the browser that I learned when I looked at the cheerpj code but that makes me think that Scanner is making problems so I am going to try workarounds to cheerpj. Also before it gave me a 404 but I double checked spelling and location and it was good.

I didn’t initially plan on submitting this project for flavortown, so thats why I have gone so long without writing a devlog, but to compensate for that, this devlog is extra long.

1. Full list of files that I have made:

• Summing Diagonals
• Multiplying Matrices (2D Arrays)
• Finding the Largest Row & Column
• Latin Square
• Mirroring Matrix
• 2D Arrays
• Random 2D Arrays
• Sum of 2D Arrays
• Tic Tac Toe
  Problems fixed:
• in tic tac toe game needs to stop once its a draw/win but those just accept the board as a parameter and the board is initially blank in the main method, so I think that it was always using an unupdated board, but the fix for this was to have a new method that returns true if the game continues and false if the its a draw/win
• Mirrored Matrix and generally its hard to get columns columns needs to be equal to rows but columns is nested inside each row so you would either iterate too much or too little the solution was using how columns=rows to treat both similarly and use a for each loop or just one for loop
• every time you needed to print one 2d array, you need 2 for loops and 2 new loop controls - fix just to create a method that does it
• multiply matrix formula is super hard so the only way I could get it was just trial and error but at the end it was ‘product[i][j] += mat2[p][j] * mat1[i][p];’
• using a place variable outside and a break; instead of multiple for loops even though it was slightly more hard to understand when the break would trigger as to the easier 3 or more for loops
• indenting matrix so you could see structure better was helpful

1. Future
   Have to find some way to get the Java on a website

I actually got working on the research part. I recovered the files from the Running Chrome and got the Chrome navigation working again. I cleansed the full project into a couple files that are the main project. I used to use Firecrawl for search but my free credits ran out so I had to switch to DuckDuckGo which was free. Most of the core pieces were connected with uid capture and js structuring and safe parsing and structure.

Add just added slight improvements - no big changes. I updated the theme and the way Chainlit works so it replaces most of its default Chainlit assets. I also added a custom avatar. This required changing the place where Chainlit looks and adding a new place for it to look by updating config.toml and adding a theme.json. Other than that I changed the llm and was experimenting with different models.

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 got the UI working with the voice. I am using Chainlit for the frontend. Last project I used Gradio and then it imposed its strict style restrictions, so I think the switch to Chainlit is a good choice. The biggest problem that I faced here was getting speech info from frontend and back. It starting returning mime types and bytes and just incompatible formats because the frontend and backend dealt with audio differently. The fix was converting it again and again and guessing formats if nothing else works, but that process worked.

Just continuing startup and basics. I finally organized the Web Project so now only Version 3 is actually usable, and I have renamed some things. It was an old project I coded a year ago with vital code for web research, but now that I have organized it I will only touch it once I need the web stuff again. I have just started with the text to speech and speech to text, the text to speech is easy but speech to text is a little bit more troublesome. I am going to connect them.

I just started the project and am trying to layout the starting base code. I have scratch work in an other unimportant vs code project called ‘Project’ because I wanted to avoid what I did last time which was having lots of files with -testing at the end that were just junk and confusing. The other project is for controlling chrome, but the problem with it is that it is disorganized so I need to get the chrome source code and understand that project. Right now I just need to get these messy folders working

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.