The problem:
For the Magic Poi project, the online website and api for the IOT devices to connect to (Poi) is all done with Flask. Flask handles the web front and back-end using Jinja, a templating library. In Flask you have templates with placeholder variables like {% image1 %} which will put “image1” into the web page for example, where you need it.
In traditional JavaScript we would have separate .js .css and .html files – and the JavaScript can be separated into pieces – with each part handling a particular section. For example in Magic Poi we have Images, Timelines, Parties, Friends and more. Using Jinja, we can do all of the heavy lifting (and syncing with poi) in Python on the server, and the placeholders make the html simple to tie in to the rest of the code (we just use the same names and logic) but that comes with a limitation: we cannot have a separate .js and .css file if we want to use these placeholders, it’s an unfortunate limitation of Jinja templating.
So that left me with the main “profile” page ending up with thousands of lines of html, css, and js after adding all the features up until now (and we are not nearly done).
Time to re-factor
Re-factoring is the process of moving code around to make it either easier to read or easier to extend and update – or in this case, both. Having more focused sections would make it easier for me to follow the code, but how would having a bunch of smaller files make it easier to extend? Well it turns out that Aider, my preferred AI assistant until recently, has a problem. In order to edit files it needs to send them through to the LLM (in my case, mostly DeepSeek). It sends the whole file – and profile page was up to 30 000 tokens (token, syllable or part of a word). DeepSeek has a maximum of 65 000 tokens, including the response, so I would often run out of tokens just trying to ask about some change I wanted made in the functionality.
Luckily I found a solution, but it wasn’t easy!
First of all, since the Aider tool cannot edit for me and I really don’t have the time to look at thousands of lines of code (multiple JS Classes, with tens of functions each) I turned to another tool – gemini. Gemini is not as capable as DeepSeek, however the official cli tool is free, and most importantly it has a context limit of 1 million tokens. Since the re-factoring was a basic operation I used gemini to do it – after many hours it was done with a web page that didn’t quite work. Like most of AI coding it was just close enough though…
I guess it might help to describe what I was trying to do. Simply put, I needed to instead of having one “profile.html”, have multiple .html files. So the back-end renders profile.html and it has sections like this:
<div id="tab-content-wrapper">
{% include 'profile_timelines_section.html' %}
{% include 'profile_my_images_section.html' %}
{% include 'profile_shared_images_section.html' %}
{% include 'profile_friends_section.html' %}
{% include 'profile_parties_section.html' %}
{% include 'profile_my_poi_section.html' %}
</div>We also have .html files included with associated JavaScript (and css). That way, the timelines section consists of 3 files for example (it’s a little bit more complicated like I have some shared parts also but mainly 3 sections for each functional piece). The main thing is that these are a lot shorter than the original profile.html.
Aider wasn’t cutting it
I had recently been looking at the “Community Edition” of Aider. This differentiates itself with the ability to incorporate “MCP” servers (add-ons) which for example can search the web, control the browser for testing, check code documentation and more. A new option in the Aider-CE is the “Navigator” mode which uses search and replace within files instead of the default “send the whole file” functionality.
I used aider-ce to fix up the issues introduced by gemini. Mostly missing or duplicate code. Easy to fix if you just compare the original with the new version.
Conclusion
The website, https://magicpoi.com has the new re-factored code up and running – and after a week of working on re-factoring it now looks and acts exactly the same as before.
I learned that Aider has some serious limitations, but that is being looked at by the community of programmers who use it (and tested by people like me).
And I learned about a new pattern for my Flask/Jinja templates, which really works.
Going forward
I am now using aider-ce instead of main aider branch.
But – I found another open source coding assistant which seems to be built from the ground up with the limitations of LLM’s like DeepSeek in mind. OpenCode. This project has many bells and whistles like MCP extensibility, a kind of “Architect” mode (similar to Aider but it keeps a list of “todo’s” and executes them in order) and more.
Stay tuned for more about that!