SearchShield is a sophisticated web application designed to offer a seamless image search experience akin to Pinterest. It allows users to open an infinite number of tabs, utilize the "load more" feature for continuous browsing, save images, and visit the context links of images. The application is equipped with a robust profanity detection model trained on DistilBERT, boasting an F1 score of over 90%. This ensures that all search keywords are filtered for appropriateness, providing a safe and user-friendly experience.
- Users can open and manage an unlimited number of tabs, enhancing their browsing experience.
- Each tab operates independently, maintaining its own state and search history.
- The "load more" feature allows users to continuously load additional images without refreshing the page.
- This feature enhances user engagement and ensures a smooth browsing experience.
- Users can save images for future reference.
- Saved images can be accessed easily from the user's profile or saved items section.
- Users can visit the context links of images to explore more information about the image source.
- This feature adds depth to the browsing experience by connecting users to related content.
- The application integrates a profanity detection model trained on DistilBERT.
- The model has an F1 score of over 90%, ensuring high accuracy in filtering out inappropriate content.
- This feature ensures that all search keywords are appropriate and safe.
- SearchShield personalizes the user experience by maintaining a search history.
- Users can revisit their previous searches and manage their search history.
- The application features a user-friendly and visually appealing interface.
- The design is intuitive, ensuring a seamless and enjoyable user experience.
- The backend is built on Express.js, a fast and minimal web framework for Node.js.
- The server handles all API requests, authentication, and interaction with the database.
- User authentication is managed using JSON Web Tokens (JWT) and cookies.
- This ensures secure access to user-specific features and data.
- The application uses MongoDB as its database, with Mongoose as the ODM (Object Data Modeling) library.
- This setup allows for efficient data storage, retrieval, and management.
- React: A popular JavaScript library for building user interfaces, providing a component-based architecture that enhances code reusability and maintainability.
- Tailwind CSS: A utility-first CSS framework that enables rapid UI development by providing pre-defined utility classes.
- Axios: A promise-based HTTP client for making asynchronous requests from the client-side to the backend API.
- Vite: A fast build tool that supports React and modern JavaScript features, enhancing development speed and efficiency.
- The machine learning components are integrated using FastAPI, a modern and fast web framework for building APIs with Python.
- FastAPI serves the profanity detection model and interacts with the backend server for analyzing search keywords.
- The profanity detection model is based on DistilBERT, a smaller and faster version of BERT.
- The model is trained to detect inappropriate keywords with an F1 score exceeding 90%.
(THIS REPO IS EASY TO RUN IF FIRST AND FOREMOST YOU HAVE Mongodb database setup) Download mongodb compass, create a database
Clone the repository from GitHub.
https://github.com/Shivam-kum-mhta/SearchShield.gitNavigate to the project directory.
cd SearchShieldSet up the environment variables for the API keys, database connection, and JWT secrets.
for the .env file in backend directory
- CREATE a mongoDB compass database and paste the localhost link. Example is provided in env file in the backend directory.
- JWT secret key is already embeded in index.cjs, u can change if you want.
for the .env file in frontend directory
- A dummy api key and cx search-engine ID is provided.
- YOU can also generate your own cx search-engine id here https://programmablesearchengine.google.com/controlpanel/all .
and api key here https://developers.google.com/custom-search/v1/overview if u want :) .
for the ml directory.
-"read-only" Access token for the hugging face - DISTILLBERT model is embedded already in the codebase , so no worries.
Open three instances of terminal
TERMINAL-1 Start the backend server
cd backend npm install npm run devOR
node index.cjsTERMINAL-2 Start the frontend application using npm run dev (for Vite).
cd frontend npm install npm run devTERMINAL-3 Start the ml application Ensure that you have python installed , (in my setup it was python 3.12 version)
cd ML-model- Create a virtual environment
python -m venv venv- Activate the virtual environment (On windows/Powershell/git bash)
venv/Scripts/activate pip install -r requirements.txt- Start the uvicorn server
uvicorn app:app --reload
- Open the application in your browser.
- Click on the "Sign Up" button.
- Fill in the required details and submit the form.
- Enter a keyword in the search bar.
- Browse through the images and open new tabs as needed.
- Use the "load more" button to fetch additional images.
- Save images to your profile by clicking the "Save" button.
- Visit the context link of an image by clicking the "Visit" button.
- You can sign in when visited later
- Access your profile from the navigation menu.
- View your saved images and search history.
- Manage your saved items and history as needed.
- Implementing more advanced search filters and sorting options.
- Enhancing the recommendation system for personalized content.
- Adding social features like sharing and commenting on images.
- Continuous improvement of the profanity detection model for even higher accuracy.
SearchShield is a powerful and user-friendly image search application designed to provide a safe and engaging browsing experience. With its advanced features and robust backend, it ensures that users can explore and save images securely and efficiently.