Illusiogen - AI Image Generation with OpenAI's DALL-E

Illusiogen is a simple yet powerful full-stack web application that utilizes OpenAI's DALL-E image generation API to bring your imagination to life. It allows users to create and share images based on prompts they provide, which are then generated by the AI model. The application consists of a frontend built with React (Vite-based) and a backend powered by Node.js. Images are stored on Cloudinary, and the metadata is stored in a real MongoDB database.

Demo

https://illusiogen.vercel.app/

Features

• Image Generation: Create unique and personalized images by providing prompts to the DALL-E API.
• Cloud Storage: Images are stored on Cloudinary for efficient and reliable access.
• Social Sharing: Users can post their generated images along with their names for others to see and download.
• User Interaction: Engage with other users' creations and download their images.
• Fast and Responsive: Thanks to React (Vite-based) on the frontend and Node.js on the backend, Illusiogen delivers a smooth and fast user experience.

Getting Started

Follow these instructions to set up and run the Illusiogen project on your local machine:

Prerequisites

• Node.js (latest)
• MongoDB instance
• Cloudinary account (API key, API secret, and cloud name)

Installation

1. Clone the repository from GitHub:

git clone https://github.com/shubhjhawar/illusiogen.git
cd illusiogen

2. Install frontend and backend dependencies:

cd frontend
npm install
cd ../backend
npm install

Configuration

1. Set up environment variables:

In the root directory, create a .env file with the following variables:

# Backend Configuration
MONGODB_URI=your_mongodb_connection_string

# Cloudinary Configuration
CLOUDINARY_CLOUD_NAME=your_cloudinary_cloud_name
CLOUDINARY_API_KEY=your_cloudinary_api_key
CLOUDINARY_API_SECRET=your_cloudinary_api_secret

2. Run the application:

# In the "backend" directory, start the Node.js server
npm start

# In the "frontend" directory, start the React development server
npm run dev

Usage

1. Access the application by visiting http://localhost:3000 in your web browser.

2. Type in your prompt in the input field and click on the "Generate" button to create a unique image.

3. To share your creation with others, enter your name and click on the "Post" button.

4. Explore other users' creations, like and download the images you love.

Technologies Used

• Frontend: React, Vite, JavaScript
• Backend: Node.js, Express.js
• Database: MongoDB
• Image Storage: Cloudinary

Contributing

Contributions to Illusiogen are welcome and encouraged! Feel free to open issues and submit pull requests for bug fixes, new features, or improvements.

Contact Me

Feel free to drop an email at [email protected] in case of any queries.