Skip to content

This project, "Spoiler Shield AI," is a browser extension designed to detect and hide spoilers on the web using AI

License

Notifications You must be signed in to change notification settings

LuloDev/spoiler-shield-ai

Repository files navigation

SPOILER-SHIELD-AI

Enjoy your favorite content without the fear of spoilers!

license last-commit repo-top-language repo-language-count

Developed with the software and tools below.

Vite Svelte HTML5 Axios


πŸ”— Quick Links


πŸ“ Overview

"Spoiler Shield AI" is a chrome extension designed to detect and hide spoilers on the web using advanced AI technologies. The project leverages the Vercel AI package to make calls to various AI services, including OpenAI, Anthropic, and Ollama. This ensures robust and accurate spoiler detection across different platforms, particularly focusing on YouTube, TV shows and movies.


πŸš€ Getting Started

Install from Chrome Web Store (Recommended)

Install Spoiler Shield AI

Compile the extension yourself

Requirements

Ensure you have the following dependencies installed on your system:

  • node: version 20

βš™οΈ Installation

  1. Clone the spoiler-shield-ai repository:
git clone https://github.com/LuloDev/spoiler-shield-ai.git
  1. Change to the project directory:
cd spoiler-shield-ai
  1. Install the dependencies:
pnpm install

πŸ€– Running spoiler-shield-ai

Use the following command to run spoiler-shield-ai:

pnpm run build

Upload Extension to Chrome (Developer Mode)

To test your "Spoiler Shield AI" extension in Chrome's Developer Mode, follow these steps:

This will generate the necessary files in the [dist]

  1. Open Chrome Extensions Page: Open Google Chrome and navigate to the Extensions page by entering the following URL in the address bar:

    chrome://extensions/
  2. Enable Developer Mode: In the top right corner of the Extensions page, toggle the "Developer mode" switch to enable it.

  3. Load Unpacked Extension:

    • Click on the "Load unpacked" button.
    • In the file dialog that opens, navigate to the [dist]directory where your extension files are located.
    • Select the [dist]directory and click "Open".
  4. Test Extension: The extension should now be loaded in Chrome. You can test its functionality by navigating to websites and verifying that spoilers are detected and hidden as expected.


πŸ“¦ Features

Feature Description
βš™οΈ Architecture The project follows a modular architecture using components in Svelte with TypeScript for strong typing. It utilizes Tailwind CSS for styling and Axios for API interactions, enhancing user experience and code maintainability.
πŸ”© Code Quality Codebase maintains good quality with TypeScript support, clear component structure, and adherence to coding standards. Linting tools like svelte-check and postcss.config.js contribute to consistent coding practices.
πŸ“„ Documentation Documentation is well-maintained with configuration files like package.json, tsconfig.json, and postcss.config.js explained. README provides an overview of project setup and usage. Inline code comments help in understanding specific functionality.
πŸ”Œ Integrations Key integrations include vite. External dependencies like axios for API requests, shadcn-svelte, Tailwind CSS for styling are integrated for enhanced project capabilities.
🧩 Modularity The codebase is highly modular with components organized in separate directories. Dependencies management in package.json and TypeScript usage promotes code reusability and easier maintenance.
⚑️ Performance Performance can be optimized further by considering bundle size reduction techniques, lazy loading, and efficient data fetching strategies. Utilizing Vite for fast builds and optimizations can improve overall performance.
πŸ›‘οΈ Security Security measures like data validation using Zod, secure API handling with Axios, and maintaining secure coding practices with TypeScript contribute to data protection. Access control mechanisms can be further enhanced based on specific requirements.
πŸ“¦ Dependencies Key external libraries and dependencies include Tailwind CSS for styling, Axios for API requests, and Zod for data validation. These dependencies play crucial roles in the functionality and user experience of the project.
πŸš€ Scalability The project's scalability is supported by the modularity of the codebase and the use of modern tools like Vite and SvelteKit. Adopting microservices architecture and implementing caching mechanisms can further scale the project effectively.

πŸ›  Project Roadmap

  • β–Ί Block Youtube
  • β–Ί Block TV shows
  • β–Ί Block Movies
  • β–Ί Customize Prompt Configuration

🀝 Contributing

Contributions are welcome! Here are several ways you can contribute:

Contributing Guidelines
  1. Fork the Repository: Start by forking the project repository to your GitHub account.
  2. Clone Locally: Clone the forked repository to your local machine using a Git client.
    git clone https://github.com/LuloDev/spoiler-shield-ai.git
  3. Create a New Branch: Always work on a new branch, giving it a descriptive name.
    git checkout -b new-feature-x
  4. Make Your Changes: Develop and test your changes locally.
  5. Commit Your Changes: Commit with a clear message describing your updates.
    git commit -m 'Implemented new feature x.'
  6. Push to GitHub: Push the changes to your forked repository.
    git push origin new-feature-x
  7. Submit a Pull Request: Create a PR against the original project repository. Clearly describe the changes and their motivations.

Once your PR is reviewed and approved, it will be merged into the main branch.


πŸ“„ License

This project is protected under the MIT License. For more details, refer to the LICENSE file.


πŸ‘ Acknowledgments

Return