AITOOLS - MERN Web Application

Table of Contents

• Overview
• Preview
• Features
• Technologies Used
• Project Structure
• AI Image Generation
• Text Summarization and Translation
• Usage
• Contributing

Overview

AITOOLS is a powerful MERN stack web application that offers two primary functions: AI image generation and text summarization and translation. This project leverages Node.js, Express.js, MongoDB, and React.js to provide a seamless user experience for both creative image generation and efficient text processing.

Preview

View Live Demo

Features

Homepage

• Displays a grid of previously generated AI images.
• Hovering over images reveals additional information: the generator's name, the prompt used, and the model used.
• Allows users to download generated images.

Header

• Contains a logo on the left side.
• Provides two main buttons: "Create" and "Summarize."
• Clicking "Create" redirects to the image generation page.
• Clicking "Summarize" redirects to the text summarization and translation page.

Image Generation Page

• Offers a form for users to input their preferences:
  • Name
  • Prompt
  • Model (selected from a dropdown)
• Displays the generated image along with a spinner during generation.
• Provides a "Share with Community" button to save the generated image and its related data to the MongoDB database.
• Redirects users to the homepage with the newly generated image displayed first in the grid.

Text Summarization and Translation Page

• Supports three main functionalities:
  1. Summarization from input URL or text (paragraph), with the output displayed below.
  2. Summarization and translation from input URL or text (paragraph).
  3. Translation from input text.
• Saves user history using local storage, allowing quick access to previously processed text data.
• Offers the ability to copy summarized or translated text to the clipboard.

Technologies Used

• Node.js and Express.js: For server-side development and API endpoints.
• MongoDB: As the database for storing generated images and related data.
• React.js: For building the responsive and dynamic user interface.
• Tailwind CSS: To create a beautiful and responsive UI with a glass morphism design.
• Hugging Face Models: Deep learning models for generating images from text input.
• Cloudinary: A cloud-based image storage service for managing and serving images efficiently.

Project Structure

The project is organized as follows:

• server: Contains server-side code, including API routes and database configuration.
• client: Contains the React.js front-end code and UI components.
• models: Defines MongoDB schemas for storing image and text data.
• utils: Contains utility functions and configuration files.
• public: Holds static assets and the HTML template for the React app.

AI Image Generation

The AI image generation feature allows users to input their preferences, including a name, prompt, and model choice. The generated image is displayed with a spinner during processing and can be shared with the community.

Text Summarization and Translation

The text processing feature offers three main functions: summarization, summarization with translation, and translation. Users can input text or URLs to receive concise summaries or translations, making it a powerful tool for content analysis and language translation tasks.

Contributing

Contributions to this project are welcome. Please follow best practices for code quality, documentation, and testing when submitting pull requests.

Enjoy using AITOOLS for AI image generation, text summarization, and translation!