Initial commit for YouTube Live Chat Overlay project.

README.md

@@ -0,0 +1,58 @@
+# YouTube Live Chat Overlay
+
+This project provides a customizable web-based overlay for displaying live chat messages from YouTube streams. It consists of a Python backend that scrapes chat data and a simple HTML/CSS/JavaScript frontend for rendering the overlay.
+
+## Features
+
+*   Real-time display of YouTube Live Chat messages.
+*   Automatic assignment of unique, persistent colors to chat participants.
+*   Conversion of common text-based emotes to Unicode emojis.
+*   Rich text markup for emotes (e.g., colored text).
+*   Designed for use with streaming software like OBS Studio as a "Browser Source".
+
+## Installation and Usage
+
+### Prerequisites
+
+*   Python 3.8+
+*   `pip` (Python package installer)
+
+### Setup
+
+1.  **Navigate to the project directory:**
+    ```bash
+    cd /home/joe/Cloud9/Documents/Obisdian/projects/Overlays/youtube-chat-overlay
+    ```
+
+2.  **Create and activate a Python virtual environment:**
+    ```bash
+    python3 -m venv venv
+    source venv/bin/activate # For Bash/Zsh
+    # or source venv/bin/activate.fish # For Fish Shell
+    ```
+
+3.  **Install required Python packages:**
+    ```bash
+    pip install Flask Flask-Cors pytchat rich
+    ```
+
+### Running the Overlay
+
+1.  **Start the Backend Server:**
+    Open your terminal, navigate to the project directory, activate your virtual environment, and run the `backend.py` script:
+    ```bash
+    python overlay_backend.py
+    ```
+    The script will prompt you to "Enter the YouTube Live Stream Video ID for the overlay:". Provide the 11-character ID of the live stream you wish to monitor and press Enter. The Flask server will start, typically on `http://127.0.0.1:5000`.
+
+2.  **Open the Web Overlay:**
+    *   **In a Web Browser:** Open your preferred web browser and navigate to the `index.html` file located at `/home/joe/Cloud9/Documents/Obisdian/projects/Overlays/youtube-chat-overlay/index.html`. You can usually drag and drop the file into your browser, or type the full `file://` path in the address bar.
+    *   **In OBS Studio (as a Browser Source):**
+        1.  In OBS Studio, add a new "Browser" source.
+        2.  Check "Local file" and browse to select the `index.html` file.
+        3.  Set the width and height as desired (e.g., 1920x1080 or a custom size for your chat box).
+        4.  Ensure "Refresh browser when scene becomes active" is checked.
+
+## Development and Future Plans
+
+For more detailed information on the project's current status, known issues, and future development ideas, please refer to the `DEVELOPMENT_PLAN.md` file in this directory.