Debate Bot

AI that debates both sides so you can decide.

Comment

Inspiration

In today's polarized information landscape, people rarely venture outside their echo chambers to explore opposing perspectives. We created Debate Bot to address this growing problem by presenting balanced arguments from multiple viewpoints on any topic.

Our inspiration came from witnessing how social media algorithms and personalized content delivery have reinforced confirmation bias, making it increasingly difficult for people to engage with ideas that challenge their existing beliefs. We wanted to build a tool that makes it easy and engaging to explore different sides of complex issues, helping users develop critical thinking skills and form more nuanced opinions.

What it does

Debate Bot is an interactive web application that:

  1. Generates Balanced Arguments: Users enter any topic, and the app retrieves high-quality arguments both for and against the topic using the Perplexity API, complete with cited sources.

  2. Detects Source Bias: Analyzes the political leaning of sources using a bias detector that visualizes whether sources are left-leaning, right-leaning, or neutral on a spectrum.

  3. Creates On-Demand Rebuttals: Allows users to select any argument and generate thoughtful rebuttals from the opposing viewpoint, encouraging deeper critical analysis.

  4. Tracks Opinion Shifts: Users can vote on which side they found more convincing, with the system tracking whether people change their minds after considering both perspectives.

  5. Enables Sharing via Debate Cards: Generates shareable debate summary cards with voting statistics that can be easily shared via URL.

How we built it

Frontend:

  • React.js: For building a responsive component-based UI
  • Custom CSS: For a clean, intuitive interface with visual indicators for bias and voting
  • Axios: For API communication with our backend
  • GitHub Pages: For frontend hosting

Backend:

  • Node.js with Express: For building a RESTful API
  • Perplexity API Integration: For generating arguments, rebuttals, and analyzing source bias
  • Caching System: To improve performance by storing previously requested topics
  • Render.com: For backend hosting

Key Implementation Details:

  • Parallel API Requests: We make simultaneous API calls for "for" and "against" arguments to reduce loading time
  • Progressive Loading: We show partial results as they become available to improve user experience
  • JSON Parsing Logic: Built robust parsing to handle various response formats from the API
  • URL Parameter Support: Enabling debate sharing through URL parameters

Challenges we ran into

  1. JSON Parsing Complexity: Perplexity API responses weren't always in perfect JSON format. We implemented multiple fallback parsing strategies to handle varied response structures.

  2. Cross-Origin Challenges: Setting up proper CORS handling between our GitHub Pages frontend and Render.com backend required careful configuration.

  3. Bias Detection Accuracy: Creating a reliable and balanced bias detection system was challenging, requiring careful prompt engineering and result interpretation.

  4. Performance Optimization: Initial API response times were slow, so we implemented caching, parallel requests, and optimized the user experience with staged loading indicators.

  5. Single-Vote Implementation: Ensuring users could only vote once while maintaining their voting history required thoughtful state management.

  6. Share URL Functionality: Making shareable debates that properly load from URL parameters required handling SPA routing in GitHub Pages.

Accomplishments that we're proud of

  1. Robust Error Handling: Our application gracefully handles almost any API response format without breaking the user experience.

  2. Bias Detection Visualization: Our bias meter provides users with an intuitive representation of source credibility and political leaning.

  3. Effective Rebuttals: The rebuttal system intelligently counters specific arguments rather than generating generic opposing views.

  4. Opinion Change Tracking: Successfully implemented a system that tracks when users change their minds after seeing both sides of a debate.

  5. Engaging UI/UX: Created a clean, accessible interface that makes exploring complex topics approachable and engaging.

  6. Responsive Design: The application works seamlessly across desktop and mobile devices.

What we learned

  1. Prompt Engineering: The importance of carefully crafting prompts for LLMs to get consistently structured outputs.

  2. JSON Parsing Resilience: Building systems that can handle inconsistent API responses is crucial for reliability.

  3. Bias Detection Nuances: Political bias exists on a spectrum and is highly contextual, making automated detection both challenging and valuable.

  4. Progressive Loading UX: Users perceive faster loading times when shown incremental progress instead of a static loading indicator.

  5. Sharing State via URLs: Techniques for encoding application state in URLs to enable sharing specific content views.

  6. GitHub Pages Deployment: Navigating the constraints and capabilities of static hosting for SPAs.

What's next for Debate Bot

  1. User Accounts & History: Allow users to create accounts and track their debate history and opinion changes over time.

  2. Topic Clustering: Group related debate topics to show how positions on one issue might correlate with others.

  3. Interactive Debate Mode: Enable a turn-based debate format where users can challenge the AI on specific points.

  4. Educational Features: Create a classroom version with guided critical thinking exercises and instructor controls.

  5. Mobile App: Develop a native mobile application to make balanced perspectives more accessible on the go.

  6. Multi-perspective Debates: Expand beyond binary perspectives to present multiple viewpoints on complex issues.

  7. Community Features: Allow users to contribute their own arguments and sources to enrich the debate ecosystem.

Built With

Share this project:

Updates