Ad Rotter

Ad Rotter in action!

This submission is for the joke category!

Inspiration

We've all seen Gen Alpha brainrot on the internet. Sure, some of us may roll our eyes in disgust at the absurdity of it all (trust me, I am right by your side), but at its core, it is still something that makes us laugh, one way or another. Any of us that have siblings, children, nieces, or nephews know how their eyes glitter when they see brainrot. Ultimately, my goal was to build a project that makes people smile, and I believe that I have accomplished that objective!

What it does

Ad Rotter is the solution to two issues in one: the online advertisement crisis and the attention span crisis. Online ads are intrusive and make surfing the web an undesirable experience. Sure, regular ad blockers exist, but they just remove the ads on the page, leaving you with, quite literally, negative space. Would it be more prudent to use that space for something positive?

Furthermore, online ads are a most predatory practice against the internet's youngest users: Generation Alpha. We've all heard stories of young kids using their parents credit cards and unknowingly spending money on the most ridiculous of purchases. These young kids also have another issue on the internet: a limited attention span! How do we keep Generation Alpha focused on what matters most?

The solution? Replace ads with Subway Surfers gameplay! But it doesn't stop there. Ad Rotter is proud to be a forerunner in artificially intelligent, context-aware brainrot. It uses OpenAI to analyze the content of the webpage and add appropriate brainrot words over the gameplay footage to make sure that the focus on the meaning on the webpage is never lost. Finally, Ad Rotter also hosts a global counter to demonstrate how many ads you have "cooked;" this encourages users to continue using the product and keeping clear from predatory ads!

Webpage owners benefit from increased user retention. Parents benefit from not having their kids click on predatory ads. And kids benefit from a positive experience on the web that brings a smile to their faces. It's a win-win-win!

How I built it

Ad Rotter is built using the Chrome Extension framework. It is built using vanilla JavaScript, HTML, and CSS. Throughout the development process, great care was taken to ensure the app remains as lightweight as possible.

Challenges I ran into

The initial goal for Ad Rotter was much more ambitious. The aim was to have Ad Rotter use artificial intelligence to understand the product of the original advertisement, perform a bucket classification, and replace the ad with a relevant meme. For example, an ad about computers may be replaced with a meme about how expensive computers are these days. Thus, users who are interested in purchasing the product could still interact with the ad (and in fact are more likely to do so due to the humorous nature of a meme!). However, an LLM analysis of the advertisement's source code proved to be insufficient due to significant obfuscation as well as the usage of images rather than plain text. Screen capture and computer vision were deemed too unnecessary for this project, so I chose to replace this feature with an "ad cooking" counter to gamify the experience and further center it on the target generation.

Accomplishments that I'm proud of

I am really proud of the look of the final product. Ad Rotter implements various CSS tricks that make it quite appealing to the target audience. The brainrot words on top of the gameplay footage emulate the style of TikTok videos. Playful jitter animation keeps the eyes engaged on the content. Shiny rainbow gradients draw the user's attention to the counter of ads that have been "cooked," encouraging them to keep using the product and gain a higher score!

What I learned

Of the many things I learned during this hackathon, the discovery of OpenRouter as an LLM interface was truly the most remarkable. I did not expect that OpenRouter would integrate with Chrome extensions, since the vanilla framework does not support arbitrary imports. I was genuinely surprised and pleased to discover that OpenRouter has an interface that can be can called entirely through HTTP API. This enabled me to add artificial intelligence to my software without unnecessarily bloating it, enabling Ad Rotter to be a pioneer in context-aware brainrot. For these reasons, Ad Rotter is grateful for and indebted to Major League Hacking for providing OpenRouter credits. Thank you so much for your support!

What's next for Ad Rotter

Why stop at ads? Generation Alpha is the next consumer population of the world wide web, yet their tastes are remarkably different from current users of the internet. Proper product design is inherently linked with the needs of the target audience, but designing software that attends to the needs of the generation alpha would not be compatible with the needs of other generations. Why don't we implement client-side tools to modify internet content to the desires of a particular generation? Think about it: a Gen Alpha web browser! A Gen Alpha operating system! A Gen Alpha code editor!

This is the beginning of the client-side generation-centered revolution, and Ad Rotter is proud to pave the way forward!