Welcome to the AI Image Generator website! This is a full-stack web application that utilizes the MERN (MongoDB, Express.js, React.js, Node.js) stack, Vite.js and the OpenAI API to generate realistic images. The website is accessible to everyone through this link.
The following technologies were used to build this website:
- MongoDB: A document-oriented NoSQL database used to store photo links generated by the OpenAI API.
- Express.js: A back-end web application framework for Node.js used to create a RESTful API.
- React.js: A front-end JavaScript library used to create the user interface and interact with the API.
- Node.js: A JavaScript runtime environment used for the back-end server.
- OpenAI API: An artificial intelligence API that generates high-quality images based on user inputs.
- Cloudinary: An end-to-end image and video management platform that stores generated photos.
- Vite.js: A build tool that serves the website in development and optimizes the website for production.
The AI Image Generator website is designed to be simple and easy to use. Here's how it works:
- User clicks the "create" button
- User can choose to type anything or clicks the "surprise me" button to generate a random prompt
- User clicks the "Generate" button
- The website sends a request to the OpenAI API with the specified parameters
- The OpenAI API generates a high-quality image based on the parameters
- The website stores the generated image in Cloudinary and retrieves the image URL
- The website stores the image URL in MongoDB
- User can choose to share with the community by clicking the "share" button
- The website displays the generated image to the user at the Home page.
To run this website locally, follow these steps:
- Clone the repository:
git clone https://github.com/bbkx226/ImageGenerationAI.git - Install the dependencies for the server:
cd server && npm install - Install the dependencies for the client:
cd ../client && npm install - Create a file named .env in the server directory with the following content:
MONGODB_URL=<Your MongoDB connection string>
OPENAI_API_KEY=<Your OpenAI API key>
CLOUDINARY_CLOUD_NAME=<Your Cloudinary cloud name>
CLOUDINARY_API_KEY=<Your Cloudinary API key>
CLOUDINARY_API_SECRET=<Your Cloudinary API secret>
- Start the server:
cd ../server && npm start - Start the client:
cd ../client && npm run dev - Open http://localhost:5173 in your web browser to access the website.
This project is licensed under the MIT License - see the LICENSE file for details.
This project was created by Brandon Ban. If you have any questions or feedback, please don't hesitate to contact me at bbkx226@gmail.com.