ShopSavvy Nano

ShopSavvy Nano is an innovative browser extension designed to revolutionize the online shopping experience on Amazon.

Comment

ShopSavvy Nano

Inspiration

With the increasing reliance on online shopping, finding the best products that fit your budget and preferences can be overwhelming. Inspired by the desire to make online shopping more personalized, private, and efficient, we created ShopSavvy Nano. Unlike platform-dependent assistants like Amazon's Rufus, ShopSavvy Nano is built to provide unbiased, privacy-focused recommendations directly within your browser.

What it does

ShopSavvy Nano is a Chrome extension that acts as your personal shopping assistant. Here's what it can do:

  • Budget Management: Set and adjust your shopping budget for tailored recommendations.
  • Personalized Insights: Generate product recommendations based on your preferences, cart history, and financial constraints.
  • Privacy-First AI: Uses Google’s Gemini Nano for on-device AI processing, ensuring your data remains private and secure.
  • Real-Time Analysis: Refresh your shopping cart data to get complementary product suggestions or insights into your current cart.
  • Guided Experience: Offers a conversational interface to refine your preferences and deliver accurate recommendations.

How we built it

  • Front-End: Built with HTML, CSS, and JavaScript to create an intuitive and responsive user interface.
  • Back-End: Utilized Chrome’s runtime API for data storage and communication between the content script, popup interface, and background script.
  • AI Integration: Powered by Google’s Gemini Nano on-device AI model, ensuring privacy-focused recommendations.
  • Dynamic Content Handling: Designed to fetch and process user cart data from Amazon pages in real time.

Challenges we ran into

  1. Session Management: Ensuring seamless integration with Google’s Gemini Nano API and dynamically handling session creation and persistence to avoid disruptions during user interactions. We spent a significant amount of time debugging and testing ensuring a single Nano instance per session.

  2. Frontend and Backend Communication: One of the most significant challenges was ensuring that the frontend popup.js could reliably capture API responses generated in the backend. Early implementations failed due to asynchronous message passing issues between the frontend and backend scripts, leading to missed or delayed API responses.

    • Solution: We resolved this by designing and implementing an API Queue. This queue ensured that all requests were processed sequentially, with retries and proper response callbacks. The API Queue not only improved reliability but also streamlined communication between the frontend and backend.

  3. Cross-Platform Scalability: Designing the system to adapt easily for potential expansion to other e-commerce sites beyond Amazon by abstracting the custom provider-specific logic from the generic page parsing logic.

Accomplishments that we're proud of

  • Successfully integrating Google's Gemini Nano on-device AI for privacy-focused functionality.
  • Creating an easy a user experience with an interactive and conversational chatbot interface.
  • Building a comparison framework that highlights ShopSavvy Nano's strengths against competitors like Amazon's Rufus.

What we learned

  • AI-Driven Privacy: The power of on-device AI models like Gemini Nano to enhance user privacy.
  • User-Centric Design: The importance of building a guided, conversational interface to improve user engagement and satisfaction.
  • Dynamic Data Handling: Techniques for fetching and processing dynamic content from web pages in real time.
  • Cross-Platform Potential: The value of creating a platform-agnostic system to ensure scalability and adaptability.

What's next for ShopSavvy Nano

  1. Cross-Platform Compatibility: Expand support for other e-commerce platforms beyond Amazon.
  2. Enhanced Insights: Incorporate more advanced recommendation logic, such as seasonal trends and user behavior analytics.
  3. User Experience Improvements: Add voice interaction capabilities and further refine the chatbot interface.
  4. Community Engagement: Open-source the project to allow developers to contribute and expand its capabilities.
  5. Advanced AI Features: Leverage future updates to Google’s Gemini Nano for even more personalized and efficient recommendations.

Conclusion

ShopSavvy Nano is the ultimate shopping companion for privacy-conscious, budget-savvy users. Join us in revolutionizing the online shopping experience!

Share this project:

Updates