new project…new stuff…i like

The idea

soo strava…garmin…whoop….apple…coros…all those things have paid plans in order to analyze training/health data…but i am neither willing to pay…or have the money to pay for such subscriptions…but i have ai.hackclub.com a lot of time…and willpower…meaning my goal is to recreate such service…for free :)

ill see how that will work out with tokens later lol

the first beautiful progress

so like most of my other web projects it will look like a tui or better said bc i always to the same structure and stuff i can make a basic pre version pretty fast!

hackclub ai first steps

so the api is really easy to use, i wrote a starting prompt…using my dearest friend chat (never ever used for coding) and sent it as role system to the ai…and everything else can just be directly taken from user input!!

todos

but now the biggest part…user/login/db handeling
and integrations of the different apps (strava, garmin etc.) and save that data in a db and leave the ai with a context (db) and use also non ai features like somple graphes from the data saved in the db…
so i guess the next step is login…and database lol

fourthhhhhhhhh

videos? whatttt (not really tho)
sooo after getting images to render so smoothly i got real confident rendering videos…and made it as far as rendering every frame of the video….well…thats progress…but i have not yet made a way to playback it cleanly….and i dont want to do it now lol, ill leave it as it is and inmplement some way to scroll trough the site…bc rn it tries to render EVERYTHING and that breaks it….so in future there will be smth called visual content…and thats the only part getting rendered…and when pressing up or down…it goes up or down!

as for explaining the video part…ill do that when i finalize it :)

the 1. image shows 3 frames of this video

thirdddd oneee, we movingg fastt asf

we managed coloredddd images and simple integration of the whole concept (not cleanly working bc sizing is very not nicely done lol sorry)

nevertheless

i wanted to take time on explaining HOW i am rendering images and how and why its working!

How???!

pt 1. get the img

pretty self explaining…..
we load it with http get and then decode it with the golang image thing….ezzzz

pt 2. sizing

if we look a little into the future….i wanna integrate css…meaning sizes of the diffrent elements…and because of that…ill just say if width and height is given itll js be sized that way, BUT if either one is 0 this value gets calucated with the other and the ratio of the actual image to keep it sized correctly!

pt 3. the coloring and asciification of the image

finally smth interesting lol
this is the part in the scnd image

this part will be a little long but ill try to keep it short..

the first thing we need is some characters to represent different brightness levels:
const chars = “ .:=+*#%@”
the idea here is pretty simple: characters near the beginning are visually “lighter”, while characters near the end are more filling ig and therefore look darker.
yayy
then we basically iterate trough the entire image…but not in actual pixel size…but in calculated one how we need it…bc of we will have the image in lower resolution….
and then we just yoink that part and take its rgb valuessss
but here is the next problem…for the brightness we cannot just use the raw rgb things…we need to convert them to grayscale…because a maxed out green looks brighter than a maxed out blue! (prettyyy simple) now the not so simple part…for the converion i use a so called weighed avg…the same opencv uses….i did not understand a single thing written in those docs tho BUTTT i found a fancy blog post on rgb to grayscale convertion…soooo i just yoinked the formula!
so far so good…now just pic a corresponding char to the brightness print that…and you got yourself a niceeee image…but colors tho? now its grayscale
WAITT we already have the rgb colors?! so just use some random ass ansii codes (ive copied from stackoverflow) to tell each char to have the fitting rgb of the image…how simple is that
after we js tell the terminal to be normal again and we got ourselves a nice and clean ascii generator!

love it

final words for today

thx to anyone actually reading this <3 was really fun to build it and it takes me a huge step to my goal of a working browser in your terminal. i cannot promise that every devlog will be so detailed…and ofc this all did not happen in just these 52 min…most of it already happend last devlog…i just did not want to explain it back then lol

second of manyyy

another 3h…soooo one big future problem ill face will be image or video rendering…soo lets just face it rn…that way I can procrastinate implementing css lol
myy current way of wanting to solve that is generating ascii art….soo i am doing that now…only for images currently…but no videos yet, and there is no real coloring yet!
but was really fun to implement this until here and I lovee this project! and the second pic is the responsible for loop for converting pixel to ascii/grayscale

first final version?

i added a small orphie in the blank spaceee and the controlls just like in any tui! Another addon is the functionality of the links and working controls!
yup…thats it! (sorry for undetailed storytelling)

first of many (i hope)

its been about 3h…i think its time for a quick devlog
we got working:

• Tab system (like everytime you enter a url a new tab gets opened)
• html fetching (we take the html via a pretty go libary and recieve so called html nodes…which are getting converted into a object (im sorry if they are not called objects in go)
• and each and every of these loaded elements then later gets interpreted

for the future:

• i want more html tags supported…
• i want css? (or basic css)
• i want (no) javascript
• i want to refine the tab system
• i want to (later later) make my old search engine as homepage?

First mog version of the site…

at the end it should not work like the app…just advertise it…(its my first ai less project in ages so…need to get back at it)
later on one should be able to navigate like in the actual tui

part 3

little ashamed…nothing really changed here
my goal was to add more than 10 results when searching (its like that bc lite duckduckgo only gives 10 results on the first page) and ive tried so many diffrent ways to

NVM

i totally forgot…one can open pages now!!!
pretty awesome i know. js press tab, and its open!!!

good bye (for now)

part 2

i basically made the engine algorithm (or yoinked it)
not how planned with google, but with duckduck go
it works by just kinda scraping or taking the content from https://lite.duckduckgo.com/lite/ and then searching each result for title, url an snippet which is then returned and used in the main.go Update() function :=

the beningingof a lot of pain

uhmm never worked with go before…copying 90% out of random docs and tutorials…currently succeeding in the goal not using ai for coding…
i basically use those great libarys called lipgloss and bubble tea to make the ui…and the rest is just basic go for now….

yayyy scnd logg

css

@Lumethra forced me

its basically a grid…

The body is the main grid container, and each element gets assigned to a specific area:

• the canvas takes the top row
• the slider, color picker, and toggle go in the middle row
• the palette sits in the bottom row

hope your happy now (scnd image is the answer)
good evening

the one and only?

idk if i am calling this project finished already…but its kinda done…js looks ugly

it started as like a canvas experiment ts, i basically wanted a pixelart playground or whatever…and then i asked myself…why not let it generate a galaxy like shapeee…
and how i did it was drawing a simple grid, generating an even simpler spiral and every point that was in a gridcell decides that this cell is getting colored…easy right?
yup…

color palette

for the coloring, had a little fun there bc i found a SUPERRR interesing video (https://www.youtube.com/watch?v=gnUYoQ1pwes)
and i wanted to kinda let the palette generate from one base color…so i made like hex to hsl conversion with the given color so i could adjust the hue and created several colors from that base hue:
background: a dark, muted versiondust: a darker, desaturated tonenebula: a medium, vivid tonecore: a brighter, lighter highlightstars: a very light near-white toneglow: a brighter accent color, which is not random, but a nice always fiting palette…

the actual coloring

so i used a simple (copied) noise script to decide where which color needs to go, and then for each weight (or height) of each pixel of the noise it chose one of the set colors….

funsies

for funsies one can look at the noise…bc why not

final words

this project ig is more about play, having fun with overcomplicated ways of doing shit and less about polishing a great ui…

have a nice day <3

well after getting only slack notification…i asked myself…why not show also system notifications (only windows bc I dont even know if orpheus works on other os)
yeaaa tried like 2 diffrent approches….settled on using the windows lib creating a nother tauri command…anddd its sad this complete thing took me almost 4h just to see orpheus holding a letter…like not even stacking letters…just holding them…
and the scnd image is just the complete (hopefully final code for getting the image (got a little help by my friend deepseek for it in the end…i hate windows))

New Project

with friends

Airpods BUT HUGGEEE

Like AirPods Studio….and working

1. The Situation

we started out with a random single big AirPod we found in our Arts Classroom, the teacher said we could take it…so we did

At home I had some old sony speakers…a raspberry pi, my 3d printer…and to much time…

soooo i forced my friends Maxi (@Lumethra) and David (@Chroma) to come over for a lock in night…we call them archnights (called like that bc we install arch on random laptops) BUT THIS TIME….we are building this speaker…

2. The First Hours

Started to open up the old Speakers so we could use the actual speaker thingi, first only of the one bc then we would not need to have an amp or any powersupply except for the raspberry pi…figured out later that the 3.5mm jack from the pi was to weak to power the speaker enough…so we broke open the second one later too.

at first we also wanted to use a pi zero 2w…which would not have worked bc it has no DAC…meaning I needed to sacrifice a Pi 4b of mine for the aux port…The first actual success came when isntalling librespot and we heard the first music on that device…but not exactly what we wanted from the firmware…the goal was to connnect the “speaker” via bluetooth OR spotify Connect

3. The Middle Hours

then @Chroma started designing a case for the speakers to fit perfectly inside our AirPod (during that time meme and @Lumethra installed arch on a random laptop) the design was (i quote) pretty straight forward. What wasnt was me trying to make a firmware after…i jumped around from reading existing repos or better said trying to understand existing repos…to vibecoding random shell scripts…and mixing all that together to a kind of working script that makes it possible to connect to the pi via bluetooth or Spotify at startup…not being able to change it unless rebooting the pi…right now i am kind of happy with the result…mainly because I managed to implement a startup sound when the bluetooth is discoverable.

while i was coding this all together…the 3d printer started printing the case…only for us to realize at 5 am that the filament broke, meaning it needs to print all over again…plus we cannot finish the project tonight (very sadge)

4. The Final Hours

cannot talk about them, did not happen yet

good night
love you <3

Exportinggggg

so, thanks to chat, i now know how to make a working export command….and it only took like 2h to code myself…we are now able to export the print blocks to acctual python files…that can be runned on the users device (not ingame)
andd ig the pic just shows the most important line…where it gets saved lol

SOOOOO

we got a block
and that block has an interface
next up

• make an export command/block idc
• make it run?
• more python stuff
• eventually some hackatime :)

ouch….sooooooooooooooo

Tried like 3 different approaches to make the notification onclick work on windows…first the web notification api with onclick handler, then tauri’s notification plugin with
registerActionTypes, then even tried using the windows crate directly with WinRT ToastNotification.Activated events…none of it worked, turns out windows just doesnt fire any in-process
event when you click a toast unless your app is properly registered in the start menu with a COM AUMID which is a whole thing

ended up going with a system tray icon instead which is honestly the better solution anyway…left click opens the config modal, right click gives a menu with Open Config and Quit…no
buttons or text on screen, orpheus just sits there being cute which is exactly what i wanted

also cleaned up a bunch of dead code from all the failed attempts, removed the old permission flow, the test notification button, startup notification spam…its much cleaner now

next up…idk man…smth fun, like ui, or homepage…no more backand for now

(and sorry for calling orpheus he/him a few times, always forgetting it haha)