AI_Image_Generator

This web application allows users to generate, share, search, and download AI-generated images. The app uses the OpenAI API to create stunning images based on user input or prompts. It also features a "Surprise Me" function, which randomly generates prompts to spark creativity and produce unique images.

Live Demo

You can try out the AI Image Generator App by visiting the GitHub Pages https://jasonsonthanhngo.github.io/AI_Image_Generator/

Preview

Desktop Preview

Home Page

Create Page

Phone Screen Preview

Technologies Used

• Frontend: React with Vite, Tailwind CSS, hosted on GitHub Pages
• Backend: Node.js with Express, hosted on Render
• Database: MongoDB
• Image Hosting: Cloudinary
• AI: OpenAI API

Features

• Image Generation: Users can input text prompts or use the "Surprise Me" function to generate AI-generated images.
• Sharing: Users can easily share the generated images with others through unique URLs.
• Search: Users can search for images based on keywords or tags associated with the generated images.
• Download: Users have the option to download the AI-generated images to their local devices.
• Modern UI: The app boasts a modern and intuitive user interface for a seamless user experience.
• Hover Preview: Users can hover over the generated images to see the associated prompts and the user who created it, adding an interactive touch.
• Data Storage: The app uses MongoDB to store and manage image data efficiently.
• Image Hosting: Images are hosted using Cloudinary, ensuring fast and reliable image delivery.

Installation

Prerequisites

Before proceeding, ensure you have the following:

• Node.js and npm installed on your machine.
• MongoDB set up and running.
• Additionally, make sure you have Vite installed globally by running npm install -g create-vite if you haven't done so already.

Follow these steps to run the AI_Image_Generator on your local machine:

1. Start by cloning the repository to your local machine: git clone https://github.com/jasonsonthanhngo/AI_Image_Generator.git
2. Navigate to the project directory: cd AI_Image_Generator
3. Next, navigate to the client (frontend) and server (backend) folders and install the required dependencies:
   cd client && npm install
cd ../server && npm install
4. Create a .env file in the server directory and provide the necessary environment variables as follows:
   OPENAI_API_KEY=your_openai_api_key
MONGODB_URI=your_mongodb_connection_string
CLOUDINARY_CLOUD_NAME=your_cloudinary_cloud_name
CLOUDINARY_API_KEY=your_cloudinary_api_key
CLOUDINARY_API_SECRET=your_cloudinary_api_secret
   • Replace your_openai_api_key, your_mongodb_connection_string, your_cloudinary_cloud_name, your_cloudinary_api_key, and your_cloudinary_api_secret with your actual API keys and connection strings.
5. Now, start the development servers for the frontend and backend.
   cd client npm run dev
cd ../server npm run dev
6. In your terminal, you will see a message like Server running at:
   • Ctrl+click on the localhost:5137 link to open the application in your browser.