Inspiration
We were inspired by the pervasive influence of language in shaping opinions and the increasing polarization of online discourse. Just as grammar checkers have transformed how we write and communicate, we envisioned a tool that empowers readers to identify and neutralize subtle biases in digital content—promoting a more balanced and objective public conversation.
What it does
Biasly is a Chrome extension that analyzes online articles for biased language. It leverages the ChatGPT API to:
- Detect Bias: Analyze the article’s content to pinpoint phrases and sentences that may carry political or ideological bias.
- Highlight & Explain: Visually highlight biased segments directly within the article and provide users with explanations as to why the language is biased.
- Suggest Alternatives: Offer neutral, balanced rephrasing for each highlighted phrase.
- Interactive Correction: Allow users to click on highlights for a one-to-one correction or replace all biased language with a single click via a floating control panel.
How we built it
We built Biasly using modern web technologies:
- Frontend: The extension's UI is crafted with HTML, CSS, and vanilla JavaScript, ensuring a seamless, user-friendly experience integrated into the Chrome browser.
- Backend: The core bias detection is powered by the ChatGPT API. The extension extracts the main content from webpages, sends a portion of it to the API for analysis, and then parses the returned data to isolate biased excerpts and their corresponding neutral revisions.
- DOM Manipulation: Advanced DOM traversal techniques enable real-time highlighting and interactivity, allowing users to view and apply suggested corrections directly within the article.
Challenges we ran into
- API Response Variability: Parsing and handling the dynamic responses from the ChatGPT API was challenging. We had to implement robust fallback mechanisms to ensure our extension handled unexpected formats gracefully.
- DOM Structure Diversity: Webpages vary widely in their structure, which made it difficult to reliably extract the main content and apply our interactive highlights without disrupting the page layout.
- Fine-Tuning Prompts: Crafting prompts that consistently elicited detailed and accurate bias analysis required significant experimentation and iteration.
Accomplishments that we're proud of
- Seamless User Experience: We successfully integrated AI-powered bias detection into real-time content highlighting, providing users with an interactive way to understand and neutralize biased language.
- Intuitive Interface: The floating control panel and clickable highlights create an engaging and accessible user interface that simplifies complex language analysis.
- Innovation in AI Application: Leveraging ChatGPT to address bias in digital content demonstrates a novel application of AI, contributing to more balanced and critical media consumption.
What we learned
- API Integration: Working with the ChatGPT API taught us the importance of handling variability in AI-generated responses and the need for robust error handling.
- DOM & Browser Extension Development: The project deepened our understanding of DOM manipulation and the challenges of building extensions that work seamlessly across diverse web environments.
What's next for Biasly
Looking forward, we envision expanding Biasly in several exciting directions:
- Article Rating & Recommendations: Adding an option for users to rate articles based on perceived bias and quality, along with suggesting better, more balanced articles to encourage informed reading choices.
- Customizable Sensitivity: Introducing settings that let users adjust the sensitivity of bias detection based on their preferences.
- Multilingual Support: Extending the tool to support multiple languages, making unbiased content accessible to a global audience.
Built With
- api
- css
- dom
- html
- javascript
- manipulation
Log in or sign up for Devpost to join the conversation.