We will be undergoing planned maintenance on January 16th, 2026 at 1:00pm UTC. Please make sure to save your work.

Clariff

Sometimes all it takes is a change in perspective to help you understand better, faster.

Comment

Inspiration

Clariff is inspired by the growing demand for efficient content summarization and language translation. With an increasing amount of web content being produced globally, users need tools that can help them digest information quickly and in their language of choice. The goal was to combine text summarization with real-time language detection and translation for a seamless user experience.

What it does

Clariff provides the following functionalities:

  • Text Summarization: Users can select text on any webpage, and Clariff will generate a concise summary.
  • Language Detection & Translation: Clariff automatically detects the language of the selected text and translates it to the user’s preferred language, if supported.
  • Customizable Rephrasing: Users can rephrase the summarized text based on tone (e.g., formal, casual) or length (e.g., shorter, longer).
  • Quick Interaction: The extension provides a summarization button that appears when text is selected and shows the results in an interactive, easy-to-read card.

How we built it

Clariff is built using a combination of:

  • JavaScript (for interacting with the DOM, managing user interactions, and accessing Chrome APIs)
  • Chrome Extensions API (for accessing the user’s preferences, storing data in Chrome’s storage, and creating interactive content)
  • AI-based services (for summarizing text, detecting language, and rephrasing content)
  • HTML/CSS (for creating and styling the user interface)
  • Vite + ReactJS (for the extension popup and ease of bundling components)

Challenges we ran into

  • Understanding Extension Development:

    • Struggled with grasping how Chrome extension development works, especially integrating background scripts, content scripts, and managing storage.
    • The Chrome extension development process had limited documentation and resources, making it challenging to troubleshoot issues quickly.

  • Limited Features in the AI API:

    • The AI API did not support multiple languages as expected, limiting the translation capabilities for non-English content.
    • Some API methods did not work reliably, causing inconsistencies in features such as summarization, translation, and rephrasing.
    • Limited functionality around streaming data and handling real-time interactions with the user interface.

Accomplishments that we’re proud of

  • Real-time Summarization: We’ve successfully integrated real-time summarization and language translation with minimal latency, providing users with immediate value.
  • Seamless UI/UX: The extension’s UI is clean, responsive, and integrates directly into the webpage without obstructing the content.
  • Customizable Rephrasing Options: We were able to give users control over the tone and length of the summarized text, enhancing user personalization.

What we learned

  • Extension Development: We’ve learned how to effectively develop a working extension in chrome.
  • Text Handling and Summarization with AI: Gained experience in integrating AI services to summarize text and detect languages dynamically.
  • Advanced Asynchronous and Promise Usage: We have understand how asynchronous functions and promises can work as a streaming object.

What’s next for Clariff

  • Additional Language Support: Expanding the list of supported languages for both summarization and translation to accommodate a larger user base.
  • Voice Integration: Adding voice commands would enable clariff to do local summarization of video and audio files on page.
  • Image Recognition: If the chrome extension ever support this, Clariff can help people understand complex imagery even better

Built With

Share this project:

Updates