Locked in - AI

Alright, I locked in and I am officially done with this project!!

• Added the activity board
• Added the Favicon
• Changed the time local time instead of UTC
• Fixed up security flaws and data privacy
• Polished up the app
• Fixed up a lot of minor bugs and visual flaws, spacing and otherwise.

Almost Done now!

I implemented time tracking. So now every successful completed session will store the session duration time onto firestore. Sorted into daily, weekly and all-time.

Then I read these values to be used on my leaderboard! Come compete with me!!

Added in a block list and allow list onto my extension.

Certain sites won’t be picked by my llm and some sites will be blocked when the user doesnt want them to because it may not be obvious how it is linked to the users goal.

So this is a good fallback option.

After lots of tinkering I have finally synced my tasks from website onto my extension. The UI is very clean if I say so myself.

• Added a custom time option on the extension
• Choosing a task fills in the inputs automatically
• Fixed a lot of bugs
• Improved the spacing and hover effects in the UI

Okay lots of progress. Getting close to finishing now!

Completed:

• Added firebase to my website and created a sign in button
• Synced all todos to firestore
• Improved the UI of my extension
• Add timer inputs for my todos.
• Created a toggle to complete todos.

Okay I was not able to post dev logs for a long time due to glitch with hackatime but I got a few things done in the mean time:

• Created a to do list page on my landing page so that users can log in on and create todos.
• Added a pomodoro timer to the extension so thats tasks finish after a while.
• Fix up a lot bugs and refactored so that my extension gets approved on the chrome web store.
• Implemented caching so that any same site doesnt ping my extension many times. Saves a lot of tokens.

I have submitted my extension for review on the chrome extensions store. Hopefully it wont take weeks for it to get approved.

I am now working on creating the website. I have registered my subdomain at lockedin.eliascorp.org and have successfully deployed my scaffold.

I also did a bunch of testing and figured out how to optimise my AI prompt the best way. I added a thinking key in the json so know it must reason before it come up with a verdict. The AI is more likely to get it right if it reasons before it comes up with the verdict instead of stating the verdict first and then trying to justify it. Now it doesnt block sites that are somewhat related to my goals which is a lot less annoying for the users. For example if i said i was working on a coding project before it would block flavortown but now it reasons and understands that flavortown might be related.

However this does take a lot more tokens. I will have to implement caching soon.

omg this took me forever but I finally implemented a usage limit. I spent 5 hours trying to debug why my backend would not deploy only to realise that there was worldwide firebase extensions outage. I hate google.

Anyway after that I spent another couple hours trying to implement usage limit so I dont get bankrupted. That was pretty easy but when I tried to implement a notification to notify users I spent a lot of time debugging my code only to realise that windows was supressing the notification. I should use console.log more.

anyway its working now.

WE ARE UP AND RUNNING! The extension is working perfectly! A little too good. Sometimes its too strict. But for the most part its fair and even can tell the difference between youtube videos that are relevant or distracting.

The only problems is that it does take a while. I dont know how I can speed this up. Might just be forever slow like that. At least it works

Next I need to add a allow list and block list for sites that the AI cant block and start building my site.

Okay I’ve finished coding up the user authentication and session management. Now the app should only work if you sign in.
However this uses chrome local storage so I don’t know how secure this is.
Also:

• Updated the popups theme to match my blocked page. The image below will become the popup.
• Stopped using Tailwind. I dont understand the point of it. It just makes life harder.
• Got AI to renamed the variables so I stop confusing myself. so many states 🥴

Made a lot of progress in the front end. I created a html page that will act as the overlay whenever a site is blocked. Really happy with the design. Definitely my best html page I’ve ever built.
Also:

• Completed the POST request function to the backend.
• Created the background worker which runs every time a new tab is created.

Implemented authentication on the front end. I’ve configured Firebase to create the digital ID card for my website so it can sign users up with google and then routes them to my project in Firebase where I will take their name and email and add them to my user database.

Next I need to complete the JS to send the current website to my backend.

Alright, I set up verification so that no-one can spam my backend and waste a bunch of LLM API calls. It works well. The Unauthorised is what I want to see! That means the verification is working. Now I just need to have the front end to start generating valid tokens so that it can gain access to my backend.

I was very tempted to switch over to the proprietary Firebase functions that would handle authorisation and accounts. I did start to switch over to that but I realised I am not learning how any of it works so I decided to stick with coding it all out manually with just basic http requests using .fetch.

This also makes it easier to switch to a different cloud provider later down the line if I need to.

Backend AI functionality is complete. I implemented the API route for my AI to analyse URL. Using Vertex AI so no API keys needed in the repo which is neat.

The AI will take the URL and return a JSON file which then I can extract the boolean value for whether or not I need to block the site.

I wrote a test function which sends a https post request to index.ts with a google search looking up football results as the example.

Finding the right syntax for the new Unified Google Gen AI SDK was a pain but I am happy with the results. What I have now is very future proof and scaleable.

Okay I realise this devlog tracks a lot of time but I am really stubborn when facing a problem and won’t post a devlog until I fix it. This time it took me a while.

So I changed my plan and decided I am going to build a full stack app using Firebase and Vertex AI. It will be a lot of work but at least by the end of it I will have learnt a lot about hosting and deploying full on applications.

The issue I was stuck on was a compatibility issue where Firebase would not talk to the web request router (Hono) that I was using due to some recent update. So I just built my own adaptor. Took a lot of trial and error but now my requests to the cloud server are successfully reaching the local backend (my pc) and being routed and processed.

Okay did my research, planning and setup. Decided on the architecture I am going to use:

• Framework: Vite (React + TypeScript)
• Styling: Tailwind CSS

Refamiliarised myself with react