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

# 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*

https://github.com/user-attachments/assets/90264456-4690-423a-813d-44d8d222ecc1

## 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.