AI_IMAGE_GENERATOR_MERN_PROJECT

AI_IMAGE_GENERATOR_MERN_PROJECT is a full-stack MERN (MongoDB, Express.js, React.js, Node.js) application that allows users to generate AI images from text prompts, share these images with the community, and explore images created by others.

Features

• AI Image Generation:
  Generate images from text prompts using Stability AI's Stable Diffusion engine via API integration.
• Community Sharing:
  Share generated images with the community, including your name and the prompt used.
• Browse Gallery:
  Explore and search a gallery of images generated by users.
• Responsive UI:
  Modern, responsive interface built with React and styled-components.
• Image Hosting:
  Generated images are uploaded and hosted on Cloudinary.
• Search Functionality:
  Filter community posts by prompt or author name.
• Theming:
  Support for light and dark themes.

Tech Stack

• Frontend: React, styled-components, MUI, React Router
• Backend: Node.js, Express.js, MongoDB (via Mongoose)
• AI Generation: Stability AI's Stable Diffusion API
• Image Hosting: Cloudinary

Project Structure

client/
  ├── public/
  └── src/
      ├── api/           # Axios API calls to backend
      ├── components/    # Navbar, SearchBar, Cards, Buttons
      ├── pages/         # Home (gallery), CreatePost (image generator)
      ├── utils/         # Theme definitions
      ├── index.js
      └── App.js
server/
  ├── controllers/       # Express route controllers (Posts, GenerateImage)
  ├── models/            # Mongoose models (Posts)
  ├── routes/            # API route definitions
  ├── index.js           # Express app entry point
  └── .env               # Environment variables (not included)

Setup Instructions

Prerequisites

• Node.js (v16+ recommended)
• npm or yarn
• MongoDB instance (local or Atlas)
• Cloudinary account (for image hosting)
• Stability AI API key

1. Clone the repository

git clone https://github.com/sanketkanse999/AI_IMAGE_GENERATOR_MERN_PROJECT.git
cd AI_IMAGE_GENERATOR_MERN_PROJECT

2. Setup Environment Variables

Create a .env file inside the server directory with the following keys:

MONGODB_URL=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
STABILITY_API_KEY=your_stability_ai_api_key

3. Install Dependencies

Backend

cd server
npm install

Frontend

cd ../client
npm install

4. Run the Application

Backend

cd server
npm start

Frontend

cd client
npm start

The frontend will run on http://localhost:3000 and the backend API on http://localhost:8080.

Usage

• Create a New Image:
  Click "Create new post", enter your name and a descriptive prompt, and generate an image using AI. Once satisfied, share it with the community.

• Explore Gallery:
  Browse posts from all users and use the search bar to filter images by prompt or author.

API Endpoints

• POST /api/generateImage/
  Generate an image from a prompt.
• GET /api/post/
  Get all community posts.
• POST /api/post/
  Share a generated image with the community.

License

This project is for educational/demo purposes.

---

Developed by sanketkanse999

⬆️ Back to top