Inspiration

The inspiration for Detoxy Fusion came from the need to create a more engaging and secure chat experience. I aimed to build a platform that not only provides a seamless messaging experience but also ensures user safety by filtering toxic content. Additionally, this filtering reduces API calls for image generation and allows me to reuse prompts from other users.

What it does

Detoxy Fusion is a modern chat application that integrates real-time messaging with AI-based toxicity filtering. It features easy Google login for quick access, a sleek and responsive design, and the ability to generate images based on user interactions. The app is designed to offer a premium user experience with minimal delays and a visually appealing interface. Users can also post content in the community section.

How I built it

I developed Detoxy Fusion using React for the frontend and Node.js with Express.js for the backend. I incorporated pre-made models hosted on Hugging Face and used the Gradio client to interact with them, while saving all data to MongoDB. For AI-based toxicity filtering, I integrated Google OAuth for authentication. The app also uses TailwindCSS for styling and a masonry layout for displaying images. Additionally, I secured my backend routes using JWT token middleware.

Challenges I ran into

One major challenge was optimizing the app’s performance to handle real-time messaging and image generation efficiently. I encountered issues with filters checking each message, which caused delays and server load. Handling live messages from users, maintaining the UI even after API failures, and debugging these issues consumed a significant amount of time.

Accomplishments that I'm proud of

I successfully implemented AI-based toxicity filtering, which significantly enhances user safety. The app’s modern design and seamless user experience were well-received. I managed to optimize performance to reduce loading times and improve speed, enable community sharing, and create a fast and secure live chat app with a sleek design.

What I learned

I learned the importance of optimizing both frontend and backend components for better performance. Handling real-time data and integrating AI models requires careful consideration of efficiency and user experience. I also gained valuable experience with the Gradio client, which allows me to use Hugging Face-hosted models on the client side without adding load to the server.

What's next for Detoxy Fusion

I plan to expand Detoxy Fusion by adding features such as video calling and enhanced AI capabilities. I aim to continue improving performance and UX and explore additional integrations to further enhance user engagement and safety. Some features, such as editing user profiles, adding friends, and deleting posts, are still on the to-do list and will be added later due to time constraints, as I was a solo developer.

Built With

Share this project:

Updates