Implement real-time online debate platform with structured phases and AI judgment using WebSocket and WebRTC

Problem Statement

The current debate system lacked a comprehensive, real-time environment for human-vs-human debates. There was no support for:

• Seamless live video/audio communication between debaters.
• Structured debate phases with enforced timers and clear turn management.
• Automatic transcript generation through speech recognition.
• AI-based evaluation of debates with detailed scoring and feedback.
• Intuitive room management and user interaction for creating/joining debates.

Proposed Solution

Develop a robust online debate platform that facilitates real-time human-vs-human debates with structured phases, integrated speech recognition, and AI-driven judgments.

Key Features:

• Real-Time Debate Room: Leverages WebSocket for instant messaging and WebRTC for peer-to-peer video/audio streaming.
• Structured Debate Phases: Implements predefined debate phases with timers, ensuring a fair and organized flow.
• Role Selection and Readiness Checks: Allows debaters to choose sides and signal readiness before the debate begins.
• Speech Recognition: Integrates the Web Speech API for converting spoken arguments into text in real-time.
• AI-Based Judgments: Uses AI (Gemini model) to analyze transcripts and provide objective scoring based on clarity, relevance, and persuasiveness.
• User-Friendly UI: Features visual feedback with avatars, timers, turn indicators, and a detailed judgment popup.
• Debate Room Management: Simplifies room creation and joining with unique room codes and secure connection handling.
• Message Persistence: Stores debate transcripts and results in MongoDB and optionally as JSON files.

Implementation Details

1. Real-Time Online Debate Room

• Description: A fully functional real-time debate environment using modern web technologies.
• Implementation Details:
  • WebSocket: Employed in the OnlineDebateRoom component and backend WebsocketHandler for real-time bidirectional communication.
  • WebRTC: Integrated via RTCPeerConnection for peer-to-peer video and audio streaming.
  • Room Management: Limits each room to two debaters, with proper cleanup when a user disconnects.
• User Benefit: Ensures live, interactive communication with video and audio support.

2. Structured Debate Phases with Timers

• Description: A structured sequence of debate phases to maintain order and fairness.
• Implementation Details:
  • Phases: Defined in a DebatePhase enum (e.g., Setup, OpeningFor, OpeningAgainst, etc.).
  • Timers: Each phase has a set duration managed via useEffect hooks, automatically transitioning phases when time expires.
  • Turn Indication: Uses isMyTurn logic to highlight the active debater with visual effects.
• User Benefit: Provides an organized and time-bound debate experience.

3. Role Selection and Readiness Checks

• Description: Enables users to select their debate role and confirm readiness before the debate starts.
• Implementation Details:
  • Role Selection: Users choose their stance (for or against) in the setup popup, with mechanisms to prevent duplicate role selection.
  • Readiness Checks: Utilizes a toggleReady function to signal readiness via WebSocket, with visual readiness indicators.
  • Countdown: Initiates a 3-second countdown once both users are ready, then starts the debate.
• User Benefit: Ensures debaters are properly assigned and ready, setting the stage for a smooth debate start.

4. Speech Recognition for Transcript Generation

• Description: Automatically converts spoken arguments into text in real-time.
• Implementation Details:
  • Web Speech API: Integrated into OnlineDebateRoom using SpeechRecognition (or webkitSpeechRecognition) to capture interim and final transcripts.
  • Auto-Start/Stop: Activates when it’s the user’s turn and deactivates at phase transitions.
  • Manual Control: Provides a toggle button for the microphone (Mic/MicOff icons).
• User Benefit: Reduces manual effort in creating transcripts and ensures accurate record keeping.

5. Transcript Submission and AI-Based Judgment

• Description: Aggregates debate transcripts for AI-based evaluation and detailed scoring.
• Implementation Details:
  • Transcript Collection: Aggregates transcripts from each phase stored in local storage.
  • Submission: Sends transcripts to the /api/submit-transcripts endpoint, processed by the backend.
  • AI Judgment: The JudgeDebateHumanVsHuman function uses the Gemini AI model to evaluate transcripts and return scores and feedback.
  • Database Storage: Stores transcripts and results in MongoDB, with duplicate judgment prevention.
  • Polling: Frontend polls for judgment results every 2 seconds if waiting for the opponent’s submission.
• User Benefit: Provides objective, detailed feedback on debate performance with minimal delay.

6. User-Friendly UI with Visual Feedback

• Description: An intuitive interface with clear visual cues and interactive elements.
• Implementation Details:
  • Avatars: Displays user avatars sourced from local storage with fallback URLs.
  • Timers: Shows countdown timers in MM:SS format, with warnings when time is nearly up.
  • Turn Indicators: Highlights the active speaker with animations and text cues.
  • Judgment Popup: Presents detailed scoring, feedback, and verdict in a scrollable modal.
• User Benefit: Enhances engagement and clarity, making the debate experience enjoyable and informative.

7. Debate Room Creation and Joining

• Description: Simplifies the process of starting or joining a debate.
• Implementation Details:
  • DebatePopup: Provides a modal interface for room creation (with a random 6-character code) or joining an existing room.
  • Routing: Uses react-router-dom to navigate to /debate-room/{roomId}.
• User Benefit: Streamlines access to debates and enhances usability.

Expected Impact

• Enhanced Communication: Real-time video and audio streaming provide an immersive debate experience.
• Structured and Fair Debates: Timed phases and clear turn management ensure a balanced and organized debate flow.
• Improved Accessibility: Automatic transcript generation and intuitive UI lower the entry barrier for users.
• Objective Evaluation: AI-driven judgments deliver detailed and unbiased feedback to enhance user performance.
• Robust Room Management: Simplified creation/joining and security measures contribute to a stable, scalable platform.

Current Problem Demonstration

Please refer to the attached video for a demonstration of the current implementation issues

Additional Notes

This issue introduces a robust, feature-rich online debate platform for human-vs-human debates. The integration of real-time communication, AI-based scoring, and a user-friendly interface is designed to provide an engaging and fair debate environment. Feedback is welcome, and further modifications can be implemented as needed.