DebateGuard

Landing Page
Dashboard
Pre meeting screen
Meeting UI
Meeting UI from different perspective
Debate Transcript & AI Analysis
Debate History

Inspiration

In the age of misinformation and bad-faith debates, many individuals struggle to recognize what a respectful and constructive debate looks like. This misunderstanding often results in the dismissal of meaningful discourse, limiting critical thinking and learning opportunities. DebateGuard offers an intuitive platform for users to engage in moderated debates, promoting clear communication and informed argumentation.

What it does

DebateGuard provides users with a one-on-one video debate platform enhanced by real-time AI moderation. During each debate session, participants receive live transcription and immediate AI-driven analysis, highlighting logical fallacies and encouraging more constructive interactions. Post-debate, participants can review detailed analytics including speaking times, fallacies identified, and comprehensive summaries of their arguments.

How we built it

We built DebateGuard using a robust full-stack architecture centered around Next.js, React, and Node.js to provide real-time functionality and a seamless user experience. For the frontend, we utilized Next.js and Tailwind CSS, creating a sleek, modern, and responsive user interface, enhanced by animations from Framer Motion. React facilitated dynamic, reusable components for clarity and ease of use.

Our backend leverages Node.js along with WebSockets and WebRTC for seamless real-time video call functionality. Real-time transcription is handled using the Web Speech API, while logical fallacy detection and moderation feedback are powered by GPT-4 through strategically crafted prompts. We also integrated Stream React SDK to manage user interactions and streamline communication features. We chose PostgreSQL for reliable data management, integrated seamlessly with Prisma ORM.

Challenges we ran into

A significant challenge was ensuring real-time transcription and AI-driven fallacy detection operated seamlessly within live video calls without noticeable latency. Initially, integrating backend APIs, AI services, and frontend components was complex, but through careful debugging, iterative testing, and WebSocket optimization, we substantially improved responsiveness and overall user experience.

Accomplishments that we're proud of

We're proud of successfully implementing real-time AI moderation that provides immediate, relevant feedback during debates. Additionally, our modern, intuitive user interface significantly enhances user experience. Seamlessly integrating advanced technologies like GPT-4, WebRTC video streaming, and real-time analytics into a cohesive platform is another achievement we take pride in.

What we learned

We gained valuable experience in real-time audio and video streaming, AI integration, and natural language processing. Working with WebSockets taught us efficient real-time data handling, while combining frontend and backend technologies deepened our understanding of full-stack development. Additionally, using GPT-4 and the Web Speech API enhanced our skills in prompt engineering and real-time transcription.

What's next for DebateGuard

Moving forward, we plan to incorporate advanced visual behavior analysis such as gesture and emotion detection to offer deeper insights and enhanced moderation accuracy. We're also exploring a spectator mode, enabling third-party users to observe debates with live AI commentary. Personalization of AI moderation tones and development of user-specific analytics dashboards are further enhancements planned to enrich user experience.