OAK

Search engine that puts sustainability in your hands.

Comment

Inspiration

AI is here and now. From small to large companies, everyone is trying to leverage AI to fit into their existing solutions. What everyone isn't aware about, is the fact that AI uses up large amounts of computing power and has a large carbon footprint cost. To raise awareness, we introduce "OAK". A search engine and browser extension aimed at tracking your internet usage with elements of a marketplace and partnerships with tree-planting organizations to incentivize users to offset their carbon footprint and get rewards for doing so.

What does our solution do?

At a technical level

Under the hood, we currently leverage an openly available search engine called "Brave Search" that functionally works the same as any other search engine. At this level, we track how many queries the users make and reward them tokens based off of it in the event the user decides to use our search engine.

The other half of this is that we leverage browser extension technology like Google Chrome Extensions that enable us to observe the chats you're having with things like ChatGPT which have an untraditional method of getting data using server-sent events. We initially opted to create a server-sent client that would connect directly with your ChatGPT account, but an easier solution was found where we just simply observe the amount of input and output tokens being generated and calculate the carbon footprint from there, however, the data for that was unavailable and decided to track the number of prompts. The extension also monitors your usage outside of ChatGPT when you aren't using our search engine.

Using these two methods, we reward tokens based on the users usage from a formula that we determined based on the following:

  • How much carbon footprint per user
  • The cost to offset their footprint
  • How much cost would it incur = amount of tokens to distribute, token volume, pricing of items

How does it lead to a positive outcome

By tracking the usage of both your general search queries with our search engine and extension, we created a marketplace for people to trade their tokens for eco-friendly discounts offered by our sponsors or partnerships that incentivize users to continually use our platform. Additionally, because we're tracking the carbon footprint of the user it allows us to display it to them and offer them solutions to offset it further enhancing impact.

How we built it

Our team developed OAK using a modern tech stack and a modular architecture consisting of three main components: a frontend web application, a Chrome extension, and a backend server. Here's how we built each component and integrated them together:

Frontend Web Application

We built the frontend using Vue.js with TypeScript, leveraging Vite as our build tool for fast development and optimized production builds. The frontend implements:

  1. A search interface that integrates with the Brave Search API
  2. A user dashboard showing carbon footprint metrics
  3. A marketplace for eco-friendly rewards
  4. Token management system

We used Tailwind CSS for styling to ensure a modern, responsive design that works across all devices. The frontend communicates with our backend through RESTful APIs and manages user authentication state.

Chrome Extension

The extension was developed using:

  • TypeScript for type-safe code
  • Webpack for bundling
  • Chrome Extension Manifest V3

Key features of the extension include:

  1. ChatGPT usage tracking through DOM observation
  2. Token calculation based on user activity
  3. Background script for continuous monitoring
  4. Popup interface for quick access to stats

The extension was built with careful consideration of performance and privacy, ensuring minimal impact on browser performance while accurately tracking usage patterns.

Backend Infrastructure

Our backend server was implemented using:

  • Node.js with Express
  • MongoDB for data persistence
  • JWT for authentication
  • Docker for containerization

The backend handles:

  1. User authentication and session management
  2. Token distribution and management
  3. Carbon footprint calculations
  4. Integration with tree-planting organization APIs
  5. Marketplace management

Integration and Testing

We followed a systematic approach to testing and validation:

  1. User Flow Testing: We conducted end-to-end testing of key user journeys:

    • Search and token earning
    • ChatGPT usage tracking
    • Marketplace transactions
    • Carbon footprint calculation accuracy

  2. Performance Testing:

    • Extension CPU and memory usage monitoring
    • API response time measurements
    • Search result loading speeds

Tools Used

  • Version Control: Git with GitHub for collaboration
  • Development Environment: VS Code with ESLint and Prettier
  • API Testing: Postman + K6
  • Deployment: Docker containers

Validation Results

Our testing validated that:

  1. The extension accurately tracks ChatGPT usage with minimal performance impact (<1% CPU overhead)
  2. Search functionality matches Brave Search results with 100% accuracy
  3. Token distribution system correctly calculates and awards based on usage
  4. Carbon footprint calculations align with industry standards
  5. The marketplace system handles transactions reliably

Challenges we faced

One challenge was syncing the data between our extension, which tracked usage, and the landing page, which was meant to communicate the user's usage and render the marketplace. We needed the user's number of prompts, pageviews, carbon footprint, and tokens from the extension.

Normally, we would have a database that the extension would sync too. However, due to time and complexity constraints, we had to improvise. The first step was to store everything in chrome's localstorage, meaning it was always accessible from the extension. No matter what domain we were on (this is not the case for IndexedDB for example). The next step was to bypass the landing page directly, and use content scripts from the extension to inject React components into the DOM. This was revolutionary, as it allowed us to keep all the user's context in the extension's domain while still providing a seamless and integrated user experience. This also made the landing page much simpler by default, since it can act as a normal search landing page if the user doesn't have the extension installed.

Naturally, there are a lot of drawbacks to this simplified approach. Storing everything in localstorage makes it really easy for users to manipulate their data to boost their tokens, for example. It also means that a user's data could disappear if they delete their cache.

In the future, we continue to inject React components into the landing page's DOM, but also maintain a PSQL server copy for token validation and backup.

Accomplishments/Learning

  • Leveraged injecting information from a Chrome Extension into the web application (our search engine)
  • Leveraged K6 testing to do stress testing and get estimates for computational power and memory to compute the cost of scalability

What's next for OAK

Short Term

  • Leveraging K6 testing and more end-to-end testing that allows us to get better estimates of what kind of scalability the product will need and how much it'll cost in dollars.

Long-Term

  • Leveraging cheaper search systems designed for enterprise software as the current search engine can be expensive for smaller companies

Built With

Share this project:

Updates